ilk olarak buradan butbox js dosyasını indirip assets klasörümüze yapıştırıyoruz.Projemizde indirdiğimiz dosyası script kodu olarak ekliyoruz.
<script src="<?php echo base_url("assets/bootbox.min.js")?>"></script>
Daha sonra silme butonundaki linkimizi aşağıdaki gibi ayarlıyoruz.<a class="removeBtn" dataURL="<?php echo base_url("welcome/delete_kullanici/$kbilgi->id") ?>">Sil</a>
Silme linkine tıklandığında diyalog çıkması için önceki örneğimizdeki $(document).ready(function() fonksiyonun içine aşağıdaki script codlarımızı ekliyoruz.
$(".removeBtn").click(function () {
var dataURL = $(this).attr("dataURL");
var remove = bootbox.confirm("Silmek istiyor musunuz ?", function(result) {
if (result == true) {
window.location.href = dataURL;
}
});
});
Şimdi projemizi çalıştırıyoruz.
Bustrupt eklememiz gerektiğini söylüyor bizde projemize aşağıdaki kodları ekliyoruz.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>Şimdi projemizi çalıştırıyoruz.Bu sefer jquery bulunamadı diye bi hata verdi ama bizde "jquery.min.js" dosyamız zaten var ve önceki projemizde eklemiştik.Bu sorunu çözmek için
"bootstrap.min.js" script inin üzerine "jquery.min.js" scriptini taşıyoruz.
Projeyi tekrar çalıştırıyoruz.
Bu sefer versiyon hatası verdi .Versiyonumuzu yükseltmemiz gerektiği hatasını verdi.Bu hatayı çözmek için en yüksek versiyonu indirdim ama yine aynı hatayı verdi.Meğer tek sıkıntı kaydettiğimiz jquery.min.js dosyasının adına versiyon numarasını eklememiz gerekiyormuş.Dosya adını "jquery-2.2.3.min.js" olarak değiştirip.scriptimizin adını aşağıdaki gibi değiştiriyoruz.
<script src="<?php echo base_url("assets/jquery-2.2.3.min.js")?>"></script>
Şimdi projemizi çalıştırıyoruz.Bu seferde fancybox hata verdi :)
Bunu çözmek için buradan fancybox dosylarımız indirip içinden "jquery.fancybox.min.css", "jquery.fancybox.js" dosyaları kopyalayıp bizim assets içindeki dosyalarla değiştiriyoruz.
<link rel="stylesheet" href="<?php echo base_url("assets/jquery.fancybox.min.css")?>">
<script src="<?php echo base_url("assets/jquery.fancybox.js")?>"></script>
Şimdi projemizi çalıştırıyoruz.Hatalarımız gitti.
Son olarak "bootstrap.min.js" ,"bootstrap.min.css" dosyalarında projemizde yazan linklerden indirip projemizin assers klasörüne ekleyip adreslerini değiştiriyoruz.welcome_message.php viewimizin son hali aşagıdaki gibi olacaktır.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to CodeIgniter</title>
<link rel="stylesheet" href="<?php echo base_url("assets/bootstrap.min.css")?>">
<script src="<?php echo base_url("assets/jquery-2.2.3.min.js")?>"></script>
<script src="<?php echo base_url("assets/bootstrap.min.js")?>"></script>
<script src="<?php echo base_url("assets/bootbox.min.js")?>"></script>
<link rel="stylesheet" href="<?php echo base_url("assets/jquery.fancybox.min.css")?>">
<script src="<?php echo base_url("assets/jquery.fancybox.js")?>"></script>
<script type="text/javascript">
$(document).ready(function() {
//https://github.com/fancyapps/fancyBox
$(".fancybox").fancybox({
});
$(".removeBtn").click(function () {
var dataURL = $(this).attr("dataURL");
var remove = bootbox.confirm("Silmek istiyor musunuz ?", function(result) {
if (result == true) {
window.location.href = dataURL;
}
});
});
});
</script>
</head>
<body>
<div id="container">
<h1>Merhaba Dünya!</h1>
<form role="form" action="<?php echo base_url("welcome/add_Kullanici") ?>" method="post">
<input type="text" name="kullanici_adi"> <br>
<input type="text" name="kullanici_soyadi"> <br>
<button type="submit" >Gönder</button>
</form>
</div>
<br><br>
<div>
<?php foreach ($kullnaicilar as $kbilgi) {
?>
<li>
<a class="thumbnail fancybox" rel="ligthbox" href="<?php echo base_url("resim") . "/" .$kbilgi->resim_url ?>">
<img
width="80"
src="<?php echo base_url("resim") . "/" .$kbilgi->resim_url ?>">
</a>
<div><?php echo $kbilgi->k_ad." ".$kbilgi->k_soyad ?> <a class="removeBtn" dataURL="<?php echo base_url("welcome/delete_kullanici/$kbilgi->id") ?>">Sil</a>| <a href="<?php echo base_url("welcome/update_kullaniciPage/$kbilgi->id") ?>">Güncelle</a>|
<a href="<?php echo base_url("welcome/newresim/$kbilgi->id") ?>">Resim Ekle</a>
</div>
</li>
<?php } ?>
</div>
</body>
</html>
Şimdi projemizden bir kişi silmek istediğimizde bir uyarı mesajı çıkmakta.
Umarım faydalı olmuştur siz direk projenin son halini buradan indirip kullana bilirsiniz.Ben ekleme sırasında karşılaştığım hataları ve çözümleri size göstermek için yazdım.Bir sonraki dersimizde görüşmek üzere.
Hiç yorum yok:
Yorum Gönder