Tutorials
Uploadsysteem
Een heus uploadsysteem met daaraan vastgekoppeld een loginsysteem en een winkelwagen. Het upload systeem en het inlogsysteem worden in het 'normale' programmeren gemaakt en daarna zal ik overgaan tot het object georïenteerde programmeren.
Pagina 1
Inleiding
In deze tutorail wil ik het volgende gaan maken. Een heus uploadsysteem met daaraan vastgekoppeld een loginsysteem en een winkelwagen. Het upload systeem en het inlogsysteem worden in het ‘normale’ programmeren gemaakt en daarna zal ik overgaan tot het object georïenteerde programmeren. Eerst bespreken we de basis van het object georïenteerde programmeren en daarna zullen we de koe bij de horens vatten en het winkelwagentje gaan maken in Object Orïented Programming. Maar goed eerst het maken van een gebruiker systeem en een uploadsysteem.
Pagina 2
Index pagina
Aan de slag!
Voor het gemak heb ik de applicatie de ‘Foto winkel’ genoemd. Zelf mag je natuurlijk een toepasselijker naam verzinnen maar daar gaat het natuurlijk niet om.
De database
Omdat je natuurlijk foto’s wilt opslaan in je systeem hebben we database nodig. Niet op de foto op te slaan, maar om een verwijzing op te slaan Later zullen we ook andere dingen opslaan in de database maar dat komt straks wel. Als je nog nooit met database’s hebt gewerkt kun je beter deze tutorial laten liggen en een wat makkelijker tutorial pakken. Er staat er zat op deze site. Of kijk anders ook eens op www.phptuts.nl . We beginnen met het maken van de tabel photos.
Nu wij de tabel photos hebben gemaakt voor het tijd dat we de index pagina aan gaan maken. Dit is gewoon heel basic en bevatten wat links naar de upload en de view pagina
Heel simpel en basis allemaal. Goed vanaf nu komt het echte werk want we gaan beginnen met het programmeren van het upload formulier.
Voor het gemak heb ik de applicatie de ‘Foto winkel’ genoemd. Zelf mag je natuurlijk een toepasselijker naam verzinnen maar daar gaat het natuurlijk niet om.
De database
Omdat je natuurlijk foto’s wilt opslaan in je systeem hebben we database nodig. Niet op de foto op te slaan, maar om een verwijzing op te slaan Later zullen we ook andere dingen opslaan in de database maar dat komt straks wel. Als je nog nooit met database’s hebt gewerkt kun je beter deze tutorial laten liggen en een wat makkelijker tutorial pakken. Er staat er zat op deze site. Of kijk anders ook eens op www.phptuts.nl . We beginnen met het maken van de tabel photos.
CREATE TABLE IF NOT EXISTS `photos` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`naam` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
`photo_filename` varchar(50) NOT NULL DEFAULT '',
`trefwoorden` varchar(100) DEFAULT NULL,
`datum` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
`beschrijving` text,
`ip` varchar(50) NOT NULL default '',
`sys_info` varchar(50) NOT NULL default '',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Nu wij de tabel photos hebben gemaakt voor het tijd dat we de index pagina aan gaan maken. Dit is gewoon heel basic en bevatten wat links naar de upload en de view pagina
<html>
<head>
<title>Foto winkel</title>
</head>
<body>
<ul>
<li><a href="winkelUpload.php">Foto uploaden</a></li>
<li><a href="winkelView.php">Foto's bekijken</a></li>
</ul>
</body>
</html>
Heel simpel en basis allemaal. Goed vanaf nu komt het echte werk want we gaan beginnen met het programmeren van het upload formulier.
Pagina 3
Benodigd heden
- Een webserver met PHP 5
- Een SMTP server
- MYSQL server
- Ondersteuning van Mysqli functie
- Een SMTP server
- MYSQL server
- Ondersteuning van Mysqli functie
Pagina 4
Upload pagina
Het uploaden van een file gebeurd door een aparte input type. Zoals je misschien standaard gewend bent gebruik je text, password etc. Deze keer gebruiken we het type file
Als je dat in een html file neerzet krijg je naast het input veld een knop ‘bladeren’ of ‘browse’ te zien. Ook moet er in het form het één en ander worden aangepast. Hierin geef je het MIME-Type mee.
De code van de file winkelUpload komt er dan zo uit te zien
Het enigste waar je op moeten letten is dus de enctype. Als je dit niet in je form hebt staan zal je nooit bestanden kunnen uploaden. Let daar dus op!
Even wat theorie
Als je een bestand upload naar een webserver gebeurt er het volgende. Het bestand wordt opgeslagen in een tijdelijke directory. Deze locatie wordt aangegeven met de aanduideing upload_tmp_dir in de php.ini. Daarna maakt PHP een superglobal met de naam $_FILES. Hierin wordt een array geplaatst met de naam van het formulier element. In ons geval dus de array ‘foto’.
Er zijn nu verschillende dingen die je via de superglobal kan opvragen.
- De naam
- De type
- De size
- Tmp_name (De tijdelijke naam die door PHP is toegkend)
- Error
Dus, als ik de naam van het bestand wil weten kan dat op de volgende manier
<?php
$_FILES['foto']['name']
?>
Als er tijdens het uploaden een fout is opgetreden kan je die ook makkelijk bekijken via de superglobal. Straks in het upload script zullen we deze foutmeldingen behandelen.
<input type="file" name="foto" value="" size="30" />
Als je dat in een html file neerzet krijg je naast het input veld een knop ‘bladeren’ of ‘browse’ te zien. Ook moet er in het form het één en ander worden aangepast. Hierin geef je het MIME-Type mee.
Enctype="multipart/form-data"
De code van de file winkelUpload komt er dan zo uit te zien
<html>
<head>
<title>Foto winkel => Upload</title>
</head>
<body>
<form method="POST" action="<?php basename ($_SERVER['PHP_SELF']); ?>" enctype="multipart/form-data" />
<table>
<tr>
<td>Kies een foto</td>
</tr>
<tr>
<td><input type="file" name="foto" size="30" /></td>
</tr>
<tr>
<td>Beschrijving</td>
</tr>
<tr>
<td><textarea name="beschrijving" cols="30" rows="4"></textarea></td>
</tr>
<tr>
<td>Uw naam</td>
</tr>
<tr>
<td><input type="text" name="naam" size="40" /></td>
</tr>
<tr>
<td>Uw emailadres</td>
</tr>
<tr>
<td><input type="text" name="email" size="40" /></td>
</tr>
<tr>
<td><input type="submit" value="Uploaden" /></td>
</tr>
</table>
</form>
</body>
</html>
Het enigste waar je op moeten letten is dus de enctype. Als je dit niet in je form hebt staan zal je nooit bestanden kunnen uploaden. Let daar dus op!
Even wat theorie
Als je een bestand upload naar een webserver gebeurt er het volgende. Het bestand wordt opgeslagen in een tijdelijke directory. Deze locatie wordt aangegeven met de aanduideing upload_tmp_dir in de php.ini. Daarna maakt PHP een superglobal met de naam $_FILES. Hierin wordt een array geplaatst met de naam van het formulier element. In ons geval dus de array ‘foto’.
Er zijn nu verschillende dingen die je via de superglobal kan opvragen.
- De naam
- De type
- De size
- Tmp_name (De tijdelijke naam die door PHP is toegkend)
- Error
Dus, als ik de naam van het bestand wil weten kan dat op de volgende manier
<?php
$_FILES['foto']['name']
?>
Als er tijdens het uploaden een fout is opgetreden kan je die ook makkelijk bekijken via de superglobal. Straks in het upload script zullen we deze foutmeldingen behandelen.
Pagina 5
Configuratie bestand
Het configuratie bestand
We maken nu een map aan genaamd ‘Configs’. Daarin maken we een bestand aan met de naam ‘winkelConfig.php’. Je kan natuurlijk zelf ook namen verzinnen en het hoefd niet percé in de map Configs maar ik werk altijd het liefst overzichtelijk dus vandaar dat ik het zo doe.
In het config bestand maak je verbinding met de database. Dat doen we op de volgende manier.
<?php
$db['host'] = '';
$db['gebruikersnaam'] = '';
$db['wachtwoord'] = '';
$db['database'] = '';
$Mysqli = new mysqli($db['host'], $db['gebruikersnaam'], $db['wachtwoord'], $db['database']);
if(mysqli_connect_errno())
{
echo 'Fout bij verbinding: '.$Mysqli->error;
}
include_once ('winkelFunctions.php');
?>
Even uitleg over wat we nu hebben gemaakt. In de array $db stoppen we de gevens van onze database. Bij $db[‘host’] vul je meestal localhost in. Bij de rest van je gevens kan ik niet helpen. Deze heb je gehad van je host. In de variable $Mysqli maken we verbinding met de database. Deze variablen kunnen laten gebruiken voor de query’s en beveiliging van SQL injections. Later meer hierover. Hierna kijken of er een error is opgetreden met het verbinden met de database. Als dit zo is krijg je een error. Hier zien we al dat we de variable $Mysqli gebruiken om voor de connect error weer te geven. Hieronder include wij onze functions hier gaan we later op in.
We maken nu een map aan genaamd ‘Configs’. Daarin maken we een bestand aan met de naam ‘winkelConfig.php’. Je kan natuurlijk zelf ook namen verzinnen en het hoefd niet percé in de map Configs maar ik werk altijd het liefst overzichtelijk dus vandaar dat ik het zo doe.
In het config bestand maak je verbinding met de database. Dat doen we op de volgende manier.
<?php
$db['host'] = '';
$db['gebruikersnaam'] = '';
$db['wachtwoord'] = '';
$db['database'] = '';
$Mysqli = new mysqli($db['host'], $db['gebruikersnaam'], $db['wachtwoord'], $db['database']);
if(mysqli_connect_errno())
{
echo 'Fout bij verbinding: '.$Mysqli->error;
}
include_once ('winkelFunctions.php');
?>
Even uitleg over wat we nu hebben gemaakt. In de array $db stoppen we de gevens van onze database. Bij $db[‘host’] vul je meestal localhost in. Bij de rest van je gevens kan ik niet helpen. Deze heb je gehad van je host. In de variable $Mysqli maken we verbinding met de database. Deze variablen kunnen laten gebruiken voor de query’s en beveiliging van SQL injections. Later meer hierover. Hierna kijken of er een error is opgetreden met het verbinden met de database. Als dit zo is krijg je een error. Hier zien we al dat we de variable $Mysqli gebruiken om voor de connect error weer te geven. Hieronder include wij onze functions hier gaan we later op in.
Pagina 6
Uploaden (PHP)
Het upload formulier
Het is nu de tijd dat we het upload formulier gaan maken. We noemen het bestand. ´winkelUpload.php´. Ik zal hier even niet al te veel op ingaan dan alleen in de file zelf.
<?php
# Hier include we dus het config bestand. Dit natuurlijk aanpassen naar eigen pad.
include_once ('../Configs/winkelConfig.php');
# Hierin worden de foto's geupload. Zorg ook dat u deze map heeft aangemaakt en alle rechten heeft.
$UploadMap = '../winkelUploads/';
# Deze variable wordt straks gevuld met de bestands naam van de foto
$FotoNaam = '';
# Omdat er natuurlijk word gecontroleerd of er fouten zijn opgetreden maken wij hiervoor aan array aan.
# Als je niet weet wat een array is kun je nog even op php.net kijken.
$Bericht = array ();
# Toegestane extenties
$FotoExt = array('.jpg', '.jpeg', '.gif', '.png');
# In deze array zitten alle toegestane MIME types, deze kan je natuurlijk uitbreiden met doc, pdf bestanden.
$FotoMIME = array ('image/jpeg', 'image/pjpeg', 'image/png', 'image/x-png', 'image/gif');
# In deze variable definieren wij de maximale grote van het bestand. Wij zetten het even op 5 mb.
# Dit kan je natuurlijk gewoon aanpassen naar eigen wens.
$MaxFotoSize = 5000000;
# In deze variable zetten wij de pixel size van de thumbnail weer.
$ThumbSize = 90;
# Controleren of de pagina zichzelf heeft aangeroepen
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
# Als het formulier niet is verzonden of de pagina is foutief aangroepen
if (!isset($_FILES['foto']))
{
# dan vullen we hier de array met een fout melding. Deze wordt later weer uitgelezen door middel van een foreach.
$Bericht[] = 'U heeft geen foto geselecteerd!';
}
else
{
# Een array maken met alle waarden van de foto.
$Foto = $_FILES['foto'];
# Nu komt hetgene waar ik het daarnet overhad. Het controleren van de fouten. Dit doen we doormiddel van een switch statement.
switch ($Foto['error'])
{
case UPLOAD_ERR_OK:
# Het uploaden is goed gegaan, maar misschien is de foto groter dan toegestaan.
if ($Foto['size'] > $MaxFotoSize)
{
$Bericht[] = 'De foto is te groot. Hij mag niet groter zijn dan <b>' .$MaxFotoSize. '</b>';
}
# Kijken of het bestand wel een breedte en/of hoogte heeft
if(@!getimagesize($_FILES['foto']['tmp_name']))
{
$Bericht[] = 'Deze foto heeft geen breedte of hoogte';
}
break;
case UPLOAD_ERR_INI_SIZE:
# De foto is groter dan toegestaan in php.ini Dit is standaard 16 mb.
$Bericht[] = 'De foto is te groot.';
break;
case UPLOAD_ERR_PARTIAL:
# De foto is maar gedeeltelijk geupload. Variable $Bericht weer vullen met een foutmelding.
$Bericht[] = 'Er is een fout opgetreden tijdens het uploaden';
break;
case UPLOAD_ERR_NO_FILE:
# Er is geen bestand opgegeven om te uploaden. Array weer vullen.
$Bericht[] = 'U heeft geen foto opgegeven om te uploaden';
break;
default:
# Vanget: Er zou eigenlijk geen onbekende fout mogen optreden maar het is toch goed om hier een voorziening voor te treffen
$Bericht[] = 'Er is een onbekende fout opgetreden';
break;
} # Het einde van de switch statement.
if (empty($Bericht))
{
# Het uploaden is goedgegaan, want de array Bericht is nog leeg. (empty)
# We gaan u de extensie van de file controleren en kijken of hij is toegestaan. (Bovenin de file staan de toegestane extensie's weet je nog?)
if (!in_array($Foto['type'], $FotoMIME ))
{
# De MIME type die is opgegeven is niet toegestaan, de array bericht weer vullen met een andere foutmelding.
$Bericht[] = 'Deze extensie is niet toegestaan!';
}
# Extensie controleren
if(!in_array(strtolower(strrchr($_FILES['foto']['name'], '.')), $FotoExt))
{
$Bericht[] = ' Deze foto extentie is niet toegestaan';
}
# We gaan nu controleren of er al een foto bestaat met deze naam.
$FotoNaam = $UploadMap . $Foto['name'];
if (file_exists($FotoNaam))
{
# De naam van de foto bestaat dus al. Het mag natuurlijk niet voorkomen dat file's worden overgeschreven. Dat zou zonde zijn.
# De array weer vullen met een andere foutmelding. Natuurlijk mag je die helemaal aanpassen naar wat jij wilt!
$Bericht[] = 'Er bestaat al een foto met deze naam!';
}
?>
Even een tussenpauze en een kleine bespreking van wat we nu al gedaan hebben. In de commentaarregels wat aangegeven staat met een # kun je lezen wat er elke keer gedaan wordt. Ook heb ik gekozen om de foutmeldingen op te slaan in een array. Dit omdat je dan laten de foutmeldingen weer kan geven waar je maar wilt.
Wat ons nu nog rest
Even op een rijtje wat we nu nog moeten doen.
- De overige formulier velden valideren
- De afbeelding verplaatsen naar de definitieve map
- Database verwijzing maken (Vandaar de tabel photos)
- Thumbnail van de foto maken
- Upload pagina testen
We lopen het rijtje af. Wat we eerst moeten doen is het valideren van de formulier velden. Ik ga niet alles voorkauwen dus laat ik jouw ook even wat programmeren. Eigenlijk is het heel gemakkelijk. Eerst controleer je of er geen fouten zijn opgetreden zoals we hierboven al een keer gedaan hebben. En daarna kijken je of er bij naam wat ingevuld is. Dit kan je het zelf doen als bij het controleren van de foutenmeldingen. Dus je gebruikt de functie empty. Als je dat gedaan hebt komt weer iets moeilijks.We moeten het e-mail veld controleren. Dit wordt gedaan met een reguliere expressie. Omdat dit een tutorial is vind ik dat je zelf ook wel wat mag doen. Maar ik zal wel wat verklappen en een klein stukje code geven.
<?php
if (check_email($_POST[‘email’]))
{
# hier vul je variable bericht weer.
}
?>
Je roept dus een functie check_email aan. Je hoeft hem nu nog niet te maken. Later definieer je hem in het function bestand. Kijk ook eens op [php]preg_match[/php]
Nu komt het verplaatsen van de foto naar de definitieve map. We controleren weer eerst of er geen fouten zijn opgetreden. (Mag je zelf doen) En daarna gebruiken we de volgende functie.
<?php
if (!move_uploaded_file ($Foto['tmp_name'] , $FotoNaam))
{
# vul hier weer de array bericht met een melding dat de foto niet opgeslagen kon worden.
}
?>
Als we weer naar het lijstje kijken zien we dat het nu de tijd is om een verwijzing naar de database te gaan maken. In de database stoppen we de volgende dingen
- Naam
- Email
- Foto filename
- Trefwoorden
- Datum
- Beschrijving
- IPadres
- Systeem info
Controleer eerst weer of er geen fouten zijn opgetreden, en daarna maken we deze query.
<?php
$Query_insert_photo =
"
INSERT INTO
photos
(
naam,
email,
photo_filename,
trefwoorden,
datum,
beschrijving,
ip,
sys_info
)
VALUES
(
'" .$Mysqli->real_escape_string ($_POST['naam']). "',
'" .$Mysqli->real_escape_string ($_POST['email']). "',
'" .$Mysqli->real_escape_string ($_FILES['foto']['name']). "',
'" .$Mysqli->real_escape_string ($_POST['trefwoorden']). "',
NOW(),
'" .$Mysqli->real_escape_string ($_POST['beschrijving']). "',
'" .$Mysqli->real_escape_string ($_SERVER['REMOTE_ADDR']). "',
'" .$Mysqli->real_escape_string ($_SERVER['HTTP_USER_AGENT']). "'
)
";
?>
Zoals ik in het stukje van de configuratie pagina heb gezegt dat we de variablen $Mysqli zullen gebruiken zien jullie hem nu hier. Hij wordt gebruik voor het beveiligen van de query tegen SQL injection en straks voor het uitvoeren van de query. Waarom? Als je mysqli gebruikt is het verplicht om 2 parameters op te geven. 1 voor de database. En de andere voor het geen wat in je database schrijft. Bijvoorbeeld $_POST[‘voorbeeld’]. Nu is hij tijd om de query uit te gaan voeren. Dit doen we doormiddel van een if statement zodat we gelijk kunnen controleren of er fouten zijn opgetreden bij het wegschrijven van de foto.
<?php
if (!$Mysqli->query ($Query_insert_photo) )
{
$Bericht[] = 'Er is een fout getreden met het opslaan van de foto in de database '. $Mysqli->error;
}
?>
Daarna maken wij een else aan waar we de thumbnail gaan maken. Omdat dit nogal moeilijk is zal ik alle code gewoon geven en daar commentaar bij neerzetten. Probeer het wel te snappen.
<?php
else
{
# eigenschappen van de foto achterhalen
list ($Breedte, $Hoogte, $ImageType) = getimagesize ($FotoNaam);
# bepaald de verhouding tussen hoogte en breedte
$ImageRatio = $Breedte / $Hoogte;
# bereken op basis van de ratio de nieuwe hoogte
if ($ImageRatio > 1)
{
$TnBreedte = $ThumbSize;
$TnHoogte = $ThumbSize / $ImageRatio;
}
else
{
$TnHoogte = $ThumbSize;
$TnBreedte = $ThumbSize * $ImageRatio;
}
# Lege thumbnail in het geheuge schrijven
$Thumb = imagecreatetruecolor ($TnBreedte, $TnHoogte);
# Afhankelijk van het type een thumbnail maken
switch ($ImageType)
{
case IMAGETYPE_GIF:
$Source = imagecreatefromgif ($FotoNaam);
break;
case IMAGETYPE_JPEG:
$Source = imagecreatefromjpeg ($FotoNaam);
break;
case IMAGETYPE_PNG:
$Source = imagecreatefrompng ($FotoNaam);
break;
default:
$Source = imagecreatefromgif ($FotoNaam);
break;
}
# De foto verkleinen en kopiëren naar de thumbnail
imagecopyresampled ($Thumb, $Source, 0, 0, 0, 0, $TnBreedte, $TnHoogte, $Breedte, $Hoogte);
# Naam van de thumbnail samenstellen
$Thumbname = $UploadMap . 'thumbnails/' . 'tn_' . $_FILES['foto']['name'];
# tot slot de thumbnail opslaan opnieuw afhankelijk van het type
switch ($ImageType)
{
case IMAGETYPE_GIF:
imagegif ($Thumb, $Thumbname);
break;
case IMAGETYPE_JPEG:
imagejpeg ($Thumb, $Thumbname, 100);
break;
case IMAGETYPE_PNG:
imagepng ($Thumb, $Thumbname);
break;
}
$Bericht[] = 'Uw foto is succesvol opgeslagen in het fotoalbum!';
}
?>
Nu moeten wij nog alle statement afsluiten. Probeer er zelf achter te komen hoeveel je er moet afsluiten. Lukt dit niet gebruik er dan 4. xD Daarna mag je php afsluiten en het formulier er onderzetten.
Het is nu de tijd dat we het upload formulier gaan maken. We noemen het bestand. ´winkelUpload.php´. Ik zal hier even niet al te veel op ingaan dan alleen in de file zelf.
<?php
# Hier include we dus het config bestand. Dit natuurlijk aanpassen naar eigen pad.
include_once ('../Configs/winkelConfig.php');
# Hierin worden de foto's geupload. Zorg ook dat u deze map heeft aangemaakt en alle rechten heeft.
$UploadMap = '../winkelUploads/';
# Deze variable wordt straks gevuld met de bestands naam van de foto
$FotoNaam = '';
# Omdat er natuurlijk word gecontroleerd of er fouten zijn opgetreden maken wij hiervoor aan array aan.
# Als je niet weet wat een array is kun je nog even op php.net kijken.
$Bericht = array ();
# Toegestane extenties
$FotoExt = array('.jpg', '.jpeg', '.gif', '.png');
# In deze array zitten alle toegestane MIME types, deze kan je natuurlijk uitbreiden met doc, pdf bestanden.
$FotoMIME = array ('image/jpeg', 'image/pjpeg', 'image/png', 'image/x-png', 'image/gif');
# In deze variable definieren wij de maximale grote van het bestand. Wij zetten het even op 5 mb.
# Dit kan je natuurlijk gewoon aanpassen naar eigen wens.
$MaxFotoSize = 5000000;
# In deze variable zetten wij de pixel size van de thumbnail weer.
$ThumbSize = 90;
# Controleren of de pagina zichzelf heeft aangeroepen
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
# Als het formulier niet is verzonden of de pagina is foutief aangroepen
if (!isset($_FILES['foto']))
{
# dan vullen we hier de array met een fout melding. Deze wordt later weer uitgelezen door middel van een foreach.
$Bericht[] = 'U heeft geen foto geselecteerd!';
}
else
{
# Een array maken met alle waarden van de foto.
$Foto = $_FILES['foto'];
# Nu komt hetgene waar ik het daarnet overhad. Het controleren van de fouten. Dit doen we doormiddel van een switch statement.
switch ($Foto['error'])
{
case UPLOAD_ERR_OK:
# Het uploaden is goed gegaan, maar misschien is de foto groter dan toegestaan.
if ($Foto['size'] > $MaxFotoSize)
{
$Bericht[] = 'De foto is te groot. Hij mag niet groter zijn dan <b>' .$MaxFotoSize. '</b>';
}
# Kijken of het bestand wel een breedte en/of hoogte heeft
if(@!getimagesize($_FILES['foto']['tmp_name']))
{
$Bericht[] = 'Deze foto heeft geen breedte of hoogte';
}
break;
case UPLOAD_ERR_INI_SIZE:
# De foto is groter dan toegestaan in php.ini Dit is standaard 16 mb.
$Bericht[] = 'De foto is te groot.';
break;
case UPLOAD_ERR_PARTIAL:
# De foto is maar gedeeltelijk geupload. Variable $Bericht weer vullen met een foutmelding.
$Bericht[] = 'Er is een fout opgetreden tijdens het uploaden';
break;
case UPLOAD_ERR_NO_FILE:
# Er is geen bestand opgegeven om te uploaden. Array weer vullen.
$Bericht[] = 'U heeft geen foto opgegeven om te uploaden';
break;
default:
# Vanget: Er zou eigenlijk geen onbekende fout mogen optreden maar het is toch goed om hier een voorziening voor te treffen
$Bericht[] = 'Er is een onbekende fout opgetreden';
break;
} # Het einde van de switch statement.
if (empty($Bericht))
{
# Het uploaden is goedgegaan, want de array Bericht is nog leeg. (empty)
# We gaan u de extensie van de file controleren en kijken of hij is toegestaan. (Bovenin de file staan de toegestane extensie's weet je nog?)
if (!in_array($Foto['type'], $FotoMIME ))
{
# De MIME type die is opgegeven is niet toegestaan, de array bericht weer vullen met een andere foutmelding.
$Bericht[] = 'Deze extensie is niet toegestaan!';
}
# Extensie controleren
if(!in_array(strtolower(strrchr($_FILES['foto']['name'], '.')), $FotoExt))
{
$Bericht[] = ' Deze foto extentie is niet toegestaan';
}
# We gaan nu controleren of er al een foto bestaat met deze naam.
$FotoNaam = $UploadMap . $Foto['name'];
if (file_exists($FotoNaam))
{
# De naam van de foto bestaat dus al. Het mag natuurlijk niet voorkomen dat file's worden overgeschreven. Dat zou zonde zijn.
# De array weer vullen met een andere foutmelding. Natuurlijk mag je die helemaal aanpassen naar wat jij wilt!
$Bericht[] = 'Er bestaat al een foto met deze naam!';
}
?>
Even een tussenpauze en een kleine bespreking van wat we nu al gedaan hebben. In de commentaarregels wat aangegeven staat met een # kun je lezen wat er elke keer gedaan wordt. Ook heb ik gekozen om de foutmeldingen op te slaan in een array. Dit omdat je dan laten de foutmeldingen weer kan geven waar je maar wilt.
Wat ons nu nog rest
Even op een rijtje wat we nu nog moeten doen.
- De overige formulier velden valideren
- De afbeelding verplaatsen naar de definitieve map
- Database verwijzing maken (Vandaar de tabel photos)
- Thumbnail van de foto maken
- Upload pagina testen
We lopen het rijtje af. Wat we eerst moeten doen is het valideren van de formulier velden. Ik ga niet alles voorkauwen dus laat ik jouw ook even wat programmeren. Eigenlijk is het heel gemakkelijk. Eerst controleer je of er geen fouten zijn opgetreden zoals we hierboven al een keer gedaan hebben. En daarna kijken je of er bij naam wat ingevuld is. Dit kan je het zelf doen als bij het controleren van de foutenmeldingen. Dus je gebruikt de functie empty. Als je dat gedaan hebt komt weer iets moeilijks.We moeten het e-mail veld controleren. Dit wordt gedaan met een reguliere expressie. Omdat dit een tutorial is vind ik dat je zelf ook wel wat mag doen. Maar ik zal wel wat verklappen en een klein stukje code geven.
<?php
if (check_email($_POST[‘email’]))
{
# hier vul je variable bericht weer.
}
?>
Je roept dus een functie check_email aan. Je hoeft hem nu nog niet te maken. Later definieer je hem in het function bestand. Kijk ook eens op [php]preg_match[/php]
Nu komt het verplaatsen van de foto naar de definitieve map. We controleren weer eerst of er geen fouten zijn opgetreden. (Mag je zelf doen) En daarna gebruiken we de volgende functie.
<?php
if (!move_uploaded_file ($Foto['tmp_name'] , $FotoNaam))
{
# vul hier weer de array bericht met een melding dat de foto niet opgeslagen kon worden.
}
?>
Als we weer naar het lijstje kijken zien we dat het nu de tijd is om een verwijzing naar de database te gaan maken. In de database stoppen we de volgende dingen
- Naam
- Foto filename
- Trefwoorden
- Datum
- Beschrijving
- IPadres
- Systeem info
Controleer eerst weer of er geen fouten zijn opgetreden, en daarna maken we deze query.
<?php
$Query_insert_photo =
"
INSERT INTO
photos
(
naam,
email,
photo_filename,
trefwoorden,
datum,
beschrijving,
ip,
sys_info
)
VALUES
(
'" .$Mysqli->real_escape_string ($_POST['naam']). "',
'" .$Mysqli->real_escape_string ($_POST['email']). "',
'" .$Mysqli->real_escape_string ($_FILES['foto']['name']). "',
'" .$Mysqli->real_escape_string ($_POST['trefwoorden']). "',
NOW(),
'" .$Mysqli->real_escape_string ($_POST['beschrijving']). "',
'" .$Mysqli->real_escape_string ($_SERVER['REMOTE_ADDR']). "',
'" .$Mysqli->real_escape_string ($_SERVER['HTTP_USER_AGENT']). "'
)
";
?>
Zoals ik in het stukje van de configuratie pagina heb gezegt dat we de variablen $Mysqli zullen gebruiken zien jullie hem nu hier. Hij wordt gebruik voor het beveiligen van de query tegen SQL injection en straks voor het uitvoeren van de query. Waarom? Als je mysqli gebruikt is het verplicht om 2 parameters op te geven. 1 voor de database. En de andere voor het geen wat in je database schrijft. Bijvoorbeeld $_POST[‘voorbeeld’]. Nu is hij tijd om de query uit te gaan voeren. Dit doen we doormiddel van een if statement zodat we gelijk kunnen controleren of er fouten zijn opgetreden bij het wegschrijven van de foto.
<?php
if (!$Mysqli->query ($Query_insert_photo) )
{
$Bericht[] = 'Er is een fout getreden met het opslaan van de foto in de database '. $Mysqli->error;
}
?>
Daarna maken wij een else aan waar we de thumbnail gaan maken. Omdat dit nogal moeilijk is zal ik alle code gewoon geven en daar commentaar bij neerzetten. Probeer het wel te snappen.
<?php
else
{
# eigenschappen van de foto achterhalen
list ($Breedte, $Hoogte, $ImageType) = getimagesize ($FotoNaam);
# bepaald de verhouding tussen hoogte en breedte
$ImageRatio = $Breedte / $Hoogte;
# bereken op basis van de ratio de nieuwe hoogte
if ($ImageRatio > 1)
{
$TnBreedte = $ThumbSize;
$TnHoogte = $ThumbSize / $ImageRatio;
}
else
{
$TnHoogte = $ThumbSize;
$TnBreedte = $ThumbSize * $ImageRatio;
}
# Lege thumbnail in het geheuge schrijven
$Thumb = imagecreatetruecolor ($TnBreedte, $TnHoogte);
# Afhankelijk van het type een thumbnail maken
switch ($ImageType)
{
case IMAGETYPE_GIF:
$Source = imagecreatefromgif ($FotoNaam);
break;
case IMAGETYPE_JPEG:
$Source = imagecreatefromjpeg ($FotoNaam);
break;
case IMAGETYPE_PNG:
$Source = imagecreatefrompng ($FotoNaam);
break;
default:
$Source = imagecreatefromgif ($FotoNaam);
break;
}
# De foto verkleinen en kopiëren naar de thumbnail
imagecopyresampled ($Thumb, $Source, 0, 0, 0, 0, $TnBreedte, $TnHoogte, $Breedte, $Hoogte);
# Naam van de thumbnail samenstellen
$Thumbname = $UploadMap . 'thumbnails/' . 'tn_' . $_FILES['foto']['name'];
# tot slot de thumbnail opslaan opnieuw afhankelijk van het type
switch ($ImageType)
{
case IMAGETYPE_GIF:
imagegif ($Thumb, $Thumbname);
break;
case IMAGETYPE_JPEG:
imagejpeg ($Thumb, $Thumbname, 100);
break;
case IMAGETYPE_PNG:
imagepng ($Thumb, $Thumbname);
break;
}
$Bericht[] = 'Uw foto is succesvol opgeslagen in het fotoalbum!';
}
?>
Nu moeten wij nog alle statement afsluiten. Probeer er zelf achter te komen hoeveel je er moet afsluiten. Lukt dit niet gebruik er dan 4. xD Daarna mag je php afsluiten en het formulier er onderzetten.
Pagina 7
Afronden uploaden
Zo dan is het uploaden afgerond. Owja? En het controleren van de email dan? Maak dus een bestand aan in de map configs genaamd winkelFunctions.php. Doormiddel van de informatie die op php.net staat kan je een controle maken voor het email. Maar we zijn nog steeds niet klaar. Want we zetten de foutmeldingen wel in een array maar we lezen ze helemaal niet uit! O shit das waar ok. Nouwja dan doen we dat gewoon toch? Dit werkt doormiddel van een foreach.
<?php
if(!empty($Bericht))
{
foreach ($Bericht as $Melding)
{
echo $Melding;
}
}
?>
Dit had je zelf ook nog wel kunnen bedenken toch? Wil je nog weten waar je het neer moet zetten? Dat maakt helemaal niet uit. Zelf zet ik ze altijd onder mijn formulier. Maar het is natuurlijk helemaal wat jij zelf wilt.
Afronding van deze tut
Zo dit was de tutorial over het uploaden van file. Ja zul je zeggen er zijn er nog veel meer en nog betere ook. Ja klopt maar ik was ook nog niet uitgetypt. Deze tutorial wordt steeds uitgebreider. Zoals je in de inleiding kan lezen;) Ik zal je alvast wat verklappen. Ik probeer elke week zo’n 2 of 3 nieuwe dingen er in te zetten.
<?php
if(!empty($Bericht))
{
foreach ($Bericht as $Melding)
{
echo $Melding;
}
}
?>
Dit had je zelf ook nog wel kunnen bedenken toch? Wil je nog weten waar je het neer moet zetten? Dat maakt helemaal niet uit. Zelf zet ik ze altijd onder mijn formulier. Maar het is natuurlijk helemaal wat jij zelf wilt.
Afronding van deze tut
Zo dit was de tutorial over het uploaden van file. Ja zul je zeggen er zijn er nog veel meer en nog betere ook. Ja klopt maar ik was ook nog niet uitgetypt. Deze tutorial wordt steeds uitgebreider. Zoals je in de inleiding kan lezen;) Ik zal je alvast wat verklappen. Ik probeer elke week zo’n 2 of 3 nieuwe dingen er in te zetten.
Pagina 8
Slot
Vragen en opmerkingen zijn natuurlijk erg welkom
Ik hoop dat je er wat van geleerd hebt!
Ik hoop dat je er wat van geleerd hebt!
Reacties
0