PHP NÂNG CAO - Sử dụng ajax - trang web nhạc đơn giản phần 1

Ở bài này chúng ta sẽ làm ứng dụng trang web nhạc đơn giản sử dụng kỹ thuật ajax. Thật ra thì không nhất thiết chúng ta phải xử dụng ajax mà với cách sử dụng PHP thường chúng ta cũng làm được, kỹ thuật ajax nó giúp ta xử lý dữ liệu trên một vùng ID nào đó do vậy mà không phải load lại toàn bộ trang web. Cho nên nó sẽ có các hiệu ứng đẹp hơn, nhưng mà nhược điểm của nó là không tốt cho SEO

Trang web nhạc đơn giản có các chức năng cơ bản nhau sau

1. Danh sách các ca sỹ, khi chọn ca sỹ sẽ show được ra thông tin cơ bản của ca sỹ đó, show được các album thuộc ca sỹ đó
2. Danh sách các album của ca sỹ, khi chọn một album nào đó thì phải show được hình ảnh, thông tin và các bài hát thuộc album đó
3. Khi click vào bài hát sẽ play nhạc

1. Phân tích cơ sở dữ liệu
Chúng ta sẽ có bảng data để lưu trữ thông tin, bảng tbl_singers lưu thông tin các ca sỹ, bảngtbl_albums lưu thông tin các album và bàng tbl_songs lưu thông tin các bài hát

Chúng ta không đi sâu vào phân tích database nữa nếu bạn nào chưa hiểu về phân tích và tạo cơ sở dữ liệu có thể xem lại bài này nhé, ở bài này chúng ta có sẵn các bảng csdl như sau

a. Bảng tbl_singers lưu tên, thông tin và hình ảnh của các ca sỹ



b. Bảng tbl_albums lưu tên album, mô tả ngắn và hình ảnh của album, khóa ngoại singer_id 



c. Bảng tbl_songs lưu tên bài hát, link nhạc, và 2 khóa ngoại album_id và singer_id



2. Kết hợp javascript với PHP

Chúng ta có cấu hình thư mục web như sau, trong thư mục script tạo file ajax.js

1 2 3 4 5 6 7 8 9 10 11

File ajax.js :   function create_obj(){     var browse = navigator.appName;         if(browse == "Microsoft Internrt Explorer"){ // Nếu là IE         obj = new ActiveXObject("XMLHTTP");                 }else{ // Các trình duyệt khác         obj = new XMLHttpRequest();     }                 return obj; // trả về kết quả lấy được }

- Sử dụng create_obj()

1	var http = create_obj();

3. Lấy ra thông tin các ca sỹ

- Mở trang index.php, chúng ta sẽ lấy ra danh sách các ca sỹ đổ ra một selectbox
- Tạo file singers trong thư mục libraries với nội dung như sau, class singers kế thừa từ class database

1 2 3 4 5 6 7 8 9 10

File libraries/singers.php :   class singers extends database{     protected $_table = "tbl_singers";     public function listsingers(){         $sql = "select * from $this->_table";         $this->query($sql);         return $this->fetchAll();     }                 }

Vì class singers kế thừa từ class database nên những phương thức và thuộc tính của class database được sử dụng lại trong class singers 
Trong class singers ta tạo ra một function listsingers để lấy ra toàn bộ danh sách các ca sỹ nhé, tiếp theo là gọi class singers vào trong file index.php để sử dụng

1 2 3 4 5 6 7 8 9 10

File index.php : <?php require("libraries/config.php"); require("libraries/database.php"); require("libraries/singers.php");   $singer = new singers(); // Gọi class singers $listsinger = $singers->listsingers(); // danh sách các ca sỹ   ?>

- Ta đã lấy được danh sách các ca sỹ rùi, tiếp theo là dùng vòng lặp foreach để đổ ra một selectbox

1 2 3 4 5 6 7 8

File index.php :   <select id="listsingers" onchange="singers(this.value)">    <option value="0">Select a singer</option>    <?php foreach($listsinger as $items){ ?>    <option value="<?php echo $items['singer_id']; ?>"><?php echo $items['singer_name']; ?></option>    <?php } ?> </select>

- Đây là danh sách các ca sỹ đã được đổ ra selectbox, khi chúng ta click chọn một ca sỹ nào thì sẽ load ra thông tin cơ bản của các ca sỹ và hơn nữa là danh sách các albums thuộc của ca sỹ này.



- Như vậy là đã có danh sách các ca sỹ , giờ chúng ta phải sử dụng sự kiện ajax, để khi nhấn chọn một ca sỹ nào thì sẽ truy vấn đến database để lấy ra thông tin các ca sỹ và các album, trong selectbox chúng ta sẽ viết ajax bằng sự kiện onchange = "singers(this.value)" , hàm singers() có truyền vào tham số this.value này để lấy được ra id của ca sỹ mà chúng ta đã đặt trong cặp thẻ <option value="id ca sỹ"> Tên ca sỹ </option>

- Quay lại với file ajax.js chúng ra sẽ viết hàm singers() để lấy thông tin ca sỹ, hàm singers() này chúng ta có truyển vào tham số là id của ca sỹ như đã nói ở trên

1 2 3 4 5 6 7

File ajax.js   function singers(singerid){     http.open("GET","process.php?type=singer&id="+singerid);     http.onreadystatechange = responsesinger;     http.send(null);             }

Ở đây chúng ta đang truyền dữ liệu theo phương thức GET sang file process.php và kèm theo 2 biến type=singer và id của singer = singerid, id = singerid là id của ca sỹ rùi, còn biến type=singer để phân biệt là chúng ta đang cần lấy thông của ca sỹ và danh sách album của ca sỹ đó.
nguồn http://phpandmysql.net/