API tools faq
paste
Advertisement
abuzuhair

Untitled

abuzuhair
Sep 13th, 2019
160
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.33 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.  
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  10.     <title>Quiz 4</title>
  11.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  12.     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  13.  
  14. </head>
  15.  
  16. <body>
  17.     <div class="container-fluid">
  18.         <div class="row">
  19.             <div class="col-md-4">
  20.                 <h3>Input Data Siswa</h3>
  21.                 <form id="myForm" action="#" class="was-validated">
  22.                     <div class="input-group mb-3">
  23.                         <div class="input-group-prepend">
  24.                             <span class="input-group-text">Nama</span>
  25.                         </div>
  26.                         <input id="nama_depan" type="text" class="form-control" placeholder="Nama Depan" required />
  27.                         <input id="nama_belakang" type="text" class="form-control" placeholder="Nama Belakang" required />
  28.                         <div class="valid-feedback">Nama valid</div>
  29.                         <div class="invalid-feedback">Nama tidak valid</div>
  30.                     </div>
  31.  
  32.                     <div class="input-group mb-3">
  33.                         <div class="input-group-prepend">
  34.                             <span class="input-group-text">No HP</span>
  35.                         </div>
  36.                         <input id="no_hp" type="text" class="form-control" placeholder="Nama Depan" required />
  37.                         <div class="valid-feedback">No HP valid</div>
  38.                         <div class="invalid-feedback">No HP tidak valid</div>
  39.                     </div>
  40.  
  41.                     <div class="form-group">
  42.                         <h5>Gender</h5>
  43.                         <div class="form-check-inline">
  44.                             <label class="form-check-label">
  45.                                 <input type="radio" class="form-check-input" name="gender">Pria
  46.                             </label>
  47.                         </div>
  48.                         <div class="form-check-inline">
  49.                             <label class="form-check-label">
  50.                                 <input type="radio" class="form-check-input" name="gender">Wanita
  51.                             </label>
  52.                         </div>
  53.                     </div>
  54.  
  55.                     <div class="input-group mb-3">
  56.                         <div class="input-group-prepend">
  57.                             <span class="input-group-text">Jenjang</span>
  58.                         </div>
  59.                         <select class="custom-select" name="jenjang" id="jenjang">
  60.                             <option value="TK">TK</option>
  61.                             <option value="SD">SD</option>
  62.                             <option value="SMP">SMP</option>
  63.                             <option value="SMA">SMA</option>
  64.                         </select>
  65.                     </div>
  66.  
  67.                     <div class="form-group">
  68.                         <h5>Hobi</h5>
  69.                         <div class="form-check-inline">
  70.                             <label class="form-check-label">
  71.                                 <input id="membaca" type="checkbox" class="form-check-input" name="hobi">Membaca
  72.                             </label>
  73.                         </div>
  74.                         <div class="form-check-inline">
  75.                             <label class="form-check-label">
  76.                                 <input id="menulis" type="checkbox" class="form-check-input" name="hobi">Menulis
  77.                             </label>
  78.                         </div>
  79.                         <div class="form-check-inline">
  80.                             <label class="form-check-label">
  81.                                 <input id="menggambar" type="checkbox" class="form-check-input" name="hobi">Menggambar
  82.                             </label>
  83.                         </div>
  84.                     </div>
  85.  
  86.                     <div class="input-group mb-3">
  87.                         <div class="input-group-prepend">
  88.                             <span class="input-group-text">Alamat</span>
  89.                         </div>
  90.                         <textarea id="alamat" type="text" class="form-control" placeholder="Masukan Alamat" required rows="4"></textarea>
  91.                         <div class="valid-feedback">Alamat valid</div>
  92.                         <div class="invalid-feedback">Alamat tidak valid</div>
  93.                     </div>
  94.                     <div class="form-group">
  95.                         <input class="form-control" type="submit" name="submit" id="submit">
  96.                     </div>
  97.                 </form>
  98.             </div>
  99.         </div>
  100.         <hr>
  101.         <div id="alert" class="row d-none">
  102.             <div class="col-md-12">
  103.                 <div class="alert alert-success">
  104.                     <strong>Success!</strong> Data berhasil ditambah
  105.                 </div>
  106.             </div>
  107.         </div>
  108.         <div id="container" class="row">
  109.             <div class="col-md-4">
  110.                 <div class="card bg-success text-white">
  111.                     <div class="card-header">Ahmad Zuhair</div>
  112.                     <div class="card-body">
  113.                         <ul style="list-style: none;">
  114.                             <li><i class="fas fa-paw"></i>&nbsp;<strong>Jenjang:</strong> SD</li>
  115.                             <li><i class="fas fa-mobile-alt"></i>&nbsp;<strong>No HP:</strong> 78768768</li>
  116.                             <li><i class="fas fa-venus-mars"></i>&nbsp;<strong>Gender:</strong> 78768768</li>
  117.                             <li><i class="fas fa-crown"></i>&nbsp;<strong>Hobi:</strong> 78768768</li>
  118.                             <li><i class="fas fa-map-marked-alt"></i>&nbsp;<strong>Alamat:</strong> 78768768</li>
  119.                         </ul>
  120.                     </div>
  121.                     <div class="card-footer text-right">
  122.                         <span class="text-right">
  123.                             <a href="#" class="btn text-white"><i class="fa fa-trash"></i></a>
  124.                             <a href="#" class="btn text-white"><i class="fa fa-edit"></i></a>
  125.                         </span>
  126.                     </div>
  127.                 </div>
  128.             </div>
  129.         </div>
  130.     </div>
  131. </body>
  132. <!-- jQuery library -->
  133. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  134.  
  135. <!-- Popper JS -->
  136. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  137.  
  138. <!-- Latest compiled JavaScript -->
  139. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  140.  
  141. <script>
  142.     // untuk menampung data (kumpulan dari object student)
  143.     var data = [];
  144.  
  145.     // define class student
  146.     class Student {
  147.         constructor(firstName, lastName, noHp, gender, jenjang, hobbies, address) {
  148.             this.firstName = firstName;
  149.             this.lastName = lastName;
  150.             this.noHp = noHp;
  151.             this.gender = gender;
  152.             this.jenjang = jenjang;
  153.             this.hobbies = hobbies;
  154.             this.address = address;
  155.         }
  156.     };
  157.  
  158.     $(document).ready(function(){
  159.         $("#myForm").submit(function(e){
  160.             e.preventDefault();
  161.             render();
  162.         });
  163.     });
  164.  
  165.     // untuk menampilkan data ke dalam view
  166.     function render() {
  167.         // bersihkan dulu view sebelumnya
  168.         $('#container').html('');
  169.  
  170.         // iterate variable data
  171.         for(var i = 0; i < data.length; i++) {
  172.            var student = data[i];
  173.            var html = getView(student);
  174.            $('#container').append(html);
  175.        }
  176.    }
  177.  
  178.    // generate view untuk 1 student
  179.    function getView(student){
  180.        // check jika student tidak null
  181.        if(student == null) {
  182.            return "";
  183.        }
  184.  
  185.        var html = "<div class=\"col-md-4\">"+
  186.             "<div class=\"card bg-success text-white\">"+
  187.                 "<div class=\"card-header\">" + student.firstName + "</div>"+
  188.                 "<div class=\"card-body\">"+
  189.                     "<ul style=\"list-style: none\">"+
  190.                         "<li> <i class=\"fas fa-paw\"></i>&nbsp;<strong>Jenjang : </strong> " + student.jenjang + "</li>"+
  191.                         "<li> <i class=\"fas fa-mobile-alt\"></i>&nbsp;&nbsp;<strong>No HP : </strong> " + student.noHp + "</li>"+
  192.                         "<li> <i class=\"fas fa-crown\"></i><strong>&nbsp;Hobi : </strong> " + student.hobbies + "</li>"+
  193.                         "<li> <i class=\"fas fa-map-marked-alt\"></i><strong>&nbsp;Alamat : </strong> " + student.address + "/li>"
  194.                     "</ul>"+
  195.                 "</div>"+
  196.                 "<div class=\"card-footer\">"+
  197.                     "<span class=\"text-right\">"+
  198.                         "<a class=\"btn text-white\" href=\"#\"><i class=\"fa fa-trash\"></i></a>"+
  199.                         "<a class=\"btn text-white\" href=\"#\"><i class=\"fa fa-edit\"></i></a>"+
  200.                     "</span>"+
  201.                 "</div>"+
  202.             "</div>"+
  203.         "</div>";
  204.  
  205.         return html;
  206.     }
  207. </script>
  208. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!