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