Tutorijal kako napraviti uploader slika

[ djen92 @ 28.10.2009. 09:09 ] @

Kako napraviti stranicu za upload slika.
Prvo sto je potrebno jeste da napravite bazu podataka (mysql),
sa nazivom koji cete primenjivati u konekciji sa njom.
Zatim u bazi napravite tabelu sa imenom galerija
(tako sam ja stavio, naravno vi mozete staviti naziv po izboru, ali morate menjati i u kodu :D)
U toj tabeli napravite polja 1) slike_id (int, not null, primary key);
2) filename (text, not null,).
Ili jednostavno ubacite u bazu preko sql sledeci kod:

Code:

CREATE TABLE `galerija` (
  `slike_id` int(11) NOT NULL auto_increment,
  `filename` text NOT NULL,
  PRIMARY KEY  (`slike_id`),
  FULLTEXT KEY `filename` (`filename`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=47 ;

Kad smo zavrsili sa ubacivanjem tabela u polja u bazu prelazimo na
fajl za konekciju stranice sa bazom.(U mom slucaju naziv fajla ce biti db.php)
Mislim da je sledeci kod svima jasan mada sam i u njemu ostavio komentar,
tako da prelazimo na sledeci korak.

db.php

Code:

<?php

$host = $_SERVER['SERVER_NAME'];

// gledam da li je localhost (moj komp) ili je na hostingu i u
// zavisnosti od toga unosim ove dole podatke za povezivanje sa bazom podataka
// U ovom slucaju if je za unosenje podataka za localhost dok je else za bazu na serveru

if ($host == "localhost")
{
    $con = mysql_connect('localhost', 'username', 'password') or
    die("error, netacna mysql adresa");
    mysql_select_db("Naziv vase baze",$con) or
    die ("error, nema baze podataka  ");
}
else
{
    $con = mysql_connect('localhost', 'username', 'password') or
    die("error, netacna mysql adresa");
    mysql_select_db("Naziv vase baze",$con) or
    die ("error, nema baze podataka  ");
}

if(is_numeric($slike_id)) {
$slike_id = (Int)$_POST["slike_id"];
$query = "DELETE FROM `galerija` WHERE `slike_id` = '$slike_id'";
mysql_query($query, $con) or die(mysql_error());
}
else {
die("Hacking attempt");
}

?>

Sledeci korak je da napravite .html stranicu u kojoj cete birati sliku za ubacivanje na server.
Ta stranica se sastoji iz forme iz koje se dobijaju 2 dugmeta(1 za biranje slika iz vaseg kompjutera, 2 submit dugmeta)
i jednog polja gde ce se ocitati precica slike koju ubacujete iz racunara.
U mom slucaju se ova stranica naziva uploader.html.
A forma koja ide na tu stranicu je:

ps: Koristio sam metodu post za ubacivanje u bazu, (vi je mozete promeniti na get)

uploader.html

Code:

<form enctype="multipart/form-data" action="uploader.php" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
Izaberite sliku: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" />
</form>

Kao sto ste videli u formi action="uploader.php", samim tim znaci da moramo i napraviti uploader.php stranicu.
Ta php stranica sluzi za ubacivanje slika kao i obavestavanje da li je ubacena na server ili ne.
Kao sto cete videti u stranici sam koristio kod include("db.php"); koji sluzi kao precica do stranice db.php.
To sam uradio radi preglednosti, a ako ne zelite da stavite tako jednostavno sve iz db.php stavite u ovu stranicu umesto tog koda.
U ovoj stranici se nalazi kod $target_path = "uploads/"; koji predstavlja folder u koji ce stavljati slike,
sto znaci da vi morate napraviti pored ovih stranica i folder uploads.

uploader.php

Code:

<?php

         include("db.php");

$target_path = "uploads/";

$filename = $_FILES['uploadedfile']['name'];

$target_path = $target_path . basename( $filename);

if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
    echo "Slika ".  basename( $filename).
    " je ubacena na server. ";

     $query = "INSERT INTO galerija (filename)
        VALUES ('$filename')";
         mysql_query($query, $con);
}
else{
    echo "nije ubacena na server, probajte ponovo! ";
}

?>                 <br />
<a href="uploader.html">Nazad</a>

To bi bilo sve sto se tice upload-a slika, ali da vas ne razocaram stavicu upustvo
za stranicu koja ce te slike ocitavati i brisati po vasoj zelji. :D
Tu stranicu sam nazvao izbrisi_slike.php.
Sada cu postaviti kod cele te stranice a nakon koda cu komentarisati ako bude trebalo.

izbrisi_slike.php

Code:

<?php
include("db.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script language="jscript" type="text/javascript">
function confirmSubmit()
{
// ovo je javascript koji je jasan
var agree=confirm("Jesi li siguran da zelis da obrises?");
if (agree)
    return true ;
else
    return false ;
}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Brisanje slika</title>
</head>

<body>
<?php
$query = "SELECT * FROM galerija  ";
$result = mysql_query($query, $con);
while ($row = mysql_fetch_array($result))
{
    $slike_id = $row["slike_id"];
    $filename = $row["filename"];
       $slika_id = $_POST['slika_id'];

?>

<table>
<td>
<div id="vesti_cont">
<div id="vte-container"></div>
<a href="<?php echo "uploads/$filename"?>">
    <img id='thumb1' src="<?php echo "uploads/$filename"?>" alt="Slika"
height="160" width="200" />
</a>   - <form action="obrisi.php" method="post">
    <input name="slike_id" type="hidden" id="slike_id" value="<?php echo $slike_id?>" />
    <input name="Submit" type="submit"  value="Delete" onclick="return confirmSubmit();"/>
</form><br />
</div>
</td><br />

</table>
<?php
}
?>
    <a href="uploader.html">Upload slika</a><br />

</body>
</html>

E sad komentari za stranu:
Na samom pocetku vam se isto nalazi include kod koji mozete zamenitim sa onim kodom iz db.php (to sam vam vec naglasio i u proslom koraku).
U kodu ove stranice se nalazi i javascript kod koji sluzi zapotvrdu brisanja slike.
Naravno u kod mozete po zelji dodati i kod za uvelicavanje slika tj javascript kod, ali to prepustam vama :D

_{[Ovu poruku je menjao djen92 dana 28.10.2009. u 10:30 GMT+1]}

_{[Ovu poruku je menjao djen92 dana 28.10.2009. u 12:54 GMT+1]}

_{[Ovu poruku je menjao djen92 dana 29.10.2009. u 11:28 GMT+1]}