Contoh Pembuatan Web dengan Bootstrap

Halo guys...

Ketemu lagi di postingan kali ini masih bersama Kyo-kun..

Buat postingan sekarang, Kyo-kun bakal migrasi dari share coding tentang Java menjadi coding untuk pembuatan web atau bahasa kerennya “Web Developer”.

Sebelumnya saya bahas dulu sedikit tentang Bootstrap.

Apa itu Bootstrap ?

Bootstrap adalah front-end framework yang mengedepankan tampilan untuk mobile device (Handphone, smartphone, dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.

Bootstrap buat apaan sih ?

Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.

Mungkin cuma segitu penjelasan tentang Bootstrap kali ini, sisanya Googling sendiri aja yak (jangan males :P)

Next kita masuk ke topik postingan kali ini yaitu “Pembuatan Web dengan Bootstrap”. Disini saya mau bikin sebuah Web Online (baca aja “onlen”) Shop (yg ini dibaca “sop”). Karena bikin sebuah web tidaklah sebentar, maka untuk postingan kali ini saya bikin halaman depannya dulu aja... nanti bakal ada lagi postingan lanjutan materi ini kaya film sequel gitu lah. Ok langsung aja.

Pertama, pastikan anda, anda, anda, dan anda sudah memiliki bahan-bahan untuk pembuatan sebuah web. Bahan bahannya yaitu :

·     Server lokal atau localhost. Saya sarankan pake XAMPP karena XAMPP lebih banyak digunakan dan lebih mudah untuk menemukan problem solving program yg menggunakan aplikasi ini. Belum punya ? download aja. Ikutin langkah-langkah instalasinya sesuai arahan.

·   Text editor. Disini saya menggunakan Sublime Text 3. Bisa download gratis, tapi pepatah mengatakan “Support developer by buying it’s products” jadi jangan lupa untuk beli lisensinya yak.

·           Bahan Bootstrap. Download aja. mau yg official ? nih.

Sip bahan sudah dipersiapkan. Sekarang waktunya pembuatan.

1.  Buka folder XAMPP yg sebelumnya sudah diinstall kemudian open file xampp-control.exe.

2.  Sebuah windows baru akan muncul, klik start pada Apache dan MySQL. Tunggu sampai Apache dan MySQL sudah berjalan kemudian di minimize saja (jangan di close).

3.  Buka Windows Explorer (windows button + e) kemudian buka kembali folder XAMPP lalu pilih htdocs. Disini adalah tempat untuk menyimpan semua file pembuatan web agar bisa dibaca oleh localhost. Buat folder baru, disini foldernya saya kasih nama “OnlenSop”.

4.  Cari file bahan bootstrap yg tadi di download terus extract. Copy folder css & js ke folder OnlenSop.

5.  Di folder OnlenSop kita bikin folder baru dengan nama img untuk menyimpan gambar.

6.  Next, waktunya ngoding. Buka Sublime Text 3, pilih File di pojok kanan atas > Open Folder... > cari folder OnlenSop > Select Folder.

7.  Ini tampilan awal Sublime Text 3 ketika kita sudah memilih folder OnlenSop.

8.  Untuk pembuatan web OnlenSop ini file yg pertama saya buat adalah index.php. “Kenapa harus index bukan home atau halaman utama aja ?” karena pada localhost, file yg pertama dicari ketika kita memasukkan url pada browser adalah “index.html” atau “index.php”. kenapa saya pake .php bukan .html ? karena disini saya akan membuat sebuah web dinamis.

9.  Karena kita akan menggunakan framework Bootstrap, maka kita harus liat panduannya. Untuk versi online bisa liat di situsnya, untuk versi offline bisa diliat di folder Bahan Bootstrap yg tadi di download kemudian pilih Bootstrap-4-offline-Docs-master > open file getting-started_introduction.html.

10.  Copy starter template bootstrap. Ganti href yg ada dibawah <!-- bootstrap css --> dengan css/bootstrap.css.

11.  Sekarang yaudah, jadilah se-kreatif mungkin untuk menggunakan Bootstrap.

12.  “eh bro, cara ngedit warna gimana sih ?”. karena kita pake sublime text, caranya gampang. Pertama tinggal block script/code class yg mau di edit, terus tekan F12 nanti langsung diarahkan ke css yg berkaitan dengan class tersebut.

13.  Cara pake bootstrap itu simple, tinggal liat > pilih > copy > edit. Udah gitu aja.

14.  Setelah dengan pertimbangan dan pengeditan yg sangat sangat sangatttt. Akhirnya, pada file index.php ini saya menggunakan komponen navbar, card, breadcrumb, dan container-fluid yg sudah disediakan bootstrap.

15. Hasil akhirnya seperti ini dah.

16.   Kaya Online Shop beneran kan ? hehe

Hmm kayanya cukup sampe sini dulu pembahasan kali ini. Ngetik sama ngeditnya cape ini lhoo. Gimana buat webnya jalan gk nih ? kalo mau punya saya download aja.

Ok cukup sekian, Kyo-kun mengucapkan terima kasih telah membaca postingan kali ini, semoga bermanfaat dan saksikan kelanjutan kisah web OnlenSop ini dikemudian hari.

See you next time...