Upload File Menggunakan PHP dan MySQLi
Upload File Menggunakan PHP dan MySQLi – Hallo selamat datang di tutorial lengkap PHP dari malasngoding.com, pada materi kali ini kita akan coba membahas cara upload file menggunakan php dan mysqli.
Materi ini sebenarnya sudah pernah di bahas di seri php dan mysql dengan judul membuat upload file dengan php dan mysql. Oleh karena sekarang sudah menggunakan mysqli kami mecoba membantu sobat untuk mengupgrade kembali materi cara upload file menggunakan php dan mysqli.
Upload File Menggunakan PHP dan MySQLi
Upload file merupakan salah satu materi yang harus dikuasai dan sangat penting dalam materi belajar pemrograman khusunya web. Dikarenakan ada kalanya dalam membuat sebuah program kita perlu upload file baik berupa foto, document dan sebagainya. Contohnya saja pada foto profil, untuk foto didalam profil kita harus upload file foto terlebih dahulu.
Oke langsung ke materi pokok, ikut langkah-langkah berikut :
Siapkan Database
Langkah pertama yang harus ada dalam upload file yaitu database (tempat nama file nya nanti disimpan). Disini saya sudah memiliki database dengan nama tutorial, dan saya akan mengimplementasikan contoh aupload file berupa foto yang ada pada tabel user. Untuk struktur databasenya bisa dilihat di gambar berikut :
Struktur Database
Atau silahkan import tutorial.sql berikut di phpmyadmin :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
-- phpMyAdmin SQL Dump -- version 5.0.1 -- https://www.phpmyadmin.net/ -- -- Host: 127.0.0.1 -- Waktu pembuatan: 21 Apr 2020 pada 09.46 -- Versi server: 10.4.11-MariaDB -- Versi PHP: 7.4.1 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `tutorial` -- -- -------------------------------------------------------- -- -- Struktur dari tabel `user` -- CREATE TABLE `user` ( `user_id` int(11) NOT NULL, `user_nama` varchar(100) NOT NULL, `user_kontak` varchar(15) NOT NULL, `user_alamat` varchar(255) NOT NULL, `user_foto` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; -- -- Indexes for dumped tables -- -- -- Indeks untuk tabel `user` -- ALTER TABLE `user` ADD PRIMARY KEY (`user_id`); -- -- AUTO_INCREMENT untuk tabel yang dibuang -- -- -- AUTO_INCREMENT untuk tabel `user` -- ALTER TABLE `user` MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; |
Koneksi Databse dengan PHP
Setelah langkah pembuatan database sudah selesai, langkah selanjutnya yaitu membuat koneksi antara database dan php. Disini saya kasi nama filenya koneksi.php
|
1 2 3 4 5 |
<?php // www.malasngoding.compact // file penghubung antara database dengan php $koneksi = mysqli_connect("localhost","root","","tutorial"); ?> |
Saya rasa disini tidak perlu saya jelaskan lebih detail bagaimana cara membuat koneksi, ini karena sudah kami bahas khusu di materi sebelumnya di sini.
Membuat Form Input File
Langkah yang ketiga yaitu membuat form input, form ini dimaksudkan untuk input file kedalam database. Pada input file ini saya kasi nama user_tambah.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <title>www.malasngoding.com - Upload file menggunakan php mysqli</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2 style="text-align: center;">Tambah Data Pegawai</h2> <form action="user_act.php" method="post" enctype="multipart/form-data"> <div class="form-group"> <label>Nama :</label> <input type="text" class="form-control" placeholder="Masukkan Nama" name="nama" required="required"> </div> <div class="form-group"> <label>Kontak :</label> <input type="number" class="form-control" placeholder="Masukkan Kontak" name="kontak" required="required"> </div> <div class="form-group"> <label>Alamat :</label> <textarea class="form-control" name="alamat" required="required"></textarea> </div> <div class="form-group"> <label>Foto :</label> <input type="file" name="foto" required="required"> <p style="color: red">Ekstensi yang diperbolehkan .png | .jpg | .jpeg | .gif</p> </div> <input type="submit" name="" value="Simpan" class="btn btn-primary"> </form> </div> </body> </html> |
Dalam membuat form ini saya menggunakan librabry bostrap 4 supaya tampilan sedikit lebih bagus hehe. Pada baris ke 12, tapetnya pada <form> saya menggunakan file dengan nama user_act.php dengan method post dalam mengirim data. Ekstensi gambar yang diperbolehkan yaitu png, jpg, jpeg, dan gif, bisa sobat lihat pada baris ke 28.
|
1 |
<form action="user_act.php" method="post" enctype="multipart/form-data"> |
Potongan dari perintah pada baris ke 12 ini bisa dilihat ada satu fungsi enctype adalah atribut yang berperan dalam menentukan bagaimana data form dikirim ke server dan tipe form terseut.
Membuat Aksi Inputan File
Langkah ke 4 kita akan membuat sebuah file aksi untuk memproses inputan gambar, disini saya kasi nama user_act.php . File ini nantinya berisikan perintah untuk memproses data yang kita input dari form masuk kedatabase. Untuk perintahnya silahkan dilihat di code berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php include 'koneksi.php'; $nama = $_POST['nama']; $kontak = $_POST['kontak']; $alamat = $_POST['alamat']; $rand = rand(); $ekstensi = array('png','jpg','jpeg','gif'); $filename = $_FILES['foto']['name']; $ukuran = $_FILES['foto']['size']; $ext = pathinfo($filename, PATHINFO_EXTENSION); if(!in_array($ext,$ekstensi) ) { header("location:index.php?alert=gagal_ekstensi"); }else{ if($ukuran < 1044070){ $xx = $rand.'_'.$filename; move_uploaded_file($_FILES['foto']['tmp_name'], 'gambar/'.$rand.'_'.$filename); mysqli_query($koneksi, "INSERT INTO user VALUES(NULL,'$nama','$kontak','$alamat','$xx')"); header("location:index.php?alert=berhasil"); }else{ header("location:index.php?alert=gagak_ukuran"); } } |
Dari potongan kode diatas merupakan file aksi dari form yang sebelumnya kita buat. Pertama-tama kita harus menginclude dahulu file koneksi.php yang menghubungkan database dengan sistem yang dibuat menggunakan PHP. Sedangkan baris ke 3 sampai 5 itu berfungsi untuk menangkap data yang dikirim menggunakan method post dari form sebelumnya.
|
1 2 3 4 5 |
$rand = rand(); $ekstensi = array('png','jpg','jpeg','gif'); $filename = $_FILES['foto']['name']; $ukuran = $_FILES['foto']['size']; $ext = pathinfo($filename, PATHINFO_EXTENSION); |
Perhatikan kode diatas, fungsi rand() disini untuk merandom nomor. Fungsinya disini untuk memberikan nomor random untuk nama file gambar supaya ketika ada gambar dengan nama bisa dibedakan dari angka random ketika diinput nantianya. Misalnya profil_saya.png ketika 001298_profil_saya.png.
Sedangkan variabel $ekstensi disini saya menyimpan ekstensi yang diperbolehkan ketika mengupload file. Seperti yang sudah saya bilang sebelumnyaa kita memerlukan ekstensi yang diperbolehkan ketika upload file.
$filename adalah variabel yang menyimpan nama file yang sudah di input sebelumnya. Sedangkan $ext adalah variabel yang disini kita akan mengecek ekstensi yang yang di upload.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
if(!in_array($ext,$ekstensi) ) { header("location:index.php?alert=gagal_ekstensi"); }else{ if($ukuran < 1044070){ $xx = $rand.'_'.$filename; move_uploaded_file($_FILES['foto']['tmp_name'], 'gambar/'.$rand.'_'.$filename); mysqli_query($koneksi, "INSERT INTO user VALUES(NULL,'$nama','$kontak','$alamat','$xx')"); header("location:index.php?alert=berhasil"); }else{ header("location:index.php?alert=gagak_ukuran"); } } |
Di baris ke 13, seperti code diatas yaitu kita cek dahulu ekstensi yang diperbolehkan dan ekstensi file yang kita upload. Untuk mengeceknya disini kita menggunakan fungsi in_array, !in_array disini maksudnya jika nilai ekstensi yang diperbolehkan dan ekstensi gambar tidak sama maka akan dialihkan ke halaman index.php dengan peringatan gagal ekstensi.
Sedangkan jika ekstensi file yang diinput termasuk kedalam dalam ekstensi yang diperbolehkan maka akan disimpan di dalam database. $xx = $rand.’_’.$filename adalah variabel yang menyimpan nama file yang disimpan dan disisipkan angka random sebelum nama file.
move_uploaded_file adalah fungsi php untuk upload file, disini kita akan mengupload file foto kedalam folder gambar diikuti dengan nama file yang sudah dirandom.
Untuk tampilan form upload dapat dilihat pada gambar berikut :
Tampilan form upload
Menampilkan Hasil Inputan
Oke yang terakhir kita akan menampilkan hasil dari form yang kita inputkan sebelumnya. Disini nama filenya index.php untuk codenya bisa dilihat seperti berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<?php include 'koneksi.php'; ?> <!DOCTYPE html> <html> <head> <title>www.malasngoding.com - Upload file menggunakan php mysqli</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2 style="text-align: center;">Data Data User</h2> <br> <?php if(isset($_GET['alert'])){ if($_GET['alert']=='gagal_ekstensi'){ ?> <div class="alert alert-warning alert-dismissible"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <h4><i class="icon fa fa-warning"></i> Peringatan !</h4> Ekstensi Tidak Diperbolehkan </div> <?php }elseif($_GET['alert']=="gagal_ukuran"){ ?> <div class="alert alert-warning alert-dismissible"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <h4><i class="icon fa fa-check"></i> Peringatan !</h4> Ukuran File terlalu Besar </div> <?php }elseif($_GET['alert']=="berhasil"){ ?> <div class="alert alert-success alert-dismissible"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <h4><i class="icon fa fa-check"></i> Success</h4> Berhasil Disimpan </div> <?php } } ?> <br> <a href="user_tambah.php" class="btn btn-info btn-sm">Tambah Data</a> <br> <br> <table class="table table-bordered"> <tr> <th width="20%">Nama</th> <th width="20%">Kontak</th> <th width="40%">Alamat</th> <th width="20%">Foto</th> </tr> <?php $data = mysqli_query($koneksi,"select * from user"); while($d = mysqli_fetch_array($data)){ ?> <tr> <td><?php echo $d['user_nama']; ?></td> <td><?php echo $d['user_kontak']; ?></td> <td><?php echo $d['user_alamat']; ?></td> <td><img src="gambar/<?php echo $d['user_foto'] ?>" width="35" height="40"></td> </tr> <?php } ?> </table> </div> </body> </html> |
Untuk code ini saya rasa tidak perlu dijelaskan lebih sudah pernah kita bahas sebelumnya di tutorial menampilkan data php dan mysqli. Berikut adalah tampilan dari hasil codingan diatas :
Upload File Menggunakan PHP dan MySQLi
Sekian dulu materi kali ini Upload File Menggunakan PHP dan MySQLi, untuk sobat yang mau mendownload source code bisa di link berikut :
Tutorial Menarik Lainnya
Membuat Form Login Dengan PHP Tanpa Database
Menghitung Selisih Waktu Dengan PHP
Membuat CRUD menggunakan Ajax PHP – Hapus Data
Membuat CRUD menggunakan Ajax PHP – Input Data
Bang kalau file upload nya lebih dari 1 gimana bang? jadi file itu mau di masukin ke dalam database yang berbeda kolom nya.
contoh :
saya ingin upload 3 file ke dalam 1 table database dengan atribut nama, file1,file2,file3.
jadi gimana caranya agar file bisa masuk ke masing2 nama atribut tersebut ?
[…] Upload File Menggunakan PHP dan MySQLi […]
🙂 kak rekuest upload foto beserta resize tapi gak gepeng gambarnya. Rasionya tetep sama dunk.
Pas ditampilin digrid gak memaksa seukuran grid gambarnya. Mksh ka
kak, buat tutorial untuk reportnya dong, yg bisa nyetak gambarnya juga
Bang, klo upload file pdf gmn bang ?
saya ada pertanyaan, saya sudah mengikuti seluruh step di atas. tapi ketika saya tes
terjadi kesalahan pada bagian ekstensi ( gagal ekstensi) pada setiap file yang saya upload
padahal saya sudah buat ekstensinya sesuai dengan file yang akan saya upload.
itu bagaimana solusinya ?
Kalau mau uploud file berupa mp3/audio bagian mana yang dirubah?