2014 database - course 1 - www introduction

83 %
17 %
Information about 2014 database - course 1 - www introduction
Technology

Published on March 12, 2014

Author: enskylin

Source: slideshare.net

WWW Introduction Ensky / 林宏昱

What happened when you open a browser?

DNS lookup dns what's the ip of facebook.com? It's 173.252.110.27

HTTP protocol GET /enskylin HTTP/1.1 Host: www.facebook.com HTTP/1.1 200 OK HTML

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?

What happened when you post a form on website?

Perform a POST in HTTP POST /register HTTP/1.1 Host: www.facebook.com HTTP/1.1 200 OK HTML save to database surname=E&name=ensky&email=…

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

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

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

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

What about HTML?

HyperText Markup Language Insights

HTML is a markup language (not a programming language)

defines defines what elements on the page (images, links, texts, videos, forms, scripts, etc.) http://goo.gl/qOu6OF

defines what orders the elements are 1 2 3 4 http://goo.gl/qOu6OF

HTML • cooperates –layouts with CSS –functions with Javascript

CSS, HTML, JS Structures Layouts Functions 結構 樣式 功能

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>

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>

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

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

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)

Common attributes <p id="unique" class="red-div" title="help text">HIHI</p> • class classify elements, usually set for CSS or JS to select some elements. One element can have multiple classes • id same as class, but unique in a document. One element can only have one id • style inline CSS • title help text when hover

Debug tools • Chrome debug tool F12

Debug tools

CSS, HTML, JS Structures Layouts Functions 結構 樣式 功能

HTTP protocol review GET /enskylin HTTP/1.1 Host: www.facebook.com HTTP/1.1 200 OK HTML

Imagine if you want to write a web server…

1.Initialize a socket wait for client's HTTP request GET /icon.png HTTP/1.1 Host: www.ensky.tw HTTP/1.1 200 OK HTML port 80

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

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

4.Response the document back to client GET /icon.png HTTP/1.1 Host: www.ensky.tw HTTP/1.1 200 OK HTML

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

Virtual host • In case of static file mapping, you can simply do www.facebook.com -> c:Domainswww image.facebook.com -> c:Domainsimage so any request to http://www.facebook.com/song.mp3 web server will try to find the file at c:Domainswwwsong.mp3

However, static files is not rocks enough!

How about dynamic generated documents?

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

And we need to generate the HTML GET /enskylin HTTP/1.1 Host: www.facebook.com HTTP/1.1 200 OK HTML

And send it back to browser GET /icon.png HTTP/1.1 Host: www.ensky.tw HTTP/1.1 200 OK HTML

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

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

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

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

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

CGI Implemention #include <iostream> using namespace std; int main () { cout << “<!doctype html>”; cout << “<html>”; cout << “ <head>”; // …omitted }

Any better choice?

We Save Your Time!

Next two weeks

References

IDE • We highly recommended to use

IDE Note • You must save in UTF-8, otherwise you'll not be able to render Chinese correctly • see: ChineseWorld PTT

Save as UTF-8 • Notepad++

Save as UTF-8 • Sublime

Save as UTF-8 • VIM • Putty

HTML Tags - Text p: paragraph <p>Jlhuang Rocks!</p>

HTML Tags - Text br: break <p>Jlhuang <br> Rocks!</p>

HTML Tags - Link a: anchor <a href="http://www.google.com">Click me</a>

HTML Tags - Heading <h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6>

HTML Tags - List <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <ol> <li>Item4</li> </ol> </ul>

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

HTML Tags - Images img: image <img src="http://i1.ytimg.com/vi/iYQHkwCfCiw/m axresdefault.jpg">

More Tags http://www.w3schools.com/tags/

CSS reference • https://speakerdeck.com/openwebscho ol/04-css-openwebschool

Javascript reference • https://speakerdeck.com/openwebschool/07-javascript- openwebschool • https://speakerdeck.com/openwebschool/08-js-frontend- and-jquery-openwebschool

WWW reference https://speakerdeck.com/openwebschool

Add a comment

Related presentations

Related pages

Introduction to Databases - Coursera - Free Online Courses ...

Introduction to Databases from Stanford University. This course covers database design and the use of ... //class.stanford.edu/courses/DB/2014 ...
Read more

Lecture 1 Database Systems: An Introduction

Lecture 1 Database Systems: An Introduction February 26, 2014 Shuigeng Zhou School of Computer Science Fudan University
Read more

Introduction to Databases | Stanford Lagunita

... of this course. "Introduction to Databases" was one ... 2014 will mark its third offering. The course includes ... course includes database ...
Read more

Intro to Database Systems - CS4320/CS5320, Fall 2014 1 ...

CS4320/CS5320, Fall 2014 1 Introduction to Database Systems CS4320/CS5320 Instructor: ... CS4320/CS5320, Fall 2014 2 Your course staff • Instructor: ...
Read more

SQL Server Training | SQL Training | SQL Courses

Our hands-on SQL Server training courses will ... database administration and SQL Server 2014 new ... Oracle Database 12c Introduction • Hands-On ...
Read more

Oracle Database 11g for DBAs and programmers: Introduction ...

Title: Oracle Database 11g for DBAs and programmers: Introduction to SQL: Course code: CM404.1-03-2014-C: Objective: To allow programmers to write advanced ...
Read more

Assignment 1 - CS348: Introduction to Database Systems ...

Unformatted text preview: CS348: Introduction to Database Systems (Spring 2014) Assignment 1 (due Thursday, June 5th) Overview: For the first question, you ...
Read more

All Courses | Stanford Online

All Courses. IN SESSION AND UPCOMING. ... Introduction to Probability for Computer Scientists: ... October 1, 2014: Self-Study
Read more

SQLCourse - Interactive Online SQL Training for Beginners

SQLCourse.com: an interactive ... Advertise on SQLCourse.com: 12: Database Links: 13: Technology Jobs: Free Newsletters: ... SQL Course Curriculum; 1: 2: 3 ...
Read more