Original subtitles

Next, let's implement the list users feature in the users management module

in our Bookstore website

Here's our task list: first we need to code a ListUsersServlet

then we code the UserService class

and we...

code the Users list page in HTML and JSTL

JSTL stands for JSP Standard Tag Libraries

We don't use Java code or JSP code directly in the JSP page

instead we use JSTL - a set of the XML tags

okay

And this sequence diagram shows you how this list users feature work

you see

the request...

the request coming from the client..

...will be handled by the ListUsersServlet

this servlet invokes the listUser() method on the UserService class request

In turn, the UserService class invokes the listAll() method on the UserDAO class

and in turn, the UserDAO class invokes the findWithNamedQuery() method of a superclass - JpaDAO

and the return is a list of user

you see

this is the workflow - this is the sequence of method calls in the list users feature

and this is the design of the users list page

you see

we have...

a table that displays all users in the application

let's review the naming convention

which we discussed earlier in this course

this is the...

name convention for DAO classes

this is the name convention for service classes

so you see

Our service classes...

for the user service is UserServices

and for the servlet class...

it will be ListUsersServlet, okay?

and URL mapping convention...

for listing pages...

listing pages

the URL mapping for the list users feature is...

/list_users

and...

because it is in the back-end, it is after the admin

okay

and this is the name convention for the JSP pages or listing pages

the convention is...

_list.jsp - so in our case, our JSP page for listing user is user_list.jsp

Now let's create the ListUsersServlet class

in the com.bookstore.controller.admin package

right-click here New > Servlet

the class name is ListUsersServlet

click Next

and under the URL mappings, click Edit

the URL pattern for this servlet is /admin/list_users

as per the naming convention I have reminded you

okay, and click Finish

we have the servlet class here...

removes the doPost() method

and delete the unnecessary comments

okay

and as shown in the sequence diagram. the ListUsersServlet invokes the UserService class, so...

Now let's create the UserService class

as per the naming convention it should be UserServices

we create the services class under the...

this package: com.bookstore.service

New > Class

the class name is UserServices

click Finish

okay

and this UserServices class implements a listUser() method

this UserServices class uses the UserDAO class so

they need to have a...

an instance of the UserDAO class here

UserDAO

okay

and first method is listUser() method

and we create a constructor

Generate constructors from superclass

okay

We need to create a new instance of the UserDAO class here

new

you see, the UserDAO class requires an EntityManager

so we need to create an EntityManager object from the EntityManagerFactory

so we also an EntityManagerFactory here

entityManagerFactory

and also an EntityManager

entityManager

okay

so now we need to create the EntityManagerFactory

entityManagerFactory

= Persistence

createEntityManagerFactory

and persistence unit

persistence unit name is the unit name we specified in the persistence.xml file here

you see, this is BookStoreWebsite

okay

Now, create an EntityManager from the EntityManagerFactory

entityManager = entityManagerFactory.createEntityManager()

and in the listUser() method, we...

call the UserDAO's listAll() method that returns a list of Users objects

listUsers

okay

in the ListUsersServlet class...

in doGet() method

we...

send response to the list users JSP page using the RequestDispatcher

so we need to create a JSP page in the WebContent/admin directory

right-click here > New > JSP File

file name is user_list.jsp

okay

and copy the skeleton of the index.jsp

copy

delete the content of the index.jsp

okay

and the title is Users List -

okay

Manage Users

Manage Users

the heading is Users Management

management

as you can see in the Users List Page design here

the heading of the page is Users Management

Now in the ListUsersServlet...

we call RequestDispatcher

request.getRequestDispatcher()

this is the listPage

listPage points to the JSP page

which is in...

which is the user_list.jsp

requestDispatcher

okay

and requestDispatcher.forward(request, response)

to forward the request to the destination JSP page

request

sorry

request, response

okay

this is the request

okay

Now let's start the server to test this servlet

right-click on the server > Start

Now refresh the admin's page

okay, and...

click on the Users link

oh, you see: we get 404 error

it's because the URL is wrong, so we need to edit the header

header

this should be list_users

that matches the URL mapping of the ListUsersServlet

you see

because we are already in the admin

okay

so...

the list_users is relative to the admin

okay

and you can see: this is the URL pattern of the servlet class

/admin/list_users

but in the JSP page we're already in the admin

okay

so in the header we specify a relative path which is list_users only

you see

Now refresh the page

Now, you can see the URL appears in the bottom

click here

you see

the servlet class - ListUsersServlet is called, so you can see the Users Management text here

and now let's update something in the user_list.jsp page

for example, we create a hyperlink: Create New User

Create New User

okay

let's refresh the page

click Users

you can see

the hyperlink appears

Next, let's create the table

as per the design using HTML code

we create a table

in this div section

give it a border

border size is 1 pixel

new table row

and...

heading

index

next heading is ID, email, full name and actions

ID

Full name

Email

Email

Full name

and...

actions

you can see the result in the internal web browser

refresh

Users

and you can see the table here

the heading of the table

need to create a blank line between the hyperlink Create New User and the table

we can wrap the link under heading 3 tag

and refresh

you see

we need to send the list of Users objects from the servlet class to the JSP page

so in the servlet class here...

we create a new instance of UserServices class

UserServices

userServices = new UserServices()

okay

userServices.listUser()

this...

should return the user list

return listUsers

you can see while we are updating the Java code...

Tomcat is automatically reloading our web application

to make the change take effect automatically

Now in the listUsersServlet class...

we assign the returned result to a List here

List

List from java.util

Users

listUsers = userServices.listUser()

okay

and we send the listUsers to the JSP page via the request

request.setAttribute()

name the attribute is listUsers

and it stores the data is the listUsers

okay

and now in the JSP page we can use JSTL tag to extract the data from the listUsers object here

in the JSP page

in JSTL we can use the JSTL's forEach tag

but we need to...

include a taglib directive...

so...

switch to the browser you can search for JSTL core taglib

click on the first result here and you can see

we need to copy this...

this is the directive specifies the JSTL core tags

paste it here

okay

and then we can use the JSTL forEach tag to iterate over a collection

you see

here we can use the

for each User object in the collection we create a new table row

and...

the var attribute...

var attribute...

...is the variable name which is used in the for loop

user

and...

items

point to the variable name - the listUsers in the request

you can see

this name listUsers must match the name we specify the attribute

okay

and status - varStatus...

specify the name of the status variable state test

status

okay

create a new table cell using a tag

the first column is the index column which is...

which displays the numbers of rows in alphanumeric order

so we can use this...

status.index

okay

Now let's refresh the page to see how it works

you can see

the index appears here: 0 1 2 3

which corresponds to 4 rows in the database table

And you can see here: in the users table we have 4 rows: 1 2 3 4

and...

we can +1 to make it starts form 1 instead of 0

and the next column is the ID of the user

user.id

user is the variable name here - that represents a Users object in the listUsers collection

and you can use the object-oriented syntax here: user. and followed by a field name

so in our Users class...

userId - our field name is userId

okay

userId

Now, refresh the page

refresh in Chrome browser

you see ID: 4-2-3-1 the

the next column is email

email

user.email

okay

save the file and refresh

you see

the email appears here: david, sophia, you and nam

david, sophia, you and nam

you can see the order is different because in the query we order the result by the full name of the user

you can see the Users class here

select u from Users u order by u.fullName

and now let's display the full name

${user.fullName}

let's refresh the page

you see

full name: David Beckham, Miss Sophia, Mr President and Nam Ha Minh

this is sorted by the full name field in ascending oder: D M M N

you see

and as per design, in the Actions column, we...

for each user we have the Edit and Delete link

okay

Edit

a space, and..

Delete

Now let's refresh the page

you see

that looks similar to the design

you see

of course later, we will improve the look and feel of our page

For now, you...

you focus on make it works first and make it looks better later

okay

let's specify the cellpadding attribute...

for the table equals 5 to make more spaces in the cells of the table

refresh

and you see, it looks better, right?

and we can test by inserting a new user to the table

execute the test case testCreateUsers

and new user is...

for example, email...

john

John Smith

okay

password is johnny

and run this test case

Run As > JUnit Test

successful

okay

Now refresh the list users page

you see

john... JohnSmith... appears here

but the result is sorted by full name of the users

you see

and now, let's try to update something

for example we update the...

email

update the...

update users set email =...

email of John, email of you is...

you2018@gmail.com

where...

user_id = 3

updated

Now let's refresh the page

and we should see that the email you@gmail.com should be updated

you see it is updated to you2018...

very good

that's it!

so far we have implemented the list users feature

in the users management module in our Bookstore website

we have written code that follows this sequence

ListUsersServlet calls listUser on the UserServices

and the UserServices call listAll() on the UserDAO

and so on...

you see here

let's review

ListUsersServlet

from the...

No, I review from the...

header - the header - the user clicks on the Users link

you see

and this calls the servlet

the servlet's doGet() method

calls the listUser() method from the UsersServices

and the UserServices calls the listAll() method on the UserDAO class

and the listAll() method calls findWithNamedQuery() of the JpaDAO class

you see

that's how it works

and the result is we have a list users page

completed

And in the next video, we will implement code for the create new user feature