Formulare & Login in der Mediabox

Auch Formulare und der Frontend-Login lassen sich in der Mediabox (Core-System) aufrufen.
Dieses Beispiel zeigt die Umsetzung eines Frontend-Logins.

Anleitung zur Umsetzung

Leeres Seitenlayout anlegen

Dazu legen Sie zunächst ein leeres Seitenlayout – hier im Beispiel Blanko benannt – an und binden Sie ein entsprechendes CSS-Dokument in das Seitenlayout ein, um das Formular oder das Login-Modul optisch anzupassen.

Weitere Einstellungen müssen Sie hier nicht definieren.

Seitenlayout

Im Beispiel nachfolgend die verwendeten CSS-Definitionen in der CSS-Datei "login.css".

Verwendete CSS-Definitionen für das Login-Formular

#main .mod_login
{
	margin:10px;
	padding:0;
	font-family:verdana,arial,sans-serif;
	font-size:.75em;
}
#main .mod_login label
{
	display:block;
	margin:5px;
	padding:0;
	font-weight:bold;
	color:#fff;
}
#main .mod_login .text
{
	width:150px;
	margin:0 5px;
	padding:2px;
	border:1px solid #ccc;
}
#main .mod_login .submit
{
	margin:10px 0 10px 5px;
	padding:2px 47px;
	border:none;
	background:#fff;
}
#main .mod_login p.error
{
	margin:0 0 10px 5px;
	padding:0;
	color:#f30;
}

Aufbau Seitenstruktur

Legen Sie in der Seitenstruktur 3 Seiten an.

Eine Seite Login, in der das Modul Login dann platziert wird. Eine Seite Login erfolgreich als Zwischenseite – diese verhindert das der Inhalt der Weiterleitungsseite in der Mediabox geladen wird. Diese Seite geben Sie im Login-Modul als Weiterleitungsseite an. Und eine Seite Login erfolgreich - Erfolg, die hier als tatsächliche Weiterleitungsseite verwendet wird.

Den Seiten Login und Login erfolgreich weisen Sie das Seitenlayout Blanko zu.

Seitenstruktur Login

Funktion als externe Datei einbinden

Damit nach erfolgreichem Login die Mediabox geschlossen und auf die Seite weitergeleitet wird, fügen Sie nachstehenden Code mit Hilfe des Insert Tags {‎{‎‎file:‎:Dateiname.php‎‎}‎} in einen Artikel als Inhaltselement HTML in der Seite Login erfolgreich ein. In Zeile 4 geben Sie die URL der Seite an, die als tatsächliche Weiterleitungsseite definiert ist. Wenn Sie die Option URLs umschreiben nicht verwenden (können), ergänzen Sie die Pfadangabe mit einem vorangestellten "index.php" -> "index.php/login-erfolgreich-erfolg.html".

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready',function(){
‎parent.document.location.‎href = "‎login-erfolgreich-erfolg.‎html";
});
//--><!]]>
</script>

Modul Login anlegen

Legen Sie im nächsten Schritt ein Modul vom Modultyp Login-Formular an und übernehmen die nachfolgend abgebildeten Einstellungen.

Modul Login

Verlinkung vornehmen

Fügen Sie nun einen Link, z.B. in einem Inhaltselement Text, zur Seite ein, die das Formular oder das Login-Modul beinhaltet, ein. Bei der Option Lightbox wählen Sie Wert aus. Für Wert tragen Sie dann ein:

lightbox[Breite Höhe] in Pixel. Hier im Beispiel lightbox[400 200].

Berücksichtigen Sie bei einem Formular mit Pflichtfeldern auch den benötigten Platzbedarf, wenn Pflichtfelder nicht ausgefüllt wurden und die Fehlermeldungen angezeigt werden. Passen Sie hierzu die Breite und Höhe an und stimmen Sie dies entsprechend in den CSS-Definitionen ab.

Link einfügen

Anpassung des Login-Formulars mit CSS

Mit entsprechenden CSS-Definitionen können Sie das Login-Formular anpassen. Dargestellt ist im Bild auch die Fehlermeldung, wenn die Feld nicht oder falsch ausgefüllt wurden.

Login-Modul mit CSS verfeinern

und jetzt: Testen.

Hier können Sie die Funktion live ansehen und testen. Als Benutzername und Login verwenden Sie bitte:
Benutzername: planepix
Passwort: planepix

Frontend-Login in der Mediabox

Nachdem Sie sich eingelogt haben, sehen Sie in der Menüleiste eine Menü Logout. Auf dieser Seite ist ein Modul vom Modultyp Automatischer Logout platziert. Nach einem Klick auf diesen Menüpunkt werden Sie abgemeldet und auf die Seite mit dem Login weitergeleitet.

Optimierung? Vereinfachung? Freue mich auf Feedback.

Vielen Dank an Andreas Schempp und Christoph Wiechert für hilfreiche Hints.