7.5 KiB
7.5 KiB
Admin Panel — Stories + Info Sections
1. Stories (Hikayeler)
Anasayfadaki kayan hikaye/tanıtım kartları. Instagram stories benzeri yapı.
API Endpoints
| Method | Endpoint | Auth | Açıklama |
|---|---|---|---|
GET |
/v1/stories |
public | Aktif hikayeler (order_index sıralı) |
GET |
/admin/stories |
sanctum | Tüm hikayeler |
POST |
/admin/stories |
sanctum | Yeni hikaye oluştur |
GET |
/admin/stories/{id} |
sanctum | Hikaye detayı |
PUT |
/admin/stories/{id} |
sanctum | Hikaye güncelle |
DELETE |
/admin/stories/{id} |
sanctum | Hikaye sil |
Response Formatı
{
"data": [
{
"id": 1,
"title": "25 Yılı Aşkın Deneyim",
"badge": "Tanıtım",
"content": "1998'den bu yana 15.000+ denizci yetiştirdik...",
"image": "/storage/stories/hakkimizda.jpg",
"cta_text": "Hakkımızda",
"cta_url": "/kurumsal/hakkimizda",
"order_index": 0,
"is_active": true,
"created_at": "...",
"updated_at": "..."
}
]
}
Veri Modeli
| Alan | Tip | Açıklama |
|---|---|---|
title |
string (zorunlu) | Hikaye başlığı |
badge |
string (nullable) | Üst etiket: "Tanıtım", "Yeni Dönem", vb. |
content |
text (zorunlu) | Hikaye içeriği |
image |
string (nullable) | Görsel path (storage/stories/) |
cta_text |
string (nullable) | Buton metni: "Hakkımızda", "Detaylı Bilgi" |
cta_url |
string (nullable) | Buton linki: "/kurumsal/hakkimizda" |
order_index |
integer | Sıralama (0'dan başlar) |
is_active |
boolean | Aktif/pasif |
Admin Panel Form
┌─────────────────────────────────────────────────┐
│ Hikaye Düzenle │
├─────────────────────────────────────────────────┤
│ Başlık: [25 Yılı Aşkın Deneyim ] │
│ Etiket: [Tanıtım ] │
│ İçerik: ┌─────────────────────────────────┐ │
│ │ 1998'den bu yana 15.000+... │ │
│ └─────────────────────────────────┘ │
│ Görsel: [📷 Dosya Seç] hakkimizda.jpg │
│ Buton: [Hakkımızda ] [/kurumsal/hak..] │
│ Sıralama: [0] │
│ Aktif: [✅ Toggle] │
│ [Kaydet] │
└─────────────────────────────────────────────────┘
Form Alanları:
| Alan | Bileşen | Açıklama |
|---|---|---|
| title | TextInput | Zorunlu, max 255 |
| badge | TextInput | İsteğe bağlı, max 100 |
| content | Textarea | Zorunlu |
| image | FileUpload | storage/public/stories, preview göster |
| cta_text | TextInput | İsteğe bağlı, max 100 |
| cta_url | TextInput (url) | İsteğe bağlı, max 255 |
| order_index | NumberInput | Varsayılan 0 |
| is_active | Toggle | Varsayılan true |
Tablo Sütunları:
| Sütun | Açıklama |
|---|---|
| Görsel | Küçük thumbnail |
| Başlık | title |
| Etiket | badge (badge bileşeni) |
| Buton | cta_text (varsa göster) |
| Sıralama | order_index |
| Aktif | is_active (toggle/icon) |
2. Info Sections (Tanıtım Bölümleri)
Anasayfadaki 2 adet metin+görsel tanıtım bölümü. Settings tablosunda info_sections grubu altında saklanır.
API Erişimi
Mevcut settings endpoint'inden gelir:
GET /api/v1/settings
GET /api/v1/settings/info_sections
Response (settings/info_sections):
{
"info_section_1_badge": "Neden Boğaziçi Denizcilik?",
"info_section_1_title": "Uluslararası Standartlarda Eğitim",
"info_section_1_body": "Uzun açıklama metni...",
"info_section_1_quote": "Denizcilik eğitiminde kalite...",
"info_section_1_quote_author": "Kpt. Murat Aydın, Kurucu",
"info_section_1_image": "/storage/uploads/info-1.jpg",
"info_section_2_badge": "Simülatör Destekli Eğitim",
"info_section_2_title": "Teoriden Pratiğe",
"info_section_2_body": "Uzun açıklama metni...",
"info_section_2_image": "/storage/uploads/info-2.jpg"
}
Alanlar
Bölüm 1 (6 alan):
| Key | Type | Label |
|---|---|---|
info_section_1_badge |
text | Bölüm 1 — Etiket |
info_section_1_title |
text | Bölüm 1 — Başlık |
info_section_1_body |
textarea | Bölüm 1 — İçerik |
info_section_1_quote |
text | Bölüm 1 — Alıntı |
info_section_1_quote_author |
text | Bölüm 1 — Alıntı Yazarı |
info_section_1_image |
image | Bölüm 1 — Görsel |
Bölüm 2 (4 alan):
| Key | Type | Label |
|---|---|---|
info_section_2_badge |
text | Bölüm 2 — Etiket |
info_section_2_title |
text | Bölüm 2 — Başlık |
info_section_2_body |
textarea | Bölüm 2 — İçerik |
info_section_2_image |
image | Bölüm 2 — Görsel |
Admin Panel — Ayarlar Sayfası
Mevcut Settings sayfasına yeni bir "Tanıtım Bölümleri" sekmesi ekle:
/admin/settings
├── ... (mevcut sekmeler)
└── Tanıtım Bölümleri → info_sections
├── Bölüm 1
│ ├── Etiket: [Neden Boğaziçi Denizcilik?]
│ ├── Başlık: [Uluslararası Standartlarda...]
│ ├── İçerik: [textarea — uzun metin]
│ ├── Alıntı: [Denizcilik eğitiminde kalite...]
│ ├── Alıntı Yazarı: [Kpt. Murat Aydın, Kurucu]
│ └── Görsel: [📷 FileUpload]
└── Bölüm 2
├── Etiket: [Simülatör Destekli Eğitim]
├── Başlık: [Teoriden Pratiğe]
├── İçerik: [textarea — uzun metin]
└── Görsel: [📷 FileUpload]
Kaydet: PUT /admin/settings ile dot notation:
{
"settings": {
"info_sections.info_section_1_badge": "Neden Boğaziçi Denizcilik?",
"info_sections.info_section_1_title": "Uluslararası Standartlarda Eğitim",
"info_sections.info_section_1_body": "...",
"info_sections.info_section_1_image": "/storage/uploads/info-1.jpg"
}
}
Frontend Kullanım Özeti
Stories
// Anasayfa
const { data: stories } = await fetch('/api/v1/stories');
{stories.map(story => (
<StoryCard
key={story.id}
title={story.title}
badge={story.badge}
content={story.content}
image={getImageUrl(story.image)}
ctaText={story.cta_text}
ctaUrl={story.cta_url}
/>
))}
Info Sections
// Settings'ten al
const settings = await fetch('/api/v1/settings');
const info1 = {
badge: settings.info_sections?.info_section_1_badge,
title: settings.info_sections?.info_section_1_title,
body: settings.info_sections?.info_section_1_body,
quote: settings.info_sections?.info_section_1_quote,
quoteAuthor: settings.info_sections?.info_section_1_quote_author,
image: settings.info_sections?.info_section_1_image,
};
// Bölüm 1 — görsel solda, metin sağda
<InfoSection {...info1} imagePosition="left" />
// Bölüm 2 — görsel sağda, metin solda (reverse)
<InfoSection {...info2} imagePosition="right" />