2014 database - course 1 - www introduction
DESCRIPTION
TRANSCRIPT
![Page 1: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/1.jpg)
WWW Introduction
Ensky / 林宏昱
![Page 2: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/2.jpg)
What happened when you open a browser?
![Page 3: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/3.jpg)
DNS lookup
dns
what's the ip of facebook.com?
It's 173.252.110.27
![Page 4: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/4.jpg)
HTTP protocol
GET /enskylin HTTP/1.1
Host: www.facebook.com
HTTP/1.1 200 OK
HTML
![Page 5: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/5.jpg)
HTTP Protocol
• Protocol between Browser <-> Web server
• Initially used to transmit documents in HTML format
• We know GET method now, but how about post something to webserver?
![Page 6: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/6.jpg)
What happened when you post a form on
website?
![Page 7: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/7.jpg)
Perform a POST in HTTP
POST /register HTTP/1.1Host: www.facebook.com
HTTP/1.1 200 OK
HTML
save to database
surname=E&name=ensky&email=…
![Page 8: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/8.jpg)
HTTP usage
• Actually, HTTP is very simple, trivial, and easy to use in many situations
• When it comes to data-manipulation, there are four basic method:Create, Read, Update, Delete(CRUD)they can be perfectly mapped into HTTP protocol
![Page 9: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/9.jpg)
HTTP protocol -> REST API
• Using HTTP protocol to serve an data-manipulation API, we call it REST API.
• WIKI: REST
Operation HTTP
Read GET
Create POST
Update PUT
Delete DELETE
![Page 10: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/10.jpg)
Imagine you're writing a game
• you'll have
– character info
• maybe life, age, attack power, skills, location, …
– Monster info
• maybe life, skills, …
– and many data need to be CRUD
![Page 11: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/11.jpg)
REST API
• And it'll be very easy if you use REST API.– GET /characters/1/life
– PUT /characters/1
life=60&isPoisoned=1
– PUT /characters/1/location
map=1&block=123
![Page 12: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/12.jpg)
What about HTML?
![Page 13: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/13.jpg)
HyperText Markup Language
Insights
![Page 14: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/14.jpg)
HTML is
a markup language
(not a programming language)
![Page 15: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/15.jpg)
defines
defines what elements on the page(images, links, texts, videos, forms, scripts, etc.)
http://goo.gl/qOu6OF
![Page 16: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/16.jpg)
defines what orders the elements are
1
2
3
4
http://goo.gl/qOu6OF
![Page 17: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/17.jpg)
HTML
• cooperates
–layouts with CSS
–functions with Javascript
![Page 18: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/18.jpg)
CSS, HTML, JS
Structures Layouts Functions
結構 樣式 功能
![Page 19: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/19.jpg)
HTML hello world
<!doctype html><html lang="en">
<head><meta charset="utf-8">
<title>Hello world! Title</title>
</head>
<body>
<p>Hello world!</p></body>
</html>
![Page 20: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/20.jpg)
HTML is a nested language
<!doctype html><html lang="en">
<head><meta charset="utf-8">
<title>Hello world! Title</title>
</head>
<body>
<p>Hello world!</p></body>
</html>
![Page 21: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/21.jpg)
HTML is a markup language
<!doctype html><html lang="en">
<head><meta charset="utf-8">
<title>…</title>
</head>
<body>
<p>…</p></body>
</html>
• Tag
• Attribute
• Value
• Node
• Parent
• Children
![Page 22: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/22.jpg)
HTML is a markup language
<!doctype html><html lang="en">
<head><meta charset="utf-8">
<title>…</title>
</head>
<body>
<p>…</p></body>
</html>
• Head defines something for browser
• Encoding
• Title of the page
• Resources
• CSS
• Javascript
![Page 23: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/23.jpg)
HTML is a markup language
<!doctype html><html lang="en">
<head><meta charset="utf-8">
<title>…</title>
</head>
<body>
<p>…</p></body>
</html>
• Body defines something to render(the contents)
![Page 24: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/24.jpg)
Common attributes
<p id="unique" class="red-div" title="help text">HIHI</p>
• classclassify elements, usually set for CSS or JS to select some elements. One element can have multiple classes
• idsame as class, but unique in a document. One element can only have one id
• styleinline CSS
• titlehelp text when hover
![Page 25: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/25.jpg)
Debug tools
• Chrome debug tool F12
![Page 26: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/26.jpg)
Debug tools
![Page 27: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/27.jpg)
CSS, HTML, JS
Structures Layouts Functions
結構 樣式 功能
![Page 28: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/28.jpg)
HTTP protocol review
GET /enskylin HTTP/1.1
Host: www.facebook.com
HTTP/1.1 200 OK
HTML
![Page 29: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/29.jpg)
Imagine if you want to write a web server…
![Page 30: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/30.jpg)
1.Initialize a socketwait for client's HTTP request
GET /icon.png HTTP/1.1
Host: www.ensky.tw
HTTP/1.1 200 OK
HTML
port 80
![Page 31: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/31.jpg)
2.Parse the HTTP request find out some useful information
like URL, Hostname, …
GET /icon.png HTTP/1.1
Host: www.ensky.tw
HTTP/1.1 200 OK
HTML
![Page 32: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/32.jpg)
3.Prepare file according to above information
GET /icon.png HTTP/1.1
Host: www.ensky.tw
HTTP/1.1 200 OK
HTML
get icon.png from somewhere in your file system
![Page 33: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/33.jpg)
4.Response the document back to client
GET /icon.png HTTP/1.1
Host: www.ensky.tw
HTTP/1.1 200 OK
HTML
![Page 34: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/34.jpg)
Virtual host
• One web server can host many domains
• It can be determined by "Host: " part in HTTP protocol
www.facebook.com
GET /enskylin HTTP/1.1
Host: www.facebook.com
![Page 35: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/35.jpg)
Virtual host
• In case of static file mapping, you can simply do
www.facebook.com -> c:\Domains\www
image.facebook.com -> c:\Domains\image
so any request to http://www.facebook.com/song.mp3web server will try to find the file at c:\Domains\www\song.mp3
![Page 36: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/36.jpg)
However, static files is not rocks enough!
![Page 37: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/37.jpg)
How about dynamic generated documents?
![Page 38: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/38.jpg)
The only difference is we get data from database
rather than disk file
GET /enskylin HTTP/1.1
Host: www.facebook.com
HTTP/1.1 200 OK
HTML
![Page 39: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/39.jpg)
And we need to generate the HTML
GET /enskylin HTTP/1.1
Host: www.facebook.com
HTTP/1.1 200 OK
HTML
![Page 40: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/40.jpg)
And send it back to browser
GET /icon.png HTTP/1.1
Host: www.ensky.tw
HTTP/1.1 200 OK
HTML
![Page 41: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/41.jpg)
If you want to write a web server
1. Initialize a socket to wait for client's HTTP request
2. Parse the HTTP request and find out some useful information like URL, Host, …
3. Prepare document according to above information
4. Response the document back to client
![Page 42: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/42.jpg)
If you want to write a web server
1. Initialize a socket to wait for client's HTTP request
2. Parse the HTTP request and find out some useful information like URL, Host, …
3. Prepare document according to above information
4. Response the document back to client
![Page 43: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/43.jpg)
there is different logic for each page-> it is hard to write in Web server
GET /enskylin HTTP/1.1
Host: www.facebook.com
HTTP/1.1 200 OK
HTML
![Page 44: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/44.jpg)
If you want to write a web server
1. Initialize a socket to wait for client's HTTP request
2. Parse the HTTP request and find out some useful information like URL, Host, …
3. Prepare document according to above information
4. Response the document back to client
web Server
CGI
![Page 45: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/45.jpg)
CGI and Web server
Web server
CGI
HTTP Request
stdin + env
stdout
HTTP Response + BODY
HTTP request
body
HTTP request header
HTTP response
head + body
![Page 46: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/46.jpg)
CGI Implemention
#include <iostream>
using namespace std;
int main () {
cout << “<!doctype html>”;
cout << “<html>”;
cout << “ <head>”;
// …omitted
}
![Page 47: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/47.jpg)
Any better choice?
![Page 48: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/48.jpg)
We Save Your Time!
![Page 49: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/49.jpg)
Next two weeks
![Page 50: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/50.jpg)
References
![Page 51: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/51.jpg)
IDE
• We highly recommended to use
![Page 52: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/52.jpg)
IDE Note
• You must save in UTF-8, otherwise you'll not be able to render Chinese correctly
• see: ChineseWorld PTT
![Page 53: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/53.jpg)
Save as UTF-8
• Notepad++
![Page 54: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/54.jpg)
Save as UTF-8
• Sublime
![Page 55: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/55.jpg)
Save as UTF-8
• VIM
• Putty
![Page 56: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/56.jpg)
HTML Tags - Text
p: paragraph
<p>Jlhuang Rocks!</p>
![Page 57: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/57.jpg)
HTML Tags - Text
br: break
<p>Jlhuang <br> Rocks!</p>
![Page 58: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/58.jpg)
HTML Tags - Link
a: anchor
<a href="http://www.google.com">Click me</a>
![Page 59: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/59.jpg)
HTML Tags - Heading
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
![Page 60: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/60.jpg)
HTML Tags - List
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<ol>
<li>Item4</li>
</ol>
</ul>
![Page 61: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/61.jpg)
HTML Tags - Table
<table>
<thead>
<tr><td>Name</th><td>Score</td></tr>
</thead>
<tbody>
<tr><th>Ensky</th><td>100</td></tr>
<tr><th>dy93</th><td>80</td></tr>
</tbody>
<tfoot>
<tr><th>Average</th><td>90</td></tr>
</tfoot>
</table>
Name Score
Ensky 100
dy93 80
Average 90
![Page 62: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/62.jpg)
HTML Tags - Images
img: image
<img src="http://i1.ytimg.com/vi/iYQHkwCfCiw/maxresdefault.jpg">
![Page 64: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/64.jpg)
CSS reference
• https://speakerdeck.com/openwebschool/04-css-openwebschool
![Page 65: 2014 database - course 1 - www introduction](https://reader033.vdocuments.mx/reader033/viewer/2022051109/549d3ae4ac7959ec2a8b48dc/html5/thumbnails/65.jpg)
Javascript reference
• https://speakerdeck.com/openwebschool/07-javascript-openwebschool
• https://speakerdeck.com/openwebschool/08-js-frontend-and-jquery-openwebschool