Scribd
Upload
6 views6 pages

User Form Web App Setup Guide

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
6 views6 pages

User Form Web App Setup Guide

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

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/
[Link]
models/
[Link]
[Link]
views/
[Link]
[Link]
[Link]
[Link]
public/
[Link]
User Form Web App - Step-by-Step Guide

2. [Link]

// [Link] 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();

[Link]('mongodb://[Link]:27017/userFormDB', {
useNewUrlParser: true,
useUnifiedTopology: true
}).then(() => [Link]("MongoDB connected"))
.catch(err => [Link](err));

// More server routes and logic...


User Form Web App - Step-by-Step Guide

3. models/[Link]

// models/[Link]

const mongoose = require('mongoose');


const userSchema = new [Link]({
username: String,
password: String
});
[Link] = [Link]('User', userSchema);
User Form Web App - Step-by-Step Guide

4. models/[Link]

// models/[Link]

const mongoose = require('mongoose');


const detailSchema = new [Link]({
userId: [Link],
name: String,
age: Number,
study: String,
passout: Number,
markType: String,
mark: String,
skill: String,
email: String,
contact: String
});
[Link] = [Link]('Detail', detailSchema);
User Form Web App - Step-by-Step Guide

5. EJS Views

Views:
[Link], [Link], [Link], [Link] - contain the HTML forms and structure.

Example [Link]:
<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/[Link]

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