Website der KVHS und Typo3
Kurs
- Aufbau uns Struktur der Website der KVHS Oberhavel
- Einbindung in Typo3
- KuferWeb Extensions
- Weitere Extensions
Über mich
Christian Hartnick, Diplom-Wirtschaftsinformatiker
Freier Berater, Entwickler und Dozent; Journalist
über 30 Jahre Beruferfahrung
http://hilfe.hartnick.de
Überblick
- Typo3 V7 (Support bis Herbst 2018)
- KuferWeb Extension
- Yet Another Gallery
- PowerMail
- Testseite
Wichtige Dateien
Alle Dateien liegen unter: fileadmin/templats/havel/
Achtung: Hier sind die Testdateien verlinkt („…_test“). Die Originale sind
ohne Kommentierung!
constants.ts
Zu finden unter „Template / Root / Konstanten“
- Import!
- Initialisierung KuferWeb
- Pfade
- ids, pids
- Metadaten
- Spamshield (PowerMail)
setup.ts
Zu finden unter „Template / Root / Setup“
- Import!
- Config Site (html5, utf-8, de_DE, …)
- Settings KuferWeb
- Libs (Carousel, Haupt (Navi), Schnellfinder, Kurse, Ueberall, Marque, RechteSidebar,
Rechts, Pfad, Warenkorb, TNLogin, Suche, YAG)
- PAGE (CSS, JS, Header (Meta), Footer (JS)
setup.ts: Variables und Libs
- spalte0 < styles.content.get
- spalte1 < styles.content.getLeft
- standard < lib.standard
- haupt < lib.haupt
- schnellfinder < lib.schnellfinder
- kurse < lib.kurse
- rechts1-3 < lib.rechts1-3
- marque < lib.marque
- ueberall1-3 < lib.ueberall1-3
- SLIDESHOW < lib.carousel
- rechtesidebar < lib.rechtsidebar
- background <
- pfad < lib.pfad
- warenkorb < lib.warenkorb
- tnlogin < lib.tnlogin
- legende < lib.legende
Genaueres dazu auf der Testseite.
Typo3 „Liste“
Übersicht über alle Objekte und Unterobjekte.
- 0 – Root
- Backend-Benutzergruppe: Redakteure
- Backend-Benutzer: _cli_scheduler , vhsadmin
- Verzeichnisfreigaben: Redaktion
- Dateispeicher: fileadmin/ (auto-created) , Redaktion
- 1 – Hauptseite
- Seite: Demnächst , Service , Über uns , Kontakt , [Bereich rechts] , [Submenue] ,
Versteckte Seiten , Formulare , Bildergalerie , Fehlerseiten , Backend-Layouts ,
General Storage , Programmseiten
- Domäne: havel.kufer-layout.de - Umleitung nach http://www.havel.kufer-layout.de/
- Template "Kreisvolkshochschule Oberhavel"
- Seiten unter Hauptseite
- 135 - Demnächst
- 3 - Service
- Seite: Geschäftszeiten , Einbürgerung , Jobs , Geschenkgutschein , Firmenschulung ,
(-) Sprachen / Hinweise zur Belegung von Sprachkursen ... , (-) Kompetenzstufen / Sprachen ,
(-) zum Einstufungstest Sprachen , AGB , Widerrufsbelehrung , Datenschutz ,
häufige Fragen (FAQ) [+] , Impressum
- 142 - Über uns
- Seite: KVHS Team , Dozent*innen , Standorte , Anfahrt , Bildergalerie
- 4 – Kontakt
- Seite: Spamverdacht
- Template: +ext
- Seiteninhalt: Bitte nehmen Sie Kontakt zu uns auf , [Kein Titel]
- Antworten (115)
- Mails (23)
- Ordner unter Hauptseite
- 5 – Backendlayouts
- Backend-Layout: Normale Seite (1 Spalte), 2 Spalten , 3 Spalten
- CE Backend: Lauftext
- 32 – [Submenue]
- Seite: Kontakt (→ id 4), Impressum (→ id 34), AGB
- 56 – [Bereich rechts]
- Seite:
- Schnellfinder
- Politik, Gesellschaft, Umwelt
- Kultur, Gestalten
- Gesundheit
- Sprachen
- Arbeit, Beruf, EDV
- (-) Exkursionen
- [Programm-Icons]
- Kurse für ...
- Seitentitel
- Kurse für Frauen
- Bildungsurlaub
- Junge VHS
- [3 Servicekaesten unter dem Inhalt]
- 86 – Versteckte Seiten
- Seite: Programm , Rechte Sidebar , Lauftext , Login , Kurssuche , Warenkorb , Suche , Cookie-Hinweis , Feedback
- 99 – General Storage
- Template: Gridelements , Cookies
- CE Backend Layout: 2 Spalten , 3 Spalten
- 101 – Fehlerseiten
- Seite: Seite nicht gefunden
- 105 – Formulare
- Felder: Anrede , Vorname , Name , E-Mail , Ihre Nachricht , Abschicken
- Formulare: Kontaktformular
- Seiten: Kontaktformular
- 106 – Bildergalerie
- Galerie: Bildergalerie
- Element (21): Testbild, …
- Element-Meta (20): [uid] 1 - 20
- Dateiauflösungs-Cache (144): [Kein Titel]
- 146 – Programmseiten
KuferWeb Kategorien
- Startseite
- Kategorien
- Kategorienliste
- Sonderkategorien
- Suche
- Schnellsuche
- Stichwortübersicht
- Stichwortübersicht gruppiert
- Last-Minute-Programm
- Demnächst
- Demnächst Menü
- Warenkorb
- Warenkorbvorschau
- Zuletzt besuchte Kurse
- Veranstaltungskalender
- Kurshighlights
- Nachbarschaftskurse
- Übersicht über alle (freigegebenen) Kurse
- Dozentenübersicht
- Dozentenübersicht gruppiert
- Aussenstellenübersicht
- Gebäudeübersicht
- Gebäudeübersicht gruppiert
- Raumübersicht
- Raumübersicht gruppiert
- Mitarbeiterübersicht
- Übersicht der aktuellen News
- Newsletter anmelden
- Newsletter abmelden
- Login - KuferTools
- Teilnehmer-Login - Formular
- Teilnehmer-Login - Registrierung
- Teilnehmer-Login - Belegte Kurse
- Teilnehmer-Login - Merkliste
- Teilnehmer-Login - Passwort vergessen
- Teilnehmer-Login - Passwort ändern
- Teilnehmer-Login - Daten ändern
- Teilnehmer-Login - Bankdaten
- Kursübersicht (alle Kurse) kategorisiert
- Monatskursübersicht
- Frei definierbares Kontaktformular
- Frei definierbare Sicht 1- 20
- Kategorien über Auswahlliste (Standard)
- Kategorien über Auswahlliste (Sicht)
- Sonderkategorien über Auswahlliste (Standard)
- Sonderkategorien über Auswahlliste (Sicht)
- Legende zur Ampel
- startende Termine (Einstiegsseite)
- startende Termine
- ausgefallene Termine (Einstiegsseite)
- ausgefallene Termine
Extensions
YAG - Yet Another Gallery
PowerMail
Testseite (id=160)
- Eigenes Template (TS)
- Eigene Testseiten
- CSS
- bootstrap_test.css - Allgemeine Seiteneinstellungen
- debug.css - Ergänzungen hervorheben
- style_test.css - Tags und Klassen
- Main
- vhs_test.html - Allgemeines HTML-Template
- vhs_ph.html - Template mit Platzhalter Ergänzungen und Freischalt.
- ts
- constants_test.html - Leichte Anpassungen
- setup_test.html - Kommentierung und Umordnung (s. vhs_ph.html)
Testseite (2)
- Tests:
- Freischaltung Schnellfinder und Kurse (für)
- Anpassung Farben
- Hintergrund
- Kalender
- Testplattform für Kufer WebExtensions
- "vhs_ph.html" aktiviert
Platzhalter (Reihenfolge HTML)
- Kopf
- Lauftext Marquee (lib.marque)
- Navigation Haupt (lib.haupt)
- Warenkorb (lib.warenkorb)
- Bildergallerie Slideshow (lib.carousel)
- linker Rumpf
- Suche (lib.suche)
- Test Schnellfinder (lib.schnellfinder)
- Kurssymbole Rechts1-3 (lib.rechts1-3)
- Test Kurse (lib.kurse)
- mittlerer Rumpf
- Inhalte Spalte0 (styles.content.get)
- rechter Rumpf
- TNLogin (lib.tnlogin) + Kalender
- Legende (lib.legende)
- Inhalte Spalte1 (styles.content.getLeft)
- VHS-App RechteSidebar (lib,rechtesidebar)
- Fuß
- Kontakte/Sprechzeiten/Download Überall1-3 (lib.ueberall1-3)
- Logos (Grafiken)
- Social Media (col-sm-5)
- Fuß (col-sm-7)
- deaktiviert Standard (lib.standard)
Kopf PH: Marquee
setup.ts
lib.marque = CONTENT
lib.marque {
table = tt_content
select.pidInList = 134
# E01: 134 - Versteckte Seiten / Lauftext
select.orderBy = sorting
select.where = colPos = 0
select.languageField = sys_language_uid
}
vhs.html
<div class="col-sm-6">
<f:format.raw><p>{marque}</p></f:format.raw>
</div>
Kopf PH: Haupt (Navi)
setup.ts
lib.haupt = COA
lib.haupt {
…
wrap = <ul class="nav navbar-nav">|</ul>
10 = TEXT
10.value= <li><a href="index.php?id=1">Start</a></li>
…
20 = HMENU
20 {
special = userfunction
special.userFunc = KuferSoftwareKonzeption\Kuferweb\UserFunc\NavMenuFunc->navItemArray
…
30 < .20
30.special >
Kopf PH: Warenkorb
setup.ts
lib.warenkorb = COA
lib.warenkorb {
10 < tt_content.list.20.kuferweb_kuferweb
10.settings.nurWarenkorb = 1
}
Kopf PH: Slideshow (carousel)
setup.ts
lib.carousel = COA
lib.carousel {
wrap = <div id="carousel"><ul class="rslides">|</ul></div>
10 = FILES
10 {
references {
uid =1
fieldName = media
}
renderObj = IMAGE
renderObj {
file {
import.data = file:current:publicUrl
}
stdWrap {
typolink.parameter.data = file:current:link
dataWrap = <li>|</li>
}
…
}
Linker Rumpf PH: Suche
setup.ts
lib.suche = COA_INT
lib.suche {
stdWrap.prefixComment = 2 | lib.searchbox
10 = TEXT
10.typolink.parameter = {$id.suche}
# E01: 89 - Versteckte Seiten / Suche
10.typolink.returnLast = url
10.wrap = <form action="|" method="post" class="form-inline"><div class="form-group">
…
10.data = GPvar : tx_indexedsearch |sword
…
wrap = | </div></form>
}
plugin.tx_indexedsearch {
…
templateFile = {$pfad}tpl/indexed_search.tmpl
}
Linker Rumpf PH: Schnellfinder (deaktiviert)
setup.ts
lib.schnellfinder = HMENU
lib.schnellfinder {
entryLevel = 0
special = directory
special.value = {$diverses.pid.schnellfinder}
# E01: 37 - Bereich rechts / Schnellfinder
wrap = <form action="index.php"><select class="form-control" onchange="window.location=this.options[this.selectedIndex].value"><option value="">Schnellfinder</option>|</select></form>
1 = TMENU
1 {
…
}
}
Linker Rumpf PH: Rechts1-3
setup.ts
lib.rechts1 = CONTENT
lib.rechts1 {
table = tt_content
select.pidInList = {$diverses.pid.programmbereiche}
# E01: 31 - Versteckte Seiten / Programm Icons
select.orderBy = sorting
select.where = colPos = 0
select.languageField = sys_language_uid
}
lib.rechts2 < lib.rechts1
lib.rechts2.select.where = colPos = 1
lib.rechts3 < lib.rechts1
lib.rechts3.select.where = colPos = 2
Linker Rumpf PH: Kurse (deaktiviert)
setup.ts
lib.kurse = HMENU
lib.kurse {
entryLevel = 0
special = directory
special.value = {$diverses.pid.kurse}
# E01: 44 - Bereich rechts / Kurse für ...
wrap = <form action="index.php"><select class="form-control" onchange="window.location=this.options[this.selectedIndex].value"><option value="">Kurse für ...</option>|</select></form>
1 = TMENU
1 {
…
}
Mittler Rumpf PH: Spalte0
setup.ts
spalte0 < styles.content.get
Also Typo3 Spalte „Normal“
Rechter Rumpf PH: TNLogin
setup.ts
lib.tnlogin = COA
lib.tnlogin {
5 < tt_content.list.20.kuferweb_kuferweb
5.settings.nurVerlauf = 1
10 < tt_content.list.20.kuferweb_kuferweb
10.settings.nurKalender = 1
#10.settings.nurTNLogin = 1
}
# E01: IDs: 2, 87, 88, 146
[PIDinRootline = {$id.legende}]
lib.tnlogin.20 < tt_content.list.20.kuferweb_kuferweb
lib.tnlogin.20.settings.nurAmpelLegende = 1
[global]#
Kalender!
Rechter Rumpf PH: Legende
setup.ts
Es gibt keine lib.legende!
Rechter Rumpf PH: Spalte1
setup.ts
spalte0 < styles.content.getLeft
Also Typo3 Spalte „Links“
Rechter Rumpf PH: RechteSidebar
setup.ts
lib.rechtsidebar = CONTENT
lib.rechtsidebar {
table = tt_content
select.pidInList = {$diverses.pid.rechtesidebar}
# E01: 143 - Versteckte Seiten / Rechte Sidebar
select.orderBy = sorting
select.where = colPos = 0
select.languageField = sys_language_uid
}
Fuß PH: Ueberall1-3 (Kontakte/Sprechzeiten/Download)
setup.ts
lib.ueberall1 = CONTENT
lib.ueberall1 {
table = tt_content
select.pidInList = {$diverses.pid.ueberall}
# E01: 37 - Bereich rechts / Drei Service Kästen
select.orderBy = sorting
select.where = colPos = 0
select.languageField = sys_language_uid
}
lib.ueberall2 < lib.ueberall1
lib.ueberall2.select.where = colPos = 1
lib.ueberall3 < lib.ueberall1
lib.ueberall3.select.where = colPos = 2
Fuß PH: in HTML
vhs.html
<div class="col-sm-5">
<a href="http://www.facebook.com" class="rund external-link-new-window hidden"><img src="{pfad}img/rund_facebook.png" alt="Facebook" title="Facebook"></a>
<a href="http://www.twitter.com" class="rund external-link-new-window hidden"><img src="{pfad}img/rund_twitter.png" alt="Twitter" title="Twitter"></a>
<a href="#" class="rund hidden"><img src="{pfad}img/rund_rss.png" alt="RSS" title="RSS"></a>
</div>
<div class="col-sm-7">
<div class="toprint">
<a href="#oben"><img src="{pfad}img/rund_pfeil.png" alt="Seitenanfang" title="Link zum Seitenanfang"> Seitenanfang</a>
<a href="javascript:window.print();"><img src="{pfad}img/rund_druck.png" alt="Drucken" title="Öffnet ein Druckdialog-Fenster"> Drucken</a>
</div>
<div class="standard"><f:format.raw>{standard}</f:format.raw></div>
</div>
Es gibt kein lib.standard!
Beispiel CSS
Kalender
.eine a,.mehrere a
{
background-color:#fcd673;
border-radius:100%;
display:block;
font-size:12px;
height:20px;
padding-top:2px;
text-align:center;
width:20px;
}
.kw-kalender-kalender
{
font-size:12px;
height:158px;
}
.kw_kalender .samstag,.kw_kalender .sonntag
{
opacity:0.6;
}
.kw_kalender td
{
border:0!important;
box-sizing:border-box;
padding:2px!important;
text-align:center;
}
div.kw_kalender_bg
{
background:#afc805;
border-radius:100%;
height:260px;
margin-bottom:-220px;
margin-left:-27px;
width:260px;
}
.kw_kalender
{
color:#00285a;
margin-bottom:40px;
margin-left:0;
max-width:215px;
text-align:center;
width:295px;
}
.kw_kalender table
{
margin-bottom:10px!important;
margin-left:0;
max-width:250px;
}
.kw_kalender th,.kw_kalender td
{
border:0!important;
padding:3px;
}
.kw_kalender h3
{
font-weight:700;
}
.kw_kalender h3,.kw_kalender > p
{
font-size:13px;
margin-bottom:5px!important;
margin-left:8px;
margin-top:0!important;
width:180px;
}
div.kw-kalender-head
{
background-color:#00285a;
border-radius:100%;
color:#FFF;
font-size:11px;
height:20px;
margin-bottom:4px!important;
overflow:hidden;
padding-top:2px;
text-align:center;
width:20px;
}
img.logoimg
{
max-height:65px!important;
width:auto;
}
.kw-kalender-kalender .table-condensed > thead > tr > th
{
padding:0!important;
}
.kw-kalender-kalender .table-condensed tr
{
line-heigth:16px!important;
}
.kw-kalender-btn-for
{
font-size:10px;
margin-left:10px;
padding-left:5px;
padding-right:2px;
}
.kw-kalender-btn-back
{
font-size:10px;
margin-right:10px;
padding-left:3px;
}
Todo
- Update auf V8 bis Herbst oder (E)LTS (2000€)
- Spielwiese (Domaineintrag für id=160)
- Backup (Nachfrage bei Bernd Petermann 5023)
- Weitere Benutzer
- Was ist KuferLess
- Mechanismus "Gallerie","(indexed)Suche"
- Berichte!
- The directory for hash filesystem root (typo3temp/yag) does not exist!
- Schutz vor Cacheüberflutung ist deaktiviert. Bitte aktivieren Sie [FE][cHashIncludePageId] im Install-Tool.
Done
- Salted Passwörter
- Dokumentieren
- Aufbau Website
- Kommentierung TypoSkript (setup_test.ts)
Ende
Danke, für's zuhören ;-)