Discussion :

[laure07]

J’ai une page (.php) ayant cette interface (Interface.jpg)

Le contenu de chaque Menu se trouve dans une page php indépendante, càd : quand je clique sur « Menu 1 », ca doit faire appel à la « page1.php » dont son contenu doit être affiché dans la zone <div id="cont">. Idém pour chaque menu.

Le ‘’ Macro’’ code que j’ai fais pour ceci se trouve ci-joint dans (Code.jpg)


Le résultat : c’est que dans la zone "cont" y’a le contenu des 4 pages qui s’affiche à la fois et non pas seulement le contenu de la page lié au menu sur lequel j'ai cliqué.

Avez-vous une idée de coment je peux faire pour afficher la zone "cont" le contenu de la page qui va correspondre au Menu sur lequel l’utilisateur va cliquer.

Merci d’avance

[elcoyotos]

Désolé, j'ai rien compris ! Mes ton code (pas en fichier joint) ...

[bodysalva]

Bonjour,

utilise ajax et la méthode updater.

Etape a suivre :
1 - télécharge la dernière version de prototype. C'est le framework qui te permettra d'utiliser les méthodes Ajax. Inclues-la ensuite dans ta page : c'est simple, c'est du javascript
2 - chacun de tes menus doit appelé ensuite une fonction javascript dans laquelle tu appellera le bon fichier php. La fonction mettre a jour le div "cont" de la manière suivantes :

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
function updateCont(nomFichierPhpParEx) {
switch (nomFichierPhpParEx) {
 case Valeur1:
 
 new Ajax.Updater(
	'cont',
	'tapage.php'
);
 
 break;
 case Valeur2:
....
 break;
 case ValeurX:
....
 break;
 default: 
....
 break;
} 
}

Tu as la possibilité d'envoyer des infos avec la function updater mais c'est une autre histoire.

Bon courage

[micetf]

Bonjour,

Allez, je me lance !
A priori, il y a plusieurs solutions à ton problème.
Prenons-les par ordre de complexité croissante...

Première solution : Solution php
En utilisant la méthode GET pour passer le menu choisi en paramètre.

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
 
<?php 
$choix = 1;
if (isset($_GET['m']) {
  switch ($_GET['m']) {
    case 1 :
    case 2 :
    case 3 :
      $choix = $_GET['m'];
      break;
    default :
      break;  
}
?>
<div id="nav">
  <a href="?m=1">Menu 1</a>
  <a href="?m=2">Menu 2</a>
  <a href="?m=3">Menu 3</a>
</div>
 
<div id="cont">
  <?php include 'page'.$choix.'.php'; ?>
</div>

Avantage : Simple à coder (à mon avis).
Inconvénient : Appel au serveur et rafraichissement de la page à chaque changement de menu.

Deuxième solution : Solution javascript
Contrairement à la solution précédente, on inclut toutes les pages php dans la div id="cont", mais au chargement de la page (onload), on les masque toutes (display=none) sauf une (page 1 ? (display=block)).

Code :

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

1
2
3
4
5
6
 
<div id="cont">
  <div id="page1"><?php include 'page1.php'; ?></div>
  <div id="page2"><?php include 'page2.php'; ?></div>
  <div id="page3"><?php include 'page3.php'; ?></div>
</div>

Pour l'événement onclick sur chaque "Menu X", on change la page qui est visible.
Dans la div id="nav", on utilise alors plus la balise a avec l'attribut href, mais un conteneur div, par exemple, avec un attribut onclick ayant pour valeur le nom de la fonction javascript qui gère l'affichage des pages 1 à 3.

Avantage : Un seul appel au serveur et ensuite le changement de menu se fait sans délai.
Inconvénient : Il faut savoir coder en javascript et j'avoue que je n'ai pas fourni beaucoup de billes ici (Ne sommes-nous pas sur le forum php ?).

Troisième solution : Solution AJAX
Au départ, on peut imaginer que la div id="cont" contient la page 1.

Code :

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

1
2
3
4
 
<div id="cont">
  <?php include 'page1.php'; ?>
</div>

Et lorsqu'on clique sur un onglet du menu, un appel ajax met à jour ce contenu.

Avantage : Idem ci-dessus.
Inconvénient : Il faut savoir coder en javascript et utiliser les requêtes ajax.

Après, on peut aller encore plus loin et utiliser un framework javascript (prototype (cf. bodysalva), jQuery ou autre) qui s'occupera du javascript et des requêtes ajax, voire qui permettra de gérer des effets pour le passage d'une page à une autre.

A toi de te positionner dans cet éventail de solutions.

Fred

[laure07]

Bonjour,

Allez, je me lance !
A priori, il y a plusieurs solutions à ton problème.
Prenons-les par ordre de complexité croissante...

Première solution : Solution php
En utilisant la méthode GET pour passer le menu choisi en paramètre.

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
 
<?php 
$choix = 1;
if (isset($_GET['m']) {
  switch ($_GET['m']) {
    case 1 :
    case 2 :
    case 3 :
      $choix = $_GET['m'];
      break;
    default :
      break;  
}
?>
<div id="nav">
  <a href="?m=1">Menu 1</a>
  <a href="?m=2">Menu 2</a>
  <a href="?m=3">Menu 3</a>
</div>
 
<div id="cont">
  <?php include 'page'.$choix.'.php'; ?>
</div>

Avantage : Simple à coder (à mon avis).
Inconvénient : Appel au serveur et rafraichissement de la page à chaque changement de menu.

Deuxième solution : Solution javascript
Contrairement à la solution précédente, on inclut toutes les pages php dans la div id="cont", mais au chargement de la page (onload), on les masque toutes (display=none) sauf une (page 1 ? (display=block)).

Code :

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

1
2
3
4
5
6
 
<div id="cont">
  <div id="page1"><?php include 'page1.php'; ?></div>
  <div id="page2"><?php include 'page2.php'; ?></div>
  <div id="page3"><?php include 'page3.php'; ?></div>
</div>

Pour l'événement onclick sur chaque "Menu X", on change la page qui est visible.
Dans la div id="nav", on utilise alors plus la balise a avec l'attribut href, mais un conteneur div, par exemple, avec un attribut onclick ayant pour valeur le nom de la fonction javascript qui gère l'affichage des pages 1 à 3.

Avantage : Un seul appel au serveur et ensuite le changement de menu se fait sans délai.
Inconvénient : Il faut savoir coder en javascript et j'avoue que je n'ai pas fourni beaucoup de billes ici (Ne sommes-nous pas sur le forum php ?).

Troisième solution : Solution AJAX
Au départ, on peut imaginer que la div id="cont" contient la page 1.

Code :

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

1
2
3
4
 
<div id="cont">
  <?php include 'page1.php'; ?>
</div>

Et lorsqu'on clique sur un onglet du menu, un appel ajax met à jour ce contenu.

Avantage : Idem ci-dessus.
Inconvénient : Il faut savoir coder en javascript et utiliser les requêtes ajax.

Après, on peut aller encore plus loin et utiliser un framework javascript (prototype (cf. bodysalva), jQuery ou autre) qui s'occupera du javascript et des requêtes ajax, voire qui permettra de gérer des effets pour le passage d'une page à une autre.

A toi de te positionner dans cet éventail de solutions.

Fred

Merci pour ta réponse..
j'ai essayé beaucoup de solution sans issue..
étant donnée que je ne suis un experte dans le développement ...
sera t'il possible d'avoir le code permettant l'affichage du contenu selon le Menu sélectionné, sur lequel je peux me baser et l'adapter à mon menu..
Merci davance

merci beaucoup d'avance