garder des données en mémoire

**piotrowski-s** · 30/07/2012, 08h51

Bonjour à toutes et à tous,

pour mon site j'ai réaliser un petit bandeau que j'affiche grâce à une include. Ce bandeau apparait dans le haut de ma page.

et voici son code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
 
<style type="text/css">
 
#ex5 { width: 100%; margin: 0 auto; min-height: 200px; }   #ex5 img { margin: 25px; opacity: 0.8; border: 10px solid #eee;   /*Transition*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;   /*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1))); }     #ex5 img:hover { opacity: 1;   /*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));   /*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8); }
 
			#text h2 {
        color: #fff;
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95;
        letter-spacing: 5px;
		font-size:26px;
        font:  'MisoRegular';
}
 
	</style>
	<!--[if IE]>
	<style>
		.example-date .example-year {
			filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
			right:-15px; top:5px;
		}
	</style>
	<![endif]-->
  <script type="text/javascript">
function afficher_cacher(id)
{
        if(document.getElementById(id).style.display=="none")
        {
                document.getElementById(id).style.display="block";
                document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
        }
        else
        {
                document.getElementById(id).style.display="none";
                document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
        }
        return true;
}
  </script>
</head>
 
<body >
<div id="acacher">
<div id="containerEx5" style="width:100%; text-align:center">
 
	    <div id="ex5" style="text-align:center" align="center"> 
	      <p><a href="http://localhost/NEOGETCASH/PARAMETRES"><img src="images/administrator.png" onmouseover="admin()" onmouseout="admin2()"></a>
	        <a href="http://localhost/NEOGETCASH/COMPTA"><img src="images/compta.png"  onmouseover="compta()" onmouseout="compta2()"></a>
	        <a href="http://localhost/NEOGETCASH/COMMERCIAL"><img src="images/commercial.png" onmouseover="com()" onmouseout="com2()"></a>
	        <a href="http://localhost/NEOGETCASH/GESTIONNAIRE"><img src="images/gestionnaire.png" onmouseover="ges()" onmouseout="ges2()"></a>
	        <a href="http://localhost/NEOGETCASH/GESTIONNAIRE/DOSSIERS/deconnection.php"><img src="images/246.png" onmouseover="deco()" onmouseout="ges2()"></a>
          </p>
 
    </div>
 
    </div>
       <script type="text/javascript">
	function admin()
	{
		  var txt=document.getElementById("text")
  		  txt.innerHTML="<h2><center>Acc&egrave;s Administrateur</center></h2>";
	}
		function admin2()
	{
		  var txt=document.getElementById("text")
  		  txt.innerHTML="";
	}
		function compta()
	{
		  var txt=document.getElementById("text")
  		  txt.innerHTML="<h2><center>Acc&egrave;s Comptable</center></h2>";
	}
		function compta2()
	{
		  var txt=document.getElementById("text")
  		  txt.innerHTML="";
	}
			function com()
	{
		  var txt=document.getElementById("text")
  		  txt.innerHTML="<h2><center>Acc&egrave;s Commercial</center></h2>";
	}
		function com2()
	{
		  var txt=document.getElementById("text")
  		  txt.innerHTML="";
	}
			function ges()
	{
		  var txt=document.getElementById("text")
  		  txt.innerHTML="<h2><center>Acc&egrave;s Gestionnaire</center></h2>";
	}
		function ges2()
	{
		  var txt=document.getElementById("text")
  		  txt.innerHTML="";
	}
	function deco()
	{
		  var txt=document.getElementById("text")
  		  txt.innerHTML="<h2><center>D&eacute;connexion</center></h2>";
	}
    </script>
      <div id="text" style="text-align:center; ">
      </div></div>
      <span class="bouton" id="bouton_texte" onclick="javascript:afficher_cacher('acacher');" style="text-align:right"><img src='images/Display.png' /></span>
</body>
</html>

ce code est donc affiché dans toutes mes pages grâce à la fonction include.

j'ai donc dans ce code ci une fonction qui permet de rétracter ce bandeau afin de le cacher, grâce à un display:none.

Le soucis c'est que lorsque je change de page, il réapparait. Ce que je souhaiterais, c'est garder en mémoire le choix de l'utilisateur. mais cela étant je ne sais pas combiner javascript et php, étant donné que je ne sais pas utiliser ajax.

Je pens&ais utiliser les variables globales mais je ne sais pas encore comment procéder.

Pouvez vous m'aider sur ce qui est le mieux.

Par avance merci.

**EIN-LESER** · 30/07/2012, 09h15

Si tu utilise une session suffirait de créer une variable de session (type boolean)
Sinon une globale ou, plus basique (et barbare lol) tu peux passer ce paramètre par les liens.

Au choix.

Pour les globales petites explications ici

**piotrowski-s** · 30/07/2012, 09h35

j'ai essayé comme ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 <form action="#" method="post"><p align="right"><input type="image" src='images/Display.png' /></p>
     <input type="hidden" name="show" value="on" /></form>
     <?php if(isset($_POST['show']) AND !isset($display))
	 {	 $display='none';
		 global $display;
	 }
	 if(isset($_POST['show']) AND isset($display))
	 {
		 $display='block';
		 global $display;
	 }
	 echo $display;
	 ?>

mais le soucis c'est que quand je change de page la variable n'existe plus.

**djibxav** · 30/07/2012, 09h40

Je mettrais un booléen en cookie (pour éviter une requête serveur servant juste à écrire la variable de session)

Ajoute une fonction sur l'onLoad de la page qui lit le cookie et cache ou pas la barre en fonction de sa valeur et voilà.

En prime, si tu lui mets une durée de vie assez longue, tu mémorise l'info pour les prochaines visites quand la session sera morte.

**piotrowski-s** · 30/07/2012, 09h54

j'ai essayé ainsi, mais la session est toujours la même or normalement elle doit changer en fonction de la variable précédente, je ne comprends pas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 <form action="#" method="post" style="background:none"><p align="right"><input type="image" src='images/Display.png' /></p>
     <input type="hidden" name="show" value="on" /></form>
     <?php if(isset($_POST['show']) AND !isset($_SESSION['display']))
	 {	 $_SESSION['display']='none';
 
	 }
	 if(isset($_POST['show']) AND $_SESSION['display']=='block')
	 {
		unset($_SESSION['display']);
		$_SESSION['display']='none';
	 }
	 if(isset($_POST['show']) AND $_SESSION['display']=='none')
	 {
		unset($_SESSION['display']);
		$_SESSION['display']='block';
	 }
	 echo $_SESSION['display'];
	 ?>

**tse_jc** · 30/07/2012, 10h17

Bonjour,

pour résoudre votre problème, il vous suffit dans l'attribut de style de votre div à cacher de rajouter display:none pour l'avoir en comportement par défaut. Sinon cela vous oblige à faire un

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$(document).ready(function () {
   $("#acacher").css("display","none");
});

sur chacune de vos pages.

++

**tse_jc** · 30/07/2012, 10h19

juste au cas où pour être plus clair

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="acacher">
<div id="containerEx5" style="width:100%; text-align:center;display:none">
...

**piotrowski-s** · 30/07/2012, 10h19

non mais c'est pas grave comme ce code est en include, en fait le soucis que j'ai c'est que ma variable de session ne change pas, pourtant elle devrait.

en fait je veux garder en mémoire le choix de l'utilisateur.

**piotrowski-s** · 30/07/2012, 10h22

moi j'ai fais ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="acacher" style="<?php if(isset($_SESSION['display'])) {echo 'display:".$_SESSION[\'display\']."' ;} ?>">

mais la variable de session doit pourtant changer en fonction du clic sur le formulaire or ca n'est pas le cas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 <form action="#" method="post" style="background:none"><p align="left"><input type="image" src='images/Display.png' style="background:none; border:none; box-shadow:none" /></p>
     <input type="hidden" name="show" value="on" /></form>
     <?php if(isset($_POST['show']) AND !isset($_SESSION['display']))
	 {	 $_SESSION['display']='none';
 
	 }
	 if(isset($_POST['show']) AND $_SESSION['display']=='block')
	 {
		unset($_SESSION['display']);
		$_SESSION['display']='none';
	 }
	 if(isset($_POST['show']) AND $_SESSION['display']=='none')
	 {
		unset($_SESSION['display']);
		$_SESSION['display']='block';
	 }
	 echo $_SESSION['display'];
	 ?>

**tse_jc** · 30/07/2012, 10h25

Si vous tenez vraiment à persister le choix de l'utilisateur, passez par le sessionStorage dans votre fonction javascript acacher :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function afficher_cacher(id)
{
if(document.getElementById(id).style.display=="none")
{
document.getElementById(id).style.display="block";
document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
sessionStorage.displaydiv="block";
}
else
{
document.getElementById(id).style.display="none";
document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
sessionStorage.displaydiv="none";
}
return true;
}

Ensuite faites sur chacune de vos pages

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$(document).ready({
      $("#acacher").css("display",sessionStorage.displaydiv);
});

++

**piotrowski-s** · 30/07/2012, 10h31

sur chacune des pages?

ca représente un volume de plusieurs milliers de page.

Ah non c'est pas gérable, je préfère rester avec des variables de session.

**djibxav** · 30/07/2012, 10h32

La solution de tse_jc est juste royale.

Ca m'apprendra à faire le fainéant et ne pas encore m'être penché sérieusement sur html5, je me rend compte que le local storage pourrait répondre à un problème que je me pose actuellement.

**djibxav** · 30/07/2012, 10h33

Envoyé par piotrowski-s

sur chacune des pages?

ca représente un volume de plusieurs milliers de page.

Ah non c'est pas gérable, je préfère rester avec des variables de session.

Une variable en localStorage est valable pour un domaine et non une page. Donc pas de gros volume, juste une variable pour toutes les pages.

**piotrowski-s** · 30/07/2012, 10h34

bien, c'est vrai que si c'est fainéant de mettre ce code sur plusieurs milliers de page, alors je préfère utiliser une alternative.

**piotrowski-s** · 30/07/2012, 10h35

il a dit "faites sur chacune de vos pages"

**tse_jc** · 30/07/2012, 10h40

O_o

Si cette div est présente sur chacune de plus d'un millier de pages et que la fonctionnalité est frequemment utilisée par vos utilisateurs, c'est votre solution de gérer la persistance par php qui n'est pas viable du tout. Car le seul moyen de persister une css en PHP (quelle hérésie...) c'est de le faire via une requête ajax. Donc pour vous donner une idée, 1 requête serveur x le nombre moyen de pages visité x (le nombre d'utilisateur jour/2) histoire de faire une moyenne, rien de tel pour mettre un serveur à genoux pour la simple gestion d'un simple attribut css au détriment d'une vente par exemple. C'est un problème conceptuel grave.

Histoire sans paroles.

EDIT: vous faites bien des includes en PHP non? et bien vous faites un include du fichier js de la même manière hein.

**djibxav** · 30/07/2012, 10h41

Envoyé par piotrowski-s

il a dit "faites sur chacune de vos pages"

Et vous avez dit en premier post "ce code est donc affiché dans toutes mes pages grâce à la fonction include."

Je ne vois donc pas le soucis de modifier le fichier inclus pour intégrer la gestion du localStorage.

**piotrowski-s** · 30/07/2012, 10h43

non mais je comprends plus rien il faut modifier le fichier inclu ou toutes les pages qui incluent ce fichier?

**tse_jc** · 30/07/2012, 10h46

Votre code javascript est inline c'est à dire qu'il est inclus dans les lignes de votre html, ce qui est une mauvaise pratique.

Vous placez votre code js dans un fichier et vous faites un include du fichier js dans le header de votre page html, laquelle est gérée dans un template au niveau PHP.

non?

**djibxav** · 30/07/2012, 10h50

Envoyé par tse_jc

Votre code javascript est inline c'est à dire qu'il est inclus dans les lignes de votre html, ce qui est une mauvaise pratique.

Vous placez votre code js dans un fichier et vous faites un include du fichier js dans le header de votre page html, laquelle est gérée dans un template au niveau PHP.

non?

Idem pour le css inline, un fichier .css avec gestion du cache, ça économisera du transit.

garder des données en mémoire [MySQL]

PHP & Base de données

Discussions similaires

Partager

Partager