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)

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

Thoan ,

, giúp ,

Em x

Sinh viên

rnet, Web 2.

, ,

,

, HTML5 , HTML5 mang trong

, vì ,

M u 2

M c l c 4

Danh m c các ch vi t t t và gi 7

Danh m c hình 8

t k h th ng c u trúc và tìm hi u v HTML5 11

1 PHÂN TÍCH THI T K H TH 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 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 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 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

3 3 10 Web Workers API 50

3 3 11 Storage APIs 53

3 3 12 T o Offline Web Applications 54

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ô m H ng Hà 57

2.Phát bi u bài toán 59

2 1 Gi i thi tài 59

2 2Yêu c t ra 59

2 3 Phát bi u bài toán 60

n phân tích thi t k h th ng 62

ti n trình nghi p v 62

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 phân c p ch 68

4 Ma tr n th c th 69

lu ng d li u m c 0 70

lu ng d li u m c 1 71

lu ng d li u ti n trình : Qu n lý bán hàng 72

lu ng d li u ti n trình : Th ng kê báo cáo 73

6 Thi t k d li u 74

6 1 Các th c th và mô t th c th 74

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 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

c nghi m 84

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 91

2D Two dimension

AJAX Asynchronous JavaScript and XML - JavaScript và XML không API Application Programming Interface

CSS Cascading Style Sheets

ECMAScript

HTTP HyperText Transfer Protocol

-HTTPS

Secure HTTP trên Internet

-IETF

The Internet Engineering Task Force

-Internet, W3C và ISO/IEC

-JSON JavaScript Object Notation

REST Representational State Transfer

-SGML Standard Generalized Markup Language ,

SOAP Simple Object Access Protocol

-XML eXtensible Markup Language

-Hình 1 0 1 So sánh Web 1 0 và Web 2 15

Hình 1 0 2 Mô t 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 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 <datalist> 47

Hình 1 0 22Ví d thành ph n <keygen> 48

Hình 1 0 23 Ví d thành ph n <output> 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

Hình 1 0 26Ví d s d ng Web Worker 54

Hình 3 0 1 ng c nh 67

Hình 3 0 2 Bi phân c p ch 69

Hình 3 0 3 Ma tr n th c th 69

Hình 3 0 4 Bi lu ng d li u m c 0 72

Hình 3 0 5 lu ng d li u 73

Hình 3 0 6 lu ng d li u 74

Hình 3 0 7 lu ng d li u 75

Hình 3 0.8 Mô hình E-R 76

s wed2 0 16

21

21

27

31

32

33

34

37

47

48

56

62

án hàng 63

64

B 66

B 67

76

- Theo nguyên nhân xu t hi n ta có

H t nhiên (có s n trong t nhiên) và h nhân t o (do co i t o ra)

H i v ng) và h m i v i môi ng)

- Theo s i tr ng thái trong không gian

H th ng có v i trong không gian

- Ch thu th p, , x lý, trình di n, phân ph i và truy n

- Phân lo i h th ng thông tin

Phân lo i theo ch p v

T

H truy n thông

H th ng thông tin x lý giao d ch

H cung c p thông tin

H th ng thông tin qu n lý MIS

H chuyên gia ES

H tr giúp quy nh DSS

H tr giúp làm vi c theo nhómPhân lo i theo quy mô

H thông tin cá nhân

H thông tin làm vi c theo nhóm

H thông tin doanh nghi p

H th ng thông tin tích h pPhân lo c tính k thu t

Chu , công c và cách ti p c n chu n m c cho phép nhà thi t k làm vi c tách bi t, ng th i v i các h th ng con khác nhau mà không c n liên k t v i nhau v m b o s th ng nh t trong d án

,

máy

, - Lee và Robert Cailliau , Geneva, Switzerland

,

,

2 1 2 Web 2 0

,

and write), ,

Hình 1 0 1 So sánh Web 1 0 và Web 2 0

, Media,

Google AdSense là Web 2 0 Ofoto là Web 1 0; Flickr là Web 2 0 Britannica Online là Web 1 0; Wikipedia là Web 2 0, v v "

, , tin

HyperText Markup Language (HTML): là m t ngôn ng c thi t k

t o nên các trang web v i các m c trình bày trên World

s d ng trong các t ch c c n các yêu c u xu t b n ph c t

thành m t chu n Internet do t ch c World Wide Web Consortium (W3C) duy trì

Universal Resource Identifier (URI): là m t giao th a ch i

Universal Resource Locators (URL)

HyperText Transfer Protocol (HTTP): Giao th c truy n t n- là

tin gi a Máy cung c p d ch v (Web server) và Máy s d ng d ch v (Web client) là giao th c Client/Server dùng cho World Wide Web- WWW, HTTP

là m t giao th c ng d ng c a b giao th c TCP/IP (các giao th c n n t ng cho Internet)

,

Tim Berners- Lee v i tên g i HTML HTML 1 0 cung c p m t n n t c

l p trong vi u d li i Phiên b n ch bao g m 20 thành

c a HTML tiêu chu n mà t t c các trình duy t áp d n

OPTION và TEXTAREA c ng v i các thành ph n BR cho ng

c thêm vào các thành ph mô t chi ti t các tài li u, r i thay

i nh ng miêu t v u trang (head) và ph n thân (body)

HTML 4 0:Phát hành tháng 7- c chính th c vào 4- 1998, gi i thi u các thành ph n OBJECTS, và STYLE, k t h p v i CSS

HTML 4 01: Phát hành tháng 12- ngh s d ng HTML

4 01 h tr các tùy ch n, các ngôn ng k ch b n, style, in n

và t o s thu n ti n cho n i khuy t t t HTML 4 01 có nh ng

n trong vi c qu c t n v i m c tiêu là làm cho trang web tr lên toàn c u hóa

XHTML 1 0: S k t h p gi a HTML và XML, c khuy n cáo s d ng c a W3C vào tháng 2- 2000 XHTML có cú pháp ch t ch

c nhi u nhà phát tri n s d ch t chnày

duy t h tr thì nó ph i có m render trong các trình

công vi nh d ng h u h m nhi m, HTML5 không còn h tr

ph n l n các ch nh d ng trong các phiên b

Kh ng xuyên su t gi a các trình duy t: HTML5 cung c p các

m t API m nh m M t ví d d th y là khai báo DOCTYPE

Kh t r ng rãi: HTML5 mang l i s h tr t

ng trên các thi t b và n n t ng khác nhau

big, center, font,

Trong HTML5 API là: querySelector()

n, :

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

ctx fillStyle="#FF0000";

ctx fillRect(0, 0, 150, 75);

, ,

, 0) và , 100):

var c=document getElementById("myCanvas");

,

, y, r, start, x=95, y=50, bán kính r=40,

fillText(text, x, y): th c hi n v textvào canvas

strokeText(text, x, y): hi n th n lên canvas

var c=document getElementById("myCanvas");

var c=document getElementById("myCanvas");

3 3 2 Scalable Vector Graphics

SVG là vi t t t c a Scalable Vector Graphics

c s d v ng vector d a trên n n web

<svg xmlns="http://www w3 org/2000/svg" version="1 1" height="190">

H tr x lý s ki nPhù h p nh t cho các ng d ng

c hình l n

D ng hình ch mKhông phù h p cho vi c t o

ng d ng game

B ng1 0 4 So sánh gi a Canvas và SVG

3 3 3 WebGL 3D trên Web

Three js M n r t ph bi n Nó giúp ta s d ng không chWebGL mà còn canvas, SVG d dùng và làm vi

Video Audio

Google Chrome

Ogg (Theora and Vorbis)WebM (VP8 and Vorbis)MPEG 4 (H 264 and AAC)

Ogg (Vorbis, Opus)WebM (Vorbis) MP3

WAV (PCM)ACC

Firefox

Ogg (Theora and Vorbis)WebM (VP8 and Vorbis)MPEG 4 (H 264 and AAC)

Ogg (Vorbis, Opus)WebM (Vorbis) WAV (PCM)

Internet Explorer MPEG 4 (H 264 and AAC) MP3

AAC

WebM (VP8 and Vorbis)

Ogg (Vorbis)WebM (Vorbis) WAV (PCM)

Ogg (Vorbis) WAV (PCM)MP3

<video width="300" height="200" controls autoplay>

<source src="video ogg" type="video/ogg" />

<source src="video mp4" type="video/mp4" />

Your browser does not support the <video> element

<audio controls autoplay>

<source src="audio ogg" type="audio/ogg" />

<source src="audio wav" type="audio/wav" />

Your browser does not support the <audio> element

loop loop

preload

autometadatanone trang web hay không

suspend

<video width="300" height="200" src="clip mp4">

Your browser does not support the <video> element

a ch IP

Global Positioning System (GPS)

Wi- Fi k t h a ch MAC t RFID, Wi- Fi, và Bluetooth

var latlon=position coords latitude+", "+position coords longitude;

var img_url="http://maps googleapis com/maps/api/staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false";

document getElementById("mapholder") innerHTML="<img

src='"+img_url+"'>";

data D li u ho c n i dung c a các tin nh n g n

origin M t chu i bao g m ngu n g c c a tin nh n, tên mi n và c ng source M t tham chi u t i c a s c a tin nh n g

,

var o = document getElementsByTagName('iframe')[0];

o contentWindow postMessage('Hello B', 'http://documentB com/');

,

tính origin

function receiver(event) {

if (event origin == 'http://documentA com') {

if (event data == 'Hello B') {

event source postMessage('Hello A, how are you?', event origin);

}

else {

alert(event data);

}

, total=0

for (var i = 0, len = binStr length; i < len; ++i) {

var c = binStr charCodeAt(i);

var byte = c & 0xff;

Sec- WebSocket- Version: 13

Sec- WebSocket- Key: 7cxQRnWs91xJW9T0QLSuVQ==

Origin: http://example com

HTTP/1 1 101 WebSocket Protocol Handshake

Upgrade: websocket

Connection: Upgrade

Sec- WebSocket- Accept: 7cxQRnWs91xJW9T0QLSuVQ==

WebSocket- Protocol: sample

Hình 1 0 8Quá trình b t tay Websocket

, -

connection onerror = function (error) {

console log('WebSocket Error ' + error);

};

connection onmessage = function (e) {

console log('Server: ' + e data);

Quantity (between 1 and 5):

<input type="number"name="quantity" min="1" max="5">

Value: <input type="number"name="quantity" min="1" max="5">

Hình1 17 Ví d ki u input: tel

Time: <input type="time" name="usr_time">

Hình1 18Ví d ki u input: time

,

<input type="url" name="homepage">

Hình1 19 Ví d ki u input: url

Week: <input type="week" name="year_week">

<form oninput="x value=parseInt(a value)+parseInt(b value)">0

<input type="range" id="a" value="50">100 +

<input type="number" id="b" value="50">=

<output name="x" for="a b"></output>

var data=ev dataTransfer getData("Text");

ev target appendChild(document getElementById(data));

<img id="drag1" src="hpu_logo gif" draggable="true"

ondragstart="drag(event)" width="336" height="69">

<img draggable="true">

, ,

,

function drag(ev)

ev dataTransfer setData("Text", ev target id);}

var data=ev dataTransfer getData("Text");

ev target appendChild(document getElementById(data));

25:

Hình 1 25Th c hi n kéo th

3 3 10 Web Workers API

,

, , trong khi web worker

:,

<p>Count numbers: <output id="result"></output></p>

<button onclick="startWorker()">Start Worker</button>

<button onclick="stopWorker()">Stop Worker</button>

w onmessage = function (event) {

document getElementById("result") innerHTML=event data;

localStorage d li u không gi i h n th i gian

sessionStorage d li u cho m t phiên làm vi c session

, localStorage và sesionStorage:

CACHE MANIFEST Danh sách nh ng file s c cache sau l n truy c p

/logo gif /main js

-,

offline

-B ng1 0 12 Mô t c u trúc m t file manifest

i dùng xóa cache c a trình duy t

Ghi chú

, ,

Hà

HONG HA STATIONERY JOINT STOCK COMPANYHONG HA SJC

N/A0100100216

Phòng K Toán - Tài Chính: T ch c và qu n lý toàn b các ho ng k toán, tài chính c a doanh nghi p Th c hi n ch ,

Phòng Kinh Doanh: Th c hi n các ho ng ti p th - bán hàng t i các khách hàng

2.Phá

,

, ,

, -

B ng3 0 3 ti n trình nghi p v th ng kê báo cáo

Danh sách hàng

Danh sách thành viên

Th

danh sách

thành viên

- , , thành viên

THÀNH VIÊN

Thông tin hàngXem hàng

0

PHÒNG M

KHÁCH

VÃNG LAI

Danh sách hàng

Nhân viên

Nhân viênNhân viên

1

hàng

kê thành viên

STT Ki u th c th Thu c Tính Thu c tính

khóa

1 NHÂN VIÊN S tài kho n, H tên, Quy n, S n

tho i, a ch , Pass, Email

S tài kho n

2

NHÀ CUNG C P Mã s thu , Tài kho n ngân hàng, S

n tho i, Tên nhà cung c p, a ch

Mã s thu

3 HÀNG Mã s n ph m, Tên s n ph m, nh,

Mô t , tính, Giá hàng, Tr ng thái SP

Trthái SP

Giao

6 6 Mô hình

Stt Ki Kích Ghi chú

- H th t ch ng WindowsXP (SP3), Windows7, Windows Vista

- H qu n tr d li u Mysql

- Ngôn ng l p trình PHP, HTML5

N c ki n th c v phân tích thi t k h th ng và làm vi c có khoa h c

,

[1] , ,

[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 2 0 [Online] http://en wikipedia org/wiki/Web_2 0

[9] Wikipedia - HTML5 [Online] http://en wikipedia org/wiki/HTML5