Anak Pantai

Membuat Homepage Web atau Aplikasi dengan Boostrap

Di artikel sebelumnya, saya pernah mengulas tentang starter tempalte Bootstrap. Di artikel ini kita akan mencoba membuat sebuah desain homepage menggunkan seluruh komponen yang disediakan Boostrap. Contoh desain homepage yang akan dihasilkan lebih berfokus pada small device dan membahas mengenai toko online yang menjual makanan.

Sebelum memulai, beberapa prasyarat berikut ini perlu disediakan:
#1 Link gambar untuk header atau logo toko
#2 Link beberapa ikon untuk menu makanan
#3 Link bebrapa gambar iklan makanan
#4 Link beberapa gambar makanan
#5 Link top arrow icon


Setelah semuanya disiapkan, mari kita mulai dengan membuka teks editor. Terserah mau pakai apa, sebagai contoh saya akan menggunakan Sublime Text 3.

Kopi script html di bawah ini dan tempatkan ke text editor kalian. Script ini merupakan starter template yang disediakan oleh Bootstrap. Penjelasan mengenai starter template Bootstarp bisa Anda lihat di artikel sebelumnya atau pergi ke situs resmi Bootstrap.



#1 Membuat Header

Setelah berhasil dikopi, hapus heading1 (h1) yang ada di dalam tag body. Kemudian, tempatkan script di bawah ini di dalam tag body. Script ini digunakan untuk membuat header atau logo toko online Anda. Replace hypertext reference (href) yang ada dengan url gambar/logo toko Anda.



Selanjutnya, untuk mengatur agar tampilan logonya responsif, kopi script css di bawah ini dan tempatkan di dalam tag head. Persisnya sebelum penutup tag head.
Note: script css (internal css) ditempatkan di dalam tag dan tag style tersebut ditempatkan di dalam tag head seperti arahan di atas.



#2 Membuat Carousel

Setelah header selesai dibuat, selanjutnya kita akan membuat carousel atau slide show. Kopi script html di bawah ini dan tempatkan di bawah script header di dalam tag body.


Note: ubah url gambar yang ada dalam href dengan url gambar yang telah Anda sediakan. Pastikan gambar yang disediakan memiliki ukuran yang sama karena akan berpengaruh ketika carousel berpindah ke gambar lain.

Setelah script html-nya siap, kopi script css di bawah ini dan tempatkan di bawah script css header di dalam tag style.



#3 Membuat Alert

Selanjutnya, kita akan membuat tambahan alert. Ini optional saja, Anda dapat menggunakan cara lain untuk menampilkan tulisan sebagaimana yang ditampilkan dalam script alert ini.

Kopi script html untuk alert di bawah ini dan tempatkan di bawah script carousel atau slide show di dalam tag body.



Jangan lupa untuk menempatkan script css untuk mengatur alert yang tersedia di bawah ini di dalam tag style setelah cript css carousel.



#4 Membuat Menu

Selanjutnya, kita akan membuat menu layanan yang tersedia dalam toko online kita. Sebagai contoh, di dalam toko online yang saya siapkan ini memiliki layanan makanan, minuman, dan coffe. Dengan demikian, saya akan membuat 3 buah menu yang mana ketika menu tersebut diklik akan menuju ke halaman yang berisi seluruh item dalam layanan itu.

Kopi script di bawah ini dan tempatkan di dalam tag body tepat di bawah script alert.



Untuk mengatur tampilan cript html menu layanan di atas, kopi script css di bawah ini dan tempatkan di dalam tag style tepat di bawah script css alert.



#5 Membuat Item Produk

Langkah selanjutnya adalah membuat item produk atau makanan yang akan dijual. Pada tahap ini, kita akan menampilkan jenis-jenis makanan yang dijual di toko online kita.
Untuk membuatnya, kopi script di bawah ini dan tempatkan di bawah script menu layanan di dalam tag body.



Jangan lupa untuk mengatur tampilan dari script di atas dengan menempatkan script di bawah ini di dalam tag style di bawah script menu layanan.



#6 Membuat Form Pemesanan

Selanjutnya, kita akan membuat form pemesana dengan menggunakan modal. Pada tahap ini, kita akan mengaktifkan button pesan di setiap makanan agar ketika diklik akan megarah ke tab form pemesanan. Anda juga dapat mengatur script ini agar di arahkan ke tab detail produk atau makanan.



Untuk mengatur tampilan modal, gunakan script css di bawah ini dan tempatkan di dalam tag style di bawah script jenis makanan.



Agar modal yang dibuat bisa diproses, gunakan script js di bawah ini dan tempatkan di atas tag penutup body atau di bawah tag script. Buat sebuah tag script baru dan tempatkan script tersebut di dalamnya.



#7 Membuat Back Top Button

Langkah terakhir, kita akan membuat back to top button di sudut bawah sebelah kanan screen.

Gunakan script di bawah ini dan pastekan di dalam tag body. Anda bisa menempatkannya di atas script header atau di bawah script form pemesanan.



Gunakan script css di bawah ini untuk mengatur tampilan button tersebut.



Selain css, gunakan juga script js berikut ini agar button yang dibuat dapat berfungsi dengan baik di setiap search engine dan device.



Untuk mengatur padding container, gunakan scrip css di bawah ini dan tempatkan di dalam tag style.



Jika ada yang kurang jelas, silakan manfaatkan kolom komentar.

============
Author:
ariesrutung95

Referensi:

Mengenal Starter Template Bootstrap

Artikel ini hanya akan menjelaskan cara menggunakan Bootsrap versi dalam jaringan. Oleh karena itu, pastikan bahwa Anda terhubung dengan jaringan. Materi yang akan kita bahas adalah tentang menggunakan starter template Boostrap. Sebelum uraiannya panjang-lebar, bagi Anda yang belum tahu Boostrap dapat melihatnya DI SINI.

Secara singkat, starter template merupakan template dasar yang disediakan oleh Bootstrap yang khusus  digunakan secara online. Sebetulnnya, kita dapat mengubahnya menjadi offline. Oleh karena janji kita di awal, kita tidak akan menyentuh wilayah itu.

Apa saja isi dari Starter Template Bootstrap?

Di dalam fail starter template, Anda dapat menemukan beberapa link yang diarahkan ke server Boostrap, yaitu link yang berisi fail .css dan .js. Lagi-lagi, fail ini dikases secara online. Anda tidak disarankan untuk menghapus link yang ada karena akan berpengaruh pada hasil desain Anda nantinya, kecuali jika Anda memasang Bootstrap secara offline. Anda hanya disarankan untuk menambahkan fail .css atau .js tambahan.

Di bawah ini dapat Anda lihat fail starter template Bootstrap.



Starter template di atas menggunakan fail .css dan .js yang terhubung langsung ke server Bootstrap. Anda dapat melihat source fail .css dan .js dengan mengopi link yang terseedia dan mencarinya di search engine.

Jika ditelusuri, di bawah ini adalah salah satu contoh isi link .js yang disediakan oleh Bootstrap.


Lalu, apa yang harus dilakukan selanjutnya?

Sekarang, mulailah berkreasi menggunakan seluruh fitur yang disediakan oleh Bootstrap. Seluruh fitur tersebut dapat digunakan secara free. Selain itu, Anda juga dimungkinkan untuk mengubah tampilan fitur yang Anda gunakan sesuai keinginan Anda. Hal ini dapat dilakukan dengan menambahkan custome CSS. Boostrap sangat direkomendasikan untuk mendesain UI sebuah aplikasi karena tampilannya responsif. Selain responsif, Boostrap juga memiliki segudang fitur yang menarik.

Demikian pengenalan starter template Bootstrap, selamat mencoba.

==========
Author:
ariesrutung95

Referensi:

Mengatasi masalah Wireless Capability is Turned Off

Sudah lama meninggalkan kebiasan curhat tentang apa yang saya alami. Sesuai dengan tagline blog ini, bahwa segala sesuatu yang Anda baca sesungguhnya merupakan masalah dan pengalaman saya (pengalaman penulis). Atas dasar itu, semua jenis artikel atau tulisan yang dibagikan di bawah naungan blog ini bersumber dari masalah dan pengalaman pribadi, bukan hasil comot kiri-kanan. Dengan demikian, seharusnya Anda tidak perlu ragu karena segala sesuatu yang disajikan di sini telah penulis alami. Agar masalah ini beserta solusinya diketahui dan dikenal banyak orang -termasuk Anda yang saat ini membaca artikel ini- saya merasa bertanggung jawab untuk mengalihterasikannya dalam bentuk artikel.

Seperti penulis pada umumnya, dalam menulis tentu mencari dan membutuhkan berbagai referensi. Referensi tersebut disaring dan dibahasakan segampang mungkin agar tersampaikan secara jelas pada pembaca tanpa membuat dahinya mengerut.

Masalah yang ingin saya bagikan solusinya pada kesempatan ini adalah masalah mengenai wireless. Masalah ini terjadi pada sebuah notebook Lenovo S200. Sekadar informasi, masalah ini muncul ketika notebook selesai di-install ulang, downgrade dari OS windows8 ke windows7. Sebenarnya, pada saat saya menggunakan windows8 pun masalah ini sudah terjadi. Kala itu, saya hanya menduga barangkali driver-nya tidak tersedia untuk windows8 OS.

Wireless Capability is Turned Off biasanya ditandai dengan adanya tanda silang pada logo jaringan di bagian kanan bawah layar notebook/laptop. Ketika dilakukan “Troubleshoot problems”, Anda akan diberi tahu bahwa Wireless Capability is Turned Off. Oleh karena masalah tersebut masih muncul setelah downgrade OS, saya penasaran untuk mencari tahu penyebabnya.
Beberapa artikel berbahasa Indonesia menawarkan solusi untuk mengaktifkan wireless network pada Windows Mobility Center. Untuk mengeceknya, Anda dapat menekan tombol Windows + X. Namun, cara tersebut tidak berhasil. Karena di Indonesia tidak mendapatkan solusi, saya mencoba mencari artikel dalam bahasa asing. Akhirnya, saya menemukan sebuah artikel berbahasa Inggris yang memaparkan solusi tentang masalah serupa. Sebetulnya bukan artikel sih, semacam forum diskusi yang disediakan khusus oleh para vendor Lenovo untuk mengulas masalah-masalah yang berkaitan dengan produk mereka.

Dalam forum tersebut, seseorang bertanya:
Hi, I recently bought a Lenovo z50-70 laptop with Broadcom Wireless Adapters. Its a Windows 7-32 bit system. Wireless LAN worked fine for a few hours, but after a restart it started saying Wireless Capability is turned off. i have tried following:
  1. Looked for a hardware wireless switch. there is none.
  2. Reinstalled WLAN drivers from lenovo site without success.
  3. Restarted WLAN Autoconfig service for no avail.
Ybs. mengatakan bahwa dirinya baru saja membeli sebuah laptop Lenovo bersistem operasi windows7 x32. Masalah Wireless Capability is Turned Off muncul ketika ybs. menghidupkan ulang laptopnya, padahal baru beberapa jam digunakan. Di tengah kebingungannya, ia mecoba beberapa hal, diantaranya mencari barangkali laptop tersebut memiliki tombol untuk mengaktifkannya wireless secara manual. Beberapa laptop atau notebook memang memiliki fitur ini,  tetapi khusus laptop yang dimiliki ybs, juga notebook yang saya miliki tidak mempunyai tombol tersebut. Hal kedua yang ia coba adalah memasang ulang driver WLAN, tapi tidak berhasil juga. Selain kedua hal itu, ybs juga menghidupkan ulang layanan WLAN autoconfig. Hasilnya sama saja seperti percobaan sebelumnya.

Banyak jawaban yang ditawarkan untuk memecahkan masalah yang dialami oleh si penanya di atas. Satu jawaban yang membuatnya berhasil dan juga saya pakai untuk memecahkan masalah serupa adalah  “Try installing Lenovo Energy Management Software. It worked for me and after installing hit Fn+F7”Jawaban tersebut menawarkan solusi untuk memasang software Lenovo Energy Management. Si Mas ini bilang bahwa ia menggunakan cara yang sama dan berhasil, dengan catatan setelah software-nya terpasang, tekan tombol Fn + F7 pada keyboard untuk mengaktifkan wireless-nya.
Saya mengikuti solusi yang ditawarkan dan saya juga berhasil. Anda dapat mengunduh software-nya DI SINI. Cara memasang software-nya pun sangat gampang, Anda hanya perlu klik Next until the End.
 
Sekadar catatan, khusus untuk notebook Lenovo S200, Anda tidak perlu menekan tombol FN. Anda dapat langsung menekan tombol F7. Akan mucul sebuah window Lenovo Wireless Device Setting seperti gambar di bawah ini. Pastikan bahwa current status: On.
Baca Juga:

Seperti itu kira-kira cara mengatasi masalah Wireless Capability is Turned Off. Selamat mencoba dan semoga harimu menyenangkan.

==========
Author:
ariesrutung95

Referensi:

Mencetak Fail dari HP (Ponsel) Menggunakan Printer Biasa

Pada dasarnya, Android yang Anda gunakan dapat dihubungkan langsung ke printer. Dengan demikian, Anda dapat mencetak fail apa saja dari ponsel. Sayangnya, tidak banyak orang yang tahu tentang hal ini. Ada yang berpikiran bahwa hanya printer yang memiliki fasilitas/fitur wifi saja yang dapat digunakan untuk mencetak fail melalui jaringan. Bisakah semua jenis printer terkoneksi dengan jaringan dan memungkinkan penggunanya mencetak fail melalui ponsel? Jawaban yang paling tepat adalah “BISA”. Dengan memenuhi prasyarat di bawah ini, Anda dapat mencetak fail dari ponsel Anda.

Prasyarat:
1. Pengguna wifi
2. Memiliki printer (merk apa saja)
3. Memiliki PC
4. Memiliki ponsel

Setelah semua terpenuhi, silakan simak beberapa langkah kerja di bawah ini. pertama

  1. Pastikan bahwa pada PC Anda sudah terinstall driver printer yang akan digunakan. Jika anda menggunakan original OS, hidupkan printer dan hubungkan ke PC sehingga akan muncul printer yang akan dipakai pada jendela Device and Printer. Lazimnya, windows akan secara otomatis membaca perangkat peripheral yang terhubung dengannya, salah satunya adalah printer.
  2. Setelah driver printer terpasang pada PC, lakukan sharing dengan cara klik Control Panel, Hardware and Sound, Device and Printer hingga terbuka jendela Device and Printer yang berisi semua perangkat yang terhubung dengan komputer Anda.
  3. Selanjutnya, klik kanan pada printer yang hendak dibagikan, klik Printer Properties, sehingga terbuka jendela Printer Properties. Kemudian, klik pada menu Sharing sehingga terbuka jendela seperti di bawah ini. Centang pilihan Share this Printer dan klik OK untuk menyelesaikan. Sekarang, Anda sudah selesai membagikan printer Anda pada jaringan.
  4. Untuk dapat mencetak fail via ponsel, silakan unduh aplikasi Printer Share di Playstore. Selanjutnya, masuk ke aplikasi dan tambahkan printer yang kita bagi.
  5. Pilih Select.
  6. Pilih Nearby Wifi.
  7. Pilih Workgroup (otomatis).
  8. Silakan pilih user atau nama PC Anda (otomatis terbaca).
  9. Pilih printer yang muncul.
  10. Pada prompt yang muncul, pilih Use Generic.
  11. Pilih Yes untuk menginstall semua driver yang diminta.
  12. Jika berhasil, jendela seperti di bawah ini akan muncul. Untuk mencoba mencetak, klik pilihan Print Test Page.


  
Done!

===========
Author:
ariesrutung95

Mengatasi Masalah ".. is not a valid time" pada Fingerprint SPC Expert Series

Have you ever get a problem "... is not a valid time" when you try to setting shift management on SPC Expert Series fingerprint? Waktu yang diatur tidak valid. Sebetulnya, format penulisan jam dan menitnya sudah benar, hanya saja format pengaturan waktu yang ada pada mesin fingerprint tidak sesuai dengan format pengaturan waktu yang ada pada sistem operasi kita, terutama penggunaan tanda pemisah antara jam, menit, dan detik. Oleh karena itu, terjadi konflik antara pengaturan waktu fingerprint dengan OS kita.
How to fix it? Let me show you the steps below.
Untuk menyelesaikan masalah tersebut, pastikan tanda pemisah jam yang ada pada sistem operasi sesuai dengan yang ada pada mesin fingerprint. Jam yang ada pada PC kita harus disesuaikan dengan jam mesin fingerprint.

Ada dua cara yang dapat kita gunakan untuk mengubah tanda pemisah antara jam, menit, dan detik. Untuk cara yang pertama, kita dapat langsung mengeklik jam yang ada pada bagian taskbar, kemudian pilih Change date and time settings. Jika menggunakan ‘klik kanan’ pilih Adjust date/time. Kemudian, pilih Change calendar settings dan tutup jendela Customize Format yang muncul sehingga diarahkan pada jendela (sebelumnya) Region. Setelah itu ubah pilihan short time dan long time menjadi seperti gambar di bawah ini.
Pastikan menggunakan tanda titik dua (:) sesuai dengan yang diminta pada pengaturan shift management mesin fingerprint.

Sementara untuk cara kedua, kita dapat menggunakan control panel, yakni klik Start ketik atau pilih Control Panel, pilih Clock, Language and Region. Selanjutnya, pilih Region dan ubah sesuai dengan yang diarahkan pada gambar langkah pertama. Jangan lupas simpan semua pengaturan dan lanjutkan untuk mengatur waktu pada fingerprint.

That's all. Selamat mencoba, semoga berhasil.

==========
Author:
ariesrutung95

Peningkatan Keterampilan Membaca dan Berbicara pada Anak SD dengan Teknik MOB - Etnografi Komunikasi

Peningkatan mutu pendidikan melibatkan semua komponen, baik 1) peserta didik, 2) tenaga kependidikan, 3) pengelola sekolah, 3) komite sekolah, 4) sarana prasarana, 5) media, 6) sumber belajar, 7) kurikulum, 8) metode dan teknik, 9) manajemen sekolah, 10) proses pembelajaran, dan 11) lingkungan sekolah. Semua komponen itu saling berpengaruh sehingga dapat mencapai tujuan, termasuk upaya meningkatkan keterampilan berbahasa, menulis dan berbicara.
Penggunakan teknik dalam menghasilkan dan menyalurkan suatu kemampuan berbahasa tertentu sangatlah berpengaruh. Apalagi, untuk meningkatkan keterampilan membaca dan berbicara yang dimiliki anak-anak sekolah dasar, maka teknik yang dipilih harus dapat menggairahkan peserta didik sehingga tidak cepat bosan dalam belajar atau mengikuti kegiatan pembelajaran. Teknik yang digunakan dapat bersumber dari aktivitas-aktivitas kebudayaan suatu masyarakat tertentu atau sebuah tradisi yang dikenal secara komprehensif di hampir seluruh masyarakat pemilik kebudayaan itu. Dengan demikian, menggunakan suatu tradisi yang diakui secara umum oleh masyarakat dapat membawa dampak yang baik bagi pengetahuan kebahasaan masyarakat pemiliknya.

Dalam pelaksanaan kegiatan pembelajaran, sebagian besar siswa tidak dapat menghubungkan apa yang telah mereka pelajari ke dalam kehidupan sehari-hari. Untuk menjawab permasalahan tersebut, dipakailah teknik MOB yaitu sebuah kebiasaan yang hidup dan berkembang dalam guyup tutur orang Papua. Teknik ini bertujuan untuk membantu siswa mengonstruksi dan memproses apa yang didapat secara kontekstual dan dalam suasana keramahtamahan. Dengan memadukan MOB di dalam kegiatan pembelajaran, peserta didik dapat mempelajari sesuatu yang memiliki keterkaitan dengan lingkungan, pengetahuan, dan pengalaman yang telah mereka miliki.

Penggunaan MOB dalam meningkatkan keterampilan membaca dan berbicara menuntut peserta didik untuk berpikir sehingga dapat menghasilkan cerita yang lucu bagi banyak orang. Kegiatan berpikir itu dapat dimanifestasikan melalui kegiatan membaca. Dengan membaca, peserta didik dapat menemukan ide/gagasan baru terkait cerita yang akan disampaikan. Proses menyampaikan cerita yang didapat dari kegiatan berpikr atau membaca kepada orang lain tersebut membutuhkan kemampuan berbicara yang baik. Oleh karena itu, kegiatan membaca dan berbicara merupakan dua kegiatan yang dilakukan secara berurutan atau kegiatan reseptif-produktif.

Di kalangan peserta didik di Papua, MOB merupakan sebuah cerita menarik yang disukai semua orang. Lazimnya, peserta didik berlomba-lomba menghasilkan MOB yang bemutu, menghibur, dan menggelakkan. Menghasilkan MOB yang menggelakkan membutuhkan kemampuan berpikir yang kompleks. Sebuah cerita yang dibaca dapat dikonversi menjadi bentuk lain tanpa menghilangkan jumlah tawa dalam cerita.

Kemampuan membaca tidak didapat dengan gampang dan tidak semua peserta didik memiliki kemampuan membaca yang baik. Kebiasaan menjadi pemakai ketimbang menjadi penghasil merupakan salah satu faktor lemahnya kemampuan membaca. Mengubah pola atau kebiasaan peserta didik seperti ini tidaklah mudah. Selain karena kebiasaan (lebih suka mendengar daripada membaca), faktor lain yang menjadi penyebab adalah bahan bacaan. Dengan teknik Mob diharapkan dapat meningkatkan kemapuan membaca dan berbicara yang dimiliki peserta didik di Papua.



==========
Author:
ariesrutung95

TERIMA KASIH ATAS KUNJUNGANNYA