Beginning to Java Web App Developement

1. Website/Web Application

Website is a collection of web pages that may contain text, images, audio and video.
Web Application is a website which focuses more on providing some useful functions to users.

Static Website : Static website displays static/fixed information
Dynamic Website : Dynamic website displays information that keep changing.

<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;">
</div><table class="alt" style="background-color: white; border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(255, 192, 203); color: black; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; line-height: 23px; text-align: initial; width: 804px;"><tbody><tr style="background-color: #f6ffe1;"><th style="background: linear-gradient(rgb(246, 255, 225), rgb(227, 229, 214)); font-family: "times new roman"; font-size: 17px; padding: 5px; text-align: left; vertical-align: top;">Static Website</th><th style="background: linear-gradient(rgb(246, 255, 225), rgb(227, 229, 214)); font-family: "times new roman"; font-size: 17px; padding: 5px; text-align: left; vertical-align: top;">Dynamic Website</th></tr><tr><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">Prebuilt content is same every time the page is loaded.</td><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">Content is generated quickly and changes regularly.</td></tr><tr style="background-color: #f6ffe1;"><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">It uses the HTML code for developing a website.</td><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">It uses the server side languages such as PHP,SERVLET, JSP, and ASP.NET etc. for developing a website.</td></tr><tr><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">It sends exactly the same response for every request.</td><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">It may generate different HTML for each of the request.</td></tr><tr style="background-color: #f6ffe1;"><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">The content is only changes when someone publishes and updates the file (sends it to the web server).</td><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">The page contains “server-side” code it allows the server to generate the unique content when the page is loaded.</td></tr><tr><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">Flexibility is the main advantage of static website.</td><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">Content Management System (CMS) is the main advantage of dynamic website.</td></tr></tbody></table>

2. Hyper Text Transfer Protocol (HTTP)

<div class="separator" style="clear: both; text-align: center;"></div>
HTTP
Data communication protocol used to establish communication between client (internet browser) and web server.

HTTP Request
The information send by the client (browser) to a web server that ‘requesting’ for some response (data, file, info etc) from the web server using HTTP protocol

GET vs POST (Both are type HTTP Request)

<table class="alt" style="background-color: white; border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(255, 192, 203); color: black; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; line-height: 23px; text-align: initial; width: 804px;"><tbody><tr style="background-color: #f6ffe1;"><th style="background: linear-gradient(rgb(246, 255, 225), rgb(227, 229, 214)); font-family: "times new roman"; font-size: 17px; padding: 5px; text-align: left; vertical-align: top;">GET</th><th style="background: linear-gradient(rgb(246, 255, 225), rgb(227, 229, 214)); font-family: "times new roman"; font-size: 17px; padding: 5px; text-align: left; vertical-align: top;">POST</th></tr><tr><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">is used to retrieve data from web server</td><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">is used to insert/update data into web server.</td></tr><tr style="background-color: #f6ffe1;"><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">is not secured because data is exposed in URL bar.</td><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">is secured because data is NOT exposed in URL bar.</td></tr><tr><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">is used typically for viewing something, without changing it</td><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">is used for changing something</td></tr><tr style="background-color: #f6ffe1;"><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">data is sent through the header (can be seen in URL bar)
www.ask.com/register.jsp?name1=value</td><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">data is sent in body (can NOT be seen in URL bar)
www.ask.com/registerDao.jsp</td></tr></tbody></table>

3. Front End (client-side) vs Back End (server-side)

<table class="alt" style="background-color: white; border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(255, 192, 203); color: black; font-family: verdana, helvetica, arial, sans-serif; font-size: 13px; line-height: 23px; width: 804px;"><tbody><tr style="background-color: #f6ffe1;"><th style="background: linear-gradient(rgb(246, 255, 225), rgb(227, 229, 214)); font-family: "times new roman"; font-size: 17px; padding: 5px; text-align: left; vertical-align: top;">Front End</th><th style="background: linear-gradient(rgb(246, 255, 225), rgb(227, 229, 214)); font-family: "times new roman"; font-size: 17px; padding: 5px; text-align: left; vertical-align: top;">Back End</th></tr><tr><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">Refers to the stuff that you actually see on the browser aka the UI Interface of the website.</td><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">Refers to the “brain” of the application which live on the server </td></tr><tr style="background-color: #f6ffe1;"><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">Use HTML, CSS, and JavaScript that are supported by the browser (client)</td><td style="border: 1px solid rgb(255, 192, 203); font-stretch: normal; margin-left: 20px; padding: 5px; text-align: justify; vertical-align: top;">Use other languages such as Java and PHP that are supported by the server 

</td></tr></tbody></table>

4. Java Servlet 

Servlet is a java program that run at the back end (server-side). Servlet is the program that listen and response to HTTP Request. Servlet is the one who retrieve data from the database by performing queries.

Basically, Servlet is a java class (that extends HttpServlet class from Java API).
For example, MyServlet.java (which is then compiled to MyServlet.class)

<div class="separator" style="clear: both; text-align: center;"></div>

5. Web Server & Servlet Container

Web Server is a program that processes request via HTTP..
Web Server is responsible to store, process and deliver web pages to clients.

Example : Apache HTTP Server (Apache2, httpd)

A Servlet Container is a type of Web Server that host and process Java program called Servlet. Servlet Container is responsible for managing the lifecycle of servlets, mapping a URL to a particular servlet etc. Servlet Container also works as Web Server for non-java programs.

Example : Tomcat
<div class="separator" style="clear: both; text-align: center;"></div>
NOTE : All Servlet Containers are Web Server. However, not all Web Server are Servlet Container. Apache HTTP Server is only a Web Server and it cannot run Java Servlet at all.

Servlet Container can host many Java Servlets.
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;">
</div>For normal Java Servlet, one Java Servlets are “mapped” to one specific URL/page.
For example,
When user open www.ask.com/register.jsp, regServlet  is called.
When user open www.ask.com/logout.jsp, logoutServlet  is called.

This is called Servlet Mapping and is done via Web Deployment Descriptor or using WebServlet annotation (see next)


6. Web Deployment Descriptor (web.xml)

This is a XML file where Servlet Container finds out which Servlet are mapped to which URL/page.

<div class="separator" style="clear: both; text-align: center;"></div>

Example : web.xml

<div class="separator" style="clear: both; text-align: center;"></div>

7. Servlet Annotation vs web.xml

‘@WebServlet’ annotation can be used to declare a servlet instead of web.xml (especially if you have many Servlets). This annotation is processed by the Servlet Container at deployment time, and the corresponding servlet made available at the specified URL patterns (value=URL Pattern).

<div class="separator" style="clear: both; text-align: center;"></div>

8. Web Application Structure
<div class="separator" style="clear: both; text-align: center;"></div>

<div class="separator" style="clear: both; text-align: center;"></div>