Introduction to web development

1. Introduction to
Web Development
 How a website works?
 Frontend
 Backend
 Database
 Demo

2. SPEAKER
DIEP PHUONG QUYNH
Developer at Netcompany
Computer Science K17

3. How websites work?

4. User
Browser
Enter URL
https://www.youtube.com
DNS Server
Server
Request
Response
Translate
domain to IP
Database
Request

5. Frontend

6. Frontend Code: HTML + CSS + Javascript

7. Frontend Code: HTML + CSS + Javascript
- Text, image, link
- No styling

8. Frontend Code: HTML + CSS + Javascript
- Colors, fonts, position
- Styling of a webpage

9. - Static webpage
- Cannot interact
- Read only
+

10. Frontend Code: HTML + CSS + Javascript
- Make ability to interact with website
Example
- Click on a photo
- Upload/download photos/videos
- Send message
- Comment
- Like/Love a post

11. Backend

12. Backend Code
Why do we need backend?
- Make it available to others
- Keep history of data
- Save data to be available later
- As a controller send communication
between frontend and the database
Frontend Backend Database
User

13. Backend Code
- Can be written in different programming languages

14. Database

15. Database
Store data
- Users
- Images
- Messages
- Like/Share
- Comments
Relational Database
Non Relational Database

16. Demo