Scribd
Upload
196 views24 pages

MC4212 Full Stack Web Development Lab

Uploaded by

Jasvan Sundar
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
196 views24 pages

MC4212 Full Stack Web Development Lab

Uploaded by

Jasvan Sundar
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/ 24

Ex.No.

1
Date :
ADD CSS3 PROPERTIES OF STYLES TO INLIN, INTERNAL CSS3
PROPERTIES TO DOCUMENT

AIM: Add Styles to your Resume using CSS 3 Properties, Add External, Internal and Inline
CSS styles to know the priority & Add CSS3 Animation to your profile.

Inline CSS
 An inline CSS is used to apply a unique style to a single HTML element.
 An inline CSS uses the style attribute of an HTML element.
 To use inline styles you use the style attribute in the relevant tag. The style
attribute can contain any CSS property.
 Inline CSS has the highest priority out of the three ways you can use CSS:
external, internal, and inline.
 Specify the desired CSS properties with the style HTML attribute.

a) Inline Style Sheets

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">This is a Blue Heading</h1>

</body>
</html>
OUTPUT

b) Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;
align:center;}
</style>
</head>

<body>

<h1>This is a heading1</h1>
<p>This is a paragraph.</p>

</body>
</html>

Result : The above program was executed successfully, hence the output verified.
Ex.No: 2
Date :
FORM VALIDATION USING JAVASCRIPT

AIM: To create Form validation using JavaScript.

Program

<html>
<head>
<script>

function VALIDATEDETAIL()
{
var name = document.forms["RegForm"]["Name"];
var email = document.forms["RegForm"]["EMail"];
var phone = document.forms["RegForm"]["Telephone"];
var what = document.forms["RegForm"]["Subject"];
var password = document.forms["RegForm"]["Password"];
var address = document.forms["RegForm"]["Address"];

if (name.value == "")
{
window.alert("Please enter your name.");
name.focus();
return false;
}

if (address.value == "")
{
window.alert("Please enter your address.");
name.focus();
return false;
}

if (email.value == "")
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}

if (email.value.indexOf("@", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}

if (email.value.indexOf(".", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}

if (phone.value == "")
{
window.alert("Please enter your telephone number.");
phone.focus();
return false;
}

if (password.value == "")
{
window.alert("Please enter your password");
password.focus();
return flase;
}

if (what.selectedIndex < 1)
{
alert("Please enter your course.");
what.focus();
return false;
}

return true;
}</script>
<style>
VALIDATEDETAIL {
font-weight: bold ;
float: left;
width: 100px;
text-align: left;
margin-right: 10px;
font-size:14px;
}

div {
box-sizing: border-box;
width: 100%;
border: 100px solid black;
float: left;
align-content: center;
align-items: center;
}

form {
margin: 0 auto;
width: 600px;
}</style></head>

<body>
<h1 style="text-align: center"> REGISTRATION FORM </h1>
<form name="RegForm" action="submit.php" onsubmit="return VALIDATEDETAIL()"
method="post">

<p>Name: <input type="text" size=65 name="Name"> </p><br>


<p> Address: <input type="text" size=65 name="Address"> </p><br>
<p>E-mail Address: <input type="text" size=65 name="EMail"> </p><br>
<p>Password: <input type="text" size=65 name="Password"> </p><br>
<p>Telephone: <input type="text" size=65 name="Telephone"> </p><br>

<p>SELECT YOUR COURSE


<select type="text" value="" name="Subject">
<option>BTECH</option>
<option>BBA</option>
<option>BCA</option>
<option>B.COM</option>
<option>VALIDATEDETAIL</option>
</select></p><br><br>
<p>Comments: <textarea cols="55" name="Comment"> </textarea></p>
<p><input type="submit" value="send" name="Submit">
<input type="reset" value="Reset" name="Reset">
</p>
</form>
</body>
</html>

OUTPUT
Result : The above program was executed successfully, hence the output verified.

Ex. No:3
Date :
Get data using Fetch API from an open-source endpoint and
display the contents in the form of a card.
AIM: To fetch data and display the contents in the form of a card.

script.js

// api url
const api_url =
"https://employeedetails.sriventech.ac.in/my/api/path";

// Defining async function


async function getapi(url) {

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

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;
}

employee.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="script.js"></script>

<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 : The above program was executed successfully, hence the output verified.

Ex. No:4
Date :
JAVASCRIPT ARRAY FUNCTIONS
AIM: To use array function in Javascript.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
<!-- Converting Arrays to Strings -->
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo2").innerHTML = fruits.toString();
</script>
<!-- Joins all array elements -->
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo3").innerHTML = fruits.join(" * ");
</script>

</body>
</html>

OUTPUT
Result : The above program was executed successfully, hence the output verified.

Ex. No:5
Date :
Create a NodeJS server using Express that stores data from a form as a JSON file

Aim : Create a NodeJS server using Express that stores data from a form as a JSON file and
displays it in another page. The redirect page should be prepared using Handlebars.

Steps :
1.Create a folder called fetch API in VS Code and create a new file JavaScript file
Now, write the Code get free API and store it in Const api_url get the used id from Api using
prompt method.

2. Convert into parseInt. Using asyn function get the API and point the needed data from the
API to Card. New show function get the Emp details in the table format and send it to html
file.

3.In HTML file create a Card using css file and Show the data fetched from the API. To
the table. Using “Id - demo" link the css file, Script file to the html and open it in Live
Server.

Server.js
const express = require ('express');
const expbs = require('express-handlebars'); const app = express();
app.use(express.urlencoded());

app.engine('handlebars', expbs.engine ({defaultLayout: false,})); app.set('view engine',


'handlebars');

//routing
app.get('/', function(request, response, next){ response.render('index', { layout: false });
});
app.post('/', function(request, response, next){ response.send(request.body);
});

app.listen(2000);

=>(main.handlebar)
<html>
<head>
<title>
{{{ title }}}
</title>
</head>
<body>
{{{ body }}}
</body>
</html>

main.html
<html>
<head>
<title>
{{{ title }}}
</title>
</head>
<body>
{{{ body }}}
</body>
</html>

index.html
<h1>Student Form</h1>
<form action='/' method="post">
<Table style="font-size:20px;">
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" id="fname" name="name" placeholder="Your name.."></td>
</tr>
<tr>
<td><label for="reg">Register Number:</label></td>
<td><input type="text" id="lname" name="lastname" placeholder="Your number"></td>
</tr>
<tr>
<td><label for="city">City:</label></td>
<td><input id="subject" name="subject" placeholder="Your City" ></input></td>
</tr>
<tr>
<td><input type="submit" value="Submit"></td>
</tr>
</Table>
</form>
Output:

Result : The above program was executed successfully, hence the output verified.

Ex. No:6
Date :

Create a NodeJS server using Express that creates, insert, updates and deletes
customers details and stores them in MongoDB database. The information about the
user should be obtained from a HTML form.

create_database.js
var MongoClient = require('mongodb').MongoClient;
//Create a database named "mydb":
var url = "mongodb://localhost:27017/mydb";

MongoClient.connect(url, function(err, db) {


if (err) throw err;
console.log("Database created!");
db.close();
});

Output

Creating a Collection
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/";

MongoClient.connect(url, function(err, db) {


if (err) throw err;
var dbo = db.db("mydb");
//Create a collection name "customers":
dbo.createCollection("customers", function(err, res) {
if (err) throw err;
console.log("Collection created!");
db.close();
});
});

Output
Insert data into Collection
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/";

MongoClient.connect(url, function(err, db) {


if (err) throw err;
var dbo = db.db("mydb");
var myobj = { name: "Company Inc", address: "Highway 37" };
dbo.collection("customers").insertOne(myobj, function(err, res) {
if (err) throw err;
console.log("1 document inserted");
db.close();
});
});

Output

Update document
Update the document with the address "Valley 345" to name="Mickey" and address="Canyon
123":

var MongoClient = require('mongodb').MongoClient;


var url = "mongodb://localhost:27017/";

MongoClient.connect(url, function(err, db) {


if (err) throw err;
var dbo = db.db("mydb");
var myquery = { address: "Valley 345" };
var newvalues = { $set: { name: "Michael", address: "Canyon 123" } };

dbo.collection("customers").updateOne(myquery, newvalues, function(err, res) {


if (err) throw err;
console.log("1 document updated");
db.close();
});
});

Output

Result : The above program was executed successfully, hence the output verified.

Ex. No:7
Date :
Create a NodeJS server that creates, reads, updates and deletes event details and stores
them in a MySQL database. The information about the user should be obtained from a
HTML form.

Procedure:
1. Create database in mysql
2. Write connection.php
3. Write php coding for reading data from database
<?php
include_once('connection.php');
$query="select * from emp where age>25";
$result=mysql_query($query);
?>

<!DOCTYPE html>
<html>
<head>
<title> Fetch Data From Database </title>
</head>
<body>

<table align="center" border="1px" style="width:600px; line-height:40px;">


<tr>
<th colspan="4"><h2>Employee Record</h2></th>
</tr>
<t>
<th>Empno</th>
<th> Name </th>
<th> Age </th>

</t>
<?php
while($rows=mysql_fetch_assoc($result))
{
?>
<tr>
<td><?php echo $rows['empno']; ?></td>
<td><?php echo $rows['empname']; ?></td>
<td><?php echo $rows['age']; ?></td>

</tr>
<?php
}
?>
</table>
</body>
</html>
Output

+-------------+----------------+-----------------+-----------------+
Empno | Empname | Age |
+-------------+----------------+-----------------+-----------------+
| 1 | John Poul | 20 |
| 2 | Abdul S | 25 |
| 3 | Sanjay | 24 |
+-------------+----------------+-----------------+-----------------+

Result : The above program was executed successfully, hence the output verified.

Ex. No:8
Date :
Create a counter using ReactJS

Aim : To create a counter using ReactJS

<!DOCTYPE html>
<html lang="en">

<body style="text-align:center">
<h1>Fullstack</h1>
<p>COUNTS</p>
<div id="counter">
<!-- counts -->
</div>

<script>
let counts=setInterval(updated);
let upto=0;
function updated(){
var count= document.getElementById("counter");
count.innerHTML=++upto;
if(upto===1000)
{
clearInterval(counts);
}
}
</script>
</body>
</html>

OUTPUT
Result : The above program was executed successfully, hence the output verified.
Ex. No:9
Date :
Create and Deploy a virtual machine using a virtual box that can be
accessed from the host computer using SSH

Aim : To Create and Deploy a virtual machine using a virtual box that can be accessed from
the host computer using SSH

Procedure:
Prepare your computer for virtualization. Install Hypervisor (virtualization
tool).Import a virtual machine. Start the virtual machine. Using the virtual
machine. Shutdown the virtual machine

VIRTUALIZATION – the underlying technology that allows a virtual


operating system to be run as an application on your computer’s operating
system.

HYPERVISOR – the virtualization application (such as VirtualBox or


VMware) running on your host computer that allows it to run a guest virtual
operating system.

HOST – the computer on which you are running the hypervisor application.

GUEST – a virtual operating system running within the hypervisor on your


host computer. The virtual operating system term is synonymous with other
terms such as Virtual \ Machine, VM and instance.
Program:
Step 1: Prepare your computer for Virtualization:
Enable Processor Virtualization: Ensure Virtualization is enabled on
your computer. See the Virtualization Error (VT-d/VT-x or AMD-V)
for troubleshooting support.

Review File Sync Services for tools like OneDrive, Nextcloud, DropBox
Sync, iCloud, etc. If you are using a data synchronization service, make sure it DOES
NOT (or at least not frequently) synchronize the folder in which your hypervisor
imports and installs the Virtual Machines.

File sync services can cause a dramatic fall-off in performance for your
entire system as these services try to synchronize these massive files that are
getting updated constantly while you are using the Virtual Machines.

Sufficient Disk Space: Virtual Machines require a significant amount of Disk


space (10 GB or more each is typical). Ensure you have sufficient space on your
computer.

Admin Privileges: Installing a hypervisor on a host in most cases requires admin


privileges.
Step 2: Install Hypervisor (Virtualization Tool):
Installing a hypervisor on your host is usually quite simple. In most cases,
the install program will ask only a couple of questions, such as where to install the
hypervisor software.

Step 3: Import a Virtual Machine:


The first step is to download the Virtual Machine for your course from our
Course Virtual Machines page. This will download an .ova file. The .ova file is
actually a compressed (zipped) tarball of a Virtual Machine exported from Virtual
Box.

Once the Virtual Machine has been imported, it will normally show up
in the guest list within your hypervisor tool.

Step 4: Start the Virtual Machine:


To start up a Virtual Machine guest in most hypervisors, you simply click
on the desired guest and click the Start button (often double-clicking the guest
icon will work as well).

Step 5: Using the Virtual Machine:


Sharing files between the guest and host: To learn about different ways
of sharing files, check out this guide.
Run a command with sudo (root) privileges: Open a terminal and type any
command with sudo in front to run that command as root.

Example: sudo apt-get install vim – will install the vim text editor package on an
Ubuntu Linux Virtual Machine.

Find the IP address of your guest: Open a terminal and type ifconfig | more – The |
more (pronounced “pipe more”) will “pipe” the output of the ifconfig command to
the more command, which will show the results one page at a time, so it doesn’t
scroll by before you see it all.

If you have a Host-Only Network IP address, you will see an IP of 192.168.56.101


(or something similar). Check the Trouble-Shooting section below for more
information about the Host-Only Network.

Step 6: Shut down the Virtual Machine:


When you are done using a guest Virtual Machine, regardless of
hypervisor, you need to shut it down properly. This can be done in three ways:
1. Press the shutdown button found on the desktop, taskbar, or task
menu of the guest operating system.
2. Open a terminal and type the command: sudo shutdown -h now
3. In the guest window, click Machine (menu) -> ACPI Shut down – This will
simulate the power button being pressed.

RESULT:
The above program is executed successfully. Hence output verified.

You might also like