Skip to main content

PWEB-AJAX XML


Nama : Bobbi Adiyta
NRP : 05111740000099
KELAS : PWEB C

Saya membuat tugas pembuatan pendaftaran siswa menjadi xml, laman index.php sekarang bisa langsung mengakses:
  1. List Siswa (list siswa yang sudah mendaftar)
  2. Pendafataran siswa(formulir pendaftaran siswa)
Berikut adalah codingan yang saya gunakan, ada 8 file yang saya gunakan
  1. config.php
     <?php  
 $server = "localhost";  
 $user = "root";  
 $password = "";  
 $nama_database = "pendaftaran_siswa";  
 $db = mysqli_connect($server, $user, $password, $nama_database);  
 // echo "Berhasil bossku";  
 if( !$db ){  
   die("Gagal terhubung dengan database: " . mysqli_connect_error());  
 }  
 ?>
  2. index.php
     <!DOCTYPE html>  
 <html>  
 <head>  
      <title>Pendaftaran siswa baru|| SMA PetaniCoding</title>  
      <script>  
     function showsiswa() {  
       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 edit() {  
       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-edit.php", true);  
      xhttp.send();  
     }  
   </script>  
 </head>  
 <body style="text-align: center;">  
           <header>  
                <h3>Pendaftaran siswa baru</h3>  
                <h1>SMA PetaniCoding</h1>  
           </header>  
           <h4>Menu</h4>  
             <p align="center"><button type="button" onclick="showsiswa()">List Siswa</button></p>  
             <p align="center"><button type="button" onclick="daftar()">Pendaftaran Siswa</button></p>  
             </div>  
             <div id="demo">  
             </div>  
 </body>  
 </html>
  3. form-daftar.php
     <!DOCTYPE html>  
 <html>  
 <head>  
      <title>Formulir Pendaftaran Siswa Baru ||SMA PetaniCoding</title>  
 </head>  
 <body style="text-align: center;">  
      <header>  
           <h3>Formulir Pendaftaran Siswa Baru</h3>  
      </header>  
 <form action="proses-pendaftaran.php" method="POST">  
     <fieldset>  
     <p>  
       <label for="nama">Nama: </label>  
       <input type="text" name="nama" placeholder="nama lengkap" />  
     </p>  
     <p>  
       <label for="alamat">Alamat: </label>  
       <textarea name="alamat"></textarea>  
     </p>  
     <p>  
       <label for="jenis_kelamin">Jenis Kelamin: </label>  
       <label><input type="radio" name="jenis_kelamin" value="laki-laki"> Laki-laki</label>  
       <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" />  
     </p>  
     <p>  
       <input type="submit" value="Daftar" name="daftar" />  
     </p>  
     </fieldset>  
   </form>  
 </body>  
 </html>
  4. 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 (name, 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...");  
 }  
 ?>
  5. form-edit.php
     <?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...");  
 }  
 ?>  
 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>Formulir Edit Siswa | SMK Coding</title>  
 </head>  
 <body style="text-align: center;">  
   <header>  
     <h3>Formulir Edit Siswa</h3>  
   </header>  
   <form action="proses-edit.php" method="POST">  
     <fieldset>  
       <input type="hidden" name="id" value="<?php echo $siswa['id'] ?>" />  
     <p>  
       <label for="name">nama: </label>  
       <input type="text" name="name" placeholder="name lengkap" value="<?php echo $siswa['name'] ?>" />  
     </p>  
     <p>  
       <label for="alamat">Alamat: </label>  
       <textarea 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 type="text" name="sekolah_asal" placeholder="name sekolah" value="<?php echo $siswa['sekolah_asal'] ?>" />  
     </p>  
     <p>  
       <input type="submit" value="Simpan" name="simpan" />  
     </p>  
     </fieldset>  
   </form>  
   </body>  
 </html>
  6. 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'];  
   $name = $_POST['name'];  
   $alamat = $_POST['alamat'];  
   $jk = $_POST['jenis_kelamin'];  
   $agama = $_POST['agama'];  
   $sekolah = $_POST['sekolah_asal'];  
   // buat query update  
   $sql = "UPDATE calon_siswa SET name='$name', 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...");  
 }  
 ?>
  7. 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...");  
 }  
 ?>
  8. list-siswa.php
     <?php include("config.php"); ?>  
 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>Pendaftaran Siswa Baru || SMA PetaniCoding</title>  
 </head>  
 <body style="text-align: center;">  
   <header>  
     <h3>Siswa yang sudah mendaftar</h3>  
   </header>  
   <br>  
   <table border="1" align="center">  
   <thead>  
     <tr>  
       <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['name']."</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>  
   <p>Total: <?php echo mysqli_num_rows($query) ?></p>  
   </body>  
 </html>
Berikut adalah hasilnya:


 
Tampilan awal
 -------------------------------------------------------------------------------------------------------


 
Tampilan List Siswa
 -------------------------------------------------------------------------------------------------------


 
Tampilan Form Pendaftaran Siswa
 -------------------------------------------------------------------------------------------------------


 
Hasil setelah mendaftarkan siswa baru
 -------------------------------------------------------------------------------------------------------


 
Tampilan edit data siswa
 -------------------------------------------------------------------------------------------------------


 
Tampilan hasil edit data siswa
 -------------------------------------------------------------------------------------------------------


 
Tampilan setelah melakukan delete data ke7
 -------------------------------------------------------------------------------------------------------

Labels:

Comments

Post a Comment

Popular posts from this blog

APSI-TUGAS 1 Sistem Informasi IndoPremier

NAMA: Bobbi Aditya NRP: 05111740000099 KELAS: APSI C Sistem informasi yang saya gunakan adalah IndoPremier. IndoPremier adalah perusahaan penyedia jasa keuangan terintegrasi di bidang pasar modal yang melayani klien individu maupun korporasi. Melalui anak perusahaannya (PT Indo Premier Investment Management), IndoPremier mengembangkan bisnis aset manajemennya. Dan menyadari bahwa salah satu kompetensi utama IndoPremier adalah pengembangan teknologi, maka pada tahun 2007, diluncurkan Exchange Traded Fund saham pertama di Indonesia. Secara singkat, IndoPremier adalah salah satu sekuritas yang bisa dipakai oleh masyarakt Indonesia untuk melakukan trading saham. Fasilitas dari IndoPremier adalah: IPOTGO (Web Investasi) IPOTKU(Cara Modern Menabung) IPOTFUND(Investasi Reksadana) IPOTSTOCK(Investasi Saham) IPOTNEWS(Web Berita Investasi) Sistem Informasi pada umumnya memiliki bagan seperti di bawah ini Pada IndoPremier, sistem informasi ini juga berlaku, penjelasanny...
Post a Comment
Read more

PWEB-Tugas Membuat registrasi laman berita

Dari website berita yang saya buat, sekarang saya tambahlan laman registrasi dalam laman berita saya. Ini adalah link laman berita saya ( ini linknya ) atau bisa diliat dibawah ini source code HTML nya adalah: <!DOCTYPE html> <html> <head> <title>Tech in Asia - Connecting Asia's startup ecosystem</title> <link rel="stylesheet" href="customtech.css"/> </head> <body> <div class="header"> <div class="menu"> <ul> <li><a href="#">News</a></li> <li><a href="#">Job</a></li> <li><a href="#">Companies</a></li> <li><a href="#">Event</a></li> <li><a href="#">About</a></li...
Post a Comment
Read more

PWEB-UAS

Nama : Bobbi Aditya NRP : 05111740000099 Kelas : PWEB C Dalam pengerjaan tugas ini, saya tidak menggunakan framework apa-apa. Pada awalnya, saya mencoba menggunakan framework dalam proses pengerjaan ujian ini. Tetapi pada pertengahan proses pembuatan, saya mengalami kesusahan dalam menyelesaikannya. Oleh karena itu, karena keterbatasan waktu juga, saya memutuskan untuk menyelesaikan tugas ini tanpa menggunakan framework Dalam rancangan database saya, saya membuat 2 buah tabel. Tabel pertama berguna untuk menyimpan data user yang nantinya dibutuhkan pada saat login. Di dalam tabel pertama ini terdapat 3 buah atribut. Rancangannya adalah sebagai berikut: Tabel kedua berguna untuk menyimpan data siswa, rancangan dari tabel kedua adalah sebagai berikut Untuk rancangan interfacesnya saya berencana untuk membedakan tampilan login awal, dengan tampilan sesudah login. Setelah login, maka tampilannya akan berubah menjadi seperti ini:: Hasil dari pekerjaan saya bisa diakse...
Post a Comment
Read more