Aplikasi CRUD Sederhana PHP MYSQL – Lanjutan

Okay, hari ini kita akan melanjutkan seri tutorial Pemrograman Web.

Update: Karena masalah teknis, maka saya tidak bisa menuliskan detail skrip dan penjelasannya. Mungkin bug dari wordpress sehingga artikel yang telah ditulis tidak dapat disimpan. Jika disimpan malah hilang. Untuk download skrip lengkapnya, bisa didownload disini -> Aplikasi CRUD sederhana menggunakan PHP dan MySQL

Untuk menggunakn skrip ini, jangan lupa buat database dengan nama myblogdb di console phpmyadmin, kemudian buat tabel siswa dengan 6 kolom (id (primary, auto_increment), nis(varchar), nama(varchar), jk(varchar), telp(varchar), alamat(varchar)). Jika ada yang ingin ditanyakan bisa tinggalkan komentar dibawah, nanti saya usahakan untuk jawab. Thanks.

Seri-seri sebelumnya bisa anda temukan dibawah kategori Web Development.

Sebelumnya kita sudah membuat sebuah desain halaman web menggunakan HTML dan CSS. Nah, sekarang kita akan mulai dengan membuat halaman web tersebut interaktif dengan pengguna alias mengubah halaman website tersebut menjadi sebuah aplikasi website sederhana. Dan seperti pada artikel sebelumya tentang MySQL, saya sudah sempat menuliskan tentang CRUD yang digunakan pada hampir setiap aplikasi berbasis web.

Bentuk desain setelah jadi.

index.php

Sengaja saya mengambil desain halaman langsung dari W3Schools.com karena panduan dan dokumentasi pemrograman web disana sangat mudah untuk dipahami. Jika anda belum memiliki Source code untuk desain ini, bisa langsung mengambilnya pada artikel sebelumnya tentang membangun aplikasi web sederhana menggunakan HTML dan CSS. kemudian simpan skrip tersebut pada folder myweb (atau nama apa saja) didalam folder htdocs XAMPP dengan nama index.php.

Setelah itu buatlah folder css didalam folder myweb tersebut seperti pada gambar berikut.

styling.css

Buka file index.php, kemudian pada bagian head, blok semua code dari tag pembuka <style> hingga tag penutup </style>, copy code tersebut kemudian Paste skrip tersebut (seperti yang dibawah ini) pada sebuah file baru dan namakan styling.css, setelah itu, hilangkan tag pembuka dan tag penutup <style> dan </style>, kemudian simpan didalam folder CSS.

//filename: styling.css

div.container {
    width: 100%;
    border: 1px solid gray;
}
header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}
nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}
nav ul {
    list-style-type: none;
    padding: 0;
}
nav ul a {
    text-decoration: none;
}
article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}

header.php

Setelah itu, pada file index.php, pindahkan code dari bagian paling atas hingga tag pembuka body

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/styles.css">
<title>Beranda</title>
</head>
<body>

ke sebuah file baru dengan nama header.php, kemudian simpan pada folder root (folder myweb selanjutnya akan disebut root)

Top Bar

lalu buat sebuah file dengan nama topbar.php, kemudian isi dengan skrip berikut:

<header>
<a href="index.php"><h1>APLIKASI CRUD SEDERHANA</h1></a>
</header>

footer.php

selanjutnya pada bagian bawah file index.php, mulai pembuga tag <footer> hingga penutup tag </footer> dipindahkan ke sebuah file lainnya dengan nama footer.php, seperti script footer.php berikut.

<footer>Copyright &copy; r4ndiel.com</footer>

left-sidebar.php

tag pembuka hingga penutup <nav> hingga  </nav> dipindahkan ke file baru dengan nama nav.php.

<nav>
  <ul>
    <li><a href="index.php">Beranda</a></li>
    <li><a href="insert.php">Tambah Data</a></li>
    <li><a href="tentang.php">Tentang</a></li>
  </ul>
</nav>

Buat lagi sebuah file dan namakan topbar.php, kemudian isi dengan

<header>
   <a href="index.php"><h1>APLIKASI CRUD SEDERHANA</h1></a>
</header>

display.php

Bagian tag <article> hingga tag penutup </article> juga dipindahkan ke file display.php.

Pada akhirnya anda akan melihat beberapa bari code saja didalam file index.php. Dari sini, kita akan memasukkan kembali file-file tersebut kedalam index.php dengan cara yang lebih praktis.

<!-- File index.php setelah dipreteli-->


<div class="container">
</div>

</body>
</html>

Ubah file index diatas menjadi seperti dibawah ini. Setiap penyisipan include mesti memperhatikan tempat penempatan komponen sebelumnya, misalnya include “header.php” mesti disisipkan pada bagian awal tempat dimana sebelumnya terdapat code yang tulis kedalam file header.php.

<?php 
include "header.php";
?>

<div class="container">
<div class="container-body">
<?php 
include"top-bar.php";
?>
  
<?php include"left-sidebar.php";?>

<?php 
	include"display.php";
?>
<?php 
include "footer.php";
?>
</div>


</div>

</body>
</html>

Setelah itu, anda bisa mencoba halaman ini pada browser.

Pembagian ini sebenarnya sama saja dengan skrip yang sebelumnya, akan tetapi ini dimaksud agar lebih mudah dalam mengembangkan aplikasi database dan anda pun akan lebih mudah mengerti jika suatu saat ada salah satu bagian skrip yang error.

Sekian dulu, Artikel ini bersambung ke artikel selanjutnya dikarenankan masalah teknis pada website ini.. 😀
Download Script lengkapnya disini -> Aplikasi CRUD sederhana menggunakan PHP dan MySQL

Salam JJ

r4ndiel

Leave a Reply

Your email address will not be published. Required fields are marked *