• About
  • Privacy Policy
  • Contact
  • SiteMap

PINYINKPIN

memberikan sedikit informasi atau ilmu kepada umum tentang berbagai bidang

  • Home
  • Bootstrap
  • Jaringan
    • cisco
  • umum
Home » CI » codeigniter » Belajar Codeigniter, membuat CRUD dengan codeigniter 3 dan bootstrap 4

Belajar Codeigniter, membuat CRUD dengan codeigniter 3 dan bootstrap 4

Pindi Pin
1 Comment
CI, codeigniter
Monday, July 29, 2019
Pada kesempatan kali ini saya akan membahas bagaimana membuat crud pada codeigniter dan menggunakan framework frond end bootstrap 4. CRUD merupakan teknik dasar dalam pemrograman dimana kita bisa membuat suatu sistem informasi management karena pada dasarnya sistem informasi management merupakan kumpulan dari banyaknya CRUD yang berelasi.

langsung saja kita buat database nya terlebih dahulu, buat database nama ci_crud atau terserah anda, bisa di sesuain lalu buat table biodata


CREATE TABLE `biodata` (
 `id` INT(11) NOT NULL AUTO_INCREMENT,
 `nama` VARCHAR(64) NULL DEFAULT NULL,
 `alamat` TEXT NULL,
 `no_hp` CHAR(13) NULL DEFAULT NULL,
 PRIMARY KEY (`id`)
)
COLLATE='latin1_swedish_ci'
ENGINE=InnoDB
AUTO_INCREMENT=2
;

lalu download codeigniter dari website resminya https://www.codeigniter.com/download lalu taruh di htdocs, terus sesuaikan database nya dengan mengedit file database.php pada folder application -> config ->database.php


lalu kita atur base_url nya, silahkan buka file config.php pada folder application -> config -> config.php terus cari $config['base_url'] = edit jadi

$base  = "http://".$_SERVER['HTTP_HOST'];
$base .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);
$config['base_url'] = $base;

script di atas adalah konfigurasi script dimana kita membuat base url menjadi dinamis.
lanjut, buat file .htaccess di root folder project lalu pastekan code berikut

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

konfigurasi awal sudah selesai, selanjutnya kita membuat controller, buat controller dengan nama Ci_crud.php ingat, huruf awal biasakan menggunakan huruf kapital. lalu pastekan kode seperti di bawah ini

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

class Ci_crud extends CI_Controller {

 public function __construct()
 {
  parent::__construct();
  //Do your magic here
  $this->load->model('crud_model');
  $this->load->helper('url');
  $this->load->library('session');
 }

 public function index()
 {
  //test view
  $data = array(
   'hasil' => $this->crud_model->lihat()->result()
   );
  $this->load->view('crud/lihat', $data);
 }

 public function add($value='')
 {
  # code...
  $this->load->view('crud/tambah');
 }

 public function add_aksi($value='')
 {
  # code...
  $nama = $this->input->post("inputNama");
  $alamat = $this->input->post("inputAlamat");
  $no_hp = $this->input->post("inputHp");
  $data = array(
   'nama'=> $nama,
   'alamat' => $alamat,
   'no_hp'=> $no_hp
   );
  $query = $this->crud_model->add_data($data);
  if ($query > 0) {
   $alert = '<div class="alert alert-info" role="alert">
   simpan berhasil
   </div>';
  }
  else{
   $alert = '<div class="alert alert-danger" role="alert">
   simpan gagal
   </div>';
  }
  $this->session->set_flashdata('item', $alert);
  redirect('ci_crud/add','refresh');
 }

 public function edit($id)
 {
  $q = $this->crud_model->lihat(['id'=>$id])->row();
  $data = array('hasil'=>$q);
  $this->load->view('crud/edit', $data);
 }

 public function edit_aksi($value='')
 {
  # code...
  $id = $this->input->post("id");
  $nama = $this->input->post("inputNama");
  $alamat = $this->input->post("inputAlamat");
  $no_hp = $this->input->post("inputHp");
  $data = array(
   'nama'=> $nama,
   'alamat' => $alamat,
   'no_hp'=> $no_hp
   );
  $query = $this->crud_model->edit_data($id, $data);
  if ($query > 0) {
   $alert = '<div class="alert alert-info" role="alert">
   update berhasil
   </div>';
  }
  else{
   $alert = '<div class="alert alert-danger" role="alert">
   update gagal
   </div>';
  }
  $this->session->set_flashdata('item', $alert);
  redirect('ci_crud/edit/'.$id,'refresh');
 }

 public function delete($id)
 {
  $query = $this->crud_model->delete_data($id);
  if ($query > 0) {
   $alert = '<div class="alert alert-info" role="alert">
   delete berhasil
   </div>';
  }
  else{
   $alert = '<div class="alert alert-danger" role="alert">
   delete gagal
   </div>';
  }
  $this->session->set_flashdata('item', $alert);
  redirect('ci_crud','refresh');
 }

}

/* End of file Ci_crud.php */
/* Location: ./application/controllers/Ci_crud.php */

lalu kita buat model dengan nama file Crud_model , pastekan kode berikut:

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

class Crud_model extends CI_Model {

 //fungsi untuk menampilkan data
 public function lihat($value=array())
 {
  $this->db->where($value);
  $data = $this->db->get('biodata');
  return $data;
 }

 public function add_data($value)
 {
  # code...
  $this->db->insert('biodata', $value);
  return $this->db->affected_rows();
 }

 public function edit_data($id, $data)
 {
  $this->db->update('biodata', $data, ['id'=>$id]);
  return $this->db->affected_rows();
 }

 public function delete_data($id)
 {
  $this->db->delete('biodata',['id'=>$id]);
  return $this->db->affected_rows();
 }

}

/* End of file Crud_model.php */
/* Location: ./application/models/Crud_model.php */

setelah itu, buat folder crud pada views, lalu buat file lihat.php terus pastekan code di bawah ini

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1><a href="<?php echo base_url().'ci_crud'; ?>">CRUD</a></h1>
    <a href="<?php echo base_url().'ci_crud/add'; ?>" class="btn btn-outline-primary btn-sm">Tambah Data</a>
    <hr>
    <?php echo $this->session->flashdata('item'); ?>
    <table class="table">
    <thead>
      <tr>
        <th scope="col">NO</th>
        <th scope="col">NAMA</th>
        <th scope="col">ALAMAT</th>
        <th scope="col">NO HP</th>
        <th scope="col">AKSI</th>
      </tr>
    </thead>
    <tbody>
      <?php foreach ($hasil as $k): ?>
        <tr>
          <th scope="row"><?php echo $k->id; ?></th>
          <td><?php echo $k->nama; ?></td>
          <td><?php echo $k->alamat; ?></td>
          <td><?php echo $k->no_hp; ?></td>
          <td>
            <a href="<?php echo base_url().'ci_crud/edit/'.$k->id; ?>" class="btn btn-outline-success btn-sm">Edit</a>
            <a href="<?php echo base_url().'ci_crud/delete/'.$k->id; ?>" class="btn btn-outline-danger btn-sm" onclick="return confirm('apa anda yakin ?')">hapus</a>
          </td>
        </tr>
      <?php endforeach ?>
    </tbody>
  </table>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

masih di folder views->crud buat file tambah.php lalu pastekan kode berikut

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1><a href="<?php echo base_url().'ci_crud'; ?>">CRUD</a></h1>
    <?php echo $this->session->flashdata('item'); ?>
    <form method="post" action="<?php echo base_url().'ci_crud/add_aksi'; ?>">
      <div class="form-group">
        <label for="inputNama">Nama</label>
        <input type="text" class="form-control" name="inputNama" aria-describedby="nama" placeholder="Enter Nama">
      </div>
      <div class="form-group">
        <label for="inputAlamat">Alamat</label>
        <input type="text" class="form-control" name="inputAlamat" aria-describedby="alamat" placeholder="Enter Alamat">
      </div>
      <div class="form-group">
        <label for="inputHp">No Hp</label>
        <input type="text" class="form-control" name="inputHp" aria-describedby="Hp" placeholder="Enter No Hp">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

lalu buat file edit.php pastekan kode berikut
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1><a href="<?php echo base_url().'ci_crud'; ?>">CRUD</a></h1>
    <?php echo $this->session->flashdata('item'); ?>
    <form method="post" action="<?php echo base_url().'ci_crud/edit_aksi'; ?>">
      <input type="hidden" name="id" value="<?php echo $hasil->id; ?>">
      <div class="form-group">
        <label for="inputNama">Nama</label>
        <input type="text" class="form-control" name="inputNama" aria-describedby="nama" value="<?php echo $hasil->nama; ?>" placeholder="Enter Nama">
      </div>
      <div class="form-group">
        <label for="inputAlamat">Alamat</label>
        <input type="text" class="form-control" name="inputAlamat" aria-describedby="alamat" value="<?php echo $hasil->alamat; ?>" placeholder="Enter Alamat">
      </div>
      <div class="form-group">
        <label for="inputHp">No Hp</label>
        <input type="text" class="form-control" name="inputHp" aria-describedby="Hp" value="<?php echo $hasil->no_hp; ?>" placeholder="Enter No Hp">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

lalu jalankan program "localhost/nama_project/ci_crud" misal punya saya "http://localhost:8081/codeigniter/crud/ci_crud"
untuk tampilan tambah data
 untuk edit
Penjelasan:

public function __construct()
 {
  parent::__construct();
  //Do your magic here
  $this->load->model('crud_model');
  $this->load->helper('url');
  $this->load->library('session');
 }

fungsi __construct() digunakan untuk mengeload otomatis baik itu dari session, helper, library atau model, bisa juga untuk fungsi logika lainnya.
dalam codeigniter untuk mengeload model menggunakan perintah $this->load->model('nama_model','alias') nah terus kalau mau memanggil fungsi yang ada di dalam model menggunakan sintaks $this->nama_model->nama_fungsi($param)

Tweet
Belajar Codeigniter, membuat CRUD dengan codeigniter 3 dan bootstrap 4 Title : Belajar Codeigniter, membuat CRUD dengan codeigniter 3 dan bootstrap 4
Description : Pada kesempatan kali ini saya akan membahas bagaimana membuat crud pada codeigniter dan menggunakan framework frond end bootstrap 4. CRUD m...
Rating : 5

1 Response to "Belajar Codeigniter, membuat CRUD dengan codeigniter 3 dan bootstrap 4"

  1. brilianeranaomiFebruary 18, 2020 at 1:51 PM

    Artikelnya bagus mudah dipahami, kunjungi website kami juga ya! untuk mendapatkan pengalaman lebih :)

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

← Newer Post Older Post → Home
Subscribe to: Post Comments (Atom)

Popular Posts

  • Membuat Sistem Absensi Dengan PHP dan MYSQL
    pinyinkpin - Halo semua, kali ini saya akan mengajarkan bagaimana membuat sistem absensi dengan php dan mysql . Sistem absensi kali ini say...
  • Macam-Macam Button Dalam Bootstrap
    pinyinkpin - dalam bootstrap terdapat beberapa button, baik itu singgle button maupon group button, button dalam bootstrap dapat digunakan ...
  • SCRIPT PHP MENAMPILKAN ANGKA SATU SAMPAI 10
    SCRIPT PHP MENAMPILKAN ANGKA SATU SAMPAI 10 assalamualaikum wr wb kali ini admin akan mengshare script php untuk menampilkan angka satu s...
  • Macam-Macam Input Form Pada HTML5
    pinyinkpin - HTML5 merupakan komponen yang penting dalam desain web maupun dalam coding web, hampir semua web menggunakan HTML, di dalam HT...
  • macam-macam Algoritma perulangan dengan contoh bintang
    pinyinkpin - Halo apa kabar?, kali ini saya akan membahas macam-macam algoritma perulangan , dalam bahasa pemrograman, perulangan selalu ada...

Labels

bootstrap (7) CI (2) cisco (2) codeigniter (1) corel (1) grafis (1) html (7) internet (2) mysql (10) ngetik (1) penulisan bootstrap (1) php (5) privacy pilicy (1) sublime (1) umum (10) xampp (2)
Copyright 2015 PINYINKPIN Powered by Blogger