Membuat Form Input Nomor HP dengan Logo Operator (HTML, CSS, Javascript)

Rabu, 10 Januari 2018


Membuat Form Input Nomor HP dengan Logo Operator (HTML, CSS, Javascript)

Hallo programmer, kenapa anda mengunjungi blog ini tentunya mencari sesuatu. Saat saya menulis artikel ini tugas kuliah lagi gila-gilanya hampir ga ada waktu lagi untuk ngurusin blog ini, karena ke banyakan tugasnya memerlukan waktu banyak dan cukup menguras otak.

Baiklah sesuai judulnya kali ini saya akan berbagi source code input nomor operator khususnya operator di Indonesia, source code ini saya susun waktu tidak ada kerjaan waktu libur kuliah beberapa bulan yang lalu, daripada nanti bisa hilang dan ga ada gunanya lebih baik sobat gunakan untuk keperluan project sobat masing-masing.

Dari sisi algoritma saya tidak yakin bahwa ini adalah algoritma yang paling cepat, karena pada source code javascriptnya terlalu banyak perulangannya, tetapi dilihat dari sisi bahasa pemograman javascript, yang dijalankan di sisi client(komputer pengguna), maka dampaknya tidak akan terlalu besar apalagi melihat gadget sekarang ini yang semakin murah, tetapi berbanding terbalik dengan spesifikasinya yang semakin meningkat.



Selanjutnya saatnya membahas source codenya lebih detail, source code yang akan kita bahas adalah di khususkan pada  javascript saja, karena memang javascript lah yang paling banyak berperan dan paling banyak source codenya.

Data Array Nomor Operator
var telkomsel = ["0812","0813","0821","0822","0852","0853","0823","0851"];
var indosat=["0814","0815","0816","0855","0856","0857","0858"];
var three=["0895","0896","0897","0898","0899"];
var smartfren=["0881","0882","0883","0884","0885","0886","0887","0888","0889"];
var xl=["0817","0818","0819","0859","0877","0878"];
var axis=["0838","0831","0832","0833"];

Kode diatas berfungsi untuk mendeklarasikan nomor operator yang akan digunakan, tujuannya adalah sebagai penanda/indikator menampilkan gambar operator dan proses validasi kebenaran dari nomor yang diinputkan, sobat bisa menambahkan sendiri operator baru atau list nomor baru.

Pencarian Nomor di Dalam Array
a=indosat.length;
 b=0;
 while(b<a&&kondisi){
        if(indosat[b]==t){
   $('.notelp').css({"background-image":"url(gambar/indosat.png)"});
   kondisi=false;
   }
 ++b;
 }
Inilah yang menurut saya algoritma yang kurang efektif, untuk menemukan nomornya program harus menghitung panjangnya array yang kita buat sebelumnya lalu mencari satu persatu dengan menelusuri setiap isi indeks arraynya.

Fungsi Input Hanya Angka
function isNumberKey(evt)
  {
var kodeASCII = (evt.which) ? evt.which : event.keyCode
   if (kodeASCII > 31 && (kodeASCII < 48 || kodeASCII > 57)){
return false;
           }
return true;
 }
Seperti namanya fungsi ini akan mencegah pengguna untuk menginputkan huruf dan karakter-karakter yang tidak diinginkan kecuali angka, fungsi ini merupakan fitur yang baru ditambahan saat ingin membuat postingan ini, dan source codenya saya dapatkan di situs MalasNgoding.com, jadi kalau ingin lebih mengetahui fungsi input hanya angka ini secara lengkap langsung saja kesumbernya.

Fungsi Matikan Tombol
function blocktombol(){
    $('.tombol').prop("disabled", true);
}
function bukablocktombol(){
    $('.tombol').prop("disabled", false);

}
Suatu fungsi yang termasuk opsional, tetapi teknik sederhana yang cukup mempersulit orang-orang iseng mengirimkan data nomor yang tidak sesuai. Mekanismennya tombol "Kirim" tidak akan bisa di klik jika salah menginputkan nomor, atau memang sengaja disalahkan, untuk membuka tombol "Kirim" ya tinggal nomornya dibenarkan saja.

Fungsi Menghilangkan Gambar Operator
function gambaroperatorhilang(){
    $('.notelp').css({"background-image":"url()"});
}
Berfungsi pada kondisi saat inputan pertama benar tetapi inputan selanjutnya salah, maka jika salah logo operator yang tadinya ada harus dihilangkan dengan memanggil fungsi ini.

Selanjutnya sobat bisa mencoba demo program input nomor operator di bawah ini.

Demo Input Nomor HP



Itulah beberapa penjelasan fungsi penting yang ada di source code ini, INGAT! diatas belum menjelaskan htmlnya dan cssnya loh, karena tanpa html script javascript tidak akan bisa berfungsi dan tanpa css tampilannya tidak akan sebagus yang terlihat di demo diatas. untuk source code selengkapnya sobat bisa lihat di github saya, sangat singkat dan pasti bisa dipahami sendiri.

Tidak ada komentar:

Posting Komentar

Berkomentarlah sesuai dengan isi artikel, no iklan.