Sujet Précédent Sujet Suivant

Faire défiler des pages php dans la même page avec un clic

Fermé
unker - 15 mai 2013 à 18:06
 unker - 19 mai 2013 à 23:21
Bonjour,

Alors voila je suis plutôt débutant dans la programmation web et je cherche à faire des choses compliquées...! Mais j'aime me creuser la tête et faire des choses sympa!
Mais là j'avoue que je bloque un peu...

En réalité cela parait simple et l'est surement mais je n'ai pas trop d'idées...

Je voudrais faire une page où en cliquant sur une flèche à gauche ou à droite, le contenu du milieu change et laisse apparaitre une page différente sans pour autant recharger tout la page entière ( celle qui contient le contenu du milieu).
Il me semble nécessaire de faire intervenir du php et du Javascript. Enfin j'en suis même certain, il faut un truc du genre, onclick on remplace le texte d'insertion php par un autre. Mais comment faire? De plus, ce ne serait pas include"1.php" qui se changerait en include"2.php" simplement mais aussi en include"3.php", include"4.php"... et que l'inverse soit possible également.

Si vous avez des pistes je suis preneur,

Merci à tous!


A voir également:

30 réponses

  • 1
  • 2
Réponse 1 / 30
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
15 mai 2013 à 18:41
oui la solution sans recharger la page c'est AJAX
plus précisément jQuery Ajax

Sur un événement (un click etc..) ça appelle en arrière plan un script php sur le serveur, en lui passant un ou plusieurs paramètres, , et la réponse est écrite dans un div de ta page
4
Réponse 2 / 30
unker
15 mai 2013 à 18:48
Ok je vais regarder ça alors!

Si tu as des précisions je suis preneur!

merci!
1
Réponse 3 / 30
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
15 mai 2013 à 20:29
vas voir:

https://openclassrooms.com/fr/courses
1
Réponse 4 / 30
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
16 mai 2013 à 14:33
voila un chti exemple dont tu peux t'inspirer
télécharges jquery-1.3.2.min.js et mets le dans un rep jquery 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<script type="text/javascript" src="jquery/jquery-1.3.2.min.js ">></script>
    <script type="text/javascript">	
		//au chargement de la page on initialise la fonction jquery ajax
		$(document).ready(function() {
			//quand click sur fleche moins
			$("#fleche_moins").click(function(e) {
				//on lit le num de la pgae qui est chargée
				num=parseFloat($('#page_en_cours').val());
				//on diminue de 1
				num_a_afficher = num -1; 
				if(num_a_afficher >= 1){
					//si pas en dehors de limite basse, on appelle le script php en luii passant en argument numPage=numéro de la page à afficher
					$.post("scriptPHP_reponse_a_ajax.php", {numPage: num_a_afficher},
					function(data) {
						//ce qu'onbb fait qd on recoit la réponse du script php
						//on ecrit dans le div "affichage"
						$('#affichage').html(data);
						//on modifie le numéro de la page en cours dans l'input caché
						$('#page_en_cours').val(num_a_afficher);
					});
					return false;			
					
				}else{
					return false;
				}
			});
			//quand click sur fleche plus
			//idem mais en incrémentant de 1
			$("#fleche_plus").click(function(e) {			
				num=parseFloat($('#page_en_cours').val());
				num_a_afficher = num +1;
				num_maxi=parseFloat($('#nb_total_pages').val());
			
				if(num_a_afficher <= num_maxi){	
					$.post("scriptPHP_reponse_a_ajax.php", {numPage: num_a_afficher},
					function(data) {					
						$('#affichage').html(data);
						$('#page_en_cours').val(num_a_afficher);
					});
					return false;
			
					
				}else{
					return false;
				}
			});
		});
    </script>
	<style type="text/css">
		#zone_navigation {
			float:left;
			width:120px;
			border-width:1px;
			border-style:dotted;
			border-color:black;
		}
		#affichage {
			float:left;
			margin-left:30px;
		}
		.fleches span {
			 margin-left:20px;
			 margin-right:20px;
			 font-size:30px;
			 cursor:pointer;
		}
	</style>
</head>
<body>
	<div  id="zone_navigation" class="fleches" >
		<span id="fleche_moins"> < </span><span id="fleche_plus"> > </span>
    </div>
	<input type="hidden" id="page_en_cours" value="1" /> 
	<input type="hidden" id="nb_total_pages" value="10" /> 
	
	<div id="affichage">
    </div>
	
</body>
</html>


code du fichier scriptPHP_reponse_a_ajax.php 

<?php
//on recupére le numéro transmis par ajax
if(isset($_POST['numPage'])){
	$num=$_POST['numPage'];
	if(is_numeric($num)){
		//on verifie que c'est bien un entier (sécurité)
		//on inclue la page php correspondant à la tenue
		//je suppose que tes fichiers se nomment tenue_1.php  tenue_2.php etc..... et qu'ils sont dans un répertoire tenues
		if(is_file('rep_tenues/tenue_'.$num.'..php')){
			//si le fichier demandé existe on l'include
			include ('rep_tenues/tenue_'.$num.'..php');
		}else{
			echo "La tenue demandée n'existe pas";
		}
	}
}
?>
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 30
Loader Messages postés 58 Date d'inscription dimanche 25 novembre 2012 Statut Membre Dernière intervention 8 juillet 2013 4
15 mai 2013 à 20:37
Merci de vos réponse si rapide :)
Je vais regarde le site, et je vous re-contacte en cas de problème.
0
Réponse 6 / 30
unker
15 mai 2013 à 20:37
Merci oui c'est ce que je faisais!
0
Réponse 7 / 30
Loader Messages postés 58 Date d'inscription dimanche 25 novembre 2012 Statut Membre Dernière intervention 8 juillet 2013 4
Modifié par Loader le 15/05/2013 à 20:53
Oups... Désoler, avec toutes les page du forum de CCM, je me trompe d'onglets, Vraiment désoler
0
Réponse 8 / 30
Loader Messages postés 58 Date d'inscription dimanche 25 novembre 2012 Statut Membre Dernière intervention 8 juillet 2013 4
Modifié par Loader le 15/05/2013 à 20:52
oups... tromper de sujet
0
Réponse 9 / 30
unker
15 mai 2013 à 20:52
J'ai du mal à savoir si ça correspond vraiment avec ce que je demandais...!
0
Réponse 10 / 30
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
15 mai 2013 à 21:05
C'est bien ce que tu veux faire :) Alain t'as bien dirigé !

Pour t'aider un peu, prendre ton index.php avec un menu, un containt et un footer.
Ce que tu veux, c'est quand tu veux allé par exemple dans ta page de contact.php, c'est gardé le menu et le footer vu qu'il ne change pas, et donc mettre le contenu de contact.php dans le containt actuel de la page (Mmh oula il raconte quoi lui ? oO)
Donc pour celui, il faut utilisé ajax
Ajax va te permetre d'appeler contact.php mais pas d'y aller ! Le serveur va t'envoyer le contenu et tu n'as plu qua l'affiché.

Donc en algo ca donne :

Si clique sur lien contact.php
alors je demande le contenu de contact.php
je fais un fadeOut du contenu
je remplace le contenu de ma page actuel par celui récupérer
je fais un fadeIn
0
Réponse 11 / 30
unker
15 mai 2013 à 23:17
Ah oui je vois, beaucoup de sites sont construits comme cela.

Pour expliquer un peu mieux mon cas, je fais un site pour notre groupe de reconstitution historique et je souhaite faire une page qui présente toutes les différentes tenues que nous avons et je voulais que cela soit possible de cliquer sur une petite flèche pour passer à la tenue suivante.

Il me faut des pages Php car chaque photo de tenue comporte des zones map qui font apparaitre du texte à gauche de l'écran avec d'autres photos qui présente l'équipement de la tenue sur lequel on clique!

il faut donc qu'on puisse cliquer 3-4 fois sur la flèche pour switcher sur les différentes tenues quoi.
0
Réponse 12 / 30
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
16 mai 2013 à 14:50
Pour ce que tu veux faire, je pense que c'est même faisable sans de l'ajax ... !

Tu peux chargé toutes tes tenues, et sur le clique de la flèches tu hide l'actuelle et tu show celle d'après

En gros :

<div id="tenues">

<div id="tenue01">
tenue 01
</div>

<div id="tenue02">
tenue 02
</div>

<div id="tenue03">
tenue 03
</div>

</div>


Quand tu cliques sur ta flèche suivante, tu slide la 1 et tu affiche la 2. Ainsi de suite
0
Réponse 13 / 30
unker
Modifié par unker le 16/05/2013 à 16:37
Pour répondre à "Jeremy.s", j'avais bien pensé à ça mais comment faire pour que ça affiche la 3 une fois que tu clique une 2 ème fois sur la flèche?

Merci à "Alain-42", je vais voir ça! Je pense que c'est ce que je recherchais!

Je vous poste une version de la maquette fait partiellement sous Photoshop,
Ce que j'ai pas dit c'est que lorsque l'on clique sur un équipement sur l'image du soldat, ça affiche la description à gauche. A la base je voulais le faire avec la méthode comme me le conseillait "Jeremy.s" mais ça risque de faire beaucoup de fouillis niveau des div etc... il est surement possible de le faire avec une méthode similaire à celle que tu proposes "Alain-42" ?

Voici :

http://www.servimg.com/image_preview.php?i=885&u=11154138
0
Réponse 14 / 30
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
16 mai 2013 à 18:03
Disons que les deux méthodes sont faisables pour ton probleme, mais ensuite vient plusieurs "critères" : la vitesse de ton serveur, de ta bases de données, la taille des images, etc.

Si tu fais tout en js basique, cela va surement prendre plus de temps à charger la page au début. Mais la réaction pour switcher d'une tenue à l'autre va être rapide.
Avec l'ajax, bah c'est l'inverse, moins d'infos en arrivant sur la page, mais une requete en bdd et du traitement php entre chaque switch de tenue donc plus long.

Après saches que "Pour répondre à "Jeremy.s", j'avais bien pensé à ça mais comment faire pour que ça affiche la 3 une fois que tu clique une 2 ème fois sur la flèche? " n'est pas un problème. Quand t'es sur la deuxieme, tu as l'id tenue02, Tu sais alors que tu vas à #tenue(numero actuel ++)


0
Réponse 15 / 30
unker
16 mai 2013 à 22:27
Ah oui exact je n'y avais pas vus comme ça. Je pensais mettre les flèches en dehors des div qui changent.

Je sais pas ce qui serait le plus simple à faire.

Après au niveau du temps de chargement, à ce niveau je ne sais pas si cela va changer vraiment grand chose? Je site sera hébergé chez OVH en tout cas.

Je pense que ce qui est mieux quand même c'est d'avoir un switch rapide mais ce que je souhaiterai c'est que ça soit pas trop prise de tête à faire, et niveau de la compatibilité Ajax est mieux non ?
0
Réponse 16 / 30
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
16 mai 2013 à 23:01
Ajax c'est "compliqué" au début ... Et disons que les deux manières sont propres et correctes.
Le plus simple reste donc de la faire en js basique. Mais si jamais ca peut être un bon entrainement pour apprendre l'ajax !
0
Réponse 17 / 30
unker
16 mai 2013 à 23:07
Oui à voir, toujours utile d'après Ajax. Disons que c'est l'"avenir" en quelques sortes!

Je vais essayer tout ça, je viens de trouver un autre groupe de reconstitution qui ç fait quelque chose du type mais je trouve ça assez mauvais et peu attractif malheureusement...: http://www.breizhww2soft.fr/landser.php
0
Réponse 18 / 30
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
16 mai 2013 à 23:13
La solution avec ajax reste quand même plus logique à terme, suivant le nombre de tenue dans ta BDD ! Car plus il en aura, plus l'ajax sera rapide comparer au systeme classique de switcher
0
Réponse 19 / 30
unker
16 mai 2013 à 23:17
En comptant large il y en aurait bien 6-7 maximum. De plus, il y a aussi une catégorie armes et une autre équipement individuel qui en comporteront à peu près le même nombre. Mais c'est pas dans la même page de toute façons.
0
Réponse 20 / 30
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
16 mai 2013 à 23:24
Ok donc finalement ca va.
Bah écoute à toi de voir, et si t'as besoin d'aide pour coder, hésite pas !
0

Discussions similaires

lire un fichier.page sur word
crycry_78 -
Yves -

25 réponses
recherche d'u
mimi -
brucine -

1 réponse
Code erreur 80710A06
LeJoeurTriste -
Petibond -

27 réponses