Didin Pe Blog

Rowspan Dinamis Ketika Menampilkan Data

didin — Sat, 21 Jan 2012 10:40:52 +0000

Membuat rowspan pada tabel adalah hal yang cukup mudah bagi yang sudah belajar html. Namun lain halnya jika data yang disajikan di tabel berasal dari database karena kita tidak tahu berapa besar rowspan-nya. Sekedar tambahan untuk yang belum tahu, rowspan artinya menggabungkan dua baris atau lebih (sesuai besarnya attribut rowspan) pada tabel. Sama halnya dengan fasilitas merge cells pada excel.

Sebagai contoh misalkan kita mempunyai tabel (pada database) yang berisi data fakultas dan jurusan. Dari data ini kita ingin menampilkan data jurusan dikelompokkan berdasarkan fakultasnya. Jadi misalnya terdapat lebih dari satu jurusan yang sama fakultasnya, maka otomatis kolom fakultas akan digabungkan sesuai jumlah jurusannya. Gambar berikut mungkin lebih bisa menjelaskan maksud dan tujuannya.

Ok untuk itu kita buat dulu tabelnya.

CREATE TABLE IF NOT EXISTS `tbfakultas` (
  `id` tinyint(3) UNSIGNED NOT NULL AUTO_INCREMENT,
  `fakultas` varchar(30) NOT NULL,
  `jurusan` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

Setelah itu jangan lupa isi datanya dengan catatan terdapat lebih dari satu jurusan yang fakultasnya sama. Atau sebagai latihan saya berikan sampel datanya sesuai dengan gambar diatas.

INSERT INTO `tbfakultas` (`id`, `fakultas`, `jurusan`) VALUES
(1, 'Teknik', 'Informatika'),
(2, 'MIPA', 'Matematika'),
(3, 'MIPA', 'Kimia'),
(4, 'Teknik', 'Sipil'),
(5, 'Teknik', 'Industri'),
(6, 'Pertanian', 'Perikanan');

Nah sekarang masuk ke intinya. Berikut script php untuk menampilkan data pada tabel dengan rowspan dinamis seperti ditunjukkan oleh gambar yang disebelah kanan.


mysql_connect('localhost','root','');
mysql_select_db('test');
$sql = mysql_query("SELECT A.*, (SELECT COUNT(fakultas) FROM tbfakultas WHERE fakultas=A.fakultas) AS
    jumlah FROM tbfakultas A ORDER BY A.fakultas");
$no = 1;
$jum = 1;
echo '';echo'';while($row=mysql_fetch_array($sql)){echo'';if($jum<=1){echo'';echo'';$jum=$row['jumlah'];$no++;}else{$jum=$jum-1;}echo'';echo'';}echo'
 No Fakultas Jurusan
    		    
     
       
         .$row['jumlah'].'">'.$no.'
         .$row['jumlah'].'">'.$row['fakultas'].'  
                 
                             
      
            
    
     '.$row['jurusan'].'			
     			           

 
';
?>

No	Fakultas	Jurusan
.$row['jumlah'].'">'.$no.'	.$row['jumlah'].'">'.$row['fakultas'].'	'.$row['jurusan'].'

Untuk koneksi databasenya sesuaikan dengan punya anda masing-masing. Pada contoh diatas saya menggunakan localhost dengan user root dan “test” sebagai nama database.

Ok sekian dulu untuk kali ini. Biarpun simpel tapi mudah-mudahan bisa bermanfaat.

JQuery Limitchar, Plugin Untuk Membatas Input Karakter di Textbox

didin — Fri, 19 Aug 2011 15:52:27 +0000

Kadang dalam sebuah form yang kita buat, terdapat beberapa field yang kita inginkan hanya bisa diinput dengan karakter tertentu saja. Misalnya dalam field untuk pengisian nominal uang atau untuk menyatakan jumlah hanya bisa diinput karakter bertipe numerik saja. Masalah ini sering saya alami setiap kali membuat program khususnya yang berbasis web. Maka dari itu saya buat saja plugin jQuery sederhana ini.

Penggunaan plugin ini sangat simpel, terdapat beberapa opsi yakni:

alpha, input string dari a..z, pilihannya true atau false, default true
numeric, input numeric, pilihannya true atau false, default true
space, input spasi, pilihannya true atau false, default true
charCase, input huruf kecil atau huruf besar, pilihannya lower, upper, both.
special, input karakter spesial. Untuk opsi ini, masukkan karakter spesial yang diperbolehkan.
event onError, yakni event ketika karakter yang diinput tidak sesuai kriteria.

Untuk lebih jelasnya perhatikan saja pada contoh penggunaannya dibawah ini.

<html>
<head>
<title>Limitchar jQuery plugin</title>
<script src="jquery.js"></script>
<script type="text/javascript" src="jquery.limitchar.js"></script>
<script type="text/javascript">
	$(function(){
	   // hanya input teks, uppercase
       $('.teks').limitchar({
            numeric: false,
            charCase: 'upper'
       });
 
 
       $('.numeric-field').limitchar({
            alpha: false,
            space: false,
            onError: function(c) {
                alert('Karakter "' + c + '" tidak dibolehkan!');
            }
       });
 
       // email field
       $('.email-field').limitchar({
            special: '@._-',
            space: false
       });
	});
</script>
</head>
<body>
    <p>
        <label>Hanya input teks, uppercase</label><br />
        <input type="text" class="teks" />
    </p>  
    <p>
        <label>Hanya input numerik, alert jika karakter salah</label><br />
        <input type="text" class="numeric-field" />
    </p>   
    <p>
        <label>Email field</label><br />
        <input type="text" class="email-field" />
    </p>
</body>
</html>

Ok mudah-mudahan plugin ini bisa membantu kawan-kawan semua. Jika ada bug atau error mohon masukannya.

Download plugin jquery.limitchar.js

Cara Cepat Validasi Input Di Delphi

didin — Wed, 15 Dec 2010 12:59:52 +0000

Kalo di posting sebelumnya saya sempat membahas tentang cara validasi form html dengan javascript, kali ini saya akan berbagi tentang cara validasi input di Delphi. Kenapa saya katakan cara cepat, karena dengan cara ini kita tidak perlu lagi mengetikkan script validasinya untuk tiap-tiap field. Untuk lebih jelasnya, sebagai contoh kita buat sebuah form dengan empat komponen Edit dan satu Button didalamnya. Misalnya dari keempat field tersebut ada tiga field yang wajib diisi. Ganti properti “tag” dari ketiga komponen Edit tersebut menjadi 1, dan yang lainnya biarkan tetap 0. Hal ini bertujuan untuk membedakan mana field yang wajib diisi dan mana yang tidak. Setelah itu ketikkan script dibawah ini. Fungsi inilah yang akan digunakan untuk validasi input ketika tombol submit di klik.

function inputKosong(frm:TForm):boolean;
var i: integer;
begin
  result:=false;
  with frm do begin
    for i:=0 to ComponentCount-1 do begin
      if (Components[i] is TEdit)and(Components[i].Tag = 1) then
        if TEdit(Components[i]).Text = '' then result:=true;
    end;
  end;
end;

Perhatikan pada fungsi diatas terdapat parameter “frm” yang bertipe “TForm”. Isikan nama form dimana field-field yang akan di-validasi untuk parameter ini. Sebagai contoh, tambahkan script berikut pada event “onClick” tombol submit anda.

procedure TForm1.Button1Click(Sender: TObject);
begin
 if inputKosong(self) then begin
  showmessage('Masih ada field yang kosong');
  exit;
 end;
 showmessage('Data disimpan');
end;

Pada contoh diatas, parameter “self” digunakan untuk validasi pada form itu sendiri. Contoh source codenya bisa di download disini.

Ok sekian dulu tips ringan dari saya kali ini. Selamat mencoba

Eksekusi Perintah DOS dan Mendapatkan Outputnya

didin — Mon, 25 Oct 2010 20:33:47 +0000

Eksekusi perintah DOS di Delphi, tips yang sudah lama saya cari-cari dan akhirnya ketemu juga. Thank’s untuk delphidabbler.com. Nah, sebagai rasa syukur saya, maka saya ingin berbagi tips tersebut kepada anda.

Pertama-tama, buat sebuah form dan tambahkan komponen Button, Edit dan Memo masing-masing satu. Jadi ceritanya kita memasukkan perintah DOS kedalam Editbox, kemudian tombol diklik, dan output dari perintah tersebut ditampilkan di Memo.Untuk itu kita perlu menambahkan fungsi berikut kedalam program:

function GetDosOutput(CommandLine: string; Work: string = 'C:\'): string;
var
  SA: TSecurityAttributes;
  SI: TStartupInfo;
  PI: TProcessInformation;
  StdOutPipeRead, StdOutPipeWrite: THandle;
  WasOK: Boolean;
  Buffer: array[0..255] of AnsiChar;
  BytesRead: Cardinal;
  WorkDir: string;
  Handle: Boolean;
begin
  Result := '';
  with SA do begin
    nLength := SizeOf(SA);
    bInheritHandle := True;
    lpSecurityDescriptor := nil;
  end;
  CreatePipe(StdOutPipeRead, StdOutPipeWrite, @SA, 0);
  try
    with SI do
    begin
      FillChar(SI, SizeOf(SI), 0);
      cb := SizeOf(SI);
      dwFlags := STARTF_USESHOWWINDOW or STARTF_USESTDHANDLES;
      wShowWindow := SW_HIDE;
      hStdInput := GetStdHandle(STD_INPUT_HANDLE); // don't redirect stdin
      hStdOutput := StdOutPipeWrite;
      hStdError := StdOutPipeWrite;
    end;
    WorkDir := Work;
    Handle := CreateProcess(nil, PChar('cmd.exe /C ' + CommandLine),
                            nil, nil, True, 0, nil,
                            PChar(WorkDir), SI, PI);
    CloseHandle(StdOutPipeWrite);
    if Handle then
      try
        repeat
          WasOK := ReadFile(StdOutPipeRead, Buffer, 255, BytesRead, nil);
          if BytesRead > 0 then
          begin
            Buffer[BytesRead] := #0;
            Result := Result + Buffer;
          end;
        until not WasOK or (BytesRead = 0);
        WaitForSingleObject(PI.hProcess, INFINITE);
      finally
        CloseHandle(PI.hThread);
        CloseHandle(PI.hProcess);
      end;
  finally
    CloseHandle(StdOutPipeRead);
  end;
end;

Kemudian tambahkan kode berikut pada event onclick Button1:

Memo1.Text:=GetDosOutput(Edit1.Text);

Untuk mengetesnya coba ketikkan perintah “help cd”. Jika sudah benar, hasilnya akan seperti gambar dibawah ini:

Source code yang sudah jadi bisa di download disini

Koneksi Ke Database Saat Run-Time

didin — Fri, 21 May 2010 08:40:22 +0000

Setelah sekian lama fakum, akhirnya saya punya kesempatan juga buat update blog ini. Kali ini saya ingin berbagi tentang cara koneksi ke database (Ms. Access) saat run-time pada pemrograman Delphi. Run-time artinya saat program dijalankan, bukan pada saat perancangan (design time). Keuntungannya program yang kita buat lebih dinamis dan kita bisa melakukan perubahan pada koneksinya saat program sedang berjalan.

Sebagai contoh buat sebuah database menggunakan Ms. Access tentunya, dan jangan lupa tambahkan beberapa sampel data didalamnya. Supaya lebih afdhol, tambahkan password pada database tersebut. Setelah itu buka Delphi anda dan buat sebuah palikasi baru. Pastikan anda menyimpan programnya satu folder dengan database. Untuk koneksi ke databasenya, kita akan menggunakan ADO. Tambahkan komponen-komponen dibawah ini pada form anda. Yang didalam tanda kurung adalah nama tab dimana komponen tersebut berada.

ADOConnections (ADO)
ADOTable (ADO)
DataSource (Data Access)
DBGrid (Data Controls)

Properti ‘name’ dari masing-masing komponen tidak perlu diganti, biarkan saja nama defaultnya. Arahkan properti ‘Connection’ dari ADOTable1 ke ‘ADOConnections1′, kemudian untuk komponen DataSource1 pilih ADOTable1 pada properti ‘DataSet’ dan untuk DBGrid1 pilih DataSource1 pada properti ‘DataSource’. Nah sekarang semua komponen sudah saling terhubung, tapi kok datanya belum muncul pada DBGrid? Ya memang begitu karena kita belum mengkoneksikannya dengan database. Koneksi baru akan dilakukan saat program dijalankan. Untuk itu tambahkan script berikut pada event ‘OnCreate’ form anda

procedure TForm1.FormCreate(Sender: TObject);
const
 namadb = 'data.mdb';
 passdb = 'didinjo.web.id';
 tabel  = 'tb_barang';
begin
  ADOConnection1.ConnectionString :=
  'Provider=Microsoft.Jet.OLEDB.4.0;' +
  'Data Source=' + ExtractFilePath(application.ExeName) + namadb + ';' +
  'Persist Security Info=False;' +
  'Jet OLEDB:Database Password=' + passdb;
  ADOConnection1.LoginPrompt:=false;
  ADOConnection1.Connected := True;
  ADOTable1.TableName:=tabel;
  ADOTable1.Active:=true;
end;

Perhatikan pada script diatas terdapat 3 konstanta masing-masing ‘namadb’ adalah nama database anda, ‘passdb’ adalah password database, dan ‘tabel’ adalah nama tabel yang ada di database. Jadi anda perlu merubah nilainya sesuai dengan database anda.

Karena lokasi database berada satu folder dengan program, maka pada bagian data source tambahkan fungsi 'ExtractFilePath(application.ExeName)' untuk menghasilkan path dari file exe program berada. Dengan begitu dimanapun program diletakkan asalkan berada satu folder dengan databasenya maka koneksinya akan tetap mengarah ke database tersebut.

Coba jalankan program anda. Jika data yang ada dalam database muncul pada DBGrid berarti anda berhasil…
Source code-nya bisa di download disini