KUPAS BOOTSTRAP SNIPPETS III
Ditulis Oleh: Alfians Increms April, 2021
Aplikasi: Perkebunan - Pertambangan - HTI - HPH Sistem Integrasi
KUPAS BOOTSTRAP SNIPPETS III
- Membuat Thumbnails bergambar dengan Boostraps
- Membuat Card Border Style dengan Bootstrap
- Membuat figure dengan Bootstrap
Membuat Thumbnails bergambar dengan Boostraps
Thumbnails Bergambar dengan Bootstrap
Sebelumnya kita sudah mempelajari thumbnails tanpa gambar dengan bootstrap dan kali ini membahas sekaligus mempraktekkan thumbnails bergambar, sebenarnya tidak jauh berbeda hanya ada penambahan sedikit skripnya saja, bagi yang belum mempelajari thumbnails tanpa gambar silahkan kunjungi disini :
Bagi yang sudah memahami artikel sebelumnya, kita hanya melanjutkan dengan menambah skrip pada thumbnails yang bergambar adapun penambahannya seperti dibawah ini :
<div class="col-sm-auto col-md-4">
<div class="thumbnail">
<img src="gambarxflash/x-flash-faq-5.png">
<div class="caption">
<h4>Bahasa Pemrograman</h4>
<p>Bagi yang ingin mempelajari beberapa bahasa pemrograman, kami sudah menyediakan disitus www.xflash.co.id bagi anda yang ingin belajar maka dapat mengunjunginya disini</p>
<p><a href="Menu_Javascript.php" class="btn btn-outline-primary btn-lg btn-sm" role="button">Javascript</a> <a href="Menu_jQuery.php" class="btn btn-outline-warning btn-lg btn-sm" role="button">JQueary</a> <a href="Menu_php.php" class="btn btn-outline-warning btn-lg btn-sm" role="button">PHP</a> <a href="Menu_Mysql.php" class="btn btn-outline-warning btn-lg btn-sm" role="button">MySQL</a> <a href="http://xflash.co.id/?hal=Perkenalan-VBA-Excel" class="btn btn-outline-warning btn-lg btn-sm" role="button">VBA Excel</a>
</p>
</div></div></div>
Diletakkan diantara <div class="thumbnail"> dan <div class="caption">
Adapun hasil penampakannya seperti contoh dibawah ini :
X-Flash (Increms System)
Setiap Laporan yang terinput secara automatis memberikan laporan visual statistik, mempermudah dalam membaca data, proses hanya sekali penginputan
Tanya Jawab Seputar Aplikasi
Beberapa pertanyaan seputar Aplikasi X-Flash yang sudah kami jawab dan kami sertakan juga video untuk menjawabnya sehingga lebih mudah mengetahui secara mendalam
Integrited Network System & Akurat
Aplikasi ini memberikan anda solusi dalam mengelola data yang sistematis, ringan, cepat dan akurat serta user friendly bagi pengguna, tersedia juga X-flash Increms Multi Perusahaan tanpa batas yang saling terkoneksi satu sama lain (multi integritas tinggi & Kredibel)
Manajemen Sederhana Oil Trap
Cara memisahkan air dan minyak dengan cara yang sangat sederhana dengan dibungkus aroma elegant hingga memberikan manfaat yang bernilai tinggi, mudah dalam penerapannya, Oil trap (Solar Trap) ini cukup efektif dan efisien.
Rumus Konversi Hourmeter(Hm)
Rumus Konversi Menit ke Hourmeter(Hm) ke Kilometer(Km) dan perbedaan Hektometer dan Hourmeter(Hm), hal ini tentu sangat penting untuk diketahui walaupun "Just to Know"
Penerapan KPI Indikator
Dalam manajemen tentu tidak lepas dalam memberikan penilaian kinerja kepada karyawan, salah satunya dapat menggunakan KPI Indikator hal ini sangat menunjang dalam hal meningkatkan mutu, kualitas serta produksi perusahaan itu sendiri, bila suatu manajemen tak memiliki penilaian secara data aktual maka berakibat hubungan yang tidak harmonis antar karyawan dengan perusahaan.
Manajemen Mutu ISO
Dalam hal ini hampir sebagian Karyawan Perusahaan tentu mengetahui akan ISO 9000-2000 karena ini merupakan bagian yang penting dalam strategi bisnis.
Bahasa Pemrograman
Bagi yang ingin mempelajari beberapa bahasa pemrograman, kami sudah menyediakan disitus www.xflash.co.id bagi anda yang ingin belajar maka dapat mengunjunginya disini
Rumus Excel Lengkap & VB Excel
Anda juga dapat memperdalam keilmuan excel dengan rumus-rumus excel yang lengkap pada halaman yang sudah kami sediakan
Anda dapat mencobanya di website yang dibuat, mulailah merancang secara perlahan-lahan sehingga menambah keilmuan ada baiknya dalam hal skrip itu ditulis tidak selalu copy paste agar mudah dan cepat memahami secara mendalam dan tidak cepat lupa, sedikit penulis tambahkan perhatikan skrip ini : <div class="col-sm-auto col-md-4">, col-sm-auto pada kata auto bisa diganti dengan angka 3,4,6,8,9,10,11 dan 12 apa sih maksudnya, maksudnya adalah pembagian halaman web yang berlaku pada Bootstrap ini sudah di nyatakan batasannya yakni 12, jadi 12 itu adalah ukuran halaman panjang web, nah anda mau bagi berapa halaman agar artikel bisa dibagi-bagi, ini terserah pengguna sih. adapun untuk col-md-4 disinilah letak pemotongannya jika 4 maka halaman hanya terbagi 3 saja jika ditulis col-md-3 maka halaman akan terbagi 4, terhitung dari 12 dibagi 3 = 4 halaman (halaman yang satu tampilan menjadi 4 tampilan maksudnya seperti itu, namun ini semua tidak berlaku jika sebelumnya tidak diberikan skrip <div class="row">, skrip ini harus berada diatas.
Membuat Card Border Style dengan Bootstrap
Card Border Style dengan Bootstrap
Card Border dapat digunakan untuk hal-hal informasi yang bersifat pendek, bisa juga untuk informasi bahaya atau peringatan, pada prinsipnya kembali si pengguna digunakan untuk apa, perhatikan contoh dibawah ini.
Warning card title
Ini sekedar contoh semata, anda dapat mengembangkannya sesuai kebutuhan
Danger card title
Ini juga sekedar contoh semata, anda dapat mengembangkannya sesuai kebutuhan
Adapun skripnya sebagai berikut :
<div class="row">
<div class="col-12 col-md-4">
<div class="card-header">
<div class="card-body table-responsive p-0" style="font-size: 16px; color: #000000; text-align: left;">
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Belajar PHP dengan Bootstrap</div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Ini sekedar contoh semata, anda dapat mengembangkannya sesuai kebutuhan</p>
</div></div>
</div></div></div>
<div class="col-12 col-md-4">
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Belajar Php dengan JQUERY</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Ini juga sekedar contoh semata, anda dapat mengembangkannya sesuai kebutuhan</p>
</div></div></div></div>
Jika ternyata tak mengeluarkan warna sesuai judulnya yakni Danger dan warning, maka rubah border menjadi card seperti ini : class="card card-warning mb-3". Anda juga dapat menambahkannya sehingga menjadi 4 kolom atau merubah angka 4 pada md-4 menjadi atau dirubah 3 (md3) sehingga nanti menjadi 4 kolom dan 4 tampilan. selamat mencoba.
Jika tidak berwarna maka Kasus diatas memiliki banyak faktor, bisa jadi bootstrap yang digunakan versi tinggi atau kebalikannya, bisa juga ada yang tak tereksekusi perintahnya dalam artian pada saat penulisan skrip ada yang belum di integrasikan oleh tim bootstrap.
Membuat figure dengan Bootstrap
figure dengan Bootstrap
Figure pada bootstrap biasanya digunakan untuk informasi iklan, diletakkan sesuai keinginan sehingga tidak menganggu pengunjung yang sedang membaca
Bagi yang sering berselancar biasanya menemukan iklan kecil terkadang berada ditengah maupun disela-sela tulisan, nah itu namanya Figure, entahlah kenapa juga diberi nama itu, setahu penulis figure itu bingkai foto semacam itulah, semakin kedepan kayaknya semakin menggila bahasa-bahasa nih, ya sudahlah kita lanjutkan pembahasan figure, adapun skrip diatas seperti yang ada dibawah ini :
<div class="row">
<div class="col-12 col-md-4">
<div class="card-header">
<figure class="figure"><a href="?hal=Pemesanan-Aplikasi">
<img src="gambarxflash/boxflash.png" alt="..." width="142" height="103" class="figure-img img-fluid rounded">
<figcaption class="figure-caption">Aplikasi integrasi sistem multi perusahaan.</figcaption></a>
</figure>
</div></div>
<div class="col-12 col-md-4">
<div class="card-header">
<figure class="figure"><a href="?hal=Pemesanan-Aplikasi">
<img src="gambarxflash/boxflash11.png" alt="..." width="142" height="103" class="figure-img img-fluid rounded">
<figcaption class="figure-caption">Panduan penggunaan aplikasi X-flash Increms.</figcaption></a>
</figure>
</div></div>
<div class="col-12 col-md-4">
<div class="card-header">
<figure class="figure"> <a href="?hal=Pemesanan-Aplikasi">
<img src="gambarxflash/boxflash6.png" alt="..." width="142" height="103" class="figure-img img-fluid rounded">
<figcaption class="figure-caption">Aplikasi X-flash Profesional E-I & E-II.</figcaption></a>
</figure>
</div></div></div>
Huruf tebal itu menandakan asli skripnya seperti itu sedangkan sebelumnya itu sudah kita bahas yakni untuk pembagian halaman dan juga berfungsi untuk responsive untuk ukuran layar.
Jangan lupa membaca pembahasan yang lain seperti Input data tanpa refresh dengan table silahkan mengunjunginya disini :
#Thumbnails bergambar, #Card Border Style, #figure dengan Bootstrap, #iklan dengan bootstrap
Input Data Tanpa Refresh Dengan Database MYSQL
Perhatikan setiap warna yang diberikan, karena kata-kata itu akan saling berhubungan atau dikenal dengan INTEGRASI jika sudah jadi maka menjadi INTEGRITED, Para penggunanya menjadi INTEGRITER (Integrity), Kata setiap warna yang diberikan selalu berhubungan dengan skrip selanjutnya
Input Data Tanpa Refresh Dengan Radio button
Kita Melanjutkan dari Input data tanpa refresh dengan database MySQL I yang sudah kita bahas sebelumnya, maka kita melanjutkan pembahasan ini walaupun tidak jauh berbeda hanya perbedaan pada pilihan kelamin, yang sebelumnya menggunakan type input, sekarang menggunakan type Radio button atau Checkbox kita pilih salah satunya saja,
Input Data Tanpa Refresh Dengan Checkbox
Ini hanya penambahan saja dari Input data tanpa refresh dengan database MySQL dan Input data tanpa refresh dengan database MySQL II yang sudah kita bahas sebelumnya, yakni sebelumnya menggunakan type input, dan type Radio button maka sekarang menggunakan Checkbox. Seperti biasa membuat database, atau bisa juga menggunakan database yang sudah ada
