2014 database - course 1 - www introduction
6 likes2,458 views
This document provides an introduction to HTML, HTTP protocols, and how to build a basic web server. It begins with an overview of what happens when a browser opens a URL, including DNS lookup and the HTTP request. It then discusses the HTTP protocol and how GET, POST, PUT, and DELETE map to CRUD operations and REST APIs. The document explains how to parse an HTTP request and handle responses in a simple web server. It also introduces CGI as a way to execute scripts or programs on the server side. Finally, it provides recommendations for text editors and references for HTML, CSS, JavaScript, and building websites.
2014 database - course 1 - www introduction
- 1. WWW Introduction Ensky / 林宏昱
- 2. What happened when you open a browser?
- 3. DNS lookup dns what's the ip of facebook.com? It's 173.252.110.27
- 4. HTTP protocol GET /enskylin HTTP/1.1 Host: www.facebook.com HTTP/1.1 200 OK HTML
- 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. What happened when you post a form on website?
- 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. 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. 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. 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. 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. What about HTML?
- 14. HTML is a markup language (not a programming language)
- 15. defines defines what elements on the page (images, links, texts, videos, forms, scripts, etc.) http://goo.gl/qOu6OF
- 16. defines what orders the elements are 1 2 3 4 http://goo.gl/qOu6OF
- 17. HTML • cooperates –layouts with CSS –functions with Javascript
- 18. CSS, HTML, JS Structures Layouts Functions 結構 樣式 功能
- 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. 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. 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. 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. 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. 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. Debug tools • Chrome debug tool F12
- 26. Debug tools
- 27. CSS, HTML, JS Structures Layouts Functions 結構 樣式 功能
- 28. HTTP protocol review GET /enskylin HTTP/1.1 Host: www.facebook.com HTTP/1.1 200 OK HTML
- 29. Imagine if you want to write a web server…
- 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. 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. 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. 4.Response the document back to client GET /icon.png HTTP/1.1 Host: www.ensky.tw HTTP/1.1 200 OK HTML
- 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. 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. However, static files is not rocks enough!
- 37. How about dynamic generated documents?
- 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. And we need to generate the HTML GET /enskylin HTTP/1.1 Host: www.facebook.com HTTP/1.1 200 OK HTML
- 40. And send it back to browser GET /icon.png HTTP/1.1 Host: www.ensky.tw HTTP/1.1 200 OK HTML
- 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. 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. 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. 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. 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. CGI Implemention #include <iostream> using namespace std; int main () { cout << “<!doctype html>”; cout << “<html>”; cout << “ <head>”; // …omitted }
- 48. We Save Your Time!
- 49. Next two weeks
- 50. References
- 51. IDE • We highly recommended to use
- 52. IDE Note • You must save in UTF-8, otherwise you'll not be able to render Chinese correctly • see: ChineseWorld PTT
- 53. Save as UTF-8 • Notepad++
- 54. Save as UTF-8 • Sublime
- 55. Save as UTF-8 • VIM • Putty
- 56. HTML Tags - Text p: paragraph <p>Jlhuang Rocks!</p>
- 57. HTML Tags - Text br: break <p>Jlhuang <br> Rocks!</p>
- 58. HTML Tags - Link a: anchor <a href="http://www.google.com">Click me</a>
- 59. HTML Tags - Heading <h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6>
- 60. HTML Tags - List <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <ol> <li>Item4</li> </ol> </ul>
- 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. HTML Tags - Images img: image <img src="http://i1.ytimg.com/vi/iYQHkwCfCiw/m axresdefault.jpg">
- 65. Javascript reference • https://speakerdeck.com/openwebschool/07-javascript- openwebschool • https://speakerdeck.com/openwebschool/08-js-frontend- and-jquery-openwebschool