Memahami dasar penggunaan dan instalasi Sweet Alert Dalam laravel

Pengertian Sweet alert

Sweet Alert adalah pustaka JavaScript yang populer untuk membuat alert atau notifikasi yang lebih menarik dan interaktif daripada alert bawaan browser. Dengan mengintegrasikan Sweet Alert dalam PHP, kamu bisa memberikan feedback yang lebih baik kepada pengguna saat mereka berinteraksi dengan aplikasi web kamu.

Berikut adalah langkah-langkah untuk menggunakan Sweet Alert di PHP.

1. Instalasi Sweet Alert

Pertama-tama, kita perlu menambahkan pustaka Sweet Alert ke dalam proyek Laravel. Ini bisa dilakukan melalui npm atau menggunakan CDN.

Menggunakan npm:

Jalankan perintah berikut di terminal untuk menginstal Sweet Alert melalui npm:

Menggunakan CDN:

Tambahkan link berikut di bagian <head> dari file resources/views/layouts/app.blade.php atau file layout utama Anda:

<head>

<!– Sweet Alert CSS –>

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/sweetalert2@10/dist/sweetalert2.min.css”> <!– Sweet Alert JS –>

<script src=”https://cdn.jsdelivr.net/npm/sweetalert2@10/dist/sweetalert2.all.min.js”>

</script>

</head>

2. Membuat Fungsi Sweet Alert

Buat fungsi JavaScript untuk menampilkan Sweet Alert. Anda dapat menambahkan fungsi ini di file JavaScript yang digunakan dalam proyek Laravel Anda, misalnya resources/js/app.js

3. Memanggil Sweet Alert di Blade Template

Anda dapat memanggil fungsi showAlert ini di blade template Anda untuk menampilkan notifikasi. Misalnya, jika Anda ingin menampilkan notifikasi setelah form berhasil dikirim, Anda bisa menambahkan kode berikut di file Blade Anda:

4. Mengatur Pesan di Controller

Di controller Laravel, Anda dapat mengatur pesan yang akan dikirimkan ke view setelah aksi tertentu, seperti penyimpanan data atau penghapusan data.

5. Kustomisasi Sweet Alert

Sweet Alert menawarkan berbagai opsi kustomisasi untuk mengubah tampilan dan perilaku notifikasi. Misalnya, Anda dapat menambahkan tombol konfirmasi atau mengubah warna tombol.

Dengan mengikuti langkah-langkah di atas, Anda dapat mengintegrasikan Sweet Alert ke dalam aplikasi Laravel Anda. Sweet Alert tidak hanya membuat notifikasi lebih menarik tetapi juga memberikan pengalaman pengguna yang lebih baik. Anda dapat menyesuaikan pesan sesuai dengan kebutuhan aplikasi Anda dan menambahkannya di berbagai bagian proyek Anda.

Untuk memahami lebih dalam, ini ada contoh menampilkan sweet alert dengan versi htmlnya

Lahkah Pertama Yaitu buat sebuah file dengan nama index.html atau yang lain
kemudian install cdn sweet alert2 yang di ambil dari https://www.jsdelivr.com/package/npm/sweetalert2

kemudian didalam body buat sebuah button seperti berikut

kemudian atur icon,title dan pesan yang ingin anda tampilkan

Kemudian run project yang anda buat tadi dan akan tampil seperti ini

Untuk Success

untuk Error

Untuk warning

Untuk Info

Dan untuk beberapa notif lain teman-teman bisa mengunjungi situs sweet alert2 langsung dan ambil di bagian examples untuk link nya https://sweetalert2.github.io/#examples

Apakah SweetAlert dapat digunakan dengan berbagai jenis proyek web dan framework?

Ya, SweetAlert dapat digunakan dengan berbagai jenis proyek web dan framework. SweetAlert adalah pustaka JavaScript yang sangat fleksibel dan mudah diintegrasikan, sehingga dapat digunakan dalam proyek-proyek yang menggunakan berbagai macam teknologi.
SweetAlert dapat digunakan di berbagai proyek web dan framework berkat fleksibilitasnya. Anda hanya perlu menyertakan pustaka SweetAlert di proyek Anda dan menyesuaikan penggunaan berdasarkan teknologi yang Anda gunakan.

Apakah SweetAlert dapatmenambahkan gambar atau ikon ke dalam pesan SweetAlert?

Anda dapat menambahkan gambar atau ikon khusus ke dalam pesan SweetAlert dengan menggunakan properti imageUrl dan imageWidth/imageHeight untuk mengatur gambar, serta imageAlt untuk teks alternatif gambar. Berikut adalah contoh penggunaan SweetAlert dengan gambar:

berikut source kode yang di gunakan

Outputnya

Kesimpulan


SweetAlert adalah sebuah pustaka JavaScript yang dirancang untuk memperbaiki tampilan dan fungsi dari alert standar yang tersedia di browser. Dengan SweetAlert, pengembang web dapat membuat alert yang lebih menarik dan interaktif, yang dapat meningkatkan pengalaman pengguna dalam aplikasi web.

Integrasi dengan PHP dan Laravel:

Untuk menggunakan SweetAlert dalam aplikasi PHP atau Laravel, Anda perlu melakukan beberapa langkah:

  1. Instalasi SweetAlert:
    • Anda bisa menginstal SweetAlert melalui npm dengan perintah npm install sweetalert2.
    • Atau menggunakan CDN dengan menambahkan skrip dan CSS SweetAlert ke dalam tag <head> di file HTML atau Blade template Laravel.
  2. Membuat Fungsi JavaScript:
    • Buat fungsi JavaScript untuk menampilkan alert dengan SweetAlert. Fungsi ini bisa ditaruh di dalam file JavaScript yang digunakan dalam proyek Laravel, seperti resources/js/app.js.
  3. Memanggil SweetAlert di Blade Template:
    • Panggil fungsi JavaScript yang Anda buat di dalam template Blade Laravel ketika Anda ingin menampilkan alert, misalnya setelah pengguna melakukan aksi tertentu.
  4. Mengatur Pesan di Controller:
    • Di dalam controller Laravel, Anda bisa mengatur pesan yang akan dikirim ke view, misalnya setelah menyimpan atau menghapus data.
  5. Kustomisasi SweetAlert:
    • Anda bisa menyesuaikan tampilan dan perilaku alert dengan menggunakan berbagai opsi yang disediakan oleh SweetAlert, seperti menambahkan tombol konfirmasi atau mengubah warna tombol.

Menambahkan Gambar atau Icon:

SweetAlert memungkinkan Anda untuk menambahkan gambar atau ikon ke dalam alert dengan mengatur properti imageUrlimageWidthimageHeight, dan imageAlt. Ini membuat alert lebih informatif dan menarik.

Kompatibilitas dengan Berbagai Proyek dan Framework:

SweetAlert dirancang untuk bekerja dengan berbagai macam proyek web dan framework JavaScript. Kompatibilitas ini membuatnya menjadi pilihan yang populer bagi pengembang yang mencari cara untuk memperkaya antarmuka pengguna dengan alert yang lebih baik.

sumber::
1. https://revou.co/panduan-teknis/sweetalert
2. https://sweetalert2.github.io/#examples
3. https://sko.dev/snippet/cara-menggunakan-sweet-alert-di-php#:~:text=Sweet%20Alert%20adalah%20pustaka%20JavaScript,berinteraksi%20dengan%20aplikasi%20web%20kamu.
4. https://upload.wikimedia.org/wikipedia/en/thumb/e/eb/Manchester_City_FC_badge.svg/800px-Manchester_City_FC_badge.svg.png

Subscribe

Related articles

Panduan Migrasi Database di Laravel

Pendahuluan Migrasi database adalah salah satu fitur penting di Laravel...

Penggunaan Machine Learning dalam Pengembangan Web

Machine learning (ML) adalah cabang dari kecerdasan buatan (AI)...

Mengenal Vue.js: Membuat Antarmuka Pengguna yang Dinamis

Vue.js adalah salah satu framework JavaScript yang populer digunakan...

Keamanan Aplikasi Web: Mengamankan Aplikasi Laravel Anda

Keamanan aplikasi web adalah aspek kritis yang harus diperhatikan...

Membangun API dengan Laravel: Best Practices

Laravel adalah framework PHP yang sangat populer untuk membangun...

LEAVE A REPLY

Please enter your comment!
Please enter your name here