Scribd
Upload
28 views100 pages

Web Development Using PHP 225-UCS-032

The document outlines a lab file for a Web Development project using PHP, specifically an Attendance Portal. It includes HTML code for various user interfaces such as login, admin dashboard, parent dashboard, student dashboard, and teacher dashboard, along with a CSS stylesheet for styling. The project is submitted by Kunal Singh and Priyanshu Chaudhary at Gautam Buddha University.

Uploaded by

KUNAL SINGH
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
28 views100 pages

Web Development Using PHP 225-UCS-032

The document outlines a lab file for a Web Development project using PHP, specifically an Attendance Portal. It includes HTML code for various user interfaces such as login, admin dashboard, parent dashboard, student dashboard, and teacher dashboard, along with a CSS stylesheet for styling. The project is submitted by Kunal Singh and Priyanshu Chaudhary at Gautam Buddha University.

Uploaded by

KUNAL SINGH
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/ 100

A

Lab File
Web Development Using PHP Lab (CS 382)
Submitted By:

Student Name: Kunal Singh

University Roll No.: 225/UCS/032

Branch: CSE-III-(A)

Group: 1

Submitted To:

Dr. Rakesh Kumar

GAUTAM BUDDHA UNIVERSITY

GAUTAM BUDH NAGAR, GREATER NOIDA

UP (INDIA)
UI
Attendance Portal
Attendance Portal
UI code
UI Code

Team
Kunal Singh - 225/UCS/032
Priyanshu Chaudhary - 225/UCS/047

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attendance Portal - Login</title>
<link rel="stylesheet" href="styles.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&di
splay=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<h1>Attendance Portal</h1>
</header>
<main>
<section class="login-form">
<h2>Login</h2>
<form action="#" method="post">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label for="user-type">User Type</label>
<select id="user-type" name="user-type" required>
<option value="">Select user type</option>
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option value="parent">Parent</option>
<option value="admin">Admin</option>
</select>
</div>
<button type="submit" class="btn-primary">Login</button>
</form>
</section>
</main>
<footer>
<p>&copy; 2025 Attendance Portal. All rights reserved.</p>
</footer>
</div>
</body>
</html>

AdminDashboard

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard - Attendance Portal</title>
<link rel="stylesheet" href="styles.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&di
splay=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<h1>Admin Dashboard</h1>
</header>
<main class="dashboard">
<aside class="sidebar">
<h2>Navigation</h2>
<ul>
<li><a href="#overview">Overview</a></li>
<li><a href="#users">Manage Users</a></li>
<li><a href="#reports">Reports</a></li>
<li><a href="#settings">Settings</a></li>
<li><a href="index.html">Logout</a></li>
</ul>
</aside>
<section class="main-content">
<h2>Welcome, Admin!</h2>
<div class="stats">
<div class="stat-card">
<h3>Total Students</h3>
<p>1,250</p>
</div>
<div class="stat-card">
<h3>Total Teachers</h3>
<p>75</p>
</div>
<div class="stat-card">
<h3>Average Attendance</h3>
<p>94%</p>
</div>
<div class="stat-card">
<h3>Active Users</h3>
<p>1,890</p>
</div>
</div>
<h3>Recent Activity</h3>
<table>
<thead>
<tr>
<th>Date</th>
<th>User</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>2025-05-01</td>
<td>Teacher: John Smith</td>
<td>Marked attendance for Class 10A</td>
</tr>
<tr>
<td>2025-05-01</td>
<td>Admin: Jane Doe</td>
<td>Generated monthly attendance report</td>
</tr>
<tr>
<td>2025-04-30</td>
<td>Parent: Alice Johnson</td>
<td>Viewed child's attendance record</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer>
<p>&copy; 2025 Attendance Portal. All rights reserved.</p>
</footer>
</div>
</body>
</html>

Parent-dashboard

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Dashboard - Attendance Portal</title>
<link rel="stylesheet" href="styles.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&di
splay=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<h1>Parent Dashboard</h1>
</header>
<main class="dashboard">
<aside class="sidebar">
<h2>Navigation</h2>
<ul>
<li><a href="#attendance">Attendance</a></li>
<li><a href="#grades">Grades</a></li>
<li><a href="#schedule">Schedule</a></li>
<li><a href="#communication">Communication</a></li>
<li><a href="index.html">Logout</a></li>
</ul>
</aside>
<section class="main-content">
<h2>Welcome, Parent!</h2>
<div class="stats">
<div class="stat-card">
<h3>Children</h3>
<p>2</p>
</div>
<div class="stat-card">
<h3>Average Attendance</h3>
<p>97%</p>
</div>
<div class="stat-card">
<h3>Upcoming Events</h3>
<p>3</p>
</div>
</div>
<h3>Children's Attendance</h3>
<table>
<thead>
<tr>
<th>Child</th>
<th>Grade</th>
<th>Attendance Rate</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>9th Grade</td>
<td>98%</td>
<td><button class="btn-primary">View Details</button></td>
</tr>
<tr>
<td>Jane Doe</td>
<td>7th Grade</td>
<td>96%</td>
<td><button class="btn-primary">View Details</button></td>
</tr>
</tbody>
</table>
</section>
</main>
<footer>
<p>&copy; 2025 Attendance Portal. All rights reserved.</p>
</footer>
</div>
</body>
</html>

Student-dashboard

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Dashboard - Attendance Portal</title>
<link rel="stylesheet" href="styles.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&di
splay=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<h1>Student Dashboard</h1>
</header>
<main class="dashboard">
<aside class="sidebar">
<h2>Navigation</h2>
<ul>
<li><a href="#attendance">Attendance</a></li>
<li><a href="#schedule">Schedule</a></li>
<li><a href="#grades">Grades</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="index.html">Logout</a></li>
</ul>
</aside>
<section class="main-content">
<h2>Welcome, Student!</h2>
<div class="stats">
<div class="stat-card">
<h3>Attendance Rate</h3>
<p>95%</p>
</div>
<div class="stat-card">
<h3>Classes Today</h3>
<p>4</p>
</div>
<div class="stat-card">
<h3>Upcoming Tests</h3>
<p>2</p>
</div>
</div>
<h3>Recent Attendance</h3>
<table>
<thead>
<tr>
<th>Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>2025-05-01</td>
<td>Present</td>
</tr>
<tr>
<td>2025-04-30</td>
<td>Present</td>
</tr>
<tr>
<td>2025-04-29</td>
<td>Absent</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer>
<p>&copy; 2025 Attendance Portal. All rights reserved.</p>
</footer>
</div>
</body>
</html>

Teacher-dashboard

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teacher Dashboard - Attendance Portal</title>
<link rel="stylesheet" href="styles.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&di
splay=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<h1>Teacher Dashboard</h1>
</header>
<main class="dashboard">
<aside class="sidebar">
<h2>Navigation</h2>
<ul>
<li><a href="#attendance">Mark Attendance</a></li>
<li><a href="#classes">My Classes</a></li>
<li><a href="#reports">Reports</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="index.html">Logout</a></li>
</ul>
</aside>
<section class="main-content">
<h2>Welcome, Teacher!</h2>
<div class="stats">
<div class="stat-card">
<h3>Classes Today</h3>
<p>5</p>
</div>
<div class="stat-card">
<h3>Total Students</h3>
<p>120</p>
</div>
<div class="stat-card">
<h3>Average Attendance</h3>
<p>92%</p>
</div>
</div>
<h3>Today's Classes</h3>
<table>
<thead>
<tr>
<th>Time</th>
<th>Class</th>
<th>Room</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>09:00 AM</td>
<td>Mathematics</td>
<td>Room 101</td>
<td><button class="btn-primary">Mark Attendance</button></td>
</tr>
<tr>
<td>11:00 AM</td>
<td>Physics</td>
<td>Room 203</td>
<td><button class="btn-primary">Mark Attendance</button></td>
</tr>
<tr>
<td>02:00 PM</td>
<td>Chemistry</td>
<td>Lab 3</td>
<td><button class="btn-primary">Mark Attendance</button></td>
</tr>
</tbody>
</table>
</section>
</main>
<footer>
<p>&copy; 2025 Attendance Portal. All rights reserved.</p>
</footer>
</div>
</body>
</html>

Style.css

/* Reset and base styles */


*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: "Poppins", sans-serif;
line-height: 1.6;
color: #333;
background-color: #f4f7f9;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

/* Header styles */
header {
background-color: #3498db;
color: #fff;
padding: 1rem 0;
text-align: center;
}

h1 {
font-size: 2.5rem;
font-weight: 600;
}

/* Main content styles */


main {
padding: 2rem 0;
}
/* Form styles */
.login-form {
background-color: #fff;
border-radius: 8px;
padding: 2rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 400px;
margin: 0 auto;
}

.login-form h2 {
font-size: 1.8rem;
margin-bottom: 1.5rem;
color: #2c3e50;
}

.form-group {
margin-bottom: 1.5rem;
}

label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: #34495e;
}

input[type="text"],
input[type="password"],
select {
width: 100%;
padding: 0.75rem;
border: 1px solid #bdc3c7;
border-radius: 4px;
font-size: 1rem;
}

.btn-primary {
display: inline-block;
background-color: #3498db;
color: #fff;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}

.btn-primary:hover {
background-color: #2980b9;
}

/* Footer styles */
footer {
text-align: center;
padding: 1rem 0;
color: #7f8c8d;
font-size: 0.9rem;
}

/* Dashboard styles */
.dashboard {
display: grid;
grid-template-columns: 250px 1fr;
gap: 2rem;
}

.sidebar {
background-color: #2c3e50;
color: #ecf0f1;
padding: 2rem;
border-radius: 8px;
}

.sidebar h2 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}

.sidebar ul {
list-style-type: none;
}

.sidebar li {
margin-bottom: 1rem;
}
.sidebar a {
color: #ecf0f1;
text-decoration: none;
transition: color 0.3s ease;
}

.sidebar a:hover {
color: #3498db;
}

.main-content {
background-color: #fff;
border-radius: 8px;
padding: 2rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.main-content h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
color: #2c3e50;
}

.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.stat-card {
background-color: #ecf0f1;
border-radius: 8px;
padding: 1.5rem;
text-align: center;
}

.stat-card h3 {
font-size: 1.2rem;
margin-bottom: 0.5rem;
color: #34495e;
}
.stat-card p {
font-size: 2rem;
font-weight: 600;
color: #3498db;
}

/* Responsive design */
@media (max-width: 768px) {
.dashboard {
grid-template-columns: 1fr;
}

.sidebar {
margin-bottom: 2rem;
}
}
Experiment 1
15-Jan-2025

Experiment-1

Aim :- Basic HTML Tags,Table Tags,List Tags,Image Tags, Forms

Requirements

Hardware

1.​ A computer with an operating system (Windows, Linux, or macOS)


2.​ Memory (Min. 8GB)
3.​ CPU

Software
1.​ Any operating system
2.​ Web browser
3.​ Text editor or IDE for coding

HTML Tags:

1.​ <!DOCTYPE html>: Specifies the document type and version of HTML being
used (HTML5).
2.​ <html>: The root tag that encapsulates all HTML content.
3.​ <head>: Contains metadata about the document such as the title and links to
external resources like CSS stylesheets.
4.​ <title>: Sets the title of the webpage, which appears on the browser tab.
5.​ <body>: Contains all the visible content of the webpage.
6.​ Headings (<h1> to <h6>): Used to define headings of different levels, where
<h1> is the largest and <h6> is the smallest.
7.​ Paragraph (<p>): Used for writing blocks of text content.
8.​ Line Break (<br>): Inserts a line break without starting a new paragraph.
9.​ Horizontal Rule (<hr>): Inserts a horizontal line to separate content.
10.​Anchor Tag (<a>): Used to create hyperlinks. The href attribute specifies the
link's destination.
11.​Bold and Italic (<strong> and <em>): <strong> makes text bold, and <em>
emphasizes text by italicizing it.

Table Tags:
Tables are used to display data in a structured tabular format with rows and columns.

1.​ <table>: The container element for a table.


2.​ <tr> (Table Row): Defines a row in a table.
3.​ <th> (Table Header): Represents a header cell, typically bold and centered.
4.​ <td> (Table Data): Represents a standard data cell.
5.​ <caption>: Provides a title for the table.
6.​ <thead>, <tbody>, <tfoot>: Used to group rows logically (header, body,
footer).

Common Attributes:

●​ border: Specifies the border thickness around cells.


●​ colspan: Merges multiple columns into one.
●​ rowspan: Merges multiple rows into one.
●​ cellpadding: Adds space inside cells between content and the border.
●​ cellspacing: Adds space between cells.

Example:

​ <table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Kunal</td>
<td>21</td>
</tr>
</table>

List Tags:

Lists are used to present items in a structured manner.

Types of Lists:

1.​ Ordered List (<ol>):


○​ Displays items in a numbered format.
○​ The type attribute can change the numbering style (1, A, i).
2.​ Unordered List (<ul>):
○​ Displays items with bullet points.
○​ Bullet types can be disc, circle, or square.
3.​ Description List (<dl>):
○​ Used to describe terms and their definitions.
○​ <dt> specifies the term and <dd> defines the description.

Example:
​
​ <ul>
<li>Apple</li>
<li>Banana</li>
</ul>

<ol type="A">
<li>Math</li>
<li>Science</li>
</ol>

Image Tags:

Images are essential for visual content on web pages.

1.​ <img>: Embeds an image on a webpage.


2.​ Attributes:
○​ src: Specifies the image source (URL or file path).
○​ alt: Provides alternative text (useful for screen readers or when the
image fails to load).
○​ width and height: Adjusts the image dimensions.
○​ title: Adds a tooltip when the user hovers over the image.

Example:

​ <img src="image.jpg" alt="Sample Image" width="300" height="200">

Forms:

Forms are used to collect user input on a webpage.

1.​ <form>: The container for form elements.


2.​ Input Elements (<input>):
○​ text: For text input.
○​ password: For passwords (masks input).
○​ submit: For submission buttons.
○​ checkbox: For multiple selections.
○​ radio: For single selections within a group.
3.​ <textarea>: For multiline text input.
4.​ <button>: For clickable buttons.
5.​ <select> and <option>: Used for dropdown menus.
6.​ <label>: Describes form elements for better accessibility.
7.​ Attributes:
○​ action: Specifies the URL to which form data will be sent.
○​ method: Defines how data is sent (GET for visible data, POST for
secure data).

Example:

​ <form action="/submit" method="POST">


<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male"> Male
<input type="radio" id="female" name="gender" value="female"> Female

<input type="submit" value="Submit">


</form>
Output:
Experiment 2
22-Jan-2025

Experiment-2

Aim :- Implement forms using HTML, FRAMES, CSS.

Requirements

Hardware
1.​ Windows/Linux/MacOS

Software

1.​ Text Editor (VS Code, Sublime Text, Notepad++)


2.​ Web Browser (Chrome, Firefox, Edge)

THEORY

Forms in HTML are used to collect user input. The <form> element contains various form
controls like text fields, radio buttons, checkboxes, and submit buttons. Frames allow
displaying multiple HTML documents in a single window, enhancing layout flexibility. CSS
is used to style the form for better user experience.

Code ➖
Html

<!DOCTYPE html>

<html>

<head>

<title>Registration Form</title>

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

</head>

<body>

<h2>Registration Form</h2>

<form action="#" method="post">


<label for="name">Name:</label>

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

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

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

<label for="gender">Gender:</label>

<input type="radio" name="gender" value="Male"> Male

<input type="radio" name="gender" value="Female"> Female<br>

<label for="hobbies">Hobbies:</label>

<input type="checkbox" name="hobbies" value="Reading"> Reading

<input type="checkbox" name="hobbies" value="Sports"> Sports<br>

<label for="country">Country:</label>

<select id="country" name="country">

<option value="India">India</option>

<option value="USA">USA</option>

<option value="UK">UK</option>

</select><br>

<input type="submit" value="Submit">

</form>

</body>

</html>
CSS

body {

font-family: Arial, sans-serif;

margin: 20px;

background-color: #f4f4f4;

form {

background: white;

padding: 20px;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

label {

font-weight: bold;

input,

select {

margin-bottom: 10px;

padding: 5px;

width: 100%;

Output
Experiment 3
29-Jan-2025

Experiment-3

Aim :- Install the following on local machine


●​ Apache web server
●​ Tomcat application server locally,
●​ Install MySQL
●​ PHP and configure it to work with Apache web server and MySQL

Requirements

Hardware

1.​ A computer with Windows/Linux/macOS operating system

Software

1.​ Web Browser (Chrome, Firefox, Edge)


2.​ Apache Web Server
3.​ Apache Web Server
4.​ MySQL Database Server
5.​ PHP

THEORY

A web server and an application server provide the necessary environment to host and run
web applications. Apache is a widely used web server that serves static and dynamic content.
Tomcat is an application server used to deploy Java-based applications. MySQL is an
open-source relational database management system, and PHP is a server-side scripting
language that interacts with databases.

1. Installing Apache Web Server

Apache is an open-source web server used to host websites and applications.

Windows Installation:

🔗
Download the latest version of Apache HTTP Server from the official website:​
https://httpd.apache.org/download.cgi

1.​ Run the installer (.msi file) and follow the setup instructions.
2.​ Configure the installation directory (e.g., C:\Apache24).
3.​ Modify the httpd.conf file (located in C:\Apache24\conf) to set the correct
document root: conf

4.​ Start the Apache service using the command:​


httpd.exe -k start

5. Test the installation by opening a browser and visiting:​


http://localhost
6. If Apache is running, it should display a default page.

2. Installing PHP

PHP is a server-side scripting language used for web development.

Windows Installation

🔗 https://www.php.net/downloads
1.​ Download the latest PHP version from:​

1.​ Extract the downloaded .zip file to C:\php.


2.​ Add C:\php to the system environment variable PATH.
3.​ Edit php.ini file (copy php.ini-development to php.ini and modify it).
4.​ Restart Apache and test PHP:

Create a test file in htdocs (C:\Apache24\htdocs\info.php):​


​
<?php

ani.php

?>
3. Installing MySQL Database

MySQL is a relational database management system used for storing and managing website
data.

Windows Installation

🔗
1.​ Download MySQL Community Server from:​
https://dev.mysql.com/downloads/mysql/

1.​ Run the installer and choose "Developer Default" setup.


2.​ Set a root password during installation.
4. Installing Tomcat Application Server

Tomcat is an open-source Java servlet container used to run Java-based web applications.

Windows Installation

2.​
🔗
1.​ Download Apache Tomcat from:​
https://tomcat.apache.org/download-90.cgi
Extract the downloaded .zip file (e.g., C:\Tomcat).

1.​ Configure environment variables:

○ ​ Add C:\Tomcat\bin to the system PATH.

Start Tomcat using:​


startup.bat

2.​ Open a browser and visit:​


http://localhost:8080
3.​ If Tomcat is running, the Tomcat welcome page will appear.

5. Configuring PHP to Work with Apache and MySQL

1.​ Enable the MySQL extension in PHP:

Open php.ini and uncomment:​


extension=mysqli

○​
2.​ Restart Apache for changes to take effect.
Testing the Installation

Create a PHP Web Page to Connect to MySQL

Create a file ani1.php in the Apache htdocs folder:​


php​
CopyEdit​
<?php

$conn = new mysqli("localhost", "root", "your_password", "test_db");

if ($conn->connect_error) {

​ die("Connection failed: " . $conn->connect_error);

echo "Connected successfully!";

?>

1.​ Open a browser and visit:​


http://localhost/test_db.php
2.​ If everything is set up correctly, it should display:​
Connected successfully!
Experiment 4
29-Jan-2025

Experiment-4

Aim :- To create an email system using PHP that allows users to register an
email ID, send, and receive pictures and documents.

Requirements

Hardware

1.​ A computer with Windows/Linux/macOS operating system

Software

1.​ Web Browser (Chrome, Firefox, Edge)


2.​ Apache Web Server
3.​ PHP
4.​ MySQL Database
5.​ PHPMailer Library
6.​ VS Code

THEORY

Email communication is an essential part of web applications. PHP provides various


functionalities to send and receive emails using the mail() function or PHPMailer. This
experiment focuses on implementing email functionalities using PHP and integrating SMTP
for sending emails with attachments.

Code

index.html

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Email System</title>

<style>
body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 0;

.form-container {

width: 50%;

margin: 50px auto;

background-color: #fff;

padding: 20px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

border-radius: 8px;

input,

textarea,

button {

width: 100%;

margin: 10px 0;

padding: 10px;

button {

background-color: #5cb85c;

color: white;

border: none;
border-radius: 4px;

button:hover {

background-color: #4cae4c;

</style>

</head>

<body>

<div class="form-container">

<h2>Send Email with Attachment</h2>

<form action="send_email.php" method="post" enctype="multipart/form-data">

<input

type="text"

name="first_name"

placeholder="First Name"

required

/>

<input type="text" name="last_name" placeholder="Last Name" required />

<input type="tel" name="mobile" placeholder="Mobile Number" required />

<input

type="email"

name="email"

placeholder="Recipient Email"

required

/>
<textarea name="message" placeholder="Your Message" required></textarea>

<input

type="file"

name="attachment"

accept="image/*,application/pdf,application/msword"

required

/>

<button type="submit">Send Email</button>

</form>

</div>

</body>

</html>

Send_mail.php

<?php

use PHPMailer\PHPMailer\PHPMailer;

use PHPMailer\PHPMailer\Exception;

require 'vendor/autoload.php';

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

$firstName = $_POST['first_name'];

$lastName = $_POST['last_name'];

$mobile = $_POST['mobile'];

$email = $_POST['email'];
$message = $_POST['message'];

$mail = new PHPMailer(true);

try {

//Server settings

$mail->isSMTP();

$mail->Host = 'smtp.gmail.com';

$mail->SMTPAuth = true;

$mail->Username = '[email protected]';

$mail->Password = 'kxltztdjtovzmdlg';

$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;

$mail->Port = 587;

//Recipients

$mail->setFrom('[email protected]', 'Your Name');

$mail->addAddress($email);

//Attachments

if (isset($_FILES['file']) && $_FILES['file']['error'] == UPLOAD_ERR_OK) {

$mail->addAttachment($_FILES['file']['tmp_name'], $_FILES['file']['name']);

//Content

$mail->isHTML(true);
$mail->Subject = 'New Message from ' . $firstName . ' ' . $lastName;

$mail->Body = "<p>First Name: $firstName</p><p>Last Name:


$lastName</p><p>Mobile: $mobile</p><p>Email: $email</p><p>Message:
$message</p>";

$mail->send();

echo 'Email has been sent successfully!';

} catch (Exception $e) {

echo "Email could not be sent. Mailer Error: {$mail->ErrorInfo}";

} else {

echo 'Invalid request';

?>

Add phpmailer
Start XAMPP

Output
Experiment 5
29-Jan-2025

Experiment-5

Aim :- To create a simple web file to demonstrate the use of different tags.

Requirements

Hardware

1.​ A computer with Windows/Linux/macOS operating system

Software

1.​ Web Browser (Chrome, Firefox, Edge)


2.​ HTML, CSS
3.​ VS Code

Code

1. Login.html

<!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>

<script src="https://cdn.tailwindcss.com"></script>

</head>

<body class="bg-[#a8d0e6] flex items-center justify-center min-h-screen">

<div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">

<h1 class="text-3xl font-bold text-center mb-8">Login</h1>


<form action="dashboard.html" method="get" class="space-y-6">

<!-- Email ID -->

<div>

<label for="email" class="block text-sm font-medium text-gray-700">Email

ID</label>

<input type="email" id="email" name="email" class="mt-1 block w-full px-3 py-2

border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2

focus:ring-blue-500" required>

</div>

<!-- Password -->

<div>

<label for="password" class="block text-sm font-medium

text-gray-700">Password</label>

<input type="password" id="password" name="password" class="mt-1 block w-full

px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2

focus:ring-blue-500" required>

</div>

<!-- Forgot Password Link -->

<div class="text-right">

<a href="forgotpassword.html" class="text-sm text-blue-500

hover:text-blue-700">Forgot Password?</a>

</div>

<!-- Login Button -->

<div>

<button type="submit" class="w-full px-6 py-2 bg-blue-500 text-white rounded-md


hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">

Login

</button>

</div>

<!-- Link to Registration Page -->

<div class="text-center">

<p class="text-sm text-gray-600">Don't have an account? <a

href="registration.html" class="text-blue-500 hover:text-blue-700">Register here</a></p>

</div>

</form>

</div>

</body>

</html>

Output

2. forgotpassword.html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Forgot Password</title>

<script src="https://cdn.tailwindcss.com"></script>

</head>

<body class="bg-[#a8d0e6] flex items-center justify-center min-h-screen"> <!-- Pastel Blue

Background -->

28

<div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">

<h1 class="text-3xl font-bold text-center mb-8">Forgot Password</h1>

<form class="space-y-6">

<!-- Email ID -->

<div>

<label for="email" class="block text-sm font-medium text-gray-700">Email

ID</label>

<input type="email" id="email" name="email" class="mt-1 block w-full px-3 py-2

border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2

focus:ring-blue-500" required>

</div>

<!-- Reset Password Button -->

<div>

<button type="submit" class="w-full px-6 py-2 bg-blue-500 text-white rounded-md


hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">

Reset Password

</button>

</div>

<!-- Link to Login Page -->

<div class="text-center">

<p class="text-sm text-gray-600">Remember your password? <a href="login.html"

class="text-blue-500 hover:text-blue-700">Login here</a></p>

</div>

</form>

</div>

</body>

</html>

Output

3.registration.html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Registration Form</title>

<script src="https://cdn.tailwindcss.com"></script>

</head>

<body class="bg-[#a8d0e6] flex items-center justify-center min-h-screen">

<div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-4xl">

<h1 class="text-3xl font-bold text-center mb-8">Registration Form</h1>

<form class="grid grid-cols-1 md:grid-cols-2 gap-6">

<!-- First Column -->

<div class="space-y-4">

<!-- First Name -->

<div>

30

<label for="firstName" class="block text-sm font-medium text-gray-700">First

Name</label>

<input type="text" id="firstName" name="firstName" class="mt-1 block w-full

px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2

focus:ring-blue-500" required>

</div>

<!-- Last Name -->

<div>
<label for="lastName" class="block text-sm font-medium text-gray-700">Last

Name</label>

<input type="text" id="lastName" name="lastName" class="mt-1 block w-full

px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2

focus:ring-blue-500" required>

</div>

<!-- University Roll No. -->

<div>

<label for="rollNo" class="block text-sm font-medium text-gray-700">University

Roll No.</label>

<input type="text" id="rollNo" name="rollNo" class="mt-1 block w-full px-3

py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2

focus:ring-blue-500" required>

</div>

<!-- School Name (Dropdown) -->

<div>

<label for="schoolName" class="block text-sm font-medium

text-gray-700">School Name</label>

<select id="schoolName" name="schoolName" class="mt-1 block w-full px-3

py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2

focus:ring-blue-500" required>

<option value="">Select One</option>

<option value="School of Engineering">School of Engineering</option>

<option value="School of Business">School of Business</option>

31
<option value="School of Arts">School of Arts</option>

<option value="School of Science">School of Science</option>

</select>

</div>

<!-- Course Name -->

<div>

<label for="courseName" class="block text-sm font-medium

text-gray-700">Course Name</label>

<input type="text" id="courseName" name="courseName" class="mt-1 block

w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none

focus:ring-2 focus:ring-blue-500" required>

</div>

</div>

<!-- Second Column -->

<div class="space-y-4">

<!-- Specialization -->

<div>

<label for="specialization" class="block text-sm font-medium

text-gray-700">Specialization</label>

<input type="text" id="specialization" name="specialization" class="mt-1 block

w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none

focus:ring-2 focus:ring-blue-500" required>

</div>

<!-- Email -->

<div>
<label for="email" class="block text-sm font-medium

text-gray-700">Email</label>

<input type="email" id="email" name="email" class="mt-1 block w-full px-3

py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2

focus:ring-blue-500" required>

</div>

32

<!-- Phone No. -->

<div>

<label for="phoneNo" class="block text-sm font-medium text-gray-700">Phone

No.</label>

<input type="tel" id="phoneNo" name="phoneNo" class="mt-1 block w-full px-3

py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2

focus:ring-blue-500" required>

</div>

<!-- Gender (Radio Buttons) -->

<div>

<label class="block text-sm font-medium text-gray-700">Gender</label>

<div class="mt-1 space-x-4">

<label class="inline-flex items-center">

<input type="radio" name="gender" value="Male" class="form-radio

text-blue-500" required>

<span class="ml-2">Male</span>

</label>

<label class="inline-flex items-center">


<input type="radio" name="gender" value="Female" class="form-radio

text-blue-500" required>

<span class="ml-2">Female</span>

</label>

<label class="inline-flex items-center">

<input type="radio" name="gender" value="Other" class="form-radio

text-blue-500" required>

<span class="ml-2">Other</span>

</label>

</div>

</div>

33

<!-- Category (Dropdown) -->

<div>

<label for="category" class="block text-sm font-medium

text-gray-700">Category</label>

<select id="category" name="category" class="mt-1 block w-full px-3 py-2

border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2

focus:ring-blue-500" required>

<option value="">Select One</option>

<option value="General">General</option>

<option value="OBC">OBC</option>

<option value="SC">SC</option>

<option value="ST">ST</option>

</select>
</div>

</div>

<!-- Full Width Fields -->

<div class="col-span-1 md:col-span-2 space-y-4">

<!-- Father's Name -->

<div>

<label for="fathersName" class="block text-sm font-medium

text-gray-700">Father's Name</label>

<input type="text" id="fathersName" name="fathersName" class="mt-1 block

w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none

focus:ring-2 focus:ring-blue-500" required>

</div>

<!-- Father's Phone No. -->

<div>

<label for="fathersPhoneNo" class="block text-sm font-medium

text-gray-700">Father's Phone No.</label>

34

<input type="tel" id="fathersPhoneNo" name="fathersPhoneNo" class="mt-1

block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none

focus:ring-2 focus:ring-blue-500" required>

</div>

</div>

<!-- Submit Button -->

<div class="col-span-1 md:col-span-2 flex justify-center">

<button type="submit" class="px-6 py-2 bg-blue-500 text-white rounded-md


hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">

Submit

</button>

</div>

<!-- Link to Login Page -->

<div class="text-center mt-6">

<p class="text-sm text-gray-600">Already have an account? <a href="login.html"

class="text-blue-500 hover:text-blue-700">Login here</a></p>

</div>

</form>

</div>

</body>

</html>

Output
4.dashboard.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Dashboard</title>

<script src="https://cdn.tailwindcss.com"></script>

</head>

<body class="bg-[#a8d0e6] flex min-h-screen">

<!-- Sidebar -->

<div class="bg-white w-64 p-6 shadow-lg">

<h2 class="text-xl font-bold mb-6">Dashboard</h2>

<ul class="space-y-4">

<li>

<a href="#" class="text-gray-700 hover:text-blue-500">Home</a>

</li>

<li>

<a href="#" class="text-gray-700 hover:text-blue-500">Profile</a>

</li>

<li>

<a href="#" class="text-gray-700 hover:text-blue-500">Settings</a>

</li>

<li>

<a href="#" class="text-gray-700 hover:text-blue-500">Notifications</a>


</li>

<li>

36

<a href="#" class="text-gray-700 hover:text-blue-500">Messages</a>

</li>

</ul>

<div class="mt-8">

<a href="login.html" class="text-red-500 hover:text-red-700">Logout</a>

</div>

</div>

<!-- Main Content -->

<div class="flex-1 p-8">

<!-- Greeting Message -->

<div class="bg-white p-6 rounded-lg shadow-lg mb-8">

<h1 class="text-2xl font-bold mb-4">Welcome back, <span

class="text-blue-500">Sam</span>!</h1>

<p class="text-gray-600">Here's what's happening with your account today.</p>

</div>

<!-- Recent Activity -->

<div class="bg-white p-6 rounded-lg shadow-lg mb-8">

<h2 class="text-xl font-bold mb-4">Recent Activity</h2>

<ul class="space-y-3">

<li class="text-gray-600">You logged in 2 hours ago.</li>

<li class="text-gray-600">Your profile was updated yesterday.</li>

<li class="text-gray-600">You received a new notification.</li>


</ul>

</div>

<!-- Notifications -->

<div class="bg-white p-6 rounded-lg shadow-lg">

<h2 class="text-xl font-bold mb-4">Notifications</h2>

37

<ul class="space-y-3">

<li class="text-gray-600">Your course registration is confirmed.</li>

<li class="text-gray-600">You have a new message from your instructor.</li>

<li class="text-gray-600">Upcoming deadline: Assignment due tomorrow.</li>

</ul>

</div>

</div>

</body>

</html>

Output
Experiment 6
29-Jan-2025

Experiment-5

Aim :- To create an html web with different types of frames such as navigation
frame, floating frame & mixed frame.

Requirements

Hardware

1.​ A computer with Windows/Linux/macOS operating system

Software

1.​ Web Browser (Chrome, Firefox, Edge)


2.​ HTML, CSS
3.​ VS Code

Code

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attendance Portal</title>
</head>
<frameset rows="15%, 75%, 10%" border="0">
<!-- Top Frame (Header) -->
<frame src="header.html" name="headerFrame" scrolling="no" noresize>
<frameset cols="20%, 60%, 20%">
<!-- Left Navigation Frame -->
<frame src="navbar.html" name="navFrame" noresize>
<!-- Main Content Frame -->
39
<frame src="home.html" name="mainFrame">
<!-- Floating Notices Frame -->
<frame src="notices.html" name="noticesFrame" scrolling="no">
</frameset>
<!-- Footer Frame -->
<frame src="footer.html" name="footerFrame" scrolling="no" noresize>
</frameset>
</html>

Home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Attendance Portal</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 20px;
color: #333;
}
.welcome-message {
text-align: center;
margin-bottom: 30px;
}
40
.welcome-message h1 {
font-size: 2.5em;
color: #4CAF50;
}
.welcome-message p {
font-size: 1.2em;
color: #666;
}
.dashboard {
display: flex;
justify-content: space-between;
gap: 20px;
}
.card {
background: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
flex: 1;
text-align: center;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
}
.card h2 {
font-size: 1.5em;
41

color: #4CAF50;
margin-bottom: 10px;
}
.card p {
font-size: 1em;
color: #666;
}
.calendar {
background: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
flex: 1;
}
.calendar h2 {
font-size: 1.5em;
color: #4CAF50;
margin-bottom: 20px;
}
.progress-bar {
background: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
flex: 1;
}
.progress-bar h2 {
42

font-size: 1.5em;
color: #4CAF50;
margin-bottom: 20px;
}
.progress-container {
background: #e0e0e0;
border-radius: 10px;
overflow: hidden;
height: 20px;
}
.progress {
background: #4CAF50;
height: 100%;
width: 75%; /* Adjust this value dynamically */
border-radius: 10px;
text-align: center;
color: white;
line-height: 20px;
font-size: 0.8em;
}
</style>
</head>
<body>
<div class="welcome-message">
<h1>Welcome, Sam!</h1>
<p>Manage your attendance, track progress, and stay organized with our easy-to-use
tools.</p>
43
</div>
<div class="dashboard">
<!-- Quick Action Cards -->
<div class="card">
<h2>Mark Attendance</h2>
<p>Quickly mark your attendance for today.</p>
</div>
<div class="card">
<h2>View Reports</h2>
<p>Check your attendance history and reports.</p>
</div>
<div class="card">
<h2>Upcoming Events</h2>
<p>Stay updated with upcoming events and deadlines.</p>
</div>
</div>
<div class="dashboard" style="margin-top: 20px;">
<!-- Calendar Section -->
<div class="calendar">
<h2>Calendar</h2>
<iframe
src="https://calendar.google.com/calendar/embed?src=en.usa%23holiday%40group.v.calen
da
r.google.com&ctz=America%2FNew_York"
style="border: 0; width: 100%; height: 300px;"
frameborder="0"
scrolling="no">
</iframe>
</div>
44
<!-- Progress Bar Section -->
<div class="progress-bar">
<h2>Attendance Progress</h2>
<div class="progress-container">
<div class="progress" style="width: 75%;">75%</div>
</div>
<p>You have attended 75% of the sessions this month.</p>
</div>
</div
</body>
</html>

Header.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Header</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="header">
<h1>Student Attendance Portal</h1>
</body>
</html>
Footer.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Footer</title>
45
<link rel="stylesheet" href="style.css">
</head>
<body class="footer">
<p>&copy; 2025 Attendance Portal | All rights reserved.</p>
</body>
</html>

Attendance.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Attendance</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="content">
<h2>Attendance Records</h2>
<table border="1">
<tr>
<th>Student Name</th>
<th>Roll Number</th>
<th>Status</th>
</tr>
<tr>
<td>Leo Luo</td>
<td>2k22/UCS/001</td>
<td>Present</td>
</tr>
<tr>
46
<td>Jane Smith</td>
<td>2k22/UCS/002</td>
<td>Absent</td>
</tr>
</table>
</body>
</html>

Contact.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="content">
<h2>Contact Us</h2>
<p>Email: [email protected]</p>
<p>Phone: +123 456 7890</p>
</body>
</html>

Navbar.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Navigation</title>
<link rel="stylesheet" href="style.css">
</head>
47
<body class="navbar">
<h3>Menu</h3>
<ul>
<li><a href="home.html" target="mainFrame">Home</a></li>
<li><a href="attendance.html" target="mainFrame">Attendance</a></li>
<li><a href="students.html" target="mainFrame">Students</a></li>
<li><a href="contact.html" target="mainFrame">Contact</a></li>
</ul>
</body>
</html>

Notices.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Navigation</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="navbar">
<h3>Menu</h3>
<ul>
<li><a href="home.html" target="mainFrame">Home</a></li>
<li><a href="attendance.html" target="mainFrame">Attendance</a></li>
<li><a href="students.html" target="mainFrame">Students</a></li>
<li><a href="contact.html" target="mainFrame">Contact</a></li>
</ul>
</body>
</html>

Students.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Students</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="content">
<h2>Registered Students</h2>
<ul>
<li>Leo Luo- Roll No: 2k22/UCS/001</li>
<li>Jane Smith - Roll No: 2k22/UCS/002</li>
<li>Michael Johnson - Roll No: 2k22/UCS/003</li>
</ul>
</body>
</html>

Style.css

<!DOCTYPE html>
<html lang="en">
<head>
<title>Students</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="content">
<h2>Registered Students</h2>
<ul>
<li>Leo Luo- Roll No: 2k22/UCS/001</li>
49
<li>Jane Smith - Roll No: 2k22/UCS/002</li>
<li>Michael Johnson - Roll No: 2k22/UCS/003</li>
</ul>
</body>
</html>

OUTPUT:

Dashboard
Attendance record
Contact page
Experiment 7
2-Apr-2025

Experiment-7

Aim :- Write a PHP program to store page views count in SESSION, to


increment the count on each refresh, and to show the count on web page.

Requirements

Hardware

1.​ A computer with Windows/Linux/macOS operating system

Software

1.​ Web Browser (Chrome, Firefox, Edge)


2.​ Apache Web Server
3.​ PHP
4.​ VS Code

Code

index.php

<?php

error_reporting(E_ALL);

ini_set('display_errors', 1);

session_start();

// Check if page views session variable is set, if not initialize it

if (!isset($_SESSION['views'])) {

$_SESSION['views'] = 0;

}
// Increment the page view count

$_SESSION['views']++;

?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Page View Counter</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

margin: 50px;

background-color: #f4f4f4;

.counter-box {

background: white;

width: 400px;

margin: 0 auto;

padding: 45px;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);


display: inline-block;

.reset-btn {

margin-top: 15px;

padding: 10px 20px;

background-color: red;

color: white;

border: none;

cursor: pointer;

border-radius: 5px;

.reset-btn:hover {

background-color: darkred;

.qwert {

text-align: left;

margin: 2px 0;

.tutu {

font-size: 18px;

margin-bottom: 1px;

input[type="text"] {

width: 100%;
padding: 10px;

margin: 5px 0 20px 0;

border: 1px solid #ccc;

border-radius: 5px;

</style>

</head>

<body>

<div class="counter-box">

<h2>Page View Counter</h2>

<p>This page has been viewed <strong><?php echo $_SESSION['views']; ?></strong>


times.</p>

<form action="reset.php" method="post">

<div class="qwert">

<p class="tutu">Name</p>

<input type="text" placeholder= "Enter your name" name="name" required>


<br><br>

<p class="tutu">Email</p>

<input type="text" placeholder= "Enter your email" name="email" required>


<br><br>

<p class="tutu">Phone</p>

<input type="text" placeholder= "Enter your phone number" name="phone" >


<br><br>

<p class="tutu">Address</p>

<input type="text" placeholder= "Enter your address" name="address" > <br><br>

</div>
<button class="reset-btn" type="submit">Reset Count</button>

</form>

</div>

</body>

</html>

reset.php

<?php

session_start();

session_destroy(); // Destroy the session to reset the count

header("Location: index.php"); // Redirect back to the main page

exit();

?>
Output
Experiment 8
9-Apr-2025

Experiment-8

Aim :- Write a PHP program to store current date-time in a COOKIE and


display the ‘Last visited on’ date- time on the web page upon reopening of the
same page.

Requirements

Hardware

1.​ A computer with Windows/Linux/macOS operating system

Software

1.​ Web Browser (Chrome, Firefox, Edge)


2.​ Apache Web Server
3.​ PHP
4.​ VS Code

Code

Visit.php

<?php
// PHP Logic Part

// Set timezone to Asia/Kolkata


date_default_timezone_set("Asia/Kolkata");

// Define cookie name


$cookie_name = "last_visit";

// Message to display

🕒
if (isset($_COOKIE[$cookie_name])) {
$message = " Last visited on: " . $_COOKIE[$cookie_name];
} else {
$message = "👋 This is your first visit!";
}

// Get current time


$current_time = date("Y-m-d H:i:s");

// Set the cookie for 1 year


setcookie($cookie_name, $current_time, time() + (365 * 24 * 60 * 60));
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last Visit Tracker</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f0f4f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background: white;
padding: 30px 50px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
color: #333;
margin-bottom: 20px;
}
p{
font-size: 1.2rem;
color: #555;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome Back!</h1>
<p><?php echo $message; ?></p>
</div>
</body>
</html>

Output
Experiment 9
16-Apr-2025

Experiment-9

Aim :- Create an XHTML form with Name, Address Line 1, Address Line 2,
and E-mail text fields. On submitting, store the values in MySQL table. Retrieve
and display the data based on Name.

Requirements

Hardware

1.​ A computer with Windows/Linux/macOS operating system

Software

1.​ Web Browser (Chrome, Firefox, Edge)


2.​ Apache Web Server
3.​ PHP
4.​ MySQL Database
5.​ VS Code

Code

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>User Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(to right, #74ebd5, #acb6e5);
margin: 0;
padding: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.form-container {
background-color: white;
padding: 30px 40px;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
width: 400px;
}

h2 {
text-align: center;
color: #333;
}

label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #444;
}

input[type="text"],
input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 2px solid #ddd;
border-radius: 8px;
transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus {
border-color: #74ebd5;
outline: none;
}

input[type="submit"] {
padding: 10px 20px;
margin-right: 10px;
border: none;
border-radius: 8px;
background-color: #4CAF50;
color: white;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
background-color: #45a049;
}

.result {
margin-top: 20px;
padding: 15px;
background-color: #f3f3f3;
border-radius: 10px;
}

.result h3 {
margin-top: 0;
}
</style>
</head>
<body>
<div class="form-container">
<h2>User Information Form</h2>
<form method="post" action="index.php">
<label>Name:</label>
<input type="text" name="name" required />

<label>Address Line 1:</label>


<input type="text" name="address1" required />

<label>Address Line 2:</label>


<input type="text" name="address2" required />

<label>Email:</label>
<input type="email" name="email" required />

<input type="submit" name="submit" value="Submit" />


<input type="submit" name="search" value="Search" />
</form>

<div class="result">
<?php
// Step 2: Connect to MySQL
$conn = new mysqli("localhost", "root", "", "userdb");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Step 2: On Submit
if (isset($_POST['submit'])) {
$name = $_POST['name'];
$address1 = $_POST['address1'];
$address2 = $_POST['address2'];
$email = $_POST['email'];

$stmt = $conn->prepare("INSERT INTO users (name, address1, address2, email)


VALUES (?, ?, ?, ?)");
$stmt->bind_param("ssss", $name, $address1, $address2, $email);
$stmt->execute();

echo "<p><strong>Data inserted successfully!</strong></p>";


$stmt->close();
}

// Step 3: On Search
if (isset($_POST['search'])) {
$name = $_POST['name'];
$stmt = $conn->prepare("SELECT * FROM users WHERE name = ?");
$stmt->bind_param("s", $name);
$stmt->execute();
$result = $stmt->get_result();

echo "<h3>Search Results:</h3>";


if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "Name: <strong>" . $row['name'] . "</strong><br/>";
echo "Address1: " . $row['address1'] . "<br/>";
echo "Address2: " . $row['address2'] . "<br/>";
echo "Email: " . $row['email'] . "<br/><br/>";
}
} else {
echo "<p>No data found for this name.</p>";
}

$stmt->close();
}

$conn->close();
?>
</div>
</div>
</body>
</html>

User.sql

-- Create database
CREATE DATABASE IF NOT EXISTS userdb;
USE userdb;
-- Create table
CREATE TABLE IF NOT EXISTS users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100),
address1 VARCHAR(255),
address2 VARCHAR(255),
email VARCHAR(100)
);

-- Optional: Insert sample data


INSERT INTO users (name, address1, address2, email)
VALUES
('Kunal', '123 Street A', 'Sector 10', '[email protected]'),
('Ananya', '456 Street B', 'Sector 12', '[email protected]');
Output
Experiment 10
16-Apr-2025

Experiment-10

Aim :- Create an XHTML form with Name, Address Line 1, Address Line 2,
and E-mail text fields. On submitting, store the values in MySQL table. Retrieve
and display the data based on Name.

Requirements

Hardware

1.​ A computer with Windows/Linux/macOS operating system

Software

1.​ Web Browser (Chrome, Firefox, Edge)


2.​ Apache Web Server
3.​ PHP
4.​ MySQL Database
5.​ VS Code

Code

index.php

<!DOCTYPE html>
<html>
<head>
<title>Book Information Form</title>
<meta charset="UTF-8" />
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #ffecd2, #fcb69f);
margin: 0;
padding: 40px;
display: flex;
justify-content: center;
}

.form-container {
background-color: #fff;
padding: 30px 40px;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
width: 500px;
}

h2 {
text-align: center;
color: #333;
}

label {
display: block;
margin: 10px 0 5px;
font-weight: bold;
}

input[type="text"] {
width: 100%;
padding: 10px;
border: 2px solid #ccc;
border-radius: 6px;
}

input[type="submit"] {
padding: 10px 20px;
margin-top: 15px;
margin-right: 10px;
border: none;
border-radius: 6px;
background-color: #3498db;
color: white;
font-weight: bold;
cursor: pointer;
}

input[type="submit"]:hover {
background-color: #2980b9;
}

.result {
margin-top: 30px;
background-color: #f9f9f9;
padding: 20px;
border-radius: 10px;
}
.result h3 {
margin-top: 0;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Book Information Form</h2>
<form method="post" action="">
<label>Accession Number:</label>
<input type="text" name="accession" required />

<label>Title:</label>
<input type="text" name="title" required />

<label>Authors:</label>
<input type="text" name="authors" required />

<label>Edition:</label>
<input type="text" name="edition" required />

<label>Publisher:</label>
<input type="text" name="publisher" required />

<input type="submit" name="submit" value="Submit" />


<input type="submit" name="search" value="Search" />
</form>

<div class="result">
<?php
// Step 2: Connect to MySQL
$conn = new mysqli("localhost", "root", "", "library");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Step 3: Insert Data


if (isset($_POST['submit'])) {
$accession = $_POST['accession'];
$title = $_POST['title'];
$authors = $_POST['authors'];
$edition = $_POST['edition'];
$publisher = $_POST['publisher'];

$stmt = $conn->prepare("INSERT INTO books (accession, title, authors, edition,


publisher) VALUES (?, ?, ?, ?, ?)");
$stmt->bind_param("sssss", $accession, $title, $authors, $edition, $publisher);
$stmt->execute();
echo "<p><strong>Book inserted successfully!</strong></p>";
$stmt->close();
}

// Step 4: Search Data


if (isset($_POST['search'])) {
$title = $_POST['title'];
$stmt = $conn->prepare("SELECT * FROM books WHERE title LIKE ?");
$likeTitle = "%" . $title . "%";
$stmt->bind_param("s", $likeTitle);
$stmt->execute();
$result = $stmt->get_result();

echo "<h3>Search Results:</h3>";


if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "Accession No: <strong>" . $row['accession'] . "</strong><br/>";
echo "Title: " . $row['title'] . "<br/>";
echo "Authors: " . $row['authors'] . "<br/>";
echo "Edition: " . $row['edition'] . "<br/>";
echo "Publisher: " . $row['publisher'] . "<br/><hr/>";
}
} else {
echo "<p>No book found with this title.</p>";
}

$stmt->close();
}

$conn->close();
?>
</div>
</div>
</body>
</html>

library.sql

CREATE DATABASE IF NOT EXISTS library;


USE library;

CREATE TABLE IF NOT EXISTS books (


id INT AUTO_INCREMENT PRIMARY KEY,
accession VARCHAR(50),
title VARCHAR(255),
authors VARCHAR(255),
edition VARCHAR(100),
publisher VARCHAR(255)
);

Output

You might also like