Note system in JSP

In this JSP tutorial we’ll create a note system in JSP. We’ll keep track of notes by one person.

We’ll have to create:

  • 1 form to add a note: addnote.jsp
  • 1 JSP to show all notes: notes.jsp
  • 1 Bean to remember all the data: NoteBean
  • 1 Servlet to process the form: AddNoteServlet
  • 1 Class that keeps the data for one note: note
  • 1 web.xml to configure the servlet: web.xml

We’ll start with web.xml file to configure our servlet. The AddNoteServlet will respond to the addnote.do command.

<servlet>

<servlet-name>AddNoteServlet</servlet-name>

<servlet-class>servlets.AddNoteServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>AddNoteServlet</servlet-name>

<url-pattern>/addnote.do</url-pattern>

</servlet-mapping>

The class to keep track of the note is a very basic class. It has one property “text” and has a getter and a setter for this property. Put this class in /model/note.java.

public class Note {
    private String text;

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text= text;
    }
}

To save all the notes we’ll use the NoteBean. We’ll keep a List of all notes, and have a getter and setter for this List, as well as a addNote method, to add 1 note to the list.

public class NoteBean implements Serializable {
    List<Note> notes = new ArrayList<Note>();

    public void addNote(Note note) {
        notes.add(note);
    }

    public List<Note> getNotes() {
        return notes;
    }

    public void setNotes(List<Note> notes) {
        this.notes= notes;
    }
}

The form we want to create looks like this:

The JSP to create this form is very basic. Just a html form that adds the note.

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
  <head><title>Simple jsp page</title></head>
  <body>
  <form action="addnote.do" method="POST">
      <input type="text" name="text" />
      <input value="ADD" />

  </form>

  </body>
</html>

To process this we’ll have to create the AddNoteServlet. We’ll also be using the session object to store all the data, and use the request.getParamter method to get the data that the user entered in our JSP form.

public class AddNoteServlet extends HttpServlet {
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
        HttpSession session = request.getSession();
        NoteBean noteBean = ((NoteBean)session.getAttribute("noteBean"));
        if(noteBean == null)
            noteBean = new NoteBean();

        Note note = new Note();
        note.setText(request.getParameter("text"));
        noteBean.addNote(note);

        session.setAttribute("noteBean", noteBean);

        response.sendRedirect("notes.jsp");
    }
}

We’ve covered all this in the beginner-section. The tricky thing here is that we want to display a list of all notes, and we only have a bean with an ArrayList object. So we want this ArrayList and loop trough it in our JSP. We can do this by using JAVA code or we can keep our JSP clean and use special tag libraries. We are going to use JSTL for this. Download JSTL here and add jstl.jar and standard.jar to your library.

To be able to use this library we’ll have to include it in our JSP.

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

With this tag we define the prefix for our taglibrary. We’ll give it the name “c” (this could be whatever you want it to be). If we want to use our taglibrary inside our JSP we’ll have to use this prefix.

One of the tags in JSTL is the foreach loop and looks like this:

<c:forEach var="name" items="${listOfItems}">
  do something with "name" here
</c:forEach>

If we include our bean in our JSP and use JSTL it looks like this:

<%@ page contentType="text/html;charset=UTF-8" %>
<jsp:useBean id="noteBean" class="beans.NoteBean" scope="session" />
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
  <head><title>Notes</title></head>
  <body>

  <h1>Notities</h1>

  <a href="addnote.jsp">Add note</a>

  <br />

  <c:forEach var="note" items="${noteBean.notes}">
    ${note.text}<br />
  </c:forEach>

  </body>
</html>