Save ID to Webpage and MongoDB using HTML, JS, Node.js

Save ID in Web Page and MongoDB using HTML, CSS, JS, Node.js and MongoDB

Introduction

Storing user credentials like ID and password is a foundational feature in any web application. Whether you're building a login system, a sign-up form, or a small data collection tool, securely capturing this data and storing it in a database is essential.

In this blog post, we'll walk through the complete process of building a full-stack app using:

HTML/CSS/JS for the frontend
Node.js and Express for the backend
MongoDB for the database

This project will allow users to input an ID and Password, display it on the web page, and store it in MongoDB for persistent storage.

Prerequisites
Project Overview
Setting up the Project
Creating the Frontend (HTML, CSS, JS)
Building the Backend with Node.js and Express
Connecting to MongoDB
Storing and Displaying Data
Testing the App
Best Practices
Conclusion

1. Technologies Used

HTML5
CSS3
JavaScript (ES6)
Node.js
Express.js
MongoDB
Mongoose

2. Project Overview

We’ll build a web app where:

User enters an ID and Password in an HTML form
The submitted data is:
- Displayed dynamically on the page
- Sent to the server
- Stored in a MongoDB database

3. Setting Up the Project

Step 1: Create Folder Structure

bash
mkdir id-password-app
cd id-password-app
npm init -y
npm install express mongoose body-parser cors

Step 2: Folder Structure

pgsql
id-password-app/
│
├── public/
│   ├── index.html
│   ├── style.css
│   └── script.js
│
├── server.js
└── models/
    └── User.js

4. Frontend (HTML, CSS, JS)

`public/index.html`

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>ID and Password Form</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h2>Enter ID and Password</h2>
    <form id="userForm">
      <input type="text" id="userId" placeholder="Enter ID" required />
      <input type="password" id="password" placeholder="Enter Password" required />
      <button type="submit">Submit</button>
    </form>
    <div id="output"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS: style.css

css
body {
  font-family: Arial, sans-serif;
  background: #f2f2f2;
}
.container {
  width: 300px;
  margin: 100px auto;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
input, button {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
}
#output {
  margin-top: 20px;
  background: #e0ffe0;
  padding: 10px;
  border-radius: 5px;
}

JavaScript: script.js

js
document.getElementById('userForm').addEventListener('submit', async function(e) {
  e.preventDefault();
  const userId = document.getElementById('userId').value;
  const password = document.getElementById('password').value;

  // Show data on page
  const output = document.getElementById('output');
  output.innerHTML = `<strong>Saved:</strong> ID: ${userId}, Password: ${password}`;

  // Send to backend
  const response = await fetch('/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ userId, password })
  });

  const result = await response.json();
  console.log(result.message);
});

5. Building the Backend with Node.js and Express

server.js

js
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const path = require('path');
const cors = require('cors');

const app = express();
const PORT = 3000;

// Middleware
app.use(cors());
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'public')));

// MongoDB connection
mongoose.connect('mongodb://localhost:27017/userDB', {
  useNewUrlParser: true,
  useUnifiedTopology: true
}).then(() => console.log('MongoDB connected'))
  .catch(err => console.log(err));

// Mongoose model
const User = require('./models/User');

// Route
app.post('/submit', async (req, res) => {
  const { userId, password } = req.body;
  const newUser = new User({ userId, password });

  try {
    await newUser.save();
    res.json({ message: 'User data saved successfully!' });
  } catch (error) {
    res.status(500).json({ message: 'Error saving data' });
  }
});

// Start server
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

6. MongoDB Model

js
const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  userId: String,
  password: String
});

module.exports = mongoose.model('User', userSchema);

7. Storing and Displaying Data

When the user submits the form:

Frontend shows the ID and Password below the form
JS sends a POST request to /submit
Server receives and saves it to MongoDB
Response confirms saving

This way, you achieve both frontend display and backend storage.

8. Testing the App

Step 1: Start MongoDB

bash
mongod

Step 2: Run the App

bash
node server.js

Open browser at http://localhost:3000

Try entering:

ID: user001
Password: abc123

Check:

Displayed on page
Saved in MongoDB (db.user.find() in Mongo shell)

9. Best Practices

Security: Never store passwords as plain text. Use hashing (e.g., bcrypt) for real-world apps.
Validation: Add server-side validation to avoid bad data.
Environment Variables: Use .env for sensitive data like DB URI.
Modular Code: Split routes and DB logic into separate files.
Frontend Enhancements: Add form validation, animations, alerts.

10. Conclusion

You’ve just built a fully functional mini full-stack project using HTML, CSS, JavaScript, Node.js, and MongoDB. This app:

Takes user ID and password input
Displays it on the webpage
Sends it to a Node.js backend
Stores it in MongoDB

This structure is a great starting point for bigger projects like:

Login/Sign-up systems
Admin panels
Secure data entry apps

winscoder

Search This Blog