Programming Di Rumahrafif Watch on YouTube

PART#2. MEMBUAT PAGINATION & EDITOR WYSIWYG DI HALAMAN ADMIN // MEMBUAT WEBSITE DENGAN PHP dan MySQL

4 min read 2 months ago

Published on Aug 26, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, we will create a web application using PHP and MySQL, focusing on implementing pagination and a WYSIWYG editor in the admin panel. This guide will walk you through the necessary steps to connect your PHP application to MySQL, build a CRUD interface, and enhance your text areas with the Summernote editor.

Step 1: Create a Database Connection

Create a PHP file (e.g., koneksi.php) for connecting to the MySQL database.
Use the following code to establish a connection:

<?php
$host = "localhost";
$username = "root";
$password = "";
$database = "your_database_name";

$conn = new mysqli($host, $username, $password, $database);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
?>

Replace your_database_name with the actual name of your database.

Step 2: Create MySQL Table Schema

Use the following SQL query to create a table for storing data:

CREATE TABLE your_table_name (
    id INT(11) AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Replace your_table_name with your desired table name.

Step 3: Set Up the Frontend with Bootstrap

Include Bootstrap in your HTML file to style your application.
Add the following in the <head> section:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/css/bootstrap.min.css">

Step 4: Prepare Navigation in Header

Create a navigation bar at the top of your HTML page using Bootstrap components. Here is a basic example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Your Website</a>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
    </div>
</nav>

Step 5: Create Footer Layout

Add a footer section at the bottom of your HTML page for additional information or links.

<footer class="text-center">
    <p>&copy; 2023 Your Website. All rights reserved.</p>
</footer>

Step 6: Set Up Main Content Area

Create a <main> section in your HTML to display your data.

<main class="container">
    <h1>Your Content Here</h1>
    <!-- Content will be dynamically generated -->
</main>

Step 7: Prepare Table for Displaying Data

Use a Bootstrap table component to display the records retrieved from your MySQL database.

<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Content</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <!-- PHP code to fetch and display data will go here -->
    </tbody>
</table>

Step 8: Create Input Data File

Create a form in a separate file (e.g., input.php) to input new data.

<form action="insert.php" method="POST">
    <input type="text" name="title" placeholder="Title" required>
    <textarea name="content" id="summernote"></textarea>
    <button type="submit">Submit</button>
</form>

Step 9: Integrate WYSIWYG Editor (Summernote)

Include Summernote CSS and JS in your HTML.

<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.js"></script>

Initialize Summernote in your JavaScript:

$(document).ready(function() {
    $('#summernote').summernote();
});

Step 10: Customize Image Input in Summernote

To enable image uploads, refer to the Summernote documentation or community guides for implementing image handling.

Step 11: Add Image Preview Plugin

Use plugins to allow users to view uploaded images within Summernote. Check the Summernote image list repository for examples.

Step 12: Display Data from MySQL Table

Use PHP to fetch and display data in the table you set up earlier.

$query = "SELECT * FROM your_table_name";
$result = $conn->query($query);

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        echo "<tr>
                <td>{$row['id']}</td>
                <td>{$row['title']}</td>
                <td>{$row['content']}</td>
                <td><a href='edit.php?id={$row['id']}'>Edit</a> | <a href='delete.php?id={$row['id']}'>Delete</a></td>
              </tr>";
    }
}

Step 13: Create Search Functionality

Implement a search form and modify your data retrieval query based on user input.

Step 14: Implement Delete Function with Confirmation

Create a delete functionality that prompts the user for confirmation before proceeding.

Step 15: Implement Pagination in PHP

Use the following code snippet to paginate your data:

$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$limit = 10; // Number of records per page
$offset = ($page - 1) * $limit;

$query = "SELECT * FROM your_table_name LIMIT $limit OFFSET $offset";

Add pagination controls at the bottom of your table.

Step 16: Create Edit Functionality

Create a separate file for editing records and populate the form with existing data.

Conclusion

In this tutorial, we covered how to create a web application using PHP and MySQL, including pagination and a WYSIWYG editor. By following these steps, you can build a functional admin panel that allows for content management. For further improvements, consider integrating user authentication and enhancing the UI with additional Bootstrap components.

Table of Contents

Recent