Showing posts with label Bootstrap. Show all posts
Showing posts with label Bootstrap. Show all posts

Thursday, October 13, 2016

Membuat Button

Hal yang sering ada pada sebuah aplikasi web adalah penggunaan button, pada bootstrap button bisa dibuat dengan tiga buah tag yaitu , dan

jika kamu membutuhkan button yang tidak mengirimkan nilai melalui metode post/get kamu bisa menggunakan tags

yang terakhir kamu bisa menggunakan tags input jika button yang akan dibuat akan mensubmit data berupa post/get.

berikut contoh penggunaannya :

Link




hasilnya :



untuk menampilkan warna pada button kamu tinggal mengganti classnya saja



tinggal diganti saja dengan class berikut :
warna biru --> btn-primary
warna hijau --> btn-success
warna biru muda --> btn-info
warna kuning --> btn-warning
warna merah --> btn-danger


Menggunakan Bootstrap

Setelah sebelumnya kamu membaca mengenai apa itu bootstrap , sekarang saatnya berlanjut bagaimana caranya menggunakan bootstrap. langkah pertama adalah silahkan kunjugi website resmi bootstrap di http://getbootstrap.com kemudian donwload bootstrap.

setelah download selesai silahkan kamu extract di folder project kamu , misalnya di d:\xampp\htdocs\latihan1 . maka nanti akan muncul 3 buah folder css, fonts dan js.

folder css berisi tentang file file style yang digunakan oleh bootstrap, file fonts berisi font yang dibutuhkan oleh css dan file js berisi file -file javascript.

setelah berhasil kamu extract di folder proyek kamu sekarang buatlah sebuah file dengan nama index.html kemudian ketikan kode standar berikut ini :


 lang="en">
  
     charset="utf-8">
     http-equiv="X-UA-Compatible" content="IE=edge">
     name="viewport" content="width=device-width, initial-scale=1">
    </span>Bootstrap 101 Template<span class="nt">

    
     href="css/bootstrap.min.css" rel="stylesheet">   
      
  

Hello, world!
lihat bagian yang saya beri tanda tebal adalah cara menggunakan style dan javascript dari bootstrap.




  

Mengenal Bootstrap

Apa itu bootstrap ? bootstrap merupakan framework CSS yang saat ini sedang populer, bagaimana tidak sejak kehadirannya bootstrap ini seolah menjadi dewa penyelamat bagi para developer terutama yang berhubungan dengan font end aplikasi. dahulu membuat tampilan website yang menarik kita harus menuliskan kode kode css.

Bootstrap sendiri sampai dengan saat ini sudah merelease sampai dengan versi 4. bootstrap sudah menyediakan tag tag yang sudah siap pakai misalnya saja tabel, judul, alert , button, image dan lainnya yang jelas tampilan aplikasi kita akan lebih indah jadinya.
untuk menggunakan bootstrap cukup mudah kamu bisa mendowload langsung file minifiednya yang terdiri dari folder css,font dan js lalu kamu sertakan dalam script html kamu dan perintah perintah bootstrap bisa langsung digunakan. tertarik menggunakan bootstrap ?

Apakah Framework ?

Dalam keseharian kita sebagai seorang developer mungkin kita sering mendengar istilah framework. namun kalau ditanya apa itu framework mungkin jawaban teman teman berbeda-beda dan jangan jangan ada yang garuk2 kepala karena emang gak bisa jelasin framework itu apa heee.

Apakah framework itu ? framework adalah kumpulan perintah atau fungsi dasar yang membentuk aturan-aturan tertentu dan saling berinteraksi satu sama lain sehingga dalam pembuatan aplikasi website, kita harus mengikuti aturan dari framework tersebut. dengan framework ( dalam hal ini framework PHP ) , kita tidak perlu memikirkan kode perintah/fungsi dasar dari aplikasi website kita. seperti bagaimana mengambil data dari database untuk ditampilkan. kita hanya memikirkan apa kode sql nya dan ditampilkan ke mana .hal hal penunjang lainnya seperti koneksi database, validasi form, GUI dan keamanan telah disediakan oleh framework sehingga jumlah baris kode yang kita buat jauh lebih sedikit dibandingkan jika semua kode dari kita. jadi keuntungan yang dapat diperoleh dari penggunaan framework adalah :
  • waktu pembuatan aplikasi website kita jauh leibh singkat
  • kode aplikasi website menjadi lebih mudah dibaca, karena sedikit dan sifatnya pokok. detailnya adalah kode dari framework dan ini mungkin tidak perlu dipilirkan
  • website kita menjadi lebih mudah di maintenance
  • tidak perlu lagi membuat kode penunjang aplikasi website seperti koneksi database, validasi form , GUI dan keamanan
  • fokus ke pada proses business aplikasi websitenya
  • jika dikerjakan team work , maka akan lebih terarah karena system framework, mengharuskan adanya keteraturan peletakan kode. seprti bagian pengambilan database terpisah dengan bagian pengaturan tampilan untuk pengunjung.
jadi intinya banyak keuntungan yang dapat diperoleh , terutama bagi developer web yang selalu dihantui waktu deadline proyek websitenya. tidak selesai waktunya sesuai target, klien akan kecewa dan mungkin akan lari ke developer lain. jika anda bresikeras membuat website dari nol kode, maka akan butuh banyak waktu dan pasti akan ketinggalan dengan teman anda yang menggunakan framework.

Membuat button berbagai ukuran dengan bootstrap

Sebelum membaca artikel ini ada baiknya anda membaca artikel sebelumnya yaitu membuat button dengan bootstrap. pada artikel ini kita akan membuat button dengan berbagai ukuran dengan menggunakan bootstrap .

ada 3 buah ukuran button dalam bootstrap yaitu extra large, larger dan small. hal ini bisa kita lihat pada class nya yaitu btn-large, btn-sm dan btn xs.

cara penggunaannya sama seperti kita membuat button seperti artikel kita sebelumnya hanya saja dalam classnya ditambahkan class ukuran button , agar tidak bingung kita langsung saja kepada contohnya :

membuat button berbagai ukuran dengan menggunakan perintah :

 
 


 
 


 
 


 
 

 

Hasilnya adalah sebagai berikut :



 
 

Tuesday, October 14, 2014

Glyphicons

Setelah sebelumnya kita membahas apa itu bootstrap kemarin, hari ini saya akan lanjutkan postingan tentang component yang pertama di dalam bootstrap yaitu "Glyphicons". glyphicons hafling sebenarnya tidak gratis pada awalnya, tapi khusus untuk bootstrap para pembuatnya membuat menjadi gratis dan bisa di gunakan dalam bootstrap ini.

cara menggunakan komponen ini adalah dengan meletakkan kode untuk menampilkan glyphicons dimana saja di antara content dan text dalam program anda. walaupun tampilannya gambar, tapi tidak akan mengurangi performance dari web dikarenakan komponen ini dibuat berdasarkan class dan icon tersendiri.

Monday, October 13, 2014

Mengenal Bootstrap ?


Bootstrap adalah sebuah framework tampilan yang dimiliki oleh tweeter.  bootstrap yang direlease hingga saat ini sampai dengan versi 3.2.0. bootstrap dapat didonwload dengan 3 buah versi yaitu :
  • Precompiled Bootstrap yaitu hanya berisi compiled css, javascript dan fonts tanpa ada document manual.
  • Bootstrap source code yaitu berisi source code, javascript , file dan memerlukan beberapa setup files.
  • SASS
saya biasanya menggunakan yang versi minimum kemudian mengextractnya kedalam folder web lokal saya. jika anda tidak ingin mendonload ke local direktori anda, anda bisa langsung menggunakannya pada script HTML bagian header dengan merujuk langsung ke url bootstrap website seperti contoh dibawah ini :