PHP – Membuat form Uploader foto

on

Screenshot tampilan form uploader versi Hand Excel.
galleryphoto
Disini saya akan sedikit mereview apa yang sudah saya buat yakni tenteng bagaimana membuat form untuk upload gambar dan juga menampilkannya atau bisa dikatakan sebagai gallery/album foto. berikut step by stepnya.

1. sobat buat databasenya dulu, kasih nama databasenya dengan photo dan buat tabel dan kasih nama foto. berikut screenshotnya:
dbfoto
ket:
* buat 4 field.
– id_foto int(11) auto_increment
– nama_file varchar(45)
– nama varchar (20)
– keterangan text

2. setelah membuat database selesai yang selanjutnya harus kita lakukan adalah mengkoneksikan database dengan file php kita. kita biat file php dan kasih nama koneksi.php
ketik script berikut didalamnya:
<?php
$server = “localhost”;
$username = “root”;
$password = “”;
$database = “photo”;

// Koneksi dan memilih database di server
mysql_connect($server,$username,$password) or die(“Koneksi gagal”);
mysql_select_db($database) or die(“Database tidak bisa dibuka”);
?>
3. kita buat form php untuk form uploadnya. buat file php baru dan kasih nama index.php
dan ketikan script berikut:
<html>
<head>
<style type=”text/css”>
#postingan{
background: -moz-linear-gradient(19% 75% 90deg,#998900, #c5f507);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5f507), to(#998900));
box-shadow:0 1px 4px #63b4f9;
-webkit-box-shadow:0 1px 4px #63b4f9;
-moz-box-shadow:0 1px 4px #63b4f9;
border:1px solid #63b4f9;
border-radius: 15px;
width:580px;
padding:20px;
border:1px solid #999;

}

</style>
<title>Form Upload By Hand Excel</title>
</head>
<body>
<center><h3>Gallery Photo</h3></center>
<div><u>Keterangan:</u><br><em>* Batas Upload Maksimal size 500kb<br>* Supported Tipe File: jpg/jpeg, png, gif (selain itu not found)
<br>* Ukuran Gambar [150×150]px</em>
<form  method=”POST” id=”postingan” enctype=”multipart/form-data”
action=”upload.php”>
<legend>
Upload foto
</legend>
<input type=”file” name=’nama_file’ size=”65″>
<button type=”submit”>
Upload
</button>
<p><input type=”text” name=”nama” Value=”Nama Anda” size =”40″ onfocus=”this.value=”; return false;”></p>
<p><input type=”text” name=”spam”  id=”spam”></p>
<p><textarea name=’keterangan’ cols=’60’ rows=’10’ onfocus=”this.value=”; return false;”>Deskripsi Gambar</textarea></p>

</form>
</div>
<?php
//include file foto_view.php
include(‘view.php’);
?>
</body>
</html>

4. buat file uploadnya untuk menampung proses dari form upload td[index.php]. kasih nama upload.php
dan ketikan script berikut:
<?php
include (‘koneksi.php’);

$nama_file = $_POST[‘nama_file’];
$lokasi_file = $_FILES[‘nama_file’][‘tmp_name’];
$nama_file = $_FILES[‘nama_file’][‘name’];
$tipe_file = $_FILES[‘nama_file’][‘type’];
$ukuran_file = $_FILES[‘nama_file’][‘size’];
$nama=$_POST[‘nama’];
$keterangan=$_POST[‘keterangan’];
$nama_baru = preg_replace(“/\s+/”, “_”, $nama_file);
$direktori = “foto/$nama_baru”;

$MAX_FILE_SIZE = 500000;

if(strlen($nama_file)<1){
?><script language=”javascript”>
alert(“Anda Belum memilih File yang di upload”);
document.location=”u_photo.php”;
</script>
<?php
}

$formatgambar = array(“image/jpg”, “image/jpeg”,”image/gif”, “image/png”);
if(!in_array($tipe_file, $formatgambar)) {
?><script language=”javascript”>
alert(“Format Tidak Diperbolehkan”);
document.location=”u_photo.php”;
</script>
<?php

}
if($ukuran_file > $MAX_FILE_SIZE && $ukuran_file<=0) {
?><script language=”javascript”>
alert(“ukuran File min-max 1 sampai 500kb”);
document.location=”u_photo.php”;
</script>
<?php
}

move_uploaded_file($lokasi_file, $direktori);
$sql = “INSERT INTO foto(nama_file,nama,keterangan)
VALUES(‘$nama_baru’,’$nama’,’$keterangan’)”;

$result = mysql_query($sql) or die(mysql_error());

if($result==true) {
?><script language=”javascript”>
alert(“Upload Succes!!!”);
document.location=”u_photo.php”;
</script>
<?php
} else {
?><script language=”javascript”>
alert(“Upload Gagal”);
document.location=”u_photo.php”;
</script>
<?php
}
mysql_close();
?>

5. buat form untuk nampilin foto yang sudah di upload. kasih nama view.php
dan ketikan script berikut:
<?php

require_once (‘koneksi.php’);
$nama=$_POST[‘nama’];
$keterangan=$_POST[‘keterangan’];
$query=”SELECT * from foto  “;
$result=mysql_query($query) or die(mysql_error());
$no=1;
echo “<div style=’border: 0px solid #000000; height: 920px; overflow: auto; padding: 5px; width: auto;’>”;

while($row=mysql_fetch_array($result)){

echo “<div id=’postingan’>
<table border=’0′ cellpadding=’0′ cellspacing=’0′>
<tr><td rowspan=’3′><img  src=’foto/$row[nama_file]’  width=’150′ height=’150′ title=’$row[nama_file]’/><td>
<td style=’padding-left:10px;padding-right:10px;’>Nama File</td><td>:</td><td style=’padding-left:10px;padding-right:10px;’>$row[nama_file]</td></tr>
<tr><td></td><td style=’padding-left:10px;padding-right:10px;’>Uploader</td><td>:</td><td style=’padding-left:10px;padding-right:10px;’>$row[nama]</td></tr>
<tr><td></td><td style=’padding-left:10px;padding-right:10px;’ valign=’top’>Deskripsi</td><td valign=’top’>:</td><td style=’padding-left:10px;padding-right:10px;’ valign=’top’>$row[keterangan]</td></tr></table>
</div> “;

}
echo “</div>”;
?>
ingat letakkan semua file dalam satu folder dan buat folder lagi didalamnya dengan nama foto sejajr dengan file” yang lain didalam folder.

untuk file”nya nanti di upload hehehe😀

4 Comments Add yours

  1. ululf01 mengatakan:

    makasih ya, di coba dulu tutorialnya

    moga ilmunya bermanfaat

    1. informatika11d mengatakan:

      ya gan sama” amin.
      makasih udah berkunjung kemari

  2. mov31 mengatakan:

    document.location=”u_photo.php
    bukankah setelah pemroses data selesai akan menuju ke “u_photo.php” terus mana filenya, bisa ngk u_photo tadi dialihkan keLink lainnya, apakah script itu bisa berjalan? makasih

    1. informatika11d mengatakan:

      u_photo.php itu link halamannya jadi bisa diganti apapun terserah mau dikasih nama halamnnya..

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s