Amélioration de la page des albums

CodeIgniter-3.1.13/application/config/config.php

@@ -23,7 +23,7 @@ defined('BASEPATH') OR exit('No direct script access allowed');
 | a PHP script and you can easily do that on your own.
 |
 */
-$config['base_url'] = '/stiti/SAE2.02/CodeIgniter-3.1.13';
+$config['base_url'] = '/~stiti/SAE2.02/CodeIgniter-3.1.13';
 
 /*
 |--------------------------------------------------------------------------

CodeIgniter-3.1.13/application/config/routes.php

@@ -49,6 +49,6 @@ defined('BASEPATH') OR exit('No direct script access allowed');
 | Examples:	my-controller/index	-> my_controller/index
 |		my-controller/my-method	-> my_controller/my_method
 */
-$route['default_controller'] = 'home';
+$route['default_controller'] = 'albums';
 $route['404_override'] = '';
 $route['translate_uri_dashes'] = FALSE;

CodeIgniter-3.1.13/application/controllers/Albums.php

@@ -0,0 +1,30 @@
+<?php
+defined('BASEPATH') OR exit('No direct script access allowed');
+
+class Albums extends CI_Controller {
+
+    public function __construct(){
+        parent::__construct();
+        $this->load->model('model_music');
+        // Load the URL Helper
+        $this->load->helper('url');
+    }
+    public function index($page = 1){
+        $limit = 21;
+        $offset = ($page - 1) * $limit;
+        $albums = $this->model_music->getAlbums($limit, $offset);
+    
+        // Pass pagination information to view
+        $total_albums = $this->model_music->get_total_albums();
+        $data['total_pages'] = ceil($total_albums / $limit);
+        $data['current_page'] = $page;
+        $data['albums'] = $albums; // Pass albums data to view
+    
+        $this->load->view('layout/header_not_logged_dark');
+        $this->load->view('albums_list', $data);
+        $this->load->view('layout/footer_dark');
+    }
+    
+    
+
+}

CodeIgniter-3.1.13/application/models/Model_music.php

@@ -0,0 +1,27 @@
+<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');                                             
+
+class Model_music extends CI_Model {
+	public function __construct(){
+		$this->load->database();
+	}
+
+	public function getAlbums($limit, $offset){
+		$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 year
+            LIMIT $limit OFFSET $offset"
+        );
+	return $query->result();
+	}
+
+    public function get_total_albums(){
+        $query = $this->db->query("SELECT COUNT(*) as total_albums FROM album");
+        $result = $query->row();
+        return $result->total_albums;
+    }
+    
+}

CodeIgniter-3.1.13/application/views/accueil.php

@@ -18,19 +18,23 @@
         <div class="features">
             <h2>Fonctionnalités</h2>
             <div class="feature">
-                <h3>Fonctionnalité N°1</h3>
-                <p>Description de la fonctionnalité 1. Cette fonctionnalité permet de ...</p>
+                <h3>Création de playlist</h3>
+                <p>Avec Onzeur, vous pouvez créer des playlists personnalisées en quelques clics. Rassemblez vos morceaux préférés, organisez-les par artiste, album ou genre, et créez des listes de lecture adaptées à toutes les occasions. Ajoutez et supprimez des chansons selon vos envies, et gardez votre musique à portée de main, prête à être écoutée à tout moment</p>
+                <img src="assets/img/gallerie/img1.jpg" alt="Image pour la fonctionnalité 'Création de playlist'">
             </div>
             <div class="feature">
-                <h3>Fonctionnalité N°2</h3>
-                <p>Description de la fonctionnalité 2. Cette fonctionnalité permet de ...</p>
+                <h3>Consultation des morceaux</h3>
+                <p>Explorez une vaste bibliothèque de morceaux de musique avec Onzeur. Parcourez les listes d'artistes, découvrez des albums et explorez des genres musicaux variés. Trouvez rapidement les chansons que vous recherchez en naviguant facilement entre les différentes vues. Que vous soyez à la recherche de nouveautés ou de classiques, cette fonctionnalité vous permettra de découvrir et d'apprécier une large sélection de musique.</p>
+                <img src="assets/img/gallerie/img2.jpg" alt="Image pour la fonctionnalité 'Consultation des morceaux'">
             </div>
             <div class="feature">
-                <h3>Fonctionnalité N°3</h3>
-                <p>Description de la fonctionnalité 3. Cette fonctionnalité permet de ...</p>
+                <h3>Gestion des comptes utilisateurs</h3>
+                <p>Profitez pleinement de toutes les fonctionnalités de l'application en créant votre propre compte utilisateur. Une fois connecté, vous aurez accès à des fonctionnalités avancées telles que la création et la gestion de playlists personnalisées. Ajoutez des chansons à vos favoris, synchronisez votre bibliothèque musicale sur plusieurs appareils et bénéficiez d'une expérience musicale personnalisée.</p>
+                <img src="assets/img/gallerie/img3.jpg" alt="Image pour la fonctionnalité 'Gestion des comptes utilisateurs'">
             </div>
         </div>
 
+
         <div class="testimonials">
             <h2>Avis</h2>
             <div class="testimonial">

CodeIgniter-3.1.13/application/views/albums_list.php

@@ -0,0 +1,34 @@
+<head>
+    <link rel="stylesheet" href="assets/css/style.css">
+    <link rel="icon" type="image/x-icon" href="assets/img/Logo_ONZEUR.png">
+    <title>Page d'accueil</title>
+</head>
+
+<h1 class="title">Listes des albums</h1>
+<section class="list">
+<?php
+foreach($albums as $album){
+    echo "<div><article>";
+    echo "<header class='short-text'>";
+    echo anchor("albums/view/{$album->id}","{$album->name}");
+    echo "</header>";
+    echo '<img src="data:image/jpeg;base64,'.base64_encode($album->jpeg).'" />';
+    echo "<footer class='short-text'>{$album->year} - {$album->artistName}</footer>
+    </article></div>";
+}
+?>
+</section>
+
+<div class="pagination">
+    <?php if ($current_page > 1): ?>
+        <a href="<?php echo base_url('albums/index/'.($current_page-1)); ?>">Previous</a>
+    <?php endif; ?>
+    
+    <?php for ($i = 1; $i <= $total_pages; $i++): ?>
+        <a href="<?php echo base_url('albums/index/'.$i); ?>" <?php echo ($i == $current_page) ? 'class="active"' : ''; ?>><?php echo $i; ?></a>
+    <?php endfor; ?>
+    
+    <?php if ($current_page < $total_pages): ?>
+        <a href="<?php echo base_url('albums/index/'.($current_page+1)); ?>">Suivant</a>
+    <?php endif; ?>
+</div>

CodeIgniter-3.1.13/assets/css/accueil.css

@@ -60,6 +60,13 @@ h1, h2, h3 {
     text-align: center;
 }
 
+.feature img {
+    max-width: 600px;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+}
+
 .gallery h2 {
     text-align: center;
     margin-bottom: 20px; /* Espace sous le titre */
@@ -72,10 +79,10 @@ h1, h2, h3 {
 }
 
 .gallery img {
-    width: 30%; /* Ajustez ce pourcentage pour que les images tiennent sur une ligne sur les grands écrans */
+    width: 30%; 
     height: auto;
     border-radius: 8px;
-    margin: 10px; /* Espace autour des images */
+    margin: 10px; 
 }
 
 /* Media queries pour les petits écrans */
@@ -84,6 +91,10 @@ h1, h2, h3 {
         width: 45%; /* Les images prennent 45% de la largeur sur les écrans moyens */
     }
 
+    .feature img {
+        width: 100%; /* Les images prennent 100% de la largeur sur les écrans moyens */
+    }
+
     .gallery {
         flex-wrap: wrap; /* Permet de passer les images à la ligne sur les petits écrans */
     }

CodeIgniter-3.1.13/assets/css/style.css

@@ -0,0 +1,111 @@
+/* Styles généraux */
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f8f8f8;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.title {
+    color: #6a0dad; 
+    text-align: center;
+    margin-top: 20px;
+}
+
+.list {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.list > div {
+    width: 30%;
+    margin-bottom: 20px;
+}
+
+/* Styles pour les articles */
+article {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    transition: transform 0.3s ease;
+}
+
+article:hover {
+    transform: translateY(-5px);
+}
+
+header.short-text,
+footer.short-text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding: 10px;
+}
+
+header.short-text {
+    background-color: #6a0dad;
+    color: #fff;
+}
+
+footer.short-text {
+    background-color: #f0f0f0;
+}
+
+/* Styles pour les liens hypertexte */
+header.short-text a {
+    color: #fff; /* Blanc pour les liens */
+    text-decoration: none; /* Supprimer le soulignement */
+}
+
+/* Image styles */
+.list img {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
+/* Responsive styles */
+@media screen and (max-width: 768px) {
+    .list > div {
+        width: 45%;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .list > div {
+        width: 100%;
+    }
+}
+
+/* Styles pour les boutons de pagination */
+.pagination {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.pagination a {
+    display: inline-block;
+    padding: 8px 16px;
+    margin: 0 4px;
+    background-color: #6a0dad;
+    color: #fff;
+    border-radius: 4px;
+    text-decoration: none;
+    transition: background-color 0.3s ease;
+}
+
+.pagination a:hover {
+    background-color: #4a0772;
+}
+
+.pagination .active {
+    background-color: #29043e;
+}