Hệ thống World Wide Web & Lập trình Web chạy ở phía client dùng DHTML và JavaScript

Hệ thống World Wide Web& Lập trình Web chạy ở phía client dùng DHTML và JavaScriptNguyễn Quang HùngE-mail: hungnq2@dit.hcmut.edu.vnWebsite: www.dit.hcmut.edu.vn/~hungnq/courses.htmMục tiêu buổi học (3 tiết)Tìm hiểu về hệ thống World Wide Web: Mô hình hoạt động: Web browser/Web serverHyperText Transfer Protocol (HTTP)HyperText Markup Language (HTML)Lập trình Web chạy ở phía client bằng DHTML và Javascript, Java Applet, XMLBài tập: tạo ứng dụng VnIE cho phép duyệt Web như một trình duyệt thông thường. Faculty of Information Technology, HCM University of TechnologyGiới thiệu mạng InternetMạng LAN (Local Area Network)Mạng cục bộ có bán kính giới hạn về mặt địa lýTốc độ truyền dữ liệu caoMạng WAN (Wide Area Network)Mạng nối kết các mạng LANs, không giới hạn về mặt địa lý.Có tốc độ truyền tương đối thấpMạng Internet là mạng máy tính toàn cầu, kết nối các mạng của các tổ chức, cá nhân trên thế giớiCác dịch vụ phổ biến trên Internet: web, e-mail, chat, FTP,Faculty of Information Technology, HCM University of TechnologyGiới thiệu hệ thống World Wide Web (WWW)Mô hình hoạt động: Web client/Web serverWeb clientWeb serverHTTPFaculty of Information Technology, HCM University of TechnologyHệ thống WWW ở góc nhìn lập trìnhWeb server lắng nghe ở port 80 (port mặc định)Web browser và web server sẽ tạo 1 cầu nối TCP để trao đổi thông tin; và dùng giao thức HTTP (HyperText Transfer Protocol) để truyền tài nguyên web (web page, image, order data, credit card).Faculty of Information Technology, HCM University of TechnologyCác phần tử trong hệ thống WWW Web server: chương trình quản lý một cây thứ bậc các trang Web và phục vụ yêu cầu truy xuất chúng từ các client từ xa. VD: Apache Http server, IIS, PWS Web Browser: chương trình giao tiếp với người dùng, nhận yêu cầu từ user rồi truy xuất trang Web ở server tương ứng để phân giải và hiển thị nội dung lên màn hình. VD: firefox, IE, Mozilla Web page: đơn vị gởi nhận giữa Web server và Web client, nó là 1 file văn bản được viết bằng ngôn ngữ HTML, DHML, XMLFaculty of Information Technology, HCM University of Technology CẤU TRÚC MỘT GIAO DỊCH HTTP 1.x Bước 1: HTTP client mở kết nối đến HTTP serverBước 2: HTTP client gửi request message đến HTTP serverBước 3: HTTP server trả response mesage về cho HTTP client, chứa resource mà HTTP client yêu cầuBước 4: HTTP server đóng kết nốiLưu ý: HTTP 1.1 còn cho phép keep-alive trên cầu nối TCP nàyFaculty of Information Technology, HCM University of TechnologyVí dụ về một HTTP request/response Client: GET HTTP/1.1 From: someuser@jmarshall.com 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] Faculty of Information Technology, HCM University of TechnologyUniform Resource Locator (URL)Địa chỉ URL bao gồm 3 phần: protocol, host và path Ví dụ: of Information Technology, HCM University of TechnologyCác lệnh trong HTTP 1.xGETLấy toàn bộ một trang web.POSTGửi dữ liệu từ web client về server.HEAD Chỉ lấy phần header của một trang web (phần thẻ ) mà không cần lấy nội dung.etcFaculty of Information Technology, HCM University of TechnologyHTTP 1.1 so với HTTP 1.0Trong message phải có Header line Host: www.host1.comCho phép truyền từng phần của file (Header Chunked Transfer-Encoding)Mặc định là Persistent ConnectionServer gửi “100 Continue” nếu slow linksFaculty of Information Technology, HCM University of TechnologyTổng kếtHệ thống WWW dùng mô hình giao tiếp client-serverWeb client và Web server giao tiếp bằng giao thức HTTP thông qua default port 80Giao thức HTTP4 bướcGiao tiếp bằng messageFaculty of Information Technology, HCM University of TechnologyTham khảoRFC 1945-HTTP 1.0RFC 2616-HTTP 1.1www.jmarshall.com/easy/http/www.w3.org Faculty of Information Technology, HCM University of TechnologyHyperText Markup Language & Lập trình trang web động bằng DHTML và JavascriptNguyễn Quang Hùng E-mail: hungnq2@dit.hcmut.edu.vn Trích từ tập slide môn Lập trình mạng của T.S Nguyễn Văn Hiệp – Bộ môn CNPM – Khoa CNTT ĐHBK TPHCMMục tiêuGiới thiệu về lập trình webTìm hiểu về ngôn ngữ đánh dấu siêu văn bản (HTML – HyperText Markup Language)Faculty of Information Technology, HCM University of TechnologyMục lụcLịch sửCác thẻ (tag) căn bảnHướng phát triểnFaculty of Information Technology, HCM University of TechnologyGiới thiệu về lập trình webCác đặc điểm của ứng dụng webKhô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.Faculty of Information Technology, HCM University of TechnologyLịch sử về HTML1989: dự án đề nghị của CERN về WWW1992: phân các lớp cơ bảnwww-talk@info.cern.ch Các trình duyệt ban đầu rất khó cài đặt1993: NCSA Mosaic released, Web cất cánh bay xaFaculty of Information Technology, HCM University of TechnologyThe Internet Engineering Task Force (IETF)07/93: Internet Draft for HTML+11/95: RFC1866 - HTML 2.011/95: RFC1867 - Form-based file Upload03/95: HTML 3.0 Draft ổn định hơn HTML 2.005/96: RFC1942 - HTML Tables01/97: RFC2070 - Internationalization of HTMLSau 96: IETF HTML WG đóng lạiFaculty of Information Technology, HCM University of TechnologyW3C tiếp quản chuẩn HTML12/95: W3C họp các nhà cung cấp chính yếu.Công việc ban đầu trên tiêu chí mô hình đối tượng thông thường: Tiếp nối đưa ra các nét cơ bản của HTML.01/97: W3C công bố HTML 3.2 (khuyến cáo).12/97: W3C công bố HTML 4.0 (khuyến cáo).05/98: W3C workshop về tương lai của HTML.02/99: XHTML draft Faculty of Information Technology, HCM University of TechnologyCác thách thức của HTMLThiếu hệ thống trong ngôn ngữ này.Nhiều dạng trình duyệt mới như: Digital TV, Handheld, phone và carCác client đơn giản cần tập con của HTMLCác client phức tạp cần mở rộng HTMLHTML đã được kết hợp với tập các thẻ khá về Toán, Đồ họa, E-Commerce, Metadata.XHTML, XML, DHTMLFaculty of Information Technology, HCM University of TechnologyHyperText Markup Language (HTML)Là một ngôn ngữ đánh dấu siêu văn bản.Sử dụng các thẻ (tag) để định dạng: văn bản, đoạn văn, hình ảnh, file âm thanh, Java applet, đối tượng như file Word, Excel, JavaBeanCho phép chèn các đoạn mã script như JavaScript thực thi tại trình duyệt (browser).Là định dạng chuẩn cho trang web.Mở rộng: XML, WSDL/SOAPFaculty of Information Technology, HCM University of TechnologyHyperText Markup Language (tiếp)Các trang web là tài liệu dạng HTML khi tên file vật lý là:*.html, *.htmVí dụ: index.html, index.htm, courses.htmLưu ý: Các tài nguyên Web được yêu cầu bằng HTTP request có thể là một file nhị phân, một trang JSP/Servlet hay ASP.NETFaculty of Information Technology, HCM University of TechnologyMột số thẻ cơ bản của HTMLFaculty of Information Technology, HCM University of TechnologyMột số thẻ cơ bản của HTML (tiếp)Faculty of Information Technology, HCM University of TechnologyVí dụ: một trang “hello.htm”đơn giản Hello World Hello world !!! Welcome to HyperText Markup Language (HTML) world !!! This is a paragraph. You can type any text here.Show MeFaculty of Information Technology, HCM University of TechnologyVí dụ: một trang “hello.htm”đơn giản (tiếp)Faculty of Information Technology, HCM University of TechnologyVí dụ: thẻ Ví dụ về thẻ TABLE Row 1, column 1 Row 1, column 2 Row 1, column 3 Row 2, column 1 Row 2, column 2 Row 2, column 3 Row 3, column 1 Row 3, column 2 Row 3, column 3 Show MeFaculty of Information Technology, HCM University of TechnologyVí dụ: thẻ (tiếp)Faculty of Information Technology, HCM University of TechnologyMột số thẻ HTML khácĐây là một ảnhĐây là dòng chữ bình thường. Đây là đoạn in đậm. Đây là đoạn in nghiêng. Đây là đoạn gạch dưới.Đây là một list box control: List item 1 List item 2 List item 3Faculty of Information Technology, HCM University of TechnologyMột số thẻ HTML khác (tiếp)Thẻ tạo liên kết: Click vào sẽ link đến trang web các môn học của tôi Faculty of Information Technology, HCM University of TechnologyMột số thí dụ về trang webFaculty of Information Technology, HCM University of TechnologyMột số thí dụ về trang web (tiếp)Faculty of Information Technology, HCM University of TechnologyDùng công cụ tạo các trang WebMicrosoft Visual InterDev 6:HTML, ASPMicrosoft Visual Studio.NET 2003:HTML, ASP.NET, ASP.NET Webservice, C#, C++Microsoft FrontpageHTMLJbuilder HTML, JSP, Java Servlet, Java EJBMacromedia Dreamweawer MX 2004HTML, ASP, JSP, ASP.NETEditPlusNotepad/Wordpad/Unix VIM.Faculty of Information Technology, HCM University of TechnologyTạo trang Web bằng Visual InterDev 6Faculty of Information Technology, HCM University of TechnologyTạo trang Web bằng Visual Studio.NET 2003Faculty of Information Technology, HCM University of TechnologyTạo trang Web bằng EditPlusFaculty of Information Technology, HCM University of TechnologyBài tập - Ứng dụng trình duyệt Web đơn giảnBài tập này nhằm giúp bạn làm quen với quy trình phát triển ứng dụng dạng Single Document Interface - SDI bằng VC++. Viết 1 trình duyệt Web đơn giản có giao diện sau: Faculty of Information Technology, HCM University of TechnologyURL encodingVí dụ: ThisisatextSau khi URL encoding là: This%0D%0Ais%0D%0Aa%0D%0Atext%0D%0A Faculty of Information Technology, HCM University of Technology HTML FORMCấu trúc cơ bản của một HTML FORM []+ Các loại (type) INPUTTEXT: là textbox dùng để nhập dữ liệu.Cú pháp: Faculty of Information Technology, HCM University of Technology HTML FORM (tiếp)Các loại (type) INPUTSUBMIT: 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: Faculty of Information Technology, HCM University of TechnologyHTML Form – một ví dụA SIMPLE HTML FORM SAMPLE First name: Last name: email: Male Female Faculty of Information Technology, HCM University of Technology HTML FORM (tiếp)Các loại (type) INPUTRATIO: chọn lựa một trong nhiềuCú pháp: Option 1Option 2Option 3Faculty of Information Technology, HCM University of TechnologyCác loại (type) INPUTCHECKBOX: lựa chọn một hoặc nhiều Cú pháp: Ví dụ: Check 1 Check 2HTML FORM (tiếp)Faculty of Information Technology, HCM University of TechnologyCác loại (type) INPUTHIDDEN: dữ liệu không hiển thịCú pháp: Nhập vùng văn bản: TEXTAREAdefault text HTML FORM (tiếp)Faculty of Information Technology, HCM University of TechnologyLựa chọn listbox: SELECT[text ]+ Mạng máy tínhLập trình mạngHTML FORM (tiếp)Faculty of Information Technology, HCM University of TechnologyCác trang HTML 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 ControlXMLAJAXLập trình Web ở phía clientFaculty of Information Technology, HCM University of TechnologyCú 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 Web ở phía client (tiếp)Faculty of Information Technology, HCM University of TechnologyCác đối tượng được xây dựng sẵn trong JavaScriptwindow: 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 Web ở phía client (tiếp)Faculty of Information Technology, HCM University of TechnologyLập trình Web ở phía client (tiếp)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 Faculty of Information Technology, HCM University of TechnologyCác sự kiện có thể dùngonClick: click chuột vào đối tượng.onFocus: focus vào đối tượng trong form.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 Web ở phía client (tiếp)Faculty of Information Technology, HCM University of TechnologyKiểm tra phần tử SELECTvar 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; }}Lập trình Web ở phía client (tiếp)Faculty of Information Technology, HCM University of TechnologyKiểm tra thông tin địa chỉ E-mail nhập vàofunction isEmail() {if (document.forms[0].elements[1].value == '') {alert ("\n The E-Mail field is blank. \n\n “+ “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. \n\nPlease re-enter your E-Mail address.")document.forms[0].elements[1].select();document.forms[0].elements[1].focus();return false;}return true;}Lập trình Web ở phía client (tiếp)Faculty of Information Technology, HCM University of TechnologyDHTML 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.Dynamic HTML (DHTML) Faculty of Information Technology, HCM University of TechnologyMọ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.DHTML (tiếp)Faculty of Information Technology, HCM University of TechnologyPhát hiện loại web browserDù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ínhif(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);}DHTMLFaculty of Information Technology, HCM University of TechnologyJavascipt 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);} DHTML (tiếp)Faculty of Information Technology, HCM University of TechnologyJavascipt 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);} DHTML (tiếp)Faculty of Information Technology, HCM University of Technologyfunction get_images(number){var newNum= Math.floor(number);return "../images/"+newNum+".jpg";}--> Timer : 000 secondsDHTML (tiếp)Faculty of Information Technology, HCM University of TechnologyLà 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.Java AppletFaculty of Information Technology, HCM University of TechnologyĐượ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.Hoạt động của một AppletFaculty of Information Technology, HCM University of Technology//file SampleApplet.javaimport 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); } } Ví dụ về một Java appletFaculty of Information Technology, HCM University of Technology Using the Applet Tag An Applet that Displays Text at a Designated Location Text displayed by browsers that are not Java-enabled. Ví dụ về một Java appletFaculty of Information Technology, HCM University of TechnologyActiveX ControlCho phép tạo các hiệu ứng động trên trang web chạy ở phía trình duyệt.Tương tự như Java Applet, được viết bởi các công nghệ của Mircosoft. Faculty of Information Technology, HCM University of TechnologyTài liệu tham khảoHTML Homepage on W3c ver 4.0: Form Raggett’s Introduction to HTML & DHTML of Information Technology, HCM University of TechnologyGiới thiệu hệ thống WebGiới thiệu lập trình WebLập trình Web phía ClientJavascriptDHTMLTổng kếtFaculty of Information Technology, HCM University of TechnologyThảo luậnFaculty of Information Technology, HCM University of TechnologyViết một trình duyệt Web đơn giảnFaculty of Information Technology, HCM University of TechnologyViết một trình duyệt Web đơn giản (tiếp)Từ menu File.New chọn loại dự án là “MFC Application” và đặt tên là “VnIE”Faculty of Information Technology, HCM University of TechnologyViết một trình duyệt Web đơn giản (tiếp)Chọn loại ứng dụng là Single Document Interface (SDI) với sự hỗ trợ kiến trúc MFC Doc/ViewFaculty of Information Technology, HCM University of TechnologyViết một trình duyệt Web đơn giản (tiếp)Chọn mặc định trong MFC AppWizard bước 2 và 3 nàyFaculty of Information Technology, HCM University of TechnologyViết một trình duyệt Web đơn giản (tiếp)Bước 4: Chọn toolbar kiểu Internet Exployer ReBarsBước 5: Mặc địnhFaculty of Information Technology, HCM University of TechnologyViết một trình duyệt Web đơn giản (tiếp)Bước 6: Đổi lớp cơ sở của lớp CVnView từ Cview thành CHtmlViewFaculty of Information Technology, HCM University of TechnologyViết một trình duyệt Web đơn giản (tiếp)Bước cuối cùng xem các thông tin tóm tắt và chọn OK hoặc Cancel.Faculty of Information Technology, HCM University of TechnologyViết một trình duyệt Web đơn giản (tiếp)Thiết kế giao diện cho chương trình và thiết lập các thuộc tính cho các phần tử giao diệnFaculty of Information Technology, HCM University of TechnologyChỉnh sửa các MenuChọn VnIE resources và chọn chỉnh sửa Menu tại IDR_MAINFRAME. Xoá hoặc thêm các lệnh vào menu.Faculty of Information Technology, HCM University of TechnologyChỉnh sửa các Menu (tiếp)Faculty of Information Technology, HCM University of TechnologyChỉnh sửa Menu ViewChọn menu ViewChọn Fonts có thuộc tính Pop-up.Tạo các options sau trong View:Stop có thuộc tính bằng ID=ID_VIEWSTOP, và thuộc tính Caption = “Stop”Refresh có thuộc tính bằng ID=ID_VIEWREFRESH và Caption = “Refresh”Faculty of Information Technology, HCM University of TechnologyChỉnh sửa Menu ViewChọn lại mục Fonts, thêm các options sau vào menu con của nó:Largest: có thuộc tính là ID_VIEW_FONT_LARGEST và thuộc tính Caption = “Largest”Tương tự cho Large, Medium, Small và Smallest có ID_VIEW_FONT_XXX.Menu Fonts có dạng hình bên.Faculty of Information Technology, HCM University of TechnologyTạo menu Go, FavoritesFaculty of Information Technology, HCM University of TechnologyThêm menu IDR_FONT_POPUPChọn vào Insert/Resource để tạo một menu mới.Đặt tên menu mới là IDR_FONT_POPUP và copy mục Fonts trong View và dán qua menu này.Faculty of Information Technology, HCM University of TechnologyThay đổi mục Address:Tên của nó là ComboExFaculty of Information Technology, HCM University of Technology