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

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 C

H U

YÊN

L p: Web Doanh nghi p nâng cao Trang 2

+ 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 C

H U

YÊN

+ 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 C

H U

YÊN

L p: Web Doanh nghi p nâng cao Trang 4

+ 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 C

H U

YÊN

+ Th c hi n Looper Wizard

+ t các thông s cho l nh nh sau:

VI

T C

H U

YÊN

L p: Web Doanh nghi p nâng cao Trang 6

+ Click OK

+ Hãy đ nh các thu c tính cho b ng nh sau:

+ File -> Save -> F12

VI

T C

H U

YÊN

+ 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 C

H U

YÊN

L p: Web Doanh nghi p nâng cao Trang 8

+ 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 C

H U

YÊN

+ 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 C

H U

YÊN

L p: Web Doanh nghi p nâng cao Trang 10

+ Hãy Bind đ có đ c k t qu sau:

VI

T C

H U

YÊN

+ 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 C

H U

YÊN

L p: Web Doanh nghi p nâng cao Trang 12

+ 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 C

H U

YÊN

+ 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 C

H U

YÊN

L p: Web Doanh nghi p nâng cao Trang 14

+ 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 C

H U

YÊN

+ 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 C

H U

YÊN

L p: Web Doanh nghi p nâng cao Trang 16

+ 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 {

}

.highslide img {

border: 1px solid gray;

}

.highslide:hover img {

/* border: 2px solid red; */

}

.highslide-wrapper {

}

.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 C

H U

YÊN

}

.highslide-loading {

display: block;

text-decoration: none;

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;

}

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;

margin: 0 10px 10px 0;

}

/* 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 C

H U

YÊN

L p: Web Doanh nghi p nâng cao Trang 18

<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 C

H U

YÊN