Howdy, developers! Hope you’re doing fine. Let’s design and add more functionalities to the website we created in the previous blog. If you didn’t read the first blog, please go through it to further understand what’s going on!
Read the first article: Create a Full Stack website in 5 mins
Learning Path Ahead
We’ll dive in designing the website that we had created. We’ll explore how to fetch requests using POST protocol. We’ll also use Bootstrap 5 to design the webpage the way you want it!
Technologies used
- HTML
- Postgres SQL (Database)
- Node & Express JS (Backend)
- Bootstrap CSS (Frontend)
Step 1: Add Bootstrap
Let’s start designing! Open index.html and in the head section of the website, add the below code snippet!
# index.html
<head>
<title>Student Details</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.2.3/dist/zephyr/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
}
</style>
</head>This defines the title of the webpage as Student Details and links to the page via jquery CDN to Bootstrap. Once you’ve added it, you will now be able to design the frontend using Bootstrap. Also, note that we are using Poppins from Google fonts for our website.
Step 2: Update HTML
It’s time to add a form to your page, so that you can take user information and add it directly to the database via POST requests.
Create a form via using form tag inside the body tag in index.html
# index.html
<h1 class="text-center p-3"> Student Details </h1>
<form action="/students" method="POST" class="text-center">
<input type="text" name="name" placeholder="Name" class="m-1" required /> <br>
<input type="text" name="city" placeholder="City" class="m-1" required /> <br>
<input type="number" name="age" placeholder="Age" class="m-1" required /> <br>
<button type="submit" class="btn btn-primary m-3">Submit</button>
</form>The above code centers the Student Details and styles it with 3px of padding. The form tag performs an action of going to /students via POST method and looks for the data when triggered.
Now, inside the form tag we have 2 different types of tags, one for input, and other is a button for submitting the values.
Apart from the form tags, we also are going to update the script tag to showcase the data in tabular format, to look nice!
...
<div id="studentList"></div>
<script>
// Fetch student data from the server
fetch('/students')
.then(response => response.json())
.then(data => {
const studentList = data.map(
student => `<tr><td>${student.name}</td><td>${student.city}</td><td>${student.age}</td></tr>`
).join('');
// const studentList = data.map(student=>`<li>${student.name}</li>`).join('');
document.getElementById('studentList').innerHTML = `<table class="table table-hover vh-50">
<tr class="table-dark">
<th>Name</th>
<th>City</th>
<th>Age</th>
</tr>
${studentList}</table>`;
})
.catch(error => console.error('Error occurred:', error));
</script>
...Make sure that the script tags are below the form tags. And also, make sure rest of the tags are in the order they should be. If you have any doubts regarding the code, follow this gist and star it for further help!
Step 3: Post requests via JavaScript
Let’s start parsing requests! Firstly, as one of our libraries, make sure both the below lines are added. One is to add body-parser and second is to use it via the Express app object.
const bodyParser = require('body-parser');
...
app.use(bodyParser.urlencoded({ extended: false }));Similar to how we fetched results from the Postgres database via a GET protocol, we are going to use POST protocol to inject the values that we get from the form to the database.
...
app.post('/students', (req, res) => {
const { name, city, age } = req.body;
const query = 'INSERT INTO student (name, city, age) VALUES ($1, $2, $3)';
pool.query(query, [name, city, age], (error) => {
if (error) {
console.error('Error occurred:', error);
res.status(500).send('An error occurred while inserting data into the database.');
} else {
res.redirect('/');
}
});
});
...Once, done, your website is finally ready to load the changes in (or should I say, “post” the changes in)!
Voila! Website’s live!
Once done, open terminal, type in the command to run node script file! And checkout localhost:3000 or wherever your server port is!
Full Source Code for Project — Click Here
Now, use these concepts to your advantage by leveraging them in different case scenarios. Try to understand how each concept works, instead of blindly copying them. If you did learn something new, support us by a follow-up or a clap!
Keep Codin’
