Kamis, 28 Februari 2019

Cara Membuat Video Embed Youtube di Website Menjadi Responsive dengan Bootstrap


Pada postingan kali ini saya akan membagikan Cara Membuat Video Embed Youtube di Website Menjadi Responsive dengan Bootstrap. Langsung saja tanpa basa basi yang lebih panjang, silahkan Anda buka project dan langsung ke file view atau html yang akan Anda masukkan video embed dari youtubenya.

Pada dokumentasi yang disediakan oleh Bootstrap telah diberikan caranya yaitu dengan mengatur tag div nya seperti berikut:

Pada kodingan yang ada diatas, Anda dapat memperhatikan bahwa ada beberapa poin penting yaitu:
  1. Aspect Ratio
    Aspect ratio berguna untuk mengatur rasio atau perbandingan gambar atau video yang ditampilkan di layar. Bootstrap telah menyediakan rasio tersebut yang dapat Anda coba dan pilih sendiri. Rasionya meliputi; 1:1, 4:3, 16:9 dan 21:9
  2. Class yang dipakai
    Class div yang ada harus Anda masukkan dengan ketentuan yang telah dibuat oleh Bootstrap seperti berikut ini:
    <div class="embed-responsive embed-responsive-16by9">
    Tag diatas mengandung kata 16by9 yang artinya ia menggunakan rasio 16:9, Anda juga dapat merubahnya sesuai dengan yang telah diberikan oleh Bootstrap.
Contohnya Anda dapat melihatnya di web pribadi saya di MuhAzmi.com. Silahkan gunakan device yang berbeda untuk mencoba tampilan yang responsive pada video yang saya letakkan disana.

Semoga bermanfaat.
Share:

Sabtu, 12 Januari 2019

Menampilkan Total Record Data di Tabel Database dengan Codeigniter dan MySQLi

Pada tulisan kali ini, saya ingin berbagi tentang tutorial cara Menampilkan Total Record Data di Tabel dengan Codeigniter dan MySQLi. Bagi Anda yang mengikuti tulisan saya di blog ini, mungkin pernah membaca yang versi PHP Nativenya dengan judul Cara Menampilkan Total Record dari 1 Tabel MySQL dengan PHP.


Tutorial ini dibuat didasarkan pertanyaan yang diajukan teman-teman yang order tutorial saya seperti yang ada di judul Tutorial Membuat Website Marketplace dengan Codeigniter, Bootstrap dan IonAuth. Pada tutorial itu memang sengaja tidak saya buatkan yang kalau dilihat di halaman Admin data yang ditampilkan tidak berubah.

Nah di tutorial ini, saya sedikit menggunakan bagian atau coding atau template dari AdminLTE yang bisa Anda lihat contoh hasil jadinya pada foto diatas yang kotak berwarna warni. Jadi bagi Anda yang sedang menggunakan template tersebut, Anda dapat melihat hasilnya nanti secara langsung dengan catatan:
  1. Anda telah paham basic atau dasar dari Codeigniter dan DBMS MySQLi
  2. Semua assets yang ada di template tersebut telah Anda load/ panggil semua dengan benar.
Baiklah, tanpa panjang lebar silahkan lihat dan pahami langkah-langkahnya pada script dibawah ini dan jangan lupa baca bagian PERHATIAN dibawah script ini:

PERHATIAN

  1. Jalankan script tersebut di url dengan alamat: localhost/namaprojectanda/record
  2. Script diatas sangat sederhana apabila Anda perhatikan dengan teliti karena kita hanya perlu 1 function di sebuah controller, 1 function di model dengan nama total_rows dan 1 view yang menjadi target untuk menampilkan total datanya.
Anda dapat memiliki tutorial premium saya di marketplace seperti tokopedia, bukalapak, dan shopee atau download secara langsung via google drive di kolom sebelah kanan blog ini di menu order tutor premium via atau di link ini: KLIK DISINI

Semoga bermanfaat
Share:

Selasa, 18 Desember 2018

Cara Menampilkan Waktu Beberapa Saat/ Menit/ Jam/ Hari/ Minggu/ Bulan/ Tahun yang Lalu pada Postingan dengan PHP

Pada artikel kali ini saya akan membagikan trik Cara Menampilkan Waktu Beberapa Saat/ Menit/ Jam/ Hari/ Minggu/ Bulan/ Tahun yang Lalu pada Postingan dengan PHP, fungsi ini berguna bagi pengunjung atau visitor yang masuk ke website Anda supaya mereka tahu kapan berita atau event yang diposting.
Contoh
Baiklah tanpa panjang lebar, berikut ini source code yang bisa Anda gunakan:

Bagaimana Cara Menggunakannya?

Caranya tinggal panggil fungsi tersebut pada data yang telah Anda siapkan, misal:
<?php echo time_elapsed_string("2018-04-02 20:21:59) ?>
<?php echo time_elapsed_string($tanggaldalamformatdatetime) ?>

Jangan lupa untuk mengatur timezone pada project yang Anda buat juga.

Referensi
Share:

Minggu, 14 Oktober 2018

Mengatasi Error Your Firefox Profile Cannot Be Loaded pada OS Linux

Terkadang, ketika setelah menginstall OS Linux yang apapun jenis distronya saya menemukan masalah browser Firefox yang muncul Error Your Firefox Profile Cannot Be Loaded. Nah, pada artikel kali ini saya ingin berbagi tentang cara mengatasi hal tersebut yang saya dapatkan setelah browsing kesana kemari di mbah gugel.


Caranya cukup sederhana, Anda tinggal masuk ke direktori Home, kemudian cari folder .cache, masuk lagi ke folder mozilla, dan masuk lagi ke folder firefox. Disini Anda akan melihat 2 folder seperti gambar dibawah ini, nah silahkan Anda hapus dan buka kembali browser Mozilla Firefox Anda.

Catatan


  • Saya menggunakan OS Linux Mint 19. Bagi Anda yang menggunakan distro lain silahkan disesuaikan saja.
  • Apabila folder .cache tidak tampil maka ketika di file explorer, silahkan pilih menu View, dan centang atau pilih menu Show Hidden Files


Semoga berhasil dan bermanfaat
Share:

Cara Merubah dan Menggabungkan Banyak Foto ke PDF pada OS Linux

Pada kesempatan kali ini, saya akan membahas tentang Cara Merubah dan Menggabungkan Banyak Foto ke PDF pada OS Linux. Aplikasi ini selain berguna untuk untuk scanner juga dapat digunakan sebagai aplikasi yang menggabungkan foto yang sudah di scan atau foto yang dicari sendiri dari harddisk Anda untuk dijadikan PDF.

Baiklah, seperti biasa tanpa panjang lebar silahkan ikuti langkah-langkah berikut ini:
  1. Buka terminal pada OS Linux Anda
  2. Ketik perintah seperti ini di dalam terminal: sudo apt-get install gscan2pdf
  3. Apabila telah selesai diinstall maka cari dan buka aplikasi tersebut dengan nama gscan2pdf di daftar aplikasi sistem Anda.
  4. Tampilan awal

  5. Klik tombol yang ada lingkaran merah dibawah ini untuk mencari foto/ gambar yang ingin Anda gabungkan:

  6. Kemudian simpan dengan memilih tombol yang ada lingkaran merah dibawah ini:

  7. Tahap terakhir adalah mengatur hal-hal yang perlu diatur (langsung save saja kalau tidak ada yang ingin diatur) pada jendela konfirmasi seperti berikut ini:

  8. Selesai
Semoga bermanfaat

Referensi
Share:

Membuat Bootable Flashdisk pada OS Linux

Pada artikel kali ini, saya akan membahas tentang Cara Membuat Bootable Flashdisk pada OS Linux. Bagi Anda yang doyan gonta-ganti distro Linux ataupun sekedar jaga-jaga ketika sistem yang sedang dipakai bermasalah maka dapat langsung memperbaiki atau menginstall ulangnya dengan bootable flashdisk yang telah disediakan.

Tanpa panjang lebar lagi, silahkan ikuti langkah-langkah berikut ini:
  1. Masuk ke website multibootusb.org di http://multibootusb.org/page_download/
  2. Silahkan pilih berdasarkan OS atau jenis package yang akan digunakan, pada saat ini saya menggunakan Debian seperti di gambar dibawah ini yang bertanda centang merah
  3. Silahkan install file multiboot yang baru Anda download (caranya sama saja dengan menginstall aplikasi dalam format deb di Linux)
  4. Setelah selesai menginstall maka buka aplikasinya
  5. Sebelum membuka aplikasinya, silahkan plug/ colok flashdisk yang akan digunakan sebagai bootable flashdisk di komputer/ laptop Anda.
  6. Berikut ini adalah tampilan awal setelah membuka aplikasi tersebut:
  7. Anda dapat melihat bahwa pada bagian Select USB Disk akan menampilkan direktori flashdisk yang telah Anda masukkan sebelumnya. Namun Anda perlu mengklik 1x di form select dibawah tulisan tersebut yang akan menampilkan hasil seperti berikut:
  8. Setelah melalui tahapan ke-7 diatas, maka Anda siap untuk masuk ke proses selanjutnya yaitu memilih file ISO Linux yang Anda miliki untuk di burn ke flashdisk. Caranya tinggal klik tombol browse yang ada di kanan atas jendela aplikasinya seperti dibawah ini:
  9. Apabila sudah, maka tampilannya akan menjadi seperti ini:
  10. Setelah memilih file ISO Linux nya, maka Anda bisa lanjut ke proses burning ke flashdisknya pada menu Install distro dan akan muncul jendela konfirmasi seperti dibawah ini:




    Proses burning:
  11. Pada gambar tahapan ke-10 diatas, terdapat list atau daftar OS Linux yang telah saya miliki di flashdisk seperti linux mint dan xubuntu. Apabila Anda ingin menghapusnya, maka tinggal Anda klik 1x di nama OS nya dan klik tombol Uninstall distro.
  12. Selesai


Semoga bermanfaat
Share:

Sabtu, 26 Mei 2018

Cara Menggunakan/ Integrasi/ Pasang Datepicker pada Bootstrap

Pada tulisan kali ini, saya akan membahas tentang Cara Menggunakan/ Integrasi/ Pasang Datepicker pada Bootstrap. Datepicker adalah plugin yang dapat memunculkan tanggal, bulan dan tahun yang nantinya dapat Anda pilih secara bebas di sebuah form.


Datepicker yang sederhana dapat Anda dapatkan di https://jqueryui.com/datepicker. Cara integrasi atau memasangnyapun cukup mudah dengan memperhatikan kodingan berikut ini:


Klik menu SEE ORIGINAL untuk lebih jelasnya

Penjelasan

  1. Kalau Anda perhatikan kodingan diatas, Anda perlu memanggil dulu file-file yang diperlukan, antara lain:
    • Jquery
    • Jquery UI (js + css)
  2. Kemudian, setelah kita memanggil file-file tersebut maka kita siapkan form yang akan dibuat menjadi form yang support dengan datepicker dan script js nya. 
  3. Pada baris ke 9-13 merupakan bagian untuk membuat fungsi javascript yang ditujukan ke form datepicker yang kita pilih.
  4. Pada baris ke 11 ada teks #datepicker yang artinya kita akan memasang datepicker pada form Date yang ada di baris ke-17 dengan id="datepicker". Sebagai catatan, kalau Anda ingin mengatur untuk ditampilkan dengan class, maka ganti simbol # menjadi . Jangan lupa juga id="datepicker" anda ubah menjadi class="datepicker".

Bagaimana Kalau Menggunakannya dengan Bootstrap?

Pada bagian ini, saya menjelaskan cara mengintegrasikannya dengan bootstrap pada 2 field input yang berbeda yaitu tgl_awal dan tgl_akhir yang caranyapun tidak terlalu sulit. Tutorial Premium saya yang berjudul Membuat Website Ecommerce Professional dengan Codeigniter 3, Bootstrap 4, PHP 7, IonAuth 2 dan API Rajaongkir juga telah disediakan fitur ini. Anda perlu menyiapkan beberapa file seperti pada bagian Datepicker tanpa bootstrap di awal tulisan ini.
  1. Download dulu filenya di
    https://github.com/uxsolutions/bootstrap-datepicker/tree/1.6 atau langsung klik disini. Dokumentasinya bisa Anda lihat disini
  2. Download jquery, klik disini
  3. Download bootstrap, klik disini
  4. Ekstrak file yang telah Anda download diatas ke direktori project Anda
  5. Buatlah kodingan seperti berikut ini:

    Klik menu SEE ORIGINAL untuk lebih jelasnya
  6. Jalankan dan lihat hasil yang telah Anda buat atau Anda bisa mendownload hasil jadinya yang versi bootstrap di bagian Download dibawah ini.

Download

Source code: klik disini

Silahkan ajukan pertanyaan di kolom komentar kalau ada yang ingin ditanyakan, jangan lupa dibagikan tulisan ini dan semoga bermanfaat
Share: