[block id=”bo-sung-1″]

Với sự tăng trƣởng ngày càng mạnh mẽ của Internet, các thuật ngữ nhƣ
Web 2.0 và RIA (Rich Internet Application) hầu nhƣ hiện diện ở khắp nơi.
Ngƣời sử dụng máy tính, đƣợc trang bị phần cứng nhanh hơn và băng thông
mạng tốt hơn, cũng thƣờng xuyên đặt ra những yêu cầu phức tạp. Web hiện
đại không phải chỉ là để sử dụng đƣợc, mà còn phải bắt mắt và giàu khả năng
tƣơng tác.
Trƣớc thực tế đó, rõ ràng HTML cũng cần phải thay đổi, và sự thay đổi
đó là cả một quá trình dài! Hơn 13 năm kể từ khi HTML4 xuất hiện, HTML5
mới đang tập tễnh những bƣớc đi đầu tiên! Mặc dù vậy, HTML5 mang trong
mình đủ sức hấp dẫn để gây nên nhiều sự chú ý.
HTML5 làm cho việc thiết kế và phát triển web dễ dàng hơn bằng cách
tạo một giao diện ngôn ngữ đánh dấu chuẩn hóa và trực quan. HTML5 cung cấp
các công cụ quản lý dữ liệu, đồ họa (2D và 3D), phim, và âm thanh có hiệu
quả mà không cần phải cài đặt thêm một phần phần của hãng thứ 3 nào. Nó tạo
điều kiện cho sự phát triển của các ứng dụng giữa các trình duyệt với nhau cho
trang web cũng nhƣ cho các thiết bị di động. HTML5 là một trong những công
nghệ thúc đẩy những cải tiến trong các dịch vụ điện toán đám mây di động , vì
nó tính đến tính linh hoạt rộng hơn, cho phép phát triển các trang web thú vị và
có khả năng tƣơng tác. Nó cũng đƣa vào thẻ và các cải tiến mới , bao gồm cấu
trúc thu nhỏ, các nút điều khiển của biểu mẫu, các API, đa phƣơng tiện, hỗ
trợ cơ sở dữ liệu, và tốc độ xử lý nhanh hơn đáng kể. Do vậy nên HTML5 có
khả năng xuất bản tất cả mọi thứ trên thế giới từ nội dung văn bản đơn giản đến
đa phƣơng tiện phong phú, tƣơng tác cho các nhà thiết kế và các nhà phát triển
ở mọi trình độ.

de_tai_xay_dung_web_ban_va_gioi_thieu_van_phong_pham_voi_htm

 

pdf96 trang | Chia sẻ: thuychi21 | Ngày: 12/12/2015 | Lượt xem: 1066 | Lượt tải: 3download

Bạn đang xem trước 20 trang tài liệu Đề tài Xây dựng Web bán và giới thiệu văn phòng phẩm với HTML 5. 0, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên

Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng
Đỗ Văn Tuấn Đạt – CT1301 1
Lời cảm ơn
Trƣớc hết em xin bày tỏ tình cảm và lòng biết ơn đối với cô 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 rất nhiều thời gian quý báu, trực tiếp hƣớng dẫn tận tình
giúp đỡ, chỉ bảo em trong suốt quá trình làm đồ án tốt nghiệp.
Em xin chân thành cảm ơn tất cả các thầy cô giáo trong khoa Công nghệ
Thông tin – Trƣờng ĐHDL Hải Phòng, chân thành cảm ơn các thầy giáo, cô
giáo tham gia giảng dạy và truyền đạt những kiến thức quý báu trong suốt thời
gian em học tập tại trƣờng, đã đọc và phản biện đồ án của em giúp em hiểu rõ hơn
các vấn đề mình nghiên cứu, để em có thể hoàn thành đồ án này.
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, các
Phòng ban nhà trƣờng đã tạo điều kiện tốt nhất trong suốt thời gian học tập và
làm tốt nghiệp.
Tuy có nhiều cố gắng trong quá trình học tập, trong thời gian thực tập cũng
nhƣ trong quá trình làm đồ án nhƣng không thể tránh khỏi những thiếu sót, em
rất mong đƣợc sự góp ý quý báu của tất cả các thầy giáo, cô giáo cũng nhƣ tất
cả các bạn để kết quả của em đƣợc hoàn thiện hơ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
Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng
Đỗ Văn Tuấn Đạt – CT1301 2
Mở đầu
Với sự tăng trƣởng ngày càng mạnh mẽ của Internet, các thuật ngữ nhƣ
Web 2.0 và RIA (Rich Internet Application) hầu nhƣ hiện diện ở khắp nơi.
Ngƣời sử dụng máy tính, đƣợc trang bị phần cứng nhanh hơn và băng thông
mạng tốt hơn, cũng thƣờng xuyên đặt ra những yêu cầu phức tạp. Web hiện
đại không phải chỉ là để sử dụng đƣợc, mà còn phải bắt mắt và giàu khả năng
tƣơng tác.
Trƣớc thực tế đó, rõ ràng HTML cũng cần phải thay đổi, và sự thay đổi
đó là cả một quá trình dài! Hơn 13 năm kể từ khi HTML4 xuất hiện, HTML5
mới đang tập tễnh những bƣớc đi đầu tiên! Mặc dù vậy, HTML5 mang trong
mình đủ sức hấp dẫn để gây nên nhiều sự chú ý.
HTML5 làm cho việc thiết kế và phát triển web dễ dàng hơn bằng cách
tạo một giao diện ngôn ngữ đánh dấu chuẩn hóa và trực quan. HTML5 cung cấp
các công cụ quản lý dữ liệu, đồ họa (2D và 3D), phim, và âm thanh có hiệu
quả mà không cần phải cài đặt thêm một phần phần của hãng thứ 3 nào. Nó tạo
điều kiện cho sự phát triển của các ứng dụng giữa các trình duyệt với nhau cho
trang web cũng nhƣ cho các thiết bị di động. HTML5 là một trong những công
nghệ thúc đẩy những cải tiến trong các dịch vụ điện toán đám mây di động, vì
nó tính đến tính linh hoạt rộng hơn, cho phép phát triển các trang web thú vị và
có khả năng tƣơng tác. Nó cũng đƣa vào thẻ và các cải tiến mới, bao gồm cấu
trúc thu nhỏ, các nút điều khiển của biểu mẫu, các API, đa phƣơng tiện, hỗ
trợ cơ sở dữ liệu, và tốc độ xử lý nhanh hơn đáng kể. Do vậy nên HTML5 có
khả năng xuất bản tất cả mọi thứ trên thế giới từ nội dung văn bản đơn giản đến
đa phƣơng tiện phong phú, tƣơng tác cho các nhà thiết kế và các nhà phát triển
ở mọi trình độ.
Các thẻ mới, các phƣơng thức mới, và một framework phát triển chung dựa
trên sự tác động lẫn nhau của HTML5 và hai đối tác của nó, CSS3 và
JavaScript. Đây là cốt lõi của hiện tƣợng xử lý ứng dụng lấy máy khách làm
trung tâm. Ngoài các việc triển khai các kỹ thuật và các phƣơng thức của công
nghệ HTML5 cho máy tính để bàn, có thể triển khai thực hiện HTML5 trong
nhiều trình duyệt điện thoại di động web có tính năng phong phú – một thị
trƣờng đang phát triển, khi đã chứng kiến sự phổ biến của các hệ điều hành
web Apple iOS, Google Android, và các điện thoại chạy Palm.
Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng
Đỗ Văn Tuấn Đạt – CT1301 3
Chính vì những lý do trên, em đã chọn đề tài: “Xây dựng Web bán và
giới thiệu văn phòng phẩm với HTML 5. 0”. Đồ án bao gồm 4 chƣơng:
 Chƣơng 1: Phân tích thiết kế hƣớng hệ thống hƣớng cấu trúc và tìm
hiểu về HTM5
 Chƣơng 2: Khảo sát tìm hiểu nghiệp vụ bài toán, phát biểu bài toán
 Chƣơng 3: Phân tích thiết kế hệ thống
 Chƣơng 4 : Chƣơng trình thực nghiệm
Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng
Đỗ Văn Tuấn Đạt – CT1301 4
Mục lục
Mở đầu ……………………………………………………………………………………………………………. 2
Mục lục …………………………………………………………………………………………………………… 4
Danh mục các chữ viết tắt và giải nghĩa ……………………………………………………………. 7
Danh mục hình ………………………………………………………………………………………………… 8
Chƣơng 1:Phân tích thiết kế hệ thống hƣớng cấu trúc và tìm hiểu về HTML5 … 11
1. PHÂN TÍCH THIẾT KẾ HỆ THỐNG HƢỚNG CẤU TRÚC ……………………….. 11
1. 1Khái niệm về hệ thống thông tin ………………………………………………………………. 11
1. 2Tiếp cận phát triển hệ thống thông tin định hƣớng cấu trúc …………………………. 13
2. Giới thiệuWeb- based ……………………………………………………………………………….. 14
2. 1Giới thiệu Web 2. 0 …………………………………………………………………………….. 14
2. 1. 1Khái niệm ………………………………………………………………………………………. 14
2. 1. 2 Web 2. 0 ………………………………………………………………………………………… 15
2. 1. 3 Kiến trúc cơ bản của Web ……………………………………………………………….. 16
3. Tìm hiểu các công nghệ trong HTML 5. 0 …………………………………………………… 17
3. 1 Sự phát triển của HTML ……………………………………………………………………… 17
3. 2 Giới thiệu HTML 5. 0…………………………………………………………………………. 18
3. 2. 1 HTML5 là gì? ………………………………………………………………………………… 18
3. 2. 2 Những điểm mới trong HTML5 ……………………………………………………….. 20
3. 3 Những công nghệ mới trong HTML5 …………………………………………………… 22
3. 3. 1 Canvas API ……………………………………………………………………………………. 22
3. 3. 2 Scalable Vector Graphics ………………………………………………………………… 26
3. 3. 3 WebGL –3D trên Web…………………………………………………………………….. 28
3. 3. 4 Audio và Video ………………………………………………………………………………. 30
3. 3. 5 Geolocation API …………………………………………………………………………….. 34
3. 3. 6 Communication APIs ……………………………………………………………………… 38
3. 3. 7 WebSocket API ……………………………………………………………………………… 40
3. 3. 8 Forms API …………………………………………………………………………………….. 42
3. 3. 9 Drag- and- Drop …………………………………………………………………………….. 48
Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng
Đỗ Văn Tuấn Đạt – CT1301 5
3. 3. 10 Web Workers API ………………………………………………………………………… 50
3. 3. 11 Storage APIs ………………………………………………………………………………… 53
3. 3. 12 Tạo Offline Web Applications ……………………………………………………….. 54
Chƣơng 2 : Khảo sát tìm hiểu nghiệp vụ bài toán – Phát biểu bài toá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 bài toán ……………………………………………………………………………………… 59
2. 1. Giới thiệu đề tài ………………………………………………………………………………… 59
2. 2Yêu cầu bài toán đặt ra ……………………………………………………………………….. 59
2. 3. Phát biểu bài toán ……………………………………………………………………………… 60
Chƣơng 3 : Phần phân tích thiết kế hệ thống ………………………………………………….. 62
1. Sơ đồ tiến trình nghiệp vụ …………………………………………………………………………. 62
2. Sơ đồ ngữ cảnh ………………………………………………………………………………………… 65
3. Lập bảng phân tích …………………………………………………………………………………… 66
3. 1Lập bảng nhóm các thành phần …………………………………………………………….. 67
3. 3Biều đồ phân cấp chức năng …………………………………………………………………. 68
4. Ma trận thực thể ……………………………………………………………………………………….. 69
5. Sơ đồ luồng dữ liệu mức 0 ………………………………………………………………………… 70
5. 1 Sơ đồ luồng dữ liệu mức 1 ………………………………………………………………….. 71
5. 2Sơ đồ luồng dữ liệu tiến trình : Quản lý bán hàng …………………………………… 72
5. 3Sơ đồ luồng dữ liệu tiến trình : Thống kê báo cáo …………………………………… 73
6. Thiết kế cơ sở dữ liệu ………………………………………………………………………………. 74
6. 1. Các thực thể và mô tả thực thể …………………………………………………………… 74
6. 2 Xác định các liên kết ………………………………………………………………………….. 75
6. 3 Mô Hình ER ……………………………………………………………………………………… 76
6.4 Áp dụng thuật toán chuyển mô hình quan hệ ER thành các quan hệ sau: …… 77
6.5: Các quan hệ sau khi đƣợc chuẩn hóa ……………………………………………………. 78
6. 6 Mô hình quan hệ ………………………………………………………………………………… 80
6. 7 Các bảng dữ liệu vật lý: ………………………………………………………………………. 81
Chƣơng 4: Chƣơng trình thực nghiệm ……………………………………………………………. 84
4. 1 Cài đặt chƣơng trình ………………………………………………………………………………. 84
Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng
Đỗ Văn Tuấn Đạt – CT1301 6
4. 2 Một số giao diện chính …………………………………………………………………………… 84
Kết Luận ……………………………………………………………………………………………………….. 89
Tài liệu tham khảo …………………………………………………………………………………………. 90
Phụ Lục : các hồ sơ liên quan …………………………………………………………………………. 91
Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng
Đỗ Văn Tuấn Đạt – CT1301 7
Danh mục các chữ viết tắt và 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 và XML không
đồng bộ
API Application Programming Interface – Giao diện lập trình ứng dụng
CSS
Cascading Style Sheets – Miêu tả cách trình bày các tài liệu viết
bằng ngôn ngữ HTML và XHTML
DOM
Document Object Model – Mô hình Đối tƣợng Tài liệu, là một giao
diện lập trình ứng dụng (API)
ECMAScript Là phiên bản chuẩn hóa của JavaScript.
HTTP HyperText Transfer Protocol – Giao thức truyền tải siêu văn bản
HTTPS
Secure HTTP – Một sự kết hợp giữa giao thức HTTP và giao thức
bảo mật SSL hay TLS cho phép trao đổi thông tin một cách bảo mật
trên Internet.
IETF
The Internet Engineering Task Force – Lực lƣợng đặc nhiệm kỹ
thuật Internet. Tổ chức IETF phát triển và xúc tiến các tiêu chuẩn
Internet, có quan hệ hợp tác gần gũi với các tổ chức tiêu chuẩn
W3C và ISO/IEC
JS
JavaScript – một ngôn ngữ lập trình kịch bản dựa trên đối tƣợng
đƣợc phát triển từ các ý niệm nguyên mẫu.
JSON JavaScript Object Notation – Là một kiểu dữ liệu trong JavaScript
RDF Resource Description Framework – Framework Mô Tả Tài Nguyên
REST
Representational State Transfer – Dạng yêu cầu dịch vụ web mà máy
khách truyền đi trạng thái của tất cả giao dịch
SGML
Standard Generalized Markup Language –Một chuẩn ISO, là một
hệ thống tổ chức và gắn thẻ yếu tố của một tài liệu
SOAP
Simple Object Access Protocol – Giao thức sử dụng XML để định
nghĩa dữ liệu dạng thuần văn bản (plain text) thông qua HTTP
XML eXtensible Markup Language – Ngôn ngữ Đánh dấu Mở rộng
Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng
Đỗ Văn Tuấn Đạt – CT1301 8
Danh mục hình
Hình 1. 0. 1 So sánh Web 1. 0 và Web 2. ……………………………………………………………… 15
Hình 1. 0. 2 Mô tả phƣơng thức arc() ……………………………………………………………………. 24
Hình 1. 0. 3 Ví dụ vẽ hình bằng SVG …………………………………………………………………… 27
Hình 1. 0. 4 Mối liên hệ JS, WebGL và GPU ……………………………………………………….. 29
Hình 1. 0.5 Ví dụ WebGL – Google Search (3D Graph) ………………………………………… 30
Hình 1. 0. 6Ví dụ WebGL – Trò chơi 3D Gwt Quake II …………………………………………. 30
Hình 1. 0. 7Ví dụ sử dụng Geolocation API và Google Maps ………………………………….. 37
Hình 1. 0. 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 1. 0. 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 1. 0. 22Ví dụ thành phần ……………………………………………………………… 48
Hình 1. 0. 23 Ví dụ thành phần ………………………………………………………………. 48
Hình 1. 0. 24 Ví du drag- and – drop …………………………………………………………………….. 50
Hình 1. 0. 25 Thực hiện kéo thả …………………………………………………………………………… 52
Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng
Đỗ Văn Tuấn Đạt – CT1301 9
Hình 1. 0. 26Ví dụ sử dụng Web Worker ………………………………………………………………. 54
Hình 3. 0. 1 Sơ đồ ngữ cảnh ……………………………………………………………………………….. 67
Hình 3. 0. 2 Biểu đồ phân cấp chức năng ………………………………………………………………. 69
Hình 3. 0. 3 Ma trận thực thể ……………………………………………………………………………….. 69
Hình 3. 0. 4 Biểu đồ luồng dữ liệu mức 0 ……………………………………………………………… 72
Hình 3. 0. 5 Sơ đồ luồng dữ liệu …………………………………………………………………………. 73
Hình 3. 0. 6 Sơ đồ luồng dữ liệu …………………………………………………………………………. 74
Hình 3. 0. 7 Sơ đồ luồng dữ liệu …………………………………………………………………………. 75
Hình 3. 0.8 Mô hình E-R ……………………………………………………………………………………. 76
Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng
Đỗ Văn Tuấn Đạt – CT1301 10
Danh mục bảng
Bảng1. 0. 1So sánh wed1. 0 vs wed2. 0 ……………………………………………………………… 16
Bảng1. 0. 2 Những kiểu nội dung trong HTML51 ……………………………………………….. 21
Bảng1. 0. 3 Những thành phần vùng nội dung trong HTML5 ……………………………….. 21
Bảng1. 0. 4 So sánh giữa Canvas và SVG ………………………………………………………….. 27
Bảng1. 0. 5 Các trình duyệt hỗ trợ các chuẩn codec khác nhau ……………………………… 31
Bảng1. 0. 6 Các thuộc tính của Nhúng âm thanh (audio) ………………………….. 32
Bảng1. 0. 7 Các thuộc tính của thẻ : ………………………………………………………. 33
Bảng1. 0. 8 Các sự kiện của và ………………………………………………… 34
Bảng1. 0. 9 Các thuộc tính của phƣơng thức getCurrentPosition() ………………………… 37
Bảng1. 0. 10 Các thuộc tính mới của > ……………………………………………………. 47
Bảng1. 0. 11 Các thuộc tính mới của ……………………………………………………… 48
Bảng1. 0. 12 Mô tả cấu trúc một file manifest …………………………………………………….. 56
Bảng3. 0. 1 Sơ đồ tiến trình nghiệp vụ quản lý hệ thống ………………………………………. 62
Bảng3. 0. 2 Sơ đồ tiến trình nghiệp vụ quản trị bán hàng ……………………………………… 63
Bảng3. 0. 3 Sơ đồ tiến trình nghiệp vụ thống kê báo cáo ………………………………………. 64
Bảng3. 0. 4 Bảng phân tích ………………………………………………………………………………. 66
Bảng3. 0. 5 Bảng nhóm các thành phần ……………………………………………………………… 67
Bảng3. 0. 6 Bảng các thực thể và mô tả thực thể ………………………………………………… 76
Đồ án tốt nghiệp Trƣờng ĐHDL Hải Phòng
Đỗ Văn Tuấn Đạt – CT1301 11
Chƣơng 1:Phân tích thiết kế hệ thống hƣớng cấu trúc và
tìm hiểu về HTML5
1. PHÂN TÍCH THIẾT KẾ HỆ THỐNG HƢỚNG CẤU TRÚC
1. 1Khái niệm về hệ thống thông tin
Hệ thống
Là một tập hợp các thành phần có mối liên kết với nhau nhằm thực hiện một chức
năng nào đó.
Các tính chất cơ bản của hệ thống
– Tính nhất thể: Phạm vi và quy mô hệ thống đƣợc xác định nhƣ

[block id=”bo-sung”]

Từ khóa: Đề tài Xây dựng Web bán và giới thiệu văn phòng phẩm với HTML 5. 0

Leave a Reply

Your email address will not be published. Required fields are marked *