Membuat Crud dengan PHP, SQLite dan Bootstrap 4

Pada kesempatan kali ini saya akan memberikan tutorial singkat Membuat Crud dengan PHP, SQLite dan Bootstrap 4, pertanyaanya adalah mengapa harus SQLite? karena saya lihat untuk membuat aplikasi kecil dengan local databse tanpa harus import DB lagi ke web server, SQLite memiliki kelebihan itu, SQLite juga banyak digunakan untuk pengembangan aplikasi android yang menggunakan local database.

Sebelum memulai pastikan dulu anda sudah mengkatifkan SQLite service di webserver anda, jika belum tahu mengaktifkan service SQLite, anda bisa menuju ke artikel saya sbelumnya di link berikut ini Menjalankan service SQLite.

Crud dengan PHP, SQLite dan Bootstrap 4

Pertama membuat file view data dari SQLite, silahkan copas code berikut ini dan simpan di direktori C:/xampp/htdocs/phpsqlite dengan nama index.php

<?php
// Includs database connection
include "db_connect.php";

// Makes query with rowid
$query = "SELECT rowid, * FROM students";

// Run the query and set query result in $result
// Here $db comes from "db_connection.php"
$result = $db->query($query);

?>
<!DOCTYPE html>
<html>
<head>
    <title>Data List</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.min.js"></script>
</head>
<body>

    <div style="width: 500px; margin: 20px auto;">
    <?php
if(isset($_GET['aksi']) == 'del'){
$id = $_GET['id']; // rowid from url

// Prepar the deleting query according to rowid
$query = "DELETE FROM students WHERE rowid=$id";

// Run the query to delete record
if( $db->query($query) ){
    $message = "Record is deleted successfully.";
}else {
    $message = "Sorry, Record is not deleted.";
}

echo $message;
echo "<br/>";
}
?>
        <a href="insert.php">Add New</a>
        <table class="table table-bordered" width="100%" cellpadding="5" cellspacing="1" border="1">
            <tr>
                <td>Name</td>
                <td>Email</td>
                <td>Action</td>
            </tr>
            <?php while($row = $result->fetchArray()) {?>
            <tr>
                <td><?php echo $row['name'];?></td>
                <td><?php echo $row['email'];?></td>
                <td>
                    <a href="update.php?id=<?php echo $row['rowid'];?>" class="btn btn-sm btn-primary">Update</a>
                    <a href="index.php?aksi=del&id=<?php echo $row['rowid'];?>" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?');">Delete</a>
                </td>
            </tr>
            <?php } ?>
        </table>
    </div>
</body> 
</html>

Selanjutnya membuat form input data, silahkan copas code di bawah ini dan simpan di C:/xampp/htdocs/phpsqlite dengan nama insert.php

<?php
$message = ""; // initial message 
if( isset($_POST['submit_data']) ){

    // Includs database connection
    include "db_connect.php";

    // Gets the data from post
    $name = $_POST['name'];
    $email = $_POST['email'];

    // Makes query with post data
    $query = "INSERT INTO students (name, email) VALUES ('$name', '$email')";
    
    // Executes the query
    // If data inserted then set success message otherwise set error message
    // Here $db comes from "db_connection.php"
    if( $db->exec($query) ){
        $message = "Data is inserted successfully.";
    }else{
        $message = "Sorry, Data is not inserted.";
    }
}
?>
<!DOCTYPE html>
<html>
<head>
    <title>Insert Data</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <div style="width: 500px; margin: 20px auto;">

        <!-- showing the message here-->
        <div><?php echo $message;?></div>

        <table class="table table-bordered" width="100%" cellpadding="5" cellspacing="1" border="1">
            <form action="insert.php" method="post">
            <tr>
                <td>Name:</td>
                <td><input name="name" type="text" class="form-control" required></td>
            </tr>
            <tr>
                <td>Email:</td>
                <td><input name="email" type="text" class="form-control" required></td>
            </tr>
            <tr>
                <td><a href="index.php" class="btn btn-sm btn-default">See Data</a></td>
                <td><input name="submit_data" type="submit" class="btn btn-sm btn-primary" value="Insert Data"></td>
            </tr>
            </form>
        </table>
    </div>
</body>
</html>

Langkas selanjutnya adalah membuat file update data, silahkan copas code di bawah ini kemudian simpan di direktori C:/xampp/htdocs/phpsqlite dengan nama update.php

<?php
$message = ""; // initial message 

// Includs database connection
include "db_connect.php";

// Updating the table row with submited data according to rowid once form is submited 
if( isset($_POST['submit_data']) ){

    // Gets the data from post
    $id = $_POST['id'];
    $name = $_POST['name'];
    $email = $_POST['email'];

    // Makes query with post data
    $query = "UPDATE students set name='$name', email='$email' WHERE rowid=$id";
    
    // Executes the query
    // If data inserted then set success message otherwise set error message
    // Here $db comes from "db_connection.php"
    if( $db->exec($query) ){
        $message = "Data is updated successfully.";
    }else{
        $message = "Sorry, Data is not updated.";
    }
}

$id = $_GET['id']; // rowid from url
// Prepar the query to get the row data with rowid
$query = "SELECT rowid, * FROM students WHERE rowid=$id";
$result = $db->query($query);
$data = $result->fetchArray(); // set the row in $data
?>

<!DOCTYPE html>
<html>
<head>
    <title>Update Data</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <div style="width: 500px; margin: 20px auto;">

        <!-- showing the message here-->
        <div><?php echo $message;?></div>

        <table class="table table-bordered" width="100%" cellpadding="5" cellspacing="1" border="1">
            <form action="" method="post">
            <input type="hidden" name="id" value="<?php echo $id;?>">
            <tr>
                <td>Name:</td>
                <td><input name="name" type="text" class="form-control" value="<?php echo $data['name'];?>" required></td>
            </tr>
            <tr>
                <td>Email:</td>
                <td><input name="email" type="text" class="form-control" value="<?php echo $data['email'];?>" required></td>
            </tr>
            <tr>
                <td><a href="index.php" class="btn btn-sm btn-default">Back</a></td>
                <td><input name="submit_data" type="submit"class="btn btn-sm btn-primary" value="Update Data"></td>
            </tr>
            </form>
        </table>
    </div>
</body>
</html>

langkah selanjutnya adalah menjalankan aplikasi tersebut, silahkan buka browser kemudian aktifkan web server selanjutnya ketik localhost/phpsqlite, maka anda akan mendapatkan halaman seperti di bawah ini

Halaman index.php

Halaman insert.php

Halaman update.php

Begitulah kira - kira tampilan dari aplikasi crud dengan php dan SQLite, masih bingung? tenang saya sudah menyiapkan link download source code nya untuk memudahkan anda dalam proses belajar, silahkan menuju link berikut ini

DOWNLOAD

Tutorial sudah saya berikan link download juga sudah saya sertakan, semoga bisa memudahkan kamu yang sedang belajar pemrograman untuk membuat Crud dengan PHP, SQLite dan Bootstrap 4, silahkan di coba dan dipelajari juga dipraktekkan karena tanpa praktek dan action semuanya tidak bisa terwujud.

Selamat Mencoba