2014 database - course 1 - www introduction

2,138 views

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,138
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
252
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

2014 database - course 1 - www introduction

  1. 1. WWW Introduction Ensky / 林宏昱
  2. 2. What happened when you open a browser?
  3. 3. DNS lookup dns what's the ip of facebook.com? It's 173.252.110.27
  4. 4. HTTP protocol GET /enskylin HTTP/1.1 Host: www.facebook.com HTTP/1.1 200 OK HTML
  5. 5. 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?
  6. 6. What happened when you post a form on website?
  7. 7. 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=…
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. What about HTML?
  13. 13. HyperText Markup Language Insights
  14. 14. HTML is a markup language (not a programming language)
  15. 15. defines defines what elements on the page (images, links, texts, videos, forms, scripts, etc.) http://goo.gl/qOu6OF
  16. 16. defines what orders the elements are 1 2 3 4 http://goo.gl/qOu6OF
  17. 17. HTML • cooperates –layouts with CSS –functions with Javascript
  18. 18. CSS, HTML, JS Structures Layouts Functions 結構 樣式 功能
  19. 19. 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>
  20. 20. 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>
  21. 21. 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
  22. 22. 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
  23. 23. 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)
  24. 24. 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
  25. 25. Debug tools • Chrome debug tool F12
  26. 26. Debug tools
  27. 27. CSS, HTML, JS Structures Layouts Functions 結構 樣式 功能
  28. 28. HTTP protocol review GET /enskylin HTTP/1.1 Host: www.facebook.com HTTP/1.1 200 OK HTML
  29. 29. Imagine if you want to write a web server…
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. 4.Response the document back to client GET /icon.png HTTP/1.1 Host: www.ensky.tw HTTP/1.1 200 OK HTML
  34. 34. 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
  35. 35. 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
  36. 36. However, static files is not rocks enough!
  37. 37. How about dynamic generated documents?
  38. 38. 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
  39. 39. And we need to generate the HTML GET /enskylin HTTP/1.1 Host: www.facebook.com HTTP/1.1 200 OK HTML
  40. 40. And send it back to browser GET /icon.png HTTP/1.1 Host: www.ensky.tw HTTP/1.1 200 OK HTML
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. CGI Implemention #include <iostream> using namespace std; int main () { cout << “<!doctype html>”; cout << “<html>”; cout << “ <head>”; // …omitted }
  47. 47. Any better choice?
  48. 48. We Save Your Time!
  49. 49. Next two weeks
  50. 50. References
  51. 51. IDE • We highly recommended to use
  52. 52. IDE Note • You must save in UTF-8, otherwise you'll not be able to render Chinese correctly • see: ChineseWorld PTT
  53. 53. Save as UTF-8 • Notepad++
  54. 54. Save as UTF-8 • Sublime
  55. 55. Save as UTF-8 • VIM • Putty
  56. 56. HTML Tags - Text p: paragraph <p>Jlhuang Rocks!</p>
  57. 57. HTML Tags - Text br: break <p>Jlhuang <br> Rocks!</p>
  58. 58. HTML Tags - Link a: anchor <a href="http://www.google.com">Click me</a>
  59. 59. HTML Tags - Heading <h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6>
  60. 60. HTML Tags - List <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <ol> <li>Item4</li> </ol> </ul>
  61. 61. 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
  62. 62. HTML Tags - Images img: image <img src="http://i1.ytimg.com/vi/iYQHkwCfCiw/m axresdefault.jpg">
  63. 63. More Tags http://www.w3schools.com/tags/
  64. 64. CSS reference • https://speakerdeck.com/openwebscho ol/04-css-openwebschool
  65. 65. Javascript reference • https://speakerdeck.com/openwebschool/07-javascript- openwebschool • https://speakerdeck.com/openwebschool/08-js-frontend- and-jquery-openwebschool
  66. 66. WWW reference https://speakerdeck.com/openwebschool

×