Tutoriaux
Créer votre propre ToDo List grâce à PHP et Ajax / jQuery
En tant que programmeur, quoi de plus utile que la bonne vieille todo list! En effet, nous allons voir ici comment créer votre propre todo list avec PHP et une touche de Ajax avec jQuery. Alors, commençons par la partie PHP de cet utilitaire. Par la suite, il vous sera facile de modifier et/ou d'ajouter des fonctionnalités à cette liste. À vous de voir ...
Fichier
- delete.php - Suppression des notes
- process.php - Création et affichage des notes
- index.php - Formulaire / Javascript
MySQL
CREATE TABLE 'notes'
(
'id' INT PRIMARY KEY AUTO INCREMENT NOT NULL,
'content' VARCHAR(500) NOT NULL
)
index.php
Cette page contient un formulaire simple, c'est à dire, un Textarea suivi d'un bouton d'envoi de formulaire. Rien de plus pour notre todo de base. Comme mentionné en introduction, il vous sera facile par la suite d'améliorer certain aspect de cette liste tel que les champs de saisie par exemple. Lors de l'envoi du formulaire, les informations sont envoyés à la page process.php par la méthode POST.
<form id="form" action="process.php" method="post">
<textarea name="content" id="content" cols="50" rows="3"></textarea>
<input type="submit" id="submit" name="submit" value="Envoyer" />
</form>
process.php
Cette page ne fait que traiter les données transmise par le formulaire. Ce dernier insert les informations du Textarea dans la table. De plus cette dernière, affiche la liste des informations ainsi qu'un lien de suppression.
<?php
// Connexion à la base de données
$connection = mysql_connect('host (usually localhost)', 'mysql_username' , 'mysql_password');
$selection = mysql_select_db('mysql_database', $connection);
// Est-ce que le formulaire a été envoyé ?
if($_POST['submit']){
$content = $_POST['content'];
//Insertion
$ins = mysql_query("INSERT INTO 'notes' (content) VALUES ('$content')");
//Redirection vers index.php
header("Location:index.php");
}
/* Affichage de la liste */
// Sélection des notes
$find = mysql_query("SELECT * FROM 'notes' ORDER BY id DESC");
// Création de la liste
echo '<ul>';
while($row = mysql_fetch_array($find)){
echo '<li>' . $row['content'] . ' <a id="' . $row['id'] . '" href="delete.php?id=' . $row['id'] . '"><img src="cancel.png" alt="Delete?" /></a></li>';
}
echo '</ul>';
?>
delete.php
Cette dernière, n'a pas besoin de beaucoup d'explication. La suppression d'une note se fait par l'id de cette dernière passé en paramètre.
<?php
// Connexion à la base de données
$connection = mysql_connect('host (usually localhost)', 'mysql_username' , 'mysql_password');
$selection = mysql_select_db('mysql_database', $connection);
// Récupération du paramètre passé par la méthode GET
if($_GET['id']){
$id = $_GET['id'];
// Suppression
$delete = mysql_query("DELETE FROM 'notes' WHERE 'id' = '$id'");
// Redirection
header("Location:index.php");
}
?>
jQuery - Ajout d'une note
// Déclenchement lors de la soumission du formulaire
$("#submit").click(function(){
// Récupération de la note
var formvalue = $("#content").val();
// Création de l'URL d'envoie
var url = 'submit=1&content=' + formvalue;
// Utilisation d'Ajax / jQuery pour l'envoie
$.ajax({
type: "POST",
url: "process.php",
data: url,
success: function(){
// Si l'ajout est réussi, afficher un message de réussite
$("ul").before("<p class='new'>Nouvelle note: <i>" + formvalue + "</i></p>");
}
});
// Nous retournons "false" au navigateur afin que la page ne soit pas actualisé
return false;
});
jQuery - Suppression d'une note
// Déclenchement lors d'un clique sur un lien de suppression
$("a").click(function(){
// Récupération du lien de suppression cliqué
var element = $(this);
// Récupération de l'id du lien cliqué
var noteid = element.attr("id");
// Création de l'URL d'envoie
var info = 'id=' + noteid;
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function(){
element.parent().eq(0).fadeOut("slow");
}
});
// Nous retournons "false" au navigateur afin que la page ne soit pas actualisé
return false;
});
Ajouter cette page à votre réseau social favoris
Rétrolien(0)
Adresse URI pour un rétrolien sur cet articleCommentaires (1)
Flux RSS pour les commentaires
Ecrivez un commentaire
Navigation
Publicités
Nos services
Programmation Web
Que ce soit pour faire la conception d'un site Web ou pour la refonte d'un site existant, nous avons la solution.
La création et la conception Web sont au cœur de nos activités. Chaque concept et création sont différents, et chaque client est unique. Rien n’est laissé au hasard pour faire de votre création multimédia un outil unique de promotion.
Suite ...
Programmation Desktop
Quel que soit votre projet, nous pouvons le réaliser pour vous !
Grâce à notre expertise en programmation, nous sommes en mesure de concevoir une variété d’applications qui pourront vous permettre d’augmenter votre clientèle, de la fidéliser ou encore de réduire vos coûts d’opération ! Nos critères élevés de contrôle de qualité ainsi que la grande expertise de nos programmeurs et de nos chargés de projets contribuent au succès des mandats qui nous sont confiés.
Suite ...
Autres ...
Quel que soit vos projets ou vos idées, contactez nous!
Grâce à notre expérience et notre expertise en informatique, nous serons en mesure d'évaluer vos projets et nous pourrons trouver une solution à vos problèmes. Que ce soit de la programmation ou de la base de données ou bien tout autres problèmes informatiques, contactez nous, nous serons là pour vous.
Suite ...