0% found this document useful (0 votes)

22 views30 pages

Ip Lab Manual - Final - 2024

Uploaded by

aishwarychaurasia9

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

22 views30 pages

Ip Lab Manual - Final - 2024

Uploaded by

aishwarychaurasia9

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 30

CLASS: TE SEM: V

COURSE CODE: ITL 501 COURSE NAME: IP Lab

AY: 2024-25

Lab Objectives:
The Lab aims:
1. To orient students to HTML for making webpages
2. To expose students to CSS for formatting web pages
3. To expose students to developing responsive layout
4. To expose students to JavaScript to make web pages interactive
5. To orient students to React for developing front end applications
6. To orient students to Node.js for developing backend applications

Bloom’s Taxonomy Levels:

1 = Remembering, 2= Understanding, 3 = Applying, 4 = Analyzing, 5 =
Evaluating, 6 = Creating
LAB OUTCOMES:
Sr. No Lab Outcome Cognitive levels of
attainment as per
Bloom’s
Taxonomy
ITL501.1 Identify and apply the appropriate HTML tags
to develop a webpage. L1, L2,L3,L4
ITL501.2 Identify and apply the appropriate CSS tags to
format data on webpage L1, L2,L3,L4
ITL501.3 Construct responsive websites using Bootstrap L1,
L2,L3,L4,L5,L6
ITL501.4 Use JavaScript to develop interactive web L1,
pages. L2,L3,L4,L5,L6
ITL501.5 Construct front end applications using React L1,
L2,L3,L4,L5,L6
ITL501.6 Construct back end applications using L1,
Node.js/Express L2,L3,L4,L5,L6

TE (IT) SEM-V
Subject: IP Lab
Course Code: ITL501
List of Practical’s
BLOOM’S LAB
Sr. NAME OF THE PRACTICAL NO : OUTCOME
No. LEVEL

Design / Create static website including Elements, L1, L2,L3,L4

Attributes, Head, Body, Hyperlink, Formatting,
1. Images, Tables, List, Frames, Forms, Multimedia. LO1

Design / Create webpages including CSS 3 Syntax, L1, L2,L3,L4

2. Inclusion, Color, Background, LO2
Fonts, Tables, lists,CSS3 selectors.
Design / create website using Bootstrap including L1, L2,L3,L4
3. , Forms, Button, Navbar, container. ,L5,L6 LO3
4. Write a JavaScript program to validate L1,L2,L3,L4 LO4
Student Registration Form .
L1, L2,L3,L4
Write a JS program to ES6 features in
5. ,L5,L6 LO4
functions using map,reduce,filter.

L1, L2,L3,L4
Write JS program to demonstrate Promise
6. ,L5,L6 LO4
and async / await

Implement of React and display L1, L2,L3,L4

7. ““Welcome to TEIT” ,L5,L6 LO5

8. Write a program to demonstrate Class and L1,L2,L3,L4 LO5

functional Component.
9. Write a program to demonstrate State and Props. L1,L2,L3,L4 LO5
To Implement Node js using CRUD operations in L1, L2, L3,L4
10 REST API. ,L5,L6 LO6

Implement React js ,Nodejs ,Express js & MongoDB L1, L2,L3,L4

11 using Fetch Data from Database. ,L5,L6 LO6

PRACTICAL NO : -01
Objective : Design / Create static website including Elements, Attributes, Hyperlink, Formatting, Images, Tables,
List, Frames, Forms, Multimedia.

<!DOCTYPE>
<HTML>
<HEAD><title> Student Registration Form </title>
<BODY>
<FORM>
<pre>
<h1> Student Registration Form </h1>
Website: <input type="url" name="website" required pattern="https?://.
+">
1 Select the color<input type="color" value="#b97a57"> 2 date <input
type="date" value="2011-06-08">
3 select the date &Time <input type="datetime" value="2011-06-09 T20:35:34.32">
4 Select the date time<input type="datetime-local" value="2011-06-09 T22:41">
5 E-mail Address<input type="email" value="[email protected]"> 6 <input
type="month" value="2011-06">
7 <input type="number" value="4">
8 <input type="range" value="15" min="2" max="10"> 9
<input type="search" value="[Any search text]">
10 <input type="tel" value="[Any numeric value]"> 11
<input type="time" value="22:38">
12 <input type="url" value="http://robertnyman.com"> 13 <input
type="week">
14 <input type="file">
<input type="submit" value="Login"> <input type="reset"
value="reset"> <input type="button" value="cancel">
</body>
<html>

4
Output :- To Design Student registration form using HTML.

5
PRACTICAL NO: -02

Objective: Design / Create webpages including CSS 3 Syntax, Inclusion, Color,

Background, Fonts, Tables, lists, CSS3 selectors.

1] 1.html

6
2] frametarget.html

3] main.html

7
4] Sunset.jpg

Outcome : To implemented type of CSS Inline,Internal,External.

8
PRACTICAL NO : -03

Objective: Design website using Bootstrap in Forms, Button, Navbar, container

1] bootstrap.html

<section class="vh-100 bg-image" style="background-image:

url('https://mdbootstrap.com/img/Photos/new-
templates/searchbox/img4.jpg');">
<div class="mask d-flex align-items-center h-100 gradient-custom-3">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-9 col-lg-7 col-xl-6">
<div class="card" style="border-radius: 15px;">
<div class="card-body p-5">
<h2 class="text-uppercase text-center mb-5">Create an account</h2>
<form>
<div class="form-outline mb-4">
<input type="text" id="form3Example1cg" class="formcontrol form-control- lg" />
<label class="form-label" for="form3Example1cg">Your
Name</label>
</div>
<div class="form-outline mb-4">
<input type="email" id="form3Example3cg"
class="form-control form-control-lg" />
<label class="form-label" for="form3Example3cg">Your
Email</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="form3Example4cg"
class="form-control form-control-lg" />
<label class="form-label"
for="form3Example4cg">Password</label>
9
</div>
<div class="form-outline mb-4">
<input type="password" id="form3Example4cdg"
class="form-control form-control-lg" />
<label class="form-label" for="form3Example4cdg">Repeat your
password</label>

</div>
<div class="form-check d-flex justify-content-center mb-5">
<input
class="form-check-input me-2"
type="checkbox"
value=""
id="form2Example3cg"
/>
<label class="form-check-label"
for="form2Example3g">
I agree all statements in <a href="#!"
class="text-body"><u>Terms of service</u></a>
</label>
</div>
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-success btnblock btn-lg gradient-custom- 4 text-
body">Register</button>
</div>
<p class="text-center text-muted mt-5 mb-0">Have
already an account? <a href="#!" class="fw-bold text-body"><u>Login
here</u></a></p>
</form>
</div>
</div>

10
</div></div></div></div>
</section>

2] new 1.css

.gradient-custom-3 {
/* fallback for old browsers */
background: #84fab0;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(132, 250, 176,
0.5), rgba(143, 211, 244, 0.5));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+
*/
background: linear-gradient(to right, rgba(132, 250, 176, 0.5),
rgba(143, 211, 244, 0.5))
}
.gradient-custom-4 {
/* fallback for old browsers */
background: #84fab0;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(132, 250, 176,

1), rgba(143, 211, 244, 1));

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+
*/
background: linear-gradient(to right, rgba(132, 250, 176, 1),
rgba(143, 211, 244, 1))
}

11
Output :-

Outcome : To Design website using Bootstrap

12
PRACTICAL NO : -04

Objective : Write a JavaScript program to validate Student Registration Form .

1] student.html

Input :-

<html>
<head>
<title>Student Registation form</title>
<Script language="JavaScript">
function Validate()
{
if(document.f1.fname.value==" ")
{
alert("Please Enter the first Name");
return false;}

if(document.f1.lname.value==" ")
{
alert("Please Enter the last Name");
return false;
}
if(document.f1.gender[0].checked==" " &&
document.f1.gender[1].checked==" ")
{
alert("Please Select the gender");
return false;
}
if(document.f1.DD.value==" " || document.f1.MM.value== " " ||
document.f1.YYYY.value==" ")
{
alert("Please Select the date");
13
return false;
}
if(document.f1.addr.value==" ")
{
alert("Please Enter the address");
return false;
}
if(document.f1.eid.value.indexOf('@')==-1)
{

alert("Please Enter valid email id");

return false;
}
if(document.f1.aboutu.value==" ")
{
alert("Please Enter information about u."); return
false;
}
if( document.f1.Hobby[0].checked==" " && document.f1.Hobby[1].checked==" " &&
document.f1.Hobby[2].checked==" " && document.f1.Hobby[3].checked==" ")
{
alert("Please select any Hobby");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="f1" action="submitform.html" method="get">
<center><font size=7 ><u>Student Registation form</u></font></center>
<br><br><br>
14
<font size=5>

1. &nbsp&nbsp&nbsp First Name &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp :-

&nbsp&nbsp
<input type="Text" name="fname" size=30 value=" "><br><br>

2. &nbsp&nbsp&nbsp Last Name &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp :-

&nbsp&nbsp
<input type="Text" name="lname" size=30 value=" "><br><br>

3. &nbsp&nbsp&nbsp Gender
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
:-
&nbsp&nbsp
<input type="radio" name="gender" > Male<br>
nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
nbsp
<input type="radio" name="gender" > Female<br><br>

4. &nbsp&nbsp&nbsp Date of Birth&nbsp&nbsp&nbsp&nbsp&nbsp:-

&nbsp&nbsp
<input type=”date” name=”dt”>
<br><br>

5. &nbsp&nbsp&nbsp Address
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
:-
&nbsp&nbsp
<input type="Text" name="addr" size=30 value=" "><br><br>

6. &nbsp&nbsp&nbsp Email
nbsp&nbsp:- &nbsp&nbsp
<input type="Text" name="eid" size=30 value=" "><br><br>

7. &nbsp&nbsp&nbsp About Yourself :- &nbsp&nbsp <br>

8. Hobbies
<input type="Checkbox" name="Hobby" value=" "> Reading<br>
15
<input type="Checkbox" name="Hobby" value=" "> Dancing<br>
<input type="Checkbox" name="Hobby" value=" "> Singing<br>
<input type="Checkbox" name="Hobby" value=" "> Sports<br>
<input type="Submit" name="submit" value=" Submit " onClick="return
Validate()">
<input type="Reset" name="reset" value=" Reset ">
<input type="Button" name="cancel" value=" Cancel ">
</font>
</form>
</body>
</html>

16
Output :-

2] submitform.html
Input :-

Outcome :To develop JavaScript program to validate Student Registration Form.

17
PRACTICAL NO : -05

Objective : Write a JS program to ES6 features in functions using map,reduce,filter.

map() method: It applies a given function on all the elements of the array and returns the updated array.

const numbers = [1, 2, 3, 4];

const doubled = numbers.map(item => item * 2);
console.log(doubled);

output
// [2, 4, 6, 8]

Filter
The filter() method takes each element in an array and it applies a conditional statement against it. If
this conditional returns true, the element gets pushed to the output array. If the condition returns false,
the element does not get pushed to the output array.
const numbers = [1, 2, 3, 4];
const evens = numbers.filter(item => item % 2 === 0);
console.log(evens);
output
// [2, 4]

Reduce
The reduce() method reduces an array of values down to just one value. To get the output value, it runs
a reducer function on each element of the array.

const numbers = [1, 2, 3, 4];

const sum = numbers.reduce(function (result, item) {
return result + item;
}, 0);
console.log(sum);
output:
// 10

Outcome: Thus we have develop ES6 features in functions using map, reduce, filter.

18
PRACTICAL NO : -06

Objective : Write JS program to demonstrate Promise and async / await

async keyword with a function to represent that the function is an asynchronous function. The async
function returns a promise.

The syntax of async function is:

async function name(parameter1, parameter2, ...paramaterN) {

// statements
}
let result = await promise;
// a promise
let promise = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('Promise resolved')}, 4000);
});

// async function
async function asyncFunc() {

// wait until the promise resolves

let result = await promise;

console.log(result);
console.log('hello');
}

// calling the async function

asyncFunc();
Output

Promise resolved
hello

Outcome: Thus we have implemented Promises and async/await in Advanced JavaScript

19
Practical No: 7
Objective: Implement React js in “Hello World”

App.js

import React from 'react';

import './App.css';

function App() {
return (
<h1> Hello World! </h1>
);
}

export default App;

Step to run the application: Enter the following command to run the application.

npm start

Output: You will see the following output in your browser.

Outcome : Thus we have implemented React js to print “Hello World”

20
PRACTICAL NO: -08

Objective: Write a program to demonstrate functional Component and class component

import React, { useState } from "react";

const FunctionalComponent = () => {

const [count, setCount] = useState(0);

const increase = () => {

setCount(count + 1);
}

return (
<div style={{ margin: '50px' }}>
<h1>Welcome to Geeks for Geeks </h1>
<h3>Counter App using Functional Component : </h3>
<h2>{count}</h2>
<button onClick={increase}>Add</button>
</div>
)
}

export default FunctionalComponent;

output:

21
Practical No: 9

Objective: Write a program to implemented State and Props.

What are props?

Props is short for properties and they are used to pass data between React components. React’s data
flow between components is uni-directional (from parent to child only).

How do you pass data with props?

An example of how data can be passed by using props:

Ex.
class ParentComponent extends Component {
render() {
return (
<ChildComponent name="First Child" />
);
}
}

const ChildComponent = (props) => {

return <p>{props.name}</p>;
};

Firstly, we need to define/get some data from the parent component and assign it to a child
component’s “prop” attribute.

<ChildComponent name="First Child" />

“Name” is a defined prop here and contains text data. Then we can pass data with props like we’re
giving an argument to a function:

const ChildComponent = (props) => {

// statements
};
And finally, we use dot notation to access the prop data and render it:

return <p>{props.name}</p>;

State:
React has another special built-in object called state, which allows components to create and manage
their own data. So unlike props, components cannot pass data with state, but they can create and
manage it internally.

Here is an example showing how to use state:

class Test extends React.Component {

constructor() {
this.state = {
id: 1,
name: "test"
22
};
}

render() {
return (
<div>
<p>{this.state.id}</p>
<p>{this.state.name}</p>
</div>
);
}
}
How do you update a component’s state?
State should not be modified directly, but it can be modified with a special method called setState( ).

this.state.id = “2020”; // wrong

this.setState({ // correct
id: "2020"
});

npm init –y
{
"name": "EMS", // The name of your project
"version": "0.92.12", // The version of your project
"description": " The expense Mgmt System. , // The description of your project
"main": "index.js" // entry point
"license": "MIT" // The license of your project
}
app.js

var http = require('http');

//create a server object:

http.createServer(function (req, res) {

res.write('Hello World!'); //write a response to the client
res.end (); //end the response
}). listen(5000); //the server object listens on port 8080

// Console will print the message

console.log ('Server running at 5000');

23
Step 5
Now, the Server is running. Here, we will create the server running on 5000 ports for this example. Just
type localhost:5000 in your browser address bar and press Enter. See the below screenshot for how to
run this example.

output

Outcome: Thus we have implemented state and props .

24
PRACTICAL NO: -10

Objective: To Fetch data from a MongoDB database using Node.js

Main.js
const express = require('express');
const mongoose = require('mongoose');
const session = require('express-session');
require('dotenv').config();
const app = express();
const PORT = process.env.PORT || 5500;

// Middleware
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.use(
session({
secret: 'complex-secret-key',
resave: false,
saveUninitialized: true,
})
);
mongoose
.connect(process.env.DB_URI)
.then(() => console.log('Database is Connected sucessfully'))
.catch((error) => console.error(error));

// Set template engine

app.set('view engine', 'ejs');

// Routes
const routes = require('./routes/routes');
app.use('/', routes);

// Error handling middleware

app.use((err, req, res, next) => {
console.error(err.stack);
res.status(500).send('Internal Server Error');
});

//logic for image icon

app.use(express.static('uploads'));

// Start the server

app.listen(PORT, () => {
console.log(`Server is Running On PORT ${PORT}`);
});
25
Output :

26
Outcome: Thus we have implemented Fetch data from a MongoDB database using Node.js

27
PRACTICAL NO : -12

Objective : Nodejs, express js in CRUD REST API ( GET , POST , PUT, DELETE) operation.

server.js
const express = require('express');
const colors = require('colors');
const cors = require('cors');
const app = express();
const userModel = require('./models/userModel');
const connectDB = require('./db');
const PORT = 5000;

app.use(cors());
app.use(express.json());

connectDB();

// API

app.get('/api/student', async (req, res) => {

const userdata = await userModel.find();
res.json(userdata);
res.json(err);
});

//post request
app.post('/api/student_post', async (req, res) => {
const { name, email, password } = req.body;
const userData = await userModel.create({ name, email, password });
res.status(201).json(userData);
});

//Update Request
app.put('/api/student_update/:id', async (req, res) => {
const id = req.params.id;
const body = req.body;
const updateData = await userModel.findByIdAndUpdate({ _id: id }, body);
res.json(updateData);
});

// Delete Request

app.delete('/api/student_delete', async (req, res) => {

const id = req.params.id;
const result = await userModel.deleteOne({ _id: id });
res.status(200).json(result);
});

28
app.listen(PORT, () => {
console.log(`Server is Running on PORT ${PORT}`.bgYellow.bold);
});

const mongoose = require("mongoose");

const userSchema = new mongoose.Schema({

name: {
type: String,
required: true,
},
email: {
type: String,
required: true,
unique: true,
},
phone: {
type: String,
required: true,
},
image: {
type: String,
required: true,
},
});

const User = mongoose.model("User", userSchema);

module.exports = User;

db.js

const mongoose = require('mongoose');

const connectDB = () => {
mongoose.connect('mongodb://127.0.0.1:27017/employee');
console.log('Database is Connected Successfully');
};

module.exports = connectDB;

29
Outcome: Thus we have implemented to perform CRUD operations.

Web Design Record Final
No ratings yet
Web Design Record Final
33 pages
Preeti Kumari 22SCSE1012771 Sec-37 (P2)
No ratings yet
Preeti Kumari 22SCSE1012771 Sec-37 (P2)
40 pages
User Interface Design LAB MANUAL (23CSE113) CSE-1 YEAR II SEMESTER (2023-2024) Dontha Madhusudhana Rao
No ratings yet
User Interface Design LAB MANUAL (23CSE113) CSE-1 YEAR II SEMESTER (2023-2024) Dontha Madhusudhana Rao
53 pages
CS8661-IP - RECORD 2024-2025 VTH SEM
No ratings yet
CS8661-IP - RECORD 2024-2025 VTH SEM
60 pages
Node Js React Js Django
No ratings yet
Node Js React Js Django
37 pages
Lab Manual Web Desigining 3rd Sem-1
No ratings yet
Lab Manual Web Desigining 3rd Sem-1
50 pages
Node JS
No ratings yet
Node JS
58 pages
Awp Lab Manual
No ratings yet
Awp Lab Manual
67 pages
WD Lab File: Mangalmay Institute of Engineering & Technology
No ratings yet
WD Lab File: Mangalmay Institute of Engineering & Technology
50 pages
Anurag Final WD File
No ratings yet
Anurag Final WD File
46 pages
SR - No. Experiment Page No. Date Marks Signature From To
No ratings yet
SR - No. Experiment Page No. Date Marks Signature From To
119 pages
Mukul Web Tech Lab File
No ratings yet
Mukul Web Tech Lab File
16 pages
Lab 4
No ratings yet
Lab 4
40 pages
Record FSD
No ratings yet
Record FSD
30 pages
SA1 Variable Operators and Control Structures
No ratings yet
SA1 Variable Operators and Control Structures
29 pages
Information Technology Management: Web Based Programming 313
No ratings yet
Information Technology Management: Web Based Programming 313
55 pages
Web Technology P1 PDF
No ratings yet
Web Technology P1 PDF
40 pages
Web Design Record
No ratings yet
Web Design Record
19 pages
PHP Record
No ratings yet
PHP Record
60 pages
WT LabFile
No ratings yet
WT LabFile
47 pages
Home Page: Top - HTML
No ratings yet
Home Page: Top - HTML
21 pages
Weblab
No ratings yet
Weblab
17 pages
WT Practical File
No ratings yet
WT Practical File
26 pages
Lab Manual
No ratings yet
Lab Manual
66 pages
WP QB PYQs
No ratings yet
WP QB PYQs
16 pages
Web Tech
No ratings yet
Web Tech
55 pages
Internship Report Jaideep Full
No ratings yet
Internship Report Jaideep Full
12 pages
SOC 2 (Lab Manual)
No ratings yet
SOC 2 (Lab Manual)
58 pages
Syllabus WT
No ratings yet
Syllabus WT
7 pages
Web Developement Updated
No ratings yet
Web Developement Updated
41 pages
Yash Java Css HTML
No ratings yet
Yash Java Css HTML
15 pages
File Name:-: 1) Design Student Signup Form Using HTML, Javascript, Html5 & Css
No ratings yet
File Name:-: 1) Design Student Signup Form Using HTML, Javascript, Html5 & Css
13 pages
Experiment 1
No ratings yet
Experiment 1
20 pages
Web - Tech Record
No ratings yet
Web - Tech Record
25 pages
LAB Manual Frontend
No ratings yet
LAB Manual Frontend
32 pages
CMT-CS Course Outline
No ratings yet
CMT-CS Course Outline
9 pages
HTML & CSS
No ratings yet
HTML & CSS
6 pages
HTML and Css Exercise
No ratings yet
HTML and Css Exercise
3 pages
Manual of Web Programming
No ratings yet
Manual of Web Programming
28 pages
FS Lab Record
No ratings yet
FS Lab Record
15 pages
Web Tech MID Term Exam FA23 - Solution
No ratings yet
Web Tech MID Term Exam FA23 - Solution
5 pages
CSC336 Web Technologies LAB03
No ratings yet
CSC336 Web Technologies LAB03
10 pages
Lab 01
No ratings yet
Lab 01
6 pages
Magazine Burst - Dave Lombardo Number
No ratings yet
Magazine Burst - Dave Lombardo Number
174 pages
Emat Web Tech File
No ratings yet
Emat Web Tech File
3 pages
HCI Lab 4 SIgn Up Page
No ratings yet
HCI Lab 4 SIgn Up Page
8 pages
Bài Tập HTML Css
No ratings yet
Bài Tập HTML Css
7 pages
Web Assignmentttt
No ratings yet
Web Assignmentttt
18 pages
Sample Program
No ratings yet
Sample Program
5 pages
WC PRACTICALS 1 To 6
No ratings yet
WC PRACTICALS 1 To 6
8 pages
Web Technologies Lab CSP352: B.Tech 3 Year Semester: 6 SESSION: 2022-2023
No ratings yet
Web Technologies Lab CSP352: B.Tech 3 Year Semester: 6 SESSION: 2022-2023
15 pages
WT Final 2021
No ratings yet
WT Final 2021
4 pages
Web Technology
No ratings yet
Web Technology
5 pages
WEB ESSENTIAL LAB New
No ratings yet
WEB ESSENTIAL LAB New
14 pages
Create Interesting Visualizations in Web Intelligence Report Using HTML Components
No ratings yet
Create Interesting Visualizations in Web Intelligence Report Using HTML Components
9 pages
Webdesign
No ratings yet
Webdesign
16 pages
One Columns Css File
No ratings yet
One Columns Css File
29 pages
Anu 6
No ratings yet
Anu 6
2 pages
Web Designing 1
No ratings yet
Web Designing 1
3 pages
Web Tech Practical File
No ratings yet
Web Tech Practical File
18 pages
WT Practical File
No ratings yet
WT Practical File
21 pages
Building Effective Landing Pages
No ratings yet
Building Effective Landing Pages
7 pages
Web Eng. Lab2 PDF
No ratings yet
Web Eng. Lab2 PDF
7 pages
Download
No ratings yet
Download
5 pages
Laporan Analisa Sintesa Igd
No ratings yet
Laporan Analisa Sintesa Igd
119 pages
Campus Nexus
No ratings yet
Campus Nexus
16 pages
Chapter 1 Web
No ratings yet
Chapter 1 Web
8 pages
Introduction To Web Techniques
No ratings yet
Introduction To Web Techniques
11 pages
Ankur HTML File
No ratings yet
Ankur HTML File
36 pages
Lecture 1 - Introduction
No ratings yet
Lecture 1 - Introduction
62 pages
Web Services Based On SOAP and REST Principles: Snehal Mumbaikar, Puja Padiya
No ratings yet
Web Services Based On SOAP and REST Principles: Snehal Mumbaikar, Puja Padiya
4 pages
PHP Notes Abm 12
No ratings yet
PHP Notes Abm 12
12 pages
Wiki Software Content Management System Blog Software
No ratings yet
Wiki Software Content Management System Blog Software
5 pages
YT - Formatos Disponibles
No ratings yet
YT - Formatos Disponibles
26 pages
EE502 W5 Programming
No ratings yet
EE502 W5 Programming
7 pages
WWW Icodelance Com Freelancers
No ratings yet
WWW Icodelance Com Freelancers
4 pages
VR Profile
No ratings yet
VR Profile
23 pages
Day 1.5 John Johnston PDF
No ratings yet
Day 1.5 John Johnston PDF
22 pages
Hexagonal Programming
No ratings yet
Hexagonal Programming
1 page
HTML and Web Development Notes
No ratings yet
HTML and Web Development Notes
3 pages
Summary Report: Bandwidth and Applications
No ratings yet
Summary Report: Bandwidth and Applications
6 pages
Drop Down List Example ASP
No ratings yet
Drop Down List Example ASP
4 pages
Build A Python Web Server With Flask - Add A New Page - Raspberry Pi Projects-13
No ratings yet
Build A Python Web Server With Flask - Add A New Page - Raspberry Pi Projects-13
3 pages
All HTML Tags List With Example
No ratings yet
All HTML Tags List With Example
10 pages
Retake Practical Quiz (Page 3 of 4)
No ratings yet
Retake Practical Quiz (Page 3 of 4)
9 pages
Reading and Writing Skills Reviewer
No ratings yet
Reading and Writing Skills Reviewer
18 pages
Devoir N° 1 - AlloSchool
No ratings yet
Devoir N° 1 - AlloSchool
2 pages
SYPNOSIS
No ratings yet
SYPNOSIS
17 pages
HTML Brochure English
No ratings yet
HTML Brochure English
2 pages

Ip Lab Manual - Final - 2024

Uploaded by

Ip Lab Manual - Final - 2024

Uploaded by

CLASS: TE SEM: V

COURSE CODE: ITL 501 COURSE NAME: IP Lab

Bloom’s Taxonomy Levels:

Design / Create static website including Elements, L1, L2,L3,L4

Design / Create webpages including CSS 3 Syntax, L1, L2,L3,L4

Implement of React and display L1, L2,L3,L4

8. Write a program to demonstrate Class and L1,L2,L3,L4 LO5

Implement React js ,Nodejs ,Express js & MongoDB L1, L2,L3,L4

Objective: Design / Create webpages including CSS 3 Syntax, Inclusion, Color,

Outcome : To implemented type of CSS Inline,Internal,External.

Objective: Design website using Bootstrap in Forms, Button, Navbar, container

<section class="vh-100 bg-image" style="background-image:

1), rgba(143, 211, 244, 1));

Outcome : To Design website using Bootstrap

Objective : Write a JavaScript program to validate Student Registration Form .

alert("Please Enter valid email id");

1. &nbsp&nbsp&nbsp First Name &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp :-

2. &nbsp&nbsp&nbsp Last Name &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp :-

4. &nbsp&nbsp&nbsp Date of Birth&nbsp&nbsp&nbsp&nbsp&nbsp:-

7. &nbsp&nbsp&nbsp About Yourself :- &nbsp&nbsp <br>

Outcome :To develop JavaScript program to validate Student Registration Form.

Objective : Write a JS program to ES6 features in functions using map,reduce,filter.

const numbers = [1, 2, 3, 4];

const numbers = [1, 2, 3, 4];

Objective : Write JS program to demonstrate Promise and async / await

The syntax of async function is:

async function name(parameter1, parameter2, ...paramaterN) {

// wait until the promise resolves

// calling the async function

Outcome: Thus we have implemented Promises and async/await in Advanced JavaScript

import React from 'react';

export default App;

Output: You will see the following output in your browser.

Outcome : Thus we have implemented React js to print “Hello World”

Objective: Write a program to demonstrate functional Component and class component

import React, { useState } from "react";

const FunctionalComponent = () => {

const increase = () => {

export default FunctionalComponent;

Objective: Write a program to implemented State and Props.

What are props?

How do you pass data with props?

const ChildComponent = (props) => {

<ChildComponent name="First Child" />

const ChildComponent = (props) => {

Here is an example showing how to use state:

class Test extends React.Component {

this.state.id = “2020”; // wrong

var http = require('http');

http.createServer(function (req, res) {

// Console will print the message

console.log ('Server running at 5000');

Outcome: Thus we have implemented state and props .

Objective: To Fetch data from a MongoDB database using Node.js

// Set template engine

// Error handling middleware

//logic for image icon

// Start the server

app.get('/api/student', async (req, res) => {

app.delete('/api/student_delete', async (req, res) => {

const mongoose = require("mongoose");

const userSchema = new mongoose.Schema({

const User = mongoose.model("User", userSchema);

const mongoose = require('mongoose');

You might also like