Scribd
Upload
24 views

WD Practical

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
24 views

WD Practical

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/ 91

Enrollment No.

220840116058

Practical – 1
1.1 WAP in HTML containing following tag.
- <h1 to h6> </h1 to /h6>
- <p></P>
- <br> and <hr>
- &nbsp;

<html>
<head>
<title>HTML TAGS</title>
<body>
<H1><b>the knowledge about HTML</b></H1>

<p>Hypertext Markup Language (HTML) is the standard markup language for documents
designed to be displayed in a web browser</p>
<hr>

<h2><b>use of HTML</b></h2>
<p>HTML is used to provide structure to a webpage and make it accessible to users of the
internet through text, visual formatting and search factors</p>
<hr>

<h3><b>tags of HTML</b></h3>
<p><!DOCTYPE> Defines the document type
html: Defines an HTML document <br>
head: Contains metadata/information for the document<br>
title: Defines a title for the document<br>
body: Defines the document's body<br>
h1 to h6: Defines HTML headings<br>
p: Defines a paragraph<br>
br: Inserts a single line break<br>
hr: Defines a thematic change in the content<br>

1|Page
Enrollment No. 220840116058

</p>
<hr>

<h4><b>Popular sites using HTML</b></h4>


<p>Google.com.<br>
Microsoft.com.<br>
Facebook.com.<br>
Apple.com.<br>
Youtube.com.<br>
Instagram.com.<br>
Linkedin.com.<br>
Office.com.</p>
<hr>
<h5> elements introduced in HTML5</h5>
<p>embed: Embeds external multimedia content like audio or video into an HTML
document.<br>
figure: Adds self-contained content like illustrations, diagrams, or photos.<br>
footer: Defines a footer containing information like author details and copyright.</p>
<hr>

<h6><b>The key HTML entities</b></h6>


<p>Non-breaking space:nbsp;<br>
Less than (<): lt;<br>
More than (>): gt;<br>
Ampersand (&): amp;<br>
Euro (€): euro;<br>
Pound (£): pound;<br>
double quotation mark (“): quot;</p>
<hr>

<p>example of nbsp tag<br>

2|Page
Enrollment No. 220840116058

Price of this beer: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; wait


for it... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 5 $</p>
</body>
</head>
</html>

Output :

3|Page
Enrollment No. 220840116058

Practical – 1.2
1.2 WAP in html which demonstrate all the formatting tag.

<!DOCTYPE html>
<html>
<head>
<title>HTML Formatting Tags Example</title>
</head>
<body>
<h1>Understanding HTML Elements</h1>
<h2>The Role of HTML in Web Development</h2>
<h3> HTML Forms and Input</h3>
<p>Tags are the basic units of HTML. They are used to create elements and define
the <b>structure</b> of a webpage. Tags are enclosed in angle brackets, like <strong>
tagname.</strong></p>
<p>HTML attributes provide additional information about elements. They are always
included in the opening tag and usually come in <i>name/value</i> pairs like
<em>name="value"</em> text.</p>
<p>The latest version of HTML, HTML5, introduces new elements and attributes that
provide better structure and <mark>functionality</mark> for web pages.</p>
<p>Semantic HTML uses elements that clearly describe their meaning in a human- and
machine-readable way. <small> Examples include</small> header, footer, and aside.</p>
<p>This is a paragraph with some <del>deleted</del> text and some <ins>inserted</ins>
text.</p>
<p>Links are created using the a tag. They can link to other web<sub> pages, files, email
addresses</sub> or any other <sup>URL.</sup> </p>
<pre>
This is preformatted text.
It preserves spaces and line breaks.
</pre>
</body>
</html>

4|Page
Enrollment No. 220840116058

Output :

5|Page
Enrollment No. 220840116058

Practical – 1.3
1.3 WAP in html which demonstrate <font> tag.

<!DOCTYPE html>
<html>
<head>
<title>Font Tag Example</title>
</head>
<body>
<h1>Using the <font> Tag</h1>
<p>HTML (HyperText Markup Language) is the standard language for creating web pages. It
uses a series of elements and tags to structure and format content on the web.</p>
<p>Tags are the basic units of HTML. They are used to create elements and define the
structure of a webpage. Tags are enclosed in angle brackets, <font color="red"> like
tagname.</font></p>
<p>Links are created using the <font size="5"> a </font> tag. They can link to other web
pages, files, email addresses, or any other URL.</p>
<p>HTML attributes provide additional information about elements. They are always
included in the opening tag and usually come in<font face="Arial">name/value pairs like
name="value".</font> </p>
<p>Tables are used to display data in a tabular format. They are created using the <font
color="blue" size="5" face="td">table, tr, th, and td</font> tags.</p>
</body>
</html>

Output :

6|Page
Enrollment No. 220840116058

Practical – 1.4
1.4 WAP in html which demonstrate all types of List.

<!DOCTYPE html>
<html>
<head>
<title>HTML Lists Example</title>
</head>
<body>
<h1>HTML Lists</h1>

<h2>Unordered List</h2>
<p>An unordered list starts with the <code><ul></code> tag. Each list item starts with the
<code><li></code> tag. The list items will be marked with bullets by default.</p>
<ul>
<li>HTML Elements</li>
<li>HTML Attributes</li>
<li>HTML Tags</li>
</ul>

<h2>Ordered List</h2>
<p>An ordered list starts with the <code><ol></code> tag. Each list item starts with the
<code><li></code> tag. The list items will be marked with numbers by default.</p>
<ol>
<li>HTML5 Introduction</li>
<li>HTML5 Semantic Elements</li>
<li>HTML5 Forms</li>
</ol>

<h2>Description List</h2>

7|Page
Enrollment No. 220840116058

<p>A description list is a list of terms, with a description of each term. The <code><dl></code>
tag defines the description list, the <code><dt></code> tag defines the term, and the
<code><dd></code> tag describes each term.</p>
<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>

Output :

8|Page
Enrollment No. 220840116058

Practical – 1.5
1.5 WAP in html which demonstrates color and back ground facility.

<!DOCTYPE html>
<html>
<head>
<title>HTML Color and Background Example</title>
</head>
<body bgcolor="#f0f0f0" text="#333">
<h1 style="background-color: #4CAF50; color: white; padding: 10px; text-align:
center;">Welcome to HTML Tutorial</h1>

<h2>Introduction to HTML</h2>
<p>HTML (HyperText Markup Language) is the standard language for creating web pages. It
uses a series of elements and tags to structure and format content on the web.</p>

<h2>HTML Elements</h2>
<p>HTML elements are the building blocks of web pages. They consist of a start tag, content,
and an end tag. For example, <code><p>This is a paragraph.</p></code> defines a paragraph
element.</p>

<h2>HTML Attributes</h2>
<p>HTML attributes provide additional information about elements. They are always
included in the opening tag and usually come in name/value pairs like
<code>name="value"</code>. For example, <code><a
href="https://www.example.com">Link</a></code>.</p>
</body>
</html>

9|Page
Enrollment No. 220840116058

Output :

10 | P a g e
Enrollment No. 220840116058

Practical 1.6
1.6 WAP in html which demonstrate anchor tag and href attribute to link up a
page.

<!DOCTYPE html>
<html>
<head>
<title>Anchor Tag Example</title>
</head>
<body>
<h1>HTML Anchor Tag Example</h1>

<p>HTML (HyperText Markup Language) is the standard language for creating web pages. It
uses a series of elements and tags to structure and format content on the web.</p>

<h2>Useful HTML Links</h2>


<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">Learn more about
HTML on MDN</a></li>
<li><a href="https://www.w3schools.com/html/">HTML Tutorial on W3Schools</a></li>
<li><a href="https://www.freecodecamp.org/news/the-a-href-attribute-
explained/">Understanding the href Attribute</a></li>
</ul>

<h2>Internal Links</h2>
<p><a href="#section1">Go to Section 1</a></p>
<p><a href="#section2">Go to Section 2</a></p>

<h2 id="section1">Section 1</h2>


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

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


11 | P a g e
Enrollment No. 220840116058

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

<h2>Mailto Link</h2>
<p>If you have any questions, feel free to <a href="mailto:[email protected]">email
us</a>.</p>
</body>
</html>

Output :

12 | P a g e
Enrollment No. 220840116058

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>World Map Image Map</title>
</head>
<body>

<h1>World Map with Clickable Areas</h1>

<p>Click on the highlighted regions of the world map to learn more about different
countries:</p>

<img src="https://via.placeholder.com/800x400" alt="World Map" usemap="#world-map"


style="max-width: 100%; height: auto;">

<map name="world-map">

<area shape="rect" coords="50,50,150,150"


href="https://en.wikipedia.org/wiki/North_America" alt="North America" title="North
America">

<area shape="circle" coords="200,250,40"


href="https://en.wikipedia.org/wiki/South_America" alt="South America" title="South
America">

<area shape="poly" coords="300,50,350,80,330,120,290,100"


href="https://en.wikipedia.org/wiki/Europe" alt="Europe" title="Europe">

13 | P a g e
Enrollment No. 220840116058

<area shape="poly" coords="350,200,400,250,350,300,300,270"


href="https://en.wikipedia.org/wiki/Africa" alt="Africa" title="Africa">

<area shape="poly" coords="500,50,600,100,580,150,470,120"


href="https://en.wikipedia.org/wiki/Asia" alt="Asia" title="Asia">

<area shape="poly" coords="650,300,700,350,650,400,600,350"


href="https://en.wikipedia.org/wiki/Australia" alt="Australia" title="Australia">
</map>

<p>In the map above:</p>


<ul>
<li>Clicking on the rectangle takes you to North America.</li>
<li>Clicking on the circle directs you to South America.</li>
<li>Clicking on the polygons will take you to Europe, Africa, Asia, or Australia.</li>
</ul>

</body>
</html>

14 | P a g e
Enrollment No. 220840116058

Output :

15 | P a g e
Enrollment No. 220840116058

Practical – 1.8
1.4 . WAP in html to demonstrate practical list document using fully
<table>tag.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IT Practical List Document</title>
</head>
<body>
<h1>IT Practical Assignment List</h1>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th>Practical Name</th>
<th>Technology/Language Used</th>
<th>Marks</th>
<th>Submission Status</th>
</tr>
<tr>
<td>Website Design</td>
<td>HTML, CSS</td>
<td>50</td>
<td>Submitted</td>
</tr>
<tr>
<td>Interactive Form Design</td>
<td>HTML, JavaScript</td>
<td>45</td>

16 | P a g e
Enrollment No. 220840116058

<td>Submitted</td>
</tr>
<tr>
<td>Database Connection</td>
<td>PHP, MySQL</td>
<td>40</td>
<td>Not Submitted</td>
</tr>
<tr>
<td>Android App Development</td>
<td>Java, Android Studio</td>
<td>50</td>
<td>Submitted</td>
</tr>
<tr>
<td>Data Visualization</td>
<td>Python, Matplotlib</td>
<td>48</td>
<td>Submitted</td>
</tr>
<tr>
<td>REST API Development</td>
<td>Node.js, Express.js</td>
<td>50</td>
<td>Not Submitted</td>
</tr>
</table>
</body>
</html>

17 | P a g e
Enrollment No. 220840116058

Output :

18 | P a g e
Enrollment No. 220840116058

Practical – 1.9
1.9 . WAP in html which demonstrate <frameset><frame><noframe> and
<iframe>

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

<h1>Frameset, Frame, Noframes, and Iframe Example</h1>

<frameset cols="30%,70%">

<frame src="https://www.example.com" name="navigation">

<frame src="https://www.wikipedia.org" name="content">

<noframes>
<p>Your browser does not support frames. Please visit the pages directly:</p>
<ul>
<li><a href="https://www.example.com">Example.com</a></li>
<li><a href="https://www.wikipedia.org">Wikipedia.org</a></li>
</ul>
</noframes>
</frameset>

19 | P a g e
Enrollment No. 220840116058

<h2>Iframe Example</h2>
<p>Below is an example of an embedded page using the <code>&lt;iframe&gt;</code>
tag:</p>

<iframe src="https://www.wikipedia.org" width="600" height="400" frameborder="1">


Your browser does not support iframes.
</iframe>

</body>
</html>

Output :

20 | P a g e
Enrollment No. 220840116058

Practical – 2
2 . Design student Time Table using HTML tag.

<html>
<head>
<title>time table</title>
<body>
<table bgcolor="black" align="center">
<h1 align="center">time table</h1>
<tr bgcolor = "grey">
<th><b>days</b> <br> time</th>
<th><b>monday</b></th>
<th> tuesday </th>
<th>wednesday</th>
<th>tursday</th>
<th>friday</th>
<th>saturday</th>
</tr>
<tr bgcolor="lightgrey" align="center">
<td align = "center"><b>1</b><br><b>10:00 - 11:00</b></td>
<td>ADA</td>
<td rowspan="2"> ADA LAB B-222 </td>
<td>DA</td>
<td>WD</td>
<td rowspan="2"> CN lab b-222</td>
<td rowspan="2"> DA lab b-211/222 </td>
</tr>
<tr bgcolor = "lightgrey", align="center">
<td><b>2</b><br><b>11:00 - 12:00</b></td>
<td>PE</td>
<td>DA</td>
<td>cn</td>

21 | P a g e
Enrollment No. 220840116058

<tr bgcolor="lightgrey" align="center">


<td><b>3</b><br><b>12:00 - 12:45</b></td>
<td colspan="6">break</td>
</tr>
</tr>
<tr bgcolor="lightgrey" align="center">
<td><b>4</b> <br><b>12:45 - 1:45 </b></td>
<td>CN</td>
<td>ADA</td>
<td>ADA</td>
<td>DE</td>
<td>CN</td>
<td ROWSPAN="2">CN LAB B-222</td>
</tr>
<tr bgcolor="lightgrey" align="center">
<td><b>5</b><br><b>1:45 - 2:45</b></td>
<td>IPDC</td>
<td>ADA</td>
<td>WD</td>
<td>WD</td>
<td>PE</td>
</tr>
<tr bgcolor="lightgrey" align="center">
<td><b>6</b><br><b>2:45 - 3:00</b></td>
<td colspan="6">break</td>
</tr>
<tr bgcolor="lightgrey" align="center">
<td><b>7</b><br><b>3:00 - 4:00</b></td>
<td>CS</td>
<td rowspan="2">CS LAB B-222</td>
<td>CN</td>
<td rowspan="2">WD LAB B-222</td>
<td>CS</td>
22 | P a g e
Enrollment No. 220840116058

<td rowspan="2">DE LAB B-222</td>


</tr>
<tr bgcolor="lightgrey" align="center">
<td><b>8</b> <br> <b>4:00 - 5:00</b></td>
<td>IPDC</td>
<td>PE</td>
<td>DA</td>
</tr>
</table>
</body>
</head>
</html>

Output :

23 | P a g e
Enrollment No. 220840116058

Practical – 3
3 . Design HTML form for the Student registration application.

<!DOCTYPE html>
<html>
<head>
<title>Student Registration Form</title>
</head>
<body>
<h2>Student Registration Form</h2>
<form>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="first-name" required><br><br>

<label for="last-name">Last Name:</label>


<input type="text" id="last-name" name="last-name" required><br><br>

<label for="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob" required><br><br>

<label for="email">Email Address:</label>


<input type="email" id="email" name="email" required><br><br>

<label for="mobile">Mobile:</label>
<input type="tel" id="mobile" name="mobile" required><br><br>

<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
24 | P a g e
Enrollment No. 220840116058

<option value="other">Other</option>
</select><br><br>

<label for="address">Address:</label>
<textarea id="address" name="address" required></textarea><br><br>

<label for="city">City:</label>
<input type="text" id="city" name="city" required><br><br>

<label for="pin-code">Pin Code:</label>


<input type="text" id="pin-code" name="pin-code" required><br><br>

<label for="state">State:</label>
<input type="text" id="state" name="state" required><br><br>

<label for="country">Country:</label>
<input type="text" id="country" name="country" required><br><br>

<button type="reset">Reset</button>
<button type="submit">Submit</button>
</form>
</body>
</html>

25 | P a g e
Enrollment No. 220840116058

Output :

26 | P a g e
Enrollment No. 220840116058

Practical – 4
4 . Design HTML Page using various tags of HTML5.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Example Page</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<main>
<section id="home">
<h2>Home</h2>
<p>This is the home section of the website.</p>
<figure>
<img src="C:\Users\pk438\Desktop\image\image2.png" >
<figcaption>An example image</figcaption>
</figure>

27 | P a g e
Enrollment No. 220840116058

</section>

<section id="about">
<h2>About</h2>
<p>This section contains information about the website.</p>
<article>
<h3>Article Title</h3>
<p>This is an article within the about section.</p>
</article>
</section>

<section id="contact">
<h2>Contact</h2>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<br>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<br>
<br>
<button type="submit">Submit</button>
</form>
</section>
</main>

28 | P a g e
Enrollment No. 220840116058

<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>

Output :

29 | P a g e
Enrollment No. 220840116058

Practical – 5.1
5.1 . Develop HTML Page using CSS Internal (It should include cover image,
color,text, font, border, box, and margin) write the code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern HTML Page</title>
<style>
/* Internal CSS for the body and general layout */
body {
font-family: 'Verdana', sans-serif;
background-color: #f0f8ff;
color: #333;
margin: 0;
padding: 0;
}

/* Styling for the cover image section */


.cover {
background-image: url('https://via.placeholder.com/1200x500');
height: 500px;
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
color: white;
text-align: center;
30 | P a g e
Enrollment No. 220840116058

padding: 20px;
border-bottom: 5px solid #005f73;
}

.cover h1 {
font-size: 60px;
background-color: rgba(0, 95, 115, 0.7);
padding: 20px;
border-radius: 15px;
}

/* Content styling */
.content {
margin: 40px;
padding: 20px;
background-color: #ffffff;
border: 2px solid #cce7e8;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.content h2 {
color: #0a9396;
font-size: 28px;
margin-bottom: 20px;
}

.content p {
font-size: 18px;
line-height: 1.8;
margin-bottom: 20px;
31 | P a g e
Enrollment No. 220840116058

/* Example of a styled box within the content */


.box {
border: 3px solid #005f73;
padding: 15px;
background-color: #94d2bd;
margin-top: 30px;
border-radius: 8px;
}

.box h3 {
color: #001219;
margin-bottom: 10px;
}

.box p {
color: #333;
}

/* Footer styling */
.footer {
background-color: #005f73;
color: white;
text-align: center;
padding: 15px;
margin-top: 50px;
}

.footer p {
margin: 0;
32 | P a g e
Enrollment No. 220840116058

font-size: 16px;
}

</style>
</head>
<body>

<!-- Cover Section -->


<div class="cover">
<h1>Explore the World of CSS</h1>
</div>

<!-- Content Section -->


<div class="content">
<h2>Introduction to HTML and CSS</h2>
<p>HTML (Hypertext Markup Language) is the standard language for creating web pages.
CSS (Cascading Style Sheets) is used to style and layout web pages, including color, fonts, and
spacing.</p>
<p>This page demonstrates the use of CSS for styling a simple web page. It includes a
cover image, custom colors, fonts, borders, and margins.</p>

<!-- Example of a Styled Box -->


<div class="box">
<h3>Learn More About Styling</h3>
<p>CSS allows you to create visually appealing web pages by controlling the layout,
fonts, colors, and much more.</p>
</div>
</div>

<!-- Footer Section -->


<div class="footer">
<p>&copy; 2024 Web Design Basics</p>

33 | P a g e
Enrollment No. 220840116058

</div>

</body>
</html>

Output :

34 | P a g e
Enrollment No. 220840116058

Practical – 5.2
5.2 - Develop HTML Page using CSS External (It should include cover image,
colour, text, font, border, box, and margin).

HTML :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Web Page with External CSS</title>

<link rel="stylesheet" href="styles.css">


</head>
<body>

<header class="cover">
<h1>Welcome to My Styled Web Page</h1>
<p>Explore the beautiful design powered by external CSS.</p>
</header>

<div class="content">
<h2>About This Page</h2>
<p>This page demonstrates the use of an external CSS file to style an HTML page. It
includes elements like cover image, colors, fonts, borders, and margins.</p>

<h2>Features</h2>
<ul>

35 | P a g e
Enrollment No. 220840116058

<li>Cover image</li>
<li>Custom colors</li>
<li>Text styling with different fonts</li>
<li>Box elements with borders</li>
<li>Margin and padding management</li>
</ul>

<div class="box">
<h3>Styled Box</h3>
<p>This is an example of a box element with a border, margin, and padding applied
through external CSS.</p>
</div>
</div>

</body>
</html>

Style.css :

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

.cover {
background-image: url('https://via.placeholder.com/1200x400');
background-size: cover;
background-position: center;

36 | P a g e
Enrollment No. 220840116058

height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #ffffff;
text-align: center;
padding: 20px;
}

.cover h1 {
font-size: 48px;
margin: 0;
}

.cover p {
font-size: 20px;
margin-top: 10px;
}

.content {
margin: 40px;
}

h2 {
color: #240046;
font-family: 'Georgia', serif;
margin-bottom: 20px;
}

p, li {
37 | P a g e
Enrollment No. 220840116058

font-size: 18px;
line-height: 1.6;
}

.box {
background-color: #E0AAFF;
border: 2px solid #240046;
padding: 20px;
margin: 20px 0;
border-radius: 10px;
}

.box h3 {
margin-top: 0;
font-family: 'Verdana', sans-serif;
color: #240046;
}

footer {
background-color: #240046;
color: white;
text-align: center;
padding: 10px;
position: absolute;
width: 100%;
bottom: 0;
}

footer p {
margin: 0;
font-size: 14px;
38 | P a g e
Enrollment No. 220840116058

Output :

39 | P a g e
Enrollment No. 220840116058

Practical – 5.3
5.3 -Develop HTML Page using CSS Inline Style Sheet (It should include
cover image, color, text, font, border, box, and margin).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Travel Blog</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 0; background-color: #f0f0f0;">

<header style="background-color: #ff6f61; color: white; text-align: center; padding: 20px;">


<h1 style="margin: 0;">Welcome to My Travel Blog!</h1>
<p style="font-size: 20px;">Join me on my adventures around the world!</p>
</header>

<div style="display: flex; flex-wrap: wrap; justify-content: center; padding: 20px;">

<div style="background-color: white; border: 2px solid #ff6f61; border-radius: 10px;


width: 300px; margin: 20px; padding: 15px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
<img src="C:\Users\pk438\Desktop\image\paris.png" alt="Paris" style="width: 100%;
border-radius: 10px;">
<h2 style="color: #ff6f61; margin-top: 10px;">Paris</h2>
<p style="font-size: 16px;">The city of lights! Experience the romance and beauty of
Paris.</p>
</div>
<div style="background-color: white; border: 2px solid #ff6f61; border-radius: 10px;
width: 300px; margin: 20px; padding: 15px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
<img src="C:\Users\pk438\Desktop\image\bali.png" alt="Bali" style="width: 100%;
border-radius: 10px;">

40 | P a g e
Enrollment No. 220840116058

<h2 style="color: #ff6f61; margin-top: 10px;">Bali</h2>


<p style="font-size: 16px;">A tropical paradise filled with stunning beaches and rich
culture.</p>
</div>
<div style="background-color: white; border: 2px solid #ff6f61; border-radius: 10px;
width: 300px; margin: 20px; padding: 15px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
<img src="C:\Users\pk438\Desktop\image\tokyo.png" alt="Tokyo" style="width: 100%;
border-radius: 10px;">
<h2 style="color: #ff6f61; margin-top: 10px;">Tokyo</h2>
<p style="font-size: 16px;">A bustling metropolis blending tradition and modernity in
perfect harmony.</p>
</div>
</div>
</body>
</html>

Output :

41 | P a g e
Enrollment No. 220840116058

Practical – 6.1
6.1 - Develop applications using JavaScript, Make an application which check
user name and password with java script. And user name and password are
correct then navigate next page.

<html>
<head>
<title>prac 6.1</title>
<script>
function demo(f1)
{
var a=f1.name.value;
var b=f1.pass.value;
if(a=="kashish" && b=="123")
{
alert("you are successfully logged in.");

}
else{
alert("your name or password may be wrong.");
}
}
</script>
</head>
<body>
<form name="form1">
Enter Name :<input type="text" id="name" /><br></br>
Password: <input type="password" id="pass"/><br></br>
<button type="button" onclick="demo(form1)">submit</button>
</form>
</body>

42 | P a g e
Enrollment No. 220840116058

</html>

Output :

43 | P a g e
Enrollment No. 220840116058

Practical - 6.2
6.2 Make an application which check mobile number (number should be
started with 9 or 8) and mail id (check @ and .)

<!DOCTYPE html>
<html>
<head>
<title>prac 6.2</title>
<script>
function demo(f1) {
var a = f1.email.value;
var b = f1.phone.value;
var c = /^[A-Za-z0-9.-]+@[A-Za-z]+\.[A-Za-z]+$/;
if (c.test(a) == true) {
if (b.length == 10) {
if (b.charAt(0) == '9' || b.charAt(0) == '8') {
alert("Validation success.");
} else {
alert("Mobile number is wrong.");
}

} else {
alert("Mobile number is wrong.");
}

} else {
alert("Email is wrong.");
}
}

</script>
</head>
<body>

44 | P a g e
Enrollment No. 220840116058

<form name="form1">
Enter Email: <input type="email" name="email" /><br><br>
Phone No.: <input type="text" name="phone" maxlength="10" /><br><br>
<button type="button" onclick="demo(this.form)">Submit</button>
</form>
</body>
</html>

Output :

45 | P a g e
Enrollment No. 220840116058

practical – 6.3
6.3 - Write a JavaScript that uses function to calculate how many days are
left in your birthday?

<!DOCTYPE html>
<html>
<head>
<script>
var mm = Number(prompt('What month is your birthday (1-12)?', ''));
mm = mm - 1;
var dd = Number(prompt('What day is your birthday (1-31)?', ''));
var d2 = new Date();
var bday = new Date();
var yy = bday.getFullYear();
bday.setDate(dd);
bday.setMonth(mm);
bday.setFullYear(yy + 1);
var result = Math.floor((bday.getTime() - d2.getTime()) / (1000 * 60 * 60 * 24));
if (result >= 365) {
result = result - 365;
}
document.write(result + " days are left until your birthday");
</script>
</head>
</html>

46 | P a g e
Enrollment No. 220840116058

Output :

48 | P a g e
Enrollment No. 220840116058

Practical – 6.4
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.

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<script language="javascript">
function search(form1) {
var sentence = form1.input.value;
var pattern = prompt("Enter the word to be searched for:", "");
var temp = sentence.split(" ");
for (var i = 0; i < temp.length; i++) {
if (temp[i] === pattern) {
alert("The word is at position: " + (i + 1));
return;
}
}
alert("The word was not found.");
}
</script>
</head>
<body>
<form name="form1">
<b>Enter The Sentence</b>
<input type="text" name="input"><br/>
<input type="button" value="Click Me" onclick="search(this.form)">
</form>
</body>

49 | P a g e
Enrollment No. 220840116058

</html>

Output :

50 | P a g e
Enrollment No. 220840116058

Practical – 6.5
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”.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Find 'a' Positions</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
input, button {
margin-top: 10px;
}

</style>
</head>
<body>
<h1>Find Positions of 'a'</h1>
<input type="text" id="inputWord" placeholder="Enter a word" />
<button onclick="findA()">Find 'a'</button>

<h2>Results:</h2>
<p id="result"></p>

51 | P a g e
Enrollment No. 220840116058

<script>
function findA() {
const word = document.getElementById('inputWord').value;
const firstIndex = word.indexOf('a');
const lastIndex = word.lastIndexOf('a');

if (firstIndex === -1) {


document.getElementById('result').innerText = "No occurrence of 'a' found.";
return;
}

const substring = word.substring(firstIndex + 1, lastIndex);


document.getElementById('result').innerText = `
First occurrence of 'a': Position ${firstIndex}
Last occurrence of 'a': Position ${lastIndex}
String between them: "${substring}"
`;
}

</script>
</body>
</html>

52 | P a g e
Enrollment No. 220840116058

Output :

53 | P a g e
Enrollment No. 220840116058

Practical – 6.6
6.6 Write a JavaScript which accepts N as input and display first N Fibonacci
numbers as list

<!DOCTYPE html>
<html>
<head>
<title>Fibonacci Sequence</title>
</head>
<body>
<input type="number" id="num" placeholder="Enter a number">
<button onclick="generateFibonacci()">Generate</button>
<ul id="fibonacciList"></ul>

<script>
function generateFibonacci() {
const n = parseInt(document.getElementById('num').value);
if (isNaN(n) || n <= 0) {
alert('Please enter a valid positive number');
return;
}

const fibonacciList = document.getElementById('fibonacciList');


fibonacciList.innerHTML = '';

let fib = [0, 1];


for (let i = 2; i < n; i++) {
fib[i] = fib[i-1] + fib[i-2];
}

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


54 | P a g e
Enrollment No. 220840116058

const listItem = document.createElement('li');


listItem.textContent = fib[i];
fibonacciList.appendChild(listItem);
}
}
</script>
</body>
</html>

Output :

55 | P a g e
Enrollment No. 220840116058

Practical – 6.7
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

<!DOCTYPE html>
<html>
<head>
<title>Mouse Events</title>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<input type="text" id="keyInput" placeholder="Press a key">

<script>
const inputElement = document.getElementById('keyInput');

inputElement.addEventListener('keydown', function(event) {
const key = event.key;
const keyCode = event.keyCode || event.which;
console.log('Key pressed:', key, 'Key code:', keyCode);

if (['a', 'e', 'i', 'o', 'u'].includes(key.toLowerCase())) {


alert('Vowel is pressed');
56 | P a g e
Enrollment No. 220840116058

}
});

inputElement.addEventListener('keyup', function() {
document.body.style.backgroundColor = 'blue';
});
</script>
</body>
</html>

Output :

57 | P a g e
Enrollment No. 220840116058

Practical – 6.8
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)

<!DOCTYPE html>
<html>
<head>
<title>Odd Position Characters</title>
</head>
<body>
<input type="text" id="inputString" placeholder="Enter a string">
<button onclick="printOddCharacters()">Print Odd Characters</button>
<div id="result"></div>

<script>
function printOddCharacters() {
const inputString = document.getElementById('inputString').value;
let result = '';

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


if (i % 2 === 0) {
result += inputString[i] + ', ';
}
}

if (result.length > 0) {
result = result.substring(0, result.length - 2);
}

document.getElementById('result').innerText = result;

58 | P a g e
Enrollment No. 220840116058

}
</script>
</body>
</html>

Output :

59 | P a g e
Enrollment No. 220840116058

Practical – 6.9
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)

<!DOCTYPE html>
<html>
<head>
<title>Multiply Digits</title>
</head>
<body>
<input type="text" id="twoDigitNumber" placeholder="Enter a 2-digit number">
<button onclick="multiplyDigits()">Multiply</button>
<div id="result"></div>

<script>
function multiplyDigits() {
const input = document.getElementById('twoDigitNumber').value;
if (input.length !== 2 || isNaN(input)) {
alert('Please enter a valid 2-digit number');
return;
}

const firstDigit = parseInt(input[0]);


const secondDigit = parseInt(input[1]);

let result = 1;
for (let i = 0; i < secondDigit; i++) {
result *= firstDigit;
}

60 | P a g e
Enrollment No. 220840116058

document.getElementById('result').innerText = `Result: ${result}`;


}
</script>
</body>
</html>

Output :

61 | P a g e
Enrollment No. 220840116058

Practical – 6.10
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.

<!DOCTYPE html>
<html>
<head>
<title>Mouse Events</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: black;
}
</style>
</head>
<body>
<h1 id="heading">Hover over this heading</h1>
<button onclick="showTime()">Find Time</button>
<button onclick="changeBackgroundColor('red')">Red</button>
<button onclick="changeBackgroundColor('green')">Green</button>
<button onclick="changeBackgroundColor('pink')">Pink</button>
<div id="time"></div>

<script>

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

function showTime() {
const now = new Date();
const timeString = now.toLocaleTimeString();
const dateString = now.toLocaleDateString();
document.getElementById('time').innerText = `Current Time: ${timeString}, Date:
${dateString}`;
}

62 | P a g e
Enrollment No. 220840116058

function changeBackgroundColor(color) {
document.body.style.backgroundColor = color;
}
</script>
</body>
</html>

Output :

63 | P a g e
Enrollment No. 220840116058

Practical – 6.11
6.11 Write a program that convert a string written in JSON format, into a
JavaScript object.

<!DOCTYPE html>
<html>
<head>
<title>JSON to JavaScript Object</title>
</head>
<body>
<script>
const jsonString = '{"name": "ABC", "age": 19, "city": "XYZ"}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject);
document.write("Name: " + jsonObject.name + "<br>");
document.write("Age: " + jsonObject.age + "<br>");
document.write("City: " + jsonObject.city);
</script>
</body>
</html>

Output :

64 | P a g e
Enrollment No. 220840116058

Practical 7.1
7.1 - Write a PHP program to find whether entered year is leap year or not.

<!DOCTYPE html>
<html>
<head>
<title>Leap Year Checker</title>
</head>
<body>
<form method="post">
Enter a Year: <input type="number" name="year">
<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 "$year is a leap year.";
} else {
echo "$year is not a leap year.";
}
}
?>
</body>
</html>

65 | P a g e
Enrollment No. 220840116058

Output :

66 | P a g e
Enrollment No. 220840116058

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

<!DOCTYPE html>
<html>
<head>
<title>Table of Cubes</title>
</head>
<body>
<table border="1">
<tr>
<th>Number</th>
<th>Cube</th>
</tr>
<?php
for ($i = 1; $i <= 10; $i++) {
echo "<tr><td>$i</td><td>" . ($i * $i * $i) . "</td></tr>";
}
?>
</table>
</body>
</html>

67 | P a g e
Enrollment No. 220840116058

Output :

68 | P a g e
Enrollment No. 220840116058

Practical – 7.3
7.3 Write a PHP program to read a text file and store it in array and display
the content of array.

<!DOCTYPE html>
<html>
<head>
<title>Read File into Array</title>
</head>
<body>
<?php
$filePath = 'example.txt';
$fileContents = file($filePath, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
if ($fileContents !== false) {
echo '<pre>';
print_r($fileContents);
echo '</pre>';
} else {
echo 'Failed to read the file.';
}
?>
</body>
</html>

69 | P a g e
Enrollment No. 220840116058

Output :

70 | P a g e
Enrollment No. 220840116058

Practical – 7.4
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.

<!DOCTYPE html>
<html>
<head>
<title>Employee Information</title>
</head>
<body>
<?php

$employees = [
["id" => 1, "job_title" => "Software Engineer", "years_of_experience" => 5],
["id" => 2, "job_title" => "Project Manager", "years_of_experience" => 10],
["id" => 3, "job_title" => "Intern", "years_of_experience" => 1],
["id" => 4, "job_title" => "Senior Developer", "years_of_experience" => 8],
["id" => 5, "job_title" => "HR Manager", "years_of_experience" => 6],
];

function sortByExperience($a, $b) {


return $a['years_of_experience'] - $b['years_of_experience'];
}

usort($employees, 'sortByExperience');
?>

<h2>Employee Information</h2>
<table border="1">
<tr>

71 | P a g e
Enrollment No. 220840116058

<th>Employee ID</th>
<th>Job Title</th>
<th>Years of Experience</th>
</tr>
<?php

foreach ($employees as $employee) {


echo "<tr>";
echo "<td>{$employee['id']}</td>";
echo "<td>{$employee['job_title']}</td>";
echo "<td>{$employee['years_of_experience']}</td>";
echo "</tr>";
}
?>
</table>
</body>
</html>

Output :

72 | P a g e
Enrollment No. 220840116058

Practical – 7.5
7.5 Make a simple login form using cookie and session.

<?php
session_start();

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

if ($_SERVER['REQUEST_METHOD'] === 'POST') {


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

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

$_SESSION['username'] = $username;
setcookie('username', $username, time() + (86400 * 30), "/");
header('Location: ' . $_SERVER['PHP_SELF']);
exit();
} else {
echo 'Invalid credentials';
}
}

if (isset($_GET['logout'])) {
session_destroy();
setcookie('username', '', time() - 3600, "/");
header('Location: ' . $_SERVER['PHP_SELF']);
exit();
}

73 | P a g e
Enrollment No. 220840116058

?>
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<?php if (isset($_SESSION['username'])): ?>
<h2>Welcome, <?php echo $_SESSION['username']; ?>!</h2>
<p>(from cookie: <?php echo $_COOKIE['username']; ?>)</p>
<a href="?logout=true">Logout</a>
<?php else: ?>
<h2>Login Form</h2>
<form method="post" action="">
<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>
<h3>Valid Credentials:</h3>
<p>Username: <?php echo $valid_username; ?></p>
<p>Password: <?php echo $valid_password; ?></p>
<?php endif; ?>
</body>
</html>

74 | P a g e
Enrollment No. 220840116058

Output :

75 | P a g e
Enrollment No. 220840116058

Practical – 8.1
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.

<?php
// Connect to the database
$conn = new mysqli('localhost', 'root', '', 'student_db');
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Initialize variables
$action = $name = $pen = $gender = $branch = $semester = $contact = $address =
$new_column = '';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$action = $_POST['action'] ?? '';
$id = $_POST['id'] ?? '';
$name = $_POST['name'] ?? '';
$pen = $_POST['pen'] ?? '';
$gender = $_POST['gender'] ?? '';
$branch = $_POST['branch'] ?? '';
$semester = $_POST['semester'] ?? '';
$contact = $_POST['contact'] ?? '';
$address = $_POST['address'] ?? '';
$new_column = $_POST['new_column'] ?? '';

if ($action == 'Insert') {

76 | P a g e
Enrollment No. 220840116058

$sql = "INSERT INTO students (name, pen, gender, branch, semester, contact, address)
VALUES ('$name', '$pen', '$gender', '$branch', '$semester', '$contact', '$address')";
} elseif ($action == 'Update') {
$sql = "UPDATE students SET name='$name', pen='$pen', gender='$gender',
branch='$branch', semester='$semester', contact='$contact', address='$address' WHERE id=$id";
} elseif ($action == 'Delete') {
$sql = "DELETE FROM students WHERE id=$id";
}

if (!empty($sql) && $conn->query($sql) === TRUE) {


echo "Record $action successfully!";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}

// Alter table to add a new column


if (isset($_POST['alter'])) {
$sql = "ALTER TABLE students ADD $new_column VARCHAR(255)";
if (!empty($new_column) && $conn->query($sql) === TRUE) {
echo "Column added successfully!";
} else {
echo "Error adding column: " . $conn->error;
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Student Information</title>
</head>
<body>
77 | P a g e
Enrollment No. 220840116058

<h2>Student Information Form</h2>


<form method="post" action="">
<label for="id">ID (for update/delete):</label>
<input type="text" id="id" name="id"><br><br>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="pen">PEN:</label>
<input type="text" id="pen" name="pen" required><br><br>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label><br><br>
<label for="branch">Branch:</label>
<select id="branch" name="branch" required>
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ECE">ECE</option>
<option value="EEE">EEE</option>
</select><br><br>
<label for="semester">Semester:</label>
<input type="number" id="semester" name="semester" required><br><br>
<label for="contact">Contact Number:</label>
<input type="text" id="contact" name="contact" required pattern="[0-9]{10}"><br><br>
<label for="address">Address:</label>
<textarea id="address" name="address" required></textarea><br><br>
<button type="submit" name="action" value="Insert">Insert</button>
<button type="submit" name="action" value="Update">Update</button>
<button type="submit" name="action" value="Delete">Delete</button>
</form>

78 | P a g e
Enrollment No. 220840116058

<h2>Alter Table</h2>
<form method="post" action="">
<label for="new_column">New Column Name:</label>
<input type="text" id="new_column" name="new_column" required>
<button type="submit" name="alter" value="alter">Add Column</button>
</form>

<h2>Retrieve Students</h2>
<table border="1">
<tr>
<th>ID</th>
<th>Name</th>
<th>PEN</th>
<th>Gender</th>
<th>Branch</th>
<th>Semester</th>
<th>Contact</th>
<th>Address</th>
</tr>
<?php
$result = $conn->query("SELECT * FROM students");
while ($row = $result->fetch_assoc()) {
echo "<tr>
<td>{$row['id']}</td>
<td>{$row['name']}</td>
<td>{$row['pen']}</td>
<td>{$row['gender']}</td>
<td>{$row['branch']}</td>
<td>{$row['semester']}</td>
<td>{$row['contact']}</td>
<td>{$row['address']}</td>

79 | P a g e
Enrollment No. 220840116058

</tr>";
}
?>
</table>
</body>
</html>

Output :

80 | P a g e
Enrollment No. 220840116058

Practical – 8.2
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.

File : 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>
81 | P a g e
Enrollment No. 220840116058

</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>
<?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>
File : css/style.css

*{
82 | P a g e
Enrollment No. 220840116058

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

83 | P a g e
Enrollment No. 220840116058

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; border-radius: 4px;
transition: background 0.3s ease;
}
form button:hover { background-color:
#218838;
}
ul {

84 | P a g e
Enrollment No. 220840116058

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

85 | P a g e
Enrollment No. 220840116058

File : db/db.php

<?php
$host = "localhost";
$user = "root";
$pass = "Your_password";
$dbname = "mydatabase";
$conn = new mysqli($host, $user, $pass, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>

File : session.php

<?php
session_start();
if (!isset($_SESSION['username'])) {
$_SESSION['username'] = 'guest';
}
setcookie("user", $_SESSION['username'], time() + 3600); // 1-hour expiration
?>

File : 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");
}
?>

86 | P a g e
Enrollment No. 220840116058

File : 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();
}
?>
<!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>

87 | P a g e
Enrollment No. 220840116058

</form>
</body>
</html>

File : 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.";
}
}
?>

Output :

88 | P a g e
Enrollment No. 220840116058

89 | P a g e
Enrollment No. 220840116058

Practical – 9
9. Write a program of hello world using jQuery and Ajax

Prac9.html :
<!DOCTYPE html>
<html>
<head>
<title>Hello World using jQuery and Ajax</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>Click the button to get a message:</h2>
<button id="helloButton">Get Message</button>
<div id="message"></div>

<script>
$(document).ready(function() {
$("#helloButton").click(function() {
$.ajax({
url: "hello.php",
method: "GET",
success: function(response) {
$("#message").html(response);
},
error: function() {
$("#message").html("Error loading message.");
}
});
});
});
</script>
90 | P a g e
Enrollment No. 220840116058

</body>
</html>

Hello.php :
<?php
echo "Hello, World!";
?>

Output :

91 | P a g e

You might also like