Membuat Tampilan Sederhana HTML

             Hai nawak-nawak sekalian, pada article kali ini kita akan membuat tampilan sederhana html. Sebelum itu pastikan kalian sudah membaca struktur-struktur dari html dan juga php, jika belum silahkan baca dulu di Belajar coding HTML dan juga Belajar coding PHP. Jika anda sudah membacanya mari kita lanjutkan.

             Saya akan membuat tampilan utama saja yang berhubungan dengan mahasiswa yang ingin mengambil mata kuliahnya di kampus. Pastinya dong dimana ada data selalu ada database sebagai tempat penyimpanan data tersebut. Selanjutnya aktifkan xampp dan buka notepad kalian, saya sarankan gunakan Notepad C++ karena lebih gampang dalam pembuatannya.

            Sebelum kita melanjutkan codingan kita, kita membuat database terlebih dahulu dan mengecheck apakah database tersebut berjalan dengan baik apa tidak.

              Jika sudah membuat database selanjutnya kita membuat koneksi.php untuk meanggil database kita kedalam program yang akan kita buat.

koneksi.php

<?php

$host_name = 'localhost';
$user_name = 'root';
$password = '';
$database = 'new_mahasiswa';

$connect_database = mysqli_connect($host_name,$user_name,$password);

if(!$connect_database) {
die('connection failed '. mysqli_connect_error());

}
mysqli_select_db($connect_database,$database);

?>

              Ikuti seperti yang ada diatas ya nawak-nawak, ingat databasenya harus sesuai dengan apa yang kalian buat, perhatikan besar kecilnya dan tanda underscore karena itu akan mempengarui dalam pemanggilannya. Ok selanjutnya menuju halamanutama.php.

halamanutama.php

<?php

include('koneksi.php');

$batas = 5; // Jumlah data per-halaman

$pg = isset($_GET['pg']) ? $_GET['pg'] : ""; 

 

if(empty($pg)) {

$posisi = 0;

$pg = 1;

} else {

$posisi = ( $pg - 1 ) * $batas;

}

$sql = "SELECT * FROM mata_Kuliah limit $posisi, $batas";

$no = 1+$posisi;

$res = mysqli_query($connect_database,$sql);

if(mysqli_num_rows($res) > 0) { ?>

<link rel="stylesheet" href="bootstrap.min.css">

<div class="container">

<table class="table">

<tr>

<th>No</th>

<th>KodeMK</th>

<th>Nama_MK</th>

<th>Kelas</th>

<th>Jam</th>

</tr>

<?php

while($row = mysqli_fetch_assoc($res)) {

echo "<tr>";

echo "<td>".$no."</td>";

echo "<td>".$row['kodeMK']."</td>";

echo "<td>".$row['nama_MK']."</td>";

echo "<td>".$row['kelas']."</td>";

echo "<td>".$row['jam']."</td>";

echo "</tr>";

$no++;

}

?>

</table>

<?php

$sql1 = "SELECT * FROM mata_kuliah";

$res2 = mysqli_query($connect_database,$sql1);

$jml_data = mysqli_num_rows($res2);

$JmlHalaman = ceil($jml_data / $batas); 

 

if ( $pg > 1 ) {

$link = $pg-1;

$prev = "<a href='?pg=$link'>Sebelumnya </a>";

} else {

$prev = "Sebelumnya ";

}

 

$nmr = '';

for ( $i = 1; $i<= $JmlHalaman; $i++ ){

if ( $i == $pg ) {

$nmr .= $i . " ";

} else {

$nmr .= "<a href='?pg=$i'>$i</a> ";

}

}

 

if ( $pg < $JmlHalaman ) {

$link = $pg + 1;

$next = " <a href='?pg=$link'>Selanjutnya</a>";

} else {

$next = " Selanjutnya";

}

 

echo $prev . $nmr . $next;

?>

</div>

<?php 

} 

mysqli_close($connect_database);

?>

             Seperti yang anda lihat diatas saya hanya membatasi 5 data saja di tiap halaman, jika lebih maka akan ke halaman selanjutnya. Jika sudah anda buat selanjutnya kita test di browser kita. Silahkan anda ketikkan localhost/page/halamanutama.php.

             Jika kalian hanya melihat halaman kosong, jangan panik ataupun kaget. Tenang itu berarti data kalian sudah berhasil dijalankan. Mengapa halaman tersebut kosong? Hayoo kenapa?

             Hahaha simple saja karena kita emang belum membuat data tersebut, jadi gak perlu bingung lagi. Karena kita tidak membuat fitur tambah data maka kita mengeditnya melalui localhost/phpmyadmin/ → new_mahasiswa → click table-nya → insert. Nah disitu kalian menemukan beberapa kolom untuk menginputkan data. Silahkan anda isikan 1 saja sebagai pembuktian apakah berjalan dengan baik atau tidak. 

             Jika sudah anda buat maka hasilnya seperti contoh dibawah ini.

             Bagaimana sudah keluar bukan hasilnya? Jika sudah berarti anda selesai ditahap pertama untuk membuat tampilan sederhana. Jika tetap mengalami kesalahan silahkan anda dapat mendownloadnya di https://github.com/kalebmolewe/membuat-tampilan-sederhana-html.

             Sekian dulu dari saya selamat mencoba dan semoga article ini bermanfaat untuk nawak-nawak sekalian, Jangan lupa ya untuk melihat yang lain juga. Selamat bekerja ☺❤☺❤☝✌