Terutama yang lagi bikin web aplikasi, atau membuat aplikasi berbasis website. Membuat form input data sudah menjadi rutinitas, ia nggak?
Contoh krusor yang autofocus
Gambar diatas, adalah contoh form inputan yang begitu di buka, krusor otomatis berada di textbox Nama Client (auto fokus). Walaupun tidak di klik menggunakan mouse.
Nah aplikasi yang bagus, adalah aplikasi yang mudah digunakan atau user friendly. Salah satu hal kecil yang biasanya harus diperhatikan adalah, saat user menginput data, krusor otomatis berada di posisi yang tepat, sehingga aplikasi tepat bisa digunakan walaupun tanpa menggunakan mouse.
Masalah
Nah cara set focus itu ada banyak, di html beda, di php beda, di javascript juga beda. Bahkan di web browser tertentu juga berbeda. Sekarang tinggal di sesuaikan aja sama kebutuhan kamu.
Itu kenapa udah coba jurus ini, jurus itu, tapi kok nggak working? nah bisa jadi karena kamu salah pakai atribut.
Solusi
Nah gimana sih caranya set fokus krusor secara otomatis ke komponen tertentu, misalnya textbox ataupun tombol?
Ada beberapa opsi, silahkan pilih sesuai kebutuhan kamu.
di kode HTMLnya kurang lebih seperti diatas. id inputsnya = id=”nama_akun”
Nah di javascript, kamu tulis kode seperti ini.
<script type="text/javascript">
//definisikan nama modalnya
var ModalSaya = document.getElementById('modal_tambah')
//set input dengan id nama_akun menjadi focus.
ModalSaya.addEventListener('shown.bs.modal', function () {
document.getElementById('nama_akun').focus()
})
</script>
Maaf, mungkin artikel kali ini agak sedikit terburu buru, kalau ada pertanyaan langsung aja DM saya ya.
Jika kamu baru belajar bikin website dari nol, terutama menggunakan wordpress sebagai CMSnya (Content Management System) biasanya masalah seperti ini bakal pernah kamu alami. Dimana plugin yang kamu install tidak bekerja, tidak muncul, atau muncul tapi stylenya berantakan atau tidak tampak seperti bagaimana mestinya.
Contoh kasus 1 : Kamu install plugin “3CX Free Live Chat, Calls & WhatsApp” (plugin untuk live chat di website) sudah install sesuai panduan, sudah setting juga sesuai panduan, tapi pluginnya tidak muncul di website kamu.
Contoh kasus 2 : Kamu install plugin “CodeMirror Blocks” plugin untuk menampilkan baris coding di halaman blog kamu. Sudah install sesuai panduan, sudah setting sesuai panduan, tapi begitu dicoba. block codenya muncul, tapi seperti block text biasa, stylenya nggak ngikut.
Penyebab
Intinya, kalau kamu mengalami masalah pada plugin wordpress. Apakah plugin tidak muncul, atau plugin muncul tapi tidak bekerja dengan semestinya, itu terjadi karena salah menempatkan wp_head ataupun wp_footer.
Secara sederhana penjelasannya seperti ini :
wp_head = mengandung css dari seluruh plugin
wp_footer = mengandung js dari seluruh plugin
Sedangkan, bahasa html ataupun php, dibaca oleh komputer, satu arah, dari atas kebawah. Komponen paling pertama di load, akan di timpa dengan komponen yang di load belakangan. (Semoga paham ya maksudnya).
Sehingga kalau kita salah menempatkan wp_head ataupun wp_footer, komponen plugin akan tertimpa dengan css ataupun js custom yang kita tambahkan pada tema website kita.
Solusi
Saya akan contohkan menggunakan basic html. Bagaimana cara penempatan header dan footer yang benar.
Cara menempatkan wp_head ataupun wp_footer yang benar.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nama Website Kamu</title>
<link href="file1.css" rel="stylesheet">
<link href="file2.css" rel="stylesheet">
<!-- Posisi yang benar, dibawah css yang lain, tepat diatas tag </head> -->
<?php wp_head(); ?>
</head>
<body>
<h1>Judul Halaman</h1>
<!-- Isi halaman -->
<script src="file1.js"></script>
<script src="file2.js"></script>
<!-- Posisi yang benar, dibawah js yang lain, tepat diatas tag </body> -->
<?php wp_footer(); ?>
</body>
</html>
Penjelasan :
wp_head dalam bahasa php di tulis dengan <?php wp_head();?>
Pastikan letakan di bawah seluruh file css yang ada di tema kamu. atau, letakan tepat diatas tag </head>
Sehingga css plugin yang kamu install tidak berpengaruh dengan css tambahan di tema kamu. Karena akan dieksekusi paling terakhir. Artinya, css plugin kamu tidak akan tertimpa dengan css tambahan di website kamu.
wp_footer ditulis dengan <?php wp_footer();?>
pastikan letaakan di bawah seluruh file js yang ada di tema kamu. atau, letakan tepat diatas tag </body>
Sehingga javascript pada plugin yang kamu install tidak berpengaruh dengan javascript tambahan di tema website kamu. Karena akan dieksekusi paling terakhir. Artinya, javascript plugin kamu tidak akan tertimpa dengan javascript tambahan di website kamu.
Beberapa minggu lalu, saya melakukan perubahan besar di salah satu website saya. Bahkan boleh dibilang cuman sekedar perubahan, tapi membangunnya kembali dari 0. Kecuali konten artikel, sebagian masih menggunakan yang lama. Sebagiannya lagi dihapus karena sudah tidak relevan.
Nah perubahan besar ini, selain mengubah tampilan antar muka secara total, juga mengubah struktur permalink (URL). Contoh :
Selain tema dan permalink, masih banyak lagi hal yang berubah di website ini. Intinya, ini website di bangun ulang dari 0. Yang lama, sebagian besar dibuang.
Nah, singkat cerita, setelah hampir 3 bulan, akhirnya proses pengerjaannya selesai. Semua files website sudah terupload ke server, sudah dilakukan perbaikan error sana-sini, sudah dilakukan optimasi sana-sini, dan website sudah online.
Tapi setelah beberapa hari running dengan tampilan baru, saya perhatikan, kok traffik website ini menurun drastis?
Penyebab
Karena traffik sangat berkaitan dengan konten artikel, saya iseng cari beberapa kata kunci yang dulunya, kalau saya ketik di google beberapa kata kunci ini, pasti website ini tampil di urutan pertama. Dan saya kaget ternyata kali ini, sama sekali tidak muncul di halaman satu google.
Dan saya baru ingat, kalau ada perubahan struktur permalink. Sehingga yang terjadi selama ini, saat muncul di hasil pencarian google, begitu di klik, kontennya tidak tersedia, atau biasanya dengan konfirmasi “Halaman tidak ditemukan”.
Kenapa konfirmasi ini muncul? karena linknya sudah mati. atau struktur permalink/URLnya sudah berubah. Sehingga makin banyak pengunjung yang mengalami ini, maka google akan menandai halaman-halaman tersebut dengan nilai SEO yang buruk, sehingga saat orang mencari dengan kata kunci itu lagi, halaman ini sudah tidak direkomendasikan lagi oleh google, alias tidak muncul lagi di halaman satu google.
Nah inilah yang terjadi kemarin, kenapa traffiknya menurun drastis. Karena google tidak merekomendasikan lagi website ini. Dengan alasan, banyak halaman yang tidak ditemukan saat di klik. Penyebabnya? link atau url nya sudah mati, atau lebih tepatnya sudah berubah.
Solusi
Untuk mengembalikan situasi ini ke semula, sebetulnya ada dua teknik. Yang pertama ngasih tau ke google, bahwa ada pengalihan url lama ke url baru, atau opsi yang kedua, yaaaaa tinggal di re-index ulang halaman yang berubah stuktur urlnya tadi.
Nah saya lebih memilih menerapkan opsi ke dua, yaitu me-reindex halaman. Kenapa? karena opsi pertama, prosesnya sangat rumit, kita harus tau url lamanya apa, lalu url yang baru apa. Disamping itu, nilai SEO tiap halaman tersebut sudah terlanjur mendapatkan nilai buruk dari google. Sehingga mubazir aja kalau itu dilakukan sekarang. Kecuali, saat perubahan, langsung segera di eksekusi, nah itu jadi masuk akal.
Karena sekarang situasinya, sudah terlanjur turun ranking SEOnya. Maka yang paling efektif yang bisa kita lakukan adalah, me-reindex halaman-halaman yang berubah struktur urlnya tadi.
Caranya gimana?
Ya, tinggal re-index semuaaaaa artikel/halaman yang ada di website ini di Google Search Console.
2. Copy satu satu, url yang akan kamu re-index ke google
3. Pada dashboard Google Search Console, klik di bagian Inspeksi URL.
4. Paste di Google Search Console, di bagian Inspeksi URL.
5. Enter, lalu nanti akan ada proses seperti gambar dibawh.
5. Tunggu sekitar beberapa detik, akan muncul tampilan seperti gambar dibawah ini.
CATATAN PENTING : Dari sini kita sudah bisa buktikan bahwa url yang saya paste tadi, ternyata tidak ter-index di google. PADAHAL, artikel tersebut sebetulnya sudah ter-index dari dulu di google, bahkan selalu muncul di halaman satu hasil pencarian google.
Tapi begitu struktur url / permalink nya saya ubah, google jadi tidak mengenali halaman tersebut. Dan ini fatal banget…! Itu kenapa, semenjak website ini di upgrade, traffic nya turun drastis.
Nah saya kasih contoh juga, bagaimana tampilan untuk halaman yang sudah terindex di google, saat urlnya di submit, konfirmasinya akan seperti dibawah ini.
Contoh url yang sudah ter-index di google.
Oke, lanjut. Kalau muncul dialog “URL tidak ada di Google”, silahkan klik “MINTA PENGINDEKSAN”.
Maka nanti muncul proses seperti gambar dibawah ini, silahkan tunggu beberapa menit.
Saat proses selesai, akan muncul tampilan seperti dibawah ini.
Klik OK. maka ini adalah tanda kalau halaman yang kamu inputkan tadi sudah masuk dalam pengindeksan oleh google. Biasanya sekitar beberapa jam sudah langsung terindex di google.
Nah lakukan proses ini untuk semua halaman yang mengalami perubahan struktur URL.
Nah secara teori, jika kita lakukan proses ini ke semua halaman yang mengalami perubahan struktur URL. maka, halaman dengan url yang baru tersebut akan kembali terindex di halaman pencarian google, begitu di klik oleh user, halaman akan tampil normal seperti biasa, sehingga google akan menilai kembali website kita, dengan begitu nilai SEOnya akan kembali ke semula.
Tapi ini baru teori, hasilnya seperti apa? akan saya update sekitar 3 bulan lagi ya.
Update Bulan #1 : Sudah terlihat traffic mulai naik.
Saya lagi nambah fitur baru, di salah satu website (website hobby). Dimana kami menyediakan konten berupa stock foto, hal-hal yang berhubungan dengan hobby tersebut. Intinya, disana kami menyediakan ribuan file foto kualitas tinggi, yang bisa di download oleh member. Ada yang gratis, ada yang berbayar. Jadi mirip mirip kayak freepik.com lahh.. (ala ala). Tapi sekali lagi, konten fotonya hanya bertemakan 1 hobby saja, sesuai tema dari website tersebut.
Nah, di website tersebut, ada halaman store/toko nya. Dibangun dengan Woocommerce. Disana menjual berbagai barang yang berhubungan sama hobby tersebut. Hari ini produk-produk yang dijual masih 100% produk fisik. Mulai dari bahan, peralatan, hingga merchandise.
Nah karena stok foto ini nantinya ada yang berbayar, maka ada kaitannya dengan sistem pembayaran kan?, maka saya putuskan, fitur ini nantinya akan saya tempelin di Woocommerce aja. Karena nanti bisa memanfaatkan sistem pembayaran, sistem filternya, single product layout, dan lain-lain.
Masalahnya apa?
Nah, masalahnya antara produk fisik yang sudah ada, kurang relate sama konten foto ini. Sehingga kalau single-product.php nya jadi satu layout. Maka secara estetika kayak nggak nyambung. Dan sampai detik itu saya belum tau apakah single-product.php bisa dibuat custom juga seperti single.php
Walaupun bisa, saya juga belum tau caranya. Karena setelah saya coba ganti single-product.php menjadi single-product-foto.php tidak berhasil.
Solusinya apa?
Setelah menimba ilmu di universitas youtube.com dan kampus stackoverflow.com, akhirnya saya menemukan titik terang. Ternyata bisa. Caranya?
1. Buat file baru di WP themes directory kamu
Dalam kasus ini, nama kategorinya adalah “foto”. Jadi saya buat file php baru bernama single-product-foto.php sementara isinya, saya copy paste dari file single-product.php yang tentunya, nanti akan saya customize isinya. Agar setema dengan kategori foto. Disana ada tombol downloadnya, intinya desain layoutnya di desain khusus agar sesuai dengan tema halaman download foto stok.
2. Edit file functions.php
Buka file functions.php di themes directory kamu, edit. Lalu tambahkan code berikut ini. Sesuaikan nama kategori (disana isinya : ‘foto’), dan url filenya (disana isinya : ‘single-product-foto.php’).
Dalam konteks SEO, menggunakan nama premalink “blog” ataupun “article”, dua duanya sama saja di mata google. Tapi yang lebih penting adalah keseluruhan rangkaian premalink, yang sebaiknya sama atau mencerminkan topik dan isi konten. Sehingga antara premalink, judul dan isi, semua relevan.
Google tidak memiliki preferensi khusus antara menggunakan “blog” atau “article” dalam permalink. Mesin pencari lebih fokus pada relevansi dan kejelasan konten halaman. Jadi, jika baik “blog” maupun “article” cocok dengan topik atau jenis halaman yang kamu miliki, keduanya bisa digunakan.
Alasan menggunakan “blog” dalam permalink
Identifikasi jenis halaman : Jika kamu memiliki beberapa jenis halaman di situs web kamu, menggunakan “blog” dalam permalink dapat membantu mengidentifikasi jenis halaman tersebut secara langsung. Misalnya, “www.example.com/blog/nama-artikel”.
Pengaturan arsitektur situs: Jika kamu ingin mengatur arsitektur situs web kamu secara terorganisir, menggunakan “blog” dalam permalink dapat memudahkan pengelompokan konten blog kamu dalam satu direktori.
Alasan menggunakan “article” dalam permalink
Deskriptif : Jika kamu memiliki artikel yang bukan hanya blog, tetapi juga berbagai jenis halaman konten, menggunakan “article” dalam permalink dapat menjadi deskriptif dan memberikan informasi tambahan tentang jenis konten halaman.
Keluwesan: Jika kamu ingin menghindari pembatasan hanya pada konten blog dan ingin memperluas jenis konten yang dapat kamu miliki di situs web kamu, menggunakan “article” dalam permalink memungkinkan fleksibilitas yang lebih besar.
Penting untuk dicatat bahwa keputusan antara menggunakan “blog” atau “article” dalam permalink tergantung pada konteks dan kebutuhan spesifik situs web kamu. Yang terpenting adalah menggunakan permalink yang relevan, deskriptif, dan mudah dipahami oleh pengguna dan mesin pencari.
Malam ini, saya nggak sengaja menemukan error di salah satu website saya, iseng akses dari HP, lah kok error? padahal beberapa hari belakangan ini normal-normal aja. Keterangan errornya seperti ini :
Warning: file_get_contents(http://wikikombucha.com/XXX/XXX/XXX/XXX/wiki-kombucha-logo.png): failed to open stream: HTTP request failed! in /home/XXX/domains/wikikombucha.com/public_html/wp-includes/class-wp-image-editor-imagick.php on line 154
Warning: file_get_contents(http://wikikombucha.com/wp-content/XXX/XXX/XXX/wiki-kombucha-logo.png): failed to open stream: HTTP request failed! in /home/XXX/domains/wikikombucha.com/public_html/wp-includes/class-wp-image-editor-imagick.php on line 154
Penyebabnya
Walaupun errornya ada di : “class-wp-image-editor-imagick.php on line 154”, tapi kalau dilihat, penyebabnya adalah file gambar ini : wiki-kombucha-logo.png.
Kalau dilihat dari errornya lagi, itu disebabkan karena urlnya masih pakai http. Gambar itu saya upload waktu diawal awal bikin website, sebelum menerapkan https. Sehingga, di database, terekam dengan alamat http.
Setelah saya cek gambar tersebut, sebetulnya itu gambar logo yang lama, dan sudah tidak dibutuhkan lagi. Solusi bodo bodoannya ya tinggal hapus aja gambar itu, ia nggak?
Tapi tidak ngefek apa apa.
Nah disinilah letak kebingungannya. Kenapa file gambar sudah terhapus permanen, tapi tetap muncul pada error? kan sudah di hapus? ia nggak?
Solusi
Seperti biasa, waktunya mengeluarkan jurus handalan 😅, yaitu matiin satu persatu plugin, karena saya curiga url gambar tersebut nyantol di database si plugin. Tapi dengan catatan, setelah kita pastian semua url ini tidak ada di file html atau php kita ya. Seperti di header.php, index.php, footer.php, functions.php, dll.
Setelah mematikan semua plugin, lalu menghidupkan lagi satu persatu. Jadi tiap menghidupkan satu plugin, kita refresh halamannya, memastikan errornya muncul atau tidak. Kalau setelah menghaktifkan satu plugin, lalu errornya muncul, berarti plugin itu yang bermasalah.
Daaaaan, akhirnya ketemulah si plugin bermasalah itu. Ada di “Markup (JSON-LD) structured in schema.org” ini adalah plugin untuk pengimplementasian struktur html dari schema.org.
Fungsinya untuk menstandardisasi tag HTML yang akan digunakan oleh webmaster untuk membuat mesin pencari mudah mengidentifikasi, website ini tentang topik apa, dll.
Setelah saya cek pengaturan pluginnya, ternyata benar aja, url gambar tersebut masih nyangkut disini.
Ya berarti tinggal ganti dengan gambar baru. ia kan? upload gambar baru, simpan perubahan, lalu coba refresh lagi.
Apakah berhasil?
Ternyataaaaa Tiidaaaaaaaaaaaak 😂
url gambar sudah ter-update ke file yang baru, tapi errornya tetap muncul. Untuk sementara saya simpulkan bahwa error terjadi, karena plugin mengakses konten menggunakan HTTP sedangkan server host saya menolak, sehingga terjadilah error tersebut.
Sebetulnya ada pengaturan untuk mengijinkan akses ke HTTP, tapi untuk alasan keamanan, saya mending pakai plugin lain saja. Karena saya cek, plugin ini sudah tidak ada update lagi sejak lama.
Jadi solusinya, saya lepas plugin “Markup (JSON-LD) structured in schema.org” ini.
Dan website saya kembali normal.
Ini kasus yang jarang terjadi, karena di google pun, cuman ada 1 kasus yang paling mendekati, dan itupun jenis masalahnya agak berbeda. Dan solusi yang ia ambil adalah mengubah pengaturan di server, pada bagian “allow_url_fopen”.
Saya sih nggak mau pakai cara itu, untuk alasan keamanan.
Dan ini hanya catatan pribadi, tapi kalau ini bermanfaat juga buat kamu, ya syukurlahhhh heheheh.
Saya lagi bikin website toko online, untuk produk affiliate. Dimana di toko tersebut, tidak benar-benar menjual barang, seperti toko online pada umumnya, mulai dari menstok barang, mengembas, dan sampai mengirimkannya ke kurir. Tapi hanya sebagai etalase produk, lalu kita pasang link produk affiliate disana.
Untuk pembahasan tentang bisnis affiliate, nanti kita bahas di artikel lainnya saja ya, biar nggak panjang.
Maunya gimana?
Nah di woocommerce, sebetulnya sudah ada fasilitas untuk produk digital, yang sebetulnya bisa mengakomodasi produk affiliate ini. Dan bahkan ada plugin yang dibuat khusus untuk website affiliate.
Tapi saya tidak pakai itu, karena ini kebutuhannya agak spesifik, jadi saya buat sendiri aja, biar bisa benar-benar sesuai kebutuhan saya.
Masalahnya apa?
Nah tapi, karena tidak pakai mode “produk digital” dan tidak pakai plugin tambahan, inputs/textbox qty prdouk, jadi tetap kelihatan.
Karena saya tidak begitu mahir woocommerce ataupun wordpress. Jadi sampai sekarang saya nggak nemu cara menonaktifkannya lewat dashboard wordpress.
Solusinya gimana?
Ya sudah, kita bypass pakai code aja. Berikut ini adalah code untuk menonaktifkan atau menghapus input/textbox qty (quantity) pada halaman single product woocommerce.
Buka file functions.php di folder theme wordperss kamu.
Edit, lalu kalau sudah ada baris kode disana, kamu cukup taruh di baris paling bawah, diatas tanda “?>”
Save (simpan)
lalu coba refresh halamannya lagi. Dan sekarang input/textbox qty sudah hilang.
Di artikel berikutnya, mungkin saya akan bahas juga, cara mengcustomize tombol “Beli Sekarang” agar saat di klik, muncul dropdown menu. Dalam kasus saya ini, akan muncul dua opsi, apakah beli lewat “Tokopedia” atau “Shopee”.
Saya lagi benerin website saya yang lama. Dimana di salah satu halamannya, saya nambahin tampilan list produk, yang produknya ditampilkan berjejer kesamping, secara horizontal.
Sehingga saat websitenya di buka lewat HP, list produk tersebut bukan lagi berjejer dari atas kebawah, tapi berjejer kesamping. dan bisa di scroll ke kiri dan kekanan.
Masalahnya apa?
Nah masalahnya, tampilan garis dari scrollbarnya itu, ganggu tampilan banget. Saat halaman pertama di load, scrollbarnya itu secara default tampil seperti digambar. Walaupun memang, begitu di geser/disroll sedikit, scrollbarnya akan hilang. Nah tapi saya tetep nggak mau seperti itu.
Maunya gimana?
Saya maunya, begitu halaman di load dari pertama kali, list produk akan tampil tanpa adanya penampakan scrollbar. Seperti gambar dibawah ini.
Solusinya apa?
Lumayan lama sih cari solusinya. Karena ini pertama kali saya menerapkan list produk yang ditampilkan sejajar menyamping seperti ini.
Awalnya, saya pikir perintah “overflow-x: hidden;” fungsi untuk menyembunyikan scrollbarnya. Walaupun memang benar, scrollbarnya jadi hilang. Tapi list produknya jadi nggak bisa di scroll. Pokoknya perintah “overflow-x:” udah saya otak atik valuenya. dari auto, hidden, scroll, dll.
Tapi tetep aja, tidak sesuai dengan yang saya mau.
Setelah ngulik-ngulik lagi, ternyata kuncinya ada di : “display: none;”
Tapi jangan sampai salah nempatinnya ya. Cara pakainya, bisa lihat di code CSS dibawah ini. Karena kalau salah tempat, list produknya yang display nya = none (alias hilang). Jadi perhatikan cara pakainya di code CSS di bawah ini.
<style type="text/css">
/* Misalnya ini class scrollbar kamu */
.nama_class_kamu {
display: flex;
flex-wrap: nowrap;
position: relative;
overflow-x: scroll;
}
/* Menyembunyikan scrollbar untuk Chrome, Safari dan Opera */
.nama_class_kamu::-webkit-scrollbar {
display: none;
}
/* Menyembunyikan scrollbar untuk Internet Explorer, Edge and Firefox */
.nama_class_kamu {
-ms-overflow-style: none; /* Internet Explorer dan Edge */
scrollbar-width: none; /* Firefox */
}
</style>
Kesimpulan
Perintah “overflow-x: hidden;” bukan solusi yang tepat dalam kasus ini, karena fungsi ini bisa bikin list produk tidak bisa di scroll. Perintah “display: none;” adalah yang paling tepat, tapi penempatannya harus diperhatikan agar ditujukan untuk menghilangkan “webkit-scrollbar” nya. Bukan list produknya.
Saya punya website, yang di salah satu halamannya, ada semacam informasi penjadwalan. Dimana di kotak informasi tersebut, user bisa melihat, “tanggal berapa sih jadwal proses selanjutnya?”
Awalnya, user harus catat manual di kertas, atau di notes HP.
Tapi saya pengennya, proses jadi otomatis. Dimana user bisa tinggal klik satu tombol, lalu informasi otomatis tercatat di google calender si user (HP ataupun Desktop). Sehingga user nggak perlu lagi mencatat jadwal ini secara manual.
Kebutuhan
Cukup satu kali klik, google calender akan otomatis terbuka, dan sudah langsung terisi judulnya, tanggalnya dari tanggal berapa, sampai tanggal berapa, bahkan ada informasi tambahannya juga, yang mengandung link url.
Sehingga saat jadwalnya tiba, user dapat notifikasi di HPnya (pengingat). Saat notifikasi pengingat tersebut muncul, user tinggal klik, kemudian tampilah informasi catatan di google calender, lalu user tinggal klik link url, dan langsung di arahkan ke halaman yang mereka harus kunjungi, saat hari dimana jadwal telah ia tentukan. (semoga paham maksudnya 😂 lagi ngantuk banget males mikir).
Masalahya apa?
Sebenarnya, sistem pencatatan otomatis ke google calender ini sudah saya terapkan di website ini, sejak tahun 2018 lalu. Dan semenjak itu, semua user pakai dan semua berjalan dengan normal.
Cuman beberapa hari ini, user banyak yang info, kalau calender otomatisnya tidak merespon. Dimana saat di klik, muncul konfirmasi “sinkronisasi gagal”. atau kadang “event tidak ditemukan”, dll… Setelah saya coba sendiri, ternyata benar.
Solusinya apa?
Akhirnya, saya coba cek codingnya. Lalu saya coba cari referensi. Siapa tau aja, metodenya sekarang sudah berubah. Karena udah dari 2018, pasti ada yang di update oleh google.
Setelah cari tau, saya menyelesaikan masalah ini dengan 2 solusi.
Solusi 1 : ubah struktur url
Dulu format url yang saya pasang di code php saya seperti ini :
Sekarang urlnya berubah jadi : calendar.google.com/calendar/render?
Jadi kemungkinan pertama, error terjadi karena struktur url salah.
Solusi 2 : biarkan baris text bersambung (jangan di enter)
Setelah saya coba solusi 1, memang ada perkembangan, dimana kalendernya tampil, tapi fieldsnya tidak terisi otomatis (seperti judul, tanggal, dan catatan).
Lumayan membingungkan, karena sudah ditulis dengan format/struktur sesuai dengan contoh di dokumentasi google, tapi hasilnya kok tetap salah atau nggak bisa.
Dan akhirnya nemu solusi 2.
Solusi 2 ini tidak sengaja saya temukan, karena saya bener-bener ubah satu persatu. dari judul dulu, dari tanggal, kemudian fields yang lainnya. Uji coba ini saya tidak rapikan, sehingga saya sambung textnya tanpa meng-enternya. Dan bisa.
Jadi ketemulah disana penyebabnya, bahwa itu disebabkan karena baris text urlnya, ternyata nggak boleh di enter. nggak boleh ada br (break).
Saya belajar hal baru hari ini. Sekitar 2 jam lamanya, saya lagi ngulik bootstrap, cara agar bisa mengurutkan objek, mana yang di atas, mana yang dibawah. Saat halaman mengalami break point, dari mode desktop ke mode mobile.
Diketahui
Saat event break point terjadi, secara default bootstrap mengurutkan objek atau kolom grid, dimana yang berada dikiri, akan berada di atas, dan yang kanan akan berada di bawahnya.
Apa kebutuhan saya?
Dalam kasus ini, saya lagi bikin sebuah halaman, yang di halaman tersebut menampilkan 3 judul informasi (3 paket gambar dan text seperti video diatas). Tapi di tampilkannya dengan zig zag. Baris pertama gambarnya dikiri, baris kedua gambarnya di kanan, baris ketiga gambarnya di kiri lagi.
Apa masalahnya?
Dengan sifat default, objek kiri akan di atas, dan objek kanan akan di bawah, dengan di tumpuk secara zig zag seperti ini, saat kondisi break point terjadi, di mode mobile tumpukannya jadi berubah.
Tumpukan di mode desktop
Tumpukan di mode mobile
Sebelah kiri, menunjukan hasilnya setelah beralih dari mode desktop ke mode mobil, tapi yang saya mau seperti di kanan. Tumpukannya berurutan dari : urutan 1. gambar : text, urutan 2. gambar : text, urutan 3. gambar : text.
Penampakan aslinya seperti ini.
Solusinya
Ternyata di bootstrap sudah ada fungsi/class untuk mengurutkan secara custom, tiap objek, semau kita.
Nama classnya adalah “order” simak dokumentasi bootstrap tentang order disini.
Sebelum di manupulasi.
<div class="container">
<div class="row">
<div class="col-lg-6 align-self-center">
<img class="shadow" src="https://www.w3schools.com/w3images/lights.jpg" style="width:300px" />
</div>
<div class="col-lg-6">
<div class="p-5 mt-4">
<h1 class="display-4">Test Judul 1</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn btn-outline-dark">Selengkapnya</a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 align-self-center">
<img class="shadow" src="https://www.w3schools.com/w3images/lights.jpg" style="width:300px" />
</div>
<div class="col-lg-6">
<div class="p-5 mt-4">
<h1 class="display-4">Test Judul 2</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn btn-outline-dark">Selengkapnya</a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 align-self-center">
<img class="shadow" src="https://www.w3schools.com/w3images/lights.jpg" style="width:300px" />
</div>
<div class="col-lg-6">
<div class="p-5 mt-4">
<h1 class="display-4">Test Judul 3</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn btn-outline-dark">Selengkapnya</a>
</div>
</div>
</div>
Sesudah di manipulasi
<div class="container">
<div class="row">
<div class="col-lg-6 align-self-center">
<img class="shadow" src="https://www.w3schools.com/w3images/lights.jpg" style="width:300px" />
</div>
<div class="col-lg-6">
<div class="p-5 mt-4">
<h1 class="display-4">Test Judul 1</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn btn-outline-dark">Selengkapnya</a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 align-self-center order-lg-1">
<img class="shadow" src="https://www.w3schools.com/w3images/lights.jpg" style="width:300px" />
</div>
<div class="col-lg-6">
<div class="p-5 mt-4">
<h1 class="display-4">Test Judul 2</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn btn-outline-dark">Selengkapnya</a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 align-self-center">
<img class="shadow" src="https://www.w3schools.com/w3images/lights.jpg" style="width:300px" />
</div>
<div class="col-lg-6">
<div class="p-5 mt-4">
<h1 class="display-4">Test Judul 3</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn btn-outline-dark">Selengkapnya</a>
</div>
</div>
</div>
Ada tambahan class : order-lg-1
Artinya, objek yang ada di bawah div tersebut, akan diurutkan nomor 1 atau di atas.
