Karaokeparty

Demonstrasjonsside for et påmeldings- og administrasjonssystem for et karaokekonsept

Siden er basert på en responsiv HTML5-mal, som er tilpasset spesifikke behov. Dynamisk innhold skrives til database vha Perl, og hentes ut vha AJAX.

Søk og filtrer

All historikk presenteres i en ryddig tabell, som også er søkbar. Denne siden er basert på en kombinasjon av to ulike webressurser. Tabellen bygges opp periodisk (etter hver event), ferdig formatert for "sebrastriping" vha CSS. jQuery brukes for å knytte til søkefeltet og utføre selve filtreringen. Her har jeg gjort en del justeringer for å sørge for at filtreringen treffer dataene på rett måte. For eksempel skal man kun vise de radene som matches -- med mindre treff er i alias-feltet: Da skal alle radene (påmeldingene til den aktuelle personen) vises. Markering av treff (i gult) benytter jQuery-funksjonen highlight v3, som da kobles til filtreringsfunksjonen.

Se demo

Påmeldinger legges inn via et enkelt skjema, som lagres i en mySQL-database (via et Perl-skript). For rask visning, blir data umiddelbart formatert og skrevet til HTML-filer som kan inkluderes i hovedsiden. Filene inneholder også metadata (id etc) som brukes til å legge til interaktivitet og redigering -- se nedenfor.

Påmeldinger fra tidligere avholdte events settes sammen til en ordsky, og en søkbar historikktabell. Ordskyen benytter z-index for å sørge for at også de små linkene blir klikkbare.

Redigering, direkte i visningen

Etter innlogging, kan data redigeres direkte i den vanlige visningen. Dette er den mest intuitive løsningen, og det enkleste for brukeren.

Løsningen er bygget fra grunnen av, gjennom JavaScript og contenteditable-taggen. Dersom en bruker er autentisert blir ekstra HTML og JavaScript "injisert" (av Perl) sammen med den vanlige koden for påmeldingene, som gjør at man kan endre bestemte felt. JavaScript Event Listeners fanger opp hvilke felt som faktisk endres, slik at disse kan sendes inn til serveren for lagring.

Serveren henter også ut ekstra felt fra databasen, som epost, tekst og instr-felt, som også vises for administrator. Disse er primært visning av metadata, men fungerer samtidig som inputfelt, hvor man kan legge til eventuelt manglende opplysninger -- direkte i visningen.

Forsøk det her!

Etter innlogging dukker praktiske administreringsmuligheter opp, direkte i front-end.

Roster


#main { margin-left: 0; }

#header { display: none; }

div.container { 
	width: 100%; 
	margin-left: 3em; 
	}

#main > section {
	padding-top: 2em;
}

ol {
	list-style: decimal;
}

Det er også lagt til rette for en spesiell visning for avvikling av selve arrangementet. Denne siden er dynamisk generert, og layout er tilpasset projektor-visning. Her er CSS fra HTML5up-malen manuelt bygget ned til en forenklet, statisk visning -- altså ikke responsiv -- så man alltid er sikker på hvordan siden vil se ut.

Siden viser påmeldingene til neste event, men rekkefølgen kan her spesifiseres. Vha jQuery.ui er listen gjort sorterbar gjennom enkel drag-and-drop, og den nye rekkefølgen kan skrives tilbake til databasen. Det er også mulig å enkelt fjerne påmeldinger ved å slippe dem ut av listen. Pause-elementer kan klikkes inn i programmet, og flyttes rundt/slettes etter behov.

Støtte også for flater

Nettbrett og mobiler støtter touch-eventer og ikke mus-events, så for å sørge for at responsiv (drag-and-drop) funksjonalitet fungerer også på flater benyttes jQuery UI Touch Punch biblioteket.

Forsøk det her!