🎮 Cara Penggunaan

Menambah Postingan Baru

1. Isi form "Tambah Konten Baru"
2. Pilih kategori yang sesuai
3. Tulis judul dan konten
4. Klik tombol "Simpan"

Mengedit Postingan

1. Klik tombol "Edit" pada postingan yang ingin diubah
2. Form akan terisi otomatis dengan data postingan
3. Lakukan perubahan yang diinginkan
4. Klik "Update" atau "Batal" untuk membatalkan

Melihat Detail Postingan

1. Klik tombol "Lihat" pada postingan
2. Modal akan terbuka menampilkan konten lengkap
3. Klik "X" atau area luar modal untuk menutup

Menghapus Postingan

1. Klik tombol "Hapus" pada postingan
2. Konfirmasi penghapusan
3. Postingan akan dihapus secara permanen

🔗 API Documentation

Base URL

http://localhost:3000/api

Endpoints

1. Get All Posts

GET /api/posts

Response:

[
  {
    "id": 1,
    "title": "Judul Postingan",
    "category": "Akidah",
    "content": "Konten postingan...",
    "date": "2024-01-01T00:00:00.000Z",
    "author": "Admin"
  }
]

2. Get Post by ID

GET /api/posts/:id

Response:

{
  "id": 1,
  "title": "Judul Postingan",
  "category": "Akidah", 
  "content": "Konten postingan...",
  "date": "2024-01-01T00:00:00.000Z",
  "author": "Admin"
}

3. Create New Post

POST /api/posts
Content-Type: application/json

{
  "title": "Judul Baru",
  "category": "Ibadah",
  "content": "Konten postingan baru...",
  "author": "User"
}

Response:

{
  "id": 3,
  "title": "Judul Baru",
  "category": "Ibadah",
  "content": "Konten postingan baru...",
  "date": "2024-01-01T00:00:00.000Z",
  "author": "User"
}

4. Update Post

PUT /api/posts/:id
Content-Type: application/json

{
  "title": "Judul Updated",
  "category": "Akhlak",
  "content": "Konten yang sudah diupdate..."
}

5. Delete Post

DELETE /api/posts/:id

Response:

{
  "message": "Post deleted successfully",
  "deletedPost": {
    "id": 1,
    "title": "Judul Postingan"
  }
}

Error Responses

{
  "error": "Post not found",
  "status": 404
}

📱 Responsive Design

Aplikasi ini fully responsive dan mendukung:

• Desktop (1200px+)
• Tablet (768px - 1199px)
• Mobile (320px - 767px)

🎨 Kustomisasi

Mengubah Warna Tema

:root {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --accent-color: #f39c12;
  --text-color: #2c3e50;
}

Menambah Kategori Baru

<option value="Doa">Doa-Doa</option>
<option value="Zakat">Zakat</option>

Mengubah Quote Islam

<div class="islamic-quote">
    "Quote Islam baru di sini..." - Sumber
</div>

🔄 Integrasi dengan Backend

Sesuaikan api.js atau koneksi dengan backend nyata jika ingin data persisten

Pastikan endpoint API sesuai dokumentasi

Bisa digunakan untuk membuat mobile app atau aplikasi lain yang memerlukan konten Islami

Demo

islamic-blog

🤝 Kontribusi

Fork repository

Buat branch fitur (git checkout -b fitur-baru)

Commit perubahan (git commit -m 'Tambahkan fitur')

Push ke branch (git push origin fitur-baru)

Buat Pull Request