Membuat Notifikasi Menggunakan Sweetalert di Codeigniter 3

by Affanul Hakim · Published September 8, 2022 · Updated February 20, 2023

Sesekali waktu kita membutuhkan notifikasi atau pemberitahuan kepada pengguna tentang aplikasi kita apabila terjadi kesalahan atau notifikasi apabila kita menjalankan perintah tertentu, sehingga user pengguna aplikasi bisa mengetahui apa yang harus dilakukan atau pesan tertentu yang ingin kita sampaikan kepada pengguna aplikasi kita.

Notifikasi atau pemberitahuan standar browser memiliki tampilan yang kurang menarik sehingga beberapa user menjadi bingung itu notifikasi atau hanya konfirmasi popup biasa.

Pada tutorial ini kita akan belajar cara membuat pesan notifikasi peringatan yang dapat disesuaikan dengan tampilan yang menarik, yakni menggunakan SweetAlert.

Sweetalert adalah salah satu library javascript yang cukup banyak digunakan untuk membuat alert atau notifikasi sehingga mempermudah teman-teman developper membuat notifikasi yang menarik dengan beberapa efek animasi.

Dengan Sweetalert kita dapat membuat notifikasi dengan mudah hanya dengan memanggil fungsi yang telah disediakan sesuai dengan kebutuhan.

Spesifikasi software yang digunakan pada tutorial ini :

1. PHP v7.0
2. Codeigniter v 3
3. Sweetalert 2.
4. Admin LTE

Pada tutorial ini akan lebih menarik karena Sweetalert saya gabungkan dengan Codeigniter 3 sehingga apabila kita sukses menyimpan, edit ataupun menghapus data maka popup notifikasi sweetalert dapat muncul sehingga aplikasi yang kita buat dengan codeigniter terlihat menarik.

Sedangkan untuk template admin saya menggunakan Admin LTE untuk mempermudah dalam pengelolaan halaman admin.

Berikut tampilan notifikasi sweetalert yang telah selesai kita buat, tampilan awal index disini saya menggunakan database berita untuk menampilkan data berita yang telah kita input

Selanjutnya apabila kita tambah data maka akan muncul tampilan sebagai berikut :

Apabila kita akan mengedit data maka tampilan notifiasinya seperti berikut :

Kemudian apabila akan menghapus data, ketika tombol delete kita klik maka tampilan notifikasi sebagai berikut terdapat dua pilihan delete atau cancel :

Notifikasi konfirmasi apakah akan menghapus data

Setelah kita klik tombol delete, maka akan muncul tampilan sukses menghapus data :

Untuk lebih jelasnya, teman-teman bisa download sourcecode pada akhir tutorial ini, dan tutorial ini adalah bagian dari project web portal yang saya buat dan sementara dalam pengembangan.

Langkah pertama download library Sweetalert kemudian masukan file tersebut pada folder assets/js,ini disesuaikan dengan setingan tempat assets dari teman-teman, kalau saya tempatkan pada folder assets/js, dan seting Javascript sebagai berikut untuk memanggil library Sweetalert :

Berikut file javascript yang kita buat sendiri untuk seting sweetalert, data table, dan tampilan upload pada file ini assets/js/javascript.js

// Sweet Alert
const flashData = $('.flash-data').data('flashdata');

if (flashData) {
    Swal({
        title: 'Sukses',
        text: 'Data Berhasil ' + flashData,
        type: 'success'
    });
}

// Sweet Alert
const flashGagal = $('.flash-data-gagal').data('flashdata');

if (flashGagal) {
    Swal({
        title: 'Gagal',
        text: 'Data Gagal ' + flashGagal,
        type: 'error'
    });
}



// tombol-hapus
$('.tombol-hapus').on('click', function (e) {

    e.preventDefault();
    const href = $(this).attr('href');

    Swal({
        title: 'Apakah anda yakin',
        text: "data akan dihapus!",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#e74c3c',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Delete'
    }).then((result) => {
        if (result.value) {
            document.location.href = href;
        }
    })

});



$(document).ready(function () {
    $("#dataBerita").DataTable({
        order: [[1, "desc"]],
    });
});

$(document).ready(function () {
    $("#dataGalery").DataTable({
        order: [[1, "desc"]],
    });
});

$(document).ready(function () {
    $("#dataFile").DataTable({
        order: [[1, "desc"]],
    });
});

$(document).ready(function () {
    $("#dataPages").DataTable({
        order: [[1, "desc"]],
    });
});

// Summernote
$(function () {
    // Summernote
    $('#summernote').summernote({
        toolbar: [
            // [groupName, [list of button]]
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['strikethrough', 'superscript', 'subscript']],
            // ['fontsize', ['fontsize']],
            // ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['insert', ['link']]
        ]
    });
})


function previewGmb() {
    const sampul = document.querySelector("#image");
    const sampulLabel = document.querySelector(".custom-file-input");
    const imgPreview = document.querySelector(".img-preview");

    sampulLabel.textContent = sampul.files[0].name;

    const fileSampul = new FileReader();
    fileSampul.readAsDataURL(sampul.files[0]);

    fileSampul.onload = function (e) {
        imgPreview.src = e.target.result;
    };
}

// Input / Browse file

$('.custom-file-input').on('change', function () {
    let fileName = $(this).val().split('\\').pop();
    $(this).next('.custom-file-label').addClass("selected").html(fileName);
});

Jangan lupa untuk memanggil/load dihalaman index view.

Selanjutnya buat sebuah controller berita.php

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

class Berita extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->load->model('Berita_model', 'berita');
    }

    public function index()
    {
        $data['title'] = 'Halaman Berita';
        $data['berita'] = $this->berita->getAllBerita();


        $this->load->view('templates/header',  $data);
        $this->load->view('templates/sidebar', $data);
        $this->load->view('templates/topbar', $data);
        $this->load->view('berita/index', $data);
        $this->load->view('templates/footer');
    }

    public function tambah()
    {
        $data['title'] = 'Tambah Berita';
        $data['kategori'] = $this->berita->getKategoriBerita();

        $this->form_validation->set_rules('judul', 'Judul Surat', 'required');
        $this->form_validation->set_rules('isi_berita', 'Isi Berita', 'required');
        $this->form_validation->set_rules('kategori', 'Kategori', 'required');
        $this->form_validation->set_rules('status', 'Status', 'required');

        if ($this->form_validation->run() == false) {
            $this->load->view('templates/header',  $data);
            $this->load->view('templates/sidebar', $data);
            $this->load->view('templates/topbar', $data);
            $this->load->view('berita/tambah', $data);
            $this->load->view('templates/footer');
        } else {
            $this->berita->tambahBerita();
            $this->session->set_flashdata('flash', 'Ditambahkan');
            redirect('berita');
        }
    }

    public function hapus($id, $file)
    {
        $path = './assets/img/berita/';
        if ($file != 'default.jpg') {
            unlink(FCPATH . $path . $file);
        }

        $id = [
            'id' => $id
        ];

        $this->berita->hapusBeritaById($id);
        $this->session->set_flashdata('flash', 'Dihapus');
        redirect('berita');
    }
    public function edit($id = 0)
    {
        $data['title'] = 'Edit Berita';
        $data['berita'] = $this->berita->getBeritaById($id);
        $data['status'] = ['draft', 'publish'];
        $data['kategori'] = $this->berita->getKategoriBerita();

        $this->form_validation->set_rules('judul', 'Judul Surat', 'required');
        $this->form_validation->set_rules('isi_berita', 'Isi Berita', 'required');
        $this->form_validation->set_rules('kategori', 'Kategori', 'required');
        $this->form_validation->set_rules('status', 'Status', 'required');

        if ($this->form_validation->run() == false) {
            $this->load->view('templates/header',  $data);
            $this->load->view('templates/sidebar', $data);
            $this->load->view('templates/topbar', $data);
            $this->load->view('berita/edit', $data);
            $this->load->view('templates/footer');
        } else {
            $this->berita->editBerita($id);
            $this->session->set_flashdata('flash', 'Diupdate!.');
            redirect('berita');
        }
    }
}

Kemudian Buat Model model_berita.php

<?php

class Berita_model extends CI_Model
{
    public function getAllBerita()
    {
        return $this->db->select('b.*, k.*')
            ->from('berita as b')
            ->join('kategori as k', 'b.id_kategori=k.id_kategori')
            ->get()->result_array();
        // return $this->db->get('berita')->result_array();
    }

    public function getKategoriBerita()
    {
        return $this->db->get('kategori')->result_array();
    }

    public function tambahBerita()
    {

        $gambar = $_FILES['image']['name'];

        if ($gambar = '') {
        } else {

            $config['allowed_types'] = 'jpg|png|jpeg';
            $config['max_size']     = '500';
            $config['upload_path'] = './assets/img/berita/';
            $config['encrypt_name'] = TRUE;
            // $new_name = time() . $_FILES["userfiles"]['name'];
            // $config['file_name'] = $new_name;

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

            if (!$this->upload->do_upload('image')) {

                $no_image = 'default.jpg';

                $data = [
                    'judul_berita' => $this->input->post('judul', true),
                    'tanggal' => $this->input->post('tanggal', true),
                    'isi_berita' => $this->input->post('isi_berita', true),
                    'id_kategori' => $this->input->post('kategori', true),
                    'penulis' => 'Admin',
                    'foto' => $no_image,
                    'status' => $this->input->post('status', true),
                    'counter' => 0

                ];

                $this->db->insert('berita', $data);
                $this->session->set_flashdata('flash', 'Ditambahkan & gambar gagal di upload, ukuran melebih 500Kb / tipe file salah!.');

                redirect('berita');
            } else {
                $gambar = $this->upload->data('file_name', true);

                $data = [
                    'judul_berita' => $this->input->post('judul', true),
                    'tanggal' => $this->input->post('tanggal', true),
                    'isi_berita' => $this->input->post('isi_berita', true),
                    'id_kategori' => $this->input->post('kategori', true),
                    'penulis' => 'Admin',
                    'foto' => $gambar,
                    'status' => $this->input->post('status', true),
                    'counter' => 0

                ];
                $this->session->set_flashdata('flash', 'Ditambahkan');
                $this->db->insert('berita', $data);
            }
        }
    }

    public function hapusBeritaById($id)
    {
        $this->db->where($id);
        return $this->db->delete('berita');
    }

    public function getBeritaById($id)
    {
        return $this->db->get_where('berita', ['id' => $id])->row_array();
    }
    public function editBerita($id)
    {
        $data['berita'] = $this->db->get_where('berita', ['id' => $id])->row_array();

        // cek jika ada gambar yang di upload
        $upload_image = $_FILES['image'];

        if ($upload_image) {
            $config['allowed_types'] = 'jpg|jpeg|png';
            $config['max_size']     = '500';
            $config['upload_path'] = './assets/img/berita';
            $config['encrypt_name'] = TRUE;

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

            // upload foto baru
            if ($this->upload->do_upload('image')) {
                $old_image = $data['berita']['foto'];
                $path = './assets/img/berita/';

                // hapus foto lama selain foto default
                if ($old_image != 'default.jpg') {
                    unlink(FCPATH . $path . $old_image);
                }
                // ganti foto lama dengan baru
                $new_image = $this->upload->data('file_name');
                $this->db->set('foto', $new_image);
            } else {

                $data = [
                    'judul_berita' => $this->input->post('judul', true),
                    'tanggal' => $this->input->post('tanggal', true),
                    'isi_berita' => $this->input->post('isi_berita', true),
                    'id_kategori' => $this->input->post('kategori', true),
                    'penulis' => 'Admin',
                    'status' => $this->input->post('status', true),
                    'counter' => 0
                ];

                $this->db->where('id', $this->input->post('id'));
                $this->db->update('berita', $data);

                $this->session->set_flashdata('flash', 'Diupdate, tidak ada gambar baru yang diupload / tipe file salah / Ukuran Gambar Berita Terlalu Besar');
                redirect('berita');

                // $this->upload->display_errors();
                // $this->session->set_flashdata('flashError', 'Diupdate!.');
                // redirect('berita');
            }
        }

        $data = [
            'judul_berita' => $this->input->post('judul', true),
            'tanggal' => $this->input->post('tanggal', true),
            'isi_berita' => $this->input->post('isi_berita', true),
            'id_kategori' => $this->input->post('kategori', true),
            'penulis' => 'Admin',
            'status' => $this->input->post('status', true),
            'counter' => 0
        ];

        $this->db->where('id', $this->input->post('id'));
        $this->db->update('berita', $data);
    }
}

Ikuti tulisan menarik lainya :

Apabila bermanfaat bisa bantu di share tulisannya ke teman-teman lainnya, terima kasih karena telah membaca tutorial ini sampai akhir, untuk lebih lengkapnya silahkan download source code pada link berikut :

Membuat Notifikasi Menggunakan Sweetalert di Codeigniter 3

Download Sourcecode

You may also like...

Membuat Notifikasi Menggunakan Sweetalert di Codeigniter 3

Download Sourcecode

Share and Enjoy !

You may also like...

Petingnya Membuat URL Alias Pada Framework Codeigniter

Tutorial Codeigniter 4 : Konsep Dasar CI4 Yang Penting Untuk Diketahui

Aplikasi Buku Tamu Online Berbasis Web Dengan Codeigniter 3

Tulisan Populer

Share

Copy short link