Scribd
Upload
3 views6 pages

UserFormApp StepByStepGuide

The document provides a step-by-step guide for setting up a User Form Web App using Node.js, Express, and MongoDB. It includes instructions for project setup, server configuration in app.js, and the creation of user and detail models. Additionally, it outlines the structure of EJS views and basic CSS styling for the application.

Uploaded by

amorvignesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views6 pages

UserFormApp StepByStepGuide

The document provides a step-by-step guide for setting up a User Form Web App using Node.js, Express, and MongoDB. It includes instructions for project setup, server configuration in app.js, and the creation of user and detail models. Additionally, it outlines the structure of EJS views and basic CSS styling for the application.

Uploaded by

amorvignesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

User Form Web App - Step-by-Step Guide

1. Project Setup

Project Setup:

mkdir user-form-app
cd user-form-app
npm init -y
npm install express mongoose ejs bcryptjs express-session body-parser

Folder Structure:

user-form-app/
app.js
models/
User.js
Detail.js
views/
register.ejs
login.ejs
form.ejs
dashboard.ejs
public/
style.css
User Form Web App - Step-by-Step Guide

2. app.js

// app.js file (main server setup)

const express = require('express');


const mongoose = require('mongoose');
const session = require('express-session');
const bcrypt = require('bcryptjs');
const bodyParser = require('body-parser');
const path = require('path');
const app = express();

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

// More server routes and logic...


User Form Web App - Step-by-Step Guide

3. models/User.js

// models/User.js

const mongoose = require('mongoose');


const userSchema = new mongoose.Schema({
username: String,
password: String
});
module.exports = mongoose.model('User', userSchema);
User Form Web App - Step-by-Step Guide

4. models/Detail.js

// models/Detail.js

const mongoose = require('mongoose');


const detailSchema = new mongoose.Schema({
userId: mongoose.Schema.Types.ObjectId,
name: String,
age: Number,
study: String,
passout: Number,
markType: String,
mark: String,
skill: String,
email: String,
contact: String
});
module.exports = mongoose.model('Detail', detailSchema);
User Form Web App - Step-by-Step Guide

5. EJS Views

Views:
register.ejs, login.ejs, form.ejs, dashboard.ejs - contain the HTML forms and structure.

Example register.ejs:
<form action="/register" method="POST">
<input name="username" required>
<input name="password" type="password" required>
<button type="submit">Register</button>
</form>
User Form Web App - Step-by-Step Guide

6. CSS Styling

public/style.css

body{font-family:Arial;padding:30px;background:#f2f2f2;text-align:center;}
input,select{padding:10px;margin:8px;width:300px;border-radius:5px;border:1px solid
#ccc;}
button{padding:10px
20px;background:#28a745;color:#fff;border:none;border-radius:5px;cursor:pointer;}

You might also like