Wednesday, August 9, 2017

Bootstrap Part 1: Pengertian Dan Cara Menggunakan Bootstrap Untuk Pemula


Pengertian Dan Cara Menggunakan Bootstrap

Bootstrap adalah sebuah library framework CSS yang bisa kita gunakan untuk mengembangkan front-end website. Para web developer banyak yang menggunakan bootstrap sebagai framework HTML, CSS dan Javascript. Nah jadi framework bootstrap ini termasuk framework yang paling populer.

Nah.. Sekarang ini banyak developer yang menggunakan bootstrap untuk membuat tampilan front-end.
Kenapa..? Yaa.. Karena bootstrap itu lebih mudah dan sangat cepat.
Kok bisa..? Yap..karena kita hanya perlu menambahkan class-class tertentu untuk membuat sebuah tombol, navigasi, grid dan masih banyak lagi deh.. 

Gimana.. mudah kan..? :) Lanjut yuk...

Bootstrap ini telah menyediakan kumpulan komponen class interface dasar.Lalu gunanya apa..?
Yaa.. class ini berguna untuk menciptakan tampilan yang menarik, ringan dan bersih.

Eiits.. bootstrap juga memiliki fitur grid. Fitur ini berguna untuk mengatur layout halaman website dengan mudah dan cepat.
Jadi kita gak perlu pusing lagi mikiran grid yang ribet.

Dengan menggunakan bootstrap kita lebih leluasa mengembangkan tampilan website kita.
Caranya gimana..?
Caranya yaitu dengan menambahkan class dan css sendiri. Sesuai yang kita inginkan.

Mudahkan..? So pasti.

Twitter adalah salah satu contoh website besar yang menggunakan framework bootstrap.
Jadi sebenernya bootstrap itu di kembangkan oleh developer twitter sendiri.
Makanya ada juga orang yang menyebut dengan nama "twitter bootstrap".

Bootstrap berisi kumpulan class siap pakai. Maksudnya gimana...?
Nah misal jika kalian ingin membuat sebuah tombol dengan bootsrap. Maka kalian hanya menambahkan class "btn" saja.
Nah untuk pembahan class "btn" akan saya jelaskan di tutorial selanjutnya, tetap di edisi belajar bootstrap penakngoding.

Mudahkan. Jadi kalian gak perlu lagi mengetikkan syntax css yang ribet. Simpel kan...

Masih bingung menggunakan bootstrap..? Baca tulisan bawah ini...:)

Kelebihan Boootstrap :

1. Lebih menghemat waktu kalian.
2. Tampilan terlihat modern.
3. Tampilan mobile-friendly / responsive.
4. Bootsrap sangat ringan.
5. Dan temukan kelebihan tersembunyi lainnya dengan mencoba menggunakan framework css bootstrap ini.

Sebelum kalian mempelajari bootstrap. Lebih afdol lagi jika kalian juga mempelajari CSS Dasar. 
Klik disini untuk belajar css dasar di penakngoding.

Nah..dah cukup penjelasannya...Sekarang ayo kita pelajari cara menggunakan bootstrap.. Lets Go..Yuk...


Cara Menggunakan Bootsrap

* Pertama kali kamu harus melakukan instalasi bootstrap di pc kamu.

Kamu bisa download dulu bootstrap di situs resminya http://getbootstrap.com/getting-started/



Nah.. Gimana.. Sudah selesai download..?
Jika sudah selesai maka bootstrap yang kamu download tadi memiliki struktur seperti di bawah ini bro..

Struktur Bootstrap


Oiya..
Sebelum kamu mendownload bootstrap...
kamu juga bisa mengatur atau mengcostumize bootstrap sesuai keinginan kamu loo. tutorial bootstrap bahasa indonesia untuk pemula. 


Udah lanjut aja yuk..

Cara Menginstal Bootstrap

Cara menginstall bootstrap.
Nah jadi sebenernya cara menginstall bootstrap itu gak hanya dengan satu cara bro.
Namun ada banyak cara, seperti di bawah ini.

Perintah menginstall bootstrap dengan bower

Perintah menginstall bootstrap dengan composer 

Perintah menginstall bootstrap dengan npm


Perlu kalian ketahui, bahwa dari semua cara di atas tadi..

Cara yang paling banyak digunakan adalah dengan cara online dan cara offline.
tutorial bootstrap dasar.

Nah..Ini tutorialnya..

Cara Menginstall Bootsrap Secara Online

Nah jadi gini bro..
Kamu pilih dulu salah satu kode di bawah ini untuk menginsall bootstrap secara online.

Sudah..? Jika sudah

Lalu letakkan kode yang kamu pilih tadi di bagian <head> di halaman HTML kamu. 
Cara ini seperti menghubungkan HTML dengan CSS dan javasvript.

Ini Kodenya :

Oke..
Apakah kamu sudah paham..? Mari lanjutkan lagi..!!!


Cara Menginstall Bootstrap Secara Offline

Cara menginstall bootstrap secara offline ini bisa dilakukan karena file framework bootstrap sudah ada di pc kita. Jadi tak perlu koneksi internet lagi untuk mengaksesnya.

Namun jika kita melakukan penginstalan bootstrap secara online maka file bootstrapnya terletak di server luar.pengertian dan cara menggunakan bootstrap.

Oke bro ini baru langkah-langkah menginstall bootstrap secara offline.

Langkah-langkah

* Langkah Pertama

Jika kamu sudah mendownload bootstrap.....
Maka selanjutnya ekstrak dan letakkan hasil ekstrakan tadi di localhost..

(Saya sarankan, samakan dengan punya saya.. agar lebih mudah dalam belajarnya.)

Saya meletakkan hasil ekstrakan saya di localhost dengan alamat http://localhost/penakngoding/bootstrap/

Kalau kalian bingung lihat dan cermati tanda dari gambar di bawah ini.




Jadi gini..
File ekstrakan tadi saya letakkan di folder localhost(c) - xampp - htdocs - penakngoding - bootstrap.

Jadi buat folder seperti diatas ya.. agar lebih mudah belajarnya...
Di dalam folder htdocs - saya buatkan folder dengan nama penakngoding...

Lalu buka foldernya dan letakkan hasil ekstrakan tadi ke dalam folder penakngoding..
Jangan lupa samakan nama foldernya yaaa.....
Jika sudah maka buka folder bootstrap kamu..
Jika benar maka akan tampil 3 folder dengan nama (css, fonts dan js).

Kurang lebih stukturnya gini bro 



Oke sampai situ.. Gimana .. Lanjut yaa..

Langkah untuk menghubungkan atau menginstall bootstrap selanjutnya adalah..

Buat file HTML atau PHP (file ini berguna untuk menghubungkan dengan bootstrap). Silahkan di kosongkan saja file nya gak apa apa.

Beri nama file tersebut dengan nama index.php.
tutorial bootsrap bahasa indonesia.

Lihat tanda di gambar ini biar gak bingung...




Nah jika kamu benar, maka foldernya akan berubah menjadi 4.

Oiyyaaa.. Jangan lupa download dulu jquery-nya disini. Karena bootstrap memerlukan jquery untuk bagian javascriptnya.

Setelah selesai download masukkan file jquery.js nya di dalam folder js..

Lihat gambar ini..



Klik Disini untuk belajar cara menggunakan jquery.

Sipp broo..

Persiapan sudah selesai..

* Langkah ke dua.

Buka kembali file index.php tadi..
Lalu paste kode di bawah ini broo..


Perhatikan contoh cara menghubungkan file bootstrap diatas bro..

Kode ini berguna untuk menghubungkan file html atau php kamu dengan bootstrap.css



Lalu kode dibawah ini berguna untuk menghubungkan file html atau php kamu dengan bootstrap.js dan jquery.js
Ini penting bro..Taruh kode jquery.js diatas yaa.. Kenapa..?
Ya.. karena bootstrap itu bisa bekerja karena bantuan jquery.




Selanjutanya class"btn" adalah class bootstrap untuk membuat tombol.
Nah "btn-primary" dan "btn-danger" itu untuk memberi warna tombolnya.

Bro.. cara membuat tombol dengan bootstrap akan saya jelaskan pada tutorial selanjutnya.
Tetap di penakngoding. pengertian dan cara menggunakan bootstrap

OKE SELESAI SUDAH TUTORIALNYA..

Sekarang kamu bisa lihat hasilnya di bawah ini.

Hasil ss di browser. Untuk mengecek ketik di browser kamu seperti ini localhost/penakngoding/bootstrap/
(Pastikan Apache dan MySQL di localhost kamu aktif ya..)


Demo :





Sudah..Cukup..Cukup..Sudah tutorial belajar bootstrap part 1 : pengertian dan cara menggunakan bootstrap ini.

NB: 
Perhatikan letak file bootstrap.css, bootstrap.js dan jquerynya..



Bootstrap Part 5 : membuat jumbotron dengan bootstrap
Bootstrap Part 6 : membuat alert dengan bootstrap (rilis besok tanggal 16-08-2017)
Lainnya masih rahasia yaa.. hehehe




10 comments: