Newer
Older
labs / tiddlers / content / labs / lab04 / _Labs_04_First Experiments.md

Let's make sure that everything works.

Static HTML

  1. Add the following tag between the open <main> and closing </main> tag in the index.html file. The <main> tag is where the 'main' content of the page goes --- this is an optional tag that is used to style the main content.

     <h1>Student Management &mdash; Menu</h1>

    This should display a title heading on the page. The mdash part is a special character that will display an em dash.

  2. Add the following below the <h1> tag:

     <a class="nav" href="add-student.html">Add New Student</a>
     <a class="nav" href="view-students.jsp">View All Students</a>

    This will add a couple of navigation links to the page that can be used to access the other pages of the system.

JSP

  1. Add the following to the <main> tag of view-students.jsp:
     <% String name = "Doris"; %>
    
     <h1>Hello <%= name %></h1>
    Put your name in the place of 'Doris'. Since this file is a JSP file, Tomcat will compile and execute any Java code that is contained in the file. The first tag is declaring a name variable using standard Java code. Note the surrounding tags --- Java code must be contained within blocks that are surrounded by <% and %>. This is referred to as a scriptlet. The second line is adding a normal HTML heading, but is inserting the value of the variable using a different variant of the starting block <%=. This is known as an expression. Scriptlets and expressions are the two main mechanisms that you can use to create dynamic pages using JSP.

Servlets

  1. Open the servlets.AddStudentServlet class in the Source Packages. You should see that the class contains a method named doGet. This method will be called by the web server (Tomcat) when a GET request is sent to a particular path --- in this case the path is /add-student as declared in the @WebServlet annotation above the class header.

  2. Add the following code to the doGet method:

       resp.getWriter().println("Hello World");

    This code will print a string to the response body which will then be sent to the web browser by the web server.

Building

We need to build the project to create the WAR file. You can click the hammer icon on the tool bar, or press the F11 key.

Deploying

We need to copy the WAR file into Tomcat's deployment folder. We have added a task to the Gradle build script that will open the project's build folder in the system file manager. Select the root of the project in the project pane and double click <

openBuildFolder">> in the navigator pane. If you don't see the navigator pane then you can display it using the <> menu.

The WAR file is stored in the libs folder.

Run the following command to open the deployment folder in the file manger:

thunar /tmp/$USER/tomcat/webapps &

Copy the WAR file from your project's build folder into Tomcat's webapps folder.

Tomcat will automatically unpack and deploy the WAR file --- you might see the new folder appear in the file manager after a couple of seconds.

Testing

Open http://localhost:8080/lab13 in a web browser. You should now see the rather ugly looking menu page with the two navigation links.

Click the 'View All Students' link. This will take you to the JSP page. You should see a 'Hello' message with your name. Remember that your name was declared inside a Java variable --- Tomcat has had to compile the Java code in the JSP file and execute it in order to add your name to that page.

Open http://localhost:8080/lab13/add-student in the browser. This is the URL for the servlet. You should see the 'Hello World' message that was generated in the AddStudentServlet class.