Rabu, 24 Agustus 2011

Menampilkan data Multi Kolom PHP

15.09 alie 2 comments
Buatlah tabel dengan nama tbl_barang
buatlah file dengan nama barang.php
copy kode dibawah ini
<table width="100%" border="0">
  <?php
        $kolom=2;
        $i=0;
        $no=1;
        $qry=mysql_query("select*from tbl_barang");
        $jml_baris=mysql_num_rows($qry);
        while($data=mysql_fetch_array($qry)){
            if($i % $kolom == 0)//sisa bagi operator modulus
            {
                ?><tr><?php
            }
            ?>  
            <td valign="top"><?=$no;?></td>
            <td valign="top">
              <img src="admin/images/barang/<?php echo $data["gambar"];?>" width="50" height="50" border="0" /><br /> 
        <?php echo $data["nama_barang"];?> <br /> 
                Harga : <?php echo $data["harga"];?> <br />
                Stok : <?php echo $data["stok"];?> <br />
                <a href="#">Beli</a>
            </td>
            <?php
            //--meletakkan </tr> terakhir
            if(($i%$kolom)==($kolom-1) or ($i+1)==$jml_baris)
            {
                ?></tr><?php
            }
            $no++;
            $i++;
        }
    ?>
</table>
Read more »

Mendeteksi Resolusi Layar Monitor

11.40 alie No comments
Kita bisa mendeteksi resolusi layar monitor kita dengan javascript, berikut adalah contoh kode programnya :
<script>
var width=screen.width;
var height=screen.height;
document.write("Your Screen Resolution "+width+"px x "+height+"px");
</script>
Read more »

Get Height and Get Width jQuery

11.28 alie No comments
Untuk mendapatkan lebar dan tinggi dokumen kita bisa menggunakan fungsi dari jquery, berikut adalah contoh kodenya :

mendapatkan tinggi dokumen : 
<!DOCTYPE html>
<html>
<head>
  <style>
  body { background:yellow; }
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px red solid; }
  div { color:red; font-weight:bold; }
  </style>
  <script src="jquery-git.js"></script> <!--- sesuaikan dengan library anda --->
</head>
<body>
  <button id="getp">Get Paragraph Height</button>
  <button id="getd">Get Document Height</button>
  <button id="getw">Get Window Height</button>

  <div> </div>
  <p>
    Sample paragraph to test height
  </p>
<script>
    function showHeight(ele, h) {
      $("div").text("The height for the " + ele + 
                    " is " + h + "px.");
    }
    $("#getp").click(function () { 
      showHeight("paragraph", $("p").height()); 
    });
    $("#getd").click(function () { 
      showHeight("document", $(document).height()); 
    });
    $("#getw").click(function () { 
      showHeight("window", $(window).height()); 
    });

</script>

</body>
</html>

mendapatkan lebar dokumen : 
<head>
  <style>
  body { background:yellow; }
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px red solid; }
  div { color:red; font-weight:bold;  }
  </style>
  <script src="jquery-git.js"></script> <!--- sesuaikan dengan library anda --->
</head>
<body>
  <button id="getp">Get Paragraph Width</button>
  <button id="getd">Get Document Width</button>
  <button id="getw">Get Window Width</button>

  <div> </div>
  <p>
    Sample paragraph to test width
  </p>
<script>
	var ada = $("p").width();
	document.write(ada);
    function showWidth(ele, w) {
      $("div").text("The width for the " + ele + 
                    " is " + w + "px.");
    }
    $("#getp").click(function () { 
      showWidth("paragraph", $("p").width()); 
    });
    $("#getd").click(function () { 
      showWidth("document", $(document).width()); 
    });
    $("#getw").click(function () { 
      showWidth("window", $(window).width()); 
    });

</script>

</body>
</html>

Link : http://api.jquery.com/height/ dan Link : http://api.jquery.com/width/
Read more »

Selasa, 23 Agustus 2011

Memahami jQuery, jQuery API (Application Programming Interface)

12.04 alie No comments
Untuk menguasai jQuery atau dikenal dengan jQuery API (Application Programming Interface) Kita harus mempelajari:
  1. jQuery Core
  2. Selector
  3. Attributes
  4. Traversing
  5. Manipulation
  6. CSS
  7. Events
  8. Ajax
  9. Plugin/jQuery UI (User Interface)
  10. Utilities
  11. dll....klik link berikut http://api.jquery.com/untuk lebih jelasnya :

Namun, sebagai fondasi awal kita perlu mempelajari tiga hal yang paling mendasar, yaitu : mempelajari Selector, Events dan Effects.

Hal yang harus diperhatikan, yaitu apabila kita membuat suatu project yang melibatkan jQuery kita harus memanggil library jQuery terlebih dahulu dan diletakkan diantara tag <HEAD>
Contoh :
<head>
<script type="text/javascript" src="jquery.js"></srcipt>
</head>

Memahami Selectors

Selectors dalam jQuery berfungsi untuk memilih elemen-elemen tertentu yang ada pada dokumen HTML dan akan dilakukan operasi penanganan kejadian pada elemen tersebut.
Elemen-elemen yang dapat dipilih oleh selector adalah :
  1. Nama tag, contoh tag p : <p>......</p>
    Penulisan jQuery : $("p").addClass("warnaKuning");
  2. id, contoh id tampil : <div id="tampil">.....</div>
    Penulisan jQuery : $("#tampil").addClass("warnaKuning");
  3. class, contoh redup : <div class="redup">.....</div>
    Penulisan jQuery : $(".redup").addClass("warnaKuning");
Dari penjelasan diatas tentunya antara tag, id, dan class ada perbedaan dalam pemanggilannya, yaitu :
  • Nama tag pemanggailannya hanya namanya saja, contoh : "p"
  • id pemanggilannya disertai tanda kres dan nama id, contoh : "#tampil"
  • class pemanggilannya disertai titik dan nama class, contoh : ".redup"

Memahami Events

Event jQuery adalah fungsi/metode inti dalam jQuery, event adalah fungsi-fungsi atau metode-metode yang dipanggil ketika "sesuatu terjadi" misalnya ketika link diklik atau disorot dll. Kunjungi link berikut : http://api.jquery.com/category/events/

Berikut adalah metode-metode yang ada di jQuery, yaitu diantarannya :
  1. .bind()
    Melampirkan     handler untuk sebuah event untuk elemen.
  2. .blur()
    Mengikat sebuah event handler untuk event "blur" JavaScript, atau memicu peristiwa pada elemen.
  3. .change()
    Mengikat sebuah     event handler untuk "perubahan" Acara JavaScript, atau memicu peristiwa pada elemen.
  4. .click()
    Mengikat sebuah     event handler untuk "klik" acara JavaScript, atau memicu peristiwa pada elemen.
  5. .dblclick()
    Bind an event handler to the "dblclick" JavaScript event, or trigger that event on an element.
  6. .delegate()
    Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
  7. .die()
    Remove all event handlers previously attached using .live() from the elements.
  8. .error()
    Bind an event handler to the "error" JavaScript event.
  9. event.currentTarget
    The current DOM element within the event bubbling phase.
  10. event.data
    The optional data passed to jQuery.fn.bind when the current executing handler was bound.
  11. event.isDefaultPrevented()
    Returns whether event.preventDefault() was ever called on this event object.
  12. event.isImmediatePropagationStopped()
    Pengembalian     apakah event.stopImmediatePropagation () pernah disebut pada objek acara.
  13. event.isPropagationStopped()
    Pengembalian     apakah event.stopPropagation () pernah disebut pada objek acara.
  14. event.namespace
    Namespace tertentu ketika peristiwa tersebut dipicu.
  15. event.pageX
    Posisi     relatif terhadap tepi kiri dokumen mouse.
  16. event.pageY
    Posisi relatif ke tepi atas dokumen mouse.
  17. event.preventDefault()
    Jika metode ini disebut, tindakan default dari peristiwa itu tidak akan dipicu.
  18. event.relatedTarget
    Elemen DOM lain yang terlibat dalam acara tersebut, jika ada.
  19. event.result
    Nilai terakhir yang dikembalikan oleh sebuah event handler yang dipicu oleh peristiwa ini, kecuali nilai itu undefined .
  20. event.stopImmediatePropagation()
    Mencegah event handler lain dari yang disebut.
  21. event.stopPropagation()
    Mencegah acara dari meluapkan pohon DOM, mencegah penangan induk dari pemberitahuan tentang acara tersebut.
  22. event.target
    DOM elemen yang dimulai acara tersebut.
  23. event.timeStamp
    Perbedaan dalam milidetik antara waktu peristiwa dipicu dan 1 Januari, 1970.
  24. event.type
    Menjelaskan sifat acara.
  25. event.which
    Untuk acara kunci atau tombol, atribut ini menunjukkan tombol khusus atau tombol yang ditekan.
  26. .focus()
    Mengikat sebuah event handler untuk "fokus" acara JavaScript, atau memicu peristiwa pada elemen.
  27. .focusin()
    Mengikat sebuah event handler untuk event "focusin" JavaScript.
  28. .focusout()
    Mengikat sebuah event handler untuk event "focusout" JavaScript.
  29. .hover()
    Mengikat dua pengatur pada elemen cocok, untuk dieksekusi ketika mouse pointer memasuki dan meninggalkan elemen.
  30. .keydown()
    Mengikat sebuah event handler untuk "keydown" Acara JavaScript, atau memicu peristiwa pada elemen.
  31. .keypress()
    Mengikat sebuah event handler untuk "menekan tombol" Acara JavaScript, atau memicu peristiwa pada elemen.
  32. .keyup()
    Mengikat sebuah event handler untuk event "keyup" JavaScript, atau memicu peristiwa pada elemen.
  33. .live()
    Melampirkan handler ke acara untuk semua elemen yang cocok pemilih saat ini, sekarang dan di masa depan.
  34. .load()
    Mengikat sebuah event handler untuk event "beban" JavaScript.
  35. .mousedown()
    Mengikat sebuah event handler untuk "mousedown" Acara JavaScript, atau memicu peristiwa pada elemen.
  36. .mouseenter()
    Mengikat sebuah event handler untuk dipecat ketika mouse memasuki sebuah elemen, atau memicu bahwa penangan pada elemen.
  37. .mouseleave()
    Mengikat sebuah event handler untuk dipecat ketika mouse meninggalkan sebuah elemen, atau memicu bahwa penangan pada elemen.
  38. .mousemove()
    Mengikat sebuah event handler untuk event "mousemove" JavaScript, atau memicu peristiwa pada elemen.
  39. .mouseout()
    Mengikat sebuah event handler untuk "mouseout" Acara JavaScript, atau memicu peristiwa pada elemen.
  40. .mouseover()
    Mengikat sebuah event handler untuk event "mouseover" JavaScript, atau memicu peristiwa pada elemen.
  41. .mouseup()
    Mengikat sebuah event handler untuk "mouseup" Acara JavaScript, atau memicu peristiwa pada elemen.
  42. .one()
    Melampirkan handler untuk sebuah event untuk elemen. Pawang dieksekusi paling banyak sekali per elemen.
  43. jQuery.proxy()
    Membawa fungsi dan mengembalikan yang baru yang akan selalu memiliki konteks tertentu.
  44. .ready()
    Tentukan fungsi untuk mengeksekusi ketika DOM penuh.
  45. .resize()
    Mengikat sebuah event handler untuk "mengubah ukuran" Acara JavaScript, atau memicu peristiwa pada elemen.
  46. .scroll()
    Mengikat sebuah event handler untuk event "scroll" JavaScript, atau memicu peristiwa pada elemen.
  47. .select()
    Mengikat sebuah event handler untuk event "pilih" JavaScript, atau memicu peristiwa pada elemen.
  48. .submit()
    Mengikat sebuah event handler untuk "submit" acara JavaScript, atau memicu peristiwa pada elemen.
  49. .toggle()
    Mengikat dua atau lebih penangan pada elemen cocok, akan dieksekusi pada klik alternatif.
  50. .trigger()
    Jalankan semua penangan dan perilaku yang melekat pada elemen cocok untuk jenis acara tertentu.
  51. .triggerHandler()
    Jalankan semua penangan yang melekat pada elemen untuk sebuah event.
  52. .unbind()
    Hapus sebuah event handler yang sebelumnya terpasang dari unsur-unsur.
  53. .undelegate()
    Hapus handler dari event untuk semua elemen yang cocok pemilih saat ini, sekarang atau di masa depan, berdasarkan spesifik mengatur elemen root.
  54. .unload()
    Mengikat sebuah event handler untuk acara "membongkar" JavaScript.

Contoh penggunaan events .Click() :
Contoh 1 :
<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; margin:5px; cursor:pointer; }
  p.hilite { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>First Paragraph</p>

  <p>Second Paragraph</p>
  <p>Yet one more Paragraph</p>
<script>
    $("p").click(function () { 
      $(this).slideUp(); 
    });
    $("p").hover(function () {
      $(this).addClass("hilite");
    }, function () {
      $(this).removeClass("hilite");
    });
</script>

</body>
</html>
Contoh 2 :
$('#target').click(function() {
alert('Handler for .click() called.');
});

Memahami Effects

Perpustakaan jQuery menyediakan beberapa teknik untuk menambahkan animasi ke sebuah halaman web. Ini termasuk sederhana, animasi standar yang sering digunakan, dan kemampuan untuk kerajinan efek kustom canggih. Dalam bab ini, kita akan erat memeriksa setiap metode efek, mengungkapkan semua jQuery memiliki mekanisme untuk menyediakan umpan balik visual kepada pengguna. klik link berikut http://api.jquery.com/category/events/untuk lebih jelasnya

Berikut adalah efek-efek yang ada di jQuery, yaitu diantarannya :
  1. .animate()
    Lakukan animasi kustom dari satu set properti CSS.
  2. .clearQueue()
    Hapus dari antrian semua item yang belum berjalan.
  3. .delay()
    Mengatur penghitung waktu untuk menunda eksekusi item berikutnya dalam antrian.
  4. .dequeue()
    Jalankan fungsi berikutnya pada antrian untuk elemen cocok.
  5. .fadeIn()
    Tampilan unsur-unsur yang cocok dengan mereka buram memudar.
  6. .fadeOut()
    Sembunyikan elemen cocok dengan memudar mereka untuk transparan.
  7. .fadeTo()
    Sesuaikan opacity dari elemen yang cocok.
  8. .fadeToggle()
    Menampilkan atau menyembunyikan elemen dicocokkan dengan opacity menjiwai mereka.
  9. jQuery.fx.interval
    Tingkat (dalam milidetik) di mana animasi api.
  10. jQuery.fx.off
    Global menonaktifkan semua animasi.
  11. .hide()
    Sembunyikan elemen cocok.
  12. .queue()
    Tampilkan antrian fungsi akan dieksekusi pada elemen cocok.
  13. .show()
    Tampilan unsur-unsur yang cocok.
  14. .slideDown()
    Tampilan unsur-unsur cocok dengan gerakan geser.
  15. .slideToggle()
    Menampilkan atau menyembunyikan elemen cocok dengan gerakan geser.
  16. .slideUp()
    Sembunyikan elemen cocok dengan gerakan geser.
  17. .stop()
    Hentikan animasi yang saat ini berjalan pada elemen cocok.
  18. .toggle()
    Menampilkan atau menyembunyikan elemen cocok.

Contoh Penggunaan Effect .show() : 
<!DOCTYPE html>
<html>
<head>
  <style>
      p { background:yellow; }
      </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Show it</button>

  <p style="display: none">Hello  2</p>
  <script>
    $("button").click(function () {
    $("p").show("slow");
    });
  </script>

</body>
</html>
Read more »

Jumat, 19 Agustus 2011

Mengenal JQuery

17.39 alie No comments
Untuk mengetahui apa itu jQuery silahkan klik link http://jquery.com/ yang merupakan website resmi dari jQuery.
Jquery adalah library atau kumpulan kode JavaScript siap pakai. Keunggulan jquery dibanding dengan javascript, yaitu menyederhanakan kode javascript dengan memanggil fungsi-fungsi yang sudah disediakan oleh jquery. Jquery tidak lain adalah sekumpulan kode javascript yang bekerja di sisi client/browser sehingga website bisa lebih interaktif.
Kenapa kita mempelajari  Jquery, berikut adalah alasannya :
1.       Jquery kompatible dengan banyak browser.
2.       Jquery mendukung semua versi CSS.
3.       Ukuran Jquery sangat kecil, sekitar 20KB.
4.       Tersedianya plugin jquery yang sangat beragam.
5.       Open source/free (gratis) alias tidak membayar dengan lisensi GNU (General Public License) dan MIT License.
6.       Dokumentasi jquery sangat lengkap.
7.       Dukungan komunitas yang besar dan aktif terhadap jquery.
Jquery sangat membantu bagi para pengembang website, dengan menggunakan jquery semakin memudahkan pengembang website untuk menggunakan berbagai keperluannya

Kelebihan jQuery
1.       Mempermudah akses dan manipulasi elemen tertentu pada dokumen. Biasanya diperlukan baris program yang sangat panjang untuk mengakses suatu elemen dokumen, Jquery dapat melakukannya hanya dalam beberapa baris program saja.
2.       Mempermudah modifikasi/perubahan tampilan halaman web.
3.       Mempersingkat Ajax (Asynchronous Javascript and XML).
4.       Memiliki API (Application Programming Interface).
5.       Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat.
6.       Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah.
Read more »

Membuat menu dengan JSCookMenu

11.54 alie No comments
Berikut adalah cara untuk membuat menu dengan JSCookMenu :

  1. Pertama-tama download dahulu library jscookmenu yang terbaru dan ThemeOffice2003 silahkan download disini
  2. Setelah library dan theme sudah didownload, buatlah folder dengan nama DEMO
  3. Extract library jscookmenu, Extract Here
    setelah diextract terdapat 2 file yaitu effect.js, JSCookMenu.js.
    Copy dua file tersebut dan taruh didalam folder DEMO
  4. Setelah itu Extract Theme yang sudah didownload ThemeOffice2003 Extract Here
    Setelah diextract taruh hasil extract didalam folder DEMO
  5. Buatlah folder images didalam folder DEMO, dan simpan icon dibawah ini didalam folder images.
  6. kira-kira isi dari folder DEMO seperti gambar dibawah ini, silahkan dicocokkan dengan punya anda.
  7. Buatlah file dengan nama menu.html
    Copy kode dibawah ini
    <!--- menu js cook sesuaikan dengan folder anda--->
<script type="text/javascript" src="effect.js"></script>
<script type="text/javascript" src="JSCookMenu.js"></script>
<link rel="stylesheet" href="ThemeOffice2003/theme.css" type="text/css">
<script type="text/javascript" src="ThemeOffice2003/theme.js"></script>

<table border="0" width="100%">
    <tr>
        <td valign="middle" style="background-color:<?php echo BGMN;?>; height:30px;">
            <div id="myMenuID">
                <script type="text/javascript"><!--
                var myMenu =
                [
                    ['<img src="images/icon.png" width="16" height="16" />', ' Home', '?menu=home', '_self', ' Home'],
                    _cmSplit,
                    ['<img src="images/icon.png" width="16" height="16" />', ' System Setting', '', '_self', ' System Setting',
                        ['<img src="images/icon.png" width="16" height="16" />', ' Setting Banner', '?menu=setting_banner', '_self', ' Setting Banner'],
                        ['<img src="images/icon.png" width="16" height="16" />', ' Setting Text Banner', '?menu=setting_text_banner', '_self', ' Setting Text Banner',
                            ['<img src="images/icon.png" width="16" height="16" />', ' Setting Text Footer', '?menu=setting_text_footer', '_self', ' Setting Text Footer'],
                            ['<img src="images/icon.png" width="16" height="16" />', ' Setting Text Footer', '?menu=setting_text_footer', '_self', ' Setting Text Footer'],
                            ['<img src="images/icon.png" width="16" height="16" />', ' Setting Text Footer', '?menu=setting_text_footer', '_self', ' Setting Text Footer']
                        ],
                        ['<img src="images/icon.png" width="16" height="16" />', ' Setting Text Footer', '?menu=setting_text_footer', '_self', ' Setting Text Footer'],
                        ['<img src="images/icon.png" width="16" height="16" />', ' Setting Text Halaman Utama', '?menu=setting_text_halaman_utama', '_self', ' etting Text Halaman Utama'],
                        ['<img src="images/icon.png" width="16" height="16" />', ' Setting System Template', '?menu=setting_system_template', '_self', ' etting System Template'],
                        ['<img src="images/icon.png" width="16" height="16" />', ' Setting favicon', '?menu=setting_favicon', '_self', ' Setting favicon'],
                        ['<img src="images/icon.png" width="16" height="16" />', ' Setting Title', '?menu=setting_title', '_self', ' Setting Title'],
                        ['<img src="images/icon.png" width="16" height="16" />', ' Setting Languages', '?menu=setting_languages', '_self', ' Setting Languages'],
                        ['<img src="images/icon.png" width="16" height="16" />', ' Setting Menu Template', '?menu=setting_menu_template', '_self', ' Setting Menu Template'],
                        ['<img src="images/icon.png" width="16" height="16" />', ' Setting Background Template', '?menu=setting_background_template', '_self', ' Setting Background Template'],
                        ['<img src="images/icon.png" width="16" height="16" />', ' Setting Background Content', '?menu=setting_background_content', '_self', ' Setting Background Content'],
                        ['<img src="images/icon.png" width="16" height="16" />', ' Manajemen Menu Part 3', '?menu=setting_menu3', '_self', ' Manajemen Menu Part 3']
                    ],
                    _cmSplit,
                    ['<img src="images/icon.png" width="16" height="16" />', ' Logout', '?menu=home', '_self', ' Logout']
                ];
                cmDraw ('myMenuID', myMenu, 'hbr', cmThemeOffice2003, 'ThemeOffice2003');
                --></script>
            </div>
        </td>
    </tr>
</table>
  8. Isi folder DEMO, hasil akhir


  9. SELESAI, SEMOGA BERHASIL...!!!
Read more »

Instalasi Flexigrid

06.59 alie 11 comments
Menampilkan data di Flexigrid sangatlah mudah apabila kita tahu caranya.

Berikut adalah contoh menggunakan Flexigrid.
Langkah-langkah instalasi :
  1. Download library flexigrid disini
  2. Setelah flexigrid didownload extract melalui WinRAR, Extract Here
        Hasil extract kalau di buka kira-kira isinya seperti gambar dibawah ini
  3. Setelah Flexigrid di Extract buatlah folder baru dengan nama DEMO dan hasil extrakan tadi ditaruh di dalam folder DEMO, dan buat folder images didalam folder DEMO, didalam Folder DEMO apabila dibuka maka isinya seperti gambar dibawah ini.
  4. gambar dibawah ini simpan dan taruh didalam folder images


    apabila folder images dibuka kira-kira isinya seperti gambar dibawah ini
  5. Langkah selanjutnya yaitu membuat database bernama apotek dan buatlah tabel dengan nama jenis_obat fieldnya yaitu : id_jenis_obat,jenis_obat
  6. setelah database dan tabel jenis obat dibuat, langkah selanjutnya yaitu membuat file data.php
    Copy kode dibawah ini
    <?php
$nameserver = "localhost";
$username = "root";
$password = "123456";
$dbname = "apotek";
mysql_connect($nameserver,$username,$password);
mysql_select_db($dbname);

function alert($pesan) {
	echo "
		<script language=\"javascript\">
			alert('".$pesan."');
		</script>	
	";
}
function loncat($url) {
	echo "
		<script language=\"javascript\">
			window.location = \"".$url."\";
		</script>	
	";
}

function cek($sql) {
	$sql = $sql;
	$query = mysql_query($sql);
	$numrows = mysql_num_rows($query);
	return $numrows;
}

if(isset($_POST["tombol"])){
	if($_POST["tombol"]=="Simpan"){
		$cek = cek("select * from jenis_obat where jenis_obat = '$_POST[jenis_obat]'");
		if ($cek < 1) {
			$sql = "insert into jenis_obat ".
					"	(jenis_obat) ".
					"	values ".
					"	('$_POST[jenis_obat]') ";
			$query = mysql_query($sql);
		
			alert("Simpan Jenis Obat sukses");
			loncat("data.php");
		} else {
			alert("Simpan Jenis Obat gagal \\n Jenis Obat $_POST[jenis_obat] sudah ada");
			loncat("data.php");
		}
	}
	if($_POST["tombol"]=="Update"){
		$cek = cek("select * from jenis_obat where id_jenis_obat != '$_POST[id_jenis_obat]' and jenis_obat = '$_POST[jenis_obat]' ");
			
		if ($cek < 1) {
			$sql = "update jenis_obat ".
					"	set jenis_obat = '$_POST[jenis_obat]' ".
					"	where id_jenis_obat = '$_POST[id_jenis_obat]' ".
					" ";
			$query = mysql_query($sql);
			alert(" Data Jenis Obat sudah diupdate ");
			loncat("data.php");	
		} else {
			alert(" Data Jenis Obat gagal diupdate \\n Jenis Obat $_POST[jenis_obat] sudah ada ");
			loncat("data.php");	
		}
	}
}
?>
<!--- flexgrid, sesuaikan dengan folder anda--->
<script type="text/javascript" src="flexigrid/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="flexigrid/flexigrid.js"></script>
<link rel="stylesheet" href="flexigrid/css/flexigrid/flexigrid.css" type="text/css">

<style>
	/*************************************************************/
	/*Penambahan images pada button, sesuaikan dengan folder anda*/
	/*************************************************************/
	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
	}
	.flexigrid div.fbutton .add {
			background: url(images/add.png) no-repeat center left;
	}	
	.flexigrid div.fbutton .edit {
			background: url(images/edit.png) no-repeat center left;
	}	
	.flexigrid div.fbutton .delete {
			background: url(images/delete.png) no-repeat center left;
	}	
</style>

<div style="margin-left:25px; margin-top:30px">
<table id="flex1" style="display:none"></table>
</div>

<script type="text/javascript">
			
	$("#flex1").flexigrid
	(
	{
	//--sesuaikan dengan nama file anda
	url: 'data_flexgrid.php', 
	dataType: 'json',
	colModel : [
		{display: 'ID', name : 'id_jenis_obat', width : 40, sortable : true, align: 'center'},
		{display: 'Jenis Obat', name : 'jenis_obat', width : 80, sortable : true, align: 'left'}
		],
	buttons : [
		{name: 'Add', bclass: 'add', onpress : action},
		{name: 'Edit', bclass: 'edit', onpress : action},
		{name: 'Delete', bclass: 'delete', onpress : action},
		{separator: true}
		],
	searchitems : [
		{display: 'ID', name : 'id_jenis_obat'},
		{display: 'Jenis Obat', name : 'jenis_obat', isdefault: true}
		],
	singleSelect: true,
	sortname: "id_jenis_obat",
	sortorder: "asc",
	usepager: true,
	title: 'Jenis Obat',
	useRp: true,
	rp: 5,
	showTableToggleBtn: true,
	width: 700,
	height: 150
	}
	);

	function action(com,grid)
	{
		if (com == 'Delete')
			if($('.trSelected',grid).length>0){
				if(confirm('PERINGATAN : Hapus ' + $('.trSelected',grid).length + ' baris ?')){
					var items = $('.trSelected',grid);
					var itemlist ='';
					for(i=0;i<items.length;i++){
						itemlist+= items[i].id.substr(3)+",";
					}
					$.ajax({
						type: "POST",
						dataType: "json",
						url: "data_hapus.php",
						data: "items="+itemlist,
						success: function(data){
							//alert("Query: "+data.query+" - Total affected rows: "+data.total);
							alert("Data yang dihapus : "+data.total);
							$("#flex1").flexReload();
						}
					});
				}
			} else {
				return false;
			} 
		else if (com == 'Edit')
			{
				var items = $('.trSelected',grid);
				var itemlist ='';
				for(i=0;i<items.length;i++){
					itemlist+= items[i].id.substr(3)+",";
				}
				//confirm('Edit ' + $('.trSelected',grid).length + ' items? : ' + itemlist )
				//--sesuaikan dengan nama file anda
				$('#tampil').load("data_edit.php?id_jenis_obat="+itemlist);
			}
		else if (com == 'Add') {
			//--sesuaikan dengan nama file anda
			$('#tampil').load("data_tambah.php");
		}
	}
	
</script>
<div id="tampil"></div>
  7. Buat file data_edit.php
    Copy kode dibawah ini
    <?php
$nameserver = "localhost";
$username = "root";
$password = "123456";
$dbname = "apotek";
mysql_connect($nameserver,$username,$password);
mysql_select_db($dbname);

$id_jenis_obat = explode(",",$_GET[id_jenis_obat]);
$id_jenis_obat = $id_jenis_obat[0];

$sql = "select * from jenis_obat where id_jenis_obat = '$id_jenis_obat' ";
$query = mysql_query($sql);
$fetch = mysql_fetch_object($query);
?>
<form action="" method="post">
<div id="toggleText" style="display: block;">
    <div class="box">
        <div class="topleft">
            <div class="topright">
                <div>
                    <table>
                        <tr>
                            <td colspan="2"><h3>Edit Jenis Obat</h3></td>
                        </tr>
                        <tr>
                            <td>Jenis Obat</td>
                            <td>: 
                            	<input type="text" name="jenis_obat" value="<?=$fetch->jenis_obat;?>">
                                <input type="hidden" name="id_jenis_obat" value="<?=$fetch->id_jenis_obat;?>">
                            </td>
                        </tr>
                        <tr>
                            <td> </td>
                            <td>
                            	  <input type="submit" name="tombol" value="Update">
                            	  <input type="button" name="batal" value="Batal" onclick="javascript:window.location='data.php';">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="bottomleft">
            <div class="bottomright"> </div>
        </div>
    </div>
</form>
  8. Buat file dengan nama data_flexgrid.php
    Copy kode dibawah ini
    <?php
$nameserver = "localhost";
$username = "root";
$password = "123456";
$dbname = "apotek";
mysql_connect($nameserver,$username,$password);
mysql_select_db($dbname);

error_reporting(1);
function runSQL($rsql) {
	$result = mysql_query($rsql) or die ('test'); 
	return $result;
	mysql_close($connect);
}

function countRec($fname,$tname,$where) {
	$sql = "SELECT count($fname) FROM $tname $where";
	$result = runSQL($sql);
	while ($row = mysql_fetch_array($result)) {
		return $row[0];
	}
}

$page = $_POST['page'];
$rp = $_POST['rp'];
$sortname = $_POST['sortname'];
$sortorder = $_POST['sortorder'];

if (!$sortname) $sortname = 'id_jenis_obat';
if (!$sortorder) $sortorder = 'desc';

$sort = "ORDER BY $sortname $sortorder";

if (!$page) $page = 1;
if (!$rp) $rp = 5;

$start = (($page-1) * $rp);

$limit = "LIMIT $start, $rp";

$query = $_POST['query'];
$qtype = $_POST['qtype'];

$where = "";
if ($query) $where = " WHERE $qtype LIKE '%$query%' ";

$sql = "SELECT id_jenis_obat,jenis_obat FROM jenis_obat $where $sort $limit";
$query = mysql_query($sql);

$total = countRec("id_jenis_obat","jenis_obat $where");

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); 
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" ); 
header("Cache-Control: no-cache, must-revalidate" ); 
header("Pragma: no-cache" );
header("Content-type: text/x-json");
$json = "";
$json .= "{\n";
$json .= "page: $page,\n";
$json .= "total: $total,\n";
$json .= "rows: [";
$rc = false;
while ($row = mysql_fetch_array($query)) {
	if ($rc) $json .= ",";
	$json .= "\n{";
	$json .= "id:'".$row['id_jenis_obat']."',";
	$json .= "cell:['".$row['id_jenis_obat']."'";
	$json .= ",'".$row['jenis_obat']."']";
	$json .= "}";
	$rc = true;		
}
$json .= "]\n";
$json .= "}";
echo $json;
?>
  9. Buat file data_hapus.php
    Copy kode dibawah ini
    <?
$nameserver = "localhost";
$username = "root";
$password = "123456";
$dbname = "apotek";
mysql_connect($nameserver,$username,$password);
mysql_select_db($dbname);

error_reporting(0);
function runSQL($rsql) {
	$result = mysql_query($rsql) or die ('test'); 
	return $result;
	mysql_close($connect);
}
$items = rtrim($_POST['items'],",");
$sql = "DELETE FROM jenis_obat WHERE id_jenis_obat IN ($items)";

$total = count(explode(",",$items)); 
$result = runSQL($sql);
$total = mysql_affected_rows();

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
header("Cache-Control: no-cache, must-revalidate" );
header("Pragma: no-cache" );
header("Content-type: text/x-json");
$json = "";
$json .= "{\n";
$json .= "query: '".$sql."',\n";
$json .= "total: $total,\n";
$json .= "}\n";
echo $json;
?>
  10. Buat file dengan nama data_tambah.php
    Copy kode dibawah ini
    <form action="" method="post">
<div id="toggleText" style="display: block">
    <div class="box">
        <div class="topleft">
            <div class="topright">
                <div>
                    <table>
                        <tr>
                            <td colspan="2"><h3>Tambah Jenis Obat</h3></td>
                        </tr>
                        <tr>
                            <td>Jenis Obat</td>
                            <td>: <input type="text" name="jenis_obat"></td>
                        </tr>
                        <tr>
                            <td> </td>
                            <td>
                            	  <input type="hidden" name="p" value="<?=$_GET[p];?>">
                            	  <input type="submit" name="tombol" value="Simpan">
                            	  <input type="button" name="batal" value="Batal" onclick="javascript:window.location='data.php';">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="bottomleft">
            <div class="bottomright"> </div>
        </div>
    </div>
</form>
  11. Kalau file sudah dibuat semua maka isi dari folder DEMO seperti gambar dibawah ini

SELESAI,,,SEMOGA BERHASIL..!!!
Read more »

Kamis, 18 Agustus 2011

Mencari data ketika input di textbox dan secara otomatis data ditampilkan di textbox

16.55 alie 10 comments
Apakah anda ingin membuat form yang apabila mengetik sebuah kode, data langsung ada pada text selanjutnya ? kalau iya silahkan simak postingan ini...

Mungkin cara inputan form seperti ini sangat sulit dipecahkan bagi yang baru mengenal pemrograman javascript, kali ini saya akan memberikan contoh kode untuk membuat form seperti yang dijelaskan diatas. silahkan di simak....,

Mencari data dan menampilkannya di textbox secara otomatis, menggunakan AJAX dan XML.

Buatlah file input_nilai.php
Copy kode dibawah ini 
<script language="javascript">
// JavaScript Document
var xmlHttp;
//-------------membuat objek xmlHttpRequest
function GetXmlHttpObject()
{
try
 {
 // ngecek buat browser firefox, opera 8.0+, safari
 xmlHttp=new XMLHttpRequest();
 }
 catch (e)
  {
  // browser Internet Explorer
  try
   {
   // IE 6.0+
   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch (e)
    {
    // IE 5.0
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }   
return xmlHttp;
}

function tampilkan_data(kode, jumlah)
{
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
 {
  alert ("Browser tidak support HTTP Request");
 }
 var url="php_responseXML.php?kode="+kode
 url = url+"&jumlah="+jumlah
 xmlHttp.onreadystatechange=function()
 {
  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
     {
    xmldoc = xmlHttp.responseXML;
          document.myForm.txtnama.value=xmldoc.getElementsByTagName("nama")[0].childNodes[0].nodeValue;
    document.myForm.txtalamat.value=xmldoc.getElementsByTagName("alamat")[0].childNodes[0].nodeValue;
    document.myForm.txtkota.value=xmldoc.getElementsByTagName("kota")[0].childNodes[0].nodeValue;
    document.myForm.txttanggal.value=xmldoc.getElementsByTagName("tanggal")[0].childNodes[0].nodeValue;
    document.myForm.txttotal_jumlah.value=xmldoc.getElementsByTagName("total")[0].childNodes[0].nodeValue;
     }
 }
 xmlHttp.open("GET",url,true);
 xmlHttp.send(null);
}
</script>

<form name="myForm" action="" method="post" onSubmit="return cekkosong(this)">
<input type="text" name="txtjumlah" id="txtjumlah" size="15" />

<input type ="text" 
name  ="txtkode" 
id   ="txtkode" 
size  ="15" 
onKeyUp  ="tampilkan_data(this.value,myForm.txtjumlah.value);" />

<input type="text" name="txtnama" id="txtnama" size="15" />
<input type="text" name="txtalamat" id="txtalamat" size="15" />
<input type="text" name="txtkota" id="txtkota" size="15" />
<input type="text" name="txttanggal" id="txttanggal" size="15" />
<input type="text" name="txttotal_jumlah" id="txttotal_jumlah" size="15" />
<input type="submit" name="tombol" value="Simpan" />
</form>

Buat File dengan nama php_responseXML.php
Copy kode dibawah ini
<?
header('content-type:text/xml');
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: ". gmdate("D, d M Y H:i:s"));
if($_SERVER["SERVER_PROTOCOL"]=="HTTP/1.0")
 header("Pragma: no-cache");
else
 header("Cache-Control: no-cache, must-revalidate");

$kode =$_GET['kode'];
$jumlah =$_GET['jumlah'];

/*********=---Proses--=***********/
//Disini anda bisa mencari data dari mysql, untuk source code
//silahkan anda kembangkan sendiri. OK.
$nama  = "Namaku";
$alamat = "Alamatku";
$kota  = "Kotaku";
$tanggal= "Tanggal";
$total  = intval($jumlah)*10;
/********************************************************/
echo"
     <data>
   <nama>".$nama."</nama>
   <alamat>".$alamat."</alamat>
   <kota>".$nama."</kota>
   <tanggal>".$kota."</tanggal>
   <total>".$total."</total>
     </data>
";
?>

Read more »

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Justin Bieber, Gold Price in India