Presentation is loading. Please wait.

Presentation is loading. Please wait.

Creating Databases applications for the Web

Published byAdrian Bradley Modified over 7 years ago

Similar presentations

Presentation on theme: "Creating Databases applications for the Web"— 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! The php interpreter works on the server to produce a html page to send to the client.

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

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

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)

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

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: address" Repeat on get versus post.

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

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

18 This shows what the last produced PLUS my input.

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

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

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

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

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

24 Opened and filled out form

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

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

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

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

29 To use phpMyAdmin Need to have requested database access from CSS
Download and read the README file. Use First request for id/password, use your regular ( ) id and password You may need to Second request: use id and pw given in README file

30 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

Download ppt "Creating Databases applications for the Web"

Similar presentations

JQuery MessageBoard. Lets use jQuery and AJAX in combination with a database to update and retrieve information without refreshing the page. Here we will.

JQuery MessageBoard. Lets use jQuery and AJAX in combination with a database to update and retrieve information without refreshing the page. Here we will.
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Lecture 6/2/12. Forms and PHP The PHP $_GET and $_POST variables are used to retrieve information from forms, like user input When dealing with HTML forms.

Lecture 6/2/12. Forms and PHP The PHP $_GET and $_POST variables are used to retrieve information from forms, like user input When dealing with HTML forms.
Forms Review. 2 Using Forms tag  Contains the form elements on a web page  Container tag tag  Configures a variety of form elements including text.

Forms Review. 2 Using Forms tag  Contains the form elements on a web page  Container tag tag  Configures a variety of form elements including text.
Creating Web Page Forms

Creating Web Page Forms
Creating Databases applications for the Web Reprise. Basic HTML review, forms Preview: Server side vs client side Classwork: create HTML forms and check.

Creating Databases applications for the Web Reprise. Basic HTML review, forms Preview: Server side vs client side Classwork: create HTML forms and check.
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.

1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
Advance Database Management Systems Lab no. 5 PHP Web Pages.

Advance Database Management Systems Lab no. 5 PHP Web Pages.
Reading Data in Web Pages tMyn1 Reading Data in Web Pages A very common application of PHP is to have an HTML form gather information from a website's.

Reading Data in Web Pages tMyn1 Reading Data in Web Pages A very common application of PHP is to have an HTML form gather information from a website's.
1 Creating Web Forms in HTML Web forms collect information from customers Web forms include different control elements including: –Input boxes –Selection.

1 Creating Web Forms in HTML Web forms collect information from customers Web forms include different control elements including: –Input boxes –Selection.
Server-side Scripting Powering the webs favourite services.

Server-side Scripting Powering the webs favourite services.
1 HTML References: A HTML Tutorial: /HTMLPrimer.html

1 HTML References: A HTML Tutorial: /HTMLPrimer.html
CSC 2720 Building Web Applications HTML Forms. Introduction  HTML forms are used to collect user input.  The collected input is typically sent to a.

CSC 2720 Building Web Applications HTML Forms. Introduction  HTML forms are used to collect user input.  The collected input is typically sent to a.
Website Development with PHP and MySQL Saving Data.

Website Development with PHP and MySQL Saving Data.
Forms and Server Side Includes. What are Forms? Forms are used to get user input We’ve all used them before. For example, ever had to sign up for courses.

Forms and Server Side Includes. What are Forms? Forms are used to get user input We’ve all used them before. For example, ever had to sign up for courses.
1 © Netskills Quality Internet Training, University of Newcastle HTML Forms © Netskills, Quality Internet Training, University of Newcastle Netskills is.

1 © Netskills Quality Internet Training, University of Newcastle HTML Forms © Netskills, Quality Internet Training, University of Newcastle Netskills is.
ITCS373: Internet Technology Lecture 5: More HTML.

ITCS373: Internet Technology Lecture 5: More HTML.
CSC 2720 Building Web Applications Server-side Scripting with PHP.

CSC 2720 Building Web Applications Server-side Scripting with PHP.
Creating databases for Web Applications php basics. Emailing. phpMyAdmin to set up MySQL. Homework: Use phpMyAdmin. Make posting with [unique] source on.

Creating databases for Web Applications php basics. ing. phpMyAdmin to set up MySQL. Homework: Use phpMyAdmin. Make posting with [unique] source on.
XHTML & Forms. PHP and the WWW PHP and HTML forms – Forms are the main way users can interact with your PHP scrip Typical usage of the form tag in HTML.

XHTML & Forms. PHP and the WWW PHP and HTML forms – Forms are the main way users can interact with your PHP scrip Typical usage of the form tag in HTML.

Similar presentations

Ads by Google