Haikal PG - XI RPL 1 - PWPB Sesi 28

Assalamualaikum Warahmatullahi Wabarokatuh
Kembali lagi dengan saya Haikal Putra Gustiansyah, pada sesi kali ini kita akan melanjutkan sesi sebelumnya dengan materi database. Bagi teman-teman yang belum membaca materi database sebelumnya diharapkan membaca terlebih dahulu karena materi ini melanjutkan materi sebelumnya.
Pada sesi sebelumnya kita dapat menambahkan data dihalaman 'admin'. Tapi jika kita ingin user yang menambahkannya melalui form bagaimana? nah disini kita akan bekerja dengan query INSERT. INSERT ini digunakan untuk memasukkan data ke sebuah database yang telah dibuat. cara penggunaanya seperti berikut:

INSERT INTO nama_tabel(kolom_1, kolom_2, ...) VALUES(nilai_1, nilai_2);

OK langsung saja kita mulai dan jangan lupa nyalakan Mysql dan Apache nya di XAMPP.

Step 1
Teman-teman masuk ke folder views dan buka file v_index.php dan copy kan code berikut:

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPL 1 Connect DB</title>
 <style type="text/css">
  body{
   font-family: arial;
   background-color: lightgrey;
  }
  th{
   background-color: cyan;
  }
  td{
   background-color: ghostwhite;
  }
  button{
   background-color: #34a1eb;
   padding: 10px;
   border-radius: 5px;
   border: 0px;
   transition: 0.5s;
  }
  button a{
   text-decoration: none;
   color: white;
   font-family: cursive;
  }
  button:hover{
   background-color: black;
   color: white;
   cursor: pointer;
  }
  input{
   border-radius: 4px;
   border: 1px solid black;
  }
 </style>
</head>
<body>

 <button><a href="tambah.php">Tambah Data</a></button>

 <table border="1" cellspacing="0" cellpadding="5">
  <thead>
<tr>
    <th>#</th>
    <th>NIS</th>
    <th>Nama Lengkap</th>
    <th>Jenis Kelamin</th>
    <th>Kelas</th>
    <th>Jurusan</th>
   </tr>
</thead>

  <tbody>
   <?php 
    $i = 1;
    while ($siswa = $listSiswa->fetch_array()) {
    ?>
<tr>
    <td><?= $i++ ?></td>
    <td><?=  $siswa['nis'] ?></td>
    <td><?=  $siswa['nama_lengkap'] ?></td>
    <td><?=  $siswa['jenis_kelamin'] ?></td>
    <td><?=  $siswa['kelas'] ?></td>
    <td><?=  $siswa['jurusan'] ?></td>
   </tr>
<?php } ?>
  </tbody>
 </table>
</body>
</html>

Kita membuat sebuah link dan diarahkan ke tambah.php. Hasil tampilanya:

Step 2
Masuk ke folder views dan buat file v_tambah.php. Nah, di file inilah terdapat form inputan user untuk menambahkan data ke database. Copy code berikut:

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPL 1 Connect DB</title>
 <style type="text/css">
  body{
   font-family: arial;
   background-color: lightgrey;
  }
  th{
   background-color: cyan;
  }
  td{
   background-color: ghostwhite;
  }
  button{
   background-color: #34a1eb;
   padding: 10px;
   border-radius: 5px;
   border: 0px;
   transition: 0.5s;
  }
  button a{
   text-decoration: none;
   color: white;
   font-family: cursive;
  }
  button:hover{
   background-color: black;
   color: white;
   cursor: pointer;
  }
  input{
   border-radius: 4px;
   border: 1px solid black;
  }
 </style>
</head>
<body>

 <button><a href="tambah.php">Tambah Data</a></button>

 <table border="1" cellspacing="0" cellpadding="5">
  <thead>
<tr>
    <th>#</th>
    <th>NIS</th>
    <th>Nama Lengkap</th>
    <th>Jenis Kelamin</th>
    <th>Kelas</th>
    <th>Jurusan</th>
   </tr>
</thead>

  <tbody>
   <?php 
    $i = 1;
    while ($siswa = $listSiswa->fetch_array()) {
    ?>
<tr>
    <td><?= $i++ ?></td>
    <td><?=  $siswa['nis'] ?></td>
    <td><?=  $siswa['nama_lengkap'] ?></td>
    <td><?=  $siswa['jenis_kelamin'] ?></td>
    <td><?=  $siswa['kelas'] ?></td>
    <td><?=  $siswa['jurusan'] ?></td>
   </tr>
<?php } ?>
  </tbody>
 </table>
</body>
</html>

Step 3
Buat sebuah file tambah.php lalu includekan library.php dan v_tambah.php. Code untuk mengincludekan:

<?php 

 include 'lib/library.php';

 include 'views/v_tambah.php';
 
 ?>

Jika dijalankan maka akan tampil seperti berikut:

Step 4
Selanjutnya buka file tambah.php dan copy code berikut:

<?php 
 include 'lib/library.php';

 if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  $nis = $_POST['nis'];
  $nama_lengkap = $_POST['nama_lengkap'];
  $jenis_kelamin = $_POST['jenis_kelamin'];
  $kelas = $_POST['kelas'];
  $jurusan = $_POST['jurusan'];

  $sql = "INSERT INTO siswa(nis, nama_lengkap, jenis_kelamin, kelas, jurusan) VALUES('$nis', '$nama_lengkap', '$jenis_kelamin', '$kelas', '$jurusan')";

  $mysqli->query($sql) or die ($mysqli->error);
  if ($mysqli) {
   header('location: index.php');
   echo "Data added";
  }
  
 }

 include 'views/v_tambah.php';
 ?>

if($_SERVER['REQUEST_METHOD'] == 'POST') digunakan untuk memeriksa apakah ada request dalam bentuk POST yang dikirim ke halaman ini?. Lalu ada inputan yang ditangkap dengan POST lalu dimasukkan ke dalam variable. Lalu ada query INSER INTO untuk memasukkan nilai yang tadi diinputkan kedalam database. $mysqli->query($sql) or die ($mysqli->error); Digunakan untuk melakukan query ke SQL. Apabila error maka akan muncul pesan errornya. header('location: index.php'); Digunakan untuk redirect ke halaman index.php jika form telah di submit.

Study kasus
Study kasus kali ini kita akan menambahkan kolom tabel. Bagaimana cara menambahkan kolom di tabel sedangkan tabelnya sudah jadi? jawabanya kita menggunakan query ALTER yang digunakan untuk mengubah stuktur tabel di database. Inputan baru seperti berikut:

alamat
golongan darah
nama ibu kandung

Langsung saja......

Masuk ke folder views dan buka file v_tambah.php lalu isikan code berikut:

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPL 1 Add Data's</title>
 <style type="text/css">
  body{
   background-color: lightgrey;
  }
  button{
   background-color: #34a1eb;
   padding: 10px;
   border-radius: 5px;
   border: 0px;
   transition: 0.5s;
  }
  button a{
   text-decoration: none;
   color: white;
   font-family: cursive;
  }
  button:hover{
   background-color: black;
   color: white;
   cursor: pointer;
  }
  input{
   border-radius: 4px;
   border: 1px solid black;
  }
 </style>
</head>
<body>
 <form action="tambah.php" method="post">
  <table>
<tr>
   <td><label for="nis">NIS</label></td>
   <td><input type="text" id="NIS" name="nis"></td>
  </tr>
<tr>
   <td><label for="nama">Nama Lengkap</label></td>
   <td><input type="text" name="nama_lengkap" id="nama"></td>
  </tr>
<tr>
   <td><label for="jk">Jenis Kelamin</label></td>
   <td><input type="radio" name="jenis_kelamin" value="L">Laki-Laki<br><input type="radio" name="jenis_kelamin" value="P">Perempuan</td>
  </tr>
<tr>
   <td>Kelas</td>
   <td><select name="kelas">
   <option value="XI-RPL-1">XI-RPL-1</option>
   <option value="XI-RPL-2">XI-RPL-2</option>
   <option value="XI-RPL-3">XI-RPL-3</option>
  </select></td>
  </tr>
<tr>
   <td><label for="jurus">Jurusan</label></td>
   <td><input type="text" id="jurus" name="jurusan"></td>
  </tr>
<tr>
   <td><label for="alamat">Alamat</label></td>
   <td><input name="alamat" id="alamat"></input></td>
  </tr>
<tr>
   <td><label for="goldar">Golongan Darah</label></td>
   <td><input type="text" name="golongan_darah" id="goldar"></td>
  </tr>
<tr>
   <td><label for="ibu">Nama Ibu Kandung</label></td>
   <td><input type="text" name="nama_ibu_kandung" id="ibu"></td>
  </tr>
<tr>
   <td></td>
  </tr>
<tr>
   <td></td>
   <td><button type="submit" value="simpan">Simpan</button></td>
  </tr>
</table>
</form>
</body>
</html>

Maka akan tampil seperti berikut:

Lalu kita masuk ke file tambah.php dan kita ubah sedikit dengan menangkap inputan alamat, golongan darah, dan nama ibu kandung. Copy code berikut dan ubah tambah.php:

<?php 
 include 'lib/library.php';

 if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  $nis = $_POST['nis'];
  $nama_lengkap = $_POST['nama_lengkap'];
  $jenis_kelamin = $_POST['jenis_kelamin'];
  $kelas = $_POST['kelas'];
  $jurusan = $_POST['jurusan'];
  $alamat = $_POST['alamat'];
  $golongan_darah = $_POST['golongan_darah'];
  $ibu = $_POST['nama_ibu_kandung'];

  $sql = "INSERT INTO siswa(nis, nama_lengkap, jenis_kelamin, kelas, jurusan, alamat, golongan_darah, nama_ibu_kandung) VALUES('$nis', '$nama_lengkap', '$jenis_kelamin', '$kelas', '$jurusan', '$alamat', '$golongan_darah', '$ibu')";

  $mysqli->query($sql) or die ($mysqli->error);
  if ($mysqli) {
   header('location: index.php');
   echo "Data added";
  }
  
 }

 include 'views/v_tambah.php';
 ?>

kita menangkap inputan alamat, golongan darah dan ibu kandung. Lalu buka terminal masing-masing lalu tambahkan kolom dengan ALTER seperti berikut:

Teman-teman masuk ke folder installan XAMPP lalu ke Mysql dan lalu masuk lagi ke bin. Kemudian ketikkan mysql -u root dan pilih databasenya. Lalu gunakan ALTER untuk mengambah kolom pada tabel database tersebut. Perhatikan query ALTER lalu tiru di terminal masing-masing.

Langkah terakhir kita buka v_index.php lalu copykan code berikut:

<!DOCTYPE html>
<html>
<head>
 <title>Haikal Putra Gustiansyah XI RPL 1  Connect To Database</title>
 <style type="text/css">
  body{
   font-family: arial;
   background-color: lightgrey;
  }
  th{
   background-color: cyan;
  }
  td{
   background-color: ghostwhite;
  }
  button{
   background-color: #34a1eb;
   padding: 10px;
   border-radius: 5px;
   border: 0px;
   transition: 0.5s;
  }
  button a{
   text-decoration: none;
   color: white;
   font-family: cursive;
  }
  button:hover{
   background-color: black;
   color: white;
   cursor: pointer;
  }
  input{
   border-radius: 4px;
   border: 1px solid black;
  }
 </style>
</head>
<body>

 <button><a href="tambah.php">Tambah Data</a></button><br><br>

 <table border="1" cellspacing="0" cellpadding="5">
<tr>
   <td>#</td>
   <td>NIS</td>
   <td>Nama Lengkap</td>
   <td>Jenis Kelamin</td>
   <td>Kelas</td>
   <td>Jurusan</td>
   <td>Alamat</td>
   <td>Golongan Darah</td>
   <td>Nama Ibu Kandung</td>
  </tr>
<?php 
    $i = 1;
    while ($siswa = $listSiswa->fetch_array()) {
   ?>
<tr>
   <td><?= $i++ ?></td>
   <td><?= $siswa['nis'] ?></td>
   <td><?= $siswa['nama_lengkap'] ?></td>
   <td><?= $siswa['jenis_kelamin'] ?></td>
   <td><?= $siswa['kelas'] ?></td>
   <td><?= $siswa['jurusan'] ?></td>
   <td><?= $siswa['alamat'] ?></td>
   <td><?= $siswa['golongan_darah'] ?></td>
   <td><?= $siswa['nama_ibu_kandung'] ?></td>
  </tr>
<?php } ?>
 </table>
</body>
</html>

lalu jalankan maka akan seperti ini:

Data 3 orang siswa tersebut masih kosong karena kita baru membuat kolom baru tadi. Kita coba tambah data dan isikan formnya seperti berikut:

Lalu jika di klik Simpan maka.........

Data tersimpan dan dimunculkan~~~~~~~~.

Mungkin sekian saja pada pertemuan kali ini dan sampai jumpa di pertemuan berikutnya, Wassalamualaikum Warahmatullahi Wabarokatuh.

Pemrograman Web Dan Perangkat Bergerak

Cari Blog Ini

Haikal PG - XI RPL 1 - PWPB Sesi 28

Komentar

Posting Komentar

Postingan populer dari blog ini

Haikal PG - XI RPL 1 - PWPB Sesi 25

Haikal PG - XI RPL 1 - PWPB Sesi 7

Haikal PG - XI RPL 1 - PWPB Sesi 19