Bài 6: Tạo hiệu ứng và validate Form - Giáo trình FPTMasterCode.vn
Viết mã tạo các hiệu ứng
Hiệu ứng Image Rollover
Hiệu ứng SlideShow
Thao tác với các điều khiển
SelectBox
CheckBox
RadioButton
Form
Kiểm tra tính hợp lệ cho Form
Mục tiêu bài học
Viết mã tạo các hiệu ứng
Hiệu ứng Image Rollover
Hiệu ứng SlideShow
Thao tác với các điều khiển
SelectBox
CheckBox
RadioButton
Form
Kiểm tra tính hợp lệ cho Form
Bài 7: Thư viện jQuery và thư viện jQuery UI - Giáo trình FPTMasterCode.vn
Thự viện và cách tạo thư viện
Thư viện JavaScript
Sử dụng thư viện jQuery
Sử dụng jQuery để tạo hiệu ứng
Hiệu ứng ẩn hiện
Hiệu ứng mờ
Hiệu ứng chuyển động
Sử dụng thư viện jQuery UI
Tạo tính năng kéo thả (drag and drop)
Tạo menu chồng nhau
Thự viện và cách tạo thư viện
Thư viện JavaScript
Sử dụng thư viện jQuery
Sử dụng jQuery để tạo hiệu ứng
Hiệu ứng ẩn hiện
Hiệu ứng mờ
Hiệu ứng chuyển động
Sử dụng thư viện jQuery UI
Tạo tính năng kéo thả (drag and drop)
Tạo menu chồng nhau
Bài 1 Lập trình website theo mô hình MVC - Xây dựng ứng dụng webMasterCode.vn
Cách tổ chức mô hình MVC
Ưu điểm của mô hình MVC trong việc phát triển
ứng dụng web
Cách tạo và gọi hàm theo phong cách mô hình
MVC
Phân biệt khi nào nên forward hoặc chuyển
hướng yêu cầu HTTP
Giới thiệu về framework CakePHP
Tài liệu tìm hiểu jQuery dành cho người mới bắt đầuLel Đặng Văn
Tài liệu này hướng dẫn những bạn mới bắt đầu học làm việc với jQuery trong việc viết Client Script khi thiết kế website. Những mô tả và hướng dẫn trong tài liệu này là hết sức căn bản và chưa có hướng dẫn nâng cao nào.
Hướng dẫn xây dựng ứng dụng web theo mô hình MVC bằng ngôn ngữ JavaHuy Vũ
Hướng dẫn xây dựng ứng dụng web bằng ngôn ngữ Java theo mô hình MVC
Tham khảo sourcecode vui lòng liên hệ email: pinuit11@gmail.com
Chúc các bạn học tập thật tốt!
OpenStack and Application Delivery: Joy and Pain of an Intricate RelationshipPLUMgrid
During this webinar F5 Networks and PLUMgrid will discuss and demonstrate how to build rich multi-tenant service offerings with a combination of in-kernel and appliance-based network functions.
Bài 6: Tạo hiệu ứng và validate Form - Giáo trình FPTMasterCode.vn
Viết mã tạo các hiệu ứng
Hiệu ứng Image Rollover
Hiệu ứng SlideShow
Thao tác với các điều khiển
SelectBox
CheckBox
RadioButton
Form
Kiểm tra tính hợp lệ cho Form
Mục tiêu bài học
Viết mã tạo các hiệu ứng
Hiệu ứng Image Rollover
Hiệu ứng SlideShow
Thao tác với các điều khiển
SelectBox
CheckBox
RadioButton
Form
Kiểm tra tính hợp lệ cho Form
Bài 7: Thư viện jQuery và thư viện jQuery UI - Giáo trình FPTMasterCode.vn
Thự viện và cách tạo thư viện
Thư viện JavaScript
Sử dụng thư viện jQuery
Sử dụng jQuery để tạo hiệu ứng
Hiệu ứng ẩn hiện
Hiệu ứng mờ
Hiệu ứng chuyển động
Sử dụng thư viện jQuery UI
Tạo tính năng kéo thả (drag and drop)
Tạo menu chồng nhau
Thự viện và cách tạo thư viện
Thư viện JavaScript
Sử dụng thư viện jQuery
Sử dụng jQuery để tạo hiệu ứng
Hiệu ứng ẩn hiện
Hiệu ứng mờ
Hiệu ứng chuyển động
Sử dụng thư viện jQuery UI
Tạo tính năng kéo thả (drag and drop)
Tạo menu chồng nhau
Bài 1 Lập trình website theo mô hình MVC - Xây dựng ứng dụng webMasterCode.vn
Cách tổ chức mô hình MVC
Ưu điểm của mô hình MVC trong việc phát triển
ứng dụng web
Cách tạo và gọi hàm theo phong cách mô hình
MVC
Phân biệt khi nào nên forward hoặc chuyển
hướng yêu cầu HTTP
Giới thiệu về framework CakePHP
Tài liệu tìm hiểu jQuery dành cho người mới bắt đầuLel Đặng Văn
Tài liệu này hướng dẫn những bạn mới bắt đầu học làm việc với jQuery trong việc viết Client Script khi thiết kế website. Những mô tả và hướng dẫn trong tài liệu này là hết sức căn bản và chưa có hướng dẫn nâng cao nào.
Hướng dẫn xây dựng ứng dụng web theo mô hình MVC bằng ngôn ngữ JavaHuy Vũ
Hướng dẫn xây dựng ứng dụng web bằng ngôn ngữ Java theo mô hình MVC
Tham khảo sourcecode vui lòng liên hệ email: pinuit11@gmail.com
Chúc các bạn học tập thật tốt!
OpenStack and Application Delivery: Joy and Pain of an Intricate RelationshipPLUMgrid
During this webinar F5 Networks and PLUMgrid will discuss and demonstrate how to build rich multi-tenant service offerings with a combination of in-kernel and appliance-based network functions.
Наукова бібліотека Чернігівського національного технологічного університету пропонує підбірку літератури з історії розвитку і створення книги, поняття інтелектуальної власності та авторського права .
See Your OpenStack Network Like Never Before with Real-time Visibility and Mo...PLUMgrid
After deployment and build-out of an OpenStack cloud, operators require a complete end to end single pane view of the SDN-based network overlay, all the associated workloads and hypervisors and physical infrastructure. Enterprises and cloud providers alike have aggressively adopted SDN visualization and monitoring platforms in addition to OpenStack horizon to keep their infrastructure running with 100% uptime. Additionally, new tools that aim at helping with proactive remediation of issues are being deployed and leveraged to quickly bring back the system to healthy conditions. In this session, attendees will discover:
How comprehensive visualization could help operations staff
How to correlate physical and virtual networks
How to immediately identify problems as they arise
BÀI 6 Làm việc với thành phần FORM, SPRY trong DREAMWEAVER CS4 - Giáo trình FPTMasterCode.vn
Làm việc với web form:
Giao diện và chức năng của form
Phương pháp submit thông tin của form lên server
Xác nhận các thông tin đầu vào của form
Khởi tạo và sửa đổi form trên Dreamweaver CS4
Lưu ý khi làm việc với form
Hiểu về các khái niệm liên quan tới web:
Web động phía client
XML, AJAX, RIA
Spry và cách làm việc với spry trong Dreamweaver
CS4
Làm việc với web form:
Giao diện và chức năng của form
Phương pháp submit thông tin của form lên server
Xác nhận các thông tin đầu vào của form
Khởi tạo và sửa đổi form trên Dreamweaver CS4
Lưu ý khi làm việc với form
Hiểu về các khái niệm liên quan tới web:
Web động phía client
XML, AJAX, RIA
Spry và cách làm việc với spry trong Dreamweaver
CS4
Lịch sử phát triển Web
2. Lý do ra đời của ASP.NET MVC
2.1 Giới thiệu ASP.NET truyền thống
2.2 Nhược điểm ASP.NET truyền thống
2.3 Giới thiệu ASP.NET MVC (model-view-controller)
2.3.1 Nguồn gốc ASP.NET MVC
2.3.2 Các thành phần cấu thành ASP.NET MVC
2.3.3 Cấu trúc mặc định của một dự án ASP.NET MVC
2.4 So sánh giữa ASP.NET và ASP.NET MVC
2.5 MVC2
3. Tìm hiểu các thành phần bên trong ASP.NET MVC
3.1 Controllers và Actions
3.1.1 Controllers là gì ?
3.1.2 Controller Actions là gì ?
3.2 Views
3.2.1 Views là gì ?
3.2.2 Tạo Views như thế nào ?
3.2.2 Sử dụng Views như thế nào ?
3.3 Models
3.3.1 Models là gì ?
3.3.2 Tạo Database
1. Lập trình mạng – Chương 5 1
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
2. 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.
3. 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.
4. 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.
5. 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>
6. 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>
7. 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>
8. 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>
10. 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>
11. 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:
12. 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>
13. 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ế.
14. 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"]>
15. 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"]>
16. 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
17. 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
18. 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>
19. 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>
20. 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
21. 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
22. 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>
23. 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
24. 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.
25. 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.
26. Lập trình mạng – Chương 5 26
5.3 Lập trình web ở Client
• Javascript
• Có thể dùng để thiết lập/kiểm tra các dữ liệu nhập trên form
ở phía web client.
• Truy xuất các phần tử trong form thông qua Javascript
Các cú pháp bên dưới dùng
form = window.document.form-name
• checkbox
form.check-name.checked = {true|false}
Trường hợp dùng nhiều checkbox cùng tên(nhóm)
var check_len = form.check-name.length;
for (i = 0; i < len; i++){
form.check-name[i].checked={true|false};
}
27. Lập trình mạng – Chương 5 27
5.3 Lập trình web ở Client
• Javascript
• Option button
form.option_name[index].checked = {true|false}
• Select
form.select_name.options[index].selected = {true|false}
Chỉ số hiện thời đang được chọn:
form.select_name.selectedIndex
• Text
form.text_name.value
28. Lập trình mạng – Chương 5 28
5.3 Lập trình web ở Client
• Kiểm tra phần tử SELECT
var select_value;
function dropDownMenu() {
var myindex=document.forms[0].menu.selectedIndex;
if (myindex==0) {
alert("nYou must make a selection from the drop-down menu.");
document.forms[0].menu.focus();
}
else {
select_value =document.forms[0].menu.options[myindex].value;
return true;
}
}
29. Lập trình mạng – Chương 5 29
5.3 Lập trình web ở Client
function isEmail() {
if (document.forms[0].elements[1].value == '') {
alert ("n The E-Mail field is blank. nn “+
“Please enter your E-Mail address.")
document.forms[0].elements[1].focus();
return false;
}
if (document.forms[0].elements[1].value.indexOf ('@',0) == -1 ||
document.forms[0].elements[1].value.indexOf ('.',0) == -1) {
alert ("n The E-Mail field requires a "@" and a ".""+
"be used. nnPlease re-enter your E-Mail address.")
document.forms[0].elements[1].select();
document.forms[0].elements[1].focus();
return false;
}
return true;
}
30. Lập trình mạng – Chương 5 30
5.3 Lập trình web ở Client
• Java Applet:
• Là một ứng dụng được viết bằng Java, nhúng trong trang HTML.
• Khi trang HTML có chứa tag applet được gọi, class applet được tải về máy
client và thực thi trên máy client.
• Một ứng dụng applet phải thừa kế class java.applet.Applet
• Có thể thực hiện các thao tác như một chương trình Java, tuy nhiên bị hạn
chế một số chức năng vì tính bảo mật cho máy client.
31. Lập trình mạng – Chương 5 31
5.3 Lập trình web ở Client
//file SampleApplet.java
import java.applet.*; import java.awt.*;
public class SampleApplet extends Applet {
String text = "error"; int x = 0; int y = 20;
public void init() {
text = getParameter("text");
try { x = Integer.parseInt(getParameter("x"));
y = Integer.parseInt(getParameter("y")); }catch(NumberFormatException ex){ }
}
public void paint(Graphics g) {
g.setFont(new Font("TimesRoman",Font.BOLD+
Font.ITALIC,36));
g.drawString(text,x,y);
}
}
32. Lập trình mạng – Chương 5 32
5.3 Lập trình web ở Client
sample.html
<HTML> <HEAD> <TITLE>Using the Applet Tag
</TITLE> </HEAD>
<BODY>
<H1>An Applet that Displays Text at a Designated Location</H1>
<APPLET CODE="SampleApplet.class" HEIGHT=300 WIDTH=300>
<PARAM NAME="text" VALUE="Applets are fun!">
<PARAM NAME="x" VALUE="50">
<PARAM NAME="y" VALUE="50">
Text displayed by browsers that are not Java-enabled.
</APPLET>
</BODY>
</HTML>
33. Lập trình mạng – Chương 5 33
5.3 Lập trình web ở Client
• Hoạt động của một Applet
• Được web browser tải mã(byte code) về máy client.
• Method init() sẽ được gọi để khởi động các thông số.
• Method start() được gọi để thực thi.
• Method stop() được gọi khi người dùng thoát khỏi applet
• Method destroy() được thực thi khi applet kết thúc.
• ActiveX Control: tương tự như Java Applet, được viết bởi các công
nghệ của Mircosoft.
34. Lập trình mạng – Chương 5 34
5.4 DHTML
• DHTML (Dynamic HTML) là trang HTML có chứa các đoạn mã
JavaScript tạo các hiệu ứng, thay đổi các phần tử trong trang HTML.
• DHTML kết hợp giữa HTML, Javascript và Cascading Style Sheets(CSS).
• CSS là sự kết hợp giữa các tags HTML và style. Style có thể chứa nhiều
thuộc tính.
35. Lập trình mạng – Chương 5 35
5.4 DHTML
• Mọi tags HTML đều có style. Javascript có thể dựa trên các biến cố để
thay đổi các thuộc tính của style.
• Mỗi phần tử trong trang HTML đều có thể được gán ID (khác với
name) và có các thuộc tính style.
• Có thể dùng tag <div id=“”>…</div>
• Mỗi web browser có thể thực thi một số lệnh khác nhau.
36. Lập trình mạng – Chương 5 36
5.4 DHTML
• Phát hiện loại web browser:
• Dùng các thuộc tính appName và appVersion của đối tượng navigator
var browser_name= navigator.appName;
var browser_version = navigator.appName;
alert(“You use browser “+browser_name+” version “+ browser_version);
• Phân biệt hai loại chính:
if(document.all){ //IE
the_div=eval(“window.document.all.”+div_name+”.style”);
}else if(document.layers){//Netscape
the_div=eval(“window.document.all.”+div_name);
}
37. Lập trình mạng – Chương 5 37
5.4 DHTML
<HTML>
<HEAD>
<TITLE>Javascipt example about timer</TITLE>
<SCRIPT language="JavaScript">
<!--
var second_counter=0, counter=0;
function my_timer(){
D = new Date();
seconds= D.getSeconds();
if(seconds!=second_counter) counter++;
second_counter=seconds;
if(counter>=1000) counter=0;
document.images[0].src= get_images(counter/100);
document.images[1].src= get_images((counter%100)/10);
document.images[2].src= get_images(counter%10);
SecondText.innerText=counter;
setTimeout('my_timer()',1000);
}
39. Lập trình mạng – Chương 5 39
5.5 Lập trình web với CGI
• Trang HTML chỉ chứa các nội dung cố định hoặc có thể thao tác thay
đổi qua DHTML ở client
• Nhu cầu sử dụng các trang web như một ứng dụng (giao tiếp với user,
tìm kiếm, nội dung thay đổi, tương tác các ứng dụng, với
database…)=> ứng dụng web
• CGI (Common Gateway Interface) là một chuẩn (standard) để viết ứng
dụng web
40. Lập trình mạng – Chương 5 40
5.5 Lập trình web với CGI
• Một ứng dụng web theo chuẩn CGI có các đặc điểm:
• Là ứng dụng chạy trên nền web server.
• Nhận thông tin từ web browser và xuất thông tin để web browser hiển thị
thông qua web server.
• Ứng dụng có thể được viết với bất cứ ngôn ngữ lập trình có standard input và
standard output. (C/C++, Perl, Shell script, Dos shell…)
41. Lập trình mạng – Chương 5 41
5.5 Lập trình web với CGI
• Cách thức hoạt động của ứng dụng web CGI:
• Web server nhận request ứng dụng CGI từ browser.
• Web server gọi ứng dụng CGI, truyền các thông số bằng các biến môi
trường(thông qua standard input).
• Ứng dụng web CGI xử lý, giao tiếp với các ứng dụng khác (database, mail…),
xuất kết quả dạng HTML qua standard output đến web server.
• Web server nhận kết quả và trả về cho browser.
42. Lập trình mạng – Chương 5 42
5.5 Lập trình web với CGI
• Hình vẽ minh họa hoạt động CGI
43. Lập trình mạng – Chương 5 43
5.5 Lập trình web với CGI
• Ví dụ (Perl):
1 #!/usr/bin/perl
2 # A very common echo script on just about every server
3 $| = 1;
4 print "Content-type: text/plainnn";
5 print "CGI/1.0 test script reportnn";
6 if ($ENV{'REQUEST_METHOD'} eq "POST") {
7 $form = <STDIN>;
8 print "$form n";
9 } else {
10 print "argc is $#ARGV nargv is ";
11 while (@ARGV) {
12 $ARGV=shift;
13 print "$ARGV ";
14 }
15 }