cms4ds - ein CMS für die DS

[itari]

Die Anleitung erfolgt in mehreren Schritten.

Ein (Web) Content Management System (CMS) benutzt meist eine Server-seitige Skript-Sprache für den Zugriff auf eine Datenbank, in der der Content (hauptsächlich als Text oder HTML) ablegt ist; in unserem Fall wäre das PHP5.

Für den eigentlichen Seitenaufbau wird Hyper Text Mark-Up Language (HTML4 bzw. an XHTML1 angelehnt) verwendet. Im CMS wird zwischen dem HTML, was für die Grundstruktur der Web-Seiten verantwortlich ist und dem HTML, welches für die Inhalte verwendet wird, logisch unterschieden. Da natürlich alles HTML ist, macht es für den Browser keinen wirklichen Unterschied.

Die Aufbereitung und Anordnung der Stilelement wird gerne getrennt mittels einer Style-Sheet-Language; es wird hier CSS2 in der Form verwendet, dass mindestens der Firefox und der Internet Explorer damit klar kommen.

SCHRITT 1:

(1) anlegen eines Verzeichnisses /volume1/web/cms4ds
(2) anlegen einer Datei /volume1/web/cms4ds/index.html mit folgendem Inhalt: "huhu"
(3) hinzufügen der folgenden 2 Zeilen in der /usr/syno/apache/conf/extra/httpd-autoindex.conf-user, am besten nach den Audio- oder Blog-Zeilen:

AliasMatch ^/cms4ds$ "/var/services/web/cms4ds/"
Alias /cms4ds/ "/var/services/web/cms4ds/"

(4) user-Apache neu starten: /usr/syno/etc/rc.d/S97apache-user.sh restart
(5) testen, ob im Browser der Aufruf geht: http://IP_DS/cms4ds/index.html

 

[itari]

Schritt 2

SCHRITT 2:

(1) die Anlagen ins cms4ds-Verzeichnis kopieren und umbenennen (Endung .txt weg)
(2) ausprobieren

Anbei das Bildchen. Dran denken, dass noch nicht alles funktioniert. Aber die Page 1 geht und die Themenauswahl sollte auch sehr schell sein. Alles funktioniert nur, wenn der Browser JavaScript ausführen darf.

Im Moment sind die Inhalte noch statisch in der index.html-Datei. Da kann man schon ein wenig mit herumspielen. Manchmal ist es auch ganz nett, statische Inhalte zu verwenden. Wollte man nur statische Inhalte verwenden, müsste man einfach Kopien der index.html machen und sie umbennen (page2.html, page3.html) und natürlich in der Menüauswahl so einrichten, dass sie sich auch gegenseitig kennen. Ich glaube, dass die index.html überschaubar genug ist, dass zu finden und zu ändern .

In der cms4ds.css sind die Farben, die Fonts, die Abstände usw. definiert; da kann man sich auch schon austoben.

In der cms4ds.js ist die Logik der Themenauswahl enthalten. Diese JavaScript-Funktionen sind sozusagen selbst-justierend und bauen aus den Überschriften die Themenliste auf. (Da bitte erstmal die Finger von lassen).

Durch die JavaScript-Funktionen erhalten die Seiten ihre Dynamik. Ob 3 Themen oder 20 ist dabei eigentlich egal, erzeugt auch keine große zusätzliche Last auf der DS, weil das ja ausschließlich im Browser gemacht wird. Deswegen ist das auch fix.

.

 

[itari]

Schritt 3

SCHRITT 3:

Voraussetzung für die weitere Arbeit ist eine funktionierende PHPmyAdmin-Installation.

(1) PHPmyAdmin aufrufen und eine neue Datenbank namens cms4ds anlegen. Dabei darauf achten, dass als Kollation latin1_general_ci verwendet wird.
(2) Dann auf die neue Datenbank stellen und das SQL-Abfrage-Fenster aufmachen und den folgenden Inhalte dort hineinkopieren (Zwischenablage) und ausführen.

--
-- Tabellenstruktur für Tabelle `cms4ds_content`
--

CREATE TABLE IF NOT EXISTS `cms4ds_content` (
  `Content_ID` int(11) NOT NULL auto_increment,
  `TS` timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,
  `Titel` varchar(200) collate latin1_general_ci NOT NULL,
  `Titel_Datum` datetime default NULL,
  `Content` varchar(32000) collate latin1_general_ci default NULL,
  `Rubrik` varchar(200) collate latin1_general_ci default NULL,
  PRIMARY KEY  (`Content_ID`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=1 ;

(3) Dann 2 Sätze erfassen:

Titel: Titel-1
Content: Das ist Content-1
Titel: Titel-2
Content: Das ist Content-2 mit Umlauten äöüßÄÖÜ

Die restlichen Felder in der Datenbank erst einmal nicht füllen.

(4) Die beiden Dateien in der Anlage ins cms4ds-Verzeichnis kopieren und umbenennen.
(5) In der Datei cms4ds.php die Zeile anpassen (Kennwort austauschen oder weglassen, falls keins gesetzt ist).

$conn = @mysql_connect("localhost","root","Kennwort");

(6) ausprobieren

Das wäre jetzt die AJAX-Variante, aus einer Datenbank etwas zu lesen und in eine Webseite dynamisch einzubauen und dann die Themenliste per JavaScript zu generieren. Wer möchte, kann nun die beiden Dateien page2.html und cms4ds.php studieren und die AJAX-Funktionen in der cms4ds.js anschauen, weitere Datensätze mit dem PHPmyAdmin erfassen ... Ein Kopie von page2.html zur page3.html (mit entsprechender Menü-Anpassung) ist nun auch nicht mehr der große Sprung. Die Feinheiten, sich mit der Datenbank-Abfrage zu beschäftigen (sortieren nach Datum und Ergänzen der Ausgabe für eine Blog-ähnliche Gestaltung), liegt auf der Hand.

.

 

[.:@rpy:.]

Bravo...

Typisch Itari...hat schon wieder mal 'ne Bombe gebastelt...

Also ehrlich...das Forum wär nicht das, was es ist, ohne dich!

Danke nochmal an dieser Stelle...und Danke dafür, das ich mal wieder meinen Siteprototypen komplett in die Tonne kloppen kann...und ich freu mich trotzdem..

 

[itari]

Danke für die Blumen ...

Wenn sich die Freude dann gelegt hat, werden wir uns sicherlich über nette Plug-ins unterhalten und uns anschauen, wie man ein Web-Interface zum Füttern der Datenbank herstellt.

Nebenbei bemerkt, man kann in die Datenbank HTML schreiben, damit wären Links auf Bilder und andere multimediale Objekte möglich. Diese sind dann aber nicht selbst in der Datenbank (ich will ja nicht der Photo-Station bezüglich ihrer tagelangen Rechnereien Konkurrenz machen ). Ein separates Verzeichnis wäre aber sicherlich sinnvoll für derlei Dateien. Da man aber auch Links zu anderen Web-Servern machen kann (auch auf den DS-Blog) lassen sich sicherlich ne Menge Lösungen realisieren.

Immer dran denken, dass ich hier was Superschnelles und Superkompaktes speziell für die DS vorstelle.

itari

 

[itari]

Schritt 4

SCHRITT 4:

Ein Datenbank-Editor für die dynamischen Seiten. Natürlich als 3rd-party-apps.

(1) Alle Veraussetzungen für 3rd-party schaffen (gibt es einen Thread zu).
(2) Anlegen der Datei /usr/syno/synoman/webman/3rdparty/cms4ds/application.cfg mit folgendem Inhalt:

text = cms4ds
description = cms4ds
type = embedded
path = /phpsrc/cms4ds/cms4ds_editor.php

(3) Anlegen eines Verzeichnisse /usr/syno/synoman/phpsrc/cms4ds.
(4) Anlage hineinkopieren und umbennen.
(5) Die Zeile 12 (Datenbank-Connect) entsprechen ändern (siehe Schritt 3).
(6) Den Disk Station Manager refreshen und ausprobieren.

(7) Wer den Inhalt einigermaßen komfortabel editieren möchte, kann sich für den Firefox (3) ein Add-on namens Write Area 0.7.0 installieren und hat dann im Kontext-Menü des FF einen zusätzlichen Eintrag "Edit in Write Area", wenn man mit dem Cursor auf einem textarea-Feld steht (Titel und Content in unserem Fall). Ein Klick und schon pop-upt ein komfortables FCKeditor-Fenster für die Eingabe. (Sinnvoll ist, die Add-on-Einstellung "Generate <p> on Return" auszuschalten.)

Anleitung:
Wenn bereits Datensätze in der Datenbank sind, die ID eingeben und auf die Schaltfläche "search" klicken. Nun kann gelöscht oder geändert werden.

Das Bildchen:

.

 

[itari]

Schritt 5

SCHRITT 5:

Wie bekommt man Links in die Seiten hinein, dass dann auch der 'richtige' Beitrag angezeigt wird?

(1) Ergänzen der cms4ds.js-Datei um eine weitere JavaScript-Funktion (ans Ende schreiben:

function showme(s) {
  var found=0, page='', id='';
  s=decodeURIComponent(s.substr(1)); sa=s.split('&');
  for(var i=0; i<sa.length; ++i) if (sa.substr(0,3)=='id=') id=sa.substr(3); else page=sa.substr(5);
  if (page != '' && location.pathname.indexOf(page,0) < 0) location=encodeURIComponent('/cms4ds/'+page+'?id='+id);
  for(var i=0; i< $$('index').length; ++i)
    if (id == $$('index').innerHTML) {
      $$('content').style.display="block"; ref=i; found=1 }
    else
      $$('content').style.display="none";
  if (found == 0) $$('content')[ref].style.display="block";
}

(2) Ergänzen des Aufrufs in den beiden Dateien index.html und page2.html direkt am Ende der Datei hinter dem make_index()-Aufruf:

make_index();showme(window.location.search);

(3) Irgendwo in den Content einen Verweis einbauen, z. B. :

<a href="index.html?id=Titel-3&page=index">link</a>

Erläuterung: Die showme()-Funktion ist selbst justierend, d. h. mit dem page-Eintrag wird zunächst die Seite ausgewählt, dann mit dem id-Eintrag das Thema gesucht. Groß- und Kleinschreibung bitte beachten bei der Seitenangabe (es ist die HTML-Web-Seite gemeint; die Dateiendung .html kann dabei wegfallen) und beim Thema (muss exakt übereinstimmen).

itari

 

[itari]

Schritt 6

SCHRITT 6:

Zweimal Suche plus Bookmarking. Und weil doch nun die Erweiterungen ein wenig
zugenommen haben, einen Zwischenstand bezüglicher der Dateien. Einfach wieder ins Verzeichnis cms4ds kopieren und umbenennen. Ggf. die alten Dateien sichern, falls da schon kleine Experimente eingebaut wurden.

 

[itari]

Schritt 6 - Teil 2

SCHRITT 6 - TEIL 2:

Was ist dazu gekommen?
(1) Ein Suchfeld für die Suche nach dynamischen Inhalten. Es kann sein, dass man die Position für IE und andere Browser noch justieren muss (ich teste im Moment ausschließlich im FF3). Ein Doppelklick auf das Suchfeld löst die Suche aus.
(2) Ein Titel-Bookmarking-Funktionalität. Ein Click auf den jeweiligen Titel führt dazu, dass die Browser-Lesezeichenfunktion aktiviert wird (Bookmarks).
(3) Die Seite page2.html enthält einen <link rel="search" ...>, der mit der XML-Datei search.xml gekoppelt ist, die wiederum das OpenSearchDescription-Protokoll spricht. Wenn die Seite page2.html aufgerufen hat, dann ändert sich etwas im Browser-Suchfenster (ja da wo man die Google-Suchbegriffe eingift). Ein Klick auf das List-Pull-Down-Icon und man kann eine Verknüfung zwischen Browser und der Seite page2.html herstellen und wie bei Google die Suche auf der Seite vornehmen. (siehe Bilder).

So das war es erstmal ... wenn ich merke, dass sich das Interesse verstärkt, mach ich wieder weiter.

Noch eine Bemerkung: dieses CMS eignet sich auch ganz gut, um so etwas wie eine kleine Kartei-Kasten-Datenbank für sich selbst aufzubauen. Schnelle Suche, Verlinkung und alle möglichen Content-Inhalte sind die Merkmale. Das geht recht gut - ich setze so etwas auch für mich persönlich ein und bin sehr zufrieden.

Sicherlich hat der ein oder andere schon gemerkt, dass ich hier die Light-Version eines größeren CMS vorstelle, welches auch auf der DS recht performant läuft, aber ein Apache/PHP-Gespann braucht, das PEAR und XML kann. Wer sich dafür interessiert, dem gebe ich gerne den Link zur Download-Seite. Einfach per PM anmailen.

Viel Spass

itari

.

 

[Pompom]

Interessante Sache was du hier veranstaltest!
Habe fleißig mitgemacht und hoffe das du hier weiter machst!


Gruß Pompom

 

[itari]

Schritt 7

SCHRITT 7:

Schön ist es, wenn der Seitenaufruf protokolliert wird (also in eine Log-Datenbank) und man als Nebenprodukt einen Besucherzähler einbauen kann.

(1) die angehängten Dateien befreien. Die SQL-Datei wieder im phpmyadmin im SQL-Fenster laufen lassen. Die anderen Dateien entsprechend wieder ins Verzeichnis kopieren und umbenennen.
(2) ausprobieren
(3) danach ein Blick mit phpmyadmin auf die neue Tabelle werden. Nun kann man schon erahnen, dass die Auswertung weiter getrieben werden kann. Dazu aber ein anderes Mal. In der Datei cms4ds_log.php wird ein Vergleich auf Sekundenbasis vorgenommen (wie schnell wird der Seitenaufruf wieder als neue Seite gezählt). Der Wert steht auf 10 (Sekunden). Das ist anzupassen auf z. B. 1200 (Sekunden) (=20 Minuten). Wenn also der gleiche Besucher nach 20 Minuten wieder auf die Seite kommt, wird er erst wieder als neuer Treffer geführt, vorher wird er nicht gezählt. Das ist eine sehr einfache Technik den Zähler scharf zu machen, ist aber schnell, kommt ohne Cookie aus und reicht erst mal aus (denke ich).

itari

.

 

[itari]

Schritt 7 - Teil 2

SCHRITT 7 - TEIL 2:

Da fehlten noch zwei Dateien...

 

[Pompom]

SCHRITT 7 - TEIL 2:

Da fehlten noch zwei Dateien...

Aha wollte dir grade schreiben das mit der css was nicht passt!
Aber du warst wieder mal schneller!

PS: Machst du auch noch etwas anderes als die DS zu martern, sovie Zeit wie du in das Board steckstl?

Die index.html ist doch aber noch die alte da hab ich nämlich weder Suche noch den Zähler drinn?

 

[itari]

PS: Machst du auch noch etwas anderes als die DS zu martern, soviel Zeit wie du in das Board steckstl?

klar ... ich schreibe gerade eine Schulungsdokumentation ...

Die index.html ist doch aber noch die alte da hab ich nämlich weder Suche noch den Zähler drinn?

Doch ein Klitzekleinigkeit: ein <div id="container_col"> ist mehr drin.

Da ich davon ausgehen, dass du das eventuell selbst anpassen könntest ist es ja so, dass die Funktionalitäten in Richtung dynamische Seiten weiter ausgebaut werden und da ist die page2.html der Prototyp. Die statischen Seiten kann man mit der Suche ja nicht durchsuchen.

Eigentlich könnte man alles mit dynamischen Seiten machen, aber manchmal ist es halt auch gut, dass man noch auf statische Seiten zurückgreifen kann. Zum Beispiel können bislang dynamische Seiten nicht gegoogelt werden (Google ist einfach zu blöd, generierte DOM-Seiten zu scannen ... aber das wird noch schon). Keine Angst, ich zeig auch noch, wie man dynamische Seiten dem Crowler unterjubeln kann.

itari

 

[Pompom]

Danke für die Auskunft!

Sind wir beide eigentlich alleine in diesem Beitrag? Oder traut sich keiner hier Fragen zu stellen?

 

[itari]

Schritt 8

SCHRITT 8:

@pompom, wir sind wohl unter uns

Ein Problem mit der Historie-Funktionalität der Browser muss nun in Angriff genommen werden, da dynamisch generierte Seiten nicht in der Browser-History erscheinen. Dazu ist ein Browser-übergreifender Trick mittels eines iframe nötig, weil auch die Browser zu blöd sind, mit dynamischen Seiten richtig umzugehen. Mit der Version 8 des IE wird ein Mechanismus eingeführt, der es etwas allgemeiner und einfacher machen könnte. Aber solange die noch nicht bei 80% aller User ist, müssen wir wohl oder übel ein wenig Handarbeit tätigen.

Wenn man die Historie abläuft (vor und zurück), ein klitzeklein wenig Geduld haben, es geht nicht immer ganz so schnell (liegt am Timer der auf 2 Sekunden steht). Man kann den Timer schneller stellen, aber dann arbeitet der Browser manchmal auf Hochtouren und das muss ja nicht sein.

(1) die angehängten Dateien befreien. Die Dateien entsprechend wieder ins Verzeichnis kopieren und umbenennen. Ich habe die index.html nun doch noch ein wenig angepasst.
(2) eine leere Datei namens 'blank.html' anlegen (muss nicht unbedingt sein, aber verringert die Warnings).
(3) ausprobieren

Dran denken, das Teil wird jetzt eventuell ein wenig langsamer, aber dass liegt nicht an der DS, sondern an der Geschwindigkeit des Browsers. Allerdings dürften alle Geschichten kaum zu spüren sein. Ich hab Seiten, da werden zusätzlich noch 10000-DIVs durchgerechnet und das geht auch noch recht flott. Mit dem FF4 (!) soll ja eine neue Rendering-Machine kommen, die alles in den Schatten stellt. Also besteht ja Hoffnung.

Das cms4ds benutzt die schnellste und kompakteste Art, Content aus einer Datenbank auf einen Browser zu bekommen, die zur Zeit bekannt ist.

itari

 

[.:@rpy:.]

Ich bin auch noch da...komm nur kaum mit, weil ich ja auch versuche, die Funktionen im einzelnen für mich nachzuvollziehen..

 

[Pompom]

Funktioniert Klasse, nur beim Besucherzähler müsste man noch etwas machen der zählt ja schneller wie mein Sohn!
Bei der aktualisierung der dynamischen Seiten, sollte man eventuell auch noch etwas einbauen damit nur die dynamic aktuallisiert wird!
Ich hoffe du verstehst was ich meine!

 

[itari]

Funktioniert Klasse, nur beim Besucherzähler müsste man noch etwas machen der zählt ja schneller wie mein Sohn!

SCHRITT 7 Punkt 3 - Anpassung des Timers - hast das gemacht?

Bei der aktualisierung der dynamischen Seiten, sollte man eventuell auch noch etwas einbauen damit nur die dynamic aktuallisiert wird!
Ich hoffe du verstehst was ich meine!

damit nur die dynamic aktualisiuert wird ??? hab ich nicht wirklich verstanden

itari

 

[Pompom]

damit nur die dynamic aktualisiuert wird ??? hab ich nicht wirklich verstanden

itari

hab ich mir fast gedacht
also Seite 2 rechts punkt 2 ergibt aktualisiert = Seite 2 rechts punkt 1
ich hoffe das war jetzt verständlich!

Verdamt das mit dem Timer hab ich verpennt