Flutter ve Django ile Client-Server Mimarisi

 Modern yazılım dünyasında en çok tercih edilen Client-Server (İstemci-Sunucu) mimarisini kullanarak basit bir öğrenci yönetim sisteminin nasıl inşa edileceğini anlatır.

1. Mimari Yapı ve Veri Akışı

Profesyonel projelerde verinin izlediği yol şöyledir:

  1. Flutter UI: Kullanıcı düğmeye basar (Örn: Öğrenci Listele).

  2. Repository/Service: Flutter, Django API'sine bir HTTP isteği (GET/POST) gönderir.

  3. Django URL & View: İstek karşılanır, veritabanından veri çekilir.

  4. Serializer: Veritabanı nesneleri (Queryset) JSON formatına dönüştürülür.

  5. Response: JSON veri Flutter'a döner ve arayüz güncellenir.

Önemli Not: django-cors-headers paketini ekledik çünkü Flutter (Client) ve Django (Server) farklı portlarda çalıştığı için CORS hatası almamak gerekir.

Aşağıda, sıfırdan başlayarak hem Django (Backend & Web) hem de Flutter (Mobil Frontend) kısımlarını ayağa kaldırabileceğin tam proje kodlarını ve kurulum adımlarını derledim.

BÖLÜM 1: BACKEND (Django & API & Web Arayüzü) Kurulumu

1. Ortam Kurulumu

Terminalinizi (veya komut satırını) açın ve sırasıyla şu komutları çalıştırın:

Bash:
# 1. Ana klasörü oluştur ve içine gir
mkdir okul_projesi
cd okul_projesi

# 2. Sanal ortam (virtual environment) oluştur ve aktif et
python -m venv venv
# Windows için: venv\Scripts\activate
# Mac/Linux için: source venv/bin/activate

# 3. Gerekli paketleri kur
pip install django djangorestframework django-cors-headers

# 4. Django projesini ve uygulamasını başlat
django-admin startproject backend .
python manage.py startapp ogrenci

2. Dosya İçerikleri

backend/settings.py

İlgili kısımları aşağıdaki gibi güncelleyin (diğer ayarları bozmadan eklemeleri yapın):

Python:
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # Eklenenler
    'rest_framework',
    'corsheaders',
    'ogrenci',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # EN ÜSTE EKLENMELİ
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

# Geliştirme ortamı için tüm kaynaklara izin veriyoruz
CORS_ALLOW_ALL_ORIGINS = True

ogrenci/models.py

Python:
from django.db import models

class Ogrenci(models.Model):
    ad = models.CharField(max_length=100)
    soyad = models.CharField(max_length=100)
    numara = models.IntegerField(unique=True)

    def __str__(self):
        return f"{self.ad} {self.soyad}"

ogrenci/serializers.py (Bu dosyayı kendiniz oluşturun)

Python:
from rest_framework import serializers
from .models import Ogrenci

class OgrenciSerializer(serializers.ModelSerializer):
    class Meta:
        model = Ogrenci
        fields = '__all__'

ogrenci/views.py

Python:
from rest_framework import viewsets
from django.urls import reverse_lazy
from django.views.generic import ListView, CreateView, UpdateView, DeleteView
from .models import Ogrenci
from .serializers import OgrenciSerializer

# 1. API GÖRÜNÜMLERİ (Flutter İçin)
class OgrenciViewSet(viewsets.ModelViewSet):
    queryset = Ogrenci.objects.all()
    serializer_class = OgrenciSerializer

# 2. WEB ARAYÜZÜ GÖRÜNÜMLERİ (Tarayıcı İçin)
class OgrenciListView(ListView):
    model = Ogrenci
    template_name = 'ogrenci/liste.html'
    context_object_name = 'ogrenciler'

class OgrenciCreateView(CreateView):
    model = Ogrenci
    fields = ['ad', 'soyad', 'numara']
    template_name = 'ogrenci/form.html'
    success_url = reverse_lazy('ogrenci_liste')

class OgrenciUpdateView(UpdateView):
    model = Ogrenci
    fields = ['ad', 'soyad', 'numara']
    template_name = 'ogrenci/form.html'
    success_url = reverse_lazy('ogrenci_liste')

class OgrenciDeleteView(DeleteView):
    model = Ogrenci
    template_name = 'ogrenci/sil_onay.html'
    success_url = reverse_lazy('ogrenci_liste')

backend/urls.py

Python:
from django.contrib import admin
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from ogrenci.views import (
    OgrenciViewSet, 
    OgrenciListView, OgrenciCreateView, OgrenciUpdateView, OgrenciDeleteView
)

# API Rotaları
router = DefaultRouter()
router.register(r'ogrenciler', OgrenciViewSet)

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include(router.urls)), # Flutter buraya bağlanacak
    
    # Web Arayüzü Rotaları
    path('', OgrenciListView.as_view(), name='ogrenci_liste'),
    path('ekle/', OgrenciCreateView.as_view(), name='ogrenci_ekle'),
    path('guncelle/<int:pk>/', OgrenciUpdateView.as_view(), name='ogrenci_guncelle'),
    path('sil/<int:pk>/', OgrenciDeleteView.as_view(), name='ogrenci_sil'),
]

3. HTML Şablonları (Templates)

ogrenci klasörünün içine sırasıyla templates ve onun da içine ogrenci klasörü oluşturun. (Yol: ogrenci/templates/ogrenci/) İçine şu 3 dosyayı ekleyin:

liste.html

HTML:
<!DOCTYPE html>
<html>
<head><title>Öğrenci Sistemi</title></head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
    <h2>Öğrenci Listesi</h2>
    <a href="{% url 'ogrenci_ekle' %}" style="padding: 10px; background: green; color: white; text-decoration: none;">+ Yeni Öğrenci Ekle</a>
    <br><br>
    <table border="1" cellpadding="10" cellspacing="0" width="100%">
        <tr><th>Ad</th><th>Soyad</th><th>Numara</th><th>İşlemler</th></tr>
        {% for ogrenci in ogrenciler %}
        <tr>
            <td>{{ ogrenci.ad }}</td><td>{{ ogrenci.soyad }}</td><td>{{ ogrenci.numara }}</td>
            <td>
                <a href="{% url 'ogrenci_guncelle' ogrenci.id %}">Düzenle</a> | 
                <a href="{% url 'ogrenci_sil' ogrenci.id %}" style="color: red;">Sil</a>
            </td>
        </tr>
        {% empty %}
        <tr><td colspan="4">Kayıtlı öğrenci yok.</td></tr>
        {% endfor %}
    </table>
</body>
</html>

form.html

HTML:
<!DOCTYPE html>
<html>
<head><title>Öğrenci Formu</title></head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
    <h2>{% if object %}Öğrenciyi Güncelle{% else %}Yeni Öğrenci Ekle{% endif %}</h2>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" style="padding: 8px 15px; background: blue; color: white;">Kaydet</button>
        <a href="{% url 'ogrenci_liste' %}">İptal</a>
    </form>
</body>
</html>

sil_onay.html

HTML:
<!DOCTYPE html>
<html>
<head><title>Silme Onayı</title></head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
    <h2>Emin misiniz?</h2>
    <p><strong>{{ object.ad }} {{ object.soyad }}</strong> isimli öğrenciyi silmek istediğinize emin misiniz?</p>
    <form method="post">
        {% csrf_token %}
        <button type="submit" style="padding: 8px 15px; background: red; color: white;">Evet, Sil</button>
        <a href="{% url 'ogrenci_liste' %}">İptal</a>
    </form>
</body>
</html>

4. Veritabanını Hazırlama ve Backend'i Çalıştırma

Bash:
python manage.py makemigrations
python manage.py migrate
python manage.py runserver

Sunucu çalıştıktan sonra:

  • Web Arayüzü: http://127.0.0.1:8000/
  • API Uç Noktası (Endpoint): http://127.0.0.1:8000/api/ogrenciler/ adreslerinden projeye erişebilirsiniz.

Kaynak Kod : https://github.com/nuritiras/okul_projesi_api.git

BÖLÜM 2: FRONTEND (Flutter) Kurulumu

Yeni bir terminal açın (Django terminali çalışmaya devam etsin).

1. Kurulum ve Paketler

Bash:
flutter create okul_app
cd okul_app
flutter pub add http

2. Dosya İçerikleri

Tüm Flutter kodlarını lib klasörü altında oluşturacağız.

lib/ogrenci_model.dart

Dart:
class Ogrenci {
  final int? id;
  final String ad;
  final String soyad;
  final int numara;

  Ogrenci({this.id, required this.ad, required this.soyad, required this.numara});

  factory Ogrenci.fromJson(Map<String, dynamic> json) => Ogrenci(
    id: json['id'],
    ad: json['ad'],
    soyad: json['soyad'],
    numara: json['numara'],
  );

  Map<String, dynamic> toJson() => {
    "ad": ad,
    "soyad": soyad,
    "numara": numara,
  };
}

lib/api_service.dart

Dart:
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'ogrenci_model.dart';

class ApiService {
  // DİKKAT: Android Emülatör kullanıyorsanız "10.0.2.2" yazın.
  // Chrome (Web) veya iOS Simulator kullanıyorsanız "127.0.0.1" yazın.
  static const String baseUrl = "http://127.0.0.1:8000/api/ogrenciler/";

  Future<List<Ogrenci>> fetchOgrenciler() async {
    final response = await http.get(Uri.parse(baseUrl));
    if (response.statusCode == 200) {
      List jsonResponse = json.decode(utf8.decode(response.bodyBytes));
      return jsonResponse.map((data) => Ogrenci.fromJson(data)).toList();
    } else {
      throw Exception('Veriler alınamadı');
    }
  }

  Future<bool> ogrenciEkle(Ogrenci ogrenci) async {
    final response = await http.post(
      Uri.parse(baseUrl),
      headers: {"Content-Type": "application/json"},
      body: json.encode(ogrenci.toJson()),
    );
    return response.statusCode == 201;
  }

  Future<bool> ogrenciGuncelle(int id, Ogrenci ogrenci) async {
    final response = await http.put(
      Uri.parse('$baseUrl$id/'),
      headers: {"Content-Type": "application/json"},
      body: json.encode(ogrenci.toJson()),
    );
    return response.statusCode == 200;
  }

  Future<bool> ogrenciSil(int id) async {
    final response = await http.delete(Uri.parse('$baseUrl$id/'));
    return response.statusCode == 204;
  }
}

lib/main.dart

Dart:
import 'package:flutter/material.dart';
import 'api_service.dart';
import 'ogrenci_model.dart';

void main() {
  runApp(const OkulApp());
}

class OkulApp extends StatelessWidget {
  const OkulApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Okul Yönetim Sistemi',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.indigo, useMaterial3: true),
      home: const OgrenciListeEkrani(),
    );
  }
}

class OgrenciListeEkrani extends StatefulWidget {
  const OgrenciListeEkrani({super.key});

  @override
  State<OgrenciListeEkrani> createState() => _OgrenciListeEkraniState();
}

class _OgrenciListeEkraniState extends State<OgrenciListeEkrani> {
  final ApiService apiService = ApiService();
  late Future<List<Ogrenci>> ogrenciListesi;

  @override
  void initState() {
    super.initState();
    _listeyiYenile();
  }

  void _listeyiYenile() {
    setState(() {
      ogrenciListesi = apiService.fetchOgrenciler();
    });
  }

  void _ogrenciFormDialog({Ogrenci? ogrenci}) {
    final isUpdate = ogrenci != null;
    final adController = TextEditingController(text: isUpdate ? ogrenci.ad : '');
    final soyadController = TextEditingController(text: isUpdate ? ogrenci.soyad : '');
    final numaraController = TextEditingController(text: isUpdate ? ogrenci.numara.toString() : '');

    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text(isUpdate ? "Öğrenci Güncelle" : "Yeni Öğrenci Ekle"),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(controller: adController, decoration: const InputDecoration(labelText: "Ad")),
            TextField(controller: soyadController, decoration: const InputDecoration(labelText: "Soyad")),
            TextField(controller: numaraController, decoration: const InputDecoration(labelText: "Okul No"), keyboardType: TextInputType.number),
          ],
        ),
        actions: [
          TextButton(onPressed: () => Navigator.pop(context), child: const Text("İptal")),
          ElevatedButton(
            onPressed: () async {
              if (adController.text.isNotEmpty && numaraController.text.isNotEmpty) {
                final yeniVeri = Ogrenci(
                  id: isUpdate ? ogrenci.id : null,
                  ad: adController.text,
                  soyad: soyadController.text,
                  numara: int.parse(numaraController.text),
                );
                
                bool basarili = isUpdate 
                    ? await apiService.ogrenciGuncelle(ogrenci.id!, yeniVeri)
                    : await apiService.ogrenciEkle(yeniVeri);

                if (mounted) {
                  Navigator.pop(context);
                  if (basarili) {
                    _listeyiYenile();
                    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(isUpdate ? "Güncellendi!" : "Eklendi!")));
                  }
                }
              }
            },
            child: Text(isUpdate ? "Güncelle" : "Kaydet"),
          ),
        ],
      ),
    );
  }

  void _ogrenciSil(int id) async {
    bool basarili = await apiService.ogrenciSil(id);
    if (basarili) {
      _listeyiYenile();
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text("Silindi!"), backgroundColor: Colors.red));
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Öğrenci Yönetimi"),
        actions: [IconButton(icon: const Icon(Icons.refresh), onPressed: _listeyiYenile)],
      ),
      body: FutureBuilder<List<Ogrenci>>(
        future: ogrenciListesi,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) return const Center(child: CircularProgressIndicator());
          if (snapshot.hasError) return Center(child: Text("Hata: ${snapshot.error}"));
          if (!snapshot.hasData || snapshot.data!.isEmpty) return const Center(child: Text("Kayıtlı öğrenci yok."));

          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              final ogrenci = snapshot.data![index];
              return Card(
                margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                child: ListTile(
                  leading: CircleAvatar(child: Text(ogrenci.ad[0].toUpperCase())),
                  title: Text("${ogrenci.ad} ${ogrenci.soyad}"),
                  subtitle: Text("Numara: ${ogrenci.numara}"),
                  trailing: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      IconButton(icon: const Icon(Icons.edit, color: Colors.blue), onPressed: () => _ogrenciFormDialog(ogrenci: ogrenci)),
                      IconButton(
                        icon: const Icon(Icons.delete, color: Colors.red),
                        onPressed: () {
                          showDialog(
                            context: context,
                            builder: (context) => AlertDialog(
                              title: const Text("Emin misiniz?"),
                              actions: [
                                TextButton(onPressed: () => Navigator.pop(context), child: const Text("İptal")),
                                TextButton(onPressed: () { Navigator.pop(context); _ogrenciSil(ogrenci.id!); }, child: const Text("Sil", style: TextStyle(color: Colors.red))),
                              ],
                            ),
                          );
                        },
                      ),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _ogrenciFormDialog(),
        child: const Icon(Icons.add),
      ),
    );
  }
}

Kaynak Kod : https://github.com/nuritiras/okul_app.git

3. Flutter'ı Çalıştırma

Bash:
flutter run

Projeyi Nasıl Test Edeceksiniz?

  1. Web Arayüzü için: Tarayıcınızdan http://127.0.0.1:8000/ adresine gidin. Buradan ekleme/silme yapın.

  2. Flutter Arayüzü için: Cihazınızda/Emülatörünüzde açılan uygulamaya bakın. Yenile (refresh) ikonuna bastığınızda web'den eklediğiniz verilerin geldiğini göreceksiniz. Oradan sildiğinizde web'den de silinecektir. Ortak bir veritabanı (Client-Server mantığı) tıkır tıkır çalışıyor olacaktır.

  • Sağ alt köşedeki (+) butonuna basarak yeni öğrenci ekleyebilirsiniz.
  • Listedeki bir öğrencinin yanındaki Kalem ikonuna basarak bilgilerini güncelleyebilir, Çöp Kutusu ikonuna basarak silebilirsiniz.
  • Sağ üstteki Yenile ikonuna basarak sunucudaki güncel verileri anında çekebilirsiniz.
Ekran Görüntüsü 2026-03-26 10-14-26

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Dart Uygulama Sınavı: Pardus ETAP 23 Kurulum Otomasyonu

Resim
Pardus ETAP 23 kurulum sürecini bir yazılım senaryosuna dönüştürmek, Dart dilinin temel mantığını (değişkenler, döngüler, fonksiyonlar ve OOP) pekiştirmek için çok etkili bir yöntem. Senaryo: Bir okulun BT koordinatörüsünüz. Okuldaki etkileşimli tahtalara Pardus ETAP 23 kurulumunu yönetmek, sistem gereksinimlerini kontrol etmek ve kullanıcı hesaplarını oluşturmak için bir komut satırı aracı geliştiriyorsunuz. Bölüm 1: Değişkenler, Operatörler ve Veri Tipleri Soru 1: Aşağıdaki değişkenleri uygun veri tipleriyle tanımlayın ve ekrana anlamlı bir cümle olarak yazdırın: İşletim sistemi adı (Pardus ETAP) Sürüm numarası (23.4) Kurulum yapılacak tahta sayısı (Örn: 24) Kurulumun başarıyla tamamlanıp tamamlanmadığı bilgisi (bool) Soru 2: Bir akıllı tahtanın toplam disk alanı 240 GB'tır. Pardus ETAP kurulumu 40 GB yer kaplamaktadır. Kalan alanı hesaplayan ve ekrana yazdıran kodu aritmetik operatörler kullanarak yazın. Bölüm 2: Kullanıcı Etkileşimi ve String İşlemleri Soru 3: stdin.readLin...
Devamı

Dart Programlama Dil Uygulama Sınavı Çalışma Soruları

Resim
Bu sınav çalışması, 11. Sınıf Mobil Uygulamalar dersi müfredatına uygun olarak, Pardus 25 işletim sistemi kurulum süreci üzerinden kurgulanmıştır. Sınav; Dart dilindeki tüm Nesne Yönelimli Programlama (OOP) prensiplerini ve temel programlama mantığını kapsamaktadır. Sınav Konu Kapsamı Değişkenler ve Operatörler Null Safety (? ve ?? kullanımı) Sınıf (Class) ve Nesne (Object) Yapısı Kapsülleme (Encapsulation - Private, Getter, Setter) Kalıtım (Inheritance - Extends, Super) Çok Biçimlilik (Polymorphism - Override) Soyutlama (Abstraction - Abstract Class) Static ve Const Kullanımı Kurucu Metotlar (Constructors) [A GRUBU] Uygulama Sınav Soruları Senaryo: "Okul Atölyelerindeki Bilgisayarlara Pardus 25 Kurulumu ve Donanım Takibi" GÖREV 1: Statik Yapılar ve Sabitler (15 Puan) KurulumYonetimi adında bir sınıf oluşturun. İçerisinde isletimSistemi adında, değeri "Pardus 25 - XFCE" olan bir static const değişken tanımlayın. İçerisinde kurulanCihazSayisi adında bir stati...
Devamı

Pardus Üzerinde Flutter Geliştirme Ortamı Kurulumu

Resim
Pardus 25 GNOME sürümü, modern arayüzü ve kararlı Debian tabanıyla yazılım geliştirmek için mükemmel bir ortam sunar. Flutter, Google tarafından geliştirilen ve tek bir kod tabanıyla mobil, web ve masaüstü uygulamaları geliştirmenize olanak sağlayan popüler bir UI (Kullanıcı Arayüzü) kitidir. Bu rehberde, Pardus 25 GNOME masaüstü ortamında sıfırdan sorunsuz bir Flutter kurulumunun nasıl yapılacağını adım adım inceleyeceğiz. Ön Hazırlıklar Kuruluma başlamadan önce sistemimizi güncellemeli ve temel bağımlılıkları yüklemeliyiz. Terminali ( CTRL + ALT + T ) açın ve aşağıdaki komutları uygulayın: Bash: sudo apt update && sudo apt full-upgrade -y sudo apt install -y curl git unzip xz-utils zip libglu1-mesa Adım 1: Flutter SDK'nın İndirilmesi Flutter'ı sisteminize kurmanın en temiz yolu, SDK dosyasını manuel olarak indirip ev dizininize yerleştirmektir. Geliştirme dosyalarımızı düzenli tutmak için bir klasör oluşturalım: Bash: mkdir ~/Development cd ~/Development Flutter SD...
Devamı