Alors, voici comment insérer une ligne dans une table à l'aide de PHP, Ajax et Prototype.js :
Étape 1: Inclure la librairie Prototype.js
Télécharger la librairie Prototype.js et créer une nouvelle page (index.php). Ajouter la ligne suivante entre les balises <head> de votre page :<script type="text/javascript" src="http://www.pckult.net/prototype.js"></script>
Étape 2: HTML
Index.php est une page simple contenant le formulaire suivant :<input type="text" name="user_name" id="user_name" />
<input type="submit" name="button" id="button" value="Insert" onclick="javascript:insertName()"/>
Le bouton appelle la fonction Javascript nommé insertName() sur l'événement « Onclick » du bouton.
Étape 3: insert.php
Créer une nouvelle page (insert.php). Cette page contient une requête qui insère la ligne dans la table (USER):<?php
if(isset($_POST['user_name'])){
/* Connexion à la base de données */
include('config.php');
/* Suppression du HTML afin d'éviter l'injection */
$name = strip_tags($_POST['user_name']);
$sql = 'INSERT INTO USER (name) VALUES("'.$name.'")';
mysql_query($sql);
echo $name;
} else { echo '0'; }
?>
Étape 4: Fonction Javascript afin d'activer les requêtes Ajax
Ce code permet d'activer les requêtes Ajax avec Prototype.js. Ajouter donc ce code tout juste sous le code que vous aurez inscrit lors de l'étape 2:<script type="text/javascript">
function insertName(){
new Ajax.Request('insert.php', {
parameters: $('user_name').serialize(true),
});
}
</script>
Ce script passe en paramètre l'usager à insérer à la page contenant la requête d'insertion (insert.php). La ligne suivante contient la valeur passée en paramètre :
$('user_name').serialize(true)
... Si vous êtes familier avec Javascript, la ligne précédente équivaut à la ligne suivante :
document.getElementById('user_name');
... Où dans les 2 cas, "user_name" est l'id du champ de saisie du nom d'usager à insérer dans la base de données. Cette valeur est passée à la page insert.php comme une variable en _POST.
Jeu de briques
Snake
Pacman
Bubble