Anna University Regional Campus, Coimbatore

Department of Computer Science and Engineering

Experiment 6B - Displaying Student Marklist Using JSP





AIM:

To create a three-tier application for displaying student mark list using JSP and database.

ALGORITHM:

  1. Design the HTML page (stud.html) with the following
    • Create a form to get the input (Register Number) from the user.
    • Set the URL of the server (marklist.jsp) as the value of the action attribute.
    • Use a submit button to invoke the server and send the form data to the server.
  2. Create the JSP file with the following
    • Read the parameter value (Register Number) from the form by using the method getParameter().
    • Server retrieves the details from the database table with respect to the form input.
    • Server displays the mark list to the client as the response.

PROGRAM:

HTML Form (Result.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Result page</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background: 
                linear-gradient(to right, #a1c4fd, #c2e9fb),
                linear-gradient(to top, #fbc2eb, #a6c1ee); 
            background-size: cover;
            background-attachment: fixed;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .form-container {
            background: rgba(255, 255, 255, 0.85);
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
            text-align: center;
            z-index: 1;
        }

        h1 {
            color: #333;
            font-size: 2em;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        h2 {
            color: #444;
            margin-bottom: 20px;
            font-size: 1.2em;
            font-weight: 600;
        }

        label {
            display: block;
            color: #333;
            font-size: 1.1em;
            margin-bottom: 8px;
            text-align: left;
        }

        input[type="number"] {
            width: 100%;
            padding: 14px;
            font-size: 1em;
            border: 2px solid #ccc;
            border-radius: 8px;
            margin-bottom: 20px;
            outline: none;
            transition: border 0.3s ease;
        }

        input[type="number"]:focus {
            border-color: #a1c4fd;
        }

        button {
            width: 100%;
            padding: 14px;
            font-size: 1.1em;
            color: #fff;
            background-color: blue;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #89a6df;
        }

        @media (max-width: 600px) {
            .form-container {
                width: 90%;
                padding: 25px;
            }

            h1 {
                font-size: 1.6em;
            }

            h2 {
                font-size: 1em;
            }
        }

    </style>
</head>
<body>
    <div class="form-container">
        <h1>Student Information</h1>
        <h2>Enter Roll Number to Fetch Details</h2>
        <form action="IndexServlet" method="post">
            <label for="roll">Roll Number:</label>
            <input type="number" id="roll" name="roll" placeholder="Enter Roll Number" required>
            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>

HTML Form (StudInformation.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Information</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(to right, #ffb6c1, #ffe4e1);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            background-color: #fff;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 380px;
            text-align: left;
            transition: box-shadow 0.3s ease;
        }

        .container:hover {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        h1 {
            font-size: 2em;
            color: #2c3e50;
            margin-bottom: 20px;
            text-transform: uppercase;
            text-align: center;
        }

        ol {
            padding-left: 20px;
        }

        ol li {
            font-size: 1.1em;
            color: #555;
            margin: 12px 0;
        }

        .subject {
            font-weight: bold;
            color: #3498db;
        }

        .total {
            color: #e74c3c;
            font-size: 1.3em;
            font-weight: bold;
        }

        .back-button {
            display: inline-block;
            margin-top: 20px;
            padding: 12px 24px;
            font-size: 1.1em;
            color: #fff;
            background-color: #3498db;
            text-decoration: none;
            border-radius: 8px;
            transition: background-color 0.3s ease;
        }

        .back-button:hover {
            background-color: #2980b9;
        }

        /* Adjusting font size for Roll Number and Name */
        .info {
            font-size: 1.7em;
            color: #55;
            margin: 8px 0;
        }

        /* For smaller screens */
        @media (max-width: 600px) {
            .container {
                width: 90%;
                padding: 20px;
            }

            h1 {
                font-size: 1.6em;
            }

            ol li {
                font-size: 1em;
            }

            .info {
                font-size: 1em;
            }
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Student Details</h1>
    <p class="info"><strong>Roll Number:</strong> ${roll}</p>
    <p class="info"><strong>Name:</strong> ${name}</p>

    <h2>Subjects</h2>
    <ol start="1">
        <li><span class="subject">Tamil:</span> ${Tamil}</li>
        <li><span class="subject">English:</span> ${English}</li>
        <li><span class="subject">Maths:</span> ${Maths}</li>
        <li><span class="subject">Science:</span> ${Science}</li>
        <li><span class="subject">Social:</span> ${Social}</li>
    </ol>
    <p><span class="total">Total:</span> ${Total}</p>
    <a href="index.jsp" class="back-button">Back to Form</a>
</div>

</body>
</html>

HTML Form (Error.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Error</title>
</head>
<body>
    <h1>An error occurred:</h1>
    <p>${errorMessage}</p> <!-- This will display the error message set in the servlet -->
    <a href="index.jsp">Go Back</a>
</body>
</html>

Servlet File (IndexServlet.java)

<import java.io.IOException;>
<import java.sql.Connection;>
<import java.sql.PreparedStatement;>
<import java.sql.ResultSet;>
<import java.sql.SQLException;>

<import javax.servlet.RequestDispatcher;>
<import javax.servlet.ServletException;>
<import javax.servlet.annotation.WebServlet;>
<import javax.servlet.http.HttpServlet;>
<import javax.servlet.http.HttpServletRequest;>
<import javax.servlet.http.HttpServletResponse;>

<import mark.DBConnection;>

<WebServlet("/IndexServlet")>
public class IndexServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String roll = request.getParameter("roll");

        try (Connection conn = DBConnection.getConnection();
             PreparedStatement stmt = conn.prepareStatement("SELECT * FROM marks WHERE rollno=?")) {

            stmt.setString(1, roll);

            ResultSet rs = stmt.executeQuery();

            <!-- Move the cursor to the first row in the result set -->
            if (rs.next()) {
                String name = rs.getString("Name");
                Integer Tamil = rs.getInt("Tamil");
                Integer English = rs.getInt("English");
                Integer Maths = rs.getInt("Maths");
                Integer Science = rs.getInt("Science");
                Integer Social = rs.getInt("Social");
                Integer Total = rs.getInt("Total");


                request.setAttribute("roll", roll);
                request.setAttribute("name", name);
                request.setAttribute("Tamil", Tamil);
                request.setAttribute("English", English);
                request.setAttribute("Maths", Maths);
                request.setAttribute("Science", Science);
                request.setAttribute("Social", Social);
                request.setAttribute("Total", Total);

                <!-- Forward to the JSP page -->
                RequestDispatcher dispatcher = request.getRequestDispatcher("show.jsp");
                dispatcher.forward(request, response);
            } else {
                <!-- Handle case where no result is found -->
                request.setAttribute("errorMessage", "No records found for the provided roll number.");
                RequestDispatcher dispatcher = request.getRequestDispatcher("error.jsp");
                dispatcher.forward(request, response);
            }
        } catch (SQLException e) {
            e.printStackTrace();
            <!-- Optional: redirect to an error page or display a message on the current page -->
            request.setAttribute("errorMessage", "An error occurred while retrieving the data.");
            RequestDispatcher dispatcher = request.getRequestDispatcher("error.jsp");
            dispatcher.forward(request, response);
        }
    }
}

Java File (DBConnection.java)

<package mark;>

<import java.sql.Connection;>
<import java.sql.DriverManager;>
<import java.sql.SQLException;>

<public class DBConnection> {
    private static final String URL = "jdbc:mysql://localhost:3306/studentresult";
    private static final String USER = "root";
    private static final String PASSWORD = "";

    public static Connection getConnection() throws SQLException {
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
        return DriverManager.getConnection(URL, USER, PASSWORD);
    }
}

Sample Output:

Output Image 1 Output Image 2

RESULT:

Thus, the creation of a three-tier application for displaying student mark list using JSP and database has been verified successfully.