2 Verwaltung der Domäne www.lions

Fachhochschule München
Seite 1
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
Fachhochschule München | Fachbereich 07 | Informatik in der Wirtschaft
Dokumentation
Aktualisierung der Internetpräsenz www.lions-starnberg.de
Verfasser
Andreas Mayer
(Mat.-Nr. 28768702)
Christian Hüls
(Mat.-Nr. 01283302)
Robert Esterer
Sabine Burzler
(Mat.-Nr. 29334902)
Sebastian Brand
(Mat.-Nr. 04947501)
Stephanie Fritzler
(Mat.-Nr. 01101202)
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 2
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
Inhaltsverzeichnis
Inhaltsverzeichnis .............................................................................................. 2
1
Vorwort ...................................................................................................... 4
2
Verwaltung der Domäne www.lions-starnberg.de beim Provider 1&1 ......... 4
2.1
Allgemeine Daten .......................................................................................... 4
2.2
Administration der Domäne über das Web-Frontend von 1&1 .............................. 5
2.2.1 Der Reiter ‚1&1 WEBHOSTING’ ............................................................................. 5
2.2.2 Der Reiter ‚MEINE DATEN’ ................................................................................... 6
2.3
Der Webspace ............................................................................................... 6
3
Das Content Management System Joomla! .................................................. 7
3.1
Administratorzugang ...................................................................................... 7
3.2
Updates ........................................................................................................ 7
3.3
Besondere Ordner .......................................................................................... 8
3.4
Globale Einstellungen ..................................................................................... 8
3.5
Benutzerverwaltung ....................................................................................... 9
3.6
Installierte Komponenten, Module und Mambots ................................................ 9
4
Layout und Design .................................................................................... 10
4.1
Cascading Stylesheets (CSS) .......................................................................... 10
4.1.1 Farben ............................................................................................................ 10
4.1.2 CSS ................................................................................................................ 10
4.2
HTML Teil .................................................................................................... 14
4.3
Die Bildnavigationsleiste ................................................................................ 16
4.3.1 Die Ebenen ...................................................................................................... 16
4.3.2 Aktualisieren .................................................................................................... 17
5
Inhalte und Menüs .................................................................................... 18
5.1
Sections und Categories ................................................................................ 18
5.2
Content ....................................................................................................... 18
5.3
Static Content .............................................................................................. 19
5.4
Menüs ......................................................................................................... 19
6
Dateien hochladen mit dem Media Manager .............................................. 20
7
Installierte Komponenten ......................................................................... 22
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 3
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
7.1
Erzeugung und Verwaltung von Benutzerformularen mit Hilfe des
Formulargenerators ‚FacileForms’ .................................................................... 22
7.1.1 Installation der Komponente .............................................................................. 22
7.1.2 Konfiguration von FacileForms ........................................................................... 22
7.1.3 Formularverwaltung / Email - Benachrichtigung ................................................... 23
7.1.4 Validierung von Benutzereingaben ...................................................................... 26
7.1.5 Einbindung eines Formulars in ein Frontend-Menu ................................................ 28
7.2
Events ......................................................................................................... 30
7.3
Pony Galerie ................................................................................................ 30
7.3.1 Bilddateien hochladen ....................................................................................... 31
7.3.1.1
Mehrere Bilder in eine Kategorie laden ................................................... 31
7.3.1.2
Einzelne Bilder in eine Kategorie nachladen ............................................ 32
7.3.2 Kategorie löschen ............................................................................................. 33
7.3.3 Bild löschen ..................................................................................................... 33
7.3.4 Bilder verschieben ............................................................................................ 33
7.3.5 Einstellungen ändern ........................................................................................ 33
7.4
Übersetzung mit Mambelfish .......................................................................... 33
7.4.1 Menü .............................................................................................................. 34
7.4.2 Seiteninhalte ................................................................................................... 34
8
Weitere Dokumente .................................................................................. 35
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 4
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
1
Vorwort
Diese Dokumentation bezieht sich auf das Projekt „Aktualisierung der Internetpräsenz
www.lions-starnberg.de“, das im Seminar DVA an der Fachhochschule München im
WS05/06 sowie SS06 bei Prof. Dr. Stützle durchgeführt wurde. Die Dokumentation
umfasst Details der technischen Realisierung des Projektes und kann daher als eine Art
Handbuch verstanden werden. Dabei werden im Wesentlichen Hinweise und Erklärungen
zur Verwendung des Content Management Systems Joomla! gegeben. Eine kurze
Beschreibung des Projektes finden Sie im allgemeinen Projektbericht. Sollten technische
Fragen oder Probleme in dieser Dokumentation unbeantwortet bzw. ungelöst bleiben,
empfehlen wir folgende Webseiten, die eine sehr gute Unterstützung bieten:
-
Deutsche Community Seite
: http://www.joomla.de
-
Offizielle Homepage
: http://www.joomla.org
-
Forum und Hilfe
: http://www.joomlaos.de
Des Weiteren ist im Addison Wesley Verlag ein sehr gutes Buch zu Joomla! erschienen:
Joomla!
Websites organisieren und gestalten mit dem Open Source-CMS
Hagen Graf, November 2005
ISBN: 3-8273-2344-4
312 Seiten - 1 CD, 1-farbig
2
Verwaltung der Domäne www.lions-starnberg.de
beim Provider 1&1
2.1 Allgemeine Daten
- Internetadresse des Providers 1&1: www.1und1.de
- Zugangsdaten für den ‚Kunden-Login’ (auf der Webseite rechts oben):
o
Kundennummer: 3716196
o
Passwort: starnbuc
- Zugangsdaten für den FTP-Zugang
o
Benutzername: p8585805
o
Passwort: starnjut
- Zugangsdaten für die mySQL-Datenbank
o
Benutzername: dbo143560757
o
Passwort: suekvZfS
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 5
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
2.2 Administration der Domäne über das Web-Frontend von 1&1
Im Folgenden sind die für die Verwaltung der Domäne wichtigen Bereiche und deren
jeweilige Funktionen kurz aufgezeigt. Das Administrations-Frontend von 1&1 ist zudem
vollständig selbsterklärend.
2.2.1 Der Reiter ‚1&1 WEBHOSTING’
Die Sektion ‚Rund um diesen Vertrag’ befindet sich ganz unten links auf der
Administrationsseite und hält alle für den Vertrag relevanten Daten vor.
Unter ‚Aktuelle Rechnung’ findet sich die Rechnungsanschrift des Vertragspartners
sowie den zuletzt angefallenen Rechnungsbetrag.
Alle gestellten Rechnungen seit Beginn der Vertragslaufzeit listet die Sparte
‚Rechnungen’.
Im ‚Traffic-Verwaltung’ kann ein Limit für das maximale Datenaufkommen pro Monat
aktiviert werden. Ebenso findet man hier eine Anzeige über verbrauchten und
verbleibenden Traffic. Das Gesamttrafficlimit für den aktuell laufenden Vertrag beträgt 30
GB pro Monat. Ein Setzten des Limits (derzeit ‚inaktiv’) ist aufgrund dieses weit
ausreichenden Datenvolumens nicht nötig.
Die rechts angrenzende Sektion ‚Downloads’ beinhaltet ein großes Angebot an Tools für
die Unterstützung beim Aufbau einer Internetpräsenz. Diese sind aber zum Großteil als
überflüssig zu erachten. Einzig sinnvoll erscheint hier der Bereich ‚FTP-Programme’, wo
sich ein aktuelles Programm zum Daten-Transfer herunterladen lässt. (Empfehlung:
FileZilla)
Ansonsten ist eventuell noch der Unterpunkt ‚Handbücher’ interessant, insofern man
Informationen zum Webhosting oder den Servern bei 1&1 wünscht.
Die darüber liegende Sektion ‚Packet erweitern (Tune-Up)’ ermöglicht zum einen das
Durchführen eines Upgrades des aktuellen Vertrages auf ein anderes Packet unter ‚Zur
Upgrade-Seite’, zum anderen aber auch das Bestellen zusätzlicher Domänen, welche
dann unter dem selben Packet gehostet werden. Ansonsten versucht 1&1 hier nur
zusätzliche Produkte wie Virenkiller, etc. zu verkaufen.
Die Sektion ‚Homepage/Anwendungen’ liefert mit dem Bereich ‚1&1 WebStatistik’
viele sinnvolle Auskünfte rund um das Besucherverhalten auf der eigenen Homepage:
- aus welchen Ländern zugegriffen wurde
- von welchen Webseiten die Besucher auf die Lions-Seite verlinkt wurden
- die Anzahl der Seitenaufrufe
- die Anzahl der Besucher
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 6
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
- die Anzahl angezeigter Seiten pro Besucher
- eine Anzeige der am häufigsten aufgerufenen Seiten
- eine Anzeige der Seiten, die nicht aufrufbar sind bzw. nicht vollständig geladen
wurden (was bei der Fehlersuche sehr hilfreich sein kann)
- … und noch einige nicht so interessante Punkte
Unter ‚mySQL-Datenbank’ lassen sich die grundsätzlichen Einstellungen der Datenbank,
wie Name und Passwort vornehmen. Für die Zugangsdaten zur mySQL-Datenbank siehe
Punkt 2.1 „Allgemeine Daten“. Hier müssen keine Einstellungen vorgenommen werden,
da diese mit Hilfe des Joomla Frontends festgelegt werden.
Die Sektion ‚Kommunikation’ bietet schließlich die Verwaltung aller 1&1-Mailadressen
im Bereich ‚E-Mail’. Derzeit stehen noch 119 der 150 Mailaccounts zur Verfügung.
2.2.2 Der Reiter ‚MEINE DATEN’
Hier lassen sich in der Sektion ‚Kundendaten’ die Einstellungen zur Kundenadresse, d.h.
die Kontaktdaten der Ansprechperson, eintragen und ändern (derzeit: Herr Dietrich
Seeberg). Des Weiteren können das Kundenpasswort, d.h. das 1&1 Zugangspasswort,
geändert sowie Einstellungen zur Bankverbindung und zum Newsletterversand geregelt
werden.
Die Sektion ‚Konto’ stellt die gleichen Bereiche zur Verfügung wie die Sektion ‚Rund um
diesen Vertrag’ auf dem Reiter ‚1&1 WEBHOSTING’ (siehe dort).
Eine Anzeige des derzeitigen Produktes (1&1 Business 5.0 BC) sowie der Kunden und
Vertragsnummer ist während der gesamten Anmeldedauer in der rechten oberen Ecke
des Administrator-Interfaces zu sehen. Ebenso der ‚Logout’ Button, welcher auch genutzt
werden will.
2.3 Der Webspace
Wegen den Anforderungen des Content Management Systems wurde der Lions Webspace
auf den Tarif „1&1 Business 5.0 BC“ umgestellt. Somit stehen nun eine 100 MB MySQL
Datenbank und die Skriptingsprache PHP zur Verfügung.
Der Umstieg auf das CMS wurde die die Änderung der Einstellung „Heimatverzeichnis“ im
1und1 Control-Center durchgeführt. Alle Dateien der alten Webseite befinden sich noch
auf dem Webserver, können aber bei Bedarf einfach gelöscht werden.
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 7
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
3
Das Content Management System Joomla!
Als Content Management System für die Lions Seite kommt das kostenlose System
Joomla zum Einsatz. Es handelt sich dabei um eine Erweiterung bzw. eine Abspaltung von
Mambo. Viele der Mambo Erweiterungen sind somit auch unter Joomla funktionsfähig.
Auf dem Lions Webserver wurde anfänglich Joomla 1.0.3 installiert und mittlerweile auf
1.0.7 aktualisiert. Das CMS wurde direkt im Ordner „joomla“ im root-Verzeichnis des
Webservers installiert. Alle für Joomla notwendigen Dateien befinden sich in diesem
Verzeichnis. Im Dateisystem selbst befinden sich neben dem Stylesheet und den Joomla
Skriptdateien nur größere Dateien wie Grafiken oder PDF´s. Alle Events, Formulare,
Einträge und sonstige Texte befinden sich direkt in der Datenbank.
3.1 Administratorzugang
Der Zugang zur Administrationsoberfläche von Joomla! erfolgt über folgende URL:
Administratorzugang
User
: admin
Pwd
: PfnkfARD
: http://lions-starnberg.de/administrator
(wichtig hier: ohne www in der URL, da die Adminstrationsoberfläche sonst nicht die
volle Funktionalität unterstützt)
3.2 Updates
Updates selbst findet man auf der deutschen Joomla Seite (www.joomla.de) unter
Downloads -> Joomla Core. Die Updates werden immer wie folgt benannt:
Joomla_[Quell Version]_to_[Ziel Version]-Stable-Patch
Das Update Joomla_1.0.3_to_1.0.7-Stable-Patch aktualisierte z.B. das 1.0.3 Joomla auf
1.0.7.
Zum Einspielen von Updates braucht man ein FTP oder SCP Programm. Die
Vorgehensweise bei einem Update ist recht einfach: Es wird einfach der Inhalt des
Update-Archives (z.b. Joomla_1.0.3_to_1.0.7-Stable-Patch_Package.zip) auf dem lokalen
Computer extrahiert. Dann wird der gesamte Inhalt des Ordners (nicht der Ordner selbst)
direkt in das /joomla Verzeichnis hoch geladen. Dabei werden alle relevanten Dateien mit
den neuen Versionen überschrieben.
Vor dem Einspielen der neuen Version sollte man natürlich ein Backup der Seite erstellen.
Dazu lädt man einfach den /joomla Ordner über FTP oder SCP herunter.
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 8
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
3.3 Besondere Ordner
Normalerweise sollten keine Änderungen über das Dateisystem selbst notwendig sein.
Hier nun trotzdem eine kurze Liste mit möglicherweise interessanten Ordnern:
Pfad
Inhalt
tempaltes/greens
Enthält die Stylesheets für die ganze Seite.
images/stories
Dieser Ordner enthält alle Grafiken, die in selbst
erstellten Einträgen dargestellt werden sollen (z.B. die
Fotos der Mitglieder für die Mitgliederliste)
components/com_ponygallery In diesem Ordner befinden sich alle Bilder aus der
Galerie
3.4 Globale Einstellungen
Über das Menü Site -> Global Configuration lassen sich die wichtigsten Einstellungen am
CMS vornehmen. Das Konfigurationsmenü ist noch einmal in 10 Unterpunkte unterteilt.
Die meisten Einstellungsmöglichkeiten haben ein Blaues Informationssymbol welches
beim Überfahren mit der Maus einen Hilfetext anzeigt.
Menüpunkt
Funktion
Site
Grundeinstellungen zur Seite selbst. Hier kann man z.B. den Namen der
Seite angeben und ob sich neue Nutzer selbst registrieren dürfen.
Locale
Angaben zur Lokalisierung der Seite
Content
Hier lässt sich die sichtbaren Optionen und Informationen von normalen
Content-Objekten ändern. Unter Content fallen alle im Joomla verwalteten
Artikel (Aktuelles, Projekte etc.).
Database
Hier lässt sich die Datenbank konfigurieren. Die Daten müssen mit denen
des Webspace-Providers übereinstimmen
Server
Lässt u.a. die Änderung des Error Reporting und der Zugriffsrechte der
Konfigurationsdateien zu. Hier sollte normalerweise nichts geändert
werden müssen.
Metadata
Hier lassen sich die Metadata Einträge ändern.
Mail
Hier lässt sich die E-Mail Adresse des Administrators einstellen. Wahlweise
kann hier auch ein besonderer SMTP Server angegeben werden. Per
Default verschickt Joomla aber E-Mails über ein mitgeliefertes E-Mail
Script.
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 9
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
Menüpunkt
Funktion
Cache
Hier lässt sich Caching aktivieren. Durch Caching lässt sich manchmal die
Performance des CMS verbessern, wofür aber wertvoller Speicherplatz auf
dem Webserver verbraucht wird. Für dir Lions Seite sollte diese Option
nicht notwendig sein.
Statistic
Erlaubt die Aktivierung und Deaktivierung der Joomla Statistiken.
SEO
Hier kann man die sog. „Suchmaschinen freundlichen URLs“ aktivieren.
Diese Option ist Webserver abhängig.
3.5 Benutzerverwaltung
Über das Menü Sites -> User Manager lassen sich die Benutzerkonten verwalten. Man
kann eingeloggte Benutzer sehen, durch Anklicken von Namen die Daten ändern oder
neue Benutzer hinzufügen. Alle Benutzer sollten sich in der Gruppe „Registered“
befinden, da der interne Bereich diese Gruppenzugehörigkeit verlangt.
3.6 Installierte Komponenten, Module und Mambots
Neben dem CMS wurden auch noch spezielle Erweiterungen installiert. Es gibt drei
verschiedene Arten solcher Erweiterungen: „Components“, „Modules“ und „Mambots“.
Alle drei Arten werden über separate Menüeinträge im Menü Installers installiert. Die zu
installierenden Komponenten müssen als ZIP Datei vorliegen. Über Browse wählt man
einfach die gewünschte Komponente aus und installiert es über Upload File & Install.
Anschließend steht die Komponente dem CMS sofort zur Verfügung.
Die installierten Komponenten fügen im Menü Components eigene Menüpunkte hinzu.
Dort lassen diese sich dann im Detail konfigurieren. Folgende Komponenten wurden
installiert:
Name
Funktion
Mambel Fish
Erlaubt die Erstellung von mehrsprachigen Einträgen
Events
Verwaltet Veranstaltungen und andere Ereignisse.
Pony Gallery
Bildergalerie
Facile Forms
Erlaubt das erstellen von Formularen.
Nähere Details zu den einzelnen Komponenten entnehmen Sie bitte Kapitel 7.
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 10
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
4
von 36
Layout und Design
4.1 Cascading Stylesheets (CSS)
Da mittlerweile so gut wie alle Browser CSS 1.0 unterstützen, haben wir uns entschieden
diese gängige und durchaus sinnvolle Technologie zu verwenden. CSS soll dabei
festlegen, wie ein besonders ausgezeichneter Inhalt dargestellt werden soll. Dazu ist es
wichtig, das HTML oder XML so zu gestalten, dass die Abschnitte, deren Aussehen gleich
sein soll, auch als Gruppe erkannt werden können. Man zeichnet im Dokument also die
Bedeutung des Inhalts aus, während das Aussehen dieser ausgezeichneten Abschnitte im
CSS festgelegt wird.
Zur Bearbeitung des Stylesheets muß man über die Navigation im Joomla Administrator
Tool „Site“ -> „Template Manager“ -> „Site Templates“ auswählen. Danach muß der
Bullet Point vor dem Default Template ausgewählt werden und dann auf den Button „Edit
CSS“ oben rechts geklickt werden. Eine CSS-Regel hat folgendes Aussehen:
Selektor { Eigenschaft-A: Wert-A; Eigenschaft-B: Wert-B; } /* Kommentar */
Die wichtigsten Eigenschaften, die angepasst wurden um das finale Layout umzusetzen
sollen hier dargestellt werden.
4.1.1 Farben
Die wichtigsten Farben sind:
Farbe: #333366 für Seitenhintergrund und teilweise Schrift
Farbe: #FBCE64 für Contenthintergrund und teilweise Schrift
Farbe: #FFFFCC für Buttons und Textboxen
Farbe: #000000 (Schwarz) für Schrift
4.1.2 CSS
Das Cascading Sylesheet (CSS) der Seite sieht aus wie folgt.
/* Hintergrundfarbe */
body {
margin: 0px;
background: #333366;
overflow-y: scroll;
}
/* Text: Schriftart, -größe und -farbe
tr, p, div {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size
: 11px;
color
: #000000;
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
Seite 11
von 36
}
hr {
background
height
width
: #333366;
: 1px;
: 100%;
}
/* Überschriften(h1 – h6): Schriftarten, -größen und -farben
h1 {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size
: 14px;
color
: #000000;
font-weight : bold;
}
h2 {
font-family
font-size
color
font-weight
:
:
:
:
Verdana, Arial, Helvetica, sans-serif;
12px;
#000000;
bold;
font-family
font-size
color
font-weight
:
:
:
:
Verdana, Arial, Helvetica, sans-serif;
11px;
#000000;
bold;
h4, h5, h6 {
font-family
font-size
color
font-weight
}
:
:
:
:
Verdana, Arial, Helvetica, sans-serif;
11px;
#000000;
bold;
}
h3 {
}
/* Navigation: Position, Schriftart, -größe, -farben, Abstand */
a.mainlevel:link, a.mainlevel:visited {
display
: block;
color
: #000000;
width
: 125px;
text-indent : 10px;
text-decoration: none;
font-family : Verdana, Helvetica, Arial, sans-serif;
line-height : 20px;
font-size
: 12px;
text-align
: left;
padding-right: 0px;
padding-left : 0px;
}
a.mainlevel:active {
color
: #6600FF;
background
: #333366;
}
a.mainlevel:hover {
color
: #FADB5C;
background : #333366;
}
a.sublevel:link, a.sublevel:visited {
display
: block;
color
: #000000;
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
Seite 12
von 36
width
: 125px;
text-indent : 15px;
text-decoration: none;
font-family : Verdana, Helvetica, Arial, sans-serif;
line-height : 20px;
font-size
: 12px;
text-align : left;
padding-right: 3px;
padding-left: 3px;
}
a.sublevel:hover {
color
: #FADB5C;
background : #333366;
}
a.mainmenu:link, a.mainmenu:visited {
color
: #6600FF;
font-family : Verdana, Helvetica, Arial, sans-serif;
font-weight : bold;
font-size
: 10px;
}
a.mainmenu:hover, {
color
: #6600FF;
}
/* Blau hinterlegte Überschriften */
table.moduletable {
margin
: 0px;
width
: 100%;
spacing
: 5px;
}
table.moduletable th
font-size
font-weight
color
text-align
width
height
letter-spacing
text-indent
background
}
{
:
:
:
:
:
:
:
:
:
11px;
bold;
#FADB5C;
left;
100%;
15px;
2px;
5px;
#333366;
/* Überschriften der Sektionen */
.sectiontableheader {
background-color : #333366;
color
: #FADB5C;
font-weight
: bold;
}
.contentpaneopen {
border : 0px ridge #CCCD67;
width: 100%;
padding: 1px;
}
/* Überschriften */
.contentheading {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size
: 12px;
font-weight : bold;
color
: #000000;
text-align
: left;
}
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
Seite 13
von 36
/* Seiteninhalt: Positionierung */
.componentheading {
font-family
: Verdana, Arial, Helvetica, sans-serif;
font-size
: 12px;
font-weight
: bold;
color
: #000000;
text-align
: left;
margin-bottom
: 15px;
}
*/ Erstellungsdatum: Schriftart, -größe, -farbe /*
.createdate {
font-family
: Arial, Helvetica, sans-serif;
font-size
: 10px;
color
: #000000;
text-align
: left;
}
*/ Aussehen eines Buttons /*
.button {
font-family
: Verdana, Arial, Helvetica, sans-serif;
font-style
: normal;
font-size
: 10px;
font-weight
: bold;
background-color : #FFFFCC;
color
: #000000;
border
: 1px solid #D1D0A4;
}
*/ Aussehen einer Inputbox /*
.inputbox {
font-family
: Verdana, Arial, Helvetica, sans-serif;
font-size
: 10px;
width
: 100%;
color
: #000000;
background-color : #FFFFCC;
border
: 1px solid #666701;
text-align
: left;
}
*/ Aussehen einer Formularbox /*
.formularbox {
font-family
: Verdana, Arial, Helvetica, sans-serif;
font-size
: 10px;
color
: #000000;
background-color : #FFFFCC;
border
: 1px solid #666701;
text-align
: left;
}
*/ Links: Schriftfarbe
a:link, a:visited {
color
:
text-align
:
text-decoration :
}
a:hover {
color
text-align
}
und Positionierung /*
#333366;
left;
none;
: #333366;
: left;
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 14
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
4.2 HTML Teil
Zur Bearbeitung des HTML-Teils muss man über die Navigation im Joomla Administrator
Tool „Site“ -> „Template Manager“ -> „Site Templates“ auswählen. Danach muss der
Bullet Point vor dem Default Template ausgewählt werden und dann auf den Button „Edit
HTML“ oben rechts geklickt werden. In diesem Dokument wird zum Beispiel die
Anordnung der einzelnen Komponenten festgelegt, aber auch die Klickbereiche für die
Bilderleiste.
HTML besteht meist aus einem Starttag <...> und dem dazu passenden Endtag</...>.
Kommentare werden mit <!-- Kommentar --> umschlossen.
Hier sind die wichtigsten Ausschnitte aus dem HTML der Seite:
<map name="map_nav">
<area alt="" coords="14,135,38,154" href="http://www.lionsstarnberg.de/index.php?lang=de_DE">
<area alt="" coords="39,135,65,154" href="http://www.lionsstarnberg.de/index.php?lang=en_EN">
<area alt="" coords="849,54,1000,76" href="http://www.lions-bayernsued.de">
<area alt="" coords="164,77,286,154" href="http://www.lionsstarnberg.de/index.php?option=com_content&task=view&id=70&Itemid=83">
<area alt="" coords="286,77,404,154" href="http://www.lionsstarnberg.de/index.php?option=com_content&task=view&id=75&Itemid=83">
<area alt="" coords="405,77,524,154" href="http://www.lionsstarnberg.de/index.php?option=com_content&task=view&id=80&Itemid=83">
<area alt="" coords="525,77,646,154" href="http://www.lionsstarnberg.de/index.php?option=com_content&task=view&id=81&Itemid=83">
<area alt="" coords="647,77,765,154" href="http://www.lionsstarnberg.de/index.php?option=com_content&task=view&id=72&Itemid=83">
<area alt="" coords="765,77,887,154" href="http://www.lionsstarnberg.de/index.php?option=com_content&task=view&id=82&Itemid=83">
<area alt="" coords="886,77,998,154" href="http://www.lionsstarnberg.de/index.php?option=com_content&task=view&id=71&Itemid=83">
</map>
<td colspan="5" align="left" valign="bottom"><img src="<?php echo $mosConfig_live_site;?>/templates/greens/images/lions_bildleiste.gif" alt=""
border="0" usemap="#map_nav</td>
In diesem Bereich <map> ... </map> werden die einzelnen Klickbereiche der
Bildnavigationsleiste festgelegt mit der jeweiligen Verlinkung. In dem <img> - tag wird
dann diese vorher angelegte Map verwendet.
Anschließend wird die Navigationsleiste links geschrieben, bestehend aus dem
Navigationsteil an sich, dem Login und dem internen Bereich, der nur sichtbar ist, wenn
man sich eingeloggt hat.
<!-- Navigation -->
<td bgcolor="#FBCE64" height="500" valign="top">
<img src="<?php echo $mosConfig_live_site;?>/templates/greens/images/navigation1pix.gif" alt="" /><br>
<table border="0" cellpadding="10" cellspacing="0" bgcolor="#FBCE64"
align="left" valign="top">
<tr>
<td>
<?php mosLoadModules ( 'navigation' ); ?><br> <br>
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
Seite 15
von 36
<?php mosLoadModules ( 'login' ); ?><br>
<?php mosLoadModules ( 'intern' ); ?>
</td>
</tr>
</table>
</td>
Es wird dann der eigentliche Content behandelt, wo jedoch keine Änderungen stattfinden
dürften, da der Inhalt ausschließlich aus dem CMS kommt.
Weiterhin wird der Newsblock mit den Modulen Search, News, Popular und Eventcal
gestaltet.
<!-- Newsblock -->
<td bgcolor="#FBCE64" height="500" align="left" valign="top"><img
src="<?php echo $mosConfig_live_site;?>/templates/greens/images/news1pix.gif" alt="" /><br><table
border="0" cellpadding="10" cellspacing="0" bgcolor="#fbce64" align="left"
valign="top">
<tr>
<td align="left">
<?php mosLoadModules ( 'search' ); ?><br>
<?php mosLoadModules ( 'news' ); ?><br>
<?php mosLoadModules ( 'popular' ); ?><br>
<?php mosLoadModules ( 'eventcal' ); ?><br>
</td>
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 16
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
4.3 Die Bildnavigationsleiste
Die Bildernavigationsleiste wurde in den Headerbereich der Webseite integriert und
gesamtheitlich als ein Bild gestaltet. Die Erstellung erfolgte in Adobe Photoshop 7 unter
der Verwendung von Ebenen.
4.3.1 Die Ebenen
Jede Ebene repräsentiert ein für sich eigenständiges Item, das flexibel verändert bzw.
ersetzt werden kann und so eine schnelle Anpassung der Bilderleiste ermöglicht. In der
folgenden Abbildung sind die verwendeten Ebenen dargestellt:
Ebene
Beschreibung
District Bayern Süd
Textebene mit dem Schriftzug „District Bayern-Süd“ (oben rechts)
Lions Club Starnberg
Textebene mit dem Schriftzug „Lions Club Starnberg“ (oben zentriert)
Fahne Englisch
Beinhaltet die britische Flagge (unten links)
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 17
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
Ebene
Beschreibung
Fahne Deutsch
Beinhaltet die deutsche Flagge (unten links)
Text der Projekte
Textebene mit den Bezeichnungen der Projekte (unten längs)
Dabei ist zu beachten, dass alle Projektbezeichnungen in einem, nicht
in mehreren Textfeldern verwaltet werden. Dies erfordert ggf. das
Einfügen und Löschen von Leerzeichen, um den Text an den
jeweiligen Projektbildern auszurichten.
Lions Logo
Diese Ebene beinhaltet das Lions Logo inkl. Schatteneffekt (oben
links). Das zum Teil transparente Lions Logo schräg dahinter ist in
einer separaten Ebene modelliert.
Lions Logo Transparent Beinhaltet das zum Teil transparente Lions Logo (oben Links)
Bayrische Fahne
Beinhaltet die Bayrische Fahne (oben längs). Auch diese Ebene ist mit
Transparenz gestaltet.
Blauer Text Hintergrund Beinhaltet den blauen Balken, der hinter den Text gelegt wurde.
Gelber Rahmen Fotos
Beinhaltet den Rahmen der Projekteinzelbilder, um diese
gegeneinander abzugrenzen.
Bild …
Die Ebenen mit dem Präfix „Bild“ beinhalten die verschiednen
Projektmotive.
Gelber Hintergrund
Hintergrund Ebene mit gelber Färbung
4.3.2 Aktualisieren
Um die Bildernavigationsleiste bearbeiten zu können, wird die Verwendung von Adobe
Photoshop vorausgesetzt. Nachdem das Bild in Form der Ebenen wie gewünscht
bearbeitet wurde, muss das Bild unter Datei -> Für Web speichern… im GIF-Format unter
dem Namen „lions-bildleiste.gif“ gespeichert werden. Diese Bild muss dann per FTP auf
den Webspace in den Ordner joomla\templates\greens\images geladen werden. Damit ist
die Aktualisierung abgeschlossen.
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 18
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
5
von 36
Inhalte und Menüs
Inhalte in Joomla können in einer Hierarchie mit zwei Stufen organisiert werden. Dazu
definiert man so genannte Website Sections und dazugehörige Categories.
Beim Lions-Starnberg.de Projekt sind diese Sections als Aktuelles, Club, Projekte usw. zu
finden. Categories stellen die Unterpunkte zu den Sections dar, z.B. unter Aktuelles die
Categories News, Presseberichte und Veranstaltungen.
Um die Verbindung zwischen Inhalten und dem Menü so übersichtlich wie möglich zu
halten, haben wir die Begriffe der Sections als Hauptmenüpunkte und die Categories als
Untermenü zu den jeweiligen Hauptmenüeinträgen gewählt.
5.1 Sections und Categories
Zum Verwalten oder Anlegen einer neuen Section öffnet im Joomla Administrator die
Seite Content -> Section Manager. Hier werden alle Sections angezeigt.
Um eine neue Section anzulegen, wählen Sie bei den Auswahlbuttons rechts oben „New“.
Zum Bearbeiten einer vorhandenen Section klicken Sie einfach auf den Namen der
Section. Auf der Editierseite einer Section ist für uns nur der „Section Name“ relevant. Mit
„Save“ wird die Section gespeichert. Mit „Close“ lässt sich das Bearbeiten abbrechen.
Unterhalb der Sections werden die Categories angelegt. Das heißt zu jeder Section kann
es beliebig viele Categories geben.
Das Erstellen und Bearbeiten von Categories finden Sie im Joomla Administrator unter
Content -> Categories Manager. Das Bearbeiten und Anlegen entspricht dem der
Sections. Zusätzlich muss jedoch bei jeder Category eine Section ausgewählt werden.
Dies ist jedoch nur einmalig beim Neuanlegen einer Category möglich.
5.2 Content
Sind Sections und Categories angelegt, findet man im Joomla Administrator unter
Content -> „Content by Section“ für jede Section einen Auswahlpunkt, z.B. „Aktuelles
Items“. Es öffnet eine Übersicht über alle Inhalte zu einer Section. Mit „New“ erzeugt man
ein neues Content Item. Beim so erzeugten Content Item müssen Sie dann eine
vorhandene Category auswählen.
Content Items sind immer in zwei Bereiche unterteilt: Intro Text und Main Text. Der Intro
Text wird auf der Inhaltsseite dargestellt und auch auf den Übersichtsseiten. So eine
Übersichtsseite ist z.B. über den Menüeintrag „News“ zu erreichen. Hier werden mehrere
Content Items auf einer Seite angezeigt. Erst wenn der Benutzer dann einen Link auf
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 19
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
dieser Übersichtsseite anklickt, wird ihm der eigentlich Content Item angezeigt, im
Beispiel also ein News-Beitrag.
Der WYSIWYG Editor bietet alle Standardformatierungswerkzeuge wie Schriftart,
Schriftgröße usw. Mit dem Button HTML in der Symbolleiste des Editors kann man den
Text auch als HTML Code editieren.
Auf dem rechten Teil der Bearbeitungsseite finden Sie einige Optionen und Parameter
zum Content Item. Eine Besonderheit bietet das Feld „Override Created Date“. Damit ein
Content Item nicht in der Liste der „Neuste Nachrichten“ auftaucht, setzen Sie hier
einfach ein altes Datum ein.
5.3 Static Content
Neben den obigen Content Items, die in Categories und Sections eingeteilt sind, gibt es
auch noch so genannte Static Content Items. Zu bearbeiten ist dieser Content im Joomla
Administrator unter Content -> Static Content Manager. Static Content Items besitzen
keinen Intro Text und Main Text, sondern nur ein Text Feld. Da Static Content keiner
Category oder Section zugeordnet wird, lassen sich keine Übersichtsseiten mit mehreren
Static Content Items erzeugen. Static Content eignet sich also für allein stehende Inhalte,
wie z.B. Impressum oder Kontakt-Infos.
5.4 Menüs
Durch die obige Aufteilung der Content Items zwischen in Sections und Categories haben
Sie eine Struktur der Inhalte auf der Website angelegt. Damit ist jedoch nicht zwingend
eine Menüstruktur vorgegeben. Das Menü verwaltet man im Joomla Administrator auf der
Seite Menu -> „main menu“. Hier werden alle Menüeinträge für das Hauptmenü auf der
Website angezeigt. Um einen neuen Menüeintrag zu erstellen, klicken Sie „New“. Es wird
eine Auswahlliste für den Typ des Menüeintrags angezeigt. Hier wählt man die Art, wie
der Inhalt angezeigt werden soll. Um ein bestimmtes Content Item anzuzeigen, wählen
Sie „Link – Content Item“ bzw. „Link – Static Content“, wenn es sich um ein Static
Content Item handelt. Daneben lassen sich auch die Übersichtsseiten zu einer Category
oder einer ganzen Section erzeugen: Mit „Blog – Content Category“ wird eine
Übersichtsseite zu einer Category erzeugt, mit „Blog – Content Section“ zu einer Section.
So haben wir für die Section „Aktuelles“ einen Menüeintrag vom Typ „Blog – Content
Section“ erzeugt. Klickt der Websitebesucher auf Aktuelles werden im Einträge aus allen
Categories der Section „Aktuelles“ angezeigt. Der Untermenüpunkt „News“ ist ein „Blog –
Content Category“ Menüeintrag, er zeigt lediglich die Content Items der Category „News“
an.
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
Seite 20
von 36
Auf der Editierseite zu jedem Menu Item lassen sich neben dem angezeigten Namen die
Position im Menü unter „Ordering“ und die Hierarchie unter „Parent Item“ festlegen. Auf
der rechten Seite werden Parameter für die angezeigte Seite festgelegt. Handelt es sich
bei dem Menu Item um eine Übersichtsseite kann man hier festlegen, wie viele Content
Items auf der Seite angezeigt werden sollen und ob Details der Content Items wie „Item
Title“, „Created Date“ usw. angezeigt werden sollen.
6
Dateien hochladen mit dem Media Manager
Im Media Manager können Sie Ihre Grafiken und Dokumente mit den gebräuchlichsten
Endungen wie gif, png, jpg, bmp, pdf, doc, xls oder ppt verwalten.
Dateien hochladen
1. Im Menü Home aufrufen und anschließend Media Manager anklicken
2. Wichtig: Das Verzeichnis stories auswählen, ansonsten werden die Dateien später
nicht gefunden.
3. In dem Feld File Upload die gewünschte Datei angeben und anschließend klicken
Sie in der Werkzeugleiste auf Upload.
Dateien einbinden
4. Nun wechseln Sie zu Ihrer Komponente, in der die Grafik eingefügt werden soll
und machen dort wie gewohnt Ihre Eintragungen.
5. Im rechten Abschnitt wählen Sie die Registerkarte Images. Das Fenster Gallery
Images zeigt Ihnen nun alle Bilder aus dem Verzeichnis „stories“. Hier suchen Sie
Ihr Bild und fügen es über die Pfeil-Schaltfläche hinzu, so dass es im Fenster
Content Images erscheint.
6. Bestätigen Sie Ihre Auswahl mit Apply im unteren Abschnitt.
7. Um das Bild nun in Ihren Inhalt einzupflegen, positionieren Sie den Cursor an die
Stelle, an der das Bild erscheinen soll.
8. Unterhalb des Textfeldes klicken Sie auf das Icon insert image. Dadurch erscheint
nun im Textfeld das Tag {mosimage}.
9. Nutzen Sie zur Überprüfung Preview aus der Werkzeugleiste.
10. Speichern Sie die Seite.
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
Seite 21
von 36
Hierzu ein Beispiel:
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 22
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
7
von 36
Installierte Komponenten
7.1 Erzeugung und Verwaltung von Benutzerformularen mit Hilfe
des Formulargenerators ‚FacileForms’
FacileForms (FF) ist ein komfortabel zu bedienender
Formulargenerator für Mambo, der es erlaubt, Formulare vom
einfachen, einseitigen Online-Formular bis hin zur
datenbankgestützten Mini-Applikation, zu entwickeln.
7.1.1 Installation der Komponente
Die Komponenten-Installation verläuft analog zu jeder anderen in Joomla. Nach dem
Download von der Seite http://www.facileforms.biz/  Downloads und der Anmeldung im
Backend ruft man über das Menu Installers  Components den integrierten Installer auf.
Dort wählt man über Upload Package File das soeben heruntergeladene FF-ZIP-Archiv aus
und betätigt die Schaltfläche Upload File and Install.
Damit ist der erste Teil der Installation auch schon abgeschlossen. Dem Menu
Components wurden zwei neue Menupunkte hinzugefügt: Facile Forms und Facile Forms
Sample Menu. Um nun mit dem zweiten Teil der Installation fort zu fahren wählt man aus
dem Facile Forms Menu den Menüpunkt Configuration aus.
7.1.2 Konfiguration von FacileForms
Wie schon die soeben abgeschlossene Installation stellt auch die Konfiguration von
FacileForms keine Hürde dar. Um später die einzelnen Elemente besser ausrichten zu
können, wird empfohlen die Größe des Rasters auf 5 herunterzusetzen.
Um beim Eingang neuer Daten benachrichtigt zu werden, wird im Feld Voreinstellung
Email Benachrichtigungs-Adresse die Email-Adresse eingetragen, an die der Datenzugang
gemeldet werden soll.
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 23
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
7.1.3 Formularverwaltung / Email-Benachrichtigung
Als nächster Schritt wird die Formularverwaltung von FacileForms aufgerufen
(Components  FacileForms  Manage Forms) aufgerufen. Hier sind alle mit der
Komponente erstellten Formulare aufgelistet. Es bieten sich nun zwei Möglichkeiten: ein
neues Formular anzulegen oder durch Klicken auf ein bereits bestehendes Formular
dieses unter Auflistung sämtlicher darin enthaltener Einzelkomponenten anzeigen lassen.
Trotz aller Erleichterungen und dem hohen Maß an Komfort, den FacileForms bietet, wird
es dem Anwender nicht die Aufgabe abnehmen, einige grundsätzliche Überlegungen
anzustellen. Beim Erstellen eines einfachen Formulars halten sich diese noch in Grenzen,
bei umfangreichen, mehrseitigen Formularen gilt diese Analyse jedoch als
Vorraussetzung für die erfolgreiche Implementierung des gewünschten Formulars. Vor
der Erstellung eines Formulars sollten einige Fragen gestellt werden:
- Was soll das Formular letztendlich leisten können?
- Welchen Umfang soll das Formular haben?
- Welche Elemente werden benötigt?
- Welche Elementtypen sind hierfür am besten geeignet?
- Soll der Seitenbetreiber über den Eingang neuer Formulardaten informiert werden?
- Ist eine CSS Formatierung des Formulars nötig/erwünscht?
- Soll das Formular eventuell als Package vertrieben werden?
Beim Neuanlegen eines Formulars (Schaltfläche New) kann man zunächst die
Einstellungen für das neue Formular festlegen (Tabellenreiter Settings). Das sind unter
anderem dessen Bezeichnung, Größe, ob von diesem Formular aus Einträge in die
Datenbank vorgenommen werden, etc. In dem Reiter Settings sollte man dem Feld
Email Notification besondere Aufmerksamkeit schenken, da man hier bei
Auswahl von ToCustomAddress eine Email Adresse angeben kann, zu der bei
Absenden des Formulars die gemachten Angaben gesendet werden.Unter dem
Reiter Scripts lässt sich sowohl für die Initialisierungsphase als auch für das Verlassen
(Abschicken) des Formulars ein Script zur Ausführung festlegen. In der Sektion Form
Pieces schließlich einzelne Skriptstücke, die vor dem Laden des Formulars bzw. nach
dessen Beendigung ausgeführt werden sollen. Und unter Submit Pieces lassen sich
Skripte vor oder nach dem Abschicken des Formulars ausführen.
Ist das Formular angelegt und konfiguriert, geht es an dessen Design. Das Generieren
eines neuen Formularelements geht leicht von statten und ist größtenteils
selbsterklärend.
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 24
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
Dazu stehen nach einem Klick auf New verschiedene gestalterische Elemente zur
Verfügung. Diese umfassen statische Elemente (Text, Bilder, …), verschieden Arten von
Buttons (reguläre Buttons, Icons, …) als auch Input-Elemente (Text Inputboxen,
Checkboxen, Listen, …).
Jedem neu angelegten Element wird im Folgenden eine Bezeichnung zugeteilt unter
welcher das Element ab sofort angesprochen werden kann. Des Weiteren kann dessen
Position auf dem Grid angegeben werden. Es empfiehlt sich jedoch lediglich Höhe und
Breite eines Elements von vorne herein als Zahlenwert festzulegen, die Parameter für die
genau Position (x,y) der einzelnen Elemente lassen sich sowohl schneller als auch
bequemer direkt im WYSIWYG-Modus konfigurieren. Die Vorgehensweise ist immer
dieselbe:
Alle Angaben können selbstverständlich auch im Nachhinein noch angepasst werden. Um
ein Element zum Beispiel pixelgenau zu platzieren, klickt man dessen Checkbox an
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 25
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
(grüner Haken in der Element-Übersicht), gibt unter Move-Pixels auf der rechten Seite
der Elementeliste die Verschiebung in Pixel an und führt diese schließlich mit dem
gewünschten Richtungsbutton aus. Sollen mehrere Elemente gleichzeitig verschoben
werden, sind einfach die Checkboxen all dieser Elemente zu markieren und sonst die
gleichen Schritte durchzuführen.
Ist das Design umgesetzt, kann mit einem Klick auf den Eintrag des Elements in der
Komponentenliste schließlich ein Skript zur Ausführung zugewiesen werden. Dabei steht
es frei, den Code direkt in der Komponente zu hinterlegen (Custom) oder ein Skript aus
der Bibliothek ablaufen zu lassen (Library).
Die wichtigsten und gängigsten Skripte sind im nachfolgenden Abschnitt kurz aufgeführt
und erläutert.
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 26
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
7.1.4 Validierung von Benutzereingaben
FF bietet die Möglichkeit alle vorgenommenen Eingaben des Users noch vor der
Speicherung in der Datenbank zu validieren, die Eingabe also zu überprüfen. Die
Elemente wie Textfelder, die Auswahlliste zur Wahl der Kategorie sowie der Button zum
Versenden des Formulars sollen daher nun an dieser Stelle etwas näher betrachtet
werden.
Pflichtfelder:
Das Skript 'Value not empty' validiert das Textfeld auf Eingabe, prüft also ob überhaupt
etwas eingegeben wurde.
E-Mail-Angaben:
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
Seite 27
von 36
Das Skript 'Valid email' validiert das Textfeld auf Eingabe einer Email-Adresse.
Auswahllisten:
Der Aufbau der Auswahlliste ist an sich leicht verständlich:
Optionen:
0/1, Option ausgewählt (ja/nein)
Text
Wert
im Klartext:
1= Option ausgewählt
Kategorieauswahl...
keine
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 28
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
als Dropdownliste:
Wem die Funktionsweise der Auswahlliste jetzt noch nicht auf Anhieb ersichtlich wurde,
dem sei empfohlen einfach ein bisschen mit den Werten zu spielen.
Senden:
Das Skript 'Validate and submit form' validiert das Formular und sendet dieses ab.
7.1.5 Einbindung eines Formulars in ein Frontend-Menu
Um als Besucher der Webseite das erstellte Formular aus dem Frontend heraus aufrufen
zu können muss dieses erst noch in ein Menu eingebunden werden. An dieser Stelle wird
die Einbindung in das bereits vorhandene Hauptmenu (Main-Menu) erläutert.
Hierfür wird im Backend das Hauptmenu aufgerufen und in diesem mit New ein neuer
Menupunkt vom Typ Component erstellt. Nach Bestätigen mit Next wird der zu
erstellende Menupunkt noch benannt und als Komponente Facile Forms ausgewählt.
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
Seite 29
von 36
Anschließend wird noch mit Save die Konfiguration des soeben erstellten Menupunktes
gesichert.
Wechselt man nun in das Frontend und ruft hier den soeben erstellten Menupunkt auf,
wird man erstmals enttäuscht sein. Alles was man vorerst zu sehen bekommt, ist eine
nichts sagende Meldung 'Form not found!' An sich ist das so auch richtig – wenn auch
leicht verwirrend, denn die Meldung 'Sie haben noch kein Formular ausgewählt.' würde
hier etwas besser passen – das Formular ist ja vorhanden, nur eben noch nicht explizit
ausgewählt. Um dieses nun in das Hauptmenu einzubinden nutzt man Menu-Parameter.
Dazu wird der Menupunkt erneut aufgerufen.
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 30
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
Nach einem Wechsel in die Sektion Parameters trägt man als Formularnamen den Namen
des gewünschten Formulars ein. Anschließend wird mit Save die Konfiguration erneut
gesichert. Wechselt man nun nach der nachträglichen Auswahl ins Frontend und ruft den
Menupunkt erneut auf, wird das Formular aufgerufen und steht ab sofort zur Verfügung.
Alle vom User versendeten Daten landen in der Datenbank, der Seitenbetreiber wird
darüber hinaus über den Eingang eines neuen Datensatzes via Email informiert.
(für weitere Informationen siehe: http://www.joomlanews.de/content/view/862/33/)
7.2 Events
Zur Bearbeitung der Events muss man über die Navigation im Joomla Administrator Tool
„Components“ -> „Events“ -> „Manage Events“ auswählen. Um ein neues Event zu
erstellen muss auf den Button „New“ oben rechts geklickt werden. Wenn ein Event
bearbeitet werden soll, muss es ausgewählt werden und dann auf den Button „Edit“ oben
rechts geklickt werden.
Da die Clubabende meist kein regelmäßiges Muster haben müssen alle einzeln erstellt
werden mit den Optionen täglich und 0:00 – 0:00 weil keine genaue Uhrzeit angegeben
ist.
7.3 Pony Galerie
Hier werden die Fotos Ihrer Vereinsveranstaltungen eingestellt. Hierzu finden Sie unter
dem Menüpunkt Components die PonyGallery
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 31
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
Im Folgenden sind Menübefehle und Joomla-Beschriftungen kursiv geschrieben
Hinweis: Um die Ladezeiten der Galerieseiten niedrig zu halten, sollte die Dateigröße von
Fotos aus der Digitalkamera verkleinert werden (z.B. mit IrfanView).
7.3.1 Bilddateien hochladen
7.3.1.1 Mehrere Bilder in eine Kategorie laden
1. View Categories aufrufen und über den New Button (oben rechts) eine neue
Kategorie anlegen. Für den Zugriff den Eintrag „registered“ auswählen und in
Anordnung die Position der neuen Kategorie in der Titelübersicht wählen. Die Seite
mit Save (oben rechts) beenden.
2. Die gewünschten Bilder zu einem zip-file packen. Laut Joomla sind 8 MB erlaubt.
(Es gab allerdings öfter Probleme und deshalb wurde mit Dateigrößen bis 4 MB
gearbeitet.)
3. Nun im PonyGallery-Menü Batch Upload auswählen. Mit Durchsuchen die zip-Datei
auswählen und darunter die gewünschte Kategorie einstellen. Bei Allgemeiner Titel
ist die Bildunterschrift einzugeben. Zu dem eingegebenen Titel werden noch
automatisch Nummern zur Unterscheidung angefügt. Anschließend kann der
Upload begonnen werden. Die Thumbnails werden dabei automatisch erstellt.
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 32
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
4. Bei erfolgreichem Upload erhalten Sie eine Bestätigung wie folgt:
usw.
Die Anzahl der im Batch gefundenen Dateien ist unbedingt mit der tatsächlichen
Bilderanzahl der zip-Datei zu vergleichen. Bei größeren Dateien werden nämlich
nicht alle Bilder übernommen.
5. Die Kontrolle erfolgt über View Pictures, sortiert nach der jeweiligen Kategorie.
6. Optional: Beim Nachladen eines weiteren Batchfiles in die gleiche Kategorie sind
die Bildnummern hier manuell auszubessern, da die Numerierung wieder bei 0
beginnt. Zum Ändern der Bildnummer klicken Sie das Bild an und überschreiben in
der Zeile Titel die Nummer.
7. Anschließend wird die Seite mit Save abgeschlossen.
8. Erneut ViewCategories aufrufen und zum Veröffentlichen der Kategorie einschl.
der Bilder auf das rote Kreuz in der Spalte Veröffentlicht klicken bzw. in der
Joomla-Werkzeugleiste Publish anklicken.
9. Optional: Die Reihenfolge der Kategorien kann auch nachträglich noch über die
blauen Pfeile Neu ordnen verändert werden.
7.3.1.2 Einzelne Bilder in eine Kategorie nachladen
1. Im PonyGallery-Menü Upload Picture wählen
2. Bild angeben und hochladen
im Gegensatz zum BatchUpload erfolgt hier keine Bestätigung
3. In die Ansicht ViewPictures wechseln und aus der Joomla-Symbolleiste New
auswählen.
4. In die Zeile Titel die gewünschte Bildunterschrift eingeben und die passende
Kategorie auswählen.
5. In den Listenfeldern für Bild und Thumbnail das richtige Bild suchen und mit Save
(oben rechts) abschließen
6. In der Ansicht ViewPictures, sortiert nach Kategorien, das Bild noch mit Publish
bzw. Klick auf das rote Kreuz freigeben.
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
Seite 33
von 36
7.3.2 Kategorie löschen
1. ViewCategories aufrufen
2. Häkchen vor gewünschte Kategorie setzen
3. In der Joomla-Symbolleiste Delete auswählen
4. Achtung: Hier werden auch die in der Kategorie enthaltenen Bilder gelöscht.
7.3.3 Bild löschen
1. View Pictures aufrufen
2. Nach Kategorien sortieren (Listenfeld oben rechts)
3. Bild auswählen und Delete (oben rechts) anklicken
7.3.4 Bilder verschieben
Sie haben ein Bild versehentlich in die falsche Kategorie geladen.
1. View Pictures aufrufen
2. Bild auswählen
3. Im Listenfeld die richtige Kategorie einstellen
4. Mit Save abschließen
Das Bild wird automatisch in der alten Kategorie gelöscht und in die neue verschoben.
7.3.5 Einstellungen ändern
Änderungen bzgl. Anzahl der Bilder pro Seite, sowie max. Dateigröße, Bildbreite und –
höhe, usw. können über Components/ PonyGallery/ Edit Settings auf der Registerkarte
Frontend gemacht werden. Änderungen bzgl. des Layouts werden über die Registerkarte
Erscheinungsbild gemacht.
7.4 Übersetzung mit Mambelfish
Momentan wird nur die englische Sprache unterstützt. Über das Menü Components/
Mambelfish/ Translation gelangen Sie in den Übersetzungsbereich der Komponente.
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 34
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
von 36
7.4.1 Menü
1. Aus dem Listenfeld Content Elements, oben rechts, Menus auswählen.
2. Deutschen Menüpunkt anklicken
3. In das Textfeld die Übersetzung eintragen.
7.4.2 Seiteninhalte
1. Aus dem Listenfeld Content Elements, oben rechts, Contents wählen.
2. Deutschen Titel auswählen
3. In der Änderungsmaske sehen Sie links, als Vorlage, den Originaltext. Im rechten
Teil geben Sie nun den fremdsprachigen Text ein und formatieren ihn wie
gewohnt.
4. Schließen Sie Ihre Änderungen mit Save ab.
5. In der Liste der Kategorien erscheint das Übersetzungsdatum. Durch einen Klick
auf das rote Kreuz daneben in der Spalte Published wird die Änderung
veröffentlicht.
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Seite 35
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
8
von 36
Weitere Dokumente
Weiteres Informationsmaterial finden Sie in den folgenden, beigefügten Dokumenten:
Ordner
Dateien
01_Berichte
Hier finden Sie alle Wochen- und Zwischenberichte zu diesem
Projekt.
02_Recherche
Dieser Ordner enthält diverses Informationsmaterial, auf das bei
der Umsetzung des Projektes Bezug genommen wurde. Hier
finden Sie unter anderem Auswertungen von Webstatistiken, eine
wissenschaftliche Analyse über den Aufbau von Webseiten sowie
eine Analyse weiterer Lions-Seiten hinsichtlich interessanter
Inhalte.
03_Docs
Hier finden Sie Dokumente, die auf der Lions-Seite eingebunden
wurden (z.B. Anmeldedokumente oder Dankesschreiben).
Die beiden Unterordner „mitgliederliste“ bzw.
„mitgliederliste_80px“ enthalten die Fotos der Lions Mitglieder,
die im Internen Bereich unter „Mitglieder“ zu finden sind.
04_Zeitungsartikel
Die hier abgelegten Dokumente beinhalten die zum
Migrationszeitpunkt aktuellen Zeitungsartikel in digitaler Form.
Nach der Umstellung wurden neue Zeitungsartikel direkt in
Joomla eingepflegt, so dass diese nicht in diesen Dokumenten zu
finden sind.
05_Protokolle
Die zurzeit im internen Bereich eingestellten Protokolle
ausgewählter Clubabende.
06_Galerie
Dieser Ordner beinhaltet alle Fotos, die in die Bildergalerie
eingestellt wurden.
07_Layouts
Die hier abgelegte Photoshop Datei „lions_bildleiste.psd“
beinhaltet das Layout, die für die Anpassung der Bildleiste
benötigt wird.
Der Ordner „bilderleiste_downloads“ enthält Bilder, die für die
Gestaltung der Bilderleiste potenziell in Frage kamen.
Der Ordner „entwürfe“ enthält Designvorschläge, die im Zuge der
Layoutgestaltung entstanden sind.
Der Ordner „homepages“ enthält Screenshots anderer Lions
Seiten, deren Layout wir ansatzweise übernommen haben.
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016
Fachhochschule München
Dokumentation | DV-Anwendungen in der Wirtschaft | Prof. Stützle
Ordner
Seite 36
von 36
Dateien
Der Ordner „logos“ enthält die verwendeten Logos.
Semestergruppe 7W/8W | Projekt-Team www.lions-starnberg.de
13.05.2016