Halo teman-teman pada tutorial kali ini saya akan menjelaskan Cara Mengedit Banyak Data Menggunakan PHP dan JavaSript Part 1, Â untuk membuat Cara Mengedit Banyak Data Menggunakan PHP dan JavaSript ada beberapa tahap yang harus kita buat terlebih dahulu, namun pada tutorial Cara Mengedit Banyak Data Menggunakan PHP dan JavaSript saya akan membuat menjadi menjadi dua part, part yang pertama kita akan membuat sebuah database, file koneksi, file css dan file indexnya, nah untuk proses edit datanya akan kita bahas pada Cara Mengedit Banyak Data Menggunakan PHP dan JavaSript Part 2.
Oke teman-teman kita langsung saja masuk ke tahap yang pertama yaitu kita akan membuat databasenya terlebih dahulu, silahkan teman-teman buat database baru dengan nama databasenya misalkan admin didalam database admin kita akan membuat sebuah table dengan nama table misalkan murid, nah didalam table murid terdapat sebuah field, seperti id, nama, alamat, tanggal dan tlpn nah nanti struktur dari table yang akan kita buat seperti dibawah ini.
Setelah kita membuat data basenya berikutnya kita akan membuat file koneksi yang berfungsi untuk menghubungkan file-file yang akan kita buat, dan silahkan teman-teman simpan script dibawah ini dengan nama koneksi.php
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "admin"; $conn = mysqli_connect($servername, $username, $password, $dbname); if (!$conn) { die ("Connection failed: " .mysqli_connect_error()); } |
Selanjutnya kita akan membuat halaman index.php yang berfungsi sebagai halaman awal atau halaman pertama yang akan dijalankan oleh browser terlebih dahulu, dan silahkan teman-teman simpan script dibawah ini dengan nama index.php.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script language="javascript" src="edit.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <?php include ('koneksi.php'); $result = mysqli_query($conn,"SELECT * FROM murid"); ?> </head> <body> <table> <form name="frmUser" method="post" action="" onSubmit="return validate()"> <tr class="warna2"> <td>Pilih</td> <td>Nama</td> <td>Alamat</td> <td>No Telp</td> <td>Tanggal</td> </tr> <?php $i=0; while($row = mysqli_fetch_array($result)) { if($i%2==0) $nama="warna1"; else $nama="warna2"; ?> <tr class="<?php if(isset($nama)) echo $nama;?>"> <td><input type="checkbox" name="murid[]" value="<?php echo $row["id"]; ?>"></td> <td><?php echo $row["nama"]; ?></td> <td><?php echo $row["alamat"]; ?></td> <td><?php echo $row["tlpn"]; ?></td> <td><?php echo $row["tanggal"]; ?></td> </tr> <?php $i++; }?> <tr class="list"> <td colspan="5"><input type="submit" name="update" value="Edit" onClick="updateAction();" /></td> </tr> </form> </table> </body> </html> |
berikutnya kita akan membuat file css untuk mengatur layout atau tampilan, dan silahkan teman-teman simpan script dibawah ini dengan nama style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
body { font-family:Arial; } input { font-family:Arial; font-size:14px; } label{ font-family:Arial; font-size:14px; color:#999999; } .warna1 { background-color: #8DF7A0; font-size:12px; color:#101010; } .warna1:hover { background-color: #fc350e; color: #fff; } .warna2 { background-color: #99D6D7; font-size:12px; color:#101010; } .warna2:hover { background-color: #fc350e; color: #fff; } .list { background-color: #929292; } |
Jika kita jalankan pada browser maka akan terlihat seperti dibawah ini
Oke teman-teman sekian dulu pembahasan saya pada tutorial Cara Mengedit Banyak Data Menggunakan PHP dan JavaSript Part 1,
Semoga bermanfaat
Terimakasih
https://kursuswebprogramming.com/cara-mengedit-banyak-data-menggunakan-php-dan-javasript-part-2/