Simple Java Servlet implementation (no database)

1. Creating your project directory in Tomcat’s webapps folder.

In Debian Server, Tomcat can be installed at a few possible location such as

<ul><li>/usr/share/tomcat8</li><li>/var/lib/tomcat8/ (Note : this is where Tomcat is installed in KWT server)</li><li>/opt/tomcat8</li></ul><div>However, our web application are to be placed inside the “webapps” folder. For example, for KWT server, your web application should be placed in :
<ul><li>/var/lib/tomcat8/webapps/</li></ul><div>First, use ssh client to access your server. Then, go to this directory : cd /var/lib/tomcat8/webapps/</div></div><div>
</div><div>Create a directory with your project name : mkdir projectRaf</div><div>
</div><div>Create a simple index.html page to test our project page : touch index.html </div><div>
</div><div>Insert something (anything) to that file : echo “this is my project page” > index.html</div><div>
</div><div>Go to your project page. For KWT, this will be http://{your-server-IP-here}:8080/projectRaf and the content of the index.html should be displayed. Note that 8080 is the port used by Tomcat. For comparison, Apache2 web server uses port 80, which is the default port for all browser (you don’t have to specify the port for Apache2 web server). For Tomcat, you need to specify the port 8080.</div><div>
</div><div>
</div><div>2. Revise on the Java Servlet’s operation.

If you haven’t, you should go through this note again : http://nextslides.blogspot.my/2017/01/beginning-to-web-app-developement-web.html

Make sure you understand the use of HTTP POST and HTTP GET as well as Servlet Mapping.</div><div>
</div><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;">Handling form data represented in HTML page is a very common task in web development. A typical scenario is the user fills in fields of a form and submits it. </div><div class="separator" style="clear: both;">
</div><div class="separator" style="clear: both;">The server will process the request based on the submitted data, and send response back to the client - this is what our Java Servlet does. </div><div class="separator" style="clear: both;">
</div><div class="separator" style="clear: both;">
</div><div class="separator" style="clear: both;">3. Create simple form (Front end)</div><div class="separator" style="clear: both;">
</div>Since our index.html file is in the server, it is quite inconvinience to edit the file directly on the server.

Luckily, Bitvise SSH Client comes with SFTP Window browser. This allow us to graphically transfer file from our local to our server, specifically to Tomcat’s webapps folder
<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><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><div class="separator" style="clear: both; text-align: center;">
</div><div class="" style="clear: both;">Edit our index.html and put in the following :
</div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both;">
</div><div class="separator" style="clear: both;">Form attributes :</div><div class="separator" style="clear: both;"></div><ul><li>method=”post” : to send the form data as an HTTP POST request to the server.
Remember the difference between HTTP POST and HTTP GET?
</li><li>action=”servlet–URL” : specifies the URL of the servlet.
Remember what is Servlet-mapping? This is the usage of that mapping.</li></ul>
<div>Once done, copy and overwrite the index.html on the server. Then go to the project URL, you should see something like below :

</div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: left;">Note that this is a simple form. We will use this similar index.html file in our Eclipse project below.</div><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: left;">4. Create Servlet using Eclipse (Back End)</div><div class="separator" style="clear: both; text-align: left;">
</div><div class="separator" style="clear: both; text-align: left;">For simplicity, we use the following tutorial : http://www.studytonight.com/servlet/creating-servlet-in-eclipse.php</div><div class="separator" style="clear: both; text-align: left;">
</div><div class="separator" style="clear: both; text-align: left;">
</div><div class="separator" style="clear: both; text-align: left;">5. Change the Servlet code</div><div class="separator" style="clear: both;">
</div><div class="separator" style="clear: both;">On the server side, we need to create a Java servlet which want to be mapped to loginServlet, as specified in the form’s action attribute (see our index.html above). Following is code snippet of the servlet, using the annotation method, specifically on the doPost( ) method</div><div class="separator" style="clear: both;">
You may want to change the package name to yours.
</div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both;">
</div><div class="separator" style="clear: both;">
6. Understand the Servlet 
</div><div class="separator" style="clear: both;">Notice that the servlet’s URL is specified by the @WebServlet annotation before the servlet class. </div><div class="separator" style="clear: both;">
</div><div class="separator" style="clear: both;">When the user submits the login form above, the servlet’s doPost() method will be invoked by the servlet container. </div><div class="separator" style="clear: both;">
</div><div class="separator" style="clear: both;">Typically we will do the following tasks inside doPost() method:</div><div class="separator" style="clear: both;"></div><ul><li>Read values of the fields posted from the form via the request object (implementation of javax.servlet.http.HttpServletRequest interface).
</li><li>Do some processing, e.g. connecting to database to validate the username and password.
</li><li>Return response back to the user via the respone object (implementation of javax.servlet.http.HttpServletResponse interface).</li></ul>
<div class="separator" style="clear: both;"></div><div><div>
</div><div>To read values of form’s fields, the HttpServletRequest interface provides the following methods:</div><div><ul><li>String getParameter(String name) : gets value of a field which is specified by the given name, as a String. The method returns null if there is no form field exists with the given name.</li><li>String[] getParameterValues(String name) : gets values of a group of fields which have same name, in an array of String objects. The method returns null if there is no field exists with the given name.</li></ul></div><div>Usage :</div><div>String username = request.getParameter(“username”);</div><div>String password = request.getParameter(“password”);</div></div><div>
</div><div><div>To send response back to the client, we need to obtain a writer from the response object by calling the method getWriter() of the HttpServletResponse interface:</div><div>
</div><div>PrintWriter writer = response.getWriter();</div><div>
</div><div>Then use the print() or println() method to deliver the response (in form of HTML code). </div><div>
</div><div>For example :</div><div>
</div><div>String htmlRespone = “{create-html-out-here}”;</div><div>writer.println(htmlRespone);</div></div><div>
</div><div>
</div><div>6. Include index.html </div><div>
</div><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: left;">According to this strucure, we can include our index.html direcly on our project’s WebContent root on Eclipse. You can either copy the index.html and drag onto WebContent folder on Eclipse or create a new index.html file and just copy paste the content we have written previously.


</div><div class="separator" style="clear: both; text-align: left;">7. Create a war file of our project and export to server </div><div class="separator" style="clear: both; text-align: left;">
</div><div class="separator" style="clear: both;">On Eclipse, right-click on the project name > Export > WAR file</div><div>
</div><div>Use the Bitvise SSH client SFTP window tool to transfer our war file to server Tomcat’s webapps folder.

Note that when the war file are complely transferred to Tomcat’s webapps folder, it will be automatically uncompressed into our project folder.

Access our project URL to see our deployed web application (index.html + simple Servlet).


</div>