Tutorial - MySQL Linkliste von Webbausteine.de. Hier eine neue Version vom 03.08.2016 von Werner-Zenk.de. Hier meine alte Version der Linkliste.
Diese Linkliste erfordert eine MySQL-Datenbank. Hier zeige ich, wie ich diese Anwendung direkt in NOF eingebaut habe.
Bitte ladet Euch die Skripte von meinem Download-Archiv als “2020-07-01-mysql_linkliste.zip” herunter und entpackt die Datei mysql_linkliste.zip.
Ich beschreibe hier die Version vom: 03.08.2016 mit der erweiterten Suchfunktion und einer Möglichkeit einer Sternebewertung.
Falls Ihr die alte Linkliste bereits eingebaut habt, müsst Ihr entweder eine neue Datenbank anlegen oder das Feld “bewertung” in der vorhandenen Datenbank hinzufügen. Ich verwende für meine Datenbankverwaltung gerne das einfache Programm “Adminer”, das lediglich aus einer PHP-Datei besteht und das Ihr in irgendein Verzeichnis auf Euren Server kopieren könnt. Für den Zugang zur Datenbank gebt Ihr wieder Eure Zugangsdaten nach dem Aufruf von der Datei “adminer.php” ein, die Ihr beim Erstellen der Datenbank vom Provider erhalten habt. Fügt dann dieses Spalte “bewertung”, wie unten im Screenshot gezeigt, in die Tabelle ein und klickt auf “speichern”.
Öffnet das entpackte Verzeichnis mysql_linkliste. Lest Euch die Datei lies_mich.txt aufmerksam durch und befolgt genau die dort angegeben Schritte zur Einrichtung der Linkliste.
- Ihr gebt in der Datei verbindung.php Eure MySQL- und Administrator Zugangsdaten ein. Weitere Benutzer können einen eigenen Zugang erhalten.
- Mit Aufruf der Datei linkliste_editor.php könnt Ihr die Linkliste verwalten - Einträge vornehmen, editieren oder löschen.
- Die Datei suche.php ist nun neu und für die Suchfunktion zuständig.
- Es gibt 2 Beispielseiten mit unterschiedlicher Darstellung, die Ihr z.B. auch mittels Iframe einbinden könntet: linkliste.php und linkliste2.php
Kopiert alle diese Dateien, nachdem Ihr Eure Daten eingegeben habt, in das Verzeichnis in dem Ihr die Linkliste verwenden werdet.
Voraussetzung ist eine MySQL Datenbank, die Ihr lediglich bei Eurem Provider als neue Datenbank erstellen müsst und PHP 5.4 (oder höher). Sämtliche benötigten Tabellen richtet das Skript installation.php selbstständig ein, falls Ihr eine neue Datenbank einrichten wollt. Gewisse Kenntnisse in HTML, CSS, JavaScript und PHP werden nur notwendig, wenn Ihr das Erscheinungsbild der Linkliste ändern und an Eure Wünsche anpassen wollt.
Zunächst öffnet Ihr die Datei verbindung.php und tragt die Verbindungsdaten zur MySQL-Datenbank ein. Bei 1&1 sieht das dann ungefähr so aus:
// Verbindungsdaten zur Datenbank
$DB_HOST = "db123456789.db.1and1.com"; // Datenbank-Host
$DB_NAME = "db123456789"; // Datenbank-Name
$DB_BENUTZER = "dbo123456789"; // Datenbank-Benutzer
$DB_PASSWORT = "HierDeinPasswort"; // Datenbank-Passwort
Kopiert, nachdem Ihr alle Einstellungen in der Datei verbindung.php vorgenommen habt, sämtliche Dateien in das Verzeichnis auf Euren Server, in dem die Seite liegt, auf der Ihr die Linkliste anzeigen lassen wollt. Ruft die Datei installation.php zur Erstellung einer neuen Datenbank einmalig auf und Eure Datenbank wird vollständig eingerichtet.
Ich habe in meinem Beispiel hier die Linkliste gleich auf der Startseite dieses Projektes eingebaut und dementsprechend auch alle Dateien der Anwendung in das Stammverzeichnis kopiert.
Zunächst baut Ihr die Style-Anweisung und die JavaScript-Funktion in die HTML der Seite ein (hier leicht verändert vom Original). Diese CSS habe ich mir aus der Datei linkliste.php kopiert und Ihr könnt diese natürlich beliebig anpassen, so wie ich es hier getan habe:
> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags”
<style>
.button {
padding: 5px;
background: linear-gradient(#FFF, #EAEAEA, #FFF);
cursor: pointer;
font-size: 1.2rem;
border: solid 1px #C0C0C0;
border-radius: 5px 5px 0 0;
margin-bottom: 2px;
color: #777;
letter-spacing: 3px;
}
.button:hover {
color: #5DA8F4;
border: solid 1px #C0C0C0;
}
.content {
padding: 20px;
margin-top: -2px;
border-right: solid 1px #C0C0C0;
border-bottom: solid 1px #C0C0C0;
border-left: solid 1px #C0C0C0;
border-radius: 0 0 5px 5px;
background: #EDEDED;
}
span.bewertung_ok {
color: red;
font-size: 1rem;
}
span.bewertung_ko {
color: #DDDDDD;
font-size: 1rem;
}
div.suche_status {
background-color: Whitesmoke;
text-align: Right;
padding: 0.2rem 0.5rem 0.2rem 0.2rem;
margin: 0.5rem 0 0.5rem 0;
}
div.suche_status span {
color: #5DA8F4;
cursor:Pointer;
}
</style>
<script>
var xhr = new XMLHttpRequest();
window.addEventListener("load", function() {
document.getElementById("suchbegriff").addEventListener("keyup", suche);
document.getElementsByTagName("form")[0].setAttribute('action', 'javascript:document.getElementById("suchbegriff").blur()');
});
function suche() {
if (document.getElementsByName("suchbegriff")[0].value.length > 2) {
var daten = new FormData(document.getElementsByTagName("form")[0]);
xhr.open("POST", "suche.php", true);
xhr.send(daten);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("suchstatus").innerHTML = xhr.responseText;
}
}
}
else {
document.getElementById("suchstatus").innerHTML = "";
}
}
function zeige(ID) {
document.getElementById(ID).style.display= (document.getElementById(ID).style.display=="none") ?
"block" : "none";
document.getElementById('U'+ID).style.background= (document.getElementById(ID).style.display=="none") ?
"" : "linear-gradient(#FFF, #DBEAF9, #FFF)";
}
</script>
Nun wollte ich hier, dass diese Anwendung direkt auf meiner NOF-Seite angezeigt wird - also habe ich mir den PHP-Code zur Anzeige aus dem Original-Skript linkliste.php von Webbausteine.de kopiert und natürlich meine Seite mit dem Linkliste auf die Dateierweiterung .php umgestellt.
> Menü oben > Bearbeiten > Benutzerdefinierte Namen > Dateierweiterung > .php wählen
Bitte verwendet als Textformatierung (charset) für Eure Seite “UTF-8”, in der die Skripte auch abgelegt sind.
Dazu habe ich die Datei linkliste.php mit meinem Windows-Editor geöffnet und folgenden Codes in den HTML-Code Editor eines Textfeldes kopiert.
> Textfeld doppelklicken (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button “HTML” > Code einfügen
Kopiert für das Formular der Suchfunktion und der Anzeige der Suchergebnisse diesen Code in die HTML des Textfeldes:
<form>
<label><input type="search" name="suchbegriff" id="suchbegriff" size="30" autocomplete="off" placeholder="Linkliste durchsuchen ..."></label>
</form>
<div id="suchstatus"></div>
... und kopiert alles ab dem Tag <?php bis zum abschließenden Tag ?> in ein weiteres Textfeld. Hier der bei mir eingebaute Code:
<?php
/*
* linkliste.php (utf-8)
* - https://werner-zenk.de
* - Version vom 03.08.2016
*/
include "verbindung.php";
$kommando = $db->query("SELECT `id`, `url`, `kategorie`, `beschreibung`, `bewertung`
FROM `" . $TABLE_PREFIX . "linkliste`
ORDER BY `kategorie`,`beschreibung` ASC");
$datensaetze = $kommando->fetchAll(PDO::FETCH_OBJ);
// Definitionsliste erstellen
echo '<dl>
<dt>
</dt>';
$map = array();
foreach ($datensaetze as $datensatz) {
$id = 'ID' . $datensatz->id;
// Kategorie nicht in $map -> Kategorie hinzufügen und Kategorie anzeigen
if (!in_array($datensatz->kategorie, $map)) {
$map[] = $datensatz->kategorie;
echo '</dl>' . "\n\n" .
'<p class="button" id="U' . $id . '" onClick="zeige(\'' . $id . '\')">' . $datensatz->kategorie . '</p>' . "\n" .
'<dl class="content" id="' . $id . '" style="display:none;">' . "\n";
}
$urltext = str_replace(array("http://", "https://", "www."), "", $datensatz->url);
$urltext = explode('/', $urltext);
echo ' <dt><a href="' . $datensatz->url . '" target="_blank" title="' . $datensatz->url . '">' . $urltext[0] . '</a> ' .
($bewertung == 'ja' ? bewertung($datensatz->bewertung) : '') . '</dt>' . "\n" .
' <dd>' . $datensatz->beschreibung . '</dd>' . "\n";
}
echo '</dl>';
?>
Ich habe hier das Original-Skript leicht abgeändert (oben blau markiert), da ich eine alphabetische Sortierung, nicht nur der Links innerhalb der Kategorien, sondern auch die Beschreibung selbst, alphabetisch sortiert haben wollte.
Dazu habe ich den Befehl ‘ORDER BY’ (zum Sortieren) diese Zeile abgeändert von:
- ORDER BY `kategorie` ASC");
in:
- ORDER BY `kategorie`,`beschreibung` ASC");
sodass das Datenbankfeld ‘beschreibung’ ebenfalls alphabetisch sortiert wird.
Hier noch eine Ansicht vom Editor der Linkliste.
Viel Spaß!
Tutorials von Thomas Frei-Herrmann