Ecrire des graffittis avec jquery, php et mysql

Un exemple simple et complet : intervenir sur une page en cliquant dessus, sauvegarder le résultat dans une base de donnée pour pouvoir les afficher au rechargement de la page.

Précédent | 12/14 | Suivant

Ce code est perfectible : on peut imaginer pouvoir demander une image au lieu d’écrire du texte, de fabriquer une texte en image avec gd2, de choisir une couleur, de naviguer dans la profondeur des messages, de recharger régulièrement la page en ajax pour en faire un espèce de chat...

1) La page d’initialisation de la base de donnée

On externalise cette part du code pour la réemployer 2 fois.

<?php

// ouverture de la connexion - ici pour mamp -
 $hote="localhost";
 $utilisateur="root";
 $password="root";

 // ouverture de la connexion
 $connexion = mysql_connect($hote,$utilisateur,$password);

 // ici il faudrait pour être complet tester que la base existe, au besoin la creer
 // si vous utilisez ce script, vous devez donc créer manuellement la table mysql_tests dans phpmyadmin
 mysql_select_db('mysql_page',$connexion);

       // on teste pour voir si la base existe
 $requete="SELECT * FROM elements;";
 $requete=mysql_query($requete,$connexion);

 // si la table n'existe pas, la créer
 if (!$requete){

 // contient un id auto-incrementiel,
 $requete="CREATE TABLE elements (id int(7) NOT NULL auto_increment, type varchar(255), contenu TEXT, style varchar(255), date  datetime, PRIMARY KEY (id))";
  mysql_query($requete,$connexion);      
 }
 
?>

2) La page elle-même

Contient les fonctions qui crée le formulaire et fait la requête ajax, plus le listage des messages déjà écrit au chargement.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Add your comment on  the metawall</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){  
        $("html").click(function(coordonees){
                $(".clicform").remove();
                $("body").append("<div class='clicform contenu' style='top:" + coordonees.pageY + "px;left:" + coordonees.pageX + "px'><textarea id='letexte'></textarea><br /><div class='validbutton' onClick='javascript:soumettexte();'>Envoyer</div></div>");
                $(".clicform textarea").focus();
                $("body .clicform").click(function(){ return false; });
               
               
        });
});

function soumettexte(){
var contenu=$(".clicform textarea").attr("value");



if(contenu !=""){
       
style=$(".clicform").attr("style");       
       
$.ajax({
  type: "POST",
  url: "update_page.php",
  data: "style=" + style + "&entrer=oui&contenu=" + contenu,
  success: function(msg){
    //alert( "Data Saved: " + msg );
  }
});

}

$(".clicform").each(function(){
        $(this).html(contenu);
        $(this).removeClass("clicform");
        });

return false;       
}
</script>

</head>
<body>
<?php
include('init_base.php');

$larequete="SELECT * FROM elements";
 $requete = mysql_query($larequete,$connexion);      
 $total = mysql_num_rows($requete);
 if ($total) {
       while($row = mysql_fetch_array($requete)) {
      // ecriture les elements depuis la db
      echo "<div class=\"contenu\" style=\"".$row['style']."\" >".stripslashes($row['contenu'])."</div>\n";
  }
}

?>
</body>
</html>

3) La page qui entre les message dans la db

Cette page est appellée par jquery. Ce code de démo n’est pas dégradable. Son activation par cliquer-pointer est trop appuyé sur le javascript pour l’être...

<?php
 
 include('init_base.php');

 // initialiser la variable message
 $message="";

 // tester que post contient ce qui nous interesse, c'est à dire au moins une array associative "entrer"
 // traiter ce qui a été envoyé par le formulaire
 if(isset($_POST['entrer'])){
                 // on sécurise le contenu avec addslashes
                 $contenu=addslashes($_POST['contenu']);
                 $style=addslashes($_POST['style']);
               
                 // on prépare une date
                 $date = date("Y-m-d H:m:s");
               
                 // on insère
                 $requete="INSERT INTO elements ( type,contenu,style,date ) VALUES ('texte','$contenu', '$style', '$date')";
                 $envoi=mysql_query($requete,$connexion);
               
                 // si c'est reussi, le dire dans le message
                 if($envoi){
                         echo "Nouveau contenu entré";
                 }
 }

?>

4) Les styles css

Dans le fichier style.css, quelques lignes.

body {
font-family:arial, sans-serif;
font-size:11px;
}

.clicform {
background-color:#fff;       
border:1px solid #ccc;
}

.clicform textarea{
heigth:4em;
}

.contenu {
position:absolute;
}       
       
.clicform textarea, .contenu {
font-size:21px;
font-weight:bold;
color: #666;
width:200px;       
}

.validbutton {
font-size:12px;       
}

Ajouter à ceci évidemment la librairie http://jquery.com...