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! The php interpreter works on the server to produce a html page to send to the client.
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> This is the basic template. The stuff between the title tags shows up at the top of the screen. That and other stuff in the header can be used by search engines. The stuff within the body tags is what appears on the screen.
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> The heading tags (h1, h2, etc.) give a progression of sizes and emphasis. They will look different on different browsers, but h1 will be more emphatic that h2, etc. When you are producing an HTML table from data in a database, you often will be creating a 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> All the file references on this page are to files on the server holding the html file (or the php file producing the html). These are all ‘relative’ addresses. Absolute addresses have http:// Method= post means the form input will be sent via the http headers. What this means to you is that it is not method=get, where the data is sent via the URL and visible to the user.
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" Repeat on get versus post.
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.
<form action="accepts_data.htm" method=get> 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> This example is for demonstration purposes. The accepts_data.htm file doesn’t do anything. Forms contain different input types: text is the simplest one. You can also specify the size of a text field. All input fields of type radio and name the same (‘category’ in this case) work as a unit. Only one can be set at a time. The input of type submit is a button.
This shows what the last produced PLUS my input.
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 For any form, the browser takes the indicated action with the indicated method. Here is was GET, so this was the URL. AGAIN: THE URL IS ONE STRING, not split.
What is the URL in this case What is the URL in this case? To make sure you understand this, think about it, go backwards if you are looking at the notes, write down your answer and only then go forward.
Second example: file:///X|/accepts_data.htm?fname=John&lname=Smith&category=arts If this isn’t what you did, go over the last few charts.
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