Blog-CRUD-Operation/index.php at main · Nipa-Fullstack-Developer/Blog-CRUD-Operation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<?php include 'db.php'; ?>

<!DOCTYPE html>
<html>

<head>
    <title>PHP Blog</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100">

    <!-- Navbar -->
    <div class="bg-purple-800 text-white p-4 text-xl font-semibold flex justify-between">
        <span>My Blog</span>
        <a href="create.php" class="bg-white text-indigo-600 px-3 py-1 rounded-lg text-sm font-medium">
            + Add Post
        </a>
    </div>

    <div class="w-full max-w-8xl mx-auto px-4 py-6">

        <!-- Grid -->
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">

            <?php
            $result = $conn->query("SELECT * FROM posts ORDER BY id ASC");

            while ($row = $result->fetch_assoc()) {
            ?>
                <div class="bg-white rounded-xl shadow hover:shadow-xl transition duration-300 flex flex-col justify-between">

                    <div class="p-5">
                        <!-- Title -->
                        <h2 class="text-lg font-bold text-gray-800 line-clamp-2">
                            <?php echo $row['title']; ?>
                        </h2>

                        <!-- Content Preview -->
                        <p class="text-gray-600 mt-2 text-sm">
                            <?php echo substr($row['content'], 0, 120) . "..."; ?>
                        </p>
                    </div>

                    <!-- Footer -->
                    <div class="px-5 pb-4 flex justify-between items-center">
                        <div class="text-xs text-gray-400">
                            <?php echo date("d M Y", strtotime($row['created_at'])); ?>
                        </div>

                        <div class="flex gap-3 items-center">

                            <!-- Edit Icon -->
                            <a href="edit.php?id=<?php echo $row['id']; ?>"
                                class="text-indigo-900 hover:text-indigo-900 transition" title="Edit">

                                <svg xmlns="http://www.w3.org/2000/svg"
                                    class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M15.232 5.232l3.536 3.536M9 11l6-6a2.828 2.828 0 114 4l-6 6H9v-4z" />
                                </svg>

                            </a>

                            <!-- Delete Icon -->
                            <a href="delete.php?id=<?php echo $row['id']; ?>"
                                class="text-red-500 hover:text-red-500 transition" title="Delete"
                                onclick="return confirm('Delete this post?')">

                                <svg xmlns="http://www.w3.org/2000/svg"
                                    class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M6 7h12M9 7v10m6-10v10M5 7l1-2h12l1 2M6 7h12" />
                                </svg>

                            </a>

                        </div>
                    </div>

                </div>
            <?php } ?>

        </div>

    </div>

</body>

</html>