Xây dựng website quảng bá du lịch việt nam

ó tbl_new_new: id, product_id, sort, status, date_added, last_modified, lang.. ó tbl_tour_category: id, code, name, parent, subject, detail_short, detail, image, image_large, sort, statu

Th Xuân

MSSV: 106h1116 Chuyên ngành CSDL

Khóa 2004-2008 TpHCM, ngày 10 tháng 2 n m 2009

L I C M N

Trong quá trình th c hi n lu n v n này, chúng em xin g i l i cám n đ n th y Phan t Phúc – giáo viên h ng d n chúng em xuyên su t lu n v n Cám n nh ng góp ý đúng đ n và sâu s c c a th y đ chúng em góp ph n hoàn thi n Website này và

th c t h n là có đ c nh ng kinh nghi m quí báu c a m t ng i đi tr c

Chúng em c ng xin chân thành cám n các th y cô ph trách các b môn gi ng

d y t i Khoa CNTT i h c M TP H Chí Minh, chính các th y cô đã t o đi u ki n

ti n đ , xây d ng cho chúng em nh ng ki n th c t c b n đ n nâng cao giúp chúng

em có kh n ng th c hi n đ c m t d án mang tính th c t , đó chính là Website Du

l ch Vi t Nam này Xin cám n các th y cô V n phòng Khoa CNTT đã t o đi u ki n

đ chúng em th c hi n lu n v n này c ng nh giúp đ , cung c p các thông tin c n thi t k p th i đ chúng em hoàn thành lu n v n này đúng th i h n

Chúng em xin h a s làm t t và t t h n n a trong nh ng d án th c t sau này sau khi ra tr ng đ không ph lòng mong m i và công n d y d , truy n đ t c a các

th y cô

Trong quá trình th c hi n lu n v n này (ph n trang Web và ph n báo cáo) dù đã

c g ng hoàn thi n và s a l i nh ng c ng không tránh nh ng sai sót mong các th y cô thông c m b qua Nhóm làm khóa lu n chúng em Xin chân thành cám n

Nhóm th c hi n lu n v n

M C L C

L I C M N 1

NH N XÉT C A GIÁO VIÊN H NG D N 2

M C L C 2

N I DUNG BÁO CÁO

PHÂN I/ M C TIÊU LU N V N 2

1/ M c tiêu lu n v n 2

2/ Yêu c u lu n v n 2

3/ Hi n th c yêu c u 2

PHÂN II/ CÁC V N C N GI I QUY T 4

1/ Phân lo i thông tin thi t k c s d li u 4

2/ Phân tích thi t k c s d li u 4

3/ Thi t k giao di n website 5

4/ L p trình bi u di n, qu n lý thông tin 8

PHÂN III/ PHÂN TÍCH CH N GI I PHÁP 10

1/ T ng quan 10

2/ T i sao l i l a chon Php và Mysql 13

3/ Dreamweaver 14

4/ Photoshop và Adobe Ilusstrator 15

5/ Flash và imageready 15

PH N IV/ N I DUNG TH C HI N 16

1/ Ch c n ng và thi t k s đ d li u Website 16

2/ Phân tích ch c n ng các trang, xây d ng CSDL Website: 18

3/ Thi u k giao di n 28

4/ L p trình bi u di n thông tin 43

PH N V: K T QU 61

1/ Nhân xét chung 61

2/ Website hoàn thành yêu c u đ ra 62

2.1/ Cung c p thông tin đ y đ , logic 62

2.2/ Website xây d ng, đáp ng nhu c u hai ngôn ng 64

2.3/ Hoàn thi n trang admin 64

2.4/ Hoàn thi n module tìm ki m, giao d ch tour 65

PH N VI: ÁNH GIÁ VÀ H NG PHÁT TRI N 68

1/ ánh giá 68

2/ H ng phát tri n 69

PH N VII: NGU N TÀI LI U THAM KH O 70

PH N I – M C TIÊU LU N V N

1 M c tiêu lu n v n

Du l ch là ngành góp ph n vào t ng tr ng kinh t c a đ t n c, ngoài nh ng y u

t t t y u v t nhiên, thì y u t đ phát tri n chính là l ng khách tham quan Chính

vì th hình nh Vi t Nam ph i đ c qu ng bá r ng rãi đ c bi t v i du khách qu c t

Xây d ng Website du l ch này, m c đích chính là đ :

− Qu ng bá hình nh và thông tin du l ch v Vi t Nam, đ i t ng chính là ng i

n c ngoài, và nh ng du khách trong n c có nhu c u đi du l ch trong n c

− Tra c u các thông tin v đ a đi m du l ch và các thông tin khác có liên quan

nh : nhà hàng, khách s n, quán n,… t i đ a đi m du l ch đang xét

− Xem các tin t c có liên quan đ n du l ch trong n c m t cách c p nh t nh t

− Cho phép ng i s d ng đ t tour thông qua Website (d i hình th c Form g i qua mail)

2 Yêu c u lu n v n

Giao di n ngoài web x lý đáp ng các n i dung:

− Website cung c p hi n th thông tin du l ch ba mi n B c, Trung, Nam theo các

lo i đ a hình du l ch Thông tin tour du l ch liên quan t i đ a danh du l ch đ a ra, thông tin tin t c và s ki n, h tr cung c p thông tin nhà hàng, khách s n t ng ng

− ây là Website v i hai đ i t ng chính là ng i Vi t và du khách n c ngoài nên Website xây d ng đáp ng vi c s d ng hai ngôn ng Ti ng Vi t và Ti ng Anh

− ây là trang Web đ ng v i các b d li u có kh n ng c p nh t m t cách d dàng (thêm, xóa, s a) t xa thông qua m t giao di n qu n tr đó là trang admin

− Thông tin có th đ c ch nh s a t xa( giao di n qu n tr đ c thi t k cho công vi c này) khi cung c p cho nó m t hostting, m t đ a ch truy c p trên m t server

− Qu ng bá v du l ch Vi t Nam theo tiêu chí ba mi n B c- Trung- Nam -> S u

t m và phân lo i thông tin theo đúng tiêu chí trên

− Cho phép th c hi n giao d ch đ t Tour thông qua giao di n c a Website

− Cho phép tra c u và tìm ki m thông tin

3 Th c hi n yêu c u:

D a trên các yêu c u nêu trên, h ng gi i quy t c a lu n v n bao g m gi i quy t các v n đ sau:

− Tr c tiên ph i thu th p và phân lo i thông tin sau đó thi t k m t s đ d

li u theo đúng tiêu chí đ ra ban đ u là Du l ch ba mi n

− Xây d ng giao di n(Giao di n hi n th - Ngoài web):

Xây d ng giao di n web s p x p, hi n th thông tin, ti n d ng cho khách truy c p

V n đ Website hai ngôn ng s s d ng ch m t giao di n k t h p v i kh n ng

l p trình PHP và k t n i CSDL t ng ng s đ c trình bày trong ph n bi u di n và

x lý thông tin

− Xây d ng trang admin đ qu n lý d li u thông qua giao di n, và ti n hành

c p nh t d li u b t k đâu, có th c p nh t d li u t xa(Web ph i đ c cung c p

m t đ a ch truy c p)

− Module tìm ki m và Module giao d ch đ t Tour s đ c trình bày trong ph n phân tích thi t k CSDL

PH N II – CÁC V N C N GI I QUY T

đ t các yêu c u đ t ra m c hai c a ph n m c tiêu đ ra thì các v n đ d i đây

l n l t đ c gi i quy t đ đáp ng nhu c u đ t ra

1 Phân lo i thông tin và thi t k S đ d li u

Phân lo i thông tin:

Các thông tin trong Website bao g m:

− Các d li u đ c truy c p và tìm ki m ph i có liên quan v i nhau

− Nh ng d li u c n thi t và liên quan ph i đ c thi t k sao cho d th y, d truy

c p và ph i có s kh h i (quay v ) đ vi c theo dõi và tra c u thông tin không b gián đo n

2 Phân tích, thi t k C s d li u

T t c thông tin t i web site ph i đ c trình bày d i d ng là thông tin đ ng, Web

có các thông tin đ c x lý đ n d li u: thông tin trang gi i thi u, liên h cu i trang,

qu ng cáo, h tr tr c tuy n, liên k t website, nhà hàng, khách s n, danh m c tour du lich, danh m c tin t c và đa d li u: Danh m c du l ch

Website ph i gi i thi u đ c các đ a đi m du l ch trên t t c các đ a danh ba mi n

c a đ t n c Vi t Nam v t t c các th lo i, thông tin v các khu du l ch đ c miêu

3 Thi t k giao di n Website

Giao di n Website ph i đ c thi t k sao cho các thông tin đ c hi n th m t cách

đ y đ và d theo dõi nh t Ngoài ra các thành ph n nh các ô nh p li u tìm ki m

ph i đ c đ t n i d th y, d n m b t và s d ng

Hình 1- Giao di n trang ch

V m t hi n th n i dung, trang Web có 4 giao di n chính:

A Giao di n trang hi n th thông tin

Hình 2- M t ph n giao di n n i dung c a m c Khu du l ch

B Giao di n trang gi i thi u

C Giao di n trang liên h

Hình 4- Form liên h

D Giao di n trang đ t tour(Hình 5 minh h a)

Hình 5- Form đ t Tour

4 L p trình bi u di n, qu n lý thông tin

Gi i thi u các khu du l ch thu c các lo i đ a hình du l ch c a ba mi n B c, Trung, Nam

Các lo i hình du l ch s đ c phân chia theo mi n du l ch B c, Trung, Nam Trong

m i mi n s có hai lo i hình du l ch chính: Du l ch nhân v n, và du l ch t nhiên Trong m i lo i hình chính này s có các lo i hình c th , chi ti t

Du l ch t nhiên: hang đ ng, du l ch bi n, th ng c nh, di s n thiên nhiên th gi i,

v n qu c gia

Du l ch nhân v n: Di tích l ch s , di s n v n hóa th gi i; làng ngh c truy n; l

h i truy n th ng; đ n, chùa, tháp; Buôn,làng

T ng ng v i các đ a danh du l ch, thì các tour du l ch s đ c hình thành đ ti n cho du khách đ c trình bày d i d ng menu x m t c p: Du l ch bi n, th ng c nh, di

s n th gi i, v n qu c gia, di tích l ch s , di s n v n hóa th gi i, làng ngh c truy n, l h i truy n th ng, đ n chùa tháp, buôn lang T ng ng v i m i đ a danh du

l ch, có thông tin h tr logic v t t c các d ch v khách s n, nhà hàng t i đ a danh

đó

Ngoài ra thông tin v khách s n, nhà hàng c ng đ c đ a ra cho du khách l a

ch n ng m i m i tour t i đ a danh đó, tuy nhiên trong m i tour c ng có h ng d n chi ti t v các d ch v ph c v du khách

Chuyên m c tin t c và s ki n chung và du l ch s đ c c p nh t h tr thông tin cho du khách khi truy c p Website, đ c trình bày d i d ng menu x d c m t c p Website h tr tìm ki m thông tin v khu du l ch, tour và khách s n ng v i t ng

PH N III – PHÂN TÍCH CH N GI I PHÁP

1 T ng quan

L p trình web đang là m t cu c ch i đ y h a h n hi n nay c ng nh t ng lai B t k b n có ki n th c c s l p trình cho b t k lo i ngôn ng nào nh Visual Basic, Cobol, hay b n ch bi t HTML và JavaScript, và b n ch n b t k ngôn ng nào , thì đó c ng là m t cách l a ch n, và mu n phát tri n h n n a v i

ki n th c hi n t i c a b n thì không cách nào khác b n ph i chuyên tâm nghiên

c u đ u t cho đ nh h ng c a ban, và nó c ng không qua khó và ph c t p khi

b n mu n bi t thêm m t ngôn ng th hai, th 3,…khi b n đã có n n t ng và

đi u đó s t o cho b n s m i m có c h i đ n m b t các kinh nghi m v l p trình ng d ng web V i tôi, tôi c ng đã đ t ra câu h i: là gi a các ngôn ng h

tr đ s d ng trong l p trình website thì ngôn ng nào m nh h n? u th h n?

và khi đã tr c ti p s d ng Dotnet c ng nh Php tôi không đ a ra k t lu n là cái nào m nh h n? u th h n? B i l t t c các x lý mình đ u có th x lý đ c

v i kh n ng c a mình trong kho ng th i gian mình đ u t cho nó, và m c đ

đ u t nghiêm túc nh th nào trong v n đ mình x lý Còn s d ng ngôn ng nào s có s thân thi n, g n g i h n khi đã s d ng, đó c ng là m t đi u bình

th ng Cu i cùng tôi ch n ngôn ng Php đ đ a vào khóa lu n c a nhóm là vì ngoài nh ng u đi m c a s k t h p tuy t v i gi a PHP VÀ Mysql, tôi th y nó không gò ép, t ng đ i nhanh và không ph c t p nhi u S l ng ng i s d ng ngôn ng này càng gia t ng, PHP và Mysql r t thông d ng Nh ng đòi h i l ng

ng i bi t các công c l p trình ngôn ng này c ng t ng theo Và d i đây là s phân tích chi ti t v s l a ch n này c a nhóm chúng tôi, nh ng tr c h t tôi

mu n b n kh o sát qua ki n trúc s b c a ng d ng web

¬ Ki n trúc c b n: Ki n trúc c n b n nh t đ trang Dynamic Web ho t đ ng

đ c là nó ph i làm vi c trên mô hình client/server M i client hay server đ u

đ m đ ng m t ch c n ng riêng đ hoàn thành công vi c chung đó là co ra

m t trang Web đ ng, Các b n có l đã quen thu c v i ch ng trình WinWord

đ so n th o v n b n, nó có th ho t đ ng đ c l p trên b t k máy tính nào

ch ng c n quan tâm t i cài gì là client cái gì là server ng d ng Web thì khác h n, ph i có m t mô hình server có th là m t máy tính làm server thôi,

nh m t p trung hóa vi c x lý d li u Còn các client, còn đ c hi u nôm na

là máy tính c a ng i s d ng ph i đ c n i m ng v i server G a s các máy này truy c p vào m t Website ch ng h n, thì có ngh a h đã truy c p vào server, sau đó l y d li u t server v th hi n lên máy mình Cùng m t lúc có

th có hàng tr m ng i(Client) truy c p vào cùng m t Website đ c x lý t p trung trên server

¬ Client: Các ng d ng mà b n phát tri n trên n n Mysql và Php s d ng tính

n ng single client đó là trình duy t Web Tuy nhiên, không ph i đây c h là ngôn ng duy nh t đ phát tri n Web i v i nh ng ng d ng ph c t p đòi

h i Multi-Client ho c c n các tính n ng b o trì, thì ng d ng java applet s

h u d ng cho vi c này Ch tr tr ng h p b n c n s d ng ng d ng th i gian th c nh ng d ng chat ch ng h n, thì Java Applet m i c n thi t đây chúng ta không bàn t i l p ng d ng cho chuy n tán g u mà ch t p trung vào

ng d ng duy t Web nên không đ ng ch m gì t i Java Applet Nh b n đã

bi t ngôn ng kh i th y cho vi c duy t web là HTML, HTML cung c p hàng

tá nh ng th l nh(Tag) cho phép th hi n trang Web theo nhi u ki u cách khác nhau N u b n ch a có ki n th c c s v HTML thì có th ch y ra ngoài mua ngay m t quy n sách ho c download trên internet xu ng các bài

h c h ng d n B n không nên b ra quá nhi u th i gian đ h c v HTML, ngoài HTML ra các trình duy t web còn cho phép các add- in h tr nhi u

th khác nh RealPlayer, Flash, Shockwave, ho c h tr v Javascript ho c XML Nh ng đây chúng tôi ch t p trung trên nh ng gì c n thi t cho s h i

nh p c a b n- ó là HTM

¬ Server: H u h t các ng d ng Web đ u ho t đ ng t p trung trên Server M t

ng d ng đ c tr ng g i là Webserver s đ m trách vi c giao ti p v i các trình duy t M t c s d li u(CSDL) trên Server s l u tr t t c nh ng thông tin đáp

ng yêu c u cho công vi c c a ng d ng Web K ti p, b n c n ph i có m t ngôn ng làm vai trò “chú bé liên l c” gi a Web Server và CSDL trên server Ngông ng này c ng th c hi n các công vi c x lý thông tin và đi t Webserver

Và d nhiên là các th này s ch ng ho t đ ng đ c n u nh không ch y trên m t

h đi u hành(H H) Các th nh Webserver, ngôn ng l p trình, CSDL ph i

ho t đ ng t t trên m t h đi u hành nào đó

¬ H đi u hành: Có r t nhi u ch ng lo i H H, Windows 98/XP và Linux có l

r t ph bi n v i t t c m i ng i Có tr ng h p b n làm vi c trên H H mà ít ai

bi t t i và b n ch có n t ng thích s d ng nó mà thôi Hãy gác l i ý t ng đó

n u nh b n th t s mu n đi trên con đ ng thi t k web Hãy trang b cho mình

ki n th c v H H WinNT/2000/2003 và Unix B n s d ng lo i nào trong các

th nói đây? ây c ng là câu h i r c r i, câu tr l i đây là tùy thu c b n là tín

đ c a H H nào PHP và Mysql thu c nhóm ph n m m ng d ng có tên g i là open source(ngu n m ), ng i dùng s xem đ c mã ngu n c a các ng d ng PHP/Mysql Chúng t n d ng đ c mô hình phát tri n d a vào ngu n m , cho phép ng i nào c m th y thích nó đ u có th góp ph n vào vi c phát tri n các d

ph ng pháp ngu n m này ban đ u ch còn là nh ng vòng lu n qu n mà thôi,

nh ng vì sau đã tr thành đ y ti m l c khi có s ra đ i và tr nên ph bi n c a

b ngu n m Linux H u nh các ngu n m đ u mi n phí, b n có th download, cài đ t và s d ng chúng mà không ph i đ i s cho phep hay ph i tr ti n cho b t

k ai Ph ng th c này thì Microsoft, Oracle hay m t s các công ty l p trình nào khác không th đáp ng đ c N u b n không ch n mã ngu n m thì NT/2000/2003 đ c a chu ng Ngay c trong tr ng h p này, không có tr l c nào ng n c n b n trong công vi c phát tri n v i công c PHP và Mysql B n

c ng có th th nghi m Php/ Mysql trên n n H H Windows 95, 98, Xp

¬ Web server: Ch c n ng c a WebServer có v không ph c t p m y Nó ch t i

ch , ch y trên n n c a H H, l ng nghe các yêu c u ai đó trên web g i đ n, sau

đó tr l i nh ng yêu c u này, và c p phát nh ng trang Web thích ng Th c t thì

nó không quá đ n gi n nh v y, b i nhi m v c a Webserver là ph i cung c p tính n đ nh cho môi tr ng web cho nên đòi h i này ph i đ c đáp ng m t

cách r t nghiêm túc Có nhi u lo i Webserver khác nhau, nh ng ch y u trên th

tr ng ch th ng s d ng Apache và IIS, IIS đ c g n li n v i môi tr ng Windows và nó là thành ph n không th thi u c a Active server Pages Có m t

s tích h p nh t đ nh gi a m t ngôn ng l p trình v à m t web server, c ng v y, Php4 đ c tích h p r t t t v i IIS Tr c đây, có m t s v n đ c n ph i bàn v tính n đ nh c a Php/IIS v i vi c truy n t i l n, nh ng Php và IIS c ng đã đ c

c i thi n li n t c nên vi c này không còn đáng ph i b n tâm

Apache là m t ki u m u Webserver r t ph bi n Gi ng nh Linux, Php, Mysql

nó là m t d án ngu n m Không có gì ng c nhiên khi ng i ta th y Apache

đ c h tr r t t t trên môi tr ng Unix, nh ng ch khá t t trong Windows Apache t n d ng đ c tính n ng c a third- party B i vì đây là ngu n m nên b t

k ai có kh n ng đ u có th vi t ch ng trình m r ng tính n ng c a Apache Php ho t đ ng v i t cách là m t ph n m r ng c a Apache, và ng i ta g i là

m t module c a Apache Apache có tính n đ nh và t c đ đáng ph i nói Tuy nhiên, c ng có m t s s phàn nàn v nó là không h tr công c đ h a tr c quan, đi u đó có th giúp ng i ta làm vi c d dàng h n B n ph i th c hi n các thay đ i đ i v i Apache b ng cách s d ng dòng l nh, ho c s d ng các t p tin text trong folder ch ng trình Apache N u l n đ u đ n v i Apache thì b n s

g p m t chút l l m, m c dù Apache ch làm vi c t t trên Unix, nh ng c ng có

nh ng phiên b n ch y t t trên h Windows Không m t ai, k c các nhà phát tri n Apache đ ngh Apache nên đ c ch y trên m t server Windows b n r n

N u b n quy t đ nh ch n H H Windows cho server thì b n nên s d ng IIS N u

b n th nghi m ng d ng trên Windows và sau đó đem upload và ch y trên Unix/ Apache c a nhà cung c p host thì c ng không h h n gì, ng d ng c a b n

v n ch y ngon lành

¬ Middleware: Php thu c l p ngôn ng l p trình g i là middleware Các ngôn

ng này ho t đ ng c n k v i Webserver đ thông d ch các yêu c u t trên Word Wide Web, sau đó nh n các tr l i t Webserver chuy n t i đ n trình duy t web

¬ H CSDL quan h : Relational Database Management Systems(H qu n tr c

s d li u quan h - RDBMSs) cung c p ph ng th c tuy t v i đ l u tr và truy

xu t l ng thông tin l n và ph c t p Nó đã ra đ i khá lâu, th c t nó có tr c web, Linux và WindowsNT, cho nên không có gì ng c nhiên khi có quá nhi u h CSDL đ ch n l a T t c các CSDL này đ u d a trên c s SQL(Structure Query Language) M t s ph bi n nh Oracle, Sysbase, Informix, Ms Sql Server, IBM’s DB2 H ngu n m thông d ng hi n nay là Mysql mà quy n sách này đ c p đ n, ngoài ra còn có hai h ngu n m khác là PostgresSQL đã m t

th i thay th Mysql và Interbase là b ngu n m c a Borland gi i thi u vào tháng 8/1999

2 T i sao l i ch n s d ng Php và Mysql?

¬ T c đ nhanh, d s d ng: Chúng ta hãy bàn v t c đ , có ba th mà khi bàn

v vi c so sánh t đ gi a các ngôn ng l p trình Web Th nh t, ng d ng vi t

b ng C chay nhanh nh t; Th hai, công vi c l p trình C khá là ph c t p, và s

ng n nhi u th i gian h n; Th ba, vi c so sánh gi a các ngôn ng là m t đi u khó kh n T t c nh ng gì tôi bi t là t i c m th y yên tâm khi nói r ng Php c ng nhanh nh các ngôn ng khác Khi s d ng b n s c m th y r ng Php có đ y đ các đ c tính nh kh n ng, c u trúc và d s d ng Xin nói thêm, đây ch cách nhìn c a riêng cá nhân tôi, khi đã s d ng, nó r t ti n, d hi u Tóm l i Php cung

c p các tính n ng m nh m đ th c hi n ng d ng m t cách nhanh chóng

¬ Ch y trên nhi u h đi u hành: Nh đã trình bày ph n ki n trúc web, Php có

th ch y trên WindowsNT/2000/2003 và Unix v i s h tr c a IIS và Apache

Nh ng ngoài ra nó có th ch y trên m t s các platform khác nh Netscape, Roxen, Hay m t vài th khác Nh chúng ta đã bi t ASP có th ch y trên Unix, Coldfusion có th ch y trên Solaris và Linux, Jsp có th ch y trên khá nhi u lo i platform i v i Php, nó có th ch y t t trên nh ng platform h tr các ch ng

lo i trên

¬ Truy c p b t k loai CSDL nào: ng d ng c a b n d đ nh s truy c p nh ng

lo i d li u d ch v nào? LDAP, IMAP mail server, db2, hay Xml parser hay Wddx B t k b n c n đ n th gì thì Php c ng s n sàng h tr thông qua các hàm

đ c xây d ng s n nó s làm công vi c c a b n tr nên r t d dàng và ti n l i

Nh ng n u nh có m t s th ch a đ c xây d ng s n thì sao? Ta s tìm hi u sau

¬ Luôn đ c c i ti n và c p nh t: N u nh b n c m th y b ng đ i v i vi c phát tri n ngu n m , b n có l s ng c nhiên đ i v i ch t l ng c a lo i ph n

m m này Có hàng ngàn nh ng chuyên gia l p trình xu t s c đ i s n và h s n sàng b th i gian ra đ t o nh ng ph n m m tuy t v i và h u nh mi n phí i

v i ngôn ng th nh hành nh Php thì t h n là r t nhi u các nhà l p trình đang

th c hi n phát tri n nó h ng ngày

S th t có m t vi c r t n t ng là n u nh b n có m t s c k thu t, b n

có th g i email đ n m t nhà phát tri n Php, các chi ti t s c đó ch trong vòng vài gi b n s nh n đ c s tr l i tho i đáng Khi Php4 đ c ph bi n, nó đã tr thành m t hi n t ng c a ngôn ng l p trình, nó giúp cho vi c b sung s l ng

l n các hàm ch c n ng m t cách d dàng N u nh ngôn ng đã có s n nhi u hàm đ c thù cho công vi c thì b n s đ t n công h n cho vi c l p trình c a mình

¬ c h ng d n k thu t b t c lúc nào H u h t các ngôn ng đ u h tr active mailing list và các trang web h tr gi i quy t k thu t Php c ng không ngo i l , n u b n g p ph i s c - G p nh ng l i trong ch ng trình và không tìm

ra cách kh c ph c- s có hàng tr m ng i có tên trong danh sách mail luôn s n sàng ki m tra và kh c ph c s c cho b n B ngu n m Php th t s đã t o ra

m t tình c m c a c c ng đ ng Khi b n g p ph i khó kh n đ i v i nó thì lúc nào

c ng có nh ng đ ng môn chia s n i lòng đó giúp b n kh c ph c

¬ Hoàn toàn mi n phí: B n không ng i gì v v n đ b n quy n khi b n s m m t máy vi tính và cài lên đó nh ng ph n m m nh Linux, Apache, Php vì t t c đ u

mi n phí

Mysql: M c dù Mysql đ c ph bi n r t nhi u nh ng nó v n có nh ng

¬ V a túi ti n: Hãy ngh b n c n cài đ t Oracle Hãy chu n b h u bao c a mình kho ng 30.000 đ n 100.000 USD ho c th m chí còn h n th n a i u hi n nhiên là Oracle, Sysbase và Informix là nh ng h qu n tr CSDL tuy t v i,

nh ng giá thành quá cao, không h p v i túi ti n c a ph n đông m i ng i Mysql hoàn toàn mi n phí B n có th s d ng mà không c n chu n b b t k kho n ti n nào

¬ Nhanh và m nh: Mysql không có đ y đ nh ng c s v t ch t cho m t h qu n

tr CSDL chính tông, nh ng đ i v i công vi c th ng nh t c a ph n đông m i

ng i thì nó c ng c p c ng khá nhi u th N u công vi c c a b n là l u tr d

li u trên web ho c làm m t trang th ng m i đi n t c v a, thì Mysql có đ

nh ng th b n c n, đ i v i nh ng CSDL c trung bình thì Mysql h tr tuy t

v i v t c đ Các nhà phát tri n Mysql r t t hào v t c đ s n ph m c a h

¬ C i ti n liên t c: Mysql đ c c i thi n li n t c v i m t t n s không ng Các nhà phát tri n c p nh t nó th ng xuyên, ngoài ra còn b sung các tính n ng r t

n t ng cho nó m i lúc m i n i Hi n t i, Mysql đã đ c b sung thêm h tr transaction Nh v y là Mysql đã th c th tr hành m t h qu n tr CSDL chuyên nghi p

3 Dreamweaver

¬ Dreamweaver là công c thi t k Web chuyên nghi p đ c s d ng b i c Designer

và Programmer Nó có th coi là giao di n làm vi c gi a ng i l p trình và đ n v thi t k giúp cho công vi c di n ra song song và d dàng ki m ch ng c ng nh s a

l i Do đây là lu n v n theo nhóm hai ng i làm hai ch c n ng nên Dreamweaver là

ph n m m không th thi u khi mu n tri n khai d án Website Du l ch này

¬ Dreamweaver h tr khá nhi u trong vi c b c c toàn b Website v i ch c n ng Site Mananger giúp cho vi c thi t k toàn b Site tr nên đ n gi n, d n m b t h n Ngoài ra nó còn h tr thi t k Web v i ngôn ng l p trình PHP, k t n i d li u MySql và AppServer là nh ng gi i pháp chúng em ch n trong vi c thi t k toàn b Websitenày

4 Photoshop và Adobe Illustrator

¬ Photoshop là ph n m m thi t k và ch nh s a nh chuyên nghi p mà b t c Designer nào c ng ph i bi t Trong vi c thi t k Web, Photoshop đ c dùng đ thi t

k toàn b giao di n các trang bao g m: trang ch , các trang ch c n ng, trang s n

ph m, v.v… Thi t k và b c c c các symbol các sample có trong trang Web Và tuy t v i h n h n là kh n ng “làm sinh đ ng hóa” các hình nh đ c s d ng làm t

li u và nguyên li u cho các thi t k nh đ ng khác (Flash ch ng h n) V i u đi m

t o hình nh Output v a đ p v a g n nh phù h p v i thi t k Website (vì trong thi t

k Website y u t th i gian load đóng vai trò r t quan tr ng) v i ch c n ng Save For Web, các hình nh c ng nh giao di n trang Web s đ t tiêu chu n g n nh và b t

m t

¬ Adobe Illustrator (AI) đ c l a ch n làm gi i pháp thi t k logo, và v m t s Symbol trong trang Web này V i tính n ng cho ra các hình nh Vector không b v khi phóng to và các chi ti t màu s c không r m rà, các logo hay hình v b ng AI s đáp ng đ c yêu c u thi t k c a m t s chi ti t hình nh trong Website Các hình GIF xu t t AI s đ m b o tính g n nh và t i u hóa t c đ load trên trang Web

5 Flash và ImageReady

¬ phù h p v i tính “đ ng” c a d li u trên Website (d li u có th c p nh t đ c), các hình nh trong Web c ng nên mang tính “đ ng” Các thành ph n đ ng đó trong Website đ c thi t k b ng Flash và Image Ready

¬ Flash và Component là ph n m m không th thi u trong vi c thi t k Animation và các hình nh sinh đ ng “bi t nhúc nhích” Trong h u h t các Website hi n nay, các thành ph n giao di n ngày càng đ c “sinh đ ng” hóa, nh t nh trên các banner,

qu ng cáo,… d n đ c thay th b ng các hình nh đ ng nh m làm cho toàn b trang Web tr nên sinh đ ng và b t m t h n đ i v i user, nh ng ng i đã và càng ngày càng có yêu c u kh t khe h n v i giao di n Website V i th c t đó vi c s d ng Flash đ t o các thành ph n đ ng trong trang Web mà c th là banner, qu ng cáo…

là yêu c u khách quan Kh n ng h tr tuy t v i trong vi c làm nh đ ng b ng frame-by-frame (khung hình ti p n i nhau) và animation tween (chuy n t đ ng) Flash giúp cho vi c thi t k các thành ph n đ ng trên Website tr nên d dàng h n Ngoài ra Flash ch c n ng export ra file swf đ add tr c ti p vào Dreamweaver, giúp test đ c d dàng trên giao di n toàn b trang Web

¬ i v i m t s hình nh chuy n đ n gi n (frame-by-frame v i s frame ít) có m t cách khác đ n gi n mà hi u qu h n đó là s d ng ch ng trình Image Ready (IR) tích h p s n trong b Photoshop Suite Vi c thi t k s tr nên đ n gi n h n, hình nh

đ ng đ c Output ra c ng nh và phù h p h n v i Website v i đ nh d ng GIF Hình

nh sau khi đ c x lý bên Photoshop s đ c chuy n tr c ti p sang Image Ready đ thao tác ti p t c m t cách thu n ti n Chuy n đ ng frame-by-frame s d n m b t h n khi IR cho phép thay đ i tr c ti p th i gian chuy n gi a hai frame IR đ c s d ng

ch y u trong lu n v n này đ thi t k các Qu ng cáo đ ng đ n gi n

Gi i thi u (frame=intro)

Trang index (Load d li u

About us (frame=intro)

Danh m c (frame=product)

Khách s n (frame=hotel)

Nhà hàng (frame=restaurant)

Tour du l ch (frame=tour)

Packege Tour (frame=tour)

Item travel (frame=product) Hotel (frame=hotel)

Ch c n ng c a website: Website cho phép hi n th thông tin, và tra c u tìm ki m thông tin trên web theo 3 n i dung khu du l ch, khách s n, nhà hàng, Hi n th hai ngôn

M c phân c p th nh t là du l ch 3 mi n: B c – Trung – Nam

M c phân c p th hai là các tiêu chí du l ch, bao g m: du l ch t nhiên và du l ch nhân v n

M c phân c p th ba d a trên các hình th c du l ch có liên quan đ n hai tiêu chí

đã phân lo i trên, bao g m:

Tour du l ch: Khi đã xem thông tin tra c u thông tin trên web, du khách có th liên

h tr c ti p, g i đi n g i mail đ h i th c m c, đ t tour Và ng v i t ng đ a đi m du

l ch web h tr cung c p m các tour du l ch theo các loai hình du l ch ph c v du khách, ng v i m i tour s có thông tin h ng d n chi ti t trong tour đó v các v n đ liên quan, ngoài ra nh ng ch c n ng tìm ki m nh ng nhà hàng khách s n liên quan cung

c p cho du khách r t thu n tiên đ a ra s tho i mái cho du khách

Ch c n ng cung c p thông tin v các v n đ tin t c và s ki n chung và trong ngành

du l ch m i nh t đ c c p nh t

c bi t là h tr module ch c n ng tìm ki m khu du l ch, tour du l ch, khách s n giúp cho khách truy c p tìm th y nh ng thông tin mong mu n m t cách nhanh nh t Tìm ki m theo tour: Khách truy c p có th tìm theo ngày( trong ngày đó có tour nào

đ c m ) ho c tìm theo đ a danh tour t i theo ch đ

Tìm ki m theo khách s n: Có hai l a ch n ch n tìm theo sao( Khách s n máy sao?)

và theo đ a đi m đ n

Tìm ki m khu du l ch: tìm ki m theo tiêu đ , tên th hi n, n i dumg mô t ng n

Hi n th ngôn ng : trong t t c các th c th đ u đ c phân c u trúc th m c thành hai ph n Ti ng Vi t Và Ti ng Anh( Nó có th đ c coi nh là th m c cha c a các danh m c đ c c p nh t)

2 Phân tích ch c n ng các trang và Xây d ng CSDL Website

C s d li u đ c phân tích xây d ng và qu n lý v i Mysql, d li u đ c thi t k logic, ch t ch trong vi c truy xu t, h tr thông tin cho du khách truy c p ngoài web

h p lý, ti n d ng, t t c thông tin hi n th đ ng đ c qu n lý d li u thông qua giao

Trang intro: hình flash chuy n đ ng, cho phép l a ch n hai ngôn ng Ti ng Vi t

Và Ti ng Anh( Xây d ng c s d li u Ti ng Vi t Và ti ng anh song song, đ c coi

là hai danh m c cha, t n t i trong t t c các th c th )

Trang index:

Danh m c du l ch(Hình 8 minh h a):

name- là tên hi n th ngoài web, ki u là d li u s là text(varchar)

Xây d ng m t tr ng(parent), ki u d li u là integer(int)- l p trình s nh n di n

l y d li u theo đúng đ nh d ng, bi t đ c đâu là cha đâu là con

M t tr ng đ nh n di n ngôn ng (lang), n u là ti ng Vi t d li u c a tr ng s là

vn, ng c l i n u là ngôn ng ti ng Anh thì d li u hi n th t i tr ng là en- l p trình load d li u phù h p v i ngôn ng

Tên danh m c mu n th t nào, khi đ u v trí 1, nh ng v trí này s đ c thay

đ i, c p nh t theo ý (Yêu c u thi t l p m t tr ng hi n th - sort)

Và đôi khi d li u danh m c này mình không mu n hi n th ra ngoài web, nh ng

l i v n mu n nó t n t i trong c s d li u(Tr ng status- tr ng thái n hi n đ c thi t l p)

date-added: Ngày nh p d li u

last- modified: Ngày c p nh t cu i cùng

M t s tr ng nên cho thêm(Nên cho, khi c n có th s d ng, có th đ c coi là

b ng d li u đ y đ , khi c n có th s d ng, vì nó không nh h ng gì đ n m c đích

c a b n): subject(Miêu t thêm), detail_short, detail, image, image_large

B ng hi n th danh m c du l ch theo 3 mi n(th m c cha) và các lo i đ a hình(tbl_product_category) đã đ c xây d ng, gi d li u v các lo i đ a hình du

l ch đó ph i đ c c p nh t, ch c n ng th hi n thông tin c a lo i hình du l ch: xem t ng quan(frame=product, producttonghop) thông tin hi n th : hình nh nh , tên hi n th (T ng tr ng- có tr ng mô t , ghi chú), thông tin mô t

ng n.Website c n đ c thi t k ban đ u là m t l p t ng quan, đ khách truy c p

d dàng theo dõi, qu n lý(Hình 9- minh h a d li u yêu c u hi n th )

id, code, name, subject(Mô t đ i t ng)

parent( tr ng này l y thông tin t b ng tbl_product_category, đ bi t

đ c d li u nh p vào trong th c th tbl_product thu c lo i đ a hình du l ch nào

c a danh m c du l ch trong b ng tbl_product_category)

detail_short: thông tin mô t ng n, hi n th ngay l p 1

detail: Thông tin mô t chi ti t

Hình 10- Th hi n thông tin chi ti t và các thông tin liên quan, h tr ngay bên

d i

Ngoài các tr ng nh trong th c th tbl_product thì có thêm tr ng diemden: m i m t d a danh du l ch đ u có m t đ a đi m đ n, khi đi du l ch, thì diemden là đi u quan tr ng mà du khách quan tâm

Ch c n ng yêu c u ngoài web là th hi n thông tin nh ng đ a danh du l ch

m i, và n i b t D li u này c ng đ c ch a trong hai th c th riêng bi t tbl_product_new và tbl_product_special nh ng đ a danh trong hai th c th này

ph i t n t i trong th c th chung tbl_product, nó có m i liên h cha con

Và thông tin h tr nh nhà hàng, khách s n c ng liên quan t i tr ng d

li u diemden, yêu c u là ng v i t ng đ a danh du l ch thì ph i có đi m đ n, và các thông tin liên quan nhà hàng khách s n đ c h tr t i đi m đ n này và t i

đ a danh du l ch c a lo i hình du l ch đã ch n D li u diemden đ c l y thông tin t th c th tbl_place_category, th c th ph i đ c thi t k tách bi t là làm

th c th cha cho các th c th liên quan, thông tin các tr ng t ng t nh th c

th tbl_product_category Nh ng d li u có th nh p m t c p 64 t nh thành luôn theo hai danh m c ti ng Vi t và ti ng Anh, ho c nh p t nh thành theo danh m c

Thông tin nhà hàng: Hi n th thông tin hình nh, tên hi n th (G i nh ), mô t

ng n thông tin, mô t chi ti t c ng nh các thông tin khác, c ng đ c qu n lý s p

x p th t , hi n th hay không? Thu c đi m đ n nào? thu c danh m c nào(Ti ng Anh hay Ti ng vi t) đây đ c coi là thông tin đ n Nh ng thông tin đ n có th

đ c t o trong m t th c th : liên k t web, qu ng cáo, h tr tr c tuy n, gi i thi u, liên h ….và thông tin đ n này đ c ch a trong th c th tbl_content_category, danh m c đ n s là nh ng tên g i nh , nh ng đã đ c thi t l p b i nhà l p trình d a theo m u thi t k đ a ra Qu n lý thông tin ch

th c hi n l y d li u trong th c th tbl_content, d li u nhà hàng đ c l y t

th c th tbl_content

Tin t c và s ki n có ch c n ng hi n th thông tin n i b t và m i ngoài web,

d n t i yêu c u là ph i t o c s d li u đ qu n lý chúng, d li u này đ c t o

và qu n lý load d li u l y t hai th c th tbl_new_new và tbl_new_special, c ng

có các thông tin hình nh, tên…

Thông tin qu ng cáo hi n th ngoài web module right, d li u đ n nh nhà hàng, c ng đ c t o và load d li u cùng th c th v i nhà hàng, đ c l p trình theo mã

Ph n trên là n i dung ch c n ng chính c a website luôn đ c hi n th trên web t i module left và right, còn n i dung chính gi a đ c thay đ i theo l a

ch n

Trang gi i thi u: Ch c n ng hi n th n i dung d i d ng text, hình nh thay

đ i đ c do nhà qu n tr , nó là n i dung đ n(Minh h a Hình 11)

Trang tour dulich(frame=tour):

(tbl_tour_category) và tour(tbl_tour)) các thông tin th hi n nh khu du l ch,

nh ng thêm thông tin: th i gian, ph ng ti n, đi m đ n và đi m xu t phát, trong

m i tour cho phép du khách đ t tour, vì th mã tour đ c qu n lý chính xác m

b o thông tin chính xác cho khách hàng và nhà qu n lý

Trang Tin t c & S ki n(frame=news):

Hình 13 – Trang tin t c và s ki n hi n th

T hình trên ta th y tin t c và s ki n c ng đ c thi t k hi n th theo nhóm tin Tin t c c n chú tr ng t i ch c n ng tin m i và tin n i b t, đi u này đ c khách truy c p chú ý t i nhi u, vì th hai ch c n ng hi n th c ng đ c thi t k đáp ng nhu c u C ng có các thông tin nh các th c th khác, d li u đ c xây

d ng trong th c th tbl_new_category, tbl_new, tin m i và tin n i b t s đ c

t o qu n lý d dàng t hai th c th đ c t o tbl_new_new và tbl_new_special Trang liên h (frame=contact): có ch c n ng là m t form liên h qua email, thông tin s đ c g i t i email c a nhà qu n tr admin, email qu n tr admin đ c thay đ i, qu n lý b i nhà qu n tr

T các thông tin đã đi sâu phân tích ch c n ng t ng trang trên, d i đây là thông tin các tr ng c a th c th đ c t o, và mô hình quan h th hi n m i liên quan gi a các th c th :

2.1/ Thông tin các b ng:

Mô t chung d li u:

Khi truy c p vào khách Website khách xem thông tin các đ a danh du l ch ba

mi n theo lo i đ a hình du l ch(D li u đ c load t th c th tbl_product_category, và tbl_product và luôn chính xác ti n d ng), t đó du khách có nhu c u đi du l ch, tour du l ch đ c đ a ra cho khách l a ch n, tour

đ c t ch c theo lo i hình du l ch(tbl_tour_category, tbl_tour), tour du l ch: có

th i đi m kh i hành và đi m đ n, n u đ ng ý và mu n ch n tour, thì hãy đ t tour thông tin yêu c u c a b n s đ c h i đáp ngay khi nh n đ c thông tin b n g i

t i, thông tin h tr nhà hàng khách s n liên quan t i đ a danh du l ch, h tr tin

ó tbl_new_special: id, product_id, sort, status, date_added, last_modified, lang

ó tbl_new_new: id, product_id, sort, status, date_added, last_modified, lang

ó tbl_tour_category: id, code, name, parent, subject, detail_short, detail, image, image_large, sort, status, date_added, last_modified, lang

ó tbl_tour: id, code, name, parent, subject, detail_short, detail, image, image_large, sort, status, date_added, last_modified, lang, price, means, times, unut, book, new, link, id_category, id_xuatphat

ó tbl_tour_special: id, product_id, sort, status, date_added, last_modified, lang

ó tbl_tour_new: id, product_id, sort, status, date_added, last_modified, lang

ó tbl_place_category: : id, code, name, parent, subject, detail_short, detail, image, image_large, sort, status, date_added, last_modified, lang

ó tbl_place: id, code, name, parent, subject, detail_short, detail, image, image_large, sort, status, date_added, last_modified, lang, price, star

ó tbl_product_category: id, code, name, parent, subject, detail_short, detail, image, image_large, sort, status, date_added, last_modified, lang

ó tbl_product: id, code, name, parent, subject, detail_short, detail, image, image_large, sort, status, date_added, last_modified, lang, price, diemden

ó tbl_product_special: id, product_id, sort, status, date_added, last_modified, lang

ó tbl_product_new: id, product_id, sort, status, date_added, last_modified, lang

ó tbl_config: id, code, name, detail, date_added, last_modified

ó tbl_user: id, uid, pwd

2.1/ Mô hình quan h :

Hình 14- Mô hình quan h c a các d li u trong Website

3 Thi t k giao di n

3.1/ Giao di n ngoài web(L p 1):

Giao di n toàn b trang Web ph i hi n th đ y đ thông tin các m c c n thi t trong

n i dung c a nó B c c trang Web v m t hi n th đ c chia làm các vùng nh sau:

Hình 15- Các vùng hi n th trên Website

Trong các thành ph n trên, n i dung là ph n thay đ i nhi u nh t khi chuy n t trang này sang trang khác, các thành ph n khác h u nh đ c gi nguyên V i gi i pháp nh v y, v a ti t ki m đ c th i gian thi t k v a làm cho toàn b Website có

đ c tính nh t quán không quá lòe lo t nh các trang web gi i trí hay qu ng cáo

Là Website qu ng bá v thông tin du l ch, Website l y các hình nh, th ng c nh du

l ch đ p Vi t Nam làm trung tâm, sau đó các thông tin đ c sàng l c l i s nh m t

l i m i g i các du khách tham quan Website hãy đ n và du l ch t i Vi t Nam

Sau đây là m t s ý t ng thi t k các thành ph n t o nên giao di n Site:

a) Theme

• Ý t ng:

Toàn b trang Web l y màu xanh lá (green, bao g m m t màu đ m và nh t) làm

ch đ o Màu xanh t ng tr ng cho n c Vi t Nam, đ t n c đi lên t nông nghi p

v i b t ngàn các cánh đ ng lúa “xanh xanh th ng t p cánh cò bay” Màu xanh mang

l i m t c m giác êm d u, không gây khó ch u v i ng i nhìn Màu xanh l c nh (l t) góp ph n b tr cho vi c chuy n nh các chi ti t và làm n i b t các thành ph n khác

có màu đ m n m phía trên

Hình 16- M t ph n trang ch

Hai màu t ng ph n tr ng và xanh d ng góp ph n làm cho màu s c c a trang Web thêm hài hòa Màu tr ng đ c s d ng trong background, header text, m t s thành ph n trên thanh Navigation Bar làm d u nh màu xanh green v n khá đ m, trong khi đó màu xanh d ng (blue) có tác d ng làm n i b t các thành ph n khác đang trên n n màu ch đ o Màu Blue đ c áp d ng trên Scroll bar, content text và

m t s nút b m

• Thi t k :

Các thành ph n trên Theme đ c thi t k toàn b b ng Photoshop, các k thu t

đ c dùng đây là Guide Line và tô Gradient Các đ ng vi n m m m i trên Theme

đ c v b ng Pen

b) C t layout

V i ch c n ng Save for Web, Photoshop có l i th v c t nh giao di n trang Web

đã thi t k ra làm nhi u “m nh con” phù h p cho vi c đ a vào thi t k k t h p mã trên Dreamweaver ây là b c quan tr ng trong vi c hi n th c hóa Website, vì suy cho cùng n u trang Web thi t k càng đ p, v i đ các hi u ng màu s c (trong Photoshop) thì dung l ng càng cao t c s nh h ng tr c ti p t i t c đ load – m t

y u t v n c c k quan tr ng quy t đ nh “s s ng còn” c a m t Website

Vi c c t Layout b t đ u v i vi c phân chia vùng v i công c Knife trong Photoshop C t layout c ng có nhi u cách đ c t, đ c t đ c layout thì đó c ng là

m t k thu t, và khi n m b t đ c ý đ c a ng i thi t k , thì nó s tr nên d dàng

v i b n Càng d dàng h n, n u l nh v c l p trình b n c ng am hi u Layout có th

đ c c t chi ti t theo t ng trang, c t toàn b m t l t và đòi h i thi t k c ng đ c

t o t ngoài vào trong ch y demo( b n có th hi u nôm na nó là web t nh), ho c có

th ch c n c t nh ng gì b n c n trong quá trình l p trình, web này đ c c t theo t ng

ph n, c t theo c u trúc web đã đ c s p x p: Banner, Navigator, left, right, bootom,

và n i dung Và k t qu l y đ c thông s v kích th c, và màu T đó ta t o ra m t tampe website chu n theo m u đã thi t k , v i ng i l p trình d án website thì đi u

đó không có gì là ph c t p đ t o ra nh ng module chung, thu n ti n nhanh chóng trong quá trình làm vi c

Hình 17- C t layout v i Knife và ch c n ng Save for Web trong Photoshop

Sau khi phân chia vùng các hình nh s đ c phân chia làm hai ph n:

Ph n hình nh ít màu s c và đ n gi n: s đ c gi n l c t i thi u các màu và Save

l i v i đuôi GIF (đ i v i các thành ph n m t màu thì không Save l i do Dreamweaver

Hình 18- Trang web đ c đ a và Layout l i trên Dreamweaver

c) Module Box

Các h p ch c n ng đ c thi t k khá đ n gi n v i thành ph n header màu green

đ m và ph n content màu xanh lá m V i m t ít đ bóng, t t c các thành ph n nh

đ c n i h n lên phía trên t o s b t m t và gây n t ng v i ng i dùng

d) Banner

• Ý t ng:

V i ch đ chính xuyên su t toàn b Website là Du l ch ba mi n: B Nam, banner đ c thi t k theo phong cách chuy n: m i m t kho nh kh c ng i dùng l i đ c th y m t th ng c nh đ p c a m t mi n:

c-Trung-Mi n B c là V nh H Long (Impressive)

Mi n Trung là Nha Trang (Romantic)

Mi n Nam là Thành Ph H Chí Minh (Glorious)

Câu Slogan “Viettravel – Your Travelling Handbook” (Viettravel – C m nang du

l ch c a b n) kh ng đ nh: dù b n là ai, đang đâu n u đang ch n Vi t Nam là đích

đ n c a chuy n du l ch s p t i c a mình, hãy đ n v i chúng tôi!

• Thi t k :

Banner dùng Photoshop (PS) và Flash đ thi t k

PS ch nh s a (Crop, Color Modify,…) các hình nh thành ph n, thêm text vào

tr c khi chuy n sang Flash đ th c hi n các chuy n đ ng trong Banner

Trong Flash, 3 Frame đ u s d ng k thu t chuy n Alpha (chuy n m d n) đ mang l i c m giác nh nhàng và m i m cho hình nh, Frame cu i cùng s d ng chuy n đ ng ph c t p h n m t tí Frame cu i, ch đ c che b i 1 Layer m t n đ khi Logo ch y t phía trái sang ph i (trong khi hình cô gái ch y t ph i sang trái

tr c) s đ l ra câu Slogan chính gây chú ý h n cho ng i xem, t t c các thành

ph n (hình cô gái, text và c Logo) đ u dùng hi u ng Glow đ thu hút s chú ý c a user K thu t animation trên Banner toàn b là dùng Animation Tween (chuy n t

Hình 21- Logo Viettravel

• Thi t k :

Logo trong d án này là m t hình Vector đ c thi t k b ng AI (Adobe Illustrator)

vì đây là ch ng trình chuyên thi t k Logo và các hình v đ n gi n

f) Navigation Bar

̇ Ý t ng

ây là thành ph n quan tr ng nh t trong Webiste, nó gi ng nh “bánh lái” c a

m t con tàu gi vai trò đ nh h ng cho toàn b th y th đoàn Navigation c ng có th xem là “giao di n” gi a d li u c a toàn b Website đ i v i ng i s d ng Do đó,

thành ph n này ph i đ c thi t k sao cho v a d nhìn v a d s d ng và ph i hòa

hai m c Tour du l ch và Tin t c s ki n có s d ng Pop-up là m t c a s ch

nh t, text tr ng x d c và màu s c c ng ph i phù h p v i theme chính

Hình 23- Popup Menu trên thanh Navigation

Cu i thanh này là hai hình GIF đ c dùng đ t o hai nút l a ch n ngôn ng khá

tr c quan (hai hình GIF này là do s u t m đ c trên Internet)

• Thi t k :

Thi t k trong ph n này s d ng Photoshop là chính, riêng ph n Popup đ c t o

b ng JavaScript thông qua l p trình

g) Menu Bar

Menu là thanh th c đ n n m phía bên trái trong giao di n Web ây c ng là thành

ph n không thay đ i (không có s thay đ i v n i dung và hình th c) trong Website

Ý t ng thi t k Menu theo ba mi n du l ch là do tuân th theo m c tiêu lúc đ u

đ t ra: t c là Du l ch ba mi n Màu s c chuy n nh ph n đ u c a Menu góp ph n

làm n i b t ph n n i dung, và tránh gây c m giác nhàm chán khi ch thi t k Menu theo d ng List ph n l n các trang Web khác

M i m t m c trên Menu ba mi n này bao g m hai c p Popup (đã gi i thi u trong

ph n t ch c d li u), c p th nh t là tiêu chí du l ch (du l ch t nhiên, du l ch nhân

v n) và c p th hai là các hình th c du l ch c th (chùa, hang đ ng, du l ch bi n,…),

t t c đ u đ c thi t k gi ng Menu c p 1 (Menu ba mi n) t o s nh t quán v m t hình th c cho toàn b ph n đ u c a Menu này