2,504 測定値

Postgres データベース接続を備えたシンプルな HTML ウェブサイトを構築する

に Abel Roy6m2024/05/05

長すぎる; 読むには

このチュートリアルでは、JavaScript (Node JS、Express JS) を使用して Postgres データベースに接続された HTML ウェブサイトを作成する手順を説明します。データベースの設定、HTML 構造の作成、Express JS との接続、Postgres からデータを取得してウェブページに表示する方法について説明します。

featured image - Postgres データベース接続を備えたシンプルな HTML ウェブサイトを構築する

未来の Web 開発者の皆さん、準備をしましょう。Postgres データベースに接続するシンプルな HTML Web サイトを作成しましょう。

この例では、ミドルウェア機能として JavaScript (Node JS および Express JS) を使用します。ポートフォリオを公開したり、ブログを運営したり、Web 開発に関する期限内のミニプロジェクトを完了したりする場合でも、Web 開発は依然として需要のあるスキルです。

今後の学習の道

シンプルな HTML ウェブサイトをゼロから構築するプロセスを詳しく見ていきます。API リクエストを処理するミドルウェアとして JavaScript を使用して、Postgres データベースを統合する方法を探ります。さらに工夫して、Bootstrap5 を使用してウェブページを設計することもできます。ただし、これについては別のブログで説明します。

使用されるテクノロジー:

HTML5
Postgres (データベース)
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ウェブサイトを作成する

以下は、シンプルな Web サイトのボイラープレート 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 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> ...