liste d'une table avec lecture les champs via On/off

Eléphanteau du PHP | 28 Messages

09 janv. 2007, 09:46

Bonjour,
Je me suis dis que peut être cela pouvait se partager.
C'est simple, mais j'aime bien le systeme d'un boutons On/Off.

Donc, un table avec un id, un chapo, un texte, et le nom d'une photo.

y a un exemple sur : http://scan-line.net/faq.php?chapo=0

<?
$sql = "SELECT * FROM nom de la table"; 
$req = mysql_query($sql) or die(mysql_error()); 
?>
<table width="420" border="0" valign="center" cellspacing="0" cellpadding="0">
 	<tr>
		<h3>Titre de la page, par exemple</h3>
	</tr>
<? 
while ( $data = mysql_fetch_array($req) )
	{
?>
	<tr>
 		<td width="40" align="left" valign="top">
			<p>
<?
			if ( $_GET['chapo'] == '1' AND $_GET['lect'] == $data['id'])
				{
?>
				<a href='faq.php?id=<?=$data['id']?>&chapo=0'>
					<img src='img/top/plus_on.gif' border='0'>
				</a>
				</td>
<?			
				}
				else
				{
?>
				<a href='faq.php?id=<?=$data['id']?>&chapo=1&lect=<?=$data['id']?>'>
					<img src='img/top/plus.gif' border='0'>
				</a>
				</td>
<?
				}
?>
  		<td width="520" align="left" valign="top">
			<font color="#000000" face="Verdana" size="2">
				<?=$data['titre']?>
			</font>
<? 			if ( $_GET['chapo'] == '1' AND $_GET['lect'] == $data['id'])
				{
?>
				<hr>
					<p><?=$data['text_En']?></p>
<?
 				if ($data['img_2'] == '')
 					{
					}
					else
					{
?>
 					<p><?=$data['text_2_En']?></p>
					<img src='img/screen_copies/<?=$data['img_2']?>' width="350" border='1'>
<?
					}
?>


 			<hr>
<? 			$_GET['chapo'] = '0' ;
 			}
?>
 		</td>
 	
<?
	}
?>
</tr>
</table>
mais comme je le disais, je ne suis pas developpeur, j'essai juste de comprendre "comment ca marche", un peu...

y doit exister d'autres facons de faire un system on/off sur une liste complete, alors si vous en avez, "you are welcome". ;-)

:oops: cordialement
Il n'y a pas de mauvaises saisons, seulement de mauvais vetements

ViPHP
ViPHP | 3607 Messages

09 janv. 2007, 10:13

bonjour,
je pense qu'un système en javascript, à coup de display, éviterai de surcharger le serveur, et on aurai une plus grande fluidité dans la navigation...
après si la liste devient très longue et avec beaucoup de contenu, la page peut devenir longue à charger...
Une seconde méthode, pour le cas ou la liste est trop longue, le contenu trop important, c'est de se tourner vers ajax. mais là, on épargne plus le serveur, on ajoute juste un peu de confort aux visiteurs ;-)

Eléphanteau du PHP | 28 Messages

09 janv. 2007, 11:26

oui,
mais ou donc puis je trouver des tutoriaux pour apprendre a faire mieux en javascript ?

effectivement, on repasse la page au complet, et ca fais une requete, et une requete, ...
mais j'ai trouvé que ca. :cry:
Il n'y a pas de mauvaises saisons, seulement de mauvais vetements

ViPHP
ViPHP | 3607 Messages

09 janv. 2007, 11:58

En partant de la structure de ton site d'exemple, on pourrait faire quelquechose comme ça:
fonction javascript:
function onoff(img){
    if(img.src=='img/top/plus.gif'){
        img.src='img/top/moins.gif';
        document.getElementById('1').style.display="block";
    } else {
        img.src='img/top/plus.gif';
        document.getElementById('1').style.display="none";
    }
}
code html
<tr>
    <td width="40" height="10" bgcolor="white" align="center" valign="top">
        <img src='img/top/plus.gif' border='0' onClick="onoff(this);"></br>
    </td>
    <td id="1" width="451" bgcolor="white" align="left" valign="top" style="display: none;">
        <font face='Verdana' Color='black' size="2">
            <strong>
                    </br>Concevez vous même votre poêle à bois…</br>
            </strong>
        </font>
    </td>
</tr>
après j'ai pas testé, et c'est surement très "améliorable", par exemple, au lieu de mettre un id à chaque td, et de faire un getElementById... on pourrait (mais je ne suis pas très fort la dedans :? ) se balader dans l'arbre du document, pour atteindre le td voisin, mais pour celà, attendon l'avis des plus grands :wink:

ViPHP
AB
ViPHP | 5818 Messages

09 janv. 2007, 17:26

Bonjour,

undesignable
d'un autre côté l'avantage de ton système est qu'il peut se passer de javascript...Et tant que ta table n'est pas très longue et que tu n'as pas plusieurs centaines de connexions simultanées, ça peut suffire.

Sur ton script original, j'apporterais une petite modif pour que quand on clique sur une ligne en bas de page, la page se recharge et ailles vers le lien que l'on vient de cliquer plutôt que de rester en haut de page. Tu peux utiliser pour cela une ancre.

original:

Code : Tout sélectionner

<a href='faq.php?id=<?=$data['id'] ?>&chapo=0'>
avec une ancre

Code : Tout sélectionner

<?php $ancre = 'ancre'.$data['id'];?> <a id="<?php echo $ancre ?>" href="faq.php?id=<?php echo $data['id'].'&chapo=0#'.$ancre ?>">
J'ai pas testé et il faudra peut-être ajuster en fonction de ton code que je n'ai pas détaillé mais c'est le principe. (J'ai remplacé & par & pour une validation strict xhtml).

Voilà pour une première amélioration. Cela dit, s'il tu ne veux pas répéter ta requête à chaque clic, cette solution n'a pas d'intérêt et il te faudra te tourner vers d'autres solutions comme le suggère jojolapine
Modifié en dernier par AB le 10 janv. 2007, 02:29, modifié 1 fois.

ViPHP
ViPHP | 3607 Messages

09 janv. 2007, 17:39

je pense qu'on peut également faire un combiné des deux, en faisant en javascript, et si pas de javascript, en php, comme ceci:
<a onClick="onoff(this);return false;"  href='faq.php?id=<?=$data['id']?>&chapo=0'>
                    <img src='img/top/plus_on.gif' border='0'>
                </a> 
en gros si javascript est activé, alors la fonction onoff fait le boulot, sinon, on envoi la requête au serveur...

Eléphanteau du PHP | 28 Messages

09 janv. 2007, 17:58

Bonsoir,

J'ai trouvé un peu de doc sur :
http://www.pageresource.com/dhtml/ryan/part4-1.html
mais, c'est un peu obscur.

Biensur, j'ai regardé le code, mais ca ne fonctionne pas.

Code : Tout sélectionner

<?php while ( $data = mysql_fetch_array($req) ) { ?> <SCRIPT LANGUAGE="JavaScript"> function onoff(img) { if(img.src=='img/top/plus.gif') { img.src='img/top/moins.gif'; document.getElementById('<?=$data['id']?>').style.display="block"; } else { img.src='img/top/plus.gif'; document.getElementById('<?=$data['id']?>').style.display="none"; } } </SCRIPT> <tr> <td width="40" height="10" bgcolor="white" align="center" valign="top"> <img src='img/top/plus.gif' border='0' onClick="onoff();"><?=$data['titre']?></br> </td> <td id="<?=$data['id']?>" width="451" bgcolor="white" align="left" valign="top" style="display: none;"> <font face='Verdana' Color='black' size="2"> <strong> </br><?=$data['text_En']?></br> </strong> </font> </td> </tr> <? } ?>
Mais bon, je regarde un peu plus loin le DOM,

Tu n'aurai pas quelque chose en Fr, C'est quand même plus simple...

PS : Il manque pas un truc pour dire que tu >>click<< sur le bouton ?
Faut il mettre la fonction dans la lecture de la table (vu les "id" diff) ?

@+
Il n'y a pas de mauvaises saisons, seulement de mauvais vetements

Eléphanteau du PHP | 28 Messages

09 janv. 2007, 18:02

oh la
vu vos reponses, je dois pas comprendre grand chose au Jv.
:oops: suis very sorry...

l'ancre, vraiment bien... je regarde de suite

Je vais regarder un peu plus le code Javascript aussi
;-) histoire de ne pas mourir idiot...

merci
Il n'y a pas de mauvaises saisons, seulement de mauvais vetements

Eléphanteau du PHP | 28 Messages

09 janv. 2007, 18:22

par contre,
l'ancre, c'est curieux, mais ca ne colle pas.

Cela supprime le bouton pour refermer le texte.

Mais par contre,
Comment cela fonctionne t il ? svp
en quelques lignes.

merci
Il n'y a pas de mauvaises saisons, seulement de mauvais vetements

ViPHP
AB
ViPHP | 5818 Messages

09 janv. 2007, 18:54

undesignable,

J'ai été voir ton code pour savoir où insérer le code de l'ancre au bon endroit. :shock: Y'a pas mal de fautes ex: on écrit pas </br> mais <br> en html ou <br /> en xhtml strict. Plus grave, tu as des balises <tr> qui ne sont pas fermées.
Pour en avoir le coeur net j'ai passé ta page au validateur après avoir cliqué sur un lien : 249 fautes. ça fait beaucoup même si de nombreuses sont en cascade.
:idea: Avant de perfectionner ton code il serait judicieux de corriger celui déjà écrit sinon tu auras des pb à un moment ou a un autre avec le code que tu rajouteras. C'est déjà presque un miracle que cela fonctionne bien sous ie et sous firefox.
Un conseil d'ami :wink:

Eléphanteau du PHP | 28 Messages

09 janv. 2007, 19:15

ok, merci. :oops:
Il n'y a pas de mauvaises saisons, seulement de mauvais vetements

Eléphanteau du PHP | 28 Messages

09 janv. 2007, 20:02

AB,

Peus tu me donner le nom du soft qui epeluche les pages ?
Il les liste peut être, car j'avoue... 250, c'est beaucoup
oaui, ils sont pas toujours tous refermer...
mais maintenant, j'ai notepadd+++, qui est bq plus clair, hehe

cordialement
Il n'y a pas de mauvaises saisons, seulement de mauvais vetements

Eléphanteau du PHP | 28 Messages

09 janv. 2007, 20:20

ai pu faire un chercher/remplacer sur toutes les pages en meme temps...

mais pour les balises<tr>, avec les cascades, je me perd souvent...
peut être que ton soft pointe les "endrois" ou ?
y en a tellement :cry:
Il n'y a pas de mauvaises saisons, seulement de mauvais vetements

ViPHP
ViPHP | 3607 Messages

09 janv. 2007, 20:57

le soft est en fait un plugin pour firefox: c'est la webdeveloper toolbar
où tu as pleins d'outils permettant de mieu s'y retrouver ;-)

ViPHP
AB
ViPHP | 5818 Messages

09 janv. 2007, 20:59

Voilà l'adresse du validateur

http://validator.w3.org/detailed.html

Tu rentres ton adresses, tu cliques sur Show Source puis tu valides

Tu obtiendras tes erreurs et des commentaires.

Pense aussi à rentrer ton adresse après avoir cliquer sur un de tes liens, ça te permettras de valider le code qui s'affiche dans différentes conditions.

Avec ça tu partiras sur de bonnes bases. :wink:

Oups! je viens de télécharger le soft indiqué par jojolapine, je connaissais même pas :oops: Tu retrouveras le même validateur indiqué ci-dessus dans tools - html - de la barre d'outil.