API tools faq
paste
farfnd

pendaftar.html

farfnd
Dec 10th, 2021 (edited)
111
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 10.33 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en"><head>
  3. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title>Pendaftar - SMK Coding</title>
  7.  
  8.     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  9.     <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
  10.    
  11.     <link rel="stylesheet" href="style.css">
  12. </head>
  13.  
  14. <body>
  15.   <main class="lihat-pendaftar">
  16.     <header>
  17.       <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  18.         <div class="container-fluid">
  19.           <a class="navbar-brand" href="index.html">
  20.             Pendaftaran Siswa Baru SMK Coding
  21.           </a>
  22.           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
  23.             <span class="navbar-toggler-icon"></span>
  24.           </button>
  25.           <div class="collapse navbar-collapse" id="navbarCollapse">
  26.             <ul class="navbar-nav me-auto mb-2 mb-md-0">
  27.               <li class="nav-item">
  28.                 <a class="nav-link" href="daftar.html">Daftar Baru</a>
  29.               </li>
  30.               <li class="nav-item">
  31.                 <a class="nav-link active" href="pendaftar.html">Lihat Pendaftar</a>
  32.               </li>
  33.             </ul>
  34.           </div>
  35.         </div>
  36.       </nav>
  37.     </header>
  38.  
  39.     <div class="container">
  40.       <div class="row">
  41.           <div class="col-md-12">
  42.             <div class="row mb-3">
  43.               <div class="col-sm-6">
  44.                 <h2>Siswa yang sudah mendaftar</h2>
  45.               </div>
  46.               <div class="col-sm-6 float-end">
  47.                 <a href="daftar.html" class="btn btn-primary mb-2 float-end">Daftar baru</a>
  48.               </div>
  49.             </div>
  50.  
  51.             <table class="table table-striped">
  52.               <thead>
  53.                 <tr>
  54.                   <th scope="col">No</th>
  55.                   <th scope="col">Nama</th>
  56.                   <th scope="col">Alamat</th>
  57.                   <th scope="col">Jenis Kelamin</th>
  58.                   <th scope="col">Agama</th>
  59.                   <th scope="col">Sekolah Asal</th>
  60.                   <th scope="col">Aksi</th>
  61.                 </tr>
  62.               </thead>
  63.               <tbody id="listSiswa">
  64.                  
  65.               </tbody>
  66.             </table>
  67.           </div>
  68.       </div>
  69.   </div>
  70.  
  71.   <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
  72.     <div class="modal-dialog">
  73.       <div class="modal-content">
  74.         <div class="modal-header">
  75.           <h5 class="modal-title" id="editModalLabel">Edit Data Pendaftar</h5>
  76.           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  77.         </div>
  78.         <form id="form-edit">
  79.           <div class="modal-body">
  80.             <div class="form-floating mb-3">
  81.               <input type="text" class="form-control" name="nama" id="nama" placeholder="Nama lengkap Anda" required>
  82.               <label for="nama">Nama Lengkap</label>
  83.             </div>
  84.             <div class="row">
  85.               <div class="col-md-6">
  86.                 <label for="jenis_kelamin">Jenis Kelamin</label>
  87.                 <select class="form-select form-floating mb-3" name="jenis_kelamin" id="jenis_kelamin" required>
  88.                   <option label="Pilih jenis kelamin" hidden></option>
  89.                   <option value="L">Laki-Laki</option>
  90.                   <option value="P">Perempuan</option>
  91.                 </select>
  92.               </div>
  93.               <div class="col-md-6">
  94.                 <label for="agama">Agama</label>
  95.                 <select class="form-select form-floating mb-3" name="agama" id="agama" required>
  96.                   <option label="Pilih agama" hidden></option>
  97.                   <option value="Islam">Islam</option>
  98.                   <option value="Kristen">Kristen</option>
  99.                   <option value="Katolik">Katolik</option>
  100.                   <option value="Hindu">Hindu</option>
  101.                   <option value="Buddha">Buddha</option>
  102.                   <option value="Khonghucu">Khonghucu</option>
  103.                 </select>
  104.               </div>
  105.             </div>
  106.             <div class="form-floating mb-3">
  107.               <input type="text" class="form-control" name="sekolah_asal" id="sekolah_asal" placeholder="Sekolah asal Anda" required>
  108.               <label for="sekolah_asal">Sekolah Asal</label>
  109.             </div>
  110.             <div class="form-floating mb-3">
  111.               <textarea class="form-control" placeholder="Alamat Anda" name="alamat" id="alamat" style="height: 100px" required></textarea>
  112.               <label for="alamat">Alamat</label>
  113.             </div>
  114.           </div>
  115.           <div class="modal-footer">
  116.             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
  117.             <button type="button" class="btn btn-primary" id="edit-btn">Simpan</button>
  118.           </div>
  119.         </form>
  120.       </div>
  121.     </div>
  122.   </div>
  123.  
  124.   <footer class="text-muted text-center">
  125.     <div class="container">
  126.       <p class="text-dark">
  127.         &copy; <a href="https://farfnd.github.io" style="text-decoration: none;">FA</a> 2021
  128.       </p>
  129.     </div>
  130.   </footer>
  131.  
  132.   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  133.   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  134.   <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  135.  
  136.   <script>
  137.     $(document).ready( () =>{
  138.         $.ajax({
  139.             type: 'GET',
  140.             url: "php/read_list.php",
  141.             success: function(resultData) {
  142.                 // console.log(resultData)
  143.                 resultData.split("\n").forEach(element => {
  144.                   if(element){
  145.                     let data = JSON.parse(element);
  146.                     if(!data) return;
  147.  
  148.                     $('#listSiswa').append(`
  149.                     <tr>
  150.                         <td>${data.id}</td>
  151.                         <td>${data.nama}</td>
  152.                         <td>${data.alamat}</td>
  153.                         <td>${data.jenis_kelamin}</td>
  154.                         <td>${data.agama}</td>
  155.                         <td>${data.sekolah_asal}</td>
  156.                         <td>
  157.                             <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#editModal" onclick="getDataSiswa(${data.id})">Edit</button>&nbsp;
  158.                             <button class="btn btn-danger btn-sm" onclick="deleteDataSiswa(${data.id})">Hapus</button>
  159.                         </td>
  160.                     </tr>
  161.                     `)
  162.                   }
  163.                 });
  164.             }
  165.         });
  166.     });
  167.  
  168.     const getDataSiswa = (id => {
  169.       $.ajax({
  170.             type: 'GET',
  171.             url: "php/read_data_siswa.php?id=" + id,
  172.             success: function(resultData) {
  173.                 let data = JSON.parse(resultData);
  174.                 $('#edit-btn').data('id', id);
  175.                 $('#nama').val(data.nama);
  176.                 $('#jenis_kelamin option[value='+data.jenis_kelamin+']').attr('selected','selected');
  177.                 $('#agama option[value='+data.agama+']').attr('selected','selected');
  178.                 $('#sekolah_asal').val(data.sekolah_asal);
  179.                 $('#alamat').val(data.alamat);
  180.             }
  181.         });
  182.     });
  183.  
  184.     $('#edit-btn').on('click', () => {
  185.       let dataSiswa = {
  186.         id: $('#edit-btn').data('id'),
  187.         nama: $('#nama').val(),
  188.         jenis_kelamin: $('#jenis_kelamin').val(),
  189.         agama: $('#agama').val(),
  190.         sekolah_asal: $('#sekolah_asal').val(),
  191.         alamat: $('#alamat').val(),
  192.       }
  193.  
  194.       let flag = false;
  195.       if(!dataSiswa.nama.length ||
  196.           !dataSiswa.jenis_kelamin.length ||
  197.           !dataSiswa.agama.length ||
  198.           !dataSiswa.sekolah_asal.length ||
  199.           !dataSiswa.alamat.length) flag = true
  200.  
  201.       if(!flag){
  202.           $.ajax({
  203.             type: 'POST',
  204.             url: "php/update.php",
  205.             data: dataSiswa,
  206.             success: function(resultData) {
  207.               Swal.fire({
  208.                 icon: 'success',
  209.                 title: 'Edit data berhasil',
  210.                 text: 'Data Anda berhasil diperbarui',
  211.                 heightAuto: false
  212.               }).then((result) => {
  213.                   if (result.isConfirmed) {
  214.                       location.reload();
  215.                   }
  216.               })
  217.             }
  218.           });
  219.       }else{
  220.         Swal.fire({
  221.           icon: 'error',
  222.           title: 'Terjadi kesalahan',
  223.           text: 'Periksa kembali data yang Anda masukkan',
  224.           heightAuto: false
  225.         });
  226.       }
  227.     });
  228.  
  229.     const deleteDataSiswa = (id => {
  230.       Swal.fire({
  231.         title: 'Apakah Anda yakin akan menghapus data pendaftaran?',
  232.         text: "Tindakan ini tidak bisa dibatalkan.",
  233.         icon: 'warning',
  234.         showCancelButton: true,
  235.         confirmButtonColor: '#dc3545',
  236.         cancelButtonColor: '#0d6efd',
  237.         confirmButtonText: 'Hapus',
  238.         cancelButtonText: 'Batal',
  239.         reverseButtons: true
  240.       }).then((result) => {
  241.         if (result.isConfirmed) {
  242.           $.ajax({
  243.             type: 'GET',
  244.             url: "php/delete.php?id=" + id,
  245.             success: function(resultData) {
  246.               Swal.fire({
  247.                 icon: 'success',
  248.                 title: 'Hapus data berhasil',
  249.                 text: 'Data Anda berhasil dihapus',
  250.                 heightAuto: false
  251.               }).then((result) => {
  252.                   if (result.isConfirmed) {
  253.                       location.reload();
  254.                   }
  255.               })
  256.             }
  257.           });
  258.         }
  259.       })
  260.     });
  261. </script>
  262.  
  263. </body>
  264. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!