Xây dựng ứng dụng web với html 5 0

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC DÂN LẬP HẢI PHÒNG -o0o - ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHệ THÔNG TIN HẢI PHÒNG 2013 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC DÂN LẬP HẢI PHÒNG -o0o - XÂY DỰNG ỨNG DỤNG WEB VỚI HTML 5.0 ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY NGÀNH: CƠNG NGHệ THƠNG TIN HẢI PHỊNG 2013 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC DÂN LẬP HẢI PHÒNG -o0o - XÂY DỰNG ỨNG DỤNG WEB VỚI HTML 5.0 ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY NGÀNH: CƠNG NGHệ THƠNG TIN Sinh viên thực hiện: Đặng Đức Tuyển Giáo viên hướng dẫn: Th.s Nguyễn Trịnh Đơng Mã sinh viên: 1351010015 HẢI PHỊNG 2013 BỘ GIÁO DỤC VÀ ĐÀO TẠO CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC DÂN LẬP HẢI PHÒNG Độc lập – Tự – Hạnh phúc -o0o - -o0o - NHIỆM VỤ THIẾT KẾ TỐT NGHIỆP Sinh viên: Đặng Đức Tuyển Mã số: 1351010015 Lớp: CT1301 Ngành: Công nghệ thông tin Tên đề tài: XÂY DỰNG ỨNG DỤNG WEB VỚI HTML 5.0 NHIỆM VỤ ĐỀ TÀI Nội dung yêu cầu cần giải nhiệm vụ đề tài tốt nghiệp a Nội dung: - Tìm hiểu cơng nghệ Web-based, Web 2.0 - Tìm hiểu công nghệ HTML 5.0 - Xây dựng ứng dụng với HTML 5.0 b Các yêu cầu cần giải Các số liệu cần thiết để thiết kế, tính tốn Địa điểm thực tập CÁN BỘ HƢỚNG DẪN ĐỀ TÀI TỐT NGHIỆP Ngƣời hƣớng dẫn thứ nhất: Họ tên: Nguyễn Trịnh Đông Học hàm, học vị: Thạc sĩ Cơ quan công tác: Khoa Công nghệ Thông tin – Trường Đại Học Dân Lập Hải Phòng Nội dung hướng dẫn: Ngƣời hƣớng dẫn thứ 2: Họ tên: ………………………………………………………………………… Học hàm, học vị:………………………………………………………………………… Cơ quan công tác: …………………………………………………………………………… Nội dung hướng dẫn: …………………… Đề tài tốt nghiệp giao ngày … tháng … năm 20 Yêu cầu phải hoàn thành trước ngày … tháng … năm 20 Đã nhận nhiệm vụ: Đ.T.T.N Đã nhận nhiệm vụ: Đ.T.T.N Sinh viên Cán hướng dẫn Đ.T.T.N Hải Phòng, ngày …… tháng …… năm 20…… HIỆU TRƯỞNG GS.TS.NGƢT TRầN HữU NGHị PHẦN NHẬN XÉT TÓM TẮT CỦA CÁN BỘ HƢỚNG DẪN Tinh thần thái độ sinh viên trình làm đề tài tốt nghiệp: Đánh giá chất lượng đề tài tốt nghiệp (so với nội dung yêu cầu đề nhiệm vụ đề tài tốt nghiệp) Cho điểm cán hộ hướng dẫn: (Điểm ghi số chữ) Ngày tháng … năm 20… Cán hướng dẫn (Ký, ghi rõ họ tên) PHẦN NHẬN XÉT ĐÁNH GIÁ CỦA CÁN BỘ CHẤM PHẢN BIỆN ĐỀ TÀI TỐT NGHIỆP Đánh giá chất lƣợng đề tài tốt nghiệp (về mặt nhƣ sở lý luận, thuyết minh chƣơng trình, giá trị thực tế, ) Cho điểm cán phản biện:(Điểm ghhi số chữ) Ngày tháng … năm 20… Cán chấm phản biện (Ký, ghi rõ họ tên) Đồ án tốt nghiệp Trường ĐHDL Hải Phòng LờI CảM ƠN Trước hết em xin bày tỏ tình cảm lịng biết ơn thầy Nguyễn Trịnh Đông –Khoa Công nghệ Thông tin – Trường Đại học Dân Lập Hải Phòng,người dành cho em nhiều thời gian quý báu, trực tiếp hướng dẫn tận tình giúpđỡ, bảo em suốt trình làm đồ án tốt nghiệp Em xin chân thành cảm ơn tất thầy cô giáo khoa Công nghệThông tin - Trường ĐHDL Hải Phòng, chân thành cảm ơn thầy giáo, cô giáo thamgia giảng dạy truyền đạt kiến thức quý báu suốt thời gian em học tậptại trường, đọc phản biện đồ án em giúp em hiểu rõ vấn đề mìnhnghiên cứu, để em hồn thành đồ án Em xin cảm ơn GS.TS.NGƯT Trần Hữu Nghị Hiệu trưởng Trường Đại họcDân lập Hải Phòng, Ban giám hiệu nhà trường, Bộ mơn tin học, Phịng ban nhàtrường tạo điều kiện tốt suốt thời gian học tập làm tốt nghiệp Tuy có nhiều cố gắng trình học tập, thời gian thực tập nhưtrong trình làm đồ án khơng thể tránh khỏi thiếu sót, em mongđược góp ý quý báu tất thầy giáo, cô giáo tất bạn để kết em hoàn thiện Em xin chân thành cảm ơn! Hải Phòng, ngày 24 tháng 06 năm 2013 Sinh viên Đặng Đức Tuyển Đặng Đức Tuyển – Lớp CT1301 Đồ án tốt nghiệp Trường ĐHDL Hải Phòng Mở ĐầU Với tăng trưởng ngày mạnh mẽ Internet, thuật ngữ Web 2.0 RIA (Rich Internet Application) diện khắp nơi Người sử dụng máy tính, trang bị phần cứng nhanh băng thông mạng tốt hơn, thường xuyên đặt yêu cầu phức tạp Web đại để sử dụng được, mà phải bắt mắt giàu khả tương tác Trước thực tế đó, rõ ràng HTML cần phải thay đổi, thay đổi trình dài! Hơn 13 năm kể từ HTML4 xuất hiện, HTML5 tập tễnh bước đầu tiên! Mặc dù vậy, HTML5 mang đủ sức hấp dẫn để gây nên nhiều ý HTML5 làm cho việc thiết kế phát triển web dễ dàng cách tạo giao diện ngơn ngữ đánh dấu chuẩn hóa trực quan HTML5 cung cấp công cụ quản lý liệu, đồ họa (2D 3D), phim, âm có hiệu mà không cần phải cài đặt thêm phần phần hãng thứ Nó tạo điều kiện cho phát triển ứng dụng trình duyệt với cho trang web cho thiết bị di động HTML5 công nghệ thúc đẩy cải tiến dịch vụ điện tốn đám mây di động, tính đến tính linh hoạt rộng hơn, cho phép phát triển trang web thú vị có khả tương tác Nó đưa vào thẻ cải tiến mới, bao gồm cấu trúc thu nhỏ, nút điều khiển biểu mẫu, API, đa phương tiện, hỗ trợ sở liệu, tốc độ xử lý nhanh đáng kể Do nên HTML5 có khả xuất tất thứ giới từ nội dung văn đơn giản đến đa phương tiện phong phú, tương tác cho nhà thiết kế nhà phát triển trình độ Các thẻ mới, phương thức mới, framework phát triển chung dựa tác động lẫn HTML5 hai đối tác nó, CSS3 JavaScript Đây cốt lõi tượng xử lý ứng dụng lấy máy khách làm trung tâm Ngoài việc triển khai kỹ thuật phương thức cơng nghệ HTML5 cho máy tính để bàn, triển khai thực HTML5 nhiều trình duyệt điện thoại di động web có tính phong phú - thị trường phát triển, chứng kiến phổ biến hệ điều hành web Apple iOS, Google Android, điện thoại chạy Palm Đặng Đức Tuyển – Lớp CT1301 Đồ án tốt nghiệp Trường ĐHDL Hải Phòng { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } Thêm giao diện CSS ta giao diện kéo-thả Hình 2.27: Hình 2.27 Ví du drag-and -drop Làm cho thành phần kéo Từ ví dụ đoạn mã tạo giao diện kéo thả hình trên, để làm cho thành phần kéo được, ta thiết lập thuộc tính draggable=”true” Theo ví dụ thiết lập thành phần ảnh logo kéo được; Đặng Đức Tuyển – Lớp CT1301 51 Đồ án tốt nghiệp Trường ĐHDL Hải Phịng Sử dụng thuộc tính ondragstart phương thức setData() Sau thiết lập thành phần draggable, ta phải xác định xảy thành phần kéo Trong ví dụ trên, thuộc tính ondragstart gọi hàm drag(event) để xác định liệu kéo Phương thức dataTransfer.setData() đặt kiểu liệu giá trị liệu kéo Trong trường hợp này, kiểu liệu “Text” giá trị id thành phần(“drag1”): function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } Thuộc tính ondragover Thuộc tính ondragover xác định nơi liệu kéo thả xuống.Mặc định thành phần liệu thả vào thành phần khác Để cho phép thả vậy, ta phải chặn thiết lập mặc định việc gọi phương thức event.preventDefault() cho thuộc tính ondragover: event.preventDefault(); Thuộc tính ondrop Khi liệu thả, kiện thả xảy Trong ví dụ trên, thuộc tính ondrop gọi hàm drop(event): function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } Giải thích: Đầu tiên gọi phương thức preventDefault() để chặn lại thiết lập mặc định trình duyệt để xử lý liệu (mặc định mở liên kết thả) Lấy liệu kéo với phương thức dataTransfer.getData(“Text”) Phương thức trả lại liệu mà đặt kiểu phương thức setData() Xác định liệu kéo id (“drag1”) Thêm thành phần kéo vào thành phần thả Đặng Đức Tuyển – Lớp CT1301 52 Đồ án tốt nghiệp Trường ĐHDL Hải Phòng Thực kéo thả ta Hình 2.28: Hình 2.28 Thực kéo thả 2.3.10 Web Workers API Web Worker gì? Khi thực thi script trang HTML trang khơng thực giao tiếp với server script hoàn thành Một web worker JS chạy Web, độc lập với script khác không làm ảnh hưởng đến hiệu suất trang Ta làm thứ click chuột, quét chọn, web worker chạy Để biết rõ web worker ta làm ví dụ đơn giản nhảy số tăng dần: Kiểm tra trình duyệt có hỗ trợ Web Worker Trước tạo web worker, ta phải kiểm tra xem trình duyệt dùng có hỗ trợ khơng: if(typeof(Worker)!=="undefined") { // Có hỗ trợ // Viết code } else { // Không hỗ trợ } Tạo file Web Worker Chúng ta tạo script đếm Script viết file demo_workers.js: Đặng Đức Tuyển – Lớp CT1301 53 Đồ án tốt nghiệp Trường ĐHDL Hải Phòng var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500); } timedCount(); Phần quan trọng đoạn code phương thức postMessage(), dùng để gửi thơng tin đến trang HTML Tạo đối tương Web Worker Chúng ta có file web worker, ta cần gọi từ trang HTML Đoạn mã sau kiểm tra worker có hay chưa, chưa, tạo web worker chạy code file “demo_workers.js”: if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } Sau bạn gửi nhận thông tin từ web worker đoạn mã sau: w.onmessage=function(event){ document.getElementById("result").innerHTML=event.data; }; Khi web worker trả lại cho ta thông tin, đoạn mã kiện thực thi Dữ liệu từ web worker gửi đến lưu event.data Hủy Web Worker Khi đối tượng web worker tạo ra, tiếp tục hoạt động ta dùng phương thức terminate() để hủy nó: w.terminate(); Ví dụ hồn chỉnh

Count numbers:

Start Worker Stop Worker Đặng Đức Tuyển – Lớp CT1301 54 Đồ án tốt nghiệp Trường ĐHDL Hải Phòng var w; function startWorker() { if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; } else { document.getElementById("result").innerHTML="Trình duyệt không hỗ trợ Web Worker."; } } function stopWorker() { w.terminate(); } Giao diện Hình 2.29: Hình 2.29 Ví dụ sử dụng Web Worker 2.3.11 Storage APIs Web Storage gì? Với HTML5, trang web lưu trữ liệu máy khách trình duyệt người dùng Trước đây, điều thực với cookies Tuy nhiên với Web Storage an toàn nhanh nhiều Đặng Đức Tuyển – Lớp CT1301 55 Đồ án tốt nghiệp Trường ĐHDL Hải Phòng Sự xuất Web Storage điểm nhấn cho việc đời ứng dụng web có khả tương tác nạp liệu tức trình duyệt Một hiệu dung lượng truyền tải qua mạng giảm thiểu đáng kể Với ứng dụng web có sở liệu nhỏ gọn, lập trình viên thực việc cache “âm thầm” sở liệu xuống client sau người dùng thoải mái tra cứu mà không cần request đến server Dữ liệu lưu trữ cặp key/value, trang web truy cập vào liệu lưu trữ localStorage and sessionStorage Có hai đối tượng cho lưu trữ liệu máy client:  localStorage – lưu trữ liệu không giới hạn thời gian  sessionStorage – lưu trữ liệu cho phiên làm việc session Trước sử dụng web storage, ta phải kiểm tra trình duyệt có hỗ trợ localStorage sesionStorage: if(typeof(Storage)!=="undefined") { // localStorage and sessionStorage hỗ trợ! // Code } else { // Trình duyệt không hỗ trợ } Đối tượng localStorage Đối tượng localStorage lưu trữ liệu không giới hạn thời gian, liệu khơng bị xóa trình duyệt đóng Ví dụ: localStorage.school="HPU"; document.getElementById("result").innerHTML="School: " + localStorage.school; Giải thích:  Tạo cặp key/value với key=”school” value=”HPU”  Nhận giá trị khoa “school” chèn vào thành phần có id=”result” Đặng Đức Tuyển – Lớp CT1301 56 Đồ án tốt nghiệp Trường ĐHDL Hải Phòng Đối tượng sessionStorage Đối tượng sessionStorage sử dụng tương đương với localStorage khác điều liệu lưu trữ cho phiên làm việc Dữ liệu người dùng đóng trình duyệt Ví dụ: Đếm số lần người dùng kích chuột vào nút, phiên làm việc tại: if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1 ; } else { sessionStorage.clickcount=1; } document.getElementById("result").innerHTML="Bạn kích " + sessionStorage.clickcount + " lần phiên làm việc này."; 2.3.12 Tạo Offline Web Applications Với HTML5 thật dễ dàng tạo ứng dụng web offline mà không cần đến kết nối internet Application Cache có lợi sau:  Duyệt web offline – người dùng sử dụng ứng dụng mà không cần đến kết nối mạng internet  Tốc độ - cache có tốc độ nhanh  Giảm tải cho server - Trình duyệt cần tải cập nhật từ server HTML5 Cache Manifest Ví dụ: Ví dụ sau tài liệu HTML với cache manifest (cho duyệt web offline): The content of the document Cơ Cache Manifest Để kích hoạt application cache, ta chèn thuộc tính manifest vào thẻ : Đặng Đức Tuyển – Lớp CT1301 57 Đồ án tốt nghiệp Trường ĐHDL Hải Phòng Nếu trang có thuộc tính manifest lưu lại nhớ cache người dùng truy cập đến Nếu trang web khơng thiết lập thuộc tính manifest khơng lưu cache trừ file manifest có dịng lệnh thiết lập trực tiếp cho Phần mở rộng file manifest là: “.appcache” Để sử dụng file manifest cần phải thiết lập máy chủ kiểu MIME-type “text/cache-manifest” Manifest File File manifest file văn đơn giản, nói cho trình duyệt biết phải cache khơng cache File manifest có phần:  CACHE MANIFEST – Danh sách file cache sau lần truy cập  NETWORK – Danh sách file bắt buộc phải có kết nối internet khơng lưu cache  FALLBACK – Liệt kê danh sách trang dự phịng trang khơng thể truy cập Bảng 2.11 Mô tả cấu trúc file manifest Phần Khai báo CACHE MANIFEST CACHE MANIFEST /theme.css /logo.gif /main.js … NETWORK login.php … NETWORK Đặng Đức Tuyển – Lớp CT1301 Mơ tả - Dịng bắt buộc khai báo từ khóa:“CACHE MANIFEST” -Những dịng bên trái có quy định file css, js, gif tải máy từ website - Những phần sau dòng NETWORK u cầu phải có kết nối internet, ví dụ file login.php không lưu cache không làm việc offline 58 Đồ án tốt nghiệp FALLBACK Trường ĐHDL Hải Phòng NETWORK * -Dấu (*) yêu cầu tất file phải có kết nối internet FALLBACK /html/ /offline.html - Xác định file “offline.html” dùng trường hợp khơng có kết nối internet Cập nhật Cache Một ứng dụng cache cache xảy điều sau:  Người dùng xóa cache trình duyệt  File manifest chỉnh sửa  Bộ nhớ cache ứng dụng cập nhật theo chương trình Ví dụ:Một file cache manifest: CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html/ /offline.html Dòng bắt đầu với ký tự “#” dịng thích Một ứng dụng cache cập nhật file manifest bị thay đổi Nếu bạn sửa hình ành hàm JS, thay đổi khơng bị ảnh hưởng đến cache Cập nhật ngày, phiên vào dòng ghi cách để trình duyệt cache trang web Ghi Bạn phải cẩn thận với bạn cache Một file bị cache trình duyệt tiếp tục hiển thị phiên cache trước đó, cho dù bạn thay đổi file máy chủ máy trạm cache cũ Do đó, mốn cache cập nhật bạn phải thay đổi file manifest Lưu ý: Trình duyệt có giới hạn dung lượng cache khác (một vài trình duyệt giới hạn dung lượng cache 5MB cho website) Đặng Đức Tuyển – Lớp CT1301 59 Đồ án tốt nghiệp Trường ĐHDL Hải Phòng CHƢƠNG 3: XÂY DựNG ứNG DụNG 3.1 Giới thiệu ứng dụng Từ công nghệ hấp dẫn HTML5 trình bày trên, em tạo ứng dụng sau:  Website chia sẻ video : Website cho phép người dùng tải lên video họ chia sẻ với người khác qua đường link video tải lên  Xác định vị trí: Ứng dụng giúp xác định vị trí người dùng Những ứng dụng xây dựng sử dụng thành phần sau HTML5:     Thành phần sử dụng để phát clip website Tính drag-and-drop HTML5 dùng để kéo-thả file upload XMLHttpRequestmức dùng để tải file video lên máy chủ Các thuộc tính form, ứng dụng form nhập thông tin video upload  Tính Geolocation để xác định vị trí 3.2 Yêu cầu phần cứng Ứng dụng Website chia sẻ video cần máy chủ có dung lượng ổ cứng lớn để lưu trữ liệu video người dùng tải lên đường truyền tốt giúp người dùng upload download video nhanh 3.3 Yêu cầu phần mềm Hệ điều hành: Windows / Linux Máy chủ web: Apache Ngôn ngữ xây dựng: HTML5, PHP, JavaScript, CSS Hệ quản trị sở liệu: MySQL 3.4Một số giao diện Sau số giao diện ứng dụng Đặng Đức Tuyển – Lớp CT1301 60 Đồ án tốt nghiệp Trường ĐHDL Hải Phòng 3.4.1 Website chia sẻ videovà Xác định vị trí Giao diện xem video (Hình 3.1) sử dụng thành phần HTML5 Hình 3.1 Giao diện trang xem video Đặng Đức Tuyển – Lớp CT1301 61 Đồ án tốt nghiệp Trường ĐHDL Hải Phịng Giao diện trang upload (Hình 3.2) sử dụng tính drag-and-drop, XMLHttpRequest mức thuộc tính form HTML5 Hình 3.2 Giao diện trang upload Giao diện ứng dụng Xác định vị trí (Hình 3.3) sử dụng tính Geolocation HTML5 API Google Maps Script để hiển thị vị trí người dùng Hình 3.3 Giao diện ứng dụng Xác định vị trí Đặng Đức Tuyển – Lớp CT1301 62 Đồ án tốt nghiệp Trường ĐHDL Hải Phòng 3.4.2 Một số ứng dụng khác HTML5 đánh cao trình diễn đồ họa 2D 3D trình duyệt, sau số ứng dụng khác em sưu tầm từ nhiều nguồn khác mà thể rõ khả HTML5 Ứng dụng vẽ biểu đồ 3D TeeChart (Hình 3.4) Steema Software, sử dụng thành phần WebGL Hình 3.4 Ứng dụng vẽ đồ thị 3D TeeChart Trị chơi đua phi thuyền HexGL (Hình 3.5) Thibaut Despoulain sử dụng , WebGL với thư viện three.js Hình 3.5 Trị chơi đua phi thuyền HexGL Đặng Đức Tuyển – Lớp CT1301 63 Đồ án tốt nghiệp Trường ĐHDL Hải Phịng KếT LUậN Qua q trình thực đồ án tốt nghiệp với đề tài “Xây dựng ứng dụng Web với HTML 5.0” em thấy đạt số kết địnhvà thu số kết sau: Nắm kiến thức Web HTML Bên cạnh cơng nghệ HTML5 với CSS, JavaScript Rút số kinh nghiệm học cách làm việc khoa học, chủ động nghiên cứu cơng nghệ Có thể áp dụng kiến thức học vào thực tiễn, đồng thời thu thập nhiều kiến thức khác từ trình làm đồ án Vận dụng kiến thức học vào việc nghiên cứu áp dụng cho vấn đề gặp phải trình làm việc cách hiệu Thử nghiệm ngơn ngữ PHP để tạo ứng dụng minh họa cho đề tài Đối vớiHTML5 cơng nghệ mà mang đến, chưa hoàn chỉnh trở thành chuẩn cho giới web tương lai Giờ đây, số cơng nghệ giúp ta cần trình duyệt hỗ trợ HTML5 làm điều mà khơng cần plugin hãng thứ ba (như Flash, Silverlight, ) Đặng Đức Tuyển – Lớp CT1301 64 Đồ án tốt nghiệp Trường ĐHDL Hải Phòng TÀI LIệU THAM KHảO [1] Flanagan, David.JavaScript: The Definitive Guide, 6th Edition s.l : O'Reilly Media, 2011 p 1100 [2] Hogan, Brian P.HTML5 and CSS3: Develop with Tomorrow's Standards Today s.l : Pragmatic Bookshelf, 2011 p 280 978-1934356685 [3] Lubbers, Peter, Salim, Frank and Albers, Brian.Pro HTML5 Programming, 2nd Edition s.l : Apress, 2011 p 352 978-1430238645 [4] Lawson, Bruce; Sharp, Remy.Introducing HTML5 (2nd Edition) s.l : New Riders, 2011 p 312 978-0321784421 [5] W3Schools [Online] http://www.w3schools.com/html [6] IBM developerWorks [Online] http://www.ibm.com/developerworks/vn/library/wa-html5fundamentals/ [7] Wikipedia - Web 2.0 [Online] http://en.wikipedia.org/wiki/Web_2.0 [8] Wikipedia - HTML5 [Online] http://en.wikipedia.org/wiki/HTML5 Đặng Đức Tuyển – Lớp CT1301 65