Web Technology

Name – Bhrigu Soni Class - B.
Tech, III Year Branch - AI & DS Sem – VI

Subject – WEB TECHNOLOGY (AI 367)
Experiment - 1
Aim - To Download and install Tools for Web development.
1. INSTALLING JDK 21
JDK (Java Development Kit),which includes JRE and development
tools such as compiler and debugger.
1. Go to official website
https://www.oracle.com/java/technologies/downloads/
2. Choose JDK 21 ->Windows -> Download -> X64installer
3. Run the downloaded installer. Accept the defaults and follow
the screen instructions to complete the installation.
Page | 1
Name – Bhrigu Soni Class - B. Tech, III Year Branch - AI & DS Sem – VI
4. By default , JDK is installed in directory “C:\Program

Files\Java\jdk-21”.Launch “File Explorer” navigate to
location to inspect directories. Copy the path as shown
below.
Page | 2
5. Open Setting -> System -> About -> Advance system settings
-> Environment variable -> system variable -> New. Then
create new variable as JAVA_HOME and paste path to variable
value
6. Copy the bin path : C:\ Program Files\Java\jdk-21\bin and

paste it in the system path.
Page | 3
7. Check the installation by typing java –version on command

prompt
2. INSTALLING JRE 1.8

The java runtime Environment(JRE) is a software by which java
applications can run on any operating system easily. It includes
Virtual machine and Core libraries
1. Goto official website

https://www.oracle.com/java/technologies/downloads/
2. Download jre-8u401-windows-x64 under Java Runtime Environment
Page | 4
3. Complete installation process
4. Goto Setting -> System -> About -> Advance system settings ->
Environment Variable and set jre bin path C:\Program
Files\Java\jre-1.8\bin to system variable as shown below
Page | 5
Page | 6
3. INSTALLING Eclipse R 2023-12
1. Download the Eclipse installer from

https://eclipse.org/downloads
2. Select the Java EE package and install
Page | 7
3. Once the installation is done Launch the IDE
4. INSTALLING Apache Tomcat web server
1. Goto to website https://tomcat.apache.org/

2. On left side there will be several versions of tomcat server.
Select tomcat 10 and download 32bit/64bit Windows service
installer for windows.
Page | 8
3. Complete installation process by Next -> Finish
Page | 9
4. Tomcat 10 successfully downloaded now set up it in Eclipse.
Page | 10
Experiment - 2
AIM- Create a Dynamic Web Project and print HELLO WORLD in html file.
1. Open the eclipse IDE

2. Create New -> Dynamic Web Project -> name your project(i.e. ekta)
3. Inside src -> main -> web app -> New HTML FILE(i.e. hello.html)
4. Write hello world inside the body tag in h1 tag and save it
5. Run the html file and select tomcat server
Page | 11
OUTPUT:
Page | 12
Experiment – 3
Aim – To Develop a webpage using HTML, CSS and JS showing frames
using Eclipse and Apache Tomcat.
Code –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Page Layout</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
#navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
#navbar a {
color: #fff;
text-decoration: none;
margin-right: 20px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
color: #333;
padding: 12px 16px;
text-decoration: none;
display: block;
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
#sidebar {
width: 200px;
height: 100vh;
background-color: #f4f4f4;
Page | 13
float: left;
padding: 20px;
}
#working-area {
margin-left: 220px; /* Adjusted to accommodate the sidebar */
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
clear: both;
}
iframe {
border: none;
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<header>
<nav id="navbar">
<a href="#">Home</a>
<div class="dropdown">
<button class="dropbtn">Dropdown 3</button>
<div class="dropdown-content">
<a href="#">Option 3-1</a>
</div>
</div>
<a href="D:\IMG_0004.JPG">Option 4-1</a>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</nav>
Page | 14
</header>
<main>
<aside id="sidebar">
<h1>Sidebar</h1>
<ul>
<li><a href="#"
onclick="loadContent('http://192.168.100.254:8090/httpclient.html')">Website
1</a></li>
<li><a href="#" onclick="loadContent('IMG_0004.JPG')">Photo
1</a></li>
<li><a href="#"
onclick="loadContent('http://192.168.12.2:8090/')">Website 2</a></li>
<li><a href="#"
onclick="loadContent('https://gate2024.iisc.ac.in/')">Website 3</a></li>

</ul>
</aside>
<section id="working-area">
<iframe id="contentFrame" frameborder="0"></iframe>
</section>
</main>
<footer>
Footer Content Here
</footer>
<script>
function loadContent(url) {
document.getElementById("contentFrame").src = url;
}
</script>
</body>
</html>
Output -
Page | 15
Page | 16
Experiment - 4
AIM : Write a program to implement struts application.
THEORY:
Struts 2 Framework
The Struts 2 framework is used to develop MVC (Model View Controller) based web applica ons. The
Struts 2 provides supports to POJO based ac ons, Valida on Support, AJAX Support, Integra on support
to various frameworks such as Hibernate, Spring, Tiles etc.
1. Firstly, we need to download all the .jar files for the struts from Apache Struts Website .
2. We need to download Struts 2.5.33 Full Distribu on file .
Page | 17
3.Now we need to create a new dynamic web project for struts applica on.
4.We need to setup tomcat server v9.0 to run struts applica ons as struts only supports tomcat
server v9.0 .
5. Then we need to upload all the necessary .jar files from struts 2.5.33 file which we downloaded
.
The jar files we need are :
Page | 18
1. commons-fileupload-1.4.jar
2. commons-io-2.6.jar
3. Commons-lang3-3.8.1.jar
4. Freemarker-2.3.31.jar
5. Javassist-3.20.0-GA.jar
6. Log4j-api-2.12.4.jar
7. Ognl-3.1.29.jar
8. Struts2-core-2.5.33.jar
6. Now we need to create a struts.xml file to configure struts2 .
Struts.xml
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts
Configuration 2.5//EN"
"http://struts.apache.org/dtds/struts-2.5.dtd">
<struts>
<package name="default" namespace="/" extends="struts-
default">
<action name="getMessage" class="MyAction">
Page | 19
<result name="success">/success.jsp</result>
<result name="failure">/error.jsp</result>
</action>
</package>
</struts>
7. Then we have to configure struts.xml file and web.xml file
Web.xml

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-
instance"
xmlns="https://jakarta.ee/xml/ns/jakartaee"
xmlns:web="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartae
e https://jakarta.ee/xml/ns/jakartaee/web-
app_5_0.xsd" id="WebApp_ID" version="5.0">
<display-name>StrutsDemo</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.jsp</welcome-file>
<welcome-file>default.htm</welcome-file>
</welcome-file-list>
<filter>
<filter-name>struts2</filter-name>
<filter-
class>org.apache.struts2.dispatcher.filter.StrutsPrepa
reAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
8. Now we have successfully downloaded and configured Struts 2 with our web applica on.
Page | 20
Experiment - 5
AIM : Write a program to make Struts 2 application .
THEORY:
Struts 2 Framework
The Struts 2 framework is used to develop MVC (Model View Controller) based web applica ons. The
Struts 2 provides supports to POJO based ac ons, Valida on Support, AJAX Support, Integra on support
to various frameworks such as Hibernate, Spring, Tiles etc.
The important features of struts 2 framework are as follows:
• Configurable MVC components
• POJO based ac ons
• AJAX support
• Integra on support
• Various Result Types
• Various Tag support
• Theme and Template support
Code –
struts.xml
"-//Apache Software Foundation//DTD Struts Configuration 2.5//EN"
<struts>
<package name="default" namespace="/" extends="struts-default">
<action name="getMessage" class="MyAction">
Page | 21
</action>
</package>
</struts>
web.xml
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee
https://jakarta.ee/xml/ns/jakartaee/web-
<welcome-file-list>
<filter>
<filter-
class>org.apache.struts2.dispatcher.filter.StrutsPrepareAndExecuteFilter
</filter-class>
</filter>
<filter-mapping>
</filter-mapping>
Page | 22
</web-app>
success.jsp
<html>
<head>
<title>Welcome</title>
</head>
<body>
<p>Welcome to Sturts 2 Framework!</p>
</body>
</html>
error.jsp
<html>
<head>
<title>Error</title>
</head>
<body>
<p>Error occurred...</p>
</body>
</html>
MyAction.java
public class MyAction {
public String execute() {
System.out.println("Hello Struts!");
return "success";
Output –
Page | 23
Experiment 6
Aim: Download and install MySQL.
Download MySQL
Follow these steps:
Step 1: Go to the official website of MySQL and download the community server
edi on so ware. Here, you will see the op on to choose the Opera ng System, such
as Windows.
Step 2: Next, there are two op ons available to download the setup. Choose the
version number for the MySQL community server, which you want. If you have good
internet connec vity, then choose the mysql-installer-web-community. Otherwise,
choose the other one.
Page | 24
Installing MySQL on Windows

Step 1: A er downloading the setup, unzip it anywhere and double click the MSI installer .exe file. It will
give the following screen:
Step 2: In the next wizard, choose the Setup Type. There are several types available, and you need to
choose the appropriate op on to install MySQL product and features. Here, we are going to
select the Custom op on and click on the Next bu on.
Page | 25
This op on will install the following things: MySQL Server, MySQL Shell, MySQL Router, MySQL
Workbench, MySQL Connectors, documenta on, samples and examples, and many more.
Step 3: Once we click on the Next bu on, it may give informa on about some features that may fail to
install on your system due to a lack of requirements. We can resolve them by clicking on the Execute
bu on that will install all requirements automa cally or can skip them. Now, click on the Next bu on.
Step 4: Once we click on the Execute bu on, it will download and install all the products. A er comple ng
the installa on, click on the Next bu on.
Page | 26
Step 5: In the next wizard, we need to configure the MySQL Server and Router. Here, I am not going to
configure the Router because there is no need to use it with MySQL. We are going to show you how to
configure the server only. Now, click on the Next bu on.
Step 6: In the next screen, the system will ask you to choose the Config Type and other connec vity
op ons. Here, we are going to select the Config Type as 'Development Computer' and Connec vity as
TCP/IP, and Port Number is 3306, then click on Next.
Page | 27
Step 7: Now, select the Authen ca on Method and click on Next. Here, I am going to select the first
op on.
Step 8: The next screen will ask you to men on the MySQL Root Password. A er filling the password
details, click on the Next bu on.
Page | 28
Step 9: The next screen will ask you to configure the Windows Service to start the server. Keep the default
setup and click on the Next bu on.
Step 10: In the next wizard, the system will ask you to apply the Server Configura on. If you agree with
this configura on, click on the Execute bu on.
Page | 29
Step 11: Once the configura on has completed, you will get the screen below. Now, click on the Finish
bu on to con nue.
Step 12: In the next screen, you can see that the Product Configura on is completed. Keep the default
se ng and click on the Next-> Finish bu on to complete the MySQL package installa on.
Page | 30
Step 13: Now, the MySQL installa on is complete. Click on the Finish bu on. And the you’ll see the
following screen.
Page | 31
Step 14: Now, enter the root password and click ”OK”.
Step 15: A er that the following screen will be displayed.
Page | 32
Set Environment Variable 4

Step1: Open the Environment variable dialogue box. Click on Environment Variable.
Step2: In System Variables set the path of MySql to “C:\Program Files\MySQL\MySQL Server 8.0\bin”. And
Click “OK”.
Verify MySQL installa on

Once MySQL has been successfully installed, the base tables have been ini alized, and the server has
been started, you can verify its working via some simple tests.
Open your MySQL Command Line Client; it should have appeared with a mysql> prompt. If you have set
any password, write your password here. Now, you are connected to the MySQL server, and you can
execute all the SQL command at mysql> prompt as follows:
For example: Check the already created databases with show databases command
Page | 33
Experiment 7
Aim: Write a program for Struts and MySQL connectivity.
Tools Used:
1. Eclipse
2. Struts 2.5.33
3. Tomcat Server v9.0
4. MYSQL Database v8.3.0
Step-1: To create a MySql Database :

1. Open Command prompt or Terminal .
2. Write command myql -u root -p .
3. To create database : create database struts2; .
4. Then to use this database : use struts2;
5. To create table : create table login(user varchar(50) primary key
, password varchar(50) , name varchar(50)); .
Step-2: Open Eclipse , create a dynamic web project and configure it

with struts2 .
1. Upload all the jar files .
2. Create struts.xml , web.xml , Myaction.java files .
3. Download and upload mysql-connector-j-8.3.0.jar file , used to
connect struts2 and MySql database .
Step-3: Configure MyAction.java , struts.xml , web.xml files.
MyAction.java:
import com.opensymphony.xwork2.ActionSupport;
import java.sql.*;
@SuppressWarnings("serial")
public class MyAction extends ActionSupport {
public String execute() {
String ret = ERROR;
Connection con = null;
Page | 34
try
{
Class.forName("com.mysql.jdbc.Driver");
con =
DriverManager.getConnection("jdbc:mysql://localhost:8080/struts2","root
","sajalsinghal")
}
Struts.xml:
"-//Apache Software Foundation//DTD Struts Configuration
2.5//EN"
<struts>
<package name="default" namespace="/" extends="struts-
default">
<action name="abc" class="MyAction">
</action>
</package>
</struts>
Web.xml:
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-
instance"
xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee
https://jakarta.ee/xml/ns/jakartaee/web-
Page | 35

<welcome-file-list>
<filter>
<filter-
class>org.apache.struts2.dispatcher.filter.StrutsPrepareAndE
xecuteFilter</filter-class>
</filter>
<filter-mapping>
</filter-mapping>
</web-app>
After performing the above steps, we have successfully connected our

MySQL database with Struts2 Application.
Page | 36
Experiment 8
Aim: Write a program for using MySQL database to store data from
“FORM” made using JSP.
Code –
register.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
<form action="register" method="post">
Username: <input type="text" name="username"><br>
Email: <input type="email" name="email"><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="Register">
</form>
</body>
</html>
success.jsp

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Registration Successful!</h2>
<p>Congratulations! Your registration was successful.</p>
<p><a href="register.jsp">Go back to registration page</a></p>
</body>
</html>
Page | 37
error.jsp

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Registration Error</h2>
<h2>Error</h2>
<p>An error occurred: <%= request.getAttribute("errorMessage") %></p>
<p>Please try again later.</p>
<p><a href="register.jsp">Go back to registration page</a></p>
</body>
</html>
register.java
package in.sp.backend;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/register")
public class Register extends HttpServlet {
private static final String URL = "jdbc:mysql://localhost:3306/register";
private static final String USER = "root";
private static final String PASSWORD = "root";
protected void doPost(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String username = request.getParameter("username");

String email = request.getParameter("email");
String password = request.getParameter("password");
Page | 38
try {
// Load the MySQL JDBC driver
Class.forName("com.mysql.cj.jdbc.Driver");
// Establish a connection to the database

Connection conn = DriverManager.getConnection(URL, USER, PASSWORD);
// Prepare SQL statement for inserting user data

String sql = "INSERT INTO users (username, email, password) VALUES (?, ?, ?)";
PreparedStatement statement = conn.prepareStatement(sql);
statement.setString(1, username);
statement.setString(2, email);
statement.setString(3, password);
// Execute the SQL statement to insert user data

statement.executeUpdate();
// Close the database connection

conn.close();
// Redirect the user to the success page

response.sendRedirect("success.jsp");
} catch (ClassNotFoundException | SQLException e) {
request.setAttribute("errorMessage", e.getMessage());
request.getRequestDispatcher("error.jsp").forward(request, response);
}
}
}
Database register and Table users
CREATE DATABASE register;
USE register;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50),
email VARCHAR(50),
password VARCHAR(50)
);
Page | 39
Output –
Page | 40

Web Technology

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technology

Uploaded by

Copyright:

Available Formats

Name – Bhrigu Soni Class - B.

Tech, III Year Branch - AI & DS Sem – VI

Aim - To Download and install Tools for Web development.

4. By default , JDK is installed in directory “C:\Program

6. Copy the bin path : C:\ Program Files\Java\jdk-21\bin and

7. Check the installation by typing java –version on command

2. INSTALLING JRE 1.8

1. Goto official website

3. Complete installation process

3. INSTALLING Eclipse R 2023-12

1. Download the Eclipse installer from

2. Select the Java EE package and install

3. Once the installation is done Launch the IDE

4. INSTALLING Apache Tomcat web server

1. Goto to website https://tomcat.apache.org/

3. Complete installation process by Next -> Finish

4. Tomcat 10 successfully downloaded now set up it in Eclipse.

1. Open the eclipse IDE

5. Run the html file and select tomcat server

AIM : Write a program to implement struts application.

to various frameworks such as Hibernate, Spring, Tiles etc.

2. We need to download Struts 2.5.33 Full Distribu on ﬁle .

The jar ﬁles we need are :

6. Now we need to create a struts.xml ﬁle to conﬁgure struts2 .

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

7. Then we have to configure struts.xml file and web.xml file

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

AIM : Write a program to make Struts 2 application .

to various frameworks such as Hibernate, Spring, Tiles etc.

The important features of struts 2 framework are as follows:

• Conﬁgurable MVC components

• POJO based ac ons

• Various Result Types

• Various Tag support

• Theme and Template support

<!DOCTYPE struts PUBLIC

"-//Apache Software Foundation//DTD Struts Configuration 2.5//EN"

<package name="default" namespace="/" extends="struts-default">

<action name="getMessage" class="MyAction">

app_5_0.xsd" id="WebApp_ID" version="5.0">

<p>Welcome to Sturts 2 Framework!</p>

public String execute() {

internet connec vity, then choose the mysql-installer-web-community. Otherwise,

choose the other one.

Installing MySQL on Windows

Step 15: A er that the following screen will be displayed.

Set Environment Variable 4

Verify MySQL installa on

Step-1: To create a MySql Database :

Step-2: Open Eclipse , create a dynamic web project and configure it

Step-3: Configure MyAction.java , struts.xml , web.xml files.

app_5_0.xsd" id="WebApp_ID" version="5.0">

After performing the above steps, we have successfully connected our

<%@ page language="java" contentType="text/html; charset=UTF-8"

<%@ page language="java" contentType="text/html; charset=UTF-8"

<%@ page language="java" contentType="text/html; charset=UTF-8"

String username = request.getParameter("username");

// Establish a connection to the database

// Prepare SQL statement for inserting user data

// Execute the SQL statement to insert user data

// Close the database connection

// Redirect the user to the success page

Database register and Table users

CREATE DATABASE register;