Pemrograman Web ~ Database Read & Create Data

Assalamualaikum Warohmatulohi Wabarokatu

Halloo semuanya balik lagi dengan saya dengan artikel Pemrograman Web. Kali ini kita akan mencoba membuat Web yang menggunakan data base dengan querry Read & Create data. Tanpa basa basi lagi mari kita mulai..

Read Data

Sebelumnya kita harus meyiapkan beberapa persiapan terlebih dahulu sebelum membuat database , seperti DBMS dan Text Editor. Untuk Text Editor seperti dapat menggunakan texteditor apa saja seperti yang biasa anda gunakan Untuk DBMS (Database Management System) -nya kita akan menggunakan Mysql.

Sebenernya Untuk DBMS ada banyak yang dapat kita gunakan , tetapi karena Mysql itu OpenSource atau gratis jadi kita menggunakan Mysql. 

Untuk menggunakan Mysql kita mengaktifkan dulu Mysqlnya dari XAMPP lalu browser dengan URL : localhost/phpmyadmin atau dengan membukanya dari localhost/ saja dan klik phpMyAdmin diujung kanan navbar.

Setelah itu kalian dapat langsung membuat database kalian , dimulai dengan membuat nama databasenya lalu mengisi database dengan table-table sesuai kebutuhan kalian. Untuk kali ini kita akan membuat database sederhana dengan database siswa.

Step 1 ~ Pertama yang harus kita lakukan adalah membuat Struktur Folder & File di htdocs dengan bentuk seperti berikut
Struktur folder dibuat agar memudahkan kita memisahkan file-file yang berhubungan dengan web.

Step 2 ~Setelah itu kita buat Database dengan tabelnya:


buatlah database dengan nama db_pwpb19 dan nama tablenya siswa.

Step 3 ~  Buatlah Struktur Tabelnya seperti berikut dan isi juga tabelnya:


Step 4 ~ Setelah itu kita pindah ke texteditor lalu buka lib/library.php yang sudah kita buat sebelumnya lalu coding seperti berikut:
<?php
session_start();

$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'db_pwpb19';

$mysqli = mysqli_connect($host, $user, $pass , $db)
or die ('Tidak dapat Koneksi ke Database');
?>

session_start() digunakan untuk menyimpan data atau state pad server.
  • $host = 'localhost'; adalah host database anda .
  • $user = 'root';adalah username database anda *defaulnya root
  • $pass = '';adalah password database *defaultnya kosong
  • $db = 'db_pwpb19';adalah database yang sudah anda buat sebelumnya
  • $mysqli = mysqli_connect($host, $user, $pass , $db)
    or die ('Tidak dapat Koneksi ke Database'); Untuk melakukan koneksi dengan konfigurasi yang sudah kita atur sebelunya.
Step 5 ~ buka file views/v_index.php .lalu buat table untuk menampilkan data siswa
<thead>
<th>#</th>
<th>NIS</th>
<th>Nama Lengkap</th>
<TH>Jenis Kelamin</TH>
<th>Kelas</th>
<th>Jurusan</th>
</thead>

Step 6 ~ Buka file index.php , lalu coding seperti berikut:
<?php
include 'lib/library.php';

include 'views/v_index.php';
?>

Setelah itu coba Cek tabel dibrowser dengan alamat localhost/pwpb18/index.php . bila terjadi erorr coba cek konfigurasi database .

Step 7 ~ Buka kembail file index.php , lalu tambahkan Codingan berikut :
<?php
include 'lib/library.php';

$sql = 'SELECT * FROM siswa';
$listsiswa = $mysqli -> query ($sql);
include 'views/v_index.php';
?>

$sql = 'SELECT * FROM siswa'; Untuk meymipan query anda .

Step 8 ~ Buka file vies/v_index.php , lalu tambahkan Codingan berikut :
<?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'] ?></td>
</tr>
<?php }?>
</table>

Setelah itu Coba anda Cek kembali.

Create Data 
Setelah kita dapat membuat web yang dapat menampilkan data dari database sekarang kita buat agar web tersebut dapat menginput datanya dari web.

Step 1 ~ Buka file  views/v_index.php ,lalu buat link ke form inputan , seperti berikut:
<a href="tambah.php">Tambah Data</a>
link dapat ditempatkan disebelum tabel atau sesudah tabel.

Step 2 ~ Buat file v_tambah.php difolder views , lalu buat codingan berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TaufikRPL1</title>
</head>
<body>
<form action="tambah.php" method="post">
<table cellpadding="5">
<tr>
<td>NIS</td>
<td><input type="text" name="nis"></td>
</tr>
<tr>
<td>Nama Lengkap</td>
<td><input type="text" name="nama_lengkap"></td>
</tr>
<tr>
<td>Jenis Kelamin
</td>
<td><input type="radio" name="jenis_kelamin"
id="jenis_kelamin" value="L">Laki-Laki</td>
<td><input type="radio" name="jenis_kelamin"
id="jenis_kelamin" value="P">Perempuan</td>
</tr>
<tr>
<td>Kelas
</td>
<td>
<select name="kelas" >
<option value="XI-RPL1">XI-RPL1</option>
<option value="XI-RPL2">XI-RPL2</option>
<option value="XI-RPL3">XI-RPL3</option>
</select>
</td>
</tr>
<tr>
<td>Jurusan</td>
<td><input type="text" name="jurusan"><br></td>
</tr>
</table><br>
<input type="submit" value="Simpan">
</form>
</body>
</html>

Step 3 ~ Buat file tambah.php di folder pwpb18, lalu ikuti Sourcecode berikut :
<?php
include 'lib/library.php';

include 'views/v_index.php';
?>

Setelah itu Coba anda cek Link nya apakah berhasil atau tidak .

Step 4 ~ Buka Kembali file tambah.php , lalu Coding kan seperti berikut :
<?php
include 'lib/library.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$nis = $_POST['nis'];
$namalengkap = $_POST['nama_lengkap'];
$jeniskelamin = $_POST['jenis_kelamin'];
$kelas = $_POST['kelas'];
$jurusan = $_POST['jurusan'];

$sql = "INSERT INTO siswa
(nis , nama_lengkap , jenis_kelamin , kelas , jurusan ,)
VALUES
('$nis', '$namalengkap' , '$jeniskelamin', '$kelas', '$jurusan')";
$mysqli -> query($sql) or die ($mysqli->error);

header('location: index.php');
}

include 'views/v_tambah.php';
?>

if ($_SERVER['REQUEST_METHOD'] == 'POST')Untuk memriksa apakah ada reqruest dalam bentuk POST yang dikirimkan kehalaman tambah.php?.
Untuk variable $nis dan lainnya digunakan untuk mengambil data dalah bentuk POST dari form.
 $sql = "INSERT INTO siswa
(nis , nama_lengkap , jenis_kelamin , kelas , jurusan)
VALUES
('$nis', '$namalengkap' , '$jeniskelamin', '$kelas', '$jurusan')";
Untuk membuat SQL string untuk memasukan data ke tabel siswa.
$mysqli -> query($sql) or die ($mysqli->error);Untuk melakukan querry ke SQL, apabila erorr akan menampilkan pesan erorr.
header('location: index.php'); Untuk mengarah halaman ke index.php

Studi Kasus 
Tambahkan Input  :
-Alamat 
-Golongan Darah
-Nama Ibu Kandung
Data tersebut dapat tersimpan pada tabel siswa dan dimunculkan  pada tampilan index.php

Untuk Pengerjaanya harus melakukan beberapa langkah. Untuk Langkah Langkah nya seperti berikut
Step 1 ~ Buat baris/Kolom baru di tabel dengan meninsertnya :


Step 2 ~ Panggil Kolom baru pada file v_index.php dengan membuatkan variable baru :
<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'] ?></td>
</tr>

Step 3 ~ Buka file v_tambah.php lalu tambahkan format form tambahan untuk meninput data baru :
<tr>
<td>Alamat</td>
<td><input type="text" name="alamat"></td>
</tr>
<tr>
<td>Golongan Darah</td>
<td>
<select name="golongan_darah" >
<option value="A">A</option>
<option value="AB">AB</option>
<option value="B">B</option>
<option value="O">O</option>
</select>
</td>
</tr>
<tr>
<td>Nama Ibu Kandung</td>
<td><input type="text" name="nama_ibu"></td>
</tr>
nama setipa form harus sama dengan nama setiap kolom di tabel siswa

Step 4 ~ Buka file tambah.php lalu tambahkan beberapa Codingan seperti memanggil dari form input dan membacanya :
$alamat = $_POST['alamat'];
$golongandarah = $_POST['golongan_darah'];
$namaibu = $_POST['nama_ibu'];

$sql = "INSERT INTO siswa
(nis , nama_lengkap , jenis_kelamin , kelas , jurusan ,
alamat, golongan_darah,nama_ibu )
VALUES
('$nis', '$namalengkap' , '$jeniskelamin', '$kelas', '$jurusan',
'$alamat', '$golongandarah','$namaibu')";

Step 5 ~ Kita coba apakah berhasil atau tidak dengan mencoba meninput data baru lalu mengecek hasilnya dengan melihat tampilan dari index.php dan mengecek diphpMyAdmin ,dan berikut hasil akhirnya

Okee sekian saja Materi kali ini semoga bermanfaat untuk mengembangkan Web Dinamis yang ingin anda buat , Tunggu Artikel berikutnya, cyaa

Wassalamualaikum Warohmatullohi Wabarokatu


Comments

Popular Posts