Karaokeparty

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

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.


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!