PHP / CSS / JavaScript

LIst View DB

<?php
  $s="select * from `customer`";
$q=getData($conn,$s);
foreach($q as $d){
$id_customer0=$d["id_customer"];
$nama_customer=$d["nama_customer"];
echo"<option value='$id_customer0' ";if($id_customer0==$id_customer){echo"selected";} echo"> $nama_customer($id_customer0)  </option>";
}
?>
+ ============================================================= +

Die

if(!isset($_SESSION["cid"])){
die("<script>location.href='login.php';</script>");

}

+ ============================================================= +

Ajax

File  getsiswa.php

<?php
if (version_compare(phpversion(), "5.3.0", ">=")  == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);
  ?>
<?php
require_once"konmysqli.php";

$kelas=$_GET["q"];
date_default_timezone_set("Asia/Jakarta");
?>


<select name="nis" id="nis">
  <option value="" selected="selected">-- Pilih --</option>
  <?php
$s="select * from `tb_siswa` where kelas='$kelas' ";
$q=getData($conn,$s);
foreach($q as $d) {
$nis0=$d["nis"];
$nama_siswa=$d["nama_siswa"];
   echo"<option value='$nis0' "; echo">$nis0 - $nama_siswa</option>";
}
?>
</select>


<?php
function getData($conn,$sql){
$rs=$conn->query($sql);
$rs->data_seek(0);
$arr = $rs->fetch_all(MYSQLI_ASSOC);
//foreach($arr as $row) {
//  echo $row['nama_kelas'] . '*<br>';
//}

$rs->free();
return $arr;
}

?>

File Javascript

<script type="text/javascript">
var xmlHttp

function showUser(str){
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null){
 alert ("Browser tidak support HTTP Request")
 return
 }
var url="getsiswa.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=SC1
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function SC1() {
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText
 }
}

function GetXmlHttpObject(){
var xmlHttp=null;
try{xmlHttp=new XMLHttpRequest();}
catch (e){
try{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}
  catch (e){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
 }
return xmlHttp;
}
</script>


field Kelas

<select name="kelas" id="kelas" onChange="showUser(this.value)">

Field Nis

<div id="txtHint">

+ ========================================================= +
Function 

function getAdmin($conn,$kode){
$field="username";
$sql="SELECT `$field` FROM `tb_admin` where `kode_admin`='$kode'";
$rs=$conn->query($sql);
$rs->data_seek(0);
$row = $rs->fetch_assoc();
$rs->free();
    return $row[$field];

}

 <?php
  $s="select * from `tb_periode`";
$q=getData($conn,$s);
foreach($q as $d){
$id_periode0=$d["id_periode"];
$nama_periode=$d["nama_periode"];
echo"<option value='$id_periode0' ";if($id_periode0==$id_periode){echo"selected";} echo">$id_periode0 - $nama_periode  </option>";
}
?>
//---------------------------------------------------------------------------------------------------------------//


Refres Otomatis 

1. Cara Pertama (Refresh menuju ke link lain) :


<script>
setTimeout('location.href=\"halamanweb/index.php"' ,40000);
</script>


Keterangan : Kode yang dicetak tebal 40000 tersebut adalah waktu refresh setiap 40 Detik. Jika anda ingin mengubahnya menjadi 20 detik. ubah saja menjadi 20000. halamanweb/index.php adalah tujuan refresh.

2. Cara Kedua (Refresh Current Page -- > Refresh Saja): 

Anda dapat meletakkan kode berikut setelah tag </head> pada halaman web anda :

<meta http-equiv="refresh" content="60"/>

Keterangan : content="60" menandakan halaman web akan refresh setiap 60 Detik.

/================================================================================/

Validasi Form JS

<script type="text/javascript">
function validasi_input(form){
  if (form.nama_user.value == ""){
    alert("Nama User masih kosong!");
    form.nama_user.focus();
    return (false);
  }

  if (form.email.value == ""){
    alert("Email masih kosong!");
    form.email.focus();
    return (false);
  }

    if (form.nohp.value == ""){
    alert("No Hp masih kosong!");
    form.nohp.focus();
    return (false);
  }

     if (form.username.value == ""){
    alert("username masih kosong!");
    form.username.focus();
    return (false);
  }

       if (form.password.value == ""){
    alert("password masih kosong!");
    form.password.focus();
    return (false);
  }

  pola_email=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
  if (!pola_email.test(form.email.value)){
    alert ('Penulisan Email tidak benar');
    form.email.focus();
    return false;

  }

 pola_username=/^[a-zA-Z0-9\_\-]{5,100}$/;
   if (!pola_username.test(form.username.value)){
      alert ('Username minimal 5 karakter dan hanya boleh Huruf atau Angka!');
      form.username.focus();
      return false;
  }
  var mincar = 4;
  if (form.password.value.length < mincar){
    alert("Panjang Password Minimal 4 Karater!");
    form.password.focus();
    return (false);
  }

return (true);

}
</script>

//----------------------------
onsubmit="return validasi_input(this)"
//-------------------------

<------------------------------------------------------------------------------------------------------------->

Repassword

<script type="text/javascript">
    $(function () {
        $("#Daftar").click(function () {
            var p = $("#password").val();
            var r = $("#repassword").val();
            if (p != r) {
                alert("Passwords tidak sesuai");
                return false;
            }
            return true;
        });
    });

</script>

 <div class="col-md-6">
                  <input class="form-control" id="password" type="password" name="password" placeholder="Your Password *" required="required"  data-validation-required-message="Please enter your Password.">
                  <p class="help-block text-danger"></p>
                </div>

<tr>

  <div class="col-md-6">
                  <input class="form-control" id="repassword" type="password" name="repassword" placeholder="Re Type Password  *" required="required"  data-validation-required-message="Please enter your Password.">
                  <p class="help-block text-danger"></p>
                </div>

<-------------------------------------------------------------------------------------------------------------->

Show / Hiden Password

<style>
#password, #username {
    width: 200px;
    padding: 8px;
    border: 1px solid #ddd;
}
input[type="submit"] {
    padding: 5px;
    width: 80px;
    border: 1px solid #ddd;
}
</style>


<body>
<div align="center">
    <form action="" method="post" id="form">
        <input type="text" id="username" placeholder="Username" /><br><br>
        <input type="password" id="password" placeholder="Password" />
        <div>
            <input type="checkbox" id="show-hide" name="show-hide" value="" />
            <label for="show-hide">Show password</label>
        </div>
        <p><input type="submit" value="Login" /></p>
    </form> 
    </div>
</body>

<script>
    (function() {
 
        var showHide = function( element, field ) {
            this.element = element;
            this.field = field;
         
            this.toggle(); 
        };
     
        showHide.prototype = {
            toggle: function() {
                var self = this;
                self.element.addEventListener( "change", function() {
                    if(self.element.checked) {self.field.setAttribute( "type", "text" );}
                    else {self.field.setAttribute( "type", "password" );}
                }, false);
            }
        };
     
        document.addEventListener( "DOMContentLoaded", function() {
            var checkbox = document.querySelector( "#show-hide" ),
                password = document.querySelector( "#password" ),
                form = document.querySelector( "#form" );
             
                form.addEventListener( "submit", function( e ) {
                    e.preventDefault();
                }, false);
             
                var toggler = new showHide( checkbox, password );
        });
     
    })();
</script>