2,504 lượt đọc

Xây dựng một trang web HTML đơn giản với kết nối cơ sở dữ liệu Postgres

từ tác giả Abel Roy6m2024/05/05

dài quá đọc không nổi

Hướng dẫn này hướng dẫn bạn tạo một trang web HTML được kết nối với cơ sở dữ liệu Postgres bằng JavaScript (Node JS, Express JS). Nó bao gồm việc thiết lập cơ sở dữ liệu, tạo cấu trúc HTML, kết nối với Express JS và tìm nạp dữ liệu từ Postgres để hiển thị trên trang web.

featured image - Xây dựng một trang web HTML đơn giản với kết nối cơ sở dữ liệu Postgres

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 đây Tải NodeJS 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 psql , đâ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 psql để tạo cơ sở dữ liệu.

Mở psql và nhập thông tin đăng nhập để bắt đầu.

Tạo một cơ sở dữ liệu có tên là webapp và kết nối với nó! (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 CREATE TABLE . 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 student lưu trữ Name , Year và 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 Student bằng lệnh bên dưới

 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 student dưới đây!

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 students_list 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.

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 Command Prompt hoặc Terminal của bạn

 npm install express body-parser pg

Hãy bắt đầu xây dựng tệp script.js để 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

 // Import required modules const express = require('express'); const { Pool } = require('pg'); const path = require('path'); const bodyParser = require('body-parser');

express 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 pg là API Postgres để thiết lập path kết nối, cung cấp các tiện ích để quản lý đường dẫn thư mục body-parser là một phần mềm trung gian để trích xuất dữ liệu từ các yêu cầu POST (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 Pool . Thêm các giá trị cần thiết để phù hợp với thiết lập Postgres của bạn.

 // 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 express.static() . Nó chỉ định thư mục gốc để phục vụ các tệp tĩnh

 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! script.js cuối cùng đã hoàn tất. Hãy thực hiện các thay đổi trong tệp index.html để hiển thị các chi tiết cần thiết.

 ... <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> ...