Hướng dẫn tạo trang admin nhập và đỗ dữ liệu động vào hiệu ứng banner-jquery tuyệt đẹp

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
[TUT] này mình chưa thử vì chưa có host

link lấy code: Tại đâ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à 1014×372

Live demo: http://vu.nhatnghe.vn/bannerjquery/index.php
hoặc: http://4rum-teen9x.tk/diendan/forum.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à 1034×104


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à 1034×499

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à 948×345

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à 1051×469

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à 979×398

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