Using green resources of the computer

At first, to preserve resources, close any other applications except web development browser, eclipse and tomcat server.

You can decrease the CPU frequency by change the level of power save, reduce temporary the light of the screen at a comfortable level for your eyes. Also, please reduce the number of tabs and windows from your browser.

1/ Description Application Todo

Our main application will be to manage a list of thing to do, as for example the shopping list :

The Model part of the MVC will be simplest to let us work on the MVC with Web Development tools. Only one business rule is provided « no double entry », for example if someone try to add again « chocolat » at the list, there are no error but only one « chocolat » will stay into the list (case-insensitive). This is the unique business rule or our simple model layout.

Please find below a « very very » simple Class Diagram at starting point, you will have to add content and improve it :

To manage easily one unique instance of the application, a Singleton Design Pattern is provided as this draft :

public class Application {
   private static Application instance = null;
   
   public static Application getInstance() {
      if (instance == null) {
           instance = new Application ();
      }
      return instance;
     }

  private Application() {
    // Initialization of the List 
  }

}

So please think about to instanciate a new application without access to the private constructor ?

How to initialize the list of todo items call « lesTodos » with the draft code

Could you please use the Interface List from java.util.List for futur integration and evolution.

NOTE: une interface do not provide all the code only signature of methods as show into the code :

Do not hesitate to open Java code by CTRL+left click on a class of a function, to study the difference between ArrayList and List.

Keep in mind that a future evolution of the project could use a LinkedList or a Stream result as we will see later.

Please study mainly methods contains, get and indexOf into ArrayList class.

2/ Project creation with only business/model part

Create a new project « Dynamic Web Project » ( File > New > Dynamic Web project), then deploy your project into Tomcat 9 installed previously with righ clic > « Add and Remove … » to add this project to Tomcat.

Create a new package into the « Java Ressources » part of the project :

We need a top package call main (name of package must be in lowercase at the opposite for class with the first capital letter) with insides packages model, control and test.

Code classes Application and Todo with additional methods depending your need withe righ clic on the package model and menu New > Class, you can tick to implement « public static void main (String[] args) » to test the class as a simple Java program.

You can generate Getter and Setter with right click mouse on the code and Menu Source > Generate Getters and Setters…

Use the generation of method hashCode() and equals() using only the field « texte » because comparing 2 instances of todo only this field is mandatory (business rule).

You can also generate the method toString() on the class Application but I recommend to you to learn to debug this class.

Create additional constructors with all fields, only texte field and with no fields with the Menu Source > Generate Constructor using Fields.

Please consider test comparing class with the main method :

public static void main (String[] args){
  Todo todo1 = new Todo( "lait", false );
  Todo todo2 = new Todo( "beurre", true);

   if ( todo1.equals( todo2 ) ) {
    System.out.println(" lait equals beurre ");
   }

   todo2.setText( "lait" );
   if ( todo1.equals( todo2 ) ) { 
     System.out.println(" lait equals lait ");
   }
}

To test a class, just right-click on the code and choose Menu > Debug As > Java Application, output is displayed in « Console » tab, or you can add breakpoint to understand features of equals() method.

NOTE: hashCode() return a value to organize instance of the same class by order. In our application the information will not be used but in case of extreme large number of instance, it could be useful to group instance for speed up processing.

Again, use the « public static void main (String[] args) » method to debug call of Application singleton by using this code:

public static void main(String[] args){
  Application.getInstance().addTodo("lait");
  Application.getInstance().addTodo("beurre");
  Application.getInstance().addTodo("lait");

}

Then you can also try to add additional method to Application for example several methods call findTodo() should be very useful.

3/ Unit Test with Junit4

In fact, the calling on « public static void main (String[] args) » method to test our program is not the best way to test the model part. We will use a Test Framework call JUnit to test Application class.

By the past, I let students start by testing Todo class first, but they find testing getters and setters less interesting, so let’s start with ApplicationTest. You will find an example of basic TodoTest application below, you could study particlary the testEqualsObject() method design to check the model business rule :

class TodoTest {
	@Test
	void testTodo() {
	    Todo todo = new Todo("chocolat" , false);
	    assertNotNull( todo );
	}
	@Test
	void testTodoNoParameters() {
	    Todo todo = new Todo();
 	    assertNotNull( todo.getTexte() );
	}
	@Test
	void testGetTexte() {
	     Todo todo = new Todo("chocolat" , false);
	     assertEquals ( todo.getTexte() , "chocolat");
	}
	@Test
	void testSetTexte() {
	    Todo todo = new Todo("chocolat", false);
	     todo.setTexte("ananas");
	     assertEquals ( todo.getTexte() , "ananas");
	}
	@Test
	void testSetActif() {
	     Todo todo = new Todo("chocolat" , false);
	     todo.setActif(true);
	     assertTrue( todo.isActif());
	}
	@Test
	void testIsActif() {
	     Todo todo = new Todo("chocolat" , false);
	     assertFalse( todo.isActif());
	}
	@Test
	void testEqualsObject() {
	     Todo todo1 = new Todo("chocolat" , false);
	     Todo todo2 = new Todo("chocolat" , true);
	     assertTrue( todo1.equals(todo2));
	}
}

On the class Application, right click to open Menu « New > Other > Junit Test Case » then fill the windows by providing the package model to store this new ApplicationTest class.

Please check methods @BeforeAll @BeforeEach, @AfterAll, @AfterEach and on the next windows, check method you want to test, obviously all method your create into Application.

One dialog will ask you to « Add Junit 5 library to the build path », please confirm by pressing OK to download and install Junit library to create test.

NOTE: if you forget one step, just delete the ApplicationTest class and start over.

NOTE: if for any reason, the ApplicationTest class is stored into the wrong package, just move into the package test.

To execute a Unit Test Case, just right-click on the code and chose Menu Debug As > Junit Test and you can check un green bar to display if all tests pass:

If a test fail, you will find a red bar, the console message, the number of failure test and of course which test fail :

You can debug with a breakpoint any test to understand why this test failed as any other Java code. Keep in mind, the writer of the code is not usually the person who writes the test code.

NOTE: a different way of wriing code is to write test code then write the missing code so in our case writing ApplicationTest then writing Application class.

Now we want to test at least :

• Singleton is never null
• 2 references of Application are equals
• list of todos is empty at start
• add a todo to the list and that the list increase by one
• add a todo and find it
• add a todo and it is the last todo of the list
• delete a todo and do not find it into the list

You should discover that the order of executions of each of the test methods are not in the same orders and are not independent. It could be useful to empty the list before each test with the method setUp().

So please code and test everything to check tat the model part is working perfectly. Each time, you will add a new feature, consider adding a new test and check there is no regression.

NOTE: setUpBeforeClass() is trigger before starting all test methods, tearDownAfterClass() is trigger after passing all test methods, setUp() is trigger before each test and tearDown() after each test method. Those methods are useful to configure a test by creating a context with data or in the opposite, no data.

4/ Link between Model Part et one view/JSP

At first, create a JSP page to display 4 todo items :

This is an example of code to create Application with data and avoid an empty list. You can note the building of the list is made into the constructor method :

private Application() {
     lesTodos = new ArrayList<Todo>();
     create4TestTodos();
 }
 private void create4TestTodos(){
     addTodo( "Test1" , false );
     addTodo( "Test2" , false );
     addTodo( "Test1actif" , true );
     addTodo( "Test2actif" , true );
 }

Create a JSP page todos.jsp and import the package model into, you will find an example of code to start :

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="main.model.*" %>
Foreach list of todo itemps :
<%
for(Todo todo : Application.getInstance().getLesTodos() ){
%>
<p>
   <%=todo.getTexte() %>
</p>
<%
}
%>

This is very basic JSP to rescue from Application each todo item and display then into <p> tag for learning purpose, of course checkboxes are missing.

Start the JSP as we did into TP 0 to check everything is OK, but it is not a classical way to call directly a JSP with MVC design pattern

NOTE, you can create an index.jsp with auto redirection to call the futur Control Servlet:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    response.sendRedirect("./Control?action=list");
%>

NOTE: to remove 404 error and debug console information on the downloading favinco.ico, you can add this tag to <head> HTML part :

<link rel="icon" href="data:,">

5/ Servlet as the Control part of design pattern MVC

Calling JSP pages as a spaghetti chain of application make web application complex to improve and debug. We will use the idea of state transition diagram instead direct calling from one JSP to an other.

Suppose un application to display email, the call from the list of emails to a detail of one email should be with MVC design pattern with an intermediary call to Servlet Control :

The URL to the Servlet pass one parameter call action to ask the controller if it is possible to transit to detail-email.jsp page with an additional parameter to identify the email :

Why using a controller, because we can load information, check information, logs the transit and even redirect to a different page according to routing requirement of our web application.

Create Servlet by right-clicking on the package control then Menu New > Servlet, please provide the name of the Servlet Class, check the java package if necessary and check also the URL mappings /Control and click button Finish

IMPORTANT NOTE: the mapping is the URL routing information if Tomcat find into URL /Control it will call the doGet() or doPost() method of this Servlet Class.

It is possible d’add several mapping et event use joker mapping as for example *.pdf to call a Servlet on every .pdf URL.

It is also classical to create a new servlet class as Control2 and change only the mapping to make an evolution on the web application.

We will modify the doGet() method with this piece of code :

protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {

String vueFinale = "todos.jsp";

// TODO: a future doAction() method will be call from here to choose which JSP page to display  
     
request.getRequestDispatcher(vueFinale).forward(request, response);

}

The purpose of vueFinale variable is to store the final JSP name as view to display using the getRequestDispatcher. We create route from information receive from doGet() parameters and the redirection will ne manage into this place.

We can image maybe display an error.jsp page if the program needs to route the user to an error page.

Into the Control class we will code a method call doAction() with request parameters and mainly the parameter action. Using the value of this parameter action, the code will check informations receive from GET/POST forms, manage operations on the model classes and return the value for the next JSP page to display.

private String doAction(HttpServletRequest request) {

  String vueFinale = "erreur.jsp";

   String action = request.getParameter("action");

   // Action1 addTodo
   if ("addTodo".equals(action)) {

       String texte = request.getParameter("todo_texte");
       Application.getInstance().addTodo(texte, false);

       vueFinale = "todos.jsp";
    }

     // Action2 Update list ...


    // ... 
    return vueFinale;
}

So calling this URL ./Control?action=addTodo&todo_texte_chocolat should trigger the piece of code to add a new instance of todo into the model. Then the control servlet class redirect the user to display the view todos.jsp listing all the todo items (inclus the new one).

This code is really partial and you should understand it by implement and debug the core of MVC Web application.

NOTE: if you need to rescue a list of parameters name from this kind of URL http://127.0.0.1:8080/Control?nom=jean&prenom=pierre&civilite=Mr as a list [ nom , prenom , civilite ], try :

List<String> keys = Collections.list(request.getParameterNames());

The next step is to develop a JSP and add features to the servlet to present a todo item list, un HTML horizontal bar (with tag <hr />) and un form to add new todo as :

NOTE: You should know a checkbox input feald is only trigger if the checkbox is check

You can read the following diagram showing sending data from HTML form, viewing information into the URL (the GET method is wonderful for this feature) , then data are send to the Servlet with the submit button and then you should debug the Servlet :

You can open into a separate tab this image to understand links between the HTML form and then Servlet variables.

Add a form to update the checkbox status if some todos are checked or not :

To create n HTML list please use this HTML :

<ul>
<li>chocolat</li>
<li>ananas</li>
</ul>

And to give you some code about tags with HTML form :

<form method="get" action="./Control">
<ul>
<li><input type="checkbox" name="checkbox_chocolat" /> chocolat</li>
<li><input type="checkbox" name="checkbox_ananas" /> ananas</li>
</ul>
<!-- missing some part about submit -->
</form>

You should know to tick the checkbox by default you should add an checked attribut as :

<input type="checkbox" name="checkbox_chocolat" checked />

or not checked by default with nothing :

<input type="checkbox" name="checkbox_chocolat"  />

Of course you should code something like this code :

<%
for(Todo todo : Application.getInstance().getLesTodos() ){
%>
<p>
   <%if ( todo.isActif() { %>
      <input type="checkbox" name="checkbox_" checked />
    <% } else { %>
       <input type="checkbox" name="checkbox_" />
    <% } %>
</p>
<%
}
%>

But maybe there is a way to merge the two part of if/else block to simulate a HTML tag construction with a new checked variable ?

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<%@ page import="metier.*" %> 
Parcours de la liste des Todos de type « foreach » : 
<% for(Todo todo : Application.getInstance().getLesTodos() ){ 
      String checked="";
      if ( todo.isActif() ){
          checked="checked";
%>
   <input type="checkbox" name="checkbox_" <%=checked%> />
<% } %>

6/ New controller action: update todo

Usually, it is better to try to code your own personal way to update todo status. Please, consider only as basic structure and make your own version.

We can image 3 different strategies with the HTML part :

• First is to consider a form for a whole list of todo items and a separate form to add new todo :

<form method="get" action="./Control"> 
<ul> 
   <li>
      <input type="checkbox" name="checkbox_chocolat" /> 
      chocolat 
   </li> 
   <li>
     <input type="checkbox" name="checkbox_ananas" /> 
      ananas
    </li> 
 </ul> 
 <input type="submit" name="action" value="Update list" /> 
</form>

<hr />
<form method="get" action="./Control"> 
   New Todo: <input type="text" name="todo_texte" />
   <input type="submit" name="action" value="Add todo" />
 </form>

• The second solution is also possible to use a form for each item list

<form method="get" action="./Control">
<ul>
  <li>
   input type="checkbox" name="checkbox_chocolat" /> 
   chocolat 
   <input type="submit" name="action" value="Update liste" /> 
  </li>
</ul>
</form>

<form method="get" action="./Control">
<ul>
  <li>
   input type="checkbox" name="checkbox_ananas" /> 
   chocolat 
   <input type="submit" name="action" value="Update liste" /> 
  </li>
</ul>
</form>

<hr />
<form method="get" action="./Control"> 
   New Todo: <input type="text" name="todo_texte" />
   <input type="submit" name="action" value="Add todo" />
 </form>

• A third choice is to create a hyperlink to simulate the form to update status

<ul> 
   <li>
      <input type="checkbox" name="checkbox_chocolat" /> 
      chocolat
      <a href="./Control?action=Update%20liste&checkbox_chocolat=on">update</a>
   </li> 
   <li>
     <input type="checkbox" name="checkbox_ananas" /> 
      ananas
      <a href="./Control?action=Update%20liste&checkbox_ananas=on">update</a>
    </li> 
 </ul> 
 <input type="submit" name="action" value="Update list" /> 

Any kind of solution is valid, some are easier to maintain in time.

Server side with the servlet, the action part code Update list, I recommend you to think about uncheck all the todo items then update the list of items send by the form as this way :

if ( "Update list".equals( action ) ){
  // TODO: you should create this function is needed and the Junit test
   Application.getInstance().uncheckAll(); 
   List<String> keys = Collections.list(request.getParameterNames());   
   for(String key: keys) { 
      if ( key.startsWith("checkbox_")) { 
          String todoTexte = key.replace("checkbox_", "");      
          Application.getInstance().updateTodo(todoTexte, true); 
       } 
    } 
}

By the way why this line of code should be better than the second one :

if ( "Update list".equals( action ) ){

// Or 

if ( action.equals( "Update list" ) ){

You should also improve your code with this version :

if ( "Update list".equals( action ) ){ 
   // TODO: create a method to invalid the todo items and then update according parameters
   Application.getInstance().updateListTodo( Collections.list(request.getParameterNames() ); 
}

But it is more important for me to first extract list of parameter into the Servlet and give to Application only verified data. It is just a way of thinking, not a mandatory way of coding.

Another way to improve is to change the checkbox name as :

<form method="get" action="./Control">
<ul>
  <li>
     <input type="checkbox" name="todo" value="chocolat" />
     chocolat
   </li>
   <li>
      <input type="checkbox" name="todo" value="ananas" />
       ananas
    </li>

  <input type="submit" name="action" value="Update list" />
</form>

The URL created by the form submit action will be

http://127.0.0.1:8080/DevWeb/Control&todo=chocolat&todo=ananas&action=Update list

You should rescue the whole list of checkbox parameters with GetParametValues() as :

String[] valuesCheckboxTodo = request.getParameterValues("todo");

7/ Delete todo item

Please provide the last action to delete and item and delivery the code by email. It is not and evaluation, just a milestone of the project before go on.

8/ Add action JSON

Could you add a new action on the controller as the action=json to create a different JSP page not into HTML but in a format exchange to another program.

By the past, we use XML format as this way :

<?xml version="1.0" encoding="utf-8"?> 
  <todos> 
    <todo id="1" texte="chocolat" actif="false" /> 
    <todo id="2" texte="ananas" actif="true" /> 
    <todo id="3" texte="kiwi" actif="false" /> 
  </todos>

But this format is less and less used despite the JSON format :

{ 
 "todos": 
  [ 
   { 
      "id": "1", 
      "texte": "chocolat", 
      "actif": "false" 
    },
   { 
      "id": "2", 
      "texte": "ananas",
      "actif": "true" 
    }, 
    { 
       "id": "3", 
       "texte": "kiwi",
       "actif": "false" 
     }
   ]
 }

This format is also used with JavaScript code to communicate with the web server with AJAX request.

Please code the JSP page and change the content type from text/html to :

<%@ page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>

You can use an online tool to check JSON format as Online JSON Viewer. Some browser could reject JSON file using single quote instead of double quote or extra coma.

The evolution of the project will create more and more action values to check. It will be wize to split the main controler into several differents servlet controler. All actions based on JSON content return could then be put together into one different controler.

9/ Optional: write a client to use your JSON as an API Restful service

You can develop a Java (or if you like a Python) client program (called a desktop client program or a rich client) to rescue the data via JSON. This program is a simple Java project to develop independently as the Dev Web Tomcat project.

This program is as a rich client provide by OneDrive/DropBox/GoogleDrive/etc. whih call the API to receive only data. We can also use wget/curl command to simulate access to an API with and HTTP GET request.

We can also imagine an IOS/Android application which make HTTP GET request and receive JSON list of items from your DevWeb application.

In Java, we can use one of many libraries to request a JSON and create instances (Google Gson, Jackson, Json-Lib, etc.). I find easier to use json-simple from https://cliftonlabs.github.io/json-simple/, download the JAR from the website and add it to the project (json-simple-4.0.1.jar is copy into a lib folder) :

First step if to create a valid URL for our JSON page

HttpURLConnection urlConnection = null;
try {
     URL url = new URL("http://localhost:8080/DevWeb/json.jsp");
     urlConnection = (HttpURLConnection) url.openConnection();
} catch (MalformedURLException e) {
	e.printStackTrace();
} catch (IOException e) {
	e.printStackTrace();
}

Then a script to read line and regroup them into a stringBuilder variable :

StringBuilder stringBuilder = new StringBuilder();
if (urlConnection != null) {
  try (
     BufferedReader reader = new BufferedReader(new InputStreamReader(urlConnection.getInputStream()))) 
     {
          String line;
          while ((line = reader.readLine()) != null) {
               stringBuilder.append(line);
          }
      }catch (IOException e) {
           e.printStackTrace();
      }
}

At least, we will use json-simple JAR classes to parse JSON node elements and create Todo new instance :

JsonObject  deserializedObject = Jsoner.deserialize(stringBuilder.toString(), new JsonObject());		

JsonArray todos = (JsonArray) deserializedObject.get("todos");

for(int i=0; i < todos.size(); i ++) {
   JsonObject todo = (JsonObject) todos.get(i);
   String texte = (String) todo.get("texte");
    boolean actif = ( "true".equalsIgnoreCase( todo.get("actif").toString() )); 
    Todo newTodo = new Todo( texte , actif );
}
			

This way is far from very verbose way to code, just to have a view of serialization/deserialization of instance, but other libraries hide all the complexity make the code more readable.

10/ Optional: using a JSP Tag

To be clear, this is a new template language named ‘Expression Language’ or EL. This language use a simple expression to call getters and setters as {todo.texte} to call todo.getTexte().

Suppose we want to improve the item todo part of the JSP page managing the checkbox and the text display into the <il> HTML tag.

First create a folder WebContent/WEB-INF/tags/, then create a new file « JSP tag » named todo.tag as :

The content of todo.tag will be a short part of the HTML/JSP :

<%@tag language="java" pageEncoding="ISO-8859-1"%>
<%@tag import="main.model.Todo" %>
<%@attribute name="todo" required="true" type="main.model.Todo"  %>

<li>
	<input type="checkbox" name="todo_${todo.texte}" value="${todo.texte}"/> 
${todo.texte}   
		
</li>

A todo item is required to use this JSP Tag is the type main.model.Todo is import into the JSP Tag.

Return to the todos.jsp listing item todo, add the import of the JSP tag with :

<%@taglib prefix="projetDevWeb" tagdir="/WEB-INF/tags" %>

Using a prefix is a way to avoid tag name conflicts if you import many tags, the inside you loop on all item todo, you should call the tag with the variable storing item todo information :

<projetDevWeb:todo todo="${currentTodo}" > </projetDevWeb:todo>

But the variable currentTodo must be backup explicitely into the page context (or into the session context if you want to), because the execution content of the JSP tag is different than the contexte of the JSP page. Variables create into the JSP page are not visible by default into the JSP tag to avoid conflict. So adding this liste will create a variable stored into the context page :

pageContext.setAttribute("currentTodo", todo , PageContext.PAGE_SCOPE);

Our final code should be close to this example :

<%
for(Todo todo : Application.getInstance().getLesTodos()){	
   pageContext.setAttribute("currentTodo", todo , PageContext.PAGE_SCOPE);
   %>
        <projetDevWeb:todo todo="${currentTodo}" >
	</projetDevWeb:todo>
   <%
}
%>

You have to understand that the EL language use the coding way ${instance.property} as a simple way to call getters and setters. This simple version of using taglib and JSTL is really basic way to divide the rendering of the HTML page into several sub files.

One more advanced way to use EL language is to add JSTL libraries to Tomcat 9 : jakarta.servlet.jsp.jstl-1.2.6.jar et jakarta.servlet.jsp.jstl-api-1.2.7.jar

Then you can add a new tags’ library by default by add this line of code at the beginning of your JSP page :

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

The using the foreach JSTL tag to iterate on the application list of todo items :

<c:forEach 
    items="${Application.getInstance().getLesTodos()}" 
    var="todo" >  	
    	<projetDevWeb:todo todo="${todo}" > </projetDevWeb:todo> 
</c:forEach>   

Using Application singleton allow us to work with the variable into the JSP context page and into the JSP tag.

1/ Add a CSS style sheet

With Eclipse, add a new folder css into the folder webapp as (the screenshot show WebContent folder which was the past name of webapp folder) :

Menu New > Other then filter the very long list file with css then choose CSS file. Then create a style.css file with the content below :

div#central{
  position:absolute;
  left: 50%;
  top: 10%;
  width: 800px;
  height: 800px;
  margin-top: -50px;
  margin-left: -400px;
  color: black;
  background-color:rgb(200,220,200);
  padding: 20px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 4px 4px 4px 4px;
}
ul > li{
   display: inline;
}
div#menu{
  position:relative;
  left:10%;
  width:80%;
  background-color:rgb(200,240,220);
}

To use this css your code should containts 2 tag div with « id » as central and another « id » as menu. Consider include the div menu inside the div central and add the link between your JSP and the style.css into the <head> tag :

<link rel="stylesheet" type="text/css" href="css/style.css">

<div id="central">
 <div id="menu">
      <!-- Menu area -->
 </div>

    <!-- Content area -->
</div>

Then we want to use a CSS rule to put with an uppercase first letter for our list of todo element:

<li> 
   <input type="checkbox" name="checkbox_lait" /> butter 
</li>

The css rule will be :

li { text-transform: capitalize; }

You can test it by select the text near the checkbox, then « inspect » to display the HTML content on the Dev Web tools on the right. Then the small plus bouton could help to create a new rule. We can see the HTML text is not capitalize, but the display will be with a first capital letter :

2/ Area menu

Into the menu area, we will use a list of hyperlink to present a menu, consult the website alsacreation to create step by step a simple css menu. Please stop before using graphic menu with rollover and without javascript).

Our purpose here is to add a simple menu with some CSS features include the modification of a simple list tag element :

<ul><li><a href="#">Menu 1</a></li><li><a href="#">Menu 2</a></li></ul>

After the creation of the menu with the CSS style, place de code into a div menu as the image below shows.

Please change colors and design with CSS, it is definitely ugly to let your change as your witch.

To understand the organization between div and other HTML tag, please use the inspector include into Dev Web tools of your browser.

You can inspect the website www.mines-ales.fr, open dev web tools and follow steps as you see below or you can right-click on un HTML element and Menu > Inspector :

On the right part of Inspector, you can see CSS rules and test adding some new CSS. On a local website, you can use Chrome/Chromium with option to save directly your css modification with –user-data-dir switch on the browser command line (see TP 0).

You can create a basic menu with hyperlink to call your application controller as this way :

<ul>
  <li>
   <a href="./Controlaction=pageAddTodo">Add Todo</a>
  </li>
  <li>
      <a href="./Control?action=xml">Liste xml</a>
  </li>
  <li>
    <a href="./Control?action=json">Liste Json</a>
  </li>
</ul>

This form to create a menu is a very HTML way to avoid inject Javascript as we will do later.

3/ First step into Boostrap CSS framework

As start, we will use a so classical Boostrap template named Jumbotron. It is a classical top menu with a central area for title/small text paragraph/one button, then a line with 3 columns of combined title/paragraph/button and a footnote.

To understand the way Boostrap is degin, think about one line with a left area of 1/3 of the width (in green) and a second area same line but 2/3 of the width (in blue) :

<div class="row">
    <div class="col-md-3" style="background-color:green;padding:50px;">
             Left green area
     </div>

     <div class="col-md-9" style="background-color:blue;padding:50px;color:white">
             Right blue area
     </div>
</div>

The purpose of the next step is to rescue the Jumbotron and place our todo items list into the left column.

At first study with Inspector tool the HTML structure and decte the div which manage the left area. That should be a tag as below :

<div class="col-md-4"> 

We should think adding an ID attribute to this tag in the future to identify easily this important DIV.

To copy HTML just right-click on the HTML page and display HTML, select all, copy and paste. Or Open Tab Network with Dev Web Tools, select CSS and JS elements and choose to save each CSS/JS files :

NOTE: Firefox do not save, so instead open into a separate tab and save each element. You don’t need e10-viewport-bug-workaround CSS or JS, we don’t need to support Internet Explorer 10 by now.

4/ Using logs

Using logs is one skill to manage 2 classical problems :

• I want several levels of display technical information, for example at least INFO and CRITICAL
• I want several sources and destination of technical information, for example: store information into files, send information to the console, send information to an external server.

A rookie in computer science usualy tend to write code with output to the console :

System.out.println("Error " + e);

This way to work with Tomcat will work, but all output will go into a file named catalina.out even if your web server as 10 different applications into one single file. A mess event if you use the second output System.err.println.

Thinking an application in production mode, you should want to store only critical information at the opposite in development mode, you should want verbose log.

Log4J is a Log framework tool managing several destination to logs (console and/or files and/or database and/or dedicated log server). We could start a program with a certain log level and even change it by program.

To install log4j, just download my library version log4j-1.2.17.jar (very simple to learn) and place it into sub folder lib (to create if not exist) into WEB-INF folder (inside webapp folder).

Add the new jar to the build path by right click on the jar Menu Build Path > Add to Build Path :

NOTE: we can add many jar libraries to deploy with our web project so each web application store its specifics jars independently on another dev web project as you see below :

NOTE: you should also use a tomcat specific lib folder to store libraries in common for all dev web projects on the Tomcat web server. The strategic is always to choose to fix a specific library for all the project to have a standard version, or in the opposite to let project autonomous. That a strategic in production decision.

To configure log4j, we need to create a log4j.properties file into Java Resources > src folder (no need package, this is not a java file just a configuration file). Create a new file, righ click on the folder New > Other …> General > Untitled Text File.

Fill the file with information to output logs to the console and to a file store into a folder created by you into the Dev Web project (C:/DEV/workspace/DevWeb/logs/)

log4j.rootLogger=DEBUG,stdout,file

log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.Target=System.out
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n


log4j.appender.file=org.apache.log4j.FileAppender
log4j.appender.file.File=C:/DEV/workspace/DevWeb/logs/out.log
log4j.appender.file.layout=org.apache.log4j.PatternLayout
log4j.appender.file.layout.ConversionPattern=%-7p %d [%t] %c %x - %m%n

NOTE: we will use a folder available to Eclipse after Refresh (F5 key) to make it simple to see new content, but it is more common to place files outside the computer on a separate drive.

NOTE2: if you find any troubles that Tomcat not found any appenders (WARNING: No appenders could be found for logger) into the console. You could copy the log4j.properties into the following folder : src/main/webapp/WEB-INF/classes/.

The first line is to set the log level to DEBUG and there are 2 loggers: stdout and file (named as you want but do not forget to change everywhere). We can later add more loggers to a database, a log server, emails, log rotation, etc.

Each line starting by log4j.appender.stdout sets settings for a logger which display information into the console as a System.out.println() did.

Each line starting by log4j.appender.file sets settings for a log file so the log file name and the pattern form of each line as :

Date: %d{ABSOLUTE}
Log level: %5p
Logger name: %c{1}
Log line number: %L
Message: %m

More pattern settings for log4j

Now to use a logger into a class, we will create a log instance as a property of you class :

private static final org.apache.log4j.Logger log = org.apache.log4j.Logger.getLogger("DevWebProject");

NOTE: I use the absolute name of the class Logger (org.apache.log4j) because Tomcat include others log framework (org.apache.commons.logging) for internal purpose and it could create conflict. Here is an example of strength/weakness of Java with several solutions for the feature of logging system, but the variety of framework create multiples situations not so easy to manage. At this opposite, the competition between framework create synergy to make better product.

Now, to log an information, we can call instance with the level of severity. There are usually 6 levels, from the most critical to the lowest :

1. fatal
2. error
3. warm
4. info
5. debug
6. trace

If the log4j properties file set the log level to info, logs messages at level fatal, error, warm and info will be sent.

Keep in mind to set the level accorded to the importance as explain it in this article: https://dzone.com/articles/logging-best-practices

As an example, if I ant to log a new created todo item, level will be very low debug level because in production I do not want this level of information.

// Action1 addTodo 
if ("addTodo".equals(action)) { 
  logger.debug( "addTodo " + texte );
}

Or this pattern way as exxample by Setu Patani in his article :

// Action1 addTodo 
if ("addTodo".equals(action)) { 
  logger.debug( String.format( "addTodo %s", texte ) );
}

Log4j new version accept pattern as this form :

// Action1 addTodo 
if ("addTodo".equals(action)) { 
  logger.debug( "addTodo {}", texte );
}

Now we can create messages with the log level according to the criticizes:

logger.trace("Very not important message");
logger.debug("May be useful in debug mode");
logger.info("Classical message level");
logger.warm("Just warning, but the code should not stop");
logger.error("Classical error level");
logger.fatal("Very important error");

So code several logs messages into your program and make it work to create many logs. Check console and the log file (Refresh folder with F5 key in Eclipse to update folder content)

The first line of log4j.properties file set the minimum error level :

log4j.rootLogger=DEBUG // display FATAL,ERROR,WARM, INFO et DEBUG

or

log4j.rootLogger=ERROR// display FATAL et ERROR

Into the program, I can change the level as I wish :

log.setLevel( org.apache.log4j.Level.INFO );

Now add a tird logger to display HTML report logs, with a new log :

log4j.appender.html=org.apache.log4j.DailyRollingFileAppender
log4j.appender.html.DatePattern='.'yyyy-MM-dd-HH-mm
log4j.appender.html.layout=org.apache.log4j.HTMLLayout
log4j.appender.HTML.layout.LocationInfo=true
log4j.appender.HTML.layout.Title=Application logs
log4j.appender.html.File=C:/Dev/workspace/logs/application.html

Do not forget to add it on the first line of log4j.properties and start again your web application to create new logs messages.

This logger will create an independent HTML file according to the date format. We can also create a Rolling file with a separate level call requete with a max log file and a max number of rolling log files with :

log4j.rootLogger=DEBUG,stdout, file
log4j.logger.requete=INFO, requete

log4j.appender.requete=org.apache.log4j.RollingFileAppender
log4j.appender.requete.File=c:/Dev/workspace/DevWeb/logs/requete.log log4j.appender.requete.layout=org.apache.log4j.PatternLayout 
log4j.appender.requete.layout.ConversionPattern=%-7p %d [%t] %c %x - %m%n
log4j.appender.requete.MaxFileSize=10KB
log4j.appender.requete.MaxBackupIndex=5

This log could be use to log only SQL request but limit the number of file to preserve a certain amount of logs. This way several files requetes.log.X will be created until 10Kb for one file. After 5 files created, the first one will be deleted to store new logs.

5/ Install small plugin Eclipse Log Viewer

To display logs, you can use a small Eclipse plugin call Log Viewer. Just drag and drop the « Install » button into Eclipse to popup the windows to confirm installation (acceptation of license, acceptation of certificate, etc.)

Then you can display into your Eclipse J2EE perspective this new plugin via Menu Windows > Show View > Other… and search Log Viewer :

At the top right of Log Viewer panel, you can open log file, chose colorization, refresh display, etc.

At first, open a log file newly created, press Open Logfile button :

Then you can apply rules to display element with Show rules preferences:

So then we can set if word INFO, display background color is green, if word is ERROR, background color should be red :

You can display your log to follow the most critical part.

6/ Helper Class

Design pattern Helper is a concept of a « helping class ». As an example, suppose a class Book storing classical information about a book (the term used POJO: Plain-Old Java Object). Instances of book purpose is to store properties (title, page number, author, editor, ISBN, Series name, etc.).

Suppose we want to code several methods to check information as a control of ISBN value, we could imagine create a checkISBN() and checkAuthor() methods into a separate class named BookHelper to avoid including those methods into the Book class. Think the point Book purpose is to only store and provide properties only with getters and setters. So we need to store technical functions into a separate class.

We can imagine create a utility class to store methods which help to check ISBN and Author but fast this class will be full of methods from other class than Book. So let separate methods for class Book into a class BookHelper.

In our project, we can create a class ControlHelper to store method to help Control to log parameters pass to Control class :

private static final org.apache.log4j.Logger log = org.apache.log4j.Logger.getLogger( "BoostrapSample.main.ControlerHelper" );

public static void logAllParameters(HttpServletRequest request){

 Map<String, String[]> parameters = request.getParameterMap();
 for(String parameter : parameters.keySet()) { 
    String[] values = parameters.get(parameter);
    String value = Arrays.stream( values ).collect(Collectors.joining(","));

    log.info( "Parametre " + parameter + " " + value ); 
 }

}

Into this method, we use a « new » feature from Java called stream. Streams are a modern way to speed up classical list data processing. Serialization of data processing with stream could be execute on list structures as classes/interfaces Set, List, ArrayList, Map, Array, Collection, etc.

To convert an « old » String[] values into a stream to speed up data processing and create more visible chain of treatment with inline method :

Arrays.stream( values )

NOTE: using inline method is also used in Javascript as we see later

Calling an inline method or anonymous is a programming technic to create an instance and call a method in one line. Suppose we want to code a new call to action method on a button into a graphical interface :

Button b=new Button("Click Here"); 

b.addActionListener(
   new ActionListener(){ 
        public void actionPerformed(ActionEvent e){ 
            System.out.println("Hello World!"); 
    } 
});

In this case the class ActionListerner only purpose is to execute one unique method actionPerformed. The inline version with Java lamba solution should be more visible :

b.addActionListener( e  -> System.out.println("Hello World!"));

The simplification is obvious and time to time called syntaxes sugar to symbolize as easy you could read this line of code.

Into our application, we will use a stream onto our lesTodos list :

lesTodos.stream()

Now we want to use a filter method to return only todos items with actif true value. The symbol -> use at left what is the parameter name on each stream element, then it will apply the method on each right part :

todo -> todo.isActif()

You can compare with the anonymous version :

Class anonymous{
   public boolean method_call_by-default(Todo todo){
       return todo.isActif();
   }
}

So combine previous part, the stream will be :

lesTodos.stream().filter( todo -> todo.isActif())

This feature, mainly used with Data mining and Big Data, is to combine and chain operation to use JVM parallelization capabilities.

Combine todo to rescue only texte of todo actif will be :

lesTodos.stream().filter( todo -> todo.isActif()).map( todo -> todo.getTexte() )

We can then combien and merge data with a separator symbol en transform the final result into a String with :

String reponse = lesTodos.stream().filter( todo -> todo.isActif()).map( todo -> todo.getTexte() ).collect(Collectors.joining(","));

Online, you will find many samples using streams to work, Oracle website shows a sum of integers as a good example.

7/ Conditional debug breakpoint

A common feature with modern IDE is to create a conditional debug breakpoint. Right click in Eclipse at the left of line number into the source code interface et select into the Menu « Breakpoint Properties…« , then you can tick « Conditional« , « Suspend when true » :

Using conditional breakpoint while debug is a way to speed up development. Time to time I debug from the beginning line by line to understand a process, later it will be more valuable to only debug into a certain case. Try it…

8/ Database part

To use a database we will add a JDBC connector linking our Java code to this database. You can use a Mysql JDBC connector if you want to use an already install Mysql server. I use Mysql regulary but for a training course, to manage security, you should consider using a simple Sqlite database.

Using Sqlite with Java is just adding a new JAR sqlite-jdbc-3.8.11.2.jar (or if broken here) into lib directory and create into dao package a new DaoManager class.

The folowing code is an partial example of a singleton DaoManager class, you should improve it with your previous code write until now.

public class DaoManager {
  private DaoManager() {
    try {
      Class.forName("org.sqlite.JDBC");
      connection = DriverManager.getConnection("jdbc:sqlite:c:/DEV/Workspace/todo.db");
     } catch (Exception e) {
      log.severe( String.format( "Sqlite error %s" , e.getMessage() ) );
      }
     log.info("Opened database successfully");

   createDatabase();
  } 


  private void createDatabase() {
    try {
      Statement stmt = connection.createStatement();
      String sql = "CREATE TABLE IF NOT EXISTS TODO ( ID INTEGER PRIMARY KEY AUTOINCREMENT, TEXTE TEXT NOT NULL, ACTIF BOOLEAN NOT NULL)";

      stmt.executeUpdate(sql);
      stmt.close();
     } catch (Exception e) {
       log.severe( e.getClass().getName() + ": " + e.getMessage() );
     }
    addTodo( new Todo("ananas" , false ) );
    addTodo( new Todo("chocolat" , false ) );
  }

public void addTodo(Todo todo){

  try {
    PreparedStatement preparedStatment = connection.prepareStatement("insert into TODO(TEXTE,ACTIF) values( ? , ? )" );

    preparedStatment.setString(1, todo.getTexte() );
    preparedStatment.setBoolean(2, todo.isActif() );

    preparedStatment.execute();
    preparedStatment.close();

  } catch (Exception e) {
     log.severe( e.getClass().getName() + ": " + e.getMessage() );
   }
}

public List<Todo> getAllTodo(){
   List<Todo> returnListTodo = new ArrayList<Todo>();
   try {
      Statement statement = connection.createStatement();

      if ( statement.execute( "Select TEXTE,ACTIF FROM TODO " ) ){
        ResultSet resultSet = statement.getResultSet();
        while ( resultSet.next() ) {
          String texte = resultSet.getString("TEXTE");
          boolean actif = resultSet.getBoolean("ACTIF");

          returnListTodo.add( new Todo( texte , actif ));
        }
       }
       statement.close();

    } catch (Exception e) {
        log.severe( e.getClass().getName() + ": " + e.getMessage() );
    }
     return returnListTodo 
  }

}

There are 2 strategies to call DaoManager singleton, one from the Control class and one from the Application. In my mind, I think more logical to call DaoManager from Control class with « have the hand  » over Application class and DaoManager to do the job.

After calling DaoManager, you should create the database sqlite file c:/DEV/Workspace/todo.db , to check content and structure, I think https://sqlitebrowser.org/dl/ tool it is perfect to open and manage database as phpMyAdmin does for Mysql.

The file c:/DEV/Workspace/todo.db storing the database is locked if you open it with Sqlitebrowser so close the access before restart your web application.

Install Sqlite with DB Browser Desktop check :

Then start DBBrowser and open c:/DEV/Workspace/todo.db :

You can browse your data as you wish :

You can use this tool to check todo items are stored into the database. We will load the list of todo items each time Control class is called. There are solutions to avoid calling on each HTTP request, but at start we are close as standard 3-tiers architectures.

Now there are an important modification of your application. Add a new property call id (of type int) to your Todo class. This id manage a unique identification number for your todo item.

DaoManager should create a table Todo with an auto increment column ID. The database will generate this unique ID et your code should rescue it with a method call getGeneratedKeys() after an SQL command INSERT INTO… :

ResultSet rs = preparedStatment.getGeneratedKeys();
if (rs.next()) {
   autoGeneratedIdFromDatabase = rs.getInt(1);
   todo.setId( autoGeneratedIdFromDatabase );
} else {
 logger.error( String.format("Error exception %s ", ex.getMessage() ) );
}

Now you can use this new ID value to manage your todo for update/delete everywhere into your application. An important refactoring work to check you can manage this evolution of the project.

9/ Optionnal: logs message into the database

Change settings bellow to link log4j to sqllite database file and do not forget to create the new table.

log4j.rootLogger=DEBUG, DB

# Configuration de l'appendice JDBC
log4j.appender.DB=org.apache.log4j.jdbc.JDBCAppender
log4j.appender.DB.URL=jdbc:sqlite:votre_base_de_donnees.db
log4j.appender.DB.driver=org.sqlite.JDBC
log4j.appender.DB.user=
log4j.appender.DB.password=

# Requête SQL pour insérer les logs
log4j.appender.DB.sql=INSERT INTO logs (timestamp, level, logger, message) VALUES ('%d{yyyy-MM-dd HH:mm:ss}', '%p', '%c', '%m')

# Mise en correspondance des colonnes de la table de logs
log4j.appender.DB.layout=org.apache.log4j.PatternLayout
log4j.appender.DB.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss} %p %c: %m%n

It will be more common to have a different server to store log usualy a NoSql database.

SQL :

CREATE TABLE logs (
    id INT IDENTITY(1,1) PRIMARY KEY,
    timestamp VARCHAR(255),
    level VARCHAR(50),
    logger VARCHAR(255),
    message TEXT
);

At first, you can download slides from Web Development course with detailed explanations of Servlet/JSP development in MVC. Do not hesitate to read it often to remind features.

Development tools and software are free and/or open source. Tomcat 9 and Eclipse J2EE are provide regarding of your OS on this website for speed up download http://www.dev.lgi2p.mines-ales.fr/install/, but you can download online anyway :

• Eclipse IDE for Enterprise Java and Web Developers (not another version of Eclipse IDE) : https://www.eclipse.org/downloads/packages/release/2024-12/r/eclipse-ide-enterprise-java-and-web-developers
• Java JDK 21 from Oracle : https://www.oracle.com/java/technologies/downloads/#java21 unzip the file could be the easy solution to manage several version of Java
• Apache Tomcat 9 Core version https://tomcat.apache.org/download-90.cgi common for any operating system
• Web Browser for Web Development as Chrome/Chromium/Edge or Firefox with embedded DevWeb Tools (CTRL+MAJ+I) mainly tab /Network, Inspect and Source will be used
• Some other library and tools will be downloaded as databases tools and JARs libraries later (Junit, Log4J, etc.), you can find into the folder : http://www.dev.lgi2p.mines-ales.fr/install/Jar/

TP 0 Installation Eclipse and Tomcat to adapt regards your OS and specific configuration

Please at first install an Oracle Java JDK version 21 for compatibility purpose, and check the folder where installation is done. JDK update process could also change the folder path.

If needed, look on your computer to find a software call javac.exe or javac to be sure to find a Java JDK not the Java JRE. The Java JRE is not design to manage Tomcat, and errors will be find late into the process. So best to check and write down the path to a full standard Oracle Java JDK.

Download and unzip Apache Tomcat 9 core version into a subfolder without space or not classical characters as accents or special characters. Usually with Windows OS, I am please to find a folder call c:\Developpement or c:\DEV to easy managed software programs. With Tomcat is common to unzip C:\DEV\apache-tomcat-9.0.75\ (but it is better to avoid C:\DEV\apache-tomcat-9.0.75\apache-tomcat-9.0.75\)

Download and unzip the Eclipse IDE for Enterprise Java and Web Development, later called Eclipse J2EE into a specific folder without space or not classical characters as accents or special characters. Usually with Windows OS, I am please to find a folder call c:\Developpement or c:\DEV to easy managed software programs. I usually unzip everything into C:\DEV\eclipse-jee-2023-12-R-win32-x86_64\ (but it is better to avoid C:\DEV\eclipse-jee-2023-12-R-win32-x86_64\eclipse\)

NOTE: don’t use another Eclipse software provide by another courses, Eclipse Plugins could be in conflict and version of settings could lead to troubles.

Start Eclipse with eclipse.exe or eclipse program to answer firsts settings as bellow :

• The folder Worskspace (as Windows path C:\DEV\Workspace) will store all settings and projects, so it is important to backup this place regularly.
• Tick « Use this as the default and do not ask again » prevent Eclipse to popup this dialog each time Eclipse start. You can switch Workspace in case with Menu File > Switch Workspace.

You can then close the « Welcome » tab windows, not really useful at this moment.

The next step is to remove the default Java JRE from Eclipse J2EE and provide our Oracle Java JDK. Technically, Eclipse J2EE could manage several Java versions but we will keep simple with only one JDK.

• Menu « Windows » > « Preferences » > « Java » > « Installed JREs »
• Press buton « Add » to provide « Standard VM » with « Installed JRE Home directory is the full path of the initial Oracle Java JDK noted at the first step.
• Remove previous JDK to be sure that Oracle Java JDK is the default one.

Eclipse IDE provide several tabs organizations call perspectives. We will use mainly Java EE perspective and Debug Perspective. Please use Menu « Window » > « Open Perspective »> > »Other » and activate « Java EE » perspective (top right button).

Java EE Perspective is the only perspective with « Server » Tab so if you do not find this tab please switch perspective or right click on « Java EE » perspective button to reset this perspective to its initial configuration.

Then click on « No servers are available. Click this link to create a new server »

The first step is to choose the « Tomcat 9 Server » version

Please provide, the full path to find the Apache Tomcat previously download and unzip as below. I like to choose the correct JDK installed with the previous step to be informed by Eclipse if any update change the JDK provide by default:

On tab « Server » right click to open the menu and start in Debug Mode this Apache Tomcat server from Eclipse.

On Windows, the firewall dialog should be open to ask you the authorization to give access to the network to Java and Eclipse, so please answer yes.

Open « Console » tab to consult all output from Tomcat server, the last sentence should be « The server startup took [xxx] milliseconds » to inform you the configuration is correct.

To confirm, please open a web browser and consult http://127.0.0.1:8080/ , you could be surprise by :8080, the default settings for Tomcat in development is to listen the 8080 port instead the default http port 80 or the default https port 443.

The front page will be 404 page because no content will be at present deploy by Tomcat but this page with « Apache Tomcat/9.0.75 » shows everything is fine just there is no content:

So now, we will create a new project to deploy content into Tomcat. With Eclipse, use Menu File > New > Other > Web > Dynamic Web Project then provide a Project Name without space or specific characters as accents. DevWeb will be ok and press finish button. Then you have to add this project to our fresh new Tomcat server.

With the « Server » tab, right clic on the Tomcat Server and select « Add and Remove », with the new dialog windows, press « Add all>> » to add this project then « Finish » button :

Tomcat will automatically deploy the Dev Web project on Tomcat Server. So now download the IMT Mines Ales logo PNG image (https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/IMT_Mines_Al%C3%A8s.svg/640px-IMT_Mines_Al%C3%A8s.svg.png) into the desktop.

You can drag and drop the image from the desktop to the src/main/webapp folder and choose « Copy files » or you can place the image into the disk at C:\DEV\Workspace\DevWeb\src\main\webapp\ but after you have to « Refresh » the project by pressing F5 key :

Now try to correct the URL http://127.0.0.1:8080/ by adding the project name and the image filename to display this image into the browser. The default form should be « http://127.0.0.1:8080/DevWeb/<image_name>.png »

By default, some Web server could display the content of the folder, but the default configuration of Tomcat is to hide the folder content.

Now we can add HTML and CSS content from the CSS Zen Garden website, you can download the HTLM file and the CSS file and place those file into the webapp folder. You should restart Tomcat Server to force deployment of file 217.css and « CSS Zen Garden The Beauty of CSS Design.htm » file and consult the URL http://127.0.0.1:8080/DevWeb/CSS%20Zen%20Garden%20The%20Beauty%20of%20CSS%20Design.htm

You can see with the DevWeb tool of Firefox/Chrome Browser (CTRL+ALT+I key) there are trouble with the 211.css file. The Network tab show the browser is not able to download the 211.css file. You have to correct the « CSS Zen Garden The Beauty of CSS Design.htm » file to match the URL.

NOTE: anytime you find %20 is the encoding URL value for space, please correct the HTML file to help the browser to download and apply the stylesheet file. The way to open « Network » tab with DevWeb Tools into the Web Browser is the correct way to look of trouble with Web Development, key this way of working in your mind.

Next step is to create index.jsp page with menu File > New > JSP File, you have to provide the filename as index.jsp and the parent folder should be src/main/webapp by default. Add the content to display number from 0 to 9 :

You can add a title to your page and click on the left of line number to add (or remove if needed) a breakpoint, then click on the source code to open the menu to Debug As > « Debug on Server » then choose « Tomcat 9 server » and check « Alway use this server when running this project » to avoid this step later, then button Finish.

You should have an Eclipse dialog to ask you to switch to the Debug Perspective :

You should check « Remember my decision » and button Switch to prevent this step later.

Eclipse then open the default browser for your OS (we can change easily with Menu Windows > Preferences) and way to debug the JSP at the line marks by the breakpoint. Press F6 key to step over, or F8 key to Resume to the next break point.

You can find more details about Eclipse Debug with « Eclipse debogage et points d’arrets« .

The next step is to create sub folders « css » and « img » to the webapp folder and place contents and find URLs to locate thoses contents.

You can define a default browser as Chromium, with very helpful settings for development only Menu Windows > Preferences, then General > Web Browser

I use options for this specific Chromium browser dedicated to Web Development only :

--disable-web-security --disable-gpu --user-data-dir=c:\DEV\worskpace --auto-open-devtools-for-tabs --remote-debugging-port=9222 --incognito --single-process  "%URL"

• disable-web-security : allow to open contents from severals web server for Framework development as Node.js and tomcat
• disable-gpu: desactivation of GPU to test a very basic browser
• user-data-dir : provide a folder to edit CSS and Javascript from Chromium
• auto-open-devtools-for-tabs: open DevWeb tools by default
• remote-debugging-port: remote javascript debug mainly use with Typescript
• incognito: default incognito browser
• single-process: limit the CPU usage of this browser enough to do the job