andriajah Wed May 2020 1 year ago

Bagaimana Cara Menggunakan Sweet Alert Delete Confirm di Codeigniter

Dalam contoh ini, saya akan membagikan kepada Anda cara menggunakan sweetalert sebagai kotak konfirmasi dalam aplikasi codeigniter 3. kami akan menggunakan sweet alert sebelum menghapus di codeigniter. kita akan menggunakan hapus event dengan ajax, gunakan kotak konfirmasi sweet alert dengan tombol batal dan ya di aplikasi php codeigniter.

Jika Anda menggunakan tema bootstrap dan Anda perlu menggunakan kotak konfirmasi sebelum menghapus maka saya harus menyarankan Anda untuk menggunakan kotak konfirmasi js untuk kotak konfirmasi dalam proyek codeigniter Anda. itu akan terlihat luar biasa dan itu adalah tata letak ramah pengguna untuk kotak konfirmasi.

Dalam contoh ini, kita akan membuat satu tabel item dan daftar semua catatan dengan tombol hapus di struktur tabel. maka kita akan menulis kode js untuk konformasi sebelum menghapus. kami akan menggunakan sweet alert untuk kotak konfirmasi di codeigniter.

Lihat contoh di bawah ini dan gunakan kotak konfirmasi itu di codeigniter.

Langkah 1: Buat Tabel item

Pada langkah ini kita akan membuat "test" database baru dan menambahkan "items" tabel baru dalam database uji. Anda bisa menggunakan SQL Query berikut untuk membuat tabel "items". Jadi mari kita buat menggunakan query sql di bawah ini:

tabel items:

 CREATE TABLE IF NOT EXISTS `items` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `description` text COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=16 ;

Langkah 2: Add Routes

Pada langkah ini Anda harus menambahkan dua route baru di file route. jadi, dua route dengan metode GET dan DELETE. satu route akan mencantumkan semua item dan yang lainnya untuk menghapus item, jadi mari kita letakkan route sebagai kode di bawah ini:

application/config/routes.php

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

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

$route['item-list'] = 'ItemController/index';
$route['item-list/(:any)']['delete'] = "ItemController/delete/$1";

Langkah 3: Create ItemController Controller

Ok, sekarang pertama kita harus membuat satu kontroler ItemController baru dengan dua metode. jadi buat file ItemController.php di path application/controllers/ItemController.php ini dan letakkan kode di bawah ini di file ini:

application/controllers/ItemController.php

<?php


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


class ItemController extends CI_Controller {


   /**
    * Get All Data from this method.
    *
    * @return Response
   */
   public function __construct() {
      parent::__construct();
      $this->load->database();
   }


   /**
    * Create from display on this method.
    *
    * @return Response
   */
   public function index()
   {
      $data['data'] = $this->db->get("items")->result();
      $this->load->view('itemlist', $data);
   }


   /**
    * Delete Data from this method.
    *
    * @return Response
   */
   public function delete($id)
   {
       $this->db->delete('items', array('id' => $id));
       echo 'Deleted successfully.';
   }
}

Langkah 4: Create View Files

Pada langkah ini, kita akan membuat satu file viewdan kita harus menulis di sana kode jquery confim.

application/views/itemlist.php

<!DOCTYPE html>
<html>
<head>
  <title>How to use sweet alert for delete confirm in Codeigniter? - medikre.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://lipis.github.io/bootstrap-sweetalert/dist/sweetalert.js"></script>
    <link rel="stylesheet" href="https://lipis.github.io/bootstrap-sweetalert/dist/sweetalert.css" />
</head>
<body>
<div class="container">
<div class="row">
    <div class="col-lg-12 margin-tb">
        <div class="pull-left">
          <h2>How to use sweet alert for delete confirm in Codeigniter? - Medikre.com</h2>
        </div>
    </div>
</div>
    
<table class="table table-bordered">
  <thead>
      <tr>
          <th>Title</th>
          <th>Description</th>
          <th width="220px">Action</th>
      </tr>
  </thead>
  <tbody>
   <?php foreach ($data as $item) { ?>      
      <tr id="<?php echo $item->id; ?>">
          <td><?php echo $item->title; ?></td>
          <td><?php echo $item->description; ?></td>          
      <td>
          <button type="submit" class="btn btn-danger remove"> Delete</button>
      </td>     
      </tr>
   <?php } ?>
  </tbody>
</table>
</div>
    
<script type="text/javascript">
    $(".remove").click(function(){
        var id = $(this).parents("tr").attr("id");
    
       swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: "btn-danger",
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: "No, cancel plx!",
        closeOnConfirm: false,
        closeOnCancel: false
      },
      function(isConfirm) {
        if (isConfirm) {
          $.ajax({
             url: '/item-list/'+id,
             type: 'DELETE',
             error: function() {
                alert('Something is wrong');
             },
             success: function(data) {
                  $("#"+id).remove();
                  swal("Deleted!", "Your imaginary file has been deleted.", "success");
             }
          });
        } else {
          swal("Cancelled", "Your imaginary file is safe :)", "error");
        }
      });
     
    });
    
</script>
   
</body>
</html>

Sekarang Anda siap menjalankan contoh. 

Saya harap Anda menemukan solusi terbaik Anda....

twitter bootstrap sweetalert jquery codeigniter