Assalamu'alaikum wr.wb.
A. Pengertian
Bootstrap adalah kerangka front-end gratis untuk pengembangan web lebih cepat dan lebih mudah.
Bootstrap termasuk HTML dan CSS desain template berbasis tipografi, bentuk, tombol, tabel, navigasi, kata modal, komidi putar gambar dan banyak plugin JavaScript opsional lainnya, serta bootstrap juga memberikan kemampuan untuk dengan mudah membuat desain responsif.
B. Latar Belakang
Desain web responsif adalah tentang menciptakan situs web yang secara otomatis menyesuaikan diri untuk terlihat baik pada semua perangkat, dari ponsel kecil untuk desktop besar.
Bootstrap adalah kerangka front-end gratis untuk pengembangan web lebih cepat dan lebih mudah. Keuntungan dari Bootstrap:
- Mudah digunakan: Siapa saja dengan pengetahuan hanya dasar dari HTML dan CSS dapat mulai menggunakan Bootstrap.
- Fitur responsif: CSS responsif Bootstrap ini menyesuaikan dengan ponsel, tablet, dan desktop.
- Pendekatan Mobile-pertama: Dalam Bootstrap 3, gaya mobile-first merupakan bagian dari kerangka inti.
- Kompatibilitas browser: Bootstrap kompatibel dengan semua browser modern (Chrome, Firefox, Internet Explorer, Safari, dan Opera).
C. Alat dan Bahan
- File Bootstrapt
- Laptop
- Sublimetext (Text Editor)
- Browser
- OS XUbuntu 16.04
D. Tujuan
Bertujuan untuk mempelajari dan memahami apa itu bootstrap, bagaimana mengakses atau memberi hak akses bootstrap secara offline.
E. Tahap Pelaksanaan
- Pertama, kita siapkan file bootstrap nya terlebih dahulu. Saya sudah memiliki filenya, jika belum bisa di download terlebih dahulu disini tau di website resminya disini. Saya letakkan file bootstrap di Music dan file nya harus berupa zip atau tar untuk kita copy ke /var/www/html.
- Kedua, kita buka Terminal Emulator atau Terminal dari Menu -> Terminal. Lalu kita masuk ke super user yaitu dengan cara memasukkan perintah "sudo su" dan jangan lupa passwordnya.
- Setelah itu kita akan keluar terlebih dahulu dari root dengan memasukkan perintah "exit".
- Setelah keluar dari root kita akan masuk ke tempat file dari bootstrap yaitu di Music dengan cara memasukkan perintah "cd /home/alidaf/Music/" ingat setelah kata cd itu harus ada spaci. Biasakan gunakan tombol Tab untuk setiap kali mengetikkan perintah.
- Kita sudah masuk ke directory aktif nya yaitu di Music. Langkah berikutnya yaitu kita lihat isi yang ada di dalam directory tersebut yaitu dengan perintah "ls -l".
- Gambar diatas merupakan hasil dari penampilan data yang kita lakukan di Music. Berikutnya kita akan pindahkan file Bootstrap yang berformat zip tersebut ke /var/www/html. Dengan memasukkan perintah "sudo cp /home/alidaf/Music/Bootstrap.zip /var/www/html/".
- Langkah berikutnya kita berganti directory aktif /var/www/html/ dengan memasukkan perintah "cd /var/www/html".
- Setelah itu kita lihat data apa saja yang ada di /var/www/html dan memastikan sudah ada atau belum bootstrap yang kita copy tadi.
- Sebelum kita memberikan hak akses kita akan mengekstrak terlebih dahulu filenya yaitu dengan cara memasukkan perintah "sudo unzip bootstrap.zip".
- Dari gambar diatas ternyata sudah ada bootstrap yang kita copy. Langsung saja kita berikan hak akses nya yaitu dengan memasukkan perintah " sudo chown -R alidaf:www-data bootstrap.zip".
- Kita sudah memberikan hak akses untuk file tersebut, untuk mencobanya kita akan membuat sesuatu menggunakan bootstrap.
- Dibawah ini saya akan membuat contoh sederhana menggunakan bootstrap. Sebelum masuk ke penerapan bootstrap kita akan mengetahui bagian-bagian dari bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
<meta name="viewport" content="width=device-width, initial-scale=1">
Keterangan :
- width=device-width : bagian menetapkan lebar halaman untuk mengikuti layar-lebar perangkat (yang akan bervariasi tergantung pada perangkat).
- initial-scale=1 : bagian menetapkan tingkat zoom awal saat halaman pertama dimuat oleh browser.
3. Container : bootstrap juga membutuhkan elemen yang mengandung untuk membungkus isi situs. Ada dua kelas kontainer untuk memilih dari:
- .container : kelas menyediakan responsif wadah lebar tetap.
- .container-fluid : kelas menyediakan wadah lebar penuh, yang mencakup seluruh lebar viewport.
- Dibawah ini merupakan contoh penerapan bootstrap.
- Pertama buka sublime text atau text editor yang lainnya.
- Masukkan coding seperti dibawah ini.
 |
| Gambar 1. |
 |
| Gambar 2. |
 |
| Gambar 3. |
- Pemanggilan dari bootstrap terletak dibawah <head>
- <link rel ="stylesheet" href=""> digunakan untuk memanggil bootstrap.css
- <script scr =""></script> digunakan untuk memanggil bootstrap.js
- Gambar 2 : merupakan pemanggilan dari class yang ada di file bootstrap.
- Gambar 3 : juga merupakan pemanggilan dari class untuk membuat colom yang responsive.
- Cara pemanggilan file .php yaitu buka browser dan ketikkan "localhost/latihan/bootstrap.php".
- Hasil dari pengcodingan diatas yaitu seperti dibawah ini.
 |
| Gambar 1. Hasil pemanggilan di browser jika full |
 |
| Gambar 2. Hasil jika di minimize browsernya |
F. Kesimpulan
Dari pemaparan diatas dapat ditarik kesimpulan bahwa bootstrap untuk pengembangan web lebih cepat dan lebih mudah. Cara yang mudah untuk menggunakan bootstrap dan tau bagimana memanggil bootstrap.
G. Referensi
- http://www.w3schools.com/bootstrap/bootstrap_get_started.asp
Sekian dan Terimakasih.
SMK Bisa!!
Wasalamu'alaikum wr.wb.
0 komentar:
Posting Komentar