Bootstrap Modal and Ajax || Praktikum 3

Assalamualaikum..
Halo berjumpa lagi di blog praktikum..
kali ini saya akan membahas bagai mana Bootsrap modal penggunaanya dan ajax..

Pertama apa itu modal??
Modal bootstrap adalah semacam kotak dialog yang muncul di tengah-tengah layar.
jadi fungsinya ini itu adalah sebagai pemberi pesan berupa konfimasi ataupun hal lainya..
Dan apa itu Ajax??
suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif.

..

Pertama-tama yang harus di lakukan
1.Menyiapkan JQuery,bootsrapnya,dan toastr.
2.Hubungkan media dengan project kalian..

Lanjut ke cara, contoh dan hasilnya :.....

1.Menghubungkan
JQuery,bootsrapnya,dan toastr dengan project kalian..

pertama download dulu media tadi
untuk contoh loksi penyimpananya sebagi berikut ini :


    <script type="text/javascript" src="<?php echo base_url() ?>/assets/media/js/jquery.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url() ?>/assets/media/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url() ?>/assets/media/plugins/toastr/toastr.min.js"></script>

    <link rel="stylesheet" href="<?php echo base_url() ?>/assets/media/css/bootstrap.min.css">
    <link rel="stylesheet" href="<?php echo base_url() ?>/assets/media/plugins/toastr/toastr.min.css">

selanjutnya mulai kita mengcoding...

Pertama kita buat modal Bootsrapnya :

Simpan di Bawah akhir sebelum tag Body

selanjutnya kita tambahkan Class bootstrap untuk membuat button pada web , contoh nya Web CRUD saya ini..

    <a href="edit.php?nis=<?= $siswa['nis'] ?>" class="btn btn-warning">Edit</a>//CLASS
    <a href="delete.php?nis=<?= $siswa['nis'] ?>" class="btn btn-danger btnDelete">Delete</a> //CLASS

nahh selanjutnya tambah kan JavaScript nya sama yaitu di bawah sebelum tag Body

Selanjutnya Pada Delete.php
tambhakan result Ajax nya

nahh untuk Hasilnya ini :

Tambah Data Baru

ketika akan di hapus datanya

Modalnya Muncul

Ketika di Hapus (Ya) seusudah di hapus

Ada Pemberitahuan/Konfirmasi Seperti Contohnya

Terimakasihh Telah Berkunjungg....

Komentar

Postingan populer dari blog ini

Tampilan Multi Media Di web || Paktikum 7

Html, Untuk menampilkan MultiMedia di web. Hallo, Assalamu'alaikum.. Selamat Datang di Blog Praktikum. Kali ini Saya Akan Menjelaskan, Membagikan, Beberapa HTML untuk tampilan audio Dan Video di Web. Berikut Caranya : 1.Tampilan Audio. Tampilan Audio Ini Adalah Ketika Kita Ingin Menambah kan berupa audio tambahan Di web kita.. ini adalah tampilan atau preview dari tampilan audio Saya. Dan Berikut ini dalam bentuk HTML nya Arti tag <Audio> adalah untuk memutar audio di browser Dan audio Controls Digunakan untuk memutar ulang audio ketika selesai Arti Tag <Source> Tag untuk membuat sumber beberapa media untuk elemen media (<video> dan <audio> di html nya. 2.Embed Audio Embed Audio Adalah cara untuk Menampilkan dan memutar Adio di Browser atau web Secara Otomatis Berikut Adalah contohnya ini adalah contoh Embed audio Auto Play. Dan Ini html nya Perhatikan Di html di atas Ada Tag <embed> tag t...

Baca selengkapnya

CSS untuk Memformat Tampilan Multimedia & Tabel || Praktikum 10

CSS untuk memformat tampilan Multimedia & tabel Assalamualaikum wr wb.. Selamat datang di Web Praktikum. Postingan yang berikut ini adalah lanjutan pembahasan dari web sebelum nya Yaitu Pembahasan tentang CSS. Kali ini saya akan membagikan bagaimana Pemformatan Tampilan Multi media dan tabel menggunakan CSS berikut caranya.. 1. Embeded Background Dengan Image di CSS Di bagian ini adlah penggunaan image untuk background menggunakan pemformatan CSS berikut ini contoh nya ini codingan nya dan ini adalah Preview nya 2.Embeded Image untuk Background Image ini adalah bagian untuk menempaktkan image sebagai background dengan ukuran yang dapat di sesuaikan oleh kita dengan Css berikut ini Codingan nya ini hasilnya 3.Embeded image Css bangian ini adalah pemposisian image memggunakan Css lihat hasil san codingan nya ini kodingan nya ini hasil preview nya 4.Embeded Video Css pengaturan Vide...

Baca selengkapnya

JAVA SCRIPT : PERULANGAN DAN FUNGSI || Praktikum 15

Assalamualaikum wr wb.. Selamat datang di blog Praktikum.. kali ini saya akan menjelaskan bagai mana penggunaan Perulangan dan Fungsi Di java Script. Berikut ini adalah Penjelasanya Struktur Kontrol Perulangan Perulangn merupakan struktur yang memungkinkan menjalankan kode program yang sama beberapa kali perulang di java script memiliki 3 bentuk yaitu : for while do-while a. perulangn for for(inisialisai; kondisi; peubah;){ baris program } b. perulangan while (kondisi){ kode program yang inigin di jalankan beberapa kali } c. perulangan Do-While do{ kode program yang ingin di jalan kan bebebrpa kali; }while(kondisi); contoh programnya 1.Buat perulangan ini kodinganya : ini hasilnya : 2.Perulangan For ini kodinganya : ini hasil nya : seperti yang di lihat di kodingan bahwa kodisinya menunjukan <=5 maka kata atau kalimat yang ingin kita ulang akan di ulang sebanyak 5x; 3.perulangan While ini kodin...

Baca selengkapnya

Praktikum

Cari Blog Ini