Bài 1: Tạo dự án JSP Servlet đầu tiên

Hướng dẫn tạo dự án JSP Servlet đầu tiên với Eclipse

Bước 1: Tạo dự án mới

  1. Mở Eclipse.
  2. Trên menu chọn File → New → Project...
  3. Trong cửa sổ New Project, chọn Dynamic Web Project → Next.

Bước 2: Đặt tên dự án

  1. Ở mục Project name, nhập:

    jsp_hello

  2. Giữ nguyên các thiết lập mặc định → Finish.

Bước 3: Cấu trúc thư mục quan trọng

Bước 4: Tạo file JSP đầu tiên

  1. Trong src/main/webapp, click phải → New → JSP File.
  2. Nếu không thấy JSP File → chọn Other..., tìm “jsp” → chọn JSP File.
  3. Đặt tên index.jsp → Finish.

Bước 5: Nội dung index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Trang JSP đầu tiên</title>
</head>
<body>
    <h1>Xin chào JSP!</h1>
    <p>Đây là trang JSP đầu tiên của bạn.</p>
</body>
</html>

Bước 6: Chạy dự án với Apache Tomcat

1. Giới thiệu về Apache Tomcat

2. Cài và thêm Tomcat trực tiếp từ Eclipse

  1. Tải Apache Tomcat (Tải bản Tomcat 9.xxx)

  2. Thêm Tomcat vào Eclipse

    • Trong Eclipse, vào Window → Preferences.
    • Mở Server → Runtime Environments → Add....
    • Chọn Apache → Apache Tomcat v9.0 (hoặc bản bạn tải) → Next.
    • Tại Tomcat installation directory, trỏ tới thư mục bạn vừa giải nén.
    • Nhấn Finish → OK.

  3. Chạy dự án

    • Click phải vào dự án → Run As → Run on Server.

    • Chọn Tomcat v9.0 Server → Finish.

    • Trình duyệt sẽ mở:

      http://localhost:8080/jsp_hello/index.jsp

    • Nếu thấy chữ "Xin chào JSP!" → Thành công.

Bước 7: Tạo Servlet và liên kết với index.jsp

1. Servlet là gì?

2. Tạo Servlet trong Eclipse

  1. Mở thư mục src/main/java → click phải → New → Servlet.

  2. Đặt tên:

    HelloServlet

  3. Nhấn Next → Tick chọn doGet (để xử lý GET request) → Finish.

3. Nội dung ví dụ HelloServlet.java

package com.example; // Tùy theo package bạn đặt

import java.io.IOException;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

public class HelloServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
        // Gửi dữ liệu sang JSP
        request.setAttribute("message", "Xin chào từ Servlet!");
        
        // Chuyển tiếp sang trang hello.jsp
        request.getRequestDispatcher("/hello.jsp").forward(request, response);
    }
}

4. Tạo trang hello.jsp để hiển thị dữ liệu

  1. Trong src/main/webapp → click phải → New → JSP File → đặt tên hello.jsp.
  2. Nội dung:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Trang Hello JSP</title>
</head>
<body>
    <h1><%= request.getAttribute("message") %></h1>
    <a href="index.jsp">Quay lại trang chủ</a>
</body>
</html>

5. Chỉnh index.jsp để gọi Servlet

Sửa index.jsp thành:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Trang JSP đầu tiên</title>
</head>
<body>
    <h1>Xin chào JSP!</h1>
    <p>Đây là trang JSP đầu tiên của bạn.</p>
    <a href="HelloServlet">Đi tới Servlet</a>
</body>
</html>

6. Cấu hình URL mapping cho Servlet

import jakarta.servlet.annotation.WebServlet;

@WebServlet("/HelloServlet")
public class HelloServlet extends HttpServlet {
    ...
}

7. Chạy thử

  1. Run on Server lại dự án.

  2. Truy cập:

    http://localhost:8080/jsp_hello/index.jsp

  3. Click "Đi tới Servlet" → sẽ thấy nội dung "Xin chào từ Servlet!" hiển thị từ hello.jsp.

Ok 👍 Mình sẽ vẽ sơ đồ luồng JSP ↔ Servlet để sinh viên nhìn vào là hiểu ngay quy trình.

Sơ đồ luồng hoạt động JSP ↔ Servlet

Sơ đồ luồng hoạt động JSP ↔ Servlet

🔍 Diễn giải quy trình:

  1. Người dùng mở index.jsp → đây là file giao diện đầu tiên.
  2. Khi click vào link HelloServlet, trình duyệt gửi yêu cầu GET đến Servlet.
  3. Servlet xử lý logic, gắn dữ liệu vào request → chuyển tiếp (forward) sang một JSP khác.
  4. JSP nhận dữ liệu từ request và hiển thị HTML.
  5. HTML trả về trình duyệt để người dùng thấy kết quả.