Scribd
Upload
18 views

Full Stack

Full stack

Uploaded by

Arockia Pravina
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

Full Stack

Full stack

Uploaded by

Arockia Pravina
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 56

CREATE A FORM AND VALIDATE THE CONTENTS OFTHE FORM USING

JAVASCRIPT

EX.NO:

DATE:

AIM:

ALGORITHAM:
PROGRAM:
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Form Validation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form id="form" action="/">
<h1>REGISTRATION</h1>
<div class="input-control">
<label for="username">Username</label>
<input id="username" name="username" type="text" required>
<div class="error"></div>
</div>
<div class="input-control">
<label for="email">E-mail</label>
<input id="email" name="username" type="email">
<div class="error"></div>
</div>
<div class="input-control">
<label for="password">Password</label>
<input id="password" name="password" type="password">
<div class="error"></div>
</div>
<div class="input-control">
<label for="password">Re-Enter Password</label>
<input id="password2" name="password2" type="password">
<div class="error"></div>
</div>
<button type="submit">Sign Up</button>
</div>

</form>

</div>
</body>
<script
src="script.js"></script>
</html>

CSS
body
{
background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
}
#form
{
width: 320px;
margin: 20vh auto 0
auto;padding: 20px;
background-color:
whitesmoke; border-radius:
15px;
font-size: 12px;
}
#form h1
{
color: #0f2027;
text-align:
center;
}
#form button
{
padding: 10px;
margin-top:
10px;width:
100%; color:
white;
background-color: rgb(41, 57,
194);border: none;
border-radius: 4px;
}
.input-control
{
display: flex;
flex-direction: column;
}
input
{
border: 1px solid
#555d5e; border-radius:
4px; display: block;
font-size:
12px;
padding:
10px; width:
95%;
}
.input-control input:focus
{
outline: 0;
}
.input-control.success input
{
border-color: rgb(57, 255, 57);
}
.input-control.error input
{
border-color: red;
}
.input-control .error
{
color: rgb(158, 0,
0); font-size: 9px;
height: 13px;
}

JAVASCRIPT
const form = document.getElementById('form');
const username =
document.getElementById('username'); const email =
document.getElementById('email');
const password =
document.getElementById('password'); const
password2 = document.getElementById('password2');

form.addEventListener('submit', e
=> { e.preventDefault();

validateInputs();
});

const setError = (element, message) => {


const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');

errorDisplay.innerText = message;
inputControl.classList.add('error');
inputControl.classList.remove('success')
}

const setSuccess = element => {


const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');

errorDisplay.innerText = '';
inputControl.classList.add('success');
inputControl.classList.remove('error');
};
const isValidEmail = email => {
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-
9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}

const validateInputs = () => {


const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const passwordValue =
password.value.trim(); const
password2Value = password2.value.trim();

if(usernameValue === '') {


setError(username, 'Username is
required');
} else {
setSuccess(username);
}

if(emailValue === '') {


setError(email, 'Email is
required');
} else if (!isValidEmail(emailValue)) {
setError(email, 'Provide a valid email
address');
} else {
setSuccess(email);
}

if(passwordValue === '') {


setError(password, 'Password is
required');
} else if (passwordValue.length < 8 ) {
setError(password, 'Password must be at least 8 character.')
} else {
setSuccess(password);
}

if(password2Value === '') {


setError(password2, 'Please confirm your password');
} else if (password2Value !== passwordValue)
{ setError(password2, "Passwords doesn't
match");
} else {
setSuccess(password2);
}

};
OUTPUT:

RESULT:
GET DATA USING FETCH API FROM AN OPEN SOURCE ENDPOINT AND
DISPLAY THE CONTENTS IN THE FORM OF A CARD

EX.NO:

DATE:

AIM:

ALGORITHM:
PROGRAM:
JAVASCRIPT FILE:
//JAVA SCRIPT
// api url
const api_url =
"https://employeedetails.free.beeceptor.com/my/api/path";

// Defining async function


async function getapi(url) {

// Storing response
const response = await fetch(url);

// Storing data in form of JSON


var data = await response.json();
console.log(data);
if (response) {
hideloader();
}
show(data);
}
// Calling that async function
getapi(api_url);

// Function to hide the loader


function hideloader() {
document.getElementById('loading').style.display = 'none';
}
// Function to define innerHTML for HTML table
function show(data) {
let tab =
`<tr>
<th>Name</th>
<th>Office</th>
<th>Position</th>
<th>Salary</th>
</tr>`;

// Loop to access all rows


for (let r of data.list) {
tab += `<tr>
<td>${r.name} </td>
<td>${r.office}</td>
<td>${r.position}</td>
<td>${r.salary}</td>
</tr>`;
}
// Setting innerHTML as tab variable
} document.getElementById("employees").innerHTML = tab;

HTML FILE:
//HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- Here a loader is created which
loads till response comes -->
<div class="d-flex justify-content-center">
<div class="spinner-border"
role="status" id="loading">
<span class="sr-only">Loading...</span>
</div>
</div>
<h1>Registered Employees</h1>
<!-- table for showing data -->
<table id="employees"></table>
</body>
</html>
OUTPUT:

RESULT:
CREATE A NODE JS SERVER THAT SERVES STATIC HTMLAND CSS FILES TO THE
USER WITHOUT USING EXPRESS

EX.NO:

DATE:

AIM:

ALGORITHM:
PROGRAM:
HTML
<html>
<head>
<title>Index Page</title>
</head>
<body>
<div>
Welcome to Node.js!
<a href="index.html">index</a> <a href="about.html">about</a>
<ahref="service.html">service</a>
</div>
</body>
</html>

Index page/index.html
<!DOCTYPE html>
<html>
<head>
<title>Index Page</title>
</head>
<body>
<div>
Welcome to Node.js!
</div>
</body>
</html>

About page/about.html
<!DOCTYPE html>
<html>
<head>
<title>About Page</title>
</head>
<body>
<div>
About Page
</div>
</body>
</html>

Service page/service.html
<!DOCTYPE html>
<html>
<head>
<title>Services Page</title>
</head>
<body>
<div>
Services Page
</div>
</body>
</html>

Server.js
const http = require('http');
const fs = require('fs');

const hostname = '127.0.0.1';


const port = 3000;

const server = http.createServer((req, res) => {


let htmlFile = '';
switch(req.url) {
case '/':
htmlFile = 'index.html';
break;
case '/about':
htmlFile = 'about.html';
break;
case '/services':
htmlFile = 'services.html';
break;
default:
break;
}

if(htmlFile)
render(res, htmlFile);
});

function render(res, htmlFile) {


fs.stat(`./${htmlFile}`, (err, stats) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');
if(stats) {
fs.createReadStream(htmlFile).pipe(res);
} else {
res.statusCode = 404;
res.end('Sorry, page not found!');
}
});
}
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});

const http = require('http');


const fs = require('fs');

const hostname = '127.0.0.1';


const port = 3000;

const server = http.createServer((req, res) => {


res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');

const routeMap = {
'': 'index.html',
'about': 'about.html',
'services': 'index.html'
}

render(res, routeMap[req.url.slice(1)]);
});

function render(res, htmlFile) {


fs.stat(`./${htmlFile}`, (err, stats) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');

if(stats) {
fs.createReadStream(htmlFile).pipe(res);
} else {
res.statusCode = 404;
res.end('Sorry, page not found');
}
});
}

server.listen(port, hostname, () => {


console.log(`Server running at http://${hostname}:${port}/`);
});
OUTPUT:

RESULT:
CREATE A NODEJS SERVER USING EXPRESS THATSTORES DATA FROM A
FORM AS A JSON FILE AND DISPLAYS ITIN ANOTHER PAGE. THE
REDIRECT PAGE SHOULD BE PREPAREDUSING HANDLEBARS.
EX.NO:

DATE:

AIM:

ALGORITHM:
PROGRAM:
index.html:
<html>
<head>
<title>Express HTML</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.
min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-
theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div style="margin:100px;">
class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a class="navbar-brand" href="/">Express HTML</a>
<ul class="nav navbar-nav">
<li class="active">
<a href="/">Home</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/sitemap">Sitemap</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron" style="padding:40px;">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra
attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</body>
</html>
package.json :{
{
"name": "htmlRender",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": ""
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.4"
}
}

app.js:
const express = require('express');
const app = express();
const path = require('path');
const router = express.Router();

router.get('/',function(req,res){
res.sendFile(path.join( dirname+'/index.html'));
// dirname : It will resolve to your project folder.
});

router.get('/about',function(req,res){
res.sendFile(path.join( dirname+'/about.html'));
});

router.get('/sitemap',function(req,res){
res.sendFile(path.join( dirname+'/sitemap.html'));
});

//add the router


app.use('/', router);
app.listen(process.env.port || 3000);

console.log('Running at Port 3000');


OUTPUT:

RESULT:
CREATE A NODE JS SERVER USING EXPRESS THAT CREATES, READS,
UPDATES AND DELETES STUDENTS DETAILS AND STORESTHEM IN
MONGODB DATABASE THE INFORMATION ABOUT THE
USER SHOULD BE OBTAIN FROM A HTML FORM

EX.NO:

AIM:

ALGORITHM:
PROGRAM:
npm init
{
"name": "reactcrud",
"version": "1.0.0",
"description": "reactCrud",
"main": "server.js",
"scripts": {
"test": "react"
},
"keywords": [
"React"
],
"author": "puneet kankar",
"license": "MIT"
}
{
"name": "reactcrud",
"version": "1.0.0",
"description": "reactCrud",
"main": "server.js",
"scripts": {
"test": "react"
}
"keywords": [
"React"
],
"author": "puneet kankar",
"license": "MIT",
“dependencies”:{
"body-parser": "^1.17.2",
"express": "^4.15.3",
"mongoose": "^4.10.2",
"morgan": "^1.8.2"}
}
var mongo = require("mongoose");
var db =
mongo.connect("mongodb://192.168.1.71:27017/reactcrud", function(err, response){
if(err){ console.log('Failed to connect to ' + db); }
else{ console.log('Connected to ' + db, ' + ', response); }
module.exports =db;
});
var express = require("express");
var path = require("path");
var mongo = require("mongoose");
var bodyParser = require('body-parser');
var morgan = require("morgan");
var db = require("./config.js");
var app = express();
var port = process.env.port || 7777;
var srcpath =path.join( dirname,'/public') ;
app.use(express.static('public'));
app.use(bodyParser.json({limit:'5mb'}));
app.use(bodyParser.urlencoded({extended:true, limit:'5mb'}));
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var studentSchema = new Schema({
name: { type: String },
address: { type: String },
email: { type: String },
contact: { type: String },
},{ versionKey: false });
var model = mongoose.model('student', studentSchema, 'student');
app.get("/api/getdata",function(req,res){
model.find({},function(err,data){
if(err){
res.send(err);
}
else{
res.send(data);
}
});
})
app.post("/api/Removedata",function(req,res){
model.remove({ _id: req.body.id }, function(err) {
if(err){
res.send(err);
}
else{
res.send({data:"Record has been Deleted..!!"}); }
});
})
app.post("/api/Updatedata",function(req,res){
model.findByIdAndUpdate(req.body.id, { name: req.body.name, address: req.body.address,
contact: req.body.contact,email:req.body.email },
function(err) {
if (err) {
res.send(err);
return;
}
res.send({data:"Record has been Updated..!!"});
});
})
app.post("/api/savedata",function(req,res){
var mod = new model(req.body);
mod.save(function(err,data){
if(err){
res.send(err);
}
else{
res.send({data:"Record has been Inserted..!!"});
}
});
})
app.get("*",function(req,res){
res.sendFile(srcpath +'/index.html');
})
app.listen(port,function(){
console.log("server start on port"+ port);
})
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>React CRUD</title>
<script src=https://fb.me/react-15,0.1.js></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstr
ap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id='root'></div>
</script>
</body>
</html>
var StudentAll = React.createClass({
getInitialState: function () {
return { name: '' ,address: '',email:'',contact:'',id:'',Buttontxt:'Save', data1: []};
},
handleChange: function(e) {
this.setState({[e.target.name]: e.target.value});
},
componentDidMount() {
$.ajax({
url: "api/getdata",
type: "GET",
dataType: 'json',
ContentType: 'application/json',
success: function(data) {
this.setState({data1: data});
}.bind(this),
error: function(jqXHR) {
console.log(jqXHR);
}.bind(this)
});
},
DeleteData(id){
var studentDelete = {
'id': id
};
$.ajax({
url: "/api/Removedata/",
dataType: 'json',
type: 'POST',
data: studentDelete,
success: function(data) {
alert(data.data);
this.componentDidMount();
}.bind(this),
error: function(xhr, status, err) {
alert(err);
}.bind(this),
});
},
EditData(item){
this.setState({name: item.name,address:item.address,contact:item.contact,email:item.email,
id:item._id,Buttontxt:'Update'});
},
handleClick: function() {
var Url="";
if(this.state.Buttontxt=="Save"){
Url="/api/savedata";
}
else{
Url="/api/Updatedata";
}
var studentdata = {
'name': this.state.name,
'address':this.state.address,
'email':this.state.email,
'contact':this.state.contact,
'id':this.state.id,
}

25
$.ajax({
url: Url,
dataType: 'json',
type: 'POST',
data: studentdata,
success: function(data) {
alert(data.data);
this.setState(this.getInitialState());
this.componentDidMount();
}.bind(this),
error: function(xhr, status, err) {
alert(err);
}.bind(this)
});
},
render: function() {
return (
<div className="container" style={{marginTop:'50px'}}>
<p className="text-
center" style={{fontSize:'25px'}}><b> CRUD Opration Using React,Nodejs,Express,Mongo
DB</b></p>
<form>
<div className="col-sm-12 col-md-12" style={{marginLeft:'400px'}}>
<table className="table-bordered">
<tbody>
<tr>
<td><b>Name</b></td>
<td>
<input className="form-
control" type="text" value={this.state.name} name="name" onChange={ this.handleChang
e } />
<input type="hidden" value={this.state.id} name="id" >
</td>
</tr>
<tr>
<td><b>Address</b></td>
<td>
<input type="text" className="form-
control" value={this.state.address} name="address" onChange={ this.handleChange } />
</td>
</tr>
<tr>
<td><b>Email</b></td>
<td>
<input type="text" className="form-
control" value={this.state.email} name="email" onChange={ this.handleChange } />
</td>
</tr>
<tr>
<td><b>Contact</b></td>
<td>
<input type="text" className="form-
control" value={this.state.contact} name="contact" onChange={ this.handleChange } />
</td>
</tr>
<tr>
<td></td>
<td>
<input className="btn btn-
primary" type="button" value={this.state.Buttontxt} onClick={this.handleClick} />
</td>
</tr>
</tbody>
</table>
</div>
div className="col-sm-12 col-md-12 " style={{marginTop:'50px',marginLeft:'300px'}} >
<table className="table-bordered"><tbody>
<tr><th><b>S.No</b></th><th><b>NAME</b></th><th><b>ADDRESS</b></th><th><
b>EMAIL</b></th><th><b>CONTACT</b></th><th><b>Edit</b></th><th><b>Delete</b
></th></tr>
{this.state.data1.map((item, index) => (
<tr key={index}>
<td>{index+1}</td>
<td>{item.name}</td>
<td>{item.address}</td>
<td>{item.email}</td>
<td>{item.contact}</td>
<td>
<button type="button" className="btn btn-
success" onClick={(e) => {this.EditData(item)}}>Edit</button>
</td>
<td>
<button type="button" className="btn btn-
info" onClick={(e) => {this.DeleteData(item._id)}}>Delete</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
</form>
</div>
);
}
});
ReactDOM.render(<StudentAll />, document.getElementById('root'))
OUTPUT:

RESULT:
CREATE A NODEJS SERVER THAT CREATES, READS, UPDATES AND
DELETES EVENT DETAILS AND STORES THEM IN AMYSQL DATABASE. THE
INFORMATION ABOUT THE USER SHOULD BE OBTAINED FROM A HTML
FORM

Ex.No:

DATE:

AIM:

ALGORITHM:
PROGRAM:

//createCREAT TABLE ptoduct(id varchar(10) ,name varchar(20) ,price varchar(10));


//update
app.put('/api/stuff/:id', (req, res, next) => {
const thing = new Thing({
_id: req.params.id,
title: req.body.title,
description: req.body.description,
imageUrl: req.body.imageUrl,
price: req.body.price,
userId: req.body.userId
});
Thing.updateOne({_id: req.params.id}, thing).then(
() => {
res.status(201).json({
message: 'Thing updated successfully!'
});
}
).catch(
(error) => {
res.status(400).json({
error: error
});
}
);
});
//Delete
app.delete('/api/stuff/:id', (req, res, next) => {
Thing.deleteOne({_id: req.params.id}).then(
() => {
res.status(200).json({
message: 'Deleted!'
});
}
).catch(
(error) => {
res.status(400).json({
error: error
});
}
);
});
//Reads
OUTPUT:

DELETE:

UPDATE:

RESULT:
CREATE COUNTER USING ReactJS

Ex.No:

DATE:

AIM:

ALOGRITHM:
PROGRAM:
Filename:index.js
import React from 'react';
import { render } from 'react-
dom'; import App from './App';
const styles = {
fontFamily: 'sans-
serif', textAlign:
'center',
};
render(<App />,
document.getElementById('root'));
filename:App.js
import React, { Component } from
'react'; import {Button} from './Button';
class App extends
Component {
constructor(props) {
super(props
); this.state
= { count: 1
}
}
handleCount(value) {
this.setState((prevState) => ({ count: prevState.count + value }));
}

render()
{ return
(
<div>
Current count: {this.state.count}
<hr />
<Button sign="+" count={this.state.count} updateCount={this.handleCount.bind(this)} />
<Button sign="-" count={this.state.count} updateCount={this.handleCount.bind(this)} />
</div>
);}}
export default App;
Filename:button.js
import React from 'react';
export const Button = (props)
=> { return (
<button onClick={() =>
props.sign == "+" ? props.updateCount(1) : props.updateCount(-1)} >
{props.sign}
</button>);
}
Filename:index.js
<div id="root"></div>
OUTPUT:

RESULT:
CREATE A TODO APPLICATION USING REACTJS. STORETHE DATA TO A
JSON FILE USING A SIMPLE NODEJS SERVER ANDRETRIEVE THE
INFORMATION FROM THE SAME DURING PAGE RELOADS.

EX.NO:

DATE:

AIM:

ALGORITHM:
PROGRAM:
Filename:Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App />, document.getElementById('root'));
Filename:App.js
import React, {Component} from 'react';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button';
import InputGroup from 'react-bootstrap/InputGroup';
import FormControl from 'react-bootstrap/FormControl';
import ListGroup from 'react-bootstrap/ListGroup';
class App extends Component {
constructor(props) {
super(props);
this.state = {
userInput : "",
list:[]
}
}
updateInput(value){
this.setState({
userInput: value,
});
}
addItem(){
if(this.state.userInput !== '' ){
const userInput = {
id : Math.random(),
value : this.state.userInput
};
const list = [...this.state.list];
list.push(userInput);
// reset state
this.setState({
list,
userInput:""
});
}
}
deleteItem(key){
const list = [...this.state.list];
const updateList = list.filter(item => item.id !== key);
this.setState({
list:updateList,
});
}
render(){
return(<Container>
<Row style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
fontSize: '3rem',
fontWeight: 'bolder',
}}
>TODO LIST
</Row>
<hr/>
<Row>
<Col md={{ span: 5, offset: 4 }}>
<InputGroup className="mb-3">
<FormControl
placeholder="add item . . . "
size="lg"
value = {this.state.userInput}
onChange = {item => this.updateInput(item.target.value)}
aria-label="add something"
aria-describedby="basic-addon2"
/>
<InputGroup.Append>
<Button
variant="dark"
size="lg"
onClick = {()=>this.addItem()}>
ADD
</Button>
</InputGroup.Append>
</InputGroup>
</Col>
</Row>
<Row>
<Col md={{ span: 5, offset: 4 }}>
<ListGroup>
{/* map over and print items */}
{this.state.list.map(item => {return(
<ListGroup.Item variant="dark" action
onClick = { () => this.deleteItem(item.id) }>
{item.value}
</ListGroup.Item>
)})}
</ListGroup>
</Col>
</Row>
</Container>
);
}
}
export default App;
OUTPUT:
1)

2)

3)
npm install react-bootstrap bootstrap npx create-react-app todo-react

Now, goto the folder


cd todo-react

Start the server- Start the server by typing the following command in terminal:
npm start

Change directory to src:


cd src

Delete every thing inside the directory


rm *

Now create index.js file


touch index.js

This file Save all files and start the server:


npm start will render our app to HTML file which is in public folder. Also create a foldername components
with file name app.js mkdir components && cd components && touch app.js

RESULT:
CREATE A SIMPLE SIGN UP AND LOGIN MECHANISM AND AUTHENTICATE
THE USER USING COOKIES. THE USER INFORMATION CAN BE STORED IN
EITHER MONGODB OR MYSQLAND THE SERVER SHOULD BE BUILT USING
NODEJS AND EXPRESS FRAMEWORK

EX.NO:

DATE:

AIM:

ALGORITHM:
PROGRAM:

JavaScript:

Filename: app.js

var express = require("express"),


mongoose = require("mongoose"),
passport = require("passport"),
bodyParser = require("body-parser"),
LocalStrategy = require("passport-local"),
passportLocalMongoose =
require("passport-local-mongoose"),
User = require("./models/user");

mongoose.set('useNewUrlParser', true);
mongoose.set('useFindAndModify', false);
mongoose.set('useCreateIndex', true);
mongoose.set('useUnifiedTopology', true);
mongoose.connect("mongodb://localhost/auth_demo_app");

var app = express();


app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({ extended: true }));

app.use(require("express-session")({
secret: "Rusty is a dog",
resave: false,
saveUninitialized: false
}));

app.use(passport.initialize());
app.use(passport.session());

passport.use(new LocalStrategy(User.authenticate()));
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());

// ROUTES

// Showing home page


app.get("/", function (req, res) {
res.render("home");
});

// Showing secret page

app.get("/secret", isLoggedIn, function (req, res) {


res.render("secret");
});
// Showing register form
app.get("/register", function (req, res) {
res.render("register");
});

// Handling user signup


app.post("/register", function (req, res) {
var username = req.body.username
var password = req.body.password
User.register(new User({ username: username }),
password, function (err, user) {
if (err) {
console.log(err);
return res.render("register");
}

passport.authenticate("local")(
req, res, function () {
res.render("secret");
});
});
});

//Showing login form


app.get("/login", function (req, res) {
res.render("login");
});

//Handling user login


app.post("/login", passport.authenticate("local", {
successRedirect: "/secret",
failureRedirect: "/login"
}), function (req, res) {
});

//Handling user logout


app.get("/logout", function (req, res) {
req.logout();
res.redirect("/");
});

function isLoggedIn(req, res, next) {


if (req.isAuthenticated()) return next();
res.redirect("/login");
}

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


app.listen(port, function () {
console.log("Server Has Started!");
});

Filename: home.ejs

<h1>This is home page</h1>

<li><a href="/register">Sign up!!</a></li>


<li><a href="/login">Login</a></li>
<li><a href="/logout">Logout</a></li>

Filename: login.ejs
<h1>login</h1>

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


<input type="text" name="username"
placeholder="username">
<input type="password" name="password"
placeholder="password">
<button>login</button>
</form>

<h1>This is home page</h1>


<li><a href="/register">Sign up!!</a></li>

<li><a href="/login">Login</a></li>
<li><a href="/logout">Logout</a></li>

Filename: register.ejs
<h1> Sign up form </h1>

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


<input type="text" name="username"
placeholder="username">
<input type="password" name="password"
placeholder="password">
<button>Submit</button>
</form>

<h1>This is home page</h1>

<li><a href="/register">Sign up!!</a></li>


<li><a href="/login">Login</a></li>
<li><a href="/logout">Logout</a></li>
Filename: secret.ejs
<h1>This is secrect page</h1>

<img src="https://encrypted-tbn0.gstatic.com/
images?q=tbn%3AANd9GcQ5PdxXFw4u3BRG4166i7Nbk
x0VyGGNt0hWc3loNeD7GIL4nbbo&usqp=CAU">

<h1>This is home page</h1>

<li><a href="/register">Sign up!!</a></li>


<li><a href="/login">Login</a></li>
<li><a href="/logout">Logout</a></li>
OUTPUT:
1)

2)

3)

4)
RESULT:
CREATE AND DEPLOY A VIRTUAL MACHINE USING AVIRTUAL BOX THAT CAN BE
ACCESSED FROM THE HOST COMPUTER USING SSH

EX.NO:

DATE:

AIM:

ALGORITHM:
PROCEDURE:
RESULT:
CREATE A DOCKER CONTAINER THAT WILL DEPLOY ANODEJS PING SERVER
USING THE NODEJS IMAGE

Ex.NO:

DATE:

AIM:

ALGORITHM:
PROGRAM:
npminit -y
npmi -s express
echo >app.js
const express = require(‘express’);
const app = express();app.get(‘/’, function(req,res){
res.send(“Hi There”);
});const port = 3000;
app.listen(port, function () {
console.log(‘Listening on port 3000!’)
})
echo >Dockerfile
FROM node:12-alpine
RUN mkdir -p /home/node/app/node_modules&&chown -R node:node /home/node/app
WORKDIR /home/node/app
COPY package*.json ./USER nodeRUNnpm install
COPY --chown=node:node . .
EXPOSE 3000
CMD [ "node", "app.js" ]
FROM node:12-alpine
RUN mkdir -p /home/node/app/node_modules&&chown -R node:node /home/node/app
WORKDIR /home/node/app
COPY package*.json ./
USER node
RUN npm install
COPY --chown=node:node . .
EXPOSE 3000
CMD [ "node", "app.js" ]docker build -t MCA 005/ sample .docker run — name picture -p
3000:3000 -d MCA 005/ sample
OUTPUT:

RESULT:

You might also like