FahmidasClassroom

Learn by easy steps

You Are Here

Gardeing
Bootstrap

How to create responsive website on gardening using PHP and MySQL

no Comments

1. 🌐 Set Up the Environment

Install Required Tools

2. 📁 Project Structure

pgsqlCopyEditgardening-website/
├── index.php
├── plant.php
├── add_plant.php
├── db.php
├── assets/
│   └── css/
│       └── styles.css

3. 🧱 Create the Database

Step 1: Open phpMyAdmin

Navigate to: http://localhost/phpmyadmin

Step 2: Create a Database

sqlCopyEditCREATE DATABASE gardening_db;

Step 3: Create a Table

sqlCopyEditUSE gardening_db;

CREATE TABLE plants (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100),
    description TEXT,
    image_url VARCHAR(255)
);

4. 🔌 Connect to MySQL (db.php)

phpCopyEdit<?php
$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'gardening_db';

$conn = new mysqli($host, $user, $pass, $db);

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

5. 🎨 Create the Homepage (index.php)

phpCopyEdit<?php include 'db.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Gardening Site</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container my-5">
    <h1 class="text-center">🌱 My Gardening Tips</h1>
    <a href="add_plant.php" class="btn btn-success mb-4">Add New Plant</a>
    <div class="row">
      <?php
      $result = $conn->query("SELECT * FROM plants");
      while ($row = $result->fetch_assoc()):
      ?>
      <div class="col-md-4 mb-4">
        <div class="card h-100">
          <img src="<?= $row['image_url'] ?>" class="card-img-top" alt="<?= $row['name'] ?>">
          <div class="card-body">
            <h5 class="card-title"><?= $row['name'] ?></h5>
            <p class="card-text"><?= substr($row['description'], 0, 100) ?>...</p>
            <a href="plant.php?id=<?= $row['id'] ?>" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
      <?php endwhile; ?>
    </div>
  </div>
</body>
</html>

6. 📝 Add Plant Form (add_plant.php)

phpCopyEdit<?php include 'db.php'; ?>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $name = $_POST['name'];
    $desc = $_POST['description'];
    $image = $_POST['image_url'];

    $stmt = $conn->prepare("INSERT INTO plants (name, description, image_url) VALUES (?, ?, ?)");
    $stmt->bind_param("sss", $name, $desc, $image);
    $stmt->execute();
    header("Location: index.php");
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Add Plant</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container my-5">
    <h2>Add a New Plant</h2>
    <form method="POST">
      <div class="mb-3">
        <label for="name" class="form-label">Plant Name</label>
        <input type="text" name="name" class="form-control" required>
      </div>
      <div class="mb-3">
        <label for="description" class="form-label">Plant Description</label>
        <textarea name="description" class="form-control" rows="4" required></textarea>
      </div>
      <div class="mb-3">
        <label for="image_url" class="form-label">Image URL</label>
        <input type="text" name="image_url" class="form-control" required>
      </div>
      <button type="submit" class="btn btn-success">Add Plant</button>
      <a href="index.php" class="btn btn-secondary">Back</a>
    </form>
  </div>
</body>
</html>

7. 🌼 View Single Plant (plant.php)

phpCopyEdit<?php include 'db.php'; ?>
<?php
$id = $_GET['id'];
$stmt = $conn->prepare("SELECT * FROM plants WHERE id = ?");
$stmt->bind_param("i", $id);
$stmt->execute();
$result = $stmt->get_result();
$plant = $result->fetch_assoc();
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><?= $plant['name'] ?></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container my-5">
    <a href="index.php" class="btn btn-secondary mb-4">Back</a>
    <h2><?= $plant['name'] ?></h2>
    <img src="<?= $plant['image_url'] ?>" class="img-fluid mb-3" alt="<?= $plant['name'] ?>">
    <p><?= nl2br($plant['description']) ?></p>
  </div>
</body>
</html>

✅ Tips for Improvement

  • Add user authentication (register/login)
  • Implement image upload instead of URL
  • Add categories (herbs, flowers, veggies)
  • Make it mobile-first (Bootstrap handles a lot)
  • Add search functionality

🚀 Run the Project

  1. Place the folder in htdocs (XAMPP) or www (WAMP)
  2. Start Apache & MySQL
  3. Access via http://localhost/gardening-website