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

Sau khi đã lấy được thông tin ca sỹ và các album của ca sỹ rùi, khi click vào một album nào đó ta cần lấy ra các bài hát thuộc album này. Phần này chúng ta sẽ kết thúc bài tập xây dựng trang web nhạc đơn giản bằng PHP và MYSQL sử dụng công nghệ ajax

Để hiểu được bài này các bạn cần nắm được các ký năng như phân tích cơ sở dữ liệu và lập trình hướng đối tượng... nếu bạn nào chưa xem phần 1 và phần 2 thì xem lại nhé

Tương tự như phần singers, ta viết hàm albuminfo() để lấy thông tin album và hàm getsongs() để lấy ra các bài hát thuộc album hiện tại

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<?php     file singers.php     protected $_album = "tbl_albums";     protected $_songs = "tbl_songs";     public function albuminfo($albumid){        $sql = "select * from $this->_album where album_id = '$albumid'";        $this->query($sql);        return $this->fetch();     }     public function getsongs($albumid){        $sql = "select * from $this->_songs where album_id = '$albumid'";        $this->query($sql);        return $this->fetchAll();      }      ?>

Quay lại với file process.php ta tiếp tục đổ ra các bài hát thuộc album, phần này nó không khác phần đổ ra thông tin của ca sỹ và các album thuộc ca sỹ.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<?php     file process.php             $type = $_GET['type']; // cờ kiểm tra hành động     $singers = new singers(); // sử dụng class singers     if($type == "album"){ // lấy ra thông tin album và bài hát        $albumid = $_GET['id']; // id của album        $albuminfo = $singers->albuminfo($albumid);        $listsongs = $singers->getsongs($albumid);          // đổ thông tin album                 echo "<hr />";        echo "<div class='left'>";          echo "<h3>".$albuminfo['album_title']."</h3>";          echo "<img src='images/$albuminfo[album_image]' width='160' />";        echo "</div>";        echo "<div class='right'>";          echo "<p><strong>Thông tin</strong></p>";          echo "<p>".$album['album_info']."</p>";        echo "</div>";          // Đổ ra các bài hát thuộc album          echo "<h3>Các bài hát của $albuminfo[album_title]</h3>";        if($listsongs != NULL){ // album này có bài hát           echo "<ul>";           foreach($listsongs as $items){              echo "<li><a href='#' onclick='palysong($items[song_id])'>".$items['song_title']."</a></li>";           }           echo "</ul>";        }else{ // album chưa có bài hát           echo "Hiện chưa có bài hát nào";        }     } ?>

Và đây là kết quả

 

Ta còn một sự kiện là khi click vào tên bài hát thì sẽ chơi nhạc, đúng ra thì trang web chơi nhạc thường sử dụng plugin để chơi nhạc riêng, hay đơn giản là sử dụng trình chơi nhạc của trình duyệt web. ở đây ta sử dụng frame nhạc của zing mp3 theo cách đơn giản nhé.

Cũng giống như phần ca sỹ và album ta sử dụng sự kiện onclick để thực hiện chơi nhạc. tại phần tên bài hát ta viết hàm playsong() để thực hiện chơi nhạc

Tại list bài hát, ta viết sự kiện onclick và truyền id của bài hát vào

1 2 3

File process.php   <a href="#" onclick="playsong(id song)"> tên bài hát </a>

Hàm playsong() (trong file ajax.js) để chơi nhạc khi ta click vào một bài hát 




Tại trang process.php ta sẽ lấy ra id của bài hát, sau đó lấy ra thông tin của bài hát như tên bài hat, link nhạc của bài hát và chơi nhạc, ta sử dụng hàm playsong() để lấy ra thông tin bài hát nhé



Đổ ra thông tin bài hát và chơi nhạc



Trả lại kết quả cho js và cuối cùng là đổ ra id playsong



Và cuối cùng là kết quả 




Bài này giúp các bạn hiểu cách sử dụng ajax thuần và cách sử dụng php theo lối viết hướng đối tượng, hy vọng các bạn sẽ thích nó 

Các bạn có thể download code nó tại đây nhé

nguồn http://phpandmysql.net/