Learn Servlet-JSP By Building A Social Network Website — Part I
This project called CBOOKSOCIAL will help you learn all the fundamentals to build a website using Servlet and JSP.
Skills: MVC, Servlet, JSP, JDBC, AJAX, JSON, jQuery, Expression Language (EL), Tag Library, Filter, Listener, Upload Image, Using base64 image, Dependency Management with Maven
- Language: Java — JDK 8
- Database: MySQL 8
- IDE: Netbeans 8
- Web Server: Apache Tomcat 8
- Application type: Web Application
- Development Operating System: Windows 10
Description:
In this project, you are going to build a web application that simulates a social networking website.
Throughout the process of building the application, you will learn completely fundamental and solid skills in web development not just in Java technologies but in general as well.
Although there are a lot of Java-related web frameworks, almost all of them are based on Java servlet technology. Therefore, if you intend to work on other Java web frameworks such as Strut and Spring MVC, the skills in this project are a must. Furthermore, pure Servlet and JSP have been employing in large projects in many corporations for decades and there is no signal of stopping growing.
With those skills you are going to learn in this project, you can definitely build any kinds of web applications without relying on any other frameworks.
Here are the main features that you are going to build:
- Register new account
- Login
- Add a friend
- Display friend list
- Add a post
- Load owner’s and friends’ posts
- Add comments to posts
- Update profile with avatar
- Search friends with form submit as well as AJAX requests
Prerequisite
In order to have the best results, learners should already have:
- Fundamental Java skills
- JDBC Skills
- Basic HTML — JavaScript — jQuery
- Create and run a basic Java web application with Tomcat in Netbeans or other IDEs
Task 1: Setup project
For the sake of convenience, I’m using Netbeans 8 IDE with Maven. But of course, You can use any IDE at your reference.
To follow along, I highly recommend you should download the project template. Because I have already created the necessary HTML templates and added them to the project.
https://github.com/stackera/learn-servlet-jsp/blob/main/CBookSocial_Template.zip
If you are using Netbeans 8 and above, you can just open the downloaded project in your Netbeans and everything should be ready.
Make sure you have Apache Tomcat 8 added to your Netbeans.
Here are steps to add Tomcat to Netbeans if you don’t know how to:
Step 1:
Navigate to https://tomcat.apache.org/download-80.cgi and download a zip binary distribution of Tomcat 8
Once downloaded, unzip your file.
Step 2:
In your Netbeans, go to the Services tab. If you don’t see the Services tab, select the Window menu item, then select Services.
Right-click on the Servers tab, select Add Server…:
Step 3:
In the popped up window, select Apache Tomcat or Tomcat item:
You might want to name your Tomcat version in the Name field, then click Next
Step 4:
In the Server Location field, browse and select your unzipped tomcat folder
Then, input a manager account information (any username and password you prefer) because Tomcat needs a manager role in order to start the server:
Then, click Finish and you have done.
Now let’s open the downloaded project in Netbeans, and you should have something like this:
To make sure that your project will be running in Tomcat, right-click on your project name and select Properties:
Then, in the left pane, select the Run option:
And in the right pane, at the Server item, you will see Apache Tomcat selected here if you had added previously.
Here folders/packages that we mostly interact with:
Web Pages:
This is where we keep front end related files such as HTML, CSS, JS, and JSP. And as you can see, I have put all the necessary files there.
There is another crucial folder in the Java web application: WEB-INF
This one will keep:
web.xml: this is called Deployment Descriptor. This file will inform Tomcat on how to process and respond to client requests.
Although we are using Servlet 3.0, most of the URL mapping will be done through annotation, we still need this file for important configuration.
Open this file and you will see an XML fragment:
This configuration informs the Tomcat to return the login.jsp by default if users do not specify an explicit resource/page in our web application.
For instance, if you type in the browser address bar:
http://localhost:8080/cbooksocial/
Then, the login.jsp page will be returned to the user's browser
- other files that we don’t want users to directly access from the browser. You will see this in other tasks
The next package is the Source Packages: this is where all java class files such as a servlet, java classes, and interfaces are stored.
If you notice in the Project Files folder, you will see a file called pom.xml
This is the Maven file that we use for dependency management.
What is dependency and why do we need Maven?
Dependencies mostly refer to external jar files that we need in our project such as a driver to connect to the database server, logging framework, and tag library.
In the past, in order to use external libraries, we have to spend a lot of time to download those jar files and add to our project classpath.
However, things are not that simple. Because in those jar files, there might be other jar files required that require other jar files and so on. And downloading all the required jar files can turn into a nightmare.
That is when Maven comes to the rescue.
With Maven, we don’t need to directly download the jar file. Maven stores all common and popular jars in one place called a repository. All we need to do is to provide an XML tag to specify the external jar file we want to apply in our project. Maven then will download the jar file as well as other required ones and everything will be ready for our project.
There are other dependency management tools as well such as Gradle, SBT, and Ivy. Each one has its own advantages.
Of course, Maven can do much more than just dependency management tasks.
You can find out more about Maven at https://maven.apache.org/what-is-maven.html
Now let’s run the project to ensure everything is OK.
In Netbeans, right-click on your project and select the Run option:
If this is the first time you run your project and Tomcat has not been started, you will be prompted to input user name and password for Tomcat. Supply the user name and password you had created previously, and click OK.
And if everything works correctly, you should see the default login.jsp page as follows:
And you have done the first task.
