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.phpBerikut ini adalah output editor.php yang ditunjukkan oleh gambar berikut:
Output dari berita.phpBerikut 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 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.
