Jour 1:

Pour débuter, j’ai dû faire une mise en contexte du travail que j’allais réaliser avec le tuteur.

De manière concrète nous avons identifié les fonctionnalités attendues du service à produire (A1.1.1)

Ce nouveau projet consiste à réaliser une page qui édite des formulaires.

Ce qui consiste à insérer sur le côté gauche de mon formulaire une barre d’outils qui va me servir à composer mon futur formulaire.

Technique de plus en plus à la mode, le Drag & Drop permet en fait à l’utilisateur de prendre un élément, et de le déplacer à sa guise quelque part sur la page.

Dans notre cas nous utiliserons uniquement l’outil Draggable,

Et Ainsi nous utiliserons également la technique resizable qui consiste à redimensionner un élément de la façon que l’on préfère.

Pour réaliser ce type de technique j’ai dû télécharger JQuery utilisateur interface (JQuery-ui.js)

jQuery UI est une collection de widgets, effets visuels et thèmes implémentés avec jQuery, des feuilles de style en cascade, et du HTML. (A5.2.4)

Voici la page que j’ai réalisé:

Nous voyons a gauche les boutons qui vont nous servir à faire apparaître des titres, des tableaux etc… dans le grand carré qui représente le formulaire que l’on va éditer.

Le code s’est divisé sous plusieurs étapes:

  • Premièrement il a fallut réaliser l’interface.
  • Après, lorsque nous appuyons sur un bouton il faut que l’outil correspondant s’affiche correctement dans le grand carré.
  • Et ensuite il faut implémenter les interactions “resizable” et “draggable” pour redimensionner et déplacer correctement les outils

Démonstration du résultat lorsque tout fonctionne correctement :

Voici mon code :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Editeur de formulaire</title>
    <link rel="stylesheet" href="editeur_formulaire.css">
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
    <script>
        function fct_titre() {
            
            var e = document.createElement("div");
            e.innerHTML = "<input class='text' type='text' name='titre' placeholder='Titre' style='width:95%; height:95%; font-size: 40px; text-transform: uppercase; text-align:center;'/>";
            var v = document.getElementById("vide");
            v.appendChild(e);
            $(e).resizable();
            $(e).draggable();
        }

        function fct_image() {
            var e = document.createElement("div");
            e.innerHTML = "<img id=image' height='70' width='70' src='wordpress-logo.png' />";
            var v = document.getElementById("vide");
            v.appendChild(e);
            $(e).resizable();
            $(e).draggable();
        }

        function fct_paragraphe() {
            var e = document.createElement("div");
            e.innerHTML = "<input type='text' name='paragraphe' placeholder='paragraphe' style='width:95%; height:95%; font-size: 30px;' />";
            var v = document.getElementById("vide");
            v.appendChild(e);
            $(e).resizable();
            $(e).draggable();
        }

        function fct_tableau() {
            var e = document.createElement("div");
            e.innerHTML = "<table border='1' style='width:95%; height:95%'> <tr><td height='20';><input type='text' placeholder='nom colonne1' /></td><td height='20';><input type='text' placeholder='nom colonne 2'/></td></tr><tr><td><input type='text' placeholder='colonne 1 , ligne 1'/></td><td><input type='text' placeholder='colonne 2 , ligne 1'/></td></tr><tr><td><input type='text' placeholder='colonne 1 , ligne 2'/></td><td><input type='text' name='titre' placeholder='colonne 2 , ligne 2'/></td></tr></table >";
            var v = document.getElementById("vide");
            v.appendChild(e);
            $(e).resizable();
            $(e).draggable();
        }
        
    </script>


</head>
<body>

        <div id="titre" class="ui-widget-content" style="width:300px;height:100px;">
                TITRE : <input type="button" id="titre2" onclick="fct1();"/>
        </div>
          

        <div id="image" class="ui-widget-content" style="width:300px;height:100px;">
                Image:  <input type="button" id="image2" src="C:\wamp64\www\bacnet\logo_incendie.jpg" onclick="fct2();" />
         </div>
         

        <div id="paragraphe" class="ui-widget-content" style="width:300px;height:100px;">
                Paragraphe :<input type="button" id="paragraphe2" font-size="30" onclick="fct3();" />
        </div>
     

        <div id="tableau" class="ui-widget-content" style="width:300px;height:100px;">
                Tableau : <input type="button" id="tableau2" font-size="30" onclick="fct4();" />
        </div>
  

          
        <div style="position:absolute; right:10px; top:5px;" >
            <table  id="vide" border="1" height="750" width="1200">
                
            </table>
        </div>


</body>
</html>
#tb{
    background-color: #bbafaf;
}

#titre {
    font-size: 40px;
}

#titre2 {
    width:80px; 
    height:80px;
}

#image {
    font-size: 40px;
}

#image2 {
    width: 80px;
    height: 80px;
}

#paragraphe{
    font-size: 40px;
}

#paragraphe2 {
    width: 80px;
    height: 80px;
}

#tableau {
    font-size: 40px;
}

#tableau2 {
    width: 80px;
    height: 80px;
}

body{
    background-color: #a1d5db;
}

Jour 2:

Pour ce deuxième jour, j’ai dû trouver un moyen de sauvegarder les formulaires que j’éditais.

Tout d’abord il est important de créer une nouvelle table dans la base de données afin d’y insérer les données. ( A4.1.3)

Ensuite au niveau du code il a fallut ajouter un bouton Sauvegarder :

<input type="button" value="sauvegarder" onclick="fct5();"/>

Et lorsque je clique dessus il faut qu’une fonction Javascript s’active :

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

Pour finir cette fonction javascript fait le lien avec mon code PHP.

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

//insertion des données
$contenu = $_POST['vide'];
$connexion->exec("INSERT INTO `editeur`(contenu) VALUES('".$contenu."')");

Et au final ma page d’édition s’est correctement inséré dans ma base de donnée

Jour 3 :

Ce jour-ci j’ai codé en HTML et PHP afin de permettre de visualiser le contenu de ma base de donnée, c’est à dire que les données que j’ai insérées juste avant vont devoir être présentées sous forme de tableau.

De plus un bouton d’édition est présent et consiste à continuer l’edition du formulaire correspondant.

Ainsi j’ai fais apparaître une ligne qui servira de suppression pour le formulaire qui nous semble mauvais ou mal fait lorsque nous cliquerons dessus ( le lien vers la base de donnée pour effectuer la suppression se fera plus tard)

le code PHP se présente comme ceci :

<!DOCTYPE html>
<html>

<head>

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

<script type="text/javascript">         
     var x = 1;
</script>

</head>

<body>
<input type='button' value='Edition'><br><br>

<?php
			
			try
		    {
		        $connexion = new PDO('mysql:host=localhost;dbname=axiome','axiome','concept');
		    }
		    catch (Exception $e)
		    { 
		        die('Erreur : '.$e->getMessage());
		    }
		    
			$rep = $connexion->query("SELECT id, contenu FROM editeur ORDER BY id");
			$x = 1;
			
		while($donnees = $rep->fetch()){
			
		   echo "Voici le formulaire n°".$x."<br>"; 
		   echo "<hr /><div><< SUPPRIMER CE FORMULAIRE >></a><p>";	
		   echo "<table border='1'>";
		   echo "<tr>";
		   echo "<td>ID</td>";
		   echo "<td>CONTENU</td>";
		   echo "</tr>";
		   echo "<tr>";
		   echo "<td>";
		   echo $donnees['id'];
		   echo "</td>";
		   echo "<td>";
		   echo $donnees['contenu'];
		   echo "</td>";
		   echo "</tr>";
		   echo "</table>";
		   echo "<br>";
		   $x++;
	}
		   
?>
</body>
</html>

  

Représentation :

Jour 4 et 5:

Aujourd’hui j’ai réalisé le fameux code qui me permettra de faire un lien entre mon fichier PHP et MySQL afin d’effectuer la suppression du formulaire souhaité lorsque nous cliquons sur “SUPPRIMER CE FORMULAIRE”

De plus afin de réaliser cette tâche j’ai décidé de séparer ce travail en deux fichiers PHP distincts :

“echo_liste.php” que j’ai présenté le jour 3 mais que j’ai amélioré

et “delete1.php” me permettant d’effectuer la suppression.

Voici le code d’ “echo_liste.php” :

<!DOCTYPE html>
<html>
<head>

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

<script type="text/javascript"> 
     var x = 1;
</script>

</head>
<body>
<input type='button' title='edition' value='Edition' onclick="'file:///C:/wamp64/www/bacnet/editeur_formulaire.html'"><br><br>

	

	

<?php
			
			try
		    {
		        $connexion = new PDO('mysql:host=localhost;dbname=axiome','axiome','concept');
		    }
		    catch (Exception $e)
		    { 
		        die('Erreur : '.$e->getMessage());
		    }
		    
			$rep = $connexion->query("SELECT id, contenu FROM editeur");
			$x = 1;
			
		while($donnees = $rep->fetch()){
			
		   echo "Voici le formulaire n°".$x."<br>"; 
		   echo "<hr /><div><a href='delete1.php?id=" . $donnees['id'] . "'><< SUPPRIMER CE FORMULAIRE >></a><p>";	
		   echo "<table border='1'>";
		   echo "<tr>";
		   echo "<td>ID</td>";
		   echo "<td>CONTENU</td>";
		   echo "</tr>";
		   echo "<tr>";
		   echo "<td>";
		   echo $donnees['id'];
		   echo "</td>";
		   echo "<td>";
		   echo $donnees['contenu'];
		   echo "</td>";
		   echo "</tr>";
		   echo "</table>";
		   echo "<br>";
		   $x++;
	}
		   
?>
</body>
</html>

		    


et de “delete1.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 FROM editeur");
		
		
		
		if (isset($_GET['id']) &amp;&amp; !empty($_GET['id'])) {
		 $id = $_GET['id'];
		 $sql = "DELETE FROM editeur WHERE id = :id";
		 $q = array('id' => $id);
		 $req = $connexion -> prepare($sql);
		 $req -> execute($q);
		 header('Location:echo_liste.php'); 
}
?>

DEMONSTRATION:

Avant :

Après suppression du formulaire 2 (ID:86) :

Et enfin j’ai établi un lien qui nous redirige vers l’éditeur de formulaire général lorsque nous cliquons sur le bouton édition.

Code :

<a href="editeur_formulaire.html"><input type='button' title='edition reussi' value='Edition'></a><br><br>