CH05-08
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (429.22 KB, 112 trang )
Lập trình mạng – Chương
5
1
CHƯƠNG 5:
LẬP TRÌNH WEB – CGI
5.1 Giới thiệu về lập trình web
5.2 HTMLs và FORMs
5.3 Lập trình web ở Client
5.4 DHTML
5.5 Phương pháp lập trình web với CGI
Lập trình mạng – Chương
5
2
5.1 Giới thiệu về lập trình web
•
Hệ thống WWW tĩnh:
–
Tập hợp các trang HTML
–
Không tương tác được với user
–
Khó khăn trong việc cập nhật thông tin
thường xuyên.
•
Ứng dụng web:
–
Có thể tương tác với user.
–
Có thể tương tác với các ứng dụng khác.
Lập trình mạng – Chương
5
3
5.1 Giới thiệu về lập trình web
•
Các đặc điểm của ứng dụng web:
–
Không phải là một ứng dụng độc lập, là ứng
dụng chạy trên nền web-server.
–
Người lập trình có thể thực hiện các thao tác
trên ứng dụng web như với một ứng dụng độc
lập.
–
Có thể lấy thông tin từ user.
Lập trình mạng – Chương
5
4
5.2 HTMLs và FORMs
•
HTML(HyperText Markup Language):
–
Là ngôn ngữ dùng để biểu diễn trang web
thông qua các tags.
–
Thông qua các tags có thể định dạng cách
hiển thị trang web.
–
Một trang HTML có thể chèn các hình ảnh,
âm thanh trong nó, có thể liên kết đến các
trang HTML khác.
Lập trình mạng – Chương
5
5
5.2 HTMLs và FORMs
•
Các tags HTML cơ bản:
–
Khung của một file HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tiêu đề của trang web</title>
</head>
<body>
<!-- Nội dung trang web được trình bày ở đây-->
</body>
</html>
Lập trình mạng – Chương
5
6
5.2 HTMLs và FORMs
•
Các tags HTML cơ bản:
–
Tiêu đề:
•
<Hn>…</Hn> (n: 1=>6)
–
Phân đoạn:
•
<p> … </p>
–
Kiểu chữ:
•
In đậm: <b>…</b>
•
In nghiêng: <i> … </i>
•
Gạch dưới: <u> … </u>
Lập trình mạng – Chương
5
7
5.2 HTMLs và FORMs
•
Các tags HTML cơ bản:
–
Danh sách:
•
Đánh thứ tự: <ol> [<li>]+ </ol>
•
Không đánh thứ tự: <ul> [<li>]+ </ul>
–
Bảng:
<table border="1" width="100%">
[<tr> [<td> … </td>]+ </tr>]+
</table>
Trộn các ô: <td colspan=“số cột trộn"> </td>
Lập trình mạng – Chương
5
8
5.2 HTMLs và FORMs
•
Các tags HTML cơ bản:
–
Chèn hình ảnh:
•
<img border="#" src="*" width="*" height="*">
–
Tạo điểm đánh dấu (bookmark): <a name="*">
–
Liên kết đến bookmark:
•
<a href="#bookmark-name"> … </a>
–
Liên kết đến một trang web khác:
•
<a href="path"> … </a>
–
Liên kết đến địa chỉ e-mail:
•
<a href="mailto:e-mail address"> … </a>
Lập trình mạng – Chương
5
9
5.2 HTMLs và FORMs
•
Các tags HTML cơ bản:
–
Giữ định dạng đoạn khi soạn thảo:
•
<pre> … </pre>
–
Các ký tự đặc biệt:
•
Khoảng trắng:
•
© : ©
•
® : ®
•
< : <
•
> : >
•
& : &
Lập trình mạng – Chương
5
10
5.2 HTMLs và FORMs
•
Các tags HTML cơ bản:
–
Số mũ:
•
Superscript: <sup> … </sup>
•
Subscript: <sub> … </sup>
–
Định dạng font chữ:
•
<font face=“” size=“” color=“”>…</font>
–
Đường ngăn cách:
•
<hr size=“” width=“”>
–
Xuống dòng trong một đoạn:
•
<br>
Lập trình mạng – Chương
5
11
5.2 HTMLs và FORMs
•
Tạo các frame:
–
Khái niệm frame trong HTML cho phép hiển thị nhiều
trang HTML đồng thời.
–
Minh họa:
Lập trình mạng – Chương
5
12
5.2 HTMLs và FORMs
•
Cú pháp tạo frame:
<frameset [name=“”] {cols|rows}=“[%, ]*{%}”>
[<frame src=“file HTML” [name=“”] [target=“”]>]+
[<noframes>
Your browser doesn't support them.
</noframes>]
</frameset>
Lập trình mạng – Chương
5
13
5.2 HTMLs và FORMs
•
FORMs
–
Là các thành phần của HTML cho phép user
có thể nhập thông tin vào.
–
Tương tự như giao diện của một ứng dụng
bao gồm: textbox, listbox, checkbox, …
–
Dữ liệu được do user nhập được truyền giữa
web-client và web-server thông qua FORMs
–
Dùng các tags để thiết kế.
Lập trình mạng – Chương
5
14
5.2 HTMLs và FORMs
•
FORMs
–
Cấu trúc cơ bản của một form:
<FORM ACTION=“file" METHOD={GET|POST}>
[<INPUT TYPE=“” NAME=“” VALUE="">]+
</FORM>
–
Các loại (type) INPUT:
•
TEXT: là textbox dùng để nhập dữ liệu.
–
Cú pháp:
<INPUT [TYPE=TEXT] NAME="text-id" [SIZE=nn]
[MAXLENGTH=nn] [VALUE="default text"]>
Lập trình mạng – Chương
5
15
5.2 HTMLs và FORMs
•
FORMs(tt)
–
Các loại (type) INPUT:
•
SUBMIT: truyền dữ liệu form đến ứng dụng web
–
Cú pháp: <INPUT TYPE=SUBMIT [NAME="button-id"]
[VALUE="text"]>
•
RESET:đưa nội dung của form trở về giá trị ban đầu
–
Cú pháp: <INPUT TYPE=RESET [VALUE=“text"]>
•
BUTTON: nút nhấn bất kỳ
–
Cú pháp: <INPUT TYPE=BUTTON [NAME="button-id"]
[VALUE="text"]>
Lập trình mạng – Chương
5
16
5.2 HTMLs và FORMs
•
FORMs(tt)
–
Các loại (type) INPUT:
•
RATIO: chọn lựa một trong nhiều
–
Cú pháp: <INPUT TYPE=RADIO NAME="radio-set-id"
VALUE="choice-id" [checked]>
<input type="radio" value="V1" checked name="R1">Option 1
<br><input type="radio" value="V2" name="R1">Option 2
<br><input type="radio" value="V2" name="R1">Option 3
Lập trình mạng – Chương
5
17
5.2 HTMLs và FORMs
•
FORMs(tt)
–
Các loại (type) INPUT:
•
CHECKBOX: lựa chọn một hoặc nhiều
–
Cú pháp: <INPUT TYPE=CHECKBOX NAME="id"
VALUE="choice-id" [CHECKED]>
–
Ví dụ:
<input type="checkbox" name="C1“ value="ON">Check 1
<br> <input type="checkbox" name="C1" value="ON"
checked>Check 2
Lập trình mạng – Chương
5
18
5.2 HTMLs và FORMs
•
FORMs(tt)
–
Các loại (type) INPUT:
•
HIDDEN: dữ liệu không hiển thị
–
Cú pháp: <INPUT TYPE=HIDDEN NAME="id"
VALUE="data">
–
Nhập vùng văn bản: TEXTAREA
•
<TEXTAREA NAME="id" [COLS=nn]
[ROWS=nn]>default text</TEXTAREA>
Lập trình mạng – Chương
5
19
5.2 HTMLs và FORMs
•
FORMs(tt)
–
Lựa chọn listbox: SELECT
•
<SELECT NAME="id" [SIZE=nn] [MULTIPLE]>
[<OPTION [VALUE=“value"] [SELECTED]>text ]+
</SELECT>
<select size="1" name="D1">
<option value="501097">Mạng máy tính</option>
<option value="501016">Lập trình mạng</option>
</select>
Lập trình mạng – Chương
5
20
5.3 Lập trình web ở Client
•
Các trang HTML web có thể được lập
trình để thực hiện các thao tác thực thi
trên web client.
•
Các phương pháp phổ biến để lập trình
hiện nay:
–
Script (Javascript, Vbscript)
–
Java Applet
–
ActiveX Control
Lập trình mạng – Chương
5
21
5.3 Lập trình web ở Client
•
Javascript ở client:
–
Ngôn ngữ kịch bản chạy trên web client. Có
thể làm việc khác nhau trên các loại web
browser khác nhau.
–
Code được chèn xen kẽ với các tags HTML
–
Các đoạn mã Javasript được chạy dựa vào
các sự kiện của các phần tử HTML
–
Cú pháp các câu lệnh giống ngôn ngữ Java
–
Không tương tác được với server
Lập trình mạng – Chương
5
22
5.3 Lập trình web ở Client
•
Cú pháp cho một đoạn code Javascript:
<script language=“JavaScript”>
//các khai báo biến
[var variable;]*
//các lệnh gọi hàm và các hàm
function function-name([agrv]*){
//các câu lệnh khai báo và thực thi
[return [value];]
}
</script>
•
Sử dụng file Javascript (*.js) đã có:
<script language="JavaScript" src="*.js"></script>
Lập trình mạng – Chương
5
23
5.3 Lập trình web ở Client
•
Các đối tượng được xây dựng sẵn trong
JavaScript:
–
window: chứa các thuộc tính liên quan đến
cửa sổ hiện thời
–
document: chứa các thuộc tính trong trang
web
–
location: các thuộc tính về địa chỉ trang web
–
history: các thuộc tính về vị trí mà web
browser đã đến
Lập trình mạng – Chương
5
24
5.3 Lập trình web ở Client
•
Mỗi phần tử trong trang HTML đều có thể
coi là một đối tượng, có thể khai báo sự
kiện để gọi hàm Javascript.
–
Cú pháp:
<tags-name [properties]*
[event-name=“procedure call” ]*>
–
Các sự kiện có thể dùng:
•
onClick: click chuột vào đối tượng.
•
onFocus: focus vào đối tượng trong form.
Lập trình mạng – Chương
5
25
5.3 Lập trình web ở Client
•
Javascript
–
Các sự kiện có thể dùng(tt):
•
onMouseOver: di chuyển chuột vào trên đối tượng.
•
onMouseOut: di chuyển chuột ra khỏi đối tượng.
•
onChange: thay đổi giá trị của các đối tượng chứa
văn bản.
•
onBlur: chuyển focus khỏi đối tượng trong form.
•
onSelect: chọn phần tử trong listbox.
•
onLoad: xảy ra khi một document được load.
