Suche

[Micro]

So, wie versprochen für alle diejenigen, die mal an einem Thema basteln wollen der folgende Thread.

Damit alle die gleichen Voraussetzungen haben, hier mal das Thema zum Dowmload
Das Thema beinhalten schon das am Ende beschriebene Update!

Der Ursprung zu dieser Idee ist hier im Forum entsprungen.

Und während diejenigen die hier Online an einem Thema bauen wollen die Datei sich ziehen, werd ich mal anfangen die ersten Zeilen zu verfassen.

Eine Bitte und Hinweis vorweg.
Ich werd versuchen soweit es geht, "Zeilenweise" in der Ansicht auf der Webseite zu arbeiten und zu ändern. D.h., vom Kopf angefangen so nach und nach bis nach unten auf den Seitenfuß. Ich werde an der Stelle erst einmal die CSS Datei vernachlässigen. Die wird im Anschluss daran folgen.
So wie ich die Sache sehe, wird hier wohl ein klein wenig neuer Themenstandard geschrieben. Denn zur Zeit ist es so, das einige Formatierungen noch aus dem System selbst kommen, und nicht von der themes.php gesteuert werden.

Mal sehen wie das hier funktioniert. Auf jeden Fall hoffe ich, das von Euch auch noch Fragen oder Anregungen kommen. Ich spreche in dem Fall auch mal die Netscape Spezialisten an. Denn der wurde ja in der letzten Zeit ein wenig vernachlässigt. ;o)

Mirko

PS:
Es ist zwar kein Neuland für mich, aber ich habs noch nie erklären müssen ;o)

Noch eine Bemerkung:
Da ich das alles ja erst schreibe ehe ichs veröffentliche und auch die Syntax besser in Farbe zu erkennen ist, wirds das alles jedes mal auch als Download im PDF Format geben.

Für alle die das Thema vor dem 17.05.2002 downgeloadet haben, hier ein Update der themes.php. Die Datei themes.php einfach ersetzen lassen.
Update


[Editiert am 21/12/2002 von SiteAdmin Micro]

[Andi]

 

Es ist zwar kein Neuland für mich, aber ich habs noch nie erklären müssen ;o)

Denke, wir werden Dich tatkräftig unterstützen

[Micro]

Also dann, fangen wir mal an bei den Zeilen 18 bis 33.
####
global $bgcolor1, $bgcolor2, $bgcolor3, $bgcolor4, $bgcolor5, $css_link, $css_vlink, $css_alink, $textcolor1, $textcolor2;
$thename = "maaX_Micro_platinblack";


$css_link = "#ffff00";
$css_vlink = "#ffff00";
$css_alink = "#d5ae83";

$bgcolor1 = "#000000";
$bgcolor2 = "#003b74";
$bgcolor3 = "#000000";
$bgcolor4 = "#003b74";
$bgcolor5 = "#666666";   //Kommentare Tabellenhintergrund
$textcolor1 = "#FFFFFF";
$textcolor2 = "#FFFFFF";

function OpenTable() {
    global $bgcolor1, $bgcolor2;
    echo "<table width=\"100%\" border=\"0\" cellspacing=\"1\" cellpadding=\"0\" bgcolor=\"$bgcolor2\"><tr><td>\n";
    echo "<table width=\"100%\" border=\"0\" cellspacing=\"1\" cellpadding=\"8\" bgcolor=\"$bgcolor1\"><tr><td>\n";
}

function CloseTable() {
    echo "</td></tr></table></td></tr></table>\n";
}

function OpenTable2() {
    global $bgcolor1, $bgcolor2;
    echo "<table border=\"0\" cellspacing=\"1\" cellpadding=\"0\" bgcolor=\"$bgcolor2\" align=\"center\"><tr><td>\n";
    echo "<table border=\"0\" cellspacing=\"1\" cellpadding=\"8\" bgcolor=\"$bgcolor1\"><tr><td>\n";
}

function CloseTable2() {
    echo "</td></tr></table></td></tr></table>\n";
}
####




Die Definition der einzelnen Farben:

Ich hab in dem Thema die Farben alle auf Global gesetzt. Zu oft werden die $bgcolor1 bis 4 verwendet. Ich habe vor einiger Zeit in meinen Themen noch eine fünfte definiert. Diese steuert bei mir die Tabellenhintergründe. #666666 ist der Graue Background in den Tabellen.

$bgcolor1 und 3, schwarz, sind für den eigentlichen Tabellen Hintergrund gedacht. Bei mir schwarze Tabellen, mit dunkelblauer Umrandung. Das Dunkelblau sind in dem Fall $bgcolor2 und 4.

$css_link = der Farbcode eines Links. Ich Umgehe damit die CSS Datei und mache auch die Links für den Netscape so sichtbar wie ich es haben will.
$css_vlink = der besuchte Link, wird ja standardmäßig dann immer blau etc. Ist mir dann aber immer zu bunt auf der Seite, deshalb auch gelb.
$css_alink = der Aktive Link während er gedrückt wird, leicht ins rot gehend.

$textcolor1 und 2, wurden bisher selten verwendet, haben ein eher stiefmütterliches Dasein in vielen Themen geführt.

Die Globalen Tabellen Funktionen

function OpenTable() und OpenTable2() sind die Globalen Tabellen, aus denen die Blöcke und sonstige Anzeigen innerhalb der Webseite "geparst" werden.
Auch sind das die beiden einzigen Funktionen, die beendet werden müssen. CloseTable() und CloseTable2() beinhalten nämlich die HTML Befehle, Ende Zeile, Ende Spalte, Ende Tabelle, zwei mal.

OpenTable()
Es wird eine Tabelle begonnen, die das Maximum der breite innerhalb einer Anzeige ausfüllt. Das kann ein Browserfenster sein oder eine Tabelle. Die erste Tabelle wird blau ausgefüllt, mit $bgcolor2. Da aber nun eine Zweite Tabelle geöffnet wird, innerhalb der ersten, wird diese nun mit schwarz = $bgcolor1 gefüllt. Cellspacing in der zweiten geöffneten Tabelle, ist hier für den sichtbaren blauen Rand verantwortlich. Es bedeutet zu deutsch, halte Abstand zu allem was vor Dir ist von einem Pixel.

OpenTable2()
Hat genau die selbe Funktion wie OpenTable(), nur ohne Breitenangabe. Also schließt sich diese Tabelle um jeden Text oder Grafik herum, im Abstand von 8 Pixeln. Gesteuert über cellpadding.

Und in OpenTabel2() ist ein kleiner Fehler eingebaut. Nicht mit Absicht, aber er ist da.
Wer genau nachdenkt wird drauf kommen. Tipp, hat was mit den Variablen zu tun ;o)

To be continued

Mirko

Zum nachlesen und ausdrucken



[Bearbeitet am: 14/5/2002 von Micro]

[Editiert am 21/12/2002 von SiteAdmin Micro]

[Micro]

Teil 2

Also es ist kein Fehler in dem Sinne. Ich meinte die Möglichkeit $bgcolor3 und 4 für die Zweite Tabelle zu nutzen ;o)
So kann man nochmals farblich anders abstimmen.

Aber weiter im Text.

Zeilen 107 bis 125

####
function FormatStory($thetext, $notes, $aid, $informant) {
    global $anonymous;
    if ($notes != "") {
        $notes = "<b>"._NOTE."</b> <i>$notes</i>\n";
    } else {
        $notes = "";
    }
    if ("$aid" != "$informant") {
        echo "<font class=\"content\" color=\"$textcolor2\">$thetext$notes</font>\n";
    } else {
        if($informant != "") {
            $boxstuff = "<a href=\"user.php?op=userinfo&uname=$informant\">$informant</a> ";
        } else {
            $boxstuff = "$anonymous ";
        }
        $boxstuff =" $thetext $notes\n";
        echo "<font class=\"content\" color=\"$textcolor2\">$boxstuff</font>\n";
    }
}
####

function FormatStory()

Die erste wichtige Funktion, die aus anderen Dateien ihre Werte bezieht. Es ist die Funktion die den  kompletten Inhalt der einzelnen Artikel zusammensucht, bereitstellt, formatiert und anzeigt. Eigentlich hat diese Funktion da (noch) nichts zu suchen, denn eine Funktion wird als erstes innerhalb der jeweiligen PHP Datei gesucht und muss extra aufgerufen werden. Wird diese nicht aufgerufen, bleibt sie auch inaktiv. Der Aufruf erfolgt über folgenden Befehl:
FormatStory(); Hier zumindest ist sie störend, da ja eigentlich als erstes die Nachfolgenden Tabellen angelegt werden müssen, in denen dann der Content dargestellt werden soll.

[Hinweis]
Ist diese Funktion nicht in der Datei vorhanden, so wird diese in den Dateien gesucht, die an anderer Stelle durch den Befehl "include "datei-X.php"; aufgerufen worden sind. Im PHP Manual sind noch einige weitere Funktionen beschrieben, wie noch Dateien in eine andere Seite eingebunden werden können.

Die Werte stammen aus der Datenbankabfrage der /modules/news/index.php funktion theindex(). Dort ist auch der Funktionsaufruf themeindex().
Die übergebenen Parameter, $thetext, $notes, $aid, $informant sind an sich selbsterklärend.
$thetext = der Inhalt des Artikels
$notes = die Notizen
$aid = der Artikel freischaltende (Admin)
$informant = der Absender

Das so viele Globale Variablen existieren, hat mehr mit meiner Faulheit während des Programmierens zu tun gehabt als das die Werte alle nötig sind. Die ganze Reihe $bgcolor wird in der Funktion nicht benötigt und könnte somit weggelassen werden.

Der Inhalt:
$notes hat beispielsweise den Inhalt: "Hallo"

If ($notes != "")
Es wird die Variable $notes gefragt, ob sie Inhalt mit sich trägt. {Wenn $notes ungleich(!=) leer("")} dann schreibe den Inhalt wie folgt;

$notes = "<b>" {Zeilenumbruch und Fettschrift}

._NOTE. = der Inhalt der definierten Variablen _NOTE aus den Sprachdateien (Der Punkt vor und nach ist wichtig, er bedeutet "hänge an")

"</b><i>$notes</i>\n"; {Fettschrift Ende, Kursiv EIN, Inhalt von $notes, Kursiv aus, (\n) Zeilenumbruch für den Quelltext.}

Der Ausgegebene Text würde jetzt so aussehen:
Notiz: Hallo[/i]
Wobei "Notiz" der Variablen _NOTE aus der Sprachdatei entstammt.

else { $notes=""; } Wenn $notes leer gewesen wäre, würde die Variable auch wieder als leer definiert werden.

If ("$aid" == "$informant") {Wenn der "Admin" gleich dem Informanten ist}
Im Grunde die Information, die den freischaltenden Admin immer mit anzeigt. Aus meiner Sicht eine unnötige Variable.
echo "<font size=\"2\" color=\"$textcolor1\">$thetext$notes</font>\n";
{zeige an, Schriftgrösse 2, Textfarbe, DEN Text, Notiz, Ende Schriftgrösse, Zeilenumbruch Quelltext}

Hier wurde die zuvor "formatierte" Variable $notes verwendet.
Auch ist hier der erste "feste" Eintrag im Thema. Die Formatierung der Schriftgröße. Es ist paradox hier die Schriftgröße fest anzugeben und gleichzeitig ein CSS zu verwenden. Besser käme an der Stelle eine zusätzliche Variable. Dieser Eintrag wird benötigt für den Netscape, da der ja CSS so gut wie gar nicht umsetzen kann.

If ($informant != "") {wenn der Inhalt von $informant ungleich "nichts" ist}
Dann wird hier der Variablen $boxstuff HTML Quellcode zugewiesen. Der Link zum Verfasser des Artikels, nicht dem freischaltenden Admin!

Else, das selbe würde passieren wenn $informant den Inhalt der Variablen $anonymous besitzt. Diese wird in der config.php bestimmt, bzw. über das Menü Einstellungen.

Und nun der dümmste Eintrag aus meiner Sicht.
$boxstuff .= ""._WRITES." \"$thetext\" $notes\n";
Auch hier wird der Variablen $boxstuff NUR der anzuzeigende Quelltext zugewiesen, der dann in der nächsten Zeile verwendet wird.
echo "<font size=\"2\" color=\"$textcolor1\">$boxstuff</font>\n";

Der Ausgegebene Text würde jetzt so aussehen:
Nickname schreibt: Und ab hier der Text. (Oft ist hier der Text auch kursiv dargestellt)

Eigentlich eine sinnlose Anzeige. Wichtig ist der Inhalt des Beitrages, nicht derjenige der den freigeschalten hat. Und auch hier wieder eine feste Formatierung der Schriftgrösse.

Damit wäre diese Funktion soweit beschrieben. Um diese Funktion ein wenig kennen zulernen, einfach mal einige zusätzliche Worte einfügen und nachsehen was dann angezeigt wird. Die Position dieser Anzeige kann hier noch nicht verändert werden. Es ist rein nur die Änderung der Formatierungen, des enthaltenen Textes im gespeicherten Artikel.


To be continued

Mirko

Zum nachlesen und ausdrucken
Datei ist ein PDF und wird sofort geöffnet.
Der Acrobat Reader ist dafür notwendig!
[Bearbeitet am: 15/5/2002 von Micro]

[Editiert am 21/12/2002 von SiteAdmin Micro]

[Micro]

Teil 3

Jetzt kommt der Interessante Teil, das Thema selbst definieren. Wie formatiert man das Thema? Wie sind die einzelnen Blöcke eingebunden? Was kann man alles an welcher Stelle ändern?

Zeilen 82 bis 88

####

function themeheader() {
    global $user, $banners, $sitename, $slogan, $cookie, $admin, $fszcounter, $prefix, $dbi, $bgcolor2, $bgcolor3, $css_link, $css_vlink, $css_alink, $textcolor1, $textcolor2;
    cookiedecode($user);
    $username = $cookie[1];
    if ($username == "") {
        $username = "Anonymous";
    }

####

function themeheader()

Hierzu gibt?s nicht viel zu sagen. Auch hier wieder, global ist zuviel eingetragen, die Farbwerte gehören hier nicht hin. An sich ließt diese Funktion nur den aktuellen User aus und schreibt den in die Variable $username.

Die Funktion cookiedecode() die hier aufgerufen wird, wird an die mainfile.php weitergegeben und dort ausgewertet.

Anlegen der ersten Tabelle, definieren des Layoutes der Webseite.
Zeilen 89 bis 109

####

# Zeile 1 Hintergrund Definition
    echo "<body background=\"themes/maaX_Micro_platinblack/images/bg.gif\" bgcolor=\"#000000\" text=\"#000000\" link=\"$css_link\" vlink=\"$css_vlink\" alink=\"$css_alink\">\n";
# Zeile 2 Balken
    echo "<table cellpadding=\"0\" cellspacing=\"0\" width=\"801\" border=\"0\" align=\"center\" bgcolor=\"$bgcolor3\">\n"
       ."<tr>\n"
       ."<td><img src=\"themes/maaX_Micro_platinblack/images/titleBar.gif\" width=\"100%\" height=\"10\" border=\"0\">\n</td></tr>\n</table>\n";

# Zeile Kopflogo
# erste Grafik Spalte 1 Zeile 1
    echo "<table cellpadding=\"0\" cellspacing=\"0\" width=\"801\" border=\"0\" align=\"center\" bgcolor=\"$bgcolor3\">\n" //Kopftabelle
       ."<tr>\n"
       ."<td bgcolor=\"$bgcolor3\" align=\"left\" valign=\"middle\">\n"
       ."<a href=\"index.php\"><img src=\"themes/maaX_Micro_platinblack/images/logo_1.gif\" alt=\""._WELCOMETO." $sitename\" border=\"0\"></a></td>\n";

# zweite Zeile,  1. Spalte Grafik 2 inkl. Counter
     echo "<tr><td><a href=\"index.php\"><img src=\"themes/maaX_Micro_platinblack/images/logo_2.gif\" alt=\""._WELCOMETO." $sitename\" border=\"0\"></a>$fszcounter<a href=\"index.php\"><img src=\"themes/maaX_Micro_platinblack/images/logo_3.gif\" alt=\""._WELCOMETO." $sitename\" border=\"0\"></a></td></tr>\n";

# dritte Zeile, 1. Spalte Grafik
     echo "<tr><td><a href=\"index.php\"><img src=\"themes/maaX_Micro_platinblack/images/logo_4.gif\" alt=\""._WELCOMETO." $sitename\" border=\"0\"></a></td></tr></table>\n";
     echo "</select></font></td></tr></table></td></tr></table>\n";

####

Die erste Tabelle wird nun angelegt. Vorweg einige Möglichkeiten wie man am besten vorgehen sollte/kann.

Ich habe es bisher so gehalten, das sich ohne Probleme der gesamte Seitenkopf austauschen bzw. ändern lässt. Tabelle 1 bis 3 sind so gehalten. Erst danach wird die eigentliche Seite festgelegt. Am Ende die footer.php mit den Seitenspezifischen Informationen. Ganz zum Schluss kann dann ein Copyright eingefügt werden.


 
Eine andere und oft genutzte Variante sieht ähnlich aus. Hier umschließt die Haupttabelle alles gemeinsam. Der Unterschied ist nicht so gravierend, nur das aus meiner Sicht, die "lesbarkeit" der ersten Variante besser erscheint.



Etwas später werde ich noch etwas genauer darauf eingehen, wie man ein komplett neues Thema erstellen kann. Hier bleibe ich aber erst einmal beim ändern eines bestehenden.

####

# zweite Spalte über 3 Z# Zeile 1 Hintergrund Definition
    echo "<body background=\"themes/maaX_Micro_platinblack/images/bg.gif\" bgcolor=\"#000000\" text=\"#000000\" link=\"$css_link\" vlink=\"$css_vlink\" alink=\"$css_alink\">\n";
# Zeile 2 Balken
    echo "<table cellpadding=\"0\" cellspacing=\"0\" width=\"801\" border=\"0\" align=\"center\" bgcolor=\"$bgcolor3\">\n"
       ."<tr>\n"
       ."<td><img src=\"themes/maaX_Micro_platinblack/images/titleBar.gif\" width=\"100%\" height=\"10\" border=\"0\">\n</td></tr>\n</table>\n";

####

Als erstes wird hier der Hintergrund festgelegt und die Hyperlink Farben. Hier sehen wir auch die Werte $css_link, _alink, _vlink wieder.
Hier gäbe es auch die Möglichkeit die Variable $thename zu nutzen, die hier immer noch als absoluter, fester Pfad eingetragen ist. Statt themes/maaX_Micro_platinblack/images zu nutzen würde hier auch gehen themes/$thename/images. Das wäre eigentlich die bessere Variante, da man so auch das Thema einfacher umbenennen könnte.
Achtung:
Vorsicht bei dem nutzen von festen Pfaden. Unix/Linux Server unterscheiden zwischen Groß und Kleinschreibung!

Was hier in der Erklärung noch etwas verwirrend beschrieben ist, erste Zeile habe ich definiert als die erste Zeile im Quelltext, der die eigentlichen Seitenoptionen beschreibt, nicht die Ansicht auf dem Bildschirm.

Als zweites kommt dann die erste Tabelle. Ein Zeilenumbruch, der die Tabelle vom oberen Browserrand trennt, dann wird die Tabelle geöffnet.
Diese wird nur zum "festhalten" und definieren des Balkens benutzt. Die Tabelle selbst besitzt keine weiteren Informationen. Sie muss einfach nur präsent sein und der nachfolgenden Grafik ihre Grenzen zeigen. Dann wird der Balken angezeigt. Das Ursprungspicture hat nur eine Grösse von 2 x 10 px (Pixel). Das schöne an HTML, hier kann man nach Herzenslust "schwindeln". Das was groß und breit erscheint ist es aber oft nicht. (*1) Im Image Tag wird eine Breite (width) von 100% angegeben und eine Höhe (height) von 10px. Und deshalb die Tabelle. Das Bild erstreckt sich über 100% der verfügbaren Breite innerhalb der Tabelle, die zuvor definiert wurde. Am Ende wird diese Tabelle wieder geschlossen.
Somit hat man eine einfache Möglichkeit, die erste Tabelle oder Zeile mit dem Balken auszublenden. Mit /* fängt man an, mit */ in der letzten Zeile die ausgeblendet werden soll, hört man auf.

(*1) Es wird hier darauf acht gegeben, das so wenig wie möglich an Datenmenge vom Server an den Browser übertragen werden muss. Bilder sind oft schon komprimiert und lassen sich nicht weiter packen. Im Gegensatz dazu werden, so der Webserver diese Option zulässt, alle übertragenen Daten, sprich der Quelltext der Webseite, in das Format gzip verpackt und übertragen. Der Webbrowser entpackt diese dann zu Hause auf dem PC und macht die Seite wieder sichtbar. Auch hier noch ein Hinweis. Eine normale NUKE Seite mit einem kleinen Grafikvolumen, wie das hier vorgestellte Thema ist, hat eine durchschnittliche übertragene und entpackte Größe von ca. 150kb! Gzip gepackt sind es nur noch um die 70 KB. Webseiten mit sehr hohem grafischen Aufwand erreichen ohne weiteres eine Größe von 400kb und mehr. Auch die Anzahl der Module bläht eine Webseite auf. Nicht nur die Datenbank wird dabei recht heftig gestresst. So werden leicht bei einigen Webseiten um ein halbes Megabyte(!) und mehr an Daten verwendet. Und hier ist immer noch zu bedenken, der größte teil aller Internetnutzer hat kein DSL zu Hause sondern ist mit einem 56kbps Modem unterwegs. Bestenfalls ISDN. Ihr macht also Eurem Besucher keine Freude wenn zuviel zu sehen ist.
Es gibt keine Faustformel, da alle Blöcke unterschiedlich groß sind und auch der Inhalt der einzelnen Artikel unterschiedlich ist. Erfahrungsgemäß kann man aber rechnen, 50% der Gesamtgröße des Themes Ordners, plus ca. 10kb pro Block und Artikel. Denkt mal drüber nach ...


To be continued

Mirko

Zum nachlesen und ausdrucken
Datei ist ein PDF und wird sofort geöffnet.
Der Acrobat Reader ist dafür notwendig!
[Bearbeitet am: 15/5/2002 von Micro]

[Editiert am 21/12/2002 von SiteAdmin Micro]

[Micro]

Teil 4

Der Logokopf:

####

# Zeile Kopflogo
# erste Grafik Spalte 1 Zeile 1
    echo "<table cellpadding=\"0\" cellspacing=\"0\" width=\"801\" border=\"0\" align=\"center\" bgcolor=\"$bgcolor3\">\n" //Kopftabelle
       ."<tr>\n"
       ."<td bgcolor=\"$bgcolor3\" align=\"left\" valign=\"middle\">\n"
       ."<a href=\"index.php\"><img src=\"themes/maaX_Micro_platinblack/images/logo_1.gif\" alt=\""._WELCOMETO." $sitename\" border=\"0\"></a></td>\n";

# zweite Zeile,  1. Spalte Grafik 2 inkl. Counter
     echo "<tr><td><a href=\"index.php\"><img src=\"themes/maaX_Micro_platinblack/images/logo_2.gif\" alt=\""._WELCOMETO." $sitename\" border=\"0\"></a>$fszcounter<a href=\"index.php\"><img src=\"themes/maaX_Micro_platinblack/images/logo_3.gif\" alt=\""._WELCOMETO." $sitename\" border=\"0\"></a></td></tr>\n";

# dritte Zeile, 1. Spalte Grafik
     echo "<tr><td><a href=\"index.php\"><img src=\"themes/maaX_Micro_platinblack/images/logo_4.gif\" alt=\""._WELCOMETO." $sitename\" border=\"0\"></a></td></tr></table>\n";

####

Ab hier ist sind ein klein wenig HTML Kenntnisse gefragt, Zumindest was das erstellen von Tabellen angeht, Verlinkungen sowie der Umgang mit Bildern. Ich setze hier einfach mal voraus, dass man die Arbeit mit einem Grafikprogramm gewöhnt und in der Lage ist, eine Grafik zu "zerschneiden". Denn das ist hier wichtig zu können!

Auch hier wird wieder eine Tabelle geöffnet, die eine definierte Breite besitzt. In diesem Fall wieder 801px, mit schwarzem Hintergrund. Hier habe ich $bgcolor3 benutzt. Das blendet den Seiten-Hintergrund an der Stelle schon einmal aus, da die Informationen für die Tabelle schneller übertragen werden als eine Grafik. Als Erklärung der einzelnen Tabellenzeilen ist hier eine Grafik eingefügt, die zeigt wie die Grafiken in der Tabelle positioniert sind.




####

echo "<tr><td><a href=\"index.php\"><img src=\"themes/maaX_Micro_platinblack/images/logo_2.gif\" alt=\""._WELCOMETO." $sitename\" border=\"0\"></a>$fszcounter<a href=\"index.php\"><img src=\"themes/maaX_Micro_platinblack/images/logo_3.gif\" alt=\""._WELCOMETO." $sitename\" border=\"0\"></a></td></tr>\n";

####

Würde hier der Quelltext mit einem /n umgebrochen werden, gäbe es oft Verzerrungen in der Tabelle. Die Grafiken würden nicht ohne Leerräume angezeigt werden. (So wie es in der Beispielgrafik der Fall ist). Dem könnte man natürlich entgegen wirken, indem man der zweiten Zeile drei Spalten zuordnet und in jede eine Grafik einfügt. Nur so spare ich ein klein wenig Quelltext. Es sind zwar nur ein paar Byte, aber Kleinvieh macht auch Mist ;o).

Was jeder Grafik zugeordnet ist, der Link auf die Startseite, [ url ]/index.php. Auch hier wieder, es wäre möglich den Namen des Themen Pfades zur Grafik gegen die Variable $thename zu ändern. Der "alt Tag" ._WELCOMETO. " $sitename, wird hier zum einen in der Sprachdatei definiert und $sitename in der config.php, zu ändern im Adminmenue unter Einstellungen.


Zum Abschluss die dritte Zeile des Logokopfes:

####

echo "<tr><td><a href=\"index.php\"><img src=\"themes/maaX_Micro_platinblack/images/logo_4.gif\" alt=\""._WELCOMETO." $sitename\" border=\"0\"></a></td></tr></table>\n";

####

Hier wird die Tabelle wird beendet.

Die ersten Funktions-Elemente:

Zeile 110 bis 128

####

# zweite Spalte über 3 Zeilen Suchfunktionen

    echo "<table cellspacing=\"0\" cellpadding=\"0\" width=\"801\" align=\"center\" border=\"0\" bgcolor=\"$bgcolor3\">";
    if ($username == "Anonymous") {
     echo "<td width=\"20%\"> <font size=\"2\">"._HELLO." <a href=\"modules.php?name=Your_Account\" title=\"Registrieren?\">".$username."</a></font></td>\n";
     echo "<td width=\"15%\"><center><form action=\"modules.php?name=Your_Account\" method=\"post\">Nick : "
           ."</font><input type=\"text\" name=\"uname\" size=\"7\" maxlength=\"25\" class=\"formtexts\">"
           ."<font class=\"formtexts\"></td><td width=\"10%\"><center>Pass : "
           ."</font><input type=\"password\" name=\"pass\" size=\"7\" maxlength=\"20\" class=\"formtexts\"> "
           ."<input type=\"hidden\" name=\"op\" value=\"login\">"
           ."</td><td width=\"10%\">"
           ."<center>"
           ."<input type=\"image\" value=\"login\" src=\"themes/maaX_Micro_platinblack/images/login.gif\" border=\"0\">"
           ."</td></form>";
    } else {
     echo "<td width=\"55%\"> <font size=2>"._HELLO." <a href=\"modules.php?name=Your_Account\">$cookie[1]</a></font>"
         ." [ <a href=\"modules.php?name=Your_Account&op=logout\">Logout</a> ]</td>";
    }

####

Die Zeile zur Erklärung; "zweite Spalte über drei Zeilen Suchfunktionen", ist etwas missverständlich. Ich hab ja noch nie einen Quelltext beschrieben in dieser Art ;o). Da fallen einem dann solche Fehler auf.

Was passiert hier? Als erstes wird wieder eine Tabelle geöffnet. So wie in den vorhergehenden auch. Es ist auch hier die Möglichkeit vorhanden, den ganzen Block auszublenden ohne das nachfolgende Ansichten gestört würden.
Hier ist es wichtig, die Spalten in der Tabelle klar zu definieren. Denn Besucherabhängige Anzeigen und Formularfelder können ganz schön stressen. Insbesondere letzteres. Wer es bisher gewöhnt war einen TAG zu öffnen, die Anzeige auszugeben und danach gleich wieder zu schließen, muss bei dem <form> Tag eine Ausnahme machen. Ich habe keine Erklärung dafür, das einige Webbrowser den </form> Tag auch als bedingten Zeilenumbruch () ansehen und so darstellen. Gerade bei diesem Thema ist es jedoch wichtig, das die Tabellenzeilen bündig abschließen. Deshalb nachfolgender Hinweis.
In einer geöffneten Tabelle kann ein <form> Tag irgendwo im Quelltext beginnen. Öffnet man diesen in einer mehrzeiligen Tabelle, so darf der </form> Tag erst in der nächsten Tabellenzeile oder nach(!) dem beenden der Tabelle mit </form> geschlossen werden. Jede andere Handhabung bringt Probleme mit der Darstellung!

Bevor man daran geht solche Tabellen zu schreiben, sollte man in einem der gängigen HTML Editoren die Tabelle testen. Dabei ist es wichtig vorher zu wissen, was soll alles hinein, wie groß soll es werden. Hier im Fall wieder 801px gesamt Breite der Tabelle. Mit der nachfolgenden Abfrage, wird ermittelt welchen Inhalt die Variable $username besitzt. Wenn Ihr Euch erinnert, die Variable $username wurde zuvor in der Funktion themeheader() ausgelesen.
In Zeile 114, {if ($username == "Anonymous");} wenn der Inhalt der Variablen $username den Wert Anonymous besitzt, dann werden die Möglichkeit "Login" angezeigt, sowie die Variable ._HELLO., die auch hier über die Sprachdatei definiert wird.


Der Ausgegebene Text würde jetzt so aussehen:
Hallo Anonymous

Anonymous wurde hier mit einem Link zum Anmeldevorgang hinterlegt. Dieser besitzt einen "ALT" Tag (innerhalb des Links und wie bei den Grafiken alt="Beschreibung", hier title="Beschreibung"), der einen Hinweistext ausgibt "registrieren?". Das als Erklärung für den Besucher, um was für einen Link es sich handelt. Das hätte man sicher auch aus einer Sprachvariablen nutzen können. Problematisch war hier, es gibt in der aktuellen Version keine einzige Variable mehr, die nur den Inhalt "registrieren" besitzt. Es ist zwar schön das die Sprachdateien recht aufgeräumt und komprimiert daherkommen, für solche Zusätze aber sind diese Versionen recht hinderlich. Deshalb hier der Hinweis an die Programmierer, komprimiert nicht zu sehr in solchen global zu verwendenden Dateien. Man kann auch an anderer Stelle den auszugebenden Text zusammensetzen. Und ein Thema mit einem Sprachfile auszustatten erschien mir nicht gerade sehr förderlich ;o).

Der Link könnte hier aber anders geschrieben sein. Einen Link weniger gäbe es zu nutzen wenn der Link direkt zur  Eingabemaske "Neuen Benutzer anmelden" zeigen würde. Das nenne ich schon wieder etwas Benutzerfreundlicher ;o). Der Link muss dann wie folgt aussehen:

<a href="\modules.php?name=Your_Account&op=new_user\">

Interessanter sind die nachfolgenden Zeilen, da dort oft Fehler gemacht bzw. viele an der Tabellenformatierung verzweifeln werden. (oder schon sind). Wie vorher beschrieben, man achte auf richtige Verteilung des <form> Tags. Das erspart am Ende einfach nur Ärger.
In Zeile 116 wird, nach dem öffnen der zweiten Spalte, der <form> Tag geöffnet. Ab hier gibt es die Möglichkeit sich direkt mit seinem Nicknamen und dem Passwort einzuloggen. Der Übersichtlichkeit halber, sollte der dazugehörige Text sowie die Login Felder, in jeweils eigenen Tabellenspalten stehen. So sieht die Seite einfach aufgeräumter aus und die Eingabe-Felder lassen sich einfacher positionieren. Auch wird hier ein CSS Modul benutzt, der den Hintergrund der Eingabefelder anders einfärbt. Zuständig dafür, class=\"formtexts\". (Nur NS 6.x oder IE 5.5 und grösser)
Die Zeile wird damit geschlossen für den Anonymen User.

Zeile 125

{ else }, also wenn $username einen anderen Wert als Anonymous besitzt, dann kann nur noch ein angemeldeter User die Seite besuchen.
In diesem Fall muss die Gesamtsumme der Spaltenbreite anders aussehen. Anonymous, auf Grund von 3 Spalten (20 + 15 + 10% = 55%), muss nun in einer Spalte mit 55% Breite stehen. Denn wozu benötigt ein Angemeldeter User den Link zur Anmeldung und die Login Funktion. Hier steht nun nur noch die Begrüssung  {._HELLO." <a href=\"modules.php?name=Your_Account\">$cookie[1]</a>} und in Zeile 127 { ." [ <a href=\"modules.php?name=Your_Account&op=logout\">Logout</a> ]</td>";}

Der Ausgegebene Text würde jetzt so aussehen:
Hallo Username [ logout ]

._HELLO. die Variable aus der Sprachdatei und der Nickname hinterlegt mit dem Link zu den persönlichen Informationen und Einstellungen. Hier begegnet uns auch erstmals die Variable $cookie. Diese Variable enthält mehrere Werte, ist ein sogenanntes Array. Die Anzeige von $cookie ohne einen Zusatz, würde den ganzen Inhalt der Variablen anzeigen. Nur damit kann man hier natürlich nichts anfangen. Deshalb sagt man, zeige den zweiten Wert in dieser Variablen. Also $cookie[1]. Dieser enthält den Usernamen. Der zweite Wert ist es deshalb, weil $cookie[0] der erste Wert ist und das Passwort enthält. Ein einfacher Logout wird hier direkt angeboten, so dass man sich den Umweg über das persönliche Menue ersparen kann. Auch hier werden die Funktionsaufrufe direkt ausgegeben mit: modules.php?name=Your_Account&op=logout.

Da diese Form des Links schon ab und an mal gefallen ist, hier eine kurze Erläuterung über den Sinn und den Umgang mit solchen Funktionsaufrufen.

Hinweis:
Die modules.php in der Webroot hat nur eine Aufgabe, den Schutz der einzelnen Module im Unterordner. Ein direkter Aufruf, z.B. [ URL ]/modules/Your_Account/index.php würde zu einer Fehlermeldung führen, da Werte die zur Ausführung benötigt werden, erst durch die modules.php zur Verfügung gestellt werden. Deshalb bedient man sich des Aufrufes "?name=", was gleichbedeutend ist mit, rufe im Module Ordner den Unterordner /Your_Account/index.php auf.. "&op=" bedeutet übersetzt, "und (gleichzeitig, hänge an, und) die Operation =" aufrufen. & gibt hier einen zweiten Wert weiter. Hier kann man aber immer nur eine Funktion aufrufen.


To be continued

Mirko

Zum nachlesen und ausdrucken
Datei ist ein PDF und wird sofort geöffnet.
Der Acrobat Reader ist dafür notwendig!
[Bearbeitet am: 15/5/2002 von SiteAdmin Micro]

[Editiert am 21/12/2002 von SiteAdmin Micro]

[soxin]

Toll Micro!
Echt toll das du dir so eine Mühe gibst!
Weiter so!
 

[Robert1968]

kann ich mic nur anschliessen!
hab jetzt zwar nich alles gelesen aber werd ich auf jeden Fall noch nachholen...man kann nur dazulernen
Weiter so!

[Deepsky]

Alle Achtung,

Micro.. kann mich nur anschließen und sagen; super Arbeit.
Bin gespannt wie es weitergeht

Gruß Deep

[jogi24]

hi
hut ab, für das was du hier leistest, es wird bestimmt einigen usern das prob mit den themes sehr erleichtern.

[piximo]

hi micro,
dolle arbeit ;-)
aber etweder ich habs überlesen oder du hast es garnicht geschrieben, wie kann man denn die textfarbe für links/mitte/rechts unterschiedlich setzen?

dean

[Micro]

Erst mal Danke, ich hab gehofft das es mal etwas bringt. ;o)
Und Sorry, ich hatte letzte Nacht meinen Server abgeschossen. Deshalb waren weder Download noch Bilder zu erreichen. *grmpf*

hi micro,
dolle arbeit ;-)
aber etweder ich habs überlesen oder du hast es garnicht geschrieben, wie kann man denn die textfarbe für links/mitte/rechts unterschiedlich setzen?

Und Piximo noch die Antwort gereicht, das kommt noch mit den Farbspielen ebenso wie ich versuchen will noch einige andere Szenarien mit den Themen zu beschreiben. Aber erst mal wollt ich bei den Standard Themen bleiben. Wie in jedem guten Buch kommen die wirklich interessanten Dinge erst zum Schluss *grins*

Der nexte Teil kommt heute Abend, da man doch länger an einem so kurzen Artikelchen hängt als ich ursprünglich vermutet hatte. Es sind jedes mal gut 2 Stunden pro Teil.
Und nun werd ich einem Einkaufsrausch erliegen  

Mirko

[piximo]

ohne frage micro, deine arbeit ist bemerkenswert. die die es brauchen, werden dir die füsse küssen :-D
 wenn die nuke-theme-thematik abgearbeitet ist kannst dir in einer stillen minute mal proxima anschauen. ich glaube da wird dann ein teil nicht 2 sondern 3-4 stunden dauern. ich meine hier das selbstbauen eines themes.
aber glücklicherweise sind die schon so gut(aus meiner sicht), dass man nix mehr machen muss ausser feinschliff und dann themeeditor und layouteditor rüber... das war´s.

hatte ja schon mal einen kurzen anfang gemacht, da aber keine resonanz kam, habe ich das projekt proxima-tutorial gleich wieder fallengelassen.

scheinbarwr die aufmachung nicht die beste.
was solls, da kann ich mich wenigstens anderen dingen widmen.
wenn es dir widererwartend in den sinn kommen sollte für proxima auch sowas zu schreiben, sag vorher bescheid. werde dir da in jedem fall unter die arme greifen, denn auf dem ersten blick erschliesst sich proxima nicht sofort. wenn man die stärken erst einmal entdeckt hat macht es richtig spass.

so dat war´s erst mal.

dean

[Micro]

Teil 5

Die Suchfunktionen und Anzeige der Topics

Immer noch in der dritten Tabellenebene. Nach der dynamischen Anzeige Anonymous/User, nun die beiden Suchfunktionen.

Zeilen 129 bis 142

####

    echo "<td width=\"15%\" align=\"right\">";
    echo "<form action=\"modules.php?name=Search\" method=\"post\"><font size=\"2\" color=\"$textcolor1\">"._SEARCH." : </td><td width=\"10%\" align=\"left\">\n"
     ."<input type=\"text\" name=\"query\" size=\"14\" class=\"formtexts\"></font>\n";
    echo "</td><td width=\"10%\" align=\"right\">";
    echo "<form action=\"modules.php?name=Search\" method=\"get\"><font size=\"2\">"._TOPICS." : \n";
    $toplist = sql_query("select topicid, topictext from $prefix"._topics." order by topictext", $dbi);
    echo "</td><td align=\"left\" width=\"10%\"><select name=\"topic\"onChange='submit()'>\n";
    echo "<option value=\"\" class=\"formtexts\">"._ALLTOPICS."</option>\n";
    while(list($topicid, $topics) = sql_fetch_row($toplist, $dbi)) {
    if ($topicid==$topic) { $sel = "selected "; }
     echo "<option $sel value=\"$topicid\">$topics</option>\n";
     $sel = "";
    }
     echo "</td></tr></form></table>";

####

Nachdem der User sich nun einloggen konnte (oder auch nicht), im rechten Teil der Tabelle die Suchfunktionen, die in beiden Anzeigen, also angemeldeter User oder Anonymer Besucher, immer an der selben Stelle zu sehen sein sollten. Deshalb auch der Aufwand mit den Tabellenspalten. Nichts sieht unschöner aus, wenn zwischen der einen und der anderen Ausgabe die Hälfte plötzlich an anderer Stelle zu finden ist.

Die nächste Spalte wird geöffnet und gleichzeitig der nächste <form> Tag definiert. Ausführende Datei die modules.php?name=Search, an die nachfolgend eingetragenen Werte zur Suche in die Variable $query übergeben werden. Die Variable $query wird im Eingabefeld {input type=\"text\" name\"query\"} definiert und von dort weitergegeben. Auch hier wieder die CSS Komponente "formtexts", die den Hintergrund des Eingabefeldes einfärbt, verwendet. (nur Internet Explorer ab 5.5) Die Variable ._SEARCH. Wird aus dem Sprachmodul (language/lang-XXXXX.php) definiert.

Um das nachfolgende, in der nächsten Tabellenspalte angezeigte Drop Down Menü zu erhalten, ist  jetzt die erste Datenbankabfrage fällig. (siehe Hinweis (*2))
Der Variablen $toplist wird mit der Abfrage; {sql_query("select topicid, topictext from $prefix"._topics." order by topictext", $dbi);} das Array zugeordnet, das alle verwendeten Topics aus der Datenbank enthält.

-   sql_query = der Aufruf zur Funktion DB Abfrage, siehe auch (*2)
-   select = wähle aus dem Inhalt der Tabelle folgende Spalten:
-   topicid, topictext = Definiere abzufragende Spalten:
-   from = Welche Tabelle?
-   $prefix = vorangesetzte Variable zur Definition mehrerer Portale in einer DB, steuerbar in der config.php
-   ._topics. = aus (fest) definierter Tabelle (*3)
-   order by = sortiere nach;
-   topictext = Alphabetisch (bei A beginnend) aus der Spalte
-   $dbi = Autorisierung, Anmeldung an der DB, Konfiguration in der config.php

Das nach dieser Abfrage die Spalte erst geschlossen wurde, ist mehr oder weniger Zufall. Sie könnte ebenso gut an anderer Stelle stehen. In der nächsten und letzten Spalte wird jetzt die Option definiert. Für viele unverständlich warum man einem Eingabefeld (input type) eine Variable zuordnen muss und eine Option scheinbar "von allein" funktioniert. Einfach erklärt, in der Definition des <form> Tags wurde schon "gesagt" wohin der ausgewählte Wert gesendet werden soll. Das absenden übernimmt ein JavaScript {onChange='submit'}. Hier ist ein "kleiner" Syntaxfehler, der aber an dieser Stelle, unter HTML 3, nicht ins Gewicht fällt. Eigentlich müsste es hier lauten; {onChange=\"submit\"}. Groß/ Kleinschreibung ist hier nur der Lesbarkeit wegen so gewählt.
Die <option> öffnet jetzt das Auswahlfeld und ._ALLTOPICS. wird wieder in der Sprachdatei bestimmt. Dieser Wert ist auch der ständig angezeigte Wert, der einem nach dem betreten der Seite angezeigt wird. {while(list($topicid, $topics) = sql_fetch_row($toplist, $dbi))}, ist ähnlich einer if Abfrage, hat jedoch die Eigenschaft die Anzahl und die Werte zu suchen, von denen man vorher nicht wissen kann wie viele Werte man aus der vorher abgefragten Tabelle ausgelesen hat.

-   while = wie eben beschrieben
-   list = PHP Befehl, weist den als Argumente übergebenen Variablen die Werte aus
einem Array zu, die Werte sind;
-   $topicid, $topics = zu beachten das sie in der selben Reihenfolge geschrieben werden wie zuvor in der Datenbankabfrage
-   sql_fetch-row = Funktionsaufruf und weist den vorhergehenden Variablen den Spalteninhalt der Tabelle zu. Siehe auch (*2)
-   $toplist = der aus der zuvor abgefragten Tabelle zugewiesenen (gefundenen) Werte
-   $dbi = Autorisierung, Anmeldung an der DB, Konfiguration in der config.php

Nun weiß die Funktion wie oft sie durchlaufen kann und listet mit Hilfe der If Abfrage die in den zuvor zugewiesenen Inhalt der Variablen enthaltenen Topics.
{echo "<option $sel value=\"$topicid\">$topics</option>\n";}
-   <option> = Inhalt der Liste
-   $sel = was wird am Ende gewählt, ist der numerische Ausdruck (zugewiesen den einzelnen Themen) der übergeben wird an die Suchabfrage (könnte zusätzlich anderweitig verwendet werden)
-   value=\"$topicid\" = der enthaltene Wert für $sel
-   $topics = Klartextanzeige im Dropdown Menü
-   </option> = das Ende des Listenfeldes

Abschließend wird das Optionsfeld beendet und die Tabelle komplett geschlossen.




(*2) MySQL-Datenbankabfragen:

Viele schimpfen über PHPNuke, weil es Unmengen an Traffic verursacht. Und das sind Dinge die oftmals hausgemacht sind. Abfragen sollten eigentlich immer nur das aus den Tabellen auslesen was tatsächlich benötigt wird. Das bedeutet, das nicht das Sternchen "*", also ALLES in den String der Abfrage geladen werden darf. Das macht zum einen die Abfrage langsamer und zum zweiten wird der übertragene Datenstrom dadurch unnötig nach oben getrieben. Ich habe hier in den meisten Themen gesehen, das gerade in der Darstellung der Adminfunktionen (wird später hier noch beschrieben) komplett die ganze Tabelle ausgelesen wird, obwohl ja eigentlich nur die Anzahl der neuen Dateien benötigt wird.
PHPNuke ist seit Version 5.3 in der Lage, mit mehreren Datenbank Typen zu kommunizieren. Das wird gesteuert über die includes/sql_layer.php. Dort werden die Abfragen entsprechend umgesetzt. Leider wurde das in vielen Fällen einfach übergangen. Stattdessen werden die normalen MySQL DB Abfragen verwendet. Deshalb auch dieser kleine Ausflug in die Datenbank Programmierung.

Standardmäßig beinhaltet eine DB Abfrage für MySQL den Befehl; mysql_query. Im Nuke wurde daraus eine Funktion gebaut, die nur sql_query lauten muss. In der sql_layer.php wird diese Funktion dann entsprechend in eine DB Abfrage umgebaut.
Denn es gibt einen internationalen Standard, der SQL Abfragen definiert. Sicher gibt es von Version und Type unterschiedliche Umsetzungen, aber im Grunde funktionieren alle Datenbanken nach dem gleichen Schema mit den selben Befehlen.
Hinweis:
Die Steuerung der Art der benutzen DB, wird in der config.php als $dbtype gesetzt.

Das erleichtert das Arbeiten mit der Datenbank. Es können zentral Fehler erfasst und ausgegeben werden. Wenn man aber den anderen Weg geht, hebelt man damit in gewisser Weise sogar Schutzfunktionen für die Datenbank und das Portal aus.


(*3) Case sensitive, groß/Kleinschreibung ist wichtig zu beachten unter Linux/Unix Systemen. Auch hier werden DB Abfragen, so wie im Dateisystem auf diesen Servern, unterschiedlich gehandhabt. Windows spielt hier eine Ausnahme!

To be continued

Mirko

Zum nachlesen und ausdrucken
Datei ist ein PDF und wird sofort geöffnet.
Der Acrobat Reader ist dafür notwendig!

[Editiert am 21/12/2002 von SiteAdmin Micro]

[Micro]

Da es Fragen dazu gab was Arrays beinhalten, ein Teil des Anhangs jetzt schon:

Anhang:

Datenbank Schema



Block 1:
Gespeicherte Werte in der Tabelle, Spalten wert-a und wert-b

Block 2:
Abfrage und Art der Speicherung in der Variablen $wert

Block 3:
Auslesen aus der Variablen $wert und zuweisen den Variablen $wert-a und $wert-b

Zum nachlesen und ausdrucken
Datei ist ein PDF und wird sofort geöffnet.
Der Acrobat Reader ist dafür notwendig!

[Editiert am 21/12/2002 von SiteAdmin Micro]

[Micro]

Teil 6

Die Hauptnavigation:

Zeile 151 bis 172

####

# Zeile vor Hauptnavi
    echo "<table cellspacing=\"0\" cellpadding=\"0\" width=\"801\" align=\"center\" border=\"0\">";
    echo "<tbody><tr>";
    echo "<td valign=\"center\" align=\"middle\"><img height=\"1\" src=\"themes/maaX_Micro_platinblack/images/pixel.gif\" width=\"100%\" border=\"0\"></td>";
    echo "</tr></tbody>";
    echo "</table>";
# Zeile Hauptnavi

    echo "<table cellpadding=\"1\" cellspacing=\"0\" align=\"center\" width=\"801\" border=\"0\" bgcolor=\"$bgcolor2\"><tr><td>\n";
    echo "<table cellpadding=\"1\" cellspacing=\"0\" align=\"center\" width=\"100%\" border=\"0\" bgcolor=\"$bgcolor3\"><tr>"
         ."<td align=\"left\" width=\"85%\" valign=\"middle\"><img height=\"2\" src=\"themes/maaX_Micro_platinblack/images/pixel.gif\" width=\"1\">";
    echo "\n"

         ."<A href=\"./\"><img src=\"themes/maaX_Micro_platinblack/images/home.gif\" border=0></a>\n"
         ."<A href=\"modules.php?name=Your_Account\"><img src=\"themes/maaX_Micro_platinblack/images/loginlogout.gif\" border=0></a>\n"
         ."<A href=\"modules.php?name=Topics\"><img src=\"themes/maaX_Micro_platinblack/images/themen.gif\" border=0></a>\n"
         ."<A href=\"modules.php?name=Submit_News\"><img src=\"themes/maaX_Micro_platinblack/images/beitrag.gif\" border=0></a>\n"
         ."<A href=\"modules.php?name=Downloads\"><img src=\"themes/maaX_Micro_platinblack/images/downloads.gif\" border=0></a>\n"
         ."</td>\n"
         ."<td align=\"right\" width=\"15%\" valign=\"middle\">\n"
         ."<script type=\"text/javascript\">\n\n"
         ."<!--   // Array ofmonth Names\n"
         ."var monthNames = new Array( \""._JANUARY."\",\""._FEBRUARY."\",\""._MARCH."\",\""._APRIL."\",\""._MAY."\",\""._JUNE."\",\""._JULY."\",\"".
_AUGUST."\",\""._SEPTEMBER."\",\""._OCTOBER."\",\""._NOVEMBER."\",\""._DECEMBER."\");\n"
         ."var now = new Date();\n"
         ."thisYear = now.getYear();\n"
         ."if(thisYear < 1900) {thisYear += 1900}; // corrections if Y2K display problem\n"
         ."document.write(monthNames[now.getMonth()] + \" \" + now.getDate() + \", \" + thisYear);\n"
         ."// -->\n\n"
         ."</script>\n\n"
         ."</td></tr></table>\n</td></tr></table>\n";

####

Die Navigation wird mit einer kleinen Optischen Spielerei begonnen. Hier wird wieder eine Tabelle geöffnet um eine Grafik über die Tabellenbreite darstellen zu können. Es handelt sich hier tatsächlich um eine Grafik, die 1 x 1px groß ist und transparent. Diese ist nie zu sehen, wird aber benötigt um definierte Abstände zwischen Tabellen oder Grafiken zu bringen. Nun entsteht der Eindruck, auf Grund des Hintergrundbildes, das diese kleine Leerzeile sich nach rechts hin verjüngt, also schmaler wird und einen Farbverlauf imitiert. Nach dem Pixel wird die Tabelle wieder geschlossen.

Diese Optische Täuschung wird noch verstärkt durch die nachfolgende Tabelle, die wieder doppelt geschrieben wird. Die erste Tabelle mit blauem Hintergrund ($bgcolor2), die zweite Tabelle mit einem px Abstand zur ersten und schwarz ($bgcolor3). Dadurch entseht dieser ein Pixel bereite Rahmen, der die Tabelle mit den Grafiken umschließt. Wie man sieht, manches mal ist es recht witzig, einfach mal das Zusammenspiel zwischen Grafik, Hintergrund und Tabelle zu beobachten. Wobei hier $bgcolor3 eigentlich falsch ist. Der Ordnung halber sollte entweder die Kombination $bgcolor 1 + 2 bzw. 3 und 4 benutzt werden.

In der Tabelle mit der Hauptnavigation, Tabellenbreite 801px, Spaltenbreite(1) von 85%, Downloads, Your Account, Submit News etc. sind die ersten Hauptlinks in die Webseite grafisch dargestellt. Wichtig ist hier auf jeden Fall die Grafiken mit {border=\"0\"} auszustatten. Ansonsten würde ein recht unschöner Linkrahmen um die Grafiken gezogen werden. In der zweiten Spalte wird mit Hilfe eines Java Scriptes das aktuelle Datum eingefügt, Breite 15%. Auch hier wieder der Hinweis, den Pfad zur Themengrafik könnte man wieder mit der Variablen $thename ersetzen.

Das Admin Menü

Das Admin Menü hat einige ausgewählte Links im Schnellzugriff zur Administration der Webseite. Auch informiert es über neu eingegangene Artikel, Links oder dergleichen.

Zeile 179 bis 218

####

     if (is_admin($admin)) {
# Linie

       echo "<table cellspacing=\"0\" cellpadding=\"0\" width=\"800\" align=\"center\" bgcolor=\"$bgcolor2\" border=\"0\">\n";
       echo "<tbody><tr>\n";
       echo "<td valign=\"center\" align=\"middle\"><img height=\"3\" src=\"themes/maaX_Micro_platinblack/images/titleBar.gif\" width=\"100%\" border=\"0\"></td>\n";
       echo "</tr></tbody></table>\n";
       echo "<table cellpadding=\"0\" cellspacing=\"0\" width=\"800\" border=\"0\" align=\"center\" bgcolor=\"$bgcolor3\"><tr>\n";
       echo "<td align=\"center\" colspan=\"0\"><a href=\"admin.php\">Administration</a>\n";
                 $res=sql_query("select qid from $prefix"._queue."", $dbi);
                 $num = sql_num_rows($res, $dbi);
                 echo " | <a href=\"admin.php?op=submissions\">Neue News: $num</a>\n";
                 $res=sql_query("select lid from $prefix"._links_newlink."", $dbi);
                 $num = sql_num_rows($res, $dbi);
                 echo " | <a href=\"admin.php?op=Links\">Neue Links: $num</a>\n";
                 $res=sql_query("select lid from $prefix"._downloads_newdownload."", $dbi);
                 $num = sql_num_rows($res, $dbi);
                 echo " | <a href=\"admin.php?op=downloads\">Neue Downloads: $num</a>\n";

# Galleria Admin
#                 $res=sql_query("select pid from $prefix"._gallery_pictures_newpicture."", $dbi);
#                 $num = sql_num_rows($res, $dbi);
#                 echo " | <a href=\"admin.php?op=GallAdmin\">Neue Bilder: $num</a>\n";
# Kalender Admin
#                 $res=sql_query("select qid from $prefix"._events_queue."", $dbi);
#                 $num = sql_num_rows($res, $dbi);
#                 echo " | <a href=\"admin.php?op=CalendarAdmin\">Neue Termine: $num</a>\n";

                 echo " | <a href=\"admin.php?op=messages\">AdminMessage</a>\n";
                 echo " | <a href=\"admin.php?op=Configure\">Einstellungen</a>\n";
                 echo " | <a href=\"admin.php?op=logout\">Logout</a>\n\n";
                 echo "</font></td>";
       echo "<table cellspacing=\"0\" cellpadding=\"0\" width=\"800\" align=\"center\" bgcolor=\"$bgcolor3\" border=\"0\">";
       echo "<tbody><tr>";
       echo "<td valign=\"center\" align=\"middle\"><img height=\"3\" src=\"themes/maaX_Micro_platinblack/images/titleBar.gif\" width=\"100%\" border=\"0\"></td>";
       echo "</tr></tbody>";
       echo "</table>";
           } else {
          // echo "";
      }

####

Die Programmierung des Admin Menüs sieht weitaus komplizierter aus als es ist. Gleich zu Anfang finden wir eine if Abfrage;
{ if (is_admin($admin)) } ... die Funktion is_admin wird hier aufgerufen und der Parameter $admin an diese Funktion weitergegeben. Zu finden ist diese Funktion in der mainfile.php und hat keine andere Aufgabe, als zu prüfen ob man als Administrator der Webseite eingeloggt ist. Wenn nicht, dann wird { else } in Funktion treten und nichts machen. Springt demzufolge ohne abarbeiten zur eigentlichen Webseite, dem Anzeigen der Blöcke und des Contents.

In dem Fall das der Admin eingeloggt ist, wird als erstes eine Linie unter die bisherigen Tabellen in Form einer Grafik gezogen. Ich wollte das Menü ein wenig abgrenzen und sichtbarer machen. Auch hier benutze ich mich wieder eines kleinen "Schwindels" und benutze die Balkengrafik. Nur das ich diese jetzt nicht nur auf 100% Tabellenbreite bringe, sondern auch etwas stauche, auf 3px Höhe. So nutzt man ein und dieselbe Grafik ohne diese zig mal an den Besucher übertragen zu müssen. Siehe den Punkt Traffic der Webseite. Nachdem die Tabelle geschlossen wurde, geht es übergangslos zur nächsten Tabelle, der eigentlichen Admin Anzeige.

Eine Tabelle wird eröffnet, die mit 800px Breite und schwarzem Hintergrund definiert wurde. Ebenso soll sie keinen Abstand zum Rand haben dürfen. Sich also eng anliegend an den zuvor gezogenen Balken schmiegen.

Jetzt kommen die ersten Links zum Admin Menü. Als erstes das Admin Menü über den Link { <a href=\"admin.php\">Administration</a> }. Im weiteren sind einige Tabellenabfragen nach Neueingängen Der Links, Content oder anderem eingefügt. Ich beschreibe hier nur einen Link, da sich der Rest nur insofern unterscheidet, das er eine andere Tabelle ansprechen muss und einen anderen Inhalt auslesen.

Als erstes muss man selbst definieren was man angezeigt haben will. Hier sollen neue Artikel ins Auge fallen und geben einem eine Übersicht über die Anzahl. Das erreicht man mit folgendem Aufruf;
{$res=sql_query("select qid from $prefix"._queue."", $dbi);}

-   $res = Resultat der Abfrage
-   sql_query = Funktion (mysql_query) ? Suche aus Wert:
-   select = der Spalte in der:
-   $prefix"._queue." = $prefix aus config.php + Tabellen Name = Tabelle
-   $dbi = Authentifizierung an der DB (wird zusammengesetzt in der mainfile.php)

Als nächstes benötigen wir die Anzahl der neuen Einträge.
{ $num = sql_num_rows($res, $dbi); }

-   $num = die Nummer, könnte ebenso $res sein, weil ich diese Variable nicht mehr benötigen würde und die in der nächsten Abfrage ja wieder neu beschrieben wird.
-   Sql_num_rows = Funktion (mysql_num_rows)  suche Anzahl der eingetragenen Werte in:
-   $res = der Variablen (Array) und schreibe die Anzahl in $num
-   $dbi = Authentifizierung

Nun habe ich den aktuellen neuen Wert, wie viele neue Artikel der Admin Freischalten kann. In folgender Zeile wird dann das Ergebnis mitsamt dem Link geschrieben.
{ echo " | <a href=\"admin.php?op=submissions\">Neue News: $num</a>\n"; }

Ich denke hier muss ich nicht näher mehr darauf eingehen, was die einzelnen Angaben zu bedeuten haben. Nachfolgend wird ebenso verfahren. Alles entspricht, bis auf den Link selbst und den Abfragen dem selben Schema.

Nachdem man nun alles das eingetragen hat was man selbst im Schnellzugriff als Admi haben möchte, wir die Tabelle geschlossen, die nachfolgende Abschlusslinie gezogen und der Seitenkopf ist nun komplett fertig. Jetzt wird es richtig spannend. Die Webseite wir mit ihren Informationen zusammengestellt. Aber vorher hab ich eine Frage an die Mitleser ,o)

Wenn keine neuen Artikel gepostet wurden, ist die Anzeige "null". Was müsste man tun, um ein übersehen der neuen Artikel zu vermeiden? Wie muss man es anstellen um eine farbliche Änderung der Zahl oder des Links zu erreichen, damit man sofort auf neues aufmerksam gemacht wird? Schickt mir mal, per Page Message, die Codeschnipsel so wie ihr es anstellen würdet ;o).


To be continued

Mirko

Zum nachlesen und ausdrucken
Datei ist ein PDF und wird sofort geöffnet.
Der Acrobat Reader ist dafür notwendig!
(237kb)

[Editiert am 21/12/2002 von SiteAdmin Micro]

[Micro]

Teil 7

Grundsätzliches und Aufbau der Contentanzeigen:

Nachfolgendes Bild 5, zeigt farblich umrandet die benötigten Tabellen.


Bild 5

-   Grün = Tabelle 1 in der alles dargestellt werden soll. Diese bestimmt den gesamten Hintergrund der Anzeige, nicht der Seite!
-   Rosa = Die Aufteilung der einzelnen Spalten, in der die Blöcke bzs Artikel untergebracht werden sollen. Wie man unschwer erkennen kann, ist diese Tabelle in 7 Spalten aufgeteilt.
-   - Spalte 1 definiert den Abstand der linken Blöcke zum Rand
-   - Spalte 2 definiert die Breite der linken Blöcke
-   - Spalte 3 definiert den Abstand zwischen linken Blöcken und Content
-   - Spalte 4 definiert die Breite des Contents
-   - Spalte 5 definiert den Abstand zwischen Content und rechten Blöcken
-   - Spalte 6 definiert die Breite der rechten Blöcke
-   - Spalte 7 definiert den Abstand der rechten Blöcke zum Rand

Die rosa eingefärbte Tabelle ist diejenige Tabelle, die grundsätzlich die Anzeigen innerhalb und für die angezeigten Werte definiert. Diese müssen fest definiert sein. Ebenso wie die Breite der grünen Tabelle. Alles andere wird nun mit Hilfe der Funktionen OpenTable(), denn diese nutzt die zur Verfügung stehende Breite innerhalb der rosa Tabellenspalte. OpenTable2() würde hier fehl am Platze sein, da diese nur einen definierten Abstand nach innen, also zum Text etc. halten würde.

Alle anderen Tabellen sind erkennbar und beschriftet, was diese darstellen sollen.

Haupttabelle, linke Blöcke und Centerblock

Zeile 232 bis 241

####

    echo"<table width=\"801\" cellpadding=\"0\" cellspacing=\"1\" bgcolor=\"$bgcolor2\" border=\"0\" align=\"center\"><tr valign=\"top\"><td>\n";  //globale Tabelle
    echo"<table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" bgcolor=\"$bgcolor3\" border=\"0\" align=\"center\"><tr valign=\"top\">\n"  //globale Tabelle
       ."<td><img src=\"themes/maaX_Micro_platinblack/images/pixel.gif\" width=\"2\" height=\"1\" border=\"0\" alt=\"\"></td>\n"
       ."<td width=\"150\" valign=\"top\">\n";
    blocks(left);
    echo "</td>\n"
       ."<td><img src=\"themes/maaX_Micro_platinblack/images/pixel.gif\" width=\"5\" height=\"1\" border=\"0\" alt=\"\"></td>\n"
       ."<td width=\"100%\">\n";
    include ("themes/maaX_Micro_platinblack/cblock.php");
}

####

Der spannende Augeblick, auch den sicher die meisten hier gewartet haben ;o).
Die erste Zeile definiert die Haupttabelle, wie unter Bild 5 als grüner Bereich dargestellt. Danach die zweite Tabelle, im Bild 5 als rosa Bereich. Die erste mit blauem Hintergrund ($bgcolor2) und die zweite mit schwarzem Hintergrund ($bgcolor3). Auch hier wieder, entweder $bgcolor 1+2 oder 3+4 auf diese Weise miteinander nutzen.

Die erste Spalte wird definiert.
{ "<td><img src=\"themes/maaX_Micro_platinblack/images/pixel.gif\" width=\"2\" height=\"1\" border=\"0\" alt=\"\"></td>\n" }
Das hier ein Pixel mit 2px Breite eingefügt wurde kann die erste Spalte im Bereich rosa (Bild 5) erklären. Der Abstand zur ersten Tabelle wird hier mit 2px über eine Referenz Grafik definiert. Die Spalte wird danach auch gleich wieder geschlossen.
Spalte 2 { <td width=\"150\" valign=\"top\"> } wird hier mit 150px Breite definiert, soll oben (top) angezeigt werden und bleibt vorerst offen. Denn jetzt werden mit dem Funktionsaufruf blocks(left), in Zeile 236, die linken Blöcke geparst.
Blocks(left) ruft die Funktion blocks in der mainfile.php auf. Der in Klammern stehende Wert (left) übergibt "left" als Wert in die Variable $side in der mainfile.php und fragt da die Datenbank ab, welche Blöcke links angezeigt werden dürfen und durchläuft dort noch einige andere Abfragen in Sachen Zugriffsberechtigungen und ähnliches.
Diese Funktion ruft dann in der themes.php die Funktion themesidebox auf. Dort werden die Blöcke mit den Kopf und allem Zubehör erstellt.

Blöcke darstellen:
function themesidebox()

Zeilen 373 bis 395

Tja... und ab hier wird es wohl Unfug das ganze.

Mit der Beschreibung dieses Themas sind mir jetzt erst einige sinnlose Formatierungen aufgefallen, die so nicht sein müssen oder dürfen.

Mit anderen Worten, es wird wohl morgen oder übermorgen erst mal ein Update des Themas geben müssen. Denn wenn ich hier anfangen würde alles falsche zu erklären, würde ich mehr für Verwirrung sorgen als vernünftig zu erklären.
Tja, so kann es gehen, wenn man "nur" etwas ändert ;o)

Also dann, ich hoffe ich bin morgen Abend soweit und kann mit vernünftig geschriebenem Quelltext weiterschreiben ;o)

Mirko

To be continued

Zum nachlesen und ausdrucken
Datei ist ein PDF und wird sofort geöffnet.
Der Acrobat Reader ist dafür notwendig!
269kb

[Editiert am 21/12/2002 von SiteAdmin Micro]

[Micro]

So, das Thema hat das Update schon erhalten. Bitte hier downloaden und die themes.php im Themes Ordner ersetzen.
Update

Mirko

[Micro]

Teil 7.a

Blöcke darstellen:
function themesidebox()

Nachdem nun Ordnung im Quelltext herrscht geht?s nun weiter im Text.

Zeilen 366 bis 387

####

function themesidebox($title, $content) {
global $bgcolor1, $bgcolor2;

# Pixel frei
   echo "<img src=\"themes/maaX_Micro_platinblack/images/pixel.gif\" width=\"1\" height=\"2\" border=\"0\">\n";
# Tabelle Block
   echo "<table border=\"0\" cellpadding=\"0\" cellspacing=\"1\" bgcolor=\"$bgcolor2\" width=\"150\"><tr><td>\n";
# Kopfgrafik
   echo "<img src=\"themes/maaX_Micro_platinblack/images/sideBoxTop.gif\"></td></tr>\n";
   echo "<tr><td bgcolor=\"$bgcolor1\"><img src=\"themes/maaX_Micro_platinblack/images/pixel.gif\" width=\"1\" height=\"1\" border=\"0\"></tr></td>\n";
# Titlebar
   echo "<tr><td align=\"center\"><font size=\"2\">$title</font></td></tr>\n";
   echo "<tr><td><img src=\"themes/maaX_Micro_platinblack/images/pixel.gif\" width=\"1\" height=\"1\" border=\"0\"></tr></td>\n";
# content
   echo "<tr><td bgcolor=\"$bgcolor1\">$content</td></tr>";
# Fußgrafik
   echo "<tr><td valign=\"center\" align=\"middle\"><img height=\"5\" src=\"themes/maaX_Micro_platinblack/images/titleBar.gif\" width=\"100%\" border=\"0\"></td>";
   echo "</tr></table>\n";
# Pixel frei zum nächsten Block
   echo "<img src=\"themes/maaX_Micro_platinblack/images/pixel.gif\" width=\"1\" height=\"5\" border=\"0\">\n";

}

####

Als erstes wieder eine Hilfsgrafik, welches die Position/Abstand des ersten Blocks vom oberen Rand bestimmt.
Es wird eine Tabelle geöffnet, wieder mit $bgcolor2 (blau) und hier mit definierter Breite von 150px. In der ersten Zeile die Kopfgrafik, der zweiten Zeile kann nun wahlweise ein weiteres Pixel eingefügt werden, um den Abstand der nachfolgenden Blocküberschrift zu positionieren, der Inhalt der Überschrift ($title) etc.
In einer der darauffolgenden Zeilen wird der eigentliche Inhalt des Blocks angezeigt. Die Variable $content enthält die Informationen.
Den Abschluss des Blocks enthält nun der Balken und ein Pixel mit 5px Höhe. Dieses bestimmt den Abstand zum nachfolgenden Block.

Mirko

To be continued

Zum nachlesen und ausdrucken
Datei ist ein PDF und wird sofort geöffnet.
Der Acrobat Reader ist dafür notwendig!
282kb

[Editiert am 21/12/2002 von SiteAdmin Micro]

[DarkBoy]

Hi
wie gewohnt , mal wieder super Arbeit, THX und denke es können etliche nun auch ein Themen bauen und verstehen.