Tutorial Membuat Fungsi Upload Gambar / Foto Menggunakan Codeigniter 3 dan MySQL – Hallo teman–teman apa kabar? mudah-mudahan selalu diberikan kesehatan ya. Pada tutorial kali ini kita akan belajar tentang bagaimana cara UPLOAD Gambar menggunakan CodeIgniter 3. Sebelum membahas tentang bagaimana cara membuat Fungsi Upload tersebut. Pertama-tama kita akan menjelaskan terlebih dahulu tentang pentingnya fitur ini pada Website atau sistem kita?
Fitur Upload Gambar merupakan salah satu fitur yang penting dalam pembuatan Aplikasi Berbasis Website. Fitur ini sering kita gunakan untuk menambahkan atau mengupload suatu file ke dalam server yang dimiliki oleh sistem kita. Penerapan dari fitur ini sering kita liat pada kehidupan kita sehari-hari. Salah satunya yaitu aplikasi media sosial seperti Facebook yang memungkinkan kita untuk melakukan upload gambar atau dokumen melalui sistem yang kita miliki.
Baca Juga: Membuat CRUD (Create, Read, Update, Delete) Dengan PHP Dasar – Menampilkan Data Dari Database
Jadi pada tutorial kali ini kita akan membahas tentang cara membuat Fungsi Upload Gambar menggunakan Codeigniter 3 dan Database MySQL. Seluruh data yang kita upload akan disimpan didalam database dan menampilkan data gambar kedalam website. Sebelum kita membahas tentang Tutorial Upload Gambar menggunakan Codeigniter 3. Pertama – tama kita harus menyiapkan terlebih dahulu File Framework Codeigniter 3 yang akan kita gunakan. Kita dapat mendownload File Framework Codeigniter 3 pada link berikut www.codeigniter.com.
Persiapan Konfigurasi Dasar Codeigniter 3
Sebelum memulai proses pembuatan sistem, pertama-tama kita harus mempersiapkan database dan tabel yang akan kita gunakan. Adapun nama dari database kita yaitu crud sedangkan nama dari tabel kita yaitu tb_user yang berisikan kolom informasi Data Login User. Jadi langkah-langkah yang harus kita siapkan terlebih dahulu adalah :
- Membuat Database dengan nama crud
- Membuat sebuah tabel dengan nama tb_user yang berisikan kolom (username, password, nama, jurusan, gambar dan status)
Teman-teman juga dapat menggunakan sintak SQL dibawah ini untuk proses pembuatan tabel dan database yang digunakan. Berikut ini saya juga akan sertakan file sql yang bisa teman-teman langsung import pada database. Cara untuk melakukan import database tersebut pertama-tama kita buat dulu nama database. Lalu pilih menu import dan upload file .sql dibawah ini. Tetapi teman-teman juga dapat melakukan Copy Paste sintak sql berikut ini pada kolom editing Query database teman-teman.
-- phpMyAdmin SQL Dump
-- version 4.8.2
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Mar 24, 2022 at 06:07 PM
-- Server version: 10.1.34-MariaDB
-- PHP Version: 5.6.37
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: `crud`
--
-- --------------------------------------------------------
--
-- Table structure for table `tb_user`
--
CREATE TABLE `tb_user` (
`username` varchar(250) NOT NULL,
`password` varchar(250) NOT NULL,
`nama` varchar(250) NOT NULL,
`jurusan` varchar(250) NOT NULL,
`gambar` varchar(2000) NOT NULL,
`status` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tb_user`
--
INSERT INTO `tb_user` (`username`, `password`, `nama`, `jurusan`, `gambar`, `status`) VALUES
('1001', 'Rahasia', 'Kecoak Sakti Official', 'Teknik Informatika', 'http://localhost/ci_upload/upload/1_logoku.png', 'Aktif');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tb_user`
--
ALTER TABLE `tb_user`
ADD PRIMARY KEY (`username`);
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 */;
Jika teman-teman baru saja melakukan proses pembuatan Codeigniter 3. Disini kita harus melakukan konfigurasi awal terhadap framework Codeigniter kita.
Baca Juga: Cara Melakukan Instalasi Codeigniter 3
Pertama – tama kita harus mengaktifkan library url pada file autoload.php Codeigniter di application/config/autoload.php.
$autoload['helper'] = array('url');
Selanjutnya kita masukkan url dari project yang kita buat pada file config.php di application/config/config.php. Disini kita hanya perlu melakukan copy paste terhadap link yang digunakan untuk mengakses project kita.
$config['base_url'] = 'http://localhost/ci_upload/';
Setelah itu kita hilangkan kata index.php seperti sintak dibawah ini. Pengaturan ini berada pada file config.php di application/config/config.php.
$config['index_page'] = '';
Selanjutnya kita buat sebuah file baru dengan nama .htaccess. File ini diletakkan pada folder terluar dari project kita ini.
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
Tahapan selanjutnya kita harus melakukan konfigurasi fungsi database pada Codeigniter 3 kita. Secara default CodeIgniter belum mengaktifkan fungsi agar kita dapat terhubung dengan database kita. jadi pertama-tama kita harus melakukan aktivasi agar CodeIgniter kita dapat mengakses database yang kita buat.
Terlebih dahulu aktifkan dulu library database pada file autoload.php Codeigniter di application/config/autoload.php.
$autoload['libraries'] = array('database');
Selanjutnya sesuaikan pengaturan database kita pada file database.php CodeIgniter di application/config/database.php. Sesuaikan dengan informasi database yang kita gunakan.
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'crud',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);
Jika proses tahapan diatas sudah selesai dilakukan. Selanjutnya kita buat sebuah file baru dengan nama M_User.php yang diletakkan pada folder model di application/models/M_User.php. File ini berisikan query yang digunakan untuk mengakses database kita. Setelah itu buatlah method atau function dengan nama getDataUser() yang berfungsi untuk menampilkan seluruh data tb_user dan function insertDataUser() yang berisikan fungsi untuk melakukan insert data kedalam database.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class M_User extends CI_Model {
function getDataUser() {
$query = $this->db->get('tb_user');
return $query->result();
}
function insertDataUser($data) {
$this->db->insert('tb_user', $data);
}
}
/* End of file M_User.php */
/* Location: ./application/models/M_User.php */
Setelah itu, kita buka folder controller dari project kita. Ketika pertama kali melakukan instalasi Project Codeigniter kita sudah memiliki sebuah file controller dengan nama Welcome.php di application/controllers/welcome.php. Jadi pada project kali ini kita hanya menggunakan Controller yang sudah tersedia ini.
Selanjutnya kita tambahkan sebuah function dengan nama __construct() yang berfungsi untuk memanggil File atau Class model yang telah kita buat sebelumnya yaitu M_user. Lalu kita ubah method index() menjadi seperti sintak dibawah ini.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('M_User');
}
public function index()
{
$queryUser = $this->M_User->getDataUser();
$DATA = array("queryUser" => $queryUser);
$this->load->view('hal_home', $DATA);
}
}
Sekarang kita buat sebuah file baru dengan nama hal_home.php yang diletakkan pada folder View di application/views/hal_home.php. Halaman ini berisikan tampilan tabel dari seluruh data user pada database.
<!DOCTYPE html>
<html>
<head>
<title>Upload File Image Dengan CodeIgniter 3</title>
</head>
<body style="width: 800px; margin: auto; padding: 10px;">
<h2 style="text-align: center;">Tabel Data User</h2>
<button onclick="document.location='<?= base_url('welcome/hal_tambah') ?>'">Tambah Data</button>
<br /><br />
<table border="1" style="width: 100%; border-collapse: collapse;">
<thead>
<tr>
<th style="width: 30px">No</th>
<th style="width: 100px">Username</th>
<th>Nama</th>
<th style="width: 100px">Jurusan</th>
<th style="width: 100px">Foto</th>
</tr>
</thead>
<tbody style="text-align: center;">
<?php if (empty($queryUser)): ?>
<tr>
<td colspan="5">Data Tidak Tersedia</td>
</tr>
<?php else: ?>
<?php $nomor_urut = 0; ?>
<?php foreach ($queryUser as $row): ?>
<?php $nomor_urut++; ?>
<tr>
<td><?php echo $nomor_urut; ?></td>
<td><?php echo $row->username; ?></td>
<td><?php echo $row->nama; ?></td>
<td><?php echo $row->jurusan; ?></td>
<td><img style="width: 200px" src="<?php echo $row->gambar; ?>"></td>
</tr>
<?php endforeach ?>
<?php endif ?>
</tbody>
</table>
</body>
</html>
Sekarang jika kita coba jalankan project ini maka tampilan dari halaman home atau hal_home.php akan seperti gambar dibawah ini.
Disini Kebetulan kita sudah memiliki 1 buah data. Sehingga tampilannya akan seperti gambar diatas. Pada halaman ini menampilkan informasi seperti Username, Nama, Jurusan dan Foto dari database kita.
Sekarang coba perhatikan pada file hal_home.php. Disini kita sudah membuat sebuah button / tombol dengan nama “Tambah Data” yang digunakan untuk mengarahkan kita ke halaman upload yaitu hal_tambah.php.
<button onclick="document.location='<?= base_url('welcome/hal_tambah') ?>'">Tambah Data</button>
Sekarang kita buat sebuah file PHP baru dengan nama hal_tambah.php. File ini berisikan form untuk input dan upload file.
<!DOCTYPE html>
<html>
<head>
<title>Upload File Image Dengan CodeIgniter 3</title>
</head>
<body style="width: 800px; margin: auto; padding: 10px;">
<h2 style="text-align: center;">Form Upload File (PDF)</h2>
<hr>
<form action="<?= base_url('welcome/fungsiUploadGambar') ?>" method="post" enctype="multipart/form-data">
<b>Username :</b>
<input type="text" name="username" value="" placeholder=""><br /><br />
<b>Password :</b>
<input type="password" name="password" value="" placeholder=""><br /><br />
<b>Nama :</b>
<input type="text" name="nama" value="" placeholder=""><br /><br />
<b>Jurusan :</b>
<input type="text" name="jurusan" value="" placeholder=""><br /><br />
<b>Status :</b>
<input type="radio" name="status" value="Aktif">
<label for="html">Aktif</label>
<input type="radio" name="status" value="Non Aktif">
<label for="css">Non Aktif</label><br><br />
<b>Upload File :</b>
<input type="file" name="gambar" accept="image/*">
<button type="submit">Upload File</button>
</form>
<hr>
</body>
</html>
Coba perhatikan pada sintak diatas, kita menggunakan method POST untuk mengirim data dari form kita. Data tersebut dikirim ke function atau method dari Controller kita yaitu fungsiUploadGambar() untuk memproses dan menyimpan data tersebut kedalam database.
<form action="<?= base_url('welcome/fungsiUploadGambar') ?>" method="post" enctype="multipart/form-data">
Pada sintak diatas, elemen yang perlu diperhatikan adalah atribut enctype. Atribut ini berfungsi untuk memberikan instruksi pada PHP bahwa form ini berupa form untuk mengupload file. Jadi jika kita ingin mengupload file, kita harus menambahkan atribut enctype pada form action kita.
Sekarang kita buka kembali file Controller Welcome.php kita di application/controllers/welcome.php. lalu kita tambahkan method atau function baru dengan nama hal_tambah() yang berfungsi untuk memanggil halaman view hal_tambah.php. Dan kita buat juga function atau method dengan nama fungsiUploadGambar() yang berfungsi untuk memproses inputan dari form input kita.
public function hal_tambah()
{
$this->load->view('hal_tambah');
}
public function fungsiUploadGambar()
{
$username = $this->input->post('username');
$password = $this->input->post('password');
$nama = $this->input->post('nama');
$base64Gambar = $_FILES["gambar"]["tmp_name"];
$jurusan = $this->input->post('jurusan');
$status = $this->input->post('status');
$Path = "upload/";
$ImagePath = $Path . $username. "_logoku.png";
move_uploaded_file($base64Gambar, $ImagePath);
$dataArr = array(
'username' => $username,
'password' => $password,
'nama' => $nama,
'jurusan' => $jurusan,
'status' => $status,
'gambar' => base_url() . $ImagePath,
);
echo "<pre>";
print_r ($dataArr);
echo "</pre>";
$this->M_User->insertDataUser($dataArr);
redirect(base_url(), 'refresh');
}
Coba perhatikan sintak pada Function fungsiUploadGambar() berikut ini. terdapat beberapa sintak yang digunakan untuk mengupload gambar dan memindahkan kedalam folder server.
$Path = "upload/"; $ImagePath = $Path . $username. "_logoku.png"; move_uploaded_file($base64Gambar, $ImagePath);
Sebelum melakukan upload file atau gambar melalui website kita. Pertama – tama kita buat terlebih dahulu sebuah folder untuk meletakkan gambar atau file yang kita upload. Pada project ini nama folder untuk menyimpan atau meletakkan file atau gambar tersebut adalah folder upload.
Sekarang jika kita coba jalankan project ini maka tampilan dari halaman tambah atau hal_tambah.php akan seperti gambar dibawah ini.
Jika teman-teman sudah mengikuti semua langkah-langkah diatas maka selesai sudah proses pembuatan fungsi Upload Foto ke dalam database menggunakan Codeigniter 3 ini. Kemudian kita jalankan project ini pada Browser kita dengan mengakses halaman localhost dan panggil folder project kita
http://localhost/ci_upload/
Disini contohnya nama project saya yaitu ci_upload. Jadi kita panggil saja nama project kita pada browser kita. Setelah itu akan muncul hasil seperti berikut ini.
Dari gambar diatas dapat kita lihat bahwa kita sudah memiliki sebuah data. Selanjutnya kita klik tombol Tambah data maka kita akan diarahkan ke halaman tambah yaitu hal_tambah.php.
Disini kita coba menambahkan sebuah data baru seperti gambar diatas. Dan jangan lupa kita upload juga file gambar yang kita inginkan melalui form tersebut. Jika button Upload file di tekan dan proses upload/input data berhasil maka kita akan diarahkan ke halaman hal_home.php.
Jika proses inputan berhasil maka data baru akan ditambahkan kedalam database dan akan muncul seperti gambar diatas ini.
Sekian tutorial Cara Membuat Fungsi Upload Upload Gambar pada WEBSITE menggunakan Codeigniter 3 dan Database MySQL. Untuk Project lengkapnya dapat didownload pada link ((GITHUB)) kami ini.
