Download Report

CodeIgniter : Tp3 les formulaires
I - PRELIMINAIRE
Prendre la MV avec WampServer.
1. Créer un dossier sous www/CodeIgniter/tp3. 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/tp3/';
4. Positionner la feuille de style style.css dans le dossier tp3/css à créer.
5. Ouvrir le fichier application/config /autoload.php. Charger les helper ‘url’, ‘html’ et
‘form’ :
Sauvegarder et fermer ce fichier.
6. Ouvrir
le
fichier
application/config/routes.php.
Modifier
$route['default_controller'] en changeant le controleur par défaut :
la
ligne
$route['default_controller'] = « controleurTp3 » ;
7. Créer le controleur application/controllers/controleurTp3.php :
<?php
class ControleurTp3 extends CI_Controller
{
function __construct()
{
parent:: __construct();
}
function index()
{
$this->load->view('vue1Tp3');
}
}
Sauvegarder le controleur.
8. Créer la vue application/views/vue1Tp3.php :
SIO2
SLAM5 CodeIgniter Tp3
1
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel='stylesheet' href="<?php echo base_url(); ?>/css/style.css" />
<title>Accueil Tp3</title>
</head>
<body>
<div id="pagewidth" >
<div id="header"><h1>CodeIgniter-Tp3-Formulaires</h1></div>
<div id="maincol">
L'objectif de ce Tp est de s'initier à l'utilisation des formulaires à l'aide de
CodeIgniter :
<?php
echo ul(array('Zone de texte', 'Boutons radios','Zone de liste'));
?>
</div>
<div id="leftcol"> <h2>Menu</h2>
<?php
echo anchor('controleurTp3/index','Accueil','Retour accueil');
echo br(1);
echo anchor('controleurTp3/vue2','Formulaire','Création de contrôles');
echo br(1);
?>
</div>
</div>
</body>
</html>
9. Tester :
SIO2
SLAM5 CodeIgniter Tp3
2
II- APPLICATION
1 - Mise en place des contrôles graphiques
 Créer une nouvelle méthode dans le controleur vue2 qui chargera une autre vue
vue2Tp3.php :
function vue2()
{
$this->load->view('vue2Tp3');
}
 Créer cette vue application/views/vue2Tp3.php :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel='stylesheet' href="<?php echo base_url(); ?>/css/style.css" />
<title>Formulaire Tp3</title>
</head>
<body>
<div id="pagewidth" >
<div id="header"><h1>CodeIgniter-Tp3-Formulaires</h1></div>
<div id="maincol"><h2>Les formulaires</h2></div>
<div id="leftcol"> <h2>Menu</h2>
<?php
echo anchor('controleurTp3/index','Accueil','Retour accueil');
echo br(1);
echo anchor('controleurTp3/vue2','Formulaire','Création de contrôles');
echo br(1);
?>
</div>
</div>
</body>
</html>
Tester :
SIO2
SLAM5 CodeIgniter Tp3
3
 Aller faire un tour au manuel en ligne : http://ellislab.com/codeigniter/userguide/helpers/form_helper.html pour visualiser les fonctions proposées par le helper
Form :
 Créer un formulaire dans vue2Tp3.php avec 2 zones texte de saisie et deux boutons :
…
<div id="maincol"><h2>Les formulaires</h2>
<?php
echo form_open('controleurTp3/traitForm');
echo form_label('Variete : ');
echo form_input('txtLib');
echo br(2);
echo form_label('Prix : ');
echo form_input('txtPx');
echo br(2);
echo form_submit('cmdValider','Valider');
echo form_reset('cmdAnnuler','Annuler');
echo form_close();
?>
</div>
<div id="leftcol"> <h2>Menu</h2>
Tester :
SIO2
SLAM5 CodeIgniter Tp3
4
 Créer la méthode traitForm() (vide pour l’instant) dans le controleur et tester les
boutons (le bouton Valider ne donne rien) :
function traitForm()
{
}
Avertissement : on va faire des affichages à partir du controleur, pour tester le code, mais ce
n’est pas le rôle habituel du controleur !
 On va afficher la variété saisie (par exemple Tomates) à partir du formulaire. Dans la
méthode traitForm() :
echo $this->input->post('txtLib');
En appuyant sur le bouton Valider, on obtient :
 Ajouter des boutons radio (pour des frais de transport Metropole ou DomTom) :
echo form_label('Metropole : ');
$data = array('name' => 'rdbPort',
'value' => 'metrop',
'checked' => TRUE);
echo form_radio($data);
echo br(1);
echo form_label('DomTom : ');
$data = array('name' => 'rdbPort',
'value' => 'domtom',
'checked' => FALSE);
echo form_radio($data);
echo br(2);
echo form_submit('cmdValider','Valider');
Tester :
SIO2
SLAM5 CodeIgniter Tp3
5
 Ajouter une liste déroulante. Elle comportera les quantités de produit souhaitées
(1,2,3,4 unité en kilo).
echo form_label('Quantite : ');
$options = array('1' => '1','2' => '2','3' =>'3' ,'4' =>'4');
echo form_dropdown('lstQte', $options, '1');
// 3ème param : item sélectionné par défaut : correspond au selected
echo br(2);
echo form_submit('cmdValider','Valider');
Tester :
 Afficher les valeurs choisies (variété, prix, transport et quantité) :
 On va afficher désormais les montants (brut, port, à payer). Le port est nul si le produit
vient de métropole, sinon il est égal à 10% du montant brut (prix * qte) :
SIO2
SLAM5 CodeIgniter Tp3
6
2 – Validation du formulaire
Si on oublie de saisir une quantité ou un prix, l’affichage précédent n’a plus de sens. Il
faudrait éviter ce type d’erreur, de même si l’on saisit une valeur de type syntaxique différent
de celui qui est attendu. D’où la nécessité de contrôler les valeurs saisies.
 Ajouter une nouvelle vue3Tp3 pour afficher le détail de la commande dans le
constructeur à la méthode traitform() :
$this->load->view('vue3Tp3');
 Créer la vue application/views/vue3Tp3.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-Tp3-Formulaires</h1></div>
<div id="maincol"><h2>Détails de la commande</h2>
<?php
echo "Vous avez commandé des $lib, pour un montant de $mtBrut euros.";
echo br(1);
echo "Le port est de $port euros.";
echo br(1);
echo "Votre montant à payer est donc de $mtPayer euros";
?>
</div>
<div id="leftcol"> <h2>Menu</h2>
<?php
echo anchor('controleurTp3/vue2','Formulaire','Création de contrôles');
echo br(1);
?>
</div>
</div>
</body>
</html>
 Modifier la méthode traitForm() afin d’envoyer les données nécessaires à la vue
vue3Tp3 :
$mtBrut = $this->input->post('txtPx') * $this->input->post('lstQte');
$port = 0;
if($this->input->post('rdbPort') == 'domtom')
{
SIO2
SLAM5 CodeIgniter Tp3
7
$port = 0.1 * $mtBrut;
}
$mtPayer = $mtBrut + $port;
$param = array ('mtBrut' => $mtBrut, 'port' => $port, 'lib' => $this->input>post('txtLib'),'mtPayer' => $mtPayer);
$this->load->view('vue3Tp3',$param);
 Ajouter la librairie form_validation dans le fichier autoload.php :
$autoload['libraries'] = array('form_validation');
 On va définir des règles de validation sur les zones de saisie. Dans la méthode
traitForm(), avant tout traitement :
$this->form_validation->set_rules('txtLib', 'Variete','trim|required|alpha_dash');
$this->form_validation->set_rules('txtPx', 'Prix','trim|required|alpha_dash');
if ($this->form_validation->run())
{
// traitement
}
else
{
$this->load->view('vue2Tp3');
}
La 1ère ligne indique une règle sur le contrôle txtLib : trim = retrait des éventuelles espaces
avant et après la valeur ; required = présence obligatoire d’une valeur, alpha_dash = seuls les
caractères alphanumériques sont acceptés.
La 2ième ligne concerne la règle de validation associée au contrôle txtPx.
Voir sur le site officiel les autres options possibles :
http://www.codeigniter.com/user_guide/libraries/form_validation.html#theform
SIO2
SLAM5 CodeIgniter Tp3
8
Le test des règles se fait avec la méthode run( ).
 Tester. Il serait plus convivial d’afficher un message d’erreur en cas de problème de
saisie. Retourner dans le code de la vue vue2Tp3 et saisir la ligne suivante :
echo form_input('txtLib');
echo form_error('txtLib','<span class=error>', '</span>');
echo br(2);
Le message d’erreur porte sur le contrôle de saisie txtLib avec la méthode form_error( ). La
balise span permet de donner un style au message.
 Faire de même pour le contrôle txtPx et tester :
SIO2
SLAM5 CodeIgniter Tp3
9
 Dernier détail à régler : en cas d’erreur de saisie, le formulaire est rechargé en perdant
toutes les autres valeurs déjà saisies. On rajoute un deuxième paramètre dans la
méthode form_input () :
echo form_input('txtLib',set_value('txtLib'));
Faire de même pour le prix :
SIO2
SLAM5 CodeIgniter Tp3
10