Đồ án tốt nghiệp Khoa Công nghệ thông tin Xây dựng website giới thiệu các tỉnh thành Việt Nam Ngô Thành Tiến (1)

TRƯỜNG ĐẠI HỌC MỞ BÁN CÔNG TPHCM KHOA CÔNG NGHỆ THÔNG TIN... Flash Slideshow Maker có th.

TRƯỜNG ĐẠI HỌC MỞ BÁN CÔNG TPHCM

KHOA CÔNG NGHỆ THÔNG TIN

L I C M N

Chúng em xin chân thành c m n Khoa Tin h c, tr ng i h c m Thành ph

H Chí Minh đã t o đi u ki n cho chúng em th c hi n đ tài t t nghi p này

Chúng em xin chân thành c m n Th y Phan t Phúc đã r t t n tình h ng

d n, ch b o chúng em trong su t th i gian th c hi n đ tài v a qua

Chúng em c ng xin chân thành c m n t t c các Th y, các Cô trong Khoa đã

t n tình gi ng d y, trang b cho chúng em nh ng ki n th c c n thi t, quý báu trong

TP.HCM, tháng 01 n m 2009 Nhóm sinh viên th c hi n

Ngô Thành Ti n & Ph m Ngô Hoàng Y n

B C C LU N V N

-OoO -

Lu n v n đ c t ch c thành 7 ph n :

Ph n I : Gi i thi u t ng quan v đ tài

Ph n II : Trình bày v m c tiêu c a đ tài “Xây d ng website gi i thi u các t nh thành Vi t nam”

Ph n III : Xu t phát t m c tiêu nh đã trình bày ph n th hai đ a ra các v n đ c n gi i quy t

Ph n IV : Trình bày các gi i pháp nh m gi i quy t các v n đ c a đ tài

Ph n V : Trình bày các n i dung th c hi n c a đ tài

Ph n VI : Trình bày các k t qu th c hi n c a đ tài

Ph n VII : K t lu n v nh ng k t qu đ t đ c c a đ tài , nh ng v n đ còn t n đ ng và h ng phát tri n c a đ tài trong t ng lai

M C L C

Ph n I : GI I THI U T NG QUAN

Ph n II : M C TIÊU

Ph n III : CÁC V N C N GI I QUY T

1 Trang web ph i có giao di n đ p, màu s c hài hòa, hình nh b t m t

2 Dàn trang và giao di n thân thi n,d s d ng

5 C ng thông qua giao di n web, ng i qu n tr có th d dàng c p nh t thông tin cho c s d li u m t cách linh đ ng

Ph n VII : K T LU N

1 K t qu gi i quy t các v n đ đ t ra

2 H ng phát tri n đ tài

Ph L c

1 Gi i thích các khái ni m trong mô hình truy n thông

2 Gi i thích các khái ni m trong mô hình ý ni m x lý

3 Gi i thích các khái ni m trong mô hình ý ni m d li u

PH N I : GI I THI U T NG QUAN

Tr c đây Ng i Vi t nam mu n tìm hi u v các t nh thành nào đó ph i ki m tài li u trên sách báo ,th vi n ho c trên các thông tin khác.S tìm hi u thông tin v các t nh thành tr nên khó kh n,gi s sách nói v t nh thành Vi t nam có th l u tr nhi u cu n khác nhau ,không cu n nào nêu h t t t c Vì kh i l ng thông tin có th

l n nên vi c l u tr trên gi y tr nên khó kh n

Ngày nay công ngh thông tin tr nên ph bi n cho vi c l u tr thông tin v i

kh i l ng vô cùng l n.Internet ngày càng phát tri n và vi c tìm ki m thông tin v các

t nh không còn khó kh n n a.Ng i Vi t nam mu n tìm hi u rõ đ t n c c a mình

c ng nh các t nh thành thì ch vào Internet và duy t m t s trang nh www.angiang.gov.vn,www.hanoi.gov.vn, vi.wikipedia.org… là có th hi u thêm v

đ t n c con ng i n i mình đang sinh s ng

Không ch d ng đó thông tin gi i thi u v các t nh thành vi t nam v n không

đ c t p trung vào m t trang web đ t o s thu n l i cho Ng i s d ng.Gi s ta

mu n tìm hi u v t nh An giang,Hà n i ta ph i vào trang www.angiang.gov.vn, www.hanoi.gov.vn Chính vì lý do thông tin m i t nh không đ c t p trung và m t nhi u th i gian tìm ki m làm cho ng i s d ng ph i duy t qua t ng trang web, nên

em quy t đ nh ch n đ tài “Xây d ng website gi i thi u các t nh thành Vi t nam”

T trang web này ng i dùng có th tìm th y thông tin khái quát gi i thi u c a

m i t nh ,b n đ c a t ng mi n ,t ng t nh.Không m t quá nhi u th i gian đ tìm hi u thông tin gi i thi u v m t t nh thành nào đó

PH N II – M C TIÊU

Theo dòng ch y c a công ngh thông tin, m i l nh v c c a đ i s ng đ u đ c tin h c hóa Và thông tin v các t nh không n m ngoài qui lu t đó Vi c thi t l p m t website nh m qu ng bá thông tin v đ t n c con ng i ,đi u ki n t nhiên,kinh t xã

h i và v trí đ a lý c a m i t nh Vi t Nam là m t nhu c u c n thi t cho m t đ t n c

nh ngày nay

Vì v y, chúng em ch n đ tài “Xây d ng website gi i thi u các t nh thành Vi t nam”

v i mong mu n:

• Giúp Ng i vi t nam hi u rõ h n v đ t n c ,các t nh,thành ph …c a Vi t Nam mà l i t n r t ít th i gian:Thông qua website, ng i s d ng có th có

đ c nhi u thông tin v t nh thành c a Vi t Nam, giúp h có nhi u thông tin

v t nh mà mình mu n tìm hi u ho c giúp cho nhi u ng i mu n di c đ n

t nh khác H ch c n m máy tính lên và lên internet, th là m t kho thông tin v tình thành Vi t Nam hi n lên Còn đ i v i nh ng ng i xem mu n tìm hi u v Vi t Nam, thông qua website này h c ng có th hi u rõ h n v

đ t n c và con ng i Vi t Nam H có th th y đ c Vi t Nam ngày nay

đ p th nào, phát tri n th nào

• Cung c p m t h th ng các ch c n ng Tìm ki m thông tin v t nh thành,thành ph ,huy n: ôi khi m t s ng i Vi t không nh rõ tên ho c

mu n tìm thông tin v t nh đó R t đ n gi n du khách ch c n nh m t c m

t ho c m t t c a t nh nào đó, thông qua website h có th tìm ki m đ c

r t nhi u thông tin v t nh thành Hay h ch c n bi t tên t nh,thành ph

ho c huy n, website s li t kê ra m t danh sách t t c các t nh,huy n mà h

c n tìm

• B n đ tr c tuy n : Ngoài m t s thông tin h u ích mà website mang l i cho

ng i s d ng ,m t công c r t h u ích n a đó là b n đ tr c tuy n.Ng i

s d ng d dàng th y đ c v trí đ a lý các t nh trên b n đ và chi ti t nh ng

thành ph ,huy n…thu c t nh.B n đ còn giúp cho ng i đi tham quan du

l ch,nh ng ng i đi công tác ho c chuy n ch có th xác đ nh đ c v trí

và đ ng đi đ n t nh đó

Cu i cùng, m c tiêu website gi i thi u các t nh thành Vi t nam

h ng đ n là giúp cho m i ng i trong n c và ngoài n c d dàng tìm th y

thông tin và hi u rõ h n v đ t n c,con ng i và v trí đ a lý c a Vi t nam

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

sau khi phân tích nh ng thông tin trên ,đ trang web đ c nh v y chúng em

đ a ra m t s v n đ c n gi i quy t nh :

1 Trang web ph i có giao di n đ p, màu s c hài hòa, hình nh b t m t:

M t y u t không th thi u trong quá trình xây d ng và thi t k website

là vi c thi t k giao di n đ h a M t website hay ch a đ ng nh ng thông tin

h p d n mà không đ c tô đi m b ng giao di n đ h a, trong site không s

d ng b t kì hình nh nào, màu s c thì nh t nh o s khi n ng i xem mau c m

th y nhàm chán vì không đáp ng đ c nhu c u v th m m , vì v y s không

th thu hút đ c ng i xem Vi c thi t k web không nh ng ph i đ m b o th a mãn yêu c u v m t thông tin mà còn ph i th a mãn yêu c u v m t th m m

M t website nói v t nh thành Vi t nam s có màu s c hình nh khác v i m t website v ngh thu t Vì v y khi thi t k trang web ph i làm sao cho ng i xem ch c n nhìn vào giao di n c a trang web là bi t trang web làm v l nh

v c gì? V y m t website T nh thành vi t nam thì đi u đ u tiên là ph i s d ng nhi u hình nh v phong c nh đ p,thành ph ,con ng i đ v t và t t c nh ng

gì đ c tr ng v t nh đó, làm sao cho ng i xem khi nhìn vào nh ng hình nh đó

là bi t t nh đó có nh ng đ c đi m và nét n i b c gì, m t ph n nào giúp cho

ng i xem hi u thêm v thông tin t nh đó

M c đích c a trang web là t p trung t t c các thông tin v t nh thành Hình nh là m t ph n không th thi u nó góp ph n t ng c ng thông tin cho trang web h a mang ý ngh a khác nhau tùy vào n i dung c a trang Web, tuy nhiên chúng ph i d t i xu ng, b t m t và không đ c làm gi m giá tr c a thông đi p mà site đang c truy n t i Hình nh s d ng trong trang web ph i

đ c x lý đ gi m kích th c mà v n đ m b o v m t th m m tr c khi load

lên i v i trang web, kích th c hình là m t v n đ quan tr ng, n u hình có kích th c l n th i gian t i v s lâu, đi u này gây khó ch u cho ng i s d ng khi h ph i ng i ch trang web t i hình nh lên Nh ng n u hình nh kích th c quá bé khi load lên web b b hình s làm m t tính th m m c a trang web, làm cho ng i xem có c m giác trang web không đ c đ u t k và hình nh b b

s không th thu hút đ c ng i xem vì không ai mu n xem m t hình nh mà không th th y rõ đ c, nh v y s không th đáp ng đ c m c đích qu ng bá hình nh v t nh thành Vi t Nam c a website

2 Dàn trang và giao di n thân thi n,d s d ng :

có m t trang web sinh đ ng, ch t ch và b c c đ p m t, ngoài

nh ng ý t ng th m m , trang web còn ph i đ c x lí và xây d ng b ng nh ng

th nhi u l n đ đ m b o trang web ch y t t và có giao di n thi t k không thay

đ i trên nhi u phiên b n trình duy t khác nhau

Dù là trang HTML đ n thu n, s d ng hi u ng JavaScript, "nhúng" trong Php và có "giao d ch d li u" nhi u hay ít, s thành th o và n m v ng k

n ng dàn trang và công c thi t k nh Macromedia Dreamweaver, Microsoft FrontPage, Adobe Photoshop, Macromedia Flash c a chúng em là m t y u t

đ m b o ch t l ng cho trang web ch y t t và nhanh

3 Xây d ng công c tìm ki m :

Vì là trang web gi i thi u các T nh thành Vi t nam th hi n 64 t nh nên

có kh i l ng l u tr d li u l n vì v y không tránh kh i vi c xây d ng công

c tìm ki m thông tin là v n đ r t quan tr ng.T trang web ng i xem có th

d dàng tìm ki m thông tin theo hai cách :

Tr c h t là tìm ki m theo tên t nh,thành ph ,huy n đây, khi ng i

s d ng ch a bi t rõ ho c mu n nhanh chóng tìm tên t nh,thành ph ,huy n ch

c n nh p ô tìm ki m m t t hay tên t nh,thành ph ,huy n ch sau vài giây trang

k t qu s cho ra các t nh,thành ph ,huy n v a tìm đ c

Th hai là vi c tìm ki m n i dung thu c t nh.M t t nh hay thành ph có

th có nhi u n i dung Khi k t qu đ c tr v n i dung thu c m t t nh hay nhi u t nh khác nhau

C hai vi c tìm ki m trên đ u ph i tr v k t qu là danh sách các n i dung và các t nh th a đi u ki n tìm ki m cho ng i dùng có th nhìn th y

rõ ràng t t c các k t qu tìm ki m, danh sách các n i dung và t nh đ c trình bày d i d ng tóm t t.M i k t qu đ u có m t đ ng link đ đi vào chi ti t n i dung k t qu đó

4 N i dung trang web ch y u đi sâu v gi i thi u các t nh thành :

Ngoài giao di n c a trang web, n i dung là m t ph n quan tr ng không

th thi u c a m i trang web.Trang web c n ph i có n i dung phong phú cách trình bày n i dung c ng là m t v n đ nên cân nh c c a ng i thi t k

Trang web ch y u cung c p thông tin gi i thi u v các t nh thành Vi t nam nên n i dung c n t p trung thông tin đi sâu v các T nh thành Vi t nam.Ng i s d ng không c n m t quá nhi u th i gian đ tìm thông tin v m t

t nh nào đó m t s trang web khác,ch vài đ ng tác nh trên trang web c a chúng em ng i s d ng có th bi t đ c thông tin c th v t nh mình c n tìm

5 Nhúng Vi t b n đ vào web :

Trang web gi i thi u các t nh thành Vi t nam ch cung c p cho ng i s

d ng các thông tin v các t nh thành ,giúp cho ng i s d ng hi u đ c thông tin v các t nh nh ng ng i s d ng v n không bi t đ c b n đ Vi t nam nh

th nào hình d ng ra sao? v trí các t nh n m đâu trên b n đ ? các mi n s có

nh ng t nh nào ?các t nh s bao g m nh ng huy n nào?đ ng đi t i các đi m

đó ra sao và đi nh th nào đ t i đ c các t nh đó ?

T nh ng câu h i trên và là m t trang web gi i thi u v các t nh thành

vi t nam không th không có m t b n đ tr c tuy n cung c p cho ng i s

d ng Vì v y chúng em ch n Vi t b n đ đ tìm hi u và nhúng vào web gi i thi u các t nh thành Vi t nam

PH N IV – GI I PHÁP

V i các v n đ c n gi i quy t đ t ra nh trên đòi h i, chúng em quy t

đ nh s d ng nh ng gi i pháp sau đ đáp ng yêu c u c a m t Website gi i thi u các t nh thành Vi t Nam

1 Ch n ngôn ng l p trình ?

Hi n nay có r t nhi u ngôn ng l p trình có th làm web nh asp.net,php,java…M i ngôn ng đi u có nh ng th m nh quen giúp ng i l p trình có th xây d ng m t trang web t đ n gi n cho t i chuyên nghi p

Sau khi nghiên c u và tìm hi u chúng em quy t đ nh ch n php đ làm ngôn ng l p trình chính cho đ “Xây d ng website gi i thi u các t nh thành

Vi t nam“

V y php là gì? PHP (vi t t t h i quy "PHP: Hypertext Preprocessor") là

m t ngôn ng l p trình k ch b n hay m t lo i mã l nh ch y u đ c dùng đ phát tri n các ng d ng vi t cho máy ch , mã ngu n m , dùng cho m c đích

t ng quát Nó r t thích h p v i web và có th d dàng nhúng vào trang HTML

Do đ c t i u hóa cho các ng d ng web, t c đ nhanh, nh g n, cú pháp

gi ng C và Java, d h c và th i gian xây d ng s n ph m t ng đ i ng n h n so

v i các ngôn ng khác nên PHP đã nhanh chóng tr thành m t ngôn ng l p trình web ph bi n nh t th gi i

2 S ph i h p gi a ng i l p trình và ng i thi t k giao di n:

Vì đây là m t trang web d li u đ ng nên c n ph i có s ph i h p n ý

gi a ng i l p trình và ng i thi t k giao di n ây là đi u c b n đ u tiên c n

ph i th c hiên khi th c hi n đ tài này: ph i làm sao đ đ a đ c Mã c a ng i

l p trình vào giao di n c a ng i thi t k Có nh v y thì m i có th th c hi n

đ c song song v a vi t Mã v a thi t k giao di n ng i thi t k và ng i l p trình có th làm vi c đ c l p v i nhau giúp gi m b t th i gian Vì v y, tr c tiên ng i thi t k và ng i l p trình ph i có s th ng nh t v i nhau v site map ,b c c, c ng nh các ch c n ng c a ch ng trình

3 L u tr d li u c a website :

Website gi i thi u các t nh thành Vi t Nam là m t website đ ng, d li u

hi n th có th thay đ i và thêm m i Tr c h t là vi c thi t k m t c s d

li u đ m b o l u tr đ y đ các thông tin c a Website gi i thi u các t nh thành

Vi t Nam

Tr c khi đi vào l u tr d li u ta c n ph i có giai đo n thi t k c s d

li u.D li u có đ c l u tr t t hay không ,có t i u ch a ph thu c r t nhi u vào vi c thi t k c s d li u ra sao

Sau vi c thi t k c s d li u là l u tr và cài đ t h qu n tr c s d

li u Hi n nay có nhi u công c nh m h tr vi c cài đ t m t h qu n tr c s

d li u nh : sqlserver, mysql, oracle, acess…

So v i các ph n m m khác, Mysql thích h p cho vi c l u tr d li u c a

m t website và k t h p v i ngôn ng l p trình php ,ngày nay php là m t ngôn

ng l p trình r t ph bi n k t h p v i Mysql có th d dàng xây d ng m t web

th t chuyên nghi p C th h n, Mysql là m t gi i pháp cho vi c cài đ t và l u

tr d li u c a c s d li u Website gi i thi u các t nh thành Vi t nam

M t đi u thu n l i c a Mysql là d cài đ t s d ng và có th cài đ t

đ c trên các h đi u hành windows, linux Ngày nay đa s các máy ch đ u s

d ng h đi u hành linux đ làm máy ch web.N u m t ng i l p trình mu n

s n ph m web mình làm ra có th ch y đ c trên linux và windows thì nên

ch n php và mysql.chính vì th chúng em quy t đ nh ch n Mysql đ l u c s

d li u cho trang web gi i thi u các t nh thành Vi t nam

4 Công c xây d ng và phát tri n m t ng d ng web :

có s ph i h p n ý gi a ng i vi t Mã và ng i thi t k giao di n

có th xây d ng m t Website gi i thi u các t nh thành Vi t Nam chuyên nghi p h n, chúng em s d ng Adobe Photoshop đ thi t k layout, c t hình

nh cho web (slide), s d ng Macromedia Dreamweaver đ layout website

b ng ngôn ng HTML và đ l p trình

4.1 Macromedia Dreamweaver:

S d ng Macromedia Dreamweaver đ thi t k trang web vì đây

là m t ph n m m chuyên d ng đ thi t k web, có th thi t k trang web

m t cách đ n gi n nh vào hai ch đ màn hình design và Mã

Vì v y ng i thi t k có th nhìn th y ngay đ c giao di n mà mình mu n thi t k , không nh ng th ng i thi t k còn có th vào ngay màn hình Mã đ ch nh s a giao di n c a mình v i ngôn ng html đ n

gi n mà không c n trình đ l p trình cao Macromedia Dreamweaver còn

n i ti ng trong vi c x lý đ h a chuyên nghi p: thi t k m u, x lý, ghép nh đ t o nh ng m u đ h a ngh thu t, nh ph c v cho trang web…thông qua m t s công c v , hi u ch nh, đ màu và t p hi u ng giúp d dàng t o ra đ c nh ng layout đ p

có đ c nh ng hình nh đ p v i kích th c nh s d ng ph n

m m Adobe Photoshop đ x lí s t o ra đ c nh ng file hình nh v i kích th c khá nh nh vào công c c t hình Slice và ch đ l u save for web Nh m đáp ng đ c m c tiêu c a trang web t nh thành vi t , nh ng

đ a đi m du l ch n i ti ng c a Vi t Nam

4.3 Flash Slideshow Maker

S d ng Flash Slideshow Maker thi t k nh ng hi u ng hình nh cho trang web đ trang web b t m t h n Flash Slideshow Maker có th

th c hiên đ c nh ng đ an slide show v i nh ng t m hình ,k t qu t p tin l u có d i d ng file swf và có kích th c nh … Flash Slideshow Maker cho nhi u hi u ng đ t o ra m t đ an phim v i các thành ph n media nh hình nh Giao di n Flash Slideshow Maker tr c quan, d s

d ng thông qua nh ng công c cho phép b n t o ra nh ng sile show chuyên nghi p

4.4 Flash Macromedia

S d ng Flash Macromedia đ t o b n đ sinh đ ng cho website

t nh thành Vi t Nam

5 D li u đ c d dàng thay đ i và c p nh t :

M t trang web mu n ho t đ ng t t c n r t nhi u lý do nh v ph n c ng,

ph n m m ,đ ng truy n và r t nhi u y u t khác M t trong nh ng y u t không th thi u đó là n i dung trang web luôn luôn c p nh t ,thay đ i và ch nh

s a đ c thông tin cho phù h p v i hi n t i

N i dung hi n th trên Website gi i thi u các t nh thành Vi t Nam không ph i là d li u t nh mà đó là m t d li u đ ng, d dàng c p nh t, xóa hay

s a khi c n thi t làm đ c đi u này, website c n ph i có n i l u tr c s

d li u Th hai là d li u này c ng s đ c thao tác d dàng Thông qua môi

tr ng lan,wan,man và internet, d li u có th đ c nh p m i, thay đ i hay xóa T đó, n i dung hi n th c a website cho ng i dùng c ng ph i thay đ i theo

Ng i có quy n thay đ i, xóa, thêm m i n i dung cho website là ng i

qu n tr có th thao tác trên c s d li u, ng i qu n tr ph i có m t tên

đ ng nh p và m t kh u b o đ m an tòan cho ng i qu n tr , m t kh u nên

đ c mã hóa

Tuy nhiên, có m t v n đ đ t ra là không ph i t t c nh ng ng i nào thu c nhóm qu n tr c ng đ u có th thay đ i, xóa, s a t t c d li u Ng i

qu n tr ph i đ c phân quy n nh t đ nh khi đ ng nh p vào h th ng Tòan h

th ng s có ng i qu n tr có toàn quy n cho c s d li u Ng i này s c p quy n ti p theo cho nh ng ng i qu n tr khác

6 Sao l u và ph c h i d li u :

s a và nhúng vào trang web c a mình nh Vietbando,Googlemap…

Vì đây là đ tài “Xây d ng website gi i thi u các t nh thành Vi t nam” nên c n ch n b n đ chi ti t v Vi t nam và đ đáp ng yêu c u đó nên chúng

em ch n Vietbando đ nhúng vào trang web.Vietbando là trang web cung c p chi ti t v b n đ Vi t nam,các t nh,các huy n.Vietbando cung c p cho ng i

l p trình các hàm Map API và ví d m u cho phép ng i l p trình có th nhúng vào trang web phát tri n theo h ng riêng

PH N V – N I DUNG TH C HI N

Sau khi xác đ nh đ c m c tiêu cho m t Website gi i thi u các t nh thành Vi t Nam , chúng em đã d a vào đó nh m đ a ra nh ng v n đ c n gi i quy t T đó, chúng em s d ng nhi u gi i pháp đ xây d ng m t Website gi i thi u các t nh thành

Vi t Nam Sau các giai đ an đó là giai đo n th c hi n ch ng trình nh m đáp ng các nhu c u và m c tiêu nh đã đ ra Quá trình xây d ng ch ng trình đ c th c hi n theo trình t nh chúng em trình bày d i đây

1 S t ng tác gi a l p trình c s d li u và thi t k giao di n :

Ngày nay, m t website có đ y đ m t ch c n ng ch a đ mà c n ph i có tính th m m Và t ng t , m t website ch có giao di n đ p mà d li u c

đ nh, không thay đ i đ c, không t ng tác đ c v i ng i dùng thì đó không

ph i là m t website chuyên nghi p

c bi t, nh Website gi i thi u các t nh thành Vi t nam, v a có đ y đ

ch c n ng tìm ki m, v a có th giúp ng i dùng tìm ki m thông tin nhanh chóng và b n đ online, l i v a ph i có giá tr th m m cao

Chính vì v y, vi c k t h p t t gi a hai công c l p trình web và thi t k giao di n web là Dreamweaver,photoshop r t quan tr ng

Ng i l p trình xây d ng nh ng đo n Mã đ t ng tác v i giao di n mà

ng i thi t đ a cho và vi t các đ an mã l nh đ xây d ng ch c n ng cho

ch ng trình M t nguyên t c chúng làm vi c gi a ng i l p trình và ng i thi t k giao di n đó là: nh ng id c a các control mà ng i l p trình s d ng thì

ng i thi t k không đ c thay đ i đ tránh vi c phát sinh l i t phía các đo n

d ng l i đo n mã l nh mà còn d dàng cho ng i thi t k Khi c n thay đ i cách th c th hi n, ch c n vào đi u khi n ng i dùng thay đ i thì nh ng ph n nào trong website có s d ng đi u khi n đó l p t c thay đ i theo Ng i thi t

k khi s d ng đi u khi n ng i dùng s ki m soát đ c vi c hi n th c a toàn website đ i v i ng i dùng

Khi ph n ng d ng cho ng i qu n tr ch a hoàn thành, có th nh p d

li u tr c ti p vào các b ng c a c s d li u n khi ch c n ng này đ c hoàn thi n, chúng em nh p li u và s a d li u t các trang ng d ng c a ng i qu n

tr Khi d li u nh p vào và hi n th ra ph n ng i dùng, c ng i thíêt k và

ng i l p trình s ch nh s a l i các trang cho phù h p đ đi đ n m t ch ng trình th ng nh t

2 Xây d ng b n phác th o ch ng trình :

T m c tiêu c a m t Website gi i thi u các t nh thành Vi t Nam, chúng

em đ a ra b n phác th o(prototype)

V b n phác th o nh m đ li t kê ra các ch c n ng c a ch ng trình, s

đ nh đ c v trí nào, đâu trên trang web có ch c n ng gì, hi n th d li u đ i

v i ng i dùng nh th nào.B n phác th o đ c v s b b ng tay, trên các t

gi y l n B n phác th o đ c xây d ng s đ a ra đ c các ch c n ng chính

c a ch ng trình Và qua đó s s p x p, b c c trang web sao cho h p lý, d dàng cho ng i s d ng Vi c phác th o trang web cu i cùng s cho ra cái nhìn

t ng quát v ch ng trình, h th ng hóa các ch c n ng ch y u c a ch ng trình

Trong quá trình xây d ng b n phác th o, chúng em tham kh o m t s website gi i thi u v các t nh c a Vi t Nam đ đ a ra b c c chung cho website riêng c a mình

Vi c v b n phác th o bao g m hai ph n: b n phác th o cho ph n ng i dùng và b n phác th o cho ph n ng i qu n tr (admin)

Qua vi c thíêt k b n phác th o, chúng em li t kê ra đ c các ch c n ng

c b n c a website đ t đó có th đi đ n b c ti p theo là phân tích và thíêt k sitemap

3 Thi t k s đ Site :

Tr c khi b c vào thi t k giao di n c a t ng trang web ph i thi t k

s đ Site xem website c a mình s có bao nhiêu trang, ph n hình nh, ph n flash s đ t đâu t o s thu n ti n cho vi c thi t k sau này Nhìn vào s đ Site đ thi t k chi ti t t trang

Sitemap website gi i thi u các t nh thành Vi t nam

T s đ trên ta có th nh n th y t ng quan trang web có bao nhiêu trang

và ch c n ng c a t ng trang s làm nh ng gì

- Trang ch : cung c p cho ng i s d ng cái nhìn t ng quan v

m c đích c a trang web nên ph n gi i thi u c a trang web r t quan

tr ng,nhìn vào ph n gi i thi u ng i s d ng có th bi t đ c n i dung trang web này vi t ra đ làm gì ? Vì là trang web gi i thi u các t nh thành Vi t nam nên t trang ch ng i s d ng có th bi t đ c n c

Vi t nam đ c chia thành bao nhiêu mi n và có bao nhiêu t nh thành.có link chi ti t v các t nh,các mi n

- Trang mi n : Gi i thi u s l c ,nh ng đ c đi m chung c a

và b n đ chi ti t c a t nh

- Trang huy n : Gi ng nh trang t nh v danh sách các huy n ,hình nh gi i thi u ,link b n đ chi ti t các huy n đ u nh trang t nh trang huy n ch có ph n gi i thi u s l c v huy n đó

- Trang tin t c (chi ti t th lo i) : Nêu lên thông tin đ y đ c a

m t th lo i hay m t tin c a m t tiêu đ th lo i c a t nh

- Trang k t qu tìm ki m : Th hi n các k t qu v a tìm đ c t

t khóa tìm ki m

- Trang liên h : th hi n form thông tin cho ng i s d ng g i tin

đ n ng i qu n tr

- Trang login : dùng cho ng i qu n tr có tên đ ng nh p và mât

kh u truy c p vào h qu n tr c a trang web

- Trang admin : sau khi đ ng nh p vào ng i qu n tr có th th y các ch c n ng mà ng i qu n tr có th thao tác

- Trang qu n lý ng i dùng : Th hi n danh sách các ng i qu n tri và cho phép ng i qu n tr t i cao có th t o các ng i qu n tr

m i,c p quy n h n,s a thông tin,xóa các ng i qu n tr Trang này ch có

ng i qu n tr t i cao có th vào

- Trang qu n lý database : Cung c p cho ng i qu n tr t i cao có

th sao l u và ph c h i c s d li u t giao di n web

- Trang tin liên h : Cho phép ng i qu n tr t i cao đ c và tr

- Trang qu n lý t nh : Th hi n danh sách các t nh ,t nh này thu c

mi n nào,danh sách các huy n thu c t nh và có th l c các t nh theo

mi n.Cho phép thêm,s a,xóa thông tin các t nh

- Trang qu n lý huy n : Th hi n danh sách các huy n ,các huy n này thu c t nh nào và có th l c theo t nh.Cho phép thêm, xóa, s a các huy n

- Trang qu n lý bài vi t : Th hi n danh sách các bài vi t thu c các t nh và có th l c l y ra các bài vi t thu c m t t nh nào đó.Cho phép thêm, xóa, s a các bài vi t

4 Thi t k giao di n t ng tác v i c s d li u :

4.1 Thi t k layout:

T b n phác th o b ng tay và s đ site v i các ch c n ng c a tùng trang web chúng em s d ng ch ng trình Adobe Photoshop đ đi vào thi t k các giao di n cho trang web

a Layout ng i s d ng : Trang web có 6 layout:

Layout trang ch :

T trang ch ng i s d ng có th th y đ c danh sách các t nh thành Vi t nam,gi i thi u s l c v trang web Ng i s d ng d dàng đi vào chi ti t t ng mi n b ng cách click vào link các mi n ho c ch n vào b ng đ c a theo t ng mi n.Ngoài ra ng i dùng có th d dàng nh p t khóa tìm ki m

Layout trang mi n :

Trang mi n th hi n n i dung danh sách các t nh thành thu c

mi n đó,gi i thi u mi n và m t s hình nh tiêu bi u nói v mi n.Ngoài ra t trang mi n ng i dùng có th xem đ c b n đ nh ng tình thu c mi n và có

th click vào t nh trên b n đ đ đi vào chi ti t các t nh ho c click các link bên ngoài danh sách các t nh

Layout trang t nh thành :

Trang t nh thành th hi n danh sách các huy n thu c t nh,gi i thi u t nh,m t vài hình nh tiêu bi u ,các bài vi t nh đi u ki n t nhiên,l ch

s ,du l ch,v n hóa,kinh t …v t nh đó.Ng i dùng c ng có th xem đ c b n

đ online c a t nh đó

Layout trang huy n :

Trang huy n c ng nh trang t nh nh ng ch th hi n ph n gi i thi u v huy n.Danh sách huy n và hình nh là c a trang t nh

Layout trang b n đ :

Layout trang liên h :

Bao g m thông tin liên h : h tên, email… Và n i dung ng i dùng c n g i đ n ng i liên h Có b gõ ti ng vi t nh m h tr ng i dùng đu c t i u h n

Nh v y c 6 layout trang web đ u đ c chia làm 3 ph n: ph n baner, ph n n i dung và ph n footer i v i ph n ph n baner, ph n nút liên k t, ph n các công c tìm ki m đ u đ c thi t k trên cùng m t

ph n banner.Ph n banner và ph n footer đ u nh nhau m i trang web

t o s th ng nh t cho toàn b Website Ph n n i dung trang: đ i v i m i layout s có giao di n khác nhau

b Layout ng i qu n tr : Layout trang login :

Layout trang admin :

Trang admin dùng đ qu n lý các thông tin c a trang web.T trang này s link t i các trang c p nh t thông tin c a t ng ph n trong trang web

Khi t o ng i dùng m i n u check vào ô quy n h n t i cao thì

đ ng ngh a ng i qu n tr này s có toàn quy n trên h th ng web ng c

l i s ch n các t nh mà ng i dùng có quy n thao tác.L u ý khi ng i dùng có quy n trên t nh nào thì có quy n thay đ i n i thông tin t nh đó

nh thêm,s a,xóa các huy n,các bài vi t thu c t nh đó Layout trang tin liên h :

T trang tin liên h ng i qu n tr có th đ c đ c các tin t

ng i s d ng g i cho.c ng t đây ng i qu n tr có th xóa tin này và

c ng có th tr l i l i cho ng i s d ng b ng các click vào link reply Layout trang sao l u và ph c h i c s d li u :

Ng i qu n tr có th sao l u c s d li u b ng cách click vào

T trang này có th thay đ i đ c hình b n đ ,n i dung gi i thi u trang web c a ph n th hi n trang ch

Layout trang qu n lý mi n :

Trang mi n qu n lý tên mi n,thêm ,s a, xóa các mi n.Gi i thi u

mi n Layout trang qu n lý t nh :

Trang qu n lý t nh cho phép thêm,xóa,s a các t nh ,thêm các huy n,bài vi t thu c các t nh.C p nh t t nh thu c mi n nào ,có th l c các t nh theo mi n

Layout trang qu n lý huy n :

Trang qu n lý huy n cho phép thêm,xóa,s a các huy n C p nh t huy n thu c t nh nào ,có th l c các huy n theo t nh

Layout trang qu n lý bài vi t :

Trang qu n lý bài vi t cho phép thêm,xóa,s a các bài vi t C p

nh t bài vi t thu c t nh nào ,có th l c các bài vi t theo t nh

4.1.1 Thi t k baner:

u tiên dùng công c Rounded Rectange Tool (U) v m t hình

ch nh t v i kích th c width:842px, height: 117px, radius : 15px, dùng style Drop Shadow v i Blend Mode : Multiply, Opacity : 11%, Angle 90

đ , Distance : 4px, Spead : 0%, Size: 5px , style Outer Glow v i Blend Mode : Multiply và đ màu gradient gi ã hai màu xanh đ m #43aa1d và xanh nh t #c2f3af, đ ng th i dùng m t hình b n đ Vi t Nam v i ch đ hoà ch n soft light ta s có đ c hình hình ch nh t nh sau:

Ti p đ n dùng công c text đ đánh ch ‘T nh Thành Vi t Nam’

v i font HelveticaNeue, font này ch s không có d u, đ có d u trên text ‘T nh Thành Vi t Nam’, em dùng font Unicode, gõ t ng d u t ng

ng v i t nh thành vi t nam, click ph i chu t vào layer d u t ng ng,

ch n Rasterize Type đ chuy n t text sang hình

4.1.2 Ph n button:

G m các nút trang ch , mi n b c,mi n nam,mi n trung, liên h

V i hình banner đã thi t k trên chúng em dùng Mã html đ chèn nh ng liên k t vào hình banner và x lý link đó t i nh ng trang đúng v i link đó Riêng danh sách mi n chúng em dùng hàm l y ra t c

s d li u Giúp cho trang web link đ ng h n khi ng i qu n tr thêm, xóa m t mi n s đ c c p nh t cho ng i dùng

4.1.3 Ph n menu tìm ki m:

G m 2 công c tìm ki m: T nh thành và n i dung nh m th a mãn

nh ng ch c n ng tìm ki m khác nhau c a ng i dùng

+ Menu tìm ki m b ng cách nh p t khóa vào ô tìm ki m:

Gi ng nh ph n thi t k menu ph n menu tìm ki m c ng l y hình t banner và dùng Mã html đ chèn nh ng control html vào

Nút tìm ki m đ c thi t k b ng photoshop

4.2 Thi t k hình nh sileshow d i d ng file flash:

đây chúng em dùng ph n m m FLASH SLIDESHOW MAKER

đ t o sileshow cho nh và xu t d i d ng file *.swf FLASH SLIDESHOW MAKER Có th download t i đ a ch : http://www.flash-slideshow-maker.com/download/

Sau khi download v và cài đ t xong s th y giao di n nh sau

ây là giao di n cho ta add các hình c n sileshow

Giao di n này cho phép ta ch n các hi u ng đ sileshow cho

nh FLASH SLIDESHOW MAKER cung c p cho ta r t nhi u hi u ng.Có th cho m t nh hay nhi u nh m t hi u ng