Arkiv for kategorien ‘Webudvikling’.

Simpel validering af dato-streng

Halløjsa,

Jeg har lavet en lille funktion, der kan validere om en dato er korrekt eller ej i PHP.
Valideringen kræver at datoen er i følgende format dd-mm-åå, dvs. f.eks. 10-01-86.

function validateDate($date)
{
    if (preg_match("/^([0-9]{2})-([0-9]{2})-([0-9]{2})$/", $date, $parts))
        if(checkdate($parts[2], $parts[1], $parts[3]))
            return true;
    return false;
}

Funktionen starter med først at tjekke at der kun er angivet tal mellem de to bindestreger.
Derefter validateres datoen via PHP-funktionen checkdate($month, $day, $year)  for om hver sektion i strengen er indenfor de tilladte værdier (f.eks. at man ikke har angivet 13 som en måned og 32 som en dag).

Simpel funktion, der er god til at valider bruger-input inden de f.eks. viderebehandles eller lagres i en database.

God fornøjelse !

JavaScript Picture Slider

Hello,

I was coding this little Picture Slider in JavaScript for a colleague and thought: Why not just share it with everybody else?

So here it is people… It is not advanced, it is not high-tech… but it is simple!

  1. <html>
  2.  
  3. <head>
  4.     <title>Picture Slider</title>
  5.  
  6.     <script type="text/javascript">
  7.     // Setup
  8.     var imagePath = "images/"; // Path to image-folder
  9.     var images = new Array("image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg"); // filenames of the images
  10.     var slideInterval = 1.5; // amount of seconds before sliding to the next image.
  11.  
  12.    // Variabels
  13.     var curImage = 0;
  14.  
  15.     // Fucntions   
  16.     function startSlide() {
  17.         setTimeout("nextSlide()", slideInterval * 1000);
  18.     }
  19.  
  20.     function nextSlide() {
  21.         var viewer = document.getElementById("imageViewer");
  22.         curImage = curImage + 1;
  23.  
  24.         if (images[curImage] == null)
  25.             curImage = 0;
  26.  
  27.         viewer.src = imagePath + images[curImage];
  28.  
  29.         setTimeout("nextSlide()", slideInterval * 1000);
  30.     }
  31.  
  32.     // Start the slider
  33.     startSlide();
  34.     </script>
  35. </head>
  36.  
  37. <body>
  38.  
  39.     <h1>Picture Slider</h1>
  40.     <br />
  41.     <img id="imageViewer" src="images/image1.jpg">
  42.  
  43. </body>
  44.  
  45. </html>

Just change the variables under the “setup” in the start of the JavaScript-code and change the src-parameter on the img-tag of the picture to show the first picture. Then the script will work.

Have fun !!

/KEF

JavaScript & CSS: styleFloat virker ikke i Firefox

Halløj,

Jeg sad forleden dag med et problem i Javascript, hvor jeg satte style-indstillingen styleFloat til at være ‘left’ på en span.
Det virkede fint i Internet Explorer, Opera osv., men i Firefox ville den bare ikke højrestille min span.

Jeg brugte en hel del tid på at undersøge problemet, og til sidst fik jeg det da også løst. Det hele startede med, at jeg sad med mit JavaScript-kode. Koden tilføjede en ekstra div (for nemhedens skyld kalder vi den fremover for sekundær div) til en i forvejen oprettet div (og for nemhedens skyld igen kalder vi denne for primær div). Den sekundær div indeholdte en span (der indeholdte noget tekst), mens den til sidst indeholdte et link. Den sekundære div havde desuden fået sat align=”right”. Planen var at linket skulle stå helt til højre, mens min span så skulle floates til venstre.

Da min kode i JavaScript ikke virkede, besluttede jeg mig for at udføre en test af det i ren HTML og CSS. Jeg lavede derfor en stump kode, der teste det. Og det virkede fint. Så nu var jeg 100 % klar over, at problemet var i JavaScript.

Efter noget søgen på internettet (Google er tilsyneladende min ven) fandt jeg et forum, hvori problemet stod beskrevet. I JavaScript, når man forsøger at sætte en float-indstilling på et element, skal man bruge style.styleFloat = <left|right|none>. Den brugte jeg også på mit element, men i følge diverse fora-indlæg, så fortolker Firefox ikke “styleFloat”. Dvs. Firefox sætter ikke en style=”float: left;” på elementet. Den eneste udvej for at løse problemet er tilsyneladende at lave en CSS-klasse, som nedenstående:

  1. .floatLeft
  2. {
  3.     float: left;
  4. }

Derefter skal man i JavaScript i stedet for at sætte indstillingen style.styleFloat = ‘left’, sætte className-indstillingen til ‘floatLeft’ (som er navnet på den CSS-klasse, jeg lavede).

Efter en kort test kunne jeg konstatere, at løsningen hjalp. Det er ikke en særlig dejlig løsning, men når Firefox ikke kan finde ud af det, så må man jo gå forbi problemet.

Pæne URL-adresser med htaccess

Det er atter blevet tid til et blogindlæg vedr. udvikling (eller nok nærmere teknologi).

Denne gang har jeg valgt at kigge på hvordan man på en enkel og smart måde kan lave www.frande.dk/artikler.php?kategori=html&artikel=introduktion om til www.frande.dk/artikler/html/introduktion/. Det er faktisk slet ikke så svært, og det ser både bedre ud for den besøgende samt giver dem en bedre mulighed for at huske en direkte adresse til undersider på din hjemmeside. Et ekstra plus er også, at adressen bliver optimeret bedre til søgemaskinerne pga. man ikke har parametre sat på adressen.

Allerførst er der nogle krav, der skal opfyldes, for at alt dette kan lykkes. I dette eksempel vil vi arbejde med Apache (web-server) modulet mod_rewrite. Det er derfor et krav, at mod_rewrite er aktiveret på web-serveren, samt man har mulighed for benytte sig af htaccess på serveren (har man en udbyder til at hoste sin hjemmeside, er det ikke altid sikkert, at de tillader denne mulighed – men spørg din udbyder, måske du er heldig!).

Det første man skal gøre er at oprette filen “.htacces”. Det er vigtigt, at den hedder præcis “.htaccess” og ikke andet. Der må ikke være noget foran punktummet. Oftest får man ikke lov til at kalde en fil .htaccess på en Windows-baseret PC. Jeg plejer derfor oftest at kalde filen htaccess.txt, og så omdøber jeg den til .htacces, når jeg ligger den op på web-serveren.

Når filen er oprettet, skal vi igang med at arbejde med den. Det første man skal gøre er, at fortælle, at man nu vil aktivere mod_rewrite modulet. Det kommer til at se sådan her ud:

  1. RewriteEngine on

Herefter skal man definere, hvordan man ønsker at lave de pæne URL-adresser.
Tager vi udgangspunkt i mit tidligere eksempel på en grim URL-adresse, som vi gerne vil have til at se pæn ud, så kunne .htaccess-filen komme til at se sådan her ud:

  1. RewriteEngine on
  2. RewriteRule ^/artikler/(.+)/(.+)/$ artikler.php?kategori=$1&artikel=$2

Ovenstående lille stykke “kode” kræver at man har en smule kendskab til regulære udtryk. Det kan være en smule svært at sætte sig ind i, men det er meget godt at kunne.

Basalt set betyder det, at hvis brugeren indtaster www.frande.dk/artikler/html/introduktion/ i browseren, så vil web-serveren (uden at den besøgende kan se det) i stedet kalde filen artikler.php med parametrene kategori = html & artikel = introduktion.

(.+) betyder basalt set, at den tager imod både bogstaver og tal.
Man kunne også have brugt ([0-9]+]), men så ville man kun sende tal med over. Et eksempel herfor kunne være:

  1. RewriteEngine on
  2. RewriteRule ^/artikler/(.+)/([0-9]+)/$ artikler.php?kategori=$1&artikel=$2

Her ville det kræve, at brugeren f.eks. indtaster www.frande.dk/artikler/html/1/ i browseren.

Jeg håber, at det gav en lille forsmag til, hvad Apaches mod_rewrite modul kan give af muligheder – og at jeg i fremtiden vil se flere pæne URL-adresser, fremfor de grimme trælse URLs.

Subdomæner med PHP

Subdomæner bruges i stor stil i dag til at brugere nemmere kan finde delindhold på websites.

Der er flere former for subdomæner. Der er dem, hvor:

  • subdomænet er oprettet på et seperat webhotel.
  • subdomænet er et “spejl” af en mappe (test.frande.dk har samme indhold som frande.dk/test/)
  • subdomænet viderestiller til et placering (test.frande.dk viderestiller til frande.dk/test/)

Jeg vil nu vise hvordan man med simpel PHP-kode, og en smule DNS-opsætning (bliver man ikke guidet igennem), kan lave subdomæner, der viderestiller til en given placering.

Jeg tager udgangspunkt i mit eget domæne (frande.dk), men vil gerne notere, at det ikke er sat op på mit domæne – det er ren eksempel!

Opsætning af domænets DNS

Opsætningen af domænets DNS er i dette eksempel meget vigtigt, at have på plads.

For at kunne opsætte viderestillingen via PHP, skal det ønskede subdomænenavn pege på selve “hoveddomænet”. Oftest vil man gøre det med et såkaldt stjerne-alias, hvor man siger, at *.frande.dk peger ind på samme webserver som frande.dk.

Dertil skal man sætte op på web-serveren at *.frande.dk skal pege ind på frande.dk.

I de fleste tilfælde vil man selv kunne sætte DNSen op, mens web-serveren oftest skal sættes op af ens udbyder.

Nu til det spændende

For at starte udvælger vi nogle subdomæner, som vi vil oprette, samt nogle placeringer.

jubii.frande.dk viderestiller til jubii.dk
galleri.frande.dk viderestiller til frande.dk/galleri/
links.frande.dk viderestiller til frande.dk/links.php

Herefter skriver vi følgende PHP-kode:

  1. <?php
  2. $redirect_to = "";
  3. if ($_SERVER[‘HTTP_HOST’] == "jubii.frande.dk")
  4.     $redirect_to = "http://www.jubii.dk/";
  5. else if ($_SERVER[‘HTTP_HOST’] == "galleri.frande.dk")
  6.     $redirect_to = "http://www.frande.dk/galleri/";
  7. else if ($_SERVER[‘HTTP_HOST’] == "links.frande.dk")
  8.     $redirect_to = "http://www.frande.dk/links.php";
  9.  
  10. if (!empty($redirect_to))
  11. {
  12.     header("Location: " + $redirect_to);
  13.     exit;
  14. }
  15. ?>

Det er vigtigt at koden ligger i index.php-filen i roden af webhotellet. Det er den fil, som man skal ramme som standard, når man indtaster f.eks. frande.dk i browseren.
Koden skal ligge allerøverst i filen og være det allerførste, der udføres. På den måde sikrer man, at der ikke udføres noget andet PHP-kode inden man viderestiller.

Nu til forklaringen af koden – det er jo vigtigt for forståelsen af, hvad der sker.

Jeg vælger, da der kan indtastet flere forskellige subdomæner, at gemme den adresse, der skal viderestilles til, i en variabel ($redirect_to).
Til at starte med sætter jeg derfor variablen $redirect_to til ikke at indeholde noget.

Derefter tjekker jeg om adressen, brugeren har indtastet i browseren, er en af de ønskede subdomæneadresser. Det sker vha. en såkaldt if-then-else sætning, hvor jeg spørger om variablen $_SERVER['HTTP_HOST'] er lig de forskellige subdomæneadresser. $_SERVER['HTTP_HOST'] indeholder den adresse, som brugeren indtaster i browseren. Såfremt $_SERVER['HTTP_HOST'] er lig én af de ønskde subdomæneadresser, tildeles variablen $redirect_to den adresse, der skal viderestilles til.

Til sidst tjekker jeg på om variablen $redirect_to er tom. Er den ikke tom, skal den sende data ud til brugerens browser om, at den i stedet skal efterspørge den side, som, der ønskes viderestillet til. Til sidst bruges metoden exit for at sikre, at der ikke udføres mere kode efter denne linje.

Alt i alt et meget simpelt script, der kan hjælpe til at forenkle mange ting. At bruge PHP til dette er blot én af mange måder, hvorpå man kan udføre ovenstående. Det vil jeg dog ikke kigge nærmere på.