Introduction to Web Application

Introduction to Web Application

Dear Friends https://www.Pinepad.in welcomes you to start Spring Boot for Beginners course. This is course designed for those who don’t have knowledge of Web Application concepts. I will be going to teach you the fundamentals. In order to continue this course, you must know the fundamentals of Java Programming. Please learn Java programming and come back and read this tutorial to become a Spring Boot Programmer.

What is a Web Application?
If you say any software is a Web Application, it must have two layers which are Client and Server. The following diagram explains the Web Application Architecture flow.

Web Application architecture flow

The client is purely developed using HTML/CSS and JavaScript and the Server is purely developed by some Server-side programming language. In our case, our side programming is Java. The client always requests the data to Server and the Server takes the request from the Client, if the request is valid, the Server sends the data to the Client(This is called a response). So, a request is coming from the client and a response is coming from the Sever. Request and response nothing but simple data only. These data should understand both Client/Server to perform smooth communication. 
For example:
A user entering the Credential in the login form which is the username and password. This is called request data. The server receives the request data, if the requested data is available in the Sever(username password exists), The server allows to login and send all user information to the client. This is called Response data.

How people develop Web Application 15 years back using Java?
15 years back If you want to develop any web application using Java you have to know the following technologies.
Java,
JSP,
Servlet
Tomcat Server

HTML/JavaScript
Without using the above technologies, we can’t implement Web Application. Now we will be going to see the concepts of Servlet, JSP, and Tomcat Server. then we will be implementing Web Application these Technologies.

Multi Web Server

What is Webserver?
The Web Server is software, we can install that on our computer and it runs under a specific unique port in the computer. In our case, Tomcat is a Web Server which we can install on our computer and it runs under 8080 port number. In our computer, we can install multiple Web Server and each Web Server should run under one unique port number. let say we have installed two Tomcat Server. both Servers are run under a unique port number. Below pictorial diagram explains how multiple Web Server run in a single Computer

According to the above diagram, two Web Servers are running in a single machine with different ports. Port is a kind of address to access a particular Web Server from the Computer. “localhost” nothing but a computer where I installed Web Servers and 8080 and 8081 are ports to access a particular Web Server. I am accessing these servers using the HTTP protocol

You can download Tomcat 8 Server from the following link
https://tomcat.apache.org/download-80.cgi

As mentioned in the above screenshot, Based on your operating system, click the downloadable link either 32bit or 64 bit. For the Zip version, you need to click either 32 or 64. For the installer version, we can use the same installer link for both 32 or 64 bit. I preferred to download the zipped version. After downloading the Zipped version of the tomcat server, extract the file and keep it somewhere else in your operating system.

Running Tomcat Server on your computer
I have installed my tomcat server following the location

D:\webserver\apache-tomcat-8.5.60. Go to the bin folder in this folder. In this folder, you can see one file called the “startup.bat” file (Windows batch file). double click that file. Following window popup where you can see Tomcat Server Console. in the below picture, I have highlighted red color where it says that tomcat is running under 8080 port number.
Introduction to Web Application

As I mentioned before, if you want to access a particular Web Server we have to use HTTP + computer name + port number. In our case, we have to use http://localhost:8080. Here the computer name is “localhost”. Let’s try with this URL.

Introduction to Web Application

Wow!! I am able to access my Tomcat Web Server in your local system. Let try to create a Web Application.
Now I am planning to deploy one simple Web Application on this Web Server. I will be going to do everything manually without using any Java IDE which makes us more familiar to create a Web Application.

First, you need to verify that JAVA_HOME and PATH variable properly configured on your computer. In order to verify that, go to “This PC” then right-click as mentioned in the below screenshot.

Introduction to Web Application

Once click the “Properties” you can see navigate to the following popup as mentioned Order.

Introduction to Web Application

Once you click properties, a window will open where you need to click “Advanced system settings” when you click “Advanced System Settings”, the 2nd window will open where you need to click “Environment Variable”. Once you click “Environmental variable”, 3rd window will open where you can see JAVA_HOME, if you don’t see that, click the “New” button and add “JAVA_HOME” and add you java home path.(My Java home is C:\Program Files\Java\jdk1.8.0_261) Click the “Path” row in the above window. The following popup will open. if you see the following path in your variable, it is good otherwise you need to add this path to your environmental variable by clicking the “New” button.
Introduction to Web Application

Once you done the above configuration we need to create our web application in our Tomcat installation location go following location your hard drive.
D:\webserver\apache-tomcat-8.5.60\webapps (This is my location)
Once you go inside the “webapp” folder, create a folder called “itgarden”. The “itgarden” folder must have the following folder structure.

D:\webserver\apache-tomcat-8.5.60\webapps\itgarden

Following is a folder structure for the “WEB-INF” Folder 

Introduction to Web Application

Inside the “classes” folder I have created the following Servlet class

// Import required java libraries
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class ItgardenServlet extends HttpServlet {
 
   private String responseMessage;
public void init() throws ServletException {
          responseMessage = "This is my first Servlet Program";
   }
public void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
      
      // Set response content type
      response.setContentType("text/html");
//All Servlet program logic is goes here.
      PrintWriter out = response.getWriter();
      out.println("<h1>" + responseMessage + "</h1>");
   }
public void destroy() {
      // nothing to do now.
   }
}

The “lib” folder we can keep empty. In the web.xml file, we need to configure the Servlet which we created. In the below web.xml file I have added my servlet definition using “<servlet>” Tag. inside the <servlet> tag we have to say <servlet-name>itgarden</servlet-name> the name could be anything. <servlet-class>ItgardenServlet</servlet-class> here exact your Servlet name you need to mention. Since I have created ItgardenServlet.java , I have used my Servlet class name. If you are using any package, we have to mention like below
“<servlet-class><yourpackagename>.ItgardenServlet</servlet-class>”. in our case there is no package so, we can define like below.
<servlet-class>ItgardenServlet</servlet-class> . 
According to this configuration, we have defined our servlet. Now we how to define how to access this servlet using servlet-mapping configuration like below
<servlet-mapping>
<servlet-name>itgarden</servlet-name> This must be servlet name we have defined above
<url-pattern>/print</url-pattern> This could be any name
</servlet-mapping>

Now we have completed the Servlet configuration. Now compile the Servlet class which we created

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  version="3.1"
  metadata-complete="true">
<description>
    Web Application example
    </description>
    <display-name>itgarden</display-name>
    <servlet>
      <servlet-name>itgarden</servlet-name>
      <servlet-class>ItgardenServlet</servlet-class>
    </servlet>
   <servlet-mapping>
        <servlet-name>itgarden</servlet-name>
        <url-pattern>/print</url-pattern>
    </servlet-mapping>
  
  </web-app>

This is my Servlet classpath in my harddrive. 
D:\webserver\apache-tomcat-8.5.60\webapps\itgarden\WEB-INF\classes
I will going open Command Prompt and need to navigate the above location. Please do the same on your computer. Then, execute the javac command like below.
javac ItgardenServlet.java

When I try to compile in Command Prompt, I am getting the following compilation error. The reason is, the “servlet-api.jar” not set in our classpath variable. in order to fix this issue. we need to set. The servlet-api.jar file located in the following location in the Tomcat installation folder.
D:\webserver\apache-tomcat-8.5.60\lib

Introduction to Web Application

Now we need to set the classpath like below
set CLASSPATH=%CLASSPATH%;D:\webserver\apache-tomcat-8.5.60\lib\servlet-api.jar;
Once you set the above classpath, you should able ot complete the servlet file successfully. Again try like below

javac ItgardenServlet.java

Look at below command prompt which after successful compilation it shows ItgardenServlet.class
Introduction to Web Application

Now we have compiled successfully. Now we need to run our application by starting Tomcat Web Server.

Go to the following location of your tomcat installation location to start the Web app.
Introduction to Web Application

Once you click startup windows batch file, the following server console will display a popup where it says at the end below the text.

19-Nov-2020 19:30:45.313 INFO [localhost-startStop-1] org.apache.catalina.startup.HostConfig.deployDirectory Deployment of web application directory [D:\webserver\apache-tomcat-8.5.60\webapps\ROOT] has finished in [24] ms
19-Nov-2020 19:30:45.313 INFO [main] org.apache.coyote.AbstractProtocol.start Starting ProtocolHandler ["http-nio-8080"]

The following log says our itgarden Web Application deployed successfully.
19-Nov-2020 19:30:45.249 INFO [localhost-startStop-1] org.apache.catalina.startup.HostConfig.deployDirectory Deploying web application directory [D:\webserver\apache-tomcat-8.5.60\webapps\itgarden]
Now ready to test our Servlet application, in order to access our Servlet from the Tomcat web server we have to use the following URL
http://computername:portnumber/itgarden/print
HTTP = We are using the HTTP protocol to access the server
computername = localhost or some IP address. In our case, it is “localhost”
itgarden = It is a Web Application Root path. When you look at under “webapp” folder, there is a folder called “itgarden” it is a root path of our Web Application
print = it is a servlet-mapping name we have defined in the web.xml file. when you refer “print” , it will refer to the servlet name which is “itgarden” that we have mentioned in the web.xml. when you refer to the Servlet name as “itgarden” it will refer to the Servlet class name that we mentioned in the web.xml file. try with the below URL. it will return the response from Servlet.
http://localhost:8080/itgarden/print
Following is the output when I access the above URL
Introduction to Web Application

Servlet code explanation
The Servlet class must extend from HttpServlet. The init() method cal only one time. The init method called by Servlet container. In the init method I am initializing the responseMessage variable. In this Servlet program, I am using the doGet method which is for the GET HTTP method. The doGet method accepts two parameters one is HttpServletRequest and another one is HttpServletResponse. Inside the method implementation, I am saying that the content type is text/HTML. The meaning of this line is, response to the client must be HTML and text. 
I am initializing PrintWriter class. using this class I am returning a response to the client browser.
out.println(“<h1>” + responseMessage + “</h1>”);
This method prints the string data on the client-side. 
The destroy method call only once. The destroy method is called Servlet Container. If you want to do any activity at the time of destroying the servlet, we can write those respective programs in the destroy method.
I hope this article is very helpful to those who want to create legacy Web Application using the Tomcat server
Download the source code form the following link:
Simple servlet Web Application


Please follow our ITGARDEN YouTube channel for Billing System Project development work using Spring Boot. The Project source code absolutely free. This project is very good for who is looking for real-time project experience in Spring Boot. To understand the Billing System Project code, watch all Billing System-related YouTube videos from this link. Click Here
Our YouTube Channel
https://www.youtube.com/channel/UChj5CeuWaHIFr4RkXoG3iJA?view_as=subscriber
Please follow me on Medium.com for all billing system related stories and Java-based technical Articles
https://suresh-stalin.medium.com/
Note: To find all billing System-related stories find “billing system itgarden” in medium.com

Close Menu
×
×

Cart