Download - INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!
![Page 1: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/1.jpg)
INTRO TO MAKING A WEBSITE
Mark Zhang
![Page 2: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/2.jpg)
HTML CSS Javascript PHP MySQL …That’s a lot of stuff!
![Page 3: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/3.jpg)
Overview of the Overview
Accessing a website Client-side technologies Server-side technologies
![Page 4: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/4.jpg)
Accessing a Website
![Page 5: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/5.jpg)
Accessing a Website
You (client)
![Page 6: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/6.jpg)
Accessing a Website
You (client)
Web server
![Page 7: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/7.jpg)
HTTP Request
You (client)
Web server
IP: 72.26.203.99
HTTP Request: GET www.xkcd.com
![Page 8: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/8.jpg)
HTTP Response
You (client)
Web server
IP: 72.26.203.99
HTTP Request: GET www.xkcd.com
HTTP Response: web content (HTML file)
![Page 9: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/9.jpg)
Browser Renders Files
You (client)
Web server
IP: 72.26.203.99
![Page 10: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/10.jpg)
Review
Client - your computer (usually by your browser)
Server – computer that stores and provides the website
![Page 11: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/11.jpg)
Demo
![Page 12: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/12.jpg)
Questions?
![Page 13: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/13.jpg)
Client-side Technologies
![Page 14: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/14.jpg)
Client Side
HTML CSS Javascript These are kinds of files that a web-server
can send to your computer. Your browser uses these files to render the web-page.
![Page 15: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/15.jpg)
HTML
Describes the content of a web-page<html> <head> <title>My Title</title> </head> <body> <p>Hello world!</p> </body</html>
![Page 16: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/16.jpg)
CSS
Styles HTML elementsp { font-size: 20px; color: red;}
![Page 17: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/17.jpg)
Javascript
Adds interactivity to web-pages Submit forms React to mouse movement Change HTML content (like text in a
paragraph)
![Page 18: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/18.jpg)
jQuery and AJAX
jQuery – Javascript with more convenient syntax
AJAX – a group of functions in Javascript that allows you to talk to a server without loading another page
![Page 19: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/19.jpg)
Questions
![Page 20: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/20.jpg)
Server Side Technologies
![Page 21: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/21.jpg)
Server Software
Responds to HTTP requests from clients. Apache – most common server software;
taught in 6.470 Commonly run on Linux computers. LAMP stack = Linux, Apache, MySQL, PHP
![Page 22: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/22.jpg)
PHP
Allows programmer to make web pages dynamic.
Collect form data Handle user sessions and authentication It often does this in conjunction with a
database (MySQL) Common alternatives: Python, Ruby
![Page 23: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/23.jpg)
Databases (MySQL)
Database – an organized collection of data that is maintained on the server Account information and passwords User-generated content (comments, posts,
etc.) MySQL is a particular database system
that is commonly used with PHP.
![Page 24: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/24.jpg)
PHP and MySQL
Often work together PHP makes queries to MySQL MySQL provides reliable storage and fast
access to large amounts of data PHP uses the content to generate a
dynamic webpage
![Page 25: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/25.jpg)
Additional Technologies
Web frameworks – simplify common tasks like user accounts, database access, etc. Django Ruby on Rails
![Page 26: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/26.jpg)
Additional Technologies
Git – version control Lets you save and rollback your work Lets you make branches. With Github, lets you easily collaborate with
others.
![Page 27: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/27.jpg)
Getting a Web Server
MIT You can get web space on scripts with just
your Athena account http://scripts.mit.edu/
Commercial Web Hosting WebFaction Bluehost Amazon EC2 (advanced)
![Page 28: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/28.jpg)
Questions?
![Page 29: INTRO TO MAKING A WEBSITE Mark Zhang. HTML CSS Javascript PHP MySQL …That’s a lot of stuff!](https://reader036.vdocuments.net/reader036/viewer/2022062516/56649da75503460f94a9423b/html5/thumbnails/29.jpg)
Mark Zhang
INTRO TO MAKING A WEBSITE