Gallery
Share
Explore

Student Lab Learning Workbook: Full Stack JavaScript Application with Express JS and SQLite

In this workbook, you will learn how to build a Full Stack JavaScript application using Express JS and SQLite. We will cover the basics of setting up the project, creating a web server with Express JS, and using forms with routing endpoints to transact data between the HTML FORM and the SQLite database.
When you click the Submit Button on the form:
<form action="will url link to your server with the routing end point specifed” <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>

Table of Contents

Introduction
Setting Up the Project
Creating the Web Server with Express JS
Setting Up the SQLite Database
Creating Forms to Transact Data
Conclusion

1. Introduction

A Full Stack JavaScript application consists of a frontend (client) and a backend (server) that work together to provide a seamless user experience. In this workbook, we will use the following technologies:
Express JS: A minimal, unopinionated web application framework for Node.js that makes it easy to create a web server.
SQLite: A self-contained, serverless, zero-configuration, transactional SQL database engine that is easy to set up and use.
Later we will look at other back end data stores:
Firebase
MONGO: JSON

2. Setting Up the Project

Start by creating a new directory for your project and navigate to it:
mkdir fullstack-js-app && cd fullstack-js-app
Initialize a new Node.js project and install the required dependencies:
npm init -y
npm install express body-parser sqlite3

3. Creating the Web Server with Express JS

Create a new file called app.js and set up the basic structure of an Express JS application:
const express = require('express');
const bodyParser = require('body-parser');

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get('/', (req, res) => {
res.send('Welcome to our Full Stack JavaScript Application!');
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});

4. Setting Up the SQLite Database

Create a new file called database.js and set up the SQLite database:
// be sure you did npm -i sqlite3

import sqlite3 from 'sqlite3';
import { open } from 'sqlite';

const DB_NAME = 'ces.db';

const connectToDB = async () => {
const db = await open({
filename: DB_NAME,
driver: sqlite3.Database,
});

if (db) {
console.log(`Connected to the ${DB_NAME} database.`);
}

return db;
};

const createTable = async () => {
const sql = `CREATE TABLE IF NOT EXISTS users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT NOT NULL,
email TEXT UNIQUE NOT NULL)`;

const db = await connectToDB();

try {
await db.run(sql);
console.log('Table created successfully');
} catch (err) {
console.error(err.message);
}
};

createTable();

export default connectToDB;

5. Creating Forms to Transact Data

5.1 Creating the User Registration Form

Create a new file called register.html and add the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Registration</title>
</head>
<body>
<h1>User Registration</h1>
<form action="/register" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

5.2 Handling the Form Submission in the Backend

Update app.js to serve the registration form and handle the form submission:
// Import the required modules
const path = require('path');
const db = require('./database');

// Serve the registration form
app.get('/register', (req, res) => {
res.sendFile(path.join(__dirname, 'register.html'));
});

// Handle the form submission
app.post('/register', (req, res) => {
const { name, email } = req.body;

const sql = 'INSERT INTO users (name, email) VALUES (?, ?)';
db.run(sql, [name, email], (err) => {
if (err) {
console.error(err.message);
res.status(500).send('Unable to register user');
} else {
res.redirect('/');
}
});
});

5.3 Displaying Users from the Database

Update app.js to display the list of users:
app.get('/users', (req, res) => {
const sql = 'SELECT * FROM users';
db.all(sql, [], (err, rows) => {
if (err) {
console.error(err.message);
res.status(500).send('Unable to fetch users');
} else {
res.json(rows);
}
});
});

6. Conclusion

In this workbook, you learned how to create a Full Stack JavaScript application using Express JS and SQLite. You set up a project, created a web server using Express JS, and used forms to transact data between the webpage and SQLite database.
You can now build upon this foundation to create more advanced applications, such as adding authentication, user management, and more complex business logic.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.