DEPARTMENT OF INFORMATION TECHNOLOGY

ACADEMIC YEAR: 2023-2024

ODD SEMESTER

IT3511 – FULL STACK WEB DEVELOPMENT LABORATORY

LABORATORY MANUAL
Regulation – 2021

NAME:

REGISTER NUMBER:

YEAR/SEM:

COURSE/BRANCH:
 RECORD NOTE BOOK
REGISTER NUMBER: ………………………………………..

Certified that this is a Bonafide observation of Practical work done by Mr. / Ms. ........................................

of the............................................ Semester ……………………………………… Branch during the

Academic year ….......................................... in the………………………………………………………..

Laboratory.

Submitted for the University Practical Examination held on……………………….

STAFF-IN-CHARGE HEAD OF THE DEPARTMENT

INTERNAL EXAMINER EXTERNAL EXAMINER

 Vision and Mission of the Institute

VISION

To be an Institute of repute in the field of Engineering and Technology by implementing the best
educational practices akin to global standards for fostering domain knowledge and developing research
attitude among students to make them globally competent

MISSION

• Achieving excellence in Teaching Learning process using state-of-the-art resources

• Extending opportunity to upgrade faculty knowledge and skills
• Implementing the best student training practices for requirements of industrial scenario of the state
• Motivating faculty and students in research activity for real time application

Vision and Mission of the Department

VISION

To create a conducive environment for the development of academic and innovative

technocrats employable at the global level, socially responsible and professionally competent to sustain
the challenges

MISSION

M1: To develop competent and quality IT professionals by imparting state-of the art technology learning
methodologies.

M2: To promote Industry – Institution relationships among the students to become more employable and
better citizens to solve societal issues.

M3: To constantly upgrade the Faculty qualification with cutting edge technology to achieve high status
in technical and research areas.

Program Outcomes (POs):

PO1 Engineering knowledge: Apply the knowledge of mathematics, science, engineering fundamentals
and an engineering specialization to the solution of complex engineering problems.

PO2 Problem analysis: Identify, formulate, review research literature, and analyze complex engineering
problems reaching substantiated conclusions using first principles of mathematics, natural sciences and
engineering sciences.

PO3 Design/development of solutions: Design solutions for complex engineering problems and design
system components or processes that meet the specified needs with appropriate consideration for the
public health, safety, cultural, societal and environmental considerations.

PO4 Conduct investigations of complex problems: Use research-based knowledge and research methods
including design of experiments, analysis, and interpretation of data and synthesis of the information to
 provide valid conclusions.

PO5 Modern tool usage: Create, select, apply appropriate techniques, resources, modern engineering and
IT tools including prediction and modeling to complex engineering activities with an understanding of
the limitations.

PO6 The engineer and society: Apply reasoning informed by the contextual knowledge to assess societal,
health, safety, legal, cultural issues and the consequent responsibilities relevant to the professional
engineering practice.
PO7 Environment and sustainability: Understand the impact of the professional engineering solutions in
societal, environmental contexts, demonstrate the knowledge and need for sustainable development.

PO8 Ethics: Apply ethical principles, commit to professional ethics, responsibilities and norms of the
engineering practice.

PO9 Individual and team work: Function effectively as an individual, as a member or leader in diverse
teams and in multidisciplinary settings.

PO10 Communication: Communicate effectively on complex engineering activities with the engineering
community with society at large being able to comprehend, write effective reports, design
documentation, make effective presentations and receive clear instructions.

PO11 Project management and finance: Demonstrate knowledge, understanding of the engineering and
management principles and apply these to one’s own work, as a member and leader in a team, to manage
projects and in multidisciplinary environments.

PO12 Life-long learning: Recognize the need, ability to engage in independent and life-long learning in
the broadest context of technological change.

Program Specific Objectives (PSOs)

To create, select, and apply appropriate techniques, resources, modern engineering and IT tools including
prediction and modelling to complex engineering activities with an understanding of the limitations.

To manage complex IT projects with consideration of the human, financial, ethical and environmental
factors and an understanding of risk management processes, and operational and policy implications.

Program Educational Objective (PEOs)

PEO 1: To ensure graduates will be proficient and core competent by utilizing the fundamental knowledge
of Basic Sciences, Engineering, Mathematics and Information Technology for the applications of various
Engineering and Technology disciplines.
PEO 2: To enable graduates to think logically and will have the capacity to understand the social, business,
environmental based hardware and software issues by designing optimal solutions through lifelong
learning.
PEO 3: To enable graduates to gain employment in organizations and establish themselves as
professionals by applying their technical skills to solve real world problems and meet the diversified needs
of industry, academia and research.
 INDEX

S.NO NAME OF THE EXPERIMENT MARK SIGNAURE

8
 PORTFOLIO WEBSITE

Ex. No.:
Date:

Develop a portfolio website for yourself which gives details about yourself for a potential recruiter.

Aim:
To develop a portfolio website for the developer itself which gives details about a developer for a
potential recruiter

Algorithm:
1. Add HTML Skeleton
2. Add Navigation Bar
3. Add Hero section
4. Add About Me section
5. Add Work Experience section
6. Add Contact section
7. Add Footer section

Source Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Project</title>
</head>
<body>
<!--Header(start)-->
<table id="header" border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="#4CAF50">
<tr>
<td>
<table border="0" cellpadding="15" cellspacing="0" width="90%" align="center">
<tr>
<td>
</td>
<td>
<font face="Comic sans MS" size="6">
<b>AVCCE - Dept of IT</b>
</font>
</td>
<td width="15%">
</td>
<td>
<a href="#home" style="text-decoration:none">
<font face="Verdana" size="5" color=black> Home
</font>
</a>
</td>

<td>
|
</td>
<td>
<a href="#about" style="text-decoration:none">
<font face="Verdana" size="5" color=black> About
</font>
</a>
</td>
<td>
|
</td>
<td>
<a href="#projects" style="text-decoration:none">
<font face="Verdana" size="5" color=black> Projects
</font>
</a>
</td>
<td>
|
</td>
<td>
<a href="#achievements" style="text-decoration:none">
<font face="Verdana" size="5" color=black> Achievements
</font>
</a>
</td>
<td>
|
</td>
<td>
<a href="#contact" style="text-decoration:none">
<font face="Verdana" size="5" color=black> Contact
</font>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Header(end)-->

<!--Home(start)-->
<table id="home" border="1" width="100%" cellpadding="20" cellspacing="0" bgcolor="black">
<tr>
<td>

<table border="0" cellpadding="15" cellspacing="0" width="90%" align="center">

<tr>
<td align="center" valign="middle">
<h3>
<font face="Times New Roman" size="6" color="#ffffff">
Hi Friends!
</font>
</h3>
<h2>
<font face="Verdana" size="6" color="#4CAF50">
<!-- Freelance Programmer -->
</font>
</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Home(end)-->
<!--About(start)-->
<table id="about" border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="black">
<tr>
<td>
<table border="0" cellpadding="15" cellspacing="0" width="80%" align="center">
<tr>
<td height="180" align="center" valign="middle" colspan="2">
<font face="Verdana" size="7" color="#4CAF50">
About Me
</font>
<hr color="#4CAF50" width="90">
</td>
</tr>
<tr>
<td width="40%">
<img src="img.png">
</td>
<td width="60%">
<font face="Verdana" size="4" color="white">
Thanks for your interest, here is a quick story of me and this website.
<hr color="black">

Myself student of ABC Engineering College, Mayiladuthurai.I am pursuing B.TECH - IT - III Year @
AVCCE. I loves to solve programming problems in most efficient ways.
<hr color="black">
I do my work mainly in C-Language,
Python and JAVA. Data Structure
& Algorithm are my stronger section. Besides these I know Web Development, LINUX and database as
well.
<hr color="black">
Thanks again for reading this, because of people like you, it exists and prospers!
<hr color="black"> Cheers,
<br>
<b>AVCCE</b>
</font>
</td>
</tr>
</table>
<hr color="black">
<hr color="black">
<hr color="black">
</td>
</tr>
</table>
<!--About(end)-->
<!--Projects(start)-->
<table id="projects" border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="#c2c0c3">
<tr>
<td>
<table border="0" cellpadding="15" cellspacing="0" width="80%" align="center">
<tr>
<td height="180" align="center" valign="middle" colspan="2">
<font face="Verdana" size="7" color="black">
Projects
</font>
<hr color="black" width="90">
</td>
</tr>
<tr>
<td height="10">
<font face="Times New Roman" size="5" color="black">
<ul>
<li>
BMI Calculator
<a href="#" style="text-decoration:none">

?
</a>
</li>
<li>
<hr color="#c2c0c3"> Calculator
<a href="#" style="text-decoration:none" color="#c2c0c3">
?
</a>
</li>
<li>
<hr color="#c2c0c3"> Calendar
<a href="#" style="text-decoration:none">
?
</a>
</li>
<li>
<hr color="#c2c0c3"> ChatBot
<a href="#" style="text-decoration:none">
?
</a>
</li>

<li>
<hr color="#c2c0c3"> Contact Saver
<a href="#" style="text-decoration:none">
?
</a>
</li>

<li>
<hr color="#c2c0c3"> Daily Quiz
<a href="#" style="text-decoration:none">
?
</a>
</li>
<li>
<hr color="#c2c0c3"> Emplyoyee Record System
<a href="#" style="text-decoration:none">
?
</a>
</li>
<li>
<hr color="#c2c0c3"> Guess the Number-Game
<a href="#" style="text-decoration:none">

?
</a>
</li>

<li>
<hr color="#c2c0c3"> Random Password Generator
<a href="#" style="text-decoration:none">
?
</a>
</li>
<li>
<hr color="#c2c0c3"> Stone Paper Scissor
<a href="#" style="text-decoration:none">
?
</a>
</li>
<li>
<hr color="#c2c0c3"> Tic Tac Toe
<a href="#" style="text-decoration:none">
?
</a>
</li>
<li>
<hr color="#c2c0c3"> Tic Tac Toe(GUI)
<?a href="#" style="text-decoration:none">
</a>
</li>
<li>
<hr color="#c2c0c3"> ToDo App
<a href="#" style="text-decoration:none">
? </a>
</li>
<li>
<hr color="#c2c0c3"> Travel Management System
<a href="#" style= "text-decoration:none"> ?
</a>
</li>
</ul>
<hr color="#c2c0c3">
<hr color="#c2c0c3">
<hr color="#c2c0c3">
<hr color="#c2c0c3">
</font>
</td>

<td width="45%">
<img src="img.png" alt="Project" width="75%">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Projects(end)-->
<!--Achievement(start)-->
<table id="achievements" border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="black">
<tr>
<td>
<table border="0" cellpadding="15" cellspacing="0" width="80%" align="center">
<tr>
<td height="180" align="center" valign="middle">
<font face="Verdana" size="7" color="#4CAF50"> Achievements
<hr color="#4CAF50" width="100">
</font>
</td>
</tr>
<tr>
<td>
<font face="Verdana" size="4" color="white">
<ul>
<li>
<b>Intern at ZOHO.</b>
<ul>
<li>
December,2020 - Present.
</li>
<li>
Write technical articles
on programming related topics.
</li>
</ul>
</li>
<li>
<hr color="black">
<hr color="black">
<hr color="black">
<b> Class Representative</b>
<ul>
<li>
August,2023 - Present.
</li>
<li>
Participated events and workshops on different technologies.
</li>

</ul>
</li>
<li>
<hr color="black">
<hr color="black">
<hr color="black">
<b>Student Ambassador</b>
<ul>
<li> October,2021.
</li>
<li>
Selected for Intern at TCS
</li>
<hr color="black">
<hr color="black">
<hr color="black">
<hr color="black">
<hr color="black">
</ul>
</li>
</ul>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Achievement(end)-->
<!--Contact(start)-->
<table id="contact" border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="#c2c0c3">
<tr>
<td>
<table border="0" cellpadding="15" cellspacing="0" width="80%" align="center">
<tr>
<td height="180" align="center" valign="middle" colspan="2">
<font face="Verdana" size="7" color="black">
Contact
</font>
<hr color="black" width="90">
</td>
</tr>

<tr>
<td align="center" valign="top">
<table border="0" width="50%" cellpadding="15 ellspa Inga="0" align="center" bgcolor="black">

<tr>
<td width="30%">
<hr color="black">
<font face="Verdana" size="4" color="#ffffff">
Name
</font>
</td>
<td width="70%">
<font face="Verdana" size="4" color="#ffffff">
<input type="text" size="40">
</font>
</td>
</tr>
<tr>
<td width="30%">
<font face="Verdana" size="4" color="#ffffff">
Email
</font>
</td>
<td width="70%">
<font face="Verdana" size="4" color="#ffffff">
<input type="email" size="40">
</font>
</td>
</tr>
<tr>
<td width="30%">
<font face="Verdana" size="4" color="#ffffff">
Number
</font>
</td>
<td width="70%">
<font face="Verdana" size="4" color="#ffffff">
<input type="number" size="12">
</font>
</td>
</tr>
<tr>
<td width="30%">
<font face="Verdana" size="4" color="#ffffff">
Message
</font>
</td>
<td width="70%">
<font face="Verdana" size="4"

color="#ffffff">
<textarea rows="5" cols="37">
</textarea>
</font>
</td>
</tr>
<tr>
<td width="30%">
</td>
<td width="70%">
<button type="Submit">
<font face="Verdana" size="4" color="black">
<b>Submit</b>
</font>
</button>
<hr color="black">
<hr color="black">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Contact(end)-->
<!--Footer1(start)-->
<table id="footer" border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="#4CAF50">
<tr>
<td>
<table border="0" cellpadding="15" cellspacing="0" width="90%" align="center">
<tr>
<td width="13%" valign="top">
<b>LinkedIn</b>
<a href="#" style="text-decoration:none">
?
</a>
</td>
<td>
|
</td>
<td width="13%" valign="top">
<b>GitHub</b>

<a href="#" style="text-decoration:none">

?
</a>
</td>
<td>
|
</td>
<td width="13%" valign="top">
<b>HackerRank</b>
<a href="#" style="text-decoration:none">
?
</a>
</td>
<td>
|
</td>
<td width="13%" valign="top">
<b>GeeksforGeeks</b>
<a href="#" style="text-decoration:none">
?
</a>
</td>
<td>
|
</td>
<td width="13%" valign="top">
<b>Twitter</b>
<a href="#" style="text-decoration:none">
?
</a>
</td>
<td>
|
</td>
<td width="13%" valign="top">
<b>Instagram</b>
<a href="#" style="text-decoration:none">
?
</a>
</td>
<td>
|
</td>
<td width="13%" valign="top">
<b>Email</b>
<a href="#" style="text-decoration:none">
?
</a>
</td>
<td>
|

</td>
<td width="13%" valign="top">
<b>Website</b>
<a href="#" style="text-decoration:none">
?
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Footer1(end)-->
<!--Footer2(start)-->
<table id="footer" border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="black">
<tr>
<td>
<table border="0" cellpadding="15" cellspacing="0" width="90%" align="center">
<tr>
<td width="80%" valign="top">
<font face="Verdana" color="#4CAF50" size="5">
©Copyright 2050 by nobody. All rights reserved.
</font>
</td>
<td width="10%">
<font face="arial" color="black" size="5">
<a href="#header" style="text-decoration:none">
<font face="Verdana" color="#4CAF50" size="6">
<b>TOP</b>
</font>
</a>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Footer2(end)-->
</body>
</html>

Screenshot:
Result:
 Todo List Application
Ex. No.:
Date:

Create a web application to manage the TO-DO list of users, where users can login and manage
their to-do items

Aim:
To create a web application to manage the TO-DO list of users, where users can login
and manage their to-do items.

Algorithms:

1. Create the project with the following options.

 Users are able to create new tasks.
 Users are able to Read the created tasks data.
 Users are able to complete the task by checking off the task with a strike through.
 Users are able to delete the task.
 Users are able to update the tasks with many customized options. Users are able to View
a Banner with current date-time.
 Users can check the count of remaining tasks, Complete all tasks together, Delete all
completed tasks together.
 Users can View All, Incomplete, and Completed Tasks.
 Users can mark Due Date & Priority Levels for the Tasks.
2. Fork the Project in your Repository.
3. Clone the Forked Repository in your Local System.
4. Install & Configure - NodeJS, MongoDB, Robo3T
5. If you want to run the project in development mode locally then go to '.env' file & set
ENVIRONMENT=development DEPLOYMENT=local
6. If you want to run the project in production mode locally then go to '.env' file & set,
ENVIRONMENT=production DEPLOYMENT=local
7. Change "module.exports = production" to "module.exports = development" or vice-versa in the
'environment.js' file as per the requirement.
8. Run 'npm start' in GitBash Terminal

Source Code

index.ejs

<html>
<head>
<title> ToDo App </title>
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet">
<link href="/styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2> A Simple ToDo List App </h2>

<form action ="/addtask" method="POST">

 <input type="text" name="newtask" placeholder="add new task">
<button> Add Task </button>

<h2> Added Task </h2>

<% for( var i = 0; i < task.length; i++){ %>
<li><input type="checkbox" name="check" value="<%= task[i] %>" /> <%= task[i] %> </li>
<% } %>
<button formaction="/removetask" type="submit" id="top"> Remove </button>
</form>

<h2> Completed task </h2>

<% for(var i = 0; i < complete.length; i++){ %>
<li><input type="checkbox" checked><%= complete[i] %> </li>
<% } %>
</div>
</body>
</html>

index.js

//dependencies required for the app

var express = require("express");
var bodyParser = require("body-parser");
var app = express();

app.use(bodyParser.urlencoded({ extended: true }));

app.set("view engine", "ejs");
//render css files
app.use(express.static("public"));

//placeholders for added task

var task = ["buy socks", "practise with nodejs"];
//placeholders for removed task
var complete = ["finish jquery"];

//post route for adding new task

app.post("/addtask", function(req, res) {
var newTask = req.body.newtask;
//add the new task from the post route
task.push(newTask);
res.redirect("/");
});

app.post("/removetask", function(req, res) {

var completeTask = req.body.check;
//check for the "typeof" the different completed task, then add into the complete task
if (typeof completeTask === "string") {
complete.push(completeTask);
//check if the completed task already exits in the task when checked, then remove it
task.splice(task.indexOf(completeTask), 1);
} else if (typeof completeTask === "object") {
for (var i = 0; i < completeTask.length; i++) {
 complete.push(completeTask[i]);
task.splice(task.indexOf(completeTask[i]), 1);
}
}
res.redirect("/");
});

//render the ejs and display added task, completed task

app.get("/", function(req, res) {
res.render("index", { task: task, complete: complete });
});

//set app to listen on port 3000

app.listen(3000, function() {
console.log("server is running on port 3000");
});

Screenshot:

Result:
 Micro Blogging Application
Ex. No. :
Date:

Create a simple micro blogging application (like twitter) that allows people to post their content
which can be viewed by people who follow them

Aim:
To create a simple micro blogging application (like twitter) that allows people to post
their content which can be viewed by people who follow them.

Algorithm:

1. Social media web application clone along the lines of Signal, Facebook, a Twitter.
2. Using React we will able to develop our website.
3. Using Node.js to handle package management.
4. Download and run node js.
5. Open folder and navigate to client folder.
6. From here open terminal and do npm i
7. You might need to install a few packages .Then do npm start.
8. Website should launch locally in browser. We have mainly 3 pages 1.App.js 2.Post.js 3.Posts.js
9. This is the Structure of the project.

Source Code:

App.js

import logo from './logo.svg'; import './App.css';

import Posts from "./components/Posts"; function App()
{
return (Blog App using React Js );
}
export default App;

Posts.js
import React from "react";
import "./style.css"; import Post from "./Post"; const Posts = () => { const blogPosts = [
{
title: "JAVASCRIPT",
body: `JavaScript is the world most popular lightweight, interpreted compiled programming
language. It is also known as scripting language for web pages. It is well-known for
the development of web pages, many non-browser
environments also use it. JavaScript can be used for Client-side developments as well as Server-
side developments`,
author: "Nishant Singh ", imgUrl:
"https://media.geeksforgeeks.org/img-practice/banner/diving-into-excel- thumbnail.png",
},
{
title: "Data Structure ",
body: `There are many real-life examples of
a stack. Consider an example of plates stackedover one another in the canteen. The plate which is
at the top is the first one to be removed, i.e. the plate which has been placed at the bottommost
position remains in the stack for the longest period of time. So, it
can be simply seen to follow LIFO(Last InFirst Out)/FILO(First In Last Out) order.`,author:
 "Suresh Kr", imgUrl:
"https://media.geeksforgeeks.org/img-practice/banner/coa-gate-2022- thumbnail.png",
},
{
title: "Algorithm",
body: `The word Algorithm means “a processor set of rules to be followed in calculations
or other problem-solving operations”. Therefore Algorithm refers to a set of rules/instructions that
step-

by-step define how a work is to be executed upon in order to get the expected results. `,
author: "Monu Kr", imgUrl:
"https://media.geeksforgeeks.org/img-practice/banner/google-test-series- thumbnail.png",
},
{
title: "Computer Network",
body: `An interconnection of multiple devices, also known as hosts, that are connected using
multiple paths for the purpose of sending/ receiving data media.
Computer networks can also include multiple devices/mediums which help in the communication
between two differentdevices; these are known as Network devices and include things such as
routers, switches, hubs, and bridges. `,
author: "Sonu Kr", imgUrl:
"https://media.geeksforgeeks.org/img-practice/banner/cp-maths-java- thumbnail.png",
},
];
return (
<div className="posts-container">
{blogPosts.map((post, index) => (
<Post key={index} index={index} post={post} />
))}
</div>
);
};
export default Posts;

Post.js
import React from "react"; import "./style.css";
const Post = ({ post: { title, body,
imgUrl, author }, index }) => { return (
<div className="post-container">
<h1 className="heading">{title}</h1>
<img className="image" src={imgUrl} alt="post" />
<p>{body}</p>
<div className="info">
<h4>Written by: {author}</h4>
</div>
</div>
);
};
export default Post;
Now we will style the project
Style.css in componenets folder
body {
background-color: #0e9d57;
}
 .posts-container { display: flex;
justify-content: center; align-items: center;
}
.post-container { background: #e2e8d5; display: flex;
flex-direction: column; padding: 3%;
margin: 0 2%;
height: 40%;
}
.heading { height: 126px;
text-align: center; display: flex;
align-items: center;
}
.image { width: 100%; height: 210px;
}

Screenshot

Result:
 Food Delivery Website
Ex. No. :
Date:

Create a food delivery website where users can order food from a particular restaurant listed in
the website.

Aim:
To create a food delivery website where users can order food from a particular restaurant listed
in the website.

Algorithm:

Online-Food-Ordering-Web-App.
Online Food Ordering System Website using basic PHP, SQL, HTML & CSS. You can use any one of
XAMPP, WAMP or LAMP server to run the Web App on your local machine.
It has a food ordering module for a customer.
It also provides menu, orders and user management module for admin. Admin Login & Password (You
can change this in phpmyadmin): Login: admin Password: admin Technologies Used
 NodeJS
 Express
 CSS
 HTML
 JavaScript Tools Used
How to Install and Use
1. Download and install XAMPP/WAMP/LAMP server and download the files of this project
2. Copy the folder of this project in your xampp/htdocs/www folder
3. Start XAMMP. Start Apache and SQL server. Go to phpmyadmin and create a new database
named 'food'
4. Go to the food database created and click on 'Import' option in the top menu

5. Upload the food.sql file and import it

6. Open your web browser and check if you got the website running on your localhost
(http://localhost:8080/www/)

Source Code

index.js

//import modules
var express = require('express'),
bodyParser = require('body-parser'),
morgan = require('morgan'),
cors = require('cors');
path = require('path');

require('dotenv').config()

var app = express();

//http = require('http').Server(app)
var port = process.env.PORT ;
//create socket instace with http
//var io = require('socket.io')(http);

//import database connection from dbconnect.js file

//var mysql = require('./db/db');

// add listener for new connection

//io.on("connection", (socket) =>{
//this is the socket for each request
// console.log("User connected", socket.id)
//})

//Parse as urlencoded and json.

app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());

//adding middleware - cors

app.use(cors());

//Http logger
app.use(morgan('dev'));

//Uncomment for production

//app.use(express.static(__dirname + '/public'));
//app.get('/*', (req,res) => res.sendFile(path.join(__dirname+'/public')));
//app.get('*', (req,res) => {
//res.sendFile(path.join(__dirname), (err)=> {
//if (err) {
//res.status(500).send(err)
//}
//})
//});

app.use(function (req,res,next){
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "x-access-token, Origin, Content-Type,
Accept");
next();
});

//import routes from /routes/allRoutes.js

var allRoutes = require('./routes/allRoutes')

//adding routes
app.use('/api', allRoutes);

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, function() {console.log('Server started at http://localhost:'+port+'/');});
customer.js

const { STRING } = require('sequelize');

var Sequelize = require('sequelize');
var mysqlConnection = require('../db/dbconnect');

module.exports = mysqlConnection.sequelize.define(
'customers', {
id_customer: {
type: Sequelize.INTEGER,
primaryKey: true,
autoIncrement: true
},
fname: {
type: Sequelize.STRING
},
lname: {
type: Sequelize.STRING
},
email: {
type: Sequelize.STRING
},
phone:{
type: Sequelize.STRING
},
dob:{
type: Sequelize.DATE,
},
password: {
type: Sequelize.STRING,
},
acc_state: {
type: Sequelize.INTEGER
},
createdAt: {
type: Sequelize.DATE,
defaultValue: Sequelize.NOW
},
updatedAt: {
type: Sequelize.DATE,
defaultValue: Sequelize.NOW
}
}
);

user.js

var Sequelize = require('sequelize');

var mysqlConnection = require('../db/dbconnect');

module.exports = mysqlConnection.sequelize.define(
'users', {
id_user: {
type: Sequelize.INTEGER,
 primaryKey: true,
autoIncrement: true
},
fname:{
type: Sequelize.STRING
},
lname:{
type: Sequelize.STRING
},
username: {
type: Sequelize.STRING
},
email: {
type: Sequelize.STRING
},
password: {
type: Sequelize.STRING,
},
roles: {
type: Sequelize.STRING,
},
status:{
type: Sequelize.INTEGER,
},
createdAt: {
type: Sequelize.DATE,
defaultValue: Sequelize.NOW
},
updatedAt: {
type: Sequelize.DATE,
defaultValue: Sequelize.NOW
}
}
);

db_mysqli.js

const Mysqli = require('mysqli');

let conn = new Mysqli({

Host: 'localhost', // IP/domain name
post: 3306, // port, default 3306
user: 'root', // username
passwd: '', // password
db: 'ecommerce_tos'
});

let db = conn.emit(false, '');

module.exports = {
database: db};
dbconnect.js

const Sequelize = require('sequelize');

const mysqlConnection = {}
const sequelize = new Sequelize('ecommerce_tos', 'root', '', {
host: 'localhost',
dialect: 'mysql',

operatorAliases: false,

pool: {
max: 5,
min: 0,
acquire: 30000,
idle: 10000

},

});

mysqlConnection.sequelize = sequelize;
mysqlConnection.Sequelize = Sequelize;

module.exports = mysqlConnection; //exporting the connection

Screenshot
Result
 E-COMMERCE WEBSITE

Ex. No.:
Date:

Develop a classifieds web application to buy and sell used products.

Aim:

To develop a classifieds web application to buy and sell used products.

Algorithm:

1. Clone project git-clone https://github.com/openclassify/openclassify.git.

2. Run install.sh bash install.sh.
3. That's it! Project at localhost Documentationbcan visit this link for detailed documentation.
https://visiosoft.gitbook.io/v2/ CLC Commands
4. Find a solution for any problem, please review our CLI Command document. View CLI Command
Document other Installation Methods
5. Check here for more translations open classify support 22+ languages. If you'd like to contribute
translations
6. Please check out our Crowdin project.

Source Code:

profile.ejs

<%- include ../partials/header %>

<%- include ../partials/categories-navbar %>

<div class="container">
<!-- Flash messages -->
<div class="row mt-3 mb-3">
<div class="col-md-8 m-auto">
<% if (successMsg) { %>
<div id="success" class="alert alert-success">
<%= successMsg %>
</div>
<% } else { %>
<div id="success" class="alert alert-success d-none"></div>
<% } %>
</div>
<div class="col-md-8 m-auto">
<% if (errorMsg) { %>
<div id="error" class="alert alert-danger">
<%= errorMsg %>
</div>
<% } else { %>
<div id="error" class="alert alert-danger d-none"></div>
<% } %>
 </div>
</div>
<!-- User's orders -->
<div class="row mt-4">
<div class="col-md-8 m-auto">
<% if (orders != null && orders.length > 0) { %>
<h3>My orders</h3>
<% orders.forEach( order => { %>
<div class="card m-3">
<div class="card-body">
<p class="card-text ">
<ul class="list-group">
<% order.cart.items.forEach( item => { %>
<li class="list-group-item d-flex justify-content-between align-items-center">
<%= item.title %> | <%= item.qty %> Units
<span class="badge badge-info badge-pill"><%= item.price %></span>
</li>
<%}) %>
</ul>
</p>
</div>
<div class="card-footer">
<strong>Total Price: $<%= order.cart.totalCost %></strong>
</div>
</div>
<%}) %>
<%} else { %>
<h3 class="text-center" >You have not made any orders yet</h3>
<%} %>
</div>
</div>
</div>

<%- include ../partials/footer %>

signin.ejs

<%- include ../partials/header %> <%- include ../partials/categories-navbar %>

<div class="container">
<div class="row">
<div class="col-md-8 m-auto">
<h1 class="mt-4 mb-4">Sign In Page</h1>
<!-- Flash message -->
<% if(errorMsg !=null && errorMsg.length>0) {%>
<div id="flash-msg" class="alert alert-danger">
<%=errorMsg %>
</div>
<%}%>
<form action="/user/signin" method="POST">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" name="email" id="email" />
</div>
 <div class="form-group">
<label for="password">Password</label>
<input
type="password"
class="form-control"
name="password"
id="password"
/>
</div>
<input type="hidden" name="_csrf" value="<%= csrfToken %>" />
<button type="submit" class="btn btn-primary button-style">
Sign In
</button>
</form>
<p class="mt-3">
Don't have an account? <a href="/user/signup"> Sign Up!</a>
</p>
</div>
</div>
</div>

signup.ejs

<%- include ../partials/header %> <%- include ../partials/categories-navbar %>

<div class="container">
<div class="row">
<div class="col-md-8 m-auto">
<h1 class="mt-4 mb-4">Sign Up Page</h1>
<% if(errorMsg != null && errorMsg.length>0) {%>
<div id="flash-msg" class="alert alert-danger">
<%=errorMsg %>
</div>
<%}%>
<form action="/user/signup" method="POST">
<div class="form-group">
<label for="name">Name</label>
<input
type="name"
class="form-control"
name="name"
id="name"
required
/>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" name="email" id="email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
class="form-control"
 name="password"
id="password"
/>
</div>
<div class="form-group">
<label for="password2">Verify Password</label>
<input
type="password"
class="form-control"
name="password2"
id="password2"
/>
</div>
<input type="hidden" name="_csrf" value="<%= csrfToken %>" />
<button type="submit" class="btn btn-primary button-style">
Sign Up
</button>
</form>
</div>
</div>
</div>

cart.js

const mongoose = require("mongoose");

const cartSchema = new mongoose.Schema({

items: [
{
productId: {
type: mongoose.Schema.Types.ObjectId,
ref: "Product",
},
qty: {
type: Number,
default: 0,
},
price: {
type: Number,
default: 0,
},
title: {
type: String,
},
productCode: {
type: String,
},
},
],
totalQty: {
type: Number,
default: 0,
required: true,
},
 totalCost: {
type: Number,
default: 0,
required: true,
},
user: {
type: mongoose.Schema.Types.ObjectId,
ref: "User",
required: false,
},
createdAt: {
type: Date,
default: Date.now,
},
});

module.exports = mongoose.model("Cart", cartSchema);

catagory.js

const mongoose = require("mongoose");

const Schema = mongoose.Schema;
const slug = require("mongoose-slug-updater");

mongoose.plugin(slug);

const categorySchema = Schema({

title: {
type: String,
required: true,
},
slug: {
type: String,
unique: true,
slug: "title",
},
});

module.exports = mongoose.model("Category", categorySchema);

order.js

const mongoose = require("mongoose");

const Schema = mongoose.Schema;

const orderSchema = Schema({

user: {
type: Schema.Types.ObjectId,
ref: "User",
},
cart: {
totalQty: {
type: Number,
default: 0,
 required: true,
},
totalCost: {
type: Number,
default: 0,
required: true,
},
items: [
{
productId: {
type: mongoose.Schema.Types.ObjectId,
ref: "Product",
},
qty: {
type: Number,
default: 0,
},
price: {
type: Number,
default: 0,
},
title: {
type: String,
},
productCode: {
type: String,
},
},
],
},
address: {
type: String,
required: true,
},
paymentId: {
type: String,
required: true,
},
createdAt: {
type: Date,
default: Date.now,
},
Delivered: {
type: Boolean,
default: false,
},
});

module.exports = mongoose.model("Order", orderSchema);

product.js

const mongoose = require("mongoose");

const Schema = mongoose.Schema;
const productSchema = Schema({
productCode: {
type: String,
required: true,
unique: true,
},
title: {
type: String,
required: true,
},
imagePath: {
type: String,
required: true,
},
description: {
type: String,
required: true,
},
price: {
type: Number,
required: true,
},
category: {
type: mongoose.Schema.Types.ObjectId,
ref: "Category",
},
manufacturer: {
type: String,
},
available: {
type: Boolean,
required: true,
},
createdAt: {
type: Date,
default: Date.now,
},
});

module.exports = mongoose.model("Product", productSchema);

user.js

const mongoose = require("mongoose");

const bcrypt = require("bcrypt-nodejs");
const Schema = mongoose.Schema;

const userSchema = Schema({

username: {
type: String,
require: true,
},
email: {
 type: String,
require: true,
},
password: {
type: String,
require: true,
},
});

// encrypt the password before storing

userSchema.methods.encryptPassword = (password) => {
return bcrypt.hashSync(password, bcrypt.genSaltSync(5), null);
};

userSchema.methods.validPassword = function (candidatePassword) {

if (this.password != null) {
return bcrypt.compareSync(candidatePassword, this.password);
} else {
return false;
}
};

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

app.js

require("dotenv").config();
const createError = require("http-errors");
const express = require("express");
const path = require("path");
const cookieParser = require("cookie-parser");
const logger = require("morgan");
const mongoose = require("mongoose");
const session = require("express-session");
const passport = require("passport");
const flash = require("connect-flash");
const Category = require("./models/category");
var MongoStore = require("connect-mongo")(session);
const connectDB = require("./config/db");

const app = express();

require("./config/passport");

// mongodb configuration
connectDB();
// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");

// admin route
const adminRouter = require("./routes/admin");
app.use("/admin", adminRouter);
app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));
app.use(
session({
secret: process.env.SESSION_SECRET,
resave: false,
saveUninitialized: false,
store: new MongoStore({
mongooseConnection: mongoose.connection,
}),
//session expires after 3 hours
cookie: { maxAge: 60 * 1000 * 60 * 3 },
})
);
app.use(flash());
app.use(passport.initialize());
app.use(passport.session());

// global variables across routes

app.use(async (req, res, next) => {
try {
res.locals.login = req.isAuthenticated();
res.locals.session = req.session;
res.locals.currentUser = req.user;
const categories = await Category.find({}).sort({ title: 1 }).exec();
res.locals.categories = categories;
next();
} catch (error) {
console.log(error);
res.redirect("/");
}
});

// add breadcrumbs
get_breadcrumbs = function (url) {
var rtn = [{ name: "Home", url: "/" }],
acc = "", // accumulative url
arr = url.substring(1).split("/");

for (i = 0; i < arr.length; i++) {

acc = i != arr.length - 1 ? acc + "/" + arr[i] : null;
rtn[i + 1] = {
name: arr[i].charAt(0).toUpperCase() + arr[i].slice(1),
url: acc,
};
}
return rtn;
};
app.use(function (req, res, next) {
req.breadcrumbs = get_breadcrumbs(req.originalUrl);
next();
});

//routes config
const indexRouter = require("./routes/index");
const productsRouter = require("./routes/products");
const usersRouter = require("./routes/user");
const pagesRouter = require("./routes/pages");
app.use("/products", productsRouter);
app.use("/user", usersRouter);
app.use("/pages", pagesRouter);
app.use("/", indexRouter);

// catch 404 and forward to error handler

app.use(function (req, res, next) {
next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get("env") === "development" ? err : {};

// render the error page

res.status(err.status || 500);
res.render("error");
});

var port = process.env.PORT || 3000;

app.set("port", port);
app.listen(port, () => {
console.log("Server running at port " + port);
});

module.exports = app;

Screenshot:

Result:
 LEAVE MANAGEMENT SYSTEM

Ex. No.:
Date:

Develop a leave management system for an organization where users can apply different types of
leaves such as casual leave and medical leave. They also can view the available number of days.

Aim:

To develop a leave management system for an organization where users can apply different types
of leaves such as casual leave and medical leave.

Algorithm:

 Simple Application For Managing Employee Leaves.

 Java 7 or higher.
 Maven
 Postgres Database
 Run on Tomcat 7 (you can run on later versions) How To Run
 As it's a Maven Project, you can call mvn install in terminal (in project directory) to get a war
file.(You can find it in target folder) □ You need to have Postgres database to import tables from
app-DB-Script.sql (psql -U
 postgres lms < app-DB-Script.sql).

 Default username is [email protected] and password is 123456.

 You can find the file app-DB-Script.sql in resources folder.
 Deploy the war file to the tomcat server and visit localhost:8080/leave-management- system

Source code:

server.js

const express = require("express");

const app = express();
const port = process.env.PORT || 3000;
const vm = require("v-response");
const morgan = require('morgan');
const mongoose = require("mongoose")
app.use(express.json());
app.use(morgan('dev'));
const database = 'mongodb://localhost:27017/levemanagementdb';

mongoose.connect((database), {
useUnifiedTopology: true,
useFindAndModify: false,
useNewUrlParser: true,
useCreateIndex: true,
})
.then(async () => {
vm.log("connected to database", database);
})
.catch(err => vm.log("error mongodb", err));
app.listen(port, () => vm.log("server running on port:", port));

auth.model.js

const mongoose = require("mongoose");

const Schema = mongoose.Schema;

const userSchema = new Schema({

fullname:{
type: String

},
manager: {
type: Schema.Types.ObjectId,
ref: "user"
},
email: {
type: String
},
password: {
type: String
},
role: {
type: String,
enum: ['manager', 'staff'],
default: 'staff'
},
deleted: {
type: Boolean,
default: false
}
}, {timestamps: true});

const Usermodel = mongoose.model('user', userSchema, 'Users');

module.exports = Usermodel

auth.validation.js:
'use strict';
const Validator = require("validatorjs");

export const UserValidator = {

/**
* @param {Object} obj The validation object
* @return {Object}
* */
validateAccount(obj) {
const rules = {
email: 'required|string',
password: 'required|string',
 fullname: 'required|string',
manager: 'required|string',

};
const validator = new Validator(obj, rules);
return {
errors: validator.errors.all(),
passed: validator.passes(),
}
},
};

auth.controller.js
const UserValidator = require("./auth.validator");
const _ = require("underscore");

const User = require("./auth.model");

const vm = require("v-response");

/**
* @controller User authentication controller
* */
/**
* @param
* */

//CREATE ACCOUNT
exports.CreateAccount = async (req, res, next) => {
try {
let obj = req.body;
const validateUserInput = await UserValidator.validateAccount(obj);
if (!validateUserInput.passed) {
return res.status(400)
.json({
status: false,
code: 400,
message: "There's error in your inputs",
errors: validateUserInput.errors,
})
}
const checkUserEmail = await User.findOne({email: req.body.email})
if (checkUserEmail) {
return res.status(409)
.json(vm.ApiResponse(false, 409, 'email already exist'))
} else if (!checkUserEmail) {

_.extend(obj, {
password: await vm.hashedPassword(obj.password, 10),
});
const account_object = await new User(obj);
const saveAccount = await account_object.save();
if (!saveAccount) {
return res.status(400)
.json(vm.ApiResponse(false, 400, "Oops! an error occurr"))
 } else {
saveAccount.password = null;
return res.status(201)
.json(vm.ApiResponse(true, 200, `account created`, account_object));
}
}
} catch (e) {
return next(e);
}

//LOGIN
exports.login = async (req, res, next) => {
try {
const checkEmail = await User.findOne({email: req.body.email});
if (!checkEmail) {
return res.status(400)
.json(vm.ApiResponse(false, 400, 'email not found'))
} else {
const compareEmail = vm.comparepassword(checkEmail.password, req.body.password);
if (compareEmail) {
const signtoken = vm.signToken(checkEmail._id, 'yourSecret');
checkEmail.password = null;
return res.status(200)
.json(vm.ApiResponse(true, 200, "login sucessfull", {user: checkEmail, token: signtoken}))
}
}
} catch (e) {
return next(e);
}

};

//list manager so when staff needs to register they can select their managers
exports.listManagers = async (req, res, next) => {
try {

const findMangers = await User.find({role: "manager"})

if (findMangers) {
return res.json(findMangers);
} else if (findMangers.length === 0) {
return res.json('0 managers')
} else {
return res.json("Oops! an error occurr")
}
} catch (e) {
return next(e);
}
}

auth.route.js
'use strict';
const {Router} = require('express');
const UserController = require("./auth.controller");

const router = Router();

router.post("/create/account", UserController.CreateAccount);
router.post("/account/login", UserController.login);
router.get("/managers/list", UserController.listManagers);

module.exports = router;

mailer.js

'use strict';
const Helper = require("sendgrid").mail;
const sg = require('sendgrid')('yourkey');
const vm = require("v-response");
module.exports.sendMail = sendMail;
function sendMail(from, to, subject, content, template) {
let fromEmail = new Helper.Email(from);
let toEmail = new Helper.Email(to);
let emailContent = new Helper.Content("text/html", content);
let mail = new Helper.Mail(fromEmail, subject, toEmail, emailContent);

let isEmailSent = false;

let request = sg.emptyRequest({
method: 'POST',
path: '/v3/mail/send',
body: mail.toJSON()
});

sg.API(request, function (err, response) {

if (err) {
vm.log("error");
vm.log("err in sendgrid: ", err);
isEmailSent = false;
}
vm.log("sendgrid body:", response.statusCode);
isEmailSent = true;
});
return isEmailSent;

Leave.model.js
const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const leaveSchema = new Schema({

reason: {
type: String
},
staff: {
 type: Schema.Types.ObjectId,
ref: "user"
},
leave_status: {
type: String,
enum: ['pending', 'approved', 'rejected'],
default: "pending"
}

}, {timestamps: true})

const leaveModel = mongoose.model("leave", leaveSchema, "Leave");

module.exports = leaveModel;

Leave.controller.js
const {sendMail} = require("../util/mailer");

const LeaveModel = require("./leave.model");

const User = require("../authentication/auth.model");
const _ = require("underscore");
const vm = require("v-response");

//request leave
exports.requestLeave = async (req, res, next) => {
try {
const find_user = await User.findById(req.body.staff);
if (!find_user) {
return res.status(400)
.json(vm.ApiResponse(false, 400, 'Invalid user details or unverified account'))
} else {
const leaverequestBody = _.extend(req.body, {staff: find_user._id, reason: req.body.reason})
const createLeaveRequest = await new LeaveModel(leaverequestBody);
await createLeaveRequest.save();
const find_manager = await User.findOne({_id: find_user.manager});
//notify staff manager about leave request
await sendMail('noreply@leavemanagement', find_manager.email, 'Leave Request',
`${find_user.fullname} is requesting for leave`);
return res.status(200)
.json(vm.ApiResponse(true, 200, "leave request sent"))
}
} catch (e) {
return next(e);
}

};

exports.approveLeaveOrRejectLeave = async (req, res, next) => {

try {
const findLeave = await LeaveModel.findById(req.query.leave_id);
const findstaff = await User.findById(findLeave.staff);
if (!findLeave) {
return res.status(404)
.json(vm.ApiResponse(false, 400, 'Leave request not found'))
 } else if (findLeave) {
if (req.body.approvalstatus === 'approved') {
await sendMail('noreply@leavemanagement', findstaff.email, 'Leave Approval', `Hello
${findstaff.fullname},your leave request has been approved`);
} else {
await sendMail('noreply@leavemanagement', findstaff.email, 'Leave Approval', `Hello
${findstaff.fullname},your leave request has been rejected `);
}
findLeave.leave_status = req.body.approvalstatus;
await findLeave.save();
return res.status(200)
.json(vm.ApiResponse(true, 200, "leave request status updated successfully"))
}
} catch (e) {
return next(e);
}

};
Leave.route.js
'use strict';
const {ManagerChecker} = require("../util/RoleChecker");

const {Router} = require('express');

const LeaveController = require("./leave.controller");

const router = Router();

router.post("/request/leave", LeaveController.requestLeave);
//the ManagerChecker ensures that only a manager can approve or reject a leave request
router.patch("/update/leave/status", ManagerChecker, LeaveController.approveLeaveOrRejectLeave);

module.exports = router;

Create a MangerCheck.js file

const User = require("../authentication/auth.model");
const jwt = require("jsonwebtoken")

exports.ManagerChecker = async (req, res, next) => {

let token = req.headers.authorization;
if (!token) {
return res.status(400)
.json("please login to continue")
}
if (token !== undefined) {
let decodeToken = jwt.decode(token);
let id = decodeToken.id;
if (id) {
let user = await User.findById(id);
if (user && user.role !== 'manager') {
return res.status(403).json({
status: false,
code: 403,
message: 'You are not authorized to do this action'
})
} else {
 return next();
}
}
}
return next();
}

seeder.js file
const mongoose = require("mongoose");
const bcrypt = require("bcryptjs");
mongoose.Promise = require('bluebird');
const db = 'mongodb://localhost:27017/levemanagementdb';

mongoose.connect(db);
const User = require("../authentication/auth.model");

async function seedUser() {

const hash = await bcrypt.hash('password123', 10);
User.create({
email: "[email protected]",
password: hash,
fullname: "staff manager",
role: 'manager',
}).then(user => {
console.log(`${user} user created`);
}).catch((err) => {
console.log(err);
}).finally(() => {
mongoose.connection.close();

})
}
seedUser();

Screenshot:
Result
 PROJECT MANAGEMENT SYSTEM

Ex. No.:
Date:

Develop a simple dashboard for project management where the statuses of various tasks are
available. New tasks can be added and the status of existing tasks can be changed among Pending,
InProgress or Completed.

Aim:
To develop a simple dashboard for project management where the status of various tasks are
available. New tasks can be added and the status of existing tasks can be changed among Pending,
InProgress or Completed.

Algorithm:

 JavaScript samples for Stimulsoft Dashboards.JS

 This repository contains the source code of the examples of usage Stimulsoft Dashboards.JS data
visualization tool in the HTML and JS Web applications, using JavaScript code and HTML5
embedded components. The data analysis tool and examples are fully compatible with all modern
browsers and OS.
 Overview
o A set of examples for working with Dashboards:
o Adding a Font to the Resource
o Assigning a Dashboard to the Viewer
o Changing the Designer Theme
o Changing the Viewer Theme
o Creating a Table then Adding Two Filters and Exporting to Excel
o Creating Dashboard at Runtime
o Customizing the Designer
o Customizing the Viewer
o Editing a Dashboard Template
o Editing a Dashboard Template and Showing it in the Dashboard Viewer
o Exporting a Dashboard from Code
o Loading Scripts in Part to Minify Project
o Registering a Data for Dashboard Template
o Registering a JSON Data for the Dashboard Template
o Showing the Dashboard Designer Immediately after Running an App
o Showing the Dashboard Designer in a Required Position
o Showing the Dashboard Designer in iframe
o Showing the Dashboard Viewer Immediately after Running an App
o Showing the Dashboard Viewer in a Required Position
o Showing the Dashboard Viewer in iframe
o Showing the Dashboard Viewer on the Web Page
o Supply Custom Headers for Json Database
o Updating a JSON Data for the Dashboard Viewer
o Using the Full-Screen Mode in the Designer
o Using the Full-Screen Mode in the Viewer
o Application for working with Dashboards without any web-server:
o Demo App
Source Code

index.js

// load environment variables

require('dotenv').config();

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

const { port } = require('./config');

// Connect to mongoose
require('./db');

// Run express server

app.listen(port, () => {
console.log(`Express server running at port ${port} ✌`);
});

app.js

const path = require('path');

const express = require('express');
const cors = require('cors');
require('express-async-errors');

const { validationErrorHandler, errorHandler } = require('./handlers/error');

const organizationRouter = require('./routers/organization');
const employeeRouter = require('./routers/employee');
const projectRouter = require('./routers/project');
const teamRouter = require('./routers/team');
const taskRouter = require('./routers/task');

const app = express();

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

app.use('/organizations', organizationRouter);
app.use('/employees', employeeRouter);
app.use('/projects', projectRouter);
app.use('/teams', teamRouter);
app.use('/tasks', taskRouter);

app.use(validationErrorHandler);
app.use(errorHandler);

module.exports = app;

config.js

const requiredEnvVariables = ['JWT_SECRET_KEY', 'MONGODB_URL'];

const missingEnvVariables = requiredEnvVariables.filter(
(envVar) => !process.env[envVar]
);

if (missingEnvVariables.length) {
throw new Error(`⚠ Missing environment variables ${missingEnvVariables}`);
}

module.exports = {
jwtSecretKey: process.env.JWT_SECRET_KEY,
port: process.env.PORT || 3000,
mongoDBUrl: process.env.MONGODB_URL,
};

db.js

const mongoose = require('mongoose');

const { mongoDBUrl } = require('./config');

mongoose
.connect(mongoDBUrl, {
useNewUrlParser: true,
useUnifiedTopology: true,
})
.then(() => console.log('Connected To mongoose successfully!✨✨✨'))
.catch((err) => {
console.error(err);
process.exit(1);
});

employee.js

const express = require('express');

const Employee = require('../models/Employee');
const {
signIn,
getEmployees,
getEmployee,
assignToTeam,
createEmployee,
} = require('../controllers/employee');
const { authenticate, isBusinessOwner } = require('../middlewares/auth');
const { isValidEmailInOrganization } = require('../middlewares/employee');

const router = express.Router();

// Employee Login
router.post('/sign-in', signIn);

// Create Employee
router.post('/', authenticate, isBusinessOwner, createEmployee);

// Get Employees
router.get('/', authenticate, getEmployees);

// Get Employee
router.get('/:id', authenticate, getEmployee);

// Assign Team to Employee

router.post(
'/assign-to-team',
authenticate,
isValidEmailInOrganization,
assignToTeam
);

module.exports = router;

Screenshot

Result
 ONLINE SURVEY SYSTEM

Ex. No.:
Date:

Develop an online survey application where a collection of questions is available and users are asked
to answer any random 5 questions.

Aim:
To develop an online survey application where a collection of questions is available and users are
asked to answer any random 5 questions.

Source code

index.html

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="SurveyJS service demo application with React/Redux"/>
<link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/>
<title>
SurveyJS Service
</title>
<script defer="defer" src="/static/js/main.2d0c3ef8.js"></script><link
href="/static/css/main.c69fb218.css" rel="stylesheet">
</head><body>
<noscript>You need to enable JavaScript to run this app.</noscript><div id="root">
</div>
</body>
</html>

var app = require('./app');

var config = require('./config');
var http = require('http');

// Create HTTP server and mount Express app

var server = http.createServer(app);
server.listen(config.port, function() {
console.log('Express server started on *:'+config.port);
});

var VoiceResponse = require('twilio').twiml.VoiceResponse;

var SurveyResponse = require('../models/SurveyResponse');
var survey = require('../survey_data');

// Main interview loop

exports.interview = function(request, response) {
var phone = request.body.From;
var input = request.body.RecordingUrl || request.body.Digits;
var twiml = new VoiceResponse();
// helper to append a new "Say" verb with Polly.Amy voice
function say(text) {
twiml.say({ voice: 'Polly.Amy'}, text);
}

// respond with the current TwiML content

function respond() {
response.type('text/xml');
response.send(twiml.toString());
}

// Find an in-progess survey if one exists, otherwise create one

SurveyResponse.advanceSurvey({
phone: phone,
input: input,
survey: survey
}, function(err, surveyResponse, questionIndex) {
var question = survey[questionIndex];

if (err || !surveyResponse) {
say('Terribly sorry, but an error has occurred. Goodbye.');
return respond();
}

// If question is null, we're done!

if (!question) {
say('Thank you for taking this survey. Goodbye!');
return respond();
}

// Add a greeting if this is the first question

if (questionIndex === 0) {
say('Thank you for taking our survey. Please listen carefully '
+ 'to the following questions.');
}

// Otherwise, ask the next question

say(question.text);

// Depending on the type of question, we either need to get input via

// DTMF tones or recorded speech
if (question.type === 'text') {
say('Please record your response after the beep. '
+ 'Press any key to finish.');
twiml.record({
transcribe: true,
transcribeCallback: '/voice/' + surveyResponse._id
+ '/transcribe/' + questionIndex,
maxLength: 60
});
} else if (question.type === 'boolean') {
say('Press one for "yes", and any other key for "no".');
twiml.gather({
timeout: 10,
 numDigits: 1
});
} else {
// Only other supported type is number
say('Enter the number using the number keys on your telephone.'
+ ' Press star to finish.');
twiml.gather({
timeout: 10,
finishOnKey: '*'
});
}

// render TwiML response

respond();
});
};

// Transcripton callback - called by Twilio with transcript of recording

// Will update survey response outside the interview call flow
exports.transcription = function(request, response) {
var responseId = request.params.responseId;
var questionIndex = request.params.questionIndex;
var transcript = request.body.TranscriptionText;

SurveyResponse.findById(responseId, function(err, surveyResponse) {

if (err || !surveyResponse ||
!surveyResponse.responses[questionIndex])
return response.status(500).end();

// Update appropriate answer field

surveyResponse.responses[questionIndex].answer = transcript;
surveyResponse.markModified('responses');
surveyResponse.save(function(err, doc) {
return response.status(err ? 500 : 200).end();
});
});
};
Screenshot

Result: