Home » Blog » Create a Simple Web Application Using Servlet, JSP and JDBC

Create a Simple Web Application Using Servlet, JSP and JDBC

원문보기

 

This document is based on:
  • Eclipse 4.5 MARS (ok for Eclipse 4.4 LUNA)

  • Tomcat 8.x

Document History:

  • 12-12-2014: JSP + Servlet + Filter + JSTL
  • 06-08-2015: JSP + Servlet + Filter + JSTL + JDBC
In this document, I will guide step by step how to create a simple web application with the combiantion of  Servlet + JSP Filter JSP EL + JDBC. Make sure that you’ve mastered  Servlet, JSP and  Filter and  JDBC before the start. If not, you can refer to:

Servlet:

Filter:

JSP:

JDBC

2- The principle when programming Servlet + JSP

These are the principles that you should keep in mind to be able to build a Web application using   Servlet + JSP  satisfying criteria: code is simple, easy to understand and easy to maintain.
The principles:
  1. Never allow users to directly access to your JSP page.
  2. JSP is only considered as the place to display interface.
  3. Servlet acts as the controller of the application flows and  program logical processing.
  4. Open the JDBC connection and transaction management in Filter (Optional).

According to the principle 1:

Never allow users to directly access to your JSP page, it means that all user’s requests are:

  • Another source of static data (images, css, js, …)
  • Or a servlet.

Therefore, you must hide your JSP files in a place where the user can not access. For instance, set it in the WEB-INF folder or its subdirectories. In this example, I hide the jsp files in the WEB-INF/views.

When the user  requests  to a Servlet, it will dispose user’s requirements, such insert, update and query the data, eventually forward to the JSP page to display the data. Thus,  each servlet has 0 or multiple corresponding JSP pages (Usually only need 1).

Principle 2:

JSP is only considered as the place to display data, which means that you should not handle the application logic on the JSP, such as update, insert, delete, .., and not navigate on the JSP page.

3- View Demo of Web Application will do

You can preview Demo Web application will do:

4- Prepare database

In this document, I instruct you to work with one of 3 databases: Oracle, MySQL or SQL Server. You need to run scripts to create some tables and necessary data for this example.

ORACLE:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
-- Create table
create table USER_ACCOUNT
(
USER_NAME VARCHAR2(30) not null,
GENDER    VARCHAR2(1) not null,
PASSWORD  VARCHAR2(30) not null,
primary key (USER_NAME)
);
-- Create table
create table PRODUCT
(
CODE  VARCHAR2(20) not null,
NAME  VARCHAR2(128) not null,
PRICE FLOAT not null,
primary key (CODE)
) ;
-- Insert data: ---------------------------------------------------------------
insert into user_account (USER_NAME, GENDER, PASSWORD)
values ('tom', 'M', 'tom001');
insert into user_account (USER_NAME, GENDER, PASSWORD)
values ('jerry', 'M', 'jerry001');
insert into product (CODE, NAME, PRICE)
values ('P001', 'Java Core', 100);
insert into product (CODE, NAME, PRICE)
values ('P002', 'C# Core', 90);
-- Commit
Commit;

MYSQL:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
-- Create table
create table USER_ACCOUNT
(
USER_NAME VARCHAR(30) not null,
GENDER    VARCHAR(1) not null,
PASSWORD  VARCHAR(30) not null,
primary key (USER_NAME)
);
-- Create table
create table PRODUCT
(
CODE  VARCHAR(20) not null,
NAME  VARCHAR(128) not null,
PRICE FLOAT not null,
primary key (CODE)
) ;
-- Insert data: ---------------------------------------------------------------
insert into user_account (USER_NAME, GENDER, PASSWORD)
values ('tom', 'M', 'tom001');
insert into user_account (USER_NAME, GENDER, PASSWORD)
values ('jerry', 'M', 'jerry001');
insert into product (CODE, NAME, PRICE)
values ('P001', 'Java Core', 100);
insert into product (CODE, NAME, PRICE)
values ('P002', 'C# Core', 90);

SQL SERVER:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
-- Create table
create table USER_ACCOUNT
(
USER_NAME VARCHAR(30) not null,
GENDER    VARCHAR(1) not null,
PASSWORD  VARCHAR(30) not null,
primary key (USER_NAME)
);
-- Create table
create table PRODUCT
(
CODE  VARCHAR(20) not null,
NAME  VARCHAR(128) not null,
PRICE FLOAT not null,
primary key (CODE)
) ;
-- Insert data: ---------------------------------------------------------------
insert into user_account (USER_NAME, GENDER, PASSWORD)
values ('tom', 'M', 'tom001');
insert into user_account (USER_NAME, GENDER, PASSWORD)
values ('jerry', 'M', 'jerry001');
insert into product (CODE, NAME, PRICE)
values ('P001', 'Java Core', 100);
insert into product (CODE, NAME, PRICE)
values ('P002', 'C# Core', 90);

5- Create WebApp Project

In Eclipse select:
  • File/New/Other…
Project was created.
Add index.html
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
     <meta charset="UTF-8">
     <title>Simple Web Application</title>
  </head>
 
  <body>
 
     <h2>Simple Login Web Application using JSP/Servlet</h2>
     
     <ul>
        <li><a href="home">Home</a></li>
        <li><a href="login">Login</a></li>
        <li><a href="productList">Product  List</a>
     </ul>
     
  </body>
</html>

6- Configuring the runtime environment

The application needs to run on a WebServer,  such as  Tomcat Server, you can refer to download and declaration instructions of  Server Tomcat in  Eclipse at:
Right-click the SimpleWebApp select Properties.

7- Run application for first time

Right-click on SimpleWebApp, select:
  • Run As/Run on Server
Application has been run:
OK, here everything is fine. We’ll start programming a real Web application.

8- Download and declare JDBC library