Langsung ke konten utama

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

Posting Komentar

Postingan populer dari blog ini

Create Read Update Delete with Relation Tabel || Praktikum 4

Hallo Berjumpa Lagi di Blog Praktiku... Kali ini saya akan membahas tentang bagai mana dan apa itu cara untuk meralasikan 2 tabel pada data base. Contoh kasus yang diberikan adalah ketika akan menambahkan Data Siswa yang telah di buat pada postingan postingan sebelum nya, maka pilihan Kelas berasal dari tabel t_kelas yang bersifat dinamis. Artinya kita juga akan membuat CRUD sebagai data master Kelas nah jadi ketika kita memilih sebuah opsi maka opsi tersebut langsung berasal dari tabel yang kita buat di data base nya. contoh nya seperti ini : maka pada option diatas langsung berasal dari databse... untuk itu saya akan bahas.. Pertama buatlah tabel di data base dengan new tabel sebagi berikut ini dengan nama t_kelas : selanjutnya pada tabel siswa kosongkan lah datanya terlebih dahulu karena pada tabel siswa dengan tabel t_kelas kita akan mengjoinkan nya atau merelasikanya untuk mengkosongkan data agar lebih mudah tinggal masuk ke option>truncate. ...
Posting Komentar
Baca selengkapnya

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...
Posting Komentar
Baca selengkapnya

Analisis Web Dinamis || Praktikum 18

Assalamualaikum wr wb.. Selamat datang di blog Praktikum.. kali ini saya akan Meng analisis sebuah web yaitu Web jual beli . analisis di sini adalah bagai mana gambaran Site map, fungsi dari setipa menu,dan kemudahan penggunaan di web tersebut. yang pertama adalah bagai mana gambaran site map dari web jual beli. kali ini saya akan menggambarkan Site map Web jual beli yaitu Toko Pedia. berikut ini ... A.Site Map nya  Site map dari toko pedia yang saya buat   dalam membuat site map saya membuat 4 bagian yang penting saja dikarenakan posisi site map di web ini kurang di pahami atau relalu banyak yang saya buat adalah Search, akun Promo dan pusat bantuan. pada bagian Cari terbagi  8  cabang yang masing masing terbagi beberapa cabang lagi, begitupun bagian lainya. untuk lebih jelasnya saya akan menjelaskan fungsi setiap menu berikut ini. B .Fungsi Setiap Menu Di Web Toko Pedia ini adalah gambar interface dari web toko pedia ...
Posting Komentar
Baca selengkapnya