Zum Verständnis zum einbinden von php in mein html

einsiedler · 7. Mai 2019

Hallo liebe Forumer,

heute habe ich mal eine frage zum PHP.

Teilfrage A)

Was ist besser zum einbinden von PHP in mein HTML:

A) ... mit echo

PHP

<?php  ### getImageFilenames.php ### utf-8 ### ÄÖÜäöü
echo '<img src="'. $_liste['pfad'] .'" alt="" width="'. $_liste[$filename]['bildabmessungen'[0]] .'" height="'. $_liste[$filename]['bildabmessungen'[1]] .'" />';
?>

B) ... im html selbst

PHP

<section class="secIMG">
  <figure>
     <img class="vorschauIMG" src="<?php '. $_liste['pfad'] .'?>" width="<?php '. $_liste[$filename]['bildabmessungen'[0]] .'?>" height="<?php '. $_liste[$filename]['bildabmessungen'[1]] .'?>" alt="Vorschaubild"/>
  </figure>
</section>

Teilfrage B)

Ist mein PHP im Beispiel B) so korrekt eingebunden (mit allen Punkten usw? Guckt doch mal bitte darüber.

Teilfrage C)

Das PHP im wie im Beispiel A) wird doch in meinem HTML Quellcode vor dem <html> <body> .... eingefügt.... ist das richtig?

Teilfrage D)

Ich habe in meinem html wie im Beispiel B) mehrere solcher <section> hintereinander und in meinem php werden die Variablen heraufgezählt (immer +1)

Also müssten doch die Adressen und die Größe der Images immer angepasst werden, das nächste Image für die nächste <section . Sehe ist das so richtig?

Vielen Dank der misanthrop

Arne Drews · 7. Mai 2019

Ich schlage Variante T vor:

PHP

<?php
// Prinzip: E-V-A

// -E-ingabe
// $liste generieren
// ...


// -V-erarbeitung
$sSectionTemplate = '<section class="secIMG"><figure><img class="vorschauIMG" src="{img.path}" width="{img.width}" height="{img.height}" alt="Vorschaubild"></figure></section>';

$aSections = array_map(
        function ( $data ) use ( $sSectionTemplate, $filename ) {
            return strtr(
                    $sSectionTemplate
                    , [
                        '{img.path}' => $data['pfad'],
                        '{img.width}' => $data[$filename]['bildabmessungen'][0],
                        '{img.height}' => $data[$filename]['bildabmessungen'][1]
                    ]
                );
        }
        , $liste
    );


// -A-usgabe
echo implode( $aSections );

Alles anzeigen

einsiedler · 7. Mai 2019

Wunderbar Arne! DANKE!

Nur bin ich mir nicht so sicher ob ich dies anwende, obwohl ich die Berechnungen für jedes IMG bräuchte (Ich sage nur als stichwort: Vergrößern des IMG verhindern!)

Mein html für jedes <section> sähe so aus:

Code

<section>
<a class="a-modul" href="arbeit01.html">
<h4 class="header-tabelle">
Drifters, 2012
</h4>
<figure>
<img class="vorschauIMG" src="/mediaordner/web01/preview_images/01-00.jpg" alt="Drifters, 2012">
</figure>
</a>
<p>
Perfor&shy;mance
<span>Kunsthalle Münster,</span>
<span>Speicher II, Münster</span>
</p>
</section>
<section>
<a class="a-modul" href="arbeit02.html">
<h4 class="header-tabelle">
Waldfrieden, 2006
</h4>
<figure>
<img class="vorschauIMG" src="/mediaordner/web01/preview_images/02-00.jpg" alt="Waldfrieden, 2006">
</figure>
</a>
<p>
Raum&shy;installa&shy;tion
<span>MARTa - Kapelle,</span>
<span> Museum MARTa, Herford</span>
</p>
</section>
<section>
<a class="a-modul" href="arbeit03.html">
<h4 class="header-tabelle">
Eremitage für Paris, 2006
</h4>
<figure>
<img class="vorschauIMG" src="/mediaordner/web01/preview_images/03-00.jpg" alt="Eremitage für Paris, 2006">
</figure>
</a>
<p>
Raum&shy;installa&shy;tion
<span>Cité Internationale des Arts, Paris</span>
</p>
</section>

Alles anzeigen

Also müßte ich alles , auch komplett was im <a< Tag ist und in <p> Tag

das halt alles was Du in // -V-erarbeitung stehen hast dort hinein.

Sprich in diese Zeile:

$sSectionTemplate = '<section class="secIMG"><figure><img class="vorschauIMG" src="{img.path}" width="{img.width}" height="{img.height}" alt="Vorschaubild"></figure></section>';

Hmmmmm... ich frage mich noch ob ich`s so machen soll!

Gruß Tassilo

Arne Drews · 7. Mai 2019

Musst Du nicht so machen, ist nur eine Möglichkeit, mit der man gleichzeitig Kontext bezogen das E-V-A Prinzip einhält.

Der String war auch nur als Beispiel gedacht. Du kannst Deinen Code auch auslagern in eine Datei, Datenbank wäre zwar noch besser, aber der Einfachheit halber bleiben wir mal bei der Datei, dann sähe die ungefähr so aus ( Platzhalter ohne Bezug auf Dein Script ):

HTML

<section>
  <a class="a-modul" href="{target}">
    <h4 class="header-tabelle">{headline}</h4>
    <figure>
      <img class="vorschauIMG" src="{img.path}" alt="{headline}">
    </figure>
  </a>
  <p>{title}{subtext}</p>
</section>

Das kannst Du für jede <section> mit file_get_contents einlesen und die Parameter ersetzen:

PHP

echo strtr(
        file_get_contents( './tmp/section.html' )
        , [
            '{target}' => 'arbeiten01.html',
            '{headline}' => 'Drifters, 2012',
            '{img.path}' => '/mediaordner/web01/preview_images/01-00.jpg',
            '{title}' => 'Perfor&shy;mance',
            '{subtext}' => '<span>Kunsthalle Münster,</span><span>Speicher II, Münster</span>'
        ]
    );

Ergebnis:

HTML

<section>
  <a class="a-modul" href="arbeiten01.html">
    <h4 class="header-tabelle">Drifters, 2012</h4>
    <figure>
      <img class="vorschauIMG" src="/mediaordner/web01/preview_images/01-00.jpg" alt="Drifters, 2012">
    </figure>
  </a>
  <p>Perfor&shy;mance<span>Kunsthalle Münster,</span><span>Speicher II, Münster</span></p>
</section>

Die Ersetzungen kommen dann natürlich aus Deinem Array, ich habe das hier nur als Beispiel statisch gemacht.

Damit hast Du u.a. auch den Vorteil, dass Du relativ einfach ausgelagerte Blöcke Deiner Seite ändern kannst, ohne das gesamte Script anzufassen.

Das ist der erste kleine Grundstein auf dem Weg zum Templating, daher Variante T

Zum Verständnis zum einbinden von php in mein html

Jetzt mitmachen!

Teilen

Tags