Xây dựng web bán và giới thiệu văn phòng phẩm với HTML 5 0

Đồ á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 Nguyễn Thị Thanh Thoan – 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 tham gia giảng dạy truyền đạt kiến thức quý báu suốt thời gian em học tập trƣờng, đọc phản biện đồ án em giúp em hiểu rõ vấn đề nghiê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ọc Dâ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ƣ trình làm đồ án nhƣng 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 nhƣ tất bạn để kết em đƣợc hoàn thiện Em xin chân thành cảm ơn! Hải Phòng, ngày 24 tháng 11 năm2013 Sinh viên Đỗ Văn Tuấn Đạt Đỗ Văn Tuấn Đạt - 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ữ nhƣ Web 2.0 RIA (Rich Internet Application) hầu nhƣ diện khắp nơi Ngƣời sử dụng máy tính, đƣợc 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 q 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 nhƣ cho thiết bị di động HTML5 công nghệ thúc đẩy cải tiến dịch vụ điện toá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 Đỗ Văn Tuấn Đạt - CT1301 Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phịng Chính lý trên, em chọn đề tài: “Xây dựng Web bán giới thiệu văn phòng phẩm với HTML 0” Đồ án bao gồm chƣơng:  Chƣơng 1: Phân tích thiết kế hƣớng hệ thống hƣớng cấu trúc tìm hiểu HTM5  Chƣơng 2: Khảo sát tìm hiểu nghiệp vụ tốn, phát biểu tốn  Chƣơng 3: Phân tích thiết kế hệ thống  Chƣơng : Chƣơng trình thực nghiệm Đỗ Văn Tuấn Đạt - CT1301 Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng Mục lục Mở đầu Mục lục Danh mục chữ viết tắt giải nghĩa Danh mục hình Chƣơng 1:Phân tích thiết kế hệ thống hƣớng cấu trúc tìm hiểu HTML5 11 PHÂN TÍCH THIẾT KẾ HỆ THỐNG HƢỚNG CẤU TRÚC 11 1Khái niệm hệ thống thông tin 11 2Tiếp cận phát triển hệ thống thông tin định hƣớng cấu trúc 13 Giới thiệuWeb- based 14 1Giới thiệu Web 14 1Khái niệm 14 2 Web 15 Kiến trúc Web 16 Tìm hiểu công nghệ HTML 17 Sự phát triển HTML 17 Giới thiệu HTML 18 HTML5 gì? 18 2 Những điểm HTML5 20 3 Những công nghệ HTML5 22 3 Canvas API 22 3 Scalable Vector Graphics 26 3 WebGL –3D Web 28 3 Audio Video 30 3 Geolocation API 34 3 Communication APIs 38 3 WebSocket API 40 3 Forms API 42 3 Drag- and- Drop 48 Đỗ Văn Tuấn Đạt - CT1301 Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng 3 10 Web Workers API 50 3 11 Storage APIs 53 3 12 Tạo Offline Web Applications 54 Chƣơng : Khảo sát tìm hiểu nghiệp vụ tốn – Phát biểu tốn 57 1.Giới thiệu cơng ty Văn phịng phẩm Hồng Hà 57 2.Phát biểu toán 59 Giới thiệu đề tài 59 2Yêu cầu toán đặt 59 Phát biểu toán 60 Chƣơng : Phần phân tích thiết kế hệ thống 62 Sơ đồ tiến trình nghiệp vụ 62 Sơ đồ ngữ cảnh 65 Lập bảng phân tích 66 1Lập bảng nhóm thành phần 67 3Biều đồ phân cấp chức 68 Ma trận thực thể 69 Sơ đồ luồng liệu mức 70 Sơ đồ luồng liệu mức 71 2Sơ đồ luồng liệu tiến trình : Quản lý bán hàng 72 3Sơ đồ luồng liệu tiến trình : Thống kê báo cáo 73 Thiết kế sở liệu 74 Các thực thể mô tả thực thể 74 Xác định liên kết 75 Mơ Hình ER 76 6.4 Áp dụng thuật tốn chuyển mơ hình quan hệ ER thành quan hệ sau: 77 6.5: Các quan hệ sau đƣợc chuẩn hóa 78 6 Mơ hình quan hệ 80 Các bảng liệu vật lý: 81 Chƣơng 4: Chƣơng trình thực nghiệm 84 Cài đặt chƣơng trình 84 Đỗ Văn Tuấn Đạt - CT1301 Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phịng Một số giao diện 84 Kết Luận 89 Tài liệu tham khảo 90 Phụ Lục : hồ sơ liên quan 91 Đỗ Văn Tuấn Đạt - CT1301 Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng Danh mục chữ viết tắt giải nghĩa Từ viết tắt Giải nghĩa 2D Two dimension – Hai chiều 3D Three dimension – Ba chiều AJAX Asynchronous JavaScript and XML - JavaScript XML không đồng API Application Programming Interface – Giao diện lập trình ứng dụng CSS DOM Cascading Style Sheets - Miêu tả cách trình bày tài liệu viết ngơn ngữ HTML XHTML Document Object Model - Mơ hình Đối tƣợng Tài liệu, giao diện lập trình ứng dụng (API) ECMAScript Là phiên chuẩn hóa JavaScript HTTP HyperText Transfer Protocol - Giao thức truyền tải siêu văn HTTPS IETF JS Secure HTTP - Một kết hợp giao thức HTTP giao thức bảo mật SSL hay TLS cho phép trao đổi thông tin cách bảo mật Internet The Internet Engineering Task Force - Lực lƣợng đặc nhiệm kỹ thuật Internet Tổ chức IETF phát triển xúc tiến tiêu chuẩn Internet, có quan hệ hợp tác gần gũi với tổ chức tiêu chuẩn W3C ISO/IEC JavaScript - ngôn ngữ lập trình kịch dựa đối tƣợng đƣợc phát triển từ ý niệm nguyên mẫu JSON JavaScript Object Notation - Là kiểu liệu JavaScript RDF Resource Description Framework - Framework Mô Tả Tài Nguyên REST SGML SOAP XML Representational State Transfer - Dạng yêu cầu dịch vụ web mà máy khách truyền trạng thái tất giao dịch Standard Generalized Markup Language –Một chuẩn ISO, hệ thống tổ chức gắn thẻ yếu tố tài liệu Simple Object Access Protocol - Giao thức sử dụng XML để định nghĩa liệu dạng văn (plain text) thông qua HTTP eXtensible Markup Language - Ngôn ngữ Đánh dấu Mở rộng Đỗ Văn Tuấn Đạt - CT1301 Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phịng Danh mục hình Hình 1 So sánh Web Web 15 Hình Mơ tả phƣơng thức arc() 24 Hình Ví dụ vẽ hình SVG 27 Hình Mối liên hệ JS, WebGL GPU 29 Hình 0.5 Ví dụ WebGL – Google Search (3D Graph) 30 Hình 6Ví dụ WebGL – Trị chơi 3D Gwt Quake II 30 Hình 7Ví dụ sử dụng Geolocation API Google Maps 37 Hình 8Quá trình bắt tay Websocket 41 Hình 9Ví dụ kiểu input: color 42 Hình 10Ví dụ kiểu input: date 43 Hình 11 Ví dụ kiểu input: datetime 43 Hình 12 Ví dụ kiểu input: datetime- local 43 Hình 13 Ví dụ kiểu input: email 43 Hình 14 Ví dụ kiểu input: number 43 Hình 15 Ví dụ kiểu input: range 45 Hình 16 Ví dụ kiểu input: search 45 Hình 17 Ví dụ kiểu input: tel 46 Hình 18Ví dụ kiểu input: time 46 Hình 19 Ví dụ kiểu input: url 46 Hình 20 Ví dụ kiểu input: week 47 Hình 21 Ví dụ thành phần 47 Hình 22Ví dụ thành phần 48 Hình 23 Ví dụ thành phần 48 Hình 24 Ví du drag- and - drop 50 Hình 25 Thực kéo thả 52 Đỗ Văn Tuấn Đạt - CT1301 Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng Hình 26Ví dụ sử dụng Web Worker 54 Hình Sơ đồ ngữ cảnh 67 Hình Biểu đồ phân cấp chức 69 Hình 3 Ma trận thực thể 69 Hình Biểu đồ luồng liệu mức 72 Hình Sơ đồ luồng liệu 73 Hình Sơ đồ luồng liệu 74 Hình Sơ đồ luồng liệu 75 Hình 0.8 Mơ hình E-R 76 Đỗ Văn Tuấn Đạt - CT1301 Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng Danh mục bảng Bảng1 1So sánh wed1 vs wed2 16 Bảng1 Những kiểu nội dung HTML51 21 Bảng1 Những thành phần vùng nội dung HTML5 21 Bảng1 So sánh Canvas SVG 27 Bảng1 Các trình duyệt hỗ trợ chuẩn codec khác 31 Bảng1 Các thuộc tính Nhúng âm (audio) 32 Bảng1 Các thuộc tính thẻ : 33 Bảng1 Các kiện 34 Bảng1 Các thuộc tính phƣơng thức getCurrentPosition() 37 Bảng1 10 Các thuộc tính > 47 Bảng1 11 Các thuộc tính 48 Bảng1 12 Mô tả cấu trúc file manifest 56 Bảng3 Sơ đồ tiến trình nghiệp vụ quản lý hệ thống 62 Bảng3 Sơ đồ tiến trình nghiệp vụ quản trị bán hàng 63 Bảng3 Sơ đồ tiến trình nghiệp vụ thống kê báo cáo 64 Bảng3 Bảng phân tích 66 Bảng3 Bảng nhóm thành phần 67 Bảng3 Bảng thực thể mô tả thực thể 76 Đỗ Văn Tuấn Đạt - CT1301 10 Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng Bảng LOAI: Là bảng lƣu thông tin loại hàng, thông tin lƣu trữ gồm: Stt Tên Trƣờng Kiểu liệu Kích cớ Ghi MaLoai INT 11 Mã Loại, khóa TenLoai VARCHAR 50 Tên loại Bảng NHACUNGCAP:Là bảng lƣu thông tin nhà cung cấp,thông tin lƣu trữ gồm: Stt Tên Trƣờng Kiểu liệu Kích cớ Ghi MaSoThue VARCHAR 50 Mã số thuế, khóa TaiKhoanNganHang VARCHAR 50 Tài khoản ngân hàng DienThoai VARCHAR 13 Điện thoại TenNhaCungCap VARCHAR 50 Tên nhà cung cấp DiaChi VARCHAR 50 Địa nhà cung cấp Bảng DONNHAPHANG: Là bảng lƣu thông tin đơn nhập hàng, thông tin lƣu trữ gồm: Tên Trƣờng Stt Kiểu liệu Kích Ghi cớ 50 Mã số đơn nhập, khóa MaSoDonNhap VARCHAR NgayThang DATE PhuongThucThanhToan VARCHAR 50 Phƣơng thức toán SoLuong VARCHAR 255 Số lƣợng ThanhTien BIG INT 20 Thành tiền SoTaiKhoan VARCHAR 20 Số tài khoản MaSoThue VARCHAR 50 Mã số thuế nhà cung cấp MaSP VARCHAR 50 Mã sản phẩm Ngày tháng nhập hàng Bảng HOADON:Là bảng lƣu thơng tin hóa đơn, thơng tin gồm: Đỗ Văn Tuấn Đạt - CT1301 82 Đồ án tốt nghiệp Stt Tên Trƣờng Trƣờng ĐHDL Hải Phòng Kiểu liệu MaSoHoaDon VARCHAR Kích Ghi cớ 50 Mã số hóa đơn, khóa SoLuong VARCHAR 255 NgayLap DATE TongTien BIG INT 20 Thành tiền TenDN VARCHAR 20 Tên đăng nhập SoTaiKhoan VARCHAR 20 Số tài khoản ThanhCong INT 11 Đánh dấu trạng thái giao hàng Số lƣợng Ngày tháng / Thành công /Thất bại MaHang VARCHAR 50 Mã sản phẩm Bảng DONDATHANG:Là bảng lƣu thông tin đơn đặt hàng, thông tin gồm: Stt Tên Trƣờng Kiểu liệu MaDonHang VARCHAR Kích Ghi cớ 50 Mã đơn đặt hàng, khóa SoLuong VARCHAR 255 NgayDat DATE Ngày đặt NgayTra DATE Ngày trả MaHang VARCHAR 50 Mã sản phẩm TinhTrang INT 11 Tình trạng đơn đặt hàng ThanhTien BIG INT 20 Tổng tiền đơn hàng TenDN VARCHAR 20 Tên đăng nhập ThanhToan INT 11 Trạng thái hình thức Số lƣợng tốn 10 Comment Đỗ Văn Tuấn Đạt - CT1301 TEXT Yêu cầu khách hàng 83 Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phịng Chƣơng 4: Chƣơng trình thực nghiệm Cài đặt chƣơng trình - Hệ thống đƣợc cài đặt chạy môi trƣờng WindowsXP (SP3), Windows7, Windows Vista - Hệ quản trị sở liệu Mysql - Ngơn ngữ lập trình PHP, HTML5 Một số giao diện a Giao diện trang web Đỗ Văn Tuấn Đạt - CT1301 84 Đồ án tốt nghiệp Đỗ Văn Tuấn Đạt - CT1301 Trƣờng ĐHDL Hải Phòng 85 Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng b Giao diện chức cập nhật sản phẩm Đỗ Văn Tuấn Đạt - CT1301 86 Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng c Giao diện chức thêm thành viên Đỗ Văn Tuấn Đạt - CT1301 87 Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng d Giao diện chức đặt hàng Đỗ Văn Tuấn Đạt - CT1301 88 Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng Kết Luận Qua trình thực đồ án tốt nghiệp với đề tài “Xây dựng Web giới thiệu văn phòng phẩm Hồng Hà với HTML 0” em thấy đạt đƣợc số kết địnhvà thu đƣợc số kết sau: Nắm đƣợc kiến thức Web HTML Bên cạnh công nghệ HTML5 với CSS, JavaScript Rút đƣợc 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 đƣợc học vào thực tiễn, đồng thời thu thập đƣợc nhiều kiến thức khác từ trình làm đồ án Nắm đƣợc kiến thức phân tích thiết kế hệ thống làm việc có khoa học Vì thời gian có hạn, kinh nghiệm thực tế chƣa nhiều nên việc phân tích tốn thực tƣơng đối đầy đủ, nhiên chƣa mơ tả đầy đủ khía cạnh vấn đề Kính mong thầy góp ý để làm em đƣợc hoàn chỉnh Đỗ Văn Tuấn Đạt - CT1301 89 Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng Tài liệu tham khảo [1] Nguyễn Văn Vỵ, Phân tích thiết kế hệ thống thơng tin đại, hƣớng cấu trúc –hƣớng đối tƣợng, NXB Thống kê Hà Nội – 2002 [2] Flanagan, David JavaScript: The Definitive Guide, 6th Edition s l : O'Reilly Media, 2011 p 1100 [3] Hogan, Brian P HTML5 and CSS3: Develop with Tomorrow's Standards Today s l : Pragmatic Bookshelf, 2011 p 280 978- 1934356685 [4] Lubbers, Peter, Salim, Frank and Albers, Brian Pro HTML5 Programming, 2nd Edition s l : Apress, 2011 p 352 978- 1430238645 [5] Lawson, Bruce; Sharp, Remy Introducing HTML5 (2nd Edition) s l : New Riders, 2011 p 312 978- 0321784421 [6] W3Schools [Online] http://www w3schools com/html [7] IBM developerWorks [Online] http://www ibm com/developerworks/vn/library/wa- html5fundamentals/ [8] Wikipedia - Web [Online] http://en wikipedia org/wiki/Web_2 [9] Wikipedia - HTML5 [Online] http://en wikipedia org/wiki/HTML5 Đỗ Văn Tuấn Đạt - CT1301 90 Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng Phụ Lục : hồ sơ liên quan Đỗ Văn Tuấn Đạt - CT1301 91 Đồ án tốt nghiệp Đỗ Văn Tuấn Đạt - CT1301 Trƣờng ĐHDL Hải Phòng 92 Đồ án tốt nghiệp Đỗ Văn Tuấn Đạt - CT1301 Trƣờng ĐHDL Hải Phòng 93 Đồ án tốt nghiệp Đỗ Văn Tuấn Đạt - CT1301 Trƣờng ĐHDL Hải Phòng 94 Đồ án tốt nghiệp Đỗ Văn Tuấn Đạt - CT1301 Trƣờng ĐHDL Hải Phòng 95 Đồ án tốt nghiệp Đỗ Văn Tuấn Đạt - CT1301 Trƣờng ĐHDL Hải Phòng 96 ... org/ 200 0/svg" version="1 1" height="1 90" > < /html> ... văn bản, hình ảnh nhiều Hai dòng lệnh thực vẽ hình chữ nhật: ctx fillStyle="#FF 000 0"; ctx fillRect (0, 0, 1 50 , 75) ; Thuộc tính fillStyle màu CSS, màu gradient mẫu tô FillStyle mặc định #00 000 0,... mặc định 300 x 1 50 pixel Để thêm đƣờng viền, bạn sử dụng thuộc tính style Ví dụ: Vẽ Canvas với JavaScript