HƯỚNG DẪN KẾT HỢP HIỆU ỨNG JQUERY BANNER VỚI DỮ LIỆU ĐỘNG LẤY TỪ DATABASE
TẠO TRANG QUẢN TRỊ CHO KHÁCH HÀNG CHỈNH SỬA CÁC BANNER NÀY
Sau khi hoàn thành bài lap bạn sẽ được kết quả:
Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là
Live demo: http://vu.nhatnghe.vn/bannerjquery/index.php
Source download : http://vu.nhatnghe.vn/bannerjquery/bannerjquery.rar
Đề nghị: máy bạn phải cài Appserv hoặc Xampp hay Warms !! Ở đây mình sẻ cài Appserv
Sau khi down source về ,giải nén và bỏ trong folder c://Appserv/www/..
Bước 1: Vào localhost tạo database webtintuc và import dữ liệu vào
Bước 2: Tạo 2 file mới có tên là listbanner.php và motbanner.php lưu trong folder admin
Bước 3: Mở trang listbanner.php vào tab Developper Toolbox trên thanh insert và chon Create dynamic List Wizard 
Bước 4: Một hộp thoại hiện lên ,bạn khai báo các tham số như sau
+Conection: webtintuc
+ table :banner
+detail page :motbanner.php 
Bước 5: Sau khi khai báo xong các tham số ,next qua bước 2 ..Bạn có thể gõ lại các tiêu đề của phần header thành có dấu
Bước 6: Step 3 va 4 bạn cứ để mặc định không làm gi hết-> Finish
Test thử: bạn sẽ thấy các hình trong CSDL được trình bày ra 
Bước 7: Mở trang motbanner.php ,trên thanh insert bar-> chọn thẻ developer toolbox -> Create danamic form Wizard
Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 1034x104
a)Sẽ hiện 1 hộp thoại,các bạn sẽ khai báo các thong số
b)Sau khi khai bao xong ,Cứ để mặc định Next qua bước 2(Vì DW đã nhớ những gì mình làm ở bứoc trên)
-Chọn vào field Mota mục display as : test area và gõ lại label có dấu
Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 1034x499
Chọn vào field Url mục display as : file field và gõ lại label có dấu 
c)Các bước còn lại bạn có thể không cần khai bao->Next -> Finish(co thể sửa lại các thong báo lỗi tiếng việt nếu bạn thích) 
Bước 8: Sau khi finish màn hình sẽ xuất hiện 1 table do DW phát sinh,Chọn vào file filed Url->Nhấp nút browse
-Tiếp tục vào tab sever behavior->Developer toolbox->File Upload->Upload file 
a)Một hộp thoại sẽ xuất hiện,tại đây các bạn khai báo các thông số sau
Form field: form1.Url
Table: url
Upload: ../upload/ 
b)Qua tab file ->Nhấp dấu cộng vã gõ them các đuôi hình cần thiết(có thể chỉnh lại kích thước giới hạn khi 1 một file hình lên tại maximum file size) 
Bây giờ bạn có thể test rồi đó
Bước 9: Bây giờ ta sẽ đỗ dữ liệu động vào trang public
a)Mở trang index.html ra->Save as thành test.php bạn hãy chú ý đoạn code sau
Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 948x345
b)Cứ mỗi thẻ cặp <li > 1 thẻ hình gồm nội dung và tiêu đề!! Vậy ta chỉ cần cho các thẻ <li> này lập là ta sẽ hoàn thành đúng mục tiêu của bài lap
c)Xóa các đoạn code thừa và chỉ chừa lại 1 cặp thẻ <li> duy nhất để lặp
d)Vào tab binding -> Tạo recordset mới(Bạn phải tạo connection trứoc khi làm nha) 
e)Thiết lập các thong số sau
name:banner
Connection:webtintuc
Table :banner 
f)Bây giờ các bạn hãy quan sát mô hình sau để xác định việc kéo các field vào để lập
Bước 10:
a)Kéo các field thả vào đúng vị trí mô ta trong hình
Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 1051x469
b)Sauk hi kéo các field vào xong ,hiện tai thì đường dẫn hình không đúng ->Vì hình sau khi up sẽ nằm trong folder upload nên ta cần sữa lại các địa chỉ hình 
c)Việc cuối cùng là xác định đoạn code dung để lặp
Tô đen hết cặp thẻ <li>->tab application->Server behavior->repeat region 
Chọn All record rồi Ok
Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 979x398
Bây giờ thì test nha!!! Chúc bạn thành công
Chay trang listhinh.php->addnew -> nhập vào 1 vài hình trong folder imges rồi ra trnag test xem hiệu ứng chuyển hình nha ag!!!!!
Không có nhận xét nào:
Đăng nhận xét
Chào mừng các bạn đến với Blog của Dương