Hãy sẵn sàng, các nhà phát triển web tương lai! Hãy tạo một trang web HTML đơn giản kết nối với Cơ sở dữ liệu Postgres. Trong ví dụ này, chúng tôi sẽ sử dụng JavaScript (Node JS và Express JS) cho các chức năng phần mềm trung gian của nó. Cho dù bạn muốn giới thiệu danh mục đầu tư của mình, viết blog hay hoàn thành một dự án nhỏ về phát triển web, phát triển web vẫn là một kỹ năng vẫn đang được yêu cầu. Con đường học tập phía trước Chúng ta sẽ đi sâu vào quá trình xây dựng một trang web HTML đơn giản từ đầu. Chúng ta sẽ khám phá cách tích hợp cơ sở dữ liệu Postgres, sử dụng JavaScript làm phần mềm trung gian để xử lý các yêu cầu API. Để thêm gia vị, chúng ta cũng có thể sử dụng Bootstrap5 để thiết kế trang web! Nhưng điều đó sẽ được đề cập trong một blog khác. Công nghệ được sử dụng: HTML5 Postgres (Cơ sở dữ liệu) Express JS (Phần cuối) Điều kiện tiên quyết Đảm bảo Postgres đã được tải xuống và sẵn sàng sử dụng. Ngoài ra, hãy tải xuống Node JS để cài đặt các gói npm như Express JS, Body Parser và Postgres API. Tải xuống Postgres Tải NodeJS tại đây tại đây Bước 1: Thiết lập cơ sở dữ liệu Postgres Tạo Cơ sở dữ liệu Postgres mới bằng cách sử dụng , đây là CLI để chạy các lệnh SQL hoặc giao diện người dùng đồ họa như pgAdmin (được cài đặt sẵn). Đối với phần trình diễn này, chúng tôi sẽ sử dụng để tạo cơ sở dữ liệu. psql psql Mở và nhập thông tin đăng nhập để bắt đầu. psql Tạo một cơ sở dữ liệu có tên là và kết nối với nó! webapp (Bạn có thể sử dụng bất kỳ tên nào bạn muốn cho dự án của mình!) CREATE database webapp; \c webapp Bắt đầu xây dựng bảng của bạn trong cơ sở dữ liệu này bằng lệnh . Bạn có thể sử dụng tài liệu Postgres để hướng dẫn bạn các lệnh. Đối với phần trình diễn này, chúng tôi đang tạo một cơ sở dữ liệu lưu trữ , và . CREATE TABLE student Name Year Branch (Thêm thuộc tính nếu muốn) CREATE TABLE student (name varchar(20), semester int, branch varchar(20)); \d student Bây giờ, chúng ta có thể bắt đầu tải một số dữ liệu giả lên bảng thông qua lệnh INSERT INSERT INTO student VALUES ('Abel', 4, 'CE'), ('John', 6, 'ME'), ('Doe', 2, 'ETC'); Sau khi hoàn tất việc thêm dữ liệu giả, chúng ta có thể xem bảng bằng lệnh bên dưới Student SELECT * FROM student; Nếu bạn làm theo các bước cho đến bây giờ, bạn sẽ nhận được bảng dưới đây! student Bước 2: Tạo một trang web HTML đơn giản Dưới đây là mã HTML soạn sẵn cho một trang web đơn giản: <!DOCTYPE html> <html lang='en'> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title> Student Management System </title> </head> <body> <h1> Student Management System </h1> </body> </html> Hãy bắt đầu thêm các khối div tùy chỉnh theo nhu cầu của chúng tôi: ... <body> <h1> Student Management System </h1> <p> Here, are the student details as below: </p> <div id='students_list'></div> ... Khối div dùng để hiển thị danh sách sinh viên đã được đăng ký vào cơ sở dữ liệu. Chúng tôi sẽ sử dụng Express JS để tìm nạp dữ liệu từ Postgres và hiển thị nó trong khối. students_list Bước 3: Kết nối HTML với Postgres thông qua Express JS Trước tiên hãy cài đặt các thư viện cần thiết trong hoặc Terminal của bạn Command Prompt npm install express body-parser pg Hãy bắt đầu xây dựng tệp để kết nối HTML và PostgreSQL. Đầu tiên, chúng tôi yêu cầu nhập các thư viện cần thiết để xử lý các yêu cầu và thiết lập kết nối script.js // Import required modules const express = require('express'); const { Pool } = require('pg'); const path = require('path'); const bodyParser = require('body-parser'); hoạt động như một dịch vụ phụ trợ, để phân tích các yêu cầu từ ứng dụng web HTML là API Postgres để thiết lập kết nối, cung cấp các tiện ích để quản lý đường dẫn thư mục là một phần mềm trung gian để trích xuất dữ liệu từ các yêu cầu POST express pg path body-parser (Chúng ta sẽ hiểu chúng sâu hơn khi chúng ta di chuyển) Bây giờ chúng ta hãy tạo một kết nối ứng dụng nhanh và đồng thời xác định cổng mà máy chủ sẽ lắng nghe. // Connect and Create an Express Application const app = express(); const port = 3000; // By default, its 3000, you can customize Thiết lập kết nối tới Postgres bằng cách tạo một phiên bản của đối tượng . Thêm các giá trị cần thiết để phù hợp với thiết lập Postgres của bạn. Pool // Create a Postgres Connection const pool = new Pool({ user: 'postgres', host: 'localhost', database: 'webapp', password: 'password', // Change to your password port: 5432, // Default Port }); Thêm chức năng để đăng ký tệp tĩnh thông qua phần mềm trung gian . Nó chỉ định thư mục gốc để phục vụ các tệp tĩnh express.static() app.use(express.static(path.join(''))); Bây giờ, chúng ta phải phân tích các yêu cầu HTML được gửi từ ứng dụng. Nói một cách đơn giản, đó là phần mềm trung gian được sử dụng để nhận dữ liệu từ người dùng, chẳng hạn như biểu mẫu hoặc nội dung tải lên app.use(bodyParser.urlencoded({ extended: false })); (Không thêm dòng trên nếu bạn không định lấy thông tin đầu vào từ người dùng. Chúng tôi sẽ thêm biểu mẫu đăng ký trong blog tiếp theo và đó là lý do tại sao chúng tôi yêu cầu trình phân tích cú pháp nội dung) Thiết lập trình xử lý Tuyến đường cho URL gốc ('/'). Vì vậy, khi yêu cầu GET được thực hiện tới URL gốc, máy chủ sẽ phản hồi bằng cách gửi tệp "index.html" nằm trong cùng thư mục // Setup Route handler app.get('/', (req, res) => { res.sendFile(path.join(__dirname, '', 'index.html')); }); Bây giờ đến phần chính nhé! Bây giờ chúng ta sẽ thiết lập trình xử lý định tuyến cho URL '/students' bằng phương thức HTTP GET. Trình xử lý này lấy dữ liệu sinh viên (từ truy vấn) từ Cơ sở dữ liệu Postgres. // Route handler for GET student data app.get('/students', (req, res) => { const query = 'SELECT * FROM student;'; pool.query(query, (error, result) => { if (error) { console.error('Error occurred:', error); res.status(500).send('An error occurred while retrieving data from the database.'); } else { const students = result.rows; res.json(students); } }); }); (Đảm bảo các dấu ngoặc được đóng đúng cách) Bây giờ, hãy chỉ định đường dây lắng nghe máy chủ và khi đến thời điểm, nó sẽ phản hồi các yêu cầu của nó. Khi lệnh dưới đây được lắng nghe, nó sẽ ghi một thông báo vào bảng điều khiển. // Listening to Requests app.listen(port, () => { console.log(`Server listening on port ${port}`); }); (Tốt cho mục đích gỡ lỗi) Xong! cuối cùng đã hoàn tất. Hãy thực hiện các thay đổi trong tệp để hiển thị các chi tiết cần thiết. script.js index.html ... <div id='students_list'></div> <script> // Fetch data via requests fetch('/students') .then(response => response.json()) .then(data => { const studentList = data.map( student => `<li> About ${student.name} : ${student.branch} - ${student.semester}th Sem</li>` ).join(''); document.getElementById('students_list').innerHTML = `<ul>${studentList}</ul>`; }) .catch(error => console.error('Error occurred:', error)); </script> ... Chạy trang web Mở Terminal và đi tới thư mục lưu trữ và rồi chạy lệnh sau: index.html script.js node script.js Nếu mọi thứ đều ổn, nó sẽ hiển thị nội dung "Server listen on port 3000" Bây giờ, bạn cần truy cập nơi bạn có thể thấy một trang web HTML đơn giản hiển thị dữ liệu bạn đã nhập! http://localhost:3000/ Thì đấy! Đó là nó! Bây giờ, hãy sử dụng khả năng sáng tạo và kiến thức của bạn để khám phá những khái niệm phát triển web này và tạo ra những trang web thú vị hơn! Tôi cũng sẽ thêm một blog khác về cách tạo hệ thống đăng ký và cách thiết kế nó, blog này sẽ sớm ra mắt. Theo dõi để biết thêm và theo dõi! Cho đến lúc đó, hãy tiếp tục viết mã!
