Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>CRUD AJAX PHP MYSQL</title>
- <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css">
- </head>
- <body onload="viewData()">
- <div class="container">
- <br/>
- <button class="btn btn-primary" data-toggle="modal" data-target="#addData">Insert Data</button>
- <!-- Modal -->
- <div class="modal fade" id="addData" tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
- <div class="modal-dialog" role="document">
- <div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title" id="addLabel">Insert Data</h5>
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
- </div>
- <form>
- <div class="modal-body">
- <div class="form-group">
- <label for="nm">Nama</label>
- <input type="text" class="form-control" id="nm" placeholder="Nama Lengkap">
- </div>
- <div class="form-group">
- <label for="kt">Kota</label>
- <input type="text" class="form-control" id="kt" placeholder="Asal Kota">
- </div>
- <div class="form-group">
- <label for="em">Email</label>
- <input type="email" class="form-control" id="em" placeholder="Email">
- </div>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
- <button type="submit" onclick="saveData()" class="btn btn-primary">Save</button>
- </div>
- </form>
- </div>
- </div>
- </div>
- <div id="result"></div>
- <br/>
- <table class="table table-sriped">
- <thead>
- <tr>
- <th width="30%">Nama</th>
- <th width="20%">Kota</th>
- <th width="30%">Email</th>
- <th width="20%">Aksi</th>
- </tr>
- </thead>
- <tbody>
- </tbody>
- </table>
- </div>
- <script src="js/jquery-3.1.1.min.js"></script>
- <script src="js/popper.min.js"></script>
- <script src="bootstrap/dist/js/bootstrap.min.js"></script>
- <script type="text/javascript">
- function saveData() {
- var nama = $('#nm').val();
- var kota = $('#kt').val();
- var email = $('#em').val();
- $.ajax({
- type: "POST",
- url: "server.php?p=add",
- data: "nm="+nama+"&kt="+kota+"&em="+email,
- success: function(data){
- viewData();
- }
- });
- }
- function viewData(){
- $.ajax({
- type: "GET",
- url: "server.php",
- success: function(data){
- $('tbody').html(data);
- }
- });
- }
- function updateData(str){
- var id = str;
- var nama = $('#nm-'+str).val();
- var kota = $('#kt-'+str).val();
- var email = $('#em-'+str).val();
- $.ajax({
- type: "POST",
- url: "server.php?p=edit",
- data: "nm="+nama+"&kt="+kota+"&em="+email+"&id"+id,
- success: function(data){
- viewData();
- }
- });
- }
- function deleteData(str){
- var id = str;
- $.ajax({
- type: "GET",
- url: "server.php?p=delete",
- data: "id"+id,
- success: function(data){
- viewData();
- }
- });
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement