Pilih Laman

sumber : https://kelasprogrammer.com/cara-membuat-web-dinamis-dengan-php/

1. Instalasi web server (Xampp)

Xampp merupakan web server yang memungkinkan kita menjalankan website dari localhost. Website bisa kita kelolah dari komputer kita secara offline sebelum web nantinya diunggah ke hosting sehingga dapat diakses oleh pengguna di internet. selain itu di dalam paket aplikasi xampp telah tersedia database MySQL yang bisa kita manfaatkan untuk pengelolaan manajemen basis data di aplikasi web yang dibuat. Untuk panduan instalasi baca pada artikel cara instal xampp

2. Teks Editor (Visual Studio Code)

Teks editor merupakan aplikasi yang digunakan untuk menulis setiap baris sintak program. Ada banyak teks editor yang bisa digunakan namun yang saya rekomendasikan adalah visual studio code, selain itu ada juga notepad++ atau sublime text. Kalian bisa mendownload ketiga softaware tersebut langsung dari website resmi masing-masing. Untuk visual studio code bisa di download disini

Membuat Perancangan Sistem

Perancangan sistem adalah cara kita menggambarkan suatu sistem yang akan kita buat melalui simbol-simbol tertentu memberikan arti/makna. Pada level yang paling rendah kita membuat dengan menggunakan diagram konteks.

Diagram konteks adalah gambaran sistem yang dirancang secara garis besar yang terdiri dari sebuah proses dan beberapa entitas yang berinteraksi di dalamnya.

diagram konteks web dinamis

Terdapat dua entitas yakni pengunjung dan admin, Pengunjung dapat melihat dan memberikan komentar pada setiap artikel berita yang di publish di dalam website. Sedang Admin dapat menginput data artikel (termasuk kategori), verifikasi komentar dan menginput data admin lainnya, jadi dalam hal ini website bisa memiliki lebih dari satu admin yang akan mengelola data di dalam sistem. Admin akan menerima laporan daftar artikel, komentar yang masuk serta daftar admin yang ada di dalam sistem.

Diagram konteks dapat di jabarkan lebih lanjut pada level-level berikutnya untuk menggambarkan sistem secara lebih rinci.

Membuat Struktur Tabel

Rancangan struktur tabel digunakan untuk memberikan informasi secara detail dari setiap kolom (field) yang terdapat dalam masing-masing tabel. Informasi terkait tipe data yang digunakan serta penggunaan atribut lainnya pada setiap field.

1. Tabel Artikel

Tabel artikel berfungsi untuk menyimpan data artikel. Terdapat 8 kolom (field) yaitu id_artikel, kode_artikel, judul_artikel dan beberapa lainnya.

Setiap kolom (field) menggunakan tipe data yang berbeda-beda sesuai dengan karakteristik nilai yang akan di tampung baik untuk tipe numerik seperti integer maupun tipe string (char, varchar, text) atau pun tipe date untuk tanggal.

Kunci utama atau primary key yang digunakan pada tabel ini adalah id_artikel dengan menggunakan auto_increment. fungsi ini adalah fungsi yang ada di database yang memungkinkan untuk membuat angka unik secara otomatis dan terurut setiap kali ada records baru yang di masukan ke dalam tabel tersebut.

No Kolom Tipe Keterangan
1 id_artikel Int(11) Primary Key, Auto_increment
2 kode_artikel char(11) Not Null, Unik
3 judul_artikel varchar(100) Not Null
4 isi_artikel text Not Null
5 gambar varchar(100)
6 tanggal date
7 status int(11) Not Null
8 id_kategori int(11) Not Null

2. Tabel Kategori

Tabel kategori berfungsi untuk menyimpan data kategori yang terdiri dari 3 kolom yaitu id_kategori sebagai kunci utama bertipe integer, nama kategori dan gambar_kategori bertipe varchar.

No Kolom Tipe Keterangan
1 id_kategori int(11) Primary Key, Auto_increment
2 nama_kategori varchar(50) Not Null
3 gambar_kategori varchar(100)

3. Tabel Komentar

Tabel komentar berfungsi untuk menyimpan data komentar dengan memiliki 6 field (kolom) seperti pada tabel di bawah ini:

No Kolom Tipe Keterangan
1 id_komentar int(11) Primary Key, Auto_increment
2 id_artikel int(11) Not Null
3 nama varchar(50)
4 email varchar(50)
5 isi_komentar text
6 status_komentar int(11) Not Null

4. Tabel Pengguna

Tabel pengguna berfungsi untuk menyimpan data pengguna aplikasi dalam hal ini adalah administrator fungsi lainnya adalah sebagai validasi login ke aplikasi, jadi hanya admin yang memiliki data yang tersimpan di tabel pengguna lah yang bisa masuk ke aplikasi.

No Kolom Tipe Keterangan
1 id_penggunaUtama int(11) Primary Key, Auto_increment
2 kode_pengguna char(9) Not Null, unik
3 nama_pengguna varchar(50)
4 email varchar(35)
5 no_telp char(14)
6 username varchar(50) Not Null
7 password varchar(100) Not Null
8 status int(11) Not Null

Relasi Antar Tabel

Relasi antar tabel memberikan informasi mengenai hubungan dari setiap tabel yang saling berkaitan satu dengan yang lain dalam database.

relasi tabel untuk website dinamis di phpmyadmin

Pada gambar di atas menggambarkan hubungan dari masing-masing tabel yang salin berkaitan dan berketergantungan antara satu dengan yang lain masing-masing tabel memiliki kunci utama (primary key) dan akan menjadi kunci tamu (foreign key) pada table yang direlasikan.

Misalnya pada tabel artikel di relasikan dengan tabel kategori field yang direlasikan adalah id_kategori di mana field id_kategori di dalam tabel kategori sebagai kunci utama dan menjadi kunci tamu di tabel artikel, begitu juga pada tabel komentar dan pengguna kunci utama setiap tabel menjadi kunci tamu di tabel artikel.

Tabel profil tidak memiliki relasi atau hubungan dengan tabel lainnya karena hanya berfungsi untuk menyimpan informasi website saja.

Implementasi Dalam Program

Pada tahap ini saya sedikit menjukan beberapa contoh bagian program pada website dinamis menggunakan PHP dan MySQL.

Bagian BackEnd

Halaman Login

Halaman login digunakan untuk admin masuk ke dashboard aplikasi. Didalam dashboard admin dapat melakukan beberapa hal penting di dalam website seperti sistem CRUD (createreadupdatedelete) pada masing-masing data yang dibutuhkan.

<div class="card mb-4">
  <div class="card-header">Halaman Login</div>
    <div class="card-body">
        <div class="row">
     
            <div class="col-sm-5">
                <form action="index.php?halaman=login" method="post">
                    <div class="form-group">
                        <label for="username">Username:</label>
                        <input type="text" class="form-control" name="username" placeholder="Masukan username">
                    </div>
                    <div class="form-group">
                        <label for="pwd">Password:</label>
                        <input type="password" name="password" class="form-control" placeholder="Masukan password">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>

Di halaman login admin harus memasukan username dan password untuk bisa masuk ke halaman administrator. Sistem akan melakukan validasi dengan cara mengecek informasi pengguna di database, apabila username dan password sesuai maka pengguna akan di alihkan ke halaman admin.

form halaman login

Halaman Kategori

Halaman kategori merupakan halaman khusus untuk admin menambah jenis kategori artikel di dalam website.

<div class="card mb-4">
    <div class="card-header">
        <button type="button" id="btn-tambah-kategori" class="btn btn-primary"><span class="text"><i class="fas fa-car fa-sm"></i> Tambah Kategori</span></button>
    </div>
    <div class="card-body">
        <div class="card-columns">
            <?php         
            // include database
            include '../config/database.php';
            // perintah sql untuk menampilkan daftar kategori
            $sql="select * from kategori";
            $hasil=mysqli_query($kon,$sql);
            $no=0;
            //Menampilkan data dengan perulangan while
            while ($data = mysqli_fetch_array($hasil)):
            $no++;
            ?>
            <div class="card bg-basic" style="width: 12rem;">
            <a href="index.php?halaman=artikel&kategori=<?php echo $data['id_kategori'];?>"><img class="card-img-top" src="artikel/gambar_kategori/<?php echo $data['gambar_kategori'];?>" alt="Card image cap"></a>
                <div class="card-body text-center">
                <a href="index.php?halaman=artikel&kategori=<?php echo $data['id_kategori'];?>"><h5 class="card-title"><?php echo $data['nama_kategori'];?></h5></a>
                <a href="#" class="hapus_kategori" id_kategori="<?php echo $data['id_kategori']; ?>" gambar="<?php echo $data['gambar_kategori']; ?>"><h6 class="text-danger">Hapus</h6></a>
                </div>
            </div>
            <?php endwhile; ?>
        </div>
    </div>
</div>

Berikut ini adalah tampilan halaman kategori, dengan menampilkan gambar icon yang merepresentasikan kategori.

kategori di website dinamis

Halaman Artikel

Halaman artikel berupa gambar, judul, kategori, tanggal di terbitkan serta status apakah artikel tersebut di publish atau tidak. Admin dapat melakukan operasi CRUD pada setiap artikel yang diterbitkan.

        <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Gambar</th>
                    <th>Judul</th>
                    <th>Kategori</th>
                    <th>Tanggal</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
            <?php
                // include database
                include '../config/database.php';
                // perintah sql untuk menampilkan daftar artikel
                $id_kategori=$_GET['kategori'];
                $sql="select * from artikel inner join kategori on kategori.id_kategori=artikel.id_kategori where kategori.id_kategori='$id_kategori' order by id_artikel desc";
                $hasil=mysqli_query($kon,$sql);
                $no=0;
                //Menampilkan data dengan perulangan while
                while ($data = mysqli_fetch_array($hasil)):
                $no++;
            ?>
            <tr>
                <td><?php echo $no; ?></td>
                <td><img  src="artikel/gambar/<?php echo $data['gambar'];?>" alt="Card image cap" width="80px"></td>
                <td><?php echo $data['judul_artikel']; ?></td>
                <td><?php echo  $data['nama_kategori'];  ?></td>
                <td><?php echo date("d-m-Y",strtotime($data['tanggal'])); ?></td>
                <td><?php echo $data['status'] == 1 ? "<span class='text-success'>Publish</span>" : "<span class='text-warning'>Konsep</span>"; ?> </td>
                <td>   
                    <button class="btn-edit-artikel btn btn-warning btn-circle" id_artikel="<?php echo $data['id_artikel']; ?>" kode_artikel="<?php echo $data['kode_artikel']; ?>" data-toggle="tooltip" title="Edit artikel" data-placement="top">Edit</button> 
                    <button class="btn-hapus-artikel btn btn-danger btn-circle"  id_artikel="<?php echo $data['id_artikel']; ?>"  gambar="<?php echo $data['gambar']; ?>"  data-toggle="tooltip" title="Hapus artikel" data-placement="top">Hapus</button>
                </td>
            </tr>
            <!-- bagian akhir (penutup) while -->
            <?php endwhile; ?>
            </tbody>
        </table>
daftar artikel web dinamis menggunakan php dan mysql

Berikut ini contoh untuk form tambah artikel

<?php 
     // mengambil data artikel dengan kode paling besar
      include '../../config/database.php';
      $query = mysqli_query($kon, "SELECT max(id_artikel) as kodeTerbesar FROM artikel");
      $data = mysqli_fetch_array($query);
      $id_artikel = $data['kodeTerbesar'];
      $id_artikel++;
      $huruf = "A";
      $kodeartikel = $huruf . sprintf("%04s", $id_artikel);

?>
<form action="artikel/tambah-artikel.php" method="post" enctype="multipart/form-data">
    <!-- rows -->
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group">
                <label>Kode:</label>
                <h3><?php echo $kodeartikel; ?></h3>
                <input name="kode_artikel" value="<?php echo $kodeartikel; ?>" type="hidden" class="form-control">
            </div>
        </div>
    </div>
    <!-- rows -->
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group">
                <label>Judul Artikel:</label>
                <input name="judul_artikel" type="text" class="form-control" placeholder="Masukan nama artikel" required>
            </div>
        </div>
    </div>
    <!-- rows -->   
    <div class="row">
    <div class="col-sm-12">
        <div class="form-group">
            <label>Isi Artikel:</label>
            <textarea name="isi_artikel" class="form-control ckeditor"  id="ckeditor" rows="5" ></textarea>
        </div>
    </div>
    </div>
    <!-- rows -->
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <div id="msg"></div>
                <label>Gambar:</label>
                <input type="file" name="gambar" class="file" >
                    <div class="input-group my-3">
                        <input type="text" class="form-control" disabled placeholder="Upload Gambar" id="file">
                        <div class="input-group-append">
                                <button type="button" id="pilih_gambar" class="browse btn btn-dark">Pilih Gambar</button>
                        </div>
                    </div>
                <img src="gambar_default.png" id="preview" class="img-thumbnail">
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label>Kategori:</label>
                <select name="kategori" class="form-control">
                <?php
                    echo $id_kategori=$_POST['kategori'];
                    include '../../config/database.php';
                    $sql="select * from kategori where id_kategori='$id_kategori' limit 1";
                    $hasil=mysqli_query($kon,$sql);
                    while ($data = mysqli_fetch_array($hasil)):
                ?>
                    <option value="<?php echo $data['id_kategori']; ?>"><?php echo $data['nama_kategori']; ?></option>
                    <?php endwhile; ?>
                </select>
            </div>
        </div>
    </div>

    <!-- rows -->   
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <button type="submit" name="publish" class="btn btn-success">Publish</button>
                <button type="submit" name="simpan_konsep" class="btn btn-warning">Simpan Konsep</button>
            </div>
    
        </div>
   
    </div>   
</form>
<style>
    .file {
    visibility: hidden;
    position: absolute;
    }
</style>
<script>
    $(document).on("click", "#pilih_gambar", function() {
    var file = $(this).parents().find(".file");
    file.trigger("click");
    });
    $('input[type="file"]').change(function(e) {
    var fileName = e.target.files[0].name;
    $("#file").val(fileName);

    var reader = new FileReader();
    reader.onload = function(e) {
        // get loaded data and render thumbnail.
        document.getElementById("preview").src = e.target.result;
    };
    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
    });
</script>
menambah artikel website

Halaman Pengguna (Admin)

Halaman pengguna adalah adalah halaman untuk admin dapat menambahkan admin yang lain. Sehingga pengelolaan data tidak hanya satu orang saja tapi bisa dari beberapa orang.

       <div class="table-responsive">
            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                <thead>
                <tr>
                    <th>No</th>
                    <th>Nama</th>
                    <th>Email</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
                </thead>
                <tbody>
                    <?php
                        // include database
                        include '../config/database.php';
                        // perintah sql untuk menampilkan daftar pengguna yang berelasi dengan tabel kategori pengguna
                        $sql="select * from pengguna order by id_pengguna desc";
                        $hasil=mysqli_query($kon,$sql);
                        $no=0;
                        //Menampilkan data dengan perulangan while
                        while ($data = mysqli_fetch_array($hasil)):
                        $no++;
                    ?>
                    <tr>
                        <td><?php echo $no; ?></td>
                        <td><?php echo $data['nama_pengguna']; ?></td>
                        <td><?php echo $data['email']; ?></td>
                        <td><?php echo $data['status'] == 1 ? 'Aktif' : 'Tidak Aktif'; ?></td>
                        <td>
                            <button class="btn-edit btn btn-warning btn-circle" id_pengguna="<?php echo $data['id_pengguna']; ?>" kode_pengguna="<?php echo $data['kode_pengguna']; ?>" >Edit</button>
                            <button class="btn-hapus btn btn-danger btn-circle"  id_pengguna="<?php echo $data['id_pengguna']; ?>" kode_pengguna="<?php echo $data['kode_pengguna']; ?>" level="<?php echo $data['level']; ?>" >Hapus</button>
                        </td>
                    </tr>
                    <!-- bagian akhir (penutup) while -->
                    <?php endwhile; ?>
                </tbody>
            </table>
        </div>
daftar admin

Bagian FrontEnd

Halaman Home

Halaman home merupakan halaman awal saat pengguna mengakses website. Halaman ini menyajikan daftar artikel terbaru yang di publish oleh admin.

<div class="row">
<?php
         
    include 'config/database.php';
    if (isset($_GET['kategori'])) {
        $sql="select * from artikel where status=1 and id_kategori=".$_GET['kategori']." order by id_artikel desc";
    }else {
        $sql="select * from artikel where status=1 order by id_artikel desc";
    }

    
    $hasil=mysqli_query($kon,$sql);
    $jumlah = mysqli_num_rows($hasil);
    if ($jumlah>0){
        while ($data = mysqli_fetch_array($hasil)):
    ?>
        <div class="col-sm-3">
            <div class="thumbnail">
                <a href="index.php?halaman=artikel&id=<?php echo $data['id_artikel'];?>"><img src="admin/artikel/gambar/<?php echo $data['gambar'];?>" width="100%" alt="Cinque Terre"></a>
                <div class="caption">
                    <h3><?php echo $data['judul_artikel'];?></h3>
                    <p>
                    <?php 
                    $ambil=$data["isi_artikel"];
                    $panjang = strip_tags(html_entity_decode($ambil,ENT_QUOTES,"ISO-8859-1"));
                    echo substr($panjang, 0, 200);?>
                    </p>
                    <p><a href="index.php?halaman=artikel&id=<?php echo $data['id_artikel'];?>" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
                </div>
            </div>
        </div>
        <?php 
        endwhile;
    }else {
        echo "<div class='alert alert-warning'> Tidak ada artikel pada kategori ini.</div>";
    };
     ?>
</div>

Berikut ini tampilan halaman home:

halaman depan website dinamis

Bagian Artikel

Ketika salah satu thumbnail artikel di halaman home di klik maka pengunjung akan di arahkan ke halaman artikel. Halaman artikel berisi informasi lengkap mengenai artikel yang di publish di dalam website.

<?php
    function input($data) {
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        return $data;
    }
    include 'config/database.php';
    $id_artikel=input($_GET['id']);
    $query = mysqli_query ($kon,"select * from artikel a inner join kategori k on k.id_kategori=a.id_kategori where id_artikel='".$id_artikel."' limit 1");
    $data = mysqli_fetch_assoc($query); 
?>
<div class="row">
    <div class="col-sm-8">
        <div class="thumbnail">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.php">Home</a></li>
                    <li class="breadcrumb-item"><a href="index.php?halaman=home&kategori=<?php echo $data['id_kategori']; ?>"><?php echo $data["nama_kategori"];?></a></li>
                    <li class="breadcrumb-item active" aria-current="page"><?php echo $data["judul_artikel"];?></li>
                </ol>
            </nav>
            <img src="admin/artikel/gambar/<?php echo $data['gambar'];?>" width="100%" alt="Cinque Terre">
            <div class="caption">
                <?php
                echo strip_tags(html_entity_decode($data["isi_artikel"],ENT_QUOTES,"ISO-8859-1"));
                 ?>
                <hr>
            </div>
            <?php
                  if (isset($_GET['komentar'])) {
                    //Mengecek nilai variabel add yang telah di enskripsi dengan method md5()
                    if ($_GET['komentar']=='berhasil'){
                        echo"<div class='alert alert-success'>Komentar telah terkirim, menunggu persetujuan dari admin</div>";
                    }else {
                        echo"<div class='alert alert-danger'>Komentar gagal</div>";
                    }   
                }
            ?>
            <div class="comment">
                <form method="post" action="simpan-komentar.php">
                    <label><h2>Tinggalkan Komentar</h2></label>
                    <div class="form-group">
                        <input type="hidden" name="id_artikel" value="<?php echo $data['id_artikel'];?>" class="form-control">
                        <input type="hidden" name="status" value="0" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Nama:</label>
                        <input type="text" name="nama" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Email:</label>
                        <input type="email" name="email" class="form-control">
                    </div>

                    <div class="form-group">
                        <label>Komentar:</label>
                        <textarea class="form-control" name="komentar" rows="5"></textarea>
                    </div>
                    <div class="form-group">
                        <input type="submit"  name="form_komentar" class="btn btn-info" value="Kirim Komentar">
                    </div>
                </form>
            </div>

        </div>
    </div>

    <div class="col-sm-4">
        <div class="row">
            <?php
                include 'config/database.php';
                $sql="select * from artikel where status=1 order by id_artikel desc";
                $hasil=mysqli_query($kon,$sql);
                while ($data = mysqli_fetch_array($hasil)):
            ?>
            <div class="col-sm-12">
                <div class="caption">
                    <h4><?php echo $data['judul_artikel'];?></h4>
                    <div class="row">
                        <div class="col-xl-3">
                            <img src="admin/artikel/gambar/<?php echo $data['gambar'];?>" width="100%" alt="Cinque Terre">
                        </div>
                        <div class="col-sm-9">
                            <?php
                                $ambil=$data["isi_artikel"];
                                $panjang = strip_tags(html_entity_decode($ambil,ENT_QUOTES,"ISO-8859-1"));
                            
                                echo substr($panjang, 0, 80);
                            ?>
                        </div>
                    </div>
                </div>
            </div>
            <?php endwhile; ?>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <img src="gambar/iklan.png" width="100%"alt="Cinque Terre">
            </div>
        </div>
    </div>  
</div>