f23 MAD 6135 Project Template (Lab test 2)
f23 MAD 6135 Project Template (Lab test 2)
For Lab Test 2, it is only required to submit the solution for connect to CES.db and display the record the records in it to the Console. Update to part 2. Backend Setup with Express and SQLite:
Lab test 2 Learning outcomes:
Connecting html form to routes in your backend node JS program for the purpose of allowing user to enter information into the HTML form which can be conveyed via Ajax and Microservers to the controller partition, and used for sql (or mongodb) queries.
Once you have done this Lab:
Note: Send either a Zip file or a Word Document.
What more do you need to do for your project?
Present your html front end and sqlite database to present a theme.
CSS: more visually appealing
Pre-requisite: The Lab Worksheet for using sqlite in Node.js
Learning Outcomes:
Make a full stack javaScript application with completely documented code.
Recall for your hand in project: I want to see very complete documentation in Markdown and GitBook: Some UML diagrams.
Your Project FS application will use a backend database which could be:
sqlite
MongoDB
Firebase
in the backend and presents an html form which user enters data into the form which is stored in the sqlite database.
Outline:
1. Setting Up the Environment:
Installing Node.js:
Setting up a new Node project:
bashCopy code
mkdir fullstack-js-app
cd fullstack-js-app
npm init -y
Installing necessary libraries:
bashCopy code
npm install express sqlite3 body-parser
2. Backend Setup with Express and SQLite:
For the initial walk-through of this, I will be using the CES.db college enrollment system database we developed with dbbrowserforsql.
Setting up the Express server (server.js):
Note: This code shows you an in-memory database. For your Project, use a persistent file (file on the file system of the server).
const express = require('express');
const bodyParser = require('body-parser');
const sqlite3 = require('sqlite3').verbose();
const app = express();
const PORT = 3000;
// Middleware to parse POST data
app.use(bodyParser.urlencoded({ extended: true }));
// Database setup
let db = new sqlite3.Database(':memory:', (err) => {
if (err) {
return console.error(err.message);
}
console.log('Connected to the in-memory SQlite database.');
});
// Create table
db.run('CREATE TABLE user_data (name TEXT, email TEXT)', (err) => {
if (err) {
return console.error(err.message);
}
});
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.post('/submit', (req, res) => {
const { name, email } = req.body;
db.run(`INSERT INTO user_data(name, email) VALUES(?, ?)`, [name, email], (err) => {
if (err) {
return console.error(err.message);
}
res.send('Data saved successfully!');
});
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
CES Database:
3. Frontend Setup:
Creating an HTML form (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Stack JS App</title>
</head>
<body>
<form action="/submit" 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>
Version E:
You have three tables - classes, enrollments, and students.
For the context of the application you provided, we'd like to modify the existing behavior of saving the user (probably a student in this context) into the database, and allow a student to enroll in a class.
Let's create some basic routes to:
Here's how you can modify your index.js to handle these:
const express = require('express');const bodyParser = require('body-parser');const sqlite3 = require('sqlite3').verbose();
const app = express();const PORT = 3000;
console.log("Starting server...");
// Middleware to parse POST dataapp.use(bodyParser.urlencoded({ extended: true }));app.use(bodyParser.json()); // to parse JSON data
// Middleware to serve static files from the 'public' directoryapp.use(express.static('public'));
// Database setupWant to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.