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 trình làm đồ án khơng thể tránh khỏi thiếu sót, em mong 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 11 năm 2019 Sinh viên Đỗ 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ữ 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 Đỗ 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ụ toán, phát biểu toá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 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 5.Sơ đồ luồng liệu mức 70 5.1 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 6.3 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 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 đồng API Application Programming Interface – Giao diện lập trình ứng dụng CSS DOM JavaScript XML khơng 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 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 1.0 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 1.0 9Ví dụ kiểu input: color 42 Hình 1.0 10Ví dụ kiểu input: date 43 Hình 1.0 11 Ví dụ kiểu input: datetime 43 Hình 1.0 12 Ví dụ kiểu input: datetime- local 43 Hình 1.0 13 Ví dụ kiểu input: email 43 Hình 14 Ví dụ kiểu input: number 43 Hình 1.0 15 Ví dụ kiểu input: range 45 Hình 1.0 16 Ví dụ kiểu input: search 45 Hình 1.0 17 Ví dụ kiểu input: tel 46 Hình 1.0 18Ví dụ kiểu input: time 46 Hình 1.0 19 Ví dụ kiểu input: url 46 Hình 1.0 20 Ví dụ kiểu input: week 47 Hình 1.0 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.0 Ma trận thực thể 69 Hình Biểu đồ luồng liệu mức 72 Hình 3.0 Sơ đồ luồng liệu 73 Hình 3.0 Sơ đồ luồng liệu 74 Hình 3.0 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 2Những kiểu nội dung HTML51 21 Bảng1 3Những thành phần vùng nội dung HTML5 21 Bảng1 4So sánh Canvas SVG 27 Bảng1 5Các trình duyệt hỗ trợ chuẩn codec khác 31 Bảng1 6Các thuộc tính Nhúng âm (audio) 32 Bảng1 7Các thuộc tính thẻ : 33 Bảng1 8Các kiện 34 Bảng1 9Cá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 1Sơ đồ tiến trình nghiệp vụ quản lý hệ thống 62 Bảng3 2Sơ đồ tiến trình nghiệp vụ quản trị bán hàng 63 Bảng3 3Sơ đồ tiến trình nghiệp vụ thống kê báo cáo 64 Bảng3 4Bảng phân tích 66 Bảng3 5Bảng nhóm thành phần 67 Bảng3 6Bảng thực thể mô tả thực thể 76 Đỗ Văn Tuấn Đạt - CT1301 10 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: Stt Tên Trường 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 Đồ án tốt nghiệp 82 Trường ĐHDL Hải Phòng Stt Tên Trườ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à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 q 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 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 Nắm 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 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/wahtml5fundamentals/ [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 ... 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ệ... nháp HTML5 phát hành Web Hypertext Application Technology (WHAT) Work Group Và WHATWG với W3C phát triển phiên HTML5 tiêu chuẩn HTML mà tất nhà phát triển sử dụng 3 Giới thiệu HTML HTML5 gì? HTML5 ... phân biệt Web Web 0: "DoubleClick Web 0; Đỗ Văn Tuấn Đạt - CT1301 15 Đồ án tốt nghiệp Trường ĐHDL Hải Phòng Google AdSense Web Ofoto Web 0; Flickr Web Britannica Online Web 0; Wikipedia Web 0, v