Creating Databases applications for the Web: week 2

1
Creating Databases applications for the Web week
2

• Basic HTML review, forms
• HW Identify unique source for asp, php, Open
  Source, MySql, Access

2
Hypertext markup language

• Interpreted by browser on client
• The asp or php file is interpreted on the server.
  These files contain
• html and
• code that produces html.
• This is reason you need to know the tags.
• The asp or php code will be inside special
  delimiters
• REPEAT WARNING tricky syntax. Much fussing
  about quotation marks.
• more on this later.

3
HTML review

• Ordinary text plus tags. Tags are singletons or
  pairs
• Newest form of HTML (XHTML) requires singletons
  to be of form ltbr /gt
• template for all html files
• lthtmlgt
• ltheadgtlttitlegt ... lt/titlegt lt/headgt
• ltbodygt
• ...
• lt/bodygt lt/htmlgt

4
HTML example

• lthtmlgtltheadgtlttitlegtFirst examplelt/titlegt
• lt/headgt
• ltbody bgcolor"pink"gt
• lth1gt Advice lt/h1gt ltbr/gt
• Creating an ltigthtmllt/igt file requires attention
  to detail.
• ltimg src"bird.gif" /gt
• lt/bodygt lt/htmlgt

5
HTML tags referencing files

• Images
• ltimg src"frog.gif"gt
• ltimg src"../images/frog.gif"gt
• Link (hyperlink, a tag)
• lta href"next2.html"gtContinue lt/agt
• Form
• ltform action"handle.php" methodpostgt

6
HTML Tables

• Tables are used frequently to format data. Your
  server-side code needs to produce the table tags.
• Tables contain rows, rows contain 'data'.
• lttablegt
• lttrgt lttdgt 1 lt/tdgt lttdgt 2 lt/tdgt lttdgtltbgt3lt/bgt lt/tdgt
  lt/trgt
• lttrgt lt/trgt
• lt/tablegt

7
Class work

• Use NotePad and produce an HTML file using tables
  to display 3 rows and 2 columns, each row holding
  an image and text describing the image.
• There should be a heading in the body.
• After the table, put in a link ltagt.

8
Preview Forms

• Forms are set up in one HTML document (that could
  have been produced by server-side programming).
• On submission, the data is sent to the file
  indicated by the action attribute in the ltformgt
  tag. This file is almost always a server-side
  file.
• This file interprets the form data, may access a
  database, do calculations, in order to create
  (dynamically, 'on-the-fly') an HTML document to
  be sent to the client to be interpreted by the
  browser.

9
placeholder

• ltform action"accepts_data.htm" methodgetgt
• First Name ltinput typetext name'fname'gt
• Last Name ltinput typetext name'lname'gtltbrgt
• Choose one ltinput type'radio' name'category'
  value'newmedia'gt New Media
• ltinput type'radio' name'category'
  value'math'gt Math/Computer science
• ltinput type'radio' name'category'
  value'LAS'gt Other LAS
• ltinput type'radio' name'category'
  value'arts'gt Conservatories
• ltinput type'radio' name'category' value'CE'gt
  Continuing education
• ltbrgtltinput typesubmit value"SEND"gt
• lt/formgt

10
(No Transcript)
11
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?fnameJeaninelnameM
  eyercategorynewmedia

12
(No Transcript)
13
Second example

• file///X/accepts_data.htm?fnameJohnlnameSmith
  categoryarts

14
Notes

• Methodget produces the so-called query string.
  We can also generate query strings using asp/php
  OR as direct call (testing)
• methodpost sends data another way (via HTTP
  headers). Benefit is that less is revealed to
  user. Think of it also as lack of clutter.
• ASP code is different for get versus post so you
  need to know which one.
• Alternative action"mailtoemailaddress"

15
Exercise

• Download an image from the Web (remember file
  name and location)
• Create an HTML file with the image Save as
  accepts_data.htm
• Open up NotePad
• Create HTML document with a form to take in
  information. Make use of different input forms.
  Set actionaccepts_data.htm
• Save as formtest.htm
• Open formtest.htm in Netscape or IE.

16
Storyboard

formtest.htm
accepts_data.htm
17
sharon accounts

• sharon.ns.purchase.edu server set up just for
  us, with ability to
• interpret asp (and JavaScript)
• interpret php
• Access engine
• MySQL engine
• Use file transfer protocol program such as ws-ftp
  to upload your 'scripts'
• NOTE you will not be able to view the asp or php
  source from your browser.

18
ws-ftp demonstration

• SAVE THE SHEET OF PAPER!!!!

19
Homework

• Identify source for one of the technical topics
  in the course asp, php, MySql, Access.
• Must be unique (not posted yet)
• Describe the sourcedon't just list the URL
• Do put in the URL as an HTML a tag (you will need
  to mark the posting as HTML)
• Text read chapters 2 3.