Tutorial Bootstrap #8 : Membuat Dropdown

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

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

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

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.

Tutorial Sublime Text #3: Menambahkan Folder Project

Tutorial Sublime Text #3: Menambahkan Folder Project

Unknown   September 30, 2018   Comment  

Selanjutnya, kita akan akan belajar bagaimana cara memasukkan folder project dan membuat file di text editor Sublime Text, cara sangat mudah, baiklah mari kita mulai.

Pastikan aplikasinya sudah berjalan, kemudian pada bagian menu bar, kalian pilih Project > Add Folder to Project, kemudian kalian pilih folder yang kalian ingin tambahkan, pada kasus kali ini saya menambahkan folder My Project, kalian dapat melihatnya pada gambar berikut.

Jika folder yang kalian telah tambahkan tidak muncul seperti, kalian bisa menampilkannya dengan cara kalian pilih View > Side Bar > Show Side Bar, maka akan muncul folder yang kalian telah tambahkan sebelumnya di bagian sidebar, seperti yang kalian telah lihat pada gambar diatas.

Selanjutnya, kalian bisa menambahkan file didalam folder yang telah kalian tambahkan tadi, dengan cara kalian klik kanan pada mouse kalian masing masing, kemudian pilih New File, kemudian akan muncul tab baru seperti gambar dibawah ini.

Kemudian tekan tombol CTRL + S untuk menyimpan file nya, setelah itu silahkan kalian kasih nama file dan extensinya sesuai keinginan kalian, pada kasus kali ini saya memberi nama file saya bernama index.html dengan extensi .html setelah itu pilih tombol Save, seperti gambar berikut.

Setelah kalian menyimpan file nya, maka kita telah bisa menulis tag tag HTML didalam file dengan extensi .html yang kita telah buat tadi, seperti gambar berikut.

Oke kita telah berhasil menambahkan folder di Sublime Text dan menambahkan file didalam folder yang telah kita tambahkan, bagaimana menurut kalian cukup mudah atau tidak tutorial kali ini.

Jika ada kesalahan pada tutorial ini, silahkan tuliskan saja komentar kalian dibawah, jangan malu malu berkomentar nih, terima kasih atas perhatiannya mohon maaf jika ada kesalahan, semoga tutorial ini bermanfaat, sekian, sampai berjumpa di tutorial selanjutnya.

Kalian Luar Biasa !

Tutorial Sublime Text #2: Instalasi Package Control

Tutorial Sublime Text #2: Instalasi Package Control

Unknown   September 30, 2018   Comment  

Tutorial selanjutnya kita akan belajar cara menginstall Package Control di Sublime Text, kalau kalian belum tau apa itu Package Control, simplenya gini, Package Control berfungsi untuk mengontrol package package yang ada di Sublime Text, kalian bisa install, remove, disable, enable package package dan masih banyak lagi yang bisa dilakukan, jika kalian tidak menginstall Package Control di Sublime Text kalian, maka kalian nggak akan sama sekali bisa menginstall package package yang kalian butuhkan, untuk itu pada tutorial ini saya akan menjelaskan cara mudah menginstall Package Control di Sublime Text, mari kita mulai tutorial ini.

Untuk mendapatkan Package Control silahkan kalian kunjungi websitenya di https://ww.packagecontrol.io, kemudian akan menampilkan halaman seperti gambar berikut.

Kemudian kalian klik pada bagian Install Now, akan menampilkan halaman seperti gambar dibawah ini.

Pada bagian ini kita akan di sodorkan dua cara menginstall Package Control, yang pertama dengan cara Simple yaitu menginstall Package Control secara online melalui console yang ada di Sublime Text, caranya kalian tinggal copy kode seperti gambar dibawah ini.

Jika kalian menggunakan Sublime Text versi 3 silahkan copy kode yang sudah disediakan untuk versi 3, jika kalian menggunakan Sublime Text versi 2 silahkan copy code yang disediakan untuk versi 2. Setelah kalian copy kodenya, paste kodenya di console Sublime Text, cara menampilkan console di Sublime Text, kalian klik View > Show Console, atau dengan menekan CTRL + `, setelah itu paste kodenya lalu tekan Enter, seperti gambar berikut.

Tunggu proses instalasinya selesai, pastikan kalian mempunyai koneski internet yang stabil guna memperlancar proses instalasi.

Cara yang kedua adalah cara Manual, pada cara ini kalian download Package Control pada bagian Package Control.sublime-package, setelah kalian download, kalian copy filenya.

Setelah kalian copy filenya, kalian buka aplikasi text editor Sublime Text, pilih Preferences > Browse Packages, kemudian akan tampil seperti gambar berikut.

Klik pada bagian Sublime Text 3 agar mundur satu folder, kemudian akan tampil seperti gambar berikut.

Masuk pada bagian folder Installed Packages, kemudian paste file Package Control.sublime-package yang telah di copy tadi, seperti gambar dibawah ini.

Sampai muncul file 0_package_control_loader.sublime-package, seperti yang kalian lihat pada gambar diatas, jika sudah muncul file tersebut, maka kalian udah bisa menginstall package di Sublime Text.

Selanjutnya, cara kita menginstall package package nya bagaimana ?, caranya cukup mudah, kalian tinggal pilih bagian Preferences > Package Control, tampil seperti gambar berikut.

Pada bagian ini, kalian tinggal pilih Package Control: Install Package, lalu cari package yang kalian ingin install, pada kasus kali ini saya akan menginstall package Emmet, seperti gambar berikut.

Sekarang kalian udah berhasil menginstall Package Control baik itu secara Simple atau Manual, jika kalian kebingungan dengan package apa yang seharusnya kalian install, kalian kunjungi akan website https://www.packagecontrol.io pada website itu kalian bisa mengetahui package package mana yang sedang trending, populer atau mungkin selanjutnya mungkin saya akan membuat tutorialnya untuk kalian.

Baik, sampai disini dulu tutorialnya, jika ada kesalahan di tutorial ini silahkan kalian kasih aja komentar pada kolom komentar dibawah, semoga tutorial ini bermanfaat, mohon maaf jika ada kesalahan, terima kasih atas perhatiannya, sampai jumpa di tutorial selanjutnya.

Kalian Luar Biasa !