Votre lecteur Flash n'est pas à jour. Installer la dernière version
Navigation
Liens
Games
Partenaires
Autres liens
S'abonner
Faire un blog avec cakePHP en 10 minutes
Premier tutoriel d’une longue série. Voici un tutoriel sur le fabuleux framework qu’est cakePHP.
Ce tutoriel est celui proposé sur le site officiel (que j’ai bien sûr traduit et enrichi) de cakePHP.
Dans ce tutoriel, nous allons donc créer un blog, tout ce qu'il y a de plus simple. Ca ne devrait pas vous poser trop de problème même si vous découvrez cakePHP.
Tout d'abord, téléchargez-le sur le site officiel. Ensuite, pour tout ce qui est configuration, je ne vais pas m'y attarder dans ce tutoriel. Je prends seulement en compte que le framework est installé et configuré sur votre serveur (principalement le fichier de connexion à la base de données qui se trouve être '/cake/app/config/database.php').
Je prend en compte que vous connaissez egalement le modele MVC.
1. La création des tables
Pour développer un blog, nous avons besoin de travailler sur une base de donnée. Voici la table ainsi que des données à insérer :
CREATE TABLE posts (
id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(50),
body TEXT,
created DATETIME DEFAULT NULL,
modified DATETIME DEFAULT NULL
);
INSERT INTO posts (title,body,created)
VALUES ('The title', 'This is the post body.', NOW());
INSERT INTO posts (title,body,created)
VALUES ('A title once again', 'And the post body follows.', NOW());
INSERT INTO posts (title,body,created)
VALUES ('Title strikes back', 'This is really exciting! Not.', NOW());
id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(50),
body TEXT,
created DATETIME DEFAULT NULL,
modified DATETIME DEFAULT NULL
);
INSERT INTO posts (title,body,created)
VALUES ('The title', 'This is the post body.', NOW());
INSERT INTO posts (title,body,created)
VALUES ('A title once again', 'And the post body follows.', NOW());
INSERT INTO posts (title,body,created)
VALUES ('Title strikes back', 'This is really exciting! Not.', NOW());
Notions importantes :
Le nom des tables doit forcement être au pluriel.
Le nom d'une classe au singulier mais avec une majuscule pour la premiere lettre.
En ce qui concerne le nom d'un fichier, si on a (que ça soit un controleur, une vue, ...) ValeurOptionnel , le fichier devra obligatoirement se nommer valeur_optionnel.php.
Pour plus d'information, je vous renvoi sur la documentation officiel (en anglais).
Le nom des tables doit forcement être au pluriel.
Le nom d'une classe au singulier mais avec une majuscule pour la premiere lettre.
En ce qui concerne le nom d'un fichier, si on a (que ça soit un controleur, une vue, ...) ValeurOptionnel , le fichier devra obligatoirement se nommer valeur_optionnel.php.
Pour plus d'information, je vous renvoi sur la documentation officiel (en anglais).
2. Création du modèle post
Tout d'abord, il faut créer dans le repertoire /app/models un fichier post.php . Dans celui-ci insérez le code suivant :
<?php
class Post extends AppModel {
var $name = 'Post'; // cette variable est là que pour remedier à un probleme de compatibilite de PHP4
}
?>
class Post extends AppModel {
var $name = 'Post'; // cette variable est là que pour remedier à un probleme de compatibilite de PHP4
}
?>
Ce petit bout de code va permettre une connexion à la base de donnees.
Un petit test s'impose!
Dans votre navigateur, tapez www.monserveur.biz/cake/post, et voici ce que vous devez obtenir :
3. Création du controleur post
<?php
class PostsController extends AppController {
var $name = 'Posts';
function index() {
$this->set('posts', $this->Post->findAll());
}
}
?>
class PostsController extends AppController {
var $name = 'Posts';
function index() {
$this->set('posts', $this->Post->findAll());
}
}
?>
Voici le code a inserer dans le fichier /app/controllers/posts_controller.php
L'instruction set() permet d'envoyer des informations a la vue (qui n'est pas encore créée). Cette ligne définie que la variable 'posts' est égale à la valeur retournée par la méthode finAll() du modèle Post Notre modèle Post est automatiquement disponible avec $this->Post car nous avons bien respecté les conventions de cakePHP.
Le fait de créer une fonction index, vous dites à cake de charger la page lorsque l'adresse www.monserveur.biz/cake/post/index est chargé.
4.Création de la vue
Maintenant que nous avons notre connexion à la base de données grâce à notre modèle, ainsi que le controleur, il nous faut, pour l'affichage des informations, créer un vue pour l'action 'index' .
<h1>Blog posts</h1>
<table>
<tr>
<th>Id</th>
<th>Title</th>
<th>Created</th>
</tr>
<?php foreach ($posts as $post): ?>
<tr>
<td><?php echo $post['Post']['id']; ?></td> // on va afficher l'id
<td>
<?php echo $html->link($post['Post']['title'], "/posts/view/".$post['Post']['id']); ?>
</td>
<td><?php echo $post['Post']['created']; ?></td>
</tr>
<?php endforeach; ?>
</table>
<tr>
<th>Id</th>
<th>Title</th>
<th>Created</th>
</tr>
<?php foreach ($posts as $post): ?>
<tr>
<td><?php echo $post['Post']['id']; ?></td> // on va afficher l'id
<td>
<?php echo $html->link($post['Post']['title'], "/posts/view/".$post['Post']['id']); ?>
</td>
<td><?php echo $post['Post']['created']; ?></td>
</tr>
<?php endforeach; ?>
</table>
Voici le fichier /app/views/posts/index.thtml
Important : Pour chaque controleur, il faut créer un dossier qui porte le même nom dans le répertoire 'view' de cake.
Une vue est composée de code html et de php.
Ici on affiche sous forme de tableau, les données stockées dans le tableau. On fait une boucle pour chaque tuple de la table, et on affiche dans chaque cellule de notre tableau, l'id, le titre et la date de création.
Une vue est composée de code html et de php.
Ici on affiche sous forme de tableau, les données stockées dans le tableau. On fait une boucle pour chaque tuple de la table, et on affiche dans chaque cellule de notre tableau, l'id, le titre et la date de création.
Voila ce qu'on obtient :
Un peu plus d'explications :
La variable $html est une instance de la class HtmlHelper.
La méthode link(), permet de faire des liens vers d'autres pages. Cette méthode génère un lien avec en premier paramètre le titre, et en deuxième paramètre l'URL.
Quand vous spécifiez l'URL dans cake, vous lui donnez le chemin relatif à la base d'application, et cake fait le reste.
Plus simplement l'URL est de la forme /controller/action/id.
5. Ajout du controleur view
Dans le controleur post, modifiez le code pour ajouter la fonction qui va vous permettre de visualiser chaque données de la table.
<?php
class PostsController extends AppController {
var $name = 'Posts';
function index() {
$this->set('posts', $this->Post->findAll());
}
function view($id = null) {
$this->Post->id = $id;
$this->set('post', $this->Post->read());
}
}
?>
class PostsController extends AppController {
var $name = 'Posts';
function index() {
$this->set('posts', $this->Post->findAll());
}
function view($id = null) {
$this->Post->id = $id;
$this->set('post', $this->Post->read());
}
}
?>
Vous connaissez déjà la fonction set().
A noter l'utilisation de la fonction read() à la place de finAll() car nous souhaitons simplement avoir une information sur l'envoi des données.
A noter aussi que l'action 'view' prend un paramètre. Ce paramètre est passé par l'URL. Si on a une URL du type /posts/view/3, alors la valeur '3' correspond à la variable $id.
Maintenant au tour de la vue de l'action 'view', qui se trouve à cet endroit : /app/views/posts/view.thtml.
6. Vue de l'action view
<h1><?php echo $post['Post']['title']?></h1>
<p><small>Created: <?php echo $post['Post']['created']?></small</p>
<p><?php echo $post['Post']['body']?></p>
<p><small>Created: <?php echo $post['Post']['created']?></small</p>
<p><?php echo $post['Post']['body']?></p>
Vérifiez que ça marche à l'aide des liens sur la page /posts/index ou manuellement /posts/view/1.
Vous devriez obtenir :
7. Création d'un système d'ajout de 'posts'
Nous avons vu comment lire la base de données et afficher les tuples de celle-ci, voyons maintenant comment en ajouter.
Tout d'abord, il faut créer l'action add() dans le fichier /app/controllers/posts_controller.php.
<?php
class PostsController extends AppController {
var $name = 'Posts';
function index() {
$this->set('posts', $this->Post->findAll());
}
function view($id) {
$this->Post->id = $id;
$this->set('post', $this->Post->read());
}
function add() {
if (!empty($this->data)) {
if ($this->Post->save($this->data)) {
$this->flash('Votre post a ete sauvegarde.','/posts'); // affichage d'un message de confirmation
}
}
}
}
?>
class PostsController extends AppController {
var $name = 'Posts';
function index() {
$this->set('posts', $this->Post->findAll());
}
function view($id) {
$this->Post->id = $id;
$this->set('post', $this->Post->read());
}
function add() {
if (!empty($this->data)) {
if ($this->Post->save($this->data)) {
$this->flash('Votre post a ete sauvegarde.','/posts'); // affichage d'un message de confirmation
}
}
}
}
?>
Explication de l'action add().
Tout d'abord, on test si la variable data n'est pas vide, c'est-à-dire si le titre et le message existent.
Ensuite on sauvegarde les données dans la table, et si la fonction renvoie vrai, alors le titre et le message à bien été enregistrés et donc on peut afficher le message de confirmation. Si la sauvegarde ne se fait pas, on affiche une page de debug.
La fonction flash() affiche un message un court instant avant de faire une redirection vers /posts dans notre cas.
Ajout de la vue.
Voici le fichier /app/views/posts/add.thtml
<h1>Add Post</h1>
<form method="post" action="<?php echo $html->url('/posts/add')?>">
<p>
Title:
<?php echo $html->input('Post/title', array('size' => '40'))?>
<?php echo $html->tagErrorMsg('Post/title', 'Pas de titre.') ?>
</p>
<p>
Body:
<?php echo $html->textarea('Post/body', array('rows'=>'10')) ?>
<?php echo $html->tagErrorMsg('Post/body', 'Pas de message.') ?>
</p>
<p>
<?php echo $html->submit('Save') ?>
</p>
</form>
<form method="post" action="<?php echo $html->url('/posts/add')?>">
<p>
Title:
<?php echo $html->input('Post/title', array('size' => '40'))?>
<?php echo $html->tagErrorMsg('Post/title', 'Pas de titre.') ?>
</p>
<p>
Body:
<?php echo $html->textarea('Post/body', array('rows'=>'10')) ?>
<?php echo $html->tagErrorMsg('Post/body', 'Pas de message.') ?>
</p>
<p>
<?php echo $html->submit('Save') ?>
</p>
</form>
Comme la fonction link(), la fonction url() va générer une URL du controleur et d'une action qu'on lui à donnée. Par défaut, on envoi les données par POST, mais on peut le modifier avec le second paramètre.
La fonction input() et textarea() génerent les balises de formulaire du même nom. Le premier paramètre dit à cake quel modèle/champ il correspond, et le second paramèmetre correspond aux autres attributs HTML (comme par exemple la taille du champ 'input').
L'appel de la fonction tagErrorMsg() va afficher un message d'erreur dans le cas où on a une erreur de validation.
Au tour du modèle.
Modifiez le fichier /app/models/post.php
<?php
class Post extends AppModel {
var $name = 'Post';
var $validate = array(
'title' => VALID_NOT_EMPTY,
'body' => VALID_NOT_EMPTY
);
}
?>
class Post extends AppModel {
var $name = 'Post';
var $validate = array(
'title' => VALID_NOT_EMPTY,
'body' => VALID_NOT_EMPTY
);
}
?>
Le tableau $validate dit à Cake comment valider les données lorsque la méthode save() est appelée. Les attributs du tableau contiennent des constantes données par Cake qui correspondent à des regex (pour plus d'information, allez voir le fichier /cake/libs/validators.php)
par défaut les validation de Cake se font à l'aide des regex, mais vous pouvez utiliser Model::invalidate() pour changer avec vos propre validation dynamique.
Maintenant que vous avez votre validation en place, essayez d'enregistrer un post sans titre ou/et sans message pour voir comment ça marche.
Voila ce que vous devez obtenir :
8. Ajout d'une action de suppression
Comment supprimer les données de la table ?
Commençons par l'action delete() dans le fichier /app/controllers/posts_controller.php :
function delete($id) {
$this->Post->del($id);
$this->flash('Le post avec l\'id: '.$id.' a ete supprime.', '/posts');
}
$this->Post->del($id);
$this->flash('Le post avec l\'id: '.$id.' a ete supprime.', '/posts');
}
Cette action supprime le post qui correspond à l'id passé en paramètre.
Elle utilise également la fonction flash() pour afficher la confirmation de suppression avant la redirection.
Nous avons notre action de suppression mais pour mien l'utiliser, rien de mieu qu'une vue.
Créez le fichier /app/views/posts/index.thtml :
<h1>Blog posts</h1>
<p><?php echo $html->link('Add Post', '/posts/add'); ?></p>
<table>
<tr>
<th>Id</th>
<th>Title</th>
<th>Created</th>
</tr>
<?php foreach ($posts as $post): ?>
<tr>
<td><?php echo $post['Post']['id']; ?></td>
<td>
<?php echo $html->link($post['Post']['title'], '/posts/view/'.$post['Post']['id']);?>
<?php echo $html->link(
'Delete',
"/posts/delete/{$post['Post']['id']}",
null,
'Etes vous sur ?'
)?>
</td>
</td>
<td><?php echo $post['Post']['created']; ?></td>
</tr>
<?php endforeach; ?>
</table>
<p><?php echo $html->link('Add Post', '/posts/add'); ?></p>
<table>
<tr>
<th>Id</th>
<th>Title</th>
<th>Created</th>
</tr>
<?php foreach ($posts as $post): ?>
<tr>
<td><?php echo $post['Post']['id']; ?></td>
<td>
<?php echo $html->link($post['Post']['title'], '/posts/view/'.$post['Post']['id']);?>
<?php echo $html->link(
'Delete',
"/posts/delete/{$post['Post']['id']}",
null,
'Etes vous sur ?'
)?>
</td>
</td>
<td><?php echo $post['Post']['created']; ?></td>
</tr>
<?php endforeach; ?>
</table>
Cette vue utilise HtmlHelper pour guider l'utilisateur grace a un boite de dialogue en javascript lors de la suppression d'un post.
9. Modification des données
Attaquons-nous maintenant à l'édition des posts. Vous avez certainement compris le fonctionnement de Cake, il va nous falloir créer l'action puis la vue. Voici à quoi ressemble le controler :
Modifiez le fichier /app/controllers/posts_controller.php, ajoutez l'action suivante :
function edit($id = null) {
if (empty($this->data)) {
$this->Post->id = $id;
$this->data = $this->Post->read();
}
else {
if ($this->Post->save($this->data['Post'])) {
$this->flash('Votre post a ete mis a jour.','/posts');
}
}
}
if (empty($this->data)) {
$this->Post->id = $id;
$this->data = $this->Post->read();
}
else {
if ($this->Post->save($this->data['Post'])) {
$this->flash('Votre post a ete mis a jour.','/posts');
}
}
}
Ici on test si les mises à jour on correctement été enregistrées. Si tout va bien, on affiche un boite de dialogue et on redirige, sinon on fait seulement la redirection.
La vue de la modification, qui se trouve à cet emplacement : /app/views/posts/edit.thtml, ressemble à quelque chose comme :
<h1>Edit Post</h1>
<form method="post" action="<?php echo $html->url('/posts/edit')?>">
<?php echo $html->hidden('Post/id'); ?>
<p>
Titre:
<?php echo $html->input('Post/title', array('size' => '40'))?>
<?php echo $html->tagErrorMsg('Post/title', 'Pas de titre.') ?>
</p>
<p>
Message:
<?php echo $html->textarea('Post/body', array('rows'=>'10')) ?>
<?php echo $html->tagErrorMsg('Post/body', 'Pas de message.') ?>
</p>
<p>
<?php echo $html->submit('Save') ?>
</p>
</form>
<form method="post" action="<?php echo $html->url('/posts/edit')?>">
<?php echo $html->hidden('Post/id'); ?>
<p>
Titre:
<?php echo $html->input('Post/title', array('size' => '40'))?>
<?php echo $html->tagErrorMsg('Post/title', 'Pas de titre.') ?>
</p>
<p>
Message:
<?php echo $html->textarea('Post/body', array('rows'=>'10')) ?>
<?php echo $html->tagErrorMsg('Post/body', 'Pas de message.') ?>
</p>
<p>
<?php echo $html->submit('Save') ?>
</p>
</form>
Cette vue envoi les données, et les messages eventuels.
Note : Cake saura si vous êtes en train de modifier un post, si le champ 'id' est renseigné, ou si on en créé un, l'id n'existe pas lors de l'appel de la fonction save().
Vous pouvez maintenant modifier la vue de votre index pour ajouter un lien pour faire une mise à jour.
Voilà le fichier /app/views/posts/index.thtml :
<h1>Blog posts</h1>
<p><?php echo $html->link("Add Post", "/posts/add"); ?>
<table>
<tr>
<th>Id</th>
<th>Titre</th>
<th>Date de création</th>
</tr>
<?php foreach ($posts as $post): ?>
<tr>
<td><?php echo $post['Post']['id']; ?></td>
<td>
<?php echo $html->link($post['Post']['title'], '/posts/view/'.$post['Post']['id']);?>
<?php echo $html->link(
'Supprimer',
"/posts/delete/{$post['Post']['id']}",
null,
'Etes vous sur ?'
)?>
<?php echo $html->link('Edit', '/posts/edit/'.$post['Post']['id']);?>
</td>
</td>
<td><?php echo $post['Post']['created']; ?></td>
</tr>
<?php endforeach; ?>
</table>
<p><?php echo $html->link("Add Post", "/posts/add"); ?>
<table>
<tr>
<th>Id</th>
<th>Titre</th>
<th>Date de création</th>
</tr>
<?php foreach ($posts as $post): ?>
<tr>
<td><?php echo $post['Post']['id']; ?></td>
<td>
<?php echo $html->link($post['Post']['title'], '/posts/view/'.$post['Post']['id']);?>
<?php echo $html->link(
'Supprimer',
"/posts/delete/{$post['Post']['id']}",
null,
'Etes vous sur ?'
)?>
<?php echo $html->link('Edit', '/posts/edit/'.$post['Post']['id']);?>
</td>
</td>
<td><?php echo $post['Post']['created']; ?></td>
</tr>
<?php endforeach; ?>
</table>
Voila le résultat final :
Vous avez maintenant un petit blog, très simple à metre en place. Vous pouvez bien sûr ajouter des fonctions supplémentaires tel qu'un système de commentaire.
J'espere que j'ai été assez clair pour les novices comme pour les autres. Lancez-vous sur cakePHP !!!