Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Tayfun Erbilen tarafından hazırlanan bir eğitim içeriğidir. Prototurk.com adresi için hazırlanmış olan bu derste, PHP ve AJAX kullanarak "daha fazlasını göster" özelliği oluşturma süreci adım adım gösterilmektedir.
- Videoda, veritabanından ders listesi çekme, CSS ile tasarım yapma, jQuery kütüphanesini kullanma ve AJAX ile veri yükleme işlemleri detaylı olarak anlatılmaktadır. Öncelikle HTML ve PHP ile temel yapı oluşturulur, ardından CSS ile tasarım yapılır ve son olarak jQuery ve AJAX kullanılarak "daha fazlasını göster" özelliği eklenir. Video sonunda, kaynak dosyaların da paylaşılacağı belirtilmektedir.
- PHP ve Veritabanı Bağlantısı
- Tayfun Erbilen, prototurk.com adresi için "Daha fazlasını göster" uygulaması yapacağını belirtiyor.
- Index.php dosyası oluşturulup Notepad++ ile açılıyor ve standart HTML tagları yazılıyor.
- Veritabanına bağlantı için PHP kodları yazılıyor ve "prototurk" veritabanına bağlanılıyor.
- 01:55HTML ve CSS Düzenlemeleri
- İçerik adlı bir div oluşturuluyor ve stil.css dosyası ile CSS düzenlemeleri yapılıyor.
- Body'den gereksiz boşluklar kaldırılıyor, içerik div'inin genişliği 700 piksel, margin 20 piksel auto olarak ayarlanıyor.
- UL ve LI taglarının padding ve margin değerleri sıfırlanıyor, list-style-type none olarak belirleniyor.
- 02:50Verileri Çekme ve Gösterme
- MySQL sorgusu ile "dersler" tablosundan veriler çekilip liste formatında gösteriliyor.
- Türkçe karakter hatası için "mysql_query('SET CHARACTER SET utf8');" komutu kullanılıyor.
- UL içindeki LI'lerin padding 5 piksel, border-bottom 1 piksel solid olarak düzenleniyor.
- 04:27"Daha fazlasını göster" Butonu
- "Daha fazlasını göster" butonu oluşturuluyor ve CSS ile biçimlendiriliyor.
- Google'dan transparan bir AJAX loader GIF'i bulunup sayfaya ekleniyor.
- jQuery kütüphanesi sayfaya dahil ediliyor ve prototurk.js dosyası oluşturuluyor.
- 06:23AJAX ile Veri Yükleme
- "Daha fazlasını göster" butonuna tıklandığında son dersin ID'si alınıyor.
- AJAX metodunu kullanarak bu ID "ajax.php" dosyasına gönderiliyor.
- Ajax.php dosyasında gelen ID'den küçük diğer 10 ders listeleniyor.
- 09:31Yüklenme Animasyonu ve Sonuç
- Yükleme işlemi için sleep ile 2 saniye bekleme ekleniyor ve yükleniyor animasyonu gösteriliyor.
- Veriler yüklendikten sonra animasyon gizleniyor ve yeni veriler ekrana yazdırılıyor.
- Tüm veriler yüklendikten sonra "Daha fazlası kalmadı" mesajı gösteriliyor ve buton siliniyor.