TUGAS 8 FORM PENDAFTARAN MENGGUNAKAN AJAX

Nama : Kevin Ashil Faadilah
NRP : 05111740000178


Source code :

config.php

<?php

$server = "localhost";
$user = "root";
$password = "";
$nama_database = "pendaftaran_siswa";

$db = mysqli_connect($server, $user, $password, $nama_database);

if( !$db ){
   die("Gagal terhubung dengan database: " . mysqli_connect_error());
}

?>

form-pendaftaran.php

<!DOCTYPE html>
<html>
<head>
    <title>Formulir Pendaftaran Siswa Baru | SMA BudiKarya</title>
    <link rel="stylesheet" type="text/css" href="form-daftar_sty.css">
</head>

<body>
    <center>
    <header>
        <h3>Formulir Pendaftaran Siswa Baru</h3>
    </header> 
    </center>

    <form action="proses-pendaftaran.php" method="POST" onSubmit="validasi()">
    <div class="daftar">
        <fieldset>

        <p>
            <label for="nama">Nama: </label>
            <input type="text" name="nama" placeholder="Nama Lengkap" id="nama" />
        </p>
        <p>
            <label for="alamat">Alamat: </label>
            <textarea name="alamat" id="alamat"></textarea>
        </p>
        <p>
            <label for="jenis_kelamin">Jenis Kelamin: </label>
            <br>
            <label><input type="radio" name="jenis_kelamin" value="Laki-laki"> Laki-laki</label>
            <br>
            <label><input type="radio" name="jenis_kelamin" value="Perempuan"> Perempuan</label>
        </p>
        <p>
            <label for="agama">Agama: </label>
            <select name="agama">
                <option>Islam</option>
                <option>Kristen</option>
                <option>Hindu</option>
                <option>Budha</option>
                <option>Atheis</option>
            </select>
        </p>
        <p>
            <label for="sekolah_asal">Sekolah Asal: </label>
            <input type="text" name="sekolah_asal" placeholder="Nama Sekolah" id="sekolah"/>
        </p>
        <p>
            <input class="tombol" type="submit" value="Daftar" name="daftar" />
            <a href="index.php" class="back">Kembali</a>
        </p>
        </fieldset>
    </div>

    </form>

    <script type="text/javascript">
 
    </script>
    </body>

 
</html>

form-pendaftaran-css.css

body {
  /*width: 100%;*/
  font-family: sans-serif;
  background: #e9eaef;
}

input[type="text"],

textarea {
  padding: 8px;
  width: 95%;
  background: #fff;
  border: 0;
  font-size: 10pt;
  margin: 6px 0px;
  border-radius: 3px;
}

select{
  padding: 8px;
  width: 95%;
  background: #e9eaef;
  border: 0;
  font-size: 10pt; 
  margin: 6px 0px;
}

label {
  font-size: 10pt;
  color: black;
}

.daftar {
  padding: 1em;
  margin: 2em auto;
  width: 20em;
  background: #7bbcb6;
  font-weight: bolder;
  border-radius: 10px;
}

.tombol {
  transition-duration: 0.4s;
  background: #e9eaef;
  color: black;
  font-size: 14px;
  font-weight: bold;
  border: 0;
  padding: 5px 8px;
  border-radius: 3px;
}

.tombol:hover {
  background-color: #e3dac9;
  color: #fff;
}

.back {
  background-color: #e9eaef;
  color: black;
  font-size: 14px;
  text-decoration: none;
  margin-left: 5px;
  padding: 5px 8px;
  border-radius: 3px;
}

<?php

include("config.php");

// kalau tidak ada id di query string
if( !isset($_GET['id']) ){
   header('Location: list-siswa.php');
}

//ambil id dari query string
$id = $_GET['id'];

// buat query untuk ambil data dari database
$sql = "SELECT * FROM calon_siswa WHERE id=$id";
$query = mysqli_query($db, $sql);
$siswa = mysqli_fetch_assoc($query);

// jika data yang di-edit tidak ditemukan
if( mysqli_num_rows($query) < 1 ){
   die("data tidak ditemukan...");
}

?>

form-edit.php

<!DOCTYPE html>
<html>
<head>
    <title>Formulir Edit Siswa | SMA BudiKarya</title>
    <link rel="stylesheet" type="text/css" href="form-edit_sty.css">
</head>

<body>
    <center>
    <header>
        <h2 style="font-weight: bolder">Formulir Edit Siswa</h2>
    </header>
    </center>

    <form target="_blank" action="proses-edit.php" method="POST" onSubmit="index.php">
    <div class="edit">
        <fieldset>

            <input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />

        <p>
            <label for="nama">Nama: </label>
            <input id="nama" type="text" name="nama" placeholder="nama lengkap" value="<?php echo $siswa['nama'] ?>" />
        </p>
        <p>
            <label for="alamat">Alamat: </label>
            <textarea id="alamat" name="alamat"><?php echo $siswa['alamat'] ?></textarea>
        </p>
        <p>
            <label for="jenis_kelamin">Jenis Kelamin: </label>
            <?php $jk = $siswa['jenis_kelamin']; ?>
            <label><input type="radio" name="jenis_kelamin" value="Laki-laki" <?php echo ($jk == 'laki-laki') ? "checked": "" ?>> Laki-laki</label>
            <label><input type="radio" name="jenis_kelamin" value="Perempuan" <?php echo ($jk == 'perempuan') ? "checked": "" ?>> Perempuan</label>
        </p>
        <p>
            <label for="agama">Agama: </label>
            <?php $agama = $siswa['agama']; ?>
            <select name="agama">
                <option <?php echo ($agama == 'Islam') ? "selected": "" ?>>Islam</option>
                <option <?php echo ($agama == 'Kristen') ? "selected": "" ?>>Kristen</option>
                <option <?php echo ($agama == 'Hindu') ? "selected": "" ?>>Hindu</option>
                <option <?php echo ($agama == 'Budha') ? "selected": "" ?>>Budha</option>
                <option <?php echo ($agama == 'Atheis') ? "selected": "" ?>>Atheis</option>
            </select>
        </p>
        <p>
            <label for="sekolah_asal">Sekolah Asal: </label>
            <input id="sekolah" type="text" name="sekolah_asal" placeholder="nama sekolah" value="<?php echo $siswa['sekolah_asal'] ?>" />
        </p>
        <p>
            <input class="tombol" type="submit" value="Simpan" name="simpan"/>
            <a href="index.php" class="back">Kembali</a>
        </p>

        </fieldset>

    </div>
    </form>
 
    <script type="text/javascript">
    function validasi()
    {
        var nama = document.getElementById("nama").value;
        var alamat = document.getElementById("alamat").value;
        var sekolah = document.getElementById("sekolah").value;
        if (nama != "" && alamat !="" && sekolah !="") {
           return true;
        }else{
            alert('Anda harus mengisi data dengan lengkap !');
        }
    }
    </script>
 
    </body>
</html>

form-edit-css.css

body {
  font-family: sans-serif;
  background: #fff;
}

input[type="text"],

textarea {
  padding: 8px;
  width: 95%;
  background: #fff;
  border: 0;
  font-size: 10pt;
  margin: 6px 0px;
  border-radius: 3px;
}

select{
  padding: 8px;
  width: 95%;
  background: #fff;
  border: 0;
  font-size: 10pt;
  margin: 6px 0px;
}

label {
  font-size: 10pt;
  color: black;
}

.edit {
  padding: 1em;
  margin: 2em auto;
  width: 20em;
  background: #fff;
  font-weight: bolder;
  border-radius: 10px;
}

.tombol {
  transition-duration: 0.4s;
  background: #fff;
  color: black;
  font-size: 14px;
  font-weight: bold;
  border: 0;
  padding: 5px 8px;
  border-radius: 3px;
}

.tombol:hover {
  background-color: #e3dac9;
  color: #fff;
}

.back {
  background-color: #fff;
  color: black;
  font-size: 14px;
  text-decoration: none;
  margin-left: 5px;
  padding: 5px 8px;
  border-radius: 3px;
}

hapus.php

<?php

include("config.php");

if( isset($_GET['id']) ){

   // ambil id dari query string
   $id = $_GET['id'];

   // buat query hapus
   $sql = "DELETE FROM calon_siswa WHERE id=$id";
   $query = mysqli_query($db, $sql);

   // apakah query hapus berhasil?
   if( $query ){
       header('Location: index.php');
   } else {
       die("gagal menghapus...");
   }

} else {
   die("akses dilarang...");
}

?>

index.php

<!DOCTYPE html>
 <html>
 <head>
      <title>Formulir Pendaftaran Siswa Baru | SMA BudiKarya</title>
      <link rel="stylesheet" type="text/css" href="index_sty.css">
      <script type="text/javascript" src="ajax.js"></script>
 </head>
<body>
    <center class="header">
        <header>
            <img id="logo1" src="logo1.png">
            <img id="logo2" src="logo2.png">
            <h2>Pendaftaran Siswa Baru</h2>
            <h1>SMA BudiKarya</h1>
        </header>
    </center>

    <div class="menu">
        <h3>Menu</h3>
            <p><a onclick="daftar()">Daftar Baru</a></p>
            <p><a onclick="tampil()">Pendaftar</a></p>
            <div id="demo">
           
    </div>
    <?php if(isset($_GET['status'])): ?>
        <p>
            <?php
               if($_GET['status'] == 'sukses'){
                   echo "Pendaftaran siswa baru berhasil!";
               } else {
                   echo "Pendaftaran gagal!";
               }
           ?>
        </p>
    <?php endif; ?>
    </body>
</html>

index-style.css

body {
    font-family: sans-serif;
    background: #fff;
}

a {
    color: #0060B6;
    text-decoration: none;
}

a:hover
{
     color:#00A0C6;
     text-decoration:none;
     cursor:pointer;
}

#logo1 {
    float: left;
    padding: 5px 5px 5px 5px;
    height: 80px;
    background-color: #fff;
    border-radius: 10px; 
    /*border : 2px solid #fff;*/
}

#logo2 {
    float: right;
    padding: 5px 5px 5px 5px;
    height: 80px;
    background-color: #fff;
    border-radius: 10px; 
    /*border : 2px solid #fff;*/
}

.header {
    background: #98e4d9;
    padding: 10px 10px 10px 10px;
        border-radius: 10px;
}

.menu {
    /*width: 100%;*/
    margin-top: 10px;
    background: #98e4d9;
    padding: 10px 10px 10px 10px;
        border-radius: 10px;
}

list-siswa.php

<?php include("config.php"); ?>

<!DOCTYPE html>
<html>
<head>
    <title>Pendaftaran Siswa Baru | SMA BudiKarya</title>
    <link rel="stylesheet" type="text/css" href="list-siswa_sty.css">
</head>

<body>
    <center>
    <header>
        <h2>Siswa yang Sudah Mendaftar</h2>
    </header> 
    </center>
 
    <div>
        <a onclick="daftar()">[+] Tambah Baru</a>

    </div>
    <br>
    <select>
        <option onclick="tampil()">Semua</option>
        <option onclick="laki()">Laki-laki</option>
        <option onclick="perempuan()">Perempuan</option>
    </select>
    <table>
    <thead>
        <tr style="background-color: #7bbcb6">
            <th>No</th>
            <th>Nama</th>
            <th>Alamat</th>
            <th>Jenis Kelamin</th>
            <th>Agama</th>
            <th>Sekolah Asal</th>
            <th>Tindakan</th>
        </tr>
    </thead>
    <tbody>

        <?php
       $sql = "SELECT * FROM calon_siswa";
       $query = mysqli_query($db, $sql);
       $nomor=0;
       while($siswa = mysqli_fetch_array($query)){
           echo "<tr>";
            $nomor++;
            echo "<td>".$nomor."</td>";
            echo "<td>".$siswa['nama']."</td>";
            echo "<td>".$siswa['alamat']."</td>";
            echo "<td>".$siswa['jenis_kelamin']."</td>";
            echo "<td>".$siswa['agama']."</td>";
            echo "<td>".$siswa['sekolah_asal']."</td>";

            echo "<td>";
            echo "<a href='form-edit.php?id=".$siswa['id']."'>Edit</a> | ";
            echo "<a href='hapus.php?id=".$siswa['id']."'>Hapus</a>";
            echo "</td>";

            echo "</tr>";
        }
        ?>

    </tbody>
    </table>

    <br>
        <a href="index.php" class="back">Kembali</a>
 

    <p>Total: <?php echo mysqli_num_rows($query) ?></p>

    </body>
</html>

list-siswa-style.css

body {
    font-family: sans-serif;
    background: #fff;
}

h2 {
    font-weight: bolder;
}
a {
    color: #fff;
    text-decoration: none;
}

a:hover
{
     color:#0060B6;
     text-decoration:none;
     cursor:pointer;
}

table {
    /*border-radius: 10px;*/
    font-style: sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid black;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #a8bdbf;
}

select{
    padding: 8px;
    width: 10%;
    background: #7bbcb6;
    border: 0;
    font-size: 10pt;
    margin: 6px 0px;
    border-radius: 5px;
}

proses-edit.php

<?php

include("config.php");

// cek apakah tombol simpan sudah diklik atau blum?
if(isset($_POST['simpan'])){

    // ambil data dari formulir
    $id = $_POST['id'];
    $nama = $_POST['nama'];
    $alamat = $_POST['alamat'];
    $jk = $_POST['jenis_kelamin'];
    $agama = $_POST['agama'];
    $sekolah = $_POST['sekolah_asal'];

    // buat query update
    $sql = "UPDATE calon_siswa SET nama='$nama', alamat='$alamat', jenis_kelamin='$jk', agama='$agama', sekolah_asal='$sekolah' WHERE id=$id";
    $query = mysqli_query($db, $sql);

    // apakah query update berhasil?
    if( $query ) {
        // kalau berhasil alihkan ke halaman list-siswa.php
        header('Location: index.php');
    } else {
        // kalau gagal tampilkan pesan
        die("Gagal menyimpan perubahan...");
    }


} else {
    die("Akses dilarang...");
}

?>

proses-pendaftaran.php

<?php
 include("config.php");
 ?>
 <script>
     function showsiswa() {
       if (window.XMLHttpRequest) {
         xhttp = new XMLHttpRequest();
        }
       xhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200){
         }
       };
      xhttp.open("GET", "index.html", true);
      xhttp.send();
     }
   </script>
 <?php
 if(isset($_POST['daftar'])){
     $nama = $_POST['nama'];
     $alamat = $_POST['alamat'];
     $jk = $_POST['jenis_kelamin'];
     $agama = $_POST['agama'];
     $sekolah_asal = $_POST['sekolah_asal'];
     $sql = "INSERT INTO calon_siswa (nama, alamat, jenis_kelamin, agama,sekolah_asal) VALUE ('$nama', '$alamat', '$jk', '$agama', '$sekolah_asal')";
     $query = mysqli_query($db, $sql);
  if( $query ) {
       header('Location:index.php');
     } else {
       echo "gagal daftar";
     }
 }
 else {
   die("Akses dilarang...");
 }
 ?>

ajax.js

function tampil() {
 if (window.XMLHttpRequest) {
   xhttp = new XMLHttpRequest();
  }
 xhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200){
    document.getElementById("demo").innerHTML = this.responseText;
   }
 };
xhttp.open("GET", "list-siswa.php", true);
xhttp.send();
}

function daftar() {
  if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
  }
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200){
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
xhttp.open("GET", "form-daftar.php", true);
xhttp.send();
}

function validasi()
{
  var nama = document.getElementById("nama").value;
  var alamat = document.getElementById("alamat").value;
  var sekolah = document.getElementById("sekolah").value;
  if (nama != "" && alamat != "" && sekolah != "") {
      return true;
  }else{
      alert('Anda harus mengisi data dengan lengkap !');
  }
}

function laki() {
 if (window.XMLHttpRequest) {
   xhttp = new XMLHttpRequest();
  }
 xhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200){
    document.getElementById("demo").innerHTML = this.responseText;
   }
 };
xhttp.open("GET", "list-l.php", true);
xhttp.send();
}

function perempuan() {
 if (window.XMLHttpRequest) {
   xhttp = new XMLHttpRequest();
  }
 xhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200){
    document.getElementById("demo").innerHTML = this.responseText;
   }
 };
xhttp.open("GET", "list-p.php", true);
xhttp.send();
}

<gambar menyusul>

Sekian dan Terima Kasih

Komentar

Posting Komentar

Postingan populer dari blog ini

FP PBO

Gambar
Pembuatan Aplikasi berbasis Android Aplikasi tentang Kamera dan Sensor GPS Kevin Ashil Faadilah 05111740000178 PBO-B Deskripsi singkat : Aplikasi ini memuat tentang Kamera yang dapat menangkap foto dan deteksi lokasi melalui Koordinat yang dimana menggunakan Sensor GPS disediakan oleh library pada android. Source Code dibagi menjadi dua, yaitu  a. Source Code Tampilan menggunakan file .xml  <? xml version ="1.0" encoding ="utf-8" ?> <androidx.constraintlayout.widget.ConstraintLayout xmlns: android ="http://schemas.android.com/apk/res/android" xmlns: app ="http://schemas.android.com/apk/res-auto" xmlns: tools ="http://schemas.android.com/tools" android :layout_width ="match_parent" android :layout_height ="match_parent" tools :context ="com.example.cobakamera.MainActivity" > <Button android :id ="@+id/btnAmbil" android :layout_width ="
Baca selengkapnya

TUGAS - 2 - PBKK

Gambar
TUGAS 2 PBKK : ROUTING MENGGUNAKAN FRAMEWORK CODEIGNITER NAMA : KEVIN ASHIL FAADILAH NRP : 05111740000178 KELAS : PBKK - A Penggunaan routing harus kita mulai dulu dari inisiasi pada modul routing itu sendiri, lebih tepatnya di routes kemudian kita setting pada controller Routing About.php Contact.php Hasilnya Welcome About Contact
Baca selengkapnya

Tugas 8 - Applet dan JavaFX

Gambar
Kevin Ashil F 05111740000178 PBO - B Applet Applet adalah sebuah tipe program yang dapat diletakkan dalam sebuah webpage sebagai dynamic content. Applet akan dijalankan oleh browser dan bekerja pada sisi client. Contoh program Hello World dalam applet java : import java.awt.*; import javax.swing.*; /** * Class HelloWorld - write a description of the class here * * @author Kevin Ashil F * @version v1.Hello */ public class TesApplet extends java.applet.Applet { public void paint(Graphics g){ int fontSize = 20; Font f = new Font("SansSerif", Font.BOLD, fontSize); g.setFont(f); g.setColor(Color.BLACK); int xCent = this.getSize().width/2; int yCent = this.getSize().height/2; String str = "Hello Java Applet"; FontMetrics fm = this.getFontMetrics(f); int wordXPos = xCent - (fm.stringWidth(str)/2); g.drawString(str, wordXPos, yCent); } Output : JavaFX JavaFX adalah
Baca selengkapnya