Jour 1 :

Avant de pouvoir valider le fonctionnement de mes formulaires, j’ai dû réussir à régler un problème d’insertion d’image. Pour cela il a fallut modifier ma fonction Javascript.

function fct_image() {
            var e = document.createElement("div");
            e.style.width = "40%";
            e.style.height = "40%";
            var z = document.createElement("img");
            z.src = prompt("Entrez l'url de l'image :");
            z.style.width = "100%";
            z.style.height = "100%";
            var v = document.getElementById("vide");
            e.appendChild(z);
            v.appendChild(e);
            $(e).resizable();
            $(e).draggable();

        }

Maintenant chaque image que j’insérerais avec le prompt sera redimensionnable et déplaçable !

j’appuie sur le bouton
j’entre l’image que je souhaite insérer (cette image doit être présente dans mes document bien évidemment)
l’image s’est inséré
J’insère autant d’images que je veux et je les déplacent et les redimensionnent de la façon dont je souhaite.

De plus un autre problème à été détécté : Une image de fond ne se supperpose pas avec un titre , un paragraphe ou même un tableau (peu importe) . j’ai du alors rajouter dans le style :

background-repeat:no-repeat;

Et enfin un autre problème été à régler : J’avais décidé d’insérer des balises <input type=”text”> pour les paragraphe sauf que de cette manière le retour à la ligne est impossible , j’ai alors transformer <input> en <textarea> :

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

Demo Complète :

ETAPE 1 : Edition de formulaire

ETAPE 2 : Liste des formulaires enregistrés

ETAPE 3 : Visualisation d’un formulaire

ETAPE 4 : Modification d’un formulaire

ETAPE 5 : Suppression d’un formulaire

Jour 2 et 3 :

J’ai modifié le fonction d’insertion d’image, cette fois-ci au lieu d’entrer le nom du fichier dans un prompt, nous devons maintenant cliquer sur un <input type=file> qui nous renvoie alors vers nos fichiers ! Ce type de démarche est beaucoup plus soigné et simple d’utilisation.

Pour cela il a fallut coder deux fonctions JavaScript :

  function fct_image(file) {
            var e = document.createElement("div");
            e.style.width = "40%";
            e.style.height = "40%";
            var z = document.createElement("img");
            z.src = file;
            z.style.width = "100%";
            z.style.height = "100%";
            var v = document.getElementById("vide");
            e.appendChild(z);
            v.appendChild(e);
            $(e).resizable();
            $(e).draggable();

        }

        $(function () {
            $("#file").change(function () {
                var file_data = $('#file').prop('files')[0];
                var form_data = new FormData();                     
                form_data.append('file', file_data);           

                $.ajax({
                    url: "upload.php",
                    type: 'post',
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: form_data,
                    success: function (response) {
                        eval(response);
                    }
                });

            });
        });

De plus lorsque nous sélectionnons une image elle est directement uploader dans un serveur !

Pour nous permettre d’effectuer cela il a fallut également créer une page PHP “upload.php” :

<?php
		if (isset($_FILES['file'])){
			//pre_r($_FILES);
			
			$phpFileUploadErrors = array(
				0 => 'There is no error, the file uploaded with success',
				1 => 'The uploaded file exceeds the upload_max_filesize directive in php.ini',
				2 => 'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form',
				3 => 'The uploaded file was only partially uploaded',
				4 => 'No file was uploaded',
				5 => 'Missing a tempory folder',
				6 => 'Failed to write file to disk',
				7 => 'A PHP extension stopped the file uploaded',
			);	
			
						
			$ext_error = false;
			//a list of extensions that we allo to be uploaded
			$extensions = array('jpg','JPG','jpeg','JPEG','gif','GIF','png','PNG');
			$file_ext = explode('.',$_FILES['file']['name']);
			$file_ext = end($file_ext);
			
			if (!in_array($file_ext, $extensions)){
				$ext_error = true;
			}
			
			//if the error of the upload is not equal to 0
			if ($_FILES['file']['error']){
				
			}
			elseif ($ext_error){
						
			}
			else{
				move_uploaded_file($_FILES['file']['tmp_name'], 'images/'.
				$_FILES['file']['name']);
				echo "fct_image('".'images/'.$_FILES['file']['name']."');";
							}			
		}
				
		
			
	?>

A noter qu’un disfonctionnement au niveau du code m’empêchais parfois d’effectuer une création ou une modification de formulaire.

Premièrement j’ai mis en place et exploiter un environnement de test afin de trouver trouver la source du problème (A4.1.6) .

Sans succès, j’ai élaboré un jeu d’essai pour reproduire le dysfonctionnement(A.4.2.1)

Et j’en ai conclu que c’était lorsque j’insérais une apostrophe que le disfonctionnement se produisait.

Afin de régler ce soucis une fonction JavaScript a dû être effectué :

function apostrophe(e) {
            e.value = e.value.replace(/'/g, '’');
        }

et dans mes fonctions JavaScript me permettant d’insérer un titre ou bien un paragraphe :

onkeyup='apostrophe(this)'

Jour 4 et 5:

Maintenant que tout fonctionne correctement , mon travail est d’améliorer le style de l’ensemble des pages présentés ci-dessus !

L’amélioration du style dont je vais procéder correspond au attente de l’entreprise car plusieurs IHM ont été réalisés avec le tuteur afin se mettre en accord sur plusieurs points : (A4.1.2)

Donc beaucoup de modifications ont été effectués dans la structure du code et le style.

Pour les couleurs :

bouton : #808080 et #FFFFFF; fond : #303030 texte : #FFFFFF

J’ai donc utiliser le logiciel GIMP pour recolorer les images dans les boutons .

Démonstration :

ETAPE 1 : Edition de formulaire

ETAPE 2 : Liste des formulaires enregistrés

(A1.2.4)

ETAPE 3 : Visualisation d’un formulaire

ETAPE 4 : Modification d’un formulaire

ETAPE 5 : Suppression d’un formulaire