BÀI GIẢNG LAB - TẠO TRANG LỌC CÁC THỂ LOẠI SẢN PHẨM docx

Trung Tâm ào To Công Ngh Mng VIT CHUYÊN
740/12 S Vn Hnh (ni dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:


Website:
www.vietchuyen.org – www.ddcntt.vn


Lp: Web Doanh nghip nâng cao Trang 1
Biên son: Nguyn Phát Tài
LAB – TO TRANG LC CÁC TH LOI SN PHM

Mc đích thit k trang này là khi khách hàng click vào mt th loi sn phm nào đó trên menu thì
chúng ta s hin ra các sn phm thuc th loi hàng này.









VIT CHUYÊN
Trung Tâm ào To Công Ngh Mng VIT CHUYÊN
740/12 S Vn Hnh (ni dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website:
www.vietchuyen.org – www.ddcntt.vn


Lp: Web Doanh nghip nâng cao Trang 2
Biên son: Nguyn Phát Tài
+ M trang inc_category.php đ thit k



+ Trong trang này hãy to mt Recordset rs_Items  ch đ QuB đ lc ra các sn phm thuc mt
th lai sn phm khi ngi dùng click vào nh sau:



VIT CHUYÊN
Trung Tâm ào To Công Ngh Mng VIT CHUYÊN
740/12 S Vn Hnh (ni dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:


Website:
www.vietchuyen.org – www.ddcntt.vn


Lp: Web Doanh nghip nâng cao Trang 3
Biên son: Nguyn Phát Tài
+ Trong ch đ Recordset nâng cao Advance hãy chnh giá tr mc đnh cho KTColParam1 đúng vi

giá tr mà bn đã ch ra trong QuB



+ Sau khi to Recordset xong trong Tab Bindings s xut hin Recordset sau:



VIT CHUYÊN
Trung Tâm ào To Công Ngh Mng VIT CHUYÊN
740/12 S Vn Hnh (ni dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:


Website:
www.vietchuyen.org – www.ddcntt.vn


Lp: Web Doanh nghip nâng cao Trang 4
Biên son: Nguyn Phát Tài
+ Hãy chèn các trng trong Recordset ra giao din đ có đc nh sau:



+ File -> Save -> F12
+ Kt qu s nh sau:

+ Hãy to vùng lp li đ xut ra 10 sn phm ca mt th lai sn phn phm nào đó khi ngi
dùng click vào menu
+ Chn Table đang cha các trng ca sn phm (trong dòng s 2 này có chèn mt Table 1 dòng 1
ct)

VIT CHUYÊN
Trung Tâm ào To Công Ngh Mng VIT CHUYÊN
740/12 S Vn Hnh (ni dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:


Website:
www.vietchuyen.org – www.ddcntt.vn


Lp: Web Doanh nghip nâng cao Trang 5
Biên son: Nguyn Phát Tài


+ Thc hin Looper Wizard



+ t các thông s cho lnh nh sau:


VIT CHUYÊN
Trung Tâm ào To Công Ngh Mng VIT CHUYÊN
740/12 S Vn Hnh (ni dài), P12, Q10, TP.HCM

Tel: (84.8) 862 7509 – (84.8) 2649179
Email:


Website:
www.vietchuyen.org – www.ddcntt.vn


Lp: Web Doanh nghip nâng cao Trang 6
Biên son: Nguyn Phát Tài
+ Click OK
+ Hãy đnh các thuc tính cho bng nh sau:



+ File -> Save -> F12



VIT CHUYÊN
Trung Tâm ào To Công Ngh Mng VIT CHUYÊN
740/12 S Vn Hnh (ni dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:


Website:
www.vietchuyen.org – www.ddcntt.vn

Lp: Web Doanh nghip nâng cao Trang 7
Biên son: Nguyn Phát Tài
+ Hãy chèn các lnh phân trang Pages List Limited, Next X Pages, Previous X Pages đ cho
ngi dùng có th xem tip các sn phm (xin vui lòng xem li các bài LAB trc v cách s dng
lnh này) nh sau:



+ Ta có th chèn thêm thanh trng thái Recordset đ cho ngi dùng bit trong lai sn phm này
chúng ta có tt c là bao nhiêu sn phm



+ Kt qu s nh sau:

VIT CHUYÊN
Trung Tâm ào To Công Ngh Mng VIT CHUYÊN
740/12 S Vn Hnh (ni dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:


Website:
www.vietchuyen.org – www.ddcntt.vn


Lp: Web Doanh nghip nâng cao Trang 8
Biên son: Nguyn Phát Tài

+ File -> Save -> F12


+ Trong vùng lp li hãy chèn thêm mt dòng trng nh sau:

VIT CHUYÊN
Trung Tâm ào To Công Ngh Mng VIT CHUYÊN
740/12 S Vn Hnh (ni dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:


Website:
www.vietchuyen.org – www.ddcntt.vn


Lp: Web Doanh nghip nâng cao Trang 9
Biên son: Nguyn Phát Tài


+ t con tr trong dòng này thc hin lnh sau:



+ Trong Tab General cu hình các thông s nh sau:



+ Trong Tab Bindings hãy chn các ct tng ng , ti Default Value click nút sm chp đ Bind
vào các trng tng ng trong Recordset rs_Items

VIT CHUYÊN
Trung Tâm ào To Công Ngh Mng VIT CHUYÊN
740/12 S Vn Hnh (ni dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:


Website:
www.vietchuyen.org – www.ddcntt.vn


Lp: Web Doanh nghip nâng cao Trang 10
Biên son: Nguyn Phát Tài



+ Hãy Bind đ có đc kt qu sau:



VIT CHUYÊN
Trung Tâm ào To Công Ngh Mng VIT CHUYÊN
740/12 S Vn Hnh (ni dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:


Website:
www.vietchuyen.org – www.ddcntt.vn

Lp: Web Doanh nghip nâng cao Trang 11
Biên son: Nguyn Phát Tài
+ Chn Tab Button cu hình nh sau:



+ Click nút OK bn s thy xut hin lnh nh sau:



+ Kt qu giao din s nh sau:

VIT CHUYÊN
Trung Tâm ào To Công Ngh Mng VIT CHUYÊN
740/12 S Vn Hnh (ni dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:


Website:
www.vietchuyen.org – www.ddcntt.vn


Lp: Web Doanh nghip nâng cao Trang 12
Biên son: Nguyn Phát Tài


+ File -> Save -> F12 đ chy th

+ Ta s sa li giao din và v trí cho nút Add to cart nh sau
VIT CHUYÊN
Trung Tâm ào To Công Ngh Mng VIT CHUYÊN
740/12 S Vn Hnh (ni dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:


Website:
www.vietchuyen.org – www.ddcntt.vn


Lp: Web Doanh nghip nâng cao Trang 13
Biên son: Nguyn Phát Tài
+ Trc dòng cha nút Add to cart hãy chèn thêm mt dòng vào, sau đó trong dòng này chèn thêm
mt bng có 2 ct nh sau:



+ Hãy di chuyn trng n và Text Filed vào Cell đu và nút Add to cart vào Cell sau ca dòng mi
chèn vào nh sau:



+ Hãy chuyn qua ch đ Code di chuyn th Form sao cho nm trc Cell cha trng n và th
</form> nm sau Cell cha nút Add to Cart nh sau:

VIT CHUYÊN
Trung Tâm ào To Công Ngh Mng VIT CHUYÊN
740/12 S Vn Hnh (ni dài), P12, Q10, TP.HCM

Tel: (84.8) 862 7509 – (84.8) 2649179
Email:


Website:
www.vietchuyen.org – www.ddcntt.vn


Lp: Web Doanh nghip nâng cao Trang 14
Biên son: Nguyn Phát Tài


+ Trong th input có thuc tính SRC ch đng dn ti hình nút Add to cart chúng ta hãy thay th
hình nút này tùy ý nh sau:


+ Chuyn qua ch đ Design bây gi giao din s nh sau:



+ File -> Save -> F12
+ Kt qu cui cùng s nh sau:

VIT CHUYÊN
Trung Tâm ào To Công Ngh Mng VIT CHUYÊN
740/12 S Vn Hnh (ni dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:

Website:
www.vietchuyen.org – www.ddcntt.vn


Lp: Web Doanh nghip nâng cao Trang 15
Biên son: Nguyn Phát Tài


+ Bn có th s dng thêm các lnh Show If Recordset is Empty và Show If Recordset is Not
Empty đ du các vùng d liu (xen vui lòng xem li các bài LAB trc đ bit cách s dng các
lnh này)


VIT CHUYÊN
Trung Tâm ào To Công Ngh Mng VIT CHUYÊN
740/12 S Vn Hnh (ni dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:


Website:
www.vietchuyen.org – www.ddcntt.vn


Lp: Web Doanh nghip nâng cao Trang 16
Biên son: Nguyn Phát Tài
+ Hãy to link cho tên sn phm và hình sn phn ti trang hin chi tit sn phm nh sau:
+ Chn {rs_Items.ItemName} , click nút Browse for file trong hp Link , chn link ti trang
index.php và truyn các tham s sau:

+ Click nút OK
+ Bc k tip hãy to chc nng phóng to hình khi click vào hình sn phm:
+ Hãy s dng đan Code sau đt trc th </head>

<style type="text/css">
<!
.highslide {
cursor: url(graphics/zoomin.cur), pointer;
outline: none;
}
.highslide-active-anchor img {
visibility: hidden;
}
.highslide img {
border: 1px solid gray;
padding: 2px;
}
.highslide:hover img {
/* border: 2px solid red; */
}
.highslide-wrapper {
background: blue;
}
.highslide-image {
border: 10px solid #D5BFEA;
}
.highslide-image-blur {
}

.highslide-caption {
display: none;
border: 5px solid white;
border-top: none;
padding: 5px;
background-color: white;
VIT CHUYÊN
Trung Tâm ào To Công Ngh Mng VIT CHUYÊN
740/12 S Vn Hnh (ni dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:


Website:
www.vietchuyen.org – www.ddcntt.vn


Lp: Web Doanh nghip nâng cao Trang 17
Biên son: Nguyn Phát Tài
}
.highslide-loading {
display: block;
color: black;
font-size: 8pt;
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
padding: 2px;
border: 1px solid black;
background-color: white;

padding-left: 22px;
background-image: url(graphics/loader.white.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: pupple;
}

a.highslide-full-expand {
background: url(graphics/fullexpand.gif) no-repeat;
display: block;
margin: 0 10px 10px 0;
width: 34px;
height: 34px;
}

/* These must always be last */
.highslide-display-block {
display: block;

}
.highslide-display-none {
display: none;
}
>
</style>
<script type="text/javascript" src="highslide.js"></script>

</head>

+ Chn hình sn phm , chuyn sang ch đ Code chèn thêm đan code sau:

VIT CHUYÊN
Trung Tâm ào To Công Ngh Mng VIT CHUYÊN
740/12 S Vn Hnh (ni dài), P12, Q10, TP.HCM
Tel: (84.8) 862 7509 – (84.8) 2649179
Email:


Website:
www.vietchuyen.org – www.ddcntt.vn


Lp: Web Doanh nghip nâng cao Trang 18
Biên son: Nguyn Phát Tài

<a title="<< Click vào hình đ phóng to >>" class="highslide" onclick="return hs.expand(this, {captionId:
'caption1'})" href="images/detail/<?php echo $row_rs_Items['ItemImage']; ?>" >

<img src="images/thumbs/<?php echo $row_rs_Items['ItemThumb']; ?>" align="left"

class="canhle_image" /></a>

+ File -> Save -> F12
+ Kt qu là chúng ta có th phóng to hay thu nh hình



VIT CHUYÊN