ajout du bouton de tri sur certaine page

codeigniter/application/controllers/Albums.php

@@ -3,7 +3,8 @@ defined('BASEPATH') OR exit('No direct script access allowed');
 
 class Albums extends CI_Controller {
 
-    private $filter = 'default';
+    private $sort = 'Tri';
+
 
 	public function __construct(){
 		parent::__construct();
@@ -17,7 +18,7 @@ class Albums extends CI_Controller {
 
 		$albums = $this->model_music->getAlbums();
 		$this->load->view('layout/header');
-		$this->load->view('albums_list',['albums'=>$albums]);
+		$this->load->view('albums_list',['albums'=>$albums,'sort'=>$this->sort]);
 		$this->load->view('layout/footer');
 	}
 
@@ -27,5 +28,13 @@ class Albums extends CI_Controller {
         $this->load->view('album_info', ['tracks' => $tracks]);
         $this->load->view('layout/footer');
     }
+
+    public function tri(){
+        $Ctri = $this->input->get('Ctri');
+        $trie = $this->model_music->get_tri_Albums($Ctri);
+        $this->load->view('layout/header');
+		$this->load->view('albums_list',['albums'=>$trie, 'sort'=>$this->sort]);
+		$this->load->view('layout/footer');
+    }
 }
 

codeigniter/application/models/Model_music.php

@@ -44,4 +44,17 @@ class Model_music extends CI_Model {
         );
         return $query->result();
     }
+
+    public function get_tri_Albums($Ctri){
+        	$query = $this->db->query(
+			"SELECT album.name,album.id,year,artist.name as artistName, genre.name as genreName,jpeg 
+			FROM album 
+			JOIN artist ON album.artistid = artist.id
+			JOIN genre ON genre.id = album.genreid
+			JOIN cover ON cover.id = album.coverid
+			ORDER BY album.name $Ctri
+			"
+		);
+	return $query->result();
+	}
 }

codeigniter/application/views/albums_list.php

@@ -1,4 +1,13 @@
+
 <h5>Albums list</h5>
+    <ul class="tri"><h6 id ="tri"> <?php echo "$sort" ?> </h6>
+    <li class="sous_tri">
+     <ul><?=anchor('Albums/tri/?Ctri=ASC', 'Tri A-Z');?></ul>
+        <ul><?=anchor('Albums/tri/?Ctri=DESC', 'Tri Z-A');?></ul>
+    </li>
+    </ul>
+        
+        
 <section class="list">
 <?php
      

codeigniter/application/views/layout/header.php

@@ -17,18 +17,18 @@
 	<ul>
 	  <li><strong>Music APP</strong></li>
 	</ul>
-	<div class="options">
-     <ul>
-     <li class="bouton"><?=anchor('albums','Albums');?></li>
-          <li class="bouton"><?=anchor('artistes','Artistes');?></li>
-              <li class="bouton"><?=anchor('playlist','Playlist');?></li>
+	
+     <ul class="option">
+     <li><?=anchor('albums','Albums');?></li>
+          <li><?=anchor('artistes','Artistes');?></li>
+              <li><?=anchor('playlist','Playlist');?></li>
 <?php if ($this->session->userdata('pseudo')) : /* Vérifier si l'utilisateur est connecté */ ?>
               
                   <li class="deroulant"><a><?= $this->session->userdata('pseudo'); ?></a>
                       <ul class="sous">
 
-     <li><a><?= anchor('profil', 'Profil'); ?></a></li>
-         <li><a><?= anchor('deconnexion', 'Se déconnecter'); ?></a></li>
+     <li><?= anchor('profil', 'Profil'); ?></li>
+         <li><?=anchor('deconnexion', 'Se déconnecter'); ?></li>
          </ul>
          </li>
 <?php else : ?>

codeigniter/assets/style.css

@@ -37,32 +37,23 @@ main.container {
 
 .options {
     margin-right : 20px!important;
-    width: 400px;
-    height: 73.5px;
     
 }
 
-.bouton {
-    width: 25%;
-    text-align: center;
-    height: 73.5px;
-}
-
 .sous {
     display: none;
     border-radius: 5px;
     border: solid 1px black;
     background-color: #283d5d;
     position: absolute;
-    top :60px;
-    right: 13px;
+    top: 50px;
+    right: 12px;
+    text-align: center
 }
 
-
 .sous li {
-    float: none;
-    text-align: right;
-    width: 100%;
+    display: block!important;
+    padding: 5px;
 }
 
 nav > ul li:hover .sous {
@@ -72,11 +63,12 @@ nav > ul li:hover .sous{
 .deroulant a {
     text-decoration: none;
     color: white;
+    display: inline-block;
 }
 
 .deroulant > a::after {
     content: " ▼ ";
-    font-size: 15px;
+    font-size: 17px;
 
 }
 
@@ -124,3 +116,31 @@ div.new {
     flex-shrink: 0;
     margin-left: 20px;
 }
+
+#tri {
+    text-align: right;
+}
+/* mise en forme du tri */
+
+
+/*.sous_tri {
+    display: none;
+    position: absolute;
+    text-align: right;
+    background-color: black;
+}
+
+.tri  {
+    color: #a4acba;
+    text-align: right;
+    display: inline-block;
+}
+
+.tri:hover sous_tri {
+    display: block;
+}
+
+
+.sous_tri a:hover{
+    color: #1399fc;
+}*/