Site Web Giea Prévoyance

 

 Site web de la société GIEA Prévoyance.



MenuPrincipal

Page d'accueil su site.


Contexte de l'application

Activités concernées

Participation à un projet d’évolution d’un SI (solution applicative et d’infrastructure portant prioritairement sur le domaine de spécialité du BTS SIO).

Prise en charge d’incidents et de demandes d'assistance liés au domaine de spécialité du candidat.

Productions relatives à la mise en place d’un dispositif de veille technologique et à l’étude d’une technologie, d’un composant, d’un outil ou d’une méthode




PROCESSUS METIER liés à cette application et au BTS SIO :

   A1.1.1 : Analyse du cahier des charges d’un service à produire :
      Etude du cahier des charges, des propositions de créations et des modifications à apporter sur l’application web.

   A1.3.1 : Test d’intégration et d'acceptation d'un service :
      Test réalisés sur serveur local et serveur distant.

   A1.3.4 : Déploiement d’un service :
      Déploiement en réelles conditions d’utilisation.

   A2.1.1 : Accompagnement des utilisateurs dans la prise en main d’un service :
      Formation des utilisateurs pour la mise à jour du site.

   A2.3.2 : Proposition d’amélioration d’un service :
      Formulaire pour contacter la société et back office pour la mise à jour du site.

   A3.2.2 : Remplacement ou mise à jour d’éléments défectueux ou obsolètes :
      Développement d'un mini cms pour mettre à jour le site. Site dynamique

   A4.1.1 : Proposition d’une solution applicative :
      Proposition d’une solution web modulable.

   A4.1.2 : Conception ou adaptation de l’interface utilisateur d’une solution applicative :
      Conception du back office administrateur.

   A4.1.3 : Conception ou adaptation d’une base de données :
      Création d’une base de données sur le serveur distant.

Travaux effectués



Extrait développement


(Développement sur l’éditeur de texte avancé Sublime)

 

Page d’accueil (extrait) :


pageAccueil

Fonction du Carousel en javascript :


                
                    
/************************************************ * jquery.immersive-slider.js * * * * fonctions pour le carousel * * * * Auteur: ............... Cavron Jérémy * * Date de création: ..... 09/05/2014 * * Date de modification: . 21/05/2014 * * **********************************************/ !function($){ var stopBool = true; var defaults = { animation: "bounce", slideSelector: ".slide", container: ".main", cssBlur: false, pagination: true, loop: true, autoStart: 15000 }; /*------------------------------------------------*/ /* envoie pour le awesome swipe événement */ /*------------------------------------------------*/ $.fn.swipeEvents = function() { return this.each(function() { var startX, startY, $this = $(this); $this.bind('touchstart', touchstart); function touchstart(event) { var touches = event.originalEvent.touches; if (touches && touches.length) { startX = touches[0].pageX; startY = touches[0].pageY; $this.bind('touchmove', touchmove); } event.preventDefault(); } function touchmove(event) { var touches = event.originalEvent.touches; if (touches && touches.length) { var deltaX = startX - touches[0].pageX; var deltaY = startY - touches[0].pageY; if (deltaX >= 50) { $this.trigger("swipeLeft"); } if (deltaX <= -50) { $this.trigger("swipeRight"); } if (deltaY >= 50) { $this.trigger("swipeUp"); } if (deltaY <= -50) { $this.trigger("swipeDown"); } if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) { $this.unbind('touchmove', touchmove); } } event.preventDefault(); } }); }; $.fn.transformSlider = function(settings, pos) { var el = $(this) switch(settings.animation) { case 'slide': el.addClass("ease").css({ "-webkit-transform": "translate3d(" + pos + "%, 0, 0)", "-moz-transform": "translate3d(" + pos + "%, 0, 0)", "-ms-transform": "translate3d(" + pos + "%, 0, 0)", "transform": "translate3d(" + pos + "%, 0, 0)" }); break; case 'slideUp': el.addClass("ease").css({ "-webkit-transform": "translate3d(0, " + pos + "%, 0)", "-moz-transform": "translate3d(0, " + pos + "%, 0)", "-ms-transform": "translate3d(0, " + pos + "%, 0)", "transform": "translate3d(0, " + pos + "%, 0)" }); break; case 'bounce': el.addClass("bounce").css({ "-webkit-transform": "translate3d(" + pos + "%, 0, 0)", "-moz-transform": "translate3d(" + pos + "%, 0, 0)", "-ms-transform": "translate3d(" + pos + "%, 0, 0)", "transform": "translate3d(" + pos + "%, 0, 0)" }); break; case 'bounceUp': el.addClass("bounce").css({ "-webkit-transform": "translate3d(0, " + pos + "%, 0)", "-moz-transform": "translate3d(0, " + pos + "%, 0)", "-ms-transform": "translate3d(0, " + pos + "%, 0)", "transform": "translate3d(0, " + pos + "%, 0)" }); break; case 'fade': el.addClass("no-animation").fadeOut("slow", function() { el.css({ "-webkit-transform": "translate3d(" + pos + "%, 0, 0)", "-moz-transform": "translate3d(" + pos + "%, 0, 0)", "-ms-transform": "translate3d(" + pos + "%, 0, 0)", "transform": "translate3d(" + pos + "%, 0, 0)" }).fadeIn("slow"); }); break; } } .....

Script pour le menu "News" en javascript :


                
                    
/************************************************ * ScriptMenu.js * * * * Permet de bloquer le sous menu * * arrivé en bas de page et * * de le garder é un certain niveau * * à gauche de la div principale * * * * Auteur: ............... M. Cavron Jérémy * * Date de création: ..... 02/06/2014 * * Date de modification: . 04/06/2014 * * **********************************************/ /***************************************************************************** * calcul la hauteur du div en mouvement * ***************************************************************************/ function evenHauteur (){ var cadreBlanc = document.getElementById("divBlanc"); var placeMen = document.getElementById("divRoulEnsembA"); var maDiv = document.getElementById("divCentre"); var cadreMen = document.getElementById("divRoulEnsemb"); var cadreSouMe = document.getElementById("divRoul"); var cadreTt = document.getElementById("divRoulTitre"); var cadreMenA = document.getElementById("divRoulEnsembA"); var cadreSouMeA = document.getElementById("divRoulA"); var cadreTtA = document.getElementById("divRoulTitreA"); var rect = maDiv.getBoundingClientRect(); var tailleBlanc = cadreBlanc.offsetHeight - 450; if (rect.top < -tailleBlanc){ placeMen.style.marginTop = (cadreBlanc.offsetHeight - 180) + "px"; cadreMen.style.visibility = "hidden"; cadreSouMe.style.visibility = "hidden"; cadreTt.style.visibility = "hidden"; cadreMenA.style.visibility = "visible"; cadreSouMeA.style.visibility = "visible"; cadreTtA.style.visibility = "visible"; }else{ cadreMenA.style.visibility = "hidden"; cadreSouMeA.style.visibility = "hidden"; cadreTtA.style.visibility = "hidden"; cadreMen.style.visibility = "visible"; cadreSouMe.style.visibility = "visible"; cadreTt.style.visibility = "visible"; } } /***************************************************************************** * Chargement de la page principale * ***************************************************************************/ window.onload = function() { var bordCl = document.getElementById("divPrincipal"); var cadreMen = document.getElementById("divRoulEnsemb"); var cadreSouMe = document.getElementById("divRoul"); var cadreTt = document.getElementById("divRoulTitre"); cadreMen.style.marginLeft = (bordCl.offsetLeft - 140) + "px"; cadreTt.style.marginLeft = cadreMen.style.marginLeft; //Activation du scroll de la souris //Initialisation du code if (window.addEventListener) { //Mozilla window.addEventListener('DOMMouseScroll', evenHauteur, false); //IE et Opera window.onmousewheel = document.onmousewheel = evenHauteur; } } ....

 

Page de présentation de la société :


pageArbre

Fonction du défilement de l'arbre :


                
                    
/************************************************ * ScriptArbre.js * * * * Permet de redimensionner * * Les calques et de les mettre soit * * à gauche en rétréci ou à droite en * * agrandit. Affiche avec soit: * * - le clic de la souris * * - la roulette de la souris * * - le survol du curseur * * * * Auteur: ............... M. Cavron Jérémy * * Date de création: ..... 19/05/2014 * * Date de modification: . 21/05/2014 * * **********************************************/ /***************************************************************************** * Affichage des vignettes * ***************************************************************************/ function affiche0() { //cache les autres calques document.getElementById('divCadre2').style.visibility = 'hidden'; document.getElementById('divCadre3').style.visibility = 'hidden'; document.getElementById('divClBarreHo4').style.visibility = 'hidden'; document.getElementById('divClBarreHo5D').style.visibility = 'hidden'; document.getElementById('divCadre4').style.visibility = 'hidden'; document.getElementById('divCadre5').style.visibility = 'hidden'; document.getElementById('divCadre6').style.visibility = 'hidden'; document.getElementById('divClBarreHo7D').style.visibility = 'hidden'; document.getElementById('divClBarreHo8D').style.visibility = 'hidden'; document.getElementById('divClBarreHo9D').style.visibility = 'hidden'; //Rend visible ce calque document.getElementById('divCadre1').style.visibility = 'visible'; document.getElementById('divClBarreHo').style.visibility = 'visible'; } function affiche1() { //cache les autres calques document.getElementById('divCadre1').style.visibility = 'hidden'; document.getElementById('divCadre3').style.visibility = 'hidden'; document.getElementById('divClBarreHo').style.visibility = 'hidden'; document.getElementById('divClBarreHo5D').style.visibility = 'hidden'; document.getElementById('divCadre4').style.visibility = 'hidden'; document.getElementById('divCadre5').style.visibility = 'hidden'; document.getElementById('divCadre6').style.visibility = 'hidden'; document.getElementById('divClBarreHo7D').style.visibility = 'hidden'; document.getElementById('divClBarreHo8D').style.visibility = 'hidden'; document.getElementById('divClBarreHo9D').style.visibility = 'hidden'; //Rend visible ce calque document.getElementById('divClBarreHo4').style.visibility = 'visible'; document.getElementById('divCadre2').style.visibility = 'visible'; } .... .... function evenHauteur (){ //Variable qui récupère l'emplacement du div dans le navigateur après mouvement var maDiv = document.getElementById("divCentre"); var rect = maDiv.getBoundingClientRect(); if (rect.top <= 10){ document.getElementById('divClCadreG1').onclick(); } if (rect.top <= -100){ document.getElementById('divClCadreG2').onclick(); } .... .... //Activation du scroll de la souris //Initialisation du code if (window.addEventListener) { //Mozilla window.addEventListener('DOMMouseScroll', evenHauteur, false); //IE et Opera window.onmousewheel = document.onmousewheel = evenHauteur; } ....

 

Présentation des produits :


pageProd

Importation des produits :


                
                    
<?php include_once ("phare/ident.php") ; mysql_query("SET NAMES utf8"); //--- création du curseur --- $curseur = mysql_query("SELECT * FROM article WHERE categorie = 'produit' ORDER BY datepub DESC"); //--- Création du tableau et remplissage --- echo '<table id="tableau" style="width:700px; height:700px;margin-top:30px;margin-left:140px; background:#FFFFFF;border-top:1px solid #BBBBBB; border-right:1px solid #BBBBBB; border-left:1px solid #BBBBBB; border-bottom:1px solid #BBBBBB; border-radius: 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px 20px 20px 20px;" >'; //variable pour l'affichage d'un seul titre si les titres ont le même nom $titre = null; //Boucle pour remplir le tableau avec toutes les données de la base while($uneLigne = mysql_fetch_assoc($curseur)){ //si le libellé est différent de la variable $libelle, alors la variable sera égale au libellé en cours if ($uneLigne["titre"] != $titre){ $titre = $uneLigne["titre"]; //sinon la variable sera null }else{ $titre = null; } echo '<tr > <td><font size="6"><strong><a href="'.$uneLigne["lien"].'">'.$titre.'</a></strong></font></td> </tr> <tr> <td><img src="'.$uneLigne['image'].'" alt="image" style="left:530px; background-repeat: no-repeat; position:absolute;"> <font size="4" color="black">'.$uneLigne["contenu"].'</font></td> </tr>'; //La variable $libelle est égale au libellé en cours $titre = $uneLigne["titre"]; } //fermeture de la balise table echo '</table>'; mysql_close(); ?>

 

Demande de devis :


pageDevis1
pageDevis2

Formulaire pour le devis :


                
                    
/************************************************ * formulaire.js * * * * fonctions pour le * * formulaire * * * * Auteur: ............... Cavron Jérémy * * Date de création: ..... 22/05/2014 * * Date de modification: . 22/05/2014 * * **********************************************/ //Déclaration de variables var civil = ''; var leNom =''; /***************************************************************************** * Chargement de la page principale * ***************************************************************************/ $(document).ready( function() { $('#formulaire-form').validate({ rules: { nom: { minlength: 2, required: true }, prenom: { minlength: 2, required: true }, email: { required: true, email: true }, phone: { minlength: 10, required: true, number: true }, sujet: { minlength: 2, required: true }, message: { minlength: 10, required: true } }, highlight: function(element) { $(element).closest('.control-group').removeClass('success').addClass('error'); }, success: function(element) { element.text('OK!').addClass('valid').closest('.control-group').removeClass('error').addClass('success'); }, submitHandler: function(form) { $.post('content/process.php', $("#formulaire-form").serialize(), function(data) { $("#formulaire-form").hide(); $('#results').html(data); }); } }); } ); /***************************************************************************** * Choix du bouton radio * ***************************************************************************/ function verifEtCheck(nb){ if (nb == 1){ document.getElementById("civilM").checked = false; } if (nb == 2){ document.getElementById("civilMm").checked = false; } };

Confirmation des informations pour le devis :


                
                    
<?php session_start(); $_SESSION['leNom'] = $_POST['nom']; $_SESSION['lePrenom'] = $_POST['prenom']; $_SESSION['leMail'] = $_POST['email']; $_SESSION['leNum'] = $_POST['phone']; $_SESSION['leSujet'] = $_POST['sujet']; $_SESSION['leMessage'] = $_POST['message']; $civil = 'Monsieur'; if(isset($_POST['civilMm']) != ''){ $civil = 'Madame'; }; $_SESSION['laCivil'] = $civil; echo '<font size=6>Les informations saisies sont-elles correctes ?</font><br>'; //Confirmation envoie mail print_r ("<div class='textsaisi' id='divTextsaisi' style='width:400px;font-size:16px;'><br> <font color='#000'>Vous êtes : <font color='#FFF'><strong>".$civil." ".$_POST['nom']." ".$_POST['prenom']."</strong>.<br> <br><font color='#000'> Votre adresse mail est : <font color='#FFF'><strong>".$_POST['email']."</strong>.<br><br> <font color='#000'>Votre numéro de téléphone est le : <font color='#FFF'><strong>".$_POST['phone']."</strong><br><br> <font color='#000'>Sujet : <font color='#FFF'><strong>".$_POST['sujet']."</strong><br><br> <font color='#000'>Votre message est : <br><font color='#FFF'><strong>".$_POST['message']."</strong></div>"); //Affichage des boutons de retour et validation print_r(' <div class="btnRetour" id="divBtnRetour" style="margin-top:50px;margin-left:0px;"> <input type="button" value="Corriger les informations" name="retour" style="width:260px;font-size:20px;cursor:pointer" OnClick="javascript:document.location.reload()"/> </div>'); print_r(' <div id="divBtnVal" class="btnVal" style="margin-top:-30px;margin-left:350px;"> <input type="submit" value="Envoyer votre demande de devis" name="valide" style="width:330px;cursor:pointer;font-size:20px" OnClick="mail()"/> </div>'); ?>

L'onglet contact :


La société souhaitait un onglet contact simple, sans formulaire. Juste l'adresse, nom et numéros de téléphones affichés sur une page.

Back Office :


Mini CMS personnalisé. On peut créer de nouvelles catégories, de nouveaux articles et les modifier. On a accès également à la modification de la liste des nouveautés qui défile en page d'accueil.
pageBack

Production


Le site web n'est plus disponible sur internet.


Retour d'expériences

Je n'étais pas très familier à la programmation en langage php, à la technique Ajax et à l'utilisation des calques de styles. Ce projet m'a beaucoup appris. Il me reste encore des difficultés à surmonter. Il reste encore beaucoup d'amélioration au niveau sécurité, options, connexion, etc... à développer.