HTML/HTML5 review forms. - Purchase College Faculty Web Server

Transcript HTML/HTML5 review forms. - Purchase College Faculty Web Server

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
SERVER
Browser
(Firefox):
Requests
URL
SERVER
DBMS
(MySQL)
PHP
interpreter
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 be
URL?name1=value1&name2=value2…
• Blanks will be changed to +. May be other
substitutions.
– Special characters, including blanks can require special
handling at php end.
placeholder
<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>
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=J
eanine&lname=Meyer&category=newmed
ia
Second example:
file:///X|/accepts_data.htm?fname=J
ohn&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%20
Settings/Jeanine/My%20Documents/php/
dummy.html?drink=2.25&sizef=1.5&na
me=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
Does not exist
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!

HTML/HTML5 review forms. - Purchase College Faculty Web Server

Transcript HTML/HTML5 review forms. - Purchase College Faculty Web Server

Directory