Instalasi Vite + Vue 3 + Vant 3

 Vite sejak dirilis hingga sekarang menjadi rekomendasi dalam pembuatan aplikasi web khususnya menggunakan framework VueJs. 

Jasawebmedan sebagai pioner pembuatan website dan aplikasi berbasis web dan mobile di Medan sejak 2020 aktif menggunakan framework VueJS untuk penyelesaian project sehari-hari. 

Berikut ini langkah-langkah menginstal Vite + Vue di komputer lokal dan menggunakan Vant versi 3 sebagai framework untuk membangun user interfacenya.

1. Instalasi Vite + Vue

Vite membutuhkan node versi 12 keatas. Cek versi dari terminal dengan mengetikkan:

node -v

jika persyaratan memenuhi, ketikkan perintah

npm init [email protected] folder-kerja -- --template vue

setelah itu masuk ke folder-kerja, ketikkan

        cd folder-kerja

        npm install

2. Instalasi Vant 3

Kita lanjutkan menginstal framework user interface yang akan menghasilkan komponen-komponen siap pakai dengan tampilan yang menawan, hehehe.

npm i [email protected] -S

agar Vant bisa dikenali, kita perlu install vite-plugin-style-import

npm i vite-plugin-style-import -D

kemudian pada file vite.config.js, lakukan edit sebagai berikut

// vite.config.js import vue from '@vitejs/plugin-vue'; import styleImport from 'vite-plugin-style-import'; export default { plugins: [ vue(), styleImport({ libs: [ { libraryName: 'vant', esModule: true, resolveStyle: (name) => `vant/es/${name}/style`, }, ], }), ], };

Read More

Teknik Mudah Format Rupiah Dengan Vue/Javascript

Tim JasaWebMedan dalam 2 tahun belakangan ini menggunakan Vue sebagai javascript framework. Memformat number/angka ke format mata uang dalam hal ini rupiah merupakan hal yang rutin dilakukan saat mengerjakan proyek pesanan dari klien-klien. Dengan menggunakan Vue, rutinitas ini dapat lebih sederhana dikerjakan.

Teknis berikut ini melibatkan regex (regular expression), yang kita tidak akan bahas, ruwet pokoknya, hehehe. Kemudian sedikit pengetahuan javascript dan dibalut dalam framework Vue.

Kita mulai dengan mendefinisikan data secara sederhana yang akan diproses menggunakan properti watch

data(){
    return{
        //nilai ini menampung nilai dari sembarang input
        nilai:''
    }
},
watch:{
    nilai:function(){
        this.nilai = this.nilai.replace(/[^0-9]/g,'').replace(/(\d)(?=(\d{3})+(?!\d))/g,'$1.')
    }
}

Secara sederhana bisa dijelaskan bahwa kode replace(/[^0-9]/g,'') berfungsi memastikan bahwa nilai input harus dalam bentuk angka, jika terdapat huruf atau karakter non-numeric akan diabaikan.

Sedangkan fungsi replace(/(\d)(?=(\d{3})+(?!\d))/g,'$1.') akan memberikan format mata uang Rupiah pada nilai input.

Agar nilai format tadi tidak menimbulkan masalah di kemudian hari, pastikan mengembalikan format rupiah tadi menjadi format angka biasa sebelum dilakukan operasi penyimpanan ke database. Contohnya dengan fungsi replace sederhana sebagai berikut:

this.nilai = parseInt(this.nilai.replace('.',''))

Semoga bermanfaat. Jika ada pertanyaan silahkan gunakan kolom komentar di bawah ini.

JasaWebMedan sejak 2009 melayani pembuatan website, aplikasi mobile dan software berbasis web untuk Banda Aceh, kota Medan, Binjai, Siantar, Tebing Tinggi, Kisaran, Padang, Pekanbaru.

Read More

Cara Mudah Menginstal Gammu di Windows 7, Windows 8 dan Windows 10

JasaWebMedan sebagai penyedia layanan pembuatan dan penjualan SMS Gateway menggunakan Gammu sebagai SMS Engine. Gammu memang sudah digunakan secara luas untuk aplikasi SMS berbasis Web. Alasan kemudahan konfigurasi dan berlimpahnya tutorial jika terjadi masalah membuat Gammu menjadi pilihan mudah.

Berikut ini kami berbagi pengalaman menginstal Gammu di Windows 7, Windows 8 dan Windows 10. Semoga bermanfaat.

Persiapan

1. Modem USB dengan driver sudah terinstal.
   Jika menggunakan modem Wavecom, dowload drivernya disini
2. Xampp terbaru, download disini
   Saat artikel ini ditulis, XAMPP hanya menawarkan PHP Versi 7, kami belum mencobanya. Kami lebih merekomendasikan PHP Versi 5.6 untuk memastikan kompatibilitas.
   Alternatif lain Anda bisa menggunakan WAMP yang masih menawarkan penggunaan PHP Versi 5.6
3. Gammu 1.32.0 download disini
   Saat artikel ini ditulis, Gammu sudah mencapai versi 1.38.x namun kami memilih menggunakan versi 1.32.0 dengan pertimbangan:
   • Dukungan koneksi ke MySql secara langsung. Mulai versi 1.33.0, Gammu hanya mengijinkan akses ke MySql melalui ODBC. Baca langkah instalasi Gammu 1.33.0 keatas disini
   • Tersedia versi Zip yang bisa diinstal/ekstrak di drive mana saja. Kami tidak merekomendasikan instalasi Gammu di drive C:\ untuk menghindari setting yang hilang karena komputer harus di instal ulang. Kami selalu instal di drive D:\ atau E:
4. Notepad++ (opsional) untuk keperluan edit file konfigurasi Gammu. Download disini
5. Koneksi internet (opsional)

1. Cari port modem

Langkah pertama adalah mencari di port mana modem ditancapkan. Untuk mengetahuinya, buka Device Manager (buka Windows Explorer, klik kanan pada Computer, pilih Properties, klik Device Manager).
Cari tulisan Modems (jika menggunakan Modem USB) atau Prolific USB-to-Serial Comm (jika menggunakan Modem Wavecom) seperti gambar dibawah.

 

Jika menggunakan Modem USB, klik kanan Modems, pilih Properties, klik tab Port. Maka akan terlihat pada port berapa Modem USB tercolok.

2. Instalasi Gammu

Ekstrak file Gammu tadi ke drive D:\ (atau drive selain C:\), kemudian sederhanakan nama folder menjadi Gammu saja. Setelah itu copy 2 file konfigurasi gammu dari folder

D:\Gammu\share\doc\gammu\examples ke folder D:\Gammu\bin

Kedua file konfigurasi tersebut adalah gammurc dan smsdr, hapus semua isi kedua file tersebut dan ganti dengan konfigurasi dibawah ini:

Setting file gammurc

Lakukan testing koneksi dari gammu ke modem

Buka Command Prompt dengan hak Administrator, seperti gambar berikut:

Klik kanan pada icon Command Prompt

kemudian masuk ke folder bin dengan mengetikkan:

1. Ketik D:\ <enter>
2. Ketik cd Gammu\bin <enter>
3. Ketik gammu identify <enter> 

Jika tidak beruntung, Anda akan mendapati error seperti ini:

Error missing file pada instalasi Gammu

jika terjadi hal mirip seperti diatas, jangan panik. Dalam hal ini cari file msvcr71.dll sesuai versi windows dari google kemudian copy file tersebut ke folder

• C:\Windows\system32 (Windows 32 bit)
• C:\Windows\Wow64 (Windows 64 bit)

Setelah itu coba ulangi kembali ketik perintah gammu identify

Seharusnya kini modem sudah dideteksi oleh Gammu.

Pada tahap ini, jika tidak tidak ditemui error, maka Gammu sudah dapat mengirim SMS secara langsung menggunakan Command Line/Prompt. Ketikkan perintah berikut:

gammu sendsms TEXT 0812345xxxxxx -text "Testing sms..."
Ganti 08123xxxxxx sesuai dengan nomor tujuan.

Setup Database

Fungsi setup database adalah agar dapat memiliki akses lebih terhadap proses terima-kirim SMS. Untuk mengetahui SMS yang masuk dan status SMS yang terkirim akan sulit dilakukan tanpa kerjasama dengan database.

Setting file smsdrc

Catatan:

• Pada bagian device masukkan nomor port yang didapat dari langkah 1 sebelumnya
• Jangan hilangkan tanda : setelah nomor port
• Sesuaikan password_database dan nama_database dengan password dan nama database.
• Untuk tabel-tabel database bisa diimpor dari folder Gammu\share\doc\gammu\examples\sql

Instalasi Service Gammu

Langkah akhir adalah otomatisasi operasional gammu dengan mengaktifkan servicenya. Ketikkan perintah berikut di command prompt pada folder Gammu:

gammu-smsd -c smsdrc -i

Tekan enter, lalu:

gammu-smsd -c smsdrc -s

Selesai~

Sebagai tambahan, dari pengalaman kami di Windows 7, terkadang service tidak berjalan otomatis saat Windows boot. Solusinya dengan men-set service menjadi Automatic(delay).

Read More

Promo Terbatas Aplikasi Android Hanya Rp. 500 Ribu, Buruan!

Kabar gembira untuk masyarakat Medan dan sekitarnya. JasaWebMedan menawarkan aplikasi Android yang siap listing di Play Store hanya dengan menambahkan Rp 500 Ribu* dari harga paket pemesanan Toko Online dan Website MLM. Pemesanan berlaku hingga Akhir Oktober 2017. Segera hubungi via WA atau telpon ke 0852-9692-9820 untuk informasi lebih lanjut.

Sekilas Tentang Aplikasi Android

Sistem Operasi smartphone yang dikembangkan oleh Google dan komunitasnya ini terkenal dengan kemudahan pakai (user friendly). Hal ini menyebabkan semakin menjamurnya pengguna smartphone berbasis Android di seluruh dunia, termasuk Indonesia. Para developer aplikasi juga berlomba membuat program berbasis Android yang dengan ragam kegunaan. Dari Toko online hingga game. Program berbasis Android inilah yang disebut sebagai Aplikasi Android atau sering disingkat Apps. Apps ini memungkinkan aplikasi online tidak lagi bergantung dengan browser agar bisa beroperasi. Bisa dikatakan, ini adalah jamannya Apps.

Kesempatan Bagi Pebisnis

Pengguna smartphone Android yang merupakan mayoritas merupakan kesempatan bagi pebisnis untuk menawarkan produk. Tampilan mobile yang lebih sederhana dan menekankan fungsi memberi pilihan yang memudahkan bagi pembeli atau member dalam bertransaksi. Selain itu, memiliki Apps yang sesuai dengan bisnis akan menaikkan image produk dan usaha ke arah modern dan upto date.

Tingginya permintaan untuk pembuatan Apps ini dipahami benar oleh JasaWebMedan sehingga memberikan penawaran super menarik dari sisi harga dan kelengkapan paket pemesanan Toko Online dan Website MLM. Sebagai perkenalan produk baru, kami membundle setiap pemesanan kedua paket produk tersebut dengan aplikasi Android dengan harga super murah. Cukup dengan menambah Rp. 500.000.

Syarat dan Ketentuan

Untuk paket promo ini, kami membatasi fungsi-fungsi yang serupa dengan versi onlinenya. Untuk penambahan fungsi khusus akan dikenakan biaya tambahan sesuai kebutuhan fitur.

Kami juga dapat menghentikan promo ini lebih cepat jika pesanan terlalu banyak, demi menjaga kepuasan pemesan awal. Jadi, pesan sekarang juga sebelum terlambat.

Read More

Mudah Mengirim Email Menggunakan PHPMailer

Sebagai Web Application Developer (settdah!), mengirimkan email dari script PHP adalah hal rutin yang dilakukan. PHP sendiri memiliki fungsi mail() yang siap pakai namun punya masalah klasik yaitu Email menyasar ke folder spam atau junk. Akibatnya informasi penting bisa luput dari perhatian pemilik email tujuan karena tidak ada notifikasi ke gadgetnya.

Kali ini kita akan menggunakan PHPMailer untuk pilihan pengiriman email yang lebih baik. PHPMailer merupakan kumpulan class PHP yang secara khusus menangani pengiriman email. Kelebihan utama yang sangat dirasakan manfaatnya oleh para programmer web adalah kemungkinan email dianggap spam jauh lebih kecil. Baiklah, cukup mukadimahnya, langsung ke inti, yuk mari!

Instalasi

Kita menggunakan PHPMailer versi 5.2 yang sudah teruji beberapa tahun belakangan paling banyak digunakan. Adapun versi terbaru PHPMailer saat artikel ini ditulis adalah Versi 6. Kami lebih memilih versi yang 5.2 dibanding versi 6 lebih karena Versi 6 harus diinstal menggunakan composer dimana kami yakin masih banyak programmer web yang enggan menggunakan composer dengan beragam alasan, kami termasuk golongan ini... ;)

1. Download versi PHPMailer versi 5.2 dari sini.
2. Pilih Download Zip
   
3. Ekstrak file zip ini kemudian pindahkan folder hasil ekstraksinya ke folder kerja, yaitu htdocs atau www

Contoh Penggunaan

<?php

$mail->isSMTP();

$mail->SMTPDebug = 0;
//Set the hostname of the mail server
$mail->Host = 'mail.serveranda.com';
//Set the SMTP port number - likely to be 25, 465 or 587
$mail->Port = 26;//kami menggunakan port standar - non safe
//Whether to use SMTP authentication
$mail->SMTPAuth = true;
//Username to use for SMTP authentication
$mail->Username = '[email protected]';
//Password to use for SMTP authentication
$mail->Password = 'passwordEmail';
//Set who the message is to be sent from
$mail->setFrom('[email protected]', 'Nama Pengirim');
//Set an alternative reply-to address
$mail->addReplyTo('[email protected]', 'QuinnFernanda System');
//Set who the message is to be sent to
$mail->addAddress('[email protected]', 'Nama Tujuan');
//Set the subject line
$mail->Subject = 'PHPMailer SMTP test';
$mail->isHTML(true);

$mail->Subject = "Judul Email";

$mail->Body = "Isi email - boleh HTML";

//send the message, check for errors
if (!$mail->send()) {
    echo 'Mailer Error: ' . $mail->ErrorInfo;
} else {
    echo 'Message sent!';
}

?>

Untuk contoh-contoh format email yang lebih kompleks seperti menggunakan SMTP milik gmail dapat dilihat di folder examples.

Error yang kadang muncul biasanya berkaitan dengan belum aktifnya modul openssl yang belum diaktifkan. Coba buka php.ini dan pastikan tanda # sudah dibuang di depan modul openssl.

Kami berhasil mengirimkan email tanpa masuk ke spam dengan menggunakan PHPMailer ini. Jadi ini merupakan solusi instan untuk saat ini.

Ada beberapa alternatif lain selain PHPMailer yang belum sempat kami coba seperti SwiftMailer, Zend_mail, eZcomponents dan sebagainya. Jadi, banyak jalan mengirim email tanpa masuk ke spam.

Read More

Cara Mengatasi Halaman Blank Pada Wordpress (White Screen of Death)

Halaman blank (kosong) pada Wordpress bisa menjadi masalah, khususnya bagi pemula. Anda tidak mendapatkan pesan error apapun pada halaman website sehingga semakin menyulitkan pencarian solusi bagi masalah ini. Umumnya hal ini terjadi sesaat setelah proses transfer website atau instalasi theme/plugin baru. Kondisi halaman putih kosong dikenal juga dengan White Screen of Death. Dengan penanganan yang tepat, masalah seperti ini sebenarnya relatif mudah diselesaikan.

Mengapa terjadi?

Penyebab halaman blank pada website berbasis Wordpress ada beberapa kemungkinan:

1. Versi PHP pada web server tidak sesuai kebutuhan website
2. Hak akses pada folder website tidak mencukupi
3. Theme yang tidak kompatibel
4. Plugin yang tidak kompatibel

 Untuk setiap kemungkinan diatas, akan diselesaikan menggunakan akses cPanel, karenanya pastikan Anda telah memiliki aksesnya.

Solusi 1. Pilih versi PHP terbaru

Pada hosting-hosting yang modern umumnya disediakan fitur untuk memilih versi PHP yang akan dijalankan.
Masuk ke cPanel website, dan klik pada menu Select PHP Version. Pilih versi PHP terbaru kemudian lihat apakah website sudah berjalan normal kembali.

Jika masalah halaman blank masih terjadi, coba turunkan versi PHP 1 tingkat. Lihat kembali apakah website sudah normal. Dari pengalaman kami, saat artikel ini ditulis, versi yang paling umum digunakan adalah PHP 5.6.

Jika pada cPanel tidak temukan menu tersebut, kemungkinan besar menggunakan nama menu lain, seperti PHP Config, PHP Setting dan sejenisnya.

Solusi 2. Hak Akses Folder

Hak akses folder juga bisa jadi salah satu penyebab WSoD, untuk itu perlu dipastikan bahwa folder dimana website diletakkan memiliki nilai yang tepat. Dari pengalaman kami, level hak akses yang paling cocok adalah 755. Berikut ini cara mengubah akses folder website paling sederhana menggunakan fitur file manager pada cpanel :

Langkah 1

Langkah 2

Read More

Pentingnya Fitur Backup Pada Website

Satu hal yang sangat dihindari dari bisnis yang operasionalnya banyak bergantung pada website atau aplikasi berbasis website adalah kehilangan data. Data transaksi, laporan keuangan, informasi karyawan maupun data konsumen merupakan informasi penting yang sangat dijaga agar jangan sampai hilang. Disinilah akan terasa pentingnya fitur backup pada website maupun software. Fitur backup dapat meminimalkan resiko kehilangan data keseluruhan.

Ada beragam hal yang dapat mengakibatkan kehilangan data seperti:

1. Serangan hacker
2. Kesalahan internal
3. Masalah hardware

Semenjak awal berdirinya JasaWebMedan, kami sangat menyadari resiko fatal pada bisnis yang diakibatkan oleh kehilangan data. Karenanya, fitur backup data selalu disertakan pada setiap paket website dan software yang ditawarkan kepada setiap klien.


Adapun fitur backup yang diberikan meliputi:

1. Auto Backup yang ditangani oleh sistem secara otomatis pada rentang waktu yang ditentukan, semisal sehari sekali. Lokasi file backup terletak pada server online.
2. Backup Manual yang dapat dilakukan secara mandiri oleh klien JasaWebMedan sewaktu-waktu. Lokasi file backup dapat disesuaikan dengan permintaan klien, apakah pada server online atau secara offline (harddisk lokal atau Flashdisk)

Di JasaWebMedan, fitur backup diberikan secara GRATIS sebagai bagian layanan pembuatan website atau software. Hal ini dimaksudkan untuk memberikan garansi purna jual sehingga setiap klien merasa terlindungi dari resiko kehilangan data.

Jika terjadi  kehilangan data, klien dapat menghubungi JasaWebMedan agar melakukan restore data untuk mengembalikan data yang hilang. Pihak kami tidak mengenakan biaya apapun terkait proses restore data ini.

Read More