Lời nói đầu
Sau khi có kiến thức căn bản về HTML, CSS là chúng ta đã có
thể tạo được phần giao diện (đơn giản) cho một ứng dụng web, có thể tạo ra form
nhập liệu để gửi về phía server. Để có thể thực hiện các giao tiếp, xử lý phức
tạp, giữa máy người dùng và server thì chúng ta cần học thêm thêm ngôn ngữ lập
trình JavaScript bên phía client.
Như vậy, sau khi học cơ bản về HTML và CSS, là bạn có thể đọc
cuốn sách TỰ HỌC LÀM WEB Tập 4 - Lập
trình Backend căn bản. Song song đó, bạn sẽ tiếp tục học thêm các kiến thức
liên quan đến lập trình web frontend, như JavaScript, jQuery, Bootstrap, React,
hoặc các thư viện, framework khác.
Đây là cuốn sách thứ tư, TỰ
HỌC LÀM WEB, Tập 4 – Lập trình Backend căn bản, trong loạt các cuốn sách về
tự học làm web.
Sách được viết theo kiểu tự học, với mỗi chủ đề luôn bắt đầu
là các kiến thức căn bản, các khái niệm, các thực hành minh họa; sau đó là các
nguồn tài liệu tham khảo để bạn đọc và xem thêm; tiếp theo là các bài tập và thực
hành; sau cùng là câu hỏi ôn tập.
Trong sách cũng có các tài liệu tham khảo, câu hỏi, bài tập,
bài thực hành bằng tiếng Anh, để giúp người học trải nghiệm, từng bước nâng cao
khả năng sử dụng tiếng Anh. Bạn có thể sử dụng danh mục các từ tiếng Anh chuyên
ngành tại đây: https://bit.ly/3iLYpgG.
Phần kết thúc sẽ là hướng dẫn làm một số dự án.
Trong cuốn sách TỰ HỌC
LÀM WEB Tập 4 - Lập trình Backend căn bản, chúng ta sẽ tìm hiểu về các chủ
đề sau:
– Quá trình duyệt
web
– Hệ thống tên miền
– Web server
– Dịch vụ lưu trữ web
– Lập trình phía server
– Kết nối web server và chương trình dịch
– Lập trình một số chức năng phía server
– Giới thiệu về framework
– Giới thiệu về CMS
– Một số dự án mẫu
Mời bạn đọc thêm các cuốn sách cùng chủ đề:
– TỰ HỌC LÀM WEB Tập 1
– HTML căn bản
– TỰ HỌC LÀM WEB Tập 2
– CSS căn bản
– TỰ HỌC LÀM WEB Tập 3
– JavaScript căn bản
Dù đã cố gắng, nhưng tài liệu này chắc chắn còn hạn chế về
kiến thức, kĩ năng, nhận định. Mong bạn, luôn đọc trong tâm thế hoài nghi.
Đà
Lạt, 2023
1
Tổng quan
Trước khi bắt tay vào lập trình, chúng ta cần tìm hiểu các
kiến thức liên quan đến hoạt động của một ứng dụng web, hệ thống tên miền, web
server, lưu trữ web, các ngôn ngữ lập trình phía server. Đây là các kiến thức
chung, căn bản mà bạn nên biết, nó sẽ giúp ích rất nhiều trong quá trình thiết
lập môi trường lập trình phía server.
1.1
Hoạt động của một ứng dụng web
1.1.1
Mô
hình client-server
Mọi trang web, hoặc ứng dụng web đều hoạt động dựa trên mô
hình client-server. Vì vậy chúng ta sẽ cùng tìm hiểu về mô hình này.
Ý tưởng của mô hình này, đơn giản chỉ là: máy khách (client)
gửi một yêu cầu (request) đến máy chủ (server), máy chủ sẽ xử lý và trả kết quả
về cho máy khách.
Xem hình minh họa
về mô hình client-server:
Mô hình client-server gồm một số thành phần:
– Client: khởi phát yêu cầu, gửi yêu cầu tới server, nhận kết
quả từ server trả về. Client có thể là trình duyệt, ứng dụng viết bằng
python/javascript hoặc bất kỳ ứng dụng nào mà có phát sinh ra HTTP request.
– Server: có vai trò cung cấp dịch vụ, xử lý và trả về kết
quả cho máy client.
– Môi trường truyền thông tin: hạ tầng mạng (LAN, Internet),
bao gồm cả phần cứng và phần mềm
– Giao thức truyền thông tin: các chuẩn công nghệ giúp giao
tiếp và truyền thông tin giữa server-client. Ví dụ HTTP, HTTPS
Trong mô hình client-server, khi môi trường truyền đã được kết
nối và sẵn sàng, thì client luôn là nơi khởi phát của ứng dụng. Client sẽ gửi một
HTTP request tới server. Khi server nhận được request, nó sẽ xử lý và trả kết
quả về cho client bằng một HTTP response.
Client là thành
phần chủ động. Server là thành phần bị động.
Chúng ta sẽ thấy
cách hoạt động của một ứng dụng web rất khác so với cách hoạt động của chương
trình trên máy cục bộ (ví dụ Microsoft Word). Trong Microsoft Word, mọi thao
tác đều được thực hiện ngay trên máy người dùng, từ việc ra lệnh, xử lý và trả
về kết quả. Cũng là chương trình xử lý văn bản, nhưng Google Docs là một ứng dụng
hoạt động theo mô hình client-server. Nếu không có kết nối mạng thì Google Docs
sẽ không hoạt động được.
Để nắm rõ hơn về
mô hình client-server, chúng ta sẽ cùng tìm hiểu về quá trình duyệt web diễn ra như thế nào ở phần tiếp theo.
1.1.2 Quá trình duyệt web diễn ra như thế nào
Do ứng dụng web
hoạt động theo mô hình client-server, nên để có trang web trên trình duyệt, cần
trải qua các bước sau:
Bước 1: Người
dùng nhập địa chỉ trang web (URL) vào thanh địa chỉ. Ví dụ:
http://example.com/hello.php
Bước 2: Trình duyệt
dựa vào URL trong thanh địa chỉ, kết nối tới máy web server, gửi yêu cầu tới
web server (ví dụ yêu cầu: gửi cho nội dung trang web hello.php)
Bước 3: Web
server xử lý yêu cầu, gửi trả kết quả về cho trình duyệt (ví dụ nội dung trang
web dưới dạng mã nguồn HTML, CSS và JavaScript)
Bước 4: Trình duyệt
thực thi mã HTML, CSS, JavaScript và hiển thị trang web ra màn hình.
Xem hình minh họa:
Chúng ta cùng thực
hành, quan sát quá trình duyệt web trên một máy tính:
Bước 1. Mở trình
duyệt web. Ví dụ Chrome
Bước 2. Nhập vào
đường dẫn của trình duyệt địa chỉ một trang web, bấm Enter để trình duyệt lấy
trang web từ máy server, và hiển thị nội dung ra màn hình. Ví dụ thanhnien.vn
Bước 3. Mở
Developer tools của trình duyệt bằng một số cách sau:
– Bấm tổ hợp ba phím Ctrl+Shift+I,
– hoặc bấm phím F12,
– hoặc vào menu của trình duyệt tìm tới mục Developer tools,
– hoặc bấm chuột phải vào trang web, chọn Inspect.
Bước 4. Trong cửa sổ của Developer tools, bấm chuột vào mục
Network.
Bước 5. Quan sát sẽ thấy các tập tin HTML (thanhnien.vn),
CSS (các tập tin có phần mở rộng là css), JavaScript (các tập tin có phần mở rộng
là js) được server gửi về cho client.
Bước 6. Bấm chuột vào các tập tin do server gửi về và quan
sát nội dung của nó ở cửa sổ bên phải. Nhớ chọn mục Response.
Hình minh họa:
1.1.3 Client side/server side/front end/back end/fullstack
Ứng dụng web hoạt động dựa trên kiến trúc client-server,
nghĩa là sẽ có các xử lý được thực hiện tại phía client (client-side), và có
các xử lý được thực hiện ở phía server (server-side).
Các xử lý tại client-side bao gồm việc gửi yêu cầu tới
server, nhận mã HTML, CSS và JavaScript từ server, thực thi mã và hiển thị kết
quả cho người dùng.
Các xử lý tại server-side bao gồm việc nhận yêu cầu do
client gửi tới, làm việc với cơ sở dữ liệu, xử lý yêu cầu, trả kết quả về cho
client.
Trong lĩnh vực web, client-side bao gồm các hoạt động diễn
ra tại trình duyệt, server-side bao gồm các hoạt động diễn ra tại web server.
Như vậy để tạo ra một ứng dụng web hoàn chỉnh, cần phải viết
các đoạn mã xử lý ở cả bên server và bên client; đồng thời phải phối hợp các đoạn
mã này một cách hợp lý để đảm bảo ứng dụng chạy đúng, an toàn và hiệu quả.
Việc viết mã xử lý tại phía client thường được gọi là lập
trình phía client, hay lập trình front-end; các ngôn ngữ thường được sử dụng gồm
HTML, CSS, và JavaScript. Front-end là toàn bộ giao diện và các trải nghiệm của
người dùng trên trình duyệt.
Việc viết mã xử lý tại phía server thường được gọi là lập
trình phía server, hay lập trình back-end; các ngôn ngữ thường được sử dụng gồm
PHP, C#, Java, Python, Ruby, JavaScript. Back-end là các xử lý liên quan đến cơ
sở dữ liệu, các xử lý nghiệp vụ chạy tại máy server.
Tùy theo khả năng, một lập trình viên có thể chọn làm ở mảng front-end, hoặc back-end hoặc cả hai (full-stack). Dù làm ở mảng front-end thì bạn cũng phải biết căn bản về mảng back-end và ngược lại.
1.1.4 Xem và đọc thêm
– [1] Từ khóa: kiến trúc client-server, quá trình hiển thị một
trang web, How The Web Works
– [2] Kiến trúc
client-server: https://vi.wikipedia.org/wiki/M%C3%B4_h%C3%ACnh_client-server
– [3] How The Web Works - The Big Picture (view): https://www.youtube.com/watch?v=hJHvdBlSxug
– [4] How The Web Works - The Big Picture (read): https://academind.com/tutorials/how-the-web-works/
– [5] CSR và SSR: https://www.freecodecamp.org/news/server-side-rendering-javascript/
1.1.5 Bài tập và thực hành
Bài tập 1. Thực hành các minh họa trong phần
lý thuyết.
Bài tập 2. Thực
hiện theo yêu cầu sau:
– Sử dụng trình
duyệt, truy cập vào 2 trang web https://laravel.com/, và https://react.dev/.
– Developer tools
để quan sát, và ghi lại danh sách các tập tin được server gửi về client.
– Trang home page
của mỗi website có tên là gì?
– So sánh nội dung của 2 trang home page của mỗi website
trong cửa sổ Developer tools
– So sánh nội dung của 2 trang home page của mỗi website bằng
chức năng View page source
– Rendering là gì?
– Server side rendering (SSR) là gì?
– Client side rendering (CSR) là gì?
– Nên phát triển ứng dụng web theo SSR hay CSR?
1.1.6 Câu hỏi ôn tập
Câu 1. Kiến trúc client-server gồm 4 thành phần sau:
A. Server, Services, Môi trường truyền, Giao thức truyền
thông tin
B. Client, Server, Môi trường truyền, Giao thức truyền thông
tin
C. Client, Server, Môi trường truyền, Thiết bị lưu trữ
D. Client, Server, Trình duyệt, Giao thức truyền thông tin
Câu 2. Trong kiến trúc client-server, client có thể là trình
duyệt, ứng dụng viết bằng python/javascript hoặc bất kỳ ứng dụng nào mà có phát
sinh ra ______.
A. Kết quả
B. HTTP request
C. Giao thức
D. HTML
Câu 3. Một số phần mềm dùng để tạo ra HTTP Web Server gồm:
A. IIS, Apache, Tomcat, NodeJS, Unix, GWS, Tornado
B. IIS, Apache, Tomcat, DNS, Nginx, GWS, Tornado
C. IIS, Apache, Tomcat, NodeJS, Nginx, GWS, HTTP response
D. IIS, Apache, Tomcat, NodeJS, Nginx, GWS, Tornado
Câu hỏi 4. Client–server model is a distributed application
structure that partitions tasks or workloads between the providers of a
resource or service, called _______, and service requesters, called clients.
A. browsers
B. web services
C. servers
D. centers
Câu hỏi 5. Web server thường gửi về trình duyệt các loại mã
nguồn sau:
A. HTML, CSS, JavaScript, PHP
B. C#, HTML, CSS, JavaScript
C. HTML, CSS, JavaScript
D. Python, HTML, CSS, JavaScript
-----
-----
Cập nhật: 13/8/2023
-----
Bạn muốn tự học HTML bài bản? Xem thêm