Experiment 9: ExpressJS – Database, RESTful APIs

Write a program to connect MongoDB database using Mangoose and perform CRUD operations.

run the following commands in command prompt in your project folder

npm  install --save mongoose@6.0

npm install --save pug

npm install --save body-parser

npm install --save multer


server.js


var express = require('express');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');  // Import mongoose
var multer = require('multer');

var upload = multer();
var app = express();

// Connect to MongoDB (Replace <your_connection_string> with your actual MongoDB URI)
mongoose.connect('mongodb://127.0.0.1:27017/library1', { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => console.log('Connected to MongoDB'))
    .catch(err => console.error('MongoDB connection error:', err));

// Define Mongoose Schema
var personSchema = new mongoose.Schema({
    name: String,
    age: Number,
    nationality: String
});

var Person = mongoose.model("Person", personSchema);

// Middleware for parsing request body
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true })); // For form-urlencoded
app.use(upload.array()); // For multipart/form-data
app.use(express.static('public')); // Serve static files if needed

app.get('/', function(req, res) {
    // Sending HTML directly
    res.send(`
        <!DOCTYPE html>
        <html lang="en">
        <head>

        <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Form Tester</title>
        </head>
        <body>
            <h2>Form Tester</h2>
            <form action="/" method="POST">
                <div>
                    <label for="name1">Name1:</label>
                    <input type="text" name="name" required>
                </div>
                <br>
                <div>
                    <label for="age">Age:</label>
                    <input type="number" name="age" required>
                </div>
                <br>
                <div>
                    <label for="nationality">Nationality:</label>
                    <input type="text" name="nationality" required>
                </div>
                <br>
                <button type="submit">Add me</button>
            </form>
        </body>
        </html>
    `);
});

app.post('/', function(req, res) {
    console.log(req.body);  // Logs submitted form data

    var personInfo = req.body; // Get the parsed information

    if (!personInfo.name || !personInfo.age || !personInfo.nationality) {
        return res.send(`
            <h3 style="color:red">Sorry, you provided wrong info</h3>
        `);
    }

    var newPerson = new Person({
        name: personInfo.name,
        age: personInfo.age,
        nationality: personInfo.nationality
    });

    newPerson.save()
        .then(() => {
            res.send(`
                <h3 style="color:green">New person added</h3>
                <p>Name: ${personInfo.name}</p>
                <p>Age: ${personInfo.age}</p>
                <p>Nationality: ${personInfo.nationality}</p>
            `);
        })
        .catch(err => {
            console.error("Database error:", err);
            res.send('<h3 style="color:red">Database error</h3>');
        });
});

// Start server
app.listen(3000, () => console.log('Server running on http://localhost:3000'));

In Visual studio code, open server.js, run->debug
open browser and test http://localhost:3000
fill the form and test data storing in mongodb (library1 database)
by opening mongodb compass tool

Write a program to develop a single page application using RESTful APIs


Conceptual background:


A single page application(SPA) loads only one HTML page and dynamically

updates content using Javascript and REST APIs without reloading the

entire page.

Example: Google MAPs, Facebook, E-MEdia etc

REST (Representational State Transfer) is an architectural style

where:

  • Data is accessed using HTTP methods

  • Communication happens using JSON

HTTP MethodOperation
GETRead data
POSTCreate data
PUTUpdate data
DELETEDelete data

Project structure:

spa-express/ │ ├── server.js ├── package.json └── public/ └── index.html

Backend: Express.js REST API (server.js)
const express = require("express"); const app = express(); const PORT = 3000; app.use(express.json()); app.use(express.static("public")); let users = [ { id: 1, name: "Rakesh" }, { id: 2, name: "Rohith" },
{ id: 3, name: "Veena" } ]; // GET API app.get("/api/users", (req, res) => { res.json(users); }); // POST API app.post("/api/users", (req, res) => { const newUser = { id: users.length + 1, name: req.body.name }; users.push(newUser); res.json(newUser); }); // Start server app.listen(PORT, () => { console.log(`Server running on http://localhost:${PORT}`); });


Frontend: Single Page Application (index.html)

<!DOCTYPE html> <html> <head> <title>SPA using Express REST API</title> </head> <body> <h2>User List</h2> <ul id="userList"></ul> <input type="text" id="username" placeholder="Enter name"> <button onclick="addUser()">Add User</button> <script> // Load users (GET) fetch("/api/users") .then(res => res.json()) .then(data => { const list = document.getElementById("userList"); data.forEach(user => { list.innerHTML += `<li>${user.name}</li>`; }); }); // Add user (POST) function addUser() { const name = document.getElementById("username").value; fetch("/api/users", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name }) }) .then(res => res.json()) .then(user => { document.getElementById("userList").innerHTML += `<li>${user.name}</li>`; }); } </script> </body> </html>

working:
Browser (SPA)
   |
   |  fetch() request
   v
Express REST API
   |
   |  JSON response
   v
Browser updates page (No reload)

Comments

Post a Comment

Popular posts from this blog

Experiment 1: Node.js

  Introduction to Node.js Node.js is a runtime environment that allows us to run JavaScript outside the browser , mainly on  the server.  With Node.js, developers can use the same language—JavaScript—for both the front end and back end, which makes development simpler and quicker. Node.js is designed to handle many users at the same time without slowing down. It uses a non-blocking and event-driven model, meaning it does not wait for one task to finish before starting another. Instead, it responds to events as they happen. This makes Node.js perfect for applications that require quick responses and continuous communication. Applications of Node.js Real-time chat applications Video streaming platforms Online gaming servers REST APIs and backend services Single-page applications (SPAs) IoT (Internet of Things) applications Collaborative tools like shared editors or dashboards Architecture of Node.js Node.js follows a single-threaded, event-driven archi...
Read more

Experiment 10: ReactJS – Render HTML, JSX, Components – function & Class

  Write a program to render HTML to a web page. Create a React Application Open Command Prompt / Terminal and run: npx create-react-app myapp cd myapp npm start Browser opens automatically at: http://localhost:3000 React is successfully installed! myapp  ├── node_modules  ├── public  │    └── index.html  ├── src  │    ├── App.js  │    ├── index.js  │    └── App.css  └── package.json index.html <!DOCTYPE html> <html> <head>   <title>ReactJS – Render HTML</title>   <!-- React CDN -->   <script src="https://unpkg.com/react@18/umd/react.development.js"></script>   <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>   <!-- Babel -->   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body>   <h2>ReactJS Experimen...
Read more

Experiment 6: ExpressJS – Routing, HTTP Methods, Middleware

  6 Experiment 6: ExpressJS – Routing, HTTP Methods, Middleware Write a program to define a route, Handling Routes, Route Parameters, Query Parameters and URL building.  Below is a simple Express.js program that demonstrates: Defining routes Handling routes Route parameters Query parameters URL building 1. Install Express open command prompt mkdir abc cd abc npm init -y npm install express 2: Create app.js   ( Simple program to start with) notepad app.js                       const express = require('express'); const app = express(); app.get('/', (req, res) => {     res.send('Express routing working!'); }); app.listen(3000, () => {     console.log('Server running on http://localhost:3000'); }); save and close. 3: Run Server node app.js Open browser: type link or url :            http://localhost:3000   to see output ROUTING AND QUER...
Read more