1 / 30

Creating Databases applications for the Web

This guide provides a review of basic HTML, creating HTML forms, and checking the query string. Learn how to create databases for web applications.

morenot
Download Presentation

Creating Databases applications for the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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

  2. 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!

  3. 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. • …..

  4. Caution • Chicken and egg problem: what to explain first • Try some skipping ahead to motivate explanations.

  5. 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!

  6. 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.

  7. HTML review • Ordinary text plus tags. Tags are singletons or pairs • template for all html files: <html> <head><title> ... </title> </head> <body> ... </body> </html>

  8. 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>

  9. 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

  10. 3-tier logic/implementation model • Presentation • content (including structure) HTML5 • format CSS • behavior JavaScript • Business logic php • Information MySQL

  11. 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!

  12. 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>

  13. Reprise • Information entered into form will be sent to the file indicated in the action attribute

  14. Structure CLIENT Browser (Firefox): Requests URL SERVER PHP interpreter SERVER DBMS (MySQL) Build HTML page

  15. 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"

  16. 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.

  17. 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>

  18. 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.

  19. 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

  20. Second example: file:///X|/accepts_data.htm?fname=John&lname=Smith&category=arts

  21. 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>

  22. Opened and filled out form

  23. 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.

  24. Classwork • Create an html document that has a form • Open with browser and fill out form • Look at query string

  25. 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.

  26. 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.

  27. 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

  28. 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

More Related