PHP for Beginners: Building Your First Database-Driven Web App

If you're just getting started with PHP, one of the most exciting projects you can undertake is building a database-driven web app. It’s a great way to understand how the backend works, interact with a database and bring dynamic content to your users.

In this tutorial, we’ll build a simple To-Do List App using PHP and MySQL. By the end, you’ll have a working application where users can add, view, and delete tasks.

---

Prerequisites

Before we dive in, make sure you have:

• PHP (version 7.4 or above)
• MySQL (or MariaDB)
• A local server like XAMPP or Laragon
• A code editor like VS Code

---

Step 1: Set Up Your Environment

1. Install your local server (e.g., XAMPP).
2. Start the Apache and MySQL services.
3. Navigate to your web root directory (htdocs for XAMPP) and create a new folder called todo_app.

---

Step 2: Create the Database

1. Open phpMyAdmin.
2. Create a new database called todo_app.
3. Run the following SQL query to create a tasks table:

sql
CREATE TABLE tasks (
    id INT AUTO_INCREMENT PRIMARY KEY,
    task VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

---

Step 3: Build the HTML Frontend

Create an index.php file in the todo_app folder and add the following HTML:

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List App</title>
    <link rel="stylesheet" href="styles.css">


    <div>




<hr>

<h2>
  
  
  Step 4: Handle Adding Tasks
</h2>

<p>Create a new file called <em>add_task.php</em> and add the following code:<br>
</p>

<pre class="brush:php;toolbar:false"><?php if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $task = $_POST['task'];

    // Connect to the database
    $conn = new mysqli("localhost", "root", "", "todo_app");

    // Insert the task into the database
    $stmt = $conn->prepare("INSERT INTO tasks (task) VALUES (?)");
    $stmt->bind_param("s", $task);
    $stmt->execute();

    $stmt->close();
    $conn->close();

    // Redirect back to the main page
    header("Location: index.php");
    exit();
}
?>

---

Step 5: Handle Deleting Tasks

Create a new file called delete_task.php:

<?php if (isset($_GET['id'])) {
    $id = $_GET['id'];

    // Connect to the database
    $conn = new mysqli("localhost", "root", "", "todo_app");

    // Delete the task from the database
    $stmt = $conn->prepare("DELETE FROM tasks WHERE id = ?");
    $stmt->bind_param("i", $id);
    $stmt->execute();

    $stmt->close();
    $conn->close();

    // Redirect back to the main page
    header("Location: index.php");
    exit();
}
?>

---

Step 6: Add Some CSS (Optional)

Create a styles.css file in the same folder to style your app:

body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    color: #333;
    margin: 0;
    padding: 0;
}

.container {
    width: 50%;
    margin: 50px auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

h1 {
    text-align: center;
}

form {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

form input {
    flex: 1;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

form button {
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

form button:hover {
    background-color: #218838;
}

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

ul li a {
    color: #dc3545;
    text-decoration: none;
}

---

Step 7: Run Your Application

1. Open your browser and go to http://localhost/todo_app/index.php.
2. Add some tasks, view them, and delete them. ?

---

Congratulations! You’ve just built your first database-driven web app with PHP and MySQL. This simple project lays the foundation for creating more complex applications. Experiment with adding features like task prioritization or user authentication.

If you enjoyed this tutorial, drop a comment or share it with your fellow developers. Happy coding! ?