MySQL Datenbank auf Website Tabelle anzeigen
Re: MySQL Datenbank auf Website Tabelle anzeigen
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.
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.
Re: MySQL Datenbank auf Website Tabelle anzeigen
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! ;-)
Backend:
Frontend:
(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);
?>
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>
Re: MySQL Datenbank auf Website Tabelle anzeigen
@Klaus
wenn ich nächste Woche einen Augenblick Zeit habe werde ich es zusammenstecken und anschauen.
So vom Code her
wenn ich nächste Woche einen Augenblick Zeit habe werde ich es zusammenstecken und anschauen.
So vom Code her
Gruß Andy
Re: MySQL Datenbank auf Website Tabelle anzeigen
@Tommy
Das passiert auch bei anderen Verweisen aber eben nicht immer. Deshalb manchmal sehr "tricky" mit Mobirise und PHP.
Aber man bekommt es gelöst.
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.Ich rede von Bildern, die in Mobirise eingefügt werden und nicht von Bildern, die via PHP-Script ausgelesen werden.
Das passiert auch bei anderen Verweisen aber eben nicht immer. Deshalb manchmal sehr "tricky" mit Mobirise und PHP.
Aber man bekommt es gelöst.
Gruß Andy
- Tommy Herrmann
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: MySQL Datenbank auf Website Tabelle anzeigen
Moin,
ja - das meine ich ja. Deswegen absolute URLs, dann ändert Mobirise auch nichts.
Ist mir jedenfalls in 7 Jahren noch nie passiert.
ja - das meine ich ja. Deswegen absolute URLs, dann ändert Mobirise auch nichts.
Ist mir jedenfalls in 7 Jahren noch nie passiert.
Re: MySQL Datenbank auf Website Tabelle anzeigen
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.
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.
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 87 Gäste