Scribd
Upload
26 views31 pages

WE LAB Full Manual 2025

The document outlines a series of exercises focused on web development, including creating interactive websites using HTML, form validation with JavaScript, simple PHP scripts, handling multimedia content, invoking servlets from HTML forms, and session tracking using hidden form fields. Each exercise includes a specific aim, detailed procedures, and example code snippets for implementation. The results indicate successful execution of the tasks outlined in each exercise.

Uploaded by

btechitb23
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
26 views31 pages

WE LAB Full Manual 2025

The document outlines a series of exercises focused on web development, including creating interactive websites using HTML, form validation with JavaScript, simple PHP scripts, handling multimedia content, invoking servlets from HTML forms, and session tracking using hidden form fields. Each exercise includes a specific aim, detailed procedures, and example code snippets for implementation. The results indicate successful execution of the tasks outlined in each exercise.

Uploaded by

btechitb23
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/ 31

Ex No : 1

Date:

Creation of interactive websites - Design using HTML


Aim:

To create an interactive website using HTML.

Procedure:

Step 1: Open a Text Editor

Step 2: Create an HTML File

• Create a new file

Step 3: Write the HTML Code

Step 4: Save the File

• Save the file with a .html extension (e.g., program.html).

Step 5: Place the Image

• Save an image named "bike.jpg" in the same directory as your HTML file.

Step 6: Open the File in a Browser

• Locate the file in your system and double-click it to open in a web browser.

Step 7: Test the Webpage

1. Enter your name in the text box.

2. Choose a background color from the color picker.

3. Observe that the background color changes dynamically.

4. The image should be visible below the inputs.

Program:

<html>

<head>

<title>Interactive Webpage</title>

</head>

<body>

<h2>Interactive Webpage</h2>

<p>HTML stands for Hypertext Markup Language.<br>

It's a set of codes that tells web browsers how to display text and images on a web page. <br>

HTML is used to create web pages and web applications.<br></p>

<label>Enter your name:</label>


<input type="text" name="name">

<br><br>

<label>Choose background color:</label>

<input type="color" name="color"

oninput="document.body.bgColor = this.value;">

<br><br>

<img src="bike.jpg" width="250" height="180">

</body>

</html>

Output:

Result:

Thus the creation of interactive website has been achieved successfully


Ex No : 2
Date:
Form validation using JavaScript.
Aim:

To validate form inputs using JavaScript.

Procedure:

1. Start

2. Create an HTML form with Name, Password fields, and a Submit button.

3. Trigger validateForm() on form submission.

4. Get user input values (Name and Password).

5. Check Name field:

a. If empty, show an alert and stop submission.

6. Check Password field:

a. If less than 6 characters, show an alert and stop submission.

7. Display registration details in an alert box if valid.

8. Prevent form submission (return false).

Program:

<!DOCTYPE html>

<html>

<head>

<title>Form Validation</title>

</head>

<body>

<form name="myform" onsubmit="return validateForm()">

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

Password: <input type="password" name="password"><br/>

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

</form>

<script>

function validateForm()

var name = document.forms["myform"]["name"].value;

var password = document.forms["myform"]["password"].value;

if (name.trim() === "")


{

alert("Name can't be blank");

return false;

} else if (password.length < 6)

alert("Password must be at least 6 characters long.");

return false;

var message = "Registration Successful!\n\n" +"Name: " + name + "\n" +"Password: " + password;

alert(message);

return false;

</script>

</body>

</html>

Output:

Result

Thus the above HTML code for form validation has been executed successfully.
Ex No : 3

Date:

Creation of simple PHP scripts.


Aim:

To create a simple PHP scripts

Procedure:

1. Create a file inside C:\xampp\htdocs and give name as pgm3.php

2. Open Xampp and click on start button of MySQL and Apache

3. Write default html code in newly created file

4. Write open and close tag of php

5. Declare Variables:

Define $name and $age.

6. Display Information:

Print name and age.

7. Define and Call Function:

Create display($name) and call it to display a welcome message.

8. Use Loop:

Print numbers from 1 to 5 using a for loop.

9. Run the Script:

Save as .php and execute on a server. Type this URL in browser http://localhost/pgm3.php

Program:

<!DOCTYPE html>

<html>

<head>

<title>Personal Information</title>

</head>

<body>

<?php

$name = "Krish";

$age = 25;

?>

<h3>Personal Information</h3>

<p>Name: <?php echo $name; ?></p>


<p>Age: <?php echo $age; ?></p>

<?php

function display($name)

echo "Hello, " . $name . "! Welcome to PHP.";

?>

<p><?php display($name); ?></p>

<h3>Counting from 1 to 5</h3>

<?php

for ($i = 1; $i <= 5; $i++)

echo "Number: $i<br>";

?>

</body>

</html>

Output:

Result

Thus the above HTML code for form validation has been executed successfully.
Ex No : 4

Date: Handling multimedia content in websites.


Aim:

To Handling multimedia content in web sites

Procedure:

1. Create an HTML File:

Open a text editor (Notepad++, VS Code, etc.).

Save the file as multimedia.html.

2. Define the Basic HTML Structure:

Use <!DOCTYPE html> to define the document type.

Add <html>, <head>, and <body> tags.

Set the title using <title>Multimedia Content</title> inside <head>.

3. Embed an Online Video (YouTube):

Use the <iframe> tag with the src attribute pointing to a YouTube video.

Set the width, height, and allowfullscreen attributes.

4. Embed a Local Video:

Use the <video> tag with controls to allow play/pause.

Add a <source> tag with src="myvideo.mp4" and type="video/mp4".

Include a fallback message for browsers that don't support the video tag.

5. Embed an Audio File:

Use the <audio> tag with controls to allow play/pause.

Add a <source> tag with src="test.mp3" and type="audio/mp3".

Include a fallback message for unsupported browsers.

6. Save and Run the Program:

Save the file as multimedia.html.

Open it in a web browser to check the output.

Program:

<!DOCTYPE html>
<html>
<head>
<title>Multimedia Content</title>
</head>
<body>
<h3>HTML Video Tag</h3>
<p>Adding an online video from YouTube:</p>
<iframe width="450" height="250"
src="https://www.youtube.com/embed/GUXZoWDztSE"
frameborder="0" allowfullscreen>
</iframe>
<h3>Internal Video Sample</h3>
<p>Playing a locally stored video:</p>
<video width="450" height="250" controls>
<source src="myvideo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<h3>Audio Sample</h3>
<audio controls>
<source src="test.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</body>
</html>
Output:

Result

Thus the above HTML code for form validation has been executed successfully.
Ex No : 5a
Date:
Invoke Servlets from HTML Forms
Aim:
To Invoke Servlets from HTML Forms

Procedure:

Step 1: Install & Setup Eclipse with Tomcat

1. Download & Install Eclipse (Eclipse IDE for Enterprise Java and Web Developers).
2. Install Apache Tomcat (Version 9 or higher recommended).
3. Configure Tomcat in Eclipse:
o Open Eclipse → Go to Window → Preferences.
o Navigate to Server → Runtime Environments.
o Click Add → Select Apache Tomcat version → Browse to your Tomcat installation
directory → Click Finish.

Step 2: Create a New Dynamic Web Project

1. Go to File → New → Dynamic Web Project.


2. Enter Project Name: ServletExample.
3. Select Target Runtime: Choose Apache Tomcat (configured earlier).
4. Click Finish.

Step 3: Configure web.xml

1. In Project Explorer, navigate to Webapp/WEB-INF/.


2. Right-click → New → File → Name it web.xml.
3. Copy and paste the following XML configuration:

Step 4: Create the Servlet

1. In Project Explorer, go to Java Resources/src.


2. Right-click → New → Servlet.
3. Enter Package Name: com.example
4. Enter Class Name: Server
5. Click Finish, then replace the generated code with:
6. Save the file.

Step 5: Create the HTML Form

1. In Project Explorer, navigate to WebContent/.


2. Right-click → New → HTML File → Name it index.html.
3. Copy and paste the following code:
4. Save the file.

Step 6: Run the Project


1. Right-click the project → Run As → Run on Server.
2. Choose Apache Tomcat → Click Finish.
3. Open your browser and visit:
http://localhost:8080/ServletExample/index.html
4. Fill the form and submit to see the servlet process the input.
Program:
Java:
package com.example;
import java.io.*;
import java.util.*;
import jakarta.servlet.*;
import jakarta.servlet.http.*;
public class Server extends HttpServlet {
public void service(HttpServletRequest req, HttpServletResponse res) throws ServletException,
IOException {
res.setContentType("text/html");
PrintWriter pw = res.getWriter();
pw.println("<body style='background-color:AntiqueWhite;'>");
pw.println("<h1 style='text-align:center;'>Registration Successful...</h1>");
Enumeration<String> e = req.getParameterNames();
while (e.hasMoreElements()) {
String paramName = e.nextElement();
String paramValue = req.getParameter(paramName);
pw.println("<h2 style='text-align:center;'>" + paramName + " = " + paramValue + "</h2>");
}
pw.println("</body>");
pw.close();
}
}
Xml:
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" version="4.0">
<servlet>
<servlet-name>Register</servlet-name>
<servlet-class>com.example.Server</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Register</servlet-name>
<url-pattern>/server</url-pattern>
</servlet-mapping>
</web-app>

Html:

<!DOCTYPE html>
<html>
<head>
<title>Invoking Servlet From HTML</title>
</head>
<body bgcolor="AntiqueWhite">
<form name="form1" method="post" action="http://localhost:8080/ServletExample/server">
<fieldset>
<legend>Registration</legend>
First Name: <input type="text" name="FirstName" size="25"/><br/><br/>
Last Name: <input type="text" name="LastName" size="25"/><br/><br/>
E-mail ID: <input type="email" name="EmailID" size="25"/><br/><br/>
Password: <input type="password" name="Password" size="25"/><br/><br/>
<input type="submit" value="SUBMIT">
</fieldset>
</form>
</body>
</html>

Output:
Result
Thus the above program has been executed successfully.
Ex No : 5b
Date:
Session Tracking using Hidden Form Fields
Aim:
To create Session Tracking using Hidden Form Fields.

Procedure:

Step 1: Create a New Dynamic Web Project


1. Open Eclipse → File → New → Dynamic Web Project.
2. Project Name: SessionTracking.
3. Target Runtime: Choose Apache Tomcat.
4. Click Finish.

Step 2: Add web.xml Configuration


1. Go to Webapp/WEB-INF/.
2. Right-click → New → File → Name it web.xml.
3. Type the xml code and save the file

Step 3: Create the Servlet Files


1. Go to Java Resources/src.
2. Right-click → New → Package → Name it: com.example
3. Create the First Servlet (SetServlet2.java):
o Right-click on com.example → New → Servlet.
o Class Name: SetServlet2 → Click Finish.
o Type the java code:
4. Create the Second Servlet (GetServlet2.java):
o Right-click on com.example → New → Servlet.
o Class Name: GetServlet2 → Click Finish.
o Type the java code :

Step 5: Create login.html File


1. Go to Webapp/.
2. Right-click → New → HTML File → Name it login.html.
3. Type the html code and Save:

Program:
Xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<servlet>
<servlet-name>SetServlet2</servlet-name>
<servlet-class>com.example.SetServlet2</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SetServlet2</servlet-name>
<url-pattern>/SetServlet2</url-pattern>
</servlet-mapping>

<servlet>
<servlet-name>GetServlet2</servlet-name>
<servlet-class>com.example.GetServlet2</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>GetServlet2</servlet-name>
<url-pattern>/GetServlet2</url-pattern>
</servlet-mapping>

<welcome-file-list>
<welcome-file>login.html</welcome-file>
</welcome-file-list>
</web-app>

Html:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta charset="UTF-8">
</head>
<body>
<h2>Login Page</h2>
<form action="SetServlet2" method="post">
Username: <input type="text" name="userName" required><br><br>
Password: <input type="password" name="password" required><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>

Java: SetServlet2

package com.example;
import java.io.IOException;
import java.io.PrintWriter;
import jakarta.servlet.RequestDispatcher;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

public class SetServlet2 extends HttpServlet {


private static final long serialVersionUID = 1L;

protected void doPost(HttpServletRequest request, HttpServletResponse response)


throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();

String userName = request.getParameter("userName");


String password = request.getParameter("password");

if (userName == null || userName.isEmpty() || password == null || password.isEmpty()) {


out.println("Please enter both username and password.<br/><br/>");
RequestDispatcher dispatcher = request.getRequestDispatcher("login.html");
dispatcher.include(request, response);
} else if (!userName.isEmpty() && !password.isEmpty()) {
out.println("Login successful!<br>");
out.println("Click below to view stored values.<br>");
out.print("<form action='GetServlet2' method='post'>");
out.print("<input type='hidden' name='userName' value='" + userName + "'>");
out.print("<input type='hidden' name='password' value='" + password + "'>");
out.print("<input type='submit' value='View Values'>");
out.print("</form>");
} else {
out.println("Invalid username or password.<br/><br/>");
RequestDispatcher dispatcher = request.getRequestDispatcher("login.html");
dispatcher.include(request, response);
}
out.close();
}
}

GetServlet2

package com.example;
import java.io.IOException;
import java.io.PrintWriter;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

public class GetServlet2 extends HttpServlet {


private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();

String userName = request.getParameter("userName");


String password = request.getParameter("password");

out.println("<h2>Retrieved Values</h2>");
out.println("<p>Username: " + userName + "</p>");
out.println("<p>Password: " + password + "</p>");
out.close();
}
}

Output:
Result
Thus the above program has been executed successfully.
Ex No : 5c
Date:
Session Tracking for a Hit Count
Aim:
To create Session Tracking for a Hit Count.

Procedure:
Step 1: Create a New Dynamic Web Project
1. Open Eclipse.
2. Go to File → New → Dynamic Web Project.
3. Enter Project Name: SessionCount.
4. Select Target Runtime: Choose Apache Tomcat (already configured).
5. Click Finish.
Step 2: Configure web.xml
1. In Project Explorer, go to Webapp/WEB-INF/.
2. Right-click → New → File → Name it web.xml.
3. Type the xml code there.
4. Save the file.
Step 3: Create the Servlet
1. In Project Explorer, go to Java Resources/src.
2. Right-click → New → Servlet.
3. Enter Package Name: com.example
4. Enter Class Name: Session
5. Click Finish, then type java code there.
6. Save the file.
Step 5: Run the Project
1. Right-click on the project → Run As → Run on Server.
2. Choose Apache Tomcat → Click Finish.
3. Open a browser and visit:
http://localhost:8080/SessionCount/Session
4. Refresh the page multiple times to see the session count increase.

Program:

Xml:

<?xml version="1.0" encoding="UTF-8"?>


<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">

<servlet>
<servlet-name>Session</servlet-name>
<servlet-class>com.example.Session</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Session</servlet-name>
<url-pattern>/Session</url-pattern>
</servlet-mapping>
</web-app>

Java:
package com.example;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Enumeration;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;

public class Session extends HttpServlet {


private static final long serialVersionUID = 1L;

public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException,


IOException {
res.setContentType("text/html");
PrintWriter out = res.getWriter();
HttpSession session = req.getSession();
Integer count = (Integer) session.getAttribute("tracker.count");
if (count == null) {
count = 1;
} else {
count = count + 1;
}
session.setAttribute("tracker.count", count);
out.println("<!DOCTYPE html>");
out.println("<html><head><title>Session Tracker</title></head><body>");
out.println("<h1>Session Tracking Demo</h1>");
out.println("<p>You've visited this page " + count +
(count == 1 ? " time." : " times.") + "</p>");
out.println("<h2>Here is your session data:</h2>");
Enumeration<String> attributeNames = session.getAttributeNames();
while (attributeNames.hasMoreElements()) {
String name = attributeNames.nextElement();
out.println(name + ": " + session.getAttribute(name) + "<br>");
}
out.println("</body></html>");
out.close();
}
}

Output:

Result
Thus the above program has been executed successfully.
Ex No : 6
Date:
Creation of Information Retrieval System
Aim:
To create Information Retrieval System.

Procedure:

Step 1: Start Apache & MySQL


1. Open XAMPP Control Panel.
2. Start Apache and MySQL.

Step 2: Create Database & Table


1. Open phpMyAdmin (http://localhost/phpmyadmin/).
2. Click on the SQL tab and type the queries

Step 3: Save PHP File


1. Navigate to C:\xampp\htdocs\ (for XAMPP users).
2. Inside this folder, create a file test.php and type the PHP code.

Step 4: Run the Program


1. Open a browser.
2. Enter:
http://localhost/test.php
3. The page will load with:
o A dropdown to filter student data.
o A table displaying student records.
Step 5: Stop the Server (Optional)
• Stop Apache and MySQL from XAMPP Control Panel.

MYSQL :

CREATE DATABASE test;


USE test;
CREATE TABLE stud (
Sno INT PRIMARY KEY,
Sname VARCHAR(50),
Dept VARCHAR(50)
);
INSERT INTO stud (Sno, Sname, Dept) VALUES
(12, 'NPK. GaneshKumar', 'IT'),
(14, 'Goutham', 'IT'),
(15, 'Arun', 'CSE'),
(19, 'Shyam', 'MECH'),
(22, 'Krish', 'CSE'),
(23, 'Haaris', 'MECH');
PHP Code:

<?php
$servername = "localhost:3307";
$username = "root";
$password = "";
$dbname = "test";

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


if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$studQuery = "SELECT DISTINCT Sname FROM stud";


$studResult = $conn->query($studQuery);
$selectedName = isset($_POST['sname']) ? $_POST['sname'] : "";

if (!empty($selectedName)) {
$sql = "SELECT * FROM stud WHERE Sname = '$selectedName'";
} else {
$sql = "SELECT * FROM stud";
}
$result = $conn->query($sql);
?>
<!DOCTYPE html>
<html>
<head>
<title>Student Data</title>
<style>
body {
background-color: #bbdefb;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

h2 {
text-align: center;
color: #0d47a1;
margin-top: 20px;
}

form {
text-align: center;
margin-bottom: 20px;
}
select, input {
padding: 10px;
font-size: 16px;
margin: 5px;
}

table {
border-collapse: collapse;
width: 40%;
margin: 20px auto;
background-color: white;
box-shadow: 2px 2px 10px gray;
}

th, td {
border: 1px solid black;
padding: 8px;
font-size: 14px;
}

th {
background-color: #1565c0;
color: white;
}
</style>
</head>
<body>

<h2>Student Information Retrieval</h2>

<form method="post">
<label for="sname"><strong>Select Student:</strong></label>
<select name="sname">
<option value="">-- All Students --</option>
<?php
if ($studResult->num_rows > 0) {
while ($row = $studResult->fetch_assoc()) {
$selected = ($selectedName == $row['Sname']) ? "selected" : "";
echo "<option value='{$row['Sname']}' $selected>{$row['Sname']}</option>";
}
}
?>
</select>
<input type="submit" value="Search">
</form>
<table>
<thead>
<tr>
<th>Sno</th>
<th>Sname</th>
<th>Dept</th>
</tr>
</thead>
<tbody>
<?php
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "<tr>
<td>{$row['Sno']}</td>
<td>{$row['Sname']}</td>
<td>{$row['Dept']}</td>
</tr>";
}
} else {
echo "<tr><td colspan='3'>No records found</td></tr>";
}
?>
</tbody>
</table>

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

Output:
Result
Thus the above program has been executed successfully.
Ex No : 7
Date:
Creation of Personal Information System
Aim:
To create Personal Information System

Procedure:
Step 1: Start Apache & MySQL
1. Open XAMPP Control Panel.
2. Start Apache and MySQL modules.

Step 2: Create Database & Table


1. Open your browser and go to: http://localhost/phpmyadmin.
2. Create a new database named: test.
3. Click on the SQL tab and run the following query to create the table:

Step 3: Save PHP File


1. Go to: C:\xampp\htdocs\
2. Create a new file named test1.php.
3. Paste the full PHP code into this file (the one you provided earlier).

Step 4: Run the Program


1. Open a browser.
2. In the address bar, type:
http://localhost/test1.php
3. The page will display:
o A form to input employee details (Eno, Ename, Salary, City).
o A table showing all registered employees.

Step 5: Stop the Server (Optional)


• To close everything, stop Apache and MySQL from the XAMPP Control Panel.

MYSQL :
CREATE TABLE emp (
Eno INT PRIMARY KEY,
Ename VARCHAR(50),
Sal INT,
City VARCHAR(50)
);

PHP Code:
<?php
$servername = "localhost:3307";
$username = "root";
$password = "";
$db = "test";
$conn = new mysqli($servername, $username, $password, $db);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Employee Information System</title>
<style>
body {
background: linear-gradient(to right, #8e24aa, #6a1b9a); /* darker purple gradient */
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
margin-top: 30px;
color: #f3e5f5;
text-shadow: 1px 1px 2px #000;
}
form {
display: inline-block;
text-align: left;
padding: 25px;
margin-top: 20px;
background-color: #ffffff;
border: 2px solid #ba68c8;
border-radius: 12px;
box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}
input[type="text"], input[type="number"] {
width: 300px;
padding: 10px;
margin: 10px 0;
border: 1px solid #ce93d8;
border-radius: 6px;
box-sizing: border-box;
font-size: 16px;
}
input[type="submit"] {
background-color: #ab47bc;
color: white;
padding: 10px 20px;
margin-top: 10px;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
input[type="submit"]:hover {
background-color: #7b1fa2;
}
table {
margin: 30px auto;
border-collapse: collapse;
width: 60%;
background-color: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
th {
background-color: #ce93d8;
color: white;
padding: 10px;
font-size: 14px;
}
td {
padding: 8px;
border-bottom: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f3e5f5;
}
h2 {
color: #f3e5f5;
margin-top: 40px;
}
</style>
</head>
<body>
<h1>Employee Information System</h1>
<form method="post">
<label>Employee No (Eno):</label><br>
<input type="number" name="eno" placeholder="Enter Eno" required><br>
<label>Employee Name (Ename):</label><br>
<input type="text" name="ename" placeholder="Enter Name" required><br>
<label>Salary:</label><br>
<input type="number" name="sal" placeholder="Enter Salary" required><br>
<label>City:</label><br>
<input type="text" name="city" placeholder="Enter City" required><br>
<input type="submit" name="submit" value="Submit">
</form>
<?php
if(isset($_POST['submit'])) {
$eno = $_POST['eno'];
$ename = $_POST['ename'];
$sal = $_POST['sal'];
$city = $_POST['city'];
$qry = "INSERT INTO emp (Eno, Ename, Sal, City)
VALUES ('$eno', '$ename', '$sal', '$city')";
if(mysqli_query($conn, $qry)) {
echo '<script>alert("Employee Registered Successfully");</script>';
echo '<script>window.location.href="test1.php";</script>';
} else {
echo "Error: " . mysqli_error($conn);
}
}
?>
<h2>Employee Details</h2>
<table>
<thead>
<tr>
<th>Eno</th>
<th>Ename</th>
<th>Salary</th>
<th>City</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM emp";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "<tr>
<td>{$row['Eno']}</td>
<td>{$row['Ename']}</td>
<td>{$row['Sal']}</td>
<td>{$row['City']}</td>
</tr>";
}
} else {
echo "<tr><td colspan='4'>No records found</td></tr>";
}
?>
</tbody>
</table>
</body>
</html>
<?php
$conn->close();
?>

Output:
Result
Thus the above program has been executed successfully.

You might also like