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

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"]

<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

<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.