Cấu trúc trang JSP... Chèn đoạn code Java vào trang JSP Cú pháp: code Java fragment Scriptlet có thể chứa lệnh, biến, khai báo phương thức hoặc Expression của ngôn ngữ Java nào m
Trang 1ThS Trần Thị Thanh Nga
Khoa CNTT, Trường ĐH Nông Lâm TPHCM Email: ngattt@hcmuaf.edu.vn
Trang 2Nội dung
Làm quen với JSP
Tạo và xử lý Form
Trang 3Cấu trúc trang JSP
Trang 4Chèn đoạn code Java vào trang JSP
Cú pháp: <% code Java fragment %>
<jsp:scriptlet> code Java fragment </jsp:scriptlet>
Scriptlet có thể chứa lệnh, biến, khai báo phương thức hoặc Expression của ngôn ngữ Java nào mà hợp lệ
trong ngôn ngữ Scripting
Trang 5Hiển thị biểu thức ra trang JSP
Cú pháp: <%= expression %>
Hoặc <jsp:expression> expression </jsp:expression>
Một phần tử Expression trong JSP chứa một biểu thức ngôn ngữ Scripting mà được tính toán, được biến đổi
thành một String, và được chèn tại nơi Expression đó
xuất hiện trong JSP file
Không dùng dấu “;” để kết thúc expression
Trang 6Ví dụ
Trang 8Tạo Form
Yourwebsite.com/login.jsp
<body>
< form action= "xulydangnhap" method="get" >
Username: < input type = "text" name= "username"> < br >
Password: < input type = "password" name= “pass"> < br >
input type = "submit" value = "dangnhap">
</ form >
</body>
Yourwebsite.com/xulydangnhap?username=ltw&pass=12345
Bước 1: Tạo form
Bước 2: Nhập dữ liệu và submit
Trang 9Tạo Form
Yourwebsite.com/login.jsp
<body>
< form action= "xulydangnhap" method=“post" >
Username: < input type = "text" name= "username"> < br >
Password: < input type = "password" name= “pass"> < br >
input type = "submit" value = "dangnhap">
</ form >
</body>
Yourwebsite.com/xulydangnhap
Bước 1: Tạo form
Bước 2: Nhập dữ liệu và submit
Trang 10Tạo Servlet
Trang 11Cấu trúc Servlet *.java
Trang 12Xử lý request từ Form
Nếu Servlet chỉ chấp nhận request được gửi bằng phương thức get
Nếu Servlet chỉ chấp nhận request được gửi bằng phương thức Post
Trang 13Xử lý request từ Form
Nếu Servlet chấp nhận request được gửi bằng phương
thức Get và Post
Trang 14Bài tập
Chuyển các trang HTLM đã tạo ở tuần 1 sang trang JSP
Tạo một trang đăng ký tài khoản gồm thông tin phải
có là:
hoặc ngày tháng năm sinh (dùng datepicker ở phần phụ lục hoặc tìm các phần mở rộng tương đương), giới tính (radio button), địa chỉ
submit dữ liệu về Server sử dụng form
Upload lên Azure
Trang 15Phụ lục
https://jqueryui.com/datepicker/
Trang 16Cài đặt DatePicker
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang = "en" >
<head>
<meta charset = "utf-8" >
<meta name = "viewport" content = "width=device-width, initial-scale=1" >
<title> jQuery UI Datepicker - Default functionality </title>
<link rel = "stylesheet" href = "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" >
<link rel = "stylesheet" href = "/resources/demos/style.css" >
<script src = "https://code.jquery.com/jquery-1.12.4.js" ></script>
<script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js" ></script>
<script>
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p> Date: <input type = "text" id = "datepicker" ></p>
</body>
</html>