PHP - ŁADOWANIE PODSTRON DO DIV'A

pytanie zadane 20 października 2023 w PHP przez pawko15 Nowicjusz (120 p.)

Witam.

Dawno, dawno temu w latach 2005-2007 tworzyłem swój serwis www w oparciu o ramki. Były to projekty czysto amatorskie/edukacyjne dla własnej satysfakcji. Teraz wracam i widzę, że po latach sporo się zmieniło. Nie ma już dawno ramek, które były bardzo proste w obsłudze i łatwe do zrobienia w html. Strony buduje się w oparciu o divy.

Mam w związku z tym pytanie. Czy istnieje obecnie metoda tworzenia szkieletu strony www za pomocą php + html z odpowiednikiem funkjonalności ramek? Chodzi mi o takie samo trywialne rozwiązanie, które polegało by na tym, że divom przypisuje nazwy i w linkach w menu mam zdefiniowane do którego jest wczytywana podstrona.

Czytam fora, przeglądam filmy na YT i widzę, że ludzie mają z tym właśnie problemy. Owszem są rozwiązania, ale są one piramidalnie skomplikowane. Ajaxy... frameworki.... metry kwadratowe skomplikowanego kodu....

A mi chodzi o prostą funkcje, tak jak to było za dobrych starych prostych ramkowych czasów ;)

Znalazłem atrapę rozwiązania i jest nią funkcja "include" w php. Ale nie rozwiązuje ona problemu przeładowywania całej strony. Czy znacie rozwiązania tego fundamentalnego problemu w php lub html?

Swoja drogą to mnie to dziwi, że w 2023 roku w html nie ma funkcji, która dawałaby możliwość traktowania diva jako dawnej ramki, gdzie można wczytać plik html.

Z góry dziękuje za odpowiedzi, podpowiedzi i pozdrawiam serdecznie.

2 odpowiedzi

odpowiedź 20 października 2023 przez Mihoteo Bywalec (2,940 p.)
przeniesione 21 października 2023 przez Comandeer

Swoja drogą to mnie to dziwi, że w 2023 roku w html nie ma funkcji, która dawałaby możliwość traktowania diva jako dawnej ramki, gdzie można wczytać plik html.

Prawdopodobnie kwestia tego, że teraz takie rzeczy robi się raczej na SPA w Angularze/React/Vue. Myśle, że zamiast robić takie rzeczy na divie może spróbuj wykorzystać iframy. Nigdy nie robiłem takiej rzeczy o którą pytasz w czystym PHP bez frameworka ale to jest pierwsza rzecz która przyszła mi do głowy.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

odpowiedź 21 października 2023 przez VBService Ekspert (256,600 p.)
edycja 21 października 2023 przez VBService

Owszem są rozwiązania, ale są one piramidalnie skomplikowane. Ajaxy...

Parafrazując: "Nie taki ajax (w przykładzie użyto fetch) straszny jak go malują", IMO przykładowy kod uproszczony do minimum:

index.php

<?php
  session_start();

  $_SESSION['page'] = $_GET['page'] ?? $_SESSION['page'] ?? 'home';
  if (! isset(pathinfo($_SESSION['page'])['extension']))
    $_SESSION['page'] .= '.html';
?>
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
      html,
      body {
        padding: 0;
        margin: 0;
      }
      .main-container {
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-template-rows: 100px auto 50px;
        gap: 0px;

        width: min(1000px, 90dvw);
        height: auto;
        margin: 0 auto;
      }
      header {
        grid-column: 1 / span 2;
        grid-row: 1;
        background-color: hsl(100 90% 80% /.9);
      }
      nav,
      main {
        margin: 0;
        padding: 1rem;
      }
      nav {
        grid-column: 1;
        grid-row: 2;
        background-color: hsl(0 0% 0% /.4);
      }
      main {
        grid-column: 2;
        grid-row: 2;
        background-color: hsl(0 0% 0% /.2);
      }
      footer {
        grid-column: 1 / span 2;
        grid-row: 3;
        background-color: hsl(200 90% 80% /.9);
      }
      nav ul {
        list-style: none;
      }
    </style>
  </head>
  <body>
    <div class="main-container">
      <header>
        <!-- kod html dla nagłówka -->
      </header>
      <nav>
        <ul>
          <li><a href="?page=home">Strona główna</a></li>
          <li><a href="?page=page_1">Strona 1</a></li>
          <li><a href="?page=page_2">Strona 2</a></li>
          <li><a href="?page=contact">Kontak</a></li>
          <li><a href="?page=about_us">O Nas</a></li>
        </ul>
      </nav>
      <main>
        <?php echo file_get_contents($_SESSION['page']); ?>
      </main>
      <footer>
        <!-- kod html dla stopki -->
      </footer>
    </div>

    <script>
      const nav = document.querySelector('nav ul');
      nav.addEventListener('click', menu);

      async function menu(e) {
        e.preventDefault();

        if (e.target.matches('a[href*="page"]')) {
          const param = new URL(e.target.href).searchParams.get('page');
          const response = await fetch(`page.php?page=${param}`);
          const page = await response.text();
          document.querySelector('main').innerHTML = page;
        }
      }
    </script>
  </body>
</html>

page.php

<?php
  session_start();

  $_SESSION['page'] = $_GET['page'] ?? 'home';
  if (! isset(pathinfo($_SESSION['page'])['extension']))
    $_SESSION['page'] .= '.html';

  echo file_get_contents($_SESSION['page']);
?>

home.html

<h1>Strona główna</h1>

<article>
  <h2>Lorem 1</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</article>

<article>
  <h2>Lorem 2</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</article>

<article>
  <h2>Lorem 3</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</article>