• Contact Us
Rabu, Desember 6, 2023
-18 °c
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English
No Result
View All Result
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English
No Result
View All Result
Plugin Install : Cart Icon need WooCommerce plugin to be installed.
Teman Ngoding
No Result
View All Result

Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

admin by admin
Juni 8, 2022
in Codeigniter, Tutorial
0 0
0
Home Tutorial Codeigniter

This post is also available in: English

Hallo apa kabar teman teman semuanya, semoga sehat dan sukses selalu.

Kali ini kita akan membuat notifikasi menggunakan SweetAlert. Kalian dapat mempelajari tutorial codeigniter 4 yang lainnya di sini:

Tutorial CodeIgniter 4 part 2 ~ Rest Api CRUD Codeigniter 4

Tutorial Codeigniter 4 ~ Load more menggunakan ajax

Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

SweetAlert merupakan plugin dari jquery yang berguna untuk membuat notofikasi pada aplikasi. saya anggap teman teman semuanya telah dapat menginstall Framework Codeigniter 4. bagi yang belum bisa silahkan pelajari di sini.

Required Plugin Files

JS File

https://cdn.jsdelivr.net/npm/sweetalert2@9.17.2/dist/sweetalert2.min.js

CSS File

https://cdn.jsdelivr.net/npm/sweetalert2@9.17.2/dist/sweetalert2.min.css

Kalian perlu untuk menggunakan CSS dan JS sweetAlert yaitu untuk merubah tampilan dari notifikasi. Untuk dokumentasinya kalian dapat memperlajarinya di sini Klik di Sini.

Implementasi Plugin Jquery SweetAlert

Mari kita buat contoh aplikasi menggunakan SweetAlert, ikuti langkah langkahnya di bawah ini.

Create Route

Kita konfigurasi Routes.php yang berlokasi di folder /app/config.

//...

$routes->get('notification', 'MessageController::showSweetAlertMessages');

//...

Create Controller

$ php spark make:controller Message --suffix

Open MessageController.php from /app/Controllers

<?php

namespace App\Controllers;

use App\Controllers\BaseController;

class MessageController extends BaseController
{
	public function showSweetAlertMessages()
	{
		// Flash messages settings

		session()->setFlashdata("success", "This is success message");

		session()->setFlashdata("warning", "This is warning message");

		session()->setFlashdata("info", "This is information message");

		session()->setFlashdata("error", "This is error message");

		return view("sweetalert-notification");
	}
}

Create Blade Template File

Buatlah file yang diberi nama sweetalert-notification.php pada folder /app/Views.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9.17.2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/sweetalert2@9.17.2/dist/sweetalert2.min.css">


<script>
$(function(){

    <?php if(session()->has("success")) { ?>
        Swal.fire({
            icon: 'success',
            title: 'Great!',
            text: '<?= session("success") ?>'
        })
    <?php } ?>
});
</script>

Di bawah ini beberapa kode untuk menampilkan notifikasi berdasarkan informasi yang di terima.

Error Block

<script>
$(function(){

    <?php if(session()->has("error")) { ?>
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: '<?= session("error") ?>'
        })
    <?php } ?>
});
</script>

Warning Block

<script>
$(function(){

    <?php if(session()->has("warning")) { ?>
        Swal.fire({
            icon: 'warning',
            title: 'Great!',
            text: '<?= session("warning") ?>'
        })
    <?php } ?>
});
</script>

Information Block

<script>
$(function(){

    <?php if(session()->has("info")) { ?>
        Swal.fire({
            icon: 'info',
            title: 'Hi!',
            text: '<?= session("info") ?>'
        })
    <?php } ?>
});
</script>

Jalankan apliaksi kalian dengan menggunakan

$ php spark serve

URL – http://localhost:8080/notification

Success

Warning

Informastion

Error

Demikian tutorial kali ini yang bisa saya sampaikan, semoga bermanfaat.

Tags: codeignitercodeigniter 4notifikasi codeigniter 4sweet alert codeignitersweetalertsweetalrt codeignitertutorial codeigniter 4
ShareTweetShare
admin

admin

Next Post
Tutorial Laravel ~ Laravel Eloquent Relationships

Tutorial Laravel ~ Laravel Eloquent Relationships

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

  • Trending
  • Comments
  • Latest
Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

Juni 2, 2022
REST API Login dan Register Node.js dengan JWT

REST API Login dan Register Node.js dengan JWT

Juli 28, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

Mei 30, 2022
Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

Juni 8, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

5
Rekomendasi tempat belajar pemrograman

Rekomendasi tempat belajar pemrograman

3
Menghilangkan Public dan Index.php dari URL Codeigniter 4

Menghilangkan Public dan Index.php dari URL Codeigniter 4

2
Migration Laravel

Migration Laravel

1
HTML Fundamentals – HTML Basic

HTML Fundamentals – HTML Basic

Mei 19, 2023
Pekerjaan Apa yang Akan Diganti oleh AI?

Pekerjaan Apa yang Akan Diganti oleh AI?

Mei 11, 2023
Programmer Atau Hacker?

Programmer Atau Hacker?

April 6, 2023
PENGENALAN BACKEND DEVELOPER

Pemrograman Backend Developer

April 5, 2023
Teman Ngoding

Teman Ngoding tempat berbagi tutorial pemrograman
Read more

Categories

  • Berita
  • C++
  • Codeigniter
  • Events
  • Flutter
  • Golang
  • Java
  • Javascript
  • Laravel
  • MongoDB
  • News
  • Node JS
  • Pemrograman
  • PHP
  • Problem Solution
  • React JS
  • SQL
  • Tutorial
  • TypeScript
  • TypeScript
  • Video Codeigniter
  • Video Git
  • Video Laravel
  • Video Tutorial

Tags

ajax belajar golang belajar reactjs blog browser seluler Cara mendapatkan Uang dari Blog codeigniter codeigniter 3 codeigniter 4 codeigniter4 embed html Error Handling flutter flutter vs react native golang golang dasar html html basic html dasar infinite scroll javascript javascript tutorial laravel laravel 8 laravel 9 laravel9 load more ajax mongodb nodejs pdf pemrograman ajax pemrograman golang pemrograman php reactjs reactjs tutorial reactjs vs react native rest api rest api codeigniter 4 tutorial codeigniter 4 tutorial golang tutorial javascript tutorial laravel tutorial laravel 8 tutorial nodejs tutorial reactjs

Recent News

HTML Fundamentals – HTML Basic

HTML Fundamentals – HTML Basic

Mei 19, 2023
Pekerjaan Apa yang Akan Diganti oleh AI?

Pekerjaan Apa yang Akan Diganti oleh AI?

Mei 11, 2023

© 2022 Teman Ngoding.

No Result
View All Result
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English

© 2022 Teman Ngoding.

Login to your account below

Forgotten Password?

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
  • English
  • Indonesia