CodeIgniter 4, MySQL ile CRUD örneği

Codeigniter4 CRUD Örneği

Codeigniter 4 frameworkü ile CRUD (Create, Read, Update, Delete) yani veritabanında ihtiyaç duyulan temel işlemleri gerçekleştireceğimiz bir örnek olacak. Aynı zamanda Bootstrap 4 ve JQuery Datatables eklentisini örneğimize entegre edeceğiz.

Seviye: Başlangıç-Orta
Kullanılan diller: HTML, PHP (codeigniter framework), JQuery, Bootstrap 4.5

CodeIgniter nedir?

Codeigniter; PHP ile yazılmış MVC temelli, açık kaynak ve hızlı bir şekilde web geliştirme imkanı tanıyan, ufak boyutları ve çalışma hızı ile her zaman ilk tercih ettiğim frameworktür.

Bootstrap nedir?

Bootstrap açık kaynak ve bedava olup, duyarlı (responsive) önce mobil anlayışı ile web geliştirmede kullanılan bir CSS frameworktür. Tipografi, formlar, butonlar, menü ve diğer arayüz elemanlarını barındıran CSS ve JavaScript temelli tasarım şablonları içerir.

DataTables nedir?

DataTables; JQuery için geliştirilmiş bir eklentidir. Çok az bir emekle HTML tabloları üzerinde; filtreleme, sayfalama ve sıralama gibi işlemler yapar.

Bu eğitim de aşağıdaki konulara değinilecektir:

Composer paket yönetimi ile Codeigniter’ ı indirme ve kurulum
Codeigniter hatalarını görünür yapma
Model oluşturma
CRUD işlemlerini yapacağımız View
Codeigniter da Bootstrap 4 uygulaması
Codeigniter da DataTables uygulaması
MySQL veritabanına veri ekleme
MySQL veritabanından veri çekme
MySQL veritabanında veri güncelleme
Veritabanından kullanıcı nesnesi silme

1. Composer paket yönetimi ile Codeigniter’ ı indirme ve kurulum

Composer ile kurulum için aşağıdaki komutu girmeniz yeterlidir.

composer create-project codeigniter4/appstarter

İsterseniz https://codeigniter.com/download adresinden indirip istediğiniz bir dizine çıkarıp işlemlere başlayabilirsiniz.

2. Codeigniter hatalarını görünür yapma

Hataların görünür olması, hangi dil olursa olsun, ilk öğrenim sırasında gerçekten önemli bir unsurdur. PHP de çoğu dil gibi bol bol syntax error dediğimiz, gramer hatalarını üretir. Yani bir noktalama işareti hatası yaparsanız; yerine göre fatal error dediğimiz, programın çalışmasını durduran türden hatalara da neden olabilir. Hataları görünür yapmanın birden çok yolu var burada bir ikisine değinip eğitime devam edelim:

 php spark env development

Bu komutu Codeigniter’ı kurduğunuz dizinde çalıştırırsanız; aşağıdaki gibi bir çıktı verir.

PS H:\wamp64\www\webdoktoru\ci4crud>  php spark env development

CodeIgniter v4.3.6 Command Line Tool - Server Time: xxxxx

Environment is successfully changed to "development".
The ENVIRONMENT constant will be changed in the next script execution.

Codeigniter artık development modda hatalar görünür durumdadır. Yukarıdaki komutu çalıştırdığınızda ana dizin altında .env isimli bir dosya oluşturulur ve dosya içerisine CI_ENVIRONMENT = development verisi eklenir. Komut olmadan da .env isimli bir doya oluşturup ya da hali hazırda yer alan env isimli dosyayı .env olarak yeniden adlandırıp gerekli işlemleri yapabilirsiniz. Aşağıda yer alan veritabanı ayarları kısmını da bu dosya üzerinde yapabilirsiniz.

Diğer bir yöntem ise; app/Config/Boot/development.php ve app/Config/Boot/production.php dosyaları içerisinde yer alan display_errors değerini 0 yerine 1 yapmaktır.

ini_set('display_errors', '1');

Veri tabanı ayarları

Ayrıntılara girmeden veritabanı oluşturup gerekli ayarları bildiğinizi varsayıyorum. O yüzden kabaca hangi ayarları yapacağınıze değinelim. ci4crud isimli bir veritabanı oluşturuyoruz. Kullanıcı adı ve şifremiz örneğimizde harun olan bir veritabanı ile bağlantı kuruyoruz.

Aşağıda veritabanımızda oluşturulması gereken kullanicilar isimli tabloyu bulabilirsiniz.

CREATE TABLE IF NOT EXISTS `kullanicilar` (
  `id` int NOT NULL AUTO_INCREMENT,
  `isim` varchar(100) COLLATE utf8mb4_turkish_ci NOT NULL,
  `eposta` varchar(60) COLLATE utf8mb4_turkish_ci NOT NULL,
  `notlar` text COLLATE utf8mb4_turkish_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_turkish_ci;
COMMIT;

Codeigniterı kurduğumuz dizin içerisinde yer alan app/Config/Database.php içerisinde yer alan aşağıdaki alanlara bilgilerimizi giriyoruz.

    /**
     * The default database connection.
     */
    public array $default = [
        'DSN'      => '',
        'hostname' => 'localhost',
        'username' => 'harun',
        'password' => 'harun',
        'database' => 'ci4crud',
        'DBDriver' => 'MySQLi',
        'DBPrefix' => '',
        'pConnect' => false,
        'DBDebug'  => true,
        'charset'  => 'utf8mb4',
        'DBCollat' => 'utf8mb4_turkish_ci',
        'swapPre'  => '',
        'encrypt'  => false,
        'compress' => false,
        'strictOn' => false,
        'failover' => [],
        'port'     => 3306,
    ];

Yukarda hata raporlama kısmında değindiğimiz gibi; bu işlemleri, kurulum dizininde yer alan .env dosyası üzerinde de gerçekleştirebilirsiniz.

3. Model Oluşturma

Spark ile oluşturmak için aşağıdaki komutu veriyoruz.

php spark make:model Kullanicilar

Komut çalıştırıldığında app/Models/ dizini altında Kullanicilar.php isimli dosya ilk içerikle birlikte oluşturulur. Şu an 4.3.6 sürümünde bu modelimiz üzerinde yapmamız gereken tek işlem aşağıdakileri

  protected $table            = 'kullanicilar';
  protected $primaryKey       = 'id';
  protected $allowedFields    = ['isim','eposta','notlar']; //veritabanında kullanmak istediğimiz alanlar

Kullanicilar.php içeriğinin tamamı:

<?php

namespace App\Models;

use CodeIgniter\Model;

class Kullanicilar extends Model
{
    protected $DBGroup          = 'default';
    protected $table            = 'kullanicilar';
    protected $primaryKey       = 'id';
    protected $useAutoIncrement = true;
    protected $returnType       = 'array';
    protected $useSoftDeletes   = false;
    protected $protectFields    = true;
    protected $allowedFields    = ['isim','eposta','notlar'];

    // Dates
    protected $useTimestamps = false;
    protected $dateFormat    = 'datetime';
    protected $createdField  = 'created_at';
    protected $updatedField  = 'updated_at';
    protected $deletedField  = 'deleted_at';

    // Validation
    protected $validationRules      = [];
    protected $validationMessages   = [];
    protected $skipValidation       = false;
    protected $cleanValidationRules = true;

    // Callbacks
    protected $allowCallbacks = true;
    protected $beforeInsert   = [];
    protected $afterInsert    = [];
    protected $beforeUpdate   = [];
    protected $afterUpdate    = [];
    protected $beforeFind     = [];
    protected $afterFind      = [];
    protected $beforeDelete   = [];
    protected $afterDelete    = [];
}

Codeigniter modelleri ile ilgili daha fazla bilgiyi https://codeigniter4.github.io/userguide/models/model.html#configuring-your-model adresinde bulabilirsiniz.

4. CRUD İşlemleri İçin Kontroller Oluşturma

php spark make:controller KullaniciEylemler

Komutunu verdiğimizde kontroller için kullanacağımız şablon dosyamız app/Controllers/KullaniciEylemler.php yolunda oluşturulur.

KullaniciEylemler.php dosyamız:

<?php
namespace App\Controllers;
use App\Models\Kullanicilar;
use CodeIgniter\Controller;


class KullaniciEylemler extends BaseController
{
    public function index()
    {
        $kullanicilar = new Kullanicilar();
        $data['users'] = $kullanicilar->orderBy('id', 'DESC')->findAll();
        return view('kullanici_goruntule', $data);

    }
     // kullanıcı ekle
     public function ekle(){
        return view('kullanici_ekle');
    }
 
    // veri ekle
    public function kaydet() {
        $kullanicilar = new Kullanicilar();
        $data = [
            'isim' => $this->request->getVar('isim'),
            'eposta'  => $this->request->getVar('eposta'),
            'notlar'  => $this->request->getVar('notlar'),
        ];
        $kullanicilar->insert($data);
        return $this->response->redirect(site_url('/liste'));
    }
    // tek kişi göster
    public function duzenle($id = null){
        $kullanicilar = new Kullanicilar();
        $data['user_obj'] = $kullanicilar->where('id', $id)->first();
        return view('kullanici_duzenle', $data);
    }
    // kullanıcı verisi güncelle
    public function guncelle(){
        $kullanicilar = new Kullanicilar();
        $id = $this->request->getVar('id');
        $data = [
            'isim' => $this->request->getVar('isim'),
            'eposta'  => $this->request->getVar('eposta'),
            'notlar'  => $this->request->getVar('notlar'),
        ];
        $kullanicilar->update($id, $data);
        return $this->response->redirect(site_url('/liste'));
    }
 
    // kullanıcı sil
    public function sil($id = null){
        $kullanicilar = new Kullanicilar();
        $data['user'] = $kullanicilar->where('id', $id)->delete($id);
        return $this->response->redirect(site_url('/liste'));
    }    
}

5. Routes (Rotalar) Oluşturma

Modelimizi ve Kontrollerimizi oluşturduk sırada rotaları oluşturma var.

app/Config/Routes.php dosyamızı açıyoruz ve

<?php

namespace Config;
$routes = Services::routes();


$routes->setDefaultNamespace('App\Controllers');

$routes->get('liste', 'KullaniciEylemler::index');  //url/liste   KullaniciEylemler kontrolümüzün varsayılan metodu tüm içeriği listeler
$routes->get('ekle', 'KullaniciEylemler::ekle'); //url/ekle   kullanıcı ekleme adresi
$routes->post('kaydet', 'KullaniciEylemler::kaydet');  //kaydetme işlemi
$routes->get('duzenle/(:num)', 'KullaniciEylemler::duzenle/$1');  //url/duzenle/1 -> id = 1 numaralı kaydı düzenle
$routes->post('guncelle', 'KullaniciEylemler::guncelle');
$routes->get('sil/(:num)', 'KullaniciEylemler::sil/$1');

//varsayılan
$routes->get('/', 'Home::index');

if (is_file(APPPATH . 'Config/' . ENVIRONMENT . '/Routes.php')) {
    require APPPATH . 'Config/' . ENVIRONMENT . '/Routes.php';
}

İsterseniz yukarıdaki içeği hazırdaki içerikle değiştirebilir ya da gerekli değişiklikleri tek tek yapabilirsiniz. İlk bir kaç rotanın açıklamasını örnekte görebilirsiniz. Rotanın yaptığı iş; istek yapılan adresi doğru yere yönlendirmek diyebiliriz. http://adresimiz/index.php/liste adresine gittiğinizde vetabanındaki tüm kayıtlar listelenir. Yukarıda yer alan kodlarda gerekli açıklamalar yapılmıştır.

6. Vetabanına veri ekleme

app/Views/ dizini altında kullanici_ekle.php isimli bir dosya oluşturuyoruz.

<!DOCTYPE html>
<html  lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Codeigniter 4 Kullanıcı Ekle</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <style>
    .container {
      max-width: 500px;
    }
    .error {
      display: block;
      padding-top: 5px;
      font-size: 14px;
      color: red;
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <form method="post" id="add_create" name="add_create" 
    action="<?= site_url('/kaydet') ?>">
      <div class="form-group">
        <label>İsim</label>
        <input type="text" name="isim" class="form-control">
      </div>
      <div class="form-group">
        <label>E-posta</label>
        <input type="text" name="eposta" class="form-control">
      </div>
      <div class="form-group">
        <label>Notlar</label>
        <input type="text" name="notlar" class="form-control">
      </div>
      <div class="form-group">
        <input type="hidden" name="<?= csrf_token(); ?>" value="<?= csrf_hash(); ?>">
        <button type="submit" class="btn btn-primary btn-block">Ekle</button>
      </div>
    </form>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>
  <script>
    if ($("#add_create").length > 0) {
      $("#add_create").validate({
        rules: {
          isim: {
            required: true,
          },
          eposta: {
            required: true,
            maxlength: 60,
            email: true,
          },
        },
        messages: {
          isim: {
            required: "İsim gereklidir.",
          },
          eposta: {
            required: "E-posta gereklidir.",
            eposta: "Geçerli bir e-posta adresi girin",
            maxlength: "E-posta adresi en fazla 60 karakter olmalı",
          },
        },
      })
    }
  </script>
</body>
</html>

Yukarıdaki görünüm yani view içeriğinde

Sayfamıza bootstrap entegre ettik
JQuery ile kullanıcı tarafında form doğrulama işlemlerini yaptık
Veritabanına veri kaydetmek için gereken formu oluşturduk.

işlemleri için gereken asgari şeyleri uyguladık diyebiliriz.

7. Veri Güncelleme ve Düzenleme

app/Views/ dizini altında kullanici_duzenle.php isimli bir dosya oluşturuyoruz.

<!DOCTYPE html>
<html>
<head>
  <title>Codeigniter 4 CRUD - Kullanıcı düzenle</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <style>
    .container {
      max-width: 500px;
    }
    .error {
      display: block;
      padding-top: 5px;
      font-size: 14px;
      color: red;
    }
  </style>
</head>
<body>
  <div class="container mt-5">
  
    <form method="post" id="update_user" name="update_user" 
    action="<?= site_url('/guncelle') ?>">
      <input type="hidden" name="id" id="id" value="<?php echo $user_obj['id']; ?>">
      <div class="form-group">
        <label>İsim</label>
        <input type="text" name="isim" class="form-control" value="<?php echo esc($user_obj['isim']); ?>">
      </div>
      <div class="form-group">
        <label>Eposta</label>
        <input type="email" name="eposta" class="form-control" value="<?php echo esc($user_obj['eposta']); ?>">
      </div>
      <div class="form-group">
        <label>Notlar</label>
        <input type="text" name="notlar" class="form-control" value="<?php echo esc($user_obj['notlar']); ?>">
      </div>
      <div class="form-group">
      <input type="hidden" name="<?= csrf_token(); ?>" value="<?= csrf_hash(); ?>">

        <button type="submit" class="btn btn-danger btn-block">Kaydet</button>
      </div>
    </form>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>
  <script>
    if ($("#update_user").length > 0) {
      $("#update_user").validate({
        rules: {
          isim: {
            required: true,
          },
          eposta: {
            required: true,
            maxlength: 60,
            email: true,
          },
        },
        messages: {
          isim: {
            required: "İsim gereklidir.",
          },
          eposta: {
            required: "Eposta gereklidir.",
            email: "Geçerli bir eposta adresi girin.",
            maxlength: "Azami 60 karakter girin.",
          },
        },
      })
    }
  </script>
</body>
</html>

Veritabanına giren özellikle tırnak gibi özel karakterlerin tasarımı bozmasını istemeyiz o yüzden gelen verileri esc() fonksiyonu ile alıyoruz. Veritabanına giren verilerimiz gerekli işlemlere otomatik olarak giriyor zaten.

8. Veritabanından kayıt silme

Veritabanında yer alan bir kaydı silmek için görselde görünen Sil butonuna tıklamanız yeterli olacaktır. Gerekli rotayı daha önce ayarlamıştık, rota aracılığı ile gelen sil/SAYI get verisi KullaniciEylemler.php isimli kontrolümüzdeki sil methodunu çalıştıracak ve söz konusu SAYI’ ya karşılık gelen veritabanı kaydı silinecektir. Tabii ki örneğimizde ekstra bir kontrol yok, gerçek dünya da böyle bir işlemi yapmayız, öncesinde kullanıcı giriş yapmış mı yaptıysa yetkisi var mı gibi kontrolleri de gerçekleştirmemiz gerekir. İşlemin tıklar tıklamaz kaydı silmesini önlemek ve kullanıcıya bir nefes aralık bırakmak için:

   $('.silonay').click(function() {
        return window.confirm("Emin misiniz?");
   });

Söz konusu buton için yukarıdaki kodu kullanici_goruntule.php içerisinde görebilirsiniz. Sil tuşuna tıkladığımızda;

Emin misiniz? diye bir ikaz kutusu gelecek ve Tamam dersek kayıt silinecektir.

9. Uygulamayı Çalıştırma

Uygulamamızı hali hazırda bir web sunucu içerisinde çalıştırıyorsanız, adresin sonuna /liste yazarsanız liste görünümünü görebilirsiniz. Ya da aşağıdaki komutla açtığımız adresin sonuna /liste koyarak test edebilirsiniz.

php spark serve

Komutu çalıştırdıktan sonra aşağıdaki adres ile erişebilirsiniz.

http://localhost:8080/liste

Açıklamalar

Codeigniter4 CRUD işlemi için Bootstrap ve jQuery entegrasyonu ile yaptığımız örneğimizin kodlarına aşağıdaki link ile erişebilirsiniz. Umarım konuya yeni başlayanlar için faydalı olmuştur.

Codeigniter üzerine inşa edilmiş PerfexCRM ile ilgili hazırlamış olduğumuz makaleye de göz atabilirsiniz.

Yaşadığımız çağda; olabildiğince hızlı, güvenli ve ihtiyaçlara karşılık verecek şekilde kodlama yapmak daha da önemli bir hale geldi. Önümüzdeki günlerde spark komutlarından daha fazla verim almaya ya da kendi komutlarımızı yazarak daha hızlı üretim imkanı sağlayacak yöntemlere değineceğiz. Konu ilginizi çekmişse paylaşarak ve bültenimize abone olarak destek verebilirsiniz.

Codeigniter4 CRUD örneği kodları

Web Doktoru

Matematikçi, Adli Bilişim Uzmanı, Bil. Yük. Müh. Full Stack Developer