Scribd
Upload
10 views

FullStack_labmanual

Uploaded by

Durga Singh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

FullStack_labmanual

Uploaded by

Durga Singh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 23

Full Stack Developer – Practical (1010206701) 2328020603042

Practical: 1
Aim: Develop a simple web page using the latest HTML5 and CSS3

INPUT:
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Web Page</title>
<link rel="stylesheet" href="./Practical_1.css">
</head>
<body>
<div class="container">
<div class="profile">
<h1>Profile Page</h1>
<div class="img">
<img src="./Media/profile_p1.avif" alt="" />
</div>
<div class="contact">
<h2><i>Dhruvi chauhan</i></h2>
<span><a href="">[email protected]</a> | <a
href="">https://github.com/dhruvi</a> </span>
</div>
</div>
<hr />
<div class="content">
<h3>Details</h3>
<p><span class="bold">ENO:</span> 2328020603028</p>
<p><span class="bold">MNO:</span> 123456789</p>
<p><span class="bold">Email:</span> [email protected]</p>
</div>

<div class="content">
<h3>Education</h3>
<p><span class="bold">University:</span> Institute of Higher Learning</p>
<p><span class="bold">Degree:</span> Bachelor of Science (B.Sc.)</p>
<p><span class="bold">Major:</span> Computer Science</p>
</div>

<div class="content">

BMCET 1
Full Stack Developer – Practical (1010206701) 2328020603042

<h3>Other Information</h3>
<p><span class="bold">Skills:</span> Programming, Web Development</p>
<p><span class="bold">Interests:</span> Machine Learning, Artificial Intelligence</p>
<p><span class="bold">Website:</span> (Link to your website, if any)</p>
</div>
</div>
</body>
</html>

CSS

*{
margin: 0;
padding: 0;
}
.container{
padding: 2rem 5rem 5rem 5rem;
width: 60%;
background-color: bisque;
margin: 0 auto;
}

.contact{
margin: 1rem 1rem;
}
.content{
margin-top: 1rem;
}

h1{
margin: 1rem 0rem;
}
.content h3{
text-decoration: underline;
margin-bottom: 0.5rem;
}
.bold{
font-weight: bold;
}
.profile{
text-align-last: center;
}
.img{
margin: 0 auto;
height: 200px;
width: 200px;

BMCET 2
Full Stack Developer – Practical (1010206701) 2328020603042

}
.img img{
width: 100%;
border-radius: 50%;
}

OUTPUT:

BMCET 3
Full Stack Developer – Practical (1010206701) 2328020603042

Practical: 2
Aim: Demonstrate DOM, how to manipulate DOM with Javascript

INPUT:
HTML

<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation Examples</title>
<style>
#draggable {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
}

.active {
background-color: red;
}
</style>
</head>
<body>
<div id="container">

BMCET 4
Full Stack Developer – Practical (1010206701) 2328020603042

<p id="text">Hello, World!</p>


<button id="changeText">Change Text</button>
<button id="changeColor">Change Color</button>
<button id="addParagraph">Add Paragraph</button>
<button id="removeParagraph">Remove Paragraph</button>

<h2>Generate Table Using Javascript</h2>


<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>

</div>

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

CSS

// Get references to DOM elements


const textElement = document.getElementById('text');
const changeTextButton = document.getElementById('changeText');
const changeColorButton = document.getElementById('changeColor');
const addParagraphButton = document.getElementById('addParagraph');
const removeParagraphButton = document.getElementById('removeParagraph');
const tableBody = document.getElementById('tableBody');
const draggableElement = document.getElementById('draggable');
const animatedElement = document.getElementById('animatedElement');

changeTextButton.addEventListener('click', () => {
textElement.textContent = 'This text has been changed!';
});

changeColorButton.addEventListener('click', () => {
textElement.style.color = 'blue';
});

addParagraphButton.addEventListener('click', () => {

BMCET 5
Full Stack Developer – Practical (1010206701) 2328020603042

const newParagraph = document.createElement('p');


newParagraph.textContent = 'This is a new paragraph.';
document.getElementById('container').appendChild(newParagraph);
});

removeParagraphButton.addEventListener('click', () => {
const lastParagraph = document.getElementById('container').lastElementChild;
if (lastParagraph) {
document.getElementById('container').removeChild(lastParagraph);
}
});

function createTable() {
for (let i = 0; i < 5; i++) {
const row = document.createElement('tr');
for (let j = 0; j < 3; j++) {
const cell = document.createElement('td');
cell.textContent = `Cell ${i}, ${j}`;
row.appendChild(cell);
}
tableBody.appendChild(row);
}
}
createTable();

const elementToToggle = document.getElementById('text');


elementToToggle.addEventListener('click', () => {
elementToToggle.classList.toggle('active');
});

OUTPUT:

BMCET 6
Full Stack Developer – Practical (1010206701) 2328020603042

BMCET 7
Full Stack Developer – Practical (1010206701) 2328020603042

BMCET 8
Full Stack Developer – Practical (1010206701) 2328020603042

Practical: 3
Aim: Demonstrate open-source document database, and NoSQL database
aka MongoDB.

INPUT:

BMCET 9
Full Stack Developer – Practical (1010206701) 2328020603042

Practical: 4
Aim: Demonstrate establishing connections with a MongoDB database

INPUT:
import mongoose, { Schema } from "mongoose";

main().then(()=>{ console.log("Connection Successfully")})


.catch(err => console.log(err));

async function main() {


await mongoose.connect('mongodb://127.0.0.1:27017/test');
}

const userSchema = new Schema({


name: String,
email: String,
})
const User = mongoose.model("User", userSchema);

const addUser = async()=>{


let newUser = new User({
name:"xyz",
email:"[email protected]"
})
await newUser.save();
console.log("New User Created");

}
addUser();

BMCET 10
Full Stack Developer – Practical (1010206701) 2328020603042

OUTPUT:

BMCET 11
Full Stack Developer – Practical (1010206701) 2328020603042

BMCET 12
Full Stack Developer – Practical (1010206701) 2328020603042

Practical: 5
Aim: Perform the normal operations of reading data from a database as
well as inserting, deleting, and updating records in a MongoDB database.

INPUT:
---------
Create Operation
$ db.collectionName.insertOne({document})

Read Operation
Command:
$ db.collectionName.find() -- fetch all document from database

BMCET 13
Full Stack Developer – Practical (1010206701) 2328020603042

Command:
$ db.collectionName.find({ key:value}) -- find docment using key value paire

---------
Update
$ db.collectionName.updateOne({key:value},{$set:newValue})

Command:

BMCET 14
Full Stack Developer – Practical (1010206701) 2328020603042

$ db.deleteOne({key:value}) -- delete based on key value

BMCET 15
Full Stack Developer – Practical (1010206701) 2328020603042

Practical: 6
Aim: Develop program to execute CRUD - write queries to create, read,
update and delete operations using NodeJS and MongoDB

INPUT:
import mongoose, { Schema } from "mongoose";

main().then(()=>{ console.log("Connection Successfully")})


.catch(err => console.log(err));

async function main() {


await mongoose.connect('mongodb://127.0.0.1:27017/test');
}

const userSchema = new Schema({


name: String,
email: String,
})
const User = mongoose.model("User", userSchema);

// Insert One Document


async function insertOneUser() {
const user = new User({
name: 'John Doe',
email: '[email protected]'
});

try {
const result = await user.save();
console.log('Inserted One User:', result);
console.log("\n");
} catch (err) {
console.error(err);
}
}

// Insert Many Documents


async function insertManyUsers() {
const users = [
{ name: 'Jane Smith', email: '[email protected]' },
{ name: 'Mike Johnson', email: '[email protected]' }
];

BMCET 16
Full Stack Developer – Practical (1010206701) 2328020603042

try {
const result = await User.insertMany(users);
console.log('Inserted Many Users:', result);
console.log("\n");
} catch (err) {
console.error(err);
}
}

// Find All Documents


async function findAllUsers() {
try {
const users = await User.find();
console.log('All Users:', users);
console.log("\n");
} catch (err) {
console.error(err);
}
}

// Find a Document by ID
async function findUserById(userId) {
try {
const user = await User.findById(userId);
console.log('User Found:', user);
console.log("\n");
} catch (err) {
console.error(err);
}
}

// Update a Document
async function updateUser(userId, newName) {
try {
const result = await User.findByIdAndUpdate(userId, { name: newName });
console.log('Updated User:', result);
console.log("\n");
} catch (err) {
console.error(err);
}
}

// Delete a Document
async function deleteUser(userId) {

BMCET 17
Full Stack Developer – Practical (1010206701) 2328020603042

try {
const result = await User.findByIdAndDelete(userId);
console.log('Deleted User:', result);
console.log("\n");
} catch (err) {
console.error(err);
}
}

// Example Usage:
// insertOneUser();
// insertManyUsers();
// findAllUsers();

// findUserById('6742d9b3c6079620d3f29460');
// updateUser('6742d9b3c6079620d3f29460', 'Munda');
// findUserById('6742d9b3c6079620d3f29460');
deleteUser('6742d9b3c6079620d3f29460');

OUTPUT:

BMCET 18
Full Stack Developer – Practical (1010206701) 2328020603042

BMCET 19
Full Stack Developer – Practical (1010206701) 2328020603042

Practical: 7
Aim: Use "Node JS" and "MongoDB" together.to make use of the
Employee collection in the MongoDB EmployeeDB database and display on
to web page

INPUT:
$ cd /Practical_Seven

$ npm init

Initialize Node Project which generate package.json file

BMCET 20
Full Stack Developer – Practical (1010206701) 2328020603042

change file package.json, add after main key, add type:module

BMCET 21
Full Stack Developer – Practical (1010206701) 2328020603042

$ npm i express mongoose ejs-mate

install dependencies

[Code]

File 1: Practical_Seven/views/showData.ejs

File 2: Practical_Seven/index.js

$ node index.js

Note : First time rune $ npm i express mongoose ejs-mate

BMCET 22
Full Stack Developer – Practical (1010206701) 2328020603042

Practical: 8
Aim: Create single page website using Angular JS

INPUT:

BMCET 23

You might also like