Scribd
Upload
104 views

BCSL057 Solved Assignment 2024-25 @BCAcrackers

The document outlines the BCSL-057 Web Programming Lab assignment for the academic year 2024-25, which involves creating a web application with three pages: a Home Page, a Mobile List Page using JSP, and a Comments Page. It specifies the requirements for each page, including database connectivity for the Mobile List and a form for the Comments Page, along with a CSS file for styling. Submission deadlines are provided, along with the grading criteria, which includes a total of 50 marks for the assignment and viva voce.

Uploaded by

ritikyadav.0177
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
104 views

BCSL057 Solved Assignment 2024-25 @BCAcrackers

The document outlines the BCSL-057 Web Programming Lab assignment for the academic year 2024-25, which involves creating a web application with three pages: a Home Page, a Mobile List Page using JSP, and a Comments Page. It specifies the requirements for each page, including database connectivity for the Mobile List and a form for the Comments Page, along with a CSS file for styling. Submission deadlines are provided, along with the grading criteria, which includes a total of 50 marks for the assignment and viva voce.

Uploaded by

ritikyadav.0177
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/ 17

BCSL-057 Solved Assignment 2024-25 | learningscience.co.

in 1

Course Code : BCSL-057

Course Title : Web Programming Lab

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

Maximum Marks : 50

Weightage : 25%

Last Dates for Submission : 31stOctober,2024(For July, Session) 30thApril, 2025(For January, Session)

Note:

This assignment has one question of 40 marks. Rest 10 marks are for viva voce. Please go through the guidelines regarding
assignments given in the programme guide for the format of presentation.

Q1.(a) Design and implement a website/web application consisting of three pages having the following layout:
BCSL-057 Solved Assignment 2024-25 | learningscience.co.in 2

Create three pages having the same layout as shown in Figure 1. The Top Division contains the following links:

Home : Link to Home Page

Mobile List : Link to a Mobile List Page created using JSP

Comments : Link to a Comments Page containing a form

The Information Division of the three pages should be as per the following description:

(i) The Home Page should display the name of the mobile store "Mobile for You". It should display the objectives and
address of the mobile store. (3 Marks)

(ii) The Mobile List Page should be generated by a query to a database "Mobiles" having a single relation Mobile_ram
(Mobile_make, RAM_size). (3 Marks)

You must use JSP to connect to database and display information as:
BCSL-057 Solved Assignment 2024-25 | learningscience.co.in 3

Mobile List

Make RAM (GB)


Samsung 2
Apple 4

You must display at least five mobiles in this list. (18 Marks)

iii) The Comments Page should display a form as shown below : (Please do not write the code for processing or
verification of the form) (6 Marks)
BCSL-057 Solved Assignment 2024-25 | learningscience.co.in 4

(b) Create an external CSS file that ensures that format of all the three pages is as per the layout of Figure 1. The
background colour of Link Division should be light green. (10 Marks)

You may make suitable assumptions, if needed.

Solution:

For this assignment, I will create a simple web application with three pages: a Home Page, a Mobile List Page (generated using
JSP with a database connection), and a Comments Page with a form. I will also create an external CSS file to ensure that the
layout and design match the description provided, including formatting for the top navigation and background colors.

1. HTML Code for the Home Page (index.html):

This page will display the name and objectives of the mobile store "Mobile for You."

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="styles.css">

<title>Mobile for You - Home</title>

</head>

<body>

<div id="top">

<a href="index.html">Home</a>
BCSL-057 Solved Assignment 2024-25 | learningscience.co.in 5

<a href="mobileList.jsp">Mobile List</a>

<a href="comments.html">Comments</a>

</div>

<div id="info">

<h1>Mobile for You</h1>

<p><b>Objectives:</b> To provide the latest mobile phones with the best offers.</p>

<p><b>Address:</b> 123, Mobile Street, New Delhi, India</p>

</div>

</body>

</html>

2. JSP Code for Mobile List Page (mobileList.jsp):

This JSP file will connect to the database and display the mobile make and RAM size.

<%@ page import="java.sql.*" %>


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Mobile List</title>
</head>
BCSL-057 Solved Assignment 2024-25 | learningscience.co.in 6

<body>
<div id="top">
<a href="index.html">Home</a>
<a href="mobileList.jsp">Mobile List</a>
<a href="comments.html">Comments</a>
</div>
<div id="info">
<h1>Mobile List</h1>
<table border="1">
<tr>
<th>Make</th>
<th>RAM (GB)</th>
</tr>
<%
// JDBC connection parameters
String dbURL = "jdbc:mysql://localhost:3306/mobiles";
String dbUser = "root"; // Replace with your MySQL username
String dbPass = ""; // Replace with your MySQL password

try {
// Load MySQL JDBC Driver
Class.forName("com.mysql.cj.jdbc.Driver");

// Establish a connection to the database


Connection con = DriverManager.getConnection(dbURL, dbUser, dbPass);

// Create a statement and execute query


Statement stmt = con.createStatement();
String query = "SELECT * FROM Mobile_ram";
ResultSet rs = stmt.executeQuery(query);

// Iterate over result set and display mobile details


while (rs.next()) {
BCSL-057 Solved Assignment 2024-25 | learningscience.co.in 7

%>
<tr>
<td><%= rs.getString("Mobile_make") %></td>
<td><%= rs.getInt("RAM_size") %></td>
</tr>
<%
}
// Close the connection after use
rs.close();
stmt.close();
con.close();
} catch (Exception e) {
// Display error message in case of issues
out.println("Error: " + e.getMessage());
e.printStackTrace();
}
%>
</table>
</div>
</body>
</html>

3. HTML Code for Comments Page (comments.html):

This page contains a simple form for user comments and rating of mobile phones.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Comments</title>
BCSL-057 Solved Assignment 2024-25 | learningscience.co.in 8

</head>
<body>
<div id="top">
<a href="index.html">Home</a>
<a href="mobileList.jsp">Mobile List</a>
<a href="comments.html">Comments</a>
</div>
<div id="info">
<h1>Comment</h1>
<form action="submitComments.jsp" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label>Rate the mobile:</label><br>
<input type="radio" id="verygood" name="rating" value="Very good">
<label for="verygood">Very good</label><br>
<input type="radio" id="good" name="rating" value="Good">
<label for="good">Good</label><br>
<input type="radio" id="notgood" name="rating" value="Not so good">
<label for="notgood">Not so good</label><br><br>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>

4. External CSS File (styles.css):

This CSS file will ensure the layout and design match the figure.

body {
BCSL-057 Solved Assignment 2024-25 | learningscience.co.in 9

font-family: Arial, sans-serif;

#top {

background-color: lightgreen;

padding: 10px;

text-align: center;

#top a {

margin: 0 15px;

padding: 10px;

background-color: white;

border: 1px solid black;

text-decoration: none;

font-size: 14px;

}
BCSL-057 Solved Assignment 2024-25 | learningscience.co.in 10

#top a:hover {

background-color: #ddd;

#info {

margin: 20px;

padding: 20px;

border: 1px solid black;

background-color: #f9f9f9;

table {

width: 50%;

border-collapse: collapse;

}
BCSL-057 Solved Assignment 2024-25 | learningscience.co.in 11

table, th, td {

border: 1px solid black;

th {

background-color: #f2f2f2;

font-weight: bold;

font-size: 12pt;

td {

font-size: 11pt;

text-align: center;

tr:nth-child(even) {

background-color: lightblue;
BCSL-057 Solved Assignment 2024-25 | learningscience.co.in 12

tr:nth-child(odd) {

background-color: lightpink;

5. Creating new webapp directory under xampp directory

In my case the webapp directory name is ‘work_shop’ and the path is the following:

C:\xampp\tomcat\webapps\work_shop

Here's the directory structure for the required files for our project:

C:\xampp\tomcat\webapps\work_shop

├── index.html

├── comments.html

├── mobileList.jsp

├── styles.css

└── WEB-INF
BCSL-057 Solved Assignment 2024-25 | learningscience.co.in 13

└── web.xml

6. MySQL Database Setup:

To run this project, create a database called "mobiles" with the following table structure:

CREATE DATABASE mobiles;


USE mobiles;

CREATE TABLE Mobile_ram (


Mobile_make VARCHAR(50),
RAM_size INT
);
BCSL-057 Solved Assignment 2024-25 | learningscience.co.in 14

INSERT INTO Mobile_ram VALUES ('Samsung', 2), ('Apple', 4), ('Xiaomi', 6), ('OnePlus', 8), ('Oppo', 3);

Once the database is created, the JSP page will retrieve the mobile data and display it on the webpage.
BCSL-057 Solved Assignment 2024-25 | learningscience.co.in 15

Screenshots of Output:
BCSL-057 Solved Assignment 2024-25 | learningscience.co.in 16
BCSL-057 Solved Assignment 2024-25 | learningscience.co.in 17

You might also like