Tài liệu Lập trình mạng P5 ppt
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 (380.6 KB, 41 trang )
Chương 5: Lậptrìnhvớihệ thống web
- Lập trình web phía client
- Lập trình web phía server
Chương 5
1. Giớithiệuhệ thống web
Mô hình hoạt động của hệ thống web:
web browser/ web server
Chương 5
1. Giớithiệuhệ thống web
Web server: chương trình quảnlýmộtcâythứ bậc các trang Web và phục
vụ yêu cầutruyxuất chúng từ các client từ xa.
Web Browser: chương trình giao tiếpvớingười dùng, nhậnyêucầutừ
user rồitruyxuất trang Web ở server tương ứng để phân giảivàhiểnthị nội
dung lên màn hình.
Trang Web: đơnvị gởinhậngiữa Web server và Web client, nó là 1 file văn
bản đượcviếtbằng ngôn ngữ HTML
Web browser và web server sẽ tạo1 cầunốiTCP để trao đổi thông tin,
server lắ
ng nghe ở port 80 (port mặc định) và dùng giao thứcHTTP
(HyperText Transfer Protocol).
Chương 5
1. Giớithiệuhệ thống web
Cấu trúc một giao dịch HTTP 1.0
Bước 1: HTTP client mở kếtnối đến HTTP server
Bước 2: HTTP client gửi request message đến HTTP server
Bước 3: HTTP server trả response mesage về cho HTTP client, chứa
resource mà HTTP client yêu cầu
Bước 4: HTTP server đóng kếtnối
Ví dụ Client: GET /path/file.html HTTP/1.0
From:
User-Agent: HTTPTool/1.0
[blank line here]
Server: HTTP/1.0 200 OK
Date: Fri, 31 Dec 1999 23:59:59 GMT
Content-Type: text/html
Content-Length: 1354
[blank line here]
<html>
…
</html>
Chương 5
1. Giớithiệuhệ thống web
Các đặc điểmcủa ứng dụng web
–Khôngphảilàmột ứng dụng độclập, là ứng dụng chạytrênnềnweb-
server.
–Ngườilậptrìnhcóthể thựchiện các thao tác trên ứng dụng web như với
một ứng dụng độclập.
–Cóthể lấy thông tin từ user.
Chương 5
1. Giớithiệuhệ thống web
HTML – HyperText Markup Language
9Là một ngôn ngữđánh dấusiêuvănbản.
9Sử dụng các thẻ (tag) để định dạng: vănbản, đoạnvăn, hình ảnh, file âm
thanh, Java applet, đốitượng như file Word, Excel, JavaBean…
9Chophépchèncácđoạn mã script như JavaScript thựcthitại trình duyệt
(browser).
9Là định dạng chuẩn cho trang web.
–Mở rộng: XML, WSDL/SOAP…
Chương 5
1. Giớithiệuhệ thống web
CÁC CÔNG CỤ TẠO TRANG WEB
Microsoft Visual InterDev 6
– HTML, ASP…
Microsoft Visual Studio.NET 2003
– HTML, ASP.NET, ASP.NET Webservice, C#, C++…
Microsoft Frontpage
–HTML…
Jbuilder
– HTML, JSP, Java Servlet, Java EJB…
Macromedia Dreamweawer MX 2004
– HTML, ASP, JSP, ASP.NET…
EditPlus
Notepad/Wordpad/Unix VIM
Chương 5
2. Ngôn ngữ HTML
FORMs
–Cấutrúccơ bảncủamộtform
<FORM ACTION=“file" METHOD={GET|POST}>
[<INPUT TYPE=“” NAME=“” VALUE="">]+
</FORM>
–Cácloại (type) INPUT
TEXT: là textbox dùng để nhậpdữ liệu.
– Cú pháp:
<INPUT [TYPE=TEXT] NAME="text-id" [SIZE=nn]
[MAXLENGTH=nn] [VALUE="default text"]>
Chương 5
2. Ngôn ngữ HTML
FORMs
Các loại (type) INPUT
SUBMIT: truyềndữ liệu form đến ứng dụng web
– Cú pháp: <INPUT TYPE=SUBMIT [NAME="button-id"]
[VALUE="text"]>
RESET:đưanội dung của form trở về giá trị ban đầu
– Cú pháp: <INPUT TYPE=RESET [VALUE=“text"]>
BUTTON: nút nhấnbấtkỳ
– Cú pháp: <INPUT TYPE=BUTTON [NAME="button-id"]
[VALUE="text"]>
Chương 5
2. Ngôn ngữ HTML
FORMs
Các loại (type) INPUT
RATIO: chọnlựamộ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="V3" name="R1">Option 3
CHECKBOX: lựachọnmộthoặ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
Chương 5
2. Ngôn ngữ HTML
FORMs
Các loại (type) INPUT
HIDDEN: dữ liệu không hiểnthị
– Cú pháp: <INPUT TYPE=HIDDEN NAME="id"
VALUE="data">
–Nhập vùng vănbản: TEXTAREA
<TEXTAREA NAME="id" [COLS=nn] [ROWS=nn]>default
text</TEXTAREA>
–Lựachọ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ìnhmạng</option>
</select>
Chương 5
2. Ngôn ngữ HTML
FORMs
Các loại (type) INPUT
HIDDEN: dữ liệu không hiểnthị
– Cú pháp: <INPUT TYPE=HIDDEN NAME="id"
VALUE="data">
–Nhập vùng vănbản: TEXTAREA
<TEXTAREA NAME="id" [COLS=nn] [ROWS=nn]>default
text</TEXTAREA>
–Lựachọ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ìnhmạng</option>
</select>
Chương 5
3. Lập trình web phía client
Các trang HTML có thể đượclậptrìnhđể thựchiện các thao tác thựcthi
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
Chương 5
3. Lập trình web phía 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ựcthi
[return [value];]
}
</script>
Sử dụng file Javascript (*.js) đãcó
<script language="JavaScript" src="*.js"></script>
Chương 5
3. Lập trình web phía 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 đếncửasổ hiệnthời
– document: chứa các thuộctínhtrongtrangweb
– location: các thuộctínhvề địachỉ trang web
– history: các thuộctínhvề vị trí mà web browser đã đến
Mỗiphầntử trong trang HTML đềucóthể coi là một đốitượng, có thể
khai báo sự kiện để gọi hàm Javascript.
–Cúpháp
<tags-name [properties]*
[event-name=“procedure call” ]*>
Chương 5
3. Lập trình web phía client
–Cácsự kiệncóthể dùng
onClick: click chuột vào đốitượng.
onFocus: focus vào đốitượng trong form.
onMouseOver: di chuyểnchuột vào trên đốitượng.
onMouseOut: di chuyểnchuộtrakhỏi đốitượng.
onChange: thay đổigiátrị của các đốitượng chứavănbản.
onBlur: chuyển focus khỏi đốitượng trong form.
onSelect: chọnphầntử trong listbox.
onLoad: xảyrakhimột document được load.
