Cara Membuat Tabel Data Dengan Penanda di jQuery

Admin Rubik Desain 8:43 PM
Membuat Tabel Data Dengan jQuery - Sebelum kita melangkah lebih jauh tentang membuat sebuah penanda di sebuah tabel data menggunakan bahasa pemrograman jQuery, alahkah lebih baiknya untuk kita mengetahui apa itu Tabel Data dan jQuery.

Pengertian Tabel Data

Tabel Data adalah rentang sel di mana Anda bisa mengubah nilai dalam beberapa dalam beberapa sel dan dengan jawaban berbeda untuk masalah.

jQuery
Pada intinya, adalah sebuah library yang berfungsi untuk memanipulasi DOM. DOM merupakan representasi struktural dari seluruh elemen pada sebuah laman web. Keberadaan jQuery menjadikan kerja pencarian, penyeleksian, dan manipulasi elemen-elemen DOM menjadi simpel dan mudah.

Setelah kita mengenal Tabel Data dan jQuery maka selanjutnya kita akan memulai untuk membuat tabel data, kalau secara umum untuk membuat tabel bisa menggunakan aplikasi apapun termasuk bisa menggunakan Microsoft Office, Namun disini kita akan mencoba belajar membuat sebuah tabel dengan menggunakan bahasa pemrograman jQuery termasuk juga dengan menampilkan tabel terebut.

Langkah Pertama
Download dan Install Aplikasi Xampp pada komputer anda, silahkan kunjungi link berikut ini
https://www.apachefriends.org/index.html

 Langkah Kedua
Membuat sebuah database MySQL sebagai data yang akan ditampilkan nantinya. Caranya seperti yang telah kita bahas sebelumnya dan mungkin sudah pada tahu dan paham bagaimana cara membuat database MySQL.

Buatlah database MySQL dengan nama db_highlight

Langkah Ketiga
Langkah selanjutnya yang paling penting adalah untuk menghubungkan database dengan script atau menggunakan bahasa php.

Berikut ini adalah script yang bisa digunakan :
  1. <?php
  2. $conn = mysqli_connect("localhost", "root", "", "db_highlight");
  4. if(!$conn){
  5. die("Error: Failed to connect to database!");
  6. }
  7. ?>
Kemudian simpan dengan menggunakan nama conn.php

 Langkah Ke Empat
Langkah ini adalah langkah yang tidak kalah pentingnya, yaitu membuat tampilan yang akan muncul ketika perintah dilakukan.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
  5. <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  6. <style>
  7. .highlight-row {
  8. background-color:maroon;
  9. cursor:pointer;
  10. color:#FFF;
  11. }
  12. .highlight-col {
  13. background-color:indigo;
  14. color:#FFF;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <nav class="navbar navbar-default">
  20. <div class="container-fluid">
  21. <a class="navbar-brand" href="<a href="https://sourcecodester.com">Sourcecodester</a>
  22. " rel="nofollow">https://sourcecodester.com">Sourcecodester</a>
  23. </a> </div>
  24. </nav>
  25. <div class="col-md-3"></div>
  26. <div class="col-md-6 well">
  27. <h3 class="text-primary">PHP - Simple Table Data Highlighting using jQuery</h3>
  28. <hr style="border-top:1px dotted #ccc;"/>
  29. <button type="button" class="btn btn-success" data-toggle="modal" data-target="#form_modal"><span class="glyphicon glyphicon-plus"></span> Add User</button>
  30. <br /><br />
  31. <table class="table table-bordered">
  32. <thead class="alert-info">
  33. <tr>
  34. <th class="header">Firstname</th>
  35. <th class="header">Lastname</th>
  36. <th class="header">Address</th>
  37. </tr>
  38. </thead>
  39. <tbody>
  40. <?php
  41. require 'conn.php';
  43. $query = mysqli_query($conn, "SELECT * FROM `user`") or die(mysqli_error());
  44. while($fetch = mysqli_fetch_array($query)){
  45. ?>
  46. <tr class="table-row">
  47. <td><?php echo $fetch['firstname']?></td>
  48. <td><?php echo $fetch['lastname']?></td>
  49. <td><?php echo $fetch['address']?></td>
  50. </tr>
  51. <?php
  52. }
  53. ?>
  54. </tbody>
  55. </table>
  56. </div>
  57. <div class="modal fade" id="form_modal" aria-hidden="true">
  58. <div class="modal-dialog">
  59. <div class="modal-content">
  60. <form method="POST" action="save_user.php">
  61. <div class="modal-header">
  62. <h3 class="modal-title">Add User</h3>
  63. </div>
  64. <div class="modal-body">
  65. <div class="col-md-2"></div>
  66. <div class="col-md-8">
  67. <div class="form-group">
  68. <label>Firstname</label>
  69. <input type="text" class="form-control" name="firstname" required="required"/>
  70. </div>
  71. <div class="form-group">
  72. <label>Lastname</label>
  73. <input type="text" class="form-control" name="lastname" required="required"/>
  74. </div>
  75. <div class="form-group">
  76. <label>Address</label>
  77. <input type="text" class="form-control" name="address" required="required"/>
  78. </div>
  79. </div>
  80. </div>
  81. <br style="clear:both;"/>
  82. <div class="modal-footer">
  83. <button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button>
  84. <button name="save" class="btn btn-primary" ><span class="glyphicon glyphicon-save"></span> Save</button>
  85. </div>
  86. </form>
  87. </div>
  88. </div>
  89. </div>
  90. <script src="js/jquery-3.2.1.min.js"></script>
  91. <script src="js/bootstrap.js"></script>
  92. <script src="js/script.js"></script>
  93. </body>
  94. </html>
Anda bisa menggukan aplikasi Text Editor untuk membuat script diatas, kemudian simpan dengan menggunakan nama index.php

 Langkah Terakhir
Membuat fungsi penanda tabel data yang akan kita buat sebelumnya, berikut ini adalah scriptnya.

  1. $(document).ready(function() {
  2. $('.table-row').hover(function() {
  3. $(this).addClass('highlight-row');
  4. }, function() {
  5. $(this).removeClass('highlight-row');
  6. });
  8. $("th").hover(function() {
  9. var index = $(this).index();
  10. $(this).css('cursor', 'pointer');
  11. $("th.header, td").filter(":nth-child(" + (index+1) + ")").addClass("highlight-col");
  12. $("th.header").filter(":nth-child(" + (index+1) + ")").attr('class', 'alert-info');
  13. }, function() {
  14. var index = $(this).index();
  15. $("th.header, td").removeClass("highlight-col");
  16. });
  17. });
Demikian panduan untuk membuat Tabel Data Dengan Penanda di jQuery, semoga dapat bermanfaat dan untuk lebih jelasnya silahkan download sourcecode gratisnya di bawah ini

DOWNLOAD SOURCECODE

Reactions

Post a Comment

0 Comments