Pernahkah kamu mendapati suatu formulir di website tertentu lalu kemudian user mengisinya sehingga terhubung ke Whatsapp? Ya, itu ialah web form submission yang diarahkan langsung ke whatsapp customer services. Teknik ini tergolong efektif dan agak lumayan tarifnya apabila ditetapkan rate clicknya seperti yang digunakan pad concept FB Ads.

Namun yang akan kita bahas kali ini ialah, bagaimana caranya agar suatu element *Form* tersebut bisa terhubung dengan whatsapp kemudian pesannya terkirim langsung dari situ, apakab bisa tanpa system khusus? Jawabannya bisa dan mudah. Yang anda butuhkan ialah:

1. ID nama setiap element yang terkandung pada form tersebut
2. Nomor tujuan WA (customer services -tadi contohnya)
3. Dan format pesan yg diinginkan untuk dikirim.

Seperti apa teknisnya? Yuk, kita dekati dengan 2 pendekatan.

Langkah #1 : Siapkan Web Form 💻

Anda sudah tahu tentang html kan? Maka tidak asing lagi kalau kita membongkar sebuah form element. Seperti ini misalnya:

Form ini kita pakai juga dari halaman ini. ♛

Langkah #02 : Bumbu Javascript + JQuery ✨

Yang disebut javascript disini ialah code dan JQuery ialah library pokoknya. Tentunya karena kita bermain dengan website, maka letakkan script ini di bagian head element. Apa saja yang ditulis? Ini dia…

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

<script>
 $(document).ready(function () {
    waClickSend();
});

function waClickSend() {
    const form = $("#formulir-pendaftaran");

    form.on("submit", function (event) {
        event.preventDefault();

        let nama = $("#namaLengkap").val();
        let email = $("#emailAddress").val();
        let wa = $("#noWhatsappAktif").val();
        let catatan = $("#catatan").val();
        let text = `Hello *Admin* saya butuh bantuan! Nama : ${nama} dan emailnya ${email} Begini nih... ${catatan}`;

        let pesan = encodeURIComponent(text);
        let phoneNumber = "085795569337";
        let whatsappUrl = `https://api.whatsapp.com/send?phone=${phoneNumber}&text=${pesan}`;

        window.location.href = whatsappUrl;
    });
}

 
</script>

Seperti yang bisa kita perhatikan pada code javascript diatas. Tiap elementnya tersimpan dalam variable : nama, email, wa, dan catatan. Lalu dimana ID tiap element tersebut? Tentu saja terhubung dengan:

• variable nama menarik value dari #namaLengkap (ini ID nya).
• variable email menarik value dari #emailAddress (ini juga ID nya)
• dst… sudah fahamkan? 🤗

Langkah #03 : Test Final 🎯

Dan kita bisa save document tadi. Kemudian tekan CTRL + F5 untuk siap melakukan testing pengisian dan lihat hasilnya! Tadaaaa….

Anda berhasil! 😊

OK, integrasi ini bisa digunakan diberbagai form dan juga tujuan lainnya! Kalau kamu memiliki sistem web yang serupa dan ingin untuk bersegera menerapkan flow tadi. Segera hubungi tim kami untuk penanganan konsultasi teknis langsung, ya! Good luck!⋆.˚🦋༘⋆

Memblokir tombol Back di web aplikasi adalah praktik yang perlu dilakukan dengan hati-hati, karena dapat mengganggu pengalaman pengguna jika tidak diterapkan dengan tepat. Namun, ada situasi tertentu di mana memblokir tombol Back itu dipakai, terutama untuk menjaga alur aplikasi atau mencegah masalah teknis. Kita akan share 3 poin utamanya di tutorial kali ini:

• Ketika pengguna sedang mengisi formulir panjang (misalnya pendaftaran, aplikasi keuangan, atau survei).
• Dalam alur proses langkah-langkah, seperti checkout e-commerce atau aplikasi pembayaran.
• Jika halaman sebelumnya tidak lagi relevan setelah pengguna mengambil tindakan (logout, dll).

Lalu secara prakteknya, bagaimana menerapkannya? Pilih salah satu pendekatan yang cocok. Karena semua bisa dilakukan cukup menggunakan javascript :

function disableBack() { window.history.forward(); }
setTimeout(“disableBack()”, 0);
window.onunload = function () { null };

atau boleh juga dengan pendekatan lainnya:

window.history.pushState(null, null, window.location.href);
window.onpopstate = function () {
window.history.go(1);
};

masih kurang lengkep ? Bisa pakai juga yang ini :

function preventBack() { window.history.forward(); }
setTimeout(“preventBack()”, 0);
window.onunload = function () { null };

Cara Pemasangannya?

1. gunakan script tadi simpan di back-blocker.js
2. buka file view layout.html anda lalu tambahkan:

<script src=”back-blocker.js” type=”javascript” > </script>

sesimple itu? Yes…! Cobalah…. good luck.

Antara sedih dan terharu, tetapi juga bahagia. bagaimana menggambarkannya? Programmer harus tau betul tentang ini. Khususnya ketika coding standard belum diindahkan dengan baik. Simak penjelasan coding standard di artikel sebelumnya.

Programmer Bahagia dengan 3 perkara: 🥰

1. Performa yang Lebih Cepat

Server dengan spesifikasi tinggi memberikan kemampuan pemrosesan yang jauh lebih baik, memungkinkan aplikasi berjalan dengan kecepatan optimal, terutama jika sebelumnya sering mengalami bottleneck. Dalam fikiran programmer tuh begini :
“Akhirnya nggak perlu khawatir lagi soal lemot atau timeout!”

2. Kemampuan Menangani Beban Lebih Besar

Dengan spesifikasi server yang lebih tinggi, programmer dapat melayani lebih banyak pengguna atau proses tanpa khawatir server overload. Hati kecilnya bergumam begini :
“Kapasitas besar? Bawa sini semua request-nya, aku siap!”

3. Ruang untuk Bereksperimen

Dengan lebih banyak sumber daya, programmer bisa mencoba teknologi baru atau menjalankan simulasi yang lebih kompleks tanpa keterbatasan hardware. Hati kecilnya berkata begini :
“Wow, akhirnya bisa coba deploy API macam-macam tanpa khawatir resource habis!”

Ngomongin kebahagiaan ga bisa disebut seru kalo ga kenal penderitaannya. Cukup 1 saja dulu ya yaitu ini :

Programmer Menderita dengan 1 Faktor Utama 😭

Adaptasi dengan OS Baru

Bukan masalah ganti baju yang bisa ditilep, lempar, dan pakai yg lain. Dalam suatu project itu kalau sudah multi-OS alias berbeda OS, maka adaptasinya yang waw. Berpindah ke OS yang berbeda (misalnya dari Windows ke Linux atau sebaliknya) membutuhkan waktu untuk menyetel ulang, konfigurasi, command-line tools, dan bahkan naming standard. Di hati kecilnya bisa teriak dengan ini :
“Apa sih ini? Lho koq ngga jalan? Aduh, huruf kecil koq ga kedetek? waduh ini kenapa?!”🥺

Okay, cukup-cukup! Kita calm down dulu… atasi dulu gimana ini solusinya bagaimana ya? Yuk kita kenali kasusnya lalu langkah praktisnya seperti apa. Simak bagian berikut ini :

Case #01: Coding Standard 🚀

Khusus untuk pengembangan yang dilakukan pada OS berbeda, seperti Windows ke Linux misalnya. Maka hal yang penting diketahui ialah coding standard. Karena case sensitifitas akan menjadi bagian pokok dalam Linux. Misalnya dua buah variable ini:

Nama_Barang

akan berbeda dengan

nama_barang

Dan tentu saja Query yang terkait akan mengalami error saat execution!

Solusinya? Lakukan search & replace all dalam setiap file terkait. Apabila nama ini ada dalam column database, maka standard-kan dengan penjelasan yang sudah diuraikan pada artikel Coding Standard sebelumnya! Dan tentu saja ini akan sangat time_consuming ya guys! 😔

Case #02: Server Config 💻

Ketika migrasi multi-OS. Kita harus ingat Server Config. Apa saja cakupannya? Ini misalnya:

• Versi PHP
• Extension yang dipakai
• Memory Limit
• Upload Max Size
• .htaccess (Apache & nginx)

Hati-hati karena apabila tidak diadaptasikan dengan baik satu persatu, maka kemungkinan error akan langsung terlihat!

Case #03: User Permission 👨‍👦‍👦

Awas guys! Dalam Windows juga terjadi hal yang sama dalam permission seperti ini misalnya:

Pastikan diberikan hak akses writing untuk folder tertentu asset / lokasi upload misalnya.

Dan begitu juga untuk Linux maka gunakan chmod:

chmod -R 775 uploads/
chown -R www-data:www-data uploads/

Case #04: Folder Path 📁

File path dan struktur direktori berbeda antara OS, misalnya dari Windows (C:\folder\file.dat) ke Linux (/home/user/file.dat). Ini bisa membuat script atau aplikasi gagal berjalan. Error guys! ⚠️

Analisis Path: Identifikasi bagian kode atau konfigurasi yang menggunakan file path hard-coded. Lalu segera perbaiki!
Test: Uji setiap modul untuk memastikan path benar sesuai OS baru.

---

Okay, siap migrasi? Konsultasikan dengan tim ahli segera sebelum deadline mulai mepet. Tim kami available khusus dari hari senin hingga sabtu, minggu libur ya!

Hello again, jumpa lagi di artikel Web Programming! Kita bakal bahas sedikit banyak tentang coding standard! Khususnya saat memberikan penulisan dalam penamaan variable, function, dan lain sebagainya….

Kita sadari dulu bahwa seorang programmer itu ternyata menggunakan berbagai taktik untuk memastikan dalam penulisan Code agar mudah dibaca dan juga terorganisasi. Apa saja fokus perhatiannya dalam penulisan Code itu ? Ini beberapa faktornya :

• Penamaan untuk variabel ada formatnya;

• Ada simbol spasi, indentasi, dan tab dalam kode;

• Ada keterangan komentar di bagian kode tertentu guna membantu interpretasi (pemahaman).

Nah dalam artikel kali ini kita akan membahas satu persatu konsep-konsep barusan… ok ya?

Penamaan Variabel

Penamaan variabel merupakan aspek penting dalam menulis Code. Tujuannya 1 yaitu agar MUDAH DIBACA. Penamaan variabel konsepnya begini: Buat variabel yang menggambarkan tujuan utamanya dan ada tema yang konsisten di seluruh baris berikutnya dalam project coding tadi.

Multiword Delimited

Bagian pemisah antar kata. Nah, kita sebutlah istilah aslinya yaitu MULTIWORD DELIMITED. Keren yak?! Jadi ceritanya itu konsep ini dipakai untuk memisahkan kata-kata dalam penulisan nama variabel. Makanya dalam penulisan model seperti ini tidak ada simbol spasi dalam variabel. Karena kebanyakan variabel memang harus dipisahkan dengan cara tertentu. Sebagai contoh nih ya:

> SnakeCase

Nah lihat ini variablenya itu terpisah oleh underscore bukan spasi ya guys!

variable_one
variable_two

> CamelCase

Beda lagi dengan camel alias ONTA. Ada naik turunnya. Coba perhatikan :

namaOrang;

nomorMesin;

> Hungarian Notation

Beda lagi yang bagian ini. Caranya dengan memberikan camelcase plus format lain seperti datatype atau penjelas lainnya dalam penamaan variable tersebut.

sUsername; // string untuk username

iIndexColumn; // integer untuk indexColumn

bAccessStatus; // boolean untuk accessStatus

Penamaan suatu Function dan Class

Sama seperti penamaan variabel, dalam suatu pemberian nama Function dan juga Class kita harus mengikuti struktur judul deskriptif yang sama yang sudah disebutkan sebelumnya.

Aspek penting dari penamaan adalah memastikan Class, Function, dan juga variabel itu bisa dibedakan satu sama lain. Misalnya, seseorang dapat menggunakan Camelcase dan Hungarian Notation untuk Fungsi dan Class, sementara notasi Snakecase dipakai pada variabel saja (misalnya).

Membedakan fungsi, kelas, dan variabel dengan konvensi penamaan yang berbeda dapat sangat membantu dalam interpretasi Code tertentu. Sehingga user lain atau tim developer lain mampu memotong waktu dalam explorasi system flow yang panjang.

---

Apabila memerlukan tim migrasi dan perubahan schema code untuk kestabilan multi OS. Segerakan untuk konsultasikan kepada tim ahli kami!

Ada yang pernah mengalami error seperti ini?

Bener-bener dah, kenapa ini yaa?!

Ada apa dengan PHP?

Dalam Hypertext Preprocessor alias PHP terdapat konfigurasi yang perlu diaktifkan guna fitur Locale ini dapat berfungsi dengan baik.

Tentu saja yang perlu kita ketahui ialah dimana letak konfigurasinya berada? Ini dia… bagi pengguna windows

C:\xampp\php\php.ini

atau bagi pengguna Linux juga kurang lebih seperti ini

/etc/php/7.4/apache2/php.ini

Cara Penanganan

Setelah file configuration php.ini barusan tadi dibuka, maka kita lanjutkan :

• Tekan CTRL + F (Find)

• lalu ketik extension

sampai dibaris yg ada

;extension=intl

disinilah kita membuang tanda semicolon (titik koma). Hanya bagian itu saja! Agar extension php ini berjalan. Save dan close.

• kemudian stop server apache, tunggu hingga 10 detik

• Dan terakhir start kembali server apache nya!

Viola, system kini telah lancar jaya!

Manfaat Extension intl

Sebenarnya di PHP kenapa ada extension ini, tentu saja ada manfaatnya lho! Extension ini memudahkan untuk melakukan pemeriksaan UCA-konforman dan tanggal / waktu / jumlah / mata uang format dalam skrip mereka.

Di dalamnya Intl tadi itu ada beberapa modul, masing-masing memperlihatkan ICU sesuai API:

• Collator: memberikan tali kemampuan perbandingan dengan dukungan lokal-sensitif semacam penataan yang tepat.
• Jumlah Formatter: memungkinkan untuk menampilkan nomor sesuai dengan format lokal atau diberikan pola atau seperangkat aturan, dan untuk mengurai string menjadi angka.
• Pesan Formatter: memungkinkan untuk membuat pesan menggabungkan data (seperti nomor atau tanggal) diformat sesuai dengan pola dan lokal diberikan aturan, dan mengurai pesan penggalian data dari mereka.
• Normalizer: menyediakan fungsi untuk mengubah teks menjadi salah satu bentuk normalisasi Unicode, dan menyediakan rutin untuk menguji apakah string tertentu sudah dinormalisasi.
• Lokal: menyediakan interaksi dengan pengidentifikasi lokal dalam bentuk fungsi untuk mendapatkan subtags dari identifier lokal; mengurai, menulis, pertandingan (lookup dan filter) pengidentifikasi lokal.

Nah sekarang udah fahamkan, kenapa harus diaktifin extension barusan dan error locale-nya jadi ilang (alias lancar jaya?!) Ok. That’s all for today, jika masih ada kendala web programming lainnya, jangan sungkan diskusi di group whatsapp official kami yaaa.

Pernah mengalami hal ini ? MySQL atau MariaDB memiliki beberapa pola yang harus kita ketahui terkait crash moment :

MySQL service on local computer started and then stopped. Some services stop automatically if they are not in use by other services or programs.

Atau mungkin yang seperti ini?

Anda tidak sendirian! Banyak beberapa kasus yang terjadi dalam penggunaan database MySQL/MariaDb yang harus anda tangani dengan cara yang cerdas, cermat dan siap siaga! Namun, sebelum itu ketahui dulu apa penyebabnya?

#Case 01 : Windows Autoupdate

Masih ingat tentang kronologi file caching di windows server? Ketika fitur autoupdate terjadi. Ada keadaan dimana windows melakukan restart untuk apply critical updates tanpa konfirmasi kepada user. Dan hal ini membahayakan database yang sedang dipergunakan secara live!

Antisipasi hal ini dengan melakukan autoupdate -> manual. Jangan gunakan automatic mode. Konfigurasi lakukan secara bertahap demi kestabilan database.

#Case 02 : Logib Files

Ada pula keadaan dimana cache file tidak final. Apa saja file Logib itu?

Lacak 3 file yang berada di lokasi folder mysql\data :

• ib_logfile0
• ib_logfile1
• ibdata1

Ketiga file ini wajib dihapus dulu karena apabila file ini terakhir writing process invalid, maka mysql running akan kembali crashed!

Setelah proses penghapusan dilakukan, sekarang jalankan kembali MySQL Services atau Restart windowsnya.

#Case 03 : my.ini Configuration

Hal yang terjadi dimana configuration file tidak bisa dibaca oleh MySQL / MariaDB juga bisa menjadi penyebab crashed!

Atasi hal ini dengan menimpa my.ini (default). Lalu setting kembali port mana yang ingin dibuka. Setelah itu MySQL dapat dijalankan kembali.

Terkadang kita bisa juga menggunakan checking mechanism dari MySQL itu sendiri, caranya tentu saja via command prompt lalu ketik :

mysqld –defaults-file=”C:\Program Files\MySQL\MySQL Server 5.0\my.ini” –standalone –console

Dengan ini maka my.ini configuration file akan dicheck mana settings config yang hilang / kurang untuk dapat menormalkan kembali saat MySQL dijalankan.

#Case 04 : Port Conflict

Port conflict jarang terjadi, namun ada apps lain yang menggunakan port serupa dengan port bawaan MySQL / MariaDB. Misalkan sebelumnya 3306, maka hal ini pasti akan bertubrukan!

Kita bisa memeriksa ketersediaan port di command prompt dengan mengetikkan command :

netstat -aon

Setelah itu akan muncul sederet angka ip-address:<Port-Terpakai>.

Jika hal ini sudah muncul, maka gunakanlah nomor port lain yang tidak tersedia dalam daftar tersebut. Karena kalau masih menggunakan nomor yg sama, maka port itu akan conflict lagi.

Buka file my.ini dalam konfigurasi MySQL, lalu gunakan port terbaru:

Save dan jalankan MySQL seperti sediakala!

#Case 05 : Network Service Permission

Untuk pengguna Windows OS, baik Windows 10, 11 hingga Win.Server. Perlu menggunakan permission yang sesuai. Jika tidak maka file writing akan terblock. Untuk itu lakukan:

• Buka mysql\data folder
• Lalu klik kanan Properties | Security | Advanced | Change Permissions | Add
• Tambahkan nama : NETWORK SERVICES
• Klik Check Names | OK
• Aktifkan Full Control (Allow).

Ok, lalu jalankan MySQL seperti biasa.

#Case 06 : Bonus Case -Storage Engine-

File Corrupt saat menggunakan MySQL / MariaDB dengan menggunakan InnoDB / MyISAM. Apakah keterkaitannya? Saat Windows dihadapkan dengan dua jenis storage engine ini. Maka kita harus memperbesar ukuran caching nya. Sejatinya hal ini dilakukan agar proses tidak putus tengah jalan yang menyebabkan crashed berkepanjangan.

Untuk DB yang menggunakan MyISAM wajib execution code ini di MySQL Query :

SELECT CONCAT(ROUND(KBS/POWER(1024,
IF(PowerOf1024<0,0,IF(PowerOf1024>3,0,PowerOf1024)))+0.4999),
SUBSTR(' KMG',IF(PowerOf1024<0,0,
IF(PowerOf1024>3,0,PowerOf1024))+1,1))
recommended_key_buffer_size FROM
(SELECT LEAST(POWER(2,32),KBS1) KBS
FROM (SELECT SUM(index_length) KBS1
FROM information_schema.tables
WHERE engine='MyISAM' AND
table_schema NOT IN ('information_schema','mysql')) AA ) A,
(SELECT 2 PowerOf1024) B;

Adapun untuk DB yang menggunakan InnoDB maka gunakanlah Query berikut ini :

SELECT CONCAT(ROUND(KBS/POWER(1024,
IF(PowerOf1024<0,0,IF(PowerOf1024>3,0,PowerOf1024)))+0.49999),
SUBSTR(' KMG',IF(PowerOf1024<0,0,
IF(PowerOf1024>3,0,PowerOf1024))+1,1)) recommended_innodb_buffer_pool_size
FROM (SELECT SUM(data_length+index_length) KBS FROM information_schema.tables
WHERE engine='InnoDB') A,
(SELECT 2 PowerOf1024) B;

Nah sekian! Jika masih ada kendala lainnya, segera tangani dengan menggunakan backup berkala untuk antisipasi lainnya dan hubungi kami langsung!