Scribd
Upload
5 views18 pages

Full Stack Web Dev Lab Term Work Practical File.

This document is a term work submission for a Full Stack Web Development Lab by Ritesh Bisht, detailing various programming tasks including HTML, CSS, jQuery, PHP, and AJAX. It includes source code examples for each task, demonstrating concepts such as images, links, tables, and database connections. The document also contains acknowledgments and a table of contents outlining the programs covered.

Uploaded by

Ritesh Bisht
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
5 views18 pages

Full Stack Web Dev Lab Term Work Practical File.

This document is a term work submission for a Full Stack Web Development Lab by Ritesh Bisht, detailing various programming tasks including HTML, CSS, jQuery, PHP, and AJAX. It includes source code examples for each task, demonstrating concepts such as images, links, tables, and database connections. The document also contains acknowledgments and a table of contents outlining the programs covered.

Uploaded by

Ritesh Bisht
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

Term work

on

FULL STACK WEB DEVELOPMENT


LAB
(PCS 693)
2023-24

Submitted to: Submitted by:

DR. ANIMESH SRIVASTAVA RITESH BISHT

(CC-CSE-O-VI-Sem) Class Roll. No : 48

GEHU, DEHRADUN BTech-CSE-O-VI-Sem

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Page | 1
GRAPHIC ERA HILL UNIVERSITY, DEHRADUN

ACKNOWLEDGMENT

I would like to particularly thank my FULL STACK WEB DEVELOPMENT

LAB Faculty DR. ANIMESH SRIVASTAVA Sir for his patience, support and

encouragement throughout the completion of this Term work.

At last but not the least I greatly indebted to all other persons who directly

or indirectly helped me during this course.

RITESH BISHT
Univ. Roll No : 2119026
[Link]-CSE-O-VI-Sem
Session : 2023-24
GEHU, Dehradun

Page | 2
Table of Contents
S NO. PROGRAM NAME DATE

1 HTML IMAGES

2 HTML LINKS

3 HTML TABLES

4 CSS

5 JQUERY

6 PHP ARRAY AND FOR LOOP

7 DATABASE CONNECTION WITH PHP

8 AJAX

PROGRAM 1
Write a program to demonstrate the use of HTML IMAGES.

SOURCE CODE :

Page | 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Images Example</title>
</head>
<body>
<h1>HTML Images Example</h1>

<!-- Image as a Link -->


<h2>Image as a Link</h2>
<a href="[Link]
<img src="[Link] width="150"
alt="Forest Image">
</a>

<!-- Image with a Caption -->


<h2>Image with a Caption</h2>
<figure>
<img src="[Link] height="100"
alt="Nature Image">
<figcaption>This is a caption for the image.</figcaption>
</figure>

<!-- Responsive Image -->


<h2>Responsive Image</h2>
<img src="[Link] alt="Nature Image"
style="max-width: 45%; height: auto;">

</body>
</html>

Output

Page | 4
PROGRAM 2
Page | 5
Write a program to demonstrate the use of HTML LINKS.

SOURCE CODE :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>HTML Links Example</title>
</head>
<body>
<h1> HTML Links Example </h1>

<!-- Basic External Link -->


<h3>Basic External Link</h3>
<a href="[Link] [Link]</a>

<!-- Link that Opens in a New Tab -->


<h3>Link that Opens in a New Tab</h3>
<a href="[Link] target="_blank">Visit [Link]
in a New Tab</a>

<!-- Internal Link -->


<h3>Internal Link</h3>
<a href="#section1">Go to Section 1</a>
<a href="#section2">Go to Section 2</a>

<!-- Email Link -->


<h3>Email Link</h3>
<a href="[Link] Email</a>

<!-- Link with a Tooltip -->


<h3>Link with a Tooltip</h3>
<a href="[Link] title="This is a tooltip">Hover over
me</a>

Page | 6
<!-- Section 1 -->
<h3 id="section1">Section 1</h3>
<p>This is Section 1. <a href="#top">Back to top</a></p>

<!-- Section 2 -->


<h3 id="section2">Section 2</h3>
<p>This is Section 2. <a href="#top">Back to top</a></p>

</body>
</html>
Output

PROGRAM 3
Write a program to demonstrate the use of HTML TABLES.

Page | 7
SOURCE CODE :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tables Example</title>
</head>
<body>
<h3>HTML Tables Example</h3>
<!-- Table with Headers -->
<h3>Table with Headers</h3>
<table style="width: 100%; border-collapse: collapse;">
<tr>
<th style="border: 1px solid black; padding: 8px; background-color:
#f2f2f2;">Header 1</th>
<th style="border: 1px solid black; padding: 8px; background-color:
#f2f2f2;">Header 2</th>
</tr>
<tr>
<td style="border: 1px solid black; padding: 8px;">Row 1, Cell 1</td>
<td style="border: 1px solid black; padding: 8px;">Row 1, Cell 2</td>
</tr>
<tr>
<td style="border: 1px solid black; padding: 8px;">Row 2, Cell 1</td>
<td style="border: 1px solid black; padding: 8px;">Row 2, Cell 2</td>
</tr>
</table>
<h3>Table with Borders</h3>
<table style="width: 100%; border: 2px solid black; border-collapse: collapse;">
<tr>
<td style="border: 1px solid black; padding: 8px;">Row 1, Cell 1</td>
<td style="border: 1px solid black; padding: 8px;">Row 1, Cell 2</td>
</tr>
<tr>
<td style="border: 1px solid black; padding: 8px;">Row 2, Cell 1</td>
<td style="border: 1px solid black; padding: 8px;">Row 2, Cell 2</td>
</tr>
</table>
<h3>Table with Cell Padding and Spacing</h3>

Page | 8
<table style="width: 100%; border-collapse: separate; border-spacing: 3px;">
<tr>
<td style="border: 1px solid black; padding: 20px;">Row 1, Cell 1</td>
<td style="border: 1px solid black; padding: 20px;">Row 1, Cell 2</td>
</tr>
<tr>
<td style="border: 1px solid black; padding: 20px;">Row 2, Cell 1</td>
<td style="border: 1px solid black; padding: 20px;">Row 2, Cell 2</td>
</tr>
</table>
</body>
</html>

Output

PROGRAM 4

Page | 9
Write a program to demonstrate the use of inline, internal and
external CSS.

SOURCE CODE :

HTML :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Example</title>
<!-- Link to External CSS -->
<link rel="stylesheet" href="[Link]">
<!-- Internal CSS -->
<style>
.internal-style {
color: blue;
font-size: 20px;
text-align: center;
}
#internal-id {
background-color: lightgray;
padding: 10px;
}
</style>
</head>
<body>
<h1 class="internal-style" id="internal-id">CSS Example</h1>

<p style="color: green; font-size: 18px;" class="inline-style" id="inline-id">This


paragraph is styled using inline CSS.</p>

<div class="external-style" id="external-id">This div is styled using external CSS.


</div>
</body>
</html>

CSS :
Page | 10
.external-style {
color: red;
font-size: 22px;
text-align: right;
border: 2px solid black;
padding: 10px;
}

#external-id {
background-color: lightyellow;
margin: 20px;
}

OUTPUT

PROGRAM 5
Write a program to demonstrate JQuery.

Page | 11
SOURCE CODE :

HTML :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Example</title>
<!-- Link to jQuery library -->
<script src="[Link]
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>jQuery Example</h1>

<button id="btn">Click Me</button>


<p id="text">This is a paragraph.</p>
<div class="box">This is a div element.</div>

<script>
$(document).ready(function() {
$("#btn").click(function() {
alert("Button was clicked!");
});

$("#btn").click(function() {
$("#text").text("The paragraph text has been changed!");
});

$("#btn").click(function() {
$(".box").addClass("highlight");
});
$("#btn").click(function() {
$(".box").hide();
});

Page | 12
$("#btn").click(function() {
$(".box").show();
});
});
</script>
</body>
</html>

OUTPUT

PROGRAM 6
Write a program to demonstrate use of php array and for loop.

Page | 13
SOURCE CODE :

<?php
// Define an array
$fruits = array("ORANGE", "BANANA", "MANGO", "APPLE","GRAPES", "PINEAPPLE");

// Accessing array elements using a for loop with index


echo "Accessing array elements using a for loop with index:\n";
for ($i = 0; $i < count($fruits); $i++) {
echo $fruits[$i] . "\n";
}

echo "\n";

// Accessing array elements using a foreach loop


echo "Accessing array elements using a foreach loop:\n";
foreach ($fruits as $fruit) {
echo $fruit . "\n";
}

echo "\n";

// Accessing array elements using a foreach loop with key-value pairs


echo "Accessing array elements using a foreach loop with key-value pairs:\n";
foreach ($fruits as $key => $fruit) {
echo "Key: $key -> Value: $fruit\n";
}

echo "\n";
?>

OUTPUT

Page | 14
PROGRAM 7
Write a program to demonstrate database connection with php.

Page | 15
SOURCE CODE :

<?php
// Database credentials
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "abc";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connection Successful";

// Uncomment the following line to insert data into the student table
// $conn->query("INSERT INTO student (id, name) VALUES (11, 'HELLO')");

// Execute query to fetch data from the student table


$sql = "SELECT * FROM student";
$result = $conn->query($sql);

// Check if there are results and fetch data


if ($result->num_rows > 0) {
while ($row = $result->fetch_row()) {
echo "<br>";
echo $row[0] . " " . $row[1] . "<br>";
}
} else {
echo "0 results";
}
// Close connection
$conn->close();
?>

OUTPUT

Page | 16
PROGRAM 8
Write a program to demonstrate the use of ajax.

Page | 17
SOURCE CODE :

<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<div id="demo">
<p>Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
[Link] = function() {
[Link]("demo").innerHTML = [Link];
}
[Link]("GET", "ajax_info.txt");
[Link]();
}
</script>
</body>
</html>

OUTPUT

Page | 18

You might also like