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)
- 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)
- Buat file index.php pada folder latihan_dua
- 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 :
- Jalankan dengan mengetikan URL pada browser localhost/latihan_dua
- 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 :
- Refresh browser dengan menekan tombol F5 atau ctrl+F5 dan di klik button akan menghasilkan hasil seperti di bawah ini :
Selesai dan Tunggu Tutorial Selanjutnya dari Keluarga IT (wto)