Scribd
Upload
58 views106 pages

Megh WD

Uploaded by

jmegh03
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
58 views106 pages

Megh WD

Uploaded by

jmegh03
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 106

Enrolment No.

: 220840116069

PRACTICAL – 1
AIM: Design webpage using a simple HTML.
1.1: WAP in html containing following tag
• <h1 to h6> </h1 to /h6>
• <p> </p>
• <br> and <hr>
• nbsp;
Code: <!DOCTYPE html>
<html lang="en">
<head>
<title>Prac 1.1</title>
</head>
<body bgcolor="cyan">
<!-- Heading tags from h1 to h6 -->
<h1>R N G Patel Institute of Technology</h1>
<h2>R N G Patel Institute of Technology</h2>
<h3>R N G Patel Institute of Technology</h3>
<h4>R N G Patel Institute of Technology</h4>
<h5>R N G Patel Institute of Technology</h5>
<h6>R N G Patel Institute of Technology</h6>

<!-- Paragraph tag -->


<p>This is a paragraph. It contains text that is displayed in a block format.</p>

<!-- Line break tag -->


<p>This is a paragraph with a line break.<br>Here is the text after the line
break.</p>

<!-- Horizontal rule tag -->


<hr>

<!-- Non-breaking space -->


<p>This paragraph contains a non-breaking space here.</p>
</body>
</html>

1
Enrolment No.: 220840116069

OUTPUT

Fig. 1.1 – HTML page using basic tags

2
Enrolment No.: 220840116069

1.2 WAP in html which demonstrate all the formatting tag.


Code: <!DOCTYPE html>
<html lang="en">
<head>
<title>Prac 1.2</title>
</head>
<body bgcolor="cyan">
<h1>HTML Formatting Tags</h1>

<!-- Bold and Strong -->


<p>This is <b>bold</b> text.</p>
<p>This is <strong>strong</strong> text.</p>

<!-- Italic and Emphasized -->


<p>This is <i>italic</i> text.</p>
<p>This is <em>emphasized</em> text.</p>

<!-- Marked and Small -->


<p>This is <mark>highlighted</mark> text.</p>
<p>This is <small>small</small> text.</p>

<!-- Deleted and Inserted -->


<p>This is <del>deleted</del> text.</p>
<p>This is <ins>inserted</ins> text.</p>

<!-- Subscript and Superscript -->


<p>This is <sub>subscript</sub> text.</p>
<p>This is <sup>superscript</sup> text.</p>

<!-- Underlined and Strikethrough -->


<p>This is <u>underlined</u> text.</p>
<p>This is <s>strikethrough</s> text.</p>

<!-- Preformatted Text -->


<pre>
This is preformatted text.
It preserves spaces and line breaks.
</pre>

<!-- Code -->


<p>This is an example of <code>inline code</code>.</p>

<!-- Blockquote -->


<blockquote>
This is a blockquote. It is used to quote a section of text from another source.
</blockquote>
3
Enrolment No.: 220840116069

<!-- Abbreviation -->


<p>The abbreviation for HyperText Markup Language is <abbr title="HyperText
Markup Language">HTML</abbr>.</p>
</body>
</html>

OUTPUT

Fig. 1.2 – HTML page using Formatting tag

4
Enrolment No.: 220840116069

1.3 WAP in html which demonstrate <font> tag.


Code: <!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Font Tag Example</title>
</head>
<body bgcolor="cyan">

<h1>Demonstration of the <font> Tag</h1>

<!-- Font face -->


<p><font face="Arial">This text is in Arial font.</font></p>
<p><font face="Courier New">This text is in Courier New font.</font></p>

<!-- Font size -->


<p><font size="1">This text is size 1.</font></p>
<p><font size="3">This text is size 3 (default size).</font></p>
<p><font size="7">This text is size 7.</font></p>

<!-- Font color -->


<p><font color="red">This text is red.</font></p>
<p><font color="grey">This text is grey.</font></p>
<p><font color="#ffffff">This text is White using a hex color code.</font></p>

<!-- Combining attributes -->


<p><font face="Verdana" size="4" color="purple">This text is in Verdana, size 4,
and purple.</font></p>

</body>
</html>

5
Enrolment No.: 220840116069

OUTPUT

Fig. 1.3 – Font Tag

6
Enrolment No.: 220840116069

1.4 WAP in html which demonstrate all types of List.


Code: <!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Lists Example</title>
</head>
<body bgcolor="cyan">
<h1>HTML Lists Demonstration</h1>

<!-- Unordered List -->


<h2>Unordered List</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<!-- Ordered List -->


<h2>Ordered List</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

<!-- Description List -->


<h2>Description List</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>A programming language for the web</dd>
</dl>
</body>
</html>

7
Enrolment No.: 220840116069

OUTPUT

Fig. 1.4 – List tag

8
Enrolment No.: 220840116069

1.5 WAP in html which demonstrates color and back ground facility.
Code: <!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Color and Background Example</title>
<style>
body {
background-color: cyan; /* Light blue background */
color: #333; /* Dark text color */
font-family: Arial, sans-serif;
}
h1 {
color: #ff6347; /* Tomato color for heading */
}
p{
background-color: #e0ffff; /* Light cyan background for paragraphs */
padding: 10px;
border: 1px solid #ccc; /* Light gray border */
}
.highlight {
background-color: yellow; /* Highlighted text */
color: red; /* Red text color */
}
</style>
</head>
<body>
<h1>Color and Background Demonstration</h1>
<p>This is a paragraph with a light cyan background and dark text color.</p>
<p class="highlight">This paragraph is highlighted with a yellow background and
red text color.</p>
<p style="background-color: lightgreen; color: darkgreen;">This paragraph uses
inline styles for a light green background and dark green text color.</p>
</body>
</html>

9
Enrolment No.: 220840116069

OUTPUT

Fig. 1.5 – Color and Background Demonstration

10
Enrolment No.: 220840116069

1.6 WAP in html which demonstrate anchor tag and href attribute to link
up a page.
Code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anchor Tag Example</title>
</head>
<body bgcolor="cyan">
<h1>Anchor Tag and Href Attribute Demonstration</h1>

<!-- Link to an external website -->


<p><a href="https://www.example.com" target="_blank">Visit
Example.com</a></p>

<!-- Link to another page within the same website -->


<p><a href="about.html">Go to About Page</a></p>

<!-- Link to a specific section within the same page -->


<p><a href="#section2">Jump to Section 2</a></p>

<!-- Content of the page -->


<h2 id="section1">Section 1</h2>
<p>This is the content of Section 1.</p>

<h2 id="section2">Section 2</h2>


<p>This is the content of Section 2.</p>

<h2 id="section3">Section 3</h2>


<p>This is the content of Section 3.</p>

<!-- Link to the top of the page -->


<p><a href="#top">Back to Top</a></p>
</body>
</html>

11
Enrolment No.: 220840116069

OUTPUT

Fig. 1.6 – Anchor Tag

12
Enrolment No.: 220840116069

1.7 WAP in html to demonstrate use of <img> and <area> tag.


Code: <!DOCTYPE html>
<html>
<head>
<title> Prac 1.7</title>
</head>
<body bgcolor="cyan">

<h1>Image Map Demonstration</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page
and read more about the topic:</p>

<img src="https://www.w3schools.com/tags/workplace.jpg" alt="Workplace"


usemap="#workmap" width="400" height="379">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"
href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone"
href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee"
href="coffee.htm">
</map>
</body>
</html>

13
Enrolment No.: 220840116069

OUTPUT

Fig. 1.7 – Image Map Demonstration

14
Enrolment No.: 220840116069

1.8 WAP in html to demonstrate practical list document using fully <table>
tag.
Code: <!DOCTYPE html>
<html lang="en">
<head>
<title>Table tag</title>
</head>
<body align="center" bgcolor="cyan">
<h1>Practical List Document</h1>

<table border="1" align="center">


<h2>Student Grades</h2>
<thead>
<tr>
<th>Student Name</th>
<th>Subject</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Mathematics</td>
<td>A</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Science</td>
<td>B+</td>
</tr>
<tr>
<td>Emily Jones</td>
<td>History</td>
<td>A-</td>
</tr>
<tr>
<td>Michael Brown</td>
<td>Geography</td>
<td>B</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">End of List</td>
</tr>

15
Enrolment No.: 220840116069

</tfoot>
</table>
</body>
</html>

OUTPUT

Fig. 1.8 – Table tag

16
Enrolment No.: 220840116069

1.9 WAP in html which demonstrate <frameset> <frame> <noframe> and


<iframe>.
Code: <!DOCTYPE html>
<html lang="en">
<head>
<title>Frameset and Iframe Example</title>
</head>
<body bgcolor="cyan">

<h1>Frameset and Iframe Demonstration</h1>

<!-- Frameset with two columns -->


<frameset cols="50%,50%">

<frame src="frame1.html" name="leftFrame">


<frame src="frame2.html" name="rightFrame">

<noframes>

<body>
<p>Your browser does not support frames. Here is the content
instead:</p>
<p>This is the content that would be displayed if frames were not
supported.</p>
</body>

</noframes>

</frameset>

<!-- Iframe example -->


<h2>Iframe Example</h2>

<iframe src="https://www.example.com" width="600" height="400"


title="Example Iframe"></iframe>
</body>
</html>

17
Enrolment No.: 220840116069

OUTPUT

Fig. 1.9 – Frameset and Iframe Demonstration

18
Enrolment No.: 220840116069

PRACTICAL – 2
AIM: Design student Time Table using HTML tag.
Code: <!DOCTYPE html>
<html>
<head>
<title> Prac 2 </title>
</head>
<body bgcolor="cyan">
<table border="1px" align="center">
<tr>
<th colspan="14"> R. N. G. Patel Institute of Technology </th>
</tr>
<tr>
<th rowspan="3" height="100" width="100"> <img
src="c:\Users\neelp\Downloads\RNGPIT.jpg"> </th>
<th colspan="10"> Class Time Table </th>
<th rowspan="=2" colspan="4"> Date : 06/01/2024 </th>
</tr>
<tr>
<th colspan="10"> Dept:Information Technology(IT)</th>
<th rowspan="2" colspan="2"> Page: 01 of 01 </th>
</tr>
<tr>
<th colspan="10"> Program : B.E. IT</th>
</tr>
<tr>
<th colspan="4"> Duration/Term : 01-February-2024 to 25-May-2024</th>
<th colspan="6"> Class:- IT-22/Sem-5th</th>
<th colspan="4"> Room No.: C-007</th>
</tr>
<tr>
<th> Sr. No.</th>
<th> Time </th>
<th colspan="2"> MONDAY</th>
<th colspan="2"> TUESDAY</th>
<th colspan="2"> WEDNESDAY</th>
<th colspan="2"> THURSDAY</th>
<th colspan="2"> FRIDAY</th>
<th colspan="2"> SATURDAY</th>
</tr>
<tr>
<th rowspan="2">1</th>
<th rowspan="2">10:00 to 11:00</th>
<td rowspan="2" colspan="2">ADA (KND) </td>

19
Enrolment No.: 220840116069

<td rowspan="4" colspan="2"> CN (VCJ) B-221 / ADA (MRG) B-


222</td>
<td rowspan="2" colspan="2"> DA (VCJ) </td>
<td rowspan="2" colspan="2"> WD (HAP) </td>
<td rowspan="4" colspan="2"> ADA (MRG) B-221 / CN (VCJ) B-222
</td>
<td rowspan="4" colspan="2"> DA (FCS) B-221/222 </td>
</tr>
<tr></tr>
<tr>
<th rowspan="2">2</th>
<th rowspan="2">11:05 to 12:05</th>
<td rowspan="2" colspan="2">PE (HJK) </td>
<td rowspan="2" colspan="2"> DA (VCJ) </td>
<td rowspan="2" colspan="2"> CN (FCS) </td>
</tr>
<tr></tr>
<tr>
<th colspan="14"> 1st RECESS</th>
</tr>
<tr></tr>
<tr>
<th rowspan="2">3</th>
<th rowspan="2">12:45 to 01:45</th>
<td rowspan="2" colspan="2"> CN (VCJ) </td>
<td rowspan="2" colspan="2"> ADA (MRG) </td>
<td rowspan="2" colspan="2"> ADA (MRG) </td>
<td rowspan="2" colspan="2"> DE (VCJ/KND) </td>
<td rowspan="2" colspan="2"> CN (FCS) </td>
<td rowspan="4" colspan="2"> DA (FCS) </td>
</tr>
<tr></tr>
<tr>
<th rowspan="2">4</th>
<th rowspan="2">01:45 to 02:45</th>
<td rowspan="2" colspan="2"> IPDC (HJK) </td>
<td rowspan="2" colspan="2"> ADA (KND) </td>
<td rowspan="2" colspan="2"> WD (HAP) </td>
<td rowspan="2" colspan="2"> WD (MRG) </td>
<td rowspan="2" colspan="2"> PE (APM) </td>
</tr>
<tr></tr>
<tr>
<th colspan="14"> 2nd RECESS</th>
</tr>
<tr></tr>

20
Enrolment No.: 220840116069

<tr>
<th rowspan="2">5</th>
<th rowspan="2">03:00 to 04:00</th>
<td rowspan="2" colspan="2"> CS (PPV) </td>
<td rowspan="4" colspan="2"> WD (HAP) B-221 / CS (PPV) B-222 </td>
<td rowspan="2" colspan="2"> CN (VCJ) </td>
<td rowspan="4" colspan="2"> CS (PPV) B-221 / WD (MRG) B-222 </td>
<td rowspan="2" colspan="2"> CS (PPV) </td>
<td rowspan="4" colspan="2"> DE (KND) B-221 / DE (VCJ) B-222 </td>
</tr>
<tr></tr>
<tr>
<th rowspan="2">6</th>
<th rowspan="2">04:00 to 05:00</th>
<td rowspan="2" colspan="2"> IPDC (HJK) </td>
<td rowspan="2" colspan="2"> PE (APM) </td>
<td rowspan="2" colspan="2"> DA (HAP) </td>
</tr>
</table>
</body>
</html>

21
Enrolment No.: 220840116069

OUTPUT

Fig. 2 – Time Table using HTML

22
Enrolment No.: 220840116069

PRACTICAL – 3
AIM: Design HTML form for the student registration application.
Code: <!DOCTYPE html>
<html>
<head>
<title> Prac 3 </title>
</head>
<body bgcolor="cyan">
<h1 align="center"> STUDENT REGISTRATION FORM </h1>
<form>
<table border="1px" align="center" cellpadding="5px">
<tr>
<th> FULL NAME</th>
<td> <label for="fullname"> </label>
<input type="text" name="fullname" required>
(max 30 characters A-Z,a-z)
</td>
</tr>
<tr>
<th> DATE OF BIRTH </th>
<td> <label for="dob"></label>
<select name="dob" id="dob" required>
<option name="dd">DD</option>
<option name="dd">1</option>
<option name="dd">2</option>
<option name="dd">3</option>
<option name="dd">4</option>
<option name="dd">5</option>
<option name="dd">6</option>
<option name="dd">7</option>
<option name="dd">8</option>
<option name="dd">9</option>
<option name="dd">10</option>
<option name="dd">11</option>
<option name="dd">12</option>
<option name="dd">13</option>
<option name="dd">14</option>
<option name="dd">15</option>
<option name="dd">16</option>
<option name="dd">17</option>
<option name="dd">18</option>
<option name="dd">19</option>
<option name="dd">20</option>
<option name="dd">21</option>
<option name="dd">22</option>

23
Enrolment No.: 220840116069

<option name="dd">23</option>
<option name="dd">24</option>
<option name="dd">25</option>
<option name="dd">26</option>
<option name="dd">27</option>
<option name="dd">28</option>
<option name="dd">29</option>
<option name="dd">30</option>
<option name="dd">31</option>
</select>
<select name="dob" id="dob">
<option name="mm">MM</option>
<option name="mm">JAN</option>
<option name="mm">FEB</option>
<option name="mm">MAR</option>
<option name="mm">APR</option>
<option name="mm">MAY</option>
<option name="mm">JUN</option>
<option name="mm">JUL</option>
<option name="mm">AUG</option>
<option name="mm">SEP</option>
<option name="mm">OCT</option>
<option name="mm">NOV</option>
<option name="mm">DEC</option>
</select>
<select name="dob" id="year">
<option name="dd">YYYY</option>
<option name="dd">2001</option>
<option name="dd">2002</option>
<option name="dd">2003</option>
<option name="dd">2004</option>
</select>
</td>
</tr>
<tr>
<th> EMAIL </th>
<td> <label for="email"></label>
<input type="email" name="email" required>
([email protected])
</td>
</tr>
<tr></tr>
<th> MOBILE NUMBER</th>
<td> <label for="mobile"></label>
<input type="tel" id="mobile" name="mobile" required>
(10 digit only)

24
Enrolment No.: 220840116069

</td>
</tr>
<tr>
<th> GENDER </th>
<td> <label for="gender">MALE</label>
<input type="radio" id="male" name="gender" value="male">
<label for="gender">FEMALE</label>
<input type="radio" id="female" name="gender" value="female">
</td>
</tr>
<tr>
<th> ADDRESS</th>
<td> <label for="address"></label>
<textarea id="address" name="address" row="4" cols="20" required>
</textarea>
</td>
</tr>
<tr>
<th> HOBBIES </th>
<td> <label for="hobbies">Driving</label>
<input type="radio" id="hobbies" name="hobbies" value="Driving">
<label for="hobbies">Singing</label>
<input type="radio" id="hobbies" name="hobbies" value="Singing">
<label for="hobbies">Dancing</label>
<input type="radio" id="hobbies" name="hobbies"
value="Dancing">
<label for="hobbies">Sketching</label>
<input type="radio" id="hobbies" name="hobbies"
value="Sketching">
</td>
</tr>
<tr>
<th> DOCUMENTS </th>
<td>
<input type="file" id="document" accept="pdf">
</td>
</tr>
<tr>
<th colspan="2">
<input type="submit" name="submit">
<input type="reset" name="reset">
</th>
</tr>
</table>
</form>
</body>

25
Enrolment No.: 220840116069

</html>

OUTPUT

Fig. 3 – Student Registration Form

26
Enrolment No.: 220840116069

PRACTICAL – 4
AIM: Design HTML Page using various tags of HTML5.
Code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prac 4</title>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=
swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #000;
color: #fff;
padding: 20px 0;
text-align: center;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
nav {
display: flex;
justify-content: center;
background-color: #333;
}
nav a {
color: #fff;
padding: 14px 20px;
text-decoration: none;
text-align: center;
transition: background-color 0.3s;
}
nav a:hover {
background-color: #575757;
}
.container {

27
Enrolment No.: 220840116069

padding: 20px;
}
.hero {
background-image: url('https://images.hdqwalls.com/wallpapers/2020-bmw-
m8-competition-rear-view-5k-nm.jpg');
background-size: cover;
background-position: center;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.hero h1 {
font-size: 4em;
margin: 0;
z-index: 1;
animation: fadeInDown 1s ease-out;
}
.hero p {
font-size: 1.5em;
z-index: 1;
animation: fadeInUp 1s ease-out;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

28
Enrolment No.: 220840116069

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.features, .specifications {
margin: 20px 0;
}
.features ul, .specifications table {
width: 100%;
margin: 0 auto;
}
.features ul {
list-style-type: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.features li {
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.features li:hover {
transform: translateY(-10px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.specifications table {
border-collapse: collapse;
width: 100%;
}
.specifications th, .specifications td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
.specifications th {
background-color: #f2f2f2;

29
Enrolment No.: 220840116069

}
.car-image {
text-align: center;
margin: 20px 0;
}
.car-image img {
max-width: 100%;
height: auto;
transition: transform 0.3s;
}
.car-image img:hover {
transform: scale(1.05);
}
footer {
background-color: #000;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
width: 100%;
bottom: 0;
}
.contact-form {
display: flex;
flex-direction: column;
align-items: center;
}
.contact-form label {
margin: 10px 0 5px;
}
.contact-form input, .contact-form textarea {
width: 80%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
.contact-form button {
padding: 10px 20px;
margin: 10px 0;
border: none;
background-color: #007bff;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}

30
Enrolment No.: 220840116069

.contact-form button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<header>
<h1>BMW</h1>
</header>
<nav>
<a href="#home">Home</a>
<a href="#features">Features</a>
<a href="#specifications">Specifications</a>
<a href="#gallery">Gallery</a>
<a href="#contact">Contact</a>
</nav>
<div class="container">
<section id="home" class="hero">
<h1>Welcome to BMW</h1>
<p>Experience the ultimate driving machine.</p>
</section>
<section id="features" class="features">
<h2>Features</h2>
<ul>
<li>Advanced Safety Systems</li>
<li>Luxurious Interiors</li>
<li>Powerful Engine</li>
<li>Innovative Technology</li>
</ul>
</section>
<section id="specifications" class="specifications">
<h2>Specifications</h2>
<table>
<tr>
<th>Engine</th>
<td>3.0L Twin-Turbo Inline-6</td>
</tr>
<tr>
<th>Horsepower</th>
<td>382 hp</td>
</tr>
<tr>
<th>Torque</th>
<td>369 lb-ft</td>
</tr>
<tr>

31
Enrolment No.: 220840116069

<th>0-60 mph</th>
<td>4.1 seconds</td>
</tr>
</table>
</section>
<section id="gallery" class="car-image">
<h2>Gallery</h2>
<img src="https://images.hdqwalls.com/wallpapers/bthumb/2020-bmw-m8-
competition-coupe-side-view-5k-kf.jpg" alt="BMW M8 Competition">
<img src="https://images.hdqwalls.com/wallpapers/bthumb/2020-bmw-m8-
competition-coupe-5k-mc.jpg" alt="BMW M8 Competition">
<img src="https://images.hdqwalls.com/wallpapers/bmw-m8-competition-
coupe-5k-fn.jpg" alt="BMW M8 Competition">
</section>
<section id="contact">
<h2>Contact Us</h2>
<form class="contact-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<button type="submit">Submit</button>
</form>
</section>
</div>
<footer>
<p>© 2024 BMW. All rights reserved.</p>
</footer>
</body>
</html>

32
Enrolment No.: 220840116069

OUTPUT

33
Enrolment No.: 220840116069

Fig. 4 – HTML page using HTML5 tag

34
Enrolment No.: 220840116069

PRACTICAL – 5
AIM: Develop HTML Page using CSS.
5.1: Internal (It should include cover image, color, text, font, border, box,
and margin).
Code: <!DOCTYPE html>
<html>
<head>
<title>Mustang GT</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}

.header a {
color: #fff;
text-decoration: none;
}

.header a:hover {
color: #ccc;
}

.navbar {
background-color: #444;
padding: 10px;
text-align: center;
}

.navbar a {
color: #fff;
text-decoration: none;
margin: 0 20px;
}

35
Enrolment No.: 220840116069

.navbar a:hover {
color: #ccc;
}

.cover-image {
background-image: url('https://images.hdqwalls.com/wallpapers/red-ford-
mustang-shelby-gt-500-ky.jpg');
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.cover-image h1 {
font-size: 64px;
font-weight: bold;
margin-top: 10px;
text-align: center;
}

.cover-image p {
font-size: 24px;
margin-bottom: 50px;
text-align: center;
}

.box {
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
margin: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}

.box h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}

36
Enrolment No.: 220840116069

.box p {
font-size: 18px;
margin-bottom: 20px;
color: #666;
}

.margin {
margin: 20px;
}

.button {
background-color: #337ab7;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

.button:hover {
background-color: #23527c;
}

.footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
clear: both;
}

.footer a {
color: #fff;
text-decoration: none;
}

.footer a:hover {
color: #ccc;
}
</style>
</head>
<body>
<div class="header">
<h1>Mustang GT</h1>
</div>

37
Enrolment No.: 220840116069

<div class="navbar">
<a href="#">Home</a>
<a href="#">Features</a>
<a href="#">Design</a>
<a href="#">Safety</a>
<a href="#">Contact</a>
</div>
<div class="cover-image">
<h1>Mustang GT</h1>
<p>The ultimate driving machine, with a powerful 5.0L V8 engine and 460
horsepower.</p>
<button class="button">Learn More</button>
</div>
<div class="box margin">
<h2>Performance</h2>
<p>The Mustang GT is equipped with a 6-speed manual transmission, rear-
wheel drive, and a sport-tuned suspension.</p>
<p>It can go from 0-60mph in just 4.3 seconds, making it a thrill to
drive.</p>
</div>
<div class="box margin">
<h2>Design</h2>
<p>The Mustang GT has a sleek and aggressive design, with a bold front
grille, LED headlights, and a sloping roofline.</p>
<p>The interior features premium materials, including leather-trimmed seats
and a heated steering wheel.</p>
</div>
<div class="box margin">
<h2>Safety Features</h 2>
<p>The Mustang GT comes with a range of safety features, including:</p>
<ul>
<li>Forward collision warning</li>
<li>Automatic emergency braking</li>
<li>Blind spot monitoring</li>
<li>Lane departure warning</li>
</ul>
</div>
<div class="footer">
<p>&copy; 2023 Mustang GT</p>
<a href="#">Terms of Service</a>
<a href="#">Privacy Policy</a>
</div>
</body>
</html>

38
Enrolment No.: 220840116069

OUTPUT

Fig. 5.1 – Internal CSS

39
Enrolment No.: 220840116069

5.2: External (It should include cover image, color, text, font, border, box,
and margin).
Code: <!DOCTYPE html>
<html>
<head>
<title>Mustang GT | Official Website</title>
<link rel="stylesheet" type="text/css" href="Prac 5.2.css">
</head>
<body>
<div class="header">
<div class="header-logo">Mustang GT</div>
</div>
<div class="navbar">
<a href="#">Home</a>
<a href="#">Features</a>
<a href="#">Design</a>
<a href="#">Safety</a>
<a href="#">Contact</a>
</div>
<div class="cover-image">
<h1>Mustang GT</h1>
<p>The ultimate driving machine, with a powerful 5.0L V8 engine and 460
horsepower.</p>
</div>
<div class="box margin">
<h2>Performance</h2>
<p>The Mustang GT is equipped with a 6-speed manual transmission, rear-
wheel drive, and a sport-tuned suspension.</p>
<p>It can go from 0-60mph in just 4.3 seconds, making it a thrill to drive.</p>
</div>
<div class="box margin">
<h2>Design</h2>
<p>The Mustang GT has a sleek and aggressive design, with a bold front grille,
LED headlights, and a sloping roofline.</p>
<p>The interior features premium materials, including leather-trimmed seats
and a heated steering wheel.</p>
</div>
<div class="box margin">
<h2>Safety Features</h2>
<p>The Mustang GT comes with a range of safety features, including:</p>
<ul>
<li>Forward collision warning</li>
<li>Automatic emergency braking</li>
<li>Blind spot monitoring</li>
<li>Lane departure warning</li>

40
Enrolment No.: 220840116069

</ul>
</div>
<div class="footer">
<p>&copy; 2023 Mustang GT</p>
<a href="#">Terms of Service</a>
<a href="#">Privacy Policy</a>
</div>
</body>
</html>

External CSS Code: File name: Prac 5.2.css


body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
}

.header-logo {
font-size: 24px;
font-weight: bold;
margin-right: 20px;
}

.header-nav a {
color: #fff;
text-decoration: none;
margin: 0 20px;
}

.header-nav a:hover {
color: #ccc;
}

.navbar {
background-color: #444;

41
Enrolment No.: 220840116069

padding: 10px;
text-align: center;
display: flex;
justify-content: space-between;
align-items: center;
}

.navbar a {
color: #fff;
text-decoration: none;
margin: 0 20px;
}

.navbar a:hover {
color: #ccc;
}

.cover-image {
background-image: url('https://images.hdqwalls.com/wallpapers/vossen-gulf-ford-
mustang-mach-e-15-ne.jpg');
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.cover-image h1 {
font-size: 64px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}

.cover-image p {
font-size: 24px;
margin-bottom: 40px;
text-align: center;
padding-top: 50px;
}

.box {

42
Enrolment No.: 220840116069

background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
margin: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}

.box h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}

.box p {
font-size: 18px;
margin-bottom: 20px;
color: #666;
}

.margin {
margin: 20px;
}

.button {
background-color: #337ab7;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

.button:hover {
background-color: #23527c;
}

.footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
clear: both;
display: flex;
justify-content: space-between;

43
Enrolment No.: 220840116069

align-items: center;
}

.footer-logo {
font-size: 24px;
font-weight: bold;
margin-right: 20px;
}

.footer-nav {
display: flex;
justify-content: space-between;
align-items: center;
}

.footer-nav a {
color: #fff;
text-decoration: none;
margin: 0 20px;
}

.footer-nav a:hover {
color: #ccc;
}

44
Enrolment No.: 220840116069

OUTPUT

Fig. 5.2 – External CSS

45
Enrolment No.: 220840116069

5.3 Inline Style Sheet (It should include cover image, color, text, font,
border, box, and margin).
Code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prac 5.3</title>
</head>
<body style="margin: 0; font-family: Arial, sans-serif; background-color: cyan;">

<!-- Cover Image -->


<div style="background-image: url('https://images.hdqwalls.com/download/dr-
doom-x-iron-man-tz-1280x800.jpg'); height: 400px; background-size: cover;
background-position: center;">
<h1 style="color: white; text-align: center; padding-top: 150px; font-size: 3em;
text-shadow: 2px 2px 4px #000000;">Welcome to My Web Page</h1>
</div>

<!-- Content Section -->


<div style="padding: 20px; margin: 20px; background-color: white; border: 1px
solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
<h2 style="color: #333;">About Me</h2>
<p style="color: #666; line-height: 1.6;">Hello! I am a web developer with a
passion for creating beautiful and functional websites. I love experimenting with
new technologies and improving my skills.</p>

<h2 style="color: #333;">My Skills</h2>


<ul style="color: #666; line-height: 1.6;">
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>React</li>
<li>Node.js</li>
</ul>
</div>

</body>
</html>

46
Enrolment No.: 220840116069

OUTPUT

Fig. 5.3 – Inline CSS

47
Enrolment No.: 220840116069

PRACTICAL – 6
AIM: Develop applications using JavaScript.
6.1: Make an application which check user name and password with java
script. And user name and password are correct then navigate next
page.

HTML code: <!DOCTYPE html>


<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<link rel="stylesheet" href="Prac 6.1.css">
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
</form>
<p id="error" class="error"></p>
</div>
<script src="Prac 6.1.js"></script>
</body>
</html>
CSS code: File name: Prac 6.1.css
body {
font-family: Arial, sans-serif;
background-color: cyan;
}

.login-container {
width: 300px;
margin: 100px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}

48
Enrolment No.: 220840116069

label, input {
display: block;
width: 100%;
margin: 10px 0;
}

button {
padding: 10px;
width: 100%;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

.error {
color: red;
}
JavaScript: File name: Prac 6.1.js
document.getElementById('loginForm').addEventListener('submit',
function(event) {
event.preventDefault();

const username = document.getElementById('username').value;


const password = document.getElementById('password').value;

// Dummy credentials
const validUsername = 'user';
const validPassword = 'password';

if (username === validUsername && password === validPassword) {


window.location.href = 'Prac 6.1.1.html';
} else {
document.getElementById('error').textContent = 'Invalid username or
password';
}
});
Linked HTML Page Code: File name: Prac 6.1.1.html
<!DOCTYPE html>
<html lang="en">
<head>

49
Enrolment No.: 220840116069

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
</head>
<body bgcolor="cyan">
<h1>Welcome!</h1>
<p>You have successfully logged in.</p>
</body>
</html>

OUTPUT

Fig. 6.1 – Html Login Page Using JavaScript

50
Enrolment No.: 220840116069

6.2 Make an application which check mobile number (number should be


started with 9 or 8) and mail id (check @ and .)
HTML code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validation Form</title>
<link rel="stylesheet" href="Prac 6.2.css">
</head>
<body>
<div class="container">
<h2>Validation Form</h2>
<form id="validationForm">
<label for="mobile">Mobile Number:</label>
<input type="text" id="mobile" name="mobile" required>
<label for="email">Email ID:</label>
<input type="text" id="email" name="email" required>
<button type="submit">Submit</button>
</form>
<p id="error" class="error"></p>
<p id="success" class="success"></p>
</div>
<script src="Prac 6.2.js"></script>
</body>
</html>
CSS code: File name: Prac 6.2.css
body {
font-family: Arial, sans-serif;
background-color: cyan;
}

.container {
width: 300px;
margin: 100px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}

label, input {
display: block;
width: 100%;
margin: 10px 0;

51
Enrolment No.: 220840116069

button {
padding: 10px;
width: 100%;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

.error {
color: red;
}

.success {
color: green;
}
JavaScript: File name: Prac 6.2.js
document.getElementById('validationForm').addEventListener('submit',
function(event) {
event.preventDefault();

const mobile = document.getElementById('mobile').value;


const email = document.getElementById('email').value;
let isValid = true;
let errorMessage = "";

// Validate mobile number (should start with 9 or 8)


if (!/^[98]\d{9}$/.test(mobile)) {
isValid = false;
errorMessage += "Invalid mobile number. It should start with 9 or 8 and
be 10 digits long.<br>";
}

// Validate email ID (should contain @ and .)


if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
isValid = false;
errorMessage += "Invalid email address. It should contain '@' and
'.'.<br>";
}

52
Enrolment No.: 220840116069

if (isValid) {
document.getElementById('error').innerHTML = "";
document.getElementById('success').innerHTML = "Validation
successful!";
} else {
document.getElementById('error').innerHTML = errorMessage;
document.getElementById('success').innerHTML = "";
}
});

OUTPUT

Fig. 6.2 – Email and Phone number Validation by JavaScript

53
Enrolment No.: 220840116069

6.3 Write a JavaScript that uses function to calculate how many days are
left in your birthday?
HTML code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Days Until Birthday</title>
<link rel="stylesheet" href="Prac 6.3.css">
</head>
<body>
<div class="container">
<h2>Days Until Your Birthday</h2>
<label for="birthday">Enter your birthday (MM-DD):</label>
<input type="text" id="birthday" placeholder="MM-DD">
<button onclick="calculateDays()">Calculate</button>
<p id="result"></p>
</div>
<script src="Prac 6.3.js"></script>
</body>
</html>
CSS code: File name: Prac 6.3.css
body {
font-family: Arial, sans-serif;
background-color: Cyan;
}

.container {
width: 300px;
margin: 100px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}

label, input {
display: block;
width: 100%;
margin: 10px 0;
}

button {
padding: 10px;
width: 100%;

54
Enrolment No.: 220840116069

background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

#error {
color: red;
}

#result {
color: green;
}
JavaScript: File name: Prac 6.3.js
function calculateDays() {
const birthdayInput = document.getElementById('birthday').value;
const today = new Date();
const currentYear = today.getFullYear();
const birthday = new Date(currentYear + '-' + birthdayInput);

// If birthday has already passed this year, set it to next year


if (birthday < today) {
birthday.setFullYear(currentYear + 1);
}

const oneDay = 24 * 60 * 60 * 1000; //


Hours*Minutes*Seconds*Milliseconds
const daysLeft = Math.round((birthday - today) / oneDay);

document.getElementById('result').textContent = `There are ${daysLeft}


days left until your birthday!`;
}

55
Enrolment No.: 220840116069

OUTPUT

Fig. 6.3 Birthday days left using JavaScript

56
Enrolment No.: 220840116069

6.4 Write a JavaScript that uses a loop, which searches a word in sentence
held in an array, returning the index of the word.
HTML code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Word Search in Sentence</title>
<link rel="stylesheet" href="Prac 6.4.css">
</head>
<body>
<div class="container">
<h2>Search for a Word in a Sentence</h2>
<label for="sentence">Enter a sentence:</label>
<input type="text" id="sentence">
<label for="word">Enter the word to search:</label>
<input type="text" id="word">
<button onclick="searchWord()">Search</button>
<p id="result"></p>
</div>
<script src="Prac 6.4.js"></script>
</body>
</html>
CSS code: File name: Prac 6.4.css
body {
font-family: Arial, sans-serif;
background-color: cyan;
}

.container {
width: 300px;
margin: 100px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}

label, input {
display: block;
width: 100%;
margin: 10px 0;
}

button {

57
Enrolment No.: 220840116069

padding: 10px;
width: 100%;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

#error {
color: red;
}

#result {
color: green;
}
JavaScript: File name: Prac 6.4.js
function searchWord() {
const sentence = document.getElementById('sentence').value;
const word = document.getElementById('word').value;
const wordsArray = sentence.split(' '); // Split sentence into words
let index = -1;

// Search for the word in the array


for (let i = 0; i < wordsArray.length; i++) {
if (wordsArray[i] === word) {
index = i;
break;
}
}

if (index === -1) {


document.getElementById('result').textContent = `The word "${word}"
was not found in the sentence.`;
} else {
document.getElementById('result').textContent = `The word "${word}" is
found at index ${index} in the sentence.`;
}
}

58
Enrolment No.: 220840116069

OUTPUT

Fig. 6.4 – Word search by JavaScript

59
Enrolment No.: 220840116069

6.5 Write an HTML file with JavaScript that finds position of first
occurrence of vowel “a”, last occurrence of a vowel “a” in a given word
and returns the string between them. For example, ajanta- then script
would return first occurrence of “a”-that is position 1 and last
occurrence-6 and string between them is “jant”.
HTML code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Find Vowel Positions</title>
<link rel="stylesheet" href="Prac 6.5.css">
</head>
<body>
<div class="container">
<h2>Find Vowel Positions and Substring</h2>
<label for="word">Enter a word:</label>
<input type="text" id="word" placeholder="Enter a word">
<button onclick="findSubstring()">Find</button>
<p id="result"></p>
</div>
<script src="Prac 6.5.js"></script>
</body>
</html>
CSS code: File name: Prac 6.5.css
body {
font-family: Arial, sans-serif;
background-color: cyan;
}

.container {
width: 300px;
margin: 100px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}

label, input {
display: block;
width: 100%;
margin: 10px 0;
}

60
Enrolment No.: 220840116069

button {
padding: 10px;
width: 100%;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

#error {
color: red;
}

#result {
color: green;
}
JavaScript: File name: Prac 6.5.js
function findSubstring() {
const word = document.getElementById('word').value;
const firstIndex = word.indexOf('a');
const lastIndex = word.lastIndexOf('a');

if (firstIndex === -1 || lastIndex === -1 || firstIndex === lastIndex) {


document.getElementById('result').textContent = 'The word does not
contain two occurrences of "a".';
} else {
const substring = word.substring(firstIndex + 1, lastIndex);
document.getElementById('result').textContent = `First occurrence of "a"
is at position ${firstIndex + 1}, last occurrence is at position ${lastIndex + 1},
and the string between them is "${substring}".`;
}
}

61
Enrolment No.: 220840116069

OUTPUT

Fig. 6.5 – Vowel Position by JavaScript

62
Enrolment No.: 220840116069

6.6 Write a JavaScript which accepts N as input and display first N


Fibonacci numbers as list.
HTML code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fibonacci Sequence Generator</title>
<link rel="stylesheet" href="Prac 6.6.css">
</head>
<body>
<div class="container">
<h2>Fibonacci Sequence Generator</h2>
<label for="number">Enter the value of N:</label>
<input type="number" id="number" min="1" required>
<button onclick="generateFibonacci()">Generate</button>
<ul id="fibonacciList"></ul>
</div>
<script src="Prac 6.6.js"></script>
</body>
</html>
CSS code: File name: Prac 6.6.css
body {
font-family: Arial, sans-serif;
background-color: cyan;
}

.container {
width: 300px;
margin: 100px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}

label, input {
display: block;
width: 100%;
margin: 10px 0;
}

button {
padding: 10px;
width: 100%;
background-color: #007bff;
63
Enrolment No.: 220840116069

color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

ul {
list-style-type: none;
padding: 0;
}

li {
background-color: #e0e0e0;
margin: 5px 0;
padding: 10px;
border-radius: 5px;
}
JavaScript: File name: Prac 6.6.js
function generateFibonacci() {
const N = document.getElementById('number').value;
const fibonacciList = document.getElementById('fibonacciList');

fibonacciList.innerHTML = ''; // Clear any existing list items

let a = 0, b = 1, next;

for (let i = 0; i < N; i++) {


const listItem = document.createElement('li');
listItem.textContent = a;
fibonacciList.appendChild(listItem);

next = a + b;
a = b;
b = next;
}
}

64
Enrolment No.: 220840116069

OUTPUT

Fig. 6.6 – Fibonacci Sequence by JavaScript

65
Enrolment No.: 220840116069

6.7 Write a JavaScript that handles following mouse events Add necessary
elements.
(i) JavaScript gives the key code for the key pressed.
(ii) If the key pressed is “a”, “e”, “i”, “o”, “u” the script should
announce that vowel is pressed.
(iii) When the key is released background should change to blue.
HTML code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse and Keyboard Events</title>
<link rel="stylesheet" href="Prac 6.7.css">
</head>
<body>
<div class="container">
<h2>Mouse and Keyboard Events</h2>
<p>Click inside the input box and press any key:</p>
<input type="text" id="inputField" onkeydown="checkKey(event)"
onkeyup="changeBackground(event)">
<p id="keyCode"></p>
<p id="vowelMessage"></p>
</div>
<script src="Prac 6.7.js"></script>
</body>
</html>
CSS code: File name: Prac 6.7.css
body {
font-family: Arial, sans-serif;
background-color: cyan;
}

.container {
width: 300px;
margin: 100px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}

label, input {
display: block;
width: 100%;

66
Enrolment No.: 220840116069

margin: 10px 0;
}

button {
padding: 10px;
width: 100%;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

#error {
color: red;
}

#result {
color: green;
}
JavaScript: File name: Prac 6.7.js
function checkKey(event) {
const keyCode = event.keyCode || event.which;
const keyChar = String.fromCharCode(keyCode).toLowerCase();

// Display the key code


document.getElementById('keyCode').textContent = `Key Code:
${keyCode}`;

// Check if the key pressed is a vowel


if (['a', 'e', 'i', 'o', 'u'].includes(keyChar)) {
document.getElementById('vowelMessage').textContent = 'Vowel
pressed!';
} else {
document.getElementById('vowelMessage').textContent = '';
}
}

function changeBackground(event) {
document.body.style.backgroundColor = 'blue';
}

67
Enrolment No.: 220840116069

OUTPUT

Fig. 6.7 – Mouse Keyboard event by JavaScript

68
Enrolment No.: 220840116069

6.8 Write a JavaScript to print characters of a string at odd positions. (for


example for the string India, I, d and a should get printed)
HTML code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Odd Position Characters</title>
<link rel="stylesheet" href="Prac 6.8.css">
</head>
<body>
<div class="container">
<h2>Characters at Odd Positions</h2>
<label for="inputString">Enter a string:</label>
<input type="text" id="inputString">
<button onclick="printOddCharacters()">Print</button>
<p id="result"></p>
</div>
<script src="Prac 6.8.js"></script>
</body>
</html>
CSS code: File name: Prac 6.8.css
body {
font-family: Arial, sans-serif;
background-color: cyan;
}

.container {
width: 300px;
margin: 100px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}

label, input {
display: block;
width: 100%;
margin: 10px 0;
}

button {
padding: 10px;
width: 100%;

69
Enrolment No.: 220840116069

background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

#error {
color: red;
}

#result {
color: green;
}
JavaScript: File name: Prac 6.8.js
function printOddCharacters() {
const inputString = document.getElementById('inputString').value;
let result = '';

for (let i = 0; i < inputString.length; i++) {


if (i % 2 === 0) { // checking for odd index (0-based)
result += inputString[i] + ' ';
}
}

document.getElementById('result').textContent = `Characters at odd


positions: ${result.trim()}`;
}

70
Enrolment No.: 220840116069

OUTPUT

Fig. 6.8 – Odd position’s character by JavaScript

71
Enrolment No.: 220840116069

6.9 Write a JavaScript to take 2-digit number and then separate these 2
digits, then multiply first digit by itself for second digit times. (for
example, 23 should be separated as 2 and 3. 2 should multiply with itself
3 times)
HTML code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digit Separator and Multiplier</title>
<link rel="stylesheet" href="Prac 6.9.css">
</head>
<body>
<div class="container">
<h2>Digit Separator and Multiplier</h2>
<label for="number">Enter a 2-digit number:</label>
<input type="number" id="number" min="10" max="99" required>
<button onclick="separateAndMultiply()">Calculate</button>
<p id="result"></p>
</div>
<script src="Prac 6.9.js"></script>
</body>
</html>
CSS code: File name: Prac 6.9.css
body {
font-family: Arial, sans-serif;
background-color: cyan;
}

.container {
width: 300px;
margin: 100px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}

label, input {
display: block;
width: 100%;
margin: 10px 0;
}

button {

72
Enrolment No.: 220840116069

padding: 10px;
width: 100%;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

#error {
color: red;
}

#result {
color: green;
}
JavaScript: File name: Prac 6.9.js
function separateAndMultiply() {
const number = document.getElementById('number').value;
const firstDigit = Math.floor(number / 10);
const secondDigit = number % 10;
let result = 1;

for (let i = 0; i < secondDigit; i++) {


result *= firstDigit;
}

document.getElementById('result').textContent = `The digits are


${firstDigit} and ${secondDigit}. Result of ${firstDigit}^${secondDigit} is
${result}.`;
}

73
Enrolment No.: 220840116069

OUTPUT

Fig. 6.9 – Digit separator and multiplier by JavaScript

74
Enrolment No.: 220840116069

6.10 Write a JavaScript that handles following mouse events. Add


necessary elements
(i) If the mouse is over the heading should turn yellow and if the
mouse goes out of the heading it should turn black.
(ii) If find time button is clicked show time and date information. If
button named “red” is clicked, background should change to red
and If button named “green” is clicked, background should change
to green.
HTML code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Events Demo</title>
<link rel="stylesheet" href="Prac 6.10.css">
</head>
<body>
<div class="container">
<h2 id="heading">Hover Over Me!</h2>
<button onclick="showDateTime()">Find Time</button>
<button onclick="changeBackground('red')">Red</button>
<button onclick="changeBackground('green')">Green</button>
<p id="dateTime"></p>
</div>
<script src="Prac 6.10.js"></script>
</body>
</html>
CSS code: File name: Prac 6.10.css
body {
font-family: Arial, sans-serif;
background-color: cyan;
}

.container {
width: 300px;
margin: 100px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}

button {
padding: 10px;
width: 80px;
75
Enrolment No.: 220840116069

margin: 5px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

#error {
color: red;
}

#result {
color: green;
}

#heading {
color: black;
transition: color 0.3s;
}
JavaScript: File name: Prac 6.10.js
document.getElementById('heading').addEventListener('mouseover',
function() {
this.style.color = 'yellow';
});

document.getElementById('heading').addEventListener('mouseout', function()
{
this.style.color = 'black';
});

function showDateTime() {
const now = new Date();
const dateTimeString = now.toString();
document.getElementById('dateTime').textContent = dateTimeString;
}

function changeBackground(color) {
document.body.style.backgroundColor = color;
}

76
Enrolment No.: 220840116069

OUTPUT

Fig. 6.10 – Mouse Events by JavaScript

77
Enrolment No.: 220840116069

6.11 Write a program that convert a string written in JSON format, into a
JavaScript object.
HTML code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON to JavaScript Object</title>
<link rel="stylesheet" href="Prac 6.11.css">
</head>
<body>
<div class="container">
<h2>Convert JSON String to JavaScript Object</h2>
<label for="jsonString">Enter JSON string:</label>
<textarea id="jsonString" rows="4" cols="50"></textarea>
<button onclick="convertToJson()">Convert</button>
<pre id="result"></pre>
</div>
<script src="Prac 6.11.js"></script>
</body>
</html>
CSS code: File name: Prac 6.11.css
body {
font-family: Arial, sans-serif;
background-color: cyan;
}

.container {
width: 300px;
margin: 100px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}

label, textarea {
display: block;
width: 100%;
margin: 10px 0;
}

button {
padding: 10px;
width: 100%;

78
Enrolment No.: 220840116069

background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

pre {
background-color: #e0e0e0;
padding: 10px;
border-radius: 5px;
text-align: left;
}
JavaScript: File name: Prac 6.11.js
function convertToJson() {
const jsonString = document.getElementById('jsonString').value;
let jsonObject;

try {
jsonObject = JSON.parse(jsonString);
document.getElementById('result').textContent =
JSON.stringify(jsonObject, null, 2);
} catch (error) {
document.getElementById('result').textContent = `Invalid JSON string.
Error: ${error.message}`;
}
}

79
Enrolment No.: 220840116069

OUTPUT

Fig. 6.11 – Convert JSON string to JavaScript Object

80
Enrolment No.: 220840116069

PRACTICAL – 7
AIM: Write programs using PHP.
7.1 Write a PHP program to find whether entered year is leap year or not.
Code: <!DOCTYPE html>
<html>
<head>
<title>Leap Year Checker</title>
</head>
<body bgcolor="cyan">
<h2>Leap Year Checker</h2>
<form method="post">
Enter a year: <input type="number" name="year" required>
<input type="submit" value="Check">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$year = $_POST['year'];

if (($year % 4 == 0 && $year % 100 != 0) || ($year % 400 == 0)) {


echo "<p>$year is a leap year.</p>";
} else {
echo "<p>$year is not a leap year.</p>";
}
}
?>
</body>
</html>

81
Enrolment No.: 220840116069

OUTPUT

Fig. 7.1 – Leap year checker using PHP

82
Enrolment No.: 220840116069

7.2 Write a PHP program to display table of cube for 1 to 10.


Code: <!DOCTYPE html>
<html>
<head>
<title>Cube Table</title>
<style>
table {
width: 50%;
margin: 50px auto;
border-collapse: collapse;
}
th, td {
border: 2px solid #ddd;
padding: 8px;
text-align: center;
border-color: black;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body bgcolor="cyan">
<h2 style="text-align: center;">Table of Cubes (1 to 10)</h2>
<table>
<tr>
<th>Number</th>
<th>Cube</th>
</tr>
<?php
for ($i = 1; $i <= 10; $i++) {
$cube = $i * $i * $i;
echo "<tr>";
echo "<td>$i</td>";
echo "<td>$cube</td>";
echo "</tr>";
}
?>
</table>
</body>
</html>

83
Enrolment No.: 220840116069

OUTPUT

Fig. 7.2 – Cube Table using PHP

84
Enrolment No.: 220840116069

7.3 Write a PHP program to read a text file and store it in array and
display the content of array.
Code: <!DOCTYPE html>
<html>
<head>
<title>Read File and Store in Array</title>
</head>
<body bgcolor="cyan">
<h2>Content of Text File</h2>
<?php
// Specify the file path
$filePath = 'sample-2.txt';

// Check if the file exists


if (file_exists($filePath)) {
// Read the file into an array
$fileContent = file($filePath, FILE_IGNORE_NEW_LINES |
FILE_SKIP_EMPTY_LINES);

// Display the content of the array


echo "<pre>";
print_r($fileContent);
echo "</pre>";
} else {
echo "<p>The file does not exist.</p>";
}
?>
</body>
</html>

85
Enrolment No.: 220840116069

OUTPUT

Fig. 7.3 – Reading file using PHP

86
Enrolment No.: 220840116069

7.4 Write PHP to store information of employee (employee id, job title, and
years of experience) in an array and output the data to a web page by
arranging the employees in ascending order of experience.
Code: <!DOCTYPE html>
<html>
<head>
<title>Employee Information</title>
<style>
table {
width: 50%;
margin: 50px auto;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body bgcolor="cyan">
<h2 style="text-align: center;">Employee Information</h2>
<table>
<tr>
<th>Employee ID</th>
<th>Job Title</th>
<th>Years of Experience</th>
</tr>
<?php
// Employee data stored in an array
$employees = [
["id" => 101, "title" => "Software Developer", "experience" => 3],
["id" => 102, "title" => "Project Manager", "experience" => 5],
["id" => 103, "title" => "System Analyst", "experience" => 2],
["id" => 104, "title" => "Tester", "experience" => 4],
["id" => 105, "title" => "Database Administrator", "experience" => 6],
];

// Function to compare employees by experience


function compareByExperience($a, $b) {
return $a['experience'] - $b['experience'];
}

87
Enrolment No.: 220840116069

// Sort the employees array by years of experience


usort($employees, "compareByExperience");

// Display the sorted employee information


foreach ($employees as $employee) {
echo "<tr>";
echo "<td>{$employee['id']}</td>";
echo "<td>{$employee['title']}</td>";
echo "<td>{$employee['experience']}</td>";
echo "</tr>";
}
?>
</table>
</body>
</html>

OUTPUT

Fig. 7.4 – Employee information using PHP

88
Enrolment No.: 220840116069

7.5 Make a simple login form using cookie and session.


Page code: File name: login.php
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body bgcolor="cyan">
<h2>Login</h2>
<form action="authenticate.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
required><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
Authentication: File name: authenticate.php
<?php
session_start();

// Hardcoded credentials for demonstration


$valid_username = 'user';
$valid_password = 'pass';

$username = $_POST['username'];
$password = $_POST['password'];

if ($username === $valid_username && $password === $valid_password) {


$_SESSION['username'] = $username;
setcookie('username', $username, time() + (86400 * 30), "/"); // 86400 = 1
day
header('Location: welcome.php');
} else {
echo "Invalid username or password";
}
?>
Welcome page: File name: welcome.php
<?php
session_start();

if (!isset($_SESSION['username'])) {
header('Location: login.php');

89
Enrolment No.: 220840116069

exit();
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<h2>Welcome, <?php echo $_SESSION['username']; ?>!</h2>
<p>You have successfully logged in.</p>
<a href="logout.php">Logout</a>
</body>
</html>
Logout page: File name: logout.php
<?php
session_start();
session_unset();
session_destroy();
setcookie('username', '', time() - 3600, "/"); // delete the cookie
header('Location: login.php');
?>

90
Enrolment No.: 220840116069

OUTPUT

Fig. 7.5 – Login form using session and cookie

91
Enrolment No.: 220840116069

PRACTICAL – 8
AIM: Develop applications using PHP and MYSQL.
8.1: Make an application using PHP that collects student information like
name, PEN, Gender (use Radio Button), Branch (use Drop Down
Box), Semester, contact number (Text Box should masked with
numbers only) and address. Create buttons for Insert, Delete, Update
and Retrieve the details in/from the database. Alter the table to add a
column and add data in that new column.
Code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Information</title>
</head>
<body>
<h2>Student Information Form</h2>
<form action="index.php" method="POST">
<label for="name">Name:</label>
<input type="text" name="name" required><br><br>
<label for="pen">PEN:</label>
<input type="text" name="pen" required><br><br>
<label>Gender:</label>
<input type="radio" name="gender" value="Male" required> Male
<input type="radio" name="gender" value="Female" required> Female
<input type="radio" name="gender" value="Other" required> Other<br><br>
<label for="branch">Branch:</label>
<select name="branch" required>
<option value="Information Technology">Information Technology</option>
<option value="Computer Science">Computer Science</option>
<option value="Mechanical">Mechanical</option>
<option value="Civil">Civil</option>
<option value="Electronics">Electronics</option>
</select><br><br>
<label for="semester">Semester:</label>
<input type="number" name="semester" required><br><br>
<label for="contact">Contact Number:</label>
<input type="text" name="contact" pattern="\d*" maxlength="10"
required><br><br>
<label for="address">Address:</label>
<textarea name="address" required></textarea><br><br>
<label for="email">Email:</label>
<input type="email" name="email"><br><br>

92
Enrolment No.: 220840116069

<label for="id">Student ID (for update/delete):</label>


<input type="number" name="id" required><br><br>
<button type="submit" name="insert">Insert</button>
<button type="submit" name="update">Update</button>
<button type="submit" name="delete">Delete</button><br><br>
</form>
</body>
</html>
<?php
$conn = new mysqli('localhost', 'root', 'your_password', 'student_management');
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
if (isset($_POST['insert'])) {
$name = $_POST['name'];
$pen = $_POST['pen'];
$gender = $_POST['gender'];
$branch = $_POST['branch'];
$semester = $_POST['semester'];
$contact = $_POST['contact'];
$address = $_POST['address'];
$email = $_POST['email']; // Correct email variable
$sql = "INSERT INTO students (name, pen, gender, branch, semester,
contact_number, address, email)
VALUES ('$name', '$pen', '$gender', '$branch', '$semester', '$contact',
'$address',
'$email')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
if (isset($_POST['delete'])) {
$id = $_POST['id'];
$sql = "DELETE FROM students WHERE id = $id";
if ($conn->query($sql) === TRUE) {
echo "Record deleted successfully";
} else {
echo "Error deleting record: " . $conn->error;
}
}
if (isset($_POST['update'])) {
$id = $_POST['id'];
$name = $_POST['name'];
$pen = $_POST['pen'];

93
Enrolment No.: 220840116069

$gender = $_POST['gender'];
$branch = $_POST['branch'];
$semester = $_POST['semester'];
$contact = $_POST['contact']; $semester = $_POST['semester'];
$contact = $_POST['contact'];
$address = $_POST['address'];
$email = $_POST['email']; // Correct email variable
$sql = "INSERT INTO students (name, pen, gender, branch, semester,
contact_number, address, email)
VALUES ('$name', '$pen', '$gender', '$branch', '$semester', '$contact',
'$address', '$email')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
if (isset($_POST['delete'])) {
$id = $_POST['id'];
$sql = "DELETE FROM students WHERE id = $id";
if ($conn->query($sql) === TRUE) {
echo "Record deleted successfully";
} else {
echo "Error deleting record: " . $conn->error;
}
}
if (isset($_POST['update'])) {
$id = $_POST['id'];
$name = $_POST['name'];
$pen = $_POST['pen'];
$gender = $_POST['gender'];
$branch = $_POST['branch'];
$semester = $_POST['semester'];
$contact = $_POST['contact'];
$address = $_POST['address'];
$email = $_POST['email']; // Correct email variable
$sql = "UPDATE students
SET name='$name', pen='$pen', gender='$gender', branch='$branch',
email='$email', semester='$semester', contact_number='$contact',
address='$address' WHERE id=$id";
if ($conn->query($sql) === TRUE) {
echo "Record updated successfully";
} else {
echo "Error updating record: " . $conn->error;
}
}

94
Enrolment No.: 220840116069

$sql = "SELECT * FROM students";


$result = $conn->query($sql);
if ($result === FALSE) {
echo "Error: " . $conn->error;
}
?>

95
Enrolment No.: 220840116069

OUTPUT

Fig. 8.1.1 – Student information form

Fig. 8.1.2 – Data inserted into the Database

Fig. 8.1.3 – Data given into the form

96
Enrolment No.: 220840116069

Fig. 8.1.4 – Data Inserted to Database

97
Enrolment No.: 220840116069

8.2: Customize your own WebPages/web application. You may use HTML,
Frame Navigation, CSS, JavaScript’s, PHP, Cookies, Session,
MYSQL Database Manipulation (Insert, Delete, Update and
Retrieve), URL Redirecting, File Uploads, and WEB SERVICES.
Code: File name: index.php
<?php
include 'db/db.php';
include 'session.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$name = $_POST['name'];
$query = "INSERT INTO users (name) VALUES ('$name')";
$conn->query($query);
}
$result = $conn->query("SELECT * FROM users");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHP Session, CRUD, File Upload</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Navigation Bar -->
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="index.php">Insert User</a></li>
<li><a href="index.php">Update User</a></li>
<li><a href="index.php">Delete User</a></li>
<li><a href="index.php">Retrieve Users</a></li>
</ul>
</nav>
<div class="container">
<h1>Welcome, <?php echo $_SESSION['username']; ?>!</h1>
<!-- Form to Insert User -->
<h2>Insert User</h2>
<form action="index.php" method="POST">
<input type="text" name="name" placeholder="Enter name" required>
<button type="submit">Insert</button>
</form>
<!-- Display Users List -->
<h2>Users List</h2>
<ul>

98
Enrolment No.: 220840116069

<?php while ($row = $result->fetch_assoc()): ?>


<li><?php echo $row['name']; ?>
<span>
<a href="update.php?id=<?php echo $row['id']; ?>">Update</a>
<a href="delete.php?id=<?php echo $row['id']; ?>">Delete</a>
</span>
</li>
<?php endwhile; ?>
</ul>
<!-- File Upload Section -->
<h2>Upload File</h2>
<form action="upload.php" method="POST" enctype="multipart/form-data">
<input type="file" name="file" required>
<button type="submit">Upload</button>
</form>
</div>
<!-- Footer -->
<footer>
<p>&copy; 2024 prit rajput.</p>
</footer>
</body>
</html>
CSS code: File name: style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f9;
color: #333;
line-height: 1.6;
margin: 0;
}
nav {
background-color: #031573;
padding: 10px 0;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 20px;

99
Enrolment No.: 220840116069

}
nav ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
padding: 8px 16px;
transition: background 0.3s ease;
}
nav ul li a:hover {
background-color: #555;
border-radius: 4px;
}
.container {
max-width: 1200px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1, h2 {
text-align: center;
margin-bottom: 20px;
font-weight: 400;
color: #333;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
form input[type="text"],
form input[type="file"] {
width: 50%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
form button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
cursor: pointer;

100
Enrolment No.: 220840116069

border-radius: 4px;
transition: background 0.3s ease;
}
form button:hover {
background-color: #218838;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
background-color: #eee;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
ul li a {
padding: 5px 10px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
margin-left: 10px;
transition: background 0.3s ease;
}
ul li a:hover {
background-color: #0056b3;
}
footer {
text-align: center;
margin-top: 40px;
padding: 10px;
background-color: #333;
color: white;
position: relative;
bottom: 0;
width: 100%;
}
File name: db.php
<?php
$host = "localhost";
$user = "root";

101
Enrolment No.: 220840116069

$pass = "Your_password";
$dbname = "mydatabase";
$conn = new mysqli($host, $user, $pass, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
File name: session.php
<?php
session_start();
if (!isset($_SESSION['username'])) {
$_SESSION['username'] = 'guest';
}
setcookie("user", $_SESSION['username'], time() + 3600); // 1-hour expiration
?>
File name: delete.php
<?php
include 'db/db.php';
if (isset($_GET['id'])) {
$id = $_GET['id'];
$query = "DELETE FROM users WHERE id = $id";
$conn->query($query);
header("Location: index.php");
}
?>
File name: update.php
<?php
include 'db/db.php';
include 'session.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$id = $_POST['id'];
$name = $_POST['name'];
$query = "UPDATE users SET name='$name' WHERE id='$id'";
$conn->query($query);
header("Location: index.php");
exit();
}
if (isset($_GET['id'])) {
$id = $_GET['id'];
$result = $conn->query("SELECT * FROM users WHERE id='$id'");
$user = $result->fetch_assoc();
} else {
echo "No user ID specified.";
exit();
}

102
Enrolment No.: 220840116069

?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Update User</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Update User</h1>
<form action="update.php" method="POST">
<input type="hidden" name="id" value="<?php echo $user['id']; ?>">
<input type="text" name="name" value="<?php echo $user['name']; ?>"
required>
<button type="submit">Update</button>
</form>
</body>
</html>
File name: upload.php
<?php
// upload.php
if (isset($_FILES['file'])) {
$file_name = $_FILES['file']['name'];
$file_tmp = $_FILES['file']['tmp_name'];

if (move_uploaded_file($file_tmp, "uploads/" . $file_name)) {


echo "File uploaded successfully!";
} else {
echo "Failed to upload file.";
}
}
?>

103
Enrolment No.: 220840116069

OUTPUT

Fig. 8.2.1 – Welcome page

Fig. 8.2.2 – Update page

Fig. 8.2.3 – Updated Database

104
Enrolment No.: 220840116069

PRACTICAL – 9
AIM: Write a program of hello world using jQuery and Ajax.
HTML Code: File name: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World with jQuery and Ajax</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Hello World using jQuery and Ajax</h1>
<button id="helloButton">Get Hello World</button>
<div id="result"></div>
<script>
$(document).ready(function() {
$("#helloButton").click(function() {
$.ajax({
url: "hello.php", // URL of the PHP script
method: "GET",
success: function(data) {
$("#result").html(data); // Display the result
},
error: function() {
$("#result").html("Error occurred while fetching data.");
}
});
});
});
</script>
</body>
</html>
File name: hello.php
<?php
echo "Hello, World!";
?>

105
Enrolment No.: 220840116069

OUTPUT

Fig. 9.1 – Welcome page

Fig. 9.2 – Hello World by Ajax

106

You might also like