Kode Kuliahan: Bootstrap

Showing posts with label Bootstrap. Show all posts

Tuesday, October 2, 2018

Tutorial Bootstrap #8 : Membuat Dropdown

Unknown October 02, 2018 Comment

Hai semuanya….

Pada tutorial kali, kita akan belajar membuat menu dropdown dengan Bootstrap, menu dropdown merupakan sebuah menu yang dapat ditoggle serta dapat memilih opsi yang telah ditentukan.

Membuat Menu Dropdown.

Untuk membuat sebuah menu dropdown, buatlah sebuah tag <div> lalu tambahkan class “dropdown”, contohnya seperti berikut.

  <div class="dropdown">
...
</div>

Selanjutnya, didalam tag <div> tersebut, buatlah tag <button> dan tambahkan atribut class = “btn btn-primary” dan “dropdown-toggle”, type=”button”, data-toggle= ”dropdown”, serta buatlah didalam tag <button> sebuah text “Menu Dropdown”, tag <span> tambahkan class “caret” di, contohnya sebagai berikut.

  <div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Dropdown <span class="caret"></span></button>
</div>

Berikutnya, masih didalam tag <div>, buatlah tag <ul> dan tambahkan class “dropdown-menu” dan didalam tag <ul>, buatlah tag <li> yang masing masingnya memiliki tag <a href=”#”> didalamnya, contohnya seperti berikut.

  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Desclimer</a></li>
      <li><a href="#">Tutorial</a></li>
      <li><a href="#">Download</a></li>
      <li><a href="#">Template</a></li>
      <li><a href="#">Video</a></li>
    </ul>  </div>  
</div>

Hasilnya.

Ketika, mengklik Menu Dropdown, maka opsinya akan muncul, dapat dilihat seperti berikut.

Menambahkan Opsi Header Menu Dropdown

Selanjutnya, kita dapat membuat sebuah header dari opsi dropdownnya, untuk membuat header pada opsinya, buatlah tag <li> dan tambahkan class “dropdown-header”, taruh didalam dropdown menu, contohnya seperti berikut.

  <div class=”dropdown”>
    <button class=”btn btn-primary dropdown-toggle” type=”button” data-toggle=”dropdown”>Menu Dropdown <span class=”caret”></span></button>
    <ul class=”dropdown-menu”>
      <li class=”dropdown-header”>Informasi</li>
      <li><a href=”#”>Home</a></li>
      <li><a href=”#”>About</a></li>
      <li><a href=”#”>Contact</a></li>
      <li><a href=”#”>Desclimer</a></li>
      <li class=”dropdown-header”>Material</li>
      <li><a href=”#”>Tutorial</a></li>
      <li><a href=”#”>Download</a></li>
      <li><a href=”#”>Template</a></li>
      <li><a href=”#”>Video</a></li>
    </ul>
  </div>

Hasilnya.

Memisahkan Opsi Menu Dropdown

Selain dapat menambahkan header pada opsi menu dropdown, kita juga dapat memisahkan opsinya dengan menggunakan class “divider”, menambahkan class “divider” pada tag <li>, contohnya seperti berikut.

  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Dropdown <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-header">Informasi</li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Desclimer</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">Material</li>
      <li><a href="#">Tutorial</a></li>
      <li><a href="#">Download</a></li>
      <li><a href="#">Template</a></li>
      <li><a href="#">Video</a></li>
    </ul>
  </div>

Hasilnya.

Dropup

Selain Dropdown, kita juga dapat membuat sebuah dropup, caranya, ganti class “dropdown” menjadi “dropup”, pada tag <div> yang menjadi pembungkusnya, contohnya seperti berikut.

  <div class="dropup">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Dropdown <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-header">Informasi</li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Desclimer</a></li>
      <li class="divider"></li>
      <li class="dropdown-header">Material</li>
      <li><a href="#">Tutorial</a></li>
      <li><a href="#">Download</a></li>
      <li><a href="#">Template</a></li>
      <li><a href="#">Video</a></li>
    </ul>
  </div>

Hasilnya.

Sekian, tutorial membuat dropdown dengan Bootstrap, semoga teman teman paham dan mengerti dengan tutorial ini dan bermanfaat, jika ada pertanyaan mengenai tutorial ini, silahkan tuliskan komentar anda dibawah ya, terima kasih.

Tutorial Bootstrap #7: Membuat Jumbotron

Unknown October 02, 2018 Comment

Hai semuanya...

Pada tutorial kali ini kita akan belajar membuat jumbotron dengan Bootstrap, jumbotron merupakan sebuah box besar untuk menampilkan sebuah informasi atau konten yang spesial.

Membuat Jumbotron

Untuk membuat jumbotron pada Bootstrap, tambahkan class “jumbotron” pada tag <div> setelah itu tambahkan sebuah informasi, contohnya sebagai berikut.

  <div class="jumbotron">
    <h1>Kode Kuliahan</h1>
    <p>Kode Kuliahan merupakan sebuah blog berkategori edukasi
    yang membahas tutorial HTML, CSS, Java Script, PHP, MySQL lainnya juga.</p>
  </div>

Hasilnya.

Menambahkan Button

Selain text, didalam jumbotron, kita dapat menambahkan sebuah button, contohnya sebagai berikut.
Baca juga - Cara membuat button dengan Bootstrap

  <div class="jumbotron">
    <h1>Kode Kuliahan</h1>
    <p>Kode Kuliahan merupakan sebuah blog berkategori edukasi
    yang membahas tutorial HTML, CSS, Java Script, PHP, MySQL lainnya juga.</p>
    <a href="#" class="btn btn-primary btn-lg">Selengkapnya</a>
  </div>

Hasilnya.

Demikian, tutorial membuat jumbotron dengan Bootstrap, semoga tutorial ini bermanfaat, mohon maaf jika ada kesalahan, jika ada pertanyaan mengenai tutorial ini, silahkan tuliskan komentar anda dibawah, terima kasih.

Tutorial Bootstrap #6: Membuat Pagination

Unknown October 02, 2018 Comment

Hai semuanya...
Apa kabar semuanya, semoga tetap dalam keadaan sehat.

Pada tutorial kali ini kita akan belajar membuat pagination dengan Bootstrap, jika kita mempunyai sebuah halaman website yang banyak maka kita harus membagi setiap halamannya dengan pagination ini, langsung kita mulai belajar cara buat paginationnya.

# Membuat Pagination

Untuk membuat sebuah pagination dengan Bootstrap, tambahkan class “pagination” pada tag <ul> kemudian didalam tag <ul> buatlah tag <li> yang masing masing didalam tag <li> memiliki tag <a href=”#”>, contohnya sebagai berikut.

<ul class="pagination">
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
</ul>

Hasilnya.

# Mengubah Size / Ukuran Pagination

Jika ingin mengubah ukuran pagination menjadi besar atau kecil, ada 2 class yang digunakan mengubahnya yaitu

pagination-lg
pagination-sm

Class pagination-lg berfungsi untuk mengubah ukuran/size pagination menjadi large/besar, contoh penggunaannya sebagai berikut.

  <ul class="pagination pagination-lg">
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
 </ul>

Hasilnya.

Sedangkan class pagination-sm berfungsi untuk mengubah size/ukuran pagination menjadi kecil, contohnya sebagai berikut.

  <ul class="pagination pagination-sm">
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
  </ul>

Hasilnya.

# Class Active Dan Disabled

Pada dasarnya penggunaan class “active” pada untuk link yang sedang aktif digunakan sedangkan class disabled menonaktifkan link agar tidak dapat diklik, pada pagination kita dapat menggunakan kedua class tersebut, contoh misalkan link aktif pada nomor 1, maka tambahkan class “active” pada tag <li> nomor satu, contohnya sebagai berikut.

  <ul class="pagination pagination-lg">
    <li class="active"><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
  </ul>

Hasilnya.

Namun, jika mengganti class “active” menjadi “disabled”, maka linknya akan menjadi tidak dapat diklik atau nonaktif link.

# Tombol Previous dan Next

Untuk menambahkan tombol previous dan next, syntax sebagai berikut.

  <ul class="pagination pagination-lg">
    <li><a href="">Previous</a></li>
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li class="active"><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
    <li><a href="">Next</a></li>
  </ul>

Hasilnya.

Demikian tutorial membuat pagination dengan Bootstrap, semoga tutorial ini bermanfaat, jika ada pertanyaan mengenai tutorial ini, silahkan tuliskan komentar anda dibawah, terima kasih.

Tutorial Bootstrap #5: Membuat Breadcrumb

Unknown October 02, 2018 Comment

Hai semuannya...

Pada tutorial kali ini, kita akan belajar membuat breadcrumb dengan Bootstrap, breadcrumb biasanya digunakan untuk menunjukkan lokasi atau herarki halaman yang diakses oleh user.

Membuat Breadcrumb

Untuk membuat sebuah breadcrumb, gunakan class “breadcrumb” pada tag <ul>, contohnya sebagai berikut.

  <ul class="breadcrumb">
...
</ul>

Selanjutnya, didalam tag <ul> tambahkan tag <li> yang masing masing didalam tag <li> memiliki tag <a href=”#”>, contohnya sebagai berikut.

  <ul class="breadcrumb">
    <li><a href="#"></a>Home</li>
    <li><a href="#"></a>Tutorial</li>
    <li><a href="#"></a>Front End</li>
    <li class="active"><a href="#"></a>CSS</li>
  </ul>

Hasilnya.

Jadi membuat sebuah breadcrumb sangatlah simple.
Demikian tutorial membuat breadcrumb dengan Bootstrap, semoga tutorial ini bermanfaat bagi kalian, jika ada pertanyaan mengenai tutorial ini, silahkan tuliskan komentar anda dibawah, terima kasih.

Saturday, January 13, 2018

Tutorial Bootstrap #4: Membuat Alert

Unknown January 13, 2018 Comment

Pada tutorial kali ini kita akan membahas cara membuat alert dengan Bootstrap, alert berguna untuk memberikan pesan error, warning, danger, info atau success dikala user melakukan sebuah aksi aksi tertentu, misalkan seorang user sedang melakukan login dimana user memasukkan username dan password, namun yang user memasukkan data yang salah, maka akan muncul sebuah alert error atau sebaliknya jika user memasukkan data yang benar maka akan muncul sebuah alert success. Terus bagaimana cara membuat alert dengan Bootstrap ?, silahkan simak tutorial berikut ini dengan seksama.

Membuat Alert

Pada Bootstrap, kita telah disiapkan class untuk membuat sebuah alert sebagai berikut class class yang digunakan.

alert-success
alert-info
alert-warning
alert-danger

Untuk menggunakan class class tersebut harus diawali dengan class "alert" baru dilanjutkan dengan class class diatas, contohnya dapat dilihat pada syntax berikut ini.

<strong>Berhasil!</strong> Situs anda telah sepenuhnya disetujui

</div>

<strong>Info!</strong> Situs anda sedang tahap review

</div>

<strong>Warning!</strong> Website anda sedang tidak aman

</div>

<strong>Danger!</strong> Website anda telah terkena Malware

</div>

Hasilnya dapat dilihat pada gambar dibawah ini.

Membuat Alert Link

Selanjutnya, kita dapat menambahkan sebuah link pada alert, class yang digunakan adalah "alert-link", class ini biasanya digunakan pada tag <a href=""> , dimana tag tersebut digunakan untuk membuat sebuah link, tentunya ini sangat berguna dimana user ingin melihat informasi detail dari alert yang muncul ketika melakukan aksi tertentu, contohnya dapat dilihat pada syntax dibawah ini.

<strong>Berhasil!</strong> Situs anda telah sepenuhnya disetujui <a href="#" class="alert-link">Selengkapnya</a>

</div>

<strong>Info!</strong> Situs anda sedang tahap review <a href="#" class="alert-link">Selengkapnya</a>

</div>

<strong>Warning!</strong> Komputer anda sedang tidak aman <a href="#" class="alert-link">Scan Sekarang</a>

</div>

<strong>Danger!</strong> Komputer anda telah terkena Malware <a href="#" class="alert-link">Scan Sekarang</a>

</div>

Hasilnya dapat dilihat pada gambar dibawah ini.

Membuat Close Button Alert

Berikutnya, kita juga dapat membuat sebuah tombol close (X) pada alert, ini berguna saat dimana user menutup alert yang muncul saat melakukan sebuah aksi tertentu, untuk membuat sebuah tombol close pada alert, tambahkan class "alert-dismissable" pada tag <div> yang menjadi pembungkus alert, kemudian tambahkan class "close" dan data-dismis="alert" pada tag <a> atau <button>, contohnya dapat dilihat pada syntax berikut.

<strong>Berhasil!</strong> Situs anda telah sepenuhnya disetujui <a href="#" class="alert-link">Selengkapnya</a>

</div>

<strong>Info!</strong> Situs anda sedang tahap review <a href="#" class="alert-link">Selengkapnya</a>

</div>

<strong>Warning!</strong> Komputer anda sedang tidak aman <a href="#" class="alert-link">Scan Sekarang</a>

</div>

<strong>Danger!</strong> Komputer anda telah terkena Malware <a href="#" class="alert-link">Scan Sekarang</a>

</div>

Hasilnya dapat dilihat pada gambar dibawah ini.

Implementasi

Pada tutorial sebelumnya, kita pernah membahas cara membuat button dengan Bootstrap, dalam alert, kita dapat menambahkan sebuah button, dapat dilihat pada gambar dibawah ini.

Syntaxnya seperti berikut.

<h2>Kabar Baik!</h2>

<p>Hai <strong>Karis Maulana</strong>, Terima kasih telah bergabung bersama kami, sekarang anda dapat menayangkan iklan pada website anda dan mulailah merintis uang dari iklan yang ditampilkan, untuk lebih detailnya klik tombol Selengkapnya.</p>

<a href="#" class="btn btn-success">Selengkapnya</a>

</div>

Bagaimana, cukup mudah bukan menggunakan Bootstrap ?

Kita hanya tinggal menggunakan class class yang telah disediakan oleh Bootstrap sendiri.

Kami minta pada kalian, jika ada kesalahan, kekurangan atau hal hal lainnya silahkan tuliskan komentar pada kolom komentar dibawah ya, Terima Kasih.

Semoga Bermanfaat.

Wednesday, January 10, 2018

Tutorial Bootstrap #3: Membuat Button

Unknown January 10, 2018 Comment

Pada tutorial selanjutnya kita akan belajar bagaimana cara membuat button dengan Bootstrap, pada Bootstrap telah menyediakan berbagai style button/tombol, berikut class class yang digunakan untuk membuat button.

Class Style Button

Berikut ini adalah class untuk style button

btn
btn-default
btn-primary
btn-success
btn-info
btn-warning
btn-danger
btn-link

Class tersebut dapat digunakan pada tag <input>,<a> atau <button>, untuk menggunakannya, dapat dilihat pada syntax dibawah ini.

Hasilnya dapat dilihat pada gambar dibawah ini.

Class Button Size

Berikut ini adalah class untuk membuat ukuran / size button

btn-lg
btn-md
btn-sm
btn-xs

Untuk menggunakannya, dapat dilihat pada syntax berikut.

<button class="btn btn-primary btn-lg">Besar</button>

<button class="btn btn-success btn-md">Sedang</button>

<button class="btn btn-warning btn-sm">Kecil</button>

<button class="btn btn-danger btn-xs">Ekstra Kecil</button>

Hasilnya dapat dilihat pada gambar dibawah ini.

Class Active dan Disabled

Berikut ini adalah class untuk mengaktifkan tombol (Active Button) dan menonaktifkan tombol (Disabled Button).

active
disabled

Untuk menggunakannya, dapat dilihat pada syntax dibawah ini.

<button class="btn btn-primary active">Active Button</button>

<button class="btn btn-danger disabled">Disabled Button</button>

Hasilnya dapat dilihat pada gambar berikut.

Class Block Button

Brikut ini adalah class untuk membuat tombol menjadi melebar.

btn-block

Untuk menggunakannya, dapat dilihat pada syntax dibawah ini.

<button class="btn btn-primary btn-block">Primary</button>

<button class="btn btn-danger btn-block">Danger</button>

Hasilnya dapat dilihat pada gambar dibawah ini.

Implementasi

Pada tutorial sebelumnya kita pernah membahas cara membuat table dengan bootstrap, sekarang kita akan coba membuat table, yang berisikan data data statis dan memiliki tombol aksi pada tablenya, silahkan tuliskan syntax seperti dibawah ini.

<thead>

<th>Username</th>

<th>Email</th>

</thead>

<tbody>

<tr>

<td>Sukiman</td>

<td>@sukiman</td>

<td>sukiman@example.com</td>

<td>

<a href="#" class="btn btn-danger">Hapus</a>

</td>

</tr>

<tr>

<td>Januar</td>

<td>@januar</td>

<td>januar@example.com</td>

<td>

<a href="#" class="btn btn-danger">Hapus</a>

</td>

</tr>

<tr>

<td>wira@example.com</td>

<td>

<a href="#" class="btn btn-danger">Hapus</a>

</td>

</tr>

<tr>

<td>Aslihatin Nisa</td>

<td>@aslihatinnisa</td>

<td>aslihatinnisa@example.com</td>

<td>

<a href="#" class="btn btn-danger">Hapus</a>

</td>

</tr>

</tbody>

</table>

Hasilnya dapat dilihat pada gambar dibawah ini.

Sekian dulu tutorialnya, jika ada kesalahan, kekurangan atau hal hal lainnya silahkan tuliskan komentar anda dibawah ya.

Semoga bermanfaat.

Tuesday, January 9, 2018

Tutorial Bootstrap #2: Membuat Table

Unknown January 09, 2018 1 comment

Pada tutorial kali ini kita akan belajar mengenai cara membuat tabel dengan Bootsrap, gunanya table ini kita dapat menampung data data seperti data mahasiswa, barang, pengunjung dan data data lainnya, pada Bootstrap sendiri kita sudah disiapkan class "table", cara menggunakan cukup mudah, kita tinggal memberikan class "table" pada tag <table>, berikut syntax dasarnya.

Hasilnya dapat dilihat pada gambar berikut.

Tabel Striped

Untuk memberikan efek strip pada tabel, tambahkan class "table-striped" pada tag <table>, seperti berikut <table class="table table-striped">, hasil dapat dilihat pada gambar berikut.

Table Bordered
Untuk memberikan border pada table, tambahkan class "table-bordered", seperti berikut <table class="table table-bordered">, hasilnya dapat dilihat pada gambar berikut.

Table Responsive
Agar table menjadi responsive, buat tag <div> yang berkelas "table-responsive" dimana menjadi pembungkus tag <table>, seperti syntax berikut.

Hasilnya, dapat dilihat pada gambar dibawah ini.

Jadi, ketika ukuran browser diperkecil, maka table menjadi responsive. Bagaimana, sangat mudah bukan menggunakan Bootstrap, kita hanya menggunakan class class yang telah disediakan oleh Bootstrap.

Sampai disini dulu pembahasannya, jika ada kesalahan, kekurangan atau hal hal lainnya, silahkan tuliskan komentar anda dibawah.

Semoga Bermanfaat.

Tutorial Bootstrap #1: Pengenalan Bootstrap

Unknown January 09, 2018 1 comment

Bootstrap merupakan frameowrk HTML,CSS dan Java Script yang sangat populer untuk mengembangkan project responsive dan mobile di web, responsive web adalah sebuah situs web yang otomatis menyesuaikan diri pada semua perangkat agar terlihat bagus, seperti pada dekstop, mobile dan tablet. Bootstrap adalah framework font-end yang gratis dan open-source yang siapa saja boleh berkonstribusi tehadap perkemabngan framework Bootstrap, yang memberikan kemampuan untuk membuat design responsive dengan mudah.

Bootstrap mencangkup template design yang berbasis HTML dan CSS untuk typography, forms, buttons, tables, navigation, modals dan lainnya. Bootstrap telah dikembangakan oleh Mark Otto dan Jacob Thornton dan telah dirilis menjadi produk open-source pada Agustus 2011 pada GitHub, pada Juni 2014 Bootstrap menjadi proyek open-source nomor 1 pada GitHub.

Ada beberapa keuntungan menggunakan Bootstrap

Mudah digunakan, cukup hanya memilik pengetahuan dasar HTML dan CSS, bisa memulai menggunakan Bootstrap
Memiliki Fitur Responsive, CSS Responsive Bootstrap dapat menyesuaikan ke desktop, phone dan tablet.
Kompatibilitas dengan browser yang paling populer, seperti Chrome, Firefox, Safari, Internet Explorer dan Opera.

Untuk mendapatkan Bootstrap, kita bisa mendapatkannya pada websitenya di https://getbootstrap.com/docs/3.3/ , anda dapat medownloadnya atau menggunakan CDN ( Content Delivery Network).

Jika memilih menggunakan CDN (menggunakan secara online), letakkan syntax berikut pada bagian sebelum </head>.

Dan syntax berikut sebelum tag </body>.

Atau jika memilih untuk mendownload paket Bootstrap (menggunakan secara offline), ikut langkah langkah berikut.

Download paket Bootstrap di https://getbootstrap.com/docs/3.3/
Download Jquery di http://jquery.com/download/
Setelah mendownloadnya, ektrak file zipnya
Pidahkan folder bootstrap yang telah diekstrak dan file JQuery ke folder project anda.
Copy dan Paste syntax berikut ini ke file project anda.

Untuk mengetes apakah bootstrap sudah berjalan atau tidak, tuliskan syntax berikut setelah tag <body>

Jika hasilnya seperti gambar dibawah ini, maka Bootstrap telah berjalan.

Gampangkan !

Selama belajar bootstrap, kita akan banyak menggunakan atribut class dan id, itu mengapa sebelum belajar bootstrap minimal sudah belajar HTML dan CSS dasar, karena nanti akan banyak bermain dengan tag <div>, <span> dan atribut class dan id.

Sekian dulu pembahasan mengenai Pengenalan Tentang Framework Bootstrap, kami minta kepada kalian jika ada kesalahan, kekurangan atau hal hal lainnya, silahkan tuliskan komentar anda dibawah.

Semoga Bermanfaat.