I'll explain a bit my knowledge to you all to be able to create a button that contains the name of the employee, nip and occupation. If we choose the name of the column nip and positions will be automatically filled in since we've been connecting the "employee table" and "table contents" in a single database.

The first step:
Create a database first "new" or may use a different name and create a table "employee" for calling employee data into index.php
Here are the contents of table "employee"


Field
Type
NULL
Extra
nip_pegawai
varchar(21)
No
PRIMARY
nama_pegawai
varchar(100)
No

pangkat_pegawai
varchar(100)
No

golongan_pegawai
varchar(50)
No

jabatan_pegawai
varchar(50)
No

Insert some fields for example typing the name of the column index.php
 

Step two:
After successfully making table "employee" then we make index.php files for calling on localhost. Here's the source code index.php
<html>
<head>
<title> Pegawai </title>
      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript" src="suggestbox.js"></script>
      <link rel="stylesheet" href="style.css">
</head>
<body>
<table width="600" align="center" bgcolor="#CCCCCC">
  <tr>
    <td colspan="3" align="center"><B>DATA PEGAWAI</B></td>
  </tr>
  <tr>
    <td>Nama</td>
    <td><b>:</b></td>
    <td><div id="suggest">
      <input type="text" onKeyUp="suggest(this.value);" onBlur="fill2();" id="kode" size="25"/>
      <div class="suggestionsBox" id="suggestions" style="display: none;"> <img src="arrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
            <div class="suggestionList" id="suggestionsList"> &nbsp; </div>
      </div>
    </div></td>
  </tr>
  <tr>
    <td>NIP</td>
    <td><b>:</b></td>
    <td><input type="text" onBlur="fill();" id="country"  size="30"/></td>
  </tr>
  <tr>
    <td>Jabatan</td>
    <td><b>:</b></td>
    <td><input type="text" onBlur="fill3();" id="country1"  size="30"/></td>
  </tr>
</table>
</body>
</html>
Explanation :
<table width="600" align="center" bgcolor="#CCCCCC"></table>
Forming all the tables that are in files index.php

<div id="suggest">
      <input type="text" onKeyUp="suggest(this.value);" onBlur="fill2();" id="kode" size="25"/>
      <div class="suggestionsBox" id="suggestions" style="display: none;"> <img src="arrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
            <div class="suggestionList" id="suggestionsList"> &nbsp; </div>
      </div>
    </div>
Id suggest Displays located on suggestbox.js, will be explained in the next step. If you type the name of an employee, then later we will create two new columns to the placement of NIP and office employees.

<input type="text" onBlur="fill();" id="country"  size="30"/>
This is the column where NIP is, will fill itself if you type the name of the employee.

<input type="text" onBlur="fill3();" id="country1"  size="30"/>
This is the column where the position is located, will fill itself if you type the name of the employee.



Step three:
Create files jquery.js because we have put the name to the index.php files
<script type="text/javascript" src="jquery.js"></script>
Because it is too long source code of this jquery.js then you should download the files jquery.js below.



Step four:
Create files suggestbox.js because our name was put on the files index.php <script type="text/javascript" src="suggestbox.js"></script>

Here's the source code suggestbox.js
      function suggest(inputString){
            if(inputString.length == 0) {
                  $('#suggestions').fadeOut();
            } else {
            $('#country').addClass('load');
            $('#country1').addClass('load');
                  $.post("autosuggest.php", {queryString: ""+inputString+""}, function(data){
                        if(data.length >0) {
                              $('#suggestions').fadeIn();
                              $('#suggestionsList').html(data);
                              $('#country').removeClass('load');
                              $('#country1').removeClass('load');
                        }
                  });
            }
      }
     
      function fill(thisValue) {
            $('#country').val(thisValue);
            setTimeout("$('#suggestions').fadeOut();", 100);
      }

      function fill3(thisValue) {
            $('#country1').val(thisValue);
            setTimeout("$('#suggestions').fadeOut();", 100);
      }
     
      function fill2(thisValue) {
            $('#kode').val(thisValue);
            setTimeout("$('#suggestions').fadeOut();", 100);
      }



Step five:
Create a style.css is to enhance employee name calling that will click later, we now create files style.css
Here's the source code style.css
      #result {
            height:20px;
            font-size:12px;
            font-family:Arial, Helvetica, sans-serif;
            color:#333;
            padding:5px;
            margin-bottom:10px;
            background-color:#FFFF99;
      }
      #country{
            padding:3px;
            border:1px #CCC solid;
            font-size:12px;
      }
      #country1{
            padding:3px;
            border:1px #CCC solid;
            font-size:12px;
      }
      .suggestionsBox {
            position: absolute;
            left: 136px;
            top:0px;
            margin: 16px 00px 0px 0px;
            width: 240px;
            padding:0px;
            background-color:#999999;
            border-top: 3px solid #999999;
            color: #fff;
      }
      .suggestionList {
            margin: 0px;
            padding: 0px;
      }
      .suggestionList ul li {
            list-style:none;
            margin: 0px;
            padding: 6px;
            border-bottom:1px dotted #666;
            cursor: pointer;
      }
      .suggestionList ul li:hover {
            background-color: #FC3;
            color:#000;
      }

      ul {
            font-family:Arial, Helvetica, sans-serif;
            font-size:11px;
            color:#FFF;
            padding:0;
            margin:0;
      }
     
      .load{
      background-image:url(loader.gif);
      background-position:right;
      background-repeat:no-repeat;
      }
     
      #suggest {
            position:relative;
      }



Step six:
Create files autosuggest.php to display employee data we have designed before. Here's the source code autosuggest.php

<?php
   $db = new mysqli('localhost', 'root' ,'password', 'barupegawai');
     
      if(!$db) {
            echo 'Could not connect to the database.';
      } else {
     
            if(isset($_POST['queryString'])) {
                  $queryString = $db->real_escape_string($_POST['queryString']);
                 
                  if(strlen($queryString) >0) {

                        $query = $db->query("SELECT nip_pegawai,nama_pegawai,jabatan_pegawai FROM tabel_pegawai WHERE nama_pegawai LIKE '$queryString%'");
                       
                        if($query) {
                        echo '<ul>';
                              while ($result = $query ->fetch_object()) {
                  echo '<li onClick="fill(\''.addslashes($result->nip_pegawai).'\'); fill3(\''.addslashes($result->jabatan_pegawai).'\'); fill2(\''.addslashes($result->nama_pegawai).'\');">'.$result->nama_pegawai.'&nbsp;&nbsp;'.$result->nip_pegawai.'&nbsp;&nbsp;'.$result->jabatan_pegawai.'</li>';
                        }
                        echo '</ul>';
                             
                        }
                        else {
                              echo 'OOPS we had a problem :(';
                        }
                  } else {
                        // do nothing
                  }
            } else {
                  echo 'There should be no direct access to this script!';
            }
      }
?>

Explanation :
At $db = new mysqli('localhost', 'root' ,'password', 'barupegawai');
Customize your username and password on your computer



Step seven:
Add images below and place it in the folder "new" for loading and arrows when we add employee data will be seen.

Once everything is finished, put all the files and images in a folder before "new" so that we can open these files with names http://localhost/new

If you can not understand with all the information above, you can download all the files and images below.


Download index.php
Download jquery.js
Download style.css

Download autosuggest.php

Download suggestbox.js


 Copy image and save to a folder "new"

Copy image and save to a folder "new"

0 komentar:

Post a Comment

if you have any questions about posting, feel free to comment.
thank you