Lập trình Web – Cgi

Lập trình mạng – Chương 51LẬP TRÌNH WEB – CGI5.1 Giới thiệu về lập trình web5.2 HTMLs và FORMs5.3 Lập trình web ở Client5.4 DHTML 5.5 Phương pháp lập trình web với CGILập trình mạng – Chương 525.1 Giới thiệu về lập trình webHệ thống WWW tĩnh:Tập hợp các trang HTMLKhông tương tác được với userKhó 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 535.1 Giới thiệu về lập trình webCá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 545.2 HTMLs và FORMsHTML(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 555.2 HTMLs và FORMsCác tags HTML cơ bản:Khung của một file HTML: Tiêu đề của trang webLập trình mạng – Chương 565.2 HTMLs và FORMsCác tags HTML cơ bản:Tiêu đề: (n: 1=>6)Phân đoạn: Kiểu chữ:In đậm: In nghiêng: Gạch dưới: Lập trình mạng – Chương 575.2 HTMLs và FORMsCác tags HTML cơ bản:Danh sách:Đánh thứ tự: []+ Không đánh thứ tự: []+ Bảng: [ [ ]+ ]+Trộn các ô:  Lập trình mạng – Chương 585.2 HTMLs và FORMsCác tags HTML cơ bản:Chèn hình ảnh:Tạo điểm đánh dấu (bookmark): Liên kết đến bookmark: Liên kết đến một trang web khác: Liên kết đến địa chỉ e-mail: Lập trình mạng – Chương 595.2 HTMLs và FORMsCác tags HTML cơ bản:Giữ định dạng đoạn khi soạn thảo: Các ký tự đặc biệt:Khoảng trắng:  © : ©® : ® : >& : &Lập trình mạng – Chương 5105.2 HTMLs và FORMsCác tags HTML cơ bản:Số mũ:Superscript: Subscript: Định dạng font chữ:Đường ngăn cách:Xuống dòng trong một đoạn:Lập trình mạng – Chương 5115.2 HTMLs và FORMsTạ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 5125.2 HTMLs và FORMsCú pháp tạo frame:[]+ [ Your browser doesn't support them. ]Lập trình mạng – Chương 5135.2 HTMLs và FORMsFORMsLà 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 FORMsDùng các tags để thiết kế.Lập trình mạng – Chương 5145.2 HTMLs và FORMsFORMsCấu trúc cơ bản của một form: []+ Các loại (type) INPUT:TEXT: là textbox dùng để nhập dữ liệu.Cú pháp: Lập trình mạng – Chương 5155.2 HTMLs và FORMsFORMs(tt)Các loại (type) INPUT:SUBMIT: truyền dữ liệu form đến ứng dụng webCú pháp: RESET:đưa nội dung của form trở về giá trị ban đầuCú pháp: BUTTON: nút nhấn bất kỳCú pháp: Lập trình mạng – Chương 5165.2 HTMLs và FORMsFORMs(tt)Các loại (type) INPUT:RATIO: chọn lựa một trong nhiềuCú pháp: Option 1Option 2Option 3Lập trình mạng – Chương 5175.2 HTMLs và FORMsFORMs(tt)Các loại (type) INPUT:CHECKBOX: lựa chọn một hoặc nhiều Cú pháp: Ví dụ: Check 1 Check 2Lập trình mạng – Chương 5185.2 HTMLs và FORMsFORMs(tt)Các loại (type) INPUT:HIDDEN: dữ liệu không hiển thịCú pháp: Nhập vùng văn bản: TEXTAREAdefault text Lập trình mạng – Chương 5195.2 HTMLs và FORMsFORMs(tt)Lựa chọn listbox: SELECT[text ]+ Mạng máy tínhLập trình mạngLập trình mạng – Chương 5205.3 Lập trình web ở ClientCá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 AppletActiveX ControlLập trình mạng – Chương 5215.3 Lập trình web ở ClientJavascript ở 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 HTMLCác đoạn mã Javasript được chạy dựa vào các sự kiện của các phần tử HTMLCú pháp các câu lệnh giống ngôn ngữ JavaKhông tương tác được với serverLập trình mạng – Chương 5225.3 Lập trình web ở ClientCú pháp cho một đoạn code 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];] } Sử dụng file Javascript (*.js) đã có: Lập trình mạng – Chương 5235.3 Lập trình web ở ClientCá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ờidocument: chứa các thuộc tính trong trang weblocation: các thuộc tính về địa chỉ trang webhistory: các thuộc tính về vị trí mà web browser đã đếnLập trình mạng – Chương 5245.3 Lập trình web ở ClientMỗ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: 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 5255.3 Lập trình web ở ClientJavascriptCá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.Lập trình mạng – Chương 5265.3 Lập trình web ở ClientJavascriptCó 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 JavascriptCác cú pháp bên dưới dùngform = window.document.form-namecheckboxform.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 Using the Applet Tag An Applet that Displays Text at a Designated Location Text displayed by browsers that are not Java-enabled. Lập trình mạng – Chương 5335.3 Lập trình web ở ClientHoạ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. Lập trình mạng – Chương 5345.4 DHTMLDHTML (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.Lập trình mạng – Chương 5355.4 DHTMLMọ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 Mỗi web browser có thể thực thi một số lệnh khác nhau.Lập trình mạng – Chương 5365.4 DHTMLPhát hiện loại web browser:Dùng các thuộc tính appName và appVersion của đối tượng navigatorvar 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);}Lập trình mạng – Chương 5375.4 DHTMLJavascipt example about timer=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);} Lập trình mạng – Chương 5385.4 DHTMLfunction get_images(number){var newNum= Math.floor(number);return "../images/"+newNum+".jpg";}--> Timer : 000 secondsLập trình mạng – Chương 5395.5 Lập trình web với CGITrang HTML chỉ chứa các nội dung cố định hoặc có thể thao tác thay đổi qua DHTML ở clientNhu 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 webCGI (Common Gateway Interface) là một chuẩn (standard) để viết ứng dụng webLập trình mạng – Chương 5405.5 Lập trình web với CGIMộ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)Lập trình mạng – Chương 5415.5 Lập trình web với CGICá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. Lập trình mạng – Chương 5425.5 Lập trình web với CGIHình vẽ minh họa hoạt động CGILập trình mạng – Chương 5435.5 Lập trình web với CGIVí dụ (Perl):  1 #!/usr/bin/perl 2 #  A very common echo script on just about every server 3 $| = 1; 4 print "Content-type: text/plain\n\n"; 5 print "CGI/1.0 test script report\n\n"; 6 if ($ENV{'REQUEST_METHOD'} eq "POST") { 7      $form = ;  8      print "$form \n";  9 } else {10 print "argc is $#ARGV \nargv is ";11 while (@ARGV) {12      $ARGV=shift;13      print "$ARGV "; 14 }15 }Lập trình mạng – Chương 5445.5 Lập trình web với CGIVí dụ (Perl): 16 print "\n";17 #18 print "SERVER_SOFTWARE = $ENV{'SERVER_SOFTWARE'}\n"; 19 print "SERVER_NAME = $ENV{'SERVER_NAME'}\n";20 print "GATEWAY_INTERFACE = $ENV{'GATEWAY_INTERFACE'}\n"; 21 print "SERVER_PROTOCOL = $ENV{'SERVER_PROTOCOL'}\n"; 22 print "SERVER_PORT = $ENV{'SERVER_PORT'}\n";23 print "SERVER_ROOT = $ENV{'SERVER_ROOT'}\n";24 print "REQUEST_METHOD = $ENV{'REQUEST_METHOD'}\n"; 25 print "HTTP_AccEPT = $ENV{'HTTP_AccEPT'}\n";26 print "PATH_INFO = $ENV{'PATH_INFO'}\n";27 print "PATH = $ENV{'PATH'}\n";28 print "PATH_TRANSLATED = $ENV{'PATH_TRANSLATED'}\n"; 29 print "SCRIPT_NAME = $ENV{'SCRIPT_NAME'}\n";Lập trình mạng – Chương 5455.5 Lập trình web với CGIVí dụ (Perl): 30 print "QUERY_STRING = $ENV{'QUERY_STRING'}\n";31 print "QUERY_STRING_UNESCAPED = $ENV{'QUERY_STRING_UNESCAPED'}\n"; 32 print "REMOTE_HOST = $ENV{'REMOTE_HOST'}\n";33 print "REMOTE_IDENT = $ENV{'REMOTE_IDENT'}\n";34 print "REMOTE_ADDR = $ENV{'REMOTE_ADDR'}\n";35 print "REMOTE_USER = $ENV{'REMOTE_USER'}\n";36 print "AUTH_TYPE = $ENV{'AUTH_TYPE'}\n";37 print "CONTENT_TYPE = $ENV{'CONTENT_TYPE'}\n";38 print "CONTENT_LENGTH = $ENV{'CONTENT_LENGTH'}\n"; 39 print "DOCUMENT_ROOT = $ENV{'DOCUMENT_ROOT'}\n"; 40 print "DOCUMENT_URI = $ENV{'DOCUMENT_URI'}\n";41 print "DOCUMENT_NAME = $ENV{'DOCUMENT_NAME'}\n"; 42 print "DATE_LOCAL = $ENV{'DATE_LOCAL'}\n";43 print "DATE_GMT = $ENV{'DATE_GMT'}\n";44 print "LAST_MODIFIED = $ENV{'LAST_MODIFIED'}\n"; Lập trình mạng – Chương 546