Scribd
Upload
46 views

Create A Simple HTML Website With Postgres Databas

Uploaded by

kaishiwhis
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
46 views

Create A Simple HTML Website With Postgres Databas

Uploaded by

kaishiwhis
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Title of Article

[Type the abstract of the document here. The abstract is typically a short
summary of the contents of the document. Type the abstract of the
document here.]
Create a simple HTML website with
Postgres Database
#webdev#beginners#html#postgres#bluewave

Get Ready, Future Web Developers! Let's create a simple HTML website
that connects to a Postgres Database. For this example, we will be using
JavaScript (Node JS, and Express JS) for it's middleware functionalities.

Whether you want to showcase your portfolio, run a blog or complete a due mini
project on web development, web development is a skill that's still in demand.

Learning Path Ahead

We'll dive in to the process of building a simple HTML website from scratch. We'll
explore how to integrate a Postgres database, using JavaScript as middleware to
handle API requests. To spice things up, we can also be using Bootstrap5 to design
the webpage! But that will be covered in a different blog.

Technologies Used:

 HTML5
 Postgres (Database)
 Express JS (Backend)

Prerequisites

Make sure Postgres is downloaded and ready to use. Also, download Node JS for
installing npm packages like Express JS, Body Parser and Postgres APIs.
Download Postgres here
Download NodeJS here

Step 1 : Setup Postgres Database


Create a new Postgres Database either using psql, which is the CLI for
running SQL commands or a graphical user interface like pgAdmin
(which comes pre-installed). For this demonstration, we will be
using psql for creating the database.
Open psql and enter the credentials to get started.

Create a database called webapp and connect to it!


(You can use any name you want for your project!)

CREATE database webapp;


\c webapp

Start building your table in this database by CREATE TABLE command.


You can use Postgres docs to guide you with the commands.
For this demonstration, we are creating a student database that
stores Name, Year and Branch. (Add more attributes if you want)

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


varchar(20));
\d student

Now, we can start uploading some dummy data to the table via INSERT
command

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


2, 'ETC');

Once we are done, adding the dummy data, we can view the Student table
with the below command
SELECT * FROM student;

If you followed the steps till now, you would get the
below student table!

Step 2 : Create a simple HTML Website

Below is the Boilerplate HTML code for a simple website

Let's start adding the custom div blocks as per our needs

...

students_list div block is for showing the list of students that have been
registered to the database. We will be using Express JS to fetch the
data from Postgres and showcase it in the block.

Step 3 : Connecting HTML to Postgres via Express JS

Install the necessary libraries first in your Command Prompt or


Terminal
npm install express body-parser pg

Let's start building the script.js file for connecting HTML and
PostgreSQL.

Firstly, we require importing the necessary libraries for handling


requests and establishing a connection

// Import required modulesconst express = require('express');const


{ Pool } = require('pg');const path = require('path');const bodyParser =
require('body-parser');

express works as a backend service, for parsing requests from the


HTML webapp
pg is a Postgres API for establishing the connection
path provides utilities for managing directory paths
body-parser is a middle-ware for extracting data from POST
requests
(We will be understanding them in depth as we move along)

Let's now create an express application connection and also, define the
port at which the server will be listening to.

// Connect and Create an Express Applicationconst app =


express();const port = 3000; // By default, its 3000, you can
customize

Establish a connection to Postgres by creating an instance of


the Pool object. Add the necessary values to match your Postgres
setup.
Add functionalities to register static files
via express.static() middleware. It specifies the root directory from
which to serve static files

Now, we have to parse HTML requests sent from the app. In simple
words, it's a middleware used to recieve data from users, such as
forms or uploads

(Don't add the above line if you are not planning to take input from
users. We will be adding a registeration form in the next blog and
that's why we require body-parser)

Setup a Route handler for the root URL ('/'). So that, when a GET
request is made to the root URL, the server responds by sending the
"index.html" file located in same directory

Now, comes the main part!


We will now be setting up a route handler for '/students' URL with the
HTTP GET method. This handler retrieves student data (from query)
from the Postgres Database
...

Run the Website


Open Terminal and go the directory where index.html and script.js is
stored and run the following command

node script.js

If everything works alright, it should display the contents "Server


listening on port 3000"

Now, you need to go to http://localhost:3000/


where you can see a simple HTML website showcasing the data you
had entered!

Ukadayi wabata concept yeweb development frontend and back end engineer.

You might also like