Wednesday, August 16, 2017

Bootstrap Part 5 : Cara Membuat Jumbotron Dengan Bootstrap Untuk Pemula

cara-membuat-jumbotron-dengan-bootstrap-untuk-pemula
cara-membuat-jumbotron-dengan-bootstrap-untuk-pemula

Cara Membuat Jumbotron Dengan Bootstrap Untuk Pemula

Oke bro.. Di tutorial belajar bootstrap kemarin kita telah belajar tentang ...

1. Cara menggunakan bootstrap.
2. Membuat table dengan design bootstrap.
3. Membuat tombol dengan bootstrap.
5. Dan penjelesan yang lainnya..

Jumbotron adalah bentuk yang dibuat untuk sebuah pengumuman, suatu kontent khusus maupun berisi tentang informasi tentang halaman website.
Jadi biasanya jumbotron ini di buat pada halaman depan website bro..
Dan warna jumbotron bootstrap secara default adalah berwarna abu-abu..
Bentuknya bulat pada sisi sudut jumbotron..
Di dalam jumbotron bisa berisi text yang bebas kita inginkan..

Asalkan kamu tahu sekarang ini banyak website yang menggunakan jumbotron untuk memberi informasi tentang halaman website di halaman depannya.
Enaknya.. Jumbotron bootstrap bisa kamu desai dengan css dan kamu design sesuai keinginanmu bro..

Eitss.. Namun kali ini kita akan belajar membuat jumbotron dengan bootstrap yang bergaya standar dari bootstrap sendiri.
Jadi kalo kamu ingin mengedit nya, akan kita bahas pada tutorial yang lain..
Kalo  mau silahkan kamu edit sendiri gak papa kok... hehehe..

Santaii broo..
Pertemuan depan kita akan mendesign jumbotron yang lebih menarik dan keren.
membuat jumbotron dengan bootstrap.

Jadi gini broo..

Untuk membuat jumbotron dengan bootstrap kamu bisa menggunakan element <div>..

Caranya gimana..?

Yap.. silahkan kamu copy kode ini dan paste di file index.php kemarin.




Dan ini hasil kita membuat jumbotron dengan bootstrap tadi...


cara-membuat-jumbotron-dengan-bootstrap-untuk-pemula
cara membuat jumbotron dengan bootstrap untuk pemula

Dan ini demo membuat jumbotron dengan bootstrap..

Yuk bro di cek demonya..


See the Pen yoPVoP by penakngoding (@penakngoding) on CodePen.



Sudah..Cukup...Cukup..Sudah.. Cukup..Sampai.. Disini saja..
Cara Membuat Jumbotron Dengan Bootstrap Untuk Pemula








Tuesday, August 15, 2017

Bootstrap Part 4 : Cara Membuat Tombol Dengan Bootstrap Untuk Pemula


Membuat Tombol Dengan Bootstrap


Kemampuan bootstrap :



1. Dapat mendesign tampilan table dengan cepat

2. Dapat mendesign tampilan menu navigasi dengan cepat

3. Dapat mendesign tombol atau hyperlink dengan cepat.



Untuk cara membuat tombol dengan bootstrap sangatlah mudah..

Jadi kamu hanya menambahkan class "btn" saja..

Class "btn" ini berguna untuk mendefinisikan element menjadi tombol.

Kamu juga bisa mengatur warna, tombol, bahkan ukuran sesuai keinginan kamu.

Di bootstrap terdapat class yang berguna untuk mendesign atau menciptakan sebuah tombol yang menarik dan keren.

Nah.. ini adalah class bootstrap untuk membuat tombol, mengatur ukuran dan juga mengatur warna tombol tersebut..

*Class ke-1 adalah .btn

Class ini berguna untuk membuat tombol.

*Class ke-2 adalah .btn-xs

Class ini berguna untuk membuat tombol dengan ukuran yang sangat kecil (ectra kecil).

*Class ke-3 adalah .btn-sm

Class bootstrap ini berguna untuk membuat tombol dengan ukuran kecil

*Class ke-4adalah .btn-md

Class bootstrap ini berguna untuk membuat tombol dengan ukuran sedang

*Class ke-5 adalah .btn-lg

Class bootstrap ini berguna untuk membuat tombol dengan ukuran besar.

*Class ke-6 adalah .btn-danger

Class bootstrap ini berguna untuk membuat tombol berwarna merah.

*Class ke-7 adalah .btn-danger

Class bootstrap ini berguna untuk membuat tombol berwarna merah.

*Class ke-8 adalah .btn-default

Class bootstrap ini berguna untuk membuat tombol berwarna standart dari bootstrap.

*Class ke-9 adalah .btn-warning

Class bootstrap ini berguna untuk membuat tombol berwarna kuning.

*Class ke-10 adalah .btn-primary

Class bootstrap ini berguna untuk membuat tombol berwarna biru.

*Class ke-11 adalah .btn-info

Class bootstrap ini berguna untuk membuat tombol berwarna biru langit.

*Class ke-12 adalah .btn-success

Class bootstrap ini berguna untuk membuat tombol berwarna hijau.

Cara Membuat Tombol Dengan Bootstrap

Jadi gini broo...

Kalian bisa membuat tombol dengan bootstrap dengan menggunakan tag<button>..
Selain itu kamu juga bisa menggunakan tag hyperlinnk <a>..

Jadi sekarang silahkan kamu lihat contoh membuat tombol dengan bootstrap ini....


Oke bro.. Nah jadi ini hasil SS kita membuat tombol dengan bootstrap tadi..

cara-membuat-tombol-dengan-bootstrap-untuk-pemula
cara membuat tombol dengan bootstrap untuk pemula
Dan ini demonya bro..

See the Pen mMqrzo by penakngoding (@penakngoding) on CodePen.


Sudah..Cukup...Cukup..Sudah.. Cukup..Sampai.. Disini saja..
cara membuat tombol gambar dengan bootstrap.

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


Monday, August 14, 2017

Bootstrap Part 3 : Tampilan Gambar Dengan Bootstrap


Tampilan Gambar Dengan Bootstrap

Oke bro..
Sebelumnya kita telah membahas tutorial belajar bootstrap...

Maka pada bab ini kita akan membahas cara membuat tampilan gambar yang menarik dengan bootstrap..

Kita bisa membuat gambar berbentuk melengkung disisi sudutnya..
Kita bisa membuat gambar dengan bentuk lingkaran..
Kita bisa membuat gambar thumbnail dan gambar responsive dengan bootstrap...

Di bootstrap juga telah menyediakan class untuk mengatur gambar sesuai ide kamu..
Contoh:

1. Kamu bisa membuat bentuk rounder.
2. Kamu bisa membuat bentuk circle(lingkaran) + gambar yang responsive.

Nah..bro..
Ini class bootstrap yang bisa kamu gunakan untuk membuat dan memanipulasi tampilan gambar pada bootstrap kamu..

*Pertama adalah .img-responsive

Class ini berguna membuat gambar menjadi responsive pada saat dijalankan dimana saja.

*Kedua adalah img-rounded

Class ini berguna untuk membuat gambar berbentuk round.
Maksudnya gini..
Jadi nanti disudut gambar kamu akan berbentuk melengkung.

*Ketiga adalah img-circle

Class ini berguna untuk membuat gambar berbentuk lingkaran.

*Keempat adalah img-thumbnail.

Class ini berguna untuk membuat gambar thumbnail dengan bootstrap.

Oke cukup ya..
Jadi sekarang kita akan membuat tampilan gambar dengan bootstrap.

1. Membuat Gambar Thumbnail Dengan Bootstrap


Jadi kali ini kita menggunakan class "img-thumbnail" untuk membuat gambar thumbnail dengan bootstrap.

Kodenya seperti ini ..


Untuk full codenya ini bro.. Silahkan di copy dan paste di file index.php kemarin..


Mka hasilnya akan seperti ini..




2. Membuat Gambar Circle Dengan Bootstrap

Sebenernya caranya sama dengan cara membuat gambar thumbnail seperti diatas tadi.

Jadi untuk membuat gambar dengan bentuk lingkaran kamu bisa menggunakan class "img-circle". tampilan gambar dengan bootstrap. 

Kamu hanya mengganti classnya menjadi class="img-circle"

Atau langsung saja copas kode ini dan taruh di inndex.php kamu bro..



Dan ini hasil SS nya..






3. Membuat Gambar Round Dengan Bootstrap


Jadi caranya juga sama silahkan kamu ganti dengan class="img-rounded"

Cuma gitu aja bro.. mudah kan,. hehehe:)

Ini kodenya broo..



Sip dan ini Hasil SS nya gan..




4. Membuat Gambar Responsive Dengan Bootstrap

Jadi sama juga kok..
Untuk membuat gambar responsive dengan bootstrap kamu hanya menambahkan class "img-responsive" pada elemnt gambar. tampilan gambar dengan bootstrap


Jadi untuk keseluruhan ini kodenya bro..Hehehe..



Dan ini Hasil SS nya bro..




Sudah..Cukup...Cukup..Sudah.. Cukup..Sampai.. Disini saja..
cara membuat tampilan gambar dengan bootstrap.




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




Sunday, August 13, 2017

Bootstrap Part 2 : Membuat Table Dengan Bootstrap Untuk Pemula

Membuat Table Dengan Bootstrap


Bootstrap Part 2 : Membuat Table Dengan Bootstrap Untuk Pemula 

Membuat Table Dengan Bootstrap

OK broo..
Bertemu lagi..
Jadi pada tutorial sebelumnya kita telah belajar bootstrap part 1 : pengertian dan cara menggunakan bootstrap.

Nah.. maka pada tutorial ini kita akan belajar bootstrap part 2: membuat table dengan bootstrap.
Jadi pada bab ini kita akan membahas cara membuat atau men design table dengan menggunakan bootstrap. 

Jangan bingung bro.. Santai..

Cara membuat table dengan bootstrap sangatlah mudah dan gak sulit kok.
Kita hanya perlu menambahkan class-class bootstrap untuk mendesign table.

Jadi gini broo...
Class bootstrap untuk membuat atau mendesign table itu gak hanya satu broo..
Jadi semuanya itu berjumlah 4 buah class... 

*Class pertama adalah .table
Class .table ini digunakan untuk membuat table standart/berbentuk table biasa.

*Class kedua adalah .table-striped
Class ini adalah class tambahan untuk membuat table dengan bootstrap.
Fungsinya adalah untuk membuat tabel belang-belang (strip).

*Class ketiga adalah .table-bordered
Class ini adalah class tambahan bootstrap untuk membuat table yang memiliki garis.

*Class keempat adalah .table-hover
Class ini juga berguna untuk mendesign table menggunakan bootstrap.
Class ini berguna untuk membuat efek hover pada row table disaat mouse kita berada di atas row table.

Nah....
Selain itu ada juga class yang berguna untuk membuat pewarnaan pada row atau table data.

Untuk memberi warna pada table row maka letakkan class warna ini di tag<tr>...
Namun jika ingin memberi warna pada table data maka letakkan di tag <td>..

Gituu.. bro. gampang kan..
Nah... Untuk class warna ada 4 bro..

*Pertama adalah class .succes
Class ini memberi warna sukses atau warna hijau.

*Kedua adalah class .info
Class ini memberi warna biru.

*Ketiga adalah class .danger
Class ini memberi warna merah

*Ke-empat adalah class .warning
Class ini memberi warna kuning.

Udah bro..
Jadi sekarang ayo kita buat table dengan bootstrapnya..!!!


1. Cara Membuat Table Dengan Bootstrap

Langkah pertama untuk membuat atau mendesign table dengan bootstrap adalah ..

*Buatlah file HTML atau PHP dengan nama index.php...

Bagi kamu yang masih bingung...
Maka baca dulu cara menghubungkan bootstrap. Karena telah saya bahas pada tutorial bootstrap sebelumnya.

Ok.. kalo sudah siap ..
Silahkan copy kode di bawah ini..
Lalu paste ke file index.php tadi yaa...

Ini kodenya bro..


Nah.. dan ini ss nya..


cara-membuat-table-degan-bootstrap-untuk-pemula
cara membuat table dengan bootstrap untuk pemula

*Penjelasan..
1. <table class="table">...</table> adalah perintah membuat table.
2. <thead>...</thead> adalah untuk membuat kepala judul tabel.
3. <tbody>..</tbody> adalah untuk menaruh isi dari tabel.


2. Membuat Table Border Dengan Bootstrap

Untuk membuat table bergaris atau border maka kamu hanya perlu menambahkan class "table-bordered" dan letakkan bersamaan dengan class "table".

Contohnya seperti ini..
<table class="table table-bordered">

Silahkan praktekan dengan copy kode ini lalu paste di file index.php tadi.


Nah ini ss nya bro..Beda kan yang ini ada garisnya..


cara-membuat-table-dengan-bootstra-class-table-bordered
membuat table dengan bootsrap class table-bordered

3. Membuat Table Strip Dengan Bootstrap

Dengan menggunakan class table-sriped maka tabel kita akan bergaya belang-belang..

Untuk prakteknya copy kode ini dan paste di file index.php.




Jadi kamu hanya menambahkan table-striped

Seperti ini <table class="table table-bordered table-striped">

Gampang kan.. hehehe..

Nah ini ss nya bro..


membuat-table-dengan-bootstrap-dengan-class-table-striped
membuat table bootsrap dengan class table-striped


4. Membuat Table Hover Dengan Bootstrap

Jadi caranya sama dengan contoh-contoh membuat table dengan bootstrap diatas tadi..
Kalian hanya perlu menambahkan class "table-hover" pada tag <table>

Copy dan paste kode ini di file index.php



Nah ini bro Demonya..hehe


See the Pen VzzJWz by penakngoding (@penakngoding) on CodePen.


5. Membuat Table Responsive Dengan Bootstrap

Untuk membuat table responsive caranya hanya dengan menambahkan element "<div>" dan ditambahkan class "table-responsive"

Penerapan = <div class='table-responsive'>

Kelebihan menggunakan table responsive adalah..
Tidak akan berantakan saat dilihat di smartphone dengan resolusi yang kecil.
Dan akan muncul scrool otomatis untuk menjaga table agar tetap utuh.

Nah ini bro kode contoh membuat table responsive dengan bootstrap.


Sudah..Cukup...Cukup..Sudah.. Cukup..Sampai.. Disini saja..
cara mendesign dan membuat table dengan bootstrap.

Gimana dengan mempelajari cara membuat table dengan bootstrap ini pasti kamu sudah merasa lebih mudah kan..
Tak hanya itu..
Karena masih banyak lagi kelebihan bootstrap dalam hal design interface website.



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















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