Membuat AutoComplete Suggest Box menggunakan PHP dan MySQL


Latar Belakang

Saat saya membuat sebuah web (E-Accounting) ada sebuah “kasus” dimana dalam sebuah form, terkadang ada sebuah inputan yang nilainya tidak boleh sembarangan diinput oleh user. dalam kasus ini adalah input nomor rekening (nomor perkiraan).

Alur Program

  1. User menginput angka pertama misalnya 11 pada nomor rekening.
  2. Aplikasi akan memunculkan sebuah suggest yang menampilkan pilihan nomor rekening yang akan digunakan.
  3. Nomor rekening yang muncul mulai 111.01 sampai dengan 114.01 sesuai dengan data yang ada didalam database.
  4. User memilih salah satu yang nomor rekening.
  5. Hasil akhir dari aplikasi ini, nomor rekening dan nama rekening yang dipilih akan ditampilkan atau dipindahkan nilainya ke dalam form.
  6. selesai.

Sumber Data

Data yang ditampilkan dalam suggest diambil dari sebuah database.

auto_complete_DB

  • Database yang digunakan adalah : auto_complete_DB
  • Tabel yang digunakan adalah : tabel_master
  • Konfigurasi Database ada di file : autosuggest.php

Potongan script autosuggest.php

<?php
$db = new mysqli(‘localhost’, ‘root’ ,”, ‘auto_complete_DB’);
if(!$db) {
echo ‘Could not connect to the database.’;
} else {
if(isset($_POST[‘queryString’])) {
$queryString = $db->real_escape_string($_POST[‘queryString’]);

if(strlen($queryString) >0) {
$query = $db->query(“SELECT nama_rekening,kode_rekening FROM tabel_master WHERE kode_rekening LIKE ‘$queryString%'”);

if($query) {
echo ‘<ul>’;
while ($result = $query ->fetch_object()) {
echo ‘<li onClick=”fill(\”.addslashes($result->nama_rekening).’\’); fill2(\”.addslashes($result->kode_rekening).’\’);”>’.$result->kode_rekening.’&nbsp;&nbsp;’.$result->nama_rekening.'</li>‘;
}
echo ‘</ul>’;
} else {
echo ‘OOPS we had a problem :(‘;
}} else {
// do nothing
}} else {
echo ‘There should be no direct access to this script!’;
}}
?>

Dalam aplikasi suggest logikanya seperti pencarian dengan menggunakan kata kunci. jika anda ingin mengubah aplikasi ini sesuai dengan kebutuhan anda yang harus anda ubah adalah :

  • Ubah Query nya $query = $db->query(“SELECT nama_rekening,kode_rekening FROM tabel_master WHERE kode_rekening LIKE ‘$queryString%‘”);
  • Gunakan fungsi fill untuk mengkap nilai database dan menampilkan nilai field nya. fill(\”.addslashes($result->nama_rekening).’\’)
  • Jika ada field yang ingin ditampilkan lagi, buat fungsi fill ke dua yaitu fill2(\”.addslashes($result->kode_rekening) jangan lupa untuk memisahkan fungsi fill yang pertama dengan yang kedua memakan tanda koma (;).

Potongan script index.php (form inputan)

script yang harus ada dalam file index.php adalah script CSS yang tidak perlu di ubah :

<style>
#result {
height:20px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
padding:5px;
margin-bottom:10px;
background-color:#FFFF99;
}
#country{
padding:3px;
border:1px #CCC solid;
font-size:12px;
}
.suggestionsBox {
position: absolute;
left: 0px;
top:40px;
margin: 26px 0px 0px 0px;
width: 200px;
padding:0px;
background-color:#999999;
border-top: 3px solid #999999;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList ul li {
list-style:none;
margin: 0px;
padding: 6px;
border-bottom:1px dotted #666;
cursor: pointer;
}
.suggestionList ul li:hover {
background-color: #FC3;
color:#000;
}
ul {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFF;
padding:0;
margin:0;
}.load{
background-image:url(loader.gif);
background-position:right;
background-repeat:no-repeat;
}#suggest {
position:relative;
}
</style>

script javascript yang perlu diubah :

http://jquery.js

function suggest(inputString){
if(inputString.length == 0) {
$(‘#suggestions’).fadeOut();
} else {
$(‘#country’).addClass(‘load’);
$.post(“autosuggest.php”, {queryString: “”+inputString+””}, function(data){
if(data.length >0) {
$(‘#suggestions’).fadeIn();
$(‘#suggestionsList’).html(data);
$(‘#country’).removeClass(‘load’);
}
});
}
}

function fill(thisValue) {
$(‘#nama’).val(thisValue);
setTimeout(“$(‘#suggestions’).fadeOut();”, 100);
}

function fill2(thisValue) {
$(‘#kode’).val(thisValue);
setTimeout(“$(‘#suggestions’).fadeOut();”, 100);
}

pada script javascript diatas terdapat dua fungsi fill yang pertama untuk menampilkan nama perkiraan, sedangkan yang kedua untuk menampilkan kode rekeningnya.

Script untuk memanggil fungsi

“fill2();” id=”kode” size=”15″/>

Download Script

http://www.4shared.com/file/44Hy-umj/suggest_autocomplete.html

Sekian tutorial dari saya semoga dapat bermanfaat untuk teman-teman dan anda semu 🙂

Depok, 07-12-2010

noname

Advertisements

Update, Delete Data di Oracle dengan PHP


Jika sudah mengetahui fungsi-fungsi dasar yang digunakan dalam oracle-php, saya pikir tidak jauh berbeda dengan membuat web dengan menggunakan mysql-php. yang membedakan hanya DBMS(Database Management System) yang dipakai saja yang berbeda serta syntax fungsi-fungsi dasar yang juga tidak jauh berbeda.

Seperti dalam MySQL terdapat fungsi koneksi mysql_connect, dalam Oracle terdapat oci_pconnect. atau dalam MySQL terdapat mysql_num_rows, dalam Oracle terdapat oci_num_rows. dan seterusnya. bisa anda lihat pada manual Oracle-PHP.

Untuk melengkapi aplikasi web sederhana saya tentang bukutamu, dalam artikel ini saya menjelaskan sisi admin untuk update dan delete data buku tamu yang ada didalam database oracle.

Coding Koneksi

<?php
$user=”hr”;
$password=”hr”;
$host_db=”//localhost/XE”;

//fungsi untuk koneksi
$conn= oci_pconnect($user,$password,$host_db);

if(!$conn){
echo “Gagal Koneksi”;
}else{
//echo “Berhasil Koneksi”;
}
?>

Coding Delete

<?php
//ambil file koneksi
include “conn.php”;

//tangkap parameter
$id=ucwords(htmlentities($_GET[‘id’]));

//untuk query
$query=oci_parse($conn, “delete from BUKUTAMU where ID=’$id'”);

//untuk menjalankan query
if(oci_execute($query)){
?>document.location.href=”index.php”<?php
}else{
echo “Gagal Delete!”;

//untuk menampilkan kesalahan
$e = oci_error();
trigger_error(htmlentities($e[‘message’]), E_USER_ERROR);
}
?>

Coding Update

<?php
//ambil file koneksi
include “conn.php”;

if(isset($_POST[‘simpan’])){
//tangkap parameter
$id=ucwords(htmlentities($_POST[‘id’]));
$nama=ucwords(htmlentities($_POST[‘nama’]));
$alamat=ucwords(htmlentities($_POST[‘alamat’]));
$pesan=ucwords(htmlentities($_POST[‘pesan’]));

//untuk query
$query=oci_parse($conn, “update BUKUTAMU set NAMA=’$nama’,ALAMAT=’$alamat’,PESAN=’$pesan’ where ID=’$id'”);

//untuk menjalankan query
if(oci_execute($query)){
?>document.location.href=”index.php”<?php
}else{
echo “Gagal disimpan!”;

//untuk menampilkan kesalahan
$e = oci_error();
trigger_error(htmlentities($e[‘message’]), E_USER_ERROR);
}

}else{
unset($_POST[‘simpan’]);
}
?>

Bisa dilihat dalam 3 coding diatas, algoritmanya sama ketika kita membuat aplikasi bukutamu menggunakan database mysql. yang membedakan adalah penggunaan fungsi oci_pconnect, oci_parse, oci_execute, dan trigger_error.

Download

http://www.4shared.com/file/T4k2Pv7t/admin-bukutamu-oracle.html

Depok, 29-11-2010

KangAgus

Menampilkan data Oracle di PHP



Spesifikasi Software

Dalam belajar web menggunakan database oracle dan PHP saya menggunakan spesifikasi software dan seting sebagai berikut :

  • Menggunakan software XAMPP 1.7 untuk menjalankan PHP
  • Menggunakan software Oracle 10g Express Edition
  • Menggunakan Database user : HR
  • Password Default : hr

Persiapan

Artikel ini membahas tentang menampilkan isi table yang ada didalam database oracle. aplikasi yang dibuat terdapat 3 file yaitu file conn.php, view.php, database.txt, dan style.css. adapun keteranganya adalah sebagai berikut :

  • Conn.php digunakan untuk melakukan koneksi Oracle-PHP.
  • View.php digunakan untuk menampilkan data.
  • Database.txt berisi query membuat table. silahkan copy paste scriptnya di menu SQL Command
  • Style.css digunakan untuk manipulasi tampilan table di web.

Database

Setelah table bukutamu berhasil dibuat, silahkan input data awalnya terserah anda.

Data didalam Oracle

Data didalam Web PHP

 

Download

http://www.4shared.com/get/lC0l2kcN/view-oracle.html

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Depok, 27-11-2010

KangAgus

 

Aplikasi Pencarian Data dengan JAVA


Aplikasi ini digunakan untuk pencarian data dalam sebuah database. event yang digunakan adalah keyReleased pada jTextField yang berfungsi ketika ada inputan, program akan menjalankan proses pencarian sesuai dengan inputan yang dijadikan sebagai kata kunci.

Sedangkan yang bisa teman-teman pelajari dari aplikasi ini adalah :

  • Join table, karena tabel yang ditampilkan pada aplikasi merupakan hasil join atau gabungan dari beberapa tabel di database.
  • Query pencarian dengan range tanggal menggunakan fungsi Between di MySQL. Sehingga akan mencari data dari tanggal pertama sampai dengan tanggal kedua.
  • Query pencarian dengan fungsi Like. Sehingga akan mencari data yang mirip dengan kata kunci baik diawal kata maupun di akhir kata kunci.

Query Between

String sql=”select kd_laporan, tanggal, total_transaksi, nama from laporan lap, pelanggan pel where lap.kd_pelanggan=pel.kd_pelanggan and tanggal between ‘”+tanggal_dari.getText()+”‘ and ‘”+tanggal_sampai.getText()+”‘ order by kd_laporan asc”;

Query Like

String sql=”select kd_laporan, tanggal, total_transaksi, nama from laporan lap, pelanggan pel where lap.kd_pelanggan=pel.kd_pelanggan and tanggal like ‘%”+tanggal_dari.getText()+”%’ order by kd_laporan asc”;

Download Sourcecode :

https://blogri32.blogspot.co.id/2017/12/free-downloads.html

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Depok, 25-11-2010

KangAgus

Menampilkan data hasil Join table


Latar Belakang :

Dalam database terdapat banyak tabel yang saling ber relasi.  dalam aplikasi ini akan menampilkan data dari 4 table kedalam 1 tabel di Java.

Database :

Tabel Barang

Tabel Kasir

Tabel Pelanggan

Tabel Transaksi

Query :

SELECT nama_pelanggan,kd_transaksi,nama_barang, harga_satuan, jumlah, total,nama FROM pelanggan pl, transaksi tr, barang br,kasir ks WHERE pl.kd_pelanggan=tr.kd_pelanggan AND tr.kd_barang=br.kd_barang AND ks.kd_kasir=tr.kd_kasir AND kd_laporan=’1′”

Potongan Script JAVA :

//untuk menampilkan di table
try{
String sql=”select nama_pelanggan,kd_transaksi,nama_barang, harga_satuan, jumlah, total,nama from pelanggan pl, transaksi tr, barang br,kasir ks where pl.kd_pelanggan=tr.kd_pelanggan AND tr.kd_barang=br.kd_barang AND ks.kd_kasir=tr.kd_kasir AND kd_laporan=’1′”;
java.sql.Statement stmt=conn.createStatement();
java.sql.ResultSet rslt=stmt.executeQuery(sql);

while(rslt.next()){
String nama_pelanggan=rslt.getString(“nama_pelanggan“);
String kd_transaksi=rslt.getString(“kd_transaksi“);
String namabarang=rslt.getString(“nama_barang“);
String hargasatuan=rslt.getString(“harga_satuan“);
String jumlah=rslt.getString(“jumlah“);
String total=rslt.getString(“total“);
String kasir=rslt.getString(“nama“);

String[] dataField={nama_pelanggan,kd_transaksi,namabarang,hargasatuan,jumlah,total,kasir};
DftTabMode2.addRow(dataField);
}
}catch(Exception ex){}

Download Sourcecode :

https://blogri32.blogspot.co.id/2017/12/free-downloads.html

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Karawang, 15-11-2010

KangAgus

Konversi tipe data di Java


Konversi format data bisa digunakan misalnya untuk mengubah dari tipe data string menjadi integer ataupun sebaliknya.

  • Untuk mengubah dari string ke integer : Integer.valueOf(bilangan1.getText()
  • Untuk mengubah dari integer ke string : String.valueOf(jumlah_bil)

Contoh aplikasinya adalah kalkulator penjumlahan. dimana bilangannya di ambil dari jTextfield yang berupa nilai string. Sebelum di jumlahkan, variable dari jTextfield harus di konversi dahulu kedalam format integer. setelah di jumlahkan, tipe data di ubah kembali dari integer menjadi string untuk di tampilkan lagi kedalam jLabel.

Potongan Script :

Integer bil_satu = Integer.valueOf(bilangan1.getText());
Integer bil_dua = Integer.valueOf(bilangan2.getText());
int jumlah_bil = bil_satu + bil_dua;

String tampil_jumlah = String.valueOf(jumlah_bil);
jumlah.setText(tampil_jumlah);

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Karawang, 15-11-2010

KangAgus

Menampilkan data pada tabel di Java Netbeans


Pada artikel kali ini saya akan menjelaskan tentang aplikasi untukmenghapus  data. artikel ini merupakan artikel pecahan dari artikel sebelumnya. dalam membuat aplikasi baik web maupun desktop pada bagian admin pasti ada fasilitas untuk menampilkan data. tujuannya yaitu untuk memberikan informasi kepada user atau pengguna aplikasi.

Untuk tahap persiapan seperti membuat file koneksi, membuat database, dan menyiapkan file konektor, sampai membuat form berada di tengah layar  sudah saya bahas pada artikel sebelum-sebelumnya. dan saya asumsikan anda sudah mengerti semua, jadi saya tidak harus mulai dari awal tapi langsung ke inti programnya saya :)

Potongan Script

public void tampil_data(){
//panggil method koneksi
java.sql.Connection conn = new DBConnection().connect();

//dafinisikan field table
Object[] Baris={“ID”,”Nama”,”Tanggal Lahir”,”Alamat”};
DftTabMode=new DefaultTableModel(null,Baris);
jTable1.setModel(DftTabMode);

//querinya
try {
String sql = “Select * from biodata”;
java.sql.Statement stmt = conn.createStatement();
java.sql.ResultSet rslt = stmt.executeQuery(sql);
while (rslt.next()) {
String id = rslt.getString(“id”);
String nama = rslt.getString(“nama”);
String tanggal = rslt.getString(“tanggal”);
String alamat = rslt.getString(“alamat”);

//masukan masing-masing field ke table JAVA
String[] dataField = {id, nama, tanggal, alamat};
DftTabMode.addRow(dataField);
}
}catch(Exception e) {}
}

Download Sourcecode :

https://blogri32.blogspot.co.id/2017/12/free-downloads.html

Sekian artikel dari saya, semoga bermanfaat untuk teman-teman dan anda semua…aamiin

Karawang, 15-11-2010

KangAgus

%d bloggers like this: