Giải ngố thuật ngữ Web Dev (Phần 1): Website, Internet, Trình duyệt & Client-Server là gì?

Chào mừng anh em! Chắc hẳn không ít lần anh em nghe hội IT, đặc biệt là mấy ông làm web, nói chuyện với nhau mà dùng những từ như “deploy lên server”, “check API”, “code frontend”, “fix bug backend”… rồi cảm thấy mình như người tiền sử lạc vào thế giới tương lai đúng không? Thấy chữ hiểu chữ không, mơ hồ, khó chịu?

Đừng lo lắng! Đó là nỗi niềm chung của hầu hết mọi người khi mới bắt đầu tìm hiểu về lập trình web. Mớ thuật ngữ đó nghe thì nguy hiểm vậy thôi, chứ bản chất không quá phức tạp đâu.

Trong series này, mình sẽ cùng anh em mổ xẻ từng khái niệm một, theo cách dễ hiểu nhất,. Bắt đầu từ những thứ cơ bản nhất trong phần 1 này nhé!

Website – Ngôi nhà trên mạng

Trước tiên, website là gì?

Nôm na, một website giống như một ngôi nhà số trên mạng Internet. Nó là một tập hợp các trang (pages) được liên kết với nhau, chứa đủ thứ nội dung: chữ viết (text), hình ảnh (images), video, âm thanh, và cả những đoạn mã lập trình để tạo ra sự tương tác.

Ví dụ: trang Facebook bạn lướt mỗi ngày, trang báo bạn đọc tin tức, hay chính trang siucode.com bạn đang xem đây, tất cả đều là website.

Để dễ hình dung hơn:

• Nội dung (Content): Giống như đồ đạc, nội thất bên trong ngôi nhà (bàn ghế, tranh ảnh, TV…). Đây là thông tin mà website muốn truyền tải đến bạn.
• Mã nguồn (Code): Giống như bản thiết kế và vật liệu xây dựng nên ngôi nhà (gạch, xi măng, hệ thống điện nước…). Đây là các tệp tin chứa mã lệnh (như HTML, CSS, JavaScript – mình sẽ nói kỹ hơn ở phần sau) để trình duyệt biết cách hiển thị ngôi nhà đó ra sao.
• Địa chỉ (Domain Name / URL): Giống như địa chỉ nhà (số nhà, tên đường…). Đây là cái tên duy nhất để mọi người tìm đến website của bạn, ví dụ: google.com, facebook.com, siucode.com.

Vậy, website đơn giản là một “ngôi nhà số” chứa thông tin, có địa chỉ riêng để mọi người ghé thăm. Nhưng làm sao chúng ta đến thăm được ngôi nhà đó? Đó là nhờ…

Internet – Mạng lưới “đường sá” toàn cầu

Nếu website là những ngôi nhà, thì Internet chính là hệ thống đường sá, hạ tầng khổng lồ kết nối hàng tỷ ngôi nhà (máy tính, máy chủ, điện thoại…) đó lại với nhau trên toàn thế giới.

Nhờ có mạng lưới Internet này mà thông tin có thể di chuyển từ máy tính này sang máy tính khác, từ “ngôi nhà số” (website đặt trên máy chủ) đến máy tính của bạn. Khi bạn muốn truy cập một website, bạn thực chất đang gửi một yêu cầu đi qua mạng lưới đường sá Internet này để đến đúng địa chỉ ngôi nhà bạn cần tìm.

Trình duyệt (Browser) – “Người dẫn đường” kiêm “Phiên dịch viên”

Ok, có nhà (Website), có đường đi (Internet), nhưng làm sao để chúng ta nhìn thấy được bên trong ngôi nhà đó? Chúng ta cần một công cụ đặc biệt, đó chính là Trình duyệt web (Web Browser).

Các trình duyệt quen thuộc mà anh em chắc chắn đang dùng hàng ngày là Google Chrome, Mozilla Firefox, Safari (của Apple), Microsoft Edge…

Vậy trình duyệt làm gì? Nó đóng vai trò như một “người dẫn đường” và “phiên dịch viên”:

• Dẫn đường: Khi bạn gõ địa chỉ website (ví dụ: siucode.com) vào thanh địa chỉ, trình duyệt sẽ dùng địa chỉ đó để tìm đường trên Internet và gửi yêu cầu đến đúng “ngôi nhà” (máy chủ chứa website).
• Phiên dịch: Khi “ngôi nhà” phản hồi bằng cách gửi về một đống mã lệnh (HTML, CSS, JavaScript…), trình duyệt sẽ đọc hiểu (phân tích – parse) những mã lệnh này và render chúng thành một trang web hoàn chỉnh, có hình ảnh, màu sắc, bố cục đẹp đẽ mà bạn có thể nhìn thấy và tương tác trên màn hình.

Client-Server: Mô hình “Khách-Chủ” cốt lõi

Đây là một trong những khái niệm nền tảng quan trọng nhất của thế giới web, gọi là mô hình Client-Server (Khách-Chủ).

Hãy quay lại ví dụ ngôi nhà cho dễ hiểu:

• Client (Khách): Chính là máy tính hoặc điện thoại của bạn, cụ thể hơn là trình duyệt web bạn đang dùng để truy cập website. Client là bên yêu cầu thông tin.
• Server (Chủ): Là một máy tính mạnh mẽ (hoặc một cụm máy tính) ở đâu đó trên Internet, nơi lưu trữ mã nguồn và dữ liệu của website (chính là “ngôi nhà số”). Server là bên cung cấp thông tin khi nhận được yêu cầu hợp lệ.

Quá trình tương tác diễn ra như sau (Request-Response Cycle – Chu trình Yêu cầu-Phản hồi):

1. Gõ cửa (Request – Yêu cầu): Bạn ngồi trước máy tính (Client), mở trình duyệt Chrome, gõ siucode.com và nhấn Enter. Lúc này, trình duyệt của bạn (Client) sẽ soạn một “lá thư yêu cầu” (gọi là HTTP Request) và gửi nó qua đường sá Internet đến đúng địa chỉ của “ngôi nhà siucode” (Server). Lá thư này về cơ bản nói rằng: “Tôi muốn xem trang chủ của siucode.com”.
2. Chủ nhà xử lý (Processing): Máy chủ (Server) chứa siucode.com nhận được “lá thư yêu cầu”. Nó sẽ kiểm tra xem yêu cầu này muốn gì (à, muốn xem trang chủ). Server sẽ lục tìm các tệp tin cần thiết (HTML, CSS, hình ảnh…) của trang chủ đó.
3. Mở cửa mời vào (Response – Phản hồi): Sau khi tìm thấy, Server sẽ đóng gói tất cả những tệp tin đó lại và gửi một “lá thư phản hồi” (gọi là HTTP Response) ngược lại qua Internet cho trình duyệt của bạn (Client).
4. Khách xem nhà (Rendering): Trình duyệt của bạn nhận được gói dữ liệu phản hồi. Nó bắt đầu “phiên dịch” các mã lệnh HTML, CSS, JavaScript… và sắp xếp, hiển thị chúng thành trang web siucode.com hoàn chỉnh trên màn hình cho bạn xem.

Toàn bộ quá trình lướt web của bạn, từ việc xem tin tức, lướt mạng xã hội, mua hàng online… đều dựa trên mô hình Client-Server và chu trình Request-Response này. Hiểu được nó là bạn đã nắm được nguyên tắc hoạt động cơ bản nhất của web rồi đó!

Lời kết

Vậy là trong phần đầu tiên này, chúng ta đã cùng nhau “giải ngố” những khái niệm siêu cơ bản:

• Website: Ngôi nhà số chứa thông tin.
• Internet: Mạng lưới đường sá kết nối các ngôi nhà.
• Browser (Trình duyệt): Người dẫn đường kiêm phiên dịch viên giúp ta xem nhà.
• Client-Server: Mô hình Khách-Chủ, nơi Client (trình duyệt của bạn) yêu cầu thông tin và Server (máy chủ chứa web) phản hồi lại.

Nghe cũng không quá phức tạp đúng không nào? Đây mới chỉ là bước khởi đầu trên con đường tìm hiểu về lập trình web thôi. Nắm vững những khái niệm này sẽ giúp anh em dễ dàng tiếp thu các kiến thức sâu hơn ở những phần tiếp theo.

Trong phần tới, chúng ta sẽ cùng soi kỹ hơn vào “mặt tiền” của ngôi nhà website. Frontend là gì? HTML, CSS và JavaScript – bộ ba quyền lực này đóng vai trò cụ thể như thế nào để tạo nên giao diện long lanh mà chúng ta thấy hàng ngày? Hẹn gặp lại anh em ở Phần 2 nhé!

SiuCode – Vừa code vừa siuuuu🚀