Ali Kamandi [email protected] Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates

Ali KamandiSpring 2007

[email protected] University of Technology

mailto:[email protected]

HyperText Transfer Protocol

Internet Engineering-Sharif University of Technology

2

Request

Response

Open a connectionMake a requestServer respondsClose connection Listening via a port (80)

Web ServerClient

Stateless◦ If you view 10 web page, your browser makes 10 independent

HTTP request◦ Restart web server?Anonymous


3

User types www.yahoo.com into browserBrowser translates www.yahoo.com into an IP address and tries to open a TCP connection with port 80 of that addressBrowser sends the following byte stream:◦ Get / HTTP/1.0Yahoo responds with a set of headers indicating◦ Which protocol is actually being used◦ Whether or not the file requested was found◦ How many bytes are contained in that file◦ Kind of information (MIME: Multipurpose Internet Mail Extensions)


4

http://www.yahoo.com/

http://www.yahoo.com/

Yahoo’s server sends a blank line to indicate the end of the headersYahoo sends the contents of its index rootThe TCP connection is closed


5


6

When the connection is over, it is overShopping at an e-commerce site (Amazon) ?Engineering Challenge: Creating a stateful application on top of a fundamentally stateless protocol


7

Log file on the web server?◦ HTTP is anonymous◦ The server only knows IP address of client◦ Proxy?Rewriting hyperlinks◦ Sending extra information back to the server◦ http://www.amazon.com/exec/obidos/ASIN/1588750019◦ http://www.amazon.com/exec/obidos/ASIN/1588750019/103-9609966-7089404

◦ All the hyperlinks contain, at the end, this same session ID.◦ HTTP does not place a priori limit on the length of a URI

255 byte limit, error 414: request-URI Too Long


8

Write some information out to an individual user that will be returned on that user’s next requestServer side connections can use it to both store and retrieve information on the client side.Distributed database management system


9

Limit: 20 cookies, max 4 kbCookie information will be passed back up to server on every page load.◦ Overhead: suppose 80 kb for 20 cookies + dialup connectionThey aren’t portable for the userSecurity (privacy problem): some users have disabled them◦ Using unique identifier for the data rather than the data


10


11

DBMSACID test:◦ Atomicity: all committed or all rolled back◦ Consistency: DB is transformed from one valid state to another

valid state.◦ Isolation: the result of a transaction are invisible to other

transactions until the transaction is complete.◦ Durability: once committed, the result are permanent.


12

Declarative query language (SQL)Isolation of important data from programmers mistakesGood performance with many thousands of simultaneous users◦ IBM DB2◦ Oracle◦ Microsoft SQL server◦ Open-source PostgreSQL


13

Develop a data modelDevelop a collection of legal transactions: insert, updateDesign the page flow◦ How user interact with the system?Implement the individual pages◦ HTML◦ ASP (Active Server Page)◦ Java Server Page◦ Servlet◦ …

Internet Engineering-Sharif University of Technology 14

Hyper Text Markup LanguageAn HTML document is just a text document with some special directives, called tags, that a web browser understands.Tags are those things in “angle-brackets”, like <HTML>, <HEAD>, etc.HTML has no variables or commands. HTML is merely a way of formatting a document.Intended to be platform- and device-independent


Text with links to other documentsWhat’s the big deal?◦ Links didn’t exist until the 1960’s and were novel well into the

1980’s◦ Hypertext only existed on single computers or local area

networks until about 1990


Markup languages have special elements that mark formatting or semantics

HTMLAn <emph>important</emph> conceptLaTeXAn {\em important}concept


Nothing SpecialText EditorsFrontPage


Formatting is accomplished through the use of ‘tags’. <tag>Many tags have a ‘begin’ tag and an ‘end’ tag.

<TAG> Object the tag effects</TAG>

Examples:◦ <html>…</html> <b>…</b> <p> <br> <a>…</a> <table>…</table> <font>…</font>


Some tags have key=value pairs known as attributes. These describe or modify what the tag is doing.Examples:◦ <a href=http://www.rpi.edu>…</a>◦ <font color=“blue”>…</font>◦ <tr align=“center”>…</tr>


Every page will contain the following:

<HTML>

<HEAD><TITLE>My web page</TITLE></HEAD>

<BODY>Welcome to my web page!</BODY>

</HTML>Internet Engineering-Sharif University of Technology 21

Contains info about the document. Most common/important: title

<head><title>My HTML Document</title></head>

“My HTML Document” will appear in title bar of Netscape, IE, Opera, etc…


Contains all text displayed in the web browser window.<br> - line break<p> - paragraph break (equivalent to 2 <br>s)Appearance <B> makes text bold<center>…</center> Center-align all contained text


<b>text to be rendered bold</b>

<B>text to be rendered bold</B>

<b>This would be displayed in the sameway as the other two</b>

<i>text to be rendered in italics</i>

<FONT SIZE=24 COLOR="CC3300" FACE=“Zar">


<html><head><title>HTML Basics</title></head><body><p></p></body>

</html>Internet Engineering-Sharif University of Technology 26

Heading 1 -- <H1> Heading 1 </H1>Heading 2 -- <H2> Heading 2 </H2>Heading 3 -- <H3> Heading 3 </H3>Heading 4 -- <H4> Heading 4 </H4>Heading 5 -- <H5> Heading 5 </H5>Heading 6 -- <h6> Heading 6 </H6>


Comments can be many lines long.


<img src=“name_of_image.gif ” /><img src=“images/image_name.gif” />Example: <IMG SRC="image.gif" BORDER=0>

BORDER=0 BORDER=2 BORDER=5


You should create a graphic link for users with slow modems or text-only web access by using the <ALT> option.

Example: <img src=“pencil.gif" ALT=pencil graphic>

pencil graphic


<a href=“URL”>Text to be used for the link</a>Example:

<A HREF="http://www.google.com">Google Search</A>| | | |

Opening File to load when User can click on Closing

Tag link is selected this text to pull Tag

up the file

<p>Relative File Path Link

<a href=“../page2.html”>Web Week</a>

</p>


<a href=“URL”> <img src=“image.gif” /> </a>


<table>…</table>◦ contains entire table<tr>…</tr>◦ contains one row of a table<td>…</td>◦ contains one cell of a table<th>…</th>◦ contains a table column heading (this tag is optional in the

sense that columns do not require column headings)


<table><tr><th>Name</th><th>ID</th></tr><tr><td>Eric</td><td>123</td></tr><tr><td>RPI</td><td>456</td></tr></table>


Name ID

Eric 123

RPI 456


<table><tr><td>Cell 1</td><td>Cell 2</td></tr></table>


Cell 1 Cell 2


<table border =“0”><tr><td>Cell 1</td><td>Cell 2</td></tr></table>


Cell 1 Cell 2


Position page elements e.g. imagesSlightly more control



<table><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td></td><td></td></tr><tr><td>Cell 5</td><td>Cell 6</td></tr></table>


Cell 1 Cell 2

Cell 5 Cell 6


Cell 1 Cell 2

Cell 5 Cell 6



< ‘less than’ <> ‘greater than’ >& ‘ampersand’ &" ‘quotes’ “ ‘non-breaking white space’


<table><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td> </td><td> </td></tr><tr><td>Cell 5</td><td>Cell 6</td></tr></table>


Cell 1 Cell 2

Cell 5 Cell 6


<table><tr><th>Column 1</th><th>Column 2</th></tr><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td> </td><td> </td></tr><tr><td>Cell 5</td><td>Cell 6</td></tr></table>


Cell 1 Cell 2

Cell 5 Cell 6

Column 1 Column 2


un-ordered ListOrdered ListDefinition List (Glossary)


<ol><li>First Item on List</li><li>Second Item on List </li><li>Third Item on List </li></ol>


1. First Item on List2. Second Item on List 3. Third Item on List

<ul><li>An Item </li><li>Another Item </li><li>The last item </li></ul>


• An Item • Another Item • The last item

<dl><dt>Item 1</dt><dd>Text relating to item

1</dd><dt>Item 2</dt><dd>Text relating to item

2</dd></dl>


Item 1Text relating to item 1

Item 2Text relating to item 2

<ul><li>Faculty of Science Departments</li><ol><li>Chemistry</li><li>Engineering</li><li>Geology</li></ol></ul>


Colour can be used for;Table CellsPage BackgroundsLinksText


216 web-safe colour paletteShould I use the Web safe colour palette?


Base16

00 00 66 R G B


<font color=“#000066” >I’m going to be in Oxford Blue</font>

<font color=“TEAL” >I’m going to be in Teal</font>


<html><head><title>HTML Basics</title></head><body><h1>HTML Basics</h1><p><strong><em>Paragraph of bold italic

text</em></strong></p><ul><li>Remember Lists?</li><li>This one is unordered </li></ul><p>This paragraph will link to <a

href="another_page.html"> another page</a> I've created</p>

<table border="2"><tr><td>CELL 1</td><td>CELL 2</td></tr></table><p><img src="/cc/nh13/images/html_lts_logo.jpg“/></p></body></html>


Use lower case text in your HTML <tags>Close every <tag> you openNest your <tags> so that the arrows don’t crossCreate valid HTML


The form tag <form> ... </form> is used to send user-specified information back to the server. The server then sends back its response, a new HTML document.The form tag itself needs at least 2 attributes, the “action” attribute and the “method” attribute.Although there are other methods, we generally use method=“post” for our interactive programs.The “action” of a form is the program on the server that the form’s contents are sent to. That program processes the information and returns the response document. Only programs in the cgi-bin directory can be processed under our sytstem. Thus, a typical form tag will look something like:<form action=“/cgi-bin/bios546/hello.cgi+ method=“post> ...form contents...</form>Note that since the program that responds to this form is on the same server, the action’s URL doesn’t need to contain http://biolinx.bios.niu.edu”. However, it does need to start with “/cgi-bin”.The form sends name=value pairs to the server. “name” and “value” are both specified within each form element.


http://biolinx.bios.niu.edu/cgi-bin/bios546/hello.cgi

http://biolinx.bios.niu.edu/

Buttons are the most common form elements. All forms need a “Submit” button: clicking this button sends the form to the server. Syntax:<input type=“submit” value=“button label”>Radio buttons: You typically use them in groups, all which have the same name but different values. Only one button can be checked; the parameter is given the value associated with the checked button. It is possible to have one button checked as a default, by putting the word "checked" after the value=par_value statement. <input type=radio name="parameter“ value="par_value"> The parameter specified by the “value” attribute in the checked radio button is sent to the server.


Check boxes: If checked, the value “TRUE” is sent to the server. If not checked, neither name nor value is sent to the server. If you want it checked by default, include the word “checked” within the tag.

<input type=checkbox name="parameter"> Text boxes: if you want to enter a single line of text. Whateveris typed into the box gets sent as a string to the program givenby the form action mentioned above, as the value of a parameter whose name is given by "name=". You can change the size of the text box with the attribute “size”; its value is the number of characters that can be displayed:<input type=text name="parameter“ size=“25”>


Select boxes: a drop down list of options. It has a different syntax than most of the other input tags: <select name’”parameter”> ... </select>.Each option in the select box is specified by the <option> ... </option> tag. When the form is submitted, the text between the opening and closing tags is sent as the value of the parameter specified in the <select name=“parameter”> tag.By default only 1 option is displayed. The size=“number”attribute to the <select> tag displays as many options as you want.To be able to select multiple options, use the keyword “multiple” in the <select> tag.


<html><head><title>Basic Form</title></head>

<body><h1> Basic Form</h1><p><form action=“/cgi-bin/bios546/hello.cgi” method=“post>What is your name?<input type=“text”><br>Please select your favorite color:<select name=“color”><option>Red</option><option>Blue</option></select><br><input type=“submit” value=“Click Me!></form></body></html>


http://biolinx.bios.niu.edu/cgi-bin/bios546/hello.cgi

Questions?

Documents

Ali Kamandi [email protected] Sharif University of Technologyce.sharif.edu/courses/85-86/2/ce317/resources/root/Slides/04. Basic… · `User types into browser `Browser translates