Daten aus Datenbank in ein Modal übergeben per a link

**Jens** · 09.12.2022, 15:11

Hi!

Ich werde nicht ganz schlau aus deinem WHERE-Teil der Datenbankabfragen. Ich hätte etwas in der folgenden Richtung erwartet.

Beim Slider:

PHP-Code:


$statement = $pdo->prepare("SELECT * FROM anzeigen ORDER BY id DESC LIMIT 20"); // 20 neusten auslesen, neuste zuerst
$statement->execute();
$anzeigen = $statement->fetchAll(PDO::FETCH_ASSOC);

Beim Modal:

PHP-Code:


$statement = $pdo->prepare("SELECT * FROM anzeigen WHERE anzeigen.id = :id"); // Details zur anzeige mir der id aus dem Parameter "id"
$statement->execute([ "id" => $_REQUEST["id"] ]);  // Parameter "id" aus den GET/POST variablen in die query übergeben
$anzeige = $statement->fetch(PDO::FETCH_ASSOC);

Für den Modal-Code bin ich davon ausgegangen, dass dieser per AJAX mit der entsprechenden ID als parameter nachgeladen wird, was meiner Meinung nach der gängigste weg ist. Alternativ könnte man beim Slider noch die Daten maschinenlesbar im HTML mit ausgeben (z.B. ein <script>-Block mit den Daten im JSON-Format) und dann per Javascript in das Modal übertragen (entweder manuell oder per eine js-template engine wie z.B. mustache) oder gar direkt ein Modal für jedes element mit ausgeben und einfach einblenden wenn benötigt. Insbesondere von letzerer Lösung würde ich aber klar abraten, da es unnötig viel overhead beim laden der Seite produziert und diese damit größer/langamer macht.

**MattOhl** · 09.12.2022, 15:26

Vielen Dank für die Antwort. Ich habe den Code bei den Abfragen geändert und es macht deutlich mehr Sinn so. Mit Ajax beschäftige ich mich erst seit kurzem und ich bin noch recht neu bei PHP und Java, daher zum Verständnis beim Modal:

Es handelt sich nicht um ein Bootstrapmodal und das laden erfolgt simpel über einen Link in der Schreibe href="#modal". Daher verwende ich dabei auch kein Java. Daher meine hoffentlich nicht zu viel verlangte Bitte wie so etwas in diesem Fall aussehen könnte, da ich davon jetzt keine Vorstellung habe.

Viele liebe Grüße MattOhl

**Jens** · 09.12.2022, 16:33

Zitat von MattOhl Beitrag anzeigen

Vielen Dank für die Antwort. Ich habe den Code bei den Abfragen geändert und es macht deutlich mehr Sinn so. Mit Ajax beschäftige ich mich erst seit kurzem und ich bin noch recht neu bei PHP und Java, daher zum Verständnis beim Modal:

Es handelt sich nicht um ein Bootstrapmodal und das laden erfolgt simpel über einen Link in der Schreibe href="#modal". Daher verwende ich dabei auch kein Java. Daher meine hoffentlich nicht zu viel verlangte Bitte wie so etwas in diesem Fall aussehen könnte, da ich davon jetzt keine Vorstellung habe.

Viele liebe Grüße MattOhl

Das "#modal" ist nur eine Sprungmarke. Ohne javascript ist das höchste der Gefühle was dadurch passiert, dass das Browser-Fenster ein Stück nach unten scrollt. Wenn sich bei dir also per Klick ein Modal öffnet, dann musst du irgendeine Bibliothek laden die das per Javascript umsetzt. Die einfachste aber definitiv unschöne Lösung sähe ungefähr so aus:

PHP-Code:


<!-- Swiper -->
<div class="container mx-auto  swiper mySwiper">
  <div class="mb-16 swiper-wrapper">
    <?php
      // Slider hinzufügen
      $statement = $pdo->prepare("SELECT * FROM anzeigen ORDER BY id DESC LIMIT 20"); // 20 neusten auslesen, neuste zuerst
      $statement->execute();
      $anzeigen = $statement->fetchAll(PDO::FETCH_ASSOC);
      if (is_array($anzeigen)) {
        foreach ($anzeigen as $anz) {
        ?>
        <div class="swiper-slide">
          <div id="slider-1" class="container mx-auto">
            <div class="bg-cover bg-center  h-auto text-white py-24 px-10 object-fill" style="background-image: url(<?=htmlentities($anz['a_img'])?>)">
              <div class="md:w-1/2">
                <p class="font-bold text-sm uppercase"><?=htmlentities($anz['datum']);?></p>
                <p class="text-3xl font-bold"><?=htmlentities($anz['a_titel']);?></p>
                <p class="text-2xl mb-10 leading-none"><?=htmlentities($anz['a_smdesc']);?></p>
                <a href="#modal-<?=$anz['id']?>" data-target="#modal-<?=$anz['id']?>" class="btn bg-purple-800 py-4 px-8 text-white font-bold uppercase text-xs rounded hover:bg-gray-200 hover:text-gray-800">
                    <?=htmlentities($anz['a_ort']);?>
                </a>
              </div>
            </div>
          </div> <!-- container -->
          <br>
        </div>
        <?php
        }
      }
    ?>
  </div>
  <div class="swiper-pagination"></div>
</div>
<?php
// Modals hinzufügen
if (is_array($anzeigen)) {
  foreach ($anzeigen as $anz) {
    ?>
    <div id="modal-<?=$anz['id']?>" class="modal">
      <div class="modal-container">
        <div style="width:100%;" class="relative w-full h-full md:h-auto">
          <!-- Modal content -->
          <div style="width:100%;" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <!-- Modal header -->
            <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                  <?=htmlentities($anz['a_titel'])?>
              </h3>
              <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="staticModal">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                </svg>
              </button>
            </div>
            <!-- Modal body -->
            <div class="p-6 space-y-6">
              <div class="flex flex-col-reverse lg:flex-row w-full bg-white dark:bg-gray-800 shadow rounded">
                  <!-- Gekürzt -->
              </div>
            </div>
            <!-- Modal footer -->
            <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
              <a href="#" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                I accept
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <?php
  }
}

Die wichtigen Änderungen dabei:
- Verwendung von PHP "Short-Tags" für Variablen-Ausgaben - <?=$anz['id']?> bewirkt das selbe wie <?php echo(anz['id']); ?> ist aber deutlich kürzer und lesbarer.
- Der Link Verweist nicht einfach auf "#modal" sondern auf "#modal-<?=$anz['id']?>" (z.B. "#modal-4711" für die Anzeige mit der id 4711) und erlaubt es damit pro Anzeige ein entsprechendes Modal vorzubereiten
- Nach der Ausgabe des Sliders wird für jede Anzeige ein eigenes Modal erzeugt, welches dann entsprechend eingeblendet werden kann. Das ist wie gesagt absolut keine schöne Lösung, aber die einfachste.

Um das ganze besser zu lösen würde ich auf jeden Fall mal einen Blick in Richtung Javascript und AJAX werfen, denn wenn ich richtig einschätze was du da vor hast wirst du schnell an den Punkt kommen an dem alles andere a) sehr ineffizent und b) unnötig kompliziert ist.

**MattOhl** · 19.12.2022, 19:19

Ja, das reale leben hat mich eingeholt. Ich wollte mich auf jeden Fall aber noch bedanken für die hilfreichen Tipps und die Empfehlung mit Ajax. Da arbeite ich mich gerade ein. Vielen vielen Dank und ich hoffe, besser spät als nie :-)

Daten aus Datenbank in ein Modal übergeben per a link