@2017 Politecnico di Torino 1
Introduction to databases Web programming: the HTML language
DBMG
Web programming
The HTML language
DBMG
The HTML language
Basic concepts
User interfaces in HTML
Forms
Tables
Passing parameters stored in forms
DBMG
Basic concepts
HTML: HyperText Markup Language
Standard “de facto”
W3C: World Wide Web Consortium
http://www.w3.org/
Evolving
Born in 1991
HTML, HTML 2, HTML 4, XHTML 1, HTML 5
Objective: providing a structured description of an hypertextual document that is independent from the programs
Purely textual: it is based on the first 127 characters of ASCII code DBMG
Basic concepts
HTML allows to annotate a text to mark parts that compose it
Annotations are implemented by "tags"
Visualize HTML documents: browser
Browsers interpret tags to show the text in a proper way
Browsers ignore tags that are not known
Write HTML documents: any text editor
Notepad, Notepad+, …
HAPedit, http://hapedit.free.fr/
DBMG
Tags
They are expressions contained between the two symbols of minor ()
Usually text portions are delimited by a pair of tags (e.g.: Title)
The general rule is that the final tag is the same of the initial one, preceded by the symbol "/"
"Empty" tags, that are not applied to text portions, are of
type
DBMG
Attributes
Using attributes it is possible to better characterize a tag
Example: to insert an image in the center, to the left, to the right, to specify the text color, to specify dimensions of a column of a table, …
Attributes are made of a variable and a particular value is assigned to it
e.g. width="100"
http://hapedit.free.fr/
@2017 Politecnico di Torino 2
Introduction to databases Web programming: the HTML language
DBMG
Structure of an HTML document
Content: all things (e.g., text, images) that appear in the browser’s window
Header
Body
Text example
DBMG
HTML expressive power
What does it allow to do?
To create static web pages
What does NOT it permit to do?
To create dynamic web pages
Dynamic web pages
They are created "on the fly" to answer to the user input
DBMG
Dynamic web pages
User interface (static page, HTML)
Query result (dynamic page)
DBMG
More details
HTML allows to…
Insert and format text (included bulleted list, numbered list, …)
Check colours, font, backgrounds, …
Insert images, audio, video
Insert hypertextual links
Insert tables
Insert forms
…
DBMG
Example
Lesson 9: images
It sounds as a difficult task…
On your browser it will appear in this way
Example 1
Maybe, instead it is extremely easy to do. All you need is an element:
Wouldn’t it be nice to be able to add a Tim Bernes-Lee’s picture, the
HTML inventor, in the center of your page?
DBMG
Example
Example
Lesson 9: images
Wouldn’t it be nice to be able to add a Tim Bernes-Lee’s picture, the
HTML inventor, in the center of your page?
It sounds as a difficult task…
Maybe, instead it is extremely easy to do.
All you need is an element:
Example 1:
On your browser it will appear in this way
@2017 Politecnico di Torino 3
Introduction to databases Web programming: the HTML language
DBMG
Example
There are three different kinds of image files that can be inserted in your
pages:
• GIF (Graphics Interchange Format)
• JPG/JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)
GIF images are usually better for graphics and draws, while JPEG
images are better for photos. This is due to two main reasons: first, GIF
images can have only 256 colors, while JPEG images are built by millions of
colors, second, GIF format is better to zip simple images, while JPEG format
has been optimized for more complex images.
Where can I take my images?
To create your own images you need a proper program for images editing. An
images editing program is one of the most important tools in order to
create wonderful web sites.
DBMG
Example
There are three different kinds of image files that can be inserted
in your pages:
GIF (Graphics Interchange Format)
JPG/JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
GIF images are usually better for graphics
and draws, while JPEG images are better for photos.
This is due to two main reasons: first, GIF images can have only 256
colors, while JPEG images are built by millions of colors, second, GIF
format is better to zip simple images, while JPEG format has been
optimized for more complex images.
Where can I take my images?
To create your own images you need a proper program for images
editing.An images editing program is one of
the most important tools in order to create wonderful web
sites.
.
DBMG
Example
Otherwise you can download images from other web sites. But be careful to
not violate copyrights when you download them, please. It is good to know
how you can download images, so have a look here to learn it:
1. Right click on any image that you can find on Internet.
2. Choose “Save image as …” from the menu that appears.
3. Choose a location on your computer where you want to put the image e
press “Save”.
Partially adapted from: HTML.net
DBMG
Example
Otherwise you can download images from other web sites. But be
careful to not violate copyrights when you download them, please.
It is good to know how you can download images, so have a look
here to learn it:
Right click on any image that you can find on Internet.
Choose "Save image as …" from the menu that
appears.
Choose a location on your computer where you want to put the
image e press "Save".
Partially adapted from:
HTML.net
DBMG
Our mission
Teaching HTML? Not exactly
Many resources available
Online courses, e.g. http://xhtml.html.it/guide/leggi/51/guida-html/
Tags and attributes list, e.g. http://www.htmldog.com/reference/htmltags/
Mission: to teach you to interact with a database via web
Create the user interface to pass data to the queries
Visualize an HTML document that contains queries results
DBMG
Web application workflow
18
User Client-side
interface
(browser)
Server-side
elaboration
Data source
User defines a query using the query interface
Query is sent to the agent on server-side
Agent responds to the query using the data source
Data source returns the result of the query
Agent on server-side returns the result of the query
Result of the query is shown to the user
http://xhtml.html.it/guide/leggi/51/guida-html/http://xhtml.html.it/guide/leggi/51/guida-html/http://xhtml.html.it/guide/leggi/51/guida-html/http://www.htmldog.com/reference/htmltags/
@2017 Politecnico di Torino 4
Introduction to databases Web programming: the HTML language
DBMG
Transaction on a database
19
Client
Web server Internet
URL http & POST
http display page
TCP/IP
com- mand
browser server application
HTML send
Application
para- meters
database
data
Database
query
DBMG
User interfaces
Allow to send data to programs that process them
User’s choices
In HTML they use
Forms
Tables
DBMG
Forms
Forms allow users to build services’ graphic interface
Chance to insert data that will be sent to a program that processes them and/or to a database
Text boxes, buttons, drop down menu, …
HTML allows to create the interface, but it doesn’t allow to process inserted data
It is explicitly shown, in the form, the name of the program that will use data
Need to use other programming languages, e.g. PHP, Perl, Java, Python…
DBMG
Form example
Input elements
Interactive
Not interactive
Orange
t-shirt
Blue sweater
Blue-striped
shirt
Gym suit
Grey
trousers
Item Image Size Quantity Cost
Send order Cancel
Payment method:
Cash
Prepaid card
Credit card (fee of 2,50€)
DBMG
Form creation
“Form” tag with some attributes
Name: form name
Action: name of the program that will process form’s data
Method: the way in which parameters are passed from the form to the program (it can be "GET" or "POST")
There are more input elements in the form
Input elements
DBMG
Form example
Input elements
Text field
Checkbox
Radio button
“Submit” button
“Reset” button
…
Text
Images
Orange
t-shirt
Blue sweater
Blue-striped
shirt
Gym suit
Grey
trousers
Item Image Size Quantity Cost
Send order Cancel
Payment method:
Cash
Prepaid card
Credit card (fee of 2,50€)
@2017 Politecnico di Torino 5
Introduction to databases Web programming: the HTML language
DBMG
Input elements
General structure (with few exceptions)
"Input" tag with some attributes
type: element type
name: element name
value: value that will be passed to the program that processes user request
Other attributes that are specific for element types (e.g. size for "text" type)
DBMG
Input elements example
Blue-striped
shirt
DBMG
Cash
Prepaid card
Credit card (fee of
2,50€)
Input elements example
Important: same name
Selected element when the page is loaded
Cash
Prepaid card
Credit card (fee of 2,50€)
Payment method:
Send order Cancel
DBMG
Input elements
Submit button: perform a call to a processing program
input type="submit"
Reset button: resets all form data
input type="reset"
Text field
input type="text"
Checkbox
input type="checkbox"
Radio button
input type="radio"
Image
input type="image"
DBMG
Input elements
Password field: it shows stars or dots instead of characters
input type="password"
Textarea field
textarea
Menu of options
select
Here you can write your text
Here you can write your text
DBMG
Input elements
File
@2017 Politecnico di Torino 6
Introduction to databases Web programming: the HTML language
DBMG
Tables
Base structure
Rows (table row)
Cells (table data)
First cell
Second cell
Third cell
Fourth cell
DBMG
Tables
It is possible to define columns width
First cell
Second cell
Third cell
Fourth cell
DBMG
Tables
It is possible to define a row header
Table header
DBMG
Tables
It is possible to define a row header
Table header
CodP
NameP
Color
Size
Storage
P1
Sweater
Red
40
Turin
. . . . . . . . . . . . . . . . .
P6
Shorts
Red
42
Turin
DBMG
Tables and forms
Tables are often used with forms for “aesthetic” purposes
Item Image Size Quantity Cost
Blue sweater
Orange t-shirt
DBMG
Tables and forms – Example 1
Item
Image
Size
Quantity
Cost
Orange t-shirt
small
medium
large
61.00 €
. . . . . . . . . . . . . . . . . . . .
@2017 Politecnico di Torino 7
Introduction to databases Web programming: the HTML language
DBMG
Tables and forms – Example 2
Cash
Prepaid card
Credit card (fee of 2,50€)
Payment method:
Send order Cancel
Payment method:
Cash
Prepaid card
Credit card (fee of
2,50€)
DBMG
Parameter passing
In addition to ask a page to the web server, form allows to specify some parameters too, that will be used by the script
Example: selected products, size, quantity, payment method
Two submission methods: GET and POST
Client-side interface (browser)
Server-side elaboration
Input elements
DBMG
Parameter passing
GET method
It allows to append data to the address of the requested page, by following the page name by a question mark and by name/value pairs of data in which we are interested
Name and value are separated by the equal sign
Different name/value pairs are separated by '&'
DBMG
GET method example
Congress:
Year:
Articles:
Set data
Cancel Send
Congress:
Year:
2005
2006
Articles:
1
2
3
DBMG
GET method example
Congress:
Year:
Articles:
Set data
Cancel Send
127.0.0.1/Examples/2007-01-10/test.php?num=ICSE&year=2006&number=2
DBMG
Parameter passing
GET method
Some servers have some limitations about the GET method, and they don’t allow to send forms having values greater than 255 total characters
It is particularly suitable for forms having few fields and few data to send
http://127.0.0.1/Examples/order.php?art1=1&dim1=1&q1=
1&dim2=2&q2=0&item3=1&dim3=1&q3=3&item4=1&dim4=3&q4=2
&dim5=2&q5=0&pag=1&send=Send+l%27order
@2017 Politecnico di Torino 8
Introduction to databases Web programming: the HTML language
DBMG
Parameter passing
POST method
Sending data is done in two phases: first the page on the server that has to compute data is contacted, then data are sent
For this reason parameters don’t appear in the query string and are not directly visible by the user
Useful in many cases (e.g. password field)
No limits on length of characters
DBMG
POST method example
Congress:
Year:
Articles:
Set data
Cancel Send
Congress:
Year:
2005
2006
Articles:
1
2
3
DBMG
POST method example
Congress:
Year:
Articles:
Set data
Cancel Send
127.0.0.1/Examples/2007-01-10/test.php