2,504 чтения

Создайте простой HTML-сайт с возможностью подключения к базе данных Postgres

к Abel Roy6m2024/05/05

Слишком долго; Читать

В этом руководстве рассказывается, как создать веб-сайт HTML, подключенный к базе данных Postgres, с помощью JavaScript (Node JS, Express JS). Он охватывает настройку базы данных, создание структуры HTML, подключение к Express JS и получение данных из Postgres для отображения на веб-странице.

featured image - Создайте простой HTML-сайт с возможностью подключения к базе данных Postgres

Готовьтесь, будущие веб-разработчики! Давайте создадим простой HTML-сайт, который подключается к базе данных Postgres.

В этом примере мы будем использовать JavaScript (Node JS и Express JS) для реализации функций промежуточного программного обеспечения. Хотите ли вы продемонстрировать свое портфолио, вести блог или завершить мини-проект по веб-разработке, веб-разработка — это навык, который по-прежнему востребован.

Предстоящий путь обучения

Мы углубимся в процесс создания простого HTML-сайта с нуля. Мы рассмотрим, как интегрировать базу данных Postgres, используя JavaScript в качестве промежуточного программного обеспечения для обработки запросов API. Чтобы оживить ситуацию, мы также можем использовать Bootstrap5 для разработки веб-страницы! Но об этом будет в другом блоге.

Используемые технологии:

HTML5
Постгрес (база данных)
Экспресс JS (бэкэнд)

Предварительные условия

Убедитесь, что Postgres загружен и готов к использованию. Кроме того, загрузите Node JS для установки пакетов npm, таких как Express JS, Body Parser и API Postgres. Загрузите Postgres здесь. Загрузите NodeJS здесь.

Шаг 1. Настройка базы данных Postgres

Создайте новую базу данных Postgres либо с помощью psql , который представляет собой CLI для запуска команд SQL, либо с помощью графического пользовательского интерфейса, такого как pgAdmin (который поставляется предустановленным). В этой демонстрации мы будем использовать psql для создания базы данных.

Откройте psql и введите учетные данные, чтобы начать работу.

Создайте базу данных под названием webapp и подключитесь к ней! (Вы можете использовать любое имя для своего проекта!)

 CREATE database webapp;

 \c webapp

Начните создавать таблицу в этой базе данных с помощью команды CREATE TABLE . Вы можете использовать документацию Postgres, которая поможет вам с командами. Для этой демонстрации мы создаем базу данных student , в которой хранятся Name , Year и Branch . (Добавьте больше атрибутов, если хотите)

 CREATE TABLE student (name varchar(20), semester int, branch varchar(20));

 \d student

Теперь мы можем начать загружать в таблицу некоторые фиктивные данные с помощью команды INSERT.

 INSERT INTO student VALUES ('Abel', 4, 'CE'), ('John', 6, 'ME'), ('Doe', 2, 'ETC');

Как только мы закончим добавление фиктивных данных, мы сможем просмотреть таблицу Student с помощью команды ниже.

 SELECT * FROM student;

Если вы выполнили шаги до сих пор, вы получите приведенную ниже таблицу student !

Шаг 2. Создайте простой HTML-сайт.

Ниже приведен шаблонный HTML-код простого веб-сайта:

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

Давайте начнем добавлять пользовательские блоки div в соответствии с нашими потребностями:

 ... <body> <h1> Student Management System </h1> <p> Here, are the student details as below: </p> <div id='students_list'></div> ...

Блок div students_list предназначен для отображения списка студентов, зарегистрированных в базе данных. Мы будем использовать Express JS для получения данных из Postgres и демонстрации их в блоке.

Шаг 3. Подключение HTML к Postgres через Express JS

Сначала установите необходимые библиотеки в Command Prompt или терминале.

 npm install express body-parser pg

Приступим к созданию файла script.js для подключения HTML и PostgreSQL. Во-первых, требуем импортировать необходимые библиотеки для обработки запросов и установления соединения.

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

express работает как серверная служба для анализа запросов из HTML. webapp pg — это API Postgres для установления path подключения, предоставляет утилиты для управления путями к каталогам. body-parser — это промежуточное программное обеспечение для извлечения данных из запросов POST (мы будем их понимать). в глубину по мере продвижения)

Давайте теперь создадим экспресс-соединение приложения, а также определим порт, который будет прослушивать сервер.

 // Connect and Create an Express Application const app = express(); const port = 3000; // By default, its 3000, you can customize

Установите соединение с Postgres, создав экземпляр объекта Pool . Добавьте необходимые значения, соответствующие вашим настройкам Postgres.

 // Create a Postgres Connection const pool = new Pool({ user: 'postgres', host: 'localhost', database: 'webapp', password: 'password', // Change to your password port: 5432, // Default Port });

Добавьте функции для регистрации статических файлов через промежуточное программное обеспечение express.static() . Он указывает корневой каталог, из которого будут обслуживаться статические файлы.

 app.use(express.static(path.join('')));

Теперь нам нужно проанализировать HTML-запросы, отправленные из приложения. Проще говоря, это промежуточное программное обеспечение, используемое для получения данных от пользователей, таких как формы или загрузки.

 app.use(bodyParser.urlencoded({ extended: false }));

(Не добавляйте приведенную выше строку, если вы не планируете получать информацию от пользователей. Мы добавим форму регистрации в следующем блоге, поэтому нам нужен body-parser)

Настройте обработчик маршрута для корневого URL-адреса ('/'). Таким образом, когда запрос GET делается к корневому URL-адресу, сервер отвечает, отправляя файл «index.html», расположенный в том же каталоге.

 // Setup Route handler app.get('/', (req, res) => { res.sendFile(path.join(__dirname, '', 'index.html')); });

А теперь основная часть! Теперь мы настроим обработчик маршрута для URL-адреса «/students» с помощью метода HTTP GET. Этот обработчик извлекает данные об учащихся (из запроса) из базы данных 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); } }); });

(Убедитесь, что скобки правильно закрыты)

Теперь давайте укажем линию, которая слушает сервер и, когда придет время, отвечает своими запросами. По мере прослушивания приведенной ниже команды она записывает сообщение на консоль.

 // Listening to Requests app.listen(port, () => { console.log(`Server listening on port ${port}`); });

(Хорошо для целей отладки)

Сделанный! 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> ...

Запустить веб-сайт

Откройте терминал, перейдите в каталог, где хранятся index.html и script.js , и выполните следующую команду:

 node script.js

Если все работает нормально, должно отобразиться содержимое «Сервер прослушивает порт 3000».

Теперь вам нужно перейти по http://localhost:3000/ , где вы увидите простой веб-сайт HTML, демонстрирующий введенные вами данные!

Вуаля! Вот и все!

Теперь используйте свой творческий потенциал и знания, чтобы изучить эти концепции веб-разработки и создавать еще более интересные веб-сайты!

Я также добавлю еще один блог о том, как создать систему регистрации и как ее спроектировать, который скоро выйдет. Следите за новостями и оставайтесь с нами!

А пока продолжайте программировать!