Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

Home / codeigniter

Crud Codeigniter 4 Dengan Upload Image Blog Berita Artikel

By Sinauo Post a Comment

Cara membuat CRUD Codeigniter yang dilengkapi dengan gambar maupun photo. CRUD merupakan suatu hal yang perlu dipelajari saat kita membuat sebuah aplikasi dinamis, Maupun saat kita mengenal bahasa pemrograman baru yang terhubung dengan database. 


Baca Juga : Tutorial CRUD codeigniter 4 Untuk Pemula


Framework Codeigniter merupakan sebuah kerangka kerja PHP yang banyak di gunakan saat ini karena penggunaan yang mudah di pahami dan digunakan, selain itu codeigniter mempunyai banyak library helper yang lengkap.


Saat kita mengakses sebuah aplikasi web yang menghadirkan sebuah artikel maupun berita didalamnya biasanya terdapat sebuah foto maupun gambar yang dihadirkan sebagai pelengkap sebuah artikel maupun berita tersebut. Pada tutorial kali ini kita akan membuat sebuah CRUD untuk modul berita maupun Artikel agar kita lebih mudah dalam menginput, mengubah dan menghapus sebuah berita maupun artikel yang terhubung dengan database yang dilengkapi dengan upload gambar di codeigniter 4 dengan mudah.


Instalasi Codeigniter 4


Jika belum mengerti tentang installasi codeigniter 4 silahkan baca tutorial sebelumnya : Cara Install Codeigniter 4


Membuat Database


Mari kita buat databse dengan nama blog dan juga 1 tabel dengan nama artikel seperti struktur tabel berikut ini :



Jika belum paham dengan pembuatan database mysql silahkan baca : Cara memebuat database mysql 


Membuat Koneksi Database


Untuk Membuat Koneksi database di codeigniter 4 ada dua cara yaitu cara pertama dengan merename file env menjadi .env yang ada di folder root project atau dengan file Database.php yang ada di folder app/config dan admin menggunakan file .env

 database.default.hostname = localhost
 database.default.database = blog
 database.default.username = root
 database.default.password = 
 database.default.DBDriver = MySQLi

Cari kode diatas kemudian edit hilangkan tanda pagarnya (#) lalu sesuaikan dengan host,username,password dan nama database kalian kemudian simpan jangan lupa juga ubah juga CI_ENVIRONMENT = development 

Membuat Controller


Buat file controller baru dengan nama Blog.php simpan di folder app/controllers kemudian masukan kode berikut ini 


<?php namespace App\Controllers;
 
use CodeIgniter\Controller;
use App\Models\ModelsBlog;
 
class Blog extends BaseController
{
    public function index()
    {
        $model = new ModelsBlog();
        if (!$this->validate([]))
        {
            $data['validation'] = $this->validator;
            $data['artikel'] = $model->getArtikel();
            return view('view_list',$data);
        }
    }

    public function form(){
        helper('form');
        return view('view_form');
    }

    public function view($id){
        $model = new ModelsBlog();
        $data['artikel'] = $model->PilihBlog($id)->getRow();
        return view('view',$data);
    }

    public function simpan(){
        $model = new ModelsBlog();
        if ($this->request->getMethod() !== 'post') {
            return redirect()->to('blog');
        }
        $validation = $this->validate([
            'file_upload' => 'uploaded[file_upload]|mime_in[file_upload,image/jpg,image/jpeg,image/gif,image/png]|max_size[file_upload,4096]'
        ]);
 
        if ($validation == FALSE) {
        $data = array(
            'judul'  => $this->request->getPost('judul'),
            'isi' => $this->request->getPost('isi')
        );
        } else {
            $upload = $this->request->getFile('file_upload');
            $upload->move(WRITEPATH . '../public/assets/images/');
        $data = array(
            'judul'  => $this->request->getPost('judul'),
            'isi' => $this->request->getPost('isi'),
            'gambar' => $upload->getName()
        );
        }
        $model->SimpanBlog($data);
        return redirect()->to('./blog')->with('berhasil', 'Data Berhasil di Simpan');
    }

    public function form_edit($id){
        $model = new ModelsBlog();
        helper('form');
        $data['artikel'] = $model->PilihBlog($id)->getRow();
        return view('form_edit',$data);
    }

    public function edit(){
        $model = new ModelsBlog();
        if ($this->request->getMethod() !== 'post') {
            return redirect()->to('blog');
        }
        $id = $this->request->getPost('id');
        $validation = $this->validate([
            'file_upload' => 'uploaded[file_upload]|mime_in[file_upload,image/jpg,image/jpeg,image/gif,image/png]|max_size[file_upload,4096]'
        ]);
 
        if ($validation == FALSE) {
        $data = array(
            'judul'  => $this->request->getPost('judul'),
            'isi' => $this->request->getPost('isi')
        );
        } else {
        $dt = $model->PilihBlog($id)->getRow();
        $gambar = $dt->gambar;
        $path = '../public/assets/images/';
        @unlink($path.$gambar);
            $upload = $this->request->getFile('file_upload');
            $upload->move(WRITEPATH . '../public/assets/images/');
        $data = array(
            'judul'  => $this->request->getPost('judul'),
            'isi' => $this->request->getPost('isi'),
            'gambar' => $upload->getName()
        );
        }
        $model->edit_data($id,$data);
        return redirect()->to('./blog')->with('berhasil', 'Data Berhasil di Ubah');
        
    }

    public function hapus($id){
        $model = new ModelsBlog();
        $dt = $model->PilihBlog($id)->getRow();
        $model->HapusBlog($id);
        $gambar = $dt->gambar;
        $path = '../public/assets/images/';
        @unlink($path.$gambar);
        return redirect()->to('./blog')->with('berhasil', 'Data Berhasil di Hapus');
    }

}

Jangan lupa untuk membuat folder assets dan images di dalam folder public sebagai tempat penyimpanan images/gambar yang kita upload.

Membuat Models


Buat file Model baru dengan nama ModelsBlog.php kemudian simpan di folder app/Models kemudian ketikan kode berikut ini 

<?php namespace App\Models;
use CodeIgniter\Model;
 
class ModelsBlog extends Model
{
    protected $table = 'artikel';
     
    public function getArtikel()
    {
        return $this->findAll();  
    }
    public function SimpanBlog($data)
    {
        $query = $this->db->table($this->table)->insert($data);
        return $query;
    }
    public function PilihBlog($id)
    {
         $query = $this->getWhere(['id' => $id]);
         return $query;
    }
    public function edit_data($id,$data)
    {
        $query = $this->db->table($this->table)->update($data, array('id' => $id));
        return $query;
    }
    public function HapusBlog($id)
    {
        $query = $this->db->table($this->table)->delete(array('id' => $id));
        return $query;
    }
 }


Membuat Views


Kali ini kita akan membuat empat file view yang digunakan untuk menampilkan daftar list, view data, form input data, dan form edit data. Silahkan ikuti petunjuk dibawah ini kemudian ketikan kode dibawahnya kemudian simpan di folde app/view


1. Buat New File view_list.php Untuk daftar list Artikel/berita/blog

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat CRUD Input Gambar</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
</head>
<body style="width: 70%; margin: 0 auto; padding-top: 30px;">
	<div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>CRUD BERITA ARTIKEL</h2>
            </div>
        </div>
    </div>
    <hr>
    <a href="/blog/form" class="btn btn-primary"><span class="fa fa-plus"></span> Input Artikel Baru</a>
    <hr>
            <?php if(!empty(session()->getFlashdata('berhasil'))){ ?>
                <div class="alert alert-success">
                    <?php echo session()->getFlashdata('berhasil');?>
                </div>
            <?php } ?>
            
            <?php 
                $errors = $validation->getErrors();
                if(!empty($errors))
                {
                    echo $validation->listErrors();
                }
            ?>
    <div class="row">
    	<div class="col-lg-12">
    		<div class="row">
                <table class="table table-bordered">
                <tr>
                    <th>No</th>
                    <th>Judul</th>
                    <th>Gambar</th>
                    <th>Aksi</th>
                </tr>
                    <?php foreach($artikel as $row):?>
                <tr>
                    <td><?=$row['id'];?></td>
                    <td><?=$row['judul'];?></td>
                    <td><?php
                        if (!empty($row["gambar"])) {
                            echo '<img src="'.base_url("assets/images/$row[gambar]").'" width="100">';
                        }
                    ?></td>
                    <td><a href="blog/view/<?=$row['id'];?>" class="btn btn-success">View</a> | <a href="blog/form_edit/<?=$row['id'];?>" class="btn btn-primary">Edit</a> | <a href="blog/hapus/<?=$row['id'];?>" class="btn btn-danger">Hapus</a> </td>
                </tr>
                <?php endforeach;?>
            </table>
    		</div>
    	</div>
    </div>
    
</body>
</html>
Maka tampilannya akan seperti berikut ini 




2. Buat New File view.php Untuk Melihat Detail Artikel/Berita/Blog


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat CRUD Input Gambar</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
</head>
<body style="width: 70%; margin: 0 auto; padding-top: 30px;">
	<div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2><?php echo $artikel->judul; ?></h2>
            </div>
        </div>
    </div>
    <hr>
    <div class="row">
    	<div class="col-lg-12">
    		<div class="row">
                <?php
                        if (!empty($artikel->gambar)) {
                            echo '<img src="'.base_url("assets/images/$artikel->gambar").'" width="30%">';
                        }
                ?>
                <?php echo $artikel->isi; ?>
    		</div>
    	</div>
    </div>
    
</body>
</html>

Maka tampilannya akan seperti berikut ini




3. Buat New File view_form.php Untuk Input Data

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat CRUD Input Gambar</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
    <script src="<?=base_url('assets/ckeditor/ckeditor.js');?>"></script>
</head>
<body style="width: 70%; margin: 0 auto; padding-top: 30px;">
	<div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>CRUD BERITA ARTIKEL </h2>
            </div>
        </div>
    </div>
    <hr>
    <?=form_open_multipart(base_url('blog/simpan'));?>
    <div class="row">
    	<div class="col-lg-12">
    		<div class="row">
    			<div class="col-md-12">
    				<label>Judul</label>
    				<div class="form-group">
                   		 <input type="text" name="judul" class="form-control"> 
                	</div>	
    			</div>
    			<div class="col-md-12">
    				<label>ISI BLOG</label>
    				<div class="form-group">
                   		 <textarea name="isi" id="editor1"></textarea>
                            <script>
                                CKEDITOR.replace( 'editor1' );
                            </script>
                	</div>	
    			</div>
                <div class="col-md-12">
                    <label>Photo</label>
                    <div class="form-group">
                         <input type="file" name="file_upload" class="form-control"> 
                    </div>  
                </div>
    			<div class="col-md-12">
    				<div class="form-group">
                   		  <button class="btn btn-primary">Simpan</button> 
                	</div>	
    			</div>
    		</div>
    	</div>
    </div>
    <?= form_close(); ?>
</body>
</html>

 Maka tampilannya akan seperti berikut ini



Dari tampilan form diatas terdapat text editor ckeditor jika belum tahu cara memasang text editor ckeditor silahkan baca artikel sebelumnya yaitu Cara Pasang Ckeditor di Codeigniter 4  


4. Buat New File form_edit.php Untuk Edit Data

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat CRUD Input Gambar</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
    <script src="<?=base_url('assets/ckeditor/ckeditor.js');?>"></script>
</head>
<body style="width: 70%; margin: 0 auto; padding-top: 30px;">
	<div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>CRUD BERITA ARTIKEL</h2>
            </div>
        </div>
    </div>
    <hr>
    <?=form_open_multipart(base_url('blog/edit'));?>
    <div class="row">
    	<div class="col-lg-12">
    		<div class="row">
    			<div class="col-md-12">
    				<label>Judul</label>
    				<div class="form-group">
                        <input type="hidden" name="id" class="form-control" value="<?=$artikel->id?>">
                   		 <input type="text" name="judul" class="form-control" value="<?=$artikel->judul?>"> 
                	</div>	
    			</div>
    			<div class="col-md-12">
    				<label>ISI BLOG</label>
    				<div class="form-group">
                   		 <textarea name="isi" id="editor1"><?=$artikel->isi?></textarea>
                            <script>
                                CKEDITOR.replace( 'editor1' );
                            </script>
                	</div>	
    			</div>
                <div class="col-md-12">
                    <label>Photo</label><br/>
                    <?php
                        if (!empty($artikel->gambar)) {
                            echo '<img src="'.base_url("assets/images/$artikel->gambar").'" width="150">';
                        }
                    ?>
                    <div class="form-group">
                         <input type="file" name="file_upload" class="form-control"> 
                    </div>  
                </div>
    			<div class="col-md-12">
    				<div class="form-group">
                   		  <button class="btn btn-primary">Simpan</button> 
                	</div>	
    			</div>
    		</div>
    	</div>
    </div>
    <?= form_close(); ?>
</body>
</html>


 Maka tampilannya akan seperti berikut ini


Hapus Data


Jika data berhasil dihapus maka tampilannya akan seperti berikut ini 



Kemudian buka komposer masuk ke folder root codeigniter 4 kemudian ketikan php spark serve lalu buka web broser dan ketikan alamat : http://localhost:8080/blog kemudian kita mencoba untuk menjalankannya jika berhasil maka akan tampil form tampilan-tampilan seperti diatas.

Kesimpulan 


Pada tutorial diatas kita sudah membuat sebuah aplikasi sederhana yaitu membuat fitur tambah, edit, hapus dan view atau sering di sebut dengan CRUD dengan menggunakan upload file atau image di codeigniter 4.
 
Codeigniter 4 merupakan kerangka kerja PHP yang banyak digunakan dikalangan para development Indonesia dalam membuat sebuah aplikasi website.

Semoga sedikit tutorial yang bisa admin sampaikan dapat menjadi inspirasi pembaca untuk mengembangkan sebuah aplikasi yang lebih kompleks.

Post a Comment for "Crud Codeigniter 4 Dengan Upload Image Blog Berita Artikel"