menu

VanThuong.Com

Blog học lập trình Java và SEO miễn phí.

Tạo trang đăng nhập bằng Java Servlet + JSP + Maven

Posted by on
Trong bài viết trước thì chúng ta đã có tìm hiểu một chút về Java Servlet và thử tạo trang Hello World rồi. Nhưng phần hướng dẫn chưa đụng chạm gì đến JSP cả, thì trong bài viết này mình sẽ tìm hiểu thêm một chút về JSP và thử tạo cho mình trang đăng nhập đơn giản bằng cách kết hợp cả 2 món này lại nhé.
Tạo trang đăng nhập bằng Java Servlet +  JSP + Maven

JSP là gì?

  • JSP (JavaServer Pages) còn được biết đến với một cái tên khác là Java Scripting Preprocessor. Nó là một công nghệ Java cho phép developer triển khai các nội dung HTML, XML hay một định dạng khác của trang web một cách năng động.
  • Hãy tưởng tượng như thế này, nếu như bạn phải nhúng toàn bộ code xử lý của Java và HTML trong một phương thức doGet() hoặc doPost() thì nó sẽ rất dài, khó kiểm soát và tồi tệ hơn nữa là code của các Servlet nhìn không có đẹp. Thay vào đó, mọi thứ bạn có thể xử lý từ Servlet và trả về cho trang JSP để hiển thị. Trong trang JSP bạn có thể viết mã Java tương tự như Servlet và trộn lẫn chúng giữa các thẻ HTML để tạo ra một trang web đơn giản hơn.
  • JSP đơn giản và dễ sử dụng hơn Servlet mặc dù sau khi biên dịch và thực thi chúng chỉ là một.

Tạo trang đăng nhập bằng JSP và Servlet

Bằng cách đơn giản nhất, bạn có thể kết hợp JSP và Servlet chung với nhau để tạo ra một quy trình xử lý tối ưu nhất. Trong phần này chúng ta sẽ tạo ra một trang đăng nhập bằng Servlet và JSP. Tuy nhiên, ở mức độ đơn giản thì mình sẽ chưa sử dụng kết nối đến Database và truy vấn dữ liệu làm gì cho phức tạp nhé. Chúng ta sẽ hard-code dữ liệu ngay trên Servlet để các bạn dễ hiểu nhất. Trong ví dụ này mình sẽ sử dụng Maven để tạo dự án nên bạn nào chưa biết có thể xem lại bài viết trước đó của mình.
Bước 1: Tạo dự án bằng Maven với dòng lệnh sau.
>mvn archetype:generate -DgroupId=com.vanthuong -DartifactId=login-tutorial -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false

Bước 2: Mở Eclipse > File > Import > Maven > Existing Maven Projects để thêm dự án vào trình IDE của bạn.
them du an maven vao eclipse

Bước 3: Trong thư mục src/main tạo thư mục java và bạn sẽ được cấu trúc dự án như sau.
cau truc du an web maven

Bước 4: Cập nhật file pom.xml để được nội dung tương tự như bên dưới đây.
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>com.vanthuong</groupId>
 <artifactId>login-tutorial</artifactId>
 <packaging>war</packaging>
 <version>1.0-SNAPSHOT</version>
 <name>login-tutorial Maven Webapp</name>
 <url>http://maven.apache.org</url>
 <dependencies>

  <!-- Servlet 3.0 -->
  <dependency>
   <groupId>javax.servlet</groupId>
   <artifactId>javax.servlet-api</artifactId>
   <version>3.0.1</version>
  </dependency>

  <!-- JSP -->
  <dependency>
   <groupId>javax.servlet.jsp</groupId>
   <artifactId>jsp-api</artifactId>
   <version>2.1</version>
   <scope>compile</scope>
  </dependency>

  <!-- JSTL -->
  <dependency>
   <groupId>javax.servlet</groupId>
   <artifactId>jstl</artifactId>
   <version>1.2</version>
  </dependency>

  <dependency>
   <groupId>junit</groupId>
   <artifactId>junit</artifactId>
   <version>3.8.1</version>
   <scope>test</scope>
  </dependency>
 </dependencies>
 <build>
  <finalName>login-tutorial</finalName>
 </build>
</project>
Sau khi thêm sửa file pom.xml để bổ sung các dependency thì các bạn thực hiện run câu lệnh: mvn install để tải về các gói này nhé.

Bước 5: Trong Java Resources > src/main/java > tạo package mới và đặt tên cho nó là com.vanthuong.tutorial. Sau đó tạo một lớp mới tên là Login.java và copy vào đoạn code bên dưới đây.

package com.vanthuong.tutorial;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/login")
public class Login extends HttpServlet {

 private static final long serialVersionUID = 1L;

 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  RequestDispatcher dispatcher = req.getRequestDispatcher("/login.jsp");
  dispatcher.forward(req, resp);
 }

 @Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  String username = req.getParameter("username");
  String password = req.getParameter("password");
  String message = "";
  if ("admin".equals(username) && "123456".equals(password)) {
   message = "Login success!";
  } else {
   message = "Login failed!";
  }
  req.setAttribute("message", message);
  RequestDispatcher dispatcher = req.getRequestDispatcher("/login.jsp");
  dispatcher.forward(req, resp);
 }

 @Override
 public void destroy() {
 }
}
Đáng chú ý ở đây là @WebServlet("/login"). Annotation này sẽ khai báo rằng đây sẽ là Servlet chịu trách nhiệm nhận, xử lý và trả về kết quả cho đường dẫn /login mỗi khi truy cập. Các bạn có thể xem thêm về annotation này bởi nó còn khá nhiều thuộc tính rất hay ho.

Bước 6: Trong thư mục src/main/webapp tạo file login.jsp và copy vào nội dung bên dưới đây.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login example</title>
</head>
<body>
 <span style="color:red"><c:out value="${message}" /></span>
 <form
  action="<c:out value="${pageContext.request.contextPath}" />/login"
  method="post">
  <table>
   <tr>
    <td>Username:</td>
    <td><input type="text" name="username"></td>
   </tr>
   <tr>
    <td>Password:</td>
    <td><input type="password" name="password"></td>
   <tr>
    <td><input type="submit" value="Login"></td>
   </tr>
  </table>
 </form>
</body>
</html>
Bước 7: Chạy dự án bằng Tomcat server. Truy cập vào đường dẫn http://localhost:8080/login-tutorial/login bạn sẽ thấy màn hình như sau:
Màn hình login

Đăng nhập bằng tài khoản admin/123456 bạn sẽ nhận được thông báo đăng nhập thành công.
Đăng nhập thành công

Ngược lại một thông báo đăng nhập thất bại sẽ được hiển thị khi bạn nhập username và password ko chính xác.
Đăng nhập thất bại

Lời kết

Có thể bạn thấy bài viết của mình khác với những bài hướng dẫn nhập môn của những người khác. Trong bài viết này, mục đích của mình là muốn cùng các bạn kết hợp tạo dự án bằng Maven, thêm vào các gói dependency của file POM, thực hiện một trang Servlet đơn giản không sử dụng web.xml. Hi vọng rằng bài viết này sẽ hữu ích với các bạn. Until next time, happy coding!
Đăng bình luận

menu