WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 20.08.2021 12:18:47

jambo
Member

WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

Hi,

ich habe hier eine inzwischen richtig alte Webseite, die der Kunde neu haben möchte. Dabei würde er das bisherige CMS (dieses hier!) sehr gerne behalten. Ein großes Kompliment an alle hier finde ich :-)

Allerdings bin ich nicht sicher ob das aufgrund der Anforderungen möglich ist und würde gerne abklären, ob das überhaupt gehen würde.

Es soll (muss) eine Seite werden, bei der Seiten-Bausteine inklusive Animationen nachgeladen werden z.B. wenn der User am Seitenende angekommen ist oder eben klassiche auf Klick. Also eine typische Aufgabe, die heute oft mit React umgesetzt wird... aber React ist ja nicht die einzige Möglichkeit dynamische Bausteine zu realisieren.

Kann/könnte man die Anforderung mit WBCE zusammen bringen?
Bzw. hat das schon mal jemand gemacht bzw. gibt es Erfahrung damit hier?
Könnte Ihr ggf. ein Framework dafür empfehlen?

Eine erste grobe Idee für einen Ansatz wäre:

Eine Seite wird in WBCE ja in Blöcken (Sections) erstellt.
Die Blöcke sollten nicht auf einmal laden sondern entsprechend hintereinander (wenn Seitenende erreicht) oder eben auf Klick. Ich vermute, dann müsste man aber wohl in die Mechanik von WBCE eingreifen, da WBCE ja auotmatisch alle Blöcke iner Seite lädt?

Daher wahrscheinlich besser: Man erstellt eine Rumpfseite, die als erstes komplett geladen wird. Anschließend lädt man dann die Blöcke nach, die z.B. in Sections in einer Unterseite gespeichert werden (zugriff ähnlich wie mit Section Picker...)

Das einfach mal ins wirklich Unreine und als allererste Idee gedacht...

Achtung: mir ist bewusst, dass es die Tools dazu in WBCE wohl nicht gibt. Ich habe bei der Suche im Forum jedenfalls nichts gefunden. Aber das dynamische Nachladen von Sections (Bausteinen) sollte sich doch mit übersichtlichem Aufwand realisieren lassen ... und dann wäre WBCE evtl. gar kein so schlechter Rahmen dafür. Der Charme: dadurch ließe sich evtl. sogar eine recht übersichtliche Organisation-Struktur für die Blöcke entwickeln.

Freue mich über Rückmeldungen, Ideen und ggf. einen Gedankenaustausch, wie sich das realisieren ließe.

Jambo

Offline

#2 20.08.2021 14:37:47

colinax
Administrator

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

Hallo Jambo,

kannst du uns erklären was auf der Seite dargestellt werden soll?
Es lässt sich sonst nur schwer einschätzen was du haben möchtest bzw. umgesetzt werden soll.

Wichtiges vor weg, WBCE ist kein SPA (Single Page Application) aber WBCE kann AJAX und es ist möglich mit WBCE OnePager zu erstellen sowie im Frontend ein Skript einzubinden dass den Inhalt animiert einblendet wenn man runterscrollt.

Ich Zitiere hier mal Teile eines Kommentars von Georg zu diesen Thema:

Georg wrote:

Wir müssen hier mal zwei Dinge voneinander trennen. AJAX und SPA.

Eine SPA oder Single Page Application tut das, was zu Beginn des Beitrags beschrieben wird: Der Rahmen wird einmal geladen, danach nur noch die Teile, die sich ändern. (Siehe auch https:/­/­de.wikipedia.org/­wiki/­Single-Page-Webanwendung) Da SPAs viel Logik auf der Clientseite benötigen, werden sie klassischerweise hauptsächlich in JavaScript geschrieben. Bekannte Frameworks hierfür sind etwa AngularJS, React oder Vue.js.

WBCE ist in der Tat keine SPA und hatte auch nie den Anspruch, eine zu sein. Ein kompletter Umbau würde bedeuten, etwa 70 - 80% des Codes in JavaScript neu zu schreiben. Das betrifft dann selbstverständlich auch die Module. Die komplette Logik spielt sich nicht mehr auf dem Server ab, sondern auf dem Client, also im Browser. Auf dem Server befinden sich dann nur noch Backend-Komponenten wie z.B. der Zugriff auf die Datenbank. Der klassische WBCE-Benutzer - und auch Modulautor - wird das nicht wollen. Dafür gäbe es andere Systeme.

Interaktivitität via AJAX ist demgegenüber auch in WBCE problemlos möglich. Der einzige wirkliche Knackpunkt ist, dass ein via AJAX aufgerufenes Script quasi losgelöst vom Gesamtkontext des CMS ausgeführt wird. Anders gesagt, es weiß zunächst einmal nichts über die Berechtigungen des Benutzers, der es aufgerufen hat. Es muss die config.php selbst laden und dann ggfs. auch die notwendigen Berechtigungen selbst prüfen. Das ist mit Hilfe übergebener Parameter wie Seiten- und Section-ID durchaus möglich. Inwieweit das notwendig ist, muss der Modulautor im Einzelfall entscheiden.

Aus meiner Sicht liefert der Core bereits hinreichend Möglichkeiten für AJAX. Einige Module machen auch schon mehr oder weniger intensiven Gebrauch davon. Der mögliche Overhead durch das Laden der config.php, wie wiederum die initialize.php lädt, ist relativ gering, da die Informationen, die hierbei geladen werden - wie z.B. die Sprache, die Datenbank-Verbindung und diverse Konstanten - durchaus notwendig sind. Ein Aufruf der index.php ist indes nicht notwendig.

Fazit: Ja, WBCE ist keine SPA und hat auch nicht den Anspruch. Wer so ein "modernes" System haben möchte, muss sich anderweitig umsehen. AJAX bzw. das dynamische Nachladen von Inhalten innerhalb einer Seite ist hingegen mit WBCE auch jetzt schon sehr gut machbar. "Luft nach oben" gibt es natürlich immer.

Georg 13.08.2021

Offline

#3 20.08.2021 16:05:09

webbird
Administrator

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

Prinzipiell geht das, wird aber von WBCE selbst nicht weiter unterstützt. Du kannst also nicht z.B. bei den Einstellungen einer Seite sagen "lade nur die erste Section und alle weiteren erst beim Scrollen".

Ich habe aber z.B. ein Openimmo-Modul gemacht, bei dem das einfach per JavaScript geregelt ist. Da werden dann alle Wohnungen ausgeblendet bis auf die ersten X und wenn man scrollt werden immer die nächsten Y sichtbar geschaltet. Dafür gibt es fertige JavaScripts. Und ohne JS geht das ohnehin nicht.

Ich glaube das Ding heißt Scrollax. Nee, heißt wow.js, das Scrollax ist für einen Parallax-Effekt.

https://wowjs.uk/

Last edited by webbird (20.08.2021 16:09:21)


Ich habe eine Amazon-Wishlist. wink
Ich kann, wenn ich will, aber wer will, dass ich muss, kann mich mal

Offline

#4 20.08.2021 16:06:55

webbird
Administrator

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)


Ich habe eine Amazon-Wishlist. wink
Ich kann, wenn ich will, aber wer will, dass ich muss, kann mich mal

Offline

#5 20.08.2021 16:15:33

webbird
Administrator

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

Nachtrag: Bei der Lösung wird die komplette Seite ausgeliefert, es werden halt nur Teile unsichtbar geschaltet und erst beim Scrollen sichtbar. Echtes Nachladen während des Scrollens ist natürlich was anderes. Letzteres kann allerdings auch zu deutlichen Verzögerungen führen, insbesondere wenn der nachzuladende Inhaltsblock sehr umfangreich ist, z.B. mit vielen Bildern, während das Einblenden bereits geladenen Inhalts natürlich ganz geschmeidig funktioniert. Zudem erfordert die Lösung keine Änderungen in WBCE selbst.


Ich habe eine Amazon-Wishlist. wink
Ich kann, wenn ich will, aber wer will, dass ich muss, kann mich mal

Offline

#6 20.08.2021 17:24:11

jambo
Member

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

Das Beispiel

Ich hoffe, dass das jetzt nicht vermessen erscheint. Aber ja, die Vorlage für das neue Projekt (das steht ganz in der Anfangsphase) die kundenseitig ins Gespräch gebracht worden ist, ist:

apple.com
apple.com/iphone-12-pro

Die Kirschen hängen also hoch.
Wobei allerdings die Optik und die Animationen ein großer Teil davon ist.
Letztere sollen hier aber nicht das Thema sein.

Soweit ich das gesehen habe, werden auf der Seite nur die Medien klassisch per Ajax in ein HTML-Gerüst nachgeladen. Ein großer Teil der Animationen läuft wohl über CSS-Keyframes. Bei den Modals auf der Apple-Seite ist es - soweit ich es nur ganz kurz gesehen habe - aber der komplette HTML-Code, der nachgeladen wird.


Die Mechanik

Also kein SPA. Sondern es geht um klassisches AJAX. 

In WBCE sind die Seiten in Sections organisiert. Meine Idee bei diesem Projekt ist, den Inhalt einer Seite wie gewohnt in Sections zu organisieren und dann den Code einer Section in das entsprechende Basis-HTML-Gerüst (das Template) nachzuladen (nicht nur die Medien).


Die Fragen nach Beispielen und Realisation

Folgende Fragen stellen sich mir spontan:

  • Gibt es ggf.  schon eine API, mit der man in WBCE auf eine einzelne Section zugreifen kann ... also so etwas wie eine Single-Section-Picker-Page?

  • Wenn Module von Ajax in WBCE Gebrauch machen wie es in der Antwort beschrieben ist, kann mir jemand ein solches Modul nennen wo sich ggf. die Mechanik studieren lässt, wie das in WBCE organisiert worden ist?

  • Hat hier ggf. jemand Erfahrung damit in einem Projekt WBCE-Sections per AJAX nachzuladen (ich denke, ich bin da sicher nicht der erste): welche Fallstricke gibt es dabei zu beachten und gibt es ggf. ein Beispiel dafür

  • Gibt es Tipps/Erfahrung mit einem (PHP-basierten) Framework, dass sich im Zusammenspiel mit WBCE in der Praxis bewährt hat?

Oder mit anderen Worten: jeder HInweis hilft.

Offline

#7 20.08.2021 18:03:01

jambo
Member

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

@Webbird

Danke für die Infos.
Meine Antwort hatte sich überschnitten.

Wirklich schöne Seite mit angenehmen Animationen und nicht so überladen. Schön zugänglich.

Die Idee ist nicht verkehrt...

Die ganze Seite auf einmal laden wird wegen der Geschwindigkeit allerdings nicht gehen: zu viele und zu große Bilder. Mindestens die müssen nachgeladen werden, was aber mit JS nicht das Problem wäre und natürlich nicht viel mit WBCE sondern mehr mit dem Template zu tun hätte. Und ja, geschmeidig wird spätestens bei Videos wohl nur funktionieren wenn auch ein leistungsfähiger Server mit hoher Anbindung dahinter ist.

Mir ginge es tatsächlich um einen Ansatz für Organisation und Nachladen kompletter Code-Blöcke (WBCE-Sections).

Offline

#8 23.08.2021 08:43:29

webbird
Administrator

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

Also WBCE hat m.W. keine API, um einzelne Sektionen zu laden. Bezüglich der Bilder gibt es sicherlich Möglichkeiten per JavaScript, die völlig unabhängig von WBCE als darunterliegendem System sind. Aber vielleicht haben die anderen ja noch Ideen dazu.


Ich habe eine Amazon-Wishlist. wink
Ich kann, wenn ich will, aber wer will, dass ich muss, kann mich mal

Offline

#9 26.08.2021 09:39:42

florian
Administrator

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

Eine solche API gibt es leider nicht. Mir fiele auch nur clientseitiges "faken" mit Animate On Scroll, wie dies z.B. das Modul Blockrocker macht, ein.
Ich kenne mich mit der AJAX-/React-Thematik überhaupt nicht aus, ich kann deshalb zu dem Thema nichts weiter sagen.
Ich möchte aber betonen, dass ich keine Einwände dagegen hätte, würden entsprechende Möglichkeiten core-seitig entwickelt werden.

Last edited by florian (26.08.2021 09:39:56)

Offline

#10 27.08.2021 07:05:17

zx80
Member

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

Hallo in die Runde,

hatte für einen Kunden so etwas in die Art umgesetzt. Abschnittsweises nachladen einzelner Divs in Abhängigkeit der Scrollposition der angezeigten überlangen Seite. Nicht direkt mit Ajax, sondern mit einem  jQuery Plugin Appear.js, kombiniert mit WBCE Abschnitten mit CSS Klassenname bzw. teils auch mit OFA Inhalten. Nativ beherrschen die meisten Browser lazy loading ja bereits für Videos, Bilder, iFrames.

http://creativelive.github.io/appear/examples/lazy/
https://stackoverflow.com/questions/640 … ax-or-java

Nicht ganz das, was angefragt wurde, aber ggf. ein erster Ansatz. Unter dem Suchbegriff dynamic progressive loading findet man auch einige Beispiele für die Implementierung mit PHP/JS.

Grüsse zx80

Last edited by zx80 (27.08.2021 07:08:20)

Offline

Liked by:

florian

#11 27.08.2021 11:11:49

zx80
Member

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

Hallo in die Runde,

anbei ein PHP Proof of Concept (POC). Der Code "simuliert" die Antwort eines "imaginären" Ajax Requests und gibt ein JSON-Object mit Status-Code und Inhalt der angeforderten Section-Id (?sid=x) bzw. einer aussagekräftigen Fehlermeldung im Fehlerfall im Browser zurück. Mögliche [wblinks] im Content der Sektion werden vor der Ausgabe mittels OPF-Filter in richtige Links umgewandelt. Wie man mittels Javascript/PHP einen Ajax-Request ausführt, wird als bekannt vorausgesetzt und ist nicht Teil dieses POC.

Vorbereitung und Aufruf
Der unten dargestellte PHP Code muss in eine neu zu erstellende PHP Datei ins WBCE Root Verzeichnis kopiert werden und wird dann im Browser mit angehängtem GET-Parameter (www.domain.tld/dateiname.php?sid=x) aufgerufen. Im Browser wird ein JSON-Objekt mit Status-Code und Inhalt/Fehlermeldung der angeforderten WBCE Sektion zurückgeliefert.

Einschränkungen
Der Code wurde nur mit WBCE 1.5.0 getestet, sollte aber ab WBCE 1.4.0 laufen. Es wird angenommen, dass die angefragte Sektion ein WYSIWYG Abschnitt ist. Sprich für andere Arten habe ich das nicht getestet und mangels eigener Verwendung auch nicht vor zu implementieren. Es wird zumindest rudimentär geprüft, ob der Benutzer die Berechtigung hat die Seite anzusehen. Es wurde keinerlei Fehlerbehandlung etc. eingebaut. Das ganze ist als POC (Proof of concept) zu verstehen und sollte nur von Leuten verwendet werden, denen Ajax, Request-Handler etc. keine Fremdwörter sind. Wer nicht weiß, was er mit dem Code anfangen soll, braucht ihn auch nicht :-).

Hier der POC

[== PHP ==]
<?php
// This file simulates an Ajax request handler (WBCE 1.4.0 onwards).
// It fetches the content of a given section id and returns a JSON object with status and content.
// For now we assume all sections are WYSIWYG sections.

// Extract section ID (SID) from URL GET parameter.
$sid = isset($_GET['sid']) ? (int) $_GET['sid'] : -1;
if ($sid <= 0) {
    outputJsonAndDie(false, "Defined section ID is invalid.");
}

// Get section details from WBCE database, check page visibility and
// extract section content and apply OPF output filters on it.
require_once __DIR__ . '/config.php';
outputSectionContentAsJson($sid);
die();

//---------------------------------------------------------------------
// Helper function to fetch content from requested SID (WYSIWYG).
//---------------------------------------------------------------------
function outputSectionContentAsJson($sid) {
    // Create WBCE objects required.
    $frontend = new Frontend();
    $database = new Database();
    
    // Check if requested section ID exists in WBCE database.
    $sql = 'SELECT * FROM `{TP}sections` WHERE `section_id` = ' . $sid;
    $result = $database->query($sql);
    if ($result->numRows() == 0) {
        $content = "Requested section ID does not exist in database.";
        outputJsonAndDie(false, $content);
    }
    
    // Get page id and module type for requested section ID.
    $section = $result->fetchRow();
    $page_id = $section['page_id'];
    $section_id = $section['section_id'];
    $module = $section['module'];
    
    // Get page details of requested section.
    $page = null;
    $sql = 'SELECT * FROM `{TP}pages` WHERE `page_id` = ' . $page_id;
    $result = $database->query($sql);
    if ($result->numRows() > 0) {
        $page = $result->fetchRow(MYSQLI_ASSOC);
        
        // Check if actual user is allowed to view requested page/section.
        if ($frontend->page_is_visible($page)) {
            // Fetch section content from requested module view.php.
            ob_start();
            require_once WB_PATH . '/modules/' . $module . '/view.php'; 
            $content = ob_get_contents();
            ob_end_clean();
            
            // Apply OPF filter on section content e.g. to convert wblinks into qualified links.
            $opfFunctionsPath = WB_PATH . '/modules/outputfilter_dashboard/functions.php';
            if (is_readable($opfFunctionsPath)) {
                require_once $opfFunctionsPath;
                if (function_exists('opf_apply_filters')) {
                    $content = opf_controller('page', $content);
                }
            }
			
            return outputJsonAndDie(true, $content);
        }
    }
    
    $content = "No permission to view the requested page/section.";
    return outputJsonAndDie(false, $content);
}

// Return JSON object with status and content and exit.
function outputJsonAndDie($status, $content) {
    header('Content-Type: application/json');
    $json = json_encode(array("status" => $status, "content" => $content));
    echo $json;
    die();   
}

Anmerkung
Der Code soll Leuten die etwas damit anzufangen wissen als Grundlage für eigene Experimente dienen. Ich für meinen Teil habe nicht vor, den aktuellen Stand für einen Verwendungszweck jenseits des hier geposteten POC zu erweitern.

DISCLAIMER: Das ganze ist ein POC und sollte daher nicht auf Live-Servern verwendet werden. Ich habe das ganze auf einer XAMPP Testinstallation laufen. Ich habe auch nicht mit HTTPS getestet, nur mit HTTP.

Viel Spaß beim Basteln
zx80

P.S.: Für ein einfaches "nachladen" würde ich aber einfach das JQuery Skript einen Post darüber zusammen mit WBCE-Bordmitteln (sprich einfach Inhalt der langen Seite auf mehrere Sektionen mit CSS-Klasse aufteilen) verwendet. Aber wer weiß für was oder wen der hier gepostete Code gut ist  smile

[Edit]Disclaimer hinzugefügt.

Last edited by zx80 (02.09.2021 05:54:50)

Offline

Liked by:

berny, mrbaseman

#12 28.08.2021 21:56:25

zx80
Member

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

Hallo in die Runde,

der obige POC Code könnte je nach Verwendungszweck natürlich weiter optimiert werden. Für reine WYSIWYG Abschnitte könnten die Datenbankabfragen reduziert und auf die Einbindung (require) der view.php verzichtet werden, wenn man z..B.. direkt die mod_wysiwyg abfrägt. Der POC-Code entspricht mehr oder minder dem WBCE Core-Code der Root index.php halt nur auf das wesentliche reduziert.

Für das simple „hochzählen“ eines Wertes in der WBCE Datenbank via Ajax wäre der Code viel simpler. Beispiele für Ajax Handler hierzu findet man z.B. im wahrscheinlich ersten mir bekannten Ajax Modul Postits (Unterordner /code).

Grüße zx80

Last edited by zx80 (28.08.2021 21:57:06)

Offline

#13 30.08.2021 11:09:07

jambo
Member

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

Ganz herzlichen Dank für die Antworten und vor allem für das Code-Beispiel.



@zx80:

Ich bin zwar (nicht nur etwas) aus WBCE draußen ... aber so wie ich den Code lese (und verstehe) ist das ein Ansatz auf dem sich aufbauen lässt bzw. ist ja schon in einfachster Form verwendungsfähig. Und ich würde sagen: genau das was gefragt wurde ;-) :-)

Im Prinzip ist das ja auch schon fast so etwas wie eine rudimentäre API. Einfach eine "WBCE-Url", die über einen Parameter eine Section als JSON zurückgibt.

Ließe sich sicher ausbauen auf reine HTML-/JS- und (ja) CSS-Sections ausweiten... die sich für fortgeschrittene Techniken ggf. zusammensetzen ließen ...

Was ich nicht ganz verstanden haben ist der WBCE-URL-Aufruf:
www.domain.tld?dateiname.php?sid=x
Wieso wird da "?dateiname.php" als Parameter mit ausgeliefert ... vermute aber das Fragezeichen soll wohl eigentlich ein "/" sein?



@Anmerkung allgemein

Die Ajax-Abfrage selbst und das Einfügen ist heute wie zx80 schreibt wirklich unproblematisch und übersichtlich sobald man sich ein wenig damit beschäftigt ... wenn die URL gegeben ist können Abfrage und Inhalte einfügen dann mit JS auf unterschiedlichste Art und Weise erfolgen. Der Code dazu ist für die meisten Anwednugne sogar recht übersichtlich. Ich bevorzuge dafür wegen Schnelligkeit und Unabhängigkeit inzwischen Vanilla zumal ja auch die modernen Frameworks mehr und mehr von JQ abrücken ... Beispiele sind genug im Netz zu finden.

Daher vermute ich, dass die Ajax-Abfragen selbst nicht Bestandteil einer solchen "API" sind (sein sollten/müssen) es sei denn als ein Beispiel, wie sich der Code abrufen und einfügen lässt oder man hinterlegt in WBCE ein paar grundlegende JS-Funktionen, so dass die von Projekten als JS-Script optional geladen/aktiviert und verwendet werden können.



@Florian

Die Entwicklung und Aufnahme einer solchen API in den Core wäre natürlich klasse. Ich denke, dass AJAX im modernen Webdesign auch für Visitenkarten-Seiten (also die typischen WBCE-Seiten) heute aus meiner Sicht fast nicht mehr wegzudenken ist. Wenn ein CMS eine solche Funktion schon in einfacher Form unterstützen würde wäre das natürlich großartig ... und ich denke wirklich, dass WBCE mit der Section-Seiten-Struktur für die Organisation der Inhalte geradezu prädestiniert wäre.

Ich spinne mal rum was mir dazu einfallen würde:


Einfach (wahrscheinlich nicht so aufwendig):
Vielleicht Starter ...?
---------------------------------------------------------------------

  • Section-/Modul-Typ mit (neuer) Ajax-Abfrage-Berechtigung

  • Einfache Form im Prinzip wie oben im Beispiel beschrieben

  • Mögliche Anwendung auf auf einfache Code-Sections (z.B. HTML)

  • Ein-/Ausschalten der API-Funktion im Backend


Fortgeschritten (vermutlich schon ziemlich aufwendig):
Vielleicht schrittweiser Ausbau ...?
-----------------------------------------------------------------------------------

  • AJAX-Modul-Typ bündelt Content-Typen, die optional in getrennten Eingabefeldern erfasst werden können:

  • WYSIWIG

  • HTML

  • CSS

  • JS

  • Diese werden im Block gebündelt und ausgeliefert (also Möglichkeit auch CSS und JS zu organiseren und auszuliefern)

  • ODER wahrscheinlich besser: die verschiedenen Blöcke werden direkt beim Speichern zusammen gefasst und in der DB gleich als JSON gespeichert

  • Optionale Auslieferung in JSON oder HTML-Block direkt (steuerbar über API-Parameter)

  • Wahrscheinlich nicht einfach: evtl. automatische Mehrsprachigkeit bei einem API-Aufruf



[NACHTRAG] Und für Future-Pages:
Vollautomatik für den einfachen Webdesigner...?
--------------------------------------------------------------------------

  • Sections können alllgemein als AJAX-Sections gekennzeichnet werden

  • JS-Funktionen werden als Script automatisch eingebunden

  • WBCE erstellt dann auf der Seite für eine AJAX-Section automatisch einen Wrapper mit dem entsprechenden JS--Maker/-Code (z.B. Steuerung über Data-Attribute)

  • ... und läd den Code dieser Sections dann dann per AJAX nach

Letzteres könnte eine Lösung sein, die es auch unerfahrenen Programmierern auf einfach Art und Weise ermöglicht,die AJAX-Funktionen zu realisieren ... was für die meisten Seiten ausreichen würde.



Dies ist wirklich nur als Idee gedacht da Du das angesprochen hattest. Blöd wie immer: es müssen sich natürlich hier Leute finden, die da mitwirken. Sollte das Projekt kommen wäre von meiner Seite aus ein Mitwirken (voraussichtlich) denkbar/möglich. Für mich vielleicht ein (nicht unbedingt unerwünschter) Anlass, zu den Anfängen zurückzukehren.

Und ein Kompliment: es ist wirklich beachtlich, was hier entstanden ist.



@All:

Freue mich über weitere Anregungen und oder über einen weiteren Austausch zu dem Thema.



------------------------------
Es muss ja kein REACT und auch kein Shadow-DOM sein. Für die meisten Ajax-Aufgaben auf den meisten Seiten reichen meiner Meinung nach recht einfache Ajax-Abfragen aus um die heute immer mehr geforderte Schnelligkeit zu realisieren... Aber der Content muss auch heute unverändert für einen Redakteur zugänglich organisiert werden ...

Last edited by jambo (30.08.2021 11:29:43)

Offline

#14 30.08.2021 15:21:01

zx80
Member

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

jambo wrote:

Ganz herzlichen Dank für die Antworten und vor allem für das Code-Beispiel.
@zx80:

Was ich nicht ganz verstanden haben ist der WBCE-URL-Aufruf:
www.domain.tld?dateiname.php?sid=x
Wieso wird da "?dateiname.php" als Parameter mit ausgeliefert ... vermute aber das Fragezeichen soll wohl eigentlich ein "/" sein?

Uups, danke. Habe die Url im Codebeispiel entsprechend korrigiert.

Was den möglichen Ausbau angeht. Das Zusammensetzen des HTML Codes ist - mal abgesehen von den nachträglich hinzugefügten Filtern für E-Mail, Droplets und später OPF - teils noch etwas Gefrickel aus der Anfangszeit (WB 2.x). In der index.php wird u.a. die Seitenberechtigung geprüft, HTML der Seite bzw. Abschnitte zusammengebaut und durch den Filter gejagt und dann ausgeben. Das könnte man stückweise aufdröseln und in kleine Helfer-Methoden auslagern/übernehmen, die man dann ggf. für eigene Ajax-Sachen nutzen kann. So ähnlich habe ich das im POC-Code ja auch gemacht.

Möglich ist wie gesagt bereits jetzt vieles mit den bereit gestellten Klassen und Helper-Funktions des Core. Eine richtige coole API wie z.B. im für Entwickler recht interessanten CMS ProcessWire - welches aber nicht an die simple Bedienung von WBCE herankommt - ist natürlich richtig Arbeit und unter dem Gesichtspunkt der Modul- und Template Kompatibilität eher schwierig im Core des 1.x Zweigs umsetzbar. Am ehesten noch als ausgelagerte Helfer denkbar.

Grüße zx80

Last edited by zx80 (30.08.2021 16:12:44)

Offline

#15 31.08.2021 07:23:44

berny
Member

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

Ist das nicht eher eine Template-Geschichte?

Neben der Datei müsste dann ja auch das Menü entsprechend umgebaut werden, oder sehe ich das jetzt falsch?

Offline

#16 31.08.2021 17:59:32

jambo
Member

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

@berny

Die Antwort lautet: halb und halb.



Bei einem AJAX-Abruf werden Teile der Seite erst nachträglich geladen. Beispiele dafür sind:

Modals (Pop-Up-Boxen):
Das Nachladen der Inhalte erfolgt, wenn auf den Öffnen-Button geklickt wird.

Sections (Seitenabschnitte), die weiter unten auf der Seite sind und beim Start nicht im Sichtbereich des Users sind:
Die Section wird nachgeladen unmittelbar bevor sie beim Scrollen den Sichtbereich im Browsers erreicht.

... u.w.

Dadurch, dass immer nur der Content (=HTML + benötigte Teile des CSS/JS) geladen wird, den der Besucher gerade sieht/benötigt erhöht sich die Ladegeschwindigkeit. Oder aber Inhalte auf der Webseite werden ohne Nachladeprozess (Seitenaktualisierung) aktualisiert. Das Benutzererlebnis der Seite erhöht sich ungemein, - und das nicht nur theoretisch sondern real fühlbar.

Ajax-Abfragen sind im modernen Webdesign inzwischen Standard. Auf komplexen Seiten wie z.B. Facebook wird die Technik über Frameworks wie REACT bis ins Extrem getrieben. Facebook besteht fast nur noch aus Ajax-Abfragen, die die Seite individuell für den Nutzer aus Bausteinen individuell personalisiert zusammensetzt.



Die Organisation, das redaktionelle Erfassen und Serverseitige Bereitstellen der Inhalte einer Seite ist Aufgabe eines CMS. Da WBCE die Seite sowieso in Blöcken (Sections) organisiert ist WBCE eigentlich auch für die Organisation von AJAX-Abfragen prädestiniert.

In dem Thread hier geht es nun darum, wie man dem CMS beibringen kann, per URL auf einzelne Content-Blöcke (Sections) zugreifen zu können. Das wäre die einfachste Variante und für die grundlegenden Techniken und die meisten Standardseiten eigentlich schon ausreichend. Der Abruf erfolgt dann wie von zx80 gezeigt über einen Seitenaufruf wie "www.meineSeite.de?secID=x&pageFormat=json&...", der die Inhalte der gewünschten Section z.B. als HTML- oder JSON-Code zurückgibt.

Im fortgeschrittenen Fall sollte es dabei auch möglich sein CSS-/JS-Blöcke für die jeweilige Section erfassen/organisieren zu können. Also für jede Section auch einen gesonderten CSS- und JS-Block zuordnen zu können, der dann bei der Abfrage des Blockes mit ausgeliefert wird.

Das sind Aufgabenstellungen, die in den Bereich CMS-Erweiterung (Sie es nun als Modul oder über den Core) gehören. Selbstverständlich kann das wie von zx80 beschrieben auch über eine einzelne Datei passieren, die für das Projekt dem CMS (nicht dem Template) hinzugefügt wird... eine Integration in WBCE wäre allerdings ein zusätzliches Merkmal, das einige andere CMS-Systeme schon mitbringen und die Funktionalität zukunftsorientiert erhöhen würde.



Der Ajax-Abruf der Inhalte ist dann eine Aufgabenstellung im Template. Diese wird sehr unterschiedlich gehandhabt: unterschiedlicher Code, unterschiedliche Verarbeitung des Contents (Zuweisung im HTML auf der Seite), unterschiedliche Frameworks. Das ist tatsächlich mehr eine Template-Aufgabe und die Umsetzung fällt unter die Vorlieben des  jeweiligen Webdesigners.

Wobei es für nicht so fortgeschrittene Benutzer hilfreich sein könnte, auch diesen Prozess zu vereinfachen und zu automatisieren. Dies könnte erfolgen, indem seitens des CMS eine kleine JS-Bibliothek bereit gestellt wird und für einen AJAX-Abruf der Inhalte dem HTML-Wrapper im Template nur noch ein 'data-Attribut' hinzugefügt werden müsste. Das wäre allerdings ... wirklich eine über die Anfrage hier weit hinausgehende Aufgabenstellung ... ;-)



Ich für meinen Teil denke jedenfalls, das Thema AJAX bietet eine Menge Musik für WBCE ... sei es nun in kleiner oder 'größerer' Lösung. Bin hier aber wirklich nur Gast.

Offline

Liked by:

berny

#17 01.09.2021 08:50:45

webbird
Administrator

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

Die vermutlich größte Herausforderung beim Nachladen von Inhalten über AJAX ist das Prüfen der Berechtigungen. Es muss verhindert werden, dass über den direkten Aufruf einer - nennen wir sie mal AJAX-Schnittstelle Inhalte abgerufen werden können, die man sonst nicht sehen dürfte. Webcrawler klappern ja alles ab, im harmlosesten Fall hat man dann plötzlich Inhalte im Index einer Suchmaschine, die da nichts zu suchen haben. Im schlimmsten Fall hat man Inhalte exponiert, die Spammern und / oder Hackern Tür und Tor öffnen. Etwa Mitgliederlisten samt Anschriften, Telefonnummern, Mitgliedsnummern und Mailadressen.


Ich habe eine Amazon-Wishlist. wink
Ich kann, wenn ich will, aber wer will, dass ich muss, kann mich mal

Offline

Liked by:

mrbaseman

#18 01.09.2021 21:45:53

zx80
Member

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

Hallo in die Runde,

anbei noch ein POC für einen möglichen Ajax Event-Handler in Vanilla Javascript (ES6 Browser). Der JS-Code muss mit dem PHP-Code aus Post 11 kombiniert werden. Beide POC ergeben zusammen einen rudimentären "dynamischen Ajax-Load von Bausteinen" aus WBCE Abschnitten/Sektionen, wie vom Fragesteller dieses Threads angefragt.

Ich habe das im POC mit einer normalen WYSIWYG Seite auf einem lokalen XAMPP getestet. Beim Scrollen auf der Seite werden dann automatisch weitere Inhalte aus frei anzugebenden SectionIds (werden im Code-2 JS Abschnitt angegeben) nachgeladen und angezeigt.

[== JavaScript ==]
//------------------------------------------------------------------
// Basic configuration.
//------------------------------------------------------------------
// URL to the POC-Code script file in your WBCE root.
const getSectionUrl = 'http://domain.tld/get_section.php';

// ID of container element used to inject section content (must be added e.g. at end of WYSIWYG section using code view).
const containerIdToAppendTo = 'scroll';

// Define section_ids you want to show when scrolling this page in frontend.
const sectionIds = [2, 1, 3];

//------------------------------------------------------------------
// No changes required below unless you now what you do.
//------------------------------------------------------------------
// Load section data and inject HTML into defined container element.
function appendSection(sid) {
    const div = document.createElement('div');
    fetch(`${getSectionUrl}?sid=${sid}`)
       .then(response => response.json())
       .then(data => div.innerHTML = data.content);
    document.getElementById(containerIdToAppendTo).appendChild(div);
}

// Very rough and basic event listener to dynamic load data when scrolling.
window.addEventListener('scroll', (event) => {
    if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
        const sectionId = sectionIds.pop();
        if (Number.isFinite(sectionId)) {
    	    appendSection(sectionId);
    	}
    }
});

Schritte um das ganze zu testen:

  1. WBCE 1.5.0 Installation mit unverändertem Frontend-Template WBCETik und Mozilla Firefox 91.0.2 auf Windows 10

  2. Den PHP-Code aus Post 11 in eine Datei get_section.php kopieren und in das Wurzelverzeichnis der WBCE Installation kopieren

  3. Eine WYSIWYG Seite anlegen und etwas Text (am besten so dass man scrollen muss) hinzufügen

  4. Am Ende der WYSIWYG Seite einen div mit id=scroll

  5. Auf der WYSIWYG Seite einen weiteren Abschnitt vom Typ Code2 einfügen und den oben geposteten Code einfügen

  6. Variablen im JS-Code anpassen (URL zum Skript, Section_Ids zum anzeigen, den in Schritt 4. erstellten DIV mit ID)

  7. Seite im Frontend aufrufen und etwas scrollen. Sollten keine Scrollbalken erscheinen, einfach solange Zoomen, bis Scrollbalken angezeigt werden. Dann werden beim Scrollen (ruhig mal hoch/runter) die Inhalte der angegebenen Section_ids nach und nach geladen und eingebunden

So siehts das bei mir im Backend aus
Bitte Bild im Anhang anschauen (nur für angemeldete Besucher sichtbar).

Das ganze wurde mit WBCE 1.5.0 und dem Standardtemplate WBCETik getestet. Das Scrollerlebnis ist Quick und Dirty und nicht wirklich alltagstauglich, sollte aber das dahinterliegende Konzept veranschaulichen. Mit dem entsprechendem Seiten-Zoom klappt es auf jeden Fall.

DISCLAIMER:
Das ganze ist ein POC und sollte daher nicht auf Live-Servern verwendet werden. Ich habe das ganze auf einer XAMPP Testinstallation laufen. Ich habe auch nicht mit HTTPS getestet, nur mit HTTP.

Viel Spaß beim Probieren
zx80

P.S.: Ich klinke mich dann mal wieder etwas aus. Das grobe Konzept sollte klar sein und ggf. für eigene Versuche als Anreiz dienen.

Last edited by zx80 (02.09.2021 17:07:38)

Offline

#19 02.09.2021 05:45:26

berny
Member

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

ev das Jacascript mittels droplett erzeugen, über das droplett die Sections definieren, dann erübrigt sich der ganze code-Abschnitt.

Denkfehler?

Offline

#20 02.09.2021 06:01:51

zx80
Member

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

Hallo berny,

berny wrote:

ev das Jacascript mittels droplett erzeugen, über das droplett die Sections definieren, dann erübrigt sich der ganze code-Abschnitt.
Denkfehler?

Da kann man natürlich gerne so machen - oder auch Teile ins Template auslagern - oder beliebig weiter ausbauen (nachladen von CSS, JS ...). Zum schnellen nachvollziehen des POC tut es aus meiner Sicht aber zunächst auch erstmal ein Code2-Abschnitt. Denke ehrlich gesagt auch nicht, dass dieser POC für die Mehrheit der WBCE Nutzer von praktischer Bedeutung ist - oder sein wird smile.

Mir ging es in erster Linie darum, die notwendigen Mechanismen wie Ajax Page Load beim Scrollen (Post 18) in Kombination mit der serverseitigen Extraktion von Inhalten aus einer Sektion anhand einer Sektion-Id mittels PHP und WBCE Core Funktionen (Post 11) darzustellen.

Wer mag darf die beiden POC gerne nach herzenslust weiter spinnen, in ein Modul oder Droplet verpacken und dann hier wieder anhängen. So hätten dann ggf. alle Interessierten etwas davon.

Grüße zx80

Last edited by zx80 (02.09.2021 06:23:00)

Offline

#21 02.09.2021 16:28:44

jambo
Member

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

@zx80

Große klasse ... viel mehr als ich bei meiner Anfrage erhofft habe. Danke für Deine Ausführungen und Demos UND Deine Zeit. Ajax wird ja im Webdevelopment immer wichtiger ... so dass es bei entsprechender Bereitstellung das Thema - und damit auch das Beispiel - vielleicht doch auch für mehr User hier praktische Bedeutung erlangen wird als gedacht. Immerhin gehört dieser Thread von den Zugriffszahlen her ja immerhin zu denen, die etwas mehr Beachtung finden ... sind vielleicht wohl doch einige neugierig interessiert ;-)

Vielleicht finden sich hier ja auch wirklich Interessenten, die die Vorlage für den Core von WBCE weiterführen wollen ... oder als Modul anlegen wollen ... Anregungen sind da ja jetzt wirklich vorhanden. Mir wird das helfen sofern das Projekt real wird ... die Frage nach der Machbarkeit ist jedenfalls mehr als beantwortet. Dankeschön für Dein Engagement.

Eine Frage noch:
Ohne aktuell zu testen (sorry, ich bin wirklich erst noch in der Abklärungsphase des Projektes und der WBCE-Wiedereinstieg ist nach der Zeit doch mit einiger Wiedereinarbeitung verbunden, wobei die Anregungen und Anmerkungen auch zwischen den Zeilen mir sehr helfen): soweit ich den JS Code verstehe sieht das sauber und 'klassisch' aus. Du schreibst "das Scrollerlebnis ist Quick und Dirty und nicht wirklich alltagstauglich". Kannst Du kurz sagen wo die Haken bei dem kurzen Test waren bzw. wo es 'geruckelt' hat?

Offline

#22 02.09.2021 17:00:19

zx80
Member

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

jambo wrote:

@zx80
Große klasse ... viel mehr als ich bei meiner Anfrage erhofft habe. Danke für Deine Ausführungen und Demos UND Deine Zeit.

Danke. Hat mir auch Spass gemacht, mich mal wieder etwas näher mit dem WBCE-Core und Ajax zu beschäftigen. Also win win smile

jambo wrote:

Du schreibst "das Scrollerlebnis ist Quick und Dirty und nicht wirklich alltagstauglich". Kannst Du kurz sagen wo die Haken bei dem kurzen Test waren bzw. wo es 'geruckelt' hat?

Klar. Wenn der anfängliche Inhalt der Seite (im WYSIWYG Abschnitt) nicht lang genug ist, gibt es im Browser keine Scrollbar und damit wird auch kein Scrollevent ausgelöst und nix wird nachgeladen. Daher muss man ggf. in den Browser zoomen, bis die Scrollbars kommen, dann klappts auch. Könnte man mit CSS und etwas mehr JS noch lösen, dazu hatte ich aber keine Muse. Daher Q&D - quick and dirty cool Alternativ im ersten WYSIWYG Abschnitt einfach genug Content für alle Screengrössen erstellen, dann klappts auch mit dem Scrollen. Zusätzlich noch mit etwas CSS pimpen etc.

Grüße zx80

Last edited by zx80 (02.09.2021 17:09:44)

Offline

#23 19.10.2021 20:34:01

mrbaseman
Developer

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

Hallo,

sehr schön. Gerade in dem  POC aus post #11 sind ein paar wichtige Details drin:

  • die Section ID (sid) wird nach int konvertiert -> verhindert sql incjections

  • Prüfung ob die sid überhaupt existiert

  • Prüfung ob die Seite im Kontext eines evtl. angemeldeten users (bzw. auch ohne Anmeldung) überhaupt sichtbar ist

  • Anwendung der Output-Filter

Die Schwierigkeit beim Nachladen per Ajax ist unter anderem, dass man ja clientseitig theoretisch alles zusammenbasteln und an den Server schicken könnte. Dter Server darf dann aber nicht dem Clienten einfach alles glauben. Die Versuchung ist groß, dem Clienten bereitwillig Auskunft zu geben, aber bei der Antwort auf die Anfrage "gib mir mal die Section mit der ID $sid" muss hier auch immer überprüft werden, ob der Client diese denn überhaupt sehen darf (z.B. soll sie nur für angemeldete User einer bestimmten Gruppe sichtbar sein, wie sieht's mit Start- und Enddatum der Veröffentlichung aus, ...).

Es freut mich, dass diese Themen in dem obigen Code schon mit berücksichtigt sind - und dass dafür die Core-Funktionen verwendet werden. Sollte sich etwas ändern an dem Konzept welche Inhalte sichtbar sind, dann wären die Änderungen an den Core-Klassen in dem hier vorgeschlagenen Code gleich mit wirksam. Das gefällt mir sehr.

Gruß Martin

Offline

#24 23.11.2021 18:09:49

zx80
Member

Re: WBCE-"React": Dynmischer Ajax-Load von Bausteinen (Sections)

Hallo,

mrbaseman wrote:

Die Schwierigkeit beim Nachladen per Ajax ist unter anderem, dass man ja clientseitig theoretisch alles zusammenbasteln und an den Server schicken könnte. Dter Server darf dann aber nicht dem Clienten einfach alles glauben. Die Versuchung ist groß, …

Es freut mich, dass diese Themen in dem obigen Code schon mit berücksichtigt sind - und dass dafür die Core-Funktionen verwendet werden.

Danke für die Blumen, aber clientseitige Anfragen ohne serverseitige Prüfung sollten gut 21 Jahre nach den berühmt berüchtigten Nuller-Jahren und der Sturm-und-Drang-Phase der schnell gestrickten und massenweise kopierten PHP 3/4 Codeschnippsel wirklich der Vergangenheit angehören. PHP und sein Ecosystem haben sich seit der fünften Hauptversion auch stetig weiterentwickelt. In den OWASP Top 10 sind mittlerweile SQL-Injection und Co. auch etwas nach hinten gerutscht, werden uns aber wohl noch ein paar Jährchen begleiten.

Grüsse zx80

Last edited by zx80 (23.11.2021 18:12:32)

Offline

Board footer

up