Mendesign Grid Dasar Web Portofolio Sederhana

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit... 

Selamat siang untuk kalian para pecinta scripting !!! Kali ini saya ingin berbagi ilmu bagaimana cara mendesign sebuah tampilan website portofolio sederhana untuk sebuah perusahaan menggunakan framework tampilan yaitu Boostrap 4. Berikut ini adalah tampilan halaman yang ingin kita design :

Pada tahap pertama ini saya ingin membahas tentang pembuatan grid untuk membagi ruangan (baris - kolom) agar jendela web responsive. Hal ini harus dikerjakan dengan benar karena grid - grid ini merupakan pondasi tampilan yang didesign menggunakan bootstrap 4.

Berikut ini adalah ilustrasi grid untuk tampilan website portofolio di atas :

Gunakan pengetahuan tentang container, container-fluid, row serta col yang ada di dalam Bootstrap 4 untuk menghasilkan design grid seperti di atas.

Download contoh projek.

Semoga artikel ini bermanfaat.

Read More

Situs Referensi Belajar Bootstrap 4

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit... 

Selamat pagi semuanya, semoga pagi kalian hari ini menjadi pagi yang penuh semangat. Pagi ini saya ingin membagikan kepada kalian semua yang sedang belajar mendesign tampilan web menggunakan bootstrap 4 dua buah situs yang dapat kalian gunakan untuk referensi belajar perintah - perintah di dalam bootstrap 4.

A. Situs Resmi Bootstrap 4

Situs ini pastinya tidak asing bagi kalian karena situs ini adalah situs web yang pertama akan kalian buka saat ingin belajar bootstrap 4.

Semua dokumentasi mengenai bootstrap 4 disediakan di sana, mulai dari file master bootstrap 4 offline serta seluruh petunjuk penggunaannya. Bagusnya kita tinggal copy - paste perintah yang telah disediakan di sana untuk mencoba bootstrap 4 di dalam projek kita.

Silakan teman - teman datangi situsnya dengan klik di sini. 

B. W3Schools

Situs ini juga menurut saya sangat bagus untuk kalian yang ingin belajar bootstrap 4 dari dasar. Karena di dalam situs ini pembahasan dilakukan step by step dengan penjelasan dan contoh yang mudah dimengerti.

Kelebihan situs ini adalah menyediakan jendela untuk kita melakukan edit script dan mencoba hasilnya secara langsung di sana. Sehingga kita dapat dengan segera memahami hasil dari script yang kita buat.

Silakan teman - teman datangi situsnya dengan klik di sini.

Semoga artikel ini bermanfaat.

Kembali ke menu Boostrap 4 - 

Read More

GridSystem Pada Bootstrap 4

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Apa itu Grid System pada Bootstrap 4?

Grid System adalah sistem pengaturan lebar untuk masing - masing komponen yang ingin kita buat di dalam halaman web menggunakan library framework Bootstrap 4. Pengaturan ini tujuannya adalah untuk mengatur responsivitas design halaman web yang sedang dibuat.

Dengan adanya Grid System maka pembuatan halaman web yang responsive menjadi semakin mudah karena para developer web tidak harus menuliskan coding CSS secara manual satu per satu agar design halaman web buatannya menjadi responsive.

Bagaimana Cara Kerja Grid System Bootstrap 4 ?

Di dalam bootstrap terdapat 12 Grid. Grid - grid ini dapat dibayangkan seperti kotak - kotak yang berjajar dari kiri ke kanan sebanyak 12 buah. Untuk selanjutnya, kotak - kotak ini akan kita sebut sebagai Kolom ( col ).

Ada beberapa jenis class dasar dari bootstrap 4 untuk mengendalikan grid, yaitu :

Jenis Class	Keterangan
.col-*	Untuk mengatur grid secara otomatis
.col-sm-*	Untuk mengatur grid pada ukuran layar monitor yang berukuran kecil (>=576px)
.col-md-*	Untuk mengatur grid pada ukuran layar monitor yang berukuran sedang (>=720px)
.col-lg-*	Untuk mengatur grid pada ukuran layar monitor yang berukuran besar (>=922px)
.col-xl-*	Untuk mengatur grid pada ukuran layar monitor yang berukuran ekstra besar (>=1200px)

Keterangan :

• Class .col-* artinya bahwa grid yang diatur dengan grid system ini akan dapat responsive untuk sebarang ukuran layar.
• Tanda * juga dapat diganti dengan angka 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 atau 12.
• Sebelum dapat menggunakan class .col maka harus dipanggil dahulu class .row.
• Dalam 1 row total kolom maksimalnya adalah 12. Jadi, misalkan dalam 1 row akan dibagi menjadi 2 col sama lebar maka dipanggil .col-6 dan .col-6.

Contoh :

1. Jendela browser dibagi menjadi 12 kolom.

2. Jendela browser dibagi menjadi 2 kolom.

3. Jendela browser dibagi menjadi 3 kolom.

4. Jendela browser dibagi menjadi 4 kolom.

Semoga artikel ini bermanfaat.

Kembali ke menu Bootstrap 4 - Situs Referensi Belajar Bootstrap 4

Read More

Container Pada Bootstrap 4

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

A. Pengertian Container

Container adalah Elemen Layout Paling Dasar di dalam Bootstrap. Elemen ini wajib dipanggil di awal pembuatan layout menggunakan bootstrap di dalam tag body (<body> </body>). Karena elemen ini yang nantinya akan mengendalikan sistem grid bootstrap sehingga lebar design web dapat menyesuaikan lebar device yang digunakan untuk membuka halaman web tersebut. Istilahnya menjadikan halaman web responsive.

Container bisa dibayangkan sebagai wadah yang nantinya berisi semua elemen grid sistem bootstrap maupun elemen - elemen selain miliknya bootstrap.

Container dipanggil di dalam tag div dengan menggunakan selector class.

B. Jenis - Jenis Container Bootstrap 4

Di dalam bootstrap 4 terdapat 2 jenis container yaitu container dan container-fluid.

Container biasa menjadikan lebar layout design halaman web tidak full layar, masih ada sisa bagian kosong yang cukup lebar di kanan - kiri tampilan layar. Sedangkan saat menggunakan container-fluid maka tampilan layout halaman web full layar.

Untuk penggunaan container ataupun container-fluid tinggal disesuaikan kebutuhan tampilan website yang sedang dibuat.

Contoh Penggunaan Container :

 Contoh Penggunaan Container-Fluid :

 Keterangan :

• Class bg-primary adalah class milik bootstrap 4 untuk membuat background warna biru.
• Class text-white adalah class milik bootstrap 4 untuk membuat tulisan berwarna putih.
• Class text-center adalah class milik bootstrap 4 untuk meletakkan tulisan ditengah layar.

Semoga artikel ini bermanfaat.

Kembali ke menu Bootstrap 4 - Grid System pada Bootstrap 4

Read More

Cara Instalasi Bootstrap 4

Assalamu alaikum Wr. Wb 

Salam Pinter Bareng Komputer, ...zero bit... 

Pada artikel ini saya ingin menjelaskan bagaimana cara instalasi Bootrstrap 4 ke dalam projek web yang sedang kita bangun.

Silakan kalian buka dokumentasi yang telah diberikan di dalam website resmi dari Bootstrap 4 di alamat : Dokumentasi Bootstrap 4 (getbootstrap.com). Di dalam dokumentasi tersebut bisa kalian baca langkah - langkah untuk melakukan instalasi Bootstrap 4 ke dalam projek web yang sedang kita kerjakan.

Namun bagi kalian yang ogah membaca panduan instalasi dalam bahasa Inggris, berikut ini saya tuliskan langkah - langkah instalasinya :

1. Buat sebuah folder projek web baru di dalam drive komputer kalian, beri nama misalkan : websekolah.
2. Buat sebuah file html baru dengan nama : index.html. (Catatan : untuk alasan keamanan setiap folder baru di dalam projek web sebaiknya di dalamnya memiliki file dengan nama index.html, walaupun isinya kosong)
3. Buka dokumentasi Bootstrap yang alamatnya sudah saya share di atas, kemudian masuk ke menu download. Dijelaskan di sana bahwa untuk dapat menggunakan semua library framework Bootstrap 4 ada 2 cara yang dapat dilakukan, yaitu
• Mendownload semua file library nya kemudian settingkan ke dalam folder projeknya
• Menggunakan Bootstrap CDN, yaitu dengan cukup mengcopy link css dan js miliknya Bootstrap 4 kemudian mempaste di dalam halaman web yang ingin menggunakannya.

Cara 1 : Mendownload Library Framework Bootstrap 4

1. Masuk ke dalam dokumentasi bootstrap 4 kemudian silakan download semua file library boostrap dengan mengklik tombol download. Kalian bisa pilih versi download Compiled CSS and JS atau versi download Source File. (Catatan : jika ingin menghemat ukuran file projek, saya sarankan download yang versi Compiled CSS and JS)
   
   
   
2. Setelah download selesai kalian akan mendapatkan sebuah file dengan nama : bootstrap-4.4.1-dist.zip.
3. Lakukan extraksi file menggunakan aplikasi WinRar atau WinZip dan arahkan ke dalam folder projek yang sudah kalian buat sebelumnya.
   
4. Kalian boleh merename nama folder bootstrap-4.4.1-dist dengan nama baru yang kalian mau, atau tetap dengan nama aslinya. Di sini saya rename dengan nama bootstrap4.
5. Jika kalian buka isi folder bootstrap4 ada 2 folder yaitu CSS dan JS yang masing - masing sudah ada isinya. Folder CSS isinya adalah file - file style sedangkan folder JS isinya adalah file - file jquery.
   
6. Isi folder CSS semunya adalah file - file untuk melakukan setting tampilan melalui CSS.
   
7. Isi folder JS adalah file - file jQuery javascript untuk mengendalikan tampilan saat terjadi event tertentu yang mengenai komponen.
   
8. Misalkan kita ingin menggunakan library bootstrap 4 di dalam halaman index.html, maka buka file index.html dengan Sublime kemudian copy paste script berikut yang bisa kalian ambil dari dokumentasi bootstrap 4 pada menu Getting Started dengan mengklik tombol copy yang ada di pojok kanan atas.
   
9.  Hasil copy - paste di dalam file index.html:
   
   
   
10.  Jika dijalankan di dalam browser maka hasilnya seperti berikut :
    
11. Agar script di dalam halaman index.html dapat terhubung ke dengan file library bootstrap 4 yang sudah kita download maka perlu dilakukan penyesuaian pada scriptnya. Bagian - bagian yang akan disesuaikan adalah bagian - bagian yang diberikan tanda cek merah pada poin 9 di atas.
    
12. Demikianlah cara melakukan instalasi Bootstrap 4 dengan melakukan download file librarynya langsung dari situs resmi bootstrap 4. Kelebihan cara ini adalah saat dijalankan di dalam browser semua resource bootstrap 4 tidak perlu dibaca online dari situnya namun bisa langsung diambil dari file2 yang sudah di

Cara 2 : Menggunakan BootstrapCDN 

Cara 2 ini sama dengan langkah 8 dan 9 dari Cara 1 di atas. Kelemahan cara ini adalah saat projek web dijalankan maka semua resource bootstrap 4 akan diambilkan online dari repository bootstrap 4, sehingga jika kondisi tidak ada internet maka tampilan hasil design webnya akan berantakan, karena tidak disupport oleh bootstrap 4.

Semoga artikel ini bermanfaat.

Menuju ke menu Bootstrap 4 - Container Pada Bootstrap 4

Read More

Pengenalan Bootstrap 4

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

A. Sejarah Bootstrap

Bootstrap merupakan sebuah library framework CSS yang dibuat khusus untuk bagian pengembangan front-end website. Bootstrap merupakan salah satu framework HTML, CSS dan javascript yang paling populer saat ini dikalangan web developer. Saat ini hampir semua web developer telah menggunakan bootstrap untuk membuat tampilan front-end menjadi lebih mudah dan sangat cepat karena seorang web developer hanya perlu menambahkan class - class tertentu seperti saat membuat tombol, grid, navigasi, corousel dan sebagainya.

Bootstrap, awalnya bernama Twitter Blueprint, dikembangkan oleh Mark Otto dan Jacob Thomton di Twitter sebagai library framework untuk mendorong konsistensi di perangkat internal yang sesuai. Sebelum ada Bootstrap sudah banyak library yang digunakan Twitter untuk pengembangan antar muka (front-end) nya yang menyebabkan ketidakkonsistenan dan beban pemeliharaan yang berat.

Nama Twitter Blueprint diubah menjadi Bootstrap dan dirilis sebagai proyek open source pada tanggal 19 Agustus 2011.

B. Bootstrap 2 dan 3

Pada tanggal 31 Januari 2012, dirilis Bootstrap 2. Pada Bootstrap 2 ini telah ditambahkan sistem layout 12 kolom grid yang responsif, dukungan built-in untuk beberapa Glyphicon (icon - icon), beberapa komponen baru, serta dilakukan penyempurnaan untuk komponen - komponen yang sudah ada sebelumnya.

Pada tanggal 19 Agustus 2013, dirilis Bootstrap 3. Pada Bootstrap 3 semua komponen - komponen didesign ulang menggunakan design flat, dan pendekatan mobile-first. Sehingga diharapkan saat website yang dibangun dengan Bootstrap 3 ini dibuka di alat - alat mobile maka tampilannya akan bisa responsive.

C. Bootstrap 4

Pada tanggal 29 Oktober 2014, Mark Otto mengumumkan bahwa Bootstrap 4 sedang dalam pengembangan. Versi Alpha Bootstrap 4 dirilis pada tanggal 19 Agustus 2015. Sedangkan versi Beta pertama dirilis pada tanggal 10 Agustus 2017.

Versi stabil Bootstrap 4 dirilis pada tanggal 18 Januari 2018, mayoritas adalah pembaharuan (editing) dari Bootstrap 3. Perubahan yang signifika di antaranya :

1. Peralihan dari Less menuju Sass.
2. Peluncuran but ulang untuk normalisasi css.
3. Menghapus dukungan peramban web IE8, IE9, dan iOS 6.
4. Penambahan dukungan flexbox dan menghapus dukungan komponen non-flexbox.
5. Penambahan kustomisasi pilihan navigasi.
6. Penambahan utilitas untuk pemberian ruangan dan ukuran yang responsif.
7. Beralih dari piksel ke em.
8. Meningkatkan ukuran fon global dari 14px menjadi 16px.
9. Menghapus panel, keluku, dan juga komponen-komponen yang mendukung elemen cards.
10. Menghapus font ikon Glyphicons.
11. Menghapus komponen pembuat halaman (pager).
12. Menambahkan sejumlah besar utilitas "class".
13. Memperbaiki perancangan formulir.
14. Memperbaiki tombol dan dropdown.
15. Memperbaiki objek media dan "class" untuk gambar.
16. Penulisan ulang hampir semua komponen, plugin jQuery, dan dokumentasi.

Sumber : 

Bootstrap (kerangka kerja) - Wikipedia bahasa Indonesia, ensiklopedia bebas

 

D. Bootstrap 5

Bootstrap 5 merupakan versi terbaru dari Bootstrap. Terdapat perubahan besar dalam Bootstrap 5, contohnya :

Menghapus jquery dari komponen dan menggunakan vanilla javascript 

Menulis ulang komponen grid untuk mendukung fitur kolom yang ditempatkan di luar baris dan gutter (ruang antar kolom) yang responsif.

Migrasi perangkat lunak dokumentasi dari Jekyll ke Hugo.

Menghapus dukungan peramban web IE10.

Memindahkan infrastruktur pengujian dari QUnit ke Jasmine.

 

Semoga artikel ini bermanfaat.

Menuju ke menu Bootstrap 4 - Cara Instalasi Bootstrap 4

Read More