API tools faq
paste
farfnd

daftar.html

farfnd
Dec 10th, 2021 (edited)
106
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.16 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>Pendaftaran Siswa - 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="form-daftar">
  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 active" href="daftar.html">Daftar Baru</a>
  29.               </li>
  30.               <li class="nav-item">
  31.                 <a class="nav-link" href="pendaftar.html">Lihat Pendaftar</a>
  32.               </li>
  33.             </ul>
  34.           </div>
  35.         </div>
  36.       </nav>
  37.     </header>
  38.  
  39.     <form id="form-daftar">
  40.       <h2 class="h3 mb-3 fw-normal text-center">
  41.         Formulir Pendaftaran Siswa Baru<br>SMK Coding
  42.       </h2>
  43.       <div class="form-floating mb-3">
  44.         <input type="text" class="form-control" name="nama" id="nama" placeholder="Nama lengkap Anda" required>
  45.         <label for="nama">Nama Lengkap</label>
  46.       </div>
  47.       <div class="row">
  48.         <div class="col-md-6">
  49.           <label for="jenis_kelamin">Jenis Kelamin</label>
  50.           <select class="form-select form-floating mb-3" name="jenis_kelamin" id="jenis_kelamin" required>
  51.             <option label="Pilih jenis kelamin" hidden></option>
  52.             <option value="L">Laki-Laki</option>
  53.             <option value="P">Perempuan</option>
  54.           </select>
  55.         </div>
  56.         <div class="col-md-6">
  57.           <label for="agama">Agama</label>
  58.           <select class="form-select form-floating mb-3" name="agama" id="agama" required>
  59.             <option label="Pilih agama" hidden></option>
  60.             <option value="Islam">Islam</option>
  61.             <option value="Kristen">Kristen</option>
  62.             <option value="Katolik">Katolik</option>
  63.             <option value="Hindu">Hindu</option>
  64.             <option value="Buddha">Buddha</option>
  65.             <option value="Khonghucu">Khonghucu</option>
  66.           </select>
  67.         </div>
  68.       </div>
  69.       <div class="form-floating mb-3">
  70.         <input type="text" class="form-control" name="sekolah_asal" id="sekolah_asal" placeholder="Sekolah asal Anda" required>
  71.         <label for="sekolah_asal">Sekolah Asal</label>
  72.       </div>
  73.       <div class="form-floating mb-3">
  74.         <textarea class="form-control" placeholder="Alamat Anda" name="alamat" id="alamat" style="height: 100px" required></textarea>
  75.         <label for="alamat">Alamat</label>
  76.       </div>
  77.       <button id="submit-btn" type="button" class="btn btn-primary w-100 pt-2 btn-block">Daftar</input>
  78.     </form>
  79.   </main>
  80.  
  81.   <footer class="text-muted">
  82.     <div class="container">
  83.       <p class="text-dark">
  84.         &copy; <a href="https://farfnd.github.io" style="text-decoration: none;">FA</a> 2021
  85.       </p>
  86.     </div>
  87.   </footer>
  88.  
  89.   <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>
  90.   <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>
  91.   <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  92.  
  93.   <script type="text/javascript">
  94.     $('#submit-btn').on('click', () => {
  95.         var form = $('#form-daftar')[0];
  96.         var fd = new FormData(form);
  97.  
  98.         let dataSiswa = {
  99.             nama: $('#nama').val(),
  100.             jenis_kelamin: $('#jenis_kelamin').val(),
  101.             agama: $('#agama').val(),
  102.             sekolah_asal: $('#sekolah_asal').val(),
  103.             alamat: $('#alamat').val(),
  104.         }
  105.  
  106.         let flag = false;
  107.         if(!dataSiswa.nama.length ||
  108.             !dataSiswa.jenis_kelamin.length ||
  109.             !dataSiswa.agama.length ||
  110.             !dataSiswa.sekolah_asal.length ||
  111.             !dataSiswa.alamat.length) flag = true
  112.  
  113.         if(!flag){
  114.             fd.append('nama', dataSiswa.nama);
  115.             fd.append('jenis_kelamin', dataSiswa.jenis_kelamin);
  116.             fd.append('agama', dataSiswa.agama);
  117.             fd.append('sekolah_asal', dataSiswa.sekolah_asal);
  118.             fd.append('alamat', dataSiswa.alamat);
  119.            
  120.             $.ajax({
  121.                 type: 'POST',
  122.                 enctype: 'multipart/form-data',
  123.                 processData: false,
  124.                 contentType: false,
  125.                 url: "php/create_daftar.php",
  126.                 data: fd,
  127.                 success: function(resultData) {
  128.                   Swal.fire({
  129.                     icon: 'success',
  130.                     title: 'Pendaftaran berhasil',
  131.                     text: 'Data Anda berhasil terkirim',
  132.                     heightAuto: false
  133.                   })
  134.                   form.reset();
  135.                 }
  136.             });
  137.         }else{
  138.           Swal.fire({
  139.             icon: 'error',
  140.             title: 'Terjadi kesalahan',
  141.             text: 'Periksa kembali data yang Anda masukkan',
  142.             heightAuto: false
  143.           });
  144.         }
  145.     });
  146. </script>
  147.  
  148. </body>
  149. </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!