Ada beberapa cara yang dapat dilakukan untuk memberi tahu pengguna tentang suatu informasi penting pada suatu halaman. Salah satu cara yang umum digunakan adalah dengan menggunakan alert atau peringatan. Pada kesempatan ini, kita akan membahas beberapa cara untuk membuat alert pada berbagai platform seperti Bootstrap Vue, PHP dengan Sweet Alert, Android Studio, dan Microsoft Excel. Kalian juga akan diberikan FAQ yang berguna untuk memperdalam pemahaman tentang penggunaan alert serta video tutorial yang dapat membantu lebih memahami materi ini.
Cara Membuat Alert di Bootstrap Vue
Bootstrap Vue adalah salah satu library UI yang populer dan mempermudah dalam pembuatan interface pada website. Salah satu komponen dari Bootstrap Vue yaitu Alert. Dengan menggunakan Alert dari Bootstrap Vue, kita dapat memberikan peringatan kepada pengguna tentang informasi penting seperti suatu tindakan yang sukses atau gagal. Berikut adalah langkah-langkah cara membuat alert di Bootstrap Vue:
-
Buat projek Vue baru dengan menggunakan perintah
vue create project-name
di terminal. -
Install Bootstrap Vue pada projek baru dengan menggunakan perintah
npm i bootstrap-vue
. -
Tambahkan code snippet di bawah ini ke dalam script pada template Vue:
<template> <b-container fluid> <b-row> <b-col> <b-button @click="showAlert">Click to Show Alert</b-button> </b-col> </b-row> </b-container> </template> <script> import BButton, BContainer, BRow, BCol, BAlert from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' export default name: 'App', components: 'b-button': BButton, 'b-container': BContainer, 'b-row': BRow, 'b-col': BCol, 'b-alert': BAlert , methods: showAlert () this.$bvToast.toast('Halo, ini adalah contoh alert', title: 'Alert', toaster: 'b-toaster-top-full', variant: 'danger', solid: true, autoHideDelay: 2000, noAnimation: true, appendToast: true )
-
Jalankan projek Vue baru dengan menggunakan perintah
npm run serve
pada terminal. - Setelah projek Vue berhasil dikompilasi, akan terdapat tombol “Click to Show Alert” pada halaman Vue. Apabila tombol tersebut di klik, akan muncul alert pada bagian atas halaman.
Cara Membuat Notifikasi Edit dan Delete Data di PHP dengan Sweet Alert
Sweet Alert adalah library Javascript yang dapat digunakan untuk memodifikasi tampilan alert pada website. Berbeda dengan alert bawaan dari browser, Sweet Alert memiliki tampilan yang lebih menarik dan dapat dikustomisasi dari segi desain dan fungsi. Pada tutorial ini, kita akan menggunakan Sweet Alert untuk memberikan notifikasi kepada pengguna tentang berhasil atau gagalnya aksi edit dan delete pada suatu data di PHP dengan AJAX. Berikut adalah langkah-langkah cara membuat notifikasi edit dan delete pada data di PHP dengan Sweet Alert:
-
Buat file PHP baru dengan nama
data.php
dandelete.php
. -
Tambahkan code snippet di bawah ini pada file
index.php
:<!-- Load library Sweet Alert --> <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script> <script> $(document).ready(function() /* Penjelasan: Ketika tombol edit pada suatu data di klik, akan muncul modal dengan form edit Ketika submit di klik pada modal form edit, akan dijalankan function AJAX untuk proses update data */ $("body").on("click", ".edit-btn", function(e) e.preventDefault(); var edit_id = $(this).attr('edit-id'); $.ajax( url: "edit_data.php", method: "POST", data: id: edit_id , success: function(response) $("#edit_modal").modal('show'); $("#edit_modal").html(response); ); ); $("body").on("click", ".update-data", function(e) e.preventDefault(); var id = $("#edit-id").val(); var name = $("#name").val(); var city = $("#city").val(); $.ajax( url: "update_data.php", method: "POST", data: id: id, name: name, city: city , success: function(response) swal("Sukses!", "Data berhasil diupdate!", "success").then((value) => window.location.replace("index.php"); ); ); ); $("body").on("click", ".delete-btn", function(e) e.preventDefault(); var delete_id = $(this).attr('delete-id'); swal( title: "Anda yakin?", text: "Data yang dihapus tidak dapat dikembalikan!", icon: "warning", buttons: true, dangerMode: true, ) .then((willDelete) => if (willDelete) $.ajax( url: "delete.php", method: "POST", data: id: delete_id , success: function(response) swal("Sukses!", "Data berhasil dihapus!", "success").then((value) => window.location.replace("index.php"); ); ); ); ); ); </script>
-
Jalankan
index.php
pada browser dan coba untuk melakukan aksi delete atau edit pada data yang tersedia. - Apabila aksi delete atau edit berhasil dilakukan, maka akan muncul notifikasi Sweet Alert yang memberikan informasi berhasil atau gagalnya aksi tersebut.
Tutorial Dasar Cara Membuat Alert Dialog di Android Studio
Alert dialog merupakan salah satu jenis dialog pada Android Studio yang digunakan untuk memberikan notifikasi atau meminta aksi dari pengguna. Alert dialog dapat muncul dalam bentuk teks, tombol, atau gambar. Pada kesempatan ini, kita akan membahas cara membuat alert dialog di Android Studio. Berikut adalah langkah-langkah cara membuat alert dialog di Android Studio:
- Buat projek baru dengan menggunakan Android Studio.
-
Tambahkan code snippet di bawah ini pada file
MainActivity.java
:import androidx.appcompat.app.AlertDialog; import androidx.appcompat.app.AppCompatActivity; import android.content.DialogInterface; import android.os.Bundle; import android.view.View; import android.widget.Button; public class MainActivity extends AppCompatActivity Button btnShowAlert; @Override protected void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); btnShowAlert = findViewById(R.id.btnShowAlert); btnShowAlert.setOnClickListener(new View.OnClickListener() @Override public void onClick(View view) AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this); builder.setTitle("Contoh Alert Dialog"); builder.setMessage("Ini adalah alert dialog"); builder.setPositiveButton("OK", new DialogInterface.OnClickListener() @Override public void onClick(DialogInterface dialogInterface, int i) dialogInterface.dismiss(); ); AlertDialog alert = builder.create(); alert.show(); );
-
Tambahkan button ke dalam
activity_main.xml
menggunakan code snippet di bawah ini:<Button android:id="@+id/btnShowAlert" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Show Alert Dialog" />
- Jalankan projek pada emulator atau device Android yang tersedia.
- Ketika tombol “Show Alert Dialog” di klik, maka akan muncul alert dialog yang berisi pesan “Ini adalah alert dialog” dan tombol “OK”.
Cara Membuat Alert Di Excel
Excel adalah salah satu program dari Microsoft Office yang berguna untuk pengolahan data dalam bentuk tabel atau spreadsheet. Salah satu fitur dari Excel yaitu alert. Alert digunakan untuk memberikan notifikasi atau peringatan kepada pengguna tentang informasi penting pada suatu data atau tindakan yang akan dilakukan. Berikut adalah langkah-langkah cara membuat alert di Excel:
- Buka file Excel yang ingin ditambahkan alert-nya.
- Pilih sel atau range yang ingin diberikan alert.
- Klik kanan pada sel atau range yang dipilih, kemudian pilih “Conditional Formatting” -> “New Rule”.
- Pada jendela Format Rule, pilih “Format Only Cells that Contain” -> “Cell Value” -> “equal to”. Kemudian masukkan nilai yang ingin diberikan alert pada kolom Value.
- Setelah itu, klik Format, pilih tab Fill, dan pilih warna yang ingin diberikan pada sel disertai dengan alert.
- Klik OK untuk menyimpan perubahan.
- Selanjutnya, jika terdapat penggunaan formula SUM pada deretan data yang dicari, maka yang perlu diberikan tanda alert tersebut merupakan sel tempat formula ditempatkan. Pada contoh tutorial ini, penggunaan formula SUM di deretan data “Fruits” ditempatkan pada sel F7.
FAQ
Apa itu alert?
Alert merupakan sebuah fitur yang digunakan untuk memberikan notifikasi atau peringatan kepada pengguna tentang informasi penting pada suatu data atau tindakan yang akan dilakukan. Alert biasanya berupa pesan singkat yang muncul pada suatu halaman dan sering diberikan dalam bentuk teks, suara, atau gambar.
Apa bedanya alert native dengan alert dari library?
Alert native merupakan alert bawaan dari browser atau dari sistem operasi yang digunakan pada perangkat. Sedangkan alert dari library merupakan alert yang ditambahkan melalui library atau plugin atau modul agar tampilan atau fungsi yang dihasilkan menjadi lebih menarik, mudah digunakan, dan dapat dikustomisasi. Alert dari library merupakan alternatif yang lebih fleksibel daripada alert bawaan dari browser atau sistem operasi.