Quick Guide (PHP / MySQL): Hvordan tjekker man om to indtastede felter er ens?

Jeg blev spurgt af nogen begyndere udi web-udvikling, PHP og MySQL hvordan man kunne validere om to værdier fra indtastningsfelter er ens. Dette kunne f.eks. være e-mail-adresser, for at sikre sig mod at brugeren har været lidt for hurtig ved tasterne, så en slå-fejl har fundet sin vej ind i feltet.

Bemærk i øvrigt, at dette ikke er en øvelse i hverken design eller sikkerhed, så derfor er alt overflødigt udeladt.

Først er selve HTML-formularen, hvor vi indsamler de informationer, som vi ønsker at kontrollere og gemme senere i PHP’en.

Og her er så det det hele drejer sig om

Jeg håber at kode-kommentarer forklarer det hele – ellers må i lige kaste en kommentar 😉

Guide: Vis årsopgørelse fra Skat uden Adobe Reader

Så er den gal igen i det lille land; Man kan ikke længere se sin årsopgørelse på Skat.dk uden at have Adobe Reader installeret på sin computer. Nu sidder der nok nogen og tænker: “Det er ligegyldigt! Alle har Adobe Reader installeret”. Men, det er ikke ligegyldigt. Folketinget har besluttet at alt indhold fra offentlige instanser skal kunne ses af ALLE, og det er ikke tilfældet når Skat nu laver sådanne krumspring.

Problemet ligger i, ifølge Skat, at med udgivelsen af Windows 8, kan Internet Explorer vise indlejrede PDF-dokumenter (som f.eks. Chrome og Firefox også kan). Dette er der som sådan ikke noget galt i, problemet er blot, at den nye Internet Explorer cacher pdf-filen på computeren – og det er ikke alle brugere der er opmærksomme på dette, så det udgør et sikkerhedsbrist når der f.eks. bruges offentlige/fælles computere til at se sin årsopgørelse med.

Linux-brugere har ikke Adobe Reader, så her må man også lave fiksfakserier, og løsningen er at bruge Greasemonkey-plugin’et til Firefox. Greasemonkey er et plugin, som kan ændre hjemmesiders opførsel, ved at gå ind og “override” en sides Javascript (eller dele heraf) vha. et Userscript (som også bare er Javascript). Vi er så heldige at en af brugerne på www.linuxin.dk (Julemand101) har lavet et Userscript til Skat.dk, som gør at vi kan gemme PDF’en med årsopgørelsen på vores computer.

Så det man gør er, at man først starter Firefox op, og installerer Greasemonkey-plugin’et herfra: https://addons.mozilla.org/da/firefox/addon/greasemonkey/ (vælg “Føj til Firefox”).

Nu kan du så åbne dette script: http://kristhomsen.dk/stuff/PDFvalid.user.js Det skulle gerne aktivere Greasemonkey, og åbne et vindue der spørger om du vil installere script , tryk “Installér” – og det skulle være det 🙂

Held og lykke med det! MEN! I gør dette på ejet ansvar, men der burde ikke være noget farligt i det, hvis man tænker sig om, og kun gør det på sin egen personlige computer.

Guide: Horisontal menu med HTML5 og CSS

Mine damer og herrer… Jeg præsenterer  den første guide nogensinde på KrisThomsen.dk.

Vi skal kigge på hvordan man laver en simpel horisontal menu-linje til sin webside med en uordnet liste og lidt simpel CSS.

Jeg tror vi starter ud med HTML’en – jeg har valgt at bruge HTML5-elementet <nav> men man kan også bruge et almindeligt <div>-element.

Det er jo ikke så slemt, vel? Et <nav>-element med en simpel uordnet liste – <ul> – og nogen menu-punkter. Nu til den “sjove” del, CSS’en – jeg viser jer kun den kedelige del, designet må i selv stå for.

Jeg løj en lille smule før – dette har ikke så meget med hvordan menuen fungerer, men mere lidt simpel design. Jeg angiver at menuen skal have baggrundsfarven #eee (lysegrå), og at der skal være en margen på 50px på hver side af menuen.

Så kom vi til det vigtige. Først fjerner vi “prikkerne”/“bullet-points” foran elementerne i listen. Eftersom en uordnet liste er indrykket som standard (normalt for at der er plads til prikkerne), bliver vi nødt til at nulstille margin og padding. Til sidst sørger vi for at punkterne er centreret. Men vi mangler lige en lille smule CSS endnu;

Her ser vi “display: inline” – dette er nok det vigtigste punkt overhovedet, eftersom det er dette punkt, som giver os en horisontal menu. Og til sidst sætter vi lige en margin på begge sider, så der er lidt afstand mellem punkterne.

Så simpelt kan det gøres! Jeg håber i kunne bruge guiden, jeg vil nok lægge flere små guides op gennem tiden.