Tutorial


Bitte ladet Euch die Skripte von der Seite von Werner-Zenk.de herunter.

Entpackt die herunter geladene ZIP-Datei "mysql_nachrichten.zip" mittels Doppelklick.

Ich verwende und beschreibe hier die Version vom 30.08.2020, die eine MySQL-Datenbank benötigt und PHP 7.2 oder höher am Server. Lest auch die Datei "lies_mich.txt", die dem Download beiliegt.

Erstellt im Kundenmenü von Eurem Provider eine neue MySQL-Datenbank und notiert Euch die Zugangsdaten.

Öffnet nun mit einem Text-Editor wie "Notepad++" , damit die Kodierung kontrolliert auf "UTF-8" bestehen bleibt, die Konfigurationsdatei:

verbindung.php


Tragt gleich oben die Zugangsdaten zu der MySQL-Datenbank ein, was dann ungefähr so aussieht:

### VERBINDUNGSDATEN ###
// Verbindungsdaten zur Datenbank 
$DB_HOST = "db1000123456.hosting-data.io"; // Datenbank-Host 
$DB_NAME = "dbs123456"; // Datenbank-Name 
$DB_BENUTZER = "dbu123456"; // Datenbank-Benutzer 
$DB_PASSWORT = "ich123456"; // Datenbank-Passwort

Tragt etwas tiefer Den Namen und das Passwort des Administrators ein:

$AUTOR = [
    "Mein-Name" => [ # Benutzername 
        'pass' => "ich123456", # Passwort 
        'admin' => true # Admin. (true/false) 
    ], 

Solltet Ihr weiteren Autoren Zugang gewähren wollen, tragt Ihr etwas tiefer deren Namen und Passwort ein, vergesst nicht die beiden // zu entfernen, die in PHP eine Zeile deaktivieren. Jeder zusätzliche Benutzer kann nur die eigenen Beiträge ändern. Ihr könnt beliebig viele zusätzliche Autoren durch Kopieren hinzufügen. Der Administrator kann dagegen alle Beiträge ändern.

// Weitere Autoren / Administratoren
"Benutzer2" => [ # Benutzername 
 'pass' => "0002", # Passwort 
 'admin' => false # Admin. (true/false) 
 ], 

// "user3" => [ # Benutzername 
// 'pass' => "0003", # Passwort 
// 'admin' => false # Admin. (true/false) 
// ], 


Es folgen jede Menge möglicher Einstellungen, die alle sehr gut kommentiert und somit selbsterklärend sind. Probiert diese aus und testet es.

Ich habe hier z.B. ein Auswahlfeld zur Sortierung der Anzeige mit gewählt. Dort kann man die Nachrichten sortieren, wie z.B. nach Autor, Bild, Datum, Titel oder Pin. Dabei steht hier "Pin" für im Editor gewählte Beiträge, die oben angeheftet erscheinen sollen - also angepinnt sind (ich habe hier keine solchen Beiträge).

Insgesamt kann man in dieser Datei eben auch angeben, welche Optionen überhaupt angezeigt werden sollen, wie z.B. auch eine Seitenübersicht oder ob eine Navi oben und unten angezeigt werden soll (hier nur oben).


Kopiert nun sämtliche Dateien zum Testen auf Euren Server. Ruft als allererstes die Datei:

installation.php

auf. Dadurch wird die Tabelle der MySQL-Datenbank automatisch mit allen Feldern angelegt. Ihr könnt nun den ersten Eintrag vornehmen, indem Ihr die URL (Adresse) zu der Datei:

editor.php

im Browser eintragt, also zu dem Verzeichnis, in das Ihr alle Dateien kopiert habt:

www.DeineDomain.de/editor.php

Ruft anschließend die Datei "demo.php" ebenso im Browser auf. Das ist lediglich eine Demo-Seite, die die Einträge anzeigt. Diese Datei könnt Ihr, wenn Ihr wollt, später am Server wieder löschen, ebenso wie die Datei "installation.php".

Ich habe hier (wie sehr oft in Mobirise) Probleme mit den Anker-Links, die in Mobirise bei inkludierten Seiten so nicht funktionieren und da es hier sehr viel Navigation mit solchen Ankern gibt, habe ich mich entschieden, die Anwendung über einen dynamischen Iframe einzubinden, der sich an die jeweils benötigte Höhe anpasst.

Ich habe mir also die Datei "demo.php" nochmals kopiert (um das Original behalten zu können) und als "anzeige.php" gespeichert. Aus dieser Seite habe ich dann alle Texte entfernt und die CSS im <style> Tag zur Anzeige meinen Bedürfnissen angepasst.

Hier habe ich dann das dynamische Iframe Skript von Werner-Zenk.de in meine Seite "anzeige.php" vor dem schließenden </head> Tag eingebaut:

<script> 
    window.addEventListener("load", fenster); 
    window.addEventListener("resize", fenster); 
    function fenster() { 
     if (parent.document.getElementsByTagName("iframe")[0]) { 
      parent.document.getElementsByTagName("iframe")[0].style.height = 
       document.getElementsByTagName("html")[0].offsetHeight +'px'; 
     } 
    } 
</script>


Dieses Skript passt die Höhe vom Iframe dem jeweils angezeigten Inhalt dynamisch an.


Zieht Euch einen möglichst einfachen Textblock auf, ich habe hier das Standard-Thema "Mobirise 4" verwendet und einen einfachen Textblock aus der Gruppe "Article" verwendet. Hier tragt Ihr diesen Iframe-Code mit der URL zu Eurer Seite in den Bereich "HTML Editor" vom "Code Editor" ein. Um das auch schon auf meiner Arbeitsseite und nach der lokalen Publizierung (lokal wirkt das dynamische Skript nicht) sehen zu können, habe ich hier die absolute URL zu meiner Seite "anzeige.php" eingetragen:

<iframe id="myFrame" src="http://www.mobirise-tutorials.com/News/anzeige.php"></iframe>

Weiterhin habe ich in noch diese CSS passend zu meiner id="myFrame" in den Bereich "CSS Editor" vom "Code Editor" eingetragen, damit das Iframe auf die volle Breite meines Textfeldes und ohne Rahmen angezeigt wird:


#myFrame {
  border: none; 
  width: 100%; 
  overflow: hidden;
}

Code

Editor


Diese Anwendung hat einen eigens programmierten Editor, der die Einträge, wie bei einem CMS, online und von jedem Gerät vornehmen lässt.

Der Editor lässt keine Wünsche offen. Dieser hat eine Upload-Funktion für Bilder und unendlich viele Filter- und Suchfunktionen. Unter Optionen, kann man auch Beiträge fest oben "Anheften".

Weitere per Default gesperrte HTML-Tags, kann man in der Datei "verbindung.php" zulassen, sodass man im Editor, neben dem BBCode, auch solche Tags händisch verwenden kann.
  
Unten eine Ansicht als Screenshot.

Editor