Agarhouse Dev

Building a PHP CRUD App with MySQL Backend: A Step-by-Step Guide

Gary Agar

Introduction:

Creating a CRUD (Create, Read, Update, Delete) application is a fundamental skill for web developers. In this tutorial, we’ll guide you through building a PHP CRUD app with a MySQL backend, running on a local server using XAMPP.

XAMPP is a free and open-source cross-platform web server solution that includes Apache, MySQL, PHP, and Perl.

Step 1: Install XAMPP

  1. Download and install XAMPP from the official website (https://www.apachefriends.org/index.html).
  2. During installation, select Apache and MySQL components.
  3. Start the Apache and MySQL services.

Step 2: Set Up the Database

  1. Open your browser and navigate to http://localhost/phpmyadmin/.
  2. Create a new database named “crud_app”.
  3. Inside the database, create a table named “users” with the following columns:
    • id (INT, Primary Key, Auto Increment)
    • name (VARCHAR)
    • email (VARCHAR)
    • phone (VARCHAR)

Step 3: Create Project Directory

Create a new directory in the “htdocs” folder inside your XAMPP installation directory.

mkdir crud_app
cd crud_app

Step 4: Create Connection to Database (db.php)

Create a file named db.php to handle the database connection.

<?php

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "crud_app";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

?>

Step 5: Create HTML Form (index.php)

Create a file named index.php for the main page with a form for user input.

<!DOCTYPE html>

<html>

<head>

<title>PHP CRUD App</title>

</head>

<body>

<h2>Add User</h2>

<form action="insert.php" method="POST">

Name: <input type="text" name="name" required><br>

Email: <input type="email" name="email" required><br>

Phone: <input type="tel" name="phone" required><br>

<input type="submit" value="Add User">

</form>

<!-- Display users here -->

</body>

</html>

Step 6: Create Insert Script (insert.php)

Create a file named insert.php to handle the insertion of data into the database.

<?php

include_once 'db.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

$name = $_POST['name'];

$email = $_POST['email'];

$phone = $_POST['phone'];

$sql = "INSERT INTO users (name, email, phone) VALUES ('$name', '$email', '$phone')";

if ($conn->query($sql) === TRUE) {

header("Location: index.php");

} else {

echo "Error: " . $sql . "<br>" . $conn->error;

}

}

$conn->close();

?>

Step 7: Display Users (index.php)

Modify index.php to display the list of users.

<!-- Add this section below the form in index.php -->

<h2>Users</h2>

<table border="1">

<tr>

<th>ID</th>

<th>Name</th>

<th>Email</th>

<th>Phone</th>

</tr>

<?php

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

while ($row = $result->fetch_assoc()) {

echo "<tr>

<td>{$row['id']}</td>

<td>{$row['name']}</td>

<td>{$row['email']}</td>

<td>{$row['phone']}</td>

</tr>";

}

?>

</table>

Congratulations! You’ve successfully built a PHP CRUD app with a MySQL backend on a local server using XAMPP. This tutorial covered creating a database, establishing a connection, creating an HTML form, and implementing basic CRUD functionality. Feel free to expand and enhance the app as this is just a very basic example and lacks secure practices. Happy coding!

Leave a comment