Jour 1 :

(Jour férié : Lundi de pentecôte 2019)

Jour 2 :

Tout d’abord j’ai commencé par implémenter une nouvelle fonction javascript très utile car lorsque j’affiche la liste des formulaires qui ont été édités, toutes les données n’étaient pas affichées !

Exemple :

le titre est correctement écrit ,
mais les données restent vide ..

De ce fait la fonction en question afin de régler ce problème se présente comme cela :

function qclear(dop) {
            if (!dop) { return null; }

            var item = dop.clone(true, true);
            var t = document.createElement(item.prop("tagName"));
            var result = $(t);

            result.text(item.clone().children().remove().end().text());


            item.each(function () {
                var obj = this;
                $.each(this.attributes, function () {
                    result.attr(this.name, this.value);
                    console.log("value" + this.name);
                });

              $.each(this.css, function () {
                    result.css(this.name, this.value);
                    console.log("value" + this.name);
                });  


                
            });
			result.attr("value", item.val());     
			console.log("item.val=" + item.val());
            if (result.css("position") == "absolute") {
                result.css("position", "relative");
                result.css("top", "0px");
                result.css("left", "0px");
            }


            item.children().each(function () {
                var div = qclear($(this));
                if (div != null) result.append(div);
            });

            return result;
        } 


            

        

Dû à cette implémentation de méthode il a fallut régler quelques problèmes naissants tel que le fait d’agrandir la case “contenu” lorsque j’affiche la liste des formulaires qui ont été édités car les dimensions devenaient toutes petites.

afin de régler ceci, rien de bien difficile, il suffit de s’occuper de redimensionner avec weidth et height dans le fichier “echo_liste.php” présenté en semaine 2.

		   echo "<td style='height:20px;'>CONTENU</td>";

		   echo "<td style='height:750px; width:1000px'>";

Enfin j’ai ajouté une possibilité de modification pour chaque formulaire.

Premièrement il a fallut ajouter une ligne “<<MODIFIER CE FORMULAIRE>>”,

puis ajouter un lien pour que la modification puisse ce faire lorsque nous cliquons dessus.

Ce lien nous mène alors vers l’éditeur de formulaire mais comportant les données qui étaient déjà enregistrées.

Le code pour effectuer cela est :

echo "<div><a href='editeur_formulaire_contenu.php?id=" . $donnees['id'] . "'><< MODIFIER CE FORMULAIRE >></a><p>";

nous voyons que le lien va vers la page “editeur_formulaire_contenu.php”

Comme je travaille dessus de manière constante je mettrais le code de cette page php quand elle sera terminé.

Jour 3:

Pour débuter ce troisième jour je me suis occupé du style de ma page “echo_liste.php” me permettant d’afficher tous les formulaires édités ainsi que deux autres pages PHP où je modifie et j’édite le formulaire que je souhaite.

Des modifications ont été faites au niveau du style tel que le background , un ajout d’image, et augmentation de police de caractère pour une meilleure visibilité.

Après ça dans ma page “editeur_formulaire.html” je me suis rendu compte que je ne pouvais pas insérer des tableaux lorsque j’éditais un formulaire car je voulais insérer à l’aide de .innerHTML une balise <table> dans ma fonction JavaScript ! Ce qui est totalement impossible !

après quelques recherches j’ai appris que pour remédier à cette imcompatibilité je devais utiliser les methodes du dom pour ajouter mon tableau.

Qu’est-ce que le DOM?

Le Modèle Objet de Document, ou DOM, Document Object Model est un outil permettant l’accès aux documents HTML et XML. Il permet deux choses au développeur :

  • Il fournit une représentation structurée du document ;
  • Il codifie la manière dont un script peut accéder à cette structure.

Il s’agit donc essentiellement d’un moyen de lier une page Web, par exemple, à un langage de programmation ou de script.

Enfin voici le code qui m’as permis d’insérer des tableaux lorsque j’édite un formualaire :

function fct_tableau() {

    
            var v = document.getElementById("vide");
            var body = document.getElementsByTagName("body")[0];
            var tbl = document.createElement("table");
            var tblBody = document.createElement("tbody");


            for (var i = 0; i < 3; i++) {
                var row = document.createElement("tr");

                for (var j = 0; j < 2; j++) {
                    var cell = document.createElement("td");
                    var cellText = document.createElement('input');
                    cellText.setAttribute('type', 'text');
                    cell.appendChild(cellText);
                    row.appendChild(cell);
                }
                tblBody.appendChild(row);
            }

            tbl.appendChild(tblBody);
            body.appendChild(tbl);


            v.appendChild(tbl);
            $(tbl).resizable();
            $(tbl).draggable();

            tbl.setAttribute("border", "2");
        }

Démonstration :

Nous pouvons remarquer l’outil “Image de fond couché de soleil” ! Pour cela j’ai codé une fonction JavaScript que j’ai nommé “changeBackground()” :

function changeBackground() {
            var z = new Image();
            z.src = "http://www.xul.fr/images/road.jpg";
            z.height = "750";
            z.width = "1200";
            var v = document.getElementById("vide");
            v.appendChild(z);
            $(z).resizable();
            $(z).draggable();
        } 

J’ai également crée une <div> ainsi qu’un <input> afin d’insérer le bouton sur la gauche de ma page :

 <div id="background" class="ui-widget-content" style="width:300px;height:200px;">
        Image de fond couché de soleil : <input type="button" id="background2" style="font-size:30px; float:right;" onclick="changeBackground();" />
    </div>

Demonstration :

Jour 4 :

Ce jour-ci il m’as été demandé de modifier ma page affichant l’ensemble des formulaires édités.

Tout d’abord j’ai du créer un bouton visualisation pour chaque formulaires édités.

Ce bouton me permet de visualiser le formulaire que je veux.

Par conséquent j’ai retiré les affichages inutiles ce qui me permet alors d’éviter une surcharge de ma page PHP.

Afin de visualiser le formulaire que je veux avec mon bouton , j’ai codé une page PHP “visualisation.php” .

<!DOCTYPE html>
<html>
<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>VISUALISATION</title>


</head>
<body style="background-color:#FFFFC2">
<a href="echo_liste.php">Retour ?<br></a><br><br>
<img id="logo" src="http://127.0.0.1/bacnet/MySQL.png" alt="Logo_mysql" style="width:400px; height:150px; float:right;" />
<h1 style="text-align:center">Le formulaire que vous avez séléctionné est:</h1>
 <?php
			
			try
		    {
		        $connexion = new PDO('mysql:host=localhost;dbname=axiome','axiome','concept');
		    }
		    catch (Exception $e)
		    { 
		        die('Erreur : '.$e->getMessage());
		    }
		    
			$req = $connexion->query("SELECT id, contenu, nomform FROM editeur");
			
			if (isset($_GET['id']) &amp;&amp; !empty($_GET['id'])) {
					 $id = $_GET['id'];
					 $sql = "SELECT id, contenu, nomform FROM editeur WHERE id = ".$id;
					 $q = array('id' => $id);
					 $req = $connexion -> prepare($sql);
					 $req -> execute($q);
					 
 
			
 
 			while($donnees = $req->fetch()){
 			
		   echo "<div><a href='delete1.php?id=" . $donnees['id'] . "'><< SUPPRIMER CE FORMULAIRE >></a><p>";
		   echo "<div><a href='editeur_formulaire_contenu.php?id=" . $donnees['id'] . "'><< MODIFIER CE FORMULAIRE >></a><p>";	
 		   echo "<div style='font-size: 40px;'>";
 		   echo "Le formulaire :";
 		   echo $donnees['nomform'];
 		   echo "</div>";
 		   echo "<div style='position:absolute;'>";		 	 
 		   echo "<table border='1'>";
		   echo "<tr>";
		   echo "<td>ID</td>";
		   echo "<td style='height:20px;'>CONTENU</td>";
		   echo "</tr>";
		   echo "<tr>";
		   echo "<td>";
		   echo $donnees['id'];
		   echo "</td>";
		   echo "<td style='height:750px; width:1200px'>";
		   echo $donnees['contenu'];
		   echo "</td>";
		   echo "</tr>";
		   echo "</table>";
		   echo "</div>";
		   echo "<br>";
		   

		   
		   }
		   
		   }
		   
		   
?>
</body>
</html>

De plus, maintenant que je dois que appuyer sur “visualiser” pour y voir le contenu il est assez difficile de m’y retrouver !

c’est pourquoi j’ai élaboré un système de nomage de formulaire.

De ce fait à chaque édition de formulaire, un nom de formulaire sera demandé.

Pour réaliser cette tâche j’ai du modifier ma base MySQL et ajouter une troisième colonne se nommant “nomform”

des modifications de mon fichier “recup_edit” a été réalisé : (l.15 ; l.18)

<?php
 
//connexion a la base
try
		{
			$connexion = new PDO('mysql:host=localhost;dbname=axiome','axiome','concept');
		}
		catch (Exception $e)
		{ 
			die('Erreur : '.$e->getMessage());
		}
		

//insertion des données
$nomform = $_POST['nomform'];
$contenu = $_POST['vide'];

$connexion->exec("INSERT INTO `editeur` (`nomform`, `contenu`) VALUES('".$nomform."','".$contenu."');");

?>	

Et également des modifications de ma fonction JavaScript me permettant de sauvegarder les données :

function fct_sauvegarder() {
            var donnee = document.getElementById("vide"); 
            var donneedeux = document.getElementById("nomform");
            if (donnee == undefined){
                return;
            }
            if (donneedeux == undefined) {
                return;
            }
            var data = { vide : qclear($("#vide")).html(), nomform : qclear($("#nomform")).val() };
            $.post("http://127.0.0.1/bacnet/recup_edit.php",
                data,
                function succes(data) {
                    alert(data)
                });
        }

Lorsque tout ça à été effectué voici le résultat :

Et par exemple lorsque nous cliquons sur la visualisation du formulaire test :

Jour 5 :

Pour finir la semaine j’ai finalisé la modification de formulaire car en effet même si j’étais redirigé vers la page PHP que j’avais créé (me permettant de modifier un formulaire), il était impossible de mettre à jour le formulaire après modifications.

De ce fait des ajouts de code ont été réalisés :

Tout d’abord dans ma page de modification “editeur_formulaire_contenu.php” car il était impossible de récupérer ma clé primaire “id” pour mettre a jour le formulaire alors j’ai dû rajouté ceci :

 echo "<input type='hidden' id='id' placeholder='Nommez votre formulaire' style='position: absolute; right: 10px; bottom: 5px;' value= '" . $donnees['id'] . "'; />";

et du coup la fonction JavaScript de mon bouton “mettre à jour” devient :

function fct_sauvegarder() {
            var donnee = document.getElementById("vide"); 
            var donneedeux = document.getElementById("nomform");
            var donneetrois = document.getElementById("id");
            if (donnee == undefined){
                return;
            }
            if (donneedeux == undefined) {
                return;
            }
            if (donneetrois == undefined) {
                return;
            }
            var data = { vide : qclear($("#vide")).html(), nomform : qclear($("#nomform")).val(), id : qclear($("#id")).val() };
            $.post("http://127.0.0.1/bacnet/recup_modif_edit.php",
                data,
                function succes(data) {
                    alert(data)
                });
        }

Important de noter que ce fichier est un fichier PHP donc voici le code en PHP :

 <?php
					try
				    {
				        $connexion = new PDO('mysql:host=localhost;dbname=axiome','axiome','concept');
				    }
				    catch (Exception $e)
				    { 
				        die('Erreur : '.$e->getMessage());
				    }
				    
				 	$req = $connexion->query("SELECT id, contenu, nomform FROM editeur");
				
				
					
					if (isset($_GET['id']) &amp;&amp; !empty($_GET['id'])) {
					 $id = $_GET['id'];
					 $sql = "SELECT id, contenu, nomform FROM editeur WHERE id = ".$id;
					 $q = array('id' => $id);
					 $req = $connexion -> prepare($sql);
					 $req -> execute($q);
					 
					 while($donnees = $req->fetch()){
					 
					 
					   echo "<div>";
					   echo "<input type='hidden' id='id' placeholder='Nommez votre formulaire' style='position: absolute; right: 10px; bottom: 5px;' value= '" . $donnees['id'] . "' />";    				   
        			   echo "<input type='text' id='nomform' placeholder='Nommez votre formulaire' style='position: absolute; right: 10px; top: 5px;' value= '" . $donnees['nomform'] . "' />";    				   
        			   echo "</div>";					 	
					   echo "<div id='vide' style='position:absolute; right:10px; top:100px;'>";
					   echo "<table>";
					   echo "<tr>";
					   echo "<td>";
					   echo $donnees['contenu'];
					   echo "</td>";
					   echo "</tr>";
					   echo "</table>";
					   echo "</div>";
					   echo "<br>";
			   			
					}

					}
			?>

le reste du fichier est le même que “editeur_formulaire.html” c’est à dire tout le code afin d’implémenter les outils et les fonctions Javascripts pour actionner les outils.

Et enfin j’ai logiquement réalisé une page PHP “recup_modif_edit” pour faire la mise à jour en liant PHP à MySQL :

<?php
 
//connexion a la base
try
		{
			$connexion = new PDO('mysql:host=localhost;dbname=axiome','axiome','concept');
		}
		catch (Exception $e)
		{ 
			die('Erreur : '.$e->getMessage());
		}
		
	
		

//mise à jour des données
$nomform = $_POST['nomform'];
$contenu = $_POST['vide'];
$id = $_POST['id'];

$connexion->exec("UPDATE `editeur` SET `nomform` = ('".$nomform."') , `contenu` = ('".$contenu."')  WHERE `id` = ('".$id."');");    

?>

Maintenant il est possible de modifier un formulaire ! (A1.3.1)