Membuat aplikasi buku tamu menggunakan PHP dan MySQL

Assalamu'laykum, kali ini kita akan belajar Membuat aplikasi buku tamu menggunakan PHP dan MySQL. Artikel ini ditujukan untuk pemula yang ingin belajar membuat aplikasi menggunakan PHP dan MySQL.

Sebelum kita mulai membuat aplikasi buku tamu, pastikan environment/kumpulan software pendukung yang diperlukan sudah anda miliki. Pendukung yang dibutuhkan antara lain:

  1. Text Editor (disini saya menggunakan Sublime Text)
  2. WebServer yang sudah dikonfigurasi dengan PHP (disini saya menggunakan Apache2 WebServer)
  3. Database (DBMS MySQL).

Sistem Operasi komputer yang saya gunakan adalah Ubuntu Linux, tutorial untuk menginstall environment/software pendukung jika anda menggunakan Ubuntu Linux dapat dilihat pada link berikut ini.

Tutorial menginstall LAMPP pada Ubuntu

Jika anda menggunakan Sistem Operasi MS Windows, silahkan gunakan aplikasi XAMPP untuk memudahkan instalasi dan konfigurasi.

Download XAMPP untuk Windows


Persiapan

Pada Bagian ini, diasumsikan bahwa software pendukung sudah diinstall pada komputer anda dan script PHP sudah dapat berjalan dengan baik.

Sebagai gambaran, berikut struktur direktori / folder aplikasi buku tamu yang akan kita buat.

Struktur direktori / folder

Database

Sebelum melangkah lebih jauh, kita perlu untuk mendefinisikan database dari aplikasi yang akan kita buat.

Database yang akan kita buat bernama bukutamu. Masuk kedalam SQL console melalui command prompt atau PHPMyAdmin atau tools lain yang ada dikomputer anda, kemudian buat database baru bernama bukutamu seperti pada contoh berikut ini.

Database kita terdiri 2 tabel. Tabel daftar_tamu yang digunakan untuk menyimpan data tamu dan Tabel admin yang nantinya digunakan untuk menyimpan data user. Pada kesempatan kali ini kita hanya akan menggunakan tabel daftar_tamu. Tabel daftar_tamu terdiri dari beberapa field:

a. id (int) (Primary Key) (Auto Increment)
b. nama (varchar(100))
c. alamat (varchar(100))
d. email (varchar(100))

Berikut ini SQL query untuk membuat tabel daftar_tamu.

Pada tahap ini, database bukutamu beserta tabel daftar_tamu didalamnya siap digunakan.

Mulai Bekerja

Target kita pada kali ini adalah untuk membuat 2 halaman.

  1. Home Page / Beranda, untuk menampilkan daftar tamu yang telah mengisi buku tamu.
  2. Form, tempat tamu menuliskan kunjungannya.

Pertama-tama, letakkan folder bukutamu pada webroot webserver anda, jika anda menggunakan XAMPP biasanya webroot folder secara default adalah folder htdocs.

Kita akan membuat sebuah file bernama config.php didalam folder bukutamu, file ini kita gunakan untuk menyimpan konfigurasi username, password database. Selain itu, untuk mempermudah, kita juga akan membuat fungsi untuk melakukan redirect halaman web pada file ini. Berikut isi dari config.php

Selanjutnya, kita akan membuat file index.php sebagai initial script untuk aplikasi kita. Posisi file ini sejajar dengan file config.php didalam folder bukutamu. Berikut ini isi dari file index.php

Setelah file index.php dibuat, kita akan mencoba menjalankan file tersebut dari web browser. Masukan url http://localhost/bukutamu/ pada browser dan jalankan.

Terjadi Error

Akan terjadi pesan Warning seperti pada gambar diatas. Error ini terjadi karena beberapa file yang di include pada index.php tidak tersedia.

Selanjutnya kita akan mencoba membenahi error tersebut dengan melengkapi file yang kurang (layout/footer.php,layout/header.php,page/home.php,page/form.php)

Agar tidak lupa dan lebih jelas, kita ingat-ingat lagi strukutur direktori dan file pada aplikasi yang akan kita buat.

Berikut ini susunan file dan folder pada aplikasi bukutamu.
+bukutamu
    +layout
        -header.php
        -footer.php
    +page
        -home.php
        -form.php
    -index.php
    -config.php

Kita buat terlebih dahulu file header.php yang digunakan untuk meletakkan Judul umum aplikasi bukutamu.

Jika file header.php sudah kita buat, sekarang kita buat file footer.php untuk menuliskan footer.

Header dan footer sudah kita buat, selanjutnya tinggal file home.php yang digunakan untuk menampilkan daftar tamu yang telah mengisi buku tamu.

Setelah file home.php dibuat, kita akan membuat file form.php yang digunakan untuk menuliskan / menyimpan data kunjungan tamu kedalam database.

Apabila file form.php sudah kita buat aplikasi kita telah selesai. Sekarang saatnya untuk menjalankan aplikasi buku tamu sederhana yang sudah dibuat.

Pembahasan Khusus

Pada bagian ini kita akan sedikit membahas tentang perintah perintah yang digunakan pada file index.php,home.php dan form.php


Pertama-tama adalah file index.php

include __DIR__.'/config.php';

$page = !empty($_GET['page'])?$_GET['page']:null;

Ketika file index.php dieksekusi, file config.php akan dibaca dan diincludekan, sehingga variabel dan method yang ada dalam file config.php dapat digunakan pada index.php.

Kemudian baris selanjutnya adalah menginisiasi variabel $page dengan parameter dari URL. Jika tidak terdapat parameter page pada URL maka variabel $page akan diisi dengan nilai null.

Selanjutnya menuju ke block script berikutnya.

try{

    /*Men-include file header*/
    include __DIR__.'/layout/header.php';   

    /*membuat kondisi halaman yang ditampilkan berdasarkan parameter page*/
    switch ($page) {
        case 'home':
                include __DIR__.'/page/home.php';
            break;
        case 'form':
                include __DIR__.'/page/form.php';
            break;

        /*jika parameter page bukan 'home' atau 'form' atau tidak ada maka akan ditampilkan homepage */
        default:
                include __DIR__.'/page/home.php';
            break;
    }

    /*Men-include file footer*/
    include __DIR__.'/layout/footer.php';

}catch(\Exception $e){
    /*menampilkan error message jika terjadi error*/
    echo $e->getMessage();
}

file index.php diatas cukup mudah untuk dimengerti. Selanjutnya adalah file home.php. Kita akan mulai menguraikan file home.php sedikit demi sedikit.

    //home.php
    $pdo = new PDO($dbConfig['dsn'],$dbConfig['username'],$dbConfig['password']);

Potongan kode diatas merupakan proses pembuatan object PDO, PDO merupakan kependekan dari PHP Data Object, parameter yang digunakan adalah variabel yang didefinisikan didalam file config.php

Setelah object PDO dibuat, blok kode berikutnya adalah mengeksekusi query untuk mengambil data dari tabel daftar_tamu

//home.php (lanjutan)
$sql = " SELECT * FROM daftar_tamu";
        $pds = $pdo->query($sql);
        $data = $pds->fetchAll();

Object $pdo memiliki fungsi yang bernama query(), fungsi tersebut akan mengembalikan sebuah object yang dinamakan PDO Statement. Data diambil dari object PDOStatement dengan memanggil fungsi fetchAll() dan dimasukkan kedalam variabel $data.

Setelah data tamu dimasukan kedalam variabel $data, tahap selanjutnya adalah menguraikan data tersebut yang berbentuk array kedalam tampilan.

<?php if(count($data) > 0): ?>
    <table>
        <tr>
            <td>ID</td>
            <td>Nama</td>
            <td>Alamat</td>
            <td>Email</td>
        </tr>
    <?php foreach($data as $tamu): ?>
        <tr>
            <td><?=$tamu['id'] ?></td>
            <td><?=$tamu['nama'] ?></td>
            <td><?=$tamu['alamat'] ?></td>
            <td><?=$tamu['email'] ?></td>
        </tr>

    <?php endforeach; ?>
    </table>
<?php else: ?>
    Belum ada tamu
<?php endif; ?>

Selanjutnya adalah pembahasan tentang file form.php.Terdapat kesamaan antara file ini dengan file home.php. Perbedaanya ada pada query yang dieksekusi. Jika file home.php digunakan untuk mengambil data, file form.php digunakan untuk memasukan data kunjungan yang diinputkan melalui form kedalam tabel daftar_tamu.

$sql = " INSERT INTO daftar_tamu(";
        $sql.= " nama,alamat,email)";
        $sql.= " VALUES (";
        $sql.= " :nama,:alamat,:email)";

        $pds = $pdo->prepare($sql);

        $pds->bindValue(':nama',$_POST['nama']);
        $pds->bindValue(':alamat',$_POST['alamat']);
        $pds->bindValue(':email',$_POST['email']);
        $pds->execute();


        Helper::redirect('index.php');

Variabel $sql berisi string SQL yang akan dieksekusi, didalam SQL terdapat placeholder :nama,:alamat,:email, placheloder tersebut akan diisi dengan isian dari form yang diniputkan oleh tamu. Isian dari form diambil menggunakan variabel SuperGlobal $_POST

Demikian pembahasan khusus secara singkat terhadap potongan-potongan perintah yang digunakan dalam aplikasi buku tamu sederhana ini.

Semoga Bermanfaat,

Tags: Membuat Buku Wannabe


Manusia tidak luput dari kesalahan, begitu pula saya. Jika terdapat kesalahan dalam tulisan, sudilah untuk menghubungi saya, kritik dan saran akan saya terima dengan baik. Hubungi Saya