Django ile Ramazan İmsakiyesi ve Günlük Dua Uygulaması
Ramazan ayının manevi atmosferini dijital dünyaya taşırken, aynı zamanda modern web geliştirme teknolojilerini öğrenmek Python tabanlı popüler web çatısı Django ve tasarım dünyasının vazgeçilmezi Bootstrap kullanarak adım adım bir "Ramazan İmsakiyesi" uygulaması
1. Proje Hazırlığı ve Senaryo
Uygulamamızın temel amacı; kullanıcıya günlük imsak/iftar vakitlerini göstermek ve her güne özel bir dua/hadis sunmaktır. Django'nun MVT (Model-View-Template) yapısını kullanarak veriyi mantıksal katmandan görsel katmana taşıyacağız.
Gereksinimler:
Python 3.x ve Django yüklü bir sistem (Pardus uyumludur).
Temel HTML ve Bootstrap bilgisi.
2. Mantıksal Katman: Views.py
İlk adımda, kullanıcıya hangi verileri göstereceğimizi belirliyoruz. Bu örnekte verileri bir liste içerisinde sözlük (dictionary) yapısıyla tanımlayacağız.
from django.shortcuts import render
def imsakiye_view(request):
# Veri setimiz: Gün, Tarih, Vakitler ve Günün Mesajı
imsakiye_verileri = [
{'gun': 1, 'tarih': '1 Mart', 'imsak': '05:40', 'iftar': '18:50', 'dua': 'Oruç, sabrın yarısıdır.'},
{'gun': 2, 'tarih': '2 Mart', 'imsak': '05:38', 'iftar': '18:51', 'dua': 'Ramazan berekettir, paylaşmaktır.'},
# Veriler buraya çoğaltılarak eklenebilir...
]
context = {
'imsakiye': imsakiye_verileri,
'baslik': "Hayırlı Ramazanlar",
}
return render(request, 'ramazan/index.html', context)
3. Görsel Tasarım: Template ve Bootstrap
Uygulamanın "vitrin" kısmında, kullanıcıyı etkileyici bir arayüzle karşılamalıyız. Tasarımı zenginleştirmek için Bootstrap bileşenlerinden ve Google Fonts kütüphanesinden yararlanıyoruz.
Estetik Dokunuşlar:
Camii Silüeti: Sayfanın arka planına veya başlık kısmına yarı şeffaf bir camii ikonu ekleyerek tematik bir bütünlük sağlıyoruz.
Renk Paleti: Maneviyatı temsil eden koyu yeşil (
#1a472a) ve altın sarısı (#c5a059) tonlarını tercih ediyoruz.
index.html İçeriği:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="header-section text-center py-5">
<i class="fas fa-moon fa-3x text-warning mb-3"></i> <h1 class="display-4">{{ baslik }}</h1>
<p class="lead">2025 Ramazan Ayı Bilgi Paneli</p>
</div>
<div class="container">
<div class="row">
<div class="col-12 mb-4">
<div class="card border-0 shadow-lg text-white bg-success">
<div class="card-body text-center py-4">
<h5 class="fw-bold"><i class="fas fa-hands-praying"></i> Günün Duası</h5>
<p class="fst-italic fs-5">"{{ imsakiye.0.dua }}"</p>
</div>
</div>
</div>
<div class="col-12">
<table class="table table-hover bg-white rounded shadow-sm">
<thead class="table-dark">
<tr>
<th><i class="fas fa-calendar-day"></i> Gün</th>
<th>Tarih</th>
<th>İmsak</th>
<th>İftar</th>
</tr>
</thead>
<tbody>
{% for satir in imsakiye %}
<tr>
<td class="fw-bold">{{ satir.gun }}. Gün</td>
<td>{{ satir.tarih }}</td>
<td class="text-primary">{{ satir.imsak }}</td>
<td class="text-danger fw-bold">{{ satir.iftar }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
4. Sonuç ve Kazanımlar
Bu proje ile Django'nun sadece teknik bir araç değil, aynı zamanda hayatın içinden ihtiyaçlara çözüm üreten bir platform olduğunu gördük.
Neler Öğrendik?
Dinamik Veri Yönetimi: Python listelerini HTML tablolarına aktarmayı.
Ikonografi: Font Awesome kullanarak görsel zenginlik katmayı.
Responsive Tasarım: Bootstrap ile uygulamanın telefon ve akıllı tahtalarda (ETAP) kusursuz görünmesini sağlamayı.
Not: Bu çalışma, Pardus eğitimi alan öğrenciler için geliştirilmiş bir uygulama örneğidir.
Hazırlayan: Nuri TIRAŞ
Ramazan ayının ruhuna uygun, öğrencilerin hem kod yazıp hem de içerik üretebileceği bir "Ramazan İmsakiyesi ve Günün Ayeti" uygulaması hazırlayalım.
Bu laboratuvar uygulamasında temel amacımız; Python listelerini (veya sözlüklerini) HTML şablonlarına (Templates) aktarmak ve dinamik içerik göstermek.
Proje: Ramazan Rehberim Uygulaması
Bu uygulama şu üç bileşenden oluşacak:
Günün Bilgisi: Her sayfa yenilendiğinde değişen bir ayet veya hadis.
İftar Vakitleri: Şehirlere göre (manuel tanımlanmış) iftar saatleri listesi.
Geri Sayım: Bayram için kalan gün bilgisi.
1. Adım: Mantığı Kuralım (views.py)
views.py dosyanızda Ramazan verilerini hazırlayalım:
from django.shortcuts import render
import random
def ramazan_anasayfa(request):
# Günün içeriği için basit bir liste
ayetler = [
"Ey iman edenler! Allah’a karşı gelmekten sakınmanız için oruç, sizden öncekilere farz kılındığı gibi size de farz kılındı. (Bakara, 183)",
"Ramazan ayı, insanlara yol gösterici, doğrunun ve doğruyu eğriden ayırmanın açık delilleri olarak Kur’an’ın indirildiği aydır. (Bakara, 185)",
"Oruç tutun ki sıhhat bulasınız. (Hadis-i Şerif)"
]
# İftar vakitleri (Örnek veri)
imsakiye = [
{'gun': '1. Gün', 'sehir': 'İstanbul', 'iftar': '19:15', 'sahur': '05:20'},
{'gun': '2. Gün', 'sehir': 'İstanbul', 'iftar': '19:16', 'sahur': '05:18'},
{'gun': '3. Gün', 'sehir': 'İstanbul', 'iftar': '19:17', 'sahur': '05:16'},
]
context = {
'gunun_ayeti': random.choice(ayetler),
'imsakiye_listesi': imsakiye,
'baslik': 'Hayırlı Ramazanlar'
}
return render(request, 'ramazan.html', context)
2. Adım: Adresi Tanımlayalım (urls.py)
Tarayıcıdan ramazan/ yazıldığında bu sayfanın açılmasını sağlayalım:
from django.urls import path
from .views import ramazan_anasayfa
urlpatterns = [
path('ramazan/', ramazan_anasayfa, name='ramazan_rehberi'),
]
3. Adım: Görsel Tasarım (templates/ramazan.html)
Ramazan temasına uygun (yeşil ve altın tonlarında) bir arayüz hazırlayalım:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>{{ baslik }}</title>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f4f0; margin: 0; padding: 20px; }
.container { max-width: 800px; margin: auto; background: white; padding: 30px; border-radius: 15px; border-top: 10px solid #2e7d32; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
h1 { color: #2e7d32; text-align: center; }
.quote-box { background: #e8f5e9; padding: 20px; border-left: 5px solid #1b5e20; font-style: italic; margin-bottom: 30px; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { padding: 12px; border: 1px solid #ddd; text-align: center; }
th { background-color: #2e7d32; color: white; }
tr:nth-child(even) { background-color: #f9f9f9; }
</style>
</head>
<body>
<div class="container">
<h1>🌙 {{ baslik }}</h1>
<div class="quote-box">
<h3>Günün Mesajı</h3>
<p>{{ gunun_ayeti }}</p>
</div>
<h3>Örnek İmsakiye (İstanbul)</h3>
<table>
<thead>
<tr>
<th>Gün</th>
<th>Sahur</th>
<th>İftar</th>
</tr>
</thead>
<tbody>
{% for satir in imsakiye_listesi %}
<tr>
<td>{{ satir.gun }}</td>
<td>{{ satir.sahur }}</td>
<td>{{ satir.iftar }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</body>
</html>
Laboratuvar Soruları ve Geliştirme Önerileri
Bu uygulamayı öğrencilerinize şu sorularla daha derinlemesine anlatabilirsiniz:
Dinamik Veri:
random.choicekullandık. Sayfayı her yenilediğinizde "Günün Mesajı" neden değişiyor?Sözlük Yapısı (Dictionaries): İmsakiye verilerini neden süslü parantez
{}içinde listeledik? HTML tarafında bunlara nasıl ulaştık?Template Tag:
{% for %}döngüsü olmasaydı her tablo satırını tek tek yazmak zorunda kalsaydık ne gibi zorluklar yaşardık?
Yorumlar
Yorum Gönder