Tutorial CRUD CodeIgniter 3 dengan Pusher

Dalam tutorial ini, kita akan belajar bagaimana membuat aplikasi CRUD sederhana menggunakan framework CodeIgniter 3 dan menerapkan fitur real-time menggunakan layanan Pusher.

CodeIgniter adalah salah satu framework PHP yang populer dan dapat membantu kita membangun aplikasi web dengan cepat. Pusher, di sisi lain, adalah layanan yang memungkinkan kita mengirim dan menerima pesan real-time antara aplikasi web dan pengguna.

Persiapan Awal

Sebelum kita memulai, pastikan bahwa kita memiliki lingkungan pengembangan PHP yang sudah siap. Pastikan juga telah menginstal CodeIgniter 3 dan memiliki akun Pusher yang valid. Jika belum, silakan kunjungi situs web CodeIgniter (https://codeigniter.com) untuk mengunduh dan menginstalnya, serta situs web Pusher (https://pusher.com) untuk mendaftar dan mendapatkan kunci API yang diperlukan.

Langkah-langkah:

Buat Database Pertama, buatlah database MySQL baru dan tabel “tasks” dengan kolom-kolom berikut:

id (INT, primary key, auto-increment)
title (VARCHAR)
description (TEXT)
created_at (TIMESTAMP, default CURRENT_TIMESTAMP)
updated_at (TIMESTAMP, default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP)

Selanjutnya, yaitu melakukan konfigurasi CodeIgniter. Buka file “application/config/database.php” dan sesuaikan pengaturan database dengan yang dimiliki.

Lalu buat file “application/models/Task_model.php” dan tambahkan kode berikut:

<?php
class Task_model extends CI_Model {
   public function __construct() {
      $this->load->database();
   }

   public function get_tasks() {
      return $this->db->get('tasks')->result();
   }

   public function create_task($data) {
      $this->db->insert('tasks', $data);
      return $this->db->insert_id();
   }

   public function update_task($id, $data) {
      $this->db->where('id', $id);
      $this->db->update('tasks', $data);
      return $this->db->affected_rows();
   }

   public function delete_task($id) {
      $this->db->where('id', $id);
      $this->db->delete('tasks');
      return $this->db->affected_rows();
   }
}

Setelah itu buat file “application/controllers/Task.php” dan tambahkan kode berikut ini:

<?php
use Pusher\Pusher;

class Task extends CI_Controller {
   public function __construct() {
      parent::__construct();
      $this->load->model('task_model');
   }

   public function index() {
      $data['tasks'] = $this->task_model->get_tasks();
      $this->load->view('task/index', $data);
   }

   public function create() {
      $data = [
         'title' => $this->input->post('title'),
         'description' => $this->input->post('description')
      ];

      $task_id = $this->task_model->create_task($data);

      $this->pusher->trigger('tasks', 'task_created', ['id' => $task_id]);

      redirect('task');
   }

   public function update($id) {
      $data = [
         'title' => $this->input->post('title'),
         'description' => $this->input->post('description')
      ];

      $this->task_model->update_task($id, $data);

      $this->pusher->trigger('tasks', 'task_updated', ['id' => $id]);

      redirect('task');
   }

   public function delete($id) {
      $this->task_model->delete_task($id);

      $this->pusher->trigger('tasks', 'task_deleted', ['id' => $id]);

      redirect('task');
   }
}

Buat folder “application/views/task” dan tambahkan file “index.php” dengan kode berikut:

<!DOCTYPE html>
<html>
<head>
   <title>Task List</title>
   <script src="https://js.pusher.com/7.0/pusher.min.js"></script>
   <script>
      // Inisialisasi Pusher
      const pusher = new Pusher('YOUR_PUSHER_KEY', {
         cluster: 'YOUR_PUSHER_CLUSTER',
         encrypted: true
      });

      // Langganan ke channel 'tasks'
      const channel = pusher.subscribe('tasks');

      // Mendengarkan event 'task_created'
      channel.bind('task_created', function(data) {
         // Lakukan sesuatu ketika ada task baru
         console.log('Task Created:', data);
      });

      // Mendengarkan event 'task_updated'
      channel.bind('task_updated', function(data) {
         // Lakukan sesuatu ketika ada perubahan task
         console.log('Task Updated:', data);
      });

      // Mendengarkan event 'task_deleted'
      channel.bind('task_deleted', function(data) {
         // Lakukan sesuatu ketika ada task dihapus
         console.log('Task Deleted:', data);
      });
   </script>
</head>
<body>
   <h1>Task List</h1>

   <h2>Create Task</h2>
   <form action="<?php echo site_url('task/create'); ?>" method="post">
      <label>Title:</label>
      <input type="text" name="title" required><br>

      <label>Description:</label>
      <textarea name="description" required></textarea><br>

      <input type="submit" value="Create">
   </form>

   <h2>Task List</h2>
   <ul>
      <?php foreach($tasks as $task): ?>
         <li>
            <strong><?php echo $task->title; ?></strong><br>
            <?php echo $task->description; ?>
            <a href="<?php echo site_url('task/update/'.$task->id); ?>">Edit</a>
            <a href="<?php echo site_url('task/delete/'.$task->id); ?>">Delete</a>
         </li>
      <?php endforeach; ?>
   </ul>
</body>
</html>

Sekarang, kita akan melakukan konfigurasi Pusher. Pertama buka file “application/config/autoload.php” dan tambahkan kode berikut di dalam autoload libraries:

$autoload['libraries'] = array('pusher');

Selanjutnya, buka file “application/config/pusher.php” dan tambahkan konfigurasi Pusher:

$config['pusher_app_id'] = 'YOUR_PUSHER_APP_ID';
$config['pusher_key'] = 'YOUR_PUSHER_KEY';
$config['pusher_secret'] = 'YOUR_PUSHER_SECRET';
$config['pusher_cluster'] = 'YOUR_PUSHER_CLUSTER';

Terakhir, buka browser dan akses URL aplikasi CodeIgniter (misalnya, http://localhost/task). Sekarang, kita dapat membuat, mengupdate, dan menghapus tugas pada aplikasi CRUD kita.

Saat melakukan aksi tersebut, kita juga akan melihat output pesan real-time di console browser yang menunjukkan perubahan yang terjadi.

Kesimpulan

Dalam tutorial ini, kita telah belajar bagaimana membuat aplikasi CRUD sederhana menggunakan CodeIgniter 3 dan menerapkan fitur real-time menggunakan layanan Pusher. Kita mengkonfigurasi model untuk mengakses database, controller untuk mengelola logika bisnis, dan view untuk menampilkan tugas dan mengirimkan permintaan ke server.

Dengan menerapkan Pusher, kita dapat membuat aplikasi kita menjadi lebih responsif dan memperbarui tampilan secara real-time ketika ada perubahan data. Namun, penting untuk dicatat bahwa CodeIgniter 3 sudah cukup lama dan mungkin ada versi yang lebih baru saat ini.

Jika memungkinkan, disarankan untuk menggunakan versi terbaru dari CodeIgniter atau mempertimbangkan untuk menggunakan framework lain seperti CodeIgniter 4 yang menawarkan fitur dan perbaikan lebih banyak.

Persiapan Awal

Langkah-langkah:

Kesimpulan

Leave a Comment Cancel Reply