Professional Documents
Culture Documents
WT Expt
WT Expt
WT Expt
Practical File
Name: Shikhar Agarwal
Section: B2
Roll Number: 2100640100098
Year: 3rd
Semester: 6th
Laboratory: Web Technology Lab
Submitted To: Mr. Vijay Singh Thakur
5. Design a user registration form in HTML and validate its field using
JavaScript.
Objective of Experiment
To demonstrate the concept of multiple inheritance in Java through interfaces, as Java does
not support multiple inheritance with classes.
Background Theory
Java does not support multiple inheritance with classes to avoid the "Diamond Problem."
However, it allows multiple inheritance of type through interfaces, where a class can
implement multiple interfaces.
Code
// Interface 1
interface Animal {
void eat();
}
// Interface 2
interface Pet {
void play();
}
Conclusion
This experiment successfully demonstrates how Java supports multiple inheritance through
interfaces. By implementing multiple interfaces, a class can inherit behaviors from multiple
sources, thus achieving a form of multiple inheritance. This approach helps in designing
flexible and modular software systems.
Objective of Experiment
To demonstrate the concept of function overriding in Java, where a subclass provides a
specific implementation of a method that is already provided by its parent class.
Background Theory
Function overriding is a feature in Java that allows a subclass to provide a different
implementation for a method that is already defined in its parent class. This is a key aspect of
polymorphism, allowing objects of the subclass type to behave differently when the
overridden method is called.
Code
// Parent class
class Animal {
void sound() {
System.out.println("The animal makes a sound");
}
}
// Subclass
class Dog extends Animal {
// Overriding the sound() method
@Override
void sound() {
System.out.println("The dog barks");
}
}
Conclusion
This experiment successfully demonstrates the concept of function overriding in Java. By
overriding the sound() method in the Dog class, we were able to change the behavior of the
method when called on an object of type Dog. This is a powerful feature in Java that allows
for more flexible and dynamic code, enabling polymorphism and enhancing code reusability
and readability.
Background Theory
HTML (HyperText Markup Language) is the standard markup language for documents
designed to be displayed in a web browser. It can be used to structure a web page and its
content. HTML is not a programming language, but rather a markup language that defines the
structure and layout of a webpage.
Code
<!DOCTYPE html>
<html>
<head>
<title>My Resume</title>
</head>
<body>
<h1>Shikhar Agarwal</h1>
<p>Email: shikhar.agarwal@example.com | Phone: XXXXXXXXXX</p>
<h2>Profile</h2>
<p>Aspiring blockchain developer currently pursuing B.Tech in CSE from
Hindustan College of Science & Technology with a keen interest in smart contract
development. Experienced with creating, deploying, testing smart contracts, along
with fuzz testing. Skilled in Solidity, Hardhat, Foundry, Ethers.js</p>
<h2>Objective</h2>
<p>Seeking a challenging position in a reputable organization where I can
utilize my skills for the growth of the organization as well as to enhance my
knowledge about new and emerging trends in the Web3 Ecosystem. Keenly interested
in building and innovating Decentralized Finance based projects.</p>
<h2>Skills</h2>
<ul>
<li>Solidity, JavaScript, Python, Java, C++</li>
<li>Hardhat Framework, Foundry Framework, React</li>
<li>Problem-solving, Teamwork, Finance</li>
</ul>
<h2>Experience</h2>
<h3>Smart Contract Developer & Security Researcher, Cyfrin</h3>
<p>Jan 2024 - Present</p>
<ul>
<li>Developed and maintained DeFi based projects including Liquid Staking,
Cross Chain Smart Liquidity Management using AI based strategies to increase the
overall yield</li>
<h2>Education</h2>
<h2>Projects</h2>
<h3>Carbon Marketplace</h3>
<p>June 2023 — July 2023</p>
Conclusion
This experiment successfully demonstrates how to create a basic resume using HTML. By
using various HTML elements, we structured the resume to present personal information,
skills, experience, and education in a clear and organized manner. This is a fundamental skill
for anyone looking to create web pages or documents that need to be displayed in a web
browser.
Experiment 4: Enhance the Look and Feel of the Resume with CSS
Objective of Experiment
To improve the visual appearance of the HTML resume created in Experiment 3 using CSS
(Cascading Style Sheets), demonstrating how CSS can be used to style HTML elements.
Background Theory
CSS is a stylesheet language used for describing the look and formatting of a document
written in HTML. It allows for the separation of content (HTML) from presentation (CSS),
making it easier to maintain and update the visual design of web pages.
Text editor or Integrated Development Environment (IDE) like Visual Studio Code
Web browser to view the HTML file with applied CSS
Code
HTML (resume.html)
<!DOCTYPE html>
<html>
<head>
<title>My Resume</title>
<link rel="stylesheet" type="text/css" href="resume.css">
</head>
<body>
<div id="header">
<h1>Shikhar Agarwal</h1>
<p>Email: shikhar.agarwal@example.com | Phone: XXXXXXXXXX</p>
</div>
<div id="profile">
<h2>Profile</h2>
<p>Aspiring blockchain developer currently pursuing B.Tech in CSE from
Hindustan College of Science & Technology with a keen interest in smart contract
development. Experienced with creating, deploying, testing smart contracts, along
with fuzz testing. Skilled in Solidity, Hardhat, Foundry, Ethers.js</p>
</div>
<div id="objective">
<h2>Objective</h2>
<p>Seeking a challenging position in a reputable organization where I can
utilize my skills for the growth of the organization as well as to enhance my
knowledge about new and emerging trends in the Web3 Ecosystem. Keenly interested
in building and innovating Decentralized Finance based projects.</p>
</div>
<div id="skills">
<h2>Skills</h2>
<ul>
<li>Solidity, JavaScript, Python, Java, C++</li>
<li>Hardhat Framework, Foundry Framework, React</li>
<li>Problem-solving, Teamwork, Finance</li>
</ul>
</div>
<div id="experience">
<h2>Experience</h2>
<h3>Smart Contract Developer & Security Researcher, Cyfrin</h3>
<p>Jan 2024 - Present</p>
<ul>
<li>Developed and maintained DeFi based projects including Liquid
Staking, Cross Chain Smart Liquidity Management using AI based strategies to
increase the overall yield</li>
<li>Used Integration, Stateless Fuzz Testing, Stateful Fuzz Testing
along with Formal Verification Tools to ensure a robust protocol that can never be
manipulated and improving transparency and reliability</li>
</ul>
</div>
<div id="education">
<h2>Education</h2>
<h3>Bachelor of Science in Computer Science</h3>
<p>Hindustan College of Science & Technology, 2021 - 2025</p>
<h3>Class 10th - 2019 - 93.8%</h3>
<p>St. Clare's Sr. Sec. School</p>
<h3>Class 12th - 2021 - 96.4%</h3>
<p>St. Clare's Sr. Sec. School</p>
</div>
<div id="project">
<h2>Projects</h2>
<div>
<h3>Carbon Marketplace</h3>
<p>June 2023 — July 2023</p>
<p>This project leverages blockchain technology to help reduce carbon
emissions by motivating people to actively participate in their groups and open
their campaigns with brilliant ideas to help tackle carbon emissions. The group
which makes a great impact and improvements will be rewarded with Carbon Coins
(and ERC20 based token), using which they can buy merchandise and claim NFTs.</p>
</div>
</div>
</body>
</html>
CSS (resume.css)
/* General styles */
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
h1, h2, h3 {
color: #007BFF;
}
/* Header styles */
#header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
/* Section styles */
#profile, #objective, #skills, #experience, #education {
margin-top: 20px;
margin-bottom: 20px;
}
#project div {
background-color: #ddd;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}
/* Responsive design */
@media (max-width: 768px) {
body {
font-size: 14px;
}
Conclusion
This experiment successfully demonstrates how CSS can be used to enhance the visual
appearance of an HTML document. By applying CSS styles, we improved the look and feel
of the resume, making it more visually appealing and easier to read. This showcases the
power of CSS in web design and its importance in creating engaging and user-friendly web
pages.
Experiment 5: Design a User Registration Form in HTML and Validate Its Fields
Using JavaScript
Objective of Experiment
To create a user registration form using HTML and validate its fields (e.g., name, email,
password) using JavaScript to ensure that the user has entered valid information before
submitting the form.
Background Theory
HTML forms are used to collect user input. JavaScript can be used to validate form inputs on
the client side before the form is submitted to the server. This helps in reducing server load
and providing immediate feedback to the user.
Text editor or Integrated Development Environment (IDE) like Visual Studio Code
Web browser to view and test the HTML form with JavaScript validation
Code
HTML (registration_form.html)
<!DOCTYPE html>
<html>
<head>
<title>User Registration Form</title>
<script src="form_validation.js"></script>
</head>
<body>
<h2>User Registration Form</h2>
<form id="registrationForm" onsubmit="return validateForm()">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required><br>
<input type="submit" value="Register">
</form>
</body>
</html>
JavaScript (form_validation.js)
function validateForm() {
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
// Name validation
if(name == "") {
alert("Name cannot be empty");
return false;
}
// Email validation
var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if(!emailRegex.test(email)) {
alert("Invalid email format");
return false;
}
// Password validation
if(password.length < 8) {
alert("Password must be at least 8 characters long");
return false;
}
return true;
}
Conclusion
This experiment successfully demonstrates how to create a user registration form using
HTML and validate its fields using JavaScript. By implementing client-side validation, we
ensure that the user provides valid information before the form is submitted, improving the
user experience and reducing server load.
Objective of Experiment
To demonstrate how to use Ajax (Asynchronous JavaScript and XML) to fetch data from a
server asynchronously without reloading the entire web page. This experiment will focus on
retrieving data from a server and displaying it on the web page.
Background Theory
Ajax is a set of web development techniques using many web technologies on the client-side
to create asynchronous web applications. With Ajax, web applications can send and retrieve
data from a server asynchronously (in the background) without interfering with the display
and behavior of the existing page.
Text editor or Integrated Development Environment (IDE) like Visual Studio Code
Web browser to view and test the Ajax functionality
Code
HTML (ajax_example.html)
<!DOCTYPE html>
<html>
<head>
<title>Ajax Example</title>
<script src="ajax_example.js"></script>
</head>
<body>
<h2>Ajax Example</h2>
<button onclick="loadData()">Get UTC metadata</button>
<div id="data"></div>
</body>
</html>
JavaScript (ajax_example.js)
function loadData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("data").innerHTML = this.responseText;
}
};
xhr.open("GET", "https://worldtimeapi.org/api/timezone/Etc/UTC", true);
xhr.send();
}
Experiment 7: Create an XML Document for Books at a Bookstore and Design Its
Schema Using XSD
Objective of Experiment
To create an XML document representing a collection of books in a bookstore and define its
structure using an XML Schema Definition (XSD). This will demonstrate how to structure
XML data and enforce data integrity through schema validation.
Background Theory
XML (eXtensible Markup Language) is a markup language that defines a set of rules for
encoding documents in a format that is both human-readable and machine-readable. XSD
(XML Schema Definition) is a way to describe and validate data in an XML document,
ensuring that the XML data adheres to a specific structure and data types.
List of Components or Resources Required for Experiment
Code
XML Document (books.xml)
</bookstore>
Conclusion
This experiment successfully demonstrates how to create an XML document for a bookstore
and define its structure using an XSD schema. By using XML and XSD, we can structure
data in a way that is both human-readable and machine-readable, and ensure that the data
adheres to a specific structure and set of data types. This is crucial for data exchange and
validation in various applications, including web services, databases, and more.
Objective of Experiment
To demonstrate how to use socket programming in JavaScript to create a simple client-server
communication. This experiment will focus on creating a basic server that listens for
incoming messages from a client and responds accordingly.
Background Theory
Socket programming enables real-time, bidirectional, and event-based communication
between the browser and the server. It allows for more interactive web applications by
enabling the server to push data to the client without the client having to request it.
Code
Server (server.js)
Client (client.js)
Conclusion
This experiment successfully demonstrates the basics of socket programming in JavaScript
using Node.js. By creating a simple server and client, we showed how to establish a
connection, send and receive messages, and handle disconnections. Socket programming is a
powerful technique for creating real-time applications, enabling efficient, bidirectional
communication between clients and servers.
Objective of Experiment
To demonstrate how to perform basic operations (Insert, Delete, Update) on a table
in a MySQL database using SQL commands. This experiment will focus on
managing data within a table named employees.
Background Theory
MySQL is a widely used open-source relational database management system
(RDBMS) that uses SQL (Structured Query Language) for managing and
manipulating databases. SQL is a standard language for managing data held in a
relational database management system.
Code
SQL Commands
1. Insert Data into the Table
INSERT INTO employees (first_name, last_name, email, department, hire_date)
VALUES ('Ethan', 'Winters', 'ethan.winters@example.com', 'Research', '2017-05-
04');
Objective of Experiment
To demonstrate how to use Java Servlets to perform various operations: displaying a simple
message, forwarding/including using Request Dispatcher, maintaining session information
using Cookies, and inserting user data into a database.
Background Theory
Java Servlets are server-side programs that handle requests and responses in a web
application. They are part of the Java EE (Enterprise Edition) platform and are used to create
dynamic web content. Servlets can manage state, handle cookies, and interact with databases.
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
// Read a cookie
Cookie[] cookies = request.getCookies();
if (cookies!= null) {
for (Cookie cookie : cookies) {
if (cookie.getName().equals("user")) {
response.getWriter().println("User: " + cookie.getValue());
}
}
}
}
}
import java.io.*;
import java.sql.*;
import javax.servlet.*;
import javax.servlet.http.*;
try {
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection(url, user, password);
Statement stmt = con.createStatement();
String sql = "INSERT INTO users (name, email) VALUES ('John Doe',
'john.doe@example.com')";
int rowsAffected = stmt.executeUpdate(sql);
response.getWriter().println(rowsAffected + " row(s) inserted.");
} catch (Exception e) {
e.printStackTrace();
}
}
}