Pop Up Window – PHP & JavaScript

April 3, 2011

Bagi yang biasa / pernah membuat aplikasi di Windows (Windows Base) mungkin sudah sangat terbiasa dengan window pop-up sebagai salah satu form untuk media input/edit data di sebuah aplikasi.  Bagi yang sudah terbiasa seperti itu ternyata tidak semudah yang diperkirakan jika ingin menerapkannya di aplikasi Web, terutama denganbaha pemrograman yang saya sedang otak-atik sekarang ini, yaitu PHP sebagai script server side-nya dan Javascript untuk modifikasi tampilan di client side (browser Client).

Akhirnya, stalah berselaancar cukup lama menemukan site yg sangat membantu untuk membuat modul window pop-up dg PHP dan Javascript, terutama Javascript sebagai bahasa programming untuk tampilan2 di client side.

Alamat website yang menjadi sumber dari otak-otik saya ini adalah :

http://adf.ly/Knkzk, sebagai sumber fungsi untuk parsing variable / value hasil pilihan di window child (pop-up) ke window parent, dg kutipan fungsi sbb :
<SCRIPT LANGUAGE=”JavaScript”>
<!– Original:  Shawn A. Mann (dharmamann@hotmail.com) –>
<!– Web Site:  http://www.laughingshaman.com –>
<!– Modified By:  Ronnie T. Moore, Editor –>

<!– This script and many more are available free online at –>
<!– The JavaScript Source!! http://javascript.internet.com –>

<!– Begin
function sendValue(s){
var selvalue = s.options[s.selectedIndex].value;
window.opener.document.popupform.choice.value = selvalue;
window.close();
}
//  End –>
</script>

dan URL http://adf.ly/Knl7n, sebagai sumber yg saya gunakan sebagai tutorial pemecahan masalah membaca nilai dari object radio, karena saya sebagai pendatang baru di web programming, sehingga masih kesulitan untuk mengenal / mengetahui bagaimana mengambil nilai dari suatu object di halaman web, potongan  fungsi yang saya pelajari adalah sbb :

<script language="javascript">
<!--
function RadioCheck() {

var fruit = new Array(‘Apples‘, ‘Oranges‘, ‘Bananas‘, ‘Kiwis‘, ‘Saskatoons‘, ‘Grapes‘);
var selection = document.quiz.colour;

for (i=0; i<selection.length; i++)

if (selection[i].checked == true)
alert(fruit[i] + ‘ are ‘ + selection[i].value + ‘.’)

}
//–>
</script>

Dari sumber-sumber tersebut, dimodifikasi sesuai kebutuhan otak-otik yg saya sedang kerjakan, sbb:

Pertama adalah, buatkan form isian sebagai window parent sbb :

yang merupakan hasil dari (potongan) script form.php sbb:

<h2>Tambah Kantor</h2>
<form name=isikantor method=POST action=’$aksi?module=kantor&act=input’>
<table>
<tr><td>Kode Kantor</td>     <td> : <input type=text name=’kdkantor’></td></tr>
<tr><td>Nama Kantor</td>     <td> : <input type=text name=’nmkantor’></td></tr>
<tr><td>Area</td> <td> : <input type=text name=’kdarea’ disabled>
<input type=button name=choice onClick=\”popup(‘modul/mod_pop/popup.php’);\” value=’ >> Pilih << ‘>
</td></tr>
<tr><td>Informasi</td> <td> : <textarea name=’infolain’ cols=25 rows=5></textarea></td></tr>
<tr><td colspan=2><input type=submit value=Simpan>
<input type=button value=Batal onclick=self.history.back()></td></tr>
</table></form><br>

Dimana yang diingankan dari script tersebut adalah nilai dari kolom isian area diisi dari daftar yang berasal dari Pop-up Window, yang muncul saat diklik tombol [>> Pilih <<].

Setelah tombol [>> Pilih <<] maka akan muncul pop-up sbb :

Yang merupakan hasil dari script (misalnya) popup.php, sbb :

<?php
echo ”
<SCRIPT LANGUAGE=’JavaScript’>
<!– Original:  Shawn A. Mann (dharmamann@hotmail.com) –>
<!– Web Site:  http://www.laughingshaman.com –>
<!– Modified By:  Ronnie T. Moore, Editor –>

<!– This script and many more are available free online at –>
<!– adapted from The JavaScript Source!! http://javascript.internet.com/forms/popup-picker.html –>
<!– Begin
function sendValue(s){
<!– var selvalue = s.radios[s.selectedIndex].value; –>
var selvalue = document.pilihanarea.pilih;

for (i=0; i<selvalue.length; i++)

if (selvalue[i].checked == true)
{
alert(‘ Area yang dipilih adalah ‘ + selvalue[i].value + ‘.’)
window.opener.document.isikantor.kdarea.value = selvalue[i].value;
window.close();
}

}
//  End –>
</script>

<link href=’../../style/style.css’ rel=’stylesheet’ type=’text/css’ />
<table>
<tr><th>no</th><th>Kode Area</th><th>Nama Area</th><th>Aksi</th></tr>”;
$no=1;
while ($r=mysql_fetch_array($tampil)){
echo “<form name=pilihanarea>
<input type=hidden name=id value=$r[kodearea]>
<tr><td>$no</td>
<td>$r[kodearea]</td>
<td>$r[namaarea]</td>
<!– <td><a href=?module=area&act=piliharea&id=$r[kodearea]>Pilih</a></td></tr>–>
<!–    <td><input type=submit value=Pilih></td></tr>–>
<td><input type=radio name=pilih value=$r[kodearea]></td></tr> “;
$no++;
}

?>
</table>
<input type=button value=”Ok” onClick=”sendValue(this.form.pilih);”>
<input type=”submit” value=”Pilih Apa?” onClick=”RadioCheck()”>
</form>

dari script tsb, fungsi yg digunakan untuk mengirimkan nilai dai pop-up ke window utama adalah :

function sendValue(s){
var selvalue = document.pilihanarea.pilih;

for (i=0; i<selvalue.length; i++)

if (selvalue[i].checked == true)
{
alert(‘ Area yang dipilih adalah ‘ + selvalue[i].value + ‘.’)
window.opener.document.isikantor.kdarea.value = selvalue[i].value; <!– mengirim nilai ke window utama, dg nilai dari obj.radio –>
window.close(); <!– tutup window pop-up –>
}
}

Lebih kurangnya adalah demikian, sebagai tambahan CMS / style css dan script-2 PHP yg digunakan merupakan otak-atik yang bersumber dari buku “Membongkar Trik Rahasia Para Master PHP, karangan Lukmanul Hakim” yang bisa di lihat di http://adf.ly/Knlze.

Terima kasih, selamat menikmati.

Advertisements

8 Responses to “Pop Up Window – PHP & JavaScript”

  1. wayu said

    thx ga atas infonya..
    berguna skali bwt KKP saya..

  2. El said

    di coba ko ga bisa… sumbernya dari mana mas?

  3. biedie said

    gan kenapa gak bisa ya onclick nya ?
    ada contoh kasusnya gak gan ?
    bantuin ane donk gan
    kasi solusi

  4. auditya said

    boleh minta full source code nya gak?
    lagi mau buat kaya diatas
    thank you very much

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: