Arts numériques https://arts-numeriques.codedrops.net/ artsnumeriques est le support des cours de Stéphane Noel, professeur à l'école de recherche graphique. fr SPIP - www.spip.net Ecrire des graffittis avec jquery, php et mysql https://arts-numeriques.codedrops.net/Plus-ecrire-des-graffittis-avec https://arts-numeriques.codedrops.net/Plus-ecrire-des-graffittis-avec 2008-12-08T23:27:33Z text/html fr Stéphane Noel Javascript (X)html Php CSS Ajax <p>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. <br class='autobr' /> 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... <br class='autobr' /> 1) La page (…)</p> - <a href="https://arts-numeriques.codedrops.net/-Exemples-67-" rel="directory">Exemples</a> / <a href="https://arts-numeriques.codedrops.net/+-Javascript-+" rel="tag">Javascript</a>, <a href="https://arts-numeriques.codedrops.net/+-X-html-+" rel="tag">(X)html</a>, <a href="https://arts-numeriques.codedrops.net/+-Php-+" rel="tag">Php</a>, <a href="https://arts-numeriques.codedrops.net/+-CSS-+" rel="tag">CSS</a>, <a href="https://arts-numeriques.codedrops.net/+-Ajax-+" rel="tag">Ajax</a> <div class='rss_chapo'><p>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.</p></div> <div class='rss_texte'><p>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...</p> <h2 class="spip">1) La page d'initialisation de la base de donnée</h2> <p>On externalise cette part du code pour la réemployer 2 fois.</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><?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); } ?></code></pre></div><h2 class="spip">2) La page elle-même</h2> <p>Contient les fonctions qui crée le formulaire et fait la requête ajax, plus le listage des messages déjà écrit au chargement.</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><!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></code></pre></div><h2 class="spip">3) La page qui entre les message dans la db</h2> <p>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...</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><?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é"; } } ?></code></pre></div><h2 class="spip">4) Les styles css</h2> <p>Dans le fichier style.css, quelques lignes.</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>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; }</code></pre></div> <p>Ajouter à ceci évidemment la librairie <a href='https://arts-numeriques.codedrops.net/jQuery'>http://jquery.com</a>...</p></div> Un navigateur automatique avec opendir et jquery https://arts-numeriques.codedrops.net/Plus-un-navigateur-automatique https://arts-numeriques.codedrops.net/Plus-un-navigateur-automatique 2008-11-26T00:11:35Z text/html fr Stéphane Noel Javascript (X)html Php Ajax <p>Une application simple, melant php et jquery, permettant avec un seul fichier de naviguer dans les pages html d'un dossier. Ce script fabrique un menu déroulant comprenant toutes les pages html trouvées dans le dossier où il est déposé avec php, et permet d'afficher le contenu de ces pages sans rechargement grâce à jquery.</p> - <a href="https://arts-numeriques.codedrops.net/-Exemples-67-" rel="directory">Exemples</a> / <a href="https://arts-numeriques.codedrops.net/+-Javascript-+" rel="tag">Javascript</a>, <a href="https://arts-numeriques.codedrops.net/+-X-html-+" rel="tag">(X)html</a>, <a href="https://arts-numeriques.codedrops.net/+-Php-+" rel="tag">Php</a>, <a href="https://arts-numeriques.codedrops.net/+-Ajax-+" rel="tag">Ajax</a> <div class='rss_chapo'><p>Une application simple, melant php et jquery, permettant avec un seul fichier de naviguer dans les pages html d'un dossier. Ce script fabrique un menu déroulant comprenant toutes les pages html trouvées dans le dossier où il est déposé avec php, et permet d'afficher le contenu de ces pages sans rechargement grâce à jquery.<br class='manualbr' />Ce code a été produit pour un besoin personnel, il n'est pas dégradable.</p></div> <div class='rss_texte'><p>Voici le code php/html/javascript complet. Pour le faire fonctionner, il faut placer le fichier de la librairie jquery avec comme nom "jquery.js" dans un dossier "includes". Ceci pour clairement séparer dans le dossier les pages html des autres éléments. Le script php ne sélection que les pages html, mais tout de même, c'est plus propre.</p> <p><strong>Le dossier zippé reprend tout ça.</strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><!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>Presentation technique et technologie - Stéphane Noël</title> <script type="text/javascript" src="include/jquery.js"></script> <link rel="stylesheet" type="text/css" href="include/styles.css"/> <script type="text/javascript"> $(document).ready(function(){ // quand la page est entierement chargee // on ajoute un script qui se déclenche lorsque l'on change la valeur du selecteur $("#selecteur").change(function(){ var lien=$("#selecteur option:selected").attr("value"); pompe(lien); }); // au démarrage de la page rien n'est charge, // alors on sélectionne le premier element du menu deroulant var lien=$("#selecteur option:first").attr("value"); pompe(lien); }); function pompe(lien){ // requete ajax $.ajax({ url: lien, cache: false, success: function(html){ // si c'est reussi, la page est dans la variable html // recupere le titre avec la fonction split et une expression reguliere var stitre = new RegExp('<title[^>]*>|</title>', 'gi'); var titre = html.split(stitre); document.title = titre[1]; // recupere le contenu de body avec la fonction split et une expression reguliere var regcorps=new RegExp('<body[^>]*>|</body>', 'gi'); var corps=html.split(regcorps); $("#visualisateur").html(corps[1]); // place le selecteur au bon endroit $('#selecteur option:selected').selected=false; $("#selecteur option[@value='" + lien + "']").attr("selected","selected"); } }); } function next() { // prend dans le selecteur la valeur de l'option suivant var lien=$("#selecteur option:selected").next().attr("value"); if(lien){ pompe(lien); } } function prec() { // prend dans le selecteur la valeur de l'option precedent var lien=$("#selecteur option:selected").prev().attr("value"); if(lien){ pompe(lien); } } </script> </head> <body> <div id="headselection"> <?php // read all html file in the current directory if ($dh = opendir('./')) { $files = array(); while (($file = readdir($dh)) !== false) { if (substr($file, strlen($file) - 5) == '.html') { array_push($files, $file); } } closedir($dh); } // on trie les fichiers sort($files); // on affiche le menu echo "<select name='selecteur' id='selecteur'>\n"; foreach ($files as $file) { $title = Title($file); // on liste un lien par option en filtrant le nom a afficher echo "<option value=\"$file\">$title</option>\n"; } echo "</select>\n"; // Function to get a human readable title from the filename function Title($filename) { $title = substr($filename, 0, strlen($filename) - 5); $title = str_replace('-', ' ', $title); $title = str_replace('_', ' ', $title); $title = ucwords($title); return $title; } ?> <a href="javascript:prec();">Précédent</a> - <a href="javascript:next();">Suivant</a> </div> <div id="visualisateur"></div> </body> </html></code></pre></div></div>