未来の 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 である または、プリインストールされている pgAdmin などのグラフィカル ユーザー インターフェイスを使用して、新しい Postgres データベースを作成します。このデモでは、データベースの作成に を使用します。 psql psql を開いて資格情報を入力して開始します。 psql というデータベースを作成し、それに接続します。 webapp (プロジェクトには任意の名前を使用できます。) CREATE database webapp; \c webapp コマンドを使用して、このデータベースにテーブルの構築を開始します。コマンドのガイドについては、Postgres ドキュメントを使用できます。このデモでは、 、 、および を格納する データベースを作成します。 CREATE TABLE 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> ... div ブロックは、データベースに登録されている学生のリストを表示するためのものです。Express JS を使用して Postgres からデータを取得し、ブロックに表示します。 students_list ステップ 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'); 、HTML ウェブアプリケーションからのリクエストを解析するためのバックエンド サービスとして機能します 、接続 を確立するための Postgres API であり、ディレクトリ パスを管理するためのユーティリティを提供します 、POST リクエストからデータを抽出するためのミドルウェアです express pg path body-parser (この先で詳しく説明します)。 ここで、Express アプリケーション接続を作成し、サーバーがリッスンするポートも定義しましょう。 // Connect and Create an Express Application const app = express(); const port = 3000; // By default, its 3000, you can customize オブジェクトのインスタンスを作成して、Postgres への接続を確立します。Postgres の設定に合わせて必要な値を追加します。 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 }); ミドルウェアを介して静的ファイルを登録する機能を追加します。静的ファイルを提供するルートディレクトリを指定します。 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> ... ウェブサイトを運営する ターミナルを開き、 と が保存されているディレクトリに移動して、次のコマンドを実行します。 index.html script.js node script.js すべてが正常に動作している場合は、「サーバーはポート3000でリッスンしています」という内容が表示されます。 次に、 にアクセスして、入力したデータを表示するシンプルな HTML ウェブサイトを確認します。 http://localhost:3000/ できました！これで完了です！ さあ、あなたの創造力と知識を活用して、これらの Web 開発の概念を探求し、さらに興味深い Web サイトを作成しましょう。 登録システムの作成方法と設計方法に関する別のブログも近日公開予定です。フォローして、引き続きご注目ください。 それまでは、コーディングを続けてください!
