Cấp bậc tác giả:

TRAINING

JAVA - Tổng quan JSP - Lập trình Form với JSP

Được viết bởi webmaster ngày 15/07/2018 lúc 03:54 PM
Bài trước đã nắm bắt được cách kết hợp giữa GUI với ActionListender(bắt sự kiện) cũng như xử lý dữ liệu vào ra hợp lý. Bài tiếp theo này sẽ Khái quát Tổng quan JSP - Lập trình Form với JSP
  • 0
  • 8662

JAVA - Tổng quan JSP - Lập trình Form với JSP

Bài trước đã nắm bắt được cách kết hợp giữa GUI với ActionListender(bắt sự kiện) cũng như xử lý dữ liệu vào ra hợp lý. Bài tiếp theo này sẽ Khái quát Tổng quan JSP - Lập trình Form với JSP.
1. Sửa lỗi Tomcat(nếu có)
Trong quá trình tạo Project, run lỗi TomCat, kiểm tra đang dùng phiên bản Tomcat mấy? Nếu 8.0 thì cần vào Apache Tom cat, tìm đến thư mục bin, chỉnh sửa catalina.bat
- Tìm dòng
:noJuliConfig
set "JAVA_OPTS=%JAVA_OPTS% %LOGGING_CONFIG%"
..
:noJuliManager
set "JAVA_OPTS=%JAVA_OPTS% %LOGGING_MANAGER%"
- Sửa thành
:noJuliConfig
set JAVA_OPTS=%JAVA_OPTS% %LOGGING_CONFIG%
.. 
:noJuliManager
set JAVA_OPTS=%JAVA_OPTS% %LOGGING_MANAGER%
2. Tạo Project
Vào File > New Project > Java Web > Next > Đặt tên Project > Chọn Server(Ở đây chọn Apache Tomcat), phiên bản Java EE Version.
3. Tạo luồng đi của chương trình
jsp-01.png 
Tạo web.xml trong thư mục WEB-INF bằng cách, chuột phải lên thư mục WEB-INF, chọn Standard deployment descriptor(xml).
Nhập thông số vào tệp web.xml
<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
Tạo trang index.jsp trong thư mục WEB-INF
 jsp-02.pngjsp-03.png 
 
4. Mối quan hệ giữa JSP và Servlet
jsp-04.png 
Khi người dùng gửi một request tới một trang JSP. Ví dụ hello.jsp: 
Trong lần đầu tiên Web Server sẽ chuyển trang hello.jsp thành file hello_jsp.java và dịch nó thành file class hello_java.class. Đây là một Servlet, nó sẽ tạo ra HTML trả về phía người dùng. 
Trong các lần request thứ 2 trở đi nó sẽ kiểm tra file hello.jsp có gì thay đổi không, nếu không thay đổi nó gọi tới servlet ( hello_jsp.class) và trả dữ liệu HTML về phía người dùng. Trong trường hợp có thay đổi nó sẽ tạo lại file hello_jsp.java và biên dịch lại ra file hello_jsp.class.
Như vậy khi thay đổi file jsp không cần phải chạy lại Web Server.
5. Các ví dụ JSP
5.1. Một số biến có sẵn trong JSP
Khai báo Import:
<%@ page import="java.util.*, java.text.*"  %>  
<%@ page import="java.util.List, java.text.*" %>
Một số biến có sẵn trong JSP sẵn sàng để sử dụng:
request : javax.servlet.http.HttpServletRequest
response: javax.servlet.http.HttpServletResponse
out: javax.servlet.jsp.JspWriter
<%
// Ví dụ sử dụng biến out.
out.println("<h1>Now is "+ new Date()+"</h1>");
// Ví dụ sử dụng biến request
String serverName= request.getServerName();
// Ví dụ sử dụng biến response
response.sendRedirect("http://ute.udn.vn");
%>
5.2. Mã Java bên trong HTML(JSP)
javaInHtml.jsp
<%@ page import="java.util.Random,java.text.*"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Java In HTML</title>
</head>
<body> 
  <%
      Random random = new Random();
      // Trả về ngẫu nhiên (0, 1 hoặc 2).
      int randomInt = random.nextInt(3);
      if (randomInt == 0) {
  %>
  <h1>Random value =<%=randomInt%></h1>
    <%
      } else if (randomInt == 1) {
  %>
  <h2>Random value =<%=randomInt%></h2>
   <%
      } else {
  %>
   <h3>Random value =<%=randomInt%></h3>
  <%
      }
  %> 
  <a href="<%= request.getRequestURI() %>">Try Again</a>
</body>
</html>
 
5.3. Định nghĩa phương thức trong JSP
Bản chất thì JSP cuối cùng cũng được dịch thành Servlet (Một class). Vì vậy JSP cho phép tạo các method bên trong nó. Các method được khai báo bên trong <%!    %>
Ví dụ 1: methodInJsp.jsp
<%!
  public int sum(int a, int b) {
      return a + b;
  }
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Method in JSP</title>
</head>
<body>
  <h1>
      1 + 2 =    <%=sum(1, 2)%>
  </h1>
</body>
</html>
6. JSP Directive(Các chỉ thị JSP)
JSP Directive (Chỉ thị JSP) cung cấp các hướng dẫn cho web container, nói với nó làm thế nào để xử lý các khía cạnh nhất định khi chế biến JSP.
Directive (Chỉ thị) Mô tả
<%@ page ... %> Dùng để định nghĩa một vài thuộc tính, chẳng hạn như error, import, buffer, session,...
<%@ include ... %> Sử dụng để nhúng một file vào JSP tại thời điểm biên dịch (compile) từ JSP thành Servlet.
<%@ taglib ... %> Sử dụng để khai báo các thẻ JSP mở rộng, hoặc các thẻ (tag) tùy biến
Ví dụ 2: Xây dựng trang Web JSP sau
header.html
<div style="background: #E0E0E0; height: 80px; padding: 5px;">
  <div style="float: left">
      <h1>My Site</h1>
  </div>
  <div style="float: right; padding: 10px;">
      Search <input name="search">
  </div>
</div>
footer.html
<div
  style="background: #E0E0E0; text-align: center; padding: 5px; margin-top: 10px;">
  @Copyright mysite.com
</div>
includeDemo.jsp
<%@ page import="java.util.Random,java.text.*"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jsp Include Directive</title>
</head>
<body>
  <%@ include file="../fragment/header.html"%>
  <h2>Jsp tutorial for Beginners</h2>
  Hi! This is Jsp Tutorial...
  <%@ include file="../fragment/footer.html"%>
</body>
</html>
Giao diện
jsp-05.png 
 7. JSP Standard Actions
Sau đây là danh sách các hành động chuẩn trong JSP.
Cú pháp Mục đích sử dụng
jsp:include Dùng để nhúng một file vào trang JSP tại thời điểm Request.
(Chú ý: khác với Directive inclure là nhúng file vào JSP tại thời điểm biên dịch JSP ra Servlet).
jsp:useBean Tìm hoặc khởi tạo một đối tượng JavaBean.
jsp:setProperty Sét thuộc tính cho JavaBean
jsp:getProperty Chèn thuộc tính của JavaBean vào đầu ra (Output)
jsp:forward Chuyển hướng request tới một trang khác.
jsp:plugin Tạo ra mã trình duyệt cụ thể tạo thẻ OBJECT hoặc EMBED cho các plugin Java.
jsp:element Định nghĩa các thành phần XML động. (XML elements)
jsp:attribute  
jsp:body  
jsp:text
Ví dụ 3:
HelloBean.java
public class HelloBean { 
 private String name; 
 // Bắt buộc phải có cấu tử không tham số.
 public HelloBean() {
 } 
 public String getName() {
     return name;
 }
 public void setName(String name) {
     this.name = name;
 } 
 public String getHello() {
     if (name == null) {
         return "Hello every body";
     }
     return "Hello " + name;
 }
}
useBeanDemo.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Use Bean</title>
</head>
<body>
   <jsp:useBean id="helloBean"
      class="HelloBean"></jsp:useBean>
  
  <h3>Say Hello:</h3>
  <jsp:getProperty name="helloBean" property="hello" />    
  
  <!-- Set property name for helloBean -->
  <jsp:setProperty  name="helloBean" property="name" value="JSP"/>
  <h3>Say Hello after setName</h3>
  <jsp:getProperty name="helloBean" property="hello" />
</body>
</html>
8. Xử lý Form
Bằng JSP
Ví dụ 4: Xây dựng form như sau:
jsp-06.png 
formHtml.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Html Form</title>
</head>
<body>
<h3>User Register</h3>
<div style="border:1px solid #D0D0D0;width:400px;padding:10px;">
 
    <form method = "GET" action="formProcessing.jsp">
        User Name: <input type="text" name="userName" value="">
        <br>
        Password : <input type="password" name="password" value="">
 
        <hr>
        First Name: <input type="text" name="firstName">
        <br>
        Last Name: <input type="text" name="lastName">
        <br>
        Gender: <input type="radio" name="gender" value ="M"> Male
                <input type="radio" name="gender" value="F"> Female
        <hr>
        Address:
        <br>
        <input type="text" name="address" size="50">
        <input type="text" name="address" size="50">
        <input type="text" name="address" size="50">      
        <hr>        
        <input type="submit" value="Submit">
    </form>
</div>
</body>
</html>
formProcessing.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Form Processing</title>
</head>
<body>
  <h3>Parameter values:</h3>
  <%
    String userName = request.getParameter("userName");
    String password = request.getParameter("password");
    String firstName = request.getParameter("firstName");
    String lastName = request.getParameter("lastName");
    String gender = request.getParameter("gender");
    
    
    String[] addresses = request.getParameterValues("address");      
  
  %>
  
  User Name: <%=userName %> <br>
  Password: <%=password %> <br>
  First Name: <%=firstName %> <br>
  Last Name: <%=lastName %> <br>
  
  Gender: <%=gender %> <br>
  
  <% if (addresses!= null)  {
       for(String address: addresses)  {
      %>
 
     Address: <%=address %> <br>
  
  <% } } %>
  
</body>
</html>

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML