BCSL-057 (Web Programming Lab )

BCSL-057 Web Programming Lab (Assignments Solutions)

Course Code : BCSL-057

Course Title : Web Programming Lab

Assignment Number : BCA(V)/L-057/Assignment/2024-25

Maximum Marks : 50

Weightage : 25%

Last Date of Submission : 31stOctober,2024(For July, Session)

30thApril, 2025(For January, Session)

Q1. Design and implement...................................................if needed .

Ans.

Part (a) — Implementation of the Pages

Home Page (Home.jsp)
This page will display the name of the mobile store, its objectives, and its address.

html

<!-- Home.jsp -->
<!DOCTYPE html>
<html>
<head>
    <title>Mobile for You - Home</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="top-division">
        <a href="Home.jsp">Home</a>
        <a href="MobileList.jsp">Mobile List</a>
        <a href="Comments.jsp">Comments</a>
    </div>
    
    <div class="info-division">
        <h1>Welcome to Mobile for You</h1>
        <h2>Our Objective</h2>
        <p>At Mobile for You, we aim to provide the best mobile devices at affordable prices. Your satisfaction is our top priority!</p>
        <h2>Address</h2>
        <p>123 Mobile Street, Tech City, 456789</p>
    </div>
</body>
</html>

Mobile List Page (MobileList.jsp)
This page will use JSP to connect to a database and display a list of mobile makes and their RAM size. Assume a database named Mobiles with a table Mobile_ram containing two fields: Mobile_make and RAM_size.

jsp

<!-- MobileList.jsp -->
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
    <title>Mobile for You - Mobile List</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="top-division">
        <a href="Home.jsp">Home</a>
        <a href="MobileList.jsp">Mobile List</a>
        <a href="Comments.jsp">Comments</a>
    </div>
    
    <div class="info-division">
        <h1>Mobile List</h1>
        <table border="1">
            <tr>
                <th>Make</th>
                <th>RAM (GB)</th>
            </tr>
            <%
                try {
                    // Connect to database
                    Class.forName("com.mysql.jdbc.Driver");
                    Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/Mobiles", "root", "password");
                    Statement stmt = con.createStatement();
                    ResultSet rs = stmt.executeQuery("SELECT * FROM Mobile_ram");

                    // Display result in table
                    while (rs.next()) {
                        String make = rs.getString("Mobile_make");
                        int ram = rs.getInt("RAM_size");
            %>
                        <tr>
                            <td><%= make %></td>
                            <td><%= ram %></td>
                        </tr>
            <%
                    }
                    con.close();
                } catch (Exception e) {
                    out.println("Error: " + e.getMessage());
                }
            %>
        </table>
    </div>
</body>
</html>

Assumptions for Database Table Mobile_ram:

Mobile_make	RAM_size
Samsung	2
Apple	4
OnePlus	8
Xiaomi	6
Oppo	3

Comments Page (Comments.jsp)
This page will contain a form for users to leave comments. (No form processing or validation is required.)

html

<!-- Comments.jsp -->
<!DOCTYPE html>
<html>
<head>
    <title>Mobile for You - Comments</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="top-division">
        <a href="Home.jsp">Home</a>
        <a href="MobileList.jsp">Mobile List</a>
        <a href="Comments.jsp">Comments</a>
    </div>
    
    <div class="info-division">
        <h1>Comments</h1>
        <form action="SubmitComment.jsp" method="post">
            <label for="name">Name:</label><br>
            <input type="text" id="name" name="name" required><br><br>
            
            <label for="email">Email:</label><br>
            <input type="email" id="email" name="email" required><br><br>
            
            <label for="comments">Comments:</label><br>
            <textarea id="comments" name="comments" rows="4" cols="50" required></textarea><br><br>
            
            <input type="submit" value="Submit">
        </form>
    </div>
</body>
</html>

Part (b) — External CSS File (styles.css)

The CSS file will ensure the same format for all three pages, and the top division background will be light green.

css

/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.top-division {
    background-color: lightgreen;
    padding: 15px;
    text-align: center;
}

.top-division a {
    margin: 0 15px;
    text-decoration: none;
    color: black;
    font-weight: bold;
}

.info-division {
    margin: 20px;
    padding: 20px;
    background-color: white;
    border: 1px solid #ccc;
}

table {
    width: 50%;
    margin: 20px 0;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

th, td {
    padding: 10px;
    text-align: center;
}

h1 {
    color: #333;
}

form {
    max-width: 500px;
    margin: 0 auto;
}

input[type="text"], input[type="email"], textarea {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
}

input[type="submit"] {
    background-color: lightgreen;
    color: black;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

Assumptions:

The database is named Mobiles and contains a table called Mobile_ram with two columns: Mobile_make and RAM_size.
MySQL database is used, and the connection URL, username, and password will be configured accordingly in the JSP page.

                            #CODEWITHCHIRAYU

Thank You 😊

Search This Blog

Chirayu's Blogs