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.
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 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; 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 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.
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 developmentBu 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.
Spark ile oluşturmak için aşağıdaki komutu veriyoruz.
php spark make:model KullanicilarKomut ç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 alanlarKullanicilar.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.
php spark make:controller KullaniciEylemlerKomutunu 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'));
}
}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.
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
işlemleri için gereken asgari şeyleri uyguladık diyebiliriz.
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.
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.
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 serveKomutu çalıştırdıktan sonra aşağıdaki adres ile erişebilirsiniz.
http://localhost:8080/listeCodeigniter4 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.
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
