JA T3 Framework

Fast. Flexible. Powerful

Kontakt

Hvordan laver man et theme i SimpleSAMLphp?

Nedenstående er udarbejdet af Jacob Tranholm, Dronninglund Gymnasium

Tema for simpleSAMLphp

Vores simpleSAMLphp tema blev lavet i et samarbejde mellem mig, der er systemadministrator på Dronninglund Gymasium og stod for den overordnede administrering, og én af vores elever, der har mere forstand på de designmæssige aspekter og derfor lavede selve arbejdet med temaet.

Da vi installerede simpleSAMLphp som IdP, havde vi lidt tidspres, da vores elever hurtigst muligt skulle have adgang til en service over internettet, hvor vores servere skulle kunne fungere som IdP. - Og tidspres betyder ofte, at man nogle steder hopper over, hvor gærdet er lavest. I vores sammenhæng gjaldt dette for temaet, hvor vi fra begyndelsen bare brugte det medfødte simpleSAMLphp standard tema.

Da vi så havde et velfungerende IdP-system, skulle vi til at kigge på temaet. På dette tidspunkt kørte vores simpleSAMLphp allerede online, og jeg kopierede derfor vores simpleSAMLphp over på en anden server, hvor systemet ikke blev brugt til andet end udvikling. Og herefter fulgte jeg guiden http://rnd.feide.no/content/theming-simplesamlphp

Kort opsummeret betyder dette, at jeg på serveren med administrative rettigheder kørte nogle få bash-kommandoer fra en kommandolinie. I alt det efterfølgende regner jeg med, at dit tema skal hedde 'mytheme' og at din simpleSAMLphp er installeret i '/var/simplesamlphp' biblioteket. Dette kan selvfølgelig ændres i kommandoerne:

cd /var/simplesamlphp
mkdir -p modules/mytheme/themes/fancytheme/default/includes
touch modules/mytheme/default-enable
cp templates/includes/{footer.php,header.php} modules/mytheme/themes/fancytheme/default/includes/
cp www/resources/default.css www/resources/mytheme.css
sed -i 's/default\.css/mytheme.css/g' modules/mytheme/themes/fancytheme/default/includes/header.php

Vha. de ovenstående kommandoer er de nødvendige filer og biblioteker blevet oprettet. Tanken er nu, at hele opsætningen kan laves i følgende tre filer:modules/mytheme/themes/fancytheme/default

/includes/header.php
modules/mytheme/themes/fancytheme/default/includes/footer.php
www/resources/mytheme.css

header.php indeholder naturligvis koden for øverste del af siden, og footer.php indeholder koden for den nederste del. Og endelig indeholder mytheme.css CSS-delen. Dette tema aktiveres ved at sætte 'theme.use' => 'mytheme:fancytheme' i config/config.php. Og herfra skal du så finde dit kreative hjerte frem...

I vores arbejdsfordeling overlod jeg her opgaven til én af vores elever, Rasmus F. Gadensgaard. Jeg oprettede en ftp-konto og ændrede filrettighederne/ejerskabet, så han på den ene side havde fuld adgang til filerne igennem ftp, og ligeledes så webserveren stadig kunne fremvise siderne (i testdomænet). Og da dette foregik på en testserver, kunne han/jeg ligeledes lave fejl uden at noget/nogen tog skade. Og herfra vil han fortsætte historien.

Jacob Tranholm, systemadministrator/lærer, Dronninglund Gymnasium


Jeg startede med at lave et meget simpelt grunddesign bestående af ét billede i headeren, og et billede i footeren. For at kunne benytte ét enkelt billede i headeren var jeg nødt til at sætte en fast bredde, dette blev dog ændret senere, da vi blev enige om at have et forholdsvis fleksibelt tema. Derfor tog jeg det billede jeg startede med at bruge i headeren, delte det op i 4 dele - en baggrund, og 3 logoer, som jeg gav faste placeringer i forhold til rammerne i login-kassen.

Rasmus F. Gadensgaard, webdesigner/elev, Dronninglund Gymnasium


Og angående Rasmus' arbejde, vil jeg som systemadministrator sige, at hvis I selv skal lave denne del, så laves webdesign i denne sammenhæng som et samspil mellem CSS-kode og XHTML-kode. CSS-koden ligger i filen mytheme.css og XHTML-koden ligger i filerne header.php og footer.php (pakket ind i lidt PHP-kode).

Men da Rasmus var færdig med sit arbejde, og systemet var testet på testsitet, blev det hele overført til den virkelige server ved at kopiere modules/mytheme mappen og www/resources/mytheme.css filen (og eventuelle billeder) til den virkelige server, og herefter aktiveres temaet ved at sætte 'theme.use' => 'mytheme:fancytheme' i config/config.php.

Og mere kompliceret er det såmænd ikke...

Vores footer indeholder så også en smule tekst, som jeg efterfølgende skulle være sikker på også blev oversat når brugeren skiftede sprog i den indbyggede simpleSAMLphp funktion. Og til dette var vi nødt til at bruge en lille smule PHP-kode, men for resten er det næsten udelukkende CSS og XHTML.

Jacob Tranholm, systemadministrator/lærer, Dronninglund Gymnasium

WAYF – Where Are You From
Asmussens Allé, bygning 305
2800 Kgs. Lyngby

www.wayf.dk
sekretariat@wayf.dk

line
You are here