Site icon FahmidasClassroom

How to create a responsive programmer portfolio using PHP and MySQL

Fahmida Yesmin
Programmer portfolio

1. 📦 Project Structure

pgsqlCopyEditprogrammer-portfolio/
├── index.php
├── add_project.php
├── db.php
├── project.php
├── assets/
│   └── css/
│       └── styles.css

2. 🧰 Set Up Local Environment

3. 🗄 Create the Database

Step 1: Open phpMyAdmin

Navigate to: http://localhost/phpmyadmin

Step 2: Run SQL

sqlCopyEditCREATE DATABASE portfolio_db;

USE portfolio_db;

CREATE TABLE projects (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(100),
    description TEXT,
    tech_stack VARCHAR(255),
    image_url VARCHAR(255),
    project_link VARCHAR(255)
);

4. 🔌 Connect to MySQL (db.php)

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

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

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

5. 🖥 Main Portfolio Page (index.php)

phpCopyEdit<?php include 'db.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Programmer Portfolio</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 mb-4">👨‍💻 My Projects</h1>
    <a href="add_project.php" class="btn btn-success mb-4">Add New Project</a>
    <div class="row">
      <?php
      $result = $conn->query("SELECT * FROM projects");
      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['title'] ?>">
          <div class="card-body">
            <h5 class="card-title"><?= $row['title'] ?></h5>
            <p class="card-text"><?= substr($row['description'], 0, 100) ?>...</p>
            <p><strong>Tech:</strong> <?= $row['tech_stack'] ?></p>
            <a href="project.php?id=<?= $row['id'] ?>" class="btn btn-primary">View</a>
          </div>
        </div>
      </div>
      <?php endwhile; ?>
    </div>
  </div>
</body>
</html>

6. ➕ Add New Project (add_project.php)

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

    $stmt = $conn->prepare("INSERT INTO projects (title, description, tech_stack, image_url, project_link) VALUES (?, ?, ?, ?, ?)");
    $stmt->bind_param("sssss", $title, $desc, $tech, $image, $link);
    $stmt->execute();
    header("Location: index.php");
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Add Project</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 Project</h2>
    <form method="POST">
      <div class="mb-3">
        <label for="title" class="form-label">Project Title</label>
        <input type="text" name="title" class="form-control" required>
      </div>
      <div class="mb-3">
        <label for="description" class="form-label">Description</label>
        <textarea name="description" class="form-control" rows="4" required></textarea>
      </div>
      <div class="mb-3">
        <label for="tech_stack" class="form-label">Tech Stack</label>
        <input type="text" name="tech_stack" class="form-control" required>
      </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>
      <div class="mb-3">
        <label for="project_link" class="form-label">Project Link</label>
        <input type="text" name="project_link" class="form-control" required>
      </div>
      <button type="submit" class="btn btn-success">Add Project</button>
      <a href="index.php" class="btn btn-secondary">Back</a>
    </form>
  </div>
</body>
</html>

7. 🔍 Single Project View (project.php)

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><?= $project['title'] ?></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><?= $project['title'] ?></h2>
    <img src="<?= $project['image_url'] ?>" class="img-fluid mb-3" alt="<?= $project['title'] ?>">
    <p><strong>Description:</strong> <?= nl2br($project['description']) ?></p>
    <p><strong>Tech Stack:</strong> <?= $project['tech_stack'] ?></p>
    <a href="<?= $project['project_link'] ?>" class="btn btn-primary" target="_blank">Visit Project</a>
  </div>
</body>
</html>

🧠 Optional Improvements

🚀 How to Run

  1. Copy folder to htdocs/
  2. Start Apache & MySQL in XAMPP
  3. Visit: http://localhost/programmer-portfolio
Exit mobile version