Introduction to Nvu and Creating Forms for Python CGI Programs

Index of this page

• Related pages
• Creating Static Web Pages
• Loading Files onto the Server
  • My FTP Sites Dialog Window 
  • The Main Filezilla Window
• Web forms and Python CGI scripts
  • Editing Fields in the Normal Graphical View
  • Editing Fields in the Source View
• Testing and finishing

Related pages

1. Linux Basics from a Remote Terminal 
2. (this page) Static web page editing and forms are discussed in Html Form Editing.  
3. See The Overall CGI Process for an introduction to dynamic web pages.
4. The cgiTest Index Page links to all the resources on static and dynamic web development

Creating Static Web Pages

1. We will introduce the NVu web page editor, essentiall just using it as a word processor to create static pages.  Later we will show how to make dynamic pages that interact with the web user through web pages and Python scripts on the server.
   
   We will use NVu because it is free software, and is pretty easy to use, like a common word processor.  Unlike a common word processor we will be able to easily look at the html markup code underneath, that you should be reading a little about in your text.  It is not necessary to know a lot about the details of the markup codes for html files to use NVu.  
2. Start it in University Windows labs by going to the start menu and Loyola software -> Math and Comp Sci -> NVu
   
3. You may get popup window wanting to count users of NVU.  Click OK as another user of NVu.
   
4. Go to the File menu and click on New.  You will get what looks like an empty document. Look at the bottom of your window.  You shold see a 'Normal' tabs selected, with other choices beside it, including a Source tab.  Click on that.   In fact, though you have added no content, you already habe the basic markup to make an html page.  Click again on the Normal tab to go back to the Normal view (of no content  at the moment).  Assume you are making a home page for yourself.  Make a title and some introductory text.  Use regular word processor features like marking your title as Heading 1 in the drop down box on a menuy bar that may start off displaying 'Paragraph' or 'Body Text'.  You can select text and make it bold or italics; enlarge it ... using the editing menu or icons.
5. Before getting too carried away, I suggest saving your document as index.html.  Your Python directory works, or make a special web or www directory. 
6. Just for comparison, switch back and forth between the Normal and Source views to see all that has gone on underneath your view, particularly if you edited the format of your text.
7. You can go open your browser on the index.html file you saved, and see how it looks outside the editor.  You can do this by double clicking on it in a directory window, though in the lab this may force you to use Internet Explorer.  You can also put the local lolcation into any browser, like Firefox.  Start file locations with "file:///".  For example if I stored the page on my flashdrive at f:\python\www\index.html, I might type in the URL:  file:///f:/python/www/index.html
8. Now we need to allow others to see your page....  

Loading Files onto the Server

Files are uploaded to the Computer Science server xenon server via the secure sftp protocol.  Some servers allow the older unsecure ftp instead.  You can do either using Filezilla.  It is available for free download or in the University Computer labs by going to start Loyola Software -> Internet Tools -> Filezilla

Depending on what the system has remembered from an earlier time, you may see a dialog window with "My FTP Sites" in the top left or a regular window with title Filezilla...  We consider the initial possibility first.

My FTP Sites Dialog Window 

1. Click on the button for a New site.
2. You should see a label Host.  Fill in the field as with PuTTY:
       xenon.cs.luc.edu
   
3. Make sure the Server type has SFTP selected.
   For Logontype, click normal
   For User, use your login ID on xenon (same as for your PuTTY terminal)
   
4. Click Connect
5. At least the first time you will see a popup window about the Server host key:  Click yes.
6. Then you should see: 

The Main Filezilla Window

1. If this window came up initially, with no Dialog window before it, then you still need to indicate your connection.  Fill in Address as
     sftp://xenon.cs.luc.edu
   Fill in user and password with the data for your Computer Science login, and click on Quickconnect.  (If you close and reopen Filezilla later, you should also be able click on the down arrow beside Quickconnect, and select past data.)
2. Once you have set up the connection, some time should pass while a transcript of low level commands managed up Filezilla flies by in the top window pane.  On the left you should see a local directory tree pane over a directory window for the current directory.  In the left main pane, eventually, you should see a directory listing of your remote home directory on xenon.  Now you can double click to change directories and drag files from one side to the other.  The response on the local side should be prety quick, but you may have to wait for the remote (right) side.  As a test:
3. Navigate in the local directory tree to the directory of your index.html page.
4. On the xenon side we will be only doing things for the web, which are based at your public_html directory.  Double click on that in the right window.  Wait for a listing to come up.  You should see the index.html file generated by my script creating your web site.  
   
   Any time you try something with the right window, you might see a message in red in the top low-level transcript window indicating your connection timed out.  If that is the case, click on Quickconnect to reestablish your connection (and wait for it).  Sometimes when you click to chnage directory or something, the remote part just hangs, and maybe gives a warning tone.  In that case, close the program and start over.
5. After all goes well, you should replace the old index.html on xenon by the local version you wrote in NVu.  Just drag the local index.html file to the xenon side.  Because the file name is the same as an existing file, you should see a popup window asking if you want to make a replacement.  make sure Overwrite is selected, and click OK.  Then the bottom window should indicate uploading progress.
6. When the upload is complete, take your browser back to your Computer Science Home Web page.  If you were already there, you will need to click the Refresh button. Look at your work.  Now anyone in the world on the Internet can see it.  Try entering the address of the home page of a neighbor in the lab!  
7. You now have the basic mean to make a web site with multiple pages.  You can add links between them in NVu.  That is not our focus.  We move on to dynamic pages interacting with web forms.  
8. If you are not yet familiar with the sequence of interactions with forms and CGI scripts, see The Overall CGI Process, until it suggests learning more about editing forms.

Web forms and Python CGI scripts

I suggest you start in NVu from my formTemplate.html.  We will discuss the useful features it has built in.  So you do not overwrite formTemplate.html, immediately save it under an appropriate name for your project.

I suggest that you use the Normal graphical view to first make as many copies of the different kinds of fields as you need, and delete the excess.  Make sure you keep at least one copy of the Submit Query button.   Move the pieces around where you want them.  Fill in the regular text in the page (the part outside of the individual form fields), in particular the user's labels for the form fields.  Any label use enter for the browser user is distinct from the form field name attribute in the html markup.

When you have the visible state in a reasonable form, go on to the attributes that underlie each field.  These cannot be modified by just typing directly into the Normal view (not even the initial text in the text fields), but you do have two approaches to chose from to change the attributes:

1. In the Normal graphical GUI.
2. Using the Source view tab.

Editing Fields in the Normal Graphical View

Right click on the fields for individual form elements and then in the popup menu select "Form Field Properties..." to modify field attributes.  Options are clearly labeled for the current field, and you can make your selections and changes in a straightforward fashion. 

• Advantages:  you can add attributes easily, and can see the choices, particular for those that were not set before at all. 
• Disadvantages:  You have to click and bring up a form for one field at a time, and so there are a lot of mouse clicks and you cannot see the settings for other fields at the same time. 
  

To set the action attribute for the whole form after you have everything else right, right click on a blank space inside the overall form and select "Form Properties..." to bring up the editing box for the whole form. Make sure the action is set to the Python CGI script that will receive this page's data.

You can also create new form elements without copying them from formTemplate.html.  Click at location in the form where you want the field.  Click on down arrow to the right of  the form icon in the top toolbar, select Form field …  Then select the type of entry you want:  text, check box, radio button are most commonly used.  Choose attributes as described above.

Editing Fields in the Source View

• Advantages:  You do not need a bunch of mouse clicks to edit the plain text.  You can see all the attribute values at once, which is useful to make sure you keep names different or the same, whatever your needs are.
• Disadvantages:  If you want to add an attribute that did not appear before at all, you have to figure out the proper syntax!  Putting a stray character outside the quoted attribute value strings, can mess things up.  

Testing and finishing