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


TRNG I HC M TPHCM
KHOA CÔNG NGH THÔNG TIN





 Á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p trình website bán hàng có kt ni c s d liu MySQL
 S dng ngôn ng PHP, HTML, Javascript
 S dng th vin CSS, Flash
Ging viên hng dn : Thy H Quang Khi
Sinh viên : Hoàng Phi V
MSSV : 0851010336
Lp : TH08A1

TP.H CHÍ MINH – 2/2012
GII THIU
 ÁN CHUYÊN NGÀNH CSDL
HOÀNG PHI V – 0851010336 – TH08A1


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 1
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à.

CHNG I TÌM HIU CÔNG C ADOBE DREAMWEAVER CS3



 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 2
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



CHNG I TÌM HIU CÔNG C ADOBE DREAMWEAVER CS3


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 3
 Bc 2 : Thit lp các thông s (Cho mt website tnh)





CHNG I TÌM HIU CÔNG C ADOBE DREAMWEAVER CS3



 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 4




CHNG I TÌM HIU CÔNG C ADOBE DREAMWEAVER CS3


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 5
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


CHNG I TÌM HIU CÔNG C ADOBE DREAMWEAVER CS3


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 6

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



CHNG I TÌM HIU CÔNG C ADOBE DREAMWEAVER CS3


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 7
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
Tab Headings
Mc đnh màu sc, font cho các head
Tab trancing Image : đ trong sut ca
hình nh
CHNG I TÌM HIU CÔNG C ADOBE DREAMWEAVER CS3


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 8

 Insert bar
 Là thanh toolbar đ chèn các đi tng vào website(table, hình, form,
div, )
 n hin Insert bar : Nhp menu Window  chn Insert


 Thanh Properties
 Là thanh nm bên di vùng son tho. Thanh Properties là ni hin các
thuc tính ca đi tng mà bn đang chn trên website. Bàn dùng thanh
này đ hiu chnh thuc tính ca đi tng.

 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
CHNG I TÌM HIU CÔNG C ADOBE DREAMWEAVER CS3


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 9



 Thanh Tag
 Là thanh nm ngang, ngay phía trên thanh Properties. ây là ni hin ra
các tag cha đi tng mà bn đang chn. Ngha là nu bn mun bit 1
đi tng nào đó nm trong các tag nào, hãy chn nó ri nhìn vào thanh
này

 Panel Group :
 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


CHNG I TÌM HIU CÔNG C ADOBE DREAMWEAVER CS3


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 10
áp ng (htm,gif…)
2) Mt vài điu v ngôn ng HTML
a. Website tnh





b. Website đng

c. Gii thiu
 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
CHNG I TÌM HIU CÔNG C ADOBE DREAMWEAVER CS3



 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 11
 Mt s tag thng dùng :
<b>, <strong> Ch đm
<i>, <em> Ch nghiêng
<u> Ch gch di
<a href=url> To 1 hyperlink
<img src=url> Chèn hình
<hr> Chèn 1 đng gch ngang
<font face=Tenfont color=màu size=C> Ch đnh font ch
<p align=cáchcanh> To paragraph mi
<br> Xung hàng, không to p mi

d. Cu trúc ca 1 trang web
<html>
<head>
<title> …</title>
<meta>… </meta>
<style>… </style>
</head>
<body>
…
…
…
</body>
</html>

Phn
thông

tin
qun lý
Phn
d
liu
trong
trang
Chatiêutrangweb
Chathôngtiniukhinkeyword,refresh
Chacácstylecssnhdngtrangweb
CHNG I TÌM HIU CÔNG C ADOBE DREAMWEAVER CS3


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 12
3) Thanh công c Insert bar : Common

1 2 3 4 5 6 7 8 9 10 ……
Biu tng 1 : Tô đen 1 dòng text , và nhp vào biu tng này  hyperlink


Biu tng 2 : Email Link


Biu tng 3 : M neo.
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
CHNG I TÌM HIU CÔNG C ADOBE DREAMWEAVER CS3


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 13
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



CHNG I TÌM HIU CÔNG C ADOBE DREAMWEAVER CS3


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 14
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NG I TÌM HIU CÔNG C ADOBE DREAMWEAVER CS3


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 15
 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
CHNG I TÌM HIU CÔNG C ADOBE DREAMWEAVER CS3


 ÁN MÔN H C : HOÀNG PHI V - 0851010336

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



CHNG I TÌM HIU CÔNG C ADOBE DREAMWEAVER CS3


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 17
 Flash button
Menu Insert  Media  Flash button
Style : Kiu nút
Button Text : ch trong nút
Bg color : màu nn
Save as : tên file flash đc to ra
Link : đa ch liên kt


 Flash Text
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
Insert  Media  Plugin  chn file nhc/phim
Chnh kích thc : kéo cho ln ra


CHNG II
LP TRÌNH WEBSITE BÁN HÀNG TNH – KHÔNG KT
NI CSDL


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 18
II. CHNG II : LP TRÌNH WEBSITE BÁN HÀNG TNH – KHÔNG KT
NI CSDL

1) S đ thit k website


V2 Company
V2.com.vn
All in one
Trang ch Gii thiu Sn phm Khuyn mãi Tuyn dng H tr Liên h
Laptop Desktop
Dell
Inspiron
Dell
Studio
Dell
Vostro

Diamond
Mt hàng khác
CHNG II
LP TRÌNH WEBSITE BÁN HÀNG TNH – KHÔNG KT
NI CSDL


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 19
2) Giao din website bán hàng tnh
a. Trang ch : index.html

CHNG II
LP TRÌNH WEBSITE BÁN HÀNG TNH – KHÔNG KT
NI CSDL


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 20
b. Gii thiu : gioithieu.html


CHNG II
LP TRÌNH WEBSITE BÁN HÀNG TNH – KHÔNG KT
NI CSDL


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 21
c. Sn phm : sanpham.html

CHNG II
LP TRÌNH WEBSITE BÁN HÀNG TNH – KHÔNG KT
NI CSDL


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 22
 Sn phm : Laptop


 Sn phm : Desktop
CHNG II
LP TRÌNH WEBSITE BÁN HÀNG TNH – KHÔNG KT
NI CSDL


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 23
 Sn phm : Khác


CHNG II
LP TRÌNH WEBSITE BÁN HÀNG TNH – KHÔNG KT
NI CSDL


 ÁN MÔN H C : HOÀNG PHI V - 0851010336
Trang 24
d. Khuyn mãi : khuyenmai.html