Scribd
Upload
0 views

IT3401-Web Essentials Key April-May 2025

The document contains an answer key for the IT3401 - Web Essentials exam at St. Joseph's Institute of Technology, detailing various topics such as website working principles, client-side vs server-side scripting, HTML form design, CSS3's role in web layouts, and JavaScript event handling. It includes code examples for HTML forms, CSS animations, and PHP scripts, as well as explanations of HTTP protocol, DNS functionality, and network classifications. The content is structured into parts, covering both theoretical concepts and practical implementations relevant to web development.

Uploaded by

javidinaug77
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
0 views

IT3401-Web Essentials Key April-May 2025

The document contains an answer key for the IT3401 - Web Essentials exam at St. Joseph's Institute of Technology, detailing various topics such as website working principles, client-side vs server-side scripting, HTML form design, CSS3's role in web layouts, and JavaScript event handling. It includes code examples for HTML forms, CSS animations, and PHP scripts, as well as explanations of HTTP protocol, DNS functionality, and network classifications. The content is structured into parts, covering both theoretical concepts and practical implementations relevant to web development.

Uploaded by

javidinaug77
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/ 20

St.

JOSEPH'S INSTITUTE OF TECHNOLOGY, CHENNAI - 119


(An Autonomous Institution)
B.E./B.Tech. DEGREE END SEMESTER EXAMINATIONS, APRIL/MAY 2025
Fourth Semester
Information Technology
IT3401 - WEB ESSENTIALS
(Regulations 2021)

Answer Key

Part-A
1. Explain the working principle of a website with a diagram
The working principle of a website involves a user accessing a website through a browser.
The browser sends a request to a web server, which processes the request and retrieves
the necessary data from a database or stored files. The server then responds by sending
the website’s content back to the browser, which renders it for the user to view and
interact with.

2. Differentiate between client=side and server-side scripting.


Client-side Scripting Language: The client-side scripting language is used to create web
pages as a request or response server. These pages are displayed on the web browser.
Eg: HTML, CSS, Java Script, PHP.
Server-side Scripting Language: The server-side scripting language is used to create web
pages that provide services. The scripts generally run on servers. Eg: ASP, JSP, Servlet,
PHP.

3. Design an HTML form with fields for name, email and a submit button.
!DOCTYPE html>
<html>
<body>
<form action="submit_form.php" 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>
<input type="submit" value="Submit">
</form>
</body>
</html>

4. Explain the role of CSS3 in enhancing web page layouts.


CSS3 plays a crucial role in enhancing web page layouts by providing advanced styling
capabilities that improve the visual appeal, responsiveness, and overall user experience
of websites. They provide Improved Styling & Aesthetics, Responsive Design, Enhanced
Animations & Transitions, Efficient Layout Management and Reduced Dependency on
JavaScript.

5. What is the function of with statement in JavaScript?


The “with” statement simplifies some types of JavaScript statements by reducing many
references to an object to just one reference. References to properties and methods
within the with block are assumed to apply to that object.

6. How comments are included in JavaScript?


JavaScript supports both C-style and C++-style comments, thus –
Any text between a // and the end of a line is treated as a comment and is ignored by
JavaScript.
Any text between the characters /* and */ is treated as a comment. This may span
multiple lines.

7. Write a SQL query to retrieve all records from a “Students” table.


Select * from Students;

8. Write a PHP script to display “Hello, World!” on a web page.


<!DOCTYPE html>
<html>
<head>
<title>PHP Hello World</title>
</head>
<body>
<?php
echo "<h1>Hello, World!</h1>";
?>
</body>
</html>
9. What is JDBC? Explain its significance in database connectivity.
JDBC (Java Database Connectivity) is an API (Application Programming Interface) in Java
that allows applications to communicate with relational databases. It provides a standard
way for Java programs to connect to databases, execute SQL queries, and manage
database transactions.
Significance of JDBC in Database Connectivity
Platform Independence, Dynamic Query Execution, Efficient Database Interaction,
Support for Multiple Database Vendors, Transaction Management, Security and
Robustness

10. List out the steps for establishing connection between Java program and database.
Basic JDBC Workflow : Load the JDBC Driver, Establish a connection to the database,
Create a statement, Execute SQL queries, Process the results, Close the connection.
Part – B
11a. Explain in detail about the working of HTTP protocol.
Hyper Text Transfer Protocol (HTTP) takes part in web browser and web server
communication. Hence it is called a communication protocol. The HTTP protocol follows the
request response model.
The client makes a request for a desired web page by giving the URL in the address bar. This
request is submitted to the web server and then the web server gives response to the web
browser by returning the requested web page.

HTTP Request Message Structure


The basic structure of request message is given by the following general form -
<start line>
<Header fields>
<Blank Line>
<Message Body>
Let us discuss this structure in detail:
Start line
The start line consists of three parts which are separated by a single space. These parts are -
1) Request method 2) Request-URI 3) HTTP version
Request method
The method indicates the desired action to be performed during the web browser and server
communication. It is always written in Upper Case letters. The primary method in HTTP is
GET. The GET method is used when -
You type a URL in address bar.
When you click on some hyperlink which is present in the document.
When browser downloads images for display within a HTML document.

There is another commonly used method called POST. The POST method is typically used to
send information collected from a user form.
HTTP Version: The first HTTP version was HTTP/0.9 but the official version of HTTP was
HTTP/1.1.
Header Fields and Message body: The host header field is associated with the HTTP request.
The header fields are in the form of field name and field value.
HTTP Response Message Structure: The structure of response message is similar to the
request message structure. It is as follows
<status line>
<Header fields>
<Blank Line>
<Message Body>
Status Line: Status line is similar to the start line in the request message. It consists of three
fields.

The HTTP version denotes the HTTP version such as HTTP/1.1. The status code is a numeric
code indicating the type of response. The reason phrase is in the text string form and
presents the information about the status code. For example:

The header field in the response message is similar to that of the request message. The
message body consists of response message.

Making a Request and Receiving a Response


When given a web page URL, a web browser uses HTTP to request the web page found at
that address. The below figure shows a web browser sending a request to a web server. In
the figure, the web browser sends an HTTP request to the server. The request (in its simplest
form) is: GET /books/downloads.html HTTP/1.1

Client requesting a resource from a web server

The word GET is an HTTP method indicating that the client wishes to obtain a resource from
the server. The remainder of the request provides the path name of the resource (e.g., an
HTML5 document) and the protocol’s name and version number (HTTP/1.1).
The client’s request also contains some required and optional headers. Any server that
understands HTTP (version 1.1) can translate this request and respond appropriately. The
below figure shows the web server responding to a request.

Client receiving a response from the web server


The server first sends a line of text that indicates the HTTP version, followed by a numeric
code and a phrase describing the status of the transaction. For example, HTTP/1.1 200 OK
indicates success, whereas HTTP/1.1 404 Not found informs the client that the web server
could not locate the requested resource.

11b. (i) Explain the working of DNS.


Working of DNS
There are two tasks that can be carried out by DNS servers:
➢ Accepting and then requesting the programs to convert domain names to IP address.
➢ Accepting and then requesting the other DNS servers to convert domain names to IP
address.

Suppose PC A is interested in knowing the IP address of technicalpublications.org, then it


contacts nearest DNS server. This DNS server maintains huge database of domain names.

The entry domain name technicalpublication.org is searched within this database and if the
IP address for corresponding name is found then the IP address is returned to PC A. If it is not
found, then the name of another DNS is suggested. If the request is made for some invalid
domain name, then the error message is returned.

11 b(ii) Explain how networks are classified based on size.


Classification of Communication Networks:
Based on size of networks: LAN (Local Area Network), WAN (Wide Area Network) and MAN
(Metropolitan Area Network).
Local Area Networks:
• Local area networks, generally called LANs, are privately-owned networks within a single
building or campus that run up to a few kilometers in size.
• They are widely used to connect personal computers and workstations in company offices
and factories to share resources (e.g., printers) and exchange information.

Metropolitan Area Network


• They are designed to extend over an entire city. It may be a single network or connecting
a number of LANs into a large network.
• The resources are shared between LANs.
• Example of MAN: telephone companies provide a popular MAN service called Switched
Multi Megabit Data Service (SMDS).

Wide Area Network


• A wide area network, or WAN, spans a large geographical area, often a country or
continent. It contains a collection of machines intended for running user (i.e., application)
programs. These machines are called as hosts.
• The hosts are connected by a communication subnet, or just subnet for short.
• The hosts are owned by the customers (e.g., people's personal computers) or
organizations, whereas the communication subnet is typically owned and operated by a
telephone company or Internet service provider.
• SAN – storage area network or system area network, usually confined to a single room
and connect various components of a large computing system.

12a. Implement CSS animations to create a hover effect for a webpage button.
CSS Code:
.button {
background-color: #3498db;
color: white;
padding: 12px 24px;
font-size: 16px;
border: none;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
}

.button:hover {
background-color: #2ecc71;
transform: scale(1.1);
}

HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Button Hover Effect</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<button class="button">Hover Me!</button>
</body>
</html>
12b. Design an HTML5 form with fields for a student survey (name, rating, comments).
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Student Survey Form</title>
<style>
body {
font-family: Arial, sans-serif;
}
form {
width: 300px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
label {
font-weight: bold;
}
input, textarea, select {
width: 100%;
padding: 8px;
margin: 5px 0;
border-radius: 4px;
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: #28a745;
color: white;
cursor: pointer;
border: none;
}
input[type="submit"]:hover {
background-color: #218838;
}
</style>
</head>
<body>
<h2>Student Survey Form</h2>
<form action="submit_survey.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="rating">Rating:</label>
<select id="rating" name="rating" required>
<option value="">Select Rating</option>
<option value="Excellent">Excellent</option>
<option value="Good">Good</option>
<option value="Average">Average</option>
<option value="Poor">Poor</option>
</select>
<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" placeholder="Write your
feedback..."></textarea>
<input type="submit" value="Submit Survey">
</form>
</body>
</html>

13a. “Implement a webpage with JavaScript that demonstrates event handling for a button
click. The button should change its color and display a message in the console when clicked.
Explain your code step-by-step”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Event Handling</title>
<style>
.button {
background-color: #3498db;
color: white;
padding: 12px 24px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease-in-out;
}
</style>
</head>
<body>
<h2>Click the Button to Change its Color</h2>
<button id="myButton" class="button">Click Me!</button>
<script>
// Select the button element
const button = document.getElementById("myButton");
// Add an event listener for the 'click' event
button.addEventListener("click", function() {
// Change the button's color
button.style.backgroundColor = "#2ecc71";
// Display a message in the console
console.log("Button Clicked: Color changed to green!");
});
</script>
</body>
</html>

13b. “Compare the efficiency of using addEventListener versus inline event handlers (e, g.
onClick) in JavaScript. Provide code examples for both approaches and analyze scenarios
where one method would be preferred over the other”.
JavaScript provides multiple ways to handle events on elements. Two common approaches
are:
1. Using addEventListener (Recommended for flexibility and maintainability)
2. Using Inline Event Handlers (Simple but less scalable)

Using addEventListener:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Event Handling with addEventListener</title>
</head>
<body>
<button id="myButton">Click Me!</button>
<script>
// Select the button element
const button = document.getElementById("myButton");
// Attach event listener for button click
button.addEventListener("click", function() {
alert("Button Clicked! (Using addEventListener)");
});
</script>
</body>
</html>

Advantages of addEventListener
Allows multiple event listeners on the same element
Supports various event types (e.g., click, mouseover, keydown)
Helps maintain cleaner code (separation of HTML & JavaScript)
Makes event management more structured and scalable

Using Inline Event Handlers (onClick)


<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline Event Handling</title>
</head>
<body>
<button onclick="alert('Button Clicked! (Using inline event)')">Click Me!</button>
</body>
</html>

Advantages of Inline Event Handlers


Quick and easy to implement
Suitable for small-scale projects
No need to reference elements using getElementById

Limitations of Inline Event Handlers


Harder to manage when handling multiple events on the same element
Mixes JavaScript with HTML, making code harder to maintain
Doesn't support multiple event listeners for the same event

For modern web development, addEventListener is preferred because it keeps JavaScript


separate from HTML, improves maintainability, and allows multiple event listeners. Inline
event handlers may still be useful for quick scripts or minimal functionality.
14.a. Write a PHP script to read data from a form (name, age) and display it.
HTMP form – User Input
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple PHP Form</title>
</head>
<body>
<h2>Enter Your Details</h2>
<form action="process.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" required><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

PHP Script – process.php


<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get form data
$name = htmlspecialchars($_POST["name"]);
$age = htmlspecialchars($_POST["age"]);
// Display the submitted data
echo "<h2>Submitted Data:</h2>";
echo "<p><strong>Name:</strong> $name</p>";
echo "<p><strong>Age:</strong> $age</p>";
} else {
echo "Invalid request!";
}
?>

14b. Write a PHP script to process a login form (Validate username / password).
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login Form</title>
</head>
<body>
<h2>Login</h2>
<form action="login.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>

PHP Script – login.php


<!DOCTYPE html>
<html lang="en">
<head>
<title>Login Form</title>
</head>
<body>
<h2>Login</h2>
<form action="login.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>

Explanation
The HTML form collects the username and password, sending them to login.php.
The PHP script retrieves the form data using $_POST.
Session handling (session_start()) stores the username upon successful login.
htmlspecialchars() sanitizes input to prevent security vulnerabilities.
The script compares the credentials to predefined values (admin / password123).
Displays success or error messages based on user input.

15a. Explain JDBC architecture with a diagram


JDBC (Java Database Connectivity) follows a structured architecture that enables Java
applications to interact with databases efficiently. It consists of:
✔Application Layer – The Java program making database requests.
✔JDBC API – Provides standard methods for database operations.
✔JDBC Driver Manager – Manages communication between the Java application and
different databases.
✔JDBC Driver – A specific implementation that connects Java applications to databases
like MySQL, Oracle, etc.
✔Database – Where the actual data is stored and queried.
JDBC Architecture & Steps
Step 1: Load the JDBC Driver
The JDBC driver loads the database-specific implementation to facilitate communication.
import java.sql.*;
class JDBCExample {
public static void main(String[] args) throws Exception {
// Load MySQL Driver
Class.forName("com.mysql.cj.jdbc.Driver");
System.out.println("Driver Loaded Successfully!");
}
}

Step 2: Establish Database Connection


import java.sql.*;
class JDBCConnection {
public static void main(String[] args) throws Exception {
// Database URL, Username, and Password
String url = "jdbc:mysql://localhost:3306/mydatabase";
String user = "root";
String password = "password";
// Establish Connection
Connection con = DriverManager.getConnection(url, user, password);
if (con != null) {
System.out.println("Connected to Database!");
}
// Close connection
con.close();
}
}

Step 3: Create & Execute SQL Query


import java.sql.*;
class JDBCQuery {
public static void main(String[] args) throws Exception {
// Establish Connection
Connection con =
DriverManager.getConnection("jdbc:mysql://localhost:3306/mydatabase", "root",
"password");
// Create Statement Object
Statement stmt = con.createStatement();
// Execute Query to Retrieve Data
ResultSet rs = stmt.executeQuery("SELECT * FROM Students");
// Process Query Results
while (rs.next()) {
System.out.println("Student Name: " + rs.getString("name"));
}
// Close Connection
con.close();
}
}

Step 4: Process Query Results


The returned data needs processing, as seen in the while loop above.
Each row is accessed using rs.next() while column values are retrieved with
rs.getString(column_name).
If inserting or updating data, use:
int rowsUpdated = stmt.executeUpdate("INSERT INTO Students (name, age) VALUES
('John Doe', 22)");
System.out.println("Rows affected: " + rowsUpdated);

Step 5: Close Database Connection


Always release resources after database interactions.
con.close(); // Closes the connection
stmt.close(); // Closes the statement object
rs.close(); // Closes the ResultSet object

15b(i). Write a program to explain the passing of values to a servlet from a HTML form using
doGet() / doPost().
HTML Form (User Input)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Servlet Data Passing</title>
</head>
<body>
<h2>Submit Your Details</h2>
<form action="MyServlet" method="get">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" required><br><br>
<input type="submit" value="Submit (GET)">
</form>
<form action="MyServlet" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Submit (POST)">
</form>
</body>
</html>

The above form uses both GET() and POST() methods.


✔ Submitting through GET sends data via URL parameters, while POST sends data in the
request body.

Java Servlet (MyServlet.Java)


import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
// Servlet Mapping
@WebServlet("/MyServlet")
public class MyServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
// Handling GET requests
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
// Retrieving values from GET request
String name = request.getParameter("name");
String age = request.getParameter("age");
out.println("<h2>Received via GET Method:</h2>");
out.println("<p><strong>Name:</strong> " + name + "</p>");
out.println("<p><strong>Age:</strong> " + age + "</p>");
}

Explanation
Servlet Mapping (@WebServlet(“/MyServlet”)) registers the servlet.
doGet() retrieves values from URL parameters using request.getParameter().
doPost() retrieves form data sent in the request body.
Response (PrintWriter) generates an HTML response displaying the received values.
Part – C
16a. Evaluate the effectiveness of different JavaScript form validation techniques for a user
registration system. Design a Solution that:
i. Validates username (alphanumeric, 5 – 12 characters), password (8+
characters, special characters, and email (regex)
ii. Provides real-time feedback using DOM manipulation
iii. Justify your approach over server-side validation for this scenario.

HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Real-time Form Validation</title>
<style>
.error { color: red; font-size: 14px; }
.valid { color: green; font-size: 14px; }
</style>
</head>
<body>
<h2>User Registration</h2>
<form id="registrationForm">
<label for="username">Username:</label>
<input type="text" id="username" required>
<span id="usernameError" class="error"></span><br><br>
<label for="password">Password:</label>
<input type="password" id="password" required>
<span id="passwordError" class="error"></span><br><br>
<label for="email">Email:</label>
<input type="email" id="email" required>
<span id="emailError" class="error"></span><br><br>
<input type="submit" value="Register">
</form>
<script src="validation.js"></script>
</body>
</html>

JavaScript Validation
document.addEventListener("DOMContentLoaded", function() {
const username = document.getElementById("username");
const password = document.getElementById("password");
const email = document.getElementById("email");
const usernameError = document.getElementById("usernameError");
const passwordError = document.getElementById("passwordError");
const emailError = document.getElementById("emailError");
// Username Validation (5-12 alphanumeric characters)
username.addEventListener("input", function() {
const regex = /^[a-zA-Z0-9]{5,12}$/;
if (regex.test(username.value)) {
usernameError.textContent = "✓ Valid username";
usernameError.className = "valid";
} else {
usernameError.textContent = "✗ Username must be 5-12 alphanumeric characters!";
usernameError.className = "error";
}
});
// Password Validation (8+ characters, includes special character)
password.addEventListener("input", function() {
const regex = /^(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/;
if (regex.test(password.value)) {
passwordError.textContent = "✓ Strong password!";
passwordError.className = "valid";
} else {
passwordError.textContent = "✗ Password must be at least 8 characters & include a
special character!";
passwordError.className = "error";
}
});
// Email Validation (Correct email format)
email.addEventListener("input", function() {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (regex.test(email.value)) {
emailError.textContent = "✓ Valid email format";
emailError.className = "valid";
} else {
emailError.textContent = "✗ Invalid email format!";
emailError.className = "error";
}
});
});

Justification for Client-side validation:


Improves User Experience – Provides immediate feedback without waiting for a server
response.
Reduces Server Load – Stops invalid requests from reaching the server, saving resources.
Fast and Responsive – Enables real-time error detection using DOM manipulation.
Prevents Simple Errors – Avoids unnecessary database queries for invalid inputs.

Limitations:
Client-side validation can be bypassed (users may disable JavaScript).
Server-side validation is essential for security (protection against SQL Injection, XSS).
When is Server-side Validation Required?
For final input verification before storing data
To prevent malicious attacks (e.g., SQL Injection, Cross-site scripting)
Handling sensitive data securely

16b. Create a student database with 4 records – name, regno, year, cgpa. Insert 4 rows into the
table created and write a html code and PHP script to retrieve a specific record of student
based on regno value entered.
Step 1:
Create a database named std_db. Create a table student for this database and insert the values
in this table.

PHP Document[DBDemo.php]
<?php
// Make a MySQL Connection
mysqli_connect(“localhost”,”root”,”mypassword”,”dbname”); or die(mysql_error());
mysqli_select_db(“test”) or die(mysql_error());
echo “Connected to database”;
mysqli_query($conn, “CREATE TABLE Student(Name VARCHAR(30), Regno INT, Year INT, CGPA
VARCHAR(30))”) or die(mysqli_error());
print”<br/>”;
echo “Table Created”;
//Insert a row of information into table “example”
mysqli_query($conn, “INSERT INTO Student(Name,Regno,Year, CGPA) VALUES
(‘A’,’105’,’2024’,8.5)”) or die (mysqli_error());
mysqli_query($conn, “INSERT INTO Student(Name,Regno,Year,CGPA) VALUES
(‘B’,’102’,’2024’,9.0)”) or die (mysqli_error());
mysqli_query($conn, “INSERT INTO Student(Name,Regno,Year,CGPA) VALUES
(‘C’,’103’,’2024’,8.98)”) or die (mysqli_error());
mysqli_query($conn, “INSERT INTO Student(Name,Regno,Year,CGPA) VALUES
(‘D’,’104’,’2024’,7.55)”) or die (mysqli_error());
print”<br/>”;
echo “Data Inserted”;
$result=mysqli_query($conn, “SELECT * from mytable”)
or die(mysqli_error());
print”<br/>”;
print”<b> User Database</b>”;
echo”<table border=’1’>”;
echo”<tr><th>Name</th><th>Regno</th> <th>Year</th><th>CGPA</th></tr>”;
while($row=mysqli_fetch_array($result))
{
//Print out the contents of each row into a table
echo”<tr><td>”;
echo $row[‘Name’];
echo”</td><td>”;
echo $row[‘Regno’];
echo”</td><td>”;
echo $row[‘Year’];
echo”</td><td>”;
echo $row[‘CGPA’];
echo”</td></tr>”;
}
echo “</table>”;

The table is created as follows:

Name Regno Year CGPA


A 105 2024 8.5
B 102 2024 9.0
C 103 2024 8.98
D 104 2024 7.55

Step 2: Create an HTML form to accept the registration number, the HTML document is as
follows-

result.html
<!DOCTYPE html>
<html>
<head>
<title>STUDENT RESULT</title>
</head>
<body>
<form name = “myform” method= “post” action= “http://localhost/result.php”>
<input type= “text” name= “reg_no” />
<input type = “submit” value= “Submit” />
</form>
</body>
</html>

Step 3: Create a PHP Script to accept the registration number. This PHP script will connect to
MYSQL database and fetch the entire row of the student table based on the register number
entered.

Result.php
<?php
//Make a SQL Connection
$conn=mysqli_connect(“localhost”, “root”, “”, “dbname”);
if(!$conn)
{
die(‘error in connection’.mysqli_error());
}
//mysqli_select_db(“mydb”,$conn);
$reg_no = intval($_POST[‘reg_no’]);
$result=mysqli_query($conn, “SELECT * FROM student where Regno =‘$reg_no’”);
while($row=mysqli_fetch_array($result))
{
echo $row[‘Regno’]. “is”. $row[‘STATUS’];
echo “<br/>”;
}
mysqli_close($conn);
?>

Step 4: Load the HTML form created in Step 2 and click the submit button by entering some
registration number

Output:
Name Regno Year CGPA
A 105 2024 8.5

Prepared By: Dr. L. Javid Ali Professor / IT


Verified By: Dr. M. K. Kirubakaran Professor / ADS

You might also like