[TUTORIAL] Cara membuat Website Dinamis Sederhana dengan HTML, CSS, PHP, dan MySQL

Assalamu‘alaikum wr. wb.

Halo gais! Dalam Pemrograman Web, kita bisa membuat Website Sederhana dan Dinamis hanya menggunakan PHP dan MySQL saja. Berikut inilah Tutorialnya.

Sumber (Referensi) : Codexworld.com

Fungsionalitas pembuatan halaman web dinamis membantu membuat konten HTML halaman web dapat dikelola oleh admin/pengguna. Pengguna dapat membuat halaman web HTML dengan konten dinamis dan memodifikasi konten halaman di masa mendatang. Fitur manajemen halaman web HTML terutama digunakan di panel admin aplikasi web, yang memungkinkan admin situs membuat/memperbarui/menghapus halaman web HTML secara dinamis.

Fungsi manajemen halaman web HTML dapat diimplementasikan dengan operasi CRUD. Operasi CRUD PHP dapat membantu Anda membuat dan mengelola halaman HTML dinamis dengan MySQL.

Sebelum memulai untuk membuat Website Dinamis, buatlah Struktur Folder seperti ini :

📁 webdev
├── index.php
├── 📁 images
├── 📁 css
   ├── style.css
├── 📁 includes
   ├── login_function.inc.php
   ├── login_page.inc.php
   ├── mysqli_connect.php
├── 📁 layouts
   ├── header.php
   ├── footer.php
├── 📁 pages
   ├── add_products.php
   ├── calculator.php
   ├── delete_product.php
   ├── delete_user.php
   ├── edit_product.php
   ├── edit_user.php
   ├── konversi-suhu.php
   ├── loggedin.php
   ├── login.php
   ├── logout.php
   ├── password.php
   ├── register.php
   ├── view_products.php
   ├── view_users.php

A. Membuat Sticky Forms dengan PHP

Pertama, marilah kita buat terlebih dahulu File HTML-nya seperti ini :

<!doctype html>
<html lang="en">
<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="includes/style.css" type="text/css" media="screen">
    <meta charset="utf-8">
</head>
<body>
    <div id="header">
        <h1>Your Website</h1>
        <h2>catchy slogan...</h2>
    </div>
    <div id="navigation">
        <ul>
            <li><a href="./index.php">Home Page</a></li>
            <li><a href="../pages/register.php">Register</a></li>
            <li><a href="../pages/view_users.php">View Users</
  a></li>
            <li><a href="../pages/password.php">Change Password</a></li>
            <li><a href="../pages/add_products.php">Add Products</a></li>
            <li><a href="../pages/view_products.php">View Products</a></li>
            <li><a href="../pages/calculator.php">Calculator</a></li>
            <!-- <li><a href="../pages/konversi-suhu.php">Konversi Suhu</a></li> -->
        </ul>
    </div>
    <div id="content"><!-- Start of the page-specific content. -->
        <h1>Content Header</h1>

            <p>This is where the page-specific content goes. This section, and the corresponding header, will change from one page to the next.</p>

            <p>Volutpat at varius sed sollicitudin et, arcu. Vivamus viverra. Nullam turpis. Vestibulum sed etiam. Lorem ipsum sit amet dolore. Nulla facilisi. Sed tortor. Aenean felis. Quisque eros. Cras lobortis commodo metus. Vestibulum vel purus. In eget odio in sapien adipiscing blandit. Quisque augue tortor, facilisis sit amet, aliquam, suscipit vitae, cursus sed, arcu lorem ipsum dolor sit amet.</p>

    <!-- End of the page-specific content. --></div>

    <div id="footer">
        <p>Copyright &copy; <a href="#">Plain and Simple</a> 2007 | Designed by <a href="http://www.edg3.co.uk/">edg3.co.uk</a> | Sponsored by <a href="http://www.opendesigns.org/">Open Designs</a> | Valid <a href="http://jigsaw.w3.org/css-validator/">CSS</a> &amp; <a href="http://validator.w3.org/">XHTML</a></p>
    </div>
  </body>
</html>

Kemudian, pisahlah beberapa bagian Kode di atas menjadi beberapa Segmen seperti ini :

Pertama, simpanlah Kode Program berikut ini dengan Nama File index.php sebagai Halaman Utama :

<?php
    $page_title = "Halaman Depan";
    include('./layouts/header.php');
?>
        <h1>Content Header</h1>

            <p>This is where the page-specific content goes. This section, and the corresponding header, will change from one page to the next.</p>

            <p>Volutpat at varius sed sollicitudin et, arcu. Vivamus viverra. Nullam turpis. Vestibulum sed etiam. Lorem ipsum sit amet dolore. Nulla facilisi. Sed tortor. Aenean felis. Quisque eros. Cras lobortis commodo metus. Vestibulum vel purus. In eget odio in sapien adipiscing blandit. Quisque augue tortor, facilisis sit amet, aliquam, suscipit vitae, cursus sed, arcu lorem ipsum dolor sit amet.</p>

    <!-- End of the page-specific content. --></div>

<?php
    include('./layouts/footer.php');
?>

Selanjutnya, simpanlah Kode Program berikut ini dengan Nama File header.php sebagai Header di dalam Folder layouts :

<!DOCTYPE html>
<html lang="en">
<head>
    <title><?php echo $page_title; ?></title>
    <link rel="stylesheet" href="../css/style.css" type="text/css" media="screen">
    <meta charset="utf-8">
</head>
<body>
    <div id="header">
        <h1>Your Website</h1>
        <h2>catchy slogan...</h2>
    </div>
    <div id="navigation">
        <ul>
              <li><a href="./index.php">Home Page</a></li>
            <li><a href="../pages/register.php">Register</a></li>
            <li><a href="../pages/view_users.php">View Users</a></li>
            <li><a href="../pages/password.php">Change Password</a></li>
            <li><a href="../pages/add_products.php">Add Products</a></li>
            <li><a href="../pages/view_products.php">View Products</a></li>
            <li><a href="../pages/calculator.php">Calculator</a></li>
              <!-- <li><a href="../pages/konversi-suhu.php">Konversi Suhu</a></li> -->
            <?php 
                    if (isset($_SESSION['user_id']) && (basename($_SERVER['PHP_SELF']) != 'logout.php')) {
                        echo '<a href="../pages/logout.php">Logout</a>';
                    } else {
                        echo '<a href="../pages/login.php">Login</a>';
                    }
            ?>
        </ul>
    </div>
    <br />
    <br />
<div id="content"><!-- Start of the page-specific content. -->

Selanjutnya, simpanlah Kode Program berikut ini dengan Nama File footer.php sebagai Header di dalam Folder footer :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Footer</title>
</head>
<body>
<div id="footer">
        <p>Copyright &copy; <a href="#">Plain and Simple</a> 2007 | Designed by <a href="http://www.edg3.co.uk/">edg3.co.uk</a> | Sponsored by <a href="http://www.opendesigns.org/">Open Designs</a> | Valid <a href="http://jigsaw.w3.org/css-validator/">CSS</a> &amp; <a href="http://validator.w3.org/">XHTML</a></p>
      </div>
</body>
</html>
</body>
</html>

Dan inilah Tampilan untuk Home Page :

B. Membuat Program CSS

Sebelum membuat File PHP, kita akan membuat File CSS terlebih dahulu. Inilah Kode CSS untuk mengatur Elemen-elemen dalam HTML :

* {
    border:0;
    margin:0;
    padding:0;
}

/* general */
a {
    color:#777;
    text-decoration:none;
}

a:hover {
    color:#333;
    text-decoration:none;
}

/* body */
body {
    background:#ffffff;
    color:#555;
    font:0.8em Arial, Helvetica, "bitstream vera sans", sans-serif;
}

/* header */
#header {
    border-bottom:1px solid #999;
    height:80px;
    margin:0 auto;
    width:751px;
}
#header h1 {
    color:#888;
    font-size:300%;
    letter-spacing:-3px;
    text-align:right;
    padding:5px;
    margin-bottom:-20px;
}
#header h2 {
    color:#CCC;
    font-size:200%;
    letter-spacing:-2px;
    text-align:right;
  }

/* navigation */
#navigation {
    background:#fafafa;
    border-right:1px solid #999;
    margin:0 auto;
    width:750px;
    height:40px;
    list-style:none;
}
#navigation li {
    border-left:1px solid #999;
    float:left;
    width:149px;
    list-style:none;
}
#navigation a {
    color:#555;
    display:block;
    line-height:40px;
    text-align:center;
}
#navigation a:hover {
    background:#e3e3e3;
    color:#555;
}
#navigation .active {
    background:#e3e3e3;
    color:#777;
}

/* content */
#content {
    height:auto;
    margin:0 auto;
    padding:0 0 20px;
    width:751px;
}
#content h1 {
    border-bottom:1px dashed #999;
    font-size:1.8em;
    padding:20px 0 0;
}
#content p {
    padding:20px 20px 0;
}

/* footer */
#footer {
    border-top:1px solid #999; 
    height:50px;
    margin:0 auto;
    padding:10px;
    text-align:center;
    width:751px;
}

/* Added by Larry Ullman: */
.error, .ad {
    font-weight: bold;
    color: #C00
}

input, select, .input {
    padding: 5px;
    font-weight: bold;
    font-size: 1em;
    color: #008040;
    background: #FFFFFF;
    border:1px dotted #004080;
}

C. Membuat Program Sederhana dengan PHP

Selanjutnya, kita akan membuat Program Sederhana dengan PHP.

1. Kalkulator

Aplikasi Sederhana yang ingin dibuat adalah Aplikasi Kalkulator dengan Nama File calculator.php. Inilah Kode Program untuk Kalkulator :

<?php
    $page_title = "Widget Cost Calculator" ;
    include('../layouts/header.php');

    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        if (isset($_POST['distance'], $_POST['gallon_price'], $_POST['efficiency']) && 
        is_numeric($_POST['distance'])
        && is_numeric($_POST['gallon_price']) && is_numeric($_POST['efficiency']) ) {
        
        $gallons = $_POST['distance'] / $_POST['efficiency'];
        $dollars = $gallons * $_POST['gallon_price'];
        $hours = $_POST['distance']/65;
        
        echo '<h1>Total Estimated Cost</h1>';
        echo '<p>The total cost of driving ' . $_POST['distance'] . ' miles, <br/>';
        echo 'averaging ' . $_POST['efficiency'] . ' 
        miles per gallon, and paying an average of $' . $_POST['gallon_price'] . ' per gallon, <br/>';
            echo 'is $' . number_format ($dollars, 2) . '. If you drive at an average of 65 miles per hour, the trip will take 
        approximately' . number_format($hours, 2) . ' hours.</p>';
        
        } else {
            echo '<h1>Error!</h1>
            <p class="error">Please enter a valid distance, price per gallon, and fuel efficiency.</p>';
        }
    } // End of main submission IF.
?>

Berikut adalah penjelasan untuk setiap bagian dari kode tersebut :

Pada baris pertama, kita mendefinisikan variabel $page_title yang akan digunakan sebagai judul halaman. Kemudian, kita menyertakan file header.php yang berisi tampilan header untuk halaman tersebut.
Kemudian, kita memulai blok kondisi if untuk mengecek apakah metode permintaan (HTTP request method) adalah POST. Ini berarti program akan dijalankan saat pengguna mengirimkan data melalui formulir yang menggunakan metode POST.
Di dalam blok kondisi if, kita melakukan pemeriksaan untuk memastikan bahwa semua data yang diperlukan (distance, gallon_price, efficiency) tersedia dan merupakan angka. Ini dilakukan dengan menggunakan fungsi isset() untuk memeriksa keberadaan variabel dan is_numeric() untuk memeriksa apakah nilai variabel adalah angka.
Jika semua data tersedia dan merupakan angka, maka kita melakukan perhitungan untuk mendapatkan perkiraan biaya perjalanan. Variabel $gallons dihitung dengan membagi jarak perjalanan ($_POST['distance']) dengan efisiensi bahan bakar per galon ($_POST['efficiency'] ). Variabel $dollars dihitung dengan mengalikan jumlah galon ($gallons) dengan harga per galon ($_POST['gallon_price']). Variabel $hours dihitung dengan membagi jarak perjalanan ($_POST['distance']) dengan kecepatan rata-rata 65 mil per jam.
Setelah itu, kita menampilkan hasil perhitungan di halaman dengan menggunakan tag HTML. Kode echo digunakan untuk menampilkan teks dan nilai variabel pada halaman. Pada contoh ini, kita menampilkan total perkiraan biaya perjalanan dan perkiraan waktu perjalanan.
Jika salah satu data yang diperlukan tidak valid (misalnya bukan angka), maka program akan menampilkan pesan error yang sesuai.

Selanjutnya, ketik lagi Kode di bawah ini sebagai Lanjutan pada Kode Program di atas :

<h1>Trip Cost Calculator</h1>
<form action="calculator.php" method="post">
<input type="text" name="distance" 
value="<?php if (isset($_POST['distance'])) echo $_POST['distance']; ?>" />

<p>Ave. Price Per Gallon: <span class="input">
<input type="radio" name="gallon_price" value="3.00" <?php if 
(isset($_POST['gallon_price']) && ($_POST['gallon_price'] == '3.00')) echo 
'checked="checked"'; ?>/> 3.00 

<input type="radio" name="gallon_price" value="3.50" <?php if 
(isset($_POST['gallon_price']) && ($_POST['gallon_price'] == '3.50')) echo 'checked=
"checked" '; ?>/> 3.50 

<input type="radio" name="gallon_price" value="4.00" <?php if 
(isset($_POST['gallon_price']) && ($_POST['gallon_price'] == '4.00')) echo 
'checked="checked"'; ?>/> 4.00
</span></p>

<p>Fuel Efficiency: <select name="efficiency">
<option value="10"<?php if(isset($_POST['efficiency']) && ($_POST['efficiency'] == '10')) 
echo 'selected="selected"';?>>Terrible</option>
    <option value="20"<?php if (isset($_POST['efficiency']) && ($_POST['efficiency'] == '20')) 
echo 'selected="selected"';?>>Decent</option>
<option value="30"<?php if (isset($_POST['efficiency']) && ($_POST['efficiency'] == '30')) 
echo ' selected="selected"'; ?>>Very Good</option>
<option value="50"<?php if (isset($_POST['efficiency']) && ($_POST['efficiency'] == '50')) 
echo ' selected="selected"'; ?>>Outstanding</option>

</select></p>
<p><input type="submit" name="submit" value="Calculate!" /></p>
</form>

<p>Kalkulator Konversi Suhu : <a href="../pages/konversi-suhu.php">Klik di sini.</a></p>


    <?php
    $page_title = 'Widget Cost Calculator';
    include ('../layouts/footer.php');
?>

Kode program di atas adalah sebuah halaman HTML yang mencakup form untuk menghitung perkiraan biaya perjalanan. Berikut adalah penjelasan untuk setiap bagian dari kode tersebut :

Pada baris pertama, terdapat tag <h1> yang menampilkan judul "Trip Cost Calculator".
Selanjutnya, terdapat tag <form> yang digunakan untuk membuat form. Atribut action menentukan URL tujuan ketika form dikirimkan, dalam hal ini adalah "calculator.php". Atribut method menentukan metode pengiriman form, dalam hal ini menggunakan metode POST.
Di dalam form, terdapat input field untuk memasukkan jarak perjalanan. Tag <input> dengan atribut type="text" digunakan untuk membuat input field teks. Atribut name="distance" digunakan untuk mengidentifikasi input ini dalam kode PHP. Nilai awal input field diatur dengan menggunakan kode PHP di dalam atribut value. Jika data $_POST['distance'] tersedia (misalnya setelah form dikirimkan sebelumnya), maka nilai tersebut akan ditampilkan kembali di input field.
Selanjutnya, terdapat pilihan harga per galon bahan bakar. Tag <input> dengan atribut type="radio" digunakan untuk membuat pilihan radio button. Atribut name="gallon_price" digunakan untuk mengelompokkan pilihan radio button ini. Nilai dan label untuk setiap pilihan ditentukan menggunakan atribut value dan teks di antara tag <input>. Di dalam kode PHP, atribut checked="checked" digunakan untuk menandai pilihan radio button yang telah dipilih sebelumnya. Jika data $_POST['gallon_price'] tersedia dan nilai sama dengan nilai pilihan, maka pilihan tersebut akan ditandai.
Berikutnya, terdapat pilihan efisiensi bahan bakar. Tag <select> digunakan untuk membuat dropdown menu. Atribut name="efficiency" digunakan untuk mengidentifikasi pilihan yang dipilih dalam kode PHP. Setiap pilihan ditentukan menggunakan tag <option>. Di dalam kode PHP, atribut selected="selected" digunakan untuk menandai pilihan yang telah dipilih sebelumnya. Jika data $_POST['efficiency'] tersedia dan nilai sama dengan nilai pilihan, maka pilihan tersebut akan ditandai.
Di bagian akhir form, terdapat tombol "Calculate!" untuk mengirimkan form.
Setelah form, terdapat tag <p> yang menampilkan teks dan link ke halaman "konversi-suhu.php".
Terakhir, ada beberapa baris kode PHP di akhir file. Variabel $page_title diatur sebagai "Widget Cost Calculator" dan file footer.php disertakan untuk menampilkan tampilan footer halaman.

Inilah Tampilan untuk Kalkulator :

2. Konversi Suhu

Kemudian, kita akan membuat Konversi Suhu dengan Nama File konversi-suhu.php. Inilah Kode Program untuk Aplikasi Konversi Suhu :

<?php
    $page_title = "Temperature Conversion Calculator" ;
    include('../layouts/header.php') ;
    echo '<h1>Konversi Suhu</h1>';
?>

<form method="post">
        <label for="temperature">Enter temperature:</label>
        <input type="number" name="temperature" id="temperature" required>
        <select name="conversion" id="conversion">
            <option value="c_to_f" <?php if(isset($_POST['conversion']) && $_POST['conversion'] == 'c_to_f') echo 'selected'; ?>>Celsius to Fahrenheit</option>
            <option value="f_to_c" <?php if(isset($_POST['conversion']) && $_POST['conversion'] == 'f_to_c') echo 'selected'; ?>>Fahrenheit to Celsius</option>
        </select>
        <button type="submit">Convert</button>
</form>
<?php
    if(isset($_POST['temperature']) && isset($_POST['conversion'])){
        $temperature = $_POST['temperature'];
        $conversion = $_POST['conversion'];

        echo '<h1>Hasil</h1>';

        if($conversion == 'c_to_f'){
            $result = ($temperature * 9/5) + 32;
            echo "<p>$temperature&deg;C is $result&deg;F</p>";
        } elseif($conversion == 'f_to_c'){
            $result = ($temperature - 32) * 5/9;
            echo "<p>$temperature&deg;F is $result&deg;C</p>";
        }
    }
?>

Kode program di atas adalah sebuah halaman PHP yang melakukan konversi suhu antara Celsius dan Fahrenheit. Berikut adalah penjelasan untuk setiap bagian dari kode tersebut :

Di dalam form, terdapat input field untuk memasukkan suhu. Tag <input> dengan atribut type="number" digunakan untuk membuat input field angka. Atribut name="temperature" digunakan untuk mengidentifikasi input ini dalam kode PHP. Atribut required menandakan bahwa input ini diperlukan.
Selanjutnya, terdapat dropdown menu menggunakan tag <select>. Di dalam dropdown menu, terdapat dua opsi konversi suhu: Celsius to Fahrenheit dan Fahrenheit to Celsius. Setiap opsi ditentukan menggunakan tag <option>. Di dalam kode PHP, atribut selected digunakan untuk menandai opsi yang telah dipilih sebelumnya.
Di akhir form, terdapat tombol "Convert" untuk mengirimkan form.
Setelah form, terdapat blok kode PHP untuk memproses data yang dikirimkan dari form. Kode ini berjalan jika ada data $_POST['temperature'] dan $_POST['conversion'].
Variabel $temperature dan $conversion diinisialisasi dengan nilai dari data yang dikirimkan dari form.
Setelah itu, tampilan HTML akan menampilkan judul "Hasil" dengan tag <h1>.
Dalam blok if, dilakukan pengecekan nilai $conversion untuk menentukan jenis konversi yang akan dilakukan.
Jika $conversion adalah 'c_to_f' (Celsius to Fahrenheit), maka suhu diubah dari Celsius ke Fahrenheit dengan rumus yang sesuai dan hasilnya ditampilkan dalam tag <p>.
Jika $conversion adalah 'f_to_c' (Fahrenheit to Celsius), maka suhu diubah dari Fahrenheit ke Celsius dengan rumus yang sesuai dan hasilnya ditampilkan dalam tag <p>.

Inilah Tampilan untuk Konversi Suhu :

D. Membuat Database di MySQL

Pertama, bukalah XAMPP Control Panel dan Aktifkan pada Bagian Apache dan MySQL.

Setelah itu, bukalah Halaman phpMyAdmin dan klik "New" atau "Baru".

Jika sudah, maka keluarlah dari Dashboard phpMyAdmin, dan bukalah Command Prompt (CMD). Untuk langkah awalnya sama seperti pada Tutorial sebelumnya, yaitu Membuat Database MySQL dengan CMD.

Setelah itu, buatlah terlebih dahulu tabel "produk" dengan beberapa field yaitu :

produk_id
produk_nama
kategori
harga_satuan
stok
order_level
diskontiniu

Dengan mengetik query MySQL berikut ini :

USE sitename;

Kemudian, kita tentukan tipe data pada beberapa field di atas :

produk_id : integer unsigned dengan auto increment
produk_nama : varchar(255) sebagai nama produk
kategori : varchar(50) sebagai kategori produk.
harga_satuan : decimal(10,2) sebagai harga satuan produk
stok : integer unsigned sebagai jumlah stok produk
order_level : integer unsigned sebagai level pemesanan
diskontiniu : ENUM('Ya', 'Tidak') sebagai status apakah produk sedang diskontinu atau tidak.

Seperti inilah query dalam MySQL :

CREATE TABLE produk (
 produk_id MEDIUMINT UNSIGNED NOT NULL AUTO_INCREMENT,
 produk_nama VARCHAR(50) NOT NULL,
 kategori VARCHAR(50) NOT NULL,
 harga_satuan INT NOT NULL,
 stok INT NOT NULL,
 order_level INT NOT NULL,
 diskontiniu ENUM('Ya','Tidak') NOT NULL,
 PRIMARY KEY (produk_id)
);

Selanjutnya, ada salah satu table yang harus diatur sebagai AUTO_INCREMENT, yaitu produk_id agar nilainya otomatis bertambah setiap kali ada penambahan data ke dalam table.

Dan juga, table yang harus UINQUE adalah tabel kategori, untuk memastikan bahwa setiap kategori hanya muncul sekali di dalam table.

Sebelum menambahkan kolom pada tabel produk, kita atur terlebih dahulu pada kolom kategori, karena kolom tersebut telah ditentukan sebagai UNIQUE.

Kita ubah terlebih dahulu pada nilai kategori dari produk dengan produk_id = 1 menjadi "Elektronik baru", maka Anda dapat menggunakan query seperti ini :

UPDATE produk
SET kategori = 'Elektronik baru'
WHERE produk_id = 1;

Selanjutnya, kita akan menambahkan 10 Produk ke dalam Table, dapat menggunakan Query SQL seperti ini :

INSERT INTO produk (produk_id, produk_nama, kategori, harga_satuan, stok, 
order_level, diskontiniu)
VALUES
('1', 'Blender', 'Elektronik', 500000, 100, 50, 'Tidak'),
('2', 'Hoodie', 'Fashion', 120000, 50, 20, 'Tidak'),
('3', 'Celana Training', 'Olahraga', 75000, 200, 100, 'Tidak'),
('4', 'Snack Hampers', 'Makanan', 40000, 300, 150, 'Ya'),
('5', 'Kopi Gula Aren', 'Mimuman', 15000, 300, 150, 'Ya'),
('6', 'Komik Manga', 'Buku', 100000, 75, 30, 'Tidak'),
('7', 'Kosmetik', 'Kecantikan', 120000, 150, 75, 'Tidak'),
('8', 'Kabel Bintik', 'Otomotif', 30000, 40, 15, 'Tidak'),
('9', 'Rice Cooker', 'Elektronik', 1500000, 25, 10, 'Tidak'),
('10', 'Sepatu Running', 'Olahraga', 500000, 20, 10, 'Tidak');

Kalian juga bisa menambahkan Produk lainnya seperti pada Kode di atas. Maka akan seperti ini :

Sehingga, jika kita buka lagi Laman phpMyAdmin, maka Database yang telah kita buat tadi telah muncul di sini :

E. Membuat Program PHP yang akan dikoneksikan ke Database MySQL

Kemudian, kita akan membuat Program File PHP yang akan dikoneksikan ke Database MySQL, dan kita simpan pada File mysqli_connect.php di Folder includes. Inilah Kode Programnya :

<?php
#script 9.2

// Set the database access information as constants :
DEFINE('DB_USER', 'webdev');
DEFINE('DB_PASSWORD', 'webdev');
DEFINE('DB_HOST', 'localhost');
DEFINE('DB_NAME', 'sitename');

//Make connection
$dbc = @mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME) OR die ('Could not connect to MySQL: ' . mysqli_connect_error);

//set encoding
mysqli_set_charset($dbc, 'utf8');
?>

Dengan Rincian Program di atas :

DB_USER mendefinisikan Username untuk mengakses Database.
DB_PASSWORD mendefinisikan Password untuk mengakses Database.
DB_HOST mendefinisikan Host atau Server Database (dalam hal ini, localhost).
DB_NAME mendefinisikan Nama Database yang ingin diakses.

Kemudian, buatlah File login_page.inc.php dengan Folder yang sama dengan Program di atas.

<?php
#template
$filecss = "../css/style.css";
$page_title = "Login";
$linkcalculator = "calculator.php";
$linkregister = "register.php";
$view_user = "view_users.php";
$password = "password.php";

include('../layouts/header.php');

if (isset($errors) && !empty($errors)) {
    echo '<h1>Error!</h1>
    <p class="error">Berikut kesalahan yang ditemukan:<br/>';
    foreach ($errors as $msg) {
        echo "- $msg<br>\n";
    }
    echo '</p><p>Silakan diicoba lagi.</p>';
}
?>

<h1>Login</h1>
<form action="login.php" method="post">
    <p>Email address: <input type="email" name="email" size="30" maxlength="60"/></p>
    <p>Password: <input type="password" name="pass" size="20" maxlength="20"/></p>
    <p><input type="submit" name="submit" value="login"/></p>
</form>

<?php
include('../includes/footer.php');
?>

Pada bagian Error Handling di atas :

if (isset($errors) && !empty($errors)): Mengecek apakah variabel $errors telah diatur dan tidak kosong.
Jika terdapat kesalahan, maka akan ditampilkan pesan error berdasarkan isi dari variabel $errors menggunakan perulangan foreach.

Jika sudah, buatlah File login_function.inc.php dengan Folder yang sama dengan Program di atas.

<?php
function redirect_user($page="index.php") {
    $url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']);

    $url = rtrim($url, '/\\');

    $url = '/' . $page;

    header("Location: $url");
    exit();
}

function check_login($dbc, $email='', $pass='') {
    $errors = array();
    if (empty($email)) {
        $errors[] = 'Masukkan alamat Email';
    } else {
        $e = mysqli_real_escape_string($dbc, trim($email));
    }
    if (empty($pass)){
        $errors[] = 'Masukkan Password Anda';
    } else {
        $p = mysqli_real_escape_string($dbc, trim($pass));
    }
    if (empty($errors)) {
        $q = "SELECT user_id, first_name FROM users WHERE email='$e' AND pass=SHA1('$p')";
        $r = @mysqli_query($dbc, $q);
        if (@mysqli_num_rows($r) == 1) {
            $row = mysqli_fetch_array($r, MYSQLI_ASSOC);
            return array(true, $row);
        } else {
            $errors[] = "Email dan Password tidak nyambung.";
        }
    }
    return array(false, $errors);
}
?>

Pada Fungsi redirect_user($page="index.php") di atas :

Fungsi ini digunakan untuk mengarahkan pengguna ke halaman tertentu. Parameter $page adalah halaman tujuan yang akan ditentukan, dengan nilai default "index.php".
Pada baris pertama, variabel $url diinisialisasi dengan URL awal berdasarkan $_SERVER['HTTP_HOST'] dan dirname($_SERVER['PHP_SELF']).
Baris berikutnya menghapus karakter '/' atau '' terakhir dari URL dengan menggunakan fungsi rtrim().
Selanjutnya, variabel $url diperbarui dengan menambahkan '/' dan nilai parameter $page.
Pada baris terakhir, menggunakan fungsi header() dengan argumen "Location: $url" untuk mengarahkan pengguna ke halaman tujuan, kemudian fungsi exit() digunakan untuk menghentikan eksekusi program.

Fungsi check_login($dbc, $email='', $pass='') di atas :

Fungsi ini digunakan untuk memeriksa login pengguna berdasarkan alamat email dan kata sandi yang diberikan. Menerima tiga parameter yaitu koneksi database ($dbc), alamat email ($email), dan kata sandi ($pass).
Di dalam fungsi, terdapat array $errors yang akan menyimpan pesan kesalahan.
Pertama, fungsi ini memeriksa apakah alamat email ($email) tidak kosong. Jika kosong, maka akan menambahkan pesan kesalahan ke dalam array $errors. Jika tidak kosong, maka nilai alamat email akan disimpan dalam variabel $e setelah melewati fungsi mysqli_real_escape_string() untuk mencegah serangan SQL Injection.
Selanjutnya, fungsi ini memeriksa apakah kata sandi ($pass) tidak kosong. Jika kosong, maka akan menambahkan pesan kesalahan ke dalam array $errors. Jika tidak kosong, maka nilai kata sandi akan disimpan dalam variabel $p setelah melewati fungsi mysqli_real_escape_string().
Jika tidak terdapat kesalahan (array $errors kosong), maka dilakukan query untuk memeriksa kecocokan alamat email dan kata sandi yang diberikan pada tabel pengguna. Jika ditemukan hasil yang sesuai, data pengguna (user_id dan first_name) akan dikembalikan dalam bentuk array bersama dengan true.
Jika tidak ditemukan hasil yang sesuai atau terdapat kesalahan, maka pesan kesalahan akan ditambahkan ke dalam array $errors dan fungsi akan mengembalikan array yang berisi false dan array $errors.

F. Membuat Halaman Register, Login, dan Logout

Selanjutnya, kita akan membuat Halaman Register terlebih dahulu dengan nama File register.php.

<?php
$fileclass = "../css/style.css";
$page_title = "Register";
$linkcalculator = "calculator.php";
$linkregister = "register.php";
$view_user = "view_user.php";
$password = "password.php";

include ('../layouts/header.php');

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    include ('../../include/mysqli_connect.php');
    $fn = trim($_POST['first_name']);
    $ln = trim($_POST['last_name']);
    $e = trim($_POST['email']);
    $p = trim($_POST['pass']);

    $q = "INSERT INTO users (first_name, last_name, email, pass, registration_date) VALUE ('$fn', '$ln', '$e', SHA1('$p'), NOW())";
    $r = @mysqli_connect ($dbc, $q);

    if ($r) {
        echo '<h1>Thank you!</h1>
        <p>You are now registered.</p> <p><br /></p>';
    } else {
        echo '<h1>System Error</h1>
        <p class="error">You could not be registered due to a system error. We apologize for any inconvience.</p>';
    }
    mysqli_close($dbc);
}

?>

<h1>Register</h1>
<form action="register.php" method="post">
    <p>First Name: <input type="text" name="first_name" size="15" maxlength="20"
    value="<?php if(isset($_POST['first_name'])) echo $_POST['first_name'];?>"></p>

    <p>Last Name: <input type="text" name="last_name" size="15" maxlength="40"
    value="<?php if(isset($_POST['last_name'])) echo $_POST['last_name'];?>"></p>

    <p>Email Address: <input type="text" name="email" size="20" maxlength="60"
    value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>"></p>
    
    <p>Password: <input type="text" name="pass" size="10" maxlength="20"
    value="<?php if(isset($_POST['pass'])) echo $_POST['pass'];?>"></p>

    <p>Confirm Password: <input type="text" name="pass2" size="10" maxlength="20"
    value="<?php if(isset($_POST['pass2'])) echo $_POST['pass2'];?>"></p>

    <p><input type="submit" name="submit" value="Register"></p>
</form>

Pada kode program tersebut, terdapat skrip untuk membuat halaman pendaftaran (register) dengan fitur untuk menyimpan data pengguna baru ke dalam tabel "users". Berikut penjelasan lebih rinci mengenai kode program tersebut :

Pada blok kode pertama, beberapa variabel dideklarasikan dan diinisialisasi :

$fileclass: Merupakan path ke file CSS yang akan digunakan untuk mengatur tampilan halaman.
$page_title: Merupakan judul halaman.
$linkcalculator: Merupakan link menuju halaman kalkulator.
$linkregister: Merupakan link menuju halaman pendaftaran.
$view_user: Merupakan link menuju halaman untuk melihat pengguna (view_user.php).
$password: Merupakan link menuju halaman untuk mengatur kata sandi (password.php).
Setelah deklarasi variabel, file header.php di-include untuk menyertakan tampilan header halaman.

Pada blok kode berikutnya, dilakukan pengecekan apakah request method adalah POST ($_SERVER['REQUEST_METHOD'] == 'POST'). Hal ini digunakan untuk memastikan bahwa data pengguna baru hanya akan diproses saat formulir pendaftaran di-submit.
Jika request method adalah POST, maka dilakukan beberapa langkah untuk memproses data pengguna baru :

File mysqli_connect.php di-include untuk mendapatkan koneksi database ($dbc).
Nilai-nilai dari elemen input formulir (first_name, last_name, email, pass) diambil menggunakan $_POST dan disimpan dalam variabel masing-masing ($fn, $ln, $e, $p).
Query INSERT digunakan untuk menyimpan data pengguna baru ke dalam tabel "users". Kata sandi ($p) di-encrypt menggunakan fungsi SHA1 sebelum disimpan. Nilai NOW() digunakan untuk mengisi kolom registration_date dengan waktu saat ini.
Query dieksekusi dengan menggunakan fungsi mysqli_query(). Hasil eksekusi query disimpan dalam variabel $r.
Jika query berhasil dieksekusi ($r bernilai true), maka pesan sukses ditampilkan.
Jika terjadi kesalahan pada eksekusi query, pesan error ditampilkan.

Setelah blok kode di atas, tampilan formulir pendaftaran ditampilkan dalam HTML :

Elemen-elemen input formulir (first_name, last_name, email, pass) memiliki atribut name yang digunakan saat data dikirimkan melalui POST.
Nilai-nilai default dari elemen input diatur menggunakan kode PHP (<?php if(isset($_POST['...'])) echo $_POST['...']; ?>). Hal ini memastikan bahwa nilai yang diisi oleh pengguna sebelumnya akan tetap terisi saat terjadi validasi kesalahan.
Tombol submit memiliki atribut name dengan nilai "submit" dan value dengan nilai "Register".
Form menggunakan method POST dan action "register.php", yang berarti data akan dikirimkan ke halaman ini sendiri untuk diproses.

Inilah Tampilan untuk Halaman Register :

Setelah itu, kita juga buat Form Login dan Logout. Untuk Form Login, kita beri nama File login.php.


<?php
require ('../layouts/header.php');

#template
if($_SERVER['REQUEST_METHOD'] == 'POST') {
    require('../includes/login_function.inc.php');
    require('../includes/mysqli_connect.php');

    list($check, $data) = check_login($dbc, $_POST['email'], $_POST['pass']);

    if($check) {
        setcookie('user_id', $data['user_id'], time()+3600, '/', '', 0, 0);
        setcookie('first_name', $data['first_name'], time()+3600, '/', '', 0, 0);
    
        redirect_users('loggedin.php');
    } else {
        $errors = $data;
    }

    mysqli_close($dbc);
}

include('../layouts/footer.php');
?>

Kemudian, kita buat juga File Logged in dengan nama File loggedin.php.

<?php
$filecss = "../css/style.css";
$linkcalculator = "calculator.php";
$linkregister = "register.php";
$view_user = "view_users.php";
$password = "password.php";

session_start();
if(!isset($_SESSION['user_id']) OR ($_SESSION['agent'] != md5($_SERVER['HTTP_USER_AGENT']))) {
    require('../includes/login_function.inc.php');
    redirect_user();
}

$page_title = "Logged In";

include('../layouts/header.php');
echo "<h1>Logged In!</h1>
<p>You are logged in as {$_SESSION['first_name']}.</p>
<p><a href=\"logout.php\">Logout</a></p>";

include('../layouts/footer.php');
?>

Jika sudah, kita buat juga Logout in dengan nama File logout.php.

<?php
require ('../layouts/header.php');

#template
session_start();
if(!isset($_SESSION['user_id'])) {
    require('../includes/login_function.inc.php');
    redirect_user();
} else {
    //setcookie('user_id', $data['user_id'], time()+3600, '/', '', 0, 0);
    //setcookie('first_name', $data['first_name'], time()+3600, '/', '', 0, 0);
    $_SESSION = array();
    session_destroy();

    setcookie('PHPSESSIONID', '', time()-3600, '/', '', 0, 0);
}

$page_title = 'Logout';
$filecss = "../css/style.css";
$linkcalculator = "calculator.php";
$linkregister = "register.php";
$view_user = "view_users.php";
$password = "password.php";

include('../layouts/header.php');
?>

<h1>Logged Out</h1>
<p>Anda sekarang telah logged out.<?php echo $_COOKIE['first_name'];?></p>

<?php
include('../layouts/footer.php');
?>

G. Membuat Halaman Password, User, hingga Produk

1. Edit Password

Pertama, kita juga akan membuat File untuk mengubah Kata Sandi (Password) dengan nama File password.php.

<?php
$filecss = "../css/style.css";
$page_title = "Change Password";
$linkcalculator="calculator.php";
$linkregister="register.php";
$view_user ="view_user.php";
$password ="password.php";
include ('../layouts/header.php');

?>
<?php # Script 9.7 - password.php
// Check for form submission:
if ($_SERVER['REQUEST_METHOD'] == 'POST') {

    require ('../../includes/mysqli_connect.php');
    $errors = array(); // Initialize an error array.

    // Check for an email address:
    if (empty($_POST['email'])) {
        $errors[] = 'You forgot to enter your email address.';
    } else {
        $e = mysqli_real_escape_string($dbc, trim($_POST['email']));
    }

    // Check for the current password:
    if (empty($_POST['pass'])) {
        $errors[] = 'You forgot to enter your current password.';
    } else {
        $p = mysqli_real_escape_string($dbc, trim($_POST['pass']));
    }

    // Check for a new password and match
    // against the confirmed password:
    if (!empty($_POST['pass1'])) {
        if ($_POST['pass1'] != $_POST['pass2']) {
            $errors[] = 'Your new password did not match the confirmed password.';
        } else {
            $np = mysqli_real_escape_string($dbc, trim($_POST['pass1']));
        }
    } else {
        $errors[] = 'You forgot to enter your new password.';
    }

    if (empty($errors)) { // If everything's OK.

        // Check that they've entered the right email address/password combination:
        $q = "SELECT user_id FROM users WHERE (email='$e' AND pass=SHA1('$p') )";
        $r = @mysqli_query($dbc, $q);
        $num = @mysqli_num_rows($r);
        if ($num == 1) { // Match was made.

            // Get the user_id:
            $row = mysqli_fetch_array($r, MYSQLI_NUM);

            // Make the UPDATE query:
            $q = "UPDATE users SET pass=SHA1('$np') WHERE user_id=$row[0]";
            $r = @mysqli_query($dbc, $q);

            if (mysqli_affected_rows($dbc) == 1) { // If it ran OK.

                // Print a message.
                echo '<h1>Thank you!</h1>
                <p>Your password has been updated. In Chapter 12 you will actually be able to log in!</p><p><br></p>';

            } else { // If it did not run OK.

                // Public message:
                echo '<h1>System Error</h1>
                <p class="error">Your password could not be changed due to a system error. We apologize for any inconvenience.</p>';

                // Debugging message:
                echo '<p>' . mysqli_error($dbc) . '<br><br>Query: ' . $q . '</p>';

            }

            mysqli_close($dbc); // Close the database connection.

            // Include the footer and quit the script (to not show the form).
            include ('includes/footer.html');
            exit();

        } else { // Invalid email address/password combination.
            echo '<h1>Error!</h1>
            <p class="error">The email address and password do not match those on file.</p>';
        }

    } else { // Report the errors.

        echo '<h1>Error!</h1>
        <p class="error">The following error(s) occurred:<br>';
        foreach ($errors as $msg) { // Print each error.
            echo " - $msg<br>\n";
        }
        echo '</p><p>Please try again.</p><p><br></p>';

    } // End of if (empty($errors)) IF.

    mysqli_close($dbc); // Close the database connection.

} // End of the main Submit conditional.
?>
<h1>Change Your Password</h1>
<form action="password.php" method="post">
    <p>Email Address: <input type="text" name="email" size="20" maxlength="60" value="<?php if (isset($_POST['email'])) echo $_POST['email']; ?>" > </p>
    <p>Current Password: <input type="password" name="pass" size="10" maxlength="20" value="<?php if (isset($_POST['pass'])) echo $_POST['pass']; ?>" ></p>
    <p>New Password: <input type="password" name="pass1" size="10" maxlength="20" value="<?php if (isset($_POST['pass1'])) echo $_POST['pass1']; ?>" ></p>
    <p>Confirm New Password: <input type="password" name="pass2" size="10" maxlength="20" value="<?php if (isset($_POST['pass2'])) echo $_POST['pass2']; ?>" ></p>
    <p><input type="submit" name="submit" value="Change Password"></p>
</form>
<?php
include ('../layouts/footer.php');
?>

Inilah Tampilan untuk Mengubah Password :

2. View User (Menampilkan User)

Jika sudah, kita akan membuat Halaman View User dengan nama File view_users.php.

<?php
require ('../layouts/header.php');

$page_title="User Terdaftar";
$display = 10;
require('../includes/mysqli_connect.php');
if(isset($_GET['p']) && is_numeric($_GET['p'])){
    $pages = $_GET['p'];
}else{
    //total record
    $q = "SELECT COUNT(user_id) FROM users";
    $r = @mysqli_query($dbc, $q);
    $row = @mysqli_fetch_array($r, MYSQLI_NUM);
    $records = $row[0];
    if($records>$display){
        $pages = ceil($records/$display);
    }else{
        $pages = 1;
    }
}
if(isset($_GET['s']) && is_numeric($_GET['s'])){
        $start = $_GET['s'];
    }else{
        $start=0;
}
//Menentukan sort 
$sort = (isset($_GET['sort'])) ? $_GET['sort'] : 'rd';
switch ($sort){
    case 'ln':
        $order_by = 'last_name ASC';
        break;
    case 'fn': 
        $order_by = 'first_name ASC';
        break;
    case 'e': 
        $order_by = 'email ASC';
        break;
    case 'rd':
        $order_by = 'registration_date ASC';
        break;
    default:
        $order_by = 'registration_date ASC';
        break;
}
?>

<h1>Halaman Users</h1>

<?php

$sql = "SELECT last_name, first_name, email, DATE_FORMAT(registration_date, '%M %d, %Y') AS dr, user_id 
FROM users ORDER BY $order_by LIMIT $start, $display";
$r = @mysqli_query($dbc, $sql);//run query
//total row
$num = mysqli_num_rows($r);
if($num) {
    echo "<p> Total user found $num </p>\n";
    
    echo '<table align="center" cellspacing="3" cellpadding="3" width="75%">
    <tr><td align="left"><strong>Edit</strong></td>
    <td align="left"><strong>Delete</strong></td>
    <td align="left"><strong><a href="view_users.php?sort=ln">Last Name</a></strong></td>
    <td align="left"><strong><a href="view_users.php?sort=fn">First Name</a></strong></td>
    <td align="left"><strong><a href="view_users.php?sort=e">Email</a></strong></td>
    <td align="left"><strong><a href="view_users.php?sort=rd">Registration Date</a></strong></td>
    </tr>';
    $bg = '#eeeeee';
    while($row = mysqli_fetch_array($r, MYSQLI_ASSOC)){
        $bg = ($bg=='#eeeeee' ? '#ffffff' : '#eeeeee');
        echo '<tr bgcolor=' . $bg . '">
        <td align="left"><a href="edit_user.php?id=' . $row['user_id'] . '">Edit</a></td>
        <td align="left"><a href="delete_user.php?id=' . $row['user_id'] . '">Delete</a></td>
        <td align="left">' . $row['last_name'] . '</td>
        <td align="left">' . $row['first_name'] . '</td>
        <td align="left">' . $row['email'] . '</td>
        <td align="left">' . $row['dr'] . '</td></tr>';
    }
    echo '</table>';
    mysqli_free_result($r);
    mysqli_close($dbc);
} else {
    echo '<p class="error"> Users could not be rettrieved".</p>';
    echo '<p>' . mysqli_error($dbc) . '<br/>Query: ' . $sql . '</p>';
}
if($pages>1){
    echo '<br/><p>';
    $current_page = ($start/$display) + 1;
    if($current_page !=1){
        echo '<a href="view_users.php?s=' . ($start - $display) . '&p=' . $pages . '">Previous</a>';
    }
    //tampilkan jumlah halaman
    for($i=1;$i<=$pages; $i++){
        if($i !=$current_page){
            echo '<a href="view_users.php?s=' . (($display * ($i - 1))) . '&p=' . $pages . '">' . $i . '</a>';
        }else{
            echo $i . ' ';
        }
    }
    if($current_page !=$pages){
        echo '<a href="view_users.php?s=' . ($start + $display) . '&p=' . $pages . '">Next</a>';
    }
    echo '</p>';
}
?>

<?php
include('../layouts/footer.php');
?>

Kode program di atas merupakan halaman yang menampilkan daftar pengguna (users) dengan fitur paging dan pengurutan (sorting) berdasarkan kolom-kolom yang ditentukan. Berikut penjelasan rinci mengenai kode program tersebut :

Pada blok kode pertama, beberapa variabel dideklarasikan dan diinisialisasi :

$page_title: Merupakan judul halaman.
$display: Menentukan jumlah pengguna yang ditampilkan per halaman.
File mysqli_connect.php di-include untuk mendapatkan koneksi database ($dbc).
Variabel $pages digunakan untuk menyimpan jumlah halaman yang akan ditampilkan.

Setelah itu, dilakukan pengecekan terhadap parameter URL untuk menentukan halaman dan urutan pengguna yang akan ditampilkan:

Jika parameter 'p' (halaman) ada dan merupakan angka, maka nilai parameter 'p' akan disimpan ke dalam variabel $pages.
Jika tidak ada parameter 'p', maka dilakukan query untuk menghitung jumlah total pengguna dengan menggunakan COUNT() dan disimpan dalam variabel $records.
Jika jumlah pengguna melebihi jumlah yang ditampilkan per halaman ($records > $display), maka jumlah halaman akan dihitung menggunakan ceil() dan disimpan dalam variabel $pages. Jika tidak, nilai $pages diatur menjadi 1.
Pengecekan serupa dilakukan untuk parameter 's' (start), yaitu menentukan pengguna mana yang akan ditampilkan berdasarkan halaman yang aktif.

Setelah itu, dilakukan penentuan urutan pengguna yang akan ditampilkan:

Variabel $sort diinisialisasi dengan nilai dari parameter 'sort'. Jika parameter tidak ada, maka nilai default adalah 'rd' (registration_date).
Menggunakan switch case untuk menentukan urutan pengguna berdasarkan nilai $sort. Jika nilai tidak cocok dengan salah satu kasus, maka urutan pengguna akan diatur berdasarkan tanggal registrasi.
Selanjutnya, dilakukan query untuk mengambil data pengguna yang akan ditampilkan:
Query tersebut akan mengambil kolom last_name, first_name, email, registration_date, dan user_id dari tabel users.
Hasil query akan diurutkan berdasarkan urutan yang ditentukan sebelumnya (ORDER BY $order_by).
Data pengguna yang ditampilkan akan dibatasi dengan LIMIT berdasarkan halaman aktif dan jumlah pengguna yang ditampilkan per halaman (LIMIT $start, $display).
Hasil query dijalankan menggunakan mysqli_query() dan disimpan dalam variabel $r.

Setelah itu, dilakukan pengecekan terhadap jumlah baris hasil query ($num) dan menampilkan data pengguna dalam bentuk tabel jika ada data yang ditemukan:

Jika jumlah baris lebih dari 0, maka akan ditampilkan pesan "Total user found" dan tabel yang berisi data pengguna.
Tabel akan memiliki kolom Edit, Delete, Last Name, First Name, Email, dan Registration Date.
Setiap baris tabel akan memiliki warna latar belakang yang berbeda menggunakan variabel $bg.
Data pengguna akan ditampilkan menggunakan perulangan while dan fungsi mysqli_fetch_array().

Jika kita buka Database sitename dengan Tabel users di phpMyAdmin, maka tampilannya akan seperti ini :

Inilah Tampilan untuk Menampilkan User :

3. Menambahkan Produk

Untuk Add Product, sama seperti Laman Register di atas, hanya saja diganti pada bagian Database dan sedikit Kode Program-nya. Inilah Kode Program untuk menambahkan Produk dengan nama File add_products.php :

<?php
$fileclass = "../css/style.css";
$page_title = "Add Products";
$linkcalculator = "calculator.php";
$linkregister = "register.php";
$view_user = "view_user.php";
$password = "password.php";

include ('../layouts/header.php');

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    include ('../../include/mysqli_connect.php');
    $pn = trim($_POST['produk_nama']);
    $c = trim($_POST['kategori']);
    $hs = trim($_POST['harga_satuan']);
    $st = trim($_POST['stok']);
    $ol = trim($_POST['order_level']);

    $q = "INSERT INTO users (produk_nama, kategori, stok, order_level) VALUE ('$pn', '$c', '$hs', '$st', $ol, NOW())";
    $r = @mysqli_connect ($dbc, $q);

    if ($r) {
        echo '<h1>Thank you!</h1>
        <p>You are now registered.</p> <p><br /></p>';
    } else {
        echo '<h1>System Error</h1>
        <p class="error">You could not be registered due to a system error. We apologize for any inconvience.</p>';
    }
    mysqli_close($dbc);
}
?>

<h1>Add Products</h1>
<form action="register.php" method="post">
    <p>Nama Produk: <input type="text" name="produk_nama" size="15" maxlength="20"
    value="<?php if(isset($_POST['produk_nama'])) echo $_POST['produk_nama'];?>"></p>

    <p>Kategori: <input type="text" name="kategori" size="15" maxlength="40"
    value="<?php if(isset($_POST['kategori'])) echo $_POST['kategori'];?
>"></p>

    <p>Harga Satuan: <input type="text" name="harga_satuan" size="5" maxlength="10"
    value="<?php if(isset($_POST['harga_satuan'])) echo $_POST['harga_satuan'];?>"></p>
    
    <p>Stok: <input type="text" name="stok" size="1" maxlength="5"
    value="<?php if(isset($_POST['stok'])) echo $_POST['stok'];?>"></p>

    <p>Order Level: <input type="text" name="order_level" size="1" maxlength="5"
    value="<?php if(isset($_POST['order_level'])) echo $_POST['order_level'];?>"></p>
    
    <p><input type="submit" name="submit" value="Add"></p>
</form>

Inilah Tampilan untuk Menambahkan Produk :

4. Menampilkan Produk (View Products)

Untuk Menampilkan Produk (View Products), sama seperti Laman Menampilkan User (View User) di atas, hanya saja diganti pada bagian Database dan sedikit Kode Program-nya. Inilah Kode Program untuk menambahkan Produk dengan nama File view_products.php :

<?php
require ('../layouts/header.php');

$page_title="Produk Terdaftar";
$display = 10;
require('../includes/mysqli_connect.php');


if(isset($_GET['p']) && is_numeric($_GET['p'])){
    $pages = $_GET['p'];
}else{
    //total record
    $q = "SELECT COUNT(produk_id) FROM produk";
    $r = @mysqli_query($dbc, $q);
    $row = @mysqli_fetch_array($r, MYSQLI_NUM);
    $records = $row[0];
    if($records>$display){
        $pages = ceil($records/$display);
    }else{
        $pages = 1;
    }
}

if(isset($_GET['s']) && is_numeric($_GET['s'])){
        $start = $_GET['s'];
    }else{
        $start=0;
}

//Menentukan sort 
$sort = (isset($_GET['sort'])) ? $_GET['sort'] : 'pn';
switch ($sort){
    case 'pn':
        $order_by = 'produk_nama ASC';
        break;
    case 'c': 
        $order_by = 'kategori ASC';
        break;
    case 'hs':
        $order_by = 'harga_satuan ASC';
        break;
    case 's':
        $order_by = 'stok ASC';
        break;
    case 'ol':
        $order_by = 'order_level ASC';
        break;
    default:
        $order_by = 'produk_nama ASC';
        break;
}
?>

<h1>Halaman Produk</h1>

<?php

$sql = "SELECT produk_nama, kategori, harga_satuan, stok, order_level, produk_id 
FROM produk ORDER BY $order_by LIMIT $start, $display";
$r = @mysqli_query($dbc, $sql);//run query
//total row
$num = mysqli_num_rows($r);
if($num) {
    echo "<p> Total produk found $num </p>\n";
    
    echo '<table align="center" cellspacing="3" cellpadding="3" width="75%">
    <tr><td align="left"><strong>Edit</strong></td>
    <td align="left"><strong>Delete</strong></td>
    <td align="left"><strong><a href="view_products.php?sort=pn">Produk Nama</a></strong></td>
    <td align="left"><strong><a href="view_products.php?sort=c">Kategori</a></strong></td>
    <td align="left"><strong><a href="view_products.php?sort=hs">Harga Satuan</a></strong></td>
    <td align="left"><strong><a href="view_products.php?sort=s">Stok</a></strong></td>
    <td align="left"><strong><a href="view_products.php?sort=ol">Order Level</a></strong></td>
    </tr>';
    $bg = '#eeeeee';
    while($row = mysqli_fetch_array($r, MYSQLI_ASSOC)){
        $bg = ($bg=='#eeeeee' ? '#ffffff' : '#eeeeee');
        echo '<tr bgcolor=' . $bg . '">
        <td align="left"><a href="edit_product.php?id=' . $row['produk_id'] . '">Edit</a></td>
        <td align="left"><a href="delete_product.php?id=' . $row['produk_id'] . '">Delete</a></td>
        <td align="left">' . $row['produk_nama'] . '</td>
        <td align="left">' . $row['kategori'] . '</td>
        <td align="left">' . $row['harga_satuan'] . '</td>
        <td align="left">' . $row['stok'] . '</td>
        <td align="left">' . $row['order_level'] . '</td></tr>';
    }
    echo '</table>';
    mysqli_free_result($r);
    mysqli_close($dbc);
} else {
    echo '<p class="error"> Users could not be rettrieved".</p>';
    echo '<p>' . mysqli_error($dbc) . '<br/>Query: ' . $sql . '</p>';
}
if($pages>1){
    echo '<br/><p>';
    $current_page = ($start/$display) + 1;
    if($current_page !=1){
    echo '<a href="view_products.php?s=' . ($start - $display) . '&p=' . $pages . '&sort=' . $sort . '">Previous</a>';
    }
    //tampilkan jumlah halaman
    for($i=1;$i<=$pages; $i++){
    if($i !=$current_page){
    echo '<a href="view_products.php?s=' . (($display * ($i - 1))) . '&p=' . $pages . '&sort=' . $sort . '">' . $i . '</a>';
    }else{
    echo $i . ' ';
    }
    }
    if($current_page !=$pages){
    echo '<a href="view_products.php?s=' . ($start + $display) . '&p=' . $pages . '&sort=' . $sort . '">Next</a>';
    }
    echo '</p>';
    }
    
    include('../layouts/footer.php');
?>

Untuk penjelasannya, sama seperti View User di atas, hanya saja Database-nya sedikit berubah.

Jika kita buka Database sitename dengan Tabel produk di phpMyAdmin, maka tampilannya akan seperti ini :

Inilah Tampilan untuk Menampilkan Produk :

5. Menghapus User (Delete User)

Jika diatas kita sudah Menambahkan (Add) dan Menampilkan (View), sekarang kita akan melakukan Penghapusan (Delete). Sebelum itu, kita memberi nama File delete_user.php.


<?php
$page_title = "Delete User";

include('../layouts/header.php');

if((isset($_GET['id'])) && (is_numeric($_GET['id']))) {
    $id = $_GET['id'];
} elseif((isset($_POST['id'])) && (is_numeric($_POST['id']))) {
    $id = $_POST['id'];
} else {
    echo '<p class="error">Error Ditemukan</p>';
    include('../includes/footer.html');
    exit();
}
?>
<h1>Halaman Delete User</h1>
<?php 
require('../includes/mysqli_connect.php');
if ($_SERVER['REQUEST_METHOD'] == 'POST') {

  if($_POST['sure'] == 'Yes') {
    $q = "DELETE FROM users WHERE user_id = $id LIMIT 1";
    $r = @mysqli_query($dbc, $q);
    
    if(mysqli_affected_rows($dbc) == 1) {
      echo '<p>User berhasil dihapus</p>';
    }
    
    else {
      echo '<p class="error">Error ditemukan, user tidak bisa dihapus</p>';
      echo '<p>'.mysqli_error($dbc).'<br/>'.$q.'</p>';
    }
  } else {
    echo '<p>User tidak jadi dihapus</p>';
  }
} else {
    //tampilkan form
    
    $q = "SELECT CONCAT(last_name, ', ', first_name) FROM users WHERE user_id = $id";
    $r = @mysqli_query($dbc, $q);
  
    if(mysqli_num_rows($r) == 1) {
    $row = mysqli_fetch_array($r, MYSQLI_NUM);
    echo "<br />";
    echo "<h3>Name: $row[0]</h3>
    <br />
    Are you sure to delete this user?";
    //create user
    echo '<form action="delete_user.php" method="post">
    <input type="radio" name="sure" value="Yes"> Yes 
    <input type="radio" name="sure" value="No"> No 
    <input type="submit" name="submit" value="Submit">
    <input type="hidden" name="id" value="'. $id .'">
    </form>';  
    } else {
      echo '<p class="error">Error ditemukan, ulangi lagi</p>';
    }
}

mysqli_close($dbc);
include('../layouts/footer.php');
?>

Kode program di atas merupakan halaman untuk menghapus pengguna (user) dari database. Berikut penjelasan rinci mengenai kode program tersebut :

Dilakukan pengecekan terhadap parameter URL atau data yang dikirim melalui metode POST untuk mendapatkan ID pengguna yang akan dihapus:

Jika parameter 'id' ada dan merupakan angka, maka nilai parameter 'id' akan disimpan ke dalam variabel $id.
Jika tidak ada parameter 'id' atau nilai 'id' bukan angka, maka akan ditampilkan pesan error dan halaman akan diakhiri.

Setelah blok kode di atas, tampilan judul halaman dan header "Halaman Delete User" ditampilkan.
Dilakukan pengecekan apakah form telah disubmit menggunakan metode POST:

Jika form telah disubmit, dilakukan pengecekan apakah opsi "sure" yang dipilih adalah "Yes".

Jika dipilih "Yes", dilakukan query DELETE untuk menghapus pengguna berdasarkan ID yang disimpan dalam variabel $id.
Setelah query dijalankan, dilakukan pengecekan apakah pengguna berhasil dihapus menggunakan mysqli_affected_rows(). Jika berhasil, maka pesan "User berhasil dihapus" ditampilkan. Jika tidak, maka pesan error beserta informasi kesalahan ditampilkan.

Jika opsi "sure" tidak dipilih atau dipilih "No", maka pesan "User tidak jadi dihapus" ditampilkan.

Jika form belum disubmit, dilakukan query untuk mendapatkan informasi pengguna yang akan dihapus:

Query tersebut mengambil kolom last_name dan first_name dari tabel users berdasarkan ID pengguna.
Hasil query disimpan dalam variabel $r.

Jika data pengguna ditemukan berdasarkan ID, maka akan ditampilkan informasi nama pengguna dan form konfirmasi untuk menghapus pengguna:

Nama pengguna ditampilkan menggunakan tag <h3>.
Form konfirmasi berisi opsi "Yes" dan "No" menggunakan radio button dan tombol submit.
ID pengguna juga disimpan dalam input hidden untuk dikirim bersamaan dengan form.

Inilah Tampilan saat melakukan Delete User :

6. Menghapus Produk (Delete Product)

Sama seperti Kode Program di atas, hanya saja sekarang melakukan Penghapusan Produk (Delete Product) dengan nama File delete_product.php.

<?php
$page_title = "Delete Product";

include('../layouts/header.php');

if((isset($_GET['id'])) && (is_numeric($_GET['id']))) {
    $id = $_GET['id'];
} elseif((isset($_POST['id'])) && (is_numeric($_POST['id']))) {
    $id = $_POST['id'];
} else {
    echo '<p class="error">Error Ditemukan</p>';
    include('../includes/footer.html');
    exit();
}
  ?>
<h1>Halaman Delete User</h1>
<?php 
require('../includes/mysqli_connect.php');
if ($_SERVER['REQUEST_METHOD'] == 'POST') {

  if($_POST['sure'] == 'Yes') {
    $q = "DELETE FROM users WHERE user_id = $id LIMIT 1";
    $r = @mysqli_query($dbc, $q);
    
    if(mysqli_affected_rows($dbc) == 1) {
      echo '<p>User berhasil dihapus</p>';
    }
    
    else {
      echo '<p class="error">Error ditemukan, user tidak bisa dihapus</p>';
      echo '<p>'.mysqli_error($dbc).'<br/>'.$q.'</p>';
    }
  } else {
    echo '<p>User tidak jadi dihapus</p>';
  }
} else {
    //tampilkan form
    
    $q = "SELECT CONCAT(produk_nama, '(', kategori, ')') FROM produk WHERE produk_id = $id";
    $r = @mysqli_query($dbc, $q);
  
    if(mysqli_num_rows($r) == 1) {
    $row = mysqli_fetch_array($r, MYSQLI_NUM);
    echo "<br />";
    echo "<h3>Name: $row[0]</h3>
    <br />
    Are you sure to delete this product?";
    //create user
    echo '<form action="delete_product.php" method="post">
    <input type="radio" name="sure" value="Yes"> Yes 
    <input type="radio" name="sure" value="No"> No 
    <input type="submit" name="submit" value="Submit">
    <input type="hidden" name="id" value="'. $id .'">
    </form>';  
    } else {
      echo '<p class="error">Error ditemukan, ulangi lagi</p>';
    }
}

mysqli_close($dbc);
include('../layouts/footer.php');
?>

Untuk penjelasannya, sama seperti Delete User di atas, hanya saja Database-nya sedikit berubah.

Inilah Tampilan saat melakukan Delete Product :

H. Demo Project

Jika sudah selesai, inilah Tampilan Akhir dari Project Website Dinamis Sederhana yang telah kita buat di atas. [By Inzaghi's Media]

Mohon maaf apabila ada sedikit kesalahan pada Kode Program apapun. Dan nantikan untuk Pembahasan selanjutnya tentang Modul Pemrograman PHP.

Terima Kasih 😄😘👌👍 :)

Wassalammu‘alaikum wr. wb.

[TUTORIAL] Cara membuat Website Dinamis Sederhana dengan HTML, CSS, PHP, dan MySQL

A. Membuat Sticky Forms dengan PHP

B. Membuat Program CSS

E. Membuat Program PHP yang akan dikoneksikan ke Database MySQL

F. Membuat Halaman Register, Login, dan Logout

Post a Comment

Rekomendasi Website Jurnal Nasional dan Internasional untuk Mahasiswa

[TUTORIAL] Menggunakan Fritzing untuk membuat Rangkaian Elektronika (+ Video Tutorial)

Categories

Main Tags

Contact Form

Popular Posts

[TUTORIAL] Menggunakan Fritzing untuk membuat Rangkaian Elektronika (+ Video Tutorial)

[TUTORIAL] Cara Hosting Website Gratis di InfinityFree (+ Video Tutorial)

Contoh Program Arduino dan ESP32 dengan menggunakan Wokwi

Contact Form