MySQL Datenbank auf Website Tabelle anzeigen

[Klaus]

Hab mir alles angesehen und geladen was ich brauchte -> kannst den Zugang wieder "dicht" machen.

Backend:

Den Code habe ich jetzt in eine fertig generierte Seite per Editor rein weil ich sonst auf ein Kundensystem mit MR Liz. müsste was ich bei Basteleien aber nicht will.
Deine app.js musste ich in eine Funktion packen und erst nach dem Laden der Bilder starten.
War bisher ohne viel Nachdenken "Resteverwertung" von dem anderen Bsp.

[Klaus]

Mir fehlt grade die "Lust" zum "Aufhübschen" ... daher erst mal so wie es läuft:
(Bastle auch schon weiter mit dem alten AngularJS & ngRepeat ... läuft auch schon so grob.)

Wann so eine Frontend / Backend Trennung Sinn macht muss man im Einzelfall entscheiden, hier vielleicht nicht aber wenn man mit einem OAuth Login über google, github & Co bei einem Shop mit Rest API angemeldet dann schon weil man die Daten ja fast nicht anders (bequem) bekommt. ... übrigens kann die Seite jetzt auch auf .html umgestellen.

Wie geschrieben Deine app.js hab ich in eine function gepackt, Anfang sieht so aus am Ende halt noch die } Klammer.
Gedanken über den Scope der Variablen hab ich mir nicht gemacht, es läuft ja! ;-)

Code: Alles auswählen

function docReady() {
//step 1: get DOM

Backend:

Code: Alles auswählen

<?php
   
   class Bild
{
    public $img_path;
	public $firma;
    public $bildueberschrift;
	public $bildkurzbeschreibung;
	public $beschreibung;
	
}
  
    // Verbindung zur Datenbank
    require_once('db_conf.php');

    try {
        $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", "$user", "$pw");
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    } catch (PDOException $e) {
        die("Verbindung fehlgeschlagen: " . $e->getMessage());
    }

    // Datenbankabfrage
    $query = $pdo->query("SELECT * FROM Images WHERE Exklusive1 = 1");
    $result = $query->fetchAll(PDO::FETCH_ASSOC);

    // Dynamisch die vorhandenen Unterordner im "uploads"-Verzeichnis auslesen
    $uploadFolders = array_filter(glob('uploads/*'), 'is_dir');

	$bilder = array();
    foreach ($result as $row) {
        foreach ($uploadFolders as $imgFolder) {
            // Bildpfad dynamisch erstellen
            $imgPath = "$imgFolder/" . $row['Bildname'] . ".jpg";

            // Prüfen, ob das Bild im aktuellen Unterordner existiert
            if (file_exists($imgPath)) {
                // das aktuelle Bild hinzufügen
				$bild = new Bild();
                // $bild->img_path = $row['Bildname'];
				$bild->img_path = $imgPath;
				$bild->firma = $row['Firma']; 
				$bild->bildueberschrift = $row['Bildueberschrift'];
				$bild->bildkurzbeschreibung = $row['Bildkurzbeschreibung']; 
				$bild->beschreibung = $row['Beschreibung'];
				array_push($bilder, $bild);  
            }
        }
    }
	header('Content-Type: application/json; charset=utf-8');
	echo json_encode($bilder, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
?>

Frontend:

Code: Alles auswählen

    <template id='car-template'>
	                    <div class="item">
                        <img id="td1">
                        <div class="content">
                            <div id="td2" class="author"></div>
                            <div id="td3" class="title"></div>
                            <div id="td4" class="topic"></div>
                            <div id="td5" class="des"></div>
                            <div class="buttons">
                                <button>SEE MORE</button>
                                <button>SUBSCRIBE</button>
                            </div>
                        </div>
                    </div>
    </template>
    <template id='thumb-template'>
	                    <div class="item">
                        <img id="td11">
                        <div class="content">
                            <div id="td33" class="title"></div>
                            <div id="td55" class="des"></div>
                        </div>
                    </div>
    </template>
<div class="container-fluid">
    <div class="row justify-content-center">
        <!-- carousel -->
        <div class="carousel">
            <!-- list item -->
            <div id="car" class="list">
            </div>
            <!-- list thumbnail -->
            <div id="thumb" class="thumbnail">
            </div>
            <!-- next prev --> 
            <div class="arrows">
                <button id="prev" class="icon54-v1-left-11"> </button>
                <button id="next" class="icon54-v1-right-11"> </button>
            </div>
            <!-- time running -->
            <div class="time"></div>
        </div>
    </div>
</div>
	<script src="assets/AWM_exclusiveSlideShow/js/app.js"></script>
	<script>
	const carTemplate = document.getElementById('car-template');
	const carContainer = document.getElementById('car');
	const thumbTemplate = document.getElementById('thumb-template');
	const thumbContainer = document.getElementById('thumb');
	fetch('http://example.com/TFH/getpets.php')
		.then(response => response.json())
		.then(data => {
			data.forEach(data => {
				const car = carTemplate.content.cloneNode(true);
				car.getElementById('td1').src = data.img_path;
				car.getElementById('td2').textContent = data.firma;
				car.getElementById('td3').textContent = data.bildueberschrift;
				car.getElementById('td4').textContent = data.bildkurzbeschreibung;
				car.getElementById('td5').textContent = data.beschreibung;
				carContainer.appendChild(car);
				
				const thumb = thumbTemplate.content.cloneNode(true);
				thumb.getElementById('td11').src = data.img_path;
				thumb.getElementById('td33').textContent = data.bildueberschrift;
				thumb.getElementById('td55').textContent = data.beschreibung;
				thumbContainer.appendChild(thumb);
			});
			docReady();
		})
		.catch(error => {
			console.error('Fehler beim Laden der Data: ', error);
		});
	</script>

[Andyneu]

@Klaus
wenn ich nächste Woche einen Augenblick Zeit habe werde ich es zusammenstecken und anschauen.
So vom Code her

[Andyneu]

@Tommy

Ich rede von Bildern, die in Mobirise eingefügt werden und nicht von Bildern, die via PHP-Script ausgelesen werden.

Ich rede genau von solchen Links die Mobirise eigenständig auf seine Struktur verändert. Da geht es nicht darum, dass ich direkte Bilder verlinke per PHP.
Das passiert auch bei anderen Verweisen aber eben nicht immer. Deshalb manchmal sehr "tricky" mit Mobirise und PHP.
Aber man bekommt es gelöst.

[Tommy Herrmann]

Moin,

ja - das meine ich ja. Deswegen absolute URLs, dann ändert Mobirise auch nichts.

Ist mir jedenfalls in 7 Jahren noch nie passiert.

[Klaus]

Ich hatte es gestern Abend noch fix mit dem alten 1er Angular versucht ... ist damit etwas einfacher und sieht besser aus (vom Code).
Nachteil ist dass AngularJS seit gut 2 Jahren nicht mehr weiter entwickelt und gewartet wird ...
... und dass man dann extra was schreiben müsste um zu wissen wenn das ng-repeat das letzte "Object" gerendert hat .
Dazu hatte ich dann keine Lust mehr ... Bsp. gibt es dazu aber ... aktuell verzögere ich Dein Skript halt um 2 Sekunden.

Ich bin damals (2016) nur noch ganz kurz in AngularJS (1) eingestiegen bevor wir dann Angular (2) für alles (vom Frontend) eingesetzt haben.

Das alte Angular konnte man halt mal fix in eine bestehende Seite einbauen und hatte viele Funktionen fertig die man so mit JavaScript selber schreiben müsste, mit dem neuen also ab Angular 2+ (aktuell 17) kann man das vergessen. Damit kann man nur komplette "Anwendungen" schreiben.