CodeIgniter : Tp4 Bd I - PRELIMINAIRE Prendre la MV avec WampServer. 1. Créer un dossier sous www/CodeIgniter/tp4. Dézipper le contenu de l’archive de CodeIgniter dans ce dossier. 2. Supprimer licence.txt et user_guide. 3. Configurer le fichier application/config/config.php : Modifier le langage ($config['language'] = "french";) et installer le dossier french dans application/language Modifier la ligne : $config['base_url']= 'http://localhost/CodeIgniter/tp4/'; 4. Positionner la feuille de style style.css dans le dossier tp4/css à créer. 5. Ouvrir le fichier application/config /autoload.php. Charger les librairise suivantes : Charger les helper ‘url’, ‘html’ et ‘form’ : Sauvegarder et fermer ce fichier. 6. Créer la base lafleur2 avec le script lafleur2.sql 7. Ouvrir le fichier database.php et mettre les valeurs suivantes : 8. Ouvrir le fichier application/config/routes.php. Modifier la ligne $route['default_controller'] en changeant le controleur par défaut : $route['default_controller'] = « controleurTp4 » ; SIO2 SLAM5 CodeIgniter Tp4 1 9. Créer le controleur application/controllers/controleurTp4.php : <?php class ControleurTp4 extends CI_Controller { function __construct() { parent:: __construct(); } function index() { $this->load->view('vue1Tp4'); } } Sauvegarder le controleur. 10. Créer la vue application/views/vue1Tp4.php : <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <link rel='stylesheet' href="<?php echo base_url(); ?>/css/style.css" /> <title>Mavue</title> </head> <body> <div id="pagewidth" > <div id="header"><h1>Codeigniter-Tp4-BD-MVC</h1></div> <div id="maincol"><h2>Utilisation des bases de donnees & du modele de conception MVC</h2> L'objectif de ce Tp est d'apprendre a utiliser : <?php echo ul(array('Select','Cbo dynamiques','Liens dynamiques')); ?> </div> <div id="leftcol"> <h2>Menu</h2> <?php echo anchor('controleurTp4','Accueil','Retour à l\'accueil'); echo br(); echo anchor('controleurTp4/listetable','Select','Lister une table'); echo br(); ?> </div> </div> </body> </html> SIO2 SLAM5 CodeIgniter Tp4 2 11. Tester : II- APPLICATION 1 - Lister une table (Select) Créer un modèle application/models/tp4_model.php : L’objectif est de récupérer le contenu de la table produit. Deux solutions sont proposées (lignes 15 et 17 plus classique). Le résultat de la requête est un jeu d’enegistrements (RecordSet) $rs. Ouvrir le fichier autoload.php pour charger ce modele : Dans le controleur, on va définir une méthode listetable() qui va récupérer ce résultat et l’afficher dans une vue vue2Tp4Select. public function listetable() { $tab['result']=$this->tp4_model->readall(); $this->load->view('vue2Tp4Select',$tab); } SIO2 SLAM5 CodeIgniter Tp4 3 Créer cette vue application/views/vue2Tp4Select.php : <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <link rel='stylesheet' href="<?php echo base_url(); ?>/css/style.css" /> <title>Mavue</title> </head> <body> <div id="pagewidth" > <div id="header"><h1>Codeigniter-Tp4-BD-MVC</h1></div> <div id="maincol"><h2>Affichage du resultat d'une requete</h2> <?php for($i=0;$i<=count($result)-1;$i++) { echo $result[$i][‘libpdt’]; echo br(); } ?> </div> <div id="leftcol"> <h2>Menu</h2> <?php echo anchor(''controleurTp4'/index','Accueil','Retour à l\'accueil'); echo br(); echo anchor(''controleurTp4'/listetable','Select','Lister une table'); echo br(); ?> </div> </div> </body> </html> Tester : SIO2 SLAM5 CodeIgniter Tp4 4 Affichage de ce résultat dans un tableau. On va utiliser la librairie table et mettre des entêtes de colonnes (vue2Tp4Select) : <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <link rel='stylesheet' href="<?php echo base_url(); ?>/css/style.css" /> <title>Mavue</title> </head> <body> <div id="pagewidth" > <div id="header"><h1>Codeigniter-Tp4-BD-MVC</h1></div> <div id="maincol"><h2>Affichage du resultat d'une requete</h2> <?php // // // // // // for($i=0;$i<=count($result)-1;$i++) { echo $result[$i][libpdt]; echo br(); } affichage dans un tableau $this->table->set_heading('Code', 'Designation', 'Prix', 'Image', 'CodeCategorie'); echo $this->table->generate($result); ?> </div> ... </html> Tester : On va afficher l’image correspondant au produit. Transformer le code ainsi : SIO2 SLAM5 CodeIgniter Tp4 5 L20 : on enlève la catégorie L21 on crée un tableau rempli à partir d’une boucle L24 création du chemin d’accès aux images (créer un dossier images sous la racine tp4 avec les fichiers jpeg) Tester : 2 – Liste déroulante dynamique On va mettre en place une liste déroulante dynamique (liste des catégories) pour choisir un élément et afficher dans un formulaire le résultat (les fleurs correspondantes). Ajouter dans le menu à gauche des pages (vue1Tp4 et vue2Tp4Select) un nouvel item : echo anchor('controleurTp4/choixformdyn','ListeDyn','Lister une table'); echo br(); Définir la nouvelle méthode choixformdyn() dans le controleur : public function choixformdyn() { $tab['result']=$this->tp4_model->readallcat(); $this->load->view('vue3Tp4choixformdyn',$tab); } Cette méthode appelle une méthode du modèle readallcat() pour obtenir toutes les catégories et charge la vue vue3Tp4choixformdyn pour afficher le contenu de la liste déroulante. SIO2 SLAM5 CodeIgniter Tp4 6 Dans le modèle, rajouter la méthode readallcat() : public function readallcat() { // $rs=$this->db->get('categorie'); ou $rs=$this->db->query('select * from categorie'); return $rs->result_array() ; } Créer la vue vue3Tp4choixformdyn.php : <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <link rel='stylesheet' href="<?php echo base_url(); ?>/css/style.css" /> <title>Mavue</title> </head> <body> <div id="pagewidth" > <div id="header"><h1>Codeigniter-Tp4-BD-MVC</h1></div> <div id="maincol"><h2>Formulaire avec contrôle cbo dynamique</h2> <?php echo form_open('controleurTp4/listeform'); echo form_label('Catégorie : '); $options = array(); for($i=0;$i<=count($result)-1;$i++) { $cle = $result[$i]['codecat']; $options[$cle] = $result[$i]['libcat']; } echo form_dropdown('lstcat', $options); echo br(2); echo form_submit('cmdvalider','Valider'); echo form_reset('cmdAnnuler','Annuler'); echo form_close(); ?> </div> <div id="leftcol"> <h2>Menu</h2> <?php echo anchor('controleurTp4/index','Accueil','Retour à l\'accueil'); echo br(); echo anchor('controleurTp4/listetable','Select','Lister une table'); echo br(); echo anchor('controleurTp4/choixformdyn','ListeDyn','Lister une table'); echo br(); ?> </div> </div> SIO2 SLAM5 CodeIgniter Tp4 7 </body> </html> Mise en place d’un formulaire avec la liste déroulante et deux boutons de commande. Il reste à définir la méthode listeform() dans le contrôleur : public function listeform() { $lst = $this->input->post('lstcat'); // récupération de la valeur choisie dans la LD $tab['result']=$this->tp4_model->rechpdts($this->input->post('lstcat')); // recherche des produits correspondants à la catégorie $this->load->view('vue2Tp4Select',$tab); } Et enfin définir la méthode rechpdts() paramétrée par le code catégorie dans le modèle : public function rechpdts($cat) { $rs = $this->db->get_where('produit', array('catpdt' => $cat)); // ou $rs=$this->db->query('select * from produit where catpdt=\'' . $cat . '\''); return $rs->result_array(); } Tester : Valider : SIO2 SLAM5 CodeIgniter Tp4 8 3 – Lien hypertexte dynamique Ajouter un nouvel item dans le menu à gauche dans chaque vue : echo anchor('controleurTp4/liendyn','Lien Dyn','Lister une table'); echo br(); Définir la méthode liendyn() dans le controleur : public function liendyn() { $tab['result']=$this->tp4_model->readall(); $this->load->view('vue4Tp4liendyn',$tab); } Cette méthode récupère l’ensemble des produits, puis charge la vue vue4Tp4liendyn pour afficher un lien hypettexte pour chaque produit. Créer la vue vue4Tp4liendyn.php : <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <link rel='stylesheet' href="<?php echo base_url(); ?>/css/style.css" /> <title>Mavue</title> </head> <body> <div id="pagewidth" > <div id="header"><h1>Codeigniter-Tp4-BD-MVC</h1></div> <div id="maincol"><h2>Affichage du resultat d'une requete : Lien dynamique</h2> <?php $data = array(); for($i=0;$i<=count($result)-1;$i++) { $data[] = anchor('controleurTp4/modification',$result[$i]['libpdt']); } echo ul($data); ?> </div> <div id="leftcol"> <h2>Menu</h2> <?php echo anchor('controleurTp4/index','Accueil','Retour à l\'accueil'); echo br(); ... </html> Le tableau $data est construit à partir des produits, ses éléments sont des liens hypertextes (désignation du produit) affichés dans une liste à puce (non ordonnée : ul). SIO2 SLAM5 CodeIgniter Tp4 9 Tester : Définir la méthode modification() dans le controleur. Cette méthode va rechercher les caractéristiques du produit sélectionné et les afficher dans une nouvelle vue : public function modification() { $tab['produit']=$this->tp4_model->rechpdt(); $this->load->view('vue5Tp4formModif',$tab); } La méthode rechpdt() permet de retrouver les caractéristiques d’un produit passé en paramètre, mais lequel ? (voir plus loin) Ecrire la méthode rechpdt() dans le modèle : public function rechpdt($id) { $rs = $this->db->get_where('produit', array('codepdt' => $id)); //$rs=$this->db->query('select * from produit where codepdt=\'' . $id . '\''); return $rs->row_array(); // Et non, result_array car une seule ligne de résultat } Le paramètre formel est $id. Tester en sélectionnant un lien, en bas apparait une uri : …/Tp4/index.php/controleurTp4/modification mais sans paramètre SIO2 SLAM5 CodeIgniter Tp4 10 Il faut passer la valeur du code du produit sélectionné à la méthode rechpdt(). Dans la vue vue4Tp4liendyn.php, compléter ainsi le lien : $data[] = anchor('controleurTp4/modification/'.$result[$i]['codepdt'],$result[$i]['libpdt']); En testant à nouveau, la valeur du code produit apparait dans l’uri (3ième segment de l’uri en partant de la racine tp4) : Modifier la méthode modification dans le controleur : $tab['produit']=$this->tp4_model->rechpdt($this->uri->segment('3')); Créer la vue vue5Tp4formModif.php : Tester : SIO2 SLAM5 CodeIgniter Tp4 11
© Copyright 2024