maj

codeigniter/application/controllers/Albums.php

@@ -21,5 +21,11 @@ class Albums extends CI_Controller {
 		$this->load->view('layout/footer');
 	}
 
+	public function view($id){
+        $tracks = $this->model_music->getTracksByAlbumId($id);
+        $this->load->view('layout/header');
+        $this->load->view('album_info', ['tracks' => $tracks]);
+        $this->load->view('layout/footer');
+    }
 }
 

codeigniter/application/models/Model_music.php

@@ -30,4 +30,18 @@ class Model_music extends CI_Model {
 		
 		return $query->result();
 	}
+
+	public function getTracksByAlbumId($albumId){
+        $query = $this->db->query(
+            "SELECT track.number, track.duration, song.name as songName 
+            FROM track 
+            JOIN album ON album.id = track.albumid
+            JOIN artist ON artist.id = album.artistId
+            JOIN song ON song.id = track.songId
+            WHERE track.albumId = ?
+			ORDER BY track.number",
+            array($albumId)
+        );
+        return $query->result();
+    }
 }

codeigniter/application/views/album_info.php

@@ -0,0 +1,16 @@
+<h5>Détail de l'Album :</h5>
+<section class="track-list">
+<?php
+if(!empty($tracks)) {
+    foreach($tracks as $track){
+        echo "<div><article>";
+        echo "<header class='track-id'>Id : {$track->number}</header>";
+        echo "<div class='track-name'>Nom  : {$track->songName}</div>";
+        echo "<footer class='track_time'>Durée (en secondes) : {$track->duration}</footer>";
+        echo "</article></div>";
+    }
+} else {
+    echo "<p>Aucune piste trouvée pour cet album.</p>";
+}
+?>
+</section>

codeigniter/assets/style.css

@@ -66,14 +66,6 @@ nav > ul li:hover .sous{
     color: #1399fc;
 }
 
-
-
-		    
-
-
-
-
-
 section.connexion {
     display: flex;
     justify-content: space-between;
@@ -86,3 +78,31 @@ div.authentification {
 div.new {
     width: 45%;
 }
+
+/* Styles pour les détails des pistes */
+
+.track-list {
+    width: 100%;
+    margin: 0 auto;
+}
+
+.track-id {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+    border-bottom: 1px solid #ccc;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.track-name {
+    flex-grow: 1;
+    overflow: visible;
+    text-overflow: clip;
+}
+
+.track-time {
+    flex-shrink: 0;
+    margin-left: 20px;
+}