Scribd
Upload
24 views60 pages

WT Lab File

Uploaded by

royv19213
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
24 views60 pages

WT Lab File

Uploaded by

royv19213
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/ 60

Lab1: Vishveshwarya Group of Institutions website

designing.

OBJECTIVE:
Write HTML program for designing your institute website. Display departmental information of your institute
on the website.

THEORY:
The website for Vishveshwarya Group of Institutions is designed to provide an engaging and
informative online presence for the institution. It features a clean and modern layout with a navigation
menu for easy access to various sections, including departmental information, admissions, and
contact details. The main content highlights the different academic departments, offering brief
descriptions of their focus areas, which helps prospective students and visitors understand the
institution's offerings. The design incorporates appealing colors and a structured format, ensuring a
user-friendly experience while effectively showcasing the institution's values and educational
programs.

CODE:
HTMLCODE-(institute.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Entry Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: auto;
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
}
label {
display: block;
margin: 10px 0 5px;
}
input[type="text"],
input[type="email"],
input[type="number"],
select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>

<div class="container">
<h2>Student Entry Form</h2>
<form action="/submit" method="post">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>

<label for="age">Age:</label>
<input type="number" id="age" name="age" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="phone">Phone Number:</label>


<input type="text" id="phone" name="phone" required>

<label for="course">Course:</label>
<select id="course" name="course" required>
<option value="">Select a course</option>
<option value="Computer Science">Computer Science</option>
<option value="Business Administration">Business Administration</option>
<option value="Engineering">Engineering</option>
<option value="Mathematics">Mathematics</option>
<option value="Biology">Biology</option>
</select>

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


</form>
</div>

</body>
</html>
CSS CODE-(style3.css)
/* Common CSS Styles */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-image: url('https://akm-img-a-
in.tosshub.com/sites/resources/campus/prod/img/campusview/2023/9/1d34113abf2be852710427317.
jpg');
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
color: #333;
}

.container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background: rgba(255, 255, 255, 0.5);
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Header Styles */
header {
background: rgba(255, 255, 255, 0.5);
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);

color: white;
padding: 20px 0;
}

h1 {
text-align: center;
color: #333;
font-size: 2.0em;
margin-bottom: 20px;
}

h2 {
color: #007BFF;
border-bottom: 2px solid #007BFF;
padding-bottom: 10px;
margin-bottom: 20px;
}

.departments ul {
list-style-type: none;
padding: 0;
}

.departments li {
background: rgba(233, 236, 239, 0.8);
margin: 10px 0;
padding: 15px;
border-radius: 5px;
transition: transform 0.2s;
}

.departments li:hover {
transform: scale(1.05);
background: rgba(209, 230, 221, 0.8);
}

strong {
color: #0056b3;
}

.logo {
width: 250px;
}

nav {
float: right;
}

nav a {
color: black;
text-decoration: none;
padding: 0 15px;
}

/* Main Content Styles */


main {
padding: 20px 0;
}

/* Footer Styles */
footer {
background: #1f2836;
color: white;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
}
OUTPUT:
Lab 2: Designing an entry form for student details.

OBJECTIVE:
Write HTML program to design an entry form for student details/employee
information/faculty details.

THEORY:
An entry form for student details is a vital tool for collecting essential information
such as name, age, email, phone number, and course selection in educational
institutions. It provides a user-friendly interface that guides users in inputting their
data, ensuring clarity through labels and structured fields. The form incorporates
validation rules to enhance data accuracy and integrity, while also considering
accessibility to accommodate all users. Aesthetically, CSS can be applied to create
an appealing layout that improves user experience. Upon submission, the data is
securely transmitted to a server for processing, which may involve storing it in a
database or triggering further actions. Overall, a well-designed entry form is crucial
for effective data management and user satisfaction, while also prioritizing security
measures to protect user information.

CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Entry Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: auto;
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
}
label {
display: block;
margin: 10px 0 5px;
}
input[type="text"],
input[type="email"],
input[type="number"],
select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>Student Entry Form</h2>
<form action="/submit" method="post">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>

<label for="age">Age:</label>
<input type="number" id="age" name="age" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="phone">Phone Number:</label>


<input type="text" id="phone" name="phone" required>

<label for="course">Course:</label>
<select id="course" name="course" required>
<option value="">Select a course</option>
<option value="Computer Science">Computer Science</option>
<option value="Business Administration">Business Administration</option>
<option value="Engineering">Engineering</option>
<option value="Mathematics">Mathematics</option>
<option value="Biology">Biology</option>
</select>

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


</form>
</div>

</body>
</html>
OUTPUT:
Lab 3: Building a responsive web design: a blog page.

OBJECTIVE:
Develop a responsive website using CSS and HTML. Website may be for tutorial/blogs/commercial website.

THEORY:
Creating a responsive website using HTML and CSS involves designing a layout that adapts to various screen
sizes, ensuring a seamless user experience on desktops, tablets, and smartphones. HTML structures the content
into semantic elements like headers, sections, and footers, while CSS styles these elements for visual appeal.
Media queries play a crucial role in responsive design, allowing developers to apply different styles based on the
viewport size, which enhances usability and accessibility. This approach ensures that users can easily navigate
and interact with the website, regardless of the device they are using.

CODE:
HTML code: (blog.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Responsive Blog</title>
<link rel="stylesheet" href="styles1.css">
</head>
<body>
<header>
<h1>My Blog</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<main>
<section id="home">
<h2>Welcome to My Blog</h2>
<p>This is a simple responsive blog template created with HTML and CSS.</p>
</section>

<section id="about">
<h2>About Me</h2>
<p>I'm a passionate blogger sharing my thoughts and experiences.</p>
</section>

<section id="blog">
<h2>Latest Posts</h2>
<article>
<h3>Post Title 1</h3>
<p>This is a summary of my first blog post. <a href="#">Read more...</a></p>
</article>
<article>
<h3>Post Title 2</h3>
<p>This is a summary of my second blog post. <a href="#">Read more...</a></p>
</article>
</section>

<section id="contact">
<h2>Contact Me</h2>
<p>You can reach me at <a
href="mailto:[email protected]">[email protected]</a>.</p>
</section>
</main>

<footer>
<p>&copy; 2024 My Blog. All rights reserved.</p>
</footer>
</body>
</html>
CSS code: (styles1.css)
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}

header {
background: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}

nav ul {
list-style: none;
padding: 0;
}

nav ul li {
display: inline;
margin: 0 15px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

main {
padding: 20px;
}

section {
margin-bottom: 20px;
}

article {
background: #f4f4f4;
padding: 10px;
margin: 10px 0;
}

footer {
text-align: center;
padding: 10px 0;
background: #333;
color: #fff;
position: relative;
bottom: 0;
width: 100%;
}

/* Responsive Styles */
@media (max-width: 600px) {
nav ul li {
display: block;
margin: 10px 0;
}

header {
padding: 20px 0;
}

main {
padding: 10px;
}
}
OUTPUT:
Lab 4: User registration form with input validation
using HTML and JavaScript.

OBJECTIVE:
Write programs using HTML and Java Script for validation of input data.

THEORY:
The provided code implements a user registration form using HTML, CSS, and JavaScript, designed
to validate user input before submission. The form includes fields for a username, email, and
password, with JavaScript functions that ensure the username is not empty, the email follows a valid
format, and the password meets a minimum length requirement. If any validation fails, an error
message is displayed, preventing form submission and guiding the user to correct their input. This
approach enhances user experience by ensuring data integrity and providing immediate feedback.
The CSS styles the form for a clean and user-friendly interface.

CODE:

HTML code-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Registration Form</title>
<link rel="stylesheet" href="styles2.css">
</head>
<body>
<div class="container">
<h1>User Registration</h1>
<form id="registrationForm" onsubmit="return validateForm()">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div>
<button type="submit">Register</button>
</div>
<div id="error-message" style="color: red;"></div>
</form>
</div>

<script src="script1.js"></script>
</body>
</html>

CSS code- (styles2.css)


body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
margin-bottom: 20px;
}
div {
margin-bottom: 15px;
}

label {
display: block;
margin-bottom: 5px;
}

input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}

button {
padding: 10px 15px;
background-color: #35424a;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #2c3e50;
}

JavaScript code- (script1.js)


function validateForm() {
// Clear previous error messages
document.getElementById("error-message").innerText = "";

// Get form values


const username = document.getElementById("username").value.trim();
const email = document.getElementById("email").value.trim();
const password = document.getElementById("password").value;

// Validate username
if (username === "") {
showError("Username cannot be empty.");
return false;
}

// Validate email
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
showError("Please enter a valid email address.");
return false;
}

// Validate password
if (password.length < 6) {
showError("Password must be at least 6 characters long.");
return false;
}

// If all validations pass


alert("Registration successful!");
return true; // Allow form submission
}

function showError(message) {
document.getElementById("error-message").innerText = message;
}
OUTPUT:
Lab 5: XML and XSLT for library catalog display.

OBJECTIVE:
Write a program in XML for creation of DTD, which specifies set of rules. Create a style sheet in CSS/ XSL &
display the document in internet explorer.

THEORY:
The provided XML and XSLT code demonstrates how to transform a structured XML document
representing a library catalog into a visually appealing HTML table. The XML contains details about
various books, including their titles, authors, publication years, and genres. The accompanying XSLT
stylesheet processes this XML data, generating an HTML page that organizes the information into a
well-formatted table. This transformation not only enhances the readability of the data but also allows
for easy integration of styles through CSS, resulting in a user-friendly interface for displaying the
library's collection. This approach exemplifies the power of XML and XSLT in separating data from
presentation, making it easier to manage and display information dynamically.

CODE:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="style.xsl"?>
<!DOCTYPE library [
<!ELEMENT library (book+)>
<!ELEMENT book (title, author, year, genre)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT genre (#PCDATA)>
]>
<library>
<book>
<title>The Great Gatsby</title>
<author>F. Scott Fitzgerald</author>
<year>1925</year>
<genre>Fiction</genre>
</book>
<book>
<title>1984</title>
<author>George Orwell</author>
<year>1949</year>
<genre>Dystopian</genre>
</book>
<book>
<title>To Kill a Mockingbird</title>
<author>Harper Lee</author>
<year>1960</year>
<genre>Fiction</genre>
</book>
</library>

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


<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8" indent="yes"/>

<xsl:template match="/">
<html>
<head>
<title>Library Catalog</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<h1>Library Catalog</h1>
<table border="1">
<tr>
<th>Title</th>
<th>Author</th>
<th>Year</th>
<th>Genre</th>
</tr>
<xsl:for-each select="library/book">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="author"/></td>
<td><xsl:value-of select="year"/></td>
<td><xsl:value-of select="genre"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 20px;
}

h1 {
color: #35424a;
}

table {
width: 100%;
border-collapse: collapse;
}

th, td {
padding: 10px;
text-align: left;
border: 1px solid #ccc;
}

th {
background-color: #35424a;
color: white;
}
OUTPUT:
Lab 6: Employee class implementation in Java

OBJECTIVE:
Create a Java Bean for Employee information (EmpID, Name, Salary, Designation and Department).

THEORY:
The Employee class in Java serves as a blueprint for creating employee objects, encapsulating
attributes such as employee ID, name, salary, designation, and department. It includes both no-
argument and parameterized constructors, along with getter and setter methods for each attribute,
allowing for flexible object creation and manipulation. The class also features a main method that
demonstrates its functionality by creating instances of Employee, setting their properties, and
retrieving their values using the defined methods, thereby showcasing the principles of object-oriented
programming in Java.

CODE:
import java.io.Serializable;
import java.io.Serial;

public class Employee implements Serializable {


@Serial
private static final long serialVersionUID = 1L;

private int empID;


private String name;
private double salary;
private String designation;
private String department;

// No-argument constructor
public Employee() {
}

// Parameterized constructor
public Employee(int empID, String name, double salary, String designation, String department) {
this.empID = empID;
this.name = name;
this.salary = salary;
this.designation = designation;
this.department = department;
}

// Getter and Setter for empID


public int getEmpID() {
return empID;
}

public void setEmpID(int empID) {


this.empID = empID;
}

// Getter and Setter for name


public String getName() {
return name;
}

public void setName(String name) {


this.name = name;
}

// Getter and Setter for salary


public double getSalary() {
return salary;
}

public void setSalary(double salary) {


this.salary = salary;
}

// Getter and Setter for designation


public String getDesignation() {
return designation;
}
public void setDesignation(String designation) {
this.designation = designation;
}

// Getter and Setter for department


public String getDepartment() {
return department;
}

public void setDepartment(String department) {


this.department = department;
}

@Override
public String toString() {
return "Employee{" +
"empID=" + empID +
", name='" + name + '\'' +
", salary=" + salary +
", designation='" + designation + '\'' +
", department='" + department + '\'' +
'}';
}

// Main method to demonstrate usage


public static void main(String[] args) {
// Using the no-argument constructor
Employee employee1 = new Employee();
employee1.setEmpID(1);
employee1.setName("Jiya Bhati");
employee1.setSalary(50000.0);
employee1.setDesignation("Software Engineer");
employee1.setDepartment("IT");
System.out.println("Employee 1: " + employee1);

// Using the parameterized constructor


Employee employee2 = new Employee(2, "Harsh Vardhan", 60000.0, "Project Manager", "IT");
System.out.println("Employee 2: " + employee2);

// Demonstrating the use of getter methods


System.out.println("Employee 1 ID: " + employee1.getEmpID());
System.out.println("Employee 1 Name: " + employee1.getName());
System.out.println("Employee 1 Salary: " + employee1.getSalary());
System.out.println("Employee 1 Designation: " + employee1.getDesignation());
System.out.println("Employee 1 Department: " + employee1.getDepartment());

System.out.println("Employee 2 ID: " + employee2.getEmpID());


System.out.println("Employee 2 Name: " + employee2.getName());
System.out.println("Employee 2 Salary: " + employee2.getSalary());
System.out.println("Employee 2 Designation: " + employee2.getDesignation());
System.out.println("Employee 2 Department: " + employee2.getDepartment());
}
}
OUTPUT:
Lab 7: Java Servlet for session management and
date display.

OBJECTIVE:
Write a servlet for session tracking.
THEORY:

This Java servlet, DateServlet, demonstrates how to manage user sessions and display date
information in a web application. When a user accesses the servlet via a specific URL pattern, it
retrieves the last accessed date from the session and displays it. If no date is found, it initializes the
current date and stores it in the session for future requests. This functionality highlights the use of
HTTP sessions in servlets, allowing for the persistence of user-specific data across multiple requests.
By leveraging the HttpSession object, the servlet provides a simple yet effective way to track user
interactions and enhance the user experience in web applications.

CODE:
DateServlet.java:
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class DateServlet extends HttpServlet{
public void doGet(HttpServletRequest req,HttpServletResponse res)throws
ServletException,IOException{
res.setContentType("text/html");
HttpSession hs=req.getSession(true);
PrintWriter pw=res.getWriter();
pw.print("<b>");
Date d=(Date)hs.getAttribute("date");
if(d!=null){
pw.print("Last accessed date:"+d+"<br>");
}
d= new Date();
hs.setAttribute("date",d);
pw.print("current date:"+d);
pw.close();
}
}
Web.xml:
<web-app>
<servlet>
<servlet-name>sess</servlet-name>
<servlet-class>DateServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>sess</servlet-name>
<url-pattern>/ddd</url-pattern>
</servlet-mapping>
</web-app>
Output:
Lab 8: JSP page for session tracking and
information display.

OBJECTIVE:
Write a JSP for session tracking.
THEORY:
This JavaServer Pages (JSP) example illustrates how to track and display session information in a
web application. By utilizing the HttpSession object, the JSP retrieves the session ID, creation time,
and last access time, presenting this data in a structured HTML table. The use of JSP scriptlets allows
for the dynamic generation of content based on the session's state, enhancing the user experience by
providing real-time feedback on their session activity. This approach is essential for web applications
that require user-specific data management, enabling developers to create more interactive and
personalized web experiences.

CODE:
<%@ page import="java.io.*,java.util.*" %>
<%
Date createTime = new Date(session.getCreationTime());
Date lastAccessTime = new Date(session.getLastAccessedTime());
%>
<html>
<head>
<title>Session Tracking</title>
</head>
<body>
<center>
<h1>Session Tracking Example</h1>
</center>
<table border="1" align="center">
<tr bgcolor="#ffcccc">
<th>Session info</th>
<th>Value</th>
</tr>
<tr >
<td>id</td>
<td><% out.print( session.getId()); %></td>
</tr>
<tr>
<td>Creation Time</td>
<td><% out.print(createTime); %></td>
</tr>
<tr>
<td>Time of Last Access</td>
<td><% out.print(lastAccessTime); %></td>
</tr>
</table>
</body>
</html>
Output:
Lab 9: Unordered List, Ordered List and Definition
List.

OBJECTIVE:
Write a HTML program for the demonstration of Lists.
1. Unordered List
2. Ordered List
3. Definition List
4. Nested List

THEORY:
1. Unordered List: These lists are used to present items without a specific order, typically
represented with bullet points. In the example, a list of colleges in Greater Noida is displayed
using an unordered list with square bullets.
2. Ordered List: This type of list is used when the order of items is significant, such as rankings
or steps in a process. The example shows a list of branches in VGI, formatted as an ordered
list with alphabetical markers.
3. Definition List: These lists are used to define terms or concepts, consisting of a term
(defined by <dt>) followed by its description (defined by <dd>). The example illustrates
various engineering branches along with their definitions, providing a clear and structured way
to present related information.

CODE:

Unordered list-
<html>
<head>
<title> Creating Unorder List </title>
</head>
<body bgcolor="wheat">
<h1 align="center"> Creating Unorder List</h1>
<h1 align="center">List of Colleges in Greater Noida</h1>
<ul type="square">
<li>VGI</li>
<li>HIMT</li>
<li>GBU</li>
</ul>
</body>
</html>
Output:
Ordered List-
<html>
<head>
<title> Creating Order List </title>
</head>
<body bgcolor="wheat">
<h1 align="center"> Creating Order List</h1>
<h1 align="center">List of branches in vgi</h1>
<ol type="A">
<li>CSE</li>
<li>IT</li>
<li>ECE</li>
<li>EEE</li>
<li>CIVIL</li>
<li>ME</li>
</ol>
</body>
</html>

Output:
Definition List:
<html>
<head>
<title>Creating Definition List</title>
</head>
<body bgcolor="wheat">
<h1 align="center">Definition List</h1>
<dl>
<dt>CSE<dd>Computer Science & Engineering
<dt>ECE<dd>Electronics & Communication Engineering
<dt>IT<dd>Information Technology
<dt>EEE<dd>Electrical & Electronics Engineering
<dt>CE<dd>Civil Engineering
</dl>
</body>
</html>

Output:
Lab 10: HTML Frameset for Vishveshwarya Group
of Institutions

OBJECTIVE:
Write a HTML program to develop a static Home Page using frames.

THEORY:
This HTML document uses a frameset to display different sections related to Vishveshwarya
Group of Institutions. It divides the browser window into multiple frames, each showing
different content such as images, webpages, and local HTML files. The structure helps in
presenting various pieces of information in a segmented manner, enhancing the user's
browsing experience by allowing simultaneous views of related content.

CODE:
<html>
<head>
<title>Vishveshwarya Group of Institutions</title>
</head>
<frameset cols="30%,70%">
<frameset rows="25%,25%,50%">
<frame src="https://mir-s3-cdn-
cf.behance.net/projects/404/c8826e178005677.Y3JvcCw4MDgsNjMyLDAsMA.jpg">
<frame src="https://www.vgi.ac.in/">
<frame src="e:\cse546\courses.html">
</frameset>
<frameset rows="25%,25%,50%">
<frame src="https://www.admissionmba.in/wp-content/uploads/2017/11/Vishveshwarya-
group-of-institutes-Campus.jpg">
<frame src="e:\cse546\table.html">
<frame src="e:\cse546\default.html" name="display">
</frameset>
</frameset>
</html>
Output:
Lab 11: Static Shopping cart web page.

OBJECTIVE:
Write a HTML program to develop a static Web Page for Shopping Cart.

THEORY:
The static shopping cart web page serves as a foundational template for online retail, showcasing
products with essential details such as images, names, and prices. It features a user-friendly layout
that includes a header for navigation, a main section displaying available products, and a cart section
to summarize selected items. While the page is static and does not include dynamic functionalities
like adding items to a cart or processing transactions, it effectively demonstrates the structure and
design principles of e-commerce websites. This template can be further enhanced with JavaScript for
interactivity and backend integration for a fully functional shopping experience.

CODE:

Html code-(shoppingcart.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart</title>
<link rel="stylesheet" href="styles4.css">
</head>
<body>
<header>
<h1>My Shopping Cart</h1>
<nav>
<ul>
<li><a href="#products">Products</a></li>
<li><a href="#cart">Cart</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<main>
<section id="products">
<h2>Available Products</h2>
<div class="product">
<img src="https://via.placeholder.com/150" alt="Product 1">
<h3>Product 1</h3>
<p>Price: $10.00</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/150" alt="Product 2">
<h3>Product 2</h3>
<p>Price: $15.00</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/150" alt="Product 3">
<h3>Product 3</h3>
<p>Price: $20.00</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/150" alt="Product 3">
<h3>Product 4</h3>
<p>Price: $50.00</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/150" alt="Product 3">
<h3>Product 5</h3>
<p>Price: $60.00</p>
<button>Add to Cart</button>
</div>
</section>

<section id="cart">
<h2>Your Cart</h2>
<p>No items in cart.</p>
</section>
</main>
<footer>
<p>&copy; 2024 My Shopping Cart. All rights reserved. By Jiya Bhati</p>
</footer>
</body>
</html>

Css code- (styles4.css)


body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

header {
background: #35424a;
color: #ffffff;
padding: 10px 0;
text-align: center;
}

nav ul {
list-style: none;
padding: 0;
}

nav ul li {
display: inline;
margin: 0 15px;
}

nav ul li a {
color: #ffffff;
text-decoration: none;
}

main {
padding: 20px;
}

.product {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 5px;
display: inline-block;
margin: 10px;
padding: 10px;
text-align: center;
width: 200px;
}

.product img {
max-width: 100%;
}

button {
background: #35424a;
border: none;
color: #ffffff;
padding: 10px;
cursor: pointer;
}

button:hover {
background: #45a049;
}

footer {
text-align: center;
padding: 10px 0;
background: #35424a;
color: #ffffff;
position: relative;
bottom: 0;
width: 100%;}
Output:
Lab 12: Displaying XML data in a table XSLT.

OBJECTIVE:
Write a program to display contents of XML file in a table using Extensible Style Sheets.

THEORY:
XSLT (Extensible Stylesheet Language Transformations) is a powerful language used to transform
XML documents into different formats, such as HTML. By applying an XSLT stylesheet to an XML file,
developers can convert structured data into a visually appealing format suitable for web presentation.
In this example, an XML file containing product information is transformed into an HTML table,
allowing users to easily view and understand the data. This approach not only enhances the
readability of XML data but also enables the integration of dynamic content into web applications,
making it a valuable tool for web developers and data presentation.

CODE:

Products.xml-
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="products.xsl"?>
<products>
<product>
<id>1</id>
<name>Product 1</name>
<price>10.00</price>
<description>This is the first product.</description>
</product>
<product>
<id>2</id>
<name>Product 2</name>
<price>15.00</price>
<description>This is the second product.</description>
</product>
<product>
<id>3</id>
<name>Product 3</name>
<price>20.00</price>
<description>This is the third product.</description>
</product>
</products>
Products.xsl-
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8" indent="yes"/>

<xsl:template match="/">
<html>
<head>
<title>Product List</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Product List</h2>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Description</th>
</tr>
<xsl:for-each select="products/product">
<tr>
<td><xsl:value-of select="id"/></td>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="price"/></td>
<td><xsl:value-of select="description"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Output:
Lab 13: JSP-Based Login Page with Form Handling

OBJECTIVE:
Write a JSP that reads parameters from user login page.
THEORY:

This HTML and JSP code snippet demonstrates a basic login page where users can
input their username and password. The HTML form captures the user input and
submits it to a JSP page (loginJsp.jsp) for processing. The JSP script then retrieves
the form data using the request.getParameter method and displays the entered
username and password on the webpage. This example illustrates the integration of
HTML for creating forms and JSP for server-side processing in a web application.

CODE:

HTML code- (index.html)


<html>
<head>
<title>Login Page</title>
</head>
<body>
<h1 align=center>Login</h1>
<form name="form1" action="loginJsp.jsp" method="post">
<table>
<tr>
<td><b>UserName:</td>
<td><input type=txt name=t1></td>
</tr>
<tr>
<td><b>Password:</td>
<td><input type=password name=t2></td>
</tr>
<tr>
<td><input type=submit value=submit></td>
<td><input type=reset value=cancel></td>
</tr>
</table>
</form>
</body>
</html>

Jsp code- (loginjsp.jsp)

<%@ page import="javax.io.*"%>


<%@ page import="javax.servlet.*"%>
<%@ page import="javax.servlet.http.*"%>
<%@ page import="javax.servlet.jsp.*"%>
<html>
<head>
<title>Login</title>
</head>
<body>
<%out.println("User Name is:"+request.getParameter("t1"));
out.println("Password is:"+request.getParameter("t2"));
%>
</body>
</html>
OUTPUT:
LAB 14: Create a Calculator Using Higher-Order
Functions in JavaScript

OBJECTIVE:

Write a JavaScript program using higher-order functions to create a simple calculator.

THEORY:
This HTML and JavaScript code snippet creates a simple calculator that performs basic arithmetic operations
(addition, subtraction, multiplication, and division). Users input two numbers and select an operator, then click
the "Calculate" button to see the result. The JavaScript function createCalculator defines the arithmetic
operations, while performCalculation retrieves user input, performs the calculation, and displays the
result. The design is straightforward and user-friendly, showcasing the practicality of integrating JavaScript
functions within an HTML form to achieve interactive web applications.

CODE:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial
scale=1.0">
<title>Calculator</title>
<script>
function createCalculator(operand1) {
return function (operand2, operator) {
if (operator === "+") {
return operand1 + operand2;
} else if (operator === "-") {
return operand1 - operand2;
} else if (operator === "*") {
return operand1 * operand2;
} else if (operator === "/") {
return operand1 / operand2;
} else {
return "Invalid operator!";
}
};
}
function performCalculation() {
const num1 =
parseFloat(document.getElementById("num1").value);
const num2 =
parseFloat(document.getElementById("num2").value);
const operator =
document.getElementById("operator").value;
const calc = createCalculator(num1);
const result = calc(num2, operator);
document.getElementById("result").textContent =
"Result: " + result;
}
</script>
</head>

<body>
<h1>Calculator</h1>
<input type="number" id="num1" placeholder="First number">
<input type="number" id="num2" placeholder="Second number">
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<button onclick="performCalculation()">Calculate</button>
<p id="result"></p>
</body>

</html>
OUTPUT:
LAB 15: Introduction to AJAX.

OBJECTIVE:
To learn how to make asynchronous requests to a server using JavaScript and AJAX.

THEORY:
AJAX (Asynchronous JavaScript and XML) allows for the asynchronous loading of data without refreshing the
entire web page. This is useful for dynamic web applications, where parts of a page are updated without
requiring a full page reload.

CODE:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial
scale=1.0">
<title>AJAX Example</title>
<script>
function fetchData() {
const xhr = new XMLHttpRequest();
xhr.open('GET',
'https://jsonplaceholder.typicode.com/users', true);
xhr.onload = function () {
if (xhr.status === 200) {
const users = JSON.parse(xhr.responseText);
let output = '<h2>Users</h2><ul>';
users.forEach(user => {
output += `<li>${user.name}</li>`;
});
output += '</ul>';
document.getElementById('data').innerHTML =
output;
}
};
xhr.send();
}
</script>
</head>

<body>
<h1>AJAX Example</h1>
<button onclick="fetchData()">Get User Data</button>
<div id="data"></div>
</body>

</html>
OUTPUT:

You might also like