Transcript ppt
Python and Web Programming November 21, Unit 8 Web Scripts • Programs that generate web pages are often called web scripts or CGI scripts • Like using XSL to transform an XML file into an HTML file, we can use web scripts to create web pages for us • Why use web scripts? – Allows use to dynamically generate web pages • These web pages are created upon request – Standard HTML files stored on a server are called static web pages or static files • They don’t really change (unless we edit the HTML) Creating Web Pages • We can create web pages using a script in many different languages • Obviously, we can use Python (since that’s what we’re learning) • Other common languages include: – Perl – PHP – ASP Simple Page in Python • Creating a simple web page in Python is very similar to how it was done using XSL • Basically, the Python program will need to output the HTML we need for our page • To do this, we’ll use a series of print statements • The basic things we need are: – Header information (text/html) – A blank line – <html>, <head>, <title>,<body>, HTML content, and closing tags Simple Python Script print “Content-type: text/html” print print ”<html><head>” print “<title>Python Example</title>” print ”</head><body>” print “<h1>Python is fun</h1>” print “<p> Python made this page</p>” print “</body></html> “ Header Information • print “Content-type: text/html” • This produces the header information for our web page • Basically the purpose of this is to tell the browser which type of information is going to be sent – Indicates the MIME type • When we put a python script online, it has the extension “.py” – Browser needs to know that HTML is coming • Why the blank line after the header? – Indicates the start of the HTML Triple-Quoted Strings • When we create web pages with Python we can dynamically change parts of the page – But large portions of the page may be static • Instead of having multiple print statements we can use fewer and enclose much of our HTML in triple quoted strings “’ – Allows us to have line breaks where double quotes do not in python Triple-Quoted String Example print “Content-type: text/html” print print ”””<html><head> <title>Python Example</title> </head><body> <h1>Python is fun</h1> <p> Python made this page</p> <body></html> “”” • This produces the same output as the first example Python script • Allows us to copy and paste large chunks of HTML Python Generated Web Pages • The previous scripts are kind of pointless to do with Python – They actually create static web pages – They don’t change • But we can generate web pages that do change • A simple example is to include the current time on a web page Adding Time to a Web Page import time print “Content-type: text/html” print print “’<html><head><title>Time Page</title></head>”’ print”<body><p>Right now, the time is <strong> “ print time.asctime(), “</strong></p>” Print “</body></html>” Output From Last Script Content-type: text/html <html><head><title>Time Page</title></head> <body><p>Right now, the time is <strong>Tue Nov 21 13:45:00 2005 </strong></p> </body></html> Running Python Scripts • When we run this script locally, we see the output from our script – What we have on the last slide – We don’t see the web page we wanted to create • To get the page to display we need to upload it to the cmpt165 server – Our webpage will have the URL path of somepage.py • We can test our use of the timeasc function by running it in IDLE – The output will show up in the window raw_data vs. Forms • Right now we’re using raw_data to get user input • But if we’re using a web page, we have no console for the user to enter data into • Instead we’ll use forms • Forms allow users to enter data into a web page – This data is then sent back to the web script on the web server • We are familiar with forms – We enter information into a form when we use a search engine – Purchase items online Building a Basic Page with a Form • The first thing we need is the <form> tag • The <form> tag goes around the entire form – Does not affect the appearance of the page – Just notes where the form begins and ends – Just like writing standard HTML • <form> needs an attribute called “action” – This specifies the action to be taken when the form is submitted <form>, cont. • The action attribute is very important – Why have a form that does nothing? • action specifies which script to run when the form is submitted • The value for action should be the URL of the script • <form action = “testScript.py”> • <form action = “someFolder/customerInfo.py”> Adding Controls • Controls are those elements which we are going to add to the form – – – – – – Text fields Text areas Check boxes Radio Buttons Selectable Lists Submit button • A form without controls is pointless – There’s no user input! • We are going to add controls using the <input> tag <input> Tag • With the <input> tag we need to specify two attributes: – type – name • Type attribute specifies the type of control • Name attribute gives a name to the control so we can access the data in it later – Like giving it a variable name Type Attribute • Again, the type attribute specifies the type of control • Some examples include: – type =“text” - text box – type =“checkbox” –check box – type =“radio” –radio button – type = “submit” –submit button • Example: <input type =“submit”….. Name Attribute • We have to have a name to access the information in a particular portion of the form – Very similar to naming variables • It’s best if the name relates to the content of the control and the control type – Ex. • A text box control which gets a customer name could have a name= “customerName” • A check box control which allows customer to select getting product updates name=“checkUpdates” Value Attribute • Sometimes we’ll also want to add a value attribute • The value attribute specifies the default value for that control • Ex. – <input type=“text” value=“a textbox” name=“textbox1”/> • “a textbox” would appear in the text box • Checkboxes can use the checked property to indicate if it should be checked by default – <input type=“checkbox” checked=“checked” name=“checkbox1”/> – If checked=“checked” then the box will appear checked – “checked” is the only value that the checked property can have Other Useful Text Attributes • size attribute indicates how wide the text box should be <input type = “text” name=“text1” size =“10”/> – Size indicates how many characters, in this case 10 • maxlength is just like size except that it indicates the maximum number of characters a text box will accommodate Submit Type • We have to have a way to send the form information to the script that’s going to handle it • To do this we can use a control with the type “submit” • It will show up as a button • The value attribute will indicate the text which should be displayed on the button <input type=“submit” value=“Go” name=“submitButton”/> HTML Form Example In class Example What’s Next? • • • • So now we can create forms And users can enter information But how the heck do we use it? We are going to use CGI to take the information from the form and process it somehow – We’ll get into this next class • You’ll be using CGI to take order information Questions • What you should know: – What web scripts are – How to create a webpage using Python – How to use triple quoted strings – How to write a form in HTML • <form action=“someprogram.py”> • <input>