Pusat Ilmu Secara Detil

PHP Upload dan Display Image dari Database

PHP Upload dan Display Image dari Database

Pada edisi tutorial sebelumnya :"Upload dan Menampilkan Blob Image dari Database", kita telah membahas tentang cara mengupload image ke database dan memanggilnya untuk ditampilkan pada suatu halaman web.

Dalam edisi tutorial sebelumnya, kita menggunakan tipe data blob untuk menampung image yang diupload ke database. Sekarang kita akan membahas bagaimana cara mengupload image ke database, namun yang disimpan di database hanya berupa nama file image tersebut, kemudia untuk menampilkanya, pada script PHP dipanggil lokasi dari nama file tersebut.

Percobaan

Langkah pertama :
Buatlah sebuah database yang diberinama artikel, kemudai create tabel upload yang berisikan script sql seperti berikut:
CREATE TABLE `upload` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `Judul` varchar(100) NOT NULL,
  `Path` varchar(100) NOT NULL,
  `Waktu` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=latin1


Langkah kedua:
Create file yang diberinama editor.php yang bertujuan sebagai interface dari inputan yang dimasukkan oleh user. Berikut ini snippet code yang membentuk form untuk inputan :
<form name="visi" method="post" action="posting.php" enctype="multipart/form-data">
Judul <input type="text" name="judul">
Gambar<br>
<img id="uploadPreview" style="width: 150px; height: 150px;" /><br>
<input id="uploadImage" type="file" name="image" onchange="PreviewImage();" />
<br><br>
<input type="submit" width="120" height="24" name="simpan" value="Submit" >
</form>

Pada bagian :
<input id="uploadImage" type="file" name="image" onchange="PreviewImage();" />

terdapat code javascript : onchange="PreviewImage()". Tujuan dari koding ini adalah untuk preview image yang dipilih sebelum diupload ke database. Untuk informasi lengkap preview image, klik Menampilkan Image sebelum diUpload.

Langkah ketiga:
Kita akan membuat file posting.php yang bertujuan untuk menyimpan inputan yang dimasukkan user untuk disimpan ke dalam database. File posting.php berisikan script seperti berikut:
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("artikel");

$judul=$_POST['judul'];
$tgl = date('Y-m-d H:i:s');


if (isset($_POST['simpan'])){
 $fileName = $_FILES['image']['name'];

 $sql = "insert into upload Values (NULL, '$judul', '$fileName', '$tgl')";
 mysql_query($sql);
 
 move_uploaded_file($_FILES['image']['tmp_name'], "image/".$_FILES['image']['name']);
 echo"<script>alert('Gambar Berhasil diupload !');history.go(-1);</script>";
}

?>

Dalam file ini, ada penambahan : $tgl = date('Y-m-d H:i:s'); bertujuan untuk mendapatkan tanggal dan waktu terkini untuk disimpan ke dalam database. Format date pada MySQL hanya mendampung format ('Y-m-d H:i:s'). Pastikan anda telah mengcreate folder yang bernama image pada lokasi file anda.

Langkah keempat:
Pada tahap terakhir ini, kita akan memangil data dari database dan menampilkannya pada halaman web. File yang kita buat diberinama berita.php yang mengandung script berikut:
<?php
 
 mysql_connect("localhost", "root", "");
 mysql_select_db("artikel");

 $kueri = mysql_query(" SELECT * FROM upload");
 while ($baris=mysql_fetch_array($kueri))
 {
  
  $formatted = date('d-M-Y H:i:s', strtotime($baris['Waktu']));
  echo $formatted;
  echo "<br>";
  echo "Judul :".$baris[1]."<br><br>";
  echo "<img src=image/".$baris['Path'].">";
  echo"<br><br><hr>";
 }
?>

Output

Output dari editor.php
Berikut ini adalah output editor.php yang ditunjukkan oleh gambar berikut:


Output dari berita.php
Berikut ini adalah output yang menampilan hasil yang diinputkan oleh user seperti yang ditunjukkan oleh gambar berikut:


Share this:

Related Posts
Disqus Comments