Barcode Scanner Qr Code dengan Cordova

Ok, kali ini saya coba lanjutkan App mobile yg kemarin, yaa menambahkan plugin scanner barcode untuk menambah kawan, seperti gini

Screenshot_2016-01-30-10-49-03

saat lakukan scanner tambah kawan pada kartu NIS siswa yang ada barcodenya,

Screenshot_2016-01-30-10-42-58

hasilnya

Screenshot_2016-01-30-10-43-43

sesuai dalam tabel siswa, sebelumnya saya tambahkan kolom nope🙂

Capture

plugin yang saya pake dari sini

https://github.com/wildabeast/BarcodeScanner

OK berikut sintax yang saya tambahkan di addkawan.html


<form id="formkawan">
<div data-role="fieldcontain" >
<div class="box">

//Add tombol scanner qr code
<button id="startScan">Add Kawan Via QR Code</button>
</div>

<div class="box">
<input type="hidden" name="id" id="id" value="" data-clear-btn="true" placeholder="Type your text here..." />
<input type="hidden" name="kode" id="kode" value="" data-clear-btn="true" placeholder="Type your text here..." />
<input type="text" name="kode_kawan" id="kode_kawan" value="" data-clear-btn="true" placeholder="Isi Nis Kawan..." />
<input type="text" name="nama" id="nama" value="" placeholder="Isi Nama Kawan..." />
<input type="text" name="alamat" id="alamat" value="" data-clear-btn="true" placeholder="Isi Alamat Kawan..." />
<input type="text" name="nope" id="nope" value="" data-clear-btn="true" placeholder="Isi Nope / Email / Pin BB/ WA / Line Kawan..." />
</div>
</div>
<div class="box">
<a href="#" id="create" class="ui-btn ui-btn-raised clr-primary">Tambah</a>
</div>
</form>

dan pada folder js ada file app.js

tambahkan tag script app.js di addteman.html


<script type="text/javascript" src="js/app.js"></script>

script app.js nya


$.ajax({
url: "http://192.168.43.46/basic/web/index.php?r=siswa/cari",
method : "POST",
data : {kode:kode},
dataType: "json",
success: function(parsed_json) {
$.each(parsed_json, function(i,item){

var kode_kawan=item.kode_siswa;
var nama=item.nama;
var alamat=item.alamat;
var nope=item.nope;
$("#kode_kawan").val(kode_kawan);
$("#nama").val(nama);
$("#alamat").val(alamat);
$("#nope").val(nope);
});
$.mobile.loading("hide");
// $('#formkawan').form('refresh');
document.getElementById("formkawan").reload();
},
timeout: 30000,
error:function(xhr, status, error) {
alert(xhr.responseText);
alert("Periksa Kembali Koneksi Internet Anda, Closing Application...");
navigator.app.exitApp();
}
});

dan untuk URL nya kita tambahkan actionCari di controller siswa


public function actionCari(){
$request= \Yii::$app->request;
$kode=$request->post('kode','');
$sql="select * from siswa where kode_siswa=:kode";
$conn= \Yii::$app->db;
$cmd=$conn->createCommand($sql);
$cmd->bindParam(':kode', $kode);
$models=$cmd->queryAll();
\Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
return $models;
}

bingung hehe, ni saya  kasih ntuk lengkapnya bisa copot disini

http://www.mediafire.com/download/kman0r9w9hr6n79/Yii2basic_cordova.rar

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: