SunPhoenix
Bekanntes Gesicht
Inzwischen ist sie schon recht weit verbreitet in der Welt der Cynamite Profile - die Gästebuchbox. Dabei handelt es sich um eine kleine Box, in der direkt vom Profil aus ein Eintrag ins Gästebuch des Users gemacht werden kann.
Mit ein bisschen HTML und CSS lässt sich solch eine Box auch schon ganz schnell auf die Beine stellen, und in diesem Blog werde ich euch erklären, was ihr dafür genau tun müsst
Der Plan
Um überhaupt etwas zu erreichen, müssen wir in erster Linie einmal wissen, was wir denn überhaupt brauchen. Da wäre mal ganz allgemein ein Formular mit zwei Textboxen - eine für den Titel und eine für den Text - und ein Button um das Formular schlussendlich abzusenden. Optional kann man auch noch eine Beschreibung für die Textboxen einfügen.
Die Elemente, die wir also brauchen sind folgende:
Am besten macht ihr euch kurz über diese Elemente schlau. Am besten geht dies wie immer auf selfhtml.
Der Anfang
Ein Formular braucht immer eine Methode und eine Aktion. Die Methode - entweder GET oder POST, zwei Begriffe, die beide mit PHP zu tun haben - ist hier POST, da wir Werte in das Gästebuch eintragen wollen.
Die Aktion lässt sich auch auf einem ganz schnellen Weg herausfinden. Geht auf euer Gästebuch - via "Mein Gästebuch" in der linken Sidebar. Dort werdet ihr einen Link finden, der mit "Eintrag hinzufügen" beschrieben ist. Kopiert nun ganz einfach diesen Link und fügt ihn in den Code ein.
Das fertige Formular sieht dann wie folgt aus:
Zwei kleine Anmerkungen: Ich habe den Anfang des Links - alles vor /index.cfm... - weggelassen, da das Formular auch so versteht, dass sich die Action auf diese Seite bezieht.
Zudem muss man pid=844 durch pid=843 ersetzen, da sich 844 nur auf das eigene Profil bezeiht, und so von externer Seite kein Eintrag getätigt werden kann.
Die Textfelder
Die Textfelder für Titel und Text werden wir mithilfe des HTML Elements bewerkstelligen. Den Sendebutton übrigens auch, aber dazu kommen wir später.
Diese beiden Felder sind im Grunde genommen wirklich selbstredend. Das erste Feld übergibt den Titel ("title") und das zweite den Beitrag ("comment").
Der Sendebutton ist im Prinzip genau gleich einzufügen, ausser dass hier Name und ID überflüssig sind, und type="text" durch type="submit" ersetzt wird.
Wollt ihr hingegen das Cynamite-typische "Go"-Bildchen als Sendebutton benutzen, seid ihr mit diesem Code besser bedient.
Setzt dies nun in das Formular ein. Damit haben wir schon ein vollkommen funktionierendes Formular beieinander.
Ganz perfekt ist es so jedoch noch nicht. Gebt ihr diesen Code einfach so in euer Profil ein, so habt ihr drei Boxen, die nebeneinander auf einer Linie dargestellt werden. Zudem wird hier kein Mensch wissen, was er mit diesen drei Boxen anfangen soll.
Verbesserungen
Nun gibt es zwei Möglichkeiten, das zweite - und auch gravierendere - Problem aus der Welt zu schaffen. Die erste wäre, direkt einen Text in das Feld einzufügen. Dies ist zwar eine gute Möglichkeit, und sie ist auch weit verbreitet, jedoch ist es auf Cynamite eine etwas leidige Sache damit. Drückt der User dann einfach auf den Sendebutton, so habt ihr einen Beitrag im Gästebuch mit den von euch eingegebenen Texten. Daher ist die zweite Möglichkeit eigentlich etwas besser geeignet. Dabei geht es darum, das HTML Element einzusetzen. Ihr fügt also vor oder über einem Feld ein Label ein, das dem User genau sagt, was er einzugeben hat, und ihm bei einem Klick auch direkt zu dem entsprechenden Input weiterleitet. Es kommt hier ausschliesslich auf eure Wünsche an.
Value-Möglichkeit
Bei der Value Möglichkeit wird mit dem HTML Attribut value="" gespielt. Ihr ersetzt also eure Input Felder durch folgendes:
Habt ihr als Sendebutton das Bild, wird die Value bei diesem nicht benötigt.
Label-Möglichkeit
Hier wird im Gegensatz zu der ersten Möglichkeit ein Element anstatt einem Attribut verwendet, und zwar das Element.
Ihr fügt nun also vor den Felder für den Titel und den Text folgendes ein:
Titel ...
Beitrag ...
Klickt der Besucher nun auf eines dieser Label wird er direkt zum im for-Attribut angegebenen Feld weitergeleitet und kann den entsprechenden Wert eingeben.
Beim Sendebutton ist dies natürlich nicht nötig, daher würde ich auf jeden Fall dort die Value zu Senden abändern.
Egal wie ihr es nun gelöst habt, allzu gut wird es nun noch nicht aussehen. Und zudem noch in jedem Browser verschieden. Daher geht es nun weiter zum Styling.
Das Styling
Es gibt hier beinahe unendlich viele Möglichkeiten, das Formular zu stylen. Ich werde hier den Style erklären, den ich früher genutzt habe, und der auch heute noch am meisten gesehen werden kann.
Das Formular
Das Formular hat einen grauen Hintergrund, einen Innenabstand von 20 Pixeln, eine Rahmenlinie von einem Pixel in der Farbe Schwarz, ist insgesamt 150 Pixel breit, und hat abgerundete Ecken. Zudem hat es einen schwarzen Dropshadow von 5 Pixeln. Als Letztes wollen wir, dass alles zentriert dargestellt wird.
style="background: #EFEFEF; padding: 10px; border: 1px solid black; width: 130px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 5px #000; -webkit-box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000; text-align: center;"
Auffallend ist hier, dass ich anstatt den vorhin geforderten 150 Pixel hier nur eine Breite von 130 Pixel eingebe. Das liegt daran, dass das Padding, also der Innenabstand, auch in die Breite eingerechnet wird. Die Breite von 130 Pixel und die Abstände links und rechts ergeben zusammen 150 Pixel.
Solltet ihr mit den CSS3 Techniken - Border-Radius und Box-Shadow - nicht vertraut sein, könnt ihr dazu gerne meinen Blog lesen.
Die Input-Felder
Die Felder haben einen weissen Hintergrund, eine 1px starke schwarze Rahmenlinie, erstrecken sich über die gesamten 130px und haben ebenfalls abgerundete Ecken.
style="background: white; border: 1px solid black; width: 128px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;"
Wieder stossen wir hier auf ein Problem mit der Breite. Auch die Rahmenlinien werden in die Breite eingerechnet. Was beim Formular noch kaum eine Bedeutung hatte - das Formular kann ja eigentlich eine beliebige Breite haben - spielt hier sehr wohl eine Rolle. Setzt man die Breite nämlich auf 130 Pixel, werden die Textfelder zu breit und nicht genau zentriert positioniert, da sie eigentlich zu breit für das Innere des Formulares sind.
Der Sendebutton
In diesem Beispiel ist es kein Button, sondern ein Bild. Daher lässt es sich hier relativ einfach bewerkstelligen.
Hier wird also kein weiteres Styling benötigt.
Das Zwischenresultat
Nun klebt jedoch alles noch etwas aneinander. Das lässt sich mithilfe von margin ändern. Wir fügen bei den Input Feldern für den Titel und den Beitrag also nur noch margin-bottom: 5px; hinzu.
Das Endresultat
Damit habt ihr nun eine schöne Box, mit der ihr euer Gästebuch in euer Profil einbinden könnt. Weitere Beispiele zum Styling werden vielleicht noch folgen
Kleine Anmerkung zum Schluss: In meinem Code verwende ich meine User-ID - pk=25206. Falls ihr dies übersehen habt beim Schreiben des Codes, müsst ihr diese noch mit eurer ID aus dem Abschnitt "Der Anfang" ersetzten.
Mit ein bisschen HTML und CSS lässt sich solch eine Box auch schon ganz schnell auf die Beine stellen, und in diesem Blog werde ich euch erklären, was ihr dafür genau tun müsst
Der Plan
Um überhaupt etwas zu erreichen, müssen wir in erster Linie einmal wissen, was wir denn überhaupt brauchen. Da wäre mal ganz allgemein ein Formular mit zwei Textboxen - eine für den Titel und eine für den Text - und ein Button um das Formular schlussendlich abzusenden. Optional kann man auch noch eine Beschreibung für die Textboxen einfügen.
Die Elemente, die wir also brauchen sind folgende:
Am besten macht ihr euch kurz über diese Elemente schlau. Am besten geht dies wie immer auf selfhtml.
Der Anfang
Ein Formular braucht immer eine Methode und eine Aktion. Die Methode - entweder GET oder POST, zwei Begriffe, die beide mit PHP zu tun haben - ist hier POST, da wir Werte in das Gästebuch eintragen wollen.
Die Aktion lässt sich auch auf einem ganz schnellen Weg herausfinden. Geht auf euer Gästebuch - via "Mein Gästebuch" in der linken Sidebar. Dort werdet ihr einen Link finden, der mit "Eintrag hinzufügen" beschrieben ist. Kopiert nun ganz einfach diesen Link und fügt ihn in den Code ein.
Das fertige Formular sieht dann wie folgt aus:
Zwei kleine Anmerkungen: Ich habe den Anfang des Links - alles vor /index.cfm... - weggelassen, da das Formular auch so versteht, dass sich die Action auf diese Seite bezieht.
Zudem muss man pid=844 durch pid=843 ersetzen, da sich 844 nur auf das eigene Profil bezeiht, und so von externer Seite kein Eintrag getätigt werden kann.
Die Textfelder
Die Textfelder für Titel und Text werden wir mithilfe des HTML Elements bewerkstelligen. Den Sendebutton übrigens auch, aber dazu kommen wir später.
Diese beiden Felder sind im Grunde genommen wirklich selbstredend. Das erste Feld übergibt den Titel ("title") und das zweite den Beitrag ("comment").
Der Sendebutton ist im Prinzip genau gleich einzufügen, ausser dass hier Name und ID überflüssig sind, und type="text" durch type="submit" ersetzt wird.
Wollt ihr hingegen das Cynamite-typische "Go"-Bildchen als Sendebutton benutzen, seid ihr mit diesem Code besser bedient.
Setzt dies nun in das Formular ein. Damit haben wir schon ein vollkommen funktionierendes Formular beieinander.
Ganz perfekt ist es so jedoch noch nicht. Gebt ihr diesen Code einfach so in euer Profil ein, so habt ihr drei Boxen, die nebeneinander auf einer Linie dargestellt werden. Zudem wird hier kein Mensch wissen, was er mit diesen drei Boxen anfangen soll.
Verbesserungen
Nun gibt es zwei Möglichkeiten, das zweite - und auch gravierendere - Problem aus der Welt zu schaffen. Die erste wäre, direkt einen Text in das Feld einzufügen. Dies ist zwar eine gute Möglichkeit, und sie ist auch weit verbreitet, jedoch ist es auf Cynamite eine etwas leidige Sache damit. Drückt der User dann einfach auf den Sendebutton, so habt ihr einen Beitrag im Gästebuch mit den von euch eingegebenen Texten. Daher ist die zweite Möglichkeit eigentlich etwas besser geeignet. Dabei geht es darum, das HTML Element einzusetzen. Ihr fügt also vor oder über einem Feld ein Label ein, das dem User genau sagt, was er einzugeben hat, und ihm bei einem Klick auch direkt zu dem entsprechenden Input weiterleitet. Es kommt hier ausschliesslich auf eure Wünsche an.
Value-Möglichkeit
Bei der Value Möglichkeit wird mit dem HTML Attribut value="" gespielt. Ihr ersetzt also eure Input Felder durch folgendes:
Habt ihr als Sendebutton das Bild, wird die Value bei diesem nicht benötigt.
Label-Möglichkeit
Hier wird im Gegensatz zu der ersten Möglichkeit ein Element anstatt einem Attribut verwendet, und zwar das Element.
Ihr fügt nun also vor den Felder für den Titel und den Text folgendes ein:
Titel ...
Beitrag ...
Klickt der Besucher nun auf eines dieser Label wird er direkt zum im for-Attribut angegebenen Feld weitergeleitet und kann den entsprechenden Wert eingeben.
Beim Sendebutton ist dies natürlich nicht nötig, daher würde ich auf jeden Fall dort die Value zu Senden abändern.
Egal wie ihr es nun gelöst habt, allzu gut wird es nun noch nicht aussehen. Und zudem noch in jedem Browser verschieden. Daher geht es nun weiter zum Styling.
Das Styling
Es gibt hier beinahe unendlich viele Möglichkeiten, das Formular zu stylen. Ich werde hier den Style erklären, den ich früher genutzt habe, und der auch heute noch am meisten gesehen werden kann.
Das Formular
Das Formular hat einen grauen Hintergrund, einen Innenabstand von 20 Pixeln, eine Rahmenlinie von einem Pixel in der Farbe Schwarz, ist insgesamt 150 Pixel breit, und hat abgerundete Ecken. Zudem hat es einen schwarzen Dropshadow von 5 Pixeln. Als Letztes wollen wir, dass alles zentriert dargestellt wird.
style="background: #EFEFEF; padding: 10px; border: 1px solid black; width: 130px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 5px #000; -webkit-box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 5px #000; text-align: center;"
Auffallend ist hier, dass ich anstatt den vorhin geforderten 150 Pixel hier nur eine Breite von 130 Pixel eingebe. Das liegt daran, dass das Padding, also der Innenabstand, auch in die Breite eingerechnet wird. Die Breite von 130 Pixel und die Abstände links und rechts ergeben zusammen 150 Pixel.
Solltet ihr mit den CSS3 Techniken - Border-Radius und Box-Shadow - nicht vertraut sein, könnt ihr dazu gerne meinen Blog lesen.
Die Input-Felder
Die Felder haben einen weissen Hintergrund, eine 1px starke schwarze Rahmenlinie, erstrecken sich über die gesamten 130px und haben ebenfalls abgerundete Ecken.
style="background: white; border: 1px solid black; width: 128px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;"
Wieder stossen wir hier auf ein Problem mit der Breite. Auch die Rahmenlinien werden in die Breite eingerechnet. Was beim Formular noch kaum eine Bedeutung hatte - das Formular kann ja eigentlich eine beliebige Breite haben - spielt hier sehr wohl eine Rolle. Setzt man die Breite nämlich auf 130 Pixel, werden die Textfelder zu breit und nicht genau zentriert positioniert, da sie eigentlich zu breit für das Innere des Formulares sind.
Der Sendebutton
In diesem Beispiel ist es kein Button, sondern ein Bild. Daher lässt es sich hier relativ einfach bewerkstelligen.
Hier wird also kein weiteres Styling benötigt.
Das Zwischenresultat
Nun klebt jedoch alles noch etwas aneinander. Das lässt sich mithilfe von margin ändern. Wir fügen bei den Input Feldern für den Titel und den Beitrag also nur noch margin-bottom: 5px; hinzu.
Das Endresultat
Damit habt ihr nun eine schöne Box, mit der ihr euer Gästebuch in euer Profil einbinden könnt. Weitere Beispiele zum Styling werden vielleicht noch folgen
Kleine Anmerkung zum Schluss: In meinem Code verwende ich meine User-ID - pk=25206. Falls ihr dies übersehen habt beim Schreiben des Codes, müsst ihr diese noch mit eurer ID aus dem Abschnitt "Der Anfang" ersetzten.
