258 판독값

Postgres 데이터베이스 연결을 사용하여 간단한 HTML 웹사이트 구축

~에 의해 Abel Roy6m2024/05/05

너무 오래; 읽다

이 튜토리얼은 JavaScript(Node JS, Express JS)를 사용하여 Postgres 데이터베이스에 연결된 HTML 웹사이트를 만드는 과정을 안내합니다. 데이터베이스 설정, HTML 구조 생성, Express JS 연결, Postgres에서 데이터를 가져와 웹페이지에 표시하는 방법을 다룹니다.

featured image - Postgres 데이터베이스 연결을 사용하여 간단한 HTML 웹사이트 구축

준비하세요, 미래의 웹 개발자 여러분! Postgres 데이터베이스에 연결되는 간단한 HTML 웹사이트를 만들어 보겠습니다.

이 예에서는 미들웨어 기능으로 JavaScript(Node JS 및 Express JS)를 사용합니다. 포트폴리오를 선보이고 싶거나, 블로그를 운영하거나, 웹 개발에 대한 미니 프로젝트를 완료하려는 경우, 웹 개발은 여전히 수요가 많은 기술입니다.

앞으로의 학습 경로

간단한 HTML 웹사이트를 처음부터 구축하는 과정을 살펴보겠습니다. API 요청을 처리하기 위한 미들웨어로 JavaScript를 사용하여 Postgres 데이터베이스를 통합하는 방법을 살펴보겠습니다. 상황을 더욱 멋지게 만들기 위해 Bootstrap5를 사용하여 웹페이지를 디자인할 수도 있습니다! 하지만 이에 대해서는 다른 블로그에서 다루겠습니다.

사용된 기술:

HTML5
포스트그레스(데이터베이스)
Express JS(백엔드)

전제 조건

Postgres가 다운로드되어 사용할 준비가 되었는지 확인하세요. 또한 Express JS, Body Parser 및 Postgres API와 같은 npm 패키지를 설치하려면 Node JS를 다운로드하세요. 여기에서 Postgres를 다운로드하세요. 여기에서 NodeJS를 다운로드하세요.

1단계: Postgres 데이터베이스 설정

SQL 명령을 실행하기 위한 CLI인 psql 또는 사전 설치된 pgAdmin과 같은 그래픽 사용자 인터페이스를 사용하여 새 Postgres 데이터베이스를 생성합니다. 이 데모에서는 psql 사용하여 데이터베이스를 생성합니다.

psql 열고 자격 증명을 입력하여 시작하세요.

webapp 이라는 데이터베이스를 생성하고 연결해보세요! (프로젝트에 원하는 이름을 사용할 수 있습니다!)

 CREATE database webapp;

 \c webapp

CREATE TABLE 명령을 사용하여 이 데이터베이스에 테이블 구축을 시작합니다. Postgres 문서를 사용하여 명령을 안내할 수 있습니다. 이 데모에서는 Name , Year 및 Branch 저장하는 student 데이터베이스를 생성합니다. (원한다면 더 많은 속성을 추가하세요)

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

students_list div 블록은 데이터베이스에 등록된 학생 목록을 표시하기 위한 것입니다. Express JS를 사용하여 Postgres에서 데이터를 가져와 블록에 표시할 것입니다.

3단계: Express JS를 통해 HTML을 Postgres에 연결

Command Prompt 또는 터미널에 먼저 필요한 라이브러리를 설치하십시오.

 npm install express body-parser pg

HTML과 PostgreSQL을 연결하기 위한 script.js 파일 구축을 시작해 보겠습니다. 첫째, 요청을 처리하고 연결을 설정하는 데 필요한 라이브러리를 가져와야 합니다.

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

express HTML 웹 애플리케이션의 요청을 구문 분석하기 위한 백엔드 서비스로 작동합니다 pg 는 연결 path 설정을 위한 Postgres API입니다. 디렉토리 경로 관리를 위한 유틸리티를 제공합니다 body-parser POST 요청에서 데이터를 추출하기 위한 미들웨어입니다 . 진행하면서 깊이 있게 설명합니다)

이제 Express 애플리케이션 연결을 생성하고 서버가 수신할 포트를 정의해 보겠습니다.

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

Pool 개체의 인스턴스를 생성하여 Postgres에 대한 연결을 설정합니다. 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('/')에 대한 경로 핸들러를 설정합니다. 따라서 루트 URL에 GET 요청이 이루어지면 서버는 동일한 디렉터리에 있는 "index.html" 파일을 전송하여 응답합니다.

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

이제 주요 부분이 나옵니다! 이제 HTTP GET 메소드를 사용하여 '/students' URL에 대한 경로 핸들러를 설정하겠습니다. 이 핸들러는 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 웹사이트를 볼 수 있습니다!

짜잔! 그게 다야!

이제 창의력과 지식을 활용하여 이러한 웹 개발 개념을 탐색하고 더욱 흥미로운 웹사이트를 만들어보세요!

또한 등록 시스템을 만드는 방법과 이를 설계하는 방법에 대한 또 다른 블로그를 추가할 예정이며 곧 공개될 예정입니다. 더 많은 내용을 보려면 팔로우하고 계속 지켜봐주세요!

그때까지 코딩을 계속하세요!

L O A D I N G
. . . comments & more!

About Author

Abel Roy@abelroy

Did some stuff!

Read my stories