• Contact Us
Tuesday, December 20, 2022
-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
June 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

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

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

Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

June 2, 2022
Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

June 8, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

May 30, 2022
REST API Login dan Register Node.js dengan JWT

REST API Login dan Register Node.js dengan JWT

July 28, 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
Membuat Sitemap Otomatis Codeigniter 4

Membuat Sitemap Otomatis Codeigniter 4

1
Access MongoDB With Node.JS

Akses MongoDB Dengan Node.JS

September 26, 2022
Teorema Structured Control

Basic Programming – Structured Control Theorem

September 23, 2022
WEB CRUD LocalStorage Menggunakan JavaScript

WEB CRUD LocalStorage Menggunakan JavaScript

September 22, 2022
DOM dan GOM Javascript

Perbedaan BOM Dan DOM Pada JavaScript

September 20, 2022
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 infinite scroll javascript javascript tutorial laravel laravel 8 laravel9 laravel 9 load more ajax Menggunakan Multiple select2 dan menyimpan dengan format json 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 uang dari blog

Recent News

Access MongoDB With Node.JS

Akses MongoDB Dengan Node.JS

September 26, 2022
Teorema Structured Control

Basic Programming – Structured Control Theorem

September 23, 2022

© 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