Buradasın
XML Eğitim Seti: AJAX ile XML Verilerini Listeleme ve CSS ile Tablo Şekillendirme
youtube.com/watch?v=i4QvApLJNTQYapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan XML eğitim serisinin 16. dersidir.
- Videoda, AJAX kullanarak XML verilerinin nasıl listeleneceği adım adım gösterilmektedir. İlk bölümde, buton tıklandığında XML HTTP request nesnesi oluşturma, XML verilerini çekme ve döngülerle verileri işleme işlemleri anlatılırken, ikinci bölümde XML tablolarına CSS uygulaması gösterilmektedir.
- Eğitim, XML DOM özellikleri kullanılarak kitap adı, yazar ve fiyat bilgilerinin nasıl alınacağını, tablo başlıklarına (th) ve normal sütunlara (td) çerçeve, arka plan rengi, yazı rengi ve padding gibi CSS özellikleri ekleyerek tabloyu daha estetik hale getirmeyi içermektedir. Video, XML listeleme işleminin nasıl yapılacağını gösteren bir sonraki derste devam edeceğini belirterek sona ermektedir.
- 00:01XML Verilerini AJAX ile Listeleme
- XML eğitim setinin onaltıncı dersinde AJAX ile XML verilerini nasıl listeleyeceğimiz gösterilecek.
- Bir buton atandıktan sonra, butona tıklandığında "xmlLoad" adlı JavaScript fonksiyonu çalışacak ve sonuçlar bir tablonun içerisine yazdırılacak.
- Butona tıklandığında "xmlLoad" fonksiyonu çalışacak ve sonuçlar "table id='result'" id'li tabloya yazdırılacak.
- 01:13XML HTTP Request Oluşturma
- Sunucuda hazır olan XML verilerini almak için "xmlList" adlı bir JavaScript fonksiyonu oluşturulacak.
- "xmlList" fonksiyonuna "xmlRequest" nesnesi gönderilecek ve "get" metodu kullanılarak "books.xml" dosyasından veriler çekilecek.
- XML request'i alındıktan sonra, cevap hazır olduğunda "xmlList" fonksiyonuna yönlendirilecek.
- 02:24XML Verilerini İşleme
- "xmlDocument" ve "xmlTable" adında değişkenler tanımlanacak.
- "xmlDocument" değişkenine "xmlAjaxResponse.responseData" ile XML verisi atanacak.
- "xmlTable" değişkenine HTML kodları yazılacak ve "result" id'li tabloya eklenecek.
- 03:43XML Verilerini Tabloya Aktarma
- "x" değişkenine "xmlDocument.getElementsByTagName('book')" ile tüm "book" etiketleri atanacak.
- "i" döngüsü ile "x" değişkenindeki "book" etiketleri tek tek işlenecek.
- Her "book" etiketinden "title", "author" ve "price" değerleri "childNodes" ve "nodeValue" özellikleri kullanılarak alınacak.
- 11:44Sonuçların Gösterilmesi
- "result" id'li tabloya "xmlTable" değişkeni eklenecek.
- Tabloya CSS eklenerek şekillendirilebilir.
- Bu yöntemle XML verileri başarılı bir şekilde tabloya aktarılacak.
- 12:23XML Tabloya CSS Uygulama
- Tablo ve başlık sütunlarına (th) CSS uygulanıyor.
- Tabloya çerçeve eklenerek görünümü geliştiriliyor.
- Başlık sütunlarına koyu kırmızı arka plan ve beyaz yazı rengi veriliyor.
- 13:05Tablo Düzenleme ve Gelecek Ders
- Hem başlık sütunlarına hem normal sütunlara padding (iç dolgu) verilerek birbirlerinden ayrılmaları sağlanıyor.
- XML liste tıklandığında daha düzgün bir tablo görünümü elde ediliyor.
- CSS'in XML tablolarda nasıl kullanılacağı gösteriliyor ve önümüzdeki derste AJAX ile XML verilerinin listelenmesi konusu ele alınacak.