CodeIgniter : Tp4 Bd I - PRELIMINAIRE - Belsunce-Shop

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