JSP

GIỚI THIỆU JSP

(JAVA SERVER PAGE)

Phạm Hoàng Hải Nguyễn Hoàng Anh

Nội dung trình bày

Tổng quan

Servlet

JSP

• Chu kỳ sống

• Cú pháp cơ bản

• JSP script elements

Hỏi đáp

2

Tổng quan

3

Lập trình Web

Applet

4

Ứng dụng Java

Tải xuống và chạy trong trình duyệt

Giao diện đồ họa, khả năng tương tác cao

“Viết một lần, chạy mọi nơi”

10

Applet

5

2% website ứng dụng Applet

Chất lượng thông dịch mã bytecode không cao

Khi chạy trên client, đòi hỏi JVM cùng phiên bản

Lỗ thủng bảo mật

Với ứng dụng đỏi hỏi xử lý mạnh, máy client không thể đáp ứng

1

Servlet

Chương trình chạy trên máy chủ Java

Chuyển giao trực tiếp các dịch vụ web đến trình duyệt

Điều khiển trung gian kết nối trình duyệt với các dịch vụ phía server.

6

Servlet

Được viết hoàn toàn bằng Java

Một môi trường mạnh mẽ cho dịch vụ mạng

Khắc phục được các yêu điểm của Applet (không tương thích JVM, chạy trên máy chủ mạnh mẽ…)

7

Khai thác toàn bộ các điểm mạnh của Java

Servlet

8

Servlet

Thuận lợi

• Đọc dữ liệu từ Form

• Đọc các HTTP Request Header

• Gán HTTP Status Code và Response Header

• Sử dụng Cookie và Session

• Chia sẽ dữ liệu giữa các Servlet

• Xử lý cơ sở dữ liệu, …

Bất lợi

• Sử dụng câu lệnh println trả kết quả cho người dùng

9

Servlet

Bạn có nghĩ bạn sẽ tạo được giao diện web đẹp với Servlet?

Bạn có thể đọc được một trang web được tạo ra với Servlet?

Bạn sẽ bảo trì các giao diện web này như thế nào?

Servlet gây khó khăn rất lớn cho lập trình viên khi phải tạo ra giao diện web.

10

Servlet

11

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

public void doGet( HttpServletRequest request, HttpServletResponse response){ ... Out.println("<html>\n" + + "<head>\n"+ + "<meta http-equiv=\"Content-Type\“ \n " + "content=\"text/html; charset=UTF-8\">\n" + "<title>Đọc tham số</title>\n" + "</head>\n" + "<body>\n" + + "<h1>Đọc các tham số</h1>\n" + "<ul> \n" + + "<li><b>param1</b>:"+request.getParameter("param1“)+“\n" + "<li><b>param2</b>:"+request.getParameter("param2“)+“\n" + "<li><b>param3</b>:"+request.getParameter("param3“)+“\n" + "</ul>\n“ + "</body>\n” + "</html>";

Servlet vs Applet

12

Servlet

Servlet rất mạnh về xử lý và điều phối, nhưng Servlet lại rất yếu về tạo giao diện

Khắc phục điểm yếu của Servlet như thế nào?

Công nghệ JSP

13

JSP

Ý tưởng

• Thiết kế các trang web sử dụng HTML chuẩn

• Tiêm mã Java vào trong HTML tăng khả năng xử lý.

• Lần đầu tiên máy chủ nhận được yêu cầu trang JSP được thông dịch sang Servlet và Servlet được thực thi khi yêu cầu của client gửi đến. Và yêu cầu được Servlet trả lời.

Dễ dàng hơn rất nhiều cho lập trình viên

14

JSP

15

JSP

Thuận lợi

• Thuận tiện khi tạo ra trang web HTML

• Dễ đọc và dễ bảo trì trang web HTML

Có nhiều công cụ hỗ trợ thiết kế HTML

• Dream Weaver, Front Page

• Adode GoLive,…

Phân cách thiết kế web và xử lý mã nguồn java

• Đội ngủ thiết kế HTML chuyên nghiệp hơn lập trình viên java

16

JSP

Thuận lợi hơn Servlet

• Thuận tiện trong việc tạo ra trang web HTML

• Sử dụng các công cụ thiết kế như DreamWeaver

• Phân cách xử lý và giao diện

JSP ra đời để thay thế Servlet?

Lập trình viên JSP rất cần kiến thức về lập trình web với Servlet

17

Xây dựng web với java

Servlet mạnh về xử lý nghiệp vụ và điều phối nhưng lại rất yếu về hiển thị

JSP mạnh về xử lý hiển thị nhưng lại yếu về xử lý nghiệp vụ và điều phối

Vậy chọn công nghệ nào? JSP hay Servlet? Tại sao?

18

Xây dựng web với java

Thường thì chúng ta sẽ kết hợp sức mạnh của Servlet và JSP vào mô hình MVC (Model-View-Controller)

• Các Servlet đóng vai trò làm Controller

• Các trang JSP đóng vai trò làm View

19

Mô hình MVC

20

Thiết lập môi trường khi sử dụng JSP

Thiết lập CLASSPATH: Không

Biên dịch: Không

Sử dụng các Packaged để tránh đụng độ tên: Không

Trang JSP phải để vào thư mục đặc biệt: Không

• Để vào Web Pages trong netbeans, giống với HTML, CSS, JavaScript,GIF, JPEG, …

Sử dụng các URL đặc biệt cho trang JSP: Không

• Giống như URL của trang HTML (ngoại trừ phần mở rộng của trang)

21

JSP

22

JSP

23

Chu kỳ sống của trang JSP

24

Trang JSP đượ

c hoàn thành

Request #1

Request #2

Khở

i động lại server

Request #3

Request #4

Trang JSP đượ

c điều chỉnh

Request #5

Request #6

JSP được thông dịch sang Servlet

Yes No No No Yes No

Servlet được biên dịch

Yes No No No Yes No

Khởi tạo và nạp thể hiện của Servlet lên bộ nhớ server

Yes No Yes No Yes No

Phương thức init được gọi

Yes No Yes No Yes No

Phương thức doGet ,(hoặc doPost, …) được gọi

Yes Yes Yes Yes Yes Yes

Cú pháp cơ bản

25

Các thẻ HTML Mô tả Khi chuyển từ server đến client, nội dung HTML không thay đổi Ví dụ <h1> Xin chào </h1>

Ghi chú trong HTML Mô tả Thẻ ghi chú được gửi đến client nhưng không được hiển thị Ví dụ 

Ghi chú trong JSP Mô tả Thẻ ghi chú của lập trình viên không được gửi đến client Ví dụ <%-- Nội dung ghi chú -->

Cú pháp cơ bản

26

JSP Expression Mô tả Biểu thức được tính toán và gửi kết quả về khi client request Ví dụ <%= Giá trị %>

JSP Scriptlet Mô tả Thực thi các câu lệnh khi client request Ví dụ <% Câu lệnh hoặc các câu lệnh%>

JSP Declaration Mô tả Khai báo thuộc tính và định nghĩa phương thức trong trang Ví dụ <%! Khai báo thuộc tính %>

<%! Định nghĩa phương thức %>

Cú pháp cơ bản

27

JSP Directive Mô tả - Chèn trang khác vào :include

- Các thẻ do người dùng định nghĩa : taglib Ví dụ <%@ directive att="val" %>

JSP Action Mô tả Thực thi Action khi client request Ví dụ <jsp:forward page="success.jsp" />

JSP Expression Language Element Mô tả Viết tắt của JSP Expression Ví dụ ${biểu thức}

10 website phổ biến nhất năm 2010 - Alexa.com

1. Google

Java (Web), C++ (Indexing)

2. Facebook

PHP

3. YouTube

Flash, Python, Java

4. Yahoo

PHP, Java

5. Microsoft Live.com

.NET

6. Baidu

Unknown

7. Wikipedia

PHP

8. Blogger

Java

9. MSN

.NET

10. Twitter

Ruby on Rails, Scala, Java

28

JSP Scripting Elements

JSP Expression

JSP Scriptlet

JSP Declaration

29

JSP Scripting Element

Cho phép chèn các đoạn mã nguồn java vào bên trong trang JSP

Khi trang JSP thông dịch các đoạn mã nguồn này sẽ được chèn vào bên trong Servlet.

Có 3 dạng – JSP Expressions : <%= Java Expression %>

– JSP Scriplets : <% Java Code %>

– JSP Declarations : <%! Declarations %>

30

JSP Expressions

31

<%= Java Expression %>

JSP Expression

Định dạng:

JSP : <%= Java Expression %>

XML : <jsp:expression>

Java Expression

</jsp:expression>

Lưu ý:- Không được phép sử dụng dấu ; trong các Expression

- Trong một trang JSP nên sử dụng toàn bộ định dạng JSP hoặc sử dụng toàn bộ định dạng XML

32

JSP Expression

Định dạng:

JSP : <%= Giá trị %>

XML : <jsp:expression>

Giá trị

</jsp:expression>

Lưu ý:- Không được phép sử dụng dấu ; trong các Expression

- Trong một trang JSP nên sử dụng toàn bộ định dạng JSP hoặc sử dụng toàn bộ định dạng XML

33

JSP Expression

Kết quả

• Expression sau tính toán ra kết quả sẽ được chuyển thành một String

• String được chèn trực tiếp vào bên trong Ouput Stream của Servlet.

• Kết quả tương tự như: out.println(Expression);

• Trong Expression có thể sử dụng các biến: • Các biến được định nghĩa tường minh • Các đối tượng được tạo sẵn ngầm định

34

Các đối tượng được tạo sẵn trong trang JSP

application :javax.servlet.ServletContext

config :javax.servlet.ServletConfig

exception :java.lang.Throwable

out :javax.servlet.jsp.JspWriter

page : java.lang.Object

PageContext : javax.servlet.jsp.PageContext

request : javax.servlet.ServletRequest

response : javax.servlet.ServletResponse

session : javax.servlet.http.HttpSession 35

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<%@page contentType="text/html" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> </head> <body> <h2>JSP Expressions</h2> <ul> <li>current time: <%= new java.util.Date()%> <li>Server: <%= application.getServerInfo()%> <li>Session ID: <%= session.getId()%> <li>The <code>testparam</code> form parameter: <%= request.getParameter("testparam")%> </ul> </body> </html>

JSP Expression

36

JSP Expression

37

Sử dụng JSP Expression

Hiển ngày giờ hiện hành với lớp Date

<%= new java.util.Date()%>

Hiển thị số ngẫu nhiên với lớp Math

<%= Math.random() %>

Hiển thị giá trị với lớp PhanSo

<%= new myPackage.PhanSo(1, 2) %>

38


39

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

package mypackage; public class PhanSo { private int tuSo; private int mauSo; public PhanSo(int tu, int mau) { this.tuSo = tu; this.mauSo = mau; } @Override public String toString() { return this.tuSo + "/" + this.mauSo; } }

Sử dụng JSP Expression 1 2 3 4 5 6 7 8 9 10 11 12

<%@page contentType="text/html" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Bài tập phân số</title> </head> <body> <h1>Giá trị phân số:</h1> <%=new mypackage.PhanSo(1,2)%> </body> </html>

40


41

So sánh Servlet với JSP

42

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

public void doGet( HttpServletRequest request, HttpServletResponse response){ ... Out.println("<html>\n" + + "<head>\n"+ + "<meta http-equiv=\"Content-Type\“ \n " + "content=\"text/html; charset=UTF-8\">\n" + "<title>Đọc tham số</title>\n" + "</head>\n" + "<body>\n" + + "<h1>Đọc các tham số</h1>\n" + "<ul> \n" + + "<li><b>param1</b>:"+request.getParameter("param1“)+“\n" + "<li><b>param2</b>:"+request.getParameter("param2“)+“\n" + "<li><b>param3</b>:"+request.getParameter("param3“)+“\n" + "</ul>\n“ + "</body>\n” + "</html>";


43


44

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<%@page contentType="text/html" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Đọc tham số</title> </head> <body> <h1>Đọc các tham số</h1> <ul> <li><b>param1</b>: <%=request.getParameter("param1")%> <li><b>param2</b>: <%=request.getParameter("param2")%> <li><b>param3</b>: <%=request.getParameter("param3")%> </ul> </body> </html>


45

JSP Scriptlets

46

<% Java Code %>

JSP Scriptlet

Định dạng:

JSP : <% Java Code %>

XML : <jsp:scriptlet>

Java Code

</jsp:scriptlet>

Lưu ý: - Trong một trang JSP nên sử dụng toàn bộ định dạng JSP hoặc sử dụng toàn bộ định dạng XML

47

JSP Scriptlet

Kết quả:

• Sau khi trang JSP được thông dịch sang Servlet, mã nguồn java trong scriptlet được chèn tương ứng vào bên trong phương thức _jspService()

Trong Scriptlet có thể sử dụng các biến:

• Các biến được định nghĩa tường minh

• Các đối tượng được tạo sẵn ngầm định

Trong scriptlet được phép khai báo biến, sử dụng các câu lệnh điều kiện, vòng lặp, gọi phương thức,…

48

Sử dụng Scriptlet

49

Sử dụng Scriptlet

50

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<body> <center> <form name="frm" method="get"> Nhập n:<input type="text" name="soLuong"/><br/> <input type="submit" name="bt" value="Phát sinh"/> </form> <% String s = request.getParameter("soLuong"); if (s != null) { int n = Integer.parseInt(s); for (int i = 0; i < n; i++) { out.println("<b>" + i + "</b>"); out.println("<br/>"); } } %> </center> </body>

Sử dụng Scriptlet + Expression + HTML

51

Sử dụng Scriptlet + Expression + HTML

52

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<body><center><form name="frm" method="get"> Nhập n:<input type="text" name="soLuong"/><br/> <input type="submit" name="bt" value="Phát sinh"/> </form> <%String s = request.getParameter("soLuong"); if (s != null) { int n = Integer.parseInt(s); %> <table border="1"><tr><th>Chương <%=n%></th></tr> <%for (int i = 1; i <=10; i++) { %> <tr><td><b> <%= n+" * "+ i +" = "+ i*n%> </b></td></tr> <%}%> </table> <% } %></center></body>

JSP Declaration

53

<%! Khai báo các thuộc tính

Định nghĩa các phương thức %>

JSP Declaration

Định dạng:

JSP : <%! Khai báo các thuộc tính

Định nghĩa các phương thức %>

XML : <jsp:declaration>

Khai báo các thuộc tính

Định nghĩa các phương thức

</jsp:declaration>

Lưu ý: - Trong một trang JSP nên sử dụng toàn bộ định dạng JSP hoặc sử dụng toàn bộ định dạng XML

54

JSP Declaration

Sau khi trang JSP được thông dịch thành Servlet thì các khai báo thuộc tính và định nghĩa phương thức được chèn vào bên trong Servlet.

JSP Declaration được sử dụng với Scriptlet và Expression

55

JSP Declaration

JSP Declaration cho phép

-Định nghĩa phương thức mới

-Cài đặt lại các phương thức jspInit(), jspDestroy

-Không được phép cài đặt lại phương thức _jspService()

JSP Declaration không được phép sử dụng các đối tượng được định nghĩa ngầm định.

56

Sử dụng JSP Declaration

57

Định nghĩa lớp PhanSo

58

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

package mypackage; public class PhanSo { private int tuSo; private int mauSo; public PhanSo(int tu, int mau) { this.tuSo = tu; this.mauSo = mau; } public PhanSo cong(PhanSo ps) { int tu = this.tuSo * ps.mauSo + this.mauSo * ps.tuSo; int mau = this.mauSo * ps.mauSo; PhanSo kq = new PhanSo(tu, mau); return kq; } . . . }

Định nghĩa lớp PhanSo

59

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

package mypackage; public class PhanSo { . . . public static PhanSo parse(String str){ String []s=str.split("/"); int tu=Integer.parseInt(s[0]); int mau=Integer.parseInt(s[1]); PhanSo kq=new PhanSo(tu, mau); return kq; } @Override public String toString() { return this.tuSo + "/" + this.mauSo; } . . . }

Khai báo JSP Declaration

60

1 2 3 4 5 6 7 8 9 10 11 12

<%@page contentType="text/html" pageEncoding="UTF-8"%> <%@page import="mypackage.*"%> <html> <head><title>Cộng hai phân số</title></head> <body> <%! private PhanSo ps1; private PhanSo ps2; //Số lần truy cập được tính từ //lúc gọi jspInit đến jspDestroy private int soLanTruyCap; . . .

Khai báo JSP Declaration

61

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// Cài đặt lại phương thức jspInit public void jspInit() { this.ps1 = new PhanSo(1, 2); this.ps2 = new PhanSo(2, 3); this.soLanTruyCap = 1; } //Cài đặt lại phương thức jspDestroy public void jspDestroy() { this.ps1 = null; this.ps2 = null; this.soLanTruyCap = 0; } //Định nghĩa phương thức mới public void tangSoLanTruyCap() { this.soLanTruyCap++; } %> ...


62

1 2 3 4 5 6 7 8 9

<center> <h1>CHƯƠNG TRÌNH CỘNG HAI PHÂN SỐ</h1> <form name="frm" method="get"> Phân số 1: <input type="text" name="ps1"/><br/> Phân số 2: <input type="text" name="ps2"/><br/> <input type="submit" name="btCong" value="Cộng"/> <br> </form> ...


63

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<%if (request.getParameter("ps1") != null) { this.ps1 = PhanSo.parse(request.getParameter("ps1")); this.ps2 = PhanSo.parse(request.getParameter("ps2")); PhanSo kq = ps1.cong(ps2); %> <b>Kết quả:</b><%=kq.toString()%> <br/> <%}%> <font color="red">Số lần sử dụng: <%=this.soLanTruyCap%> </font> <% this.tangSoLanTruyCap(); %> </center> </body> </html>

JSP Scripting Element

Cho phép chèn các đoạn mã nguồn java vào bên trong trang JSP

Khi trang JSP thông dịch các đoạn mã nguồn này sẽ được chèn vào bên trong Servlet.

Có 3 dạng – JSP Expressions : <%= Java Expression %>

– JSP Scriplets : <% Java Code %>

– JSP Delarations : <%! Delarations %>

64

HỎI VÀ ĐÁP

65

Documents

JSP