WHAT'S NEW?
Loading...

Membuat Input, Update, Delete Dengan Modal Jquery dan Cara Membuat Tabel dengan Bootstrap

14:37
Assalamalaikum Wr Wb.

Sebelum kita melanjutkan ke pembelajaran selanjutnya agar lebih baiknya anda melihat artikel sebelumnya tentang Membuat Koneksi Database Lebih Sederhana Bagi Pemula Untuk Pemrograman PHP Kenapa saya ingin anda melihat postingan artikel saya sebelumnya, karena yang akan saya sampaikan pada artikel ini yaitu berhubungan juga dengan  Membuat Koneksi Database Lebih Sederhana Bagi Pemula Untuk Pemrograman PHP .

Studi kasus yang kita ambil adalah Tabel Jurusan pada sekolah SMK.
Langsung saja kita mulai, saya akan menyampaikan artikel saya yang berjudul Membuat Input, Update, Delete Dengan Modal Jquery dan Cara Membuat Tabel dengan Bootstrap . Pertama yang anda siapkan adalah file Bootstrap dan file Jquery nya, anda bisa mendownload file Bootstrap Disini dan file Jquery nya anda bisa download Disini .

Apabila anda sudah mempersiapkan dari file-file di atas maka anda bisa langsung membuat file coba.php. masukan file Jquery dan Bootstrap di dalam file coba.php, Contohnya :

Sebelumnya kita buat terlebih dahulu tabel database, Contohnya : 


create table jurusan(id_jurusan int primary key auto_increment,
    -> jurusan varchar(25));




<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>  
 </head>

Selanjutnya anda bisa memasukan file untuk modal dan tabel untuk menampilkan data di bawah ini dengan benar. Contohnya : 

<body>

<div class="panel panel-danger">
   <div class="panel-heading">
   <h3 class="panel-title">Master Jurusan</h3>
   </div>
   <div class="panel-body">
   

<!-- Button Modal -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">
  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Form Tambah Jurusan</h4>
      </div>
      <div class="modal-body">
        <form action="" method="POST" role="form">
         
        
         <div class="form-group">
          <label for="">Jurusan</label>
          <input type="text" name="jurusan" class="form-control" id="" placeholder="Input field">
         </div>
        
         
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" name="simpan" class="btn btn-primary">Save changes</button>
       </form>
      </div>
    </div>
  </div>
</div>

<br>
 <table class="table table-striped table-bordered data">
  <thead>
   <tr>
    
    <th>Id</th>
    <th>Jurusan</th>
    <th>Aksi</th>
    
   </tr>
  </thead>
  <tbody>
   <?php $query = mysql_query("select * from master_jurusan");
    while ($data= mysql_fetch_row($query)) {
     

    ?>
   <tr>
    
    <td><?php echo $data[0]; ?></td>
  
    
    <td>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#my<?php echo $data[0]; ?>">
  <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</button>

<!-- Modal -->
<div class="modal fade" id="my<?php echo $data[0]; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Form Update Jurusan</h4>
      </div>
      <div class="modal-body">
        <form action="" method="POST" role="form">
         
         
         <div class="form-group">
          
          <input type="hidden" name="id_jurusan" class="form-control" value="<?php echo $data[0]; ?>" id="" placeholder="Input field">
         </div>

         <div class="form-group">
          <label for="">Jurusan</label>
          <input type="text" name="jurusan" class="form-control" value="<?php echo $data[1]; ?>" id="" placeholder="Input field">
         </div>
        
         
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" name="update" class="btn btn-primary">Save changes</button>
       </form>
      </div>
    </div>
  </div>
</div>
 
 <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myy<?php echo $data[0]; ?>">
  <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button>

<!-- Modal -->
<div class="modal fade" id="myy<?php echo $data[0]; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Form Update Jurusan</h4>
      </div>
      <div class="modal-body">
        <form action="" method="POST" role="form">
         
         
         Apakah Anda Ingin Menghapus Data <?php echo $data[1]; ?>
        
         
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" name="hapus" value="<?php  echo $data[0]; ?>" class="btn btn-primary">Save changes</button>
       </form>
      </div>
    </div>
  </div>
</div>

    </td>

   </tr>
   <?php
    }
    $data++;
   ?>
  </tbody>
 </table>

   </div>
</div>
</body>

Setelah semua koding di atas sudah di persiapkan kita masukan file PHP untuk menyimpan, mengubah dan menghapus data. Letakkan file PHP di bawah ini tepat di atas <head>.


<?php  include('config.php'); //file database yang sudah di buat

if (isset($_POST['simpan'])) {
 $jurusan= $_POST['jurusan'];

 $query= mysql_query("insert into master_jurusan values ('','$jurusan')") or die(mysql_error());
  echo "<script> alert ('Data Behasil di Tambahkan');
  document.location='index.php?menu=jurusan';

  </script>";
 
}

elseif (isset($_POST['update'])) {
 $id= $_POST['id_jurusan'];
 $jurusan= $_POST['jurusan'];

 $query= mysql_query("update master_jurusan set id_jurusan='$id',jurusan='$jurusan' where id_jurusan='$id' ") or die(mysql_error());
  echo "<script> alert ('Data Behasil di Tambahkan');
  document.location='index.php?menu=jurusan';

  </script>";
 
}
elseif (isset($_POST['hapus'])) {
 $id= $_POST['hapus'];
 

 $query= mysql_query("delete from master_jurusan where id_jurusan='$id' ") or die(mysql_error());
  echo "<script> alert ('Data Behasil di Tambahkan');
  document.location='index.php?menu=jurusan';

  </script>";
 
}


 ?>

ScreenShoot Hasil dari di atas :






Sekian Postingan artikel dari saya, semoga bermanfaat. Trimakasih
Wassalamualaikum Wr Wb.

BACA JUGA ARTIKEL
1. Pengenalan Metode (Fungsi) Objek Number dan Objek Array Pada JavaScript
2. Membuat Proses Pengolahan Data Insert, Update Bagi Pemula Untuk Pemrograman PHP
3. Belajar HTML Dengan Mudah dan Cepat Untuk Pemula
4. Input Data Lebih Dari Satu Dengan PHP Paling Mudah
5. Cara Mempercepat Tampilan Dengan Plugin Boostrap


14 comments: Leave Your Comments

  1. Unknown5 September 2017 at 19:20

    GK ADA VIDIO TUTORIALNYA ?

    ReplyDelete
  2. Damar Hidayat Pamungkas29 December 2017 at 04:40

    bang ada sourcodenya enggak yang dah jadi...

    ReplyDelete
  3. fariz al faiq24 March 2020 at 00:10

    Assalamu'alaikum admin, artikel admin sangat membantu saya dalam membuat Input, Update, Delete Dengan Modal Jquery dan Cara Membuat Tabel dengan Bootstrap dikarenakan saya masih pemula dan harus banyak belajar, artikel anda sangat membantu sekali dan mudah di pahami , perkenalkan nama saya fariz alfaiq (1822500083), kunjungi juga web kampus saya (https://www.atmaluhur.ac.id/)

    ReplyDelete
  4. Sekar24 March 2020 at 02:36

    Makasih banget loh kak artikel nya bermanfaat sekali, saya sangat terbantu oleh artikel yg kaka'buat. Sangat Mudah di pahami. Dan Semangat terus kak utk mengupdate artikel" yg lain nya juga. Saya Sekar Widya Lestari, dari STMIK ATMA LUHUR. jangan lupa kunjungi website kampus kita ya kak (https://www.atmaluhur.ac.id/)

    ReplyDelete
  5. farah24 March 2020 at 08:25

    wah sangat bermanfaat sekali kak artikelnya, dengan adanya artikel dari kakak ini memudahkan saya sekali dalam membuat aplikasi program komputer ini. dan orang diluar sana pun bisa menggunakan coding kakak dengan kretaifitas mereka sendiri. ditunggu artikel lainnya kak. oh iya saya farah regita kak dari kampus stmik atma luhur jangan lupa kunjungi website kampus saya kak https://www.atmaluhur.ac.id/

    ReplyDelete
  6. Tiaras25 March 2020 at 19:56

    Terima kasih kakak, Artikel nya sangat bermanfaat bagi pemula seperti saya dan sangat mempermudah saya dalam belajar Membuat Input, Update, Delete Dengan Modal Jquery dan Cara Membuat Tabel dengan Bootstrap , dan selalu semangat kak untuk membagi informasinya,saya tunggu artikel-artikel kakak berikutnya. Perkenankan Saya TIARA SHINTA, saya kuliah di STMIK ATMALUHUR pangkalpinang jangan lupa mampir ke website kampus kami ya 👍 https://www.atmaluhur.ac.id/

    ReplyDelete
  7. delilah deva25 March 2020 at 21:48

    Wuahhh keren kak artikelnya ,sangat membantu dan bermanfaat bagi saya yang baru mengenal cara
    Membuat Input, Update, Delete Dengan Modal Jquery dan Cara Membuat Tabel dengan Bootstrap ,terus semangat dan berkarya terus kak dalam mengupdate artikel barunya,perkenalkan nama saya Deva delilah dari kampus STMIK ATMA LUHUR jangan lupa mampir ke website kampus saya https://www.atmaluhur.ac.id/

    ReplyDelete
  8. Widya Nurullita31 March 2020 at 00:46

    Wihhh sangat menarik kak artikelnya banyak ilmu yang saya dapatkan semangat dan terus berkarya kak oh ya saya Widya Nurullita dari kampus Stmik atma luhur pangkalpinang jangan lupa mampir ke website kampus kami http://www.atmaluhur.ac.id/

    ReplyDelete
  9. esa dhea1 April 2020 at 08:07

    kak ini kok gak disertai gambar hasilnya....biar lebih mudah gitu bljrnya....
    thankyou ya kak ilmu nya....
    saya ESA DHEA mahasiswi stmik atma luhur ....
    Kunjungu juga web kampus kami https://www.atmaluhur.ac.id

    ReplyDelete
  10. Sarwono30 June 2020 at 09:56

    Terimakasih artikelnya sangat membantu Saya untuk belajar cara
    Membuat Input, Update, Delete Dengan Modal Jquery dan Cara Membuat Tabel dengan Bootstrap ,terus semangat dan berkarya terus kak dalam mengupdate artikel barunya,perkenalkan nama saya Sarwono dari kampus ISB ATMALUHUR jangan lupa mampir ke website KAMPUS kami https://www.atmaluhur.ac.id/

    ReplyDelete
  11. Sarwono30 June 2020 at 09:59

    Terimakasih artikelnya sangat membantu Saya untuk belajar cara
    Membuat Input, Update, Delete Dengan Modal Jquery dan Cara Membuat Tabel dengan Bootstrap ,terus semangat dan berkarya terus kak dalam mengupdate artikel barunya,perkenalkan nama saya Sarwono dari kampus ISB ATMALUHUR jangan lupa mampir ke website KAMPUS kami https://www.atmaluhur.ac.id/

    ReplyDelete
  12. Monalisa1 July 2020 at 01:06

    Alhamdulillah dengan artikel yang kakak buat Saya bisa mengerti bagaimana cara membuat input, update, delete dengan modal Jquery dan cara membuat Tabel dengan Bootstrap. makasih ya kak.. dan Oh iya kak perkenalkan Nama Saya Monalisa Mahasiswa ISB ATMA LUHUR Pangkalpinang dan jangan lupa mampir ke website kampus kita ya kak (https://www.atmaluhur.ac.id/)

    ReplyDelete
  13. delilah deva2 October 2020 at 23:10

    terimakasih kak sangat bermanfaat dan menarik,perkenalkan nama saya Deva delilah dari ISB Atmaluhur

    ReplyDelete
  14. delilah deva2 October 2020 at 23:22

    Wuahhh keren kak artikelnya ,sangat membantu dan bermanfaat bagi saya yang baru mengenal cara
    Membuat Input, Update, Delete Dengan Modal Jquery dan Cara Membuat Tabel dengan Bootstrap ,terus semangat dan berkarya terus kak dalam mengupdate artikel barunya,perkenalkan nama saya Deva delilah dari ISB Atmaluhur

    ReplyDelete

Follow:

ThemeXpose