Learn Servlet-JSP By Building A Social Network Website — Part IV
Learn how to break a JSP file into fragments and re-use them in others.
Task 6: Fragmented JSP files
As mentioned previously, JSP provides developers a great tool not only to separate back-end code in servlets from front-end code but also flexibly manipulate front-end related tasks.
One of the convenient ways is that we can break a JSP file into smaller parts and re-use in different JSP files. That helps to create a consistent look for the entire web application and avoid code duplication as well.
If you open all the JSP files in our project, you will see that each JSP file has exact <head> tag contents:
What if we want to change a certain file name or add a new CSS file? Then, we will have to copy all the changes and paste them across to the other JSP files. Clearly, that is not the way we do the coding.
Instead, we will put that <head> contents in a separate JSP file, and then re-use that file in any JSP file where we see fit.
So, first, let’s create a new JSP file called head_tag.jsp in the WEB-INF folder.
Then copy the entire <head> tag and paste in the head_tag.jsp. You can copy the <head> tag in any existing JSP file because they all have the same <head> contents.
Notice in the <title> tag, I have used:
<%= request.getParameter(“title”)%>This is to get the title from the JSP file that will include the head_tag.jsp file. That’s because each JSP file should have a recognizable and different title.
Now let’s include the head_tag.jsp in other JSP files.
First, open the login.jsp file and replace the entire <head> tag with the following code:
There are different ways to include a JSP file into another.
In our case, I use <jsp:include> tag because this one provides a way to pass additional data to the including one. As you can see from the code, we need to send the title of “Login” so that when a user views the login page, they will see the title “Login” in the browser title bar.
Let’s do the same for other JSP files with a different title:
When you have done, run the web application again and you should see the same user interfaces before with each page has different titles.
We have not done this task yet.
If you pay attention to the three pages: news-feed.jsp, profile.jsp, and search.jsp, you will observe that those three pages have the same top navigation:
And we need to put the front-end code of that top navigation into a separate JSP file so that we can re-use it in those three pages.
Let’s create another JSP file called top_nav.jsp in WEB-INF folder
Next, open the news-feed.jsp file
Then, locate and copy the entire tag:
<nav class=”container-fluid” id=”main-nav-user-home”>…</nav>and paste to the top_nav.jsp file:
Then, go back to news-feed.jsp file, replace the whole tag <nav class=”container-fluid” id=”main-nav-user-home”>…</nav> with the following code:
<%@include file=”/WEB-INF/top_nav.jsp” %>
Note that this time I have used directive <%@include file… %> because there is no need to pass any data to the top_nav.jsp, we just need to include the entire file top_nav.jsp in the target. This will help to speed up the file including process.
Let’s do the same for the other JSP files:
Run the web application again and you will see the view of those three pages are the same as the original.
If you could not get it working, check out the complete source code:
https://github.com/stackera/learn-servlet-jsp/blob/main/Task6_FragmentJSP.zip
