Tìm hiểu công cụ Adobe Dreamweaver CS3 và ứng dụng ngôn ngữ PHP xây dựng website bán hàng trực tuyến động kết nối cơ sở dữ liệu MySQL

 HTML Hyper Text Markup Language là ngôn ng đ quy đ nh cách hi n th thông tin trong trang web... Ch đ nh size Ok... webtm_sanpham webtm_loaisp webtm_chungloaisp webtm_sanpham webtm_l

TR NG I H C M TPHCM



ÁN MÔN H C CHUYÊN NGÀNH : C S D LI U

tài : Tìm hi u công c Adobe Dreamweaver CS3

L i m đ u

Trong th i đ i ngày nay d ch v kinh doanh online trên các website bán hàng tr c tuy n đã không ng ng phát tri n và v n xa, đáp ng các nhu c u mua s m, tìm ki m thông tin s n ph m c a khách hàng Qua internet vi c giao d ch trao đ i hàng hóa đã tr nên nhanh chóng và ti n l i, không m t quá nhi u th i gian và công s c

ng d ng website bán hàng tr c tuy n tr nên hi u qu và đang là tiêu chí hàng

đ u c a nhi u doanh nghi p trong và ngoài n c Lo i hình d ch v này không nh ng là cách th c marketing d ti p c n nh t đ i v i khách hàng mà còn đem l i hi u qu kinh doanh cao

Kinh doanh bán hàng trên website đang là hình th c ph bi n đ c nhi u doanh nghi p l a ch n nh t là các l nh v c kinh doanh th i trang, công ngh thông tin, vi n thông…

Chính vì l đó mà em th c hi n đ án “Tìm hi u công ngh Adobe Dreamweaver CS3 và ng d ng ngôn ng php xây d ng website bán hàng tr c tuy n đ ng k t n i c

s d li u MySQL” v i mong mu n góp ph n vào vi c công ngh hóa các d ch v bán hàng th công nh tr c đây án xây d ng hoàn ch nh n n t ng c a m t website

đ ng có k t n i c s d li u chi ti t, h p lý nh t theo qui mô trung bình ng th i đ

án này c ng là đi u ki n c n và đ đ phát tri n website có qui mô l n thích h p cho nhu c u ngày m t cao h n c a doanh nghi p

L i c m n

Trong quá trình th c hi n đ án “ Tìm hi u công c Adobe Dreamweaver CS3 và

ng d ng ngôn ng PHP đ l p trình website bán hàng tr c tuy n đ ng k t n i c s d

li u MySQL” em xin g i l i c m n chân thành nh t đ n v i th y H Quang Kh i,

ng i luôn nhi t tình, t n tâm h ng d n em đ hoàn thành t t đ án này Em hy v ng trong t ng lai g n có th phát tri n nhi u ng d ng t đ tài này đ góp ph n xây d ng

và phát tri n n n công ngh thông tin n c nhà

I CH NG I : ADOBE DREAMWEAVER CS3

1) Tìm hi u s l c công c Adobe Dreamweaver CS3

a Giao di n chính trong Adobe Dreamweaver CS3

b T ng b c t o Site

Qu n lý d li u website đ c chi ti t, bao quát, g n gàng, c th h n

 B c 1 : Menu site -> New site

 B c 2 : Thi t l p các thông s (Cho m t website t nh)

c Tìm hi u các công c chính

 Các ch đ quan sát

 Code : Ch đ code c a page – phù h p v i l p trình, ki m tra code

 Design : Ch đ giao di n website – phù h p v i vi c thi t k

 Split : Ch đ k t h p c a code và giao di n – phù h p v i thi t k , l p trình

 T o trang HTML

 B1 : Menu File  New

 B2 : Ch n các trang t ng ng theo nhu c u

 Xem tr c trang : F12 – gi ng nh ng i dùng quan sát website

 Edit Browser List : Thay đ i, thi t l p trình duy t web m c đ nh đ demo

 Thu c tính trang

 Cách 1 : Modify -> Page Properties

 Cách 2 :

Tab Apperrance :

Page font : Font m c đ nh cho trang

Size : C ch m c đ nh cho trang

Text color : Màu ch m c đ nh cho trang

Background color : Màu n n cho trang

Background image : nh n n trang web

Repeat : Các l p l i nh n n

No Repeat-x : L p l i nh n n theo chi u ngang trang web

Repeat-x : L p l i nh n n theo chi u ngang trang web

Repeat-y : L p l i nh n n theo chi u d c trang web

Repeat : L p l i nh n n theo chi u ngang và chi u d c trang web

Left margin : l trái trang web

Right margin : l ph i trang web

Top margin : l trên trang web

Bottom margin : l d i trang web

Tab Title/ Encoding :

Title : Tiêu đ c a trang web

Encoding : Ch n Unicode (UTF-8)

Tab Link

Link color : Màu link

Rollover links : Màu khi di chuy n

mouse vào link

Underline style : g ch d i

 n hi n thanh Properties : Nh p menu Window  ch n Properties

 Co giãn : Nh p nút hình tam giác góc d i ph i c a thanh Properties

 Toolbar Document

 Là thanh toolbar ch a các thao tác v i tài li u hi n hành Toolbar này ch a các nút Design, Code, Split mà b n đã dùng

 n hi n toolbar Document : Nh p menu View  Toolbars  Document

 M t s nút trên toolbar document

Code : Ch đ Code Split : Ch đ Split Design : Ch đ Design Title : Tiêu đ trang Upload / Download trang web Preview : Xem th trang

 Là vùng n m d c bên ph i vùng so n th o ây là n i ch a r t nhi u thông

tin mà b n có th dùng đ t o và đ nh d ng trang, các panel th ng dùng trong đây là CSS, File

 n hi n : Nh p nút m i tên c nh trái c a Panel

 HTML (Hyper Text Markup Language) là ngôn ng đ quy đ nh cách hi n

th thông tin trong trang web HTML g m nhi u l nh, m i l nh g i là 1 tag

M i tag quy đ nh 1 cách th c hi n th d li u trong trang web Ví d nh :

ch đ m, ch nghiêng, màu ch … Ng i xem trang web không th y các tag

mà ch th y các d li u đ c đ nh d ng b i các tag Nói đ n gi n : HTML là

1 ngôn ng dùng đ t o ra các trang web

 Các tag cùng v i d li u trong đó đ c l u trong 1 file text, g i là trang web File này th ng có tên m r ng là html ho c htm

User

(Browser)

áp ng (htm,gif…)

Web Server Yêu c u

User

(Browser)

Yêu c u

Web Server

PHP, ASP H CSDL

Tools

qu n tr

3) Thanh công c Insert bar : Common

t tên m neo là : linktrangchu Khi có d u hi u quay v t i m neo này

s d dàng Thu n ti n vi c : quay v đ u trang, hay link t i cu i trang, đ u trang, n i có link trang ch v….v…

Text : N i dung link hi n th Link : K t n i đ n 1 trang html khác Target : _blank : click hi n th new window _self : thay trang đang hi n th _top : trên cùng …

Tittle : tiêu đ link Access key, Tab index h tr tìm ki m

Text : Tên hi n th cho email link

Bi u t ng 4 : T o Table

Bi u t ng 5 : insert DIV tag (s nói rõ ph n CSS)

Bi u t ng 6 : Images Bi u t ng 7 : Flash Bi u t ng 8 : Date

Rows : s hàng Columns : s c t Table width : đ r ng table – pixel,% Border thickness : dày vi n khung Cell padding : kho ng tr ng trong td Cell spacing : đ r ng vi n khung Header : Tùy theo ng i dùng mu n đ t

m c đ nh v trí header Align caption :

Default : gi a trên d i Top : trên, Bottom : d i Left : trái, Right : ph i

4) MEDIA

a Hình nh :

 Chèn hình :

B1 : Nh p v trí c n chèn hình B2 : Menu Insert  Image B3 : ch n file hình

B4 : Alternate Text :Text thay th cho hình Long description : Gõ url c a file mô t hình Có th s d ng java

 Thu c tính :

Vspace/Hspace : Kho ng cách t hình t i ch theo d c/ngang

W : B r ng c a hình H : B cao c a hình Src: đ a ch ,tên file hình Link : đ a ch trang web s hi n khi user click vào hình

Target : ch đ nh n i mà trang web liên k t s m ra

Low src : tên file hình ph - kích th c nh h n(đen tr ng hay xám) Alt : dòng ch hi n ra khi ng i xem đ a mouse vào hình ho c khi browser không hi n đ c hình

Border : đ dày c u đ ng vi n quanh hình N u đ b ng 0 thì hình s không có vi n

Align : cách canh c a hình so v i v n b n xung quanh (left, right) Crop : dùng đ c t b t hình (cho nh l i)

Brightness and Contrast : ch nh đ sáng, đ t ng ph n c a màu trong hình

 Chèn Image Placeholder :

S d ng khi b n mu n đ t ch tr c đ chèn hình sau(do hi n t i ch a có hình)

nh sau :

B1 : Nh p v trí mu n chèn B2 : Menu Insert  Image Object  Images Placeholder ho c Insert Bar

 tab Common  Images  Images Placeholder

t tên, height, width, color, Alternate text

Mu n đ a hình vào v trí thì nh p đúp vào Image placeholderch n hình

 Chèn Rollrover Images

Khi đ a chu t vào hình, hình s đ i thành 1 hình khác

Image name : tên

Original image : ch n hình th nh t, hình này hi n ra tr c tiên

Rollover image : ch n hình 2, hình này s hi n ra hinh user đ a chu t vào hình 1 Preload rollover image : load 2 hình khi trang web v a n p xong

Alternate Text : ch hi n thay th cho hình khi hình ch a hi n

URL : đ a ch web liên k t khi user click vào hình

b FLASH

 Chèn Flash vào website :

Menu Insert  Media  Flash

Ch n file Flash trong m c URL

 Chèn Flash video :

Menu Insert  Media  Flash Video

Ch n file flash ho c gõ URL c a file flash trong m c URL

Ch đ nh size

Ok

Gi ng Flash button nh ng ch ch a text

Insert  Media  Flash Text

Hi u ch nh t ng đ ng Glash Button

 Chèn nh c, chèn phim

Trang ch Gi i thi u S n ph m Khuy n mãi Tuy n d ng H tr Liên h

2) Giao di n website bán hàng t nh

a Trang ch : index.html

b Gi i thi u : gioithieu.html

c S n ph m : sanpham.html

 S n ph m : Laptop

 S n ph m : Desktop

 S n ph m : Khác

d Khuy n mãi : khuyenmai.html

e Tuy n d ng : tuyendung.html

f H tr : hotro.html

g Liên h : lienhe.html

www : là n i l u tr trang web -> T ng t nh 1 Hosting

c Giao di n qu n lý CSDL : phpMyAdmin Database Manager Version 2.10.3

 Cách đ ng nh p:

 Open trình duy t web : Firefox, Internet Explorer, Google Chrome v v

 Gõ vào thanh Address ; localhost

 Click vào : phpMyAdmin Database Manager version 2.10.3

 Khung đ ng nh p : root - vu

 Giao di n qu n tr CSDL : phpMyAdmin

Tên CSDL Các Table

Ch c n ng qu n tr CSDL

webtm_sanpham  webtm_loaisp  webtm_chungloaisp 

webtm_sanpham  webtm_loaisp  webtm_chungloaisp 

5) Giao di n Website

a Trang ch

b Gi i thi u

c S n ph m

d Tin t c

e Tìm ki m

f Liên h

g QLUser : qu n lý user

 Account Administrator : Admin – pass : Admin

 Qu n lý CSDL

(i) Thêm

(ii) Xóa Click vào Xóa

N u thành công :

Không có thông báo gì Sau khi load l i s n ph m b m t đi

N u không thành công :

(iii) S a

 Qu n lý User

(i) Thêm

(ii) Xóa Click vào Xóa

K T LU N

án hoàn t t :

Tìm hi u công c Adobe Dreamweaver CS3

Hi u bi t v ngôn ng l p trình website : HTML, PHP, JavaScript

Website t nh hoàn ch nh v n i dung

Website đ ng hoàn ch nh :

 Giao di n, code, pages đ c l p trình b ng ngôn ng PHP

 C s d li u :

S d ng ngôn ng MySQL

Qu n tr b ng phpMyAdmin Database Manager Version 2.10.3

 Trang bán hàng : chi ti t, d qu n lý vì danh sách s n ph m đ c l p trình phân trang – phân nhóm hàng c th , sinh đ ng v i hình nh s n ph m đa

Qu n lý user – Full control

Modifier : Qu n lý CSDL – Full control

User : Qu n lý CSDL – Add, Edit

M C L C

I CH NG I : ADOBE DREAMWEAVER CS3 2

1) Tìm hi u s l c công c Adobe Dreamweaver CS3 2

a Giao di n chính trong Adobe Dreamweaver CS3 2

b T ng b c t o Site 2

c Tìm hi u các công c chính 5

2) M t vài đi u v ngôn ng HTML 10

a Website t nh 10

b Website đ ng 10

c Gi i thi u 10

d C u trúc c a 1 trang web 11

3) Thanh công c Insert bar : Common 12

4) MEDIA 14

a Hình nh 14

b FLASH 16

II CH NG II : L P TRÌNH WEBSITE BÁN HÀNG T NH – KHÔNG K T N I CSDL 18

1) S đ thi t k website 18

2) Giao di n website bán hàng t nh 19

a Trang ch : index.html 19

b Gi i thi u : gioithieu.html 20

c S n ph m : sanpham.html 21

d Khuy n mãi : khuyenmai.html 24

e Tuy n d ng : tuyendung.html 25

f H tr : hotro.html 25

g Liên h : lienhe.html 26

III CH NG III : L P TRÌNH WEBSITE BÁN HÀNG B NG PHP – K T

N I CSDL MySQL 27

1) Ph n m m qu n tr c s d li u b ng ngôn ng MySQL 27

a Cài đ t server o AppServ 2.5.10 27

b Folder ch a AppServ 27

c Giao di n qu n lý CSDL : phpMyAdmin Database Manager Version 2.10.3 27

2) Thi t k CSDL theo ngôn ng MySQL : s d ng phpMyAdmin 29

3) T ng quát d li u website 32

a Folder WebDong : ch a toàn b d li u website 32

b Th vi n CSS : 32

c Thi t k Menu đ ng b ng Sothink Menu DHTML 8.0 32

4) S đ website V2.com.vn (Website Map) và c ch ho t đ ng 33

5) Giao di n Website 34

a Trang ch 34

b Gi i thi u 35

c S n ph m 36

d Tin t c 37

e Tìm ki m 38

f Liên h 39

g QLUser : qu n lý user 40

K T LU N 50