Tags:    php

Introduktion

For at bruge dette system, skal der være PHP (med GD-Lib) og MySQL på serveren.

Denne artikel vil handle om, hvordan man lavet et billedupload-system, hvor billeder bliver lagt op på serveren. Hvis de er for store, så bliver de resizet. Disse thumbnails vil så blive vist på en side, der bliver genereret ud fra nogle data i en tabel (disse data ligger vi ind, når vi uploader billedet). Når man trykker på et thumbnail, bliver det store billede vist i et nyt browser vindue.

Det kan virke meget mærkeligt, at jeg vælger at bruge MySQL database til dette system. Dog har jeg valgt det, da mange sikkert vil vælge at udbygge systemet.

Da min filosofi, når man skal lære noget, er, at det hele ikke skal serveres på et sølvfad, kommer der i denne artikel ikke 15 siders blandet html og php-kode. Der vil selvfølgelig komme noget php-kode, bare rolig…

Well, let the code begin…

Tabellen i databasen

Det, vi skal bruge databasen til, er at lave det automatiske fotoalbum. Der skal være følgende felter i denne tabel (vi kalder fx tabellen ”billeder”):

id (skal være et auto increasing, unik felt af typen int)
billede (skal være et felt, der indeholder navnet på billedet – dvs. et tekst felt)
tid (dette felt skal bruges, så man kan se, hvornår billedet blev uploadet)

Man kan senere udbygge dette system, så der kan komme forskellige kategorier, måske censur, så kun folk, der er logget ind kan se billederne – man kan også lave sådan, at man kan se, hvem der har uploadet billedet osv. En ideel udvidelse ville være, hvis man lavede sådan, at man kunne lave en beskrivelse til hvert billede.

Sider i dette system

I dette system skal vi bruge nogle sider:
billeder.php (her vil der komme en oversigt over de små billeder)
billeder-upload.php (her vil der være en form, hvor man kan vælge det billede, man vil uploade)
billeder-upload-verify.php (denne side sørger for at uploade billedet)

billeder-upload.php

For at uploade et billede skal man bruge en form. Denne form kunne se sådan ud:

<form action="billeder-upload-verify.php" method="post" enctype="multipart/form-data">
 <input type="file" name="fil">
 <input type="submit" name="upload" value="Upload">
</form>

Læg mærke til: enctype="multipart/form-data" i formen!

billeder-upload-verify.php

Denne side sørger for at uploade det valgte billede. Når man har valgt et billede på siden billeder-upload.php og trykker på knappen, bliver man sendt til denne side. Det valgte billede bliver samtidig lagt ind i en midlertidig mappe på serveren (her bliver den midlertidige fil slettet, når scriptet er færdig med at køre). Det, denne side skal sørge for, er altså at flytte den midlertidige fil over i et bibliotek i dine biblioteker. Når man skal det, så skal man have ændret rettighederne på den mappe, som man flytter billederne over i. Dette gøres nemmeste med et FTP-program. Rettighederne på mappen, hvor man vil flytte billederne over i, skal være 777!

Som sagt skulle billedet resizes, hvis det var for stort. Xyborx har lavet en funktion, der kan gøre det. Den hedder ”mageresize”, og kan findes på http://www.xyborx.dk/image.php Der kan dog være et par funktioner, der ikke virker – det kommer an på sin version af det installerede GD-Lib. Det drejer sig om (du kan evt. bruge denne funktion til at checke det med: http://www.php.net/manual/en/function.function-exists.php):
imagecreatetruecolor (brug i stedet imagecreate – men kun, hvis der er problemer)
imagecopyresampled (brug i stedet imagecopyresized – men kun, hvis der er problemer)

Når vi som sagt har valgt et billede på forrige side, og kommer til denne side, så er der nogle variabler:
Billedets originale navn: $_FILES["fil"]["name"]
Den midlertidige fils navn på serveren: $_FILES["fil"]["tmp_name"]
Filens størrelse i bytes $_FILES["fil"]["size"] (kan bruges, hvis det billede man uploader fx maks må fylde 100 kB).

Selve koden til filen (her skal der ikke være nogle HTML-koder i – overhovedet!):

//Her skal filen flyttes fra
$fra	= $_FILES['fil']['tmp_name'];

//Hvilken type fil arbejder vi med?
$ext	= strtolower(end(explode(".", $_FILES['fil']['name'])));

//Hvis filen er et jpg, jpeg eller gif billede
if($ext == "jpg" || $ext == "jpeg" || $ext == "gif")
{
$tid		= time();

//Her giver vi billedet et andet navn, så der ikke kommer to ens navne…
$nytNavn = $tid . ”_” . rand(1, 1000000) . $ext;

//Her er vores destination
$til		= "../upload/billeder/large/" . $nytNavn;

//Her sker det magiske:
move_uploaded_file($fra, $til);

//Her resizer vi billedet med Xyborx’s funktion
$newSizeWidth	= 75;
$newSizeHeight	= 75;
$newSizeDes	= "../upload/billeder/small/" . $nytNavn;
imageresize($til, $newSizeWidth, $newSizeHeight, "../upload/billeder/small/" . $nytNavn);

//Her ligges oplysningerne ind databasen – huske at connecte til den!
$query	= "INSERT INTO billeder (billede, tid) VALUES ('$billede', '$tid')";
mysql_query($query);
}

header("Location: billeder.php");

billeder.php

Dette er nok den nemmeste side. Den skal laves lige som alt muligt andet – fx tagwall. Vi skal hente nogle informationer fra en database, og derefter vise dem:

$destinationLarge	= "../upload/billeder/large/”;
$destinationSmall		= "../upload/billeder/small/”;

$queryBillede		= "SELECT * FROM billeder ORDER BY id DESC";
$queryBillede		= mysql_query($queryBillede);

while($rBillede = mysql_fetch_array($queryBillede))
{
$billede	= $rBillede["billede"];
$tid	= $rBillede["tid"];
$tid	= ”d. ” . date(”d/m-Y”, $tid) . ” kl. ” . date(”H:i:s”, $tid);

echo "
<a href="” . $destinationLarge . $billede . ”">
<img src="” . $destinationSmall . $billede . ”" border="0">
</a> ";
}

Afsluttende bemærkning

Princippet med at uploade andre filer er akkurat magen til dette. Jeg har lavet dette skelet på denne måde, så man nemt kan udvide det med fx billedbeskrivelse.

Der kan tit være mange problemer i forbindelse med at uploade filer. En stor del af disse problemer er, at rettighederne på det bibliotek, man prøver at uploade til ikke er sat rigtigt. De skal være 777!

Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.

Del også gerne artiklen med dine Facebook venner:  

Karma barometer (30 dage)

IT jobs | Kontakt | Om Udvikleren.dk | Om karma | IT nyheds arkiv | Annoncering

X