Partage
  • Partager sur Facebook
  • Partager sur Twitter

creer sous-pages

PHP-css-JS

Sujet résolu
    3 février 2023 à 12:00:00

    Mesdames, messieurs, bonjours.

    Je me permets de vous écrire, car je voudrais, dans un cadre purement personnel et pour m'exercer en vue de ma future formation, créer un site. J'ai déjà fait une formation préparatoire en dev, et j'ai des bonnes bases, mais j'ai besoin d'aide pour mon projet actuel. Je voudrais faire plusieurs sous pages, sur une seule page PHP.

    Dans ma situation actuelle, j'écris une histoire avec plusieurs chapitres, j'ai créé une feuille PHP pour chaque chapitre, mais chaque chapitre a 6 pages chacune. Et mon but, c'est que, j'écris chaque chapitre sur son fichier PHP, puis je repartis les pages, d'où les sous-pages du titre.

    J'ai le support original si vous voulez tout savoir. Il est juste en piteux états et ça revient moins cher de l'écrire sur ordi que de le racheter neuf, et ça m'entraine au codage, et c'est mieux présenté que sur word.de toute façon, c'est local, je ne peux pas le revendre et prétendre que c'est à moi.

    J'espère ne pas vous avoir perdu, et surtout, j'espère que c'est réalisable.

    Je vous remercie d'avance pour votre aide.

    Cordialement,

    Mathieu Stamm

    -
    Edité par MathieuStamm 3 février 2023 à 12:01:21

    • Partager sur Facebook
    • Partager sur Twitter
      3 février 2023 à 12:10:26

      Salut , 

      Alors je sais pas si j'ai bien compris , mais tu cherche à inclure plusieurs page dans une page PHP ? 

      Si oui , tu peux inclure dans ton fichier principale tes sous-pages tel que : 

      <?php 
          require_once "sous-page1.php";
          require_once "sous-page2.php";
          require_once "sous-page3.php"; 
      
      ?>

      Require va obligatoirement insérer le fichier , et envoie une erreur si il ne le trouve pas. le _once sert à ne pas dupliquer un fichier. 
      Tu peux aussi faire avec la fonction include et include_once : cela ne provoque pads d'erreur si il ne trouve pas les fichiers. 

      https://www.alsacreations.com/article/lire/254-le-point-sur-la-fonction-include-php.html

      -
      Edité par Benjyben 3 février 2023 à 12:12:33

      • Partager sur Facebook
      • Partager sur Twitter

      la connaissance s'acquiert par l'expérience, le reste n'est qu'information.

        3 février 2023 à 12:34:45

        Bonjour, merci pour votre réponse.


        j'ai fait le include pour le header déja et pour connecter les chapitres entre eux. mon but est tout autre et plus complexe.

        j'écris chaque chapitre sur son fichier PHP, puis je repartis les pages, en sous pages, caché par une fonction disons, quand j'appuie sur page 2, ça cache la première partie, et montre la page 2, et ainsi de suite, sur chaque chapitre.


        j'espère avoir été plus clair un peut. sinon, tant pis, je ferais avec cette méthode, et ça me fera encors plus de page. j'en ai déja 21, rien qu'avec les chapitres. avec header, index et css, ça me fait 24. j'aurais aimé ne pas en avoir d'avantage.


        Benjyben a écrit:

        Salut , 

        Alors je sais pas si j'ai bien compris , mais tu cherche à inclure plusieurs page dans une page PHP ? 

        Si oui , tu peux inclure dans ton fichier principale tes sous-pages tel que : 

        <?php 
            require_once "sous-page1.php";
            require_once "sous-page2.php";
            require_once "sous-page3.php"; 
        
        ?>

        Require va obligatoirement insérer le fichier , et envoie une erreur si il ne le trouve pas. le _once sert à ne pas dupliquer un fichier. 
        Tu peux aussi faire avec la fonction include et include_once : cela ne provoque pads d'erreur si il ne trouve pas les fichiers. 

        https://www.alsacreations.com/article/lire/254-le-point-sur-la-fonction-include-php.html

        -
        Edité par Benjyben il y a 8 minutes



        • Partager sur Facebook
        • Partager sur Twitter
          3 février 2023 à 12:48:56

          Ah d'accord ! j'ai compris , dans ce cas je sais pas si c'est la meilleure solution mais tu peux éventuellement charger tes pages dynamiquement avec une methode Jquery $Ajax  sans recharger ta page et les inclure dans une div exemple : 

           $.ajax({
                  type: "GET",
                  url: "souspage.php",
                  success: function (data) {
                     $("#container").html(data);// on insère ta sous page dans le #container 
                  }
           });

          ce code va chercher le contenu dans le fichier souspage.php et l'insérer dans l'élément avec l'id 'container'. 

          utilise cette fonction en JS pour créer dynamiquement ton affichage. Si tu as un code déjà créer tu peux le poster pour que je t'aide d'avantage si tu le souhaite. 

          • Partager sur Facebook
          • Partager sur Twitter

          la connaissance s'acquiert par l'expérience, le reste n'est qu'information.

            3 février 2023 à 13:28:57

            Alors, mon niveau n'est pas assez haut pour ce genre de code. Mon niveau se limite aux bases de base. Bon, un peu plus que les base quand même, mais tout de même. On n'a pas appris ce genre de code.

            Ce que j'ai fait, je l'ai fait avec le peu qu'on a vu en formation, et j'ai fait un peu en autodidacte en regardant des tutos à droite et à gauche. C'était une formation accélérée, donc on a vu ça rapidement, un équivalent bac+2 en 6 mois, voyez le topo.


            Alors ce dont vous me parlez, je ne l'ai pas vu. désolé.

            Je peux vous montrer si vous voulez mon code, mais je ne vous montre pas tous les 21 chapitres.

            Je n'ai pas fini d'écrire le premier chapitre. J'aurais dû écrire une fois le premier chapitre fini. Désolé.

            <?php
            include('header.php');
            
            echo "<title>1. Sur la route vers Mars</title>";
            ?>
            
            <main>
                <div>
                    <header>
                        <div>
                            <a href="index"><button> &larr; Sommaire
                                    <i class="fas fa-long-arrow-alt-right" aria-hidden="true"></i></button>
                            </a>
                        </div>
            
                    </header>
                </div>
            </main>
            
            
            <div class="container">
                <div class="row text-center">
                    <h1>1 <br> En route vers Mars</h1>
                </div>
                <br>
                <div class="container">
                    <div>
                        <p>Le vol vers mars fut la chose la plus ennuyante, qu’Urs Pigrato ai fait de toute sa vie.
                            <br>
                            Incroyablement ennuyeux. Ennuyeux à hurler. Si seulement il avait su … !
                            <br>
                            <span>Certe : mème là, il n’aurait rien pu faire contre.</span>
                            <br>
                            Car c’était sa mère qui avait décidé qu’ils voleraient vers Mars, et sa mère était une femme que
                            l'on ne
                            contredit pas si facilement.
                            <br>
                            <span> Cela a commencé raisonnablement excitant. Pratiquement d'un jour à l'autre. </span>
                            <br>
                            Urs rentra de l'école et
                            découvris qu'il allait déménager sur Mars. Et immédiatement. C'était comme s'ils fuyaient quelque
                            chose.
                            <br>
                            <span>"C'est absure", lui dit sa mère et lui tend une petite boite en plastique rouge avec
                                couvercle.</span>
                            <br>
                            "Nous devons juste pas louper le vaisseau". Elle lui posa une brochure de la compagnie de
                            voyage spaciale sur la boite. "Tu peut emmener autant, que ce qui rentre la dedans, Maximum Vingt
                            Kilogrammes. Et nous devons être à l'aeroport à 16h30".
                            <br>
                        </p>
                    </div>
                </div>
            </div>
            
            
            <main>
                <div class="text-end">
                    <footer>
                        <div>
                            <a href="Chap2.php"><button>Chapitre 2 &rarr;
                                    <i class="fas fa-long-arrow-alt-right" aria-hidden="true"></i></button></a>
                        </div>
            
                    </footer>
                </div>
            </main>

            Après, je n'ai jamais vraiment appris le JS, j'ai mieux suivie en html, css et php qu'en js, ça a jamais voulu rentrer. j'ai vu des vidéos a droite et a gauche, mais ça a jamais fonctionné avec moi. désolé

            Benjyben a écrit:

            Ah d'accord ! j'ai compris , dans ce cas je sais pas si c'est la meilleure solution mais tu peux éventuellement charger tes pages dynamiquement avec une methode Jquery $Ajax  sans recharger ta page et les inclure dans une div exemple : 

             $.ajax({
                    type: "GET",
                    url: "souspage.php",
                    success: function (data) {
                       $("#container").html(data);// on insère ta sous page dans le #container 
                    }
             });

            ce code va chercher le contenu dans le fichier souspage.php et l'insérer dans l'élément avec l'id 'container'. 

            utilise cette fonction en JS pour créer dynamiquement ton affichage. Si tu as un code déjà créer tu peux le poster pour que je t'aide d'avantage si tu le souhaite. 



            -
            Edité par MathieuStamm 3 février 2023 à 13:48:51

            • Partager sur Facebook
            • Partager sur Twitter
              3 février 2023 à 15:40:13

              Ok pas de soucis haha ^^
              Si tu as discord on peut voir ça ensemble je t'expliquerai un peu plus car sur le forum c'est limité :) 

              • Partager sur Facebook
              • Partager sur Twitter

              la connaissance s'acquiert par l'expérience, le reste n'est qu'information.

                4 février 2023 à 15:38:43

                oui, j'ai discord.

                Mathieu68200#1528


                vous pouvez m'inviter si vous voulez.


                je sais pas si c'est ce qu'il faut chercher, mais j'ai que ça.

                Benjyben a écrit:

                Ok pas de soucis haha ^^
                Si tu as discord on peut voir ça ensemble je t'expliquerai un peu plus car sur le forum c'est limité :) 



                • Partager sur Facebook
                • Partager sur Twitter
                  4 février 2023 à 16:15:33

                  Bonjour, il n'est pas nécessaire d’écrire en gras on sait vous lire sans.

                  Votre problème est un problème HTML/CSS OU PHP? Je déplacerais le sujet au besoin.

                  Passez votre code HTML générer au validateur pour voir et corriger vos erreurs => https://validator.w3.org/#validate_by_input

                  En HTML il ne peut y avoir qu'une seule balise <main> dans le document, voir la doc MDN à ce sujet.

                  La balise <title> doit ce trouver dans le <head> et pas ailleurs. 

                  On n'écrit pas un bouton dans un lien, ces deux élément sont des éléments interactif, on écrit soit l'un soit l'autre.

                  Je vous recommande de vous tourner vers le modèle MVC, pour l'organisation de vos fichier PHP, il y à un cours sur ce site

                  Pour ma part je n'ai pas bien compris votre problématique, c'est quoi pour vous une sous-pages?

                  >> Je voudrais faire plusieurs sous pages, sur une seule page PHP.

                  Pourriez vous explicité votre besoin?

                  -
                  Edité par AbcAbc6 4 février 2023 à 16:17:02

                  • Partager sur Facebook
                  • Partager sur Twitter
                    4 février 2023 à 16:35:09

                    Bonjour, pour le gras, désolé, je n'écris pas volontairement comme ça.

                    Je viens juste de découvrir comment l'enlever.

                    Pour le title, j'ai fait en PHP, donc j'ai fait un seul Header, pour éviter d'avoir à refaire 21 fois la même chose, bien que je fais un bon morceau de recopiage tout de même. Du coup, le

                    <?php
                    include('header.php');
                    echo "<title>1. Sur la route vers Mars</title>";
                    ?>
                    explique la chose: j'ai fait le include du header, et le title, c'est pour éviter d'avoir le titre du header, je voulais un titre personnalisé par chapitre.

                    Pour la question, je voulais trouver un moyen, disons de répartir les différentes pages de l'histoire, en sous pages, disons avec des div, et mettre une id, puis en fonction de l'id, donner une fonction, pour que, quand j'appuie sur le bouton, page 2, ça arrive sur la suite, la page 2, Logique me direz-vous, et que ça cache la partie 1. Donc chaque div, un bouton attitré, et la même fonction qui fait que, quand j'appuie sur le bouton page 2, ça cache page 1, quand j'appuie page 3, ça cache page 2 et affiche page 3, et ainsi de suite.

                    Voici ce que je voulais dire par sous-page. J'ai déjà fait 21 pages, une par chapitre, mais je voulais éviter d'en faire davantage pour chaque page, et par-dessus le marché, je trouvais que 6 pages d'un coup, ça fait beaucoup.

                    j'espère avoir été plus clair?

                    et pour les liens dans les boutons, pour ma part, tout fonctionne. je clique dessus et ça s'ouvre. c'est un site perso, c'est pas comme si j'allais etre controlé, et c'est en local, sur mon pc, personne le verra et personne ne pourra se cramer les yeux tellement c'est mal codé eventuellemnt.


                    AbcAbc6 a écrit:

                    Bonjour, il n'est pas nécessaire d’écrire en gras on sait vous lire sans.

                    Votre problème est un problème HTML/CSS OU PHP? Je déplacerais le sujet au besoin.

                    Passez votre code HTML générer au validateur pour voir et corriger vos erreurs => https://validator.w3.org/#validate_by_input

                    En HTML il ne peut y avoir qu'une seule balise <main> dans le document, voir la doc MDN à ce sujet.

                    La balise <title> doit ce trouver dans le <head> et pas ailleurs. 

                    On n'écrit pas un bouton dans un lien, ces deux élément sont des éléments interactif, on écrit soit l'un soit l'autre.

                    Je vous recommande de vous tourner vers le modèle MVC, pour l'organisation de vos fichier PHP, il y à un cours sur ce site

                    Pour ma part je n'ai pas bien compris votre problématique, c'est quoi pour vous une sous-pages?

                    >> Je voudrais faire plusieurs sous pages, sur une seule page PHP.

                    Pourriez vous explicité votre besoin?

                    -
                    Edité par AbcAbc6 il y a 6 minutes



                    -
                    Edité par MathieuStamm 4 février 2023 à 16:50:35

                    • Partager sur Facebook
                    • Partager sur Twitter
                      4 février 2023 à 17:11:05

                      Bonjour,

                      >> j'espère avoir été plus clair?

                      Pas sur le dernier paragraphe palant des page. On est bien d'accord qu'une page c'est au sens document HTML commencent par le doctype et finissant par le </html>?

                      Pas des pages de votre histoire?

                      Ce que vous souhaitez faire c'est un système d'onglet en quelque sorte? Le contenu caché est affiché seulement au clique sur un lien. Exemple rapide :

                      <!DOCTYPE html>
                      <html lang="fr">
                      
                      <head>
                          <meta charset="UTF-8">
                          <meta http-equiv="X-UA-Compatible" content="IE=edge">
                          <meta name="viewport" content="width=device-width, initial-scale=1.0">
                          <title>mon livre</title>
                          <style>
                              .chapitre {
                                  display: none;
                              }
                      
                              .chapitre:target {
                                  display: block;
                              }
                      
                               .chapitre:target ~ .introduction {
                                  display: none;
                              }
                      
                              .nav {
                                  display: flex;
                                  list-style-type: none;
                              }
                      
                              .nav a {
                                  display: inline-block;
                                  margin-right: 10px;
                              }
                          </style>
                      </head>
                      
                      <body>
                          <nav>
                              <ul class="nav">
                                  <li><a href="#chapitre-1">Chapitre 1</a></li>
                                  <li><a href="#chapitre-2">Chapitre 2</a></li>
                                  <li><a href="#chapitre-3">Chapitre 3</a></li>
                              </ul>
                          </nav>
                          
                          <section class="chapitre" id="chapitre-1">
                              <h2>Chapitre 1</h2>
                              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus, in!</p>
                          </section>
                          <section class="chapitre" id="chapitre-2">
                              <h2>Chapitre 2</h2>
                              <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis, aut.</p>
                          </section>
                          <section class="chapitre" id="chapitre-3">
                              <h2>Chapitre 3</h2>
                              <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias, quibusdam.</p>
                          </section>
                         <section class="introduction">
                              <h2>Introduction</h2>
                              <p>Lorem ipsum dolor sit amet.</p>
                          </section>
                      </body>
                      
                      </html>



                      -
                      Edité par AbcAbc6 4 février 2023 à 17:14:57

                      • Partager sur Facebook
                      • Partager sur Twitter
                        4 février 2023 à 17:41:03


                        Voilà, vous avez parfaitement résumé mon objectif. Je ne parvenais pas à mettre de mot dessus. C'est ça que je voulais faire.

                        Merci pour votre aide.

                        Je peux faire la même chose pour chaque chapitre, j'imagine? Je fais un copier-coller et j'ajuste ?

                        j'ai 21 pages, 1 par chapitre.


                        AbcAbc6 a écrit:

                        Bonjour,

                        >> j'espère avoir été plus clair?

                        Pas sur le dernier paragraphe palant des page. On est bien d'accord qu'une page c'est au sens document HTML commencent par le doctype et finissant par le </html>?

                        Pas des pages de votre histoire?

                        Ce que vous souhaitez faire c'est un système d'onglet en quelque sorte? Le contenu caché est affiché seulement au clique sur un lien. Exemple rapide :

                        <!DOCTYPE html>
                        <html lang="fr">
                        
                        <head>
                            <meta charset="UTF-8">
                            <meta http-equiv="X-UA-Compatible" content="IE=edge">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>mon livre</title>
                            <style>
                                .chapitre {
                                    display: none;
                                }
                        
                                .chapitre:target {
                                    display: block;
                                }
                        
                                 .chapitre:target ~ .introduction {
                                    display: none;
                                }
                        
                                .nav {
                                    display: flex;
                                    list-style-type: none;
                                }
                        
                                .nav a {
                                    display: inline-block;
                                    margin-right: 10px;
                                }
                            </style>
                        </head>
                        
                        <body>
                            <nav>
                                <ul class="nav">
                                    <li><a href="#chapitre-1">Chapitre 1</a></li>
                                    <li><a href="#chapitre-2">Chapitre 2</a></li>
                                    <li><a href="#chapitre-3">Chapitre 3</a></li>
                                </ul>
                            </nav>
                            
                            <section class="chapitre" id="chapitre-1">
                                <h2>Chapitre 1</h2>
                                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus, in!</p>
                            </section>
                            <section class="chapitre" id="chapitre-2">
                                <h2>Chapitre 2</h2>
                                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis, aut.</p>
                            </section>
                            <section class="chapitre" id="chapitre-3">
                                <h2>Chapitre 3</h2>
                                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias, quibusdam.</p>
                            </section>
                           <section class="introduction">
                                <h2>Introduction</h2>
                                <p>Lorem ipsum dolor sit amet.</p>
                            </section>
                        </body>
                        
                        </html>



                        -
                        Edité par AbcAbc6 il y a 20 minutes



                        • Partager sur Facebook
                        • Partager sur Twitter
                          4 février 2023 à 17:47:56

                          >> Je peux faire la même chose pour chaque chapitre, j'imagine?

                          Oui

                          >> Je fais un copier-coller et j'ajuste ?

                          Oui, à vous de voir comment vous souhaitez afficher visuellement la chose, mais le principe est la.

                          • Partager sur Facebook
                          • Partager sur Twitter

                          creer sous-pages

                          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                          • Editeur
                          • Markdown