Ajax ile dinamik listeleme
04 / Mart / 2008
Bazen select ile oluşturulan menülerin, bir başka select alanından gelecek değerlere göre değişmesi gerekebilir. Mesela, kullanıcıya önce ilini seçmesini sorarsınız, ardından seçtiği ile göre ilçesini seçmesini sorarsınız. Böyle bir uygulama, dinamik listeleme gerektirir ve biz bu yazıda böylesine bir dinamik listelemeyi ajax tekniğini kullanarak yapmaya çalışacağız.
Biz bu yazımızda il-ilçe listeleme değilde, arabalar ve modellerini listleyeceğiz. Bu uygulamanın canlı örneğine buradan göz atabilirsiniz. Uygulamanın dosyalarını ise buradan indirebilirsiniz.
Çevrimiçi favicon oluşturma
Bundan bir kaç yazı önce nasıl blogger’daki blogunuza favicon ekleyebileceğinizi tartışmıştık. O yazıda nasıl favicon oluşturacağınzı anlatmamıştık halbuki, elinizde böyle bir resim dosyası olduğunu varsaymıştık. Eğer resim düzenleme programları ile aranız çok iyi değilse siteniz veya blogunuz için favicon oluşturmak biraz zahmetli olabilir.
İşte bu noktada devreye çevrimçi favicon oluşturma aracımız giriyor; favicon.cc.
Javascript ile “display:none / block”
Önceki yazılarımızda javascript-innerHTML kullanarak bir içeriği göster – gizle uygulaması yapmıştık. Ona benzer bir uygulamayı ise innerHTML kullanmadan, javascript ile doküman elemanının sitil özelliğini değiştirerek yapabiliriz.
Bize bu konuda yardıma koşan CSS kodu “display:none; display:block;”. Bunun bir örneğini görmek için buraya tıklayabilirsiniz, dosyaları ise buradan indirebilirsiniz.
Blogger’da “devamını oku” bağlantısı
Eğer bir blogger kullanıcısıysanız ve uzun yazılar yazıyorsanız, yazıların ilk paragraflarını giriş paragrafı olarak değerlendirmek isteyebilirsiniz. Aynen bu blogda olduğu gibi yazının bir kısmından sonra ziyaretçiyi tek bir gönderinin bulunduğu sayfaya yönlendirmek isteyebilirsiniz. Böylece anasayfanız biraz daha düzenli olur ve kullanıcılar blogda hangi konularda yazıların olduğunu daha çabuk farkedebilirler.
Eğer Wordpress kullanıyorsanız “devamını oku” şeklide bir bağlantı ile yazıları bölmek kolaydır, ancak blogger / blogspot bloglarında bu nasıl yapılacak, işte bu yazıda…
Ajax ile Veritabanına Veri Ekleme
Daha önceki yazımızda phpmyadmin kullanmadan nasıl veritabanı ve tablolar oluşturacağımızı tartışmıştık. Şimdi oluşturduğumuz tabloya veri ekleme zamanı ve bunu da ajax ile yapacağız.
Bir önceki yazıyla ilişkili olması için orada oluşturduğumuz cd tablosuna veri ekleyeceğimizi varsayıyoruz. Bu çalışma sonunda yapacağımız örneği bu sayfada görebilirsiniz. Dosyaları ise buradan indirebilirsiniz.
Blogger’da Favicon
Blogger / Blogspot servisini kullanarak açtığınız blog üzerinde pek çok değişiklik yapabilirsiniz. Bunları anlatacağımız yazıların ilkinde Blogger’da nasıl favicon değiştirileceğini paylaşalım.
Bunu gerçekleştirmek aslında sadece tek satırlık kod işi. Elinizde favicon olarak kullanmak istediğiniz bir resim dosyası olduktan sonra gerisi fazla zor değil.
Komutlar ile Veritabanı ve Tablo Oluşturmak
MySQL veri tabanını kullanmak için genelde phpmyadmin programından yararlanırız. Veritabanı oluşturmak ve tablolarımızı düzenlemek için hiç bir kod yazmadan görsel olarak kullanabiliriz. Ancak bazı durumlarda phpmyadmin kullanmamamız gerekebilir, sistemde mevcut değildir yada bir üyenin myadmin’e erişimi yoktur. İşte böyle bir durumda veritabanı ve tabloları phpmyadmin kullanmadan basit komutlar ile oluşturabiliriz.
Bu örnekte basit bir şekilde cdlerimizin kayıtlarını bir veri tabanında tutmak istediğimizi varsayalım. Sonuçta oluşturacağımız tablo şu şekilde gözükecek:
| id | album_adi | sanatci_adi | album_yili |
| veri… | veri… | veri… | veri… |
| veri… | veri… | veri… | veri… |
| veri… | veri… | veri… | veri… |
innerHTML ile Dinamik Olarak İçerik Eklemek
Yarattığımız dokümanlara dinamik olarak içerik eklemek istediğimizde HTML-DOM metodları ile bunu yapmak zaman alıcı olabilir. Klasik HTML-DOM, createElement(), appendChild() metodlarını kullanarak dokümana html etiketleri eklememize izin verir ancak bu yöntem oldukça zahmetlidir. İşte burada imdadımıza innerHTML() metodu yetişir.
innerHTML() metodu ile dokumanlara javascript yardımıyla dinamik olarak kod ekleyebiliriz, hemde istediğimiz yerine. innerHTML() kullanarak yapacağımız basit bir deneme uygulamasına bu sayfadan bakabilirsiniz.
Include ile index.php Sayfaları
Bir site hazırlanmaya başlandığı zaman ilk önce kodlanan sayfadır index.php. Sunucu yazılımı bir dizini göstereceği zaman ilk önce “index” isimli sayfayı arar, index.html yoksa index.php sayfasına bakar, bulduğu anda da çalıştırır. Web sitesine giriş kapısı gibidir, muhtemelen de en uzun kodlar bu sayfa içerisinde yer alır.
Bu kadar uzun ve karmaşık kodların içerisine bakıp aradığımız anında bulmak, kodlar gerçekten uzunsa çok yorucu ve zahmetli olabilir. Ancak bunu aşmak bir o kadar da kolaydır.
Koodla | Blog, Yeni Bir Başlangıç
Bugün 11 Şubat 2008 ve koodla.iblogger.org yayın hayatına başlıyor. Umarım bu blogdan pek çok kişi yararlanma imkanı bulur, pek çok yararlı bilgiye ulaşır.
Öncelikle şunu düşünmek lazım her halde, nereden çıktı böyle bir blog fikri? İnternetteki bloglara baktığımızda genellikle tasarımla alakalı yazılara yer veriliyor (tabi böyle olmayan bloglarda var). Bu blogda da tasarımla ilgili yazılar olacaktır ama esas önceliğimiz koodlar olacak.
Peki hangi konularda yazılar yer alacak bu blogda? Devamını Oku »»
Arama
E-Posta Aboneliği
RSS Aboneliği
En Çok Yorumlanan Yazılar
- Ajax ile dinamik listeleme (22)
- Blogger’da “devamını oku” bağlantısı (21)
- MySQL’de Transaction ve PHP ile kullanımı (16)
- PHP ile sınırsız alt kategori mantığı (16)
- MySQL’de “join” kullanımı (13)
- Kullanıcı dostu url hazırlamak (12)
- PHP’nin (muhtemelen) az bilinen 10 özelliği (12)
- Kullandığınız programlama dili ne kadar popüler? (12)
- .htaccess konuları [Giriş] (11)
- Blogger’da arama kutusu ekleme (10)
Etiketler
Son Yorumlar
- Fatih: Açıkçası sitenizi yeni keşfettim ve gerçekten beğendim. Kaynak ve tutorial ihtiyacı olduğunda yabancı blog...
- beyo: emeğine sağlık, temiz bir anlatım olmuş
- gokhan: güzel bir anlatım yapmışsın.. devamını bekleriz.. kolay gelsin
- web yazılım şirketi: google blog araması ile .net üzerinden hizmet veren web yazılım şirketi ararken tesadüfen bu web...
- Codderol: çok teşekkürler bu çalışma bana çok yardımcı oldu….