KELUARGA IT – Pada tutorial kali ini keluargaIT akan berbagi tentang pemakaian bootstrap pada Button dengan JQuery yang hasilnya ketika di klik button tersebut akan tersembunyi.
Ikuti Langkah – Langkah berikut ini :
- Download Bootstrap saat ini v4 https://getbootstrap.com/
- ekstrak File ZIP Bootstrap yang berisi 2 folder (css dan js)
Ekstrak File ZIP Bootstrap hasil download - Buat folder latihan_dua pada Ampps\www\ atau xampp\htdocs\
- Pastekan folder css dan js ke folder latihan_dua
- Download jquery.min.js di url : http://jquery.com/download/ jika hasil download ada versi jquery silahkan di ubah menjadi jquery.min.js dan letakan di folder js (latihan_dua/js)
Tampilan struktur folder file jquery.min.js pada folder js
- Buat file index.php pada folder latihan_dua
disini di praktekan menggunakan editor sublime text (bisa pakai notepad++, dll) - disini di praktekan menggunakan editor sublime text (bisa pakai notepad++, dll)
- isi dari file index.php memanggil css/bootstrap.min.css dan pembuatan script button bootstrap dengan memanggil class btn btn-success :
Script untuk Memanggil File Bootstrap.min.js didalam folder css - Jalankan dengan mengetikan URL pada browser localhost/latihan_dua
hasil latihan bootstrap button - Di atas sudah terlihat file bootstrap.min.css sudah terpanggil href nya dan class button btn btn-success sudah berjalan dengan hasil seperti di atas.
- Sekarang menjalankan fungsi button hide/tersembunyi saat di klik dengan menambahkan script garis di tandai dengan warna merah di bawah ini :
Memanggil file jquery.min.js - Refresh browser dengan menekan tombol F5 atau ctrl+F5 dan di klik button akan menghasilkan hasil seperti di bawah ini :
Berhasil ketika button di klik maka button akan hide/tersembunyi
Selesai dan Tunggu Tutorial Selanjutnya dari Keluarga IT (wto)
