BackEnd website adalah bagian dari website yang digunakan untuk mengolah data dari content / isi dari sebuah website. Kali ini kita akan belajar membuat BackEnd website dari FrondEnd website yang sudah kita buat sebelumnya dengan studi kasus toko_online.

Untuk pembuatan FrontEnd website bisa dilihat pada tutorial berikut :
– CodeIgniter Untuk Membuat Website (bag1)
– CI CodeIgniter Untuk Membuat Website (bag2)
– MySQL Database koneksi dengan CodeIgniter

Langkah-langkah yang dilakukan :

1. Konfigurasi XAMPP
2. Konfigurasi Framework CodeIgniter (CI)
3. Konfigurasi template / tema
4. Konfigurasi MySQL Database
5. Pembuatan Controller
6. Pembuatan Model
7. Pembuatan View
8. Uji coba BackEnd website yang sudah dibuat

Mulai dengan dengan langkah awal :
1. Konfigurasi XAMPP

Download XAMPP untuk server menjalankan di local komputer terlebih dahulu.
– Link download klik Disini sesuaikan dengan OS (Operating System / Sistem Operasi yang ada di komputer. Contoh : Windows, MacOS, Linux.

Install XAMPP yang sudah didownload dan diinstall :

Pada modules Actions tekan tombol Start untuk menjalan servis XAMPP (XAMPP untuk Windows). Pada tab menu Manage Servers tekan tombol Start All untuk menjalankan semua servis XAMPP (XAMPP untuk MacOS).

2. Konfigurasi Framework CodeIgniter (CI)

Langkah selanjutnya, Download framework CI :
– Link download1 klik Disini
– Link download2 klik Disini

Setelah didownload maka file dalam format .zip. Ekstrak file terlebih dahulu seperti berikut:

Ganti nama folder CodeIgniter menjadi backend. Copy ke dalam folder xampp/htdocs/

3. Konfigurasi template / tema

Siapkan template dengan mendownload link dibawah ini :
– Download link template1 disini
– Download link template2 disini

Setelah didownload ekstrak templateBackEnd.zip terlebih dahulu.
– Buka folder templateBackEnd
– Copy folder assets ke folder XAMPP/htdocs/backend
– Buat folder uploads digunakan untuk menyimpan image / gambar

4. Konfigurasi MySQL Database

– Buka folder application/config
– Buka file database.php
– Lengkapi coding seperti berikut :

$db['default'] = array(
  'dsn' => '',
  'hostname' => 'localhost',
  'username' => 'root',
  'password' => '',
  'database' => 'dbtoko_online',
  '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
);

– Buka folder application/config
– Buka file autoload.php
– Lengkapi coding seperti berikut :

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

– Buka folder application/config
– Buka file routes.php
– Lengkapi coding seperti berikut :

$route['default_controller'] = 'welcome/welcome';

– Buka folder application/config
– Buka file config.php
– Lengkapi coding seperti berikut :

$config['base_url'] = 'http://localhost/backend/';

Buat database
– Buka browser, ketikkan url “http://localhost/phpmyadmin“

Klik New pada phpMyAdmin untuk membuat database toko online. Beri nama database “dbtoko_online“. Tekan tombol Create.

Pilih tab menu SQL ketikkan coding seperti berikut :

CREATE TABLE `barang` (
   `id_barang` int(11) NOT NULL,
   `nama_barang` varchar(70) NOT NULL,
   `harga` double NOT NULL,
   `stok` int(5) NOT NULL,
   `img` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `barang` ADD PRIMARY KEY (`id_barang`);
ALTER TABLE `barang` MODIFY `id_barang` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=32;

5. Pembuatan Controller

– Buka folder application/controller
– Buka file Welcome.php
– Lengkapi coding berikut :

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {

   public function __construct() {
      parent:: __construct();
      $this->load->library('pagination');
      $this->load->model('mod_produk');
   }   

   public function index() {
       $this->load->view('welcome');
   }

   public function welcome()
   {
      $config["base_url"] = base_url().'index.php/welcome/welcome';
      $config["total_rows"] = $this->mod_produk->record_count();
      $config["uri_segment"] = 3;
      $config["per_page"] = 5;

      $config['num_links'] = 2;
      $config['use_page_numbers'] = TRUE;
      $config['page_query_string'] = FALSE;
      $config['query_string_segment'] = '';

      $config['full_tag_open'] = '<ul class="pagination pagination-sm">';
      $config['full_tag_close'] = '</ul>';

      $config['first_link'] = '&laquo; First';
      $config['first_tag_open'] = '<li class="prev page">';
      $config['first_tag_close'] = '</li>';

      $config['last_link'] = 'Last &raquo;';
      $config['last_tag_open'] = '<li class="next page">';
      $config['last_tag_close'] = '</li>';

      $config['next_link'] = 'Next &rarr;';
      $config['next_tag_open'] = '<li class="next page">';
      $config['next_tag_close'] = '</li>';

      $config['prev_link'] = '&larr; Previous';
      $config['prev_tag_open'] = '<li class="prev page">';
      $config['prev_tag_close'] = '</li>';

      $config['cur_tag_open'] = '<li class="active"> <a href="">';
      $config['cur_tag_close'] = '</a></li>';
      $config['num_tag_open'] = '<li class="page">';
      $config['num_tag_close'] = '</li>';

      $config['anchor_class'] = 'follow_link';
      $this->pagination->initialize($config);

      $page = $this->uri->segment(3);
      if($page==''){
         $page=0;
      }else{
         $page = ($page-1)*$config["per_page"];
      }

      $data['results'] = $this->mod_produk->get_produk($config["per_page"],$page);
      $data['ttl_page'] = $config["per_page"];
      $data['ttl_row'] = $config["total_rows"];
      $data["links"] = $this->pagination->create_links();
      $data['page'] = $page;

      $this->load->view('welcome',$data);
   }

   public function simpan_produk()
   {
      $config['upload_path'] = './uploads/';
      $config['allowed_types'] = 'jpg|jpeg|png';
      $config['max_size'] = 500;
      $config['max_width'] = 1600;
      $config['max_height'] = 1600;
      $config['encrypt_name'] = TRUE;

      $this->load->library('upload', $config);
      $this->upload->initialize($config);

      if ( ! $this->upload->do_upload('image')){
         $error = array('error' =>  $this->upload->display_errors());
         echo $this->upload->display_errors();
      } else {
         $data = array(
            'nama_barang' => $this->input->post('nama_barang'),
            'harga' => $this->input->post('harga'),
           'stok' => $this->input->post('stok'),
            'img' => $this->upload->data('file_name')
         );

         $this->mod_produk->simpan_produk($data);
         redirect('/welcome/welcome');
      }
   }

   public function edit_produk()
   {
      $id = $this->input->post('e_id_barang');
      $config['upload_path'] = './uploads/';
      $config['allowed_types'] = 'jpg|jpeg|png';
      $config['max_size'] = 500; $config['max_width'] = 1600;
      $config['max_height'] = 1600; $config['encrypt_name'] = TRUE;
      $this->load->library('upload', $config);
      $this->upload->initialize($config);

      if ( ! $this->upload->do_upload('e_image')){
         $error = array('error' =>  $this->upload->display_errors());
         $data = array(
            'nama_barang' => $this->input->post('e_nama_barang'),
            'harga' => $this->input->post('e_harga'),
            'stok' => $this->input->post('e_stok')
         );

         $this->mod_produk->edit_produk($data,$id);
         redirect('/welcome/welcome');
      } else {
         $this->load->helper("file");
         $path = './uploads/'.$this->input->post('e_img');
         unlink($path);

         $data = array(
            'nama_barang' => $this->input->post('e_nama_barang'),
            'harga' => $this->input->post('e_harga'),
            'stok' => $this->input->post('e_stok'),
            'img' => $this->upload->data('file_name')
         );

         $this->mod_produk->edit_produk($data,$id);
         redirect('/welcome/welcome');
      }
   }

   public function hapus_produk()
   {
      $id = $this->input->get('id');
      $img = $this->input->get('img');
      $this->mod_produk->hapus_produk($id,$img);
      redirect('/welcome/welcome');
   }
}

6. Pembuatan Model

– Buka folder application/model
– Buat file Mod_produk.php
– Ketikkan coding seperti berikut :

<?php

Class Mod_produk extends CI_Model
{
   
   public function record_count() {
      return $this->db->count_all("barang");
   }

   public function get_produk($limit, $start)
   {
      $this->db->order_by('id_barang', 'DESC');
      $this->db->limit($limit,$start);
      $query = $this->db->get("barang");
      if ($query->num_rows() > 0) {
         foreach ($query->result() as $row) {
            $data[] = $row;
         }
         return $data;
      }
      return false;
   }

   function simpan_produk($data)
   {
      $this->db->insert('barang',$data);
      return TRUE;
   }

   function edit_produk($data,$id)
   {
      $this->db->where('id_barang',$id);
      $this->db->update('barang',$data);
      return TRUE;
   }

   function hapus_produk($id,$img)
   {
      $this->load->helper("file");
      $path = './uploads/'.$img;
      unlink($path);
      $this->db->where('id_barang',$id);
      $this->db->delete('barang');
      return TRUE;
   }
}

7. Pembuatan View

– Buka folder application/view
– Buat file welcome.php
– Ketikkan coding seperti berikut :

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>BackEnd | BelajarAplikasi</title>
      <link href="<?php echo base_url();?>assets/css/bootstrap.css" rel="stylesheet" />
      <link href="<?php echo base_url();?>assets/css/font-awesome.css" rel="stylesheet" />
      <link href="<?php echo base_url();?>assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
      <link href="<?php echo base_url();?>assets/css/custom.css" rel="stylesheet" />
      <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
   </head>
<body>
   <div id="wrapper">
      <nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0;">
         <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="<?php echo    base_url();?>index.php/welcome/welcome">BackEnd</a>
         </div>
         <div style="color: white;padding: 15px 50px 5px 50px;float: right;font-size: 16px;">Akses Terakhir : 17 Januari 2021 &nbsp; 
            <a href="<?php echo base_url();?>login/logout" class="btn btn-danger square-btn-adjust">Logout</a>
         </div>
      </nav>
      
      <nav class="navbar-default navbar-side" role="navigation">
         <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
               <li class="text-center">
                  <img src="<?php echo base_url();?>assets/img/find_user.png" class="user-image img-responsive"/>
               </li>
               <li>
                  <a href="#"><i class="fa fa-dashboard fa-3x"></i> Dasbor</a>
               </li>
               <li>
                  <a href="<?php echo base_url();?>index.php/welcome/welcome"><i class="fa fa-edit fa-3x"></i> Data Produk</a>
               </li>
            </ul>
         </div>
      </nav>

      <div id="page-wrapper">
         <div id="page-inner">
            <div class="row">
               <div class="col-md-12">
                  <h2>Master Produk</h2>
                  <h5>Olah Data Produk | BelajarAplikasi.com </h5>
               </div>
            </div>

            <hr />

            <div class="panel panel-default">
               <div class="panel-heading">
                  Daftar Produk
               </div>
               
               <div class="row">
                  <div class="col-md-12" style="padding-top:15px;">
                     <div class="col-sm-6">
                        <input type="hidden" name="service_url" id="service_url" class="form-control" value="<?php echo base_url();?>"/>
                        <button class="btn btn-danger btn-sm"   onclick="btn_tambah();"><span class="fa fa-plus"></span> Tambah</button>
                     </div>
                  </div>
                  
                  <!-- Tambah Modals -->
                  <form action="<?php echo base_url();?>index.php/welcome/simpan_produk" method="post" enctype="multipart/form-data">
                     <div class="modal fade" id="modalTambah" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                           <div class="modal-content">
                           <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                              <h4 class="modal-title" id="myModalLabel">Tambah Produk</h4>
                           </div>
                           <div class="modal-body">
                              <div class="form-group">
                                 <input type="hidden" name="id_barang" id="id_barang" class="form-control" placeholder="ID Produk"/>
                                 <input type="text" name="nama_barang" id="nama_barang" class="form-control" placeholder="Nama Produk"/>
                              </div>
                              <div class="form-group">
                                 <input type="text" name="harga" id="harga" class="form-control" placeholder="Harga"/>
                              </div>
                              <div class="form-group">
                                 <input type="text" name="stok" id="stok" class="form-control" placeholder="Stok"/>
                              </div>
                              <div class="form-group">
                                 <img id="imgView" data-src="holder.js/200x200" src="#" height="200" width="200" style="border: 1px solid #cccccc;padding: 3px;border-radius: 3px;"/>
                              </div>
                              <input type="file" name="image" id="image" onchange="readURL(this);" class="form-control"/>
                           </div>
                           <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                              <button type="submit" class="btn btn-danger">Simpan</button>
                           </div>
                           </div>
                        </div>
                     </div>
                  </form>
                  <!-- End Tambah Modals -->

                  <!-- Edit Modals -->
                  <form action="<?php echo base_url();?>index.php/welcome/edit_produk" method="post" enctype="multipart/form-data">
                     <div class="modal fade" id="modalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                           <div class="modal-content">
                           <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                              <h4 class="modal-title" id="myModalLabel">Edit Produk</h4>
                           </div>
                           <div class="modal-body">
                              <div class="form-group">
                                 <input type="hidden" name="e_id_barang" id="e_id_barang" class="form-control" placeholder="ID Produk"/>
                                 <input type="hidden" name="e_img" id="e_img" class="form-control"/>
                                 <input type="text" name="e_nama_barang" id="e_nama_barang" class="form-control" placeholder="Nama Produk"/>
                              </div>
                              <div class="form-group">
                                 <input type="text" name="e_harga" id="e_harga" class="form-control" placeholder="Harga"/>
                              </div>
                              <div class="form-group">
                                 <input type="text" name="e_stok" id="e_stok" class="form-control" placeholder="Stok"/>
                              </div>
                              <div class="form-group">
                                 <img id="e_imgView" data-src="holder.js/200x200" src="#" height="200" width="200" style="border: 1px solid #cccccc;padding: 3px;border-radius: 3px;"/>
                              </div>
                              <input type="file" name="e_image" id="e_image" onchange="e_readURL(this);" class="form-control"/>
                           </div>
                           <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                              <button type="submit" class="btn btn-danger">Simpan</button>
                           </div>
                           </div>
                        </div>
                     </div>
                  </form>
                  <!-- End Edit Modals -->
               </div>
               <div class="panel-body">
                  <div class="table-responsive">
                     <table class="table table-striped table-bordered table-hover dataTable no-footer">
                        <thead>
                           <tr>
                              <th style="text-align:center;">No</th>
                              <th style="text-align:center;">Nama Barang</th>
                              <th style="text-align:center;">Harga</th>
                              <th style="text-align:center;">Stok</th>
                              <th style="text-align:center;">Aksi</th>
                           </tr>
                        </thead>
                        <tbody>
                           <?php
                           $no=$page+1;
                           if(!empty($results)) {
                              foreach ($results as $row)
                              {
                                 $id = $row->id_barang;
                                 $nama = $row->nama_barang;
                                 $harga = $row->harga;
                                 $stok = $row->stok;
                                 $img = $row->img;
                                 echo '<tr>
                                          <td>'.$no.'</td>
                                          <td>'.$nama.'</td>
                                          <td style="text-align:right;">'.number_format($harga,'0',',','.').'</td>
                                          <td style="text-align:center;">'.$stok.'</td>
                                          <td style="text-align:center;">
                                          <a href="#" onclick="btn_edit(\''.$id.'\',\''.$nama.'\',\''.$harga.'\',\''.$stok.'\',\''.$img.'\');"><span class="fa fa-edit"></span> Edit</a> |
                                          <a href="'.base_url().'index.php/welcome/hapus_produk?id='.$id.'&img='.$img.'" onclick="return check_hapus(\''.$id.'\',\''.$nama.'\')"><span class="fa fa-eraser"></span> Hapus</a>
                                          </td>
                                       </tr>';
                                 $no++;
                              }
                           }
                           ?>
                        </tbody>
                     </table>
                  </div>
                  <div class="row">
                     <div class="col-sm-6">
                        <div class="dataTables_info" style="margin-top:-5px;margin-bottom:10px;">
                           Menampilkan data 1 - <?php echo $no-1;?> dari <?php echo $ttl_row;?> Produk
                        </div>
                     </div>
                     <div class="col-sm-6">
                        <div class="pull-right">
                           <ul class="pagination" style="margin-top:-50px;margin-bottom:-20px;">
                              <p><?php echo $links; ?></p>
                           </ul>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <script src="<?php echo base_url();?>assets/js/jquery-1.10.2.js"></script>
   <script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script>
   <script src="<?php echo base_url();?>assets/js/jquery.metisMenu.js"></script>
   <script src="<?php echo base_url();?>assets/js/morris/raphael-2.1.0.min.js"></script>
   <script src="<?php echo base_url();?>assets/js/morris/morris.js"></script>
   <script src="<?php echo base_url();?>assets/js/custom.js"></script>
   <script>
   function btn_tambah() {
      $('#modalTambah').on('shown.bs.modal', function() {
         $('#nama_barang').focus();
      })
      $('#id_barang').val('');
      $('#nama_barang').val('');
      $('#harga').val('');
      $('#stok').val('');
      $('#modalTambah').modal('show');
   }
   function btn_edit(id,nama,harga,stok,img) {
      var service_url = $('#service_url').val();
      $('#modalEdit').on('shown.bs.modal', function() {
         $('#e_nama_barang').focus();
      })
      $('#e_id_barang').val(id);
      $('#e_nama_barang').val(nama);
      $('#e_harga').val(harga);
      $('#e_stok').val(stok);
      $('#e_img').val(img);
      var path = img; //service_url + 'uploads/' + img;
      $('#e_imgView').attr('src', path);
      $('#modalEdit').modal('show'); 
   }
   function check_hapus(id,nama) {
      var iya = confirm('Yakin produk "'+ nama +'" ingin dihapus ?');
      if (iya){
      } else {
         return false;
      } 
   }
   function readURL(input) {
      if (input.files && input.files[0]) {
         var reader = new FileReader();
         reader.onload = function (e) {
            $('#imgView').attr('src', e.target.result);
            $('#imgView').show();
         }
         reader.readAsDataURL(input.files[0]);
      }
   }
   function e_readURL(input) {
      if (input.files && input.files[0]) {
         var reader = new FileReader();
         reader.onload = function (e) {
            $('#e_imgView').attr('src', e.target.result);
            $('#e_imgView').show();
         }
         reader.readAsDataURL(input.files[0]);
      }
   }
   </script>
</body>
</html>

8. Uji coba BackEnd website yang sudah dibuat
Buka browser, ketikkan url “http://localhost/backend“

Untuk source code lengkap, bisa di download atau clone di sini https://github.com/handoyoapp/backend-ci

Sekian tutorial kali ini. Selamat mencoba.
Happy Coding 🙂