Selamat pagi semuanya, pada kesempatan kali ini saya akan share tentang cara membuat upload image dan menyimpan namanya di dalam database sehingga nanti proses pengambilan datanya mudah.
Buat kalian yang masih bingung, kita akan buat apa silakan lihat screen shoot dibawah ini:
oke langsung saja silakan kalian ikuti tutorialnya:
1# Siapkan file codeigniternya dan silakan copy ke folder htdocs kalian masing-masing.
2# Di dalam folder codeigniter tersebut (root folder) buatlah folder bernama "uploads". contohnya seperti screenshoot dibawah ini.
3# Sekarang kalian silakan masukkan framework css nya, pada tutorial ini saya menggunakan materialize. Tidak harus terpaku dengan punya kalian, bagi kalian yang ingin memakai CSS sendiri enggak apa-apa.
4# Setting CodeIgniternya seperti autoload, config, dan database. Saya anggap kalian sudah mengerti karena tutorial ini sudah tingkat lanjut bukan di tingkat dasar. Kalau kalian belum paham silakan pelajari cara instalasi CodeIgniter.
5# Buat database bebas, pada tutorial ini nama database saya balidev dan nama tabelnya upload. Untuk setting fieldnya silakan lihan di gambar bawah ini.
6# Langkah selanjutnya buka folder controllers dan buatlah file dengan nama upload.php, sintaksnya seperti dibawah ini:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class upload extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('mupload');
$this->load->library('form_validation');
}
public function index()
{
$this->load->view('vupload');
}
public function list(){
$result['gambar'] = $this->mupload->tampil();
$this->load->view('vimage', $result);
}
public function upload(){
//berfungsi saat submit ditekan namun file kosong supaya tidak masuk ke database
if (empty($_FILES['imgName']['name']))
{
$this->form_validation->set_rules('imgName', 'Document', 'required');
redirect(base_url());
}
else{
$this->load->library('upload');
$namafile = "file_".time();
//konfigurasi ukuran dan type yang bisa di upload
$config = array(
'upload_path' => "./uploads/", //mengatur lokasi penyimpanan gambar
'allowed_types' => "gif|jpg|png|jpeg|pdf", // mengatur type yang boleh disimpan
'overwrite' => TRUE,
'max_size' => "2048000",//maksimal ukuran file yang bisa diupload, disini menggunankan 2MB
'max_height' => "768",
'max_width' => "1024",
'file_name' => $namafile //nama file yang akan terimpan nanti
);
$this->upload->initialize($config);
if($_FILES['imgName']['name']){
if($this->upload->do_upload('imgName')){
$gambar = $this->upload->data();
//data yang akan di insert ke database
$data = array(
'nama' => $gambar['file_name'],
'type' => $gambar['file_type']
);
$result = $this->mupload->insert($data);
if($result != FALSE){
$pesan['pesan'] = "Gambar Berhasil di upload";
$this->load->view('vupload', $pesan);
}
}
}
}
}
}
/* End of file upload.php */
/* Location: ./application/controllers/upload.php */
Sudah saya kasi komentar pada code-codenya silakan baca pelan-pelan.
7# Pada langkah ini buka folder models dan buatlah file dengan nama mupload.php dan sintaksnya seperti dibawah ini :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Mupload extends CI_Model {
public $variable;
public function __construct()
{
parent::__construct();
}
public function insert($data){
//memasukkan data gambar ke database
$this->db->insert('upload', $data);
if ($this->db->affected_rows() > 0) {
return true;
}else{
return false;
}
}
public function tampil(){
//mengambil data gambar di database, nanti kita cuma mengambil namanya saja
$this->db->select('*');
$this->db->from('upload');
$query = $this->db->get();
if($query->num_rows()>0){
return $query->result();
}else{
$pesan = "Tidak ditemukan gambar";
return $pesan;
}
}
}
/* End of file mupload.php */
/* Location: ./application/models/mupload.php */
8# Langkah selanjutnya kita akan buatkan form untuk upload filenya pada views. Silakan buka folder views dan buatlah file dengan nama vupload.php. Sintaksnya seperti dibawah ini:
Disini yang perlu kalian perhatikan adalah type dan name nya supaya mudah nanti kita mengambilnya pada controller.
<!DOCTYPE html>
<html>
<head>
<title>Upload Image by BaliDev</title>
<!--Materialize css dan javascript -->
<link href="<?php echo base_url();?>/assets/materialize/css/materialize.min.css" rel="stylesheet">
<link href="<?php echo base_url();?>/assets/materialize/css/materialize.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
</head>
<body>
<!--Navbar Materialize -->
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">BaliDev</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="<?php echo site_url('upload/list')?>">Lihat</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row" style="margin-top: 120px">
<div class="col s12 m8 offset-m2 l6 offset-l3">
<div class="card-panel">
<?php if(isset($pesan)){
echo "<h5>$pesan</h5>";
}?>
<div class="row valign-wrapper">
<div class="col s12">
<?php
echo form_open_multipart('upload/upload');?>
<div class='file-field input-field'>
<div class="btn orange">
<span>FILE</span>
<input type="file" name="imgName">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" name="imgName">
</div>
</br>
</div>
<div class="row center-align">
<input type="submit" value="submit" class="btn orange">
</div>
<?php form_close(); ?>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
9# Jika proses inputnya sudah selesai, sekarang kita akan membuat tampilan semua gambar yang sudah kita input. Masih di folder views dan buatlah file dengan nama vimage.php. Sintaksnya seperti dibawah ini:
Pada sintaks diatas yang perlu kalian pahami adalah pada sintaks foreach dan img nya. Silakan liha bagaimana saya menampilkan gambar tersebut pada url img nya. Untuk tampilannya bisa kalian custom sendiri.
<!DOCTYPE html>
<html>
<head>
<title>List Gambar</title>
<!--Materialize css dan javascript -->
<link href="<?php echo base_url();?>/assets/materialize/css/materialize.min.css" rel="stylesheet">
<link href="<?php echo base_url();?>/assets/materialize/css/materialize.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
</head>
<body>
<!--Navbar Materialize -->
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">BaliDev</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="<?php echo site_url()?>">Upload Gambar</a></li>
</ul>
</div>
</nav>
<!-- semua thumbnail gambar dari database ditampilkan -->
<div class="container">
<div class="row">
<?php
foreach ($gambar as $gmbr) {
echo "<div class='col s3'>";
echo "<div class='card'>";
echo "<div class='card-image'>";
echo img('http://localhost/uploadImage/uploads/'.$gmbr->nama);
echo "</div>";
echo "</div>";
echo "</div>";
}
?>
</div>
</div>
</body>
</html>
Bagi kalian yang ingin mencoba langsung silakan download dibawah ini:
Download DownloadDownload
Sekian tutorialnya, semoga bermanfaat buat kalian semua.
Jangan lupa, baca artikel lainnya:
