Upload dan Display Image PHP

PHP Upload dan Display Image dari Database

android maker Wednesday, January 21, 2015 25 Comments  Pemrograman Web, Web Programming

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 edisii 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.

Lankah 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
// Connect to Database
mysql_connect("localhost", "root", "");
mysql_select_db("artikel");

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

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

    // Simpan ke Database
 $sql = "insert into upload Values (NULL, '$judul', '$fileName', '$tgl')";
 mysql_query($sql);
 // Simpan di Folder Gambar
 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
            // Connect to Database
            mysql_connect("localhost", "root", "");
     mysql_select_db("artikel");

            $kueri = mysql_query(" SELECT * FROM upload");
            while ($baris=mysql_fetch_array($kueri))
            {
             //echo $baris['Waktu'];
             //$date = DateTime::createFromFormat('Y-m-d', $baris["Waktu"]);
             //echo htmlspecialchars($date->format('F Y'), ENT_QUOTES, "UTF-8");

             $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:

Anda dapat mengdowload keselurahan file tersebut lengkap dengan css nya :

• Link 1 (4Shared)

Link dibawah ini hanya bagi yang mau membantu penulis untuk mengdownload melalui sharecash. Tentunya untuk download melalui sharecash, harus mengisi survey mereka dulu. Jika keberatan, gunakan downloan link1 (tidak ribet) dan source code sama dengan link2 dan link3.

• Link 2
• Link 3