creating databases applications for the web reprise. basic html review, forms preview: server side...
TRANSCRIPT
Creating Databases applications for the Web
Reprise. Basic HTML review, forms
Preview: Server side vs client side
Classwork: create HTML forms and check query string
HW: Review HTML forms
Recall
• What is a database? A database is made up of ….
• What interprets the HTML and the JavaScript?
• What interprets the php?
• What interprets the SQL?
• Note: I will repeat myself on this issue!
Postings
• ????• Please put in comments on the site, NOT just a
link– This is a required part of the assignment.– You can edit your post.
• This is required (points awarded)• It is helpful for all of us.• It is good training.• …..
Caution
• Chicken and egg problem: what to explain first
• Try some skipping ahead to motivate explanations.
Hypertext markup language• Interpreted by browser on client• Displays information• Gathers information to send to server by
invoking a php script– Most typical way: HTML form– <a> element with extra information in query
string (explained soon)
• HTML5 supports some checking of information put into the form!
Form validation
• Probably should put in checks anyway: belt and suspenders
• However, keep in mind that the automatic validation will be done faster than whatever we write in JavaScript.
HTML review• Ordinary text plus tags. Tags are singletons
or pairs
• template for all html files:
<html>
<head><title> ... </title> </head>
<body>
...
</body> </html>
HTML examples (old style)<h1>My summer vacation </h1>Creating an <i>html</i> file requires attention to detail.
<p> <br> <hr><table><tr> <td> 1 </td> <td> 2 </td> <b>3</b> </td> </tr>
<tr> … </tr></table>
HTML: newer style
• Use styles, including new semantic elements
• Put as much of the formatting as possible into CSS.
• Recall: HTML5 logo example (also chance to introduce drawing on canvas)– http://faculty.purchase.edu/jeanine.meyer/html5
/html5logoscale.html
3-tier logic/implementation model
• Presentation– content (including structure) HTML5– format CSS– behavior JavaScript
• Business logic php
• Information MySQL
HTML Tables
• Used to display data from database!
• Often, [your] PHP code will generate the table tags: tr, td
• Note: often CSS can be used in place of tables, especially for general layout. – You will see many warnings to avoid tables
• For tables of data, use tables!
HTML tags referencing files
<img src="frog.gif">
<img src="../images/frog.gif">
<a href="next2.html"> Continue </a>
<form action="takedata.php" method=get>
Reprise
• Information entered into form will be sent to the file indicated in the action attribute
Structure
CLIENT
Browser (Firefox):
Requests URL
SERVER
PHP interpreter
SERVER
DBMS (MySQL)
Build HTML page
Notes• method=get produces the so-called query string.
We can also generate query strings using php OR as direct call – Direct calls can be done for testing
• method=post sends data another way (via HTTP headers). Benefit is that less is revealed to user. Another benefit is lack of clutter.
• Older practice in PHP could refer to POST or GET or cookies or variables in the same way.
• Current practice for PHP is to distinguish these.– Can set up PHP implementation to go back to old, more
permissive way
• Alternative: action="mailto:emailaddress"
Query string
• Name = value pairs– Name is the name of the <input> element– Value is what the person entering data into the form
types in
• Query string will beURL?name1=value1&name2=value2…
• Blanks will be changed to +. May be other substitutions.– Special characters, including blanks can require special
handling at php end.
<form action="accepts_data.htm" method=get>First Name <input type=text name='fname'>Last Name <input type=text name='lname'><br>Choose one <input type='radio' name='category' value='newmedia'> New Media
<input type='radio' name='category' value='math'> Math/Computer science
<input type='radio' name='category' value='LAS'> Other LAS <input type='radio' name='category' value='arts'> Conservatories
<input type='radio' name='category' value='CE'> Continuing education
<br><input type=submit value="SEND"></form>
placeholder
Script referred to by action
• The php file probably will contain html and code that produces html.– This is reason to know the tags.
• The php code will be inside special delimiters – REPEAT WARNING: tricky syntax. Much
fussing about quotation marks.– more on this later.
After clicking send
• Browser goes to the file indicated by the action parameter
• The URL for this is the following (one long string, not split into multiple lines):
file:///X|/accepts_data.htm?fname=Jeanine&lname=Meyer&category=newmedia
Second example:
file:///X|/accepts_data.htm?fname=John&lname=Smith&category=arts
One more example that doesn't do anything!
<html> <head><title> Generate query string</title></head><body> <h2> Coffee shop </h2> <p><form name="orderf" action="dummy.html"><select name="drink"><option value="2.50">Coffee <option value="2.25">Hot Cocoa<option value="1.00">Chai </select> <br/><br/><br/><br/><input type="radio" name="sizef" value="1">Tall<input type="radio" name="sizef" value="1.5">Grand<input type="radio" name="sizef" value="2"> Super<input type=submit value="Order"> <br>Name: <input type="text" name="name"></form> </body> </html>
Opened and filled out form
Result (this is okay since I just want to show the query string)
• This webpage is not found• No webpage was found for the web
address:file:///C:/Documents%20and%20Settings/Jeanine/My%20Documents/php/dummy.html?drink=2.25&sizef=1.5&name=Jeanine
• Error 6 (net::ERR_FILE_NOT_FOUND): The file or directory could not be found.
Classwork
• Create an html document that has a form
• Open with browser and fill out form
• Look at query string
NOTE
• We/you/I can do some testing, such as this, on our own computers (client machine)
BUT• Most testing will need to be done on the server.
– upload work– test– edit/fix/improve, upload again
• There is an alternative: making a server on our own computers, but it is tedious and only postpones what needs to be done.
phpMyAdmin
• You can use this for setting up tables, but we also will do this using code.
• You also can use this for debugging: seeing what is in the tables and, possibly, removing records.
To use phpMyAdmin
• Need to have requested database access from CSS
• Download and read the README file.
• Use https://
• First request for id/password, use your regular (email) id and password– You may need to include @purchase.edu
• Second request: use id and pw given in README file
Homework• Continue to practice producing HTMLs script with a form
with – investigate multiple input elements (e.g., range, radio buttons, check
boxes, …)– Use method=get– Use placeholder
action=dummy.html – Submit element
• Test (there will be an error message since dummy.html does not exist!). Look at the query string generated
• Do postings of php sources if you haven't done so. Comment on others.
• Sign up for webspace AND database access.– Will start php next class!
Does not exist