VISVESVARAYA TECHNOLOGICAL UNIVERSITY

Jnana Sangama, Belagavi-590018, Karnataka, India

Internship Report on

“WEB DEVELOPMENT”
Submitted in partial fulfilment of the requirements for the award of the degree of

Master of Computer Applications

Submitted by

BHUMIKA RAJ
(1RR23MC025)

Under the Guidance of

Dr. Mage Usha U
Associate Prof
Department of MCA
RRCE

Department of MCA
RAJARAJESWARI COLLEGE OF ENGINEERING
MYSORE ROAD, BANGALORE-560074
An Autonomous Institution
(An ISO 9001-2015 Certified Institution) 2024-2025

1 | Page
 RAJARAJESWARI COLLEGE OF ENGINEERING
MYSORE ROAD, BANGALORE-560074
An Autonomous Institution
(An ISO 9001-2008 Certified Institution)
(Affiliated to Visvesvaraya Technological University)

Department of Master of Computer Applications

CERTIFICATE
This is to certify that the Internship work entitled “WEB DEVELOPMENT”
carried out by BHUMIKA RAJ (1RR23MC025) the student of “Rajarajeswari
College of Engineering” in partial fulfilment of 3rd semester Master of
Computer Applications of the Visvesvaraya Technological University,
Belgaum during the year 2024-2025. It is certified that all
corrections/suggestions indicated for internal report has been approved as it is
satisfying the academic requirements in respect of Internship work prescribed for
the said degree.

Signature of Signature of Signature of Signature of

Guide HOD Principal External

2 | Page
 ACKNOWLEDGEMENT
The success and final outcome of learning WEB DEVELOPMENT required a lot of
guidance and assistance from many people and I am extremely privileged to have got
this all along the completion of my course and few of the projects. All that I have done is
only due to such supervision and assistance and I would not forget to thank them.

I respect and thank CORIZO COMPANY , for providing me an opportunity to do the

course and project work and giving me all support and guidance, which made me
complete the course duly.

I am deeply indebted to our beloved Principal, Dr. Balakrishna R, Rajarajeswari

College of Engineering for providing the necessary facilities to carry out this work.

I cordially thanks to Dr. Subburaj T Head of the Department of MCA and Prof.
Dr. Mage Usha U, intended for giving valuable guidance steady support and
encouragement to inclusive our internship lucratively.

I am thankful to and fortunate enough to get constant encouragement support, and

guidance from all teaching staffs who helped me in successfully completing my
internship.

BHUMIKA RAJ

(1RR23MC025)

3 | Page
INTERNSHIP CERTIFICATE

4 | Page
 ABSTRACT

Web development is the work involved in developing a web site for the
internet(World Wide Web) or an intranet(a private network) web development can
range from developing a simple single static page of plain text to complex web-based
internet services. Amore comprehensive list of tasks to which web development
commonly refers, may include web engineering ,web design ,web content
development, client liaison , client-side/server-side scripting, webserver and network
configuration,and ecommerce development. WICS (Web Based Internship
Coordinating System) is a comprehensive toolkit for managing and coordinating
internship programs in an educational institution. WICS was developed with the
intension of providing an interactive tool for the faculty and students to communicate
with each other whenever and wherever they want to. Students can understand the
requirements and view their progress and interact with the faculty in a better way. An
instructor can review and update a student's progress and send email to students directly
if necessary, from WICS. Designed in PHP (Hypertext Preprocessor), an open source,
server-side, HTML (Hypertext Markup Language) embedded scripting language used
for creating dynamic web pages, this piece of software, is easy to maintain and further
enhancements can be added without any hassles.

5 | Page
 TABLE OF CONTENTS

SL NO. CHAPTERS PAGE NO.

1. INTRODUCTION ................................................................................. 7
1.1 WEB PAGE
1.2 WEB SITE
1.3 NODE JS
1.4 HTML
1.5 CSS
1.6 MONGO DB

2. LITERATURE SURVEY .................................................................... 12

2.1 AIM OF THE PROJECT
2.2 PURPOSE OF THE PROJECT
2.3 BENEFITS OF THE PROJECT
2.4 ABOUT THE PROJECT

3. REQUIREMENT SPECIFICATION.................................................. 14
3.1 HARDWARE REQUIREMENTS
3.2 SOFTWARE REQUIREMENTS

4. SOFTWARE DESIGN.......................................................................... 15
4.1 FRONT END
4.2 CONNECTION
4.3 BACK END TASKS
4.4 MONGO DB CONNECTIONS
4.5 POSTMAN CONNECTIONS

5. IMPLEMENTATION ........................................................................... 17
6. SNAPSHOTS ........................................................................................ 38
7. DECLARATION ...................................................................................43

6 | Page
 INTRODUCTION

Web development is the work involved in developing a Web site for the Internet (World Wide
Web) or an intranet (a private network). Web development can range from developing a simple
single static page of plain text to complex Web-based Internet applications (Web apps), electronic
businesses, and social network services. A more comprehensive list of tasks to which Web
development commonly refers, may include Web engineering, Web design, Web content
development, client liaison, client-side/server-side scripting, Web server and network security
configuration, and e-commerce development.
Among Web professionals, "Web development" usually refers to the main non-design aspects of
building Web sites: writing markup and coding. Web development may use content management
systems (CMS) to make content changes easier and available with basic technical skills.
For larger organizations and businesses, Web development teams can consist of hundreds of
people (Web developers) and follow standard methods like Agile methodologies while developing
Web sites. Smaller organizations may only require a single permanent or contracting developer,
or secondary assignment to related job positions such as a graphic designer or information
systems technician. Web development may be a collaborative effort between departments rather
than the domain of a designated department. There are three kinds of Web developer
specialization: front-end developer, back-end developer, and full-stack developer. Front-end
developers are responsible for behavior and visuals that run in the user browser, while back-end
developers deal with the servers.
Since the commercialization of the Web, Web development has been a growing industry. The
growth of this industry is being driven by businesses wishing to use their Web site to advertise and
sell products and services to customers.
There are many open source tools for Web development such as Berkeley DB, Glass Fish,
LAMP (Linux, Apache, MySQL, PHP) stack and Perl/Plack. This has kept the cost of learning
Web development to a minimum. Another contributing factor to the growth of the industry has
been the rise of easy-to-use WYSIWYG Web-development software, such as Adobe
Dreamweaver, Blue Griffon and Microsoft Visual Studio. Knowledge of Hypertext Markup
Language (HTML) or of programming languages is still required to use such software, but the
basics can be learned and implemented quickly.
An ever-growing set of tools and technologies have helped developers build more dynamic and
interactive Web sites. Further, Web developers now help to deliver applications as Web services
which were traditionally only available as applications on a desk-based computer. This has allowed
for MANY opportunities to decentralize information and media distribution. Examples can be
seen with the rise of cloud services such as Adobe Creative Cloud, Dropbox and Google Drive.
These Web services allow users to interact with applications from many locations, instead of
being tied to a specific workstation for their application environment

7 | Page
 1.1 WEB PAGE
A webpage is a digital document that is linked to the World Wide Web and
viewable by anyone connected to the internet having a web browser. It can contain
any type of information, such as text, color, graphics, animations, videos, sounds,
etc.
A webpage is a document that is written in the HTML, it can be viewed from the
Internet. It can be accessed by entering the URL on the address bar of the web
browser.

Components of a Webpage :
As you already know that a webpage is a digital document containing information
in digital form, still we are asking this question – What does it contain or what are
its compositions? Well, this question can be answered in more than one way :
 Components of a webpage, Content wise
 Components of a webpage, Structure Wise

 ContentWise :
Content-wise the components of a webpage are: Hypertext and Hyperlinks
1. Hypertext :
It refers to a digital text, which is more than just text as it can include
information in various media formats such as :
 text
 color
 graphic
 animation
 video
 sound
 hyperlinks

2. Hyperlinks :
It refers to a link from a hypertext file to another such file. A hyperlink can be
in the form of a graphic or text, upon clicking where the linked document
opens up.

8 | Page
Structure Wise :
Structure wise the components of a web page are :
1. Page Title –
This is a single line text which is displayed on the title bar of the browser
displaying web page.
2. Header –
This is generally a one or two line text (sometimes a graphics/image) defining
the purpose of the web page. It is displayed at the top of the web page, below
the address bar of the browser.
3. Body of the Web page –
This is the section below the header of the web page and it contains the actual
content of the web page.
4. Navigational Links –
These are the hyperlinks placed on the web page using which you can move
the linked web pages/documents.
5. Footer –
This is the bottom section of the web page. This is the section where usually the
copyright notice, website contact information, etc. is put.

1.2WEB SITE

A website is a collection of many web pages, and web pages are digital files that
are written using HTML(HyperText Markup Language). To make your website
available to every person in the world, it must be stored or hosted on a computer
connected to the Internet round a clock. Such computers are known as a Web
Server.
Components of a Website: We know that a website is a collection of a webpages
hosted on a web-server. These are the components for making a website.
 Webhost: Hosting is the location where the website is physically located. Group
of webpages (linked webpages) licensed to be called a website only when the
webpage is hosted on the webserver. The webserver is a set of files transmitted
to user computers when they specify the website’s address..
 Address: Address of a website also known as the URL of a website. When a
user wants to open a website then they need to put the address or URL of the
website into the web browser, and the asked website is delivered by the
webserver.
 Homepage : Home page is a very common and important part of a webpage. It
is the first webpage that appears when a visitor visits the website.

9 | Page
1.3 MongoDB
MongoDB is a NoSQL, document-oriented database that stores data in flexible, JSON-like
documents. This approach provides a dynamic and schema-less structure, making it ideal for
applications that handle unstructured or semi-structured data.

React.js
A popular JavaScript library for building user interfaces. React enables the development
of a dynamic and responsive front-end for the system, providing users with smooth interactions
and real-time updates.

1.4 Express.js/Node.js
 Express.js: Express.js is a lightweight and flexible Node.js web application framework that
simplifies the process of building web servers and APIs. It provides a robust set of features for
web and mobile applications, making it easier to handle HTTP requests, routing, middleware,
and more

 Node.js Node.js is an open-source, cross-platform runtime environment that allows developers

to run JavaScript code on the server side. Built on Google Chrome's V8 JavaScript engine, it
enables efficient and scalable development of server-side and networking applications1.4
JavaScript

A programming language essential for adding interactivity to the system. JavaScript works on both the
front-end (via React) and back-end (via Node.js).

10 | P a g e
1.5 HTML
Hypertext Markup Language (HTML) is the standard markup language for documents designed
to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets
(CSS) and scripting languages such as JavaScript.

Web browsers receive HTML documents from a web server or from local storage and render the
documents into multimedia web pages. HTML describes the structure of a web page semantically
and originally included cues for the appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML constructs, images and other
objects such as interactive forms may be embedded into the rendered page. HTML provides a
means to create structured documents by denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written
using angle brackets. Tags such as <img /> and <input /> directly introduce content into the page.
Other tags such as <p> surround and provide information about document text and may include
other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret
the content of the page.HTML can embed programs written in a scripting language such as
JavaScript, which affects the behavior and content of web pages. Inclusion of CSS defines the look
and layout of content.

1.6 CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a
document written in a markup language such as HTML. CSS is a cornerstone technology of the
World Wide Web, alongside HTML and JavaScript.
CSS is designed to enable the separation of presentation and content, including layout, colors, and
fonts. This separation can improve content accessibility, provide more flexibility and control in
the specification of presentation characteristics, enable multiple web pages to share formatting
by specifying the relevant CSS in a separate .CSS file which reduces complexity and repetition in
the structural content as well as enabling the .
Separation of formatting and content also makes it feasible to present the same markup page in
different styles for different rendering methods, such as on-screen, in print, by voice (via speech-
based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for
alternate formatting if the content is accessed on a mobile device.
The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media
type (MIME type) text/CSS is registered for use with CSS by RFC 2318 (March 1998). The W3C
operates a free CSS validation service for CSS documents. In addition to HTML, other markup
languages support the use of CSS including XHTML, plain XML, SVG, and XUL.
11 | P a g e
 Chapter 2

LITERATURE SURVEY

2.1 Aim of the Project

The aim of this project is to develop a robust, user-friendly CRUD (Create, Read, Update, Delete)
application that allows efficient management of data through a structured and interactive user interface.
The application will support essential operations for storing, retrieving, updating, and deleting data in a
database, ensuring data consistency, integrity, and security. It will provide an intuitive experience for
users to manage records with minimal effort while demonstrating key principles of software
development such as modularity, scalability, and maintainability.

2.2 Purpose of the Project

1Enhance Productivity: Simplify routine data operations by providing an easy-to-use interface for
users.

2. Ensure Data Integrity: Implement proper validation and error handling to ensure the accuracy
and reliability of data.
3. Improve Scalability: Design the system with a modular architecture to allow future
enhancements, such as additional features or integration with other systems.
4. Promote Learning: Provide developers with hands-on experience in building applications that
interact with databases, reinforcing concepts such as CRUD operations, RESTful APIs, and UI/UX
design.
5. Offer Reusability: Create a reusable framework or template for developing similar applications in
other domains, such as inventory management, employee tracking, or customer relations.

2.3 The benefits of the Project

1 Efficient Data Management

The CRUD application simplifies and streamlines data handling by allowing users to easily create,
view, modify, and delete records through a user-friendly interface.

2 Time Savings
Automated data operations reduce manual effort and save time, especially in scenarios involving
large datasets.

3 Improved Data Accuracy

With built-in validation and error handling, the application ensures that only correct and consistent
data is entered, minimizing human error.

12 | P a g e
2.4 About the project
The CRUD APPLICATION is a full-stack web application built using modern technologies such as
React for the frontend, Node.js with Express for the backend, and mongodb as the database.
Key Features:
 Create New user
 Rename user
 Update user
 Delete user

The CRUD (Create, Read, Update, Delete) application is a fundamental software

solution designed to manage and manipulate data effectively. This project
demonstrates the core principles of database management by offering a structured
and user-friendly interface that interacts with a backend database. The primary
goal of the application is to allow users to perform essential data operations while
ensuring data integrity, security, and ease of access.

The objective of this project is to build a reliable application that enables users to
create new data entries, retrieve existing data, update information, and delete
unnecessary records. This project helps in understanding how software interacts
with databases and is a foundational step for more complex systems like ERP,
CMS, and e-commerce platforms.

13 | P a g e
 Chapter 3

REQUIREMENT SPECIFICATION
The system requirement and specification of our project is as follows:
 3 . 1 Hardware requirements
Processor: i5 Core
Processor Clock speed:
2.5GHz
Monitor: 1024 * 768 Resolution Color
Keyboard: QWERTY
RAM: 1 GB
Motherboard: 845c Intel
Motherboard Backup Media:
Floppy/pen drive/Hard disk. Hard
disk: 2 TB HDD

I/O Device: Standard input and output devices.

 3.2 Software requirements

 Operating System: Windows, macOS, or Linux
 Backend: Node.js and Express.js
 Frontend: React.js
 Database: MongoDB
 IDE: Visual Studio Code or any suitable IDE
 Browser: Chrome, Firefox, or Edge

14 | P a g e
 Chapter 4

Software Design

use-case diagram

15 | P a g e
4.1 FRONT END

1. Create Home Page with login page for new user

2. Create All the necessary pages for each link and the functionalities.

3. Style all the Web pages.

4.1.1 Functionalities

 Add new user:

1. Create a new user by giving name

2. Give Email id
3. Select a gender
4. Select Status

 Update user:

• Update the changes of user

• Save the changes

4.2 CONNECTION
1. Implement the functionalities for each of the web page.
2. Use the appropriate Query for the functionalities.
3. Follow the same procedure –
- Create a mongodb Template.
- Prepare the statement.
- Bind the parameters if required.
- Execute the statement.

16 | P a g e
4.3 FRONT END TASKS

1. Create user login & registration page.

2. Create User by giving the required details
3. Delete the user details
4. Style all the Web pages.

4.4 BACK END TASKS

1. Create 4 tables.
2. After the required Tables and add the Foreign key
Functionalities.
3. Insert the values into the tables.
4. Create views as per requirement.
.

17 | P a g e
 CSS
@import
url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..70
0;1,100..700&display=swap');
:root{
--dark:#2b2d42;
--light:#615bda;
--border:#e6e0de;
--border-btn:#edf2f4;

}
*{
padding:0;
margin:0;
box-sizing:border-box;
}
a{
text-decoration:none;
font-family:"Josefin Sans", serif;
}
.container{
max-width: 1024px;
margin: auto;
}

.nav-brand{
font-size: 1.5em;
font-weight: bold;
}

.d-flex{
display: flex;
flex-wrap: wrap;
}

.justify-between{
justify-content: space-between;
}

.text-center{
text-align: center;
}

.border-shadow{
border: 1px solid var(--border-btn);

18 | P a g e
 box-shadow: 1px 3px 10px #e9ecef;
}

.text-dark{
color: var(--dark);
}

.inline{
display: inline-block;
}

.text-light{
color: var(--light);
}

.text-gradient{
background: linear-gradient(to right, #8e2de2, #4a00e0);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

#header nav{
background-color: #06d6a0;
padding: 1em 0;
width: 100%;
}

#site-main{
margin-top: 6em;
font-family: 'Barlow', sans-serif;
}

#site-main .container .box-nav > a{

font-size: 1em;
padding: .5em 1em;
}

#site-main .container form{

margin: 2em 0;
}

table{
border-spacing: 0px;
width: 100%;
}

.table td, .table th{

19 | P a g e
 padding: .75em;
vertical-align: top;
text-align: center;
border-top: 1px solid var(--border);
}

.table td > a.btn{

padding: .3em 1em;
font-size: 1.1em;
margin: 0 .2em;
}

.table tr:hover{
background-color:#06d6a0 ;
}

.table tr:hover td > a{

box-shadow: none;
}

.table .thead-dark th{

color: #fff;
background-color: var(--dark) ;
border-color: #32383e;
}

@media only screen and (max-width: 1024px){

table, thead, tbody, th, td, tr{
display: block;
}

thead tr{
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid var(--border);}

td{
border: none;
position: relative;
}

20 | P a g e
 INDEX.JS
$("#add_user").submit(function(event){

alert("Data Inserted Successfully!");

})

$("#update_user").submit(function(event){
event.preventDefault();

var unindexed_array=$("#update_user").serializeArray();
var data={}

$.map(unindexed_array, function(n,i){
data[n['name']]=n['value']
})

var request={
"url":`http://localhost:3000/api/users/${data.id}`,
"method":"PUT",
"data":data
}

$.ajax(request).done(function(response){
alert("Data Updated Successfully!");
})

})

if(window.location.pathname=="/"){
$ondelete=$(".table tbody td a.delete");
$ondelete.click(function(){
var id=$(this).attr("data-id")

var request={
"url":`http://localhost:3000/api/users/${id}`,
"method":"DELETE"
}

if(confirm("Do you really want to delete this record?")){

$.ajax(request).done(function(response){
alert("Data Deleted Successfully!");
location.reload();
})

}
})
}

21 | P a g e
 CONTROLLER.JS

var Userdb = require('../model/model');

// create and save new user

exports.create = (req,res)=>{
// validate request
if(!req.body){
res.status(400).send({ message : "Content can not be emtpy!"});
return;
}

// new user
const user = new Userdb({
name : req.body.name,
email : req.body.email,
gender: req.body.gender,
status : req.body.status
})

// save user in the database

user
.save(user)
.then(data => {
//res.send(data)
res.redirect('/add-user');
})
.catch(err =>{
res.status(500).send({
message : err.message || "Some error occurred while creating a
create operation"
});
});

// retrieve and return all users/ retrive and return a single user
exports.find = (req, res)=>{

if(req.query.id){
const id = req.query.id;

Userdb.findById(id)
.then(data =>{
if(!data){
res.status(404).send({ message : "Not found user with id
"+ id})

22 | P a g e
 }else{
res.send(data)
}
})
.catch(err =>{
res.status(500).send({ message: "Erro retrieving user with id
" + id})
})

}else{
Userdb.find()
.then(user => {
res.send(user)
})
.catch(err => {
res.status(500).send({ message : err.message || "Error
Occurred while retriving user information" })
})
}

// Update a new idetified user by user id

exports.update=(req,res)=>{
if(!req.body){
return res
.status(400)
.send({message:"Data to update can not be empty"})
}

const id = req.params.id;
Userdb.findByIdAndUpdate(id,req.body,{useFindAndModify:false})
.then(data=> {
if(!data){
res.status(404).send({message:`Cannot Update user with ${id}.
Maybe user not found!`})
}else{
res.send(data)
}
})
.catch(err=>{
res.status(500).send({message:"Error Update user information"})
})
}

// Delete a user with specified user id in the request

exports.delete=(req,res)=>{

23 | P a g e
 const id = req.params.id;

Userdb.findByIdAndDelete(id)
.then(data=> {
if(!data){
res.status(404).send({ message:`Cannot Delete with id ${id}.
Maybe id is wrong`})
}else{
res.send({
message:"User was deleted successfully!"
})
}
})
.catch(err=>{
res.status(500).send({ message:"Could not delete User with id="+id
});
});
}

CONNECTION.JS

const mongoose = require('mongoose');

const connectDB = async () => {

try{
// mongodb connection string
const con = await mongoose.connect(process.env.MONGO_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,

})

console.log(`MongoDB connected : ${con.connection.host}`);

}catch (err){
console.log(err);
process.exit(1);
}
}

module.exports = connectDB;

24 | P a g e
 ROUTER.JS
const express=require('express');

const route = express.Router()

const services = require('../services/render');

const controller = require('../controller/controller');

/**
* @description Root Route
* @method GET /
*/
route.get('/',services.homeRoutes);

/**
* @description add users
* @method GET /add-user
*/
route.get('/add-user', services.add_user)

/**
* @description for update user
* @method GET /update-user
*/
route.get('/update-user',services.update_user)

// API
route.post('/api/users',controller.create);
route.get('/api/users',controller.find);
route.put('/api/users/:id',controller.update);
route.delete('/api/users/:id',controller.delete);

module.exports=route

25 | P a g e
 RENDER.JS
const axios = require('axios');

exports.homeRoutes=(req,res)=>{
// Make a get request to /api/users
axios.get('http://localhost:3000/api/users')
.then(function(response){
res.render('index',{users:response.data});
})
.catch(err=>{
res.send(err);
})

exports.add_user=(req,res)=>{
res.render('add_user');
}

exports.update_user=(req,res) =>{
axios.get('http://localhost:3000/api/users',{params:{id:req.query.id}})
.then(function(userdata){
res.render("update_user",{user:userdata.data})
})
.catch(err=>{
res.send(err);
})
}

26 | P a g e
 FORM.EJS
<!-- form handling -->
<form action="/api/users" method="POST" id="add_user">
<div class="new_user">
<div class="form-group">
<label for="name" class="text-light">Name</label>
<input type="hidden" name="id" value=""> <!-- Populate with user
ID if editing -->
<input type="text" name="name" value="" placeholder="Bhumika"
required>
</div>

<div class="form-group">
<label for="email" class="text-light">Email</label>
<input type="text" name="email" value=""
placeholder="[email protected]" required>
</div>

<div class="form-group">
<label for="gender" class="text-light">Gender</label>
<div class="radio inline">
<input type="radio" id="radio-2" name="gender" value="Male">
<label for="radio-2" class="radio-label">Male</label>
</div>
<div class="radio inline">
<input type="radio" id="radio-3" name="gender" value="Female">
<label for="radio-3" class="radio-label">Female</label>
</div>
</div>

<div class="form-group">
<label for="status" class="text-light">Status</label>
<div class="radio inline">
<input type="radio" id="radio-4" name="status" value="Active">
<label for="radio-4" class="radio-label">Active</label>
</div>
<div class="radio inline">
<input type="radio" id="radio-5" name="status"
value="Inactive">
<label for="radio-5" class="radio-label">Inactive</label>
</div>
</div>

<div class="form-group">
<button type="submit" class="btn text-dark Update">Save</button>
</div>
</div>
</form>

27 | P a g e
 HEADER.EJS
<!-- form handling -->
<form action="/api/users" method="POST" id="add_user">
<div class="new_user">
<div class="form-group">
<label for="name" class="text-light">Name</label>
<input type="hidden" name="id" value=""> <!-- Populate with user
ID if editing -->
<input type="text" name="name" value="" placeholder="Bhumika"
required>
</div>

<div class="form-group">
<label for="email" class="text-light">Email</label>
<input type="text" name="email" value=""
placeholder="[email protected]" required>
</div>

<div class="form-group">
<label for="gender" class="text-light">Gender</label>
<div class="radio inline">
<input type="radio" id="radio-2" name="gender" value="Male">
<label for="radio-2" class="radio-label">Male</label>
</div>
<div class="radio inline">
<input type="radio" id="radio-3" name="gender" value="Female">
<label for="radio-3" class="radio-label">Female</label>
</div>
</div>

<div class="form-group">
<label for="status" class="text-light">Status</label>
<div class="radio inline">
<input type="radio" id="radio-4" name="status" value="Active">
<label for="radio-4" class="radio-label">Active</label>
</div>
<div class="radio inline">
<input type="radio" id="radio-5" name="status"
value="Inactive">
<label for="radio-5" class="radio-label">Inactive</label>
</div>
</div>

<div class="form-group">
<button type="submit" class="btn text-dark Update">Save</button>
</div>
</div>
</form>

28 | P a g e
 ADD USER.EJS
<!-- include header -->
<%- include('include/_header') %>
<!-- /include header -->

<!-- Main Site -->

<main id="site-main">
<div class="container">
<div class="box-nav d-flex justify-between">
<div class="filter">
<a href="/"><i class="fas fa-angle-double-left"></i>All
Users</a>
</div>
</div>

<div class="form-title text-center">

<h2 class="text-dark">New User</h2>
<span class="text-dark">Use the below form to create a new
account</span>
</div>

<!-- Add user form -->

<%- include('include/_form') %>

</div>
</main>
<!-- /Main Site -->

<!-- include footer -->

<%- include('include/_footer') %>
<!-- /include footer -->

29 | P a g e
 ASS USER.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD Application</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.7.2/css/all.min.css" integrity="sha512-
Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0
SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="../assets/css/style.css">

</head>

<body>
<!-- Header -->
<header id="header">
<nav>
<div class="container">
<div class="text-center">
<a href="/" class="nav-brand text-dark">User Management
System</a>
</div>
</div>
</nav>
</header>
<!-- /Header -->

<!-- Main Site -->

<main id="site-main">
<div class="container">
<div class="box-nav d-flex justify-between">
<div class="filter">
<a href="/"<i class="fas fa-angle-double-left"></i>All
Users</a>

</div>
</div>

<div class="form-title text-center">

<h2 class="text-dark">New User</h2>
<span class="text-dark">Use the below form to create a new account</span>
</div>
<!-- form handling -->
<form method="POST"id="update_user">
<div class="new_user">

30 | P a g e
 <div class="form-group">
<lable for="name" class="text-light">Name</lable>
<input type="hidden"name="id"value="">
<input type="text" name="name"value=""placeholder="Bhumika"
</div>

<div class="form-group">
<lable for="Email" class="text-light">Email</lable>
<input type="text"
name="Email"value=""placeholder="[email protected]">
</div>

<div class="form-group">
<label for="male"class="text-light">Gender</label>
<div class="radio inline">
<input type="radio" id="radio-2" name="gender" value="Male">
<label for="radio-2"class="radio-label">Male</label>
</div>
<div class="radio inline">
<input type="radio" id="radio-3" name="gender" value="female">
<label for="radio-3"class="radio-label">Female</label>
</div>
</div>

<div class="form-group">
<label for="gender"class="text-light">Status</label>
<div class="radio inline">
<input type="radio" id="radio-4"name="status" value="Active">
<label for="radio-4"class="radio-label">Active</label>
</div>
<div class="radio inline">
<input type="radio" id="radio-5" name="status"
value="Inactive">
<label for="radio-5"class="radio-label">Inactive</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn text-dark Update">Save</button>
</div>
</div>
</form>
</div>
</main>
<!-- /Main Site -->
</body>
</html>

31 | P a g e
 INDEX.EJS
<!-- include header -->
<%- include('include/_header') %>
<!-- /include header -->

<!-- Main Site -->

<main id="site-main">
<div class="container">
<div class="box-nav d-flex justify-between">
<a href="/add-user" class="border-shadow">
<span class="text-gradient">New User <i class="fas fa-
user"></i></span>
</a>
</div>

<!-- form handling -->

<form action="/" method="POST">
<table class="table">
<thead class="thead-dark">
<tr>
<th>ID</th>
<th>Name</th>
<th>@Email</th>
<th>Gender</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<%- include('include/_show') %>
</tbody>
</table>
</form>
</div>
</main>
<!-- /Main Site -->

<!-- include footer -->

<%- include('include/_footer') %>
<!-- /include footer -->

32 | P a g e
 INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD Application</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.7.2/css/all.min.css" integrity="sha512-
Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0
SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="../assets/css/style.css">

</head>

<body>
<!-- Header -->
<header id="header">
<nav>
<div class="container">
<div class="text-center">
<a href="/" class="nav-brand text-dark">User Management
System</a>
</div>
</div>
</nav>
</header>
<!-- /Header -->

<!-- Main Site -->

<main id="site-main">
<div class="container">
<div class="box-nav d-flex justify-between">
<a href="/add-user" class="border-shadow">
<span class="text-gradient">New User <i class="fa-sharp fa-
solid fa-user"></i></https:></span>
</a>
</div>
</div>
<!-- form handling -->
<form action="/" method="POST">
<table class="table">
<thead class="thead-dark">
<tr>
<th>ID</th>
<th>Name</th>
<th>@Email</th>

33 | P a g e
 <th>Gender</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Username</td>
<td>[email protected]</td>
<td>Male</td>
<td>Active</td>
<td>
<a href="#" class="btn border-shadow update">
<i class="fas fa-pencil-alt"></i>
</a>
<a href="#" class="btn border-shadow delete">
<i class="fas fa-times"></i>
</a>
</td>

</tr>

</tbody>
</table>
</form>
</div>
</main>
<!-- /Main Site -->
</body>
</html>

34 | P a g e
 UPDATE USER.EJS
<!-- include header -->
<%- include('include/_header') %>
<!-- /include header -->

<!-- Main Site -->

<main id="site-main">
<div class="container">
<div class="box-nav d-flex justify-between">
<div class="filter">
<a href="/"><i class="fas fa-angle-double-left"></i>All
Users</a>
</div>
</div>

<div class="form-title text-center">

<h2 class="text-dark">Update User</h2>
<span class="text-dark">Use the below form to Update an
account</span>
</div>
<!--add user form -->
<!-- form handling -->
<form method="Post"id="update_user">
<div class="new_user">
<div class="form-group">
<label for="name" class="text-light">Name</label>
<input type="hidden" name="id" value="<%=user._id%>">
<input type="text" name="name"
value="<%=user.name%>"placeholder="Bhumika">
</div>

<div class="form-group">
<label for="Email" class="text-light">Email</label>
<input type="text" name="email"
value="<%=user.email%>"placeholder="[email protected]">
</div>

<div class="form-group">
<label for="gender" class="text-light">Gender</label>
<input type="radio" id="radio-2" name="gender"
value="Male"<%= user.gender=='Male'?'checked':''%>>
<label for="radio-2" class="radio-label">Male</label>

<input type="radio" id="radio-3" name="gender"

value="Female"<%= user.gender=='Female'?'checked':''%>>
<label for="radio-3" class="radio-
label">Female</label>
</div>

35 | P a g e
 <div class="form-group">
<label for="gender" class="text-light">Status</label>
<input type="radio" id="radio-4" name="status"
value="Active"<%= user.status=='Active'?'checked':''%>>
<label for="radio-4" class="radio-
label">Active</label>
<input type="radio" id="radio-5" name="status"
value="Inactive"<%= user.status=='Inactive'?'checked':''%>>
<label for="radio-5" class="radio-
label">Inactive</label>
</div>

<div class="form-group">
<button type= "submit" class="btn text-dark update">Save
</button>
</div>
</div>
</form>
</div>
</main>

<!-- /Main Site -->

<!-- include footer -->

<%- include('include/_footer') %>
<!-- /include footer -->

36 | P a g e
 SERVER.EJS
const express=require('express');
const dotenv=require('dotenv');
const morgan=require('morgan');
const bodyparser=require("body-parser");
const path=require('path');

const connectDB=require('./server/database/connection');

const app=express();

// Load environment variables

dotenv.config({ path:'config.env' })
const PORT = process.env.PORT || 8080; // Use the environment PORT variable or
fallback to 8080

// Log requests
app.use(morgan('tiny'));

// MongodB connection
connectDB(); // Ensure this function handles connection logic properly

// Parse request to bodyparser

app.use(bodyparser.urlencoded({extended:true}))

// Set view engine

app.set("view engine","ejs");
// app.set("views",path.resolve( dirname,"views/ejs"));

// load assets
app.use('/css',express.static(path.resolve( dirname,"assets/css")))
app.use('/img',express.static(path.resolve( dirname,"assets/img")))
app.use('/js',express.static(path.resolve( dirname,"assets/js")))

// Load routers
app.use('/',require('./server/routes/router'))

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

37 | P a g e
SNAPSHORTS

38 | P a g e
Create New User

39 | P a g e
Update User

40 | P a g e
Delete User

41 | P a g e
Deleted User Entry

42 | P a g e
 DECLARATION

I BHUMIKA RAJ (1RR23MC025), student of MCA, Rajarajeswari College of

Engineering, Bengaluru, hereby declare that Internship work entitled “WEB
DEVELOPMENT” submitted to Visvesvaraya Technological University during
the academic year 2024-2025, is a record of original work done by me under the
guidelines of Dr. Mage Usha U, Department of MCA, Rajarajeswari College of
Engineering, Bengaluru. This Internship work is submitted in the partial fulfillment
of requirements for the award of the degree of Master of Computer Applications.
The results embodied in this report have not been submitted to any other university
or institute for the award of any degree.

We also declare that, to the best of our knowledge and belief, the work
reported here does not from the part of dissertation on the basis of which a
degree or award was conferred on an earlier occasion on this by any other
student.

Date:10/1/2025

Place:Banglore

BHUMIKA RAJ(1RR23MC025)

43 | P a g e
44 | P a g e