Belajar bootstrap 4 untuk pemula: Penggunaan class Button

Penggunaan class button pada bootstrap 4
Penggunaan class button pada bootstrap 4

Melanjutkan seri belajar bootstrap 4, sekarang kita kembali belajar bareng bagaimana penggunaan class button pada bootstrap 4. Pada tutorial sebelumnya kita sudah belajar bareng mengenai penggunaan class border dan shadow, silahkan di lihat lagi jika kalian ingin belajar mengenai materi border dan shadow.

Button atau tombol untuk perangkat user interface banyak sekali digunakan jika kita ingin membuat aplikasi baik berbasis web, desktop, maupun mobile. Biasanya digunakan sebagai tombol simpan, tombol resset, tombol kembali dan masih banyak lagi. 

PRAKTIK

Sekarang kita langsung praktik saja, yang harus dipersiapkan tentu saja framework bootstrap yang akan kita panggil class nya. Jika temen-temen masih belum mengerti bagaimana konfigurasi awal bootstrap silahkan kunjungi youtube saya https://www.youtube.com/watch?v=NKoweFyowH0

Kemudian kita buat lembar kerja menggunakan text editor kesayangan kita, saya biasa menggunakan sublime text atau visual studio code.


Button

Dalam pembuatan button pada bootstrap, cukup mudah, hanya perlu tag button seperti pada membuat button di html kemudian berikan class btn, jika ingin membuat warna pada button maka tambahkan lagi class btn-warnanya. Contoh scriptnya dibawah ini.

1
2
3
4
5
<h5>Button / Tombol</h5>
<button class="btn btn-primary" type="button">Button Warna Biru</button>
<button class="btn btn-secondary" type="button">Button Warna Abu abu</button>
<button class="btn btn-info" type="button">Button Biru muda</button>
<button class="btn btn-success" type="button">Button Warna Hijau</button>
Hasil dari script diatas:

Hasil dari class button pada bootstrap 4
Button/tombol

Tipe-tipe button

Ada beberapa tipe-tipe button, button dengan link atau anker, button dengan type submit, resset, dll. Untuk contoh scriptnya bisa lihat dibawah ini.

1
2
3
4
5
6
<h5>tipe tipe button</h5>
<a class="btn btn-primary" href="https://tdlabhouse.id" role="button">LINK</a>
<button class="btn btn-success" type="submit">Button</button>
<input class="btn btn-info" type="button" value="input">
<input class="btn btn-info" type="submit" value="submit">
<input class="btn btn-info" type="resset" value="resset">
Hasil dari script diatas adalah berikut ini.
Hasil dari script class tipe-tipe button
Tipe-Tipe Button


Membuat outline button

Outline button adalah dengan warna putih pada body nya dan warna lain pada bordernya, untuk lebih jelasnya silahkan lihat script dan hasil di bawah ini.


1
2
3
4
<h5>Outline Button</h5>
<button class="btn btn-outline-primary">BUtton outline</button>
<button class="btn btn-outline-secondary">BUtton outline</button>
<button class="btn btn-outline-danger">BUtton outline</button>

Penulisan class nya sama dengan membuat button warna, hanya ditambahkan outline saja ditengahnya.
Hasil dari script diatas adalah
Hasil uji coba outline button
Outline Button


Ukuran button

Button juga dapat diberikan class ukuran, kita dapat menyesuaikan ukuran button kecil atau besar, bisa juga block atau menyeluruh menyesuaikan lebar container. Berikut adalah contoh penggunaan class ukuran pada bootstrap 4.
1
2
3
4
<h5>Ukuran Button</h5>
<button class="btn btn-primary btn-lg" type="button">Button</button>
<button class="btn btn-primary btn-sm" type="button">Button</button>
<button class="btn btn-primary btn-block" type="button">Button</button>
Saya contohkan disini adalah btn-lg untuk ukuran besar, btn-sm untuk ukuran kecil atau small, dan btn-block untuk ukuran block atau menyesuaikan lebar containernya.

Hasil dari ukuran button
Ukuran Button



Button dengan keadaan tertentu

Yang saya maksut disini adalah jika kita ingin memanipulasi button dengan keadaan aktif, disabled, atau toogle (dapat berubah saat di klik). Mudah saja penggunaan class nya, bisa di lihat script berikut ini.
1
2
3
4
5
<h5>Button dengan keadaan tertentu</h5>
<button class="btn btn-primary" type="button">button</button>
<button class="btn btn-primary active" type="button">button</button>
<button class="btn btn-primary disabled" type="button">button</button>
<button class="btn btn-primary" type="button" data-toggle="button">button</button>
Tidak rumit, jika ingin button terlihat active maka tambahkan class active, jika ingin disabled maka tambahkan class disabled, untuk toogle bisa dicoba dan dipraktikan supaya tahu hasilnya.

Script diatas bisa dilihat hasilnya seperti dibawah ini.
Hasil button dengan keadaan tertentu
Button dengan keadaan tertentu


Button Group

Membuat button seperti bergroup, menempel satu dengan yang lainya. Jika masih kuran paham atau masih bingun maksutnya, langsung saja coba script dibawah ini.
1
2
3
4
5
6
<h5>Button Group</h5>
<div class="btn-group">
  <button class="btn btn-primary" type="button">Left</button>
  <button class="btn btn-secondary" type="button">Middle</button>
  <button class="btn btn-primary" type="button">Right</button>
</div>
Disini menggunakan div dengan class btn-group. Hasilnya seperti dibawah ini
Hasil dari button group
button group


Button sebagai pagination

Pagination sangat sering digunakan saat kita membuat website yang menamilkan beberapa halaman, atau table data yang menampilkan banyak data sehingga tidak cukup 1 halaman harus banyak halaman, dan pagination sangat berperan disini.

Penggunaan class pagination bisa dilihat, di cermati, kemudian dipraktikan.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<h5>Button sebagai Pagination</h5>
      <div class="btn-toolbar">
          <div class="btn-group mr-2">
              <button class="btn btn-primary" type="button">1</button>
              <button class="btn btn-primary" type="button">2</button>
              <button class="btn btn-primary" type="button">3</button>
              <button class="btn btn-primary" type="button">4</button>
          </div>
          <div class="btn-group mr-2">
              <button class="btn btn-primary" type="button">5</button>
              <button class="btn btn-primary" type="button">6</button>
              <button class="btn btn-primary" type="button">7</button>
          </div>
          <div class="btn-group">
              <button class="btn btn-primary" type="button">8</button>
          </div>
      </div>
Hasil dari script diatas bisa dilihat dibawah ini.
Hasil button sebagai pagination
Button Pagination


Button group secara vertical 

Jika diatas sudah belajar button group secara default yaitu horizontal, maka skarang kita belajar membuatnya seacara vertical. Mudah saja, silahkan ketik script dibawah ini kemudian jalankan.

1
2
3
4
5
6
<h5>Button Group secara Vertical</h5>
      <div class="btn-group-vertical">
          <button class="btn btn-primary" type="button">Top</button>
          <button class="btn btn-primary" type="button">Middle</button>
          <button class="btn btn-primary" type="button">Bottom</button>
      </div>

Hanya ditambahkan dalam class nya yaitu vertical.

Hasilnya seperti dibawah ini.
Hasil button group secara vertikal
Button group vertical


Kesimpulan

Ada banyak sekali class button pada bootstrap 4, dan pemanggilan class nya tidak rumit hanya beberapa sintag saja, dan mungkin tidak terlalu jauh dengan bootstrap 3. Oya yang saya paparkan disini pun belum semuanya jadi temen-temen bisa eksplore sendiri mengenai button pada bootstrap 4. Bisa langsung kunjungi getboostrap.com. 

Jika temen temen ingin melihat versi videonya, silahkan kunjungi chanel youtube saya di:



Jangan lupa juga ikuti social media kami di alamat berikut.

Ingin mendapatkan sourcecode gratis untuk belajar dan dikembangkan lagi, silahkan kunjungi https://tdlabhouse.id


Belajar bootstrap 4 untuk pemula: Penggunaan class Border dan Shadow



Kali ini aku mau share bagaimana penggunaan class border dan shadow pada bootstrap 4. Ini adalah melanjutkan seri belajar bootstrap 4 yang sudah berjalan sampai 9 episode pada youtube saya, tetapi  pada episode-episode sebelumnya aku tidak menuliskanya di blog, mungkin karna sudah lama gak ngeblog. 

Nah sekarang aku kepikiran akan selalu update konten blog, youtube, Facebook, Instagram.

Seri youtube: 

Facebook:

Instagram:

Langsung saja mungkin kita belajar class border dan shadow pada bootstrap 4.
Border adalah sebuah garis yang berada dipinggir untuk membatasi isi element, sedangkan shadow adalah sebuah bayangan pada element. Border dan shadow ini biasa digunakan untuk mempercantik tampilan website atau aplikasi berbasis web. Nah pada penggunaan bootstrap 4 akan dimudahkan pemanggilan class nya, hal ini dapat meminimalisir penggunaan css, jadi kita tinggal panggil-panggil class pada bootstrap 4 nya saja.

Dalam bootstrap 4, kurang lebih ada 3 penggunaan class (jika salah mohon dikoreksi) yang biasa orang gunakan.

  1. Kita dapat membuat posisi border berada di berbagai posisi pada element. Seperti hal nya bottom, top, left, right, atau semua posisi.
  2. Kita dapat membuat warna border menggunakan warna-warna yang ada pada bootstrap 4, yaitu primary, success, secondary, info, dark, light, warning, danger.
  3. Kita dapat membuat sudut tumpul atau rounded pada element menggunakan class border rounded.

Praktik:

Sekarang kita langsung praktik saja ya temen temen.

Yang pertama kita siapkan terlebih dahulu, untuk persiapan dalam penggunaan bootstrap 4 temen-temen bisa tonton video seri belajar bootstrap 4 episode 1:


langkah selanjutnya silahkan temen-temen ikuti script-script dibawah ini. 

Posisi border:

untuk membuat posisi border di bottom atau dibawah element, gunakan class border-bottom

Contoh:

<div class="p-3 mb-2 bg-light border-bottom">Border Bottom</div>

Selanjutnya jika kita ingin membuat border berada diatas element, gunakan class border-top

Contoh:

<div class="p-3 mb-2 bg-light border-top">Border Top</div>

Kemudian untuk membuat border berada di sebelah kanan  element, gunakan class border-right

Contoh:
<div class="p-3 mb-2 bg-light border-right">Border Right</div> 

Jika kemudian kita menginginkan posisi border berada disebelah kiri element, gunakan class border-left

Contoh:

<div class="p-3 mb-2 bg-light border-left">Border Left</div> 

Nah sekarang jika bordernya berada di semua sisi, cukup class border

Contoh:

<div class="p-3 mb-2 bg-light border">Regular</div>

Warna Border

Penulisan class warna pada bootstrap 4 cukup seperti ini, “border border-warna bootstrap”
Singkat saja contoh scriptnya:

<h5>Warna Border</h5>

      <div class="p-3 mb-2 bg-light border border-primary"> Warna Primary</div>

      <div class="p-3 mb-2 bg-light border border-secondary">Warna Secondary</div>

      <div class="p-3 mb-2 bg-light border border-success">Warna Success</div>

      <div class="p-3 mb-2 bg-light border border-info">Warna Info</div>

      <div class="p-3 mb-2 bg-light border border-warning">Warna Warning</div>

      <div class="p-3 mb-2 bg-light border border-danger">Warna Danger</div>

      <div class="p-3 mb-2 bg-light border border-light">Warna Light</div>

      <div class="p-3 mb-2 bg-light border border-dark">Warna Dark</div>

      <div class="p-3 mb-2 bg-light border border-white">Warna White</div>

Border radius 

Biasanya digunakan untuk membuat lengkungan pada setiap sudut element. Penulisan scriptnya juga tidak terlalu sulit, cukup cantumkan class border dilanjutkan dengan rounded-bentuk yang diinginkan.

Contohnya:

Ini untuk membuat rounded atau tumpul pada setiap sisi.

<div class="p-3 mb-2 bg-light border rounded">Rounded</div>

Ini jika yang kita inginkan rounded atau tumpul sisi atas saja

<div class="p-3 mb-2 bg-light border rounded-top">Rounded Top</div>

Jika ingin rounded atau tumpul di sisi bawah element kita gunakan class rounded bottom

<div class="p-3 mb-2 bg-light border rounded-bottom">Rounded Bottom</div>

Jika ingin runded pada sisi kanan

 <div class="p-3 mb-2 bg-light border rounded-right">Rounded Right</div>

Jika ingin rounded pada sisi kiri

 <div class="p-3 mb-2 bg-light border rounded-left">Rounded Left</div>

Jika ingin rounded circle atau lingkaran kita perlu gunakan css manual tambahan, fungsinya untuk membuat elemenya sama sisi atau ukuranya persegi. Contohnya seperti dibawah ini.

<div class="p-3 mb-2 bg-light border rounded-circle" style="width: 100px; height: 100px;">Rounded Circle</div>

Jika ingin membuat roundednya berbentuk pill, bisa gunakan class rounded pill
<div class="p-3 mb-2 bg-light border rounded-pill">Rounded Pill</div>

Nah jika kita ingin menghilangkan rounded, maka ubah class rounded menjadi 0
<div class="p-3 mb-2 bg-light border rounded rounded-0">Hilangkan rounded</div>

SHADOW:

Shadow adalah bayangan yang ada disetiap sisi element. Penggunaan class nya sangat mudah cukup ketikan seperti dibawah ini.
<div class="p-3 mb-5 bg-light rounded shadow shadow">Tanpa bayangan</div>

Jika kita ingin shadownya kecil atau tipis, gunakan class shadow-sm
<div class="p-3 mb-5 bg-light rounded shadow-sm">Bayangan kecil</div>

Jika kita ingin shadownya besar, gunakan class shadow-lg
<div class="p-3 mb-5 bg-light rounded shadow-lg">Bayangan Besar</div>

Jika kita ingin shadownya hilang, gunakan class shadow-none
<div class="p-3 mb-5 bg-light rounded shadow shadow-none">Tanpa bayangan</div>

Kesimpulan:
Border pada bootstrap 4 sangat beragam dan dapat kita panggil dengan mudah. Kita bisa implementasikan class border ini dalam pembuatan design aplikasi atau website.


Jika ingin tutorial versi videonya, silahkan kunjungi youtube saya:

https://www.youtube.com/watch?v=ZAdBrhTVC28&t=1s


Sekian dulu ya temen temen, semoga postingan ini bermanfaat.

Download Template Aplikasi Kependudukan, bagian dari Seri Membuat Aplikasi Kependudukan



Ini adalah postingan yang merupakan bagian dari  Seri Membuat Aplikasi Kependudukan.  Postingan ini ditujukan untuk wadah download aplikasi atau template. sehingga nanti kita tinggal langsung coding untuk isi saja tidak perlu design website. 

Silahkan download pada link dibawah ini

DOWNLOAD TEMPLATE

Ingin Menjadi Muslim Produktif Part 2 (Menemukan buku muslim produktif)



Beberapa bulan yang lalu saya mencari cari buku atau literature tentang produktif, karna memang keinginan untuk menjadi produktif ini begitu kuat. Aku mulai mencari-cari dari ebook-ebook gratis di internet, video-video pada youtube, hingga akhirnya aku download google play book supaya aku bisa mencari ebook-ebook dan bisa membeli. Naah saat aku sedang cari ebook-ebook di google play book dengan kata kunci produktif muncul lah ebook dengan judul Muslim Produktif, penulisnya adalah Mohammed Faris seseorang yang mendirikan blog https://productivemuslim.com/. harga buku waktu itu kalo gak salah sekitar RP. 60.225 (Saat tulisan ini ditulis), ketebalanya sekitar 294 halaman.

Di awal buku itu sudah menarik perhatianku, pada kata pengantar dari sharif H. Banna  menuliskan bahwa salah satu tantangan terbesar yang dihadapi umat islam adalah menjadi islam yang relevan dalam kehidupan dunia post-modern ini. Apakah nilai-nilai islam memiliki perananan dalam kehidupan modern ?. Dapatkah nilai-nilai islam dapat menjawab tantangan-tantangan serius yang dihadapi dunia modern bagi semua, baik islam atau kafir. Pada paragraph selanjutnya Sharif H. Banna mengatakan bahwa produktivitas dalam pemahaman manusia modern adalah inti sari dari maksimalisi untuk mencapai target-target dan mendapatkan hasil dari yang di inginkan dari sebuah tindakan. Ini menarik bagi saya karna memang apa yang saya pikirkan itu seperti apa yang ditulis oleh sharif H. Banna dalam buku ini, bahwa aku harus maksimal dalam mencapai target-targetku dan aku ingin mendapatkan hasil pula dari tindakanku ini. Kelanjutan dari tulisanya ada yang menarik lagi, ia mengejar materi dan kehidupan yang sukses dalam bekerja, berkeluarga, bahkan liburanpun semua di topang produktivitas. Sehingga kita kehilangan sentuhan kedirian kita yang paling essensial. Maka dari itu pertan selanjutnya adalah dapatkah keimanan akan mengembalikan keseimbangan produktivitas dunia ataupun akhiran dalam kehidupan kita?

Dan saya berharap dalam buku ini dapat menjawab semua pertanyaan? Dari pak sharif H. Banna dan dapat membuat saya menjadi muslim yang produktif dan dapat menghasilkan karya-karya yang bermanfaat bagi orang banyak. Walaupun sebenernya buku tidak dapat mengubah saya, karna yang dapat mengubah saya ya tentu allah melalu saya sendiri, seperti dalam firman nya dalam (QS. Ar-Ra’d [13]:11) Sesungguhnya Allah tidak akan mengubah suatu kaum keadaan suatu kaum, sebelum kaum itu sendiri mengubah apa yang ada pada diri mereka.  

Seri Membuat Aplikasi Kependudukan #Part 1 Demo Aplikasi Kependudukan


bismillahirrahmanirrahim

Assalammualaikum Wr. Wb

Alhamdulillah saya telah menyelesaikan video Seri Membuat Aplikasi Kependudukan #Part 1 Demo Aplikasi Kependudukan  dengan php dan mysql, yaitu aplikasi kependudukan. Insya allah saya akan membuat video cara pembuatanya dengan berseri.

silahkan lihat demo aplikasinya dibawah ini




Semoga Bermanfaat

Assalammualaikum Wr. Wb


Ingin Menjadi Muslim Produktif Part 1 (Bulan bulan tidak produktif)




Lama sudah aku tidak posting blog ini, alasanya sangat klasik aku sibuk ini itu, padahal aku tau aku itu tidak sibuk, tapi ya banyak kegiatan yang tidak produktif. Lho ko bisa banyak kegiatan tapi tidak produktif..? Ya memang aku merasa gak punya waktu banyak, aku harus ini lah, aku harus itu lah, aku harus kesana aku harus kesini, mungkin aku sibuk tapi aku gak produktif.

Aku ngerasa waktu aku tuh kurang banget, padahal ibadahku masih bolong-bolong, banyak project yang terbengkalai, ide ide yang seharusnya aku kerjain malah ilang mabur entah kemana, blog jadi gak update, youtube apa lagi. Terus kesibukanku itu ngapain yak, ngerasa waktu kurang tapi banyak hal yang tidak dapat aku capai, parahnya ibadah malah bolong bolong.

Hal ini sempat aku renungkan, kenapa ini, ada apa ini, padahal banyak orang-orang yang sangat produktif, apalagi orang-orang muslim dahulu itu menciptakan kitab-kitabnya itu berbab-bab berjilid-jilid dalam waktu singkat. Orang yang berkarya seperti penulis, film maker, pembuat film pendek, itu bias membuat berkarya sembari menulis rutin quote quote di social medianya. Ada pula orang yang kesana kesini mengisi seminar, menjadi pembicara. Stand up comedian seperti pandji pragiwaksono yang terus terusan membuat tour standupnya, main film, mengisi acara di kampus2 dll. Dan masih banyak lagi contoh-contoh orang-orang produktif.

Apa saya bisa menjadi produktif, menjadi seorang muslim yang produktif, yang gak Cuma sibuk atau sok sibuk tapi mampu menciptakan sesuatu atau berbuat sesuatu yang bermanfaat. Merenung terus juga gak bisa mengubah sibukku menjadi produktif, yang harus aku lakukan adalah beraksi atau berbuat sesuatu, salah satunya adalah menulis blog ini, mengupdate blog ini, paling enggak otak aku bisa bekerja kembali hehehe.

Download Toko Online Sederhana Dengan PHP & Mysqli



Bissmillahirohmanirohim
Assalammualaikum, wr.wb

Kali ini saya akan share demo toko online sederhana dengan php & mysqli.

Sourcecode ini cocok untuk anda yang ingin belajar pemograman berbasis web (Bahasa pemograman php). dengan melihat sourcecode yang sudah jadi kita bisa belajar struktur datanya, logika, pemakaian query, rancangan databasenya. sourcecode ini juga bisa dikembangkan lagi.

Di toko online sederhana ini

Custommer
1. Custommer bisa memilih product, dan memasukanya ke keranjang belanja.
2. Custommer setelah melakukan belanja, customer dapa chekout dan memasukan data diri serta alamat.

Admin
1. Admin dapat mengupload data barang, mengubah data barang, menghapus data barang.
2. Admin dapat melihat customer yang sudah membeli barang, memberikan tanggapan apakah customer sudah melakukan pembayaran atau belum
3. Admin dapat menambahkan category barang, menghapus, mengubah, serta menambahkan sub category.
4. Admin dapat menambahkan user yang bertindak sebagai adminya.


Berikut beberapa ScreenShoot Aplikasinya

Tampilan Utama


Tampilan Login Admin

Tampilan Halaman Admin
Untuk mengakses halaman admin,
username: admin
password: admin123


Untuk Mendownload Sourcecodenya silahkan

DOWNLOAD DISINI

Untuk melihat Demo nya

LIHAT DISINI