Cara Membuat Upload Gambar dengan PHP dan MySQL

Saya akan coba berbagi bagaimana membuat upload gambar dengan pemograman PHP dan database MySQL. Pada catatan kali ini, saya membatasi gambar yang bisa diuploadnya hanya png dan jpg. Jadi selain gambar png dan jpg, maka nanti akan muncul pesan error. Selain itu, saya juga membatasi ukuran gambar nya yaitu maksimal 1MB. Langsung saja ikuti langkah-langkah berikut ini:


INFO:
Catatan ini sudah saya update. sebelumnya tutorial ini menggunakan MySQL Functions seperti mysql_connect, mysql_query, dan lain-lain. Tapi karena fungsi tersebut sudah deprecated di PHP versi 5.5. jadi telah saya update jadi menggunakan MySQLi Functions seperti mysqli_connect, mysqli_query, dan lain-lain.

STEP 1 – PERSIAPAN
  1. Buat sebuah folder dengan nama latihan_upload, lalu simpan pada folder xampp/htdocs/
  2. Buat lagi sebuah folder dengan nama images, lalu simpan di folder xampp/htdocs/latihan_upload/
STEP 2 – DATABASE
Pada step ini, kita akan membuat databasenya. ikuti langkah-langkah berikut ini :
  1. Buat sebuah tabel dengan nama gambar. Struktur tabelnya sebagai berikut :struktur tabel gambar
  2. Buat sebuah database dengan nama latihan


STEP 3 – BUAT KONEKSI DATABASE

Pada step ini, kita akan membuat file koneksi.php yang berfungsi untuk menghubungkan dengan database MySQL.

Berikut ini kodenya :

STEP 4 – BUAT FORM UPLOAD 
Pada step ini, kita akan membuat sebuah file dengan nama form.php yang berfungsi sebagai tampilan form uploadnya.

Berikut ini tampilan dan kodenya :

STEP 5 – BUAT PROSES UPLOAD
Sekarang, kita akan membuat file upload.php yang berfungsi untuk memproses upload gambarnya.

Berikut ini kodenya :

Berikut penjelasan dari kode diatas :

$_FILES[‘gambar‘][‘name’]; 
Untuk mengambil nama file yang diupload.

 $_FILES[‘gambar‘][‘size’];
 Untuk mengambil ukuran file yang diupload dalam bytes.

$_FILES[‘gambar’][‘type’];
 Untuk mengambil tipe file yang diupload.

 $_FILES[‘gambar‘][‘tmp_name’]; 
Untuk mengambil url/path folder tempat penyimpanan sementara file yang diupload, sebelum dipindahkan ke folder images.

 NOTE : 
Pada kode diatas, terdapat tulisan gambar. tulisan tersebut harus sama dengan nama input type=”file” yang ada pada form (form.php).

 if($tipe_file == “image/jpeg” || $tipe_file == “image/png”){ 
Untuk mengecek apakah file/gambar yang diupload tipenya jpg atau png

if($ukuran_file <= 1000000){
 Untuk mengecek apakah file/gambar yang diupload ukurannya kurang dari sama dengan 1MB.
Pada kode tersebut saya menetapkan <= 100000, 100000 itu sama dengan 100000 bytes = 1MB.

move_uploaded_file($tmp_file, $path) 
kode inilah yang berfungsi untuk memindahkan gambar / file yang telah diupload dari folder tmp ke dalam folder di website kita (pada catatan ini kita upload gambarnya ke folder images).

 Struktur dasar penulisan kodenya adalah :

$query = “INSERT INTO gambar(nama,ukuran,tipe) VALUES(‘”.$nama_file.”‘,'”.$ukuran_file.”‘,'”.$tipe_file.”‘)”;

Query SQL untuk menyimpan data gambar(nama, ukuran, dan tipe gambar) ke dalam tabel gambar pada database latihan.

 STEP 6 – BUAT VIEW DATA 
Terakhir, kita akan membuat file index.php yang berfungsi untuk menampilkan data gambar(nama, ukuran, dan tipe gambar) dari database ke halaman website kita. Berikut ini tampilan dan kodenya :

Berikut penjelasan dari kode diatas :

$sql = mysqli_query($connect, $query);

Untuk mengeksekusi / menjalankan query sql.
struktur dasar penulisannya adalah sebagai berikut :

mysqli_num_rows($sql);

 Untuk mengambil jumlah data dari hasil eksekusi suatu query sql.
Struktur dasar penulisannya adalah sebagai berikut :

mysqli_fetch_array($sql); 

Untuk mengambil data dari hasil eksekusi suatu query sql.
Struktur dasar penulisannya adalah sebagai berikut :

Kode diatas saya simpan didalam looping while berfungsi untuk melakukan proses perulangan sampai data terkahir dengan tujuan agar kita bisa menampilkan datanya satu per satu.


 Pada kode diatas terdapat variabel $data digunakan untuk mengambil isi dari field-field yang ada
pada tabel gambar di database latihan.

Pada kode diatas juga ada kode yang saya beri warna merah, kode tersebut harus sama dengan nama field yang ada pada tabel gambar.

DEMO DI HOSTINGER :

Akhirnya selesai juga.

Sekian untuk catatan kali ini.
Semoga catatan ini bisa bermanfaat.

Terimakasih.

0 komentar:

Posting Komentar

Kirim ke Dinding Google Plus

TULIS COMENTAR ANDA DISINI

Islam Agamaku

KOSONG

Big Cat Gallery

Baca Al-Qur'an

















Catalog: Full Screen