Pojok Code

Home All posts

Monday, October 17, 2016

HTML

Membuat Dual List Box Dengan HTML dan Jquery

Unknown 11:29 PM 2 Comments

Assalamualaikum Wr. Wb....
Bogger semua pada kesempatan ini saya mau sharing cara membuat dual list box mengunakan HTMl dan JQuery. Dual list box ini biasanya kita jumpai ketika ada pemilihan yang lebih dari satu, seperti pemilihan employee dan lain sebagainya.
Untuk pembuatannya saya tidak seutuhnya membuat code sendiri, tetapi saya mengunakan library dari link berikut :

http://www.senamion.com/blog/jmultiselect2side.html

Silahkan anda download terlebih dahulu dari link diatas.Namun sayangnya library ini sudah tidak dikembangkan lagi dan hanya support sapai JQuery Versi 1.5 untuk versi diatasnya tidak support. Untuk link JQuery anda bisa mengunakan link berikut :

https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js

Untuk Struktur filder pembuatannya kira-kira sebagai berikut

Kita cukup membuat satu file HTML dengan nama index.html untuk lib kita isi dengan jquery dan jmultiselect2side.
Code lengkap untuk file index.html

 <!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Multi Select To Side</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
 <script type="text/javascript" src="lib/jquery.multiselect2side.js" ></script>
    <link rel="stylesheet" href="lib/jquery.multiselect2side.css" type="text/css" media="screen" />
    <script type="text/javascript">
     $().ready(function() {
            $('#second').multiselect2side({
                selectedPosition: 'right',
                moveOptions: false,
                labelsx: '',
                labeldx: '',
                autoSort: true,
                autoSortAvailable: true
            });
     });
    </script>
</head>
<body>
 <h3>Data Employee</h3>
 <table>
  <tr>
   <td>Employee Id :</td>
   <td><input type="text" name="emp_id"></td>
  </tr>
  <tr>
   <td valign="top">Employee :</td>
   <td>
    <select name="searchable[]" id='second' multiple='multiple'">
     <option value="001">Asep komarudin</option>
     <option value="002">Ijal Maulana</option>
     <option value="003">Rudi Sujarwo</option>
     <option value="004">kafi Mohak</option>
     <option value="005">Yusuf Satriadi</option>
    </select>
   </td>
  </tr>
 </table>
</body>
</html>

Hasil keluarannya adalah sebagai berikut :

Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :

Selamat mencoba......
Jika ada pertanyaan silahkan input pada kolom komentar...

HTML VideoTutorial

Video Tutorial HTML

Unknown 7:11 AM Comment

Assalamualaikum Wr. Wb...
Pada kesempatan ini saya akan sharing tutorial mengenai HTML. Tidak bisa kita pungkiri HTML ini memegang peranan yang sangat penting untuk pembuatan Web Aplikasi. Sebelumnya saya mohon maaf jika dalam penyajiannya sangat jauh dari kata sempurna, tetapi saya berharap dengan dibuatnya ini dapat membatu sahabat yang membutuhkan. Selamat menyimak.

Pengenalan HTML

Berkas latihan bisa didownload disini : file latihan
Berkas PPT bisa didownload disini : file PPT

HTML Dasar

Berkas latihan bisa didownload disini : file latihan
Berkas PPT bisa didownload disini : file PPT

Atribute HTML

Berkas latihan bisa didownload disini : file latihan
Berkas PPT bisa didownload disini : file PPT

HTML Style

Berkas latihan bisa didownload disini : file latihan
Berkas PPT bisa didownload disini : file PPT

HTML Formating

Berkas latihan bisa didownload disini : file latihan
Berkas PPT bisa didownload disini : file PPT

HTML Kutipan

Berkas latihan bisa didownload disini : file latihan
Berkas PPT bisa didownload disini : file PPT

Komentar Pada Tag HTML

Berkas latihan bisa didownload disini : file latihan
Berkas PPT bisa didownload disini : file PPT

HTML Warna

Berkas latihan bisa didownload disini : file latihan
Berkas PPR bisa didownload disini : file PPT

HTML CSS

Berkas latihan bisa didownload disini : file latihan
Berkas PPT bisa didownload disini : file PPT

HTML Table

Berkas latihan bisa didownload disini : file latihan
Berkas PPT bisa didownload disini : file PPT

HTML List

Berkas latihan bisa di download disini : file latihan
Berkas PPT bisa didownload disini : file PPT

HTML Block

Berkas latihan bisa di download disini : file latihan
Berkas PPT bisa didownload disini : file PPT

HTML Class

Berkas latihan bisa di download disini : file latihan
Berkas PPT bisa didownload disini : file PPT

HTML IFrame

Berkas latihan bisa di download disini : file latihan
Berkas PPT bisa didownload disini : file PPT

HTML Javascript

Berkas latihan bisa di download disini : file latihan
Berkas PPT bisa didownload disini : file PPT

HTML Layout

Berkas latihan bisa di download disini : file latihan
Berkas PPT bisa didownload disini : file PPT

HTML Responsive

Berkas latihan bisa di download disini : file latihan
Berkas PPT bisa didownload disini : file PPT

HTML Form

Berkas latihan bisa di download disini : file latihan
Berkas PPT bisa didownload disini : file PPT

Brsambung........

HTML JAVASCRIPT PHP

Membuat Search Data Dengan Mengunakan Popup Dialog Javascript

Unknown 12:53 AM 3 Comments

Assalamualaikum Wr. Wb....
Bogger semua kesempatan ini saya mau sharing cara membuat pencarian data yang nantinya data itu kita add kedalam input text yang kita inginkan. Untuk percobaan ini saya mengunakan PHP dengan Databasen MySql.

Untuk Persiapan kita buat folder searchdata dan didalamnya dibuatkan dua file yaiu index.php dan search.php
Struktur filenya kira-kira sebagai berikut :

Sekarang kita akan mengisi code pada file index.php

 <!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Search Employee</title>
 <script type="text/javascript">
  function popupwindow(url, title, w, h) {
         var left = (screen.width/2)-(w/2);
         var top = (screen.height/2)-(h/2);
         return window.open(url, title, 'scrollbars=1,status=1, resizable=1, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
     }
 </script>
</head>
<body>
 <table>
  <tr border="0" cellpadding="0" cellspacing="0">
   <td colspan="2" align="center">Contoh search employee</td>
  </tr>
  <tr>
   <td>Employee</td>
   <td><input type="text" name="txtId" id="txtId"><input type="text"  name="txtNama" id="txtNama"><input type="button" name="Search" value="Search" onclick='javascript:popupwindow("search.php","Seach Employee",950,600);'></td>
  </tr>
 </table>
</body>
</html>

Selanjutnya kita akan mengisi code pada file search.php dengan code sbb:

 <script type="text/javascript">
 function changeparent(doc,doc2){
        var input1=doc;
        var input2=doc2;
        window.opener.document.getElementById('txtId').value=input1;
        window.opener.document.getElementById('txtNama').value=input2;
        window.close();
    }
</script>
<h3>Data Employee</h3>
<table cellpadding="3" cellspacing="0" border="1" width="80%" id="tblMain">
 <tr>
  <td>Employee Id</td>
  <td>Nama</td>
  <td>Alamat</td>
 </tr>
<?php
function getConnection() {
    $usr="root";
    $pwd="";
    $database="searchdata";
    $host="localhost";
    $connection=  mysql_connect($host, $usr, $pwd);
    mysql_select_db($database)or die("Database tidak ditemukan !");
    return $connection;
}

$conn=getConnection();
$sql="select * from employee";
$dataQry  =  mysql_query($sql, $conn)or die("Query error :".  mysql_error());
while ($dataRow=  mysql_fetch_array($dataQry)){  
?>
<tr onClick="javascript:changeparent('<?php echo $dataRow['emp_id']; ?>','<?php echo $dataRow['nama']; ?>');">
 <td><?php echo $dataRow['emp_id'];?></td>
   <td><?php echo $dataRow['nama'];?></td>
   <td><?php echo $dataRow['alamat'];?></td>
</tr>
<script language="javascript">
    var tbl = document.getElementById("tblMain");
    if (tbl != null) {
        if (tbl.rows[0] != null) {
            tbl.rows[0].style.backgroundColor = "#365890";
            tbl.rows[0].style.color = "#FFFFFF";
        }
        for (var i = 1; i < tbl.rows.length; i++) {

            tbl.rows[i].style.cursor = "pointer";
            tbl.rows[i].onmousemove = function () { this.style.backgroundColor = "#cccccc"; this.style.color = "#FFFFFF"; };
            tbl.rows[i].onmouseout = function () { this.style.backgroundColor = ""; this.style.color = ""; };
        }
    }
</script>
<?php
}
?>
</table>

Sebelum menjalankan kita harus membuat databasenya terlebih dahulu, kita buat database baru dengan nama searchdata atau sesuaikan dengan keinginan anda

Selanjutnya kita membuat tabel dengan nama employee. filed tabel employee bisa dilihat pada gambar diatas.
Sekarang kita isi tabel yang sudah kita buat dengan cara menjalankan script SQl dibawah ini :

 insert into employee values
('00001','asep Komarudin','Jakarta'),
('00002','Rizal maulana','Bandung'),
('00003','Nilam Ayu','Bekasi')

Sekarang kita coba menjalankannya, tampilannya kurang lebih sbb:

Selamat mencoba....

Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :

Jika ada pertanyaan silahkan input pada kolom komentar....

Sunday, October 16, 2016

PHP

Enkripsi Dan Dekripsi String Pada PHP dengan Fungsi MCRYPT

Unknown 6:35 PM Comment

Assalamualikum Wr. Wb.....
Sabat blogger semua pada kesempatan ini saya akan sharing cara encripsi dan decripsi string pada PHP dengan fungsi MCRYPT Langkahnya adalah sbb:

Kita buat folder encripsi pada folder www (wamp server) atau htdoc (xampp) dan buat duabuah file php dengan nama encripsi.php dan index.php

Ini isi code untuk encripsi.php

 <?php
  function encrypt_decrypt($action, $string) {
   $output = false;

   $key = 'Ini adalah password saya';

   // initialization vector 
   $iv = md5(md5($key));

   if( $action == 'E' ) {
       $output = mcrypt_encrypt(MCRYPT_RIJNDAEL_256, md5($key), $string, MCRYPT_MODE_CBC, $iv);
       $output = base64_encode($output);
   }
   else if( $action == 'D' ){
       $output = mcrypt_decrypt(MCRYPT_RIJNDAEL_256, md5($key), base64_decode($string), MCRYPT_MODE_CBC, $iv);
       $output = rtrim($output, "");
   }
   return $output;
 }

Dan ini untuk code index.php

  <?php
include_once 'encripsi.php';
echo 'hasil encripsi = '.encrypt_decrypt('E','asep').'<br>';

echo 'hasil decrip = '.encrypt_decrypt('D','3HJqP9w0IhP+1oTILIEgUZFaY3t2dmLK1nOPV4MsbDQ=');

Metode ini bisa kita gunakan untuk encripsi dan decripsi password login ke aplikasi yang kita buat. Sebenarnya masuh banyak cara yang bisa kita lakukan untuk encripsi dan decripsi string, ini hanya salah sarunya.
Jika kita lihat keluarnaya adalah sbb :

Selamat Mencoba...

Klik Tombol Dibawah Untuk Memunculkan Link Download :

Tutorial Cara Download File :

Jika ada pertanyaan silahkan isi pada kolom komentar....

Subscribe to: Posts (Atom)