Tìm hiểu HTML5, CSS3 và ứng dụng xây dựng website cho công ty cổ phần du lịch bắc giang

Thông qua những website này, thông tin về các sản phẩm, dịch vụ của công ty sẽ đến với những người quan tâm, đến với khách hàng của họ một cách nhanh chóng kịp thời thông qua internet..

Trang 1

LỜI CẢM ƠN

Đầu tiên cho em gửi lời biết ơn sâu sắc đến cô Nguyễn Lan Oanh đã định

hướng, cung cấp tài liệu và tận tình giúp đỡ, động viên em trong quá trình thực hiện đề tài Cô đã dành nhiều thời gian và tâm huyết theo sát, chỉ bảo em những mặt được và chưa được để em có thể hoàn thành đề tài một cách tốt nhất Em xin chân thành cảm ơn cô!

Em cũng xin chân thành cảm ơn các thầy (cô) trong trường Đại học Công nghệ thông tin và Truyền thông đã dạy dỗ giúp em có được một nền tảng kiến thức căn bản hỗ trợ cho việc làm đồ án tốt nghiệp lần này

Mặc dù, bản thân đã thực sự nỗ lực, cố gắng thực đồ án tốt nghiệp nhưng không tránh khỏi nhiều thiếu sót Do vậy, em rất mong nhận được sự đóng góp quý báu của toàn thể thày cô và các bạn!

Thái Nguyên, tháng 06 năm 2012

Sinh viên thực hiện Diêm Công Thảo

Trang 2

LỜI CAM ĐOAN

Em xin cam đoan về nội dung đồ án tốt nghiệp với tên đề tài “ Tìm hiểu HTML5, CSS3 và ứng dụng xây dựng website cho công ty cổ phần du lịch Bắc Giang” không sao chép nội dung cơ bản từ các đồ án khác, hay các sản

phẩm tương tự mà không phải do em làm ra Sản phẩm của đồ án là do chính bản thân em nghiên cứu và xây dựng nên

Nếu có gì sai em xin chịu mọi hình thức kỉ luật của Trường Đại học Công Nghệ Thông Tin và Truyền Thông – Đại học Thái Nguyên

Thái Nguyên, tháng 06 năm 2012

Sinh viên thực hiện Diêm Công Thảo

Trang 3

MỤC LỤC

DANH MỤC HÌNH

Trang 4

LỜI NÓI ĐẦ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, đượ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 sự chú ý đặc biệt

Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là một trong những yếu tố quan trọng trong hoạt động của các công ty Đối với các công ty thì việc xây dựng các website riêng càng ngày càng trở nên cấp thiết Thông qua những website này, thông tin về các sản phẩm, dịch vụ của công ty sẽ đến với những người quan tâm, đến với khách hàng của họ một cách nhanh chóng kịp thời thông qua internet Hoạt động của một công ty có quy mô khá lớn

sẽ càng được tăng cường và mở rộng nếu xây dựng được một website tốt

Bắt nguồn từ công nghệ mới trong tương lai gần và thực tế yêu cầu của

công ty cổ phần du lịch Bắc Giang cùng với những gợi ý của cô Nguyễn Lan Oanh, em đã chọn đề tài “Tìm hiểu HTML5, CSS3 và ứng dụng xây dựng website cho công ty cổ phần du lịch Bắc Giang” và đã hoàn thành đồ án đúng

kế hoạch Có được kết quả như vậy, em xin được gửi lời cảm ơn sâu sắc tới cô

Nguyễn Lan Oanh người đã hướng dẫn em trong suốt quá trình thực hiện đồ án

tốt nghiệp này

Xin chân thành cảm ơn cô!

Trang 5

HTML sử dụng các tag để đánh dấu từng đoạn văn bản Một ví dụ đơn giản như:Mã:

<p> This is a paragraph </p>

Phiên bản HTML đầu tiên của Tim Berners - Lee rất khác với những gì chúng ta đang sử dụng ngày nay, chẳng hạn như thiếu hẳn các chức năng định dạng văn bản Tuy nhiên nhờ sự đơn giản của các tag này mà HTML được chấp nhận rộng rãi, và được đưa lên thành chuẩn Trong vòng tám năm (1989 – 1997), HTML đã phát triển qua bốn cột mốc chính, với phiên bản gần đây nhất là HTML4 Phiên bản này cũng đánh dấu việc CSS1 được công nhận là chuẩn để định dạng trang web, và DOM trở thành chuẩn cho phép các ứng dụng JavaScript chạy thống nhất trên mọi trình duyệt

HTML 1 không cho phép truyền đạt cấu trúc trang phức tạp, nhưng vừa đủ

để cho phép tạo ra một trang web đơn giản Vạn sự khởi đầu nan Phiên bản đầu tiên được tung ra vào cuối năm 1990 và gần như một năm sau, ngôn ngữ này mới thực sự được ứng dụng Năm 1993 các chuẩn HTML trở thành nền tảng của Mosaic - Trình duyệt đầu tiên của Internet

Trang 6

là phiên bản cải tiến của HTML Phiên bản lần này được tạo ra bởi sự nỗ lực rất lớn của những người yêu thích HTML trên khắp thế giới Những người này đã đảm nhận một nỗ lực khổng lồ khi chú ý đến tất cả đóng góp từ khắp nơi trên thế giới cho phiên bản mới này Trước tình hình này, cũng trong cùng năm 1994, Tập Đoàn Tài Chính World Wide Web được thành lập với người đứng đầu là Tim Berners-Lee Năm 1995, thẻ mới là thẻ “bgcolor” (màu nền) hay thẻ “font”(font

chữ) được đưa vào ứng dụng

Internet làm cho ngôn ngữ HTML phát triển và chính nó cũng ứng dụng những phát triển của HTML W3C chấp nhận những phiên bản cải tiến của HTML với các thẻ mới và các chức năng mới Dave Ragget đã mua về một phiên bản thú vị với rất nhiều thẻ HTML hấp dẫn và phiên bản này đã được cải tiến rất hay Nhưng vì nó làm chậm đường truyền của các trình duyệt nên phiên bản này

đã bị bỏ đi Phiên bản HTML 3.2 là phiên bản mạnh nhất của sê-ri này và trước khi được tung ra, nó được duyệt bởi W3C và bởi các nhà cung cấp trình duyệt là Netscape và Microsoft

Người ta dành cả năm 1997 để phát triển phiên bản HTML4, một bước tiến triển quan trọng trong những phiên bản cũ HTML4 có những công cụ có giá trị mang lại thêm nhiều đất sáng tạo cho dân thiết kế web Ban đầu CSS cũng không được coi là quan trọng lắm nhưng đến nay người ta đánh giá nó cũng quan trọng không kém gì bản thân HTML Một sự kiện quan trọng nữa là sự phát triển của các trình duyệt: Microsoft ứng dụng hầu như tất cả các thẻ và trình duyệt Internet Explorer được người sử dụng yêu thích hơn, làm lu mờ Netscape Vào tháng 4 năm 1998 HTML4 đã được chứng nhận bởi W3C và tương lai trở nên sáng lạn hơn HTML có một “đối thủ” gọi là XHTML (Extensible HyperText Markup Language - tạm dịch: ngôn ngữ đánh dấu siêu văn bản mở rộng) và từ năm 1998 đến nay vẫn diễn ra tranh chấp, nhưng cuối cùng có lợi nhất vẫn là người sử dụng Internet

Trang 7

1.1.5. HTML5

HTML5 ra đời dựa trên sự hợp tác giữa World Wide Web Consortium (W3C) và Web Hypertext Application Technology Working Group (WHATWG) Vào tháng 1 năm 2008, W3C tung ra bản nháp của HTML5 và thế thượng phong

có vẻ nghiêng về HTML (so với XHTML) Phần lớn chúng ta đều biết khả năng của bản HTML 4.01 - phiên bản gần đây nhất, nhưng những tính năng mới của phiên bản thứ 5 này là gì?

1.2. Sự khác biệt của HTML5.

HTML5 sẽ làm thay đổi rất nhiều khía cạnh của cuộc sống trên Web Nó không thay thế Flash hay Shockwave: được dùng ít trong trò chơi ở Miniclip.com Điều này cho thấy HTML5 ảnh hưởng đến thế nào Tuy nhiên, HTML5 thiết kế lại Web và cho phép các Websites cơ bản có nhiều tiện ích hơn HTML5 tags sẽ thay thế plug-in trong những việc đơn giản cũng như làm cho Web bảo mật hơn và hiệu quả hơn Dưới đây là những tiện ích khi HTML5 được ứng dụng và được chuẩn hóa trên Web:

HTML5 làm giảm tầm quan trọng của các plug-ins

Trước đây, câu chuyện về Web gắn với plug-in hay add-on của một trình duyệt bởi nó khuyến khích sự sáng tạo cũng như sự trải nghiệm Âm thanh, ảnh động hay những thủ thuật khác xuất hiện trên Web thông qua plug-ins, phát triển bởi Sun, Adobe, RealAudio, Microsoft và rất nhiều hãng khác Giao diện plug-ins mở đối với tất cả và mọi người có thể trải nghiệm bằng cách thêm những tính năng mới

Cuộc chiến về Flash có thể là cuộc chiến nổi tiếng nhất, nhưng sức mạnh mới được từ HTML5 cũng đe dọa tới hệ mã lệnh JavaFX là lý tưởng, nhưng ai là người muốn học một loại cú pháp mới trong khi JavaScrip và Canvas đang làm rất tốt Ai cần hệ thống Real khi các video sẽ được chuyển thành audio và video? Plug-in dường như sẽ bị lãng quên

Plug-ins sẽ bị biến mất hoặc không được dùng? Có thể, nhưng nó còn phụ thuộc vào việc làm của bạn Nếu bạn muốn vẽ hình ảnh, Canvas là thích hợp nhất Nhưng nếu muốn vẽ một thế giới 3-D đặc biệt, giống như trong các trò chơi

Trang 8

Flash và Shockwave phức tạp, bạn sẽ phải dùng tới plug-in khi nó có thể kết nối trực tiếp tới video cũng như chạy thế giới game 3-D.

HTML5 hỗ trợ đồ họa tương tác

Web cũ tải hình ảnh bằng cách tải file GIF hay JPG Web mới có thể xây dựng hình ảnh trên Canvas Một loạt thư viện đồ họa đẹp được đưa ra, giúp cho

đồ họa của Website trở nên tương tác hơn

Hiện nay, JavaScript có thể tính toán cũng như vẽ hình ảnh bằng dữ liệu Mọi thứ trở nên sống động khi những lập trình viên có thời gian để đưa ra giải pháp Adobe mới đây đã bắt đầu phát triển đồ họa tinh xảo cho HTML5 Sự xuất hiện của những công cụ này sẽ mở đầu cho những khả năng mới cũng như đồ họa sẽ được tinh xảo hơn hiện nay

HTML5 cho phép các ứng dụng kết nối tới khu vực lưu trữ file

Những người lập trình Web thường lưu trữ một lượng lớn thông tin trong các cookies (300 cookies tương đương với 4096 byte) Bộ công cụ dùng plug-in Flash để trưng dụng lựa chọn từ ổ đĩa là phiên bản đầu của bộ công cụ Dojo Tuy nhiên, giờ đây chỉ cần sử dụng HTML5 là được

Lập trình viên có thể lưu trữ bất cứ thứ gì họ muốn Điều này giúp việc cài đặt các ứng dụng dễ dàng hơn giống như các ứng dụng cũ Các ứng dụng chạy

mã JavaScript từ ứng dụng lưu trữ HTML5 ngoại tuyến và hoạt động ngay cả khi kết nối Web đang hoạt động

Phương pháp này không ảnh hưởng tới hoạt động phát triển nhóm “đám mây” bởi những dữ liệu có thể hoạt động như những lưu trữ thông minh Lập trình game có thể lưu trữ theo vùng những phần mô tả và ảnh minh họa, giúp tiết kiệm thời gian tải thông tin nhiều lần

Ngược lại, những dữ liệu này sẽ được lưu trữ trong các tệp tin hệ thống Thế nên việc lấy lại dữ liệu không phải là dễ dàng Người dùng muốn chuyển dữ liệu từ máy này sang máy khác sẽ gặp phải khó khăn

HTML5 sẽ đơn giản hóa chia nhỏ dữ liệu với cyborg data

Ai đã từng chia nhỏ dữ liệu từ các trang web đều biết rằng HTML không giúp được nhiều ngoại trừ giúp trình duyệt nơi đặt dữ liệu Microformats trong

Trang 9

HTML5 cung cấp các phương pháp tinh xảo giúp việc phân tích dữ liệu dễ dàng hơn Không ai có thể dự đoán microformats có thể thay đổi Web tới mức nào nhưng rất dễ để thấy được nó đã giúp các lập trình viên có nhiều giải pháp hơn.

HTML5 giúp hợp nhất các địa chỉ

Đối với máy chủ Web, địa chỉ máy tính của chúng ta đơn thuần chỉ là những con số ẩn danh Chuẩn HTML5 cho phép các trình duyệt định vị vị trí của người dùng Tuy nhiên, nó sẽ không hoạt động với các máy bàn (hoạt động với GPS hoặc Wifi), nhưng nó lại hoạt động tốt với smartphone cầm tay

HTML5 làm video của Web tự nhiên hơn

Chuẩn HTML5 giúp các nhà lập trình tiếp hợp video dễ dàng hơn với thông tin trên trang, cung cấp các ứng dụng tới lập trình viên jQuery và PHP ngoài Flash, Silverlight hay JavaFX

Mọi người đều muốn cung cấp mã nguồn mở để mở những hình ảnh động và

âm thanh tương ứng dẫn đến việc không thống nhất Chuẩn HTML5 sẽ là mã nguồn

mở trung gian, có nghĩa là chúng ta thay đổi cách gọi từ plug-in thành codec Tuy nhiên, dù ta có chuẩn video nhưng trình duyệt lại rất khó để dịch dữ liệu

Mặc dù vẫn còn sự cân nhắc cũng như thiếu sự nhất trí hoàn toàn, thẻ video mới này sẽ cho thấy sức mạnh của video, giúp cho HTML bớt đi ký tự văn bản và video sẽ được dùng nhiều hơn

HTML5 tạo ra wiget chat

Widget sử dụng trong iframes cho phép các trang web ghi nhớ lại thông tin từ các trang khác trong vòng nhiều năm Tuy nhiên chúng lại bị các rào cản an ninh giới hạn khi chỉ lưu trữ mỗi wiget trong một sandbox riêng

HTML5 cung cấp cơ chế chuẩn giúp các widget có thể trò chuyện với nhau Mặc dù chúng vẫn khống thể vượt qua được sandbox của widget khác nhưng các widget có thể gửi tin nhắn qua lại, kết nối công việc, thậm chí là chuyển đổi thông tin về người đang sử dụng máy tính

Các nhà quảng cáo có cơ hội để đăng quảng cáo với các ô hình chữ nhật khác nhau xuất hiện trên các trang web Trong khi đó, các nhà phát triển vẫn khẳng định sẽ tìm được những ứng dụng thức tế khác

Trang 10

Tuy nhiên, sử dụng cơ chế này để gửi tin nhắn thì chỉ mới là bước đầu Vẫn cần tạo ra tiêu chuẩn cho những thông tin được chuyển đi do các widget là 1 cơ hội

để trò chuyện giữa mọi người nên chúng cần phải có những ngôn từ chuẩn

HTML5 có thể tăng khả năng bảo mật

Mỗi trình duyệt có 1 plug-in riêng do các nhóm lập trình khác nhau lập ra với những tiêu chuẩn khác nhau, được đưa ra vào thời điểm khác nhau và kiểu mẫu bảo mật cung khác nhau Thông thường, một số phiên bản plug-in có tính bảo mật hơn so với loại khác Và khi số lượng plug-in gia tăng, chúng làm tăng

độ phức tạp trong kiểm tra các lỗi an ninh Liệu plug-in hay trình duyệt đã có lỗ hổng lớn vào năm ngoái? Liệu có phức tạp không khi chỉ cập nhât trình duyệt mà không nâng cấp plug-in hoặc ngược lại? Ai có thể nhớ được?

Thay thế nhiều loại plug-in với các đặc điểm được tích hợp với HTML 5 sẽ

bỏ đi được những khuyết điểm có trong các plug-in trước đó Những khuyết điểm có thể bị lợi dụng để thiết lập mã độc Nếu như nhóm an ninh kiểm tra Firefox, Chorme hoặc IE cho phép cài đặt các plug-in này, sự nguy hiểm sẽ giảm bớt đi

HTML5 đơn giản hóa việc phát triển web

Bill Mill – chuyên viên thiết kế cho Lookingglass Cyber Solutions giải

thích ngắn gọn về sự thay đổi này: “Tôi thực sự thích HTML5 vì nó cho phép tôi

làm việc trong một môi trường thích hợp, trình duyệt kết hợp với Javascript, DOM mà không phải bật đi bật lại Flash và HTML5 Nó vừa là 1 ngôn ngữ lại vừa là 1 công cụ, không khác biệt lắm so với các plug-in khác”.

HTML5 cung cấp 1 ngôn ngữ lập trình JavaScript, 1 kiểu dữ liêu (XML hoặc DOM) và 1 phần nguyên tắc thiết lập (CSS) để kết nối văn bản, audio, video và Đồ họa Thách thức trong việc tạo ra cái gì đó tốt đẹp vẫn là mênh mông nhưng điều đó sẽ đơn giản hơn khi làm việc trong 1 tiêu chuẩn thống nhất Hiện nay chỉ Adobe sử dụng HTML 5 để tích hợp các công cụ dành cho Flash

Điểm mạnh - Điểm yếu của HTML5 và Flash

Khi bàn về Flash và HTML5, những nhà phát triển thường hay công kích lẫn nhau Nhưng thật ra HTML5 và Flash tại thời điểm này vẫn có điểm mạnh và điểm yếu, tùy thuộc vào từng mục tiêu, định hướng mà chúng ta sẽ chọn giải pháp nào

Trang 11

Flash và HTML5 có thể tồn tại song song với nhau chứ chưa thể loại trừ lẫn nhau Sau đây là một vài điểm mạnh và điểm yếu cơ bản của Flash và HTML5:

Điểm mạnh của HTML5:

Phù hợp trên nhiều nền tảng: nhà phát triển chỉ cần lập trình một lần là có thể dùng được trên nhiều hệ thống, không như Flash hay các plug-in khác luôn cần có nhiều phiên bản khác nhau dành cho mỗi nền tảng

Khả năng hỗ trợ API và DOM: điều này sẽ giúp các nhà phát triển tự do hơn trong việc sáng tạo các ứng dụng thân thiện hơn với người dùng khi mà không còn lệ thuộc vào phần mềm của bên thứ 3, ví dụ việc nhúng video, âm thanh, các bản vẽ chất lượng cao, biểu đồ và hình ảnh động và các loại khác nhiều nội dung phong phú mà không cần cài đặt thêm 1 plug-ins nào khác như flash player, windows media player …

Tính nhất quán: HTML hỗ trợ các phần tử mới để khai báo cấu trúc website như : header, footer, … do vậy giúp cho nhà thiết kế hay người lập trình ngay lập tức hiểu được cấu trúc của website

Điểm mạnh của Flash:

Tính phổ biến: flash là một Plug-in thành công và phổ biến nhất, 97% các máy tính và trình duyệt có hỗ trợ Flash

Hỗ trợ tốt cho game: flash được sử dụng rất phổ biến trong việc phát triển game và flash cung cấp rất nhiều tính năng để tạo ra các game chất lượng

“Nếu không hư hỏng thì không cần sửa”: một cách tổng quát thì flash rất dễ sử dụng, rất nhiều các lập trình viên đã quen thuộc sử dụng flash Do vậy gắn bó với flash thay vì chuyển sang một công cụ khác sẽ tiết kiệm thời gian, tiền bạc và nhiều tài nguyên khác

Điểm yếu của HTML5:

Ít trình duyệt hỗ trợ: chỉ có các trình duyệt mới gần đây mới hỗ trợ HTML5, do vậy việc sử dụng theo trào lưu, không theo mục đích sẽ dẫn đến một cái bẫy là phần lớn khách hàng sẽ không xem được

Trang 12

Quá mới mẻ: vì được phát triển gần đây nên phần lớn lập trình viên vẫn chưa quen thuộc, chuyển đổi sang HTML5 có thể làm phát sinh thời gian, tiền bạc và tài nguyên

Điểm yếu của Flash:

Flash không làm việc tốt với Mac OSX, và các thiết bị di động của Apple không hỗ trợ nội dung Flash

Song song với chuyện đó, DOM trong HTML5 cũng được hoàn thiện với

bộ Selectors API mới đơn giản hơn, cung cấp nhiều phương thức truy xuất chính xác đến từng phần tử trên trang web mà không cần các vòng lặp phức tạp duyệt qua từng phần tử như trước Cộng với việc các trình duyệt hiện đại đã tăng tốc thực thi JavaScript đáng kể, hơn nữa còn cung cấp các công cụ debug tiện lợi, việc phát triển ứng dụng với JavaScript đã trở nên nhẹ nhàng hơn bao giờ hết

1.4. Kết luận.

Một trong những khó khăn ngăn cản việc phổ biến HTML là trình duyệt Internet Explorer, hiện chiếm thị phần lớn nhất thế giới, vốn không có mấy quan tâm đến việc tương thích chuẩn này Tuy nhiên, với việc Microsoft chính thức tuyên bố hỗ trợ HTML5 trong IE9 (các kết quả thử nghiệm gần đây cho thấy tốc

Trang 13

độ HTML5 trên IE9 rất khả quan), có thể nói rằng tất cả các trình duyệt lớn đều

đã sẵn sàng chào đón HTML5 Điều đó vừa cho thấy sức cuốn hút công nghệ mới này, đồng thời hứa hẹn một tương lai tốt đẹp cho HTML5 cất cánh

HTML5 dự kiến sẽ ra mắt chính thức vào năm 2012, và đạt đến mức tương thích giữa các trình duyệt vào năm 2022 Dù chặng đường có thể còn dài, nhưng những lợi ích mà HTML5 đem lại có thể đảm bảo cho nó một thành công không kém các phiên bản trước HTML5 được dự đoán sẽ phổ biến như HTML4 hiện nay vào một ngày không xa Dù không thể kết luận rằng HTML5 sẽ thay thế các công nghệ hiện tại (Silverlight, Flash…) nhưng đây vẫn sẽ là một công nghệ đáng để ta học hỏi và sẽ phát triển mạnh trong tương lai gần

Trang 14

CHƯƠNG 2: NGÔN NGỮ HTML5

2.1. Các thẻ mới trong HTML5.

Những ai đã từng viết web hẳn đều đồng ý rằng hầu hết các trang web thường có chung những thành phần bố cục: header, body, footer… Hình dưới đây minh họa một cấu trúc website phổ biến:

Một cách truyền thống để hiện thực cấu trúc trên trong các phiên bản HTML trước đây là sử dụng các tag <div> với thuộc tính id=”header”, id=”nav”… Cách này vừa khó quản lý (đối với các trang phức tạp, số lượng tag

<div> có thể rất nhiều), vừa không mô tả tự nhiên ý nghĩa của từng thành phần (không thể biết <div> nào đánh dấu header, <div> nào đánh dấu body nếu không nhìn vào thuộc tính id hoặc nội dung bên trong) Để giải quyết vấn đề này, HTML5 đưa ra các thẻ mới, với tên gọi phản ánh chính xác vai trò của nó Hãy xem qua đoạn code khung của trang web ở trên trong HTML5:

Trang 15

Tuy nhiên, sự khác biệt lớn nhất nằm trong thẻ body, với hàng loạt các thẻ thành viên mới: <header>, <navigation>, <section>, <footer> Có thể thấy rằng

bố cục một trang HTML5 đã được minh bạch hóa đáng kể: các thẻ <header>,

<footer>… chúng tự nói lên nội dung mà chúng chứa đựng Hơn thế nữa, các thẻ này còn mang lại lợi ích từ việc tối ưu hóa search engine Một lưu ý nhỏ là để đoạn code trên hoạt động đúng, bạn sẽ cần một trình duyệt hỗ trợ HTML5 Nếu đang sử dụng IE8, chúng ta có thể sẽ thấy đoạn mã sau “bị” hiển thị lên trình duyệt, mà nguyên nhân chính là do IE8 hỗ trợ HTML5 chưa hoàn chỉnh:

Mã:

Trang 16

Thẻ <header> và <footer> đánh dấu phần mở đầu và kết thúc của một trang web, đây là nơi thích hợp để đặt các banner, logo hình ảnh và thông tin bản quyền Ví dụ sau minh họa cách sử dụng <header> và <footer>:

<li><a href=”/first.html”>First Page</a></li>

<li><a href=”/second.html”>Second Page</a></li>

<li><a href=”/third.html”>Third Page</a></li>

Thẻ <section> chia nội dung trang web ra thành nhiều phần chính Mỗi

<section> lại có thể có nhiều <article> Một <article> có thể xem như một bài viết cụ thể (chẳng hạn như một blog entry rất thích hợp để đặt trong một

<article>) Cuối cùng, thẻ <aside> thường đóng vai trò như một sidebar cung cấp các thông tin liên quan cho <article> chứa nó (thực tế thì chúng ta sẽ cần đến CSS nếu muốn hiển thị thẻ <aside> này như một sidebar HTML5 cố gắng tách biệt hai phần nội dung và trình bày nên các thẻ HTML5 không quy định sẵn cách thức hiển thị mà nhường lại công việc đó cho CSS Tuy vậy, việc sử dụng các thẻ mới vẫn giúp cho code HTML dễ đọc hơn và hỗ trợ tối ưu công cụ tìm kiếm)

Trang 17

<p>This is the first paragraph</p>

<p>This is the second paragraph</p>

Ngoài ra, HTML5 còn rất nhiều thẻ mới hữu dụng Một vài cái tên có thể

kể ra như <time>, <progress>, <figure>…

2.2. Form 2.0 – cải tiến đáng giá trong HTML5.

Có lẽ Form 2.0 – một tên gọi khác của form trong HTML5, là một trong những thành phần hấp dẫn nhất Form 2.0 có nhiều bổ sung đáng giá cho các phần tử <input>, khiến chúng trở nên mạnh mẽ và đáp ứng được các yêu cầu thiết kế phức tạp mà không cần đến một giải pháp công nghệ bên ngoài nào như Flash và Silverlight Hãy thử xem qua ví dụ sau:

Trang 18

<form>

<input name=”TextBox” type=”text” maxlength=”25″ required placeholder=”Ent

er your text here” autofocus><br/><br/>

Có lẽ bạn sẽ dễ dàng nhận ra sự xuất hiện nhiều thuộc tính mới trong thẻ

<input>: thuộc tính required đánh dấu một field là bắt buộc, placeholder sẽ hiện một dòng text mờ trên textbox (dòng text này sẽ biến mất khi click vào textbox)

và autofocus xác định phần tử nhận focus đầu tiên trên form Với HTML4, việc hiện thực các tính năng này đều yêu cầu kĩ năng lập trình JavaScript, nhưng nay thì chúng đã được xây dựng trực tiếp trong HTML5

Trang 19

Bên cạnh đó, thuộc tính type của <input> cung cấp nhiều kiểu control mới cho form Chẳng hạn như ta có thể dễ dàng tạo một date control để lựa chọn ngày tháng bằng cách set thuộc tính type=”date” HTML5 thậm chí còn có sẵn các field được thiết kế riêng cho địa chỉ email hoặc điện thoại Cái hay ở chỗ HTML5 cho khả năng tương thích ngược khá tốt Khi bạn thử đoạn code trên trên một trình duyệt không hỗ trợ HTML5 thì các field sẽ được hiển thị như các textbox thông thường mà không gây ra lỗi khó chịu nào Tất cả các hỗ trợ này khiến cho việc xây dựng form trở nên dễ dàng hơn bao giờ hết Thẻ (tag) là nét đặc trưng của một ngôn ngữ đánh dấu (markup language)

2.3. Multimedia

Hiện nay HTML5 đang là đối thủ xứng tầm đối với Flash của Adobe, sau khi hàng loạt các ông lớn đã tuyên bố hỗ trợ HTML5 cho trang web ứng dụng của họ như Youtube thêm hỗ trợ xem video thông qua HTML5 tuy nhiên vẫn còn trong giai đoạn thử nghiệm HTML5 hỗ trợ thẻ <video> để chèn các file video theo cách mặc định, tuy nhiên hiện nay thẻ này vẫn đang được phát triển, nó vẫn chưa hoạt động được trên một số trình duyệt HTML5 hiện nay hỗ trợ một số codec video và audio như H.264, Theora, AAC, Vorbis và định dạng có đuôi MP4, Ogg Tuy nhiên tới thời điểm này thì không phải trình duyệt nào cũng hỗ trợ toàn bộ các codec trên

Ngày nay, tất cả audio đều sử dụng các plugin ngoài như Flash Tuy nhiên, không phải trình duyệt nào cũng giống nhau, mỗi trình duyệt sẽ có một plugin riêng HTML5 đặc tả chuẩn cho việc chơi audio như tập tin âm thanh hay 1 dòng audio Bạn có thể nghe nhạc trên trình duyệt mà không phải cài bất cứ một plugin ngoài nào khác Việc chạy một bài nhạc sẽ trở nên tự nhiên hơn

Cách hoạt động

Để chơi 1 file audio bạn cần thêm đoạn code sau:

Thuộc tính điều khiển là play, pause hay volume

Đối với browser không hỗ trợ HTML5 thì thêm 1 dòng thông báo:

Trang 20

Your browser does not support the audio element </audio>

HTML5 với thẻ <video> bạn có thể chèn video theo các cách sau đây : Một file video đơn: Đơn giản là chèn đường dẫn file video vào thuộc tính src, giống như khi chèn hình ảnh : <img src=”…” />, còn đối với video thì ta chỉ cần thay bằng thẻ <video>:

Thêm yếu tố cố định chiều rộng và chiều cao cho video width và height Nếu bạn có lỡ đặt chiều rộng hoặc chiều cao nhỏ hơn so với chiều rộng, chiều cao thực sự của video thì video đó sẽ được tự động căn giữa thay vì làm giãn video như đối với hình ảnh

Ví dụ :

Khi chèn video với HTML5 thì video của bạn bình thường khi hiển thị sẽ không có bảng điều khiển, để thêm bảng điều khiển cho video thì bạn phải tự thiết kết lấy một cái thôi, bạn có thể thiết kế giao diện bảng điều khiển thông qua HTML, CSS và Javascript Còn nếu không muốn (thể) hoặc ngại thiết kế bạn có thể sử dụng giao diện mặc định bằng cách thêm thuộc tính controls vào trong thẻ

<video>

Ví dụ :

Tiếp theo là 2 thuộc tính preload và autoplay :

Trang 21

Thuộc tính preload sẽ tự động tải video ngay sau khi truy cập vào trang web chứa video đó, dĩ nhiên nếu chèn thuộc tính này thì bạn cần chắc là người dùng thực sự muốn xem video đó không thì sẽ hao tổn lượng băng thông lớn một cách lãng phí

Ví dụ:

Để tắt thuộc tính này bạn thêm giá trị none cho thuộc tính preload

HTML5 với thẻ <video> hiện tại thì nếu bạn muốn người truy cập xem được video trên hầu hết các trình duyệt thì bạn cần encode video đó ra 2 định dạng có đuôi là ogv và mp4, vậy làm sao để chèn một lúc 2 video khác định dạng vào cùng một thẻ? Với HTML5 thì bạn chỉ cần sử dụng thuộc tính source

để thêm nhiều video trên cùng một thẻ, trình duyệt sẽ tự động chạy các video theo thứ tự, nếu video không chạy được thì trình duyệt sẽ dừng tải file đó và sang file video tiếp theo

Ví dụ:

</video>

Ở ví dụ trên chúng ta có thêm thuộc tính type, thuộc tính type có 3 giá trị lần lượt chỉ: định dạng, video codec và audio codec Ví dụ như với file

Trang 22

something.ogv thì thuộc tính type chỉ định dạng là OGG, video codec là theora

và audio codec là vorbis

2.4. Canvas.

Thẻ canvas dùng để thao tác đồ họa trên trang web Thẻ HTML5 canvas dùng JavaScript để hiển thị 1 đối tượng đồ họa trên website Thẻ canvas có những thuộc tính cho việc sẽ đường thẳng, hình hộp, vòng tròn, ký tự, và thêm hình ảnh

Tạo thẻ Canvas

Thêm thẻ canvas vào HTML5 cùng với đặc tả id, width và height như sau:

Trang 23

CHƯƠNG 3: NGÔN NGỮ CSS3

Nếu ví HTML là gạch để xây nhà thì CSS là lớp sơn bóng bẩy Thật vậy, cũng như nhà đẹp cần phải biết trang trí, một trang HTML mà không có CSS thì website rất dễ trở nên đơn điệu và nhàm chán HTML và CSS đã là một cặp đôi

ăn ý từ những phiên bản trước đây, nhưng nay với HTML5, CSS cũng được nâng cấp lên một phiên bản mới: CSS3 với nhiều cải tiến đáng kể

3.1. Định dạng font.

Một trong những thao tác phổ biến nhất với CSS là định dạng font chữ CSS cung cấp thuộc tính font-family để xác định kiểu font hiển thị:

Mã:

font-family: Times New Roman ;

Thật không may là việc lựa chọn font chữ gặp rất nhiều hạn chế do bị phụ thuộc vào số font được cài đặt trên máy người dùng Điều này có nghĩa là chúng

ta phải hạn chế sử dụng các loại font “hiếm” vì nhiều khả năng chúng sẽ không hiển thị đúng trên các máy tính không có font đó Tuy nhiên, ngay cả các font phổ biến đôi khi cũng gặp rắc rối, vì chúng có những tên khác nhau trên khác hệ điều hành khác nhau Chẳng hạn như font Arial còn được gọi là Helvetica hay Sans Serif Kết quả là chúng ta thường thấy các khai báo kiểu như sau:

Mã:

font-family: Arial, Helvetica, sans serif ;

Cách viết này sẽ đảm bảo rằng font được hiển thị đúng: hệ thống chỉ việc lựa chọn loại font phù hợp nhất Nhưng còn có một cách giải quyết tốt hơn: nhúng trực tiếp kiểu font vào file CSS Với CSS3, việc này trở nên rất đơn giản, đoạn code sau minh họa cách nhúng một font TrueType vào CSS:

Mã:

@font-face{

font-family: ‘<tên font>’;

src: url(‘<đường dẫn tới file font>’) format(‘truetype’);

}

Trang 24

3.2. Tạo hiệu ứng đổ bóng cho text.

CSS3 cho phép tạo hiệu ứng đổ bóng một cách dễ dàng Hãy xem qua một

Thuộc tính text-shadow trong khai báo trên cho phép kiểm soát hiệu ứng

đổ bóng Thuộc tính này có bốn tham số, trong đó hai tham số đầu tiên là bắt buộc:

Ghi chú:

- horizontal-offset: tọa độ X tương đối của bóng (so với text)

- vertical-offset: tọa độ Y tương đối của bóng (so với text)

- blur-radius: bán kýnh mờ của bóng Tắt hiệu ứng mờ bằng cách truyền giá trị 0

- shadow-color: màu sắc của bong

3.3. Chia nội dung thành nhiều cột.

Chia cột là một công việc khó khăn Trước đây, các lập trình viên thường

sử dụng bảng hoặc các tag <div> phức tạp để đạt được mục tiêu này Nhưng nay thì CSS3 cũng đã hỗ trợ sẵn Sau đây là cách chia nội dung thành hai cột trong CSS3:

Trang 25

-webkit-column-gap: 1em;

}

Một lưu ý nhỏ là hai thuộc tắnh column-count và column-gap có thêm tiền

tố -webkit- Các thuộc tắnh thử nghiệm của CSS3 được đặt tên theo kiểu này nhằm tránh xung đột trong trường hợp đặc tả thay đổi Do đó hiện nay, cần sử dụng các tiền tố -moz- (cho Mozilla), -0- (cho Opera) và -webkit- (cho Safari và Chrome) Các viết này nhằm mục đắch hướng trình duyệt, trong tương lai có thể cấu trúc này sẽ thay đổi

3.4. Các đường viền bo tròn góc.

Thêm đường viền (border) cho các thành phần trong trang web không phải

là điều gì mới mẻ Nhưng với CSS2, hầu như không có cách nào để tạo ra các đường viền với các góc bo tròn một cách tự nhiên (đương nhiên là vẫn có các giải pháp phức tạp hơn như sử dụng image) CSS3 mang lại cách tiếp cận hiệu quả nhất bằng cách quy định các thuộc tắnh để tạo hiệu ứng này:

Khai báo này sẽ tạo một đường viền với bốn góc được bo tròn Tuy nhiên,

có những trýờng hợp mà ta chỉ muốn áp dụng hiệu ứng này cho một góc cụ thể nào đó, may mắn là CSS3 cũng cho ta khả nãng này với các thuộc tắnh:

Trang 26

3.5. Tạo hiệu ứng chuyển động.

Đây có lẽ là một trong những bổ sung hấp dẫn nhất của CSS3, cho phép

áp dụng các hiệu ứng chuyển động để làm tăng tính bắt mắt cho trang web Sau đây là một ví dụ căn bản về tạo chuyển động:

Trên đây chỉ là vài nét mới nổi bật của CSS3, nhưng bấy nhiêu cũng đủ để chứng minh rằng đây là một công nghệ đầy tiềm năng Không chỉ góp phần hoàn thiện HTML5, CSS3 còn đơn giản hóa đáng kể công việc của các nhà phát triển web Đây thực sự là sự kế thừa xứng đáng của CSS Và với sự hỗ trợ ngày càng mạnh của các trình duyệt, có thể tin rằng CSS3 sẽ nhanh chóng trở nên phổ biến vào một ngày không xa

Trang 27

PHẦN 2: XÂY DỰNG ỨNG DỤNG WEBSITE CHO CÔNG TY CỔ PHẦN DU LỊCH BẮC GIANG

CHƯƠNG 1: XÁC ĐỊNH YÊU CẦU BÀI TOÁN

1.1. Mô tả bài toán.

Ngày nay với sự phát triển như vũ bão của công nghệ thông tin thì việc áp dụng các thành quả của công nghệ thông tin vào các lĩnh vực của cuôc sống đã không còn xa lạ với mỗi chúng ta Cụ thể là các ứng dụng của website vào các lĩnh vực của công việc của con người

Công ty cổ phần du lịch Bắc Giang thực hiện tin học hóa việc giới thiệu dịch vụ, thông tin điểm du lịch và trợ giúp khách hàng đăng ký tour du lịch thông qua website của công ty Đây là trang web giới thiệu về tất cả những gì liên quan đến lĩnh vực du lịch của tỉnh Bắc Giang đến khách hàng tham quan website, nhằm thu hút khách hàng tham quan website lần sau Chủ đạo của website là giới thiệu các điểm du lịch trong tỉnh Bắc Giang, các địa danh, lễ hội văn hóa hay các chương trình về tour du lịch Tại đây người dùng có thể xem thông tin về các tour du lịch do công ty cổ phần du lịch Bắc Giang cung cấp Trên website cho phép đặt tour trực tuyến, tìm kiếm tour phù hợp Người dùng là khách hàng của công ty truy cập vào trang web để tìm hiểu thông tin về các tour du lịch trong tỉnh Bắc Giang

Người dùng có thể đăng ký tour du lịch, đăng ký đặt khách sạn trực tuyến với công ty thông qua website

Truy cập vào website người dùng có thể tìm hiểu về thông tin các địa điểm du lịch, các danh lam thắng cảnh trên địa bàn tỉnh

Đối với người quản lý:

Người quản lý cần nắm bắt thông tin nhân viên, thông tin khuyến mại từ các địa điểm du lịch, thông tin về các đối tác kinh doanh

Sau khi tìm hiểu đầy đủ thông tin về các tour du lịch, người dùng có thể làm việc trực tuyến với nhân viên của công ty để đăng ký tour du lịch cho mình

Trang 28

Khi khách hàng đăng ký du lịch chúng tôi sẽ có một phiếu đăng ký cho khách hàng có thể đăng ký trực tuyến hoặc đăng ký trực tiếp tại công ty.

Nhân viên của website cần xác định các thông tin:

- Khách hàng có yêu cầu dịch vụ gì không?

- Tour du lịch mà khách hàng đăng ký

- Khách hàng muốn đặt khách sạn hay không, loại khách sạn mà khách hàng muốn đặt

- Khách hàng muốn ăn uống nghỉ ngơi tại nhà hàng như thế nào?

- Khách hàng muốn thuê xe không?

- Thông tin về khách hàng: họ tên, địa chỉ, điện thoại, email

Với mỗi thông tin về các dịch vụ, khách sạn, nhà hàng, xe cộ, các tour dulịch, các địa danh chúng ta đều có dữ liệu đầy đủ để khách hàng có thể yên tâm

Từ đó nhân viên tổng hợp thành các bảng biểu thống kê … từ đó lên danh sách các tour du lịch cho khách hàng

Nhân viên cần đưa ra các thông tin sau cho khách hàng được rõ:

- Thông tin về tour du lịch

- Thông tin khuyến mại của các khu du lịch

- Thông tin về các địa danh, danh lam thắng cảnh

- Thông tin khách sạn, nhà hàng, các dịch vụ khác

1.2. Quy trình nghiệp vụ.

Như đã nói ở trên công ty cổ phần dịch vụ du lịch Bắc Giang là đơn vị chuyên cung cấp các tour du lịch cho khách hàng Và lĩnh vực kinh doanh là kinh doanh du lịch Đối tượng được công ty hướng đến là khách hàng Cơ cấu tổ chức của công ty sẽ được phân chia thành: Ban điều hành, nhân viên công ty và khách hàng của công ty

- Ban điều hành:

Là bộ phận có chức năng điều hành và phân phối hoạt động của website

Có thể quản lý và chi phối hoạt động của toàn bộ hệ thống website và hoạt động của toàn nhân viên Ngoài ra ban điều hành còn có chức năng phân loại nhân

Trang 29

viên Trong hệ thống website của công ty cổ phần du lich Bắc Giang bộ phận này được gọi là quản trị hệ thống.

Nó quyết định giá chính thức cho từng hoạt động của webstie Và ban điều hành có khả năng thêm, bớt, phân quyền hay xóa loại bỏ các tài khoản cho nhân viên được ấn định khỏi cơ sở dữ liệu khỏi cơ sở dữ liệu khỏi hệ thống website của công ty cổ phần du lịch Bắc Giang

- Nhân viên:

Công ty cổ phần du lịch Bắc Giang thiết kế tour và lên lịch trình cho từng tour cụ thể Sau đó, bộ phận là nhân viên của hệ thống website có nhiệm vụ cập nhật thông tin các tour này lên website với đầy đủ thông tin về giá cả, loại tour, lịch trình, các địa phương đi đến và hình ảnh minh họa nếu có

Ngoài ra, bộ phận là nhân viên của hệ thống website còn cập nhật thông tin, hình ảnh về các địa điểm lịch mà công ty muốn cung cấp cho khách hàng Ngoài các tour du lịch trên trang web của công ty còn cung cấp thêm thông tin về khách sạn của công ty cổ phần du lịch Bắc Giang Từ đó các thông tin về các khách sạn này được cập nhập đầy đủ lên website để người dùng có thể cập nhập khi cần

Các thông tin đặt tour hay đặt phòng khách sạn của khách hàng đã được cập nhật vào cơ sở dữ liệu và hiển thị cho người quản trị được phân quyền xem, hiệu chỉnh, xóa hoặc xác nhận sau khi đã kiểm tra tính chính xác của thông tin đặt chỗ Sau khi các thông tin đã được xác thực thì nhân viên của công ty sẽ tiến hành trao đổi thông tin với khách hàng bằng cách gọi điện hoặc trao đổi qua email mà khách hàng dùng đăng kí

- Khách hàng:

Khách hàng vào thăm website sẽ vào xem thông tin chi tiết của từng tour hiện có hoặc tìm kiếm tour theo các yêu cầu cụ thể về giá cả, địa phương muốn đến, ngày khởi hành của tour Sau đó, khách hàng có thể tiến hành đặt chỗ cho tour đang xem nếu muốn Nếu khách hàng có nhu cầu về nơi ăn ở nghỉ ngơi tại Bắc Giang khách hàng còn có thể đặt phòng tại khách sạn của công ty

Trang 30

Khách hàng cũng có thể thông qua trang web để gửi các thông tin yêu cầu khác về công ty bằng trang Liên hệ Thông tin này cũng sẽ được truyền xuống cơ

sở dữ liệu và cho phép người quản trị quản lý chúng

Trong trường hợp đăng kí tour hay đặt phòng khách sạn khách hàng cần

có trách nhiệm đăng kí cho hệ thống bằng những thông tin chính xác nhân để hệ thống website còn có thể liên hệ lại

1.3. Yêu cầu hệ thống.

1.3.1. Yêu cầu chức năng.

Người dùng ghé thăm website của công ty có thể xem, tìm kiếm thông tin

về các tour du lịch một cách rõ ràng và dễ hiểu nhất Khách hàng có thể đặt tour trực tuyến bằng cách điền đầy đủ thông tin cá nhân lên các form giao điện đăng

ký tour của website Website sẽ cập nhật thông tin đặt chỗ từ các form này trực tiếp lên cơ sở dữ liệu, và cho phép nhân viên đã được “quản trị hệ thống” phân quyền thao tác các công việc sau:

- Tìm kiếm các đơn đặt chỗ đã được xác nhận hay chưa xác nhận

- Xác nhận đơn đặt chỗ hợp lệ, chỉnh sửa thông tin khách hàng và thông tin đặt chỗ trên từng đơn cụ thể

- Thống kê tình hình đặt chỗ của từng tour, xem danh sách khách hàng tham gia các tour đó

- Thay đổi, thêm mới hoặc xóa bỏ thông tin, hình ảnh về các điểm du lịch

ở các địa phương khác nhau mà công ty muốn giới thiệu cho khách hàng

- Theo dõi tình hình liên hệ thông qua website của khách hàng, để đáp ứng kịp thời nhu cầu của họ

Về tổ chức lưu trữ, thực hiện các yêu cầu:

- Thêm, sửa, xóa các bài viết các đoạn giới thiệu, trình bày về các danh lam thắng cảnh của tỉnh Bắc Giang

- Thêm, xóa, sửa thông tin, hình ảnh về các tour du lịch do công ty tổ chức, phục vụ cho công tác quản lý, thống kê tình hình hoạt động của công ty

- Thêm, xóa, sửa thông tin, hình ảnh về các điểm du lịch ở từng địa phương khác nhau

Trang 31

1.3.2. Yêu cầu phi chức năng.

- Website phải có dung lượng không quá lớn, tốc độ xử lý nhanh

- Công việc tính toán thực hiện chính xác, không chấp nhận sai sót

- Sử dụng mã hóa các thông tin nhạy cảm của khách hàng

- Đảm bảo an toàn dữ liệu khi chạy website trực tuyến

- Khách hàng còn có thể xem địa danh du lịch mình định đến qua bản đồ trực tuyến của website

- Ngoài ra người dùng có thể chia sẻ về website qua mạng xã hội để giới thiệu cho bạn bè

1.4 Cách tiếp cận và giải quyết vấn đề:

1.4.1 Cách tiến cận vấn đề.

Ta khảo sát và phân tích vấn đề sau đó làm rõ vấn đề tạo ra cái nhìn tổng quát về vấn đề cho người lập trình viên Từ đó người lập trình có thể hiểu được vấn đề và lập trình để giải quyết vấn đề Và cuối cùng sản phẩm mà ta thu được

là website của công ty cổ phần du lịch Bắc Giang

1.4.2 Cách giải quyết vấn đề.

Có nhiều cách để ta giải quyết vấn đề này Nhưng ở đây chúng ta sẽ sử dụng phương pháp phân tích thiết kế hướng đối tượng với UML (Unified Modeling Language) để giải quyết vấn đề đặt ra Gồm các bước sau:

Mô hình hóa nghiệp vụ: Dựa trên khảo sát thực trạng và yêu cầu của đề tài

ta sử dụng các công cụ của UML để mô hình hóa các nghiệp vụ đó theo mô hình lặp tăng dần

Phân tích: Ở bước này ta phân tích và đưa ra những mô hình tổng quát quan sát trạng thái tĩnh của nghiệp vụ và các Actor (tác nhân) Tiếp đó ta sẽ đưa

ra các Use-case mà tác nhân sử dụng khi tương tác với hệ thống Các quá trình được thực hiện bằng cách sử dụng các công cụ của UML

Trang 32

CHƯƠNG 2: PHÂN TÍCH HỆ THỐNG

2.1. Xác định các tác nhân và Use-case của hệ thống.

2.1.1. Xác định danh sách các tác nhân (Actor).

Tác nhân là những gì bên ngoài tương tác với hệ thống Tập hợp các UC của hệ thống sẽ hình thành các trường hợp mà hệ thống được sử dụng Sử dụng

UC để cấu trúc các phần tử có tính hành vi trong mô hình Nó được hiện thực hóa bởi phần tử cộng tác

Bảng danh sách các tác nhân Actor của hệ thống:

STT Tên tác nhân Giới thiệu về tác nhân Ca sử dụng

1 Quản trị hệ

thống

Là người đứng đầu hệ thống và

có toàn quyền trong hệ thống

Người này có trách nhiệm quản

lý hệ thống và điều hành mọi công việc của hệ thống website

Đăng nhậpĐổi mật khẩu

Quản lý bài viết

Quản lý thông tin Tour

Quản lý thông tin nhân viên

2 Nhân viên Là những người làm việc tại

công ty và được giao nhiệm vụ cùng “Quản trị hệ thống ” thực hiện quản lý công việc của website bằng một số chức năng được ấn định bởi “Quản trị hệ thống” Trong hệ thống tác nhân này làm việc dưới quyền của quản trị hệ thống và cùng với quản trị hệ thống duy trì điều hành của hệ thống

Đăng nhậpĐổi mật khẩu

Tìm kiếmQuản lý đăng ký tourQuản lý thông tin tour

Tư vấn khách hàng

3 Khách hàng Là đối tượng được nhắm đến

của website Tác nhân này là khách hàng hay khách hàng tiềm năng của công ty du lịch

Tìm kiếmĐăng ký TourXem thông tin Tour

Trang 33

Website ra đời nhằm mục đích

để cung cấp thông tin về danh lam, thắng cảnh tại địa phương cho đối tượng này Sau đó nó sẽ

là nơi để tác nhân này thực hiện các giao dịch như đăng ký tour

và đặt phòng tại khách sạn

2.1.2. Xác định danh sách các Use-case của hệ thống.

Dựa vào các nhiệm vụ và các yêu cầu của hệ thống ta thấy có các case sau với từng tác nhân như sau:

Use-2.1.2.1. Đối với tác nhân là Quản trị hệ thống.

Danh sách các Use – case của tác nhân là Quản trị hệ thống

Hình2.: Biểu đồ UC của tác nhân Quản trị hệ thống

2.1.2.2. Đối với nhân viên:

Danh sách các Use – case của tác nhân là Nhân viên

Trang 34

- - Đăng nhập

- - Đổi mật khẩu

- - Tìm kiếm

- - Quản lý đăng ký tour

- - Quản lý thông tin Tour

Trang 35

Biểu đồ UC của tác nhân là Khách hàng:

Hình2 : Biểu đồ UC của tác nhân Khách Hàng

2.2. Phân tích các Use-case của hệ thống.

2.2.1. Phân tích các Use–case của tác nhân Quản trị hệ thống.

2.2.1.1. Use-case “Đăng nhập”.

- Đặc tả Use-case:

- <Quản trị hệ thống>:<đăng nhập>

- Mô tả:

- Mục đích sử dụng Use-case: Use-case “đăng nhập” được sử dụng

để cho phép quản trị hệ thống, nhân viên đăng nhập vào hệ thống theo quyền đăng nhập được cấp phát sẵn

- Kết quả: Sau khi Use-case này được thực hiện xong người dùng sẽ

được đăng nhập vào hệ thống Ở đây là quản trị hệ thống được đăng nhập và sau

đó họ có thể toàn quyền quản trị đối với hệ thống Họ có thể làm đầy đủ các thao tác mà các thành phần trong hệ thống có thể thực hiện

- Người sử dụng Use-case:Ở đây người sử dụng Use-case là quản

Trang 36

- Kịch bản chính:

- Kịch bản của các luồng sự kiện bao gồm chính bao gồm:

- - Hoạt động bắt đầu khi người sử dụng khởi động chương trình và chọn vào chức năng đăng nhập

- - Người sử dụng đăng nhập vào hệ thống qua use-case bằng usename và mật khẩu bằng cách nhập chúng vào form đăng nhập sau đó xác nhận đăng nhập

- - Hệ thống nhận đọc thông tin người dùng từ form đăng nhập gồm usename và mật khẩu từ form đăng nhập và kiểm tra điều kiện đăng nhập

- - Sau khi kiểm tra xong mà điều kiện đăng nhập thỏa mãn thì hệ thống sẽ đăng nhập vào chương trình

- - Hoạt động kết thúc khi use-case được thực hiện xong

- Kịch bản của các luồng sự kiện khác: Khi người dùng sử dụng case này mà đăng nhập sai usename và mật khẩu trong dòng sự kiện chính thì hệ thống sẽ đưa ra thông báo lỗi Tác nhân lúc này phải tiến hành đăng nhập lại

use Các yêu cầu đặc biệt cho use-case:

- - Để đăng nhập vào hệ thống bằng use-case người dùng phải đăng

- Mục đích: được dùng khi tác nhân đã đăng nhập vào hệ thống và

muốn thay đổi lại mật khẩu đăng nhập của mình

- Kết quả: sau khi thực hiện use-case người dùng sẽ thay đổi được

mật khẩu mới cho lần đăng nhập kế tiếp

- Người sử dụng Use-case:Ở đây người sử dụng Use-case là quản trị

hệ thống

Trang 37

Kịch bản chính:

- Kịch bản của các luồng sự kiện chính bao gồm:

- - Hoạt động chỉ có thể bắt đầu sau khi người dùng đã đăng nhập vào hệ thống và chọn vào chức năng thay đổi mật khẩu

- - Người dùng sau khi chọn thay đổi mật khẩu mới thì nhập mật khẩu mới và xác nhận mật khẩu mới vào form nhập và chọn vào lưu

- - Hệ thống sẽ lưu mật khẩu mới vào tài khoản người dùng

- - Hoạt động của use-case kết thúc khi người dùng thực hiện xong chức năng thay đổi mật khẩu mới

- Kịch bản của các luồng sự kiện khác: Khi người dùng chưa đăng nhập vào hệ thống bằng tài khoản của mình thì không có khả năng thay đổi mật khẩu

- Yêu cầu đặc biệt của hệ thống:

- - Để đảm bảo an toàn cho dữ liệu người dùng hệ thống cần đảm bảo rằng chỉ sau khi đã đăng nhập thì người dùng mới có khả năng thay đổi mật khẩu của hệ thống

- - Sau khi đã thay đổi mật khẩu của hệ thống hệ thống sẽ lưu giữ mật khẩu này trong cơ sở dữ liệu và những lần đăng nhập kế tiếp người dùng sẽ phải đăng nhập bằng mật khẩu mới này

2.2.1.3. Use-case “Tìm kiếm”.

- <Quản trị hệ thống>:<tìm kiếm>

- Mô tả:

- Mục đích: dùng cho quản trị hệ thống, nhân viên và khách hàng sử

dụng để tìm kiếm thông tin

- Kết quả: Sau khi thực hiện use-case xong người sử dụng sẽ được

trả về thông tin mà mình đang cần tìm kiếm trong hệ thống

- Người sử dụng Use-case: Ở đây người sử dụng Use-case là quản trị

hệ thống

Trang 38

Kịch bản chính:

- Kịch bản của các luồng sự kiện chính bao gồm:

- - Use-case bắt đầu khi người dùng muốn tìm kiếm một thông tin nào đó trong hệ thống

- - Người sử dụng chọn vào form được sử dụng cho tìm kiếm thông tin và nhập thông tin cần tìm kiếm vào đó

- - Hệ thống sẽ đọc thông tin ngưởi sử dụng nhập vào trong form tìm kiếm và tiến hành xử lý thông tin

- - Thông tin sau khi đã được xử lý được đem đi tìm kiếm trong cơ

sở dữ liệu Hệ thống kiểm tra trong cơ sở dữ liệu nếu tìm thấy thông tin mà người dùng đang tìm kiếm thì trả về thông tin đó Nếu hệ thống không tìm kiếm được thông tin đó thì đưa ra thông báo thất bại

- - Hoạt động của use-case kết thúc khi người sử dụng tìm thấy thông tin đang cần tìm hoặc người dùng chọn kết thúc use-case

- Kịch bản của các luồng sự kiện khác: Khi tìm kiếm hệ thống cần phân loại được người dùng và trạng thái đã đăng nhập được chưa Nếu người dùng chưa đăng nhập hệ thống chỉ cho phép tìm kiếm một số chức năng giới hạn Khi đăng nhập rồi tùy vào người dùng là nhân viên hay quản trị hệ thống mà phân cho họ mức độ tìm kiếm thông tin trong hệ thống khác nhau Trong đó quản trị hệ thống

là người được ưu tiên nhất

- Yêu cầu đặc biệt cho hệ thống:

- - Hệ thống cần có các form tìm kiếm thông minh để người dùng dễ dàng sử dụng Và sau khi sử dụng thì hệ thống cần trả về kết quả chính xác nhất cho người dùng

- - Hệ thống cần phân loại được cấp độ tìm kiếm để tiết kiệm thời gian và tài nguyên cho hệ thống

2.2.1.4. Use-case “Quản lý bài viết”.

- <Quản trị hệ thống>:<Quản lý bài viết>

Trang 39

Mô tả:

- Mục đích sử dụng Use-case: Sau khi đăng nhập thành công vào hệ

thống của tác nhân là quản trị hệ thống Người dùng là quản trị hệ thống sẽ dùng use-case “Quản lý bài viết” để quản lý việc thêm sửa xóa bài viết trên hệ thống

- Kết quả: Sau khi use-case này được thực hiện xong người dùng sẽ

thực hiện việc quản lý bài viết của hệ thống

- Người sử dụng Use-case:Ở đây người sử dụng Use-case là quản trị

hệ thống

- - Hoạt động bắt đầu khi người sử dụng khởi động hệ thống đăng nhập hệ thống và chọn vào chức năng quản lý bài viết

- - Sau đó hệ thống sẽ hiện lên danh sách các tùy chọn và danh sách bài viết Người dùng có thể chọn thêm bài viết, hay sửa, xóa bài viết được liệt kê trong danh sách

- - Hệ thống sẽ nhận dạng yêu cầu của người dùng và thực hiện việc hiển thị form quản lý bài viết tương ứng với từng chức năng để người dùng thực hiện

- - Người dùng là quản trị hệ thống thực hiện xong việc quản lý bài viết và xác nhận lưu thao tác vừa thực hiện

- - Hệ thống thực hiện việc lưu lại thông tin mà người quản trị hệ thống vừa thực hiện Ở đây có thể là lưu thêm một bài viết mới vào cơ sở dữ liệu, cập nhập lại một bài viết vừa được sửa hay xóa một bài viết khỏi cơ sở dữ liệu

- - Hoạt động kết thúc khi use-case được thực hiện xong

- Kịch bản của các luồng sự kiện khác: Khi người dùng sử dụng case này mà chưa thực hiện đăng nhập thì hệt thống sẽ đưa ra các thông báo lỗi

use-và không cho người dùng thực hiện việc quản lý bài viết Tác nhân lúc này phải tiến hành đăng nhập rồi thực hiện các thao tác như bên trên

Trang 40

- - Để sử dụng use-case người dùng cần đăng nhập hệ thống dưới quyền là Quản trị hệ thống.

- - Để đảm bảo tính an toàn của hệ thống thì chỉ người sử dụng hệ thống đăng nhập thành công dưới tài khoản là quản trị hệ thống được thay đổi và thực hiện Use-case này

2.2.1.5. Use-case “Quản lý tour”.

- <Quản trị hệ thống>:<Quản lý tour>

- Mô tả:

- Mục đích sử dụng Use-case: Sau khi đăng nhập thành công vào hệ

thống của tác nhân là quản trị hệ thống Người dùng là quản trị hệ thống sẽ dùng use-case “Quản lý tour” để quản lý cập nhập việc thêm, sửa, xóa về các tour du lịch trên hệ thống

- Kết quả: Sau khi use-case này được thực hiện xong người dùng sẽ

thực hiện việc quản lý tour của hệ thống

- Người sử dụng Use-case: Ở đây người sử dụng Use-case là quản trị

hệ thống

- - Hoạt động bắt đầu khi người sử dụng khởi động hệ thống đăng nhập hệ thống và chọn vào chức năng quản lý tour

- - Sau đó hệ thống sẽ hiện lên danh sách các tùy chọn và danh sách tour du lịch hiện có Người dùng có thể chọn thêm một tour mới hay sửa, xóa một tour được liệt kê trong danh sách các tour hiện có của hệ thống Việc sửa tour có thể là cập nhật lại các thông tin của một tour du lịch đã được công ty hoạch định sẵn nhưng nay có một số thay đổi có thể như thay đổi lộ trình địa điểm ghé thăm

- - Hệ thống sẽ nhận dạng yêu cầu của người dùng là quản trị hệ thống vừa chọn và thực hiện việc hiển thị form quản lý tương ứng với từng chức năng mà người dùng vừa chọn để người dùng thực hiện Tương ứng với mỗi

Định dạng
Số trang	117
Dung lượng	5,12 MB