Scribd
Upload
11 views

FullStack_labmanual

Uploaded by

Durga Singh
Copyright
© © All Rights Reserved
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
11 views

FullStack_labmanual

Uploaded by

Durga Singh
Copyright
© © All Rights Reserved
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/ 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