WebPHP - Bai 6 - Understand Web and HTML/CSS/JS

Get Started. It's Free
or sign up with your email address
WebPHP - Bai 6 - Understand Web and HTML/CSS/JS by Mind Map: WebPHP - Bai 6 - Understand Web and HTML/CSS/JS

1. 1. Khái nhiệm về Web

1.1. Khái niệm về Web - Giao thức HTTP là gì? - Client/Server là gì? - Request/Response là gì? - Trang Web và Website khác nhau thế nào? - Frontend/Backend là gì? - Web/Web Application khác nhau thế nào? - Công nghệ Web có thể làm được Mobile/Desktop Application - Trình duyệt Web / Web Engine - Cookie/Session là gì? - Domain/Hosting/Webserver/SSL/CDN là gì?

1.1.1. Giao thức HTTP Http (HyperText Transfer Protocol) là giao thức truyền tải siêu văn bản được sử dụng trong www dùng để truyền tải dữ liệu giữa Web server đến các trình duyệt Web và ngược lại. Giao thức này sử dụng cổng 80 (port 80) là chủ yếu (mặc định). Các giao thức HTTP, FTP, SMTP, POP được thực hiện qua TCP/IP qua tầng application

1.1.2. Client-Server Là mô hình ứng dụng phân tán, gồm có 2 thành phần chính đó là máy khách (client) và máy chủ (server). Client sẽ là nơi gửi yêu cầu. Và Server là nơi đáp ứng yêu cầu tương ứng từ Client.

1.1.3. Request và Response Request là một yêu cầu mà thông tin gửi từ Client lên Server. Response là một phản hồi thông tin tương ứng với Request nhận được. Response sẽ được gửi từ Server tới Client.

1.1.4. Trang Web và Website Trang Web là một trang thông tin cụ thể và có chứa hình ảnh, văn bản, âm thanh, video, ... Website là một tập các trang Web có sự liên kết nhau về mặt ý nghĩa nào đó. Ví dụ: Một Website thường thể hiện qua 1 domain (Tên miền).

1.1.5. Frontend và Backend Frontend là cái mà người dùng có thể thấy và sử dụng được. HTML/CSS/JS là phần Frontend trong lập trình Web. Backend là phần chính của ứng dụng, là xương sống của ứng dụng.

1.1.6. Web và Web Application Website là một tập hợp các trang web và thể hiện thông tin cần thiết. Cung cấp chức năng đơn giản. Web Application trước tiên là WebSite. Nhưng nó là một phần của phần mềm có thể được truy cập bởi trình duyệt. Ứng dụng Web sẽ có cấu trúc phức tạp hơn, yêu cầu chức năng đa dạng, Backend bên dưới được thiết kế sẽ phức tạp hơn. Ví dụ: Google Apps, Amazon, YouTube

1.1.7. Mobile/Desktop Application Electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS

1.1.8. Trình duyệt Web / Web Engine Trình duyệt Web là chương trình thường dùng chạy ở máy Client để xử lý và hiển thị nội dung trang Web. Web Engine là thư viện hoặc phần mềm hỗ trợ việc chạy Web trên các nền tảng khác nhau như trên command line (CMD), Mobile, Desktop Application

1.1.9. Cookie / Session Cookie là một đoạn văn bản ghi thông tin được tạo ra và lưu trên trình duyệt của máy khách (người dùng) Session là một phiên làm việc tách biệt của một máy khách (Client) được lưu trữ tại máy chủ (Server)

1.1.10. Domain/Hosting/Webserver/SSL/CDN Hosting là nơi đặt Website (Code). Vài nhà cung cấp Vultr, Digitalocean, AWS, Google, Rackspace,... Domain là địa chỉ Website theo tên. IP là địa chỉ Website theo mã số. Vài nhà cung cấp name.com, godaddy.com... Webserver chạy trên Hosting/Server để chạy Website. Một vài Webserver phổ dụng Apache/Nginx/IIS/Tomcat.... SSL (HTTPS) là lớp bảo vệ nội dung Website khỏi sự nhòm ngó bên ngoài. Vài nhà cung cấp ssls.com, namecheap.com,... CDN (Content delivery network) phân tán tài nguyên web giúp việc truy cập nhanh và bảo mật tới người dùng cuối. Vài nhà cung cấp Cloudflare, KeyCDN, Rackspace, Google Cloud CDN, CacheFly, Amazon CloudFront

1.1.10.1. WebServer

2. 2. Ngôn ngữ HTML/CSS/JS

2.1. Các ngôn ngữ HTML/CSS/JS - HTML/CSS/JS là 3 ngôn ngữ cơ bản để tạo ra một trang web. Để lập trình Web (Frontend) - HTML (HyperText Markup Language): Có nhiệm vụ thể hiện nội dung - CSS (Cascading Style Sheets): Có nhiệm vụ trang trí, thay đổi diện mạo nội dung HTML - JS (Javascript): Tương tác, thay đổi các hành vi từ người dùng - jQuery/Lodash/Moment/Polymer/... + jQuery là Javascript được sử dụng nhiều và phổ biến nhất ở những năm 2005 - 2020. - Framework/Toolkit: VueJS/ReactJS/AngularJS => Frontend developer phải biết 3 thư viện này

3. 3. Thực hành

3.1. Các bước: - Cấu trúc của một trang Web base.html, demo.html và tìm hiểu - Deploy(Triển khai) code lên Server/Hosting + HTML https://html.laptrinhtv.com/ - Backend: Java (JSP/Servlet), PHP (Laravel), Python (Django),... + Laravel https://www.laptrinhtv.com/ + Tomcat https://tomcat.laptrinhtv.com/ + Django https://django.laptrinhtv.com/ - Cơ chế hoạt động của một trang Web trên trình duyệt Web - Tìm hiểu các khái niệm quan trọng ở lý thuyết: HTTP, Website, Client/Server, Request/Response, Frontend/Backend, Cookie/Session, Domain/Hosting, Webserver, SSL, CDN

4. 4. Kết bài

4.1. - Hiểu rõ những khái nhiệm về Web - 3 ngôn ngữ quan trọng để tạo trang Web (Frontend). - Cơ chế hoạt động của một trang Web. - Cần phải có Backend và Frontend để tạo một Website/Web Application hoàn chỉnh

5. 5. Video

5.1. Kênh: https://www.youtube.com/c/laptrinhtv Khóa học: https://bit.ly/3AdZiI1