Read Data (Data Base)

PRAKTIKUM 27

Nama : M.Fadlul Hafiizh

Kelas : XI-RPL 2

 Assalamualaikum Wr.Wb...

Gaesss gaesss sekalean balik lagi di postingan Tutor Gesit, blog koding-koding nyenengiiin😁. Pada postingan kaliiini kita akan mencoba untuk read data atau membaca atau juga bisa disebut dengan memanggil data yang ada pada database. seperti apakah caranya? akan saya jelaskan step by step nya, Let's chek this out....

catatan : disini aplikasi yang saya gunakan ialah xampp yaa.

1. Yang pertama buatlah struktur file seperti ini, simpan di dalam folder htdocs

Struktur file seperti dapat bermanfaat agar dapat memudahkan kita dalam menyusun/membuat sebuah web, karena dengan struktur ini kita dapat dengan mudah memisahkan file-file yang berhubungan dengan web.

2. Buat database dan tabel

disini jika kalian menggunakan aplikasi yang sama yaitu xampp, kalian tinggal buka browser dan ketik halaman localhost/phpmyadmin. Lalu create database dan buat tabel, disini saya membuat tabel dengan nama siswa yang berisi kolom seperti dibawah.

3. Isi value tabel tersebut

Caranya liat langsung kaya dibawah ini yaa

Dan untuk tambah data lainnya, seperti ini caranya:

4.Buat kodingan di file liblary.php

<?php session_start(); $host = 'localhost'; $user = 'hafiizh'; $pass = ''; $db = 'db_pwpb19'; $mysqli = mysqli_connect($host, $user, $pass, $db)or die('Tidak dapat terhubung ke DataBase');

session_start(); digunakan untuk menciptakan session, session digunakan untuk menyimpan data atau state pada server, lalu untuk konfigurasi awal koneksi ke database yaitu:

Host adalah host database anda.

User adalah username database anda. Default nya root

Pass adalah password database anda. Default nya kosong

DB adalah database yang sudah anda buat pada step 2.

mysqli adalah perintah untuk melakukan koneksi ke database dengan konfigurasi yang sudah kita atur sebelumnya.

5. Buat kodingan di views/v_index.php

ini sudah saya hias dengan css ya, kalian bisa buat css kalian sendiri sesuai kreasi kalian:v

<style type="text/css"> @keyframes rotate{ 100%{ transform: rotate(2turn); } } .border { position: relative; z-index: 0; width: 1200px; height: 100px; border-radius: 10px; overflow: hidden; padding: 5rem; } .border::before { content: ''; position: absolute; z-index: -7; left: -50%; top: -50%; width: 200%; height: 200%; background-repeat: no-repeat; background-size: 50% 50%, 50% 50%; background-position: 0 0, 100% 0, 100% 100%, 0 100%; background-image: linear-gradient(#FFC107, #FFC107), linear-gradient(#3F51B5, #3F51B5), linear-gradient(#E91E63, #E91E63), linear-gradient(#4CAF50, #4CAF50); animation: rotate 4s linear infinite; } .border::after { content: ''; position: absolute; z-index: -1; left: 10px; top: 10px; width: calc(95% - 0px); height: calc(92% - 0px); background: linear-gradient(to bottom, #810771 0%, #ef1ed3 100%); border-radius: 5px; } th{ border: outset 5px orange; background: silver; } td{ border: inset 4px #eea41b; background: silver; } </style> <a href="tambah.php">Tambah Data</a><br><br> <table border="1" class="border"> <thead> <tr> <th>No</th> <th>NIS</th> <th>Nama Lengkap</th> <th>Jenis Kelamin</th> <th>Kelas</th> <th>Jurusan</th> <th>Alamat</th> <th>Golongan Darah</th> <th>Nama Ibu Kandung</th> </tr> </thead> </table>

6. Buat kodingan di index.php

<?php include 'lib/library.php'; include 'views/v_index.php'; ?>

7. Coba buka di browser

Setelah dibuka pasti tampilannya akan seperti ini, ini merupakan hasil yang saya screenshot sebelum saya beri css

8.Buka file index.php

tambahkan query untuk menampilkan data siswa

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

 $sql merupakan variabel yang berfungsi menyimpan query anda dan query yang dibuat harus mengikuti kaidah penulisan SQL.

9.Buka lagi file v_index.php

tambahkan kodingan seperti dibawah

<style type="text/css"> @keyframes rotate{ 100%{ transform: rotate(2turn); } } .border { position: relative; z-index: 0; width: 1200px; height: 100px; border-radius: 10px; overflow: hidden; padding: 5rem; } .border::before { content: ''; position: absolute; z-index: -7; left: -50%; top: -50%; width: 200%; height: 200%; background-repeat: no-repeat; background-size: 50% 50%, 50% 50%; background-position: 0 0, 100% 0, 100% 100%, 0 100%; background-image: linear-gradient(#FFC107, #FFC107), linear-gradient(#3F51B5, #3F51B5), linear-gradient(#E91E63, #E91E63), linear-gradient(#4CAF50, #4CAF50); animation: rotate 4s linear infinite; } .border::after { content: ''; position: absolute; z-index: -1; left: 10px; top: 10px; width: calc(95% - 0px); height: calc(92% - 0px); background: linear-gradient(to bottom, #810771 0%, #ef1ed3 100%); border-radius: 5px; } th{ border: outset 5px orange; background: silver; } td{ border: inset 4px #eea41b; background: silver; } </style> <a href="tambah.php">Tambah Data</a><br><br> <table border="1" class="border"> <thead> <tr> <th>No</th> <th>NIS</th> <th>Nama Lengkap</th> <th>Jenis Kelamin</th> <th>Kelas</th> <th>Jurusan</th> <th>Alamat</th> <th>Golongan Darah</th> <th>Nama Ibu Kandung</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> <td><?=$siswa['alamat']?></td> <td><?=$siswa['golongan_darah']?></td> <td><?=$siswa['nama_ibu_kandung']?></td> </tr> <?php } ?> </tbody> </table>

fetch_array() digunakan untuk mendapatkan data dalam bentuk array kemudiakn dilakukan iterasi sejumlah data yang ada dari hasil query

$siswa[‘nis’] digunakan untuk mendapatkan data NIS pada tabel.

Nama array asosiatif yang dipanggil harus sesuai dengan nama field pada tabel yang anda buat

10.Lihat pada browser dan inilah jadinya

Semoga bermanfaat....