İçindekilerGirişİndex
YukarıİlkÖncekiSonrakiSon
Geriİleri
Yazdır
Zafer Teker
tekzaf@yahoo.com

Bir Şarkı Sözü XML'i ve Bu XML'in HTML'e Çevrilmesi

Giriş

Bu örnekte şarkı sözlerini saklamak için bir XML dili yaratıyoruz. Örnek olarak bir şarkı sözünü yazıyoruz. Bu şarkı sözünü XSL ile HTML'e çeviriyoruz.

Aşağıda "Nedir Bu Başımda Bu Sevda" adlı şarkı sözünün XML'i bulunmaktadır.

Göster Gizle Kopar Satır Gizle Satır Göster
  1 <?xml version="1.0" encoding="ISO-8859-9">
  2 <swl>
  3 	<song id="1">
  4 		<name>Nedir Bu Başımda Bu Sevda</name>
  5 		<composer>Neşet Ertaş</composer>
  6 		<word>Neşet Ertaş</word>
  7 		<songword>
  8 			<portion>
  9 				<line>nedir bu başımda bu sevda nedir</line>
 10 				<line>yandım ataşına yar ben kaç senedir</line>
 11 				<line>sevdiğim derdime derman sendedir</line>
 12 				<line>derdimin dermanını ver de öyle git</line>
 13 			</portion>	
 14 			<portion>
 15 				<line>gönül mecnun olmuş çölde geziyor</line>
 16 				<line>halim kalem olmuş kara yazıyor</line>
 17 				<line>gün geçtikçe yarelerim azıyor</line>
 18 				<line>mevlayı seversen sar da öyle git</line>
 19 			</portion>
 20 			<portion>	
 21 				<line>bülbül gibi ahım kaldı güllerde</line>
 22 				<line>baykuş gibi öttüm viran yerlerde</line>
 23 				<line>bir garibim kaldım gurbet ellerde</line>
 24 				<line>perişan halimi sorda öyle git</line>
 25 	 		</portion>	
 26 		</songword>
 27 	</song>
 28 </swl>

Bu dökümanın root elementi swl(song word language)'dir. Görüldüğü gibi song element'inin içinde şarkının adı(name), Bestecisi (composer) ve Söz Yazarı (word) bilgisi verilmiştir. songword element'i ile şarkının sözlerini veriyoruz. portion kıta line ile satırlar verilmektedir. XML'imizi yazdıktan sonra bu XML'i HTML'e çeviren bir XSL yazmamız gereklidir. Aşağıda bu XSL'in kodu görülmektedir.

Göster Gizle Kopar Satır Gizle Satır Göster
  1 <?xml version="1.0"> 
  2 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  3 	
  4 	<xsl:template match="/">
  5 		<html>
  6 		<body>
  7 		<center>
  8 			<h3><xsl:value-of select="/swl/song/name"/></h3>
  9 			<table>
 10 				<xsl:for-each select="/swl/song/songword/portion">
 11 					<tr><td></td></tr><tr><td></td></tr>
 12 					<xsl:for-each select="line">
 13 						<xsl:call-template name="tablecell"/>
 14 					</xsl:for-each>
 15 				</xsl:for-each>
 16 				<xsl:call-template name="fieldtablecell">
 17 					<xsl:with-param name="field">Soz</xsl:with-param>
 18 					<xsl:with-param name="value"><xsl:value-of select="/swl/song/word"/></xsl:with-param>
 19 				</xsl:call-template>
 20 				<xsl:call-template name="fieldtablecell">
 21 					<xsl:with-param name="field">Beste</xsl:with-param>
 22 					<xsl:with-param name="value"><xsl:value-of select="/swl/song/composer"/></xsl:with-param>
 23 				</xsl:call-template>
 24 			</table>
 25 		</center>
 26 		</body>
 27 		</html>
 28 	</xsl:template>
 29 	<xsl:template name="tablecell">
 30 		<tr><td><xsl:value-of select="."/></td></tr> 
 31 	</xsl:template>
 32 	<xsl:template name="fieldtablecell">
 33 		<xsl:with-param name="field"><xsl:value-of select="field"/></xsl:with-param>
 34 		<xsl:with-param name="value"><xsl:value-of select="value"/></xsl:with-param>
 35 		<tr><td><b><xsl:value-of select="$field"/> : <xsl:value-of select="$value"/></b></td></tr> 
 36 	</xsl:template>
 37 </xsl:stylesheet>

Üç tane tamplate bulunmaktadır. İlk tamplate match ile /(root) element'ini yakalamaktadır. Bizim XML elementimizde root element'i swg'dir. Diğer iki tamplate ise name ile yaratılmış tamplate'lerdir ve istediğimiz zaman çağrılmaktadır. root element'ini yakaladıktan sonra HTML kodlarını yazmaya başlıyoruz. Şarkının adı'nı h3 başlığı içine alıyoruz. XSL'de bir element'in değeri <xsl:value-of select="elementadı"/> ile alınmaktadır. XSL'de görüldüğü gibi name lement'inin değeri h3 element'i içine konulmuştur. name element'ine erişmek için /swl/song/name şeklinde bir yol verilmiştir. Bu swl'in içinde song element'in içinde name element'i anlamına gelmektedir. Bir element'e veya attribute'ye ulaşmak için XPATH denilen adresleme sistemi kullanılır.

Şarkının adını başlığa koyduktan sonra şarkı sözlerini almamız gerekiyor. Fakat birden fazla portion ve line olduğu için döngü açmamız gerekli. Bunun için XSL'de xsl:for-each element'i kullanılır. Biz /swl/song/songword/portion ile partion için hem de line ile line için döngü açıyoruz.Dikkat edilirse poriton'lara /swl/song/songword/portion şeklinde eriştikten sonra line'lara erişmek için sadece line ismini kullandık. Çünkü portion seçilmiş olduğu için /swl/song/songword/portion ifadesi tekrar yazmamıza gerek yok. portion element'i seçilmemiş olsaydı line element'lerini seçmek için /swl/song/songword/portion/line kullanacaktık. Her portion'da araya iki satır koyuyoruz. Böylece satırlar arasında biraz boşluk oluyor. Bir satır seçildiğinde tablecell adlı tamplate çağrılmaktadır. Bu tamplate her satır için bir satır ve hücre koymaktadır. Satırın değeri bu hücreye yazılır. Böylece her yeni line element'i için yeni tr element'i yaratılmış olur. Tüm portion ve line'lar bittikten sonra, tablonun en altına besteci ve söz yazarı adını koyuyoruz. fieldtablecell tamplate'ti parametre olrak aldığı field ve value değerlerini uygun bir şekilde bir tablo satırı yaratmaktadır. Bu tamplate hem besteci-isim hem de söz yazarı-isim çiftleri için kullanılmıştır.

Sonuç olarak üretilen HTML aşağıdaki gibidir.

Göster Gizle Kopar Satır Gizle Satır Göster
  1 <html>
  2 <body>
  3 <center> Nedir Bu Başımda Bu Sevda <table>
  4 <tr>
  5 <td></td>
  6 </tr>
  7 <tr>
  8 <td></td>
  9 </tr>
 10 <tr>
 11 <td>nedir bu başımda bu sevda nedir </td>
 12 </tr>
 13 <tr>
 14 <td>yandım ataşına yar ben ka&ccedil; senedir</td>
 15 </tr>
 16 <tr>
 17 <td>sevdiğim derdime derman sendedir</td>
 18 </tr>
 19 <tr>
 20 <td>derdimin dermanını ver de &ouml;yle git</td>
 21 </tr>
 22 <tr>
 23 <td></td>
 24 </tr>
 25 <tr>
 26 <td></td>
 27 </tr>
 28 <tr>
 29 <td>g&ouml;n&uuml;l mecnun olmuş &ccedil;&ouml;lde geziyor</td>
 30 </tr>
 31 <tr>
 32 <td>halim kalem olmuş kara yazıyor</td>
 33 </tr>
 34 <tr>
 35 <td>g&uuml;n ge&ccedil;tik&ccedil;e yarelerim azıyor</td>
 36 </tr>
 37 <tr>
 38 <td>mevlayı seversen sar da &ouml;yle git</td>
 39 </tr>
 40 <tr>
 41 <td></td>
 42 </tr>
 43 <tr>
 44 <td></td>
 45 </tr>
 46 <tr>
 47 <td>b&uuml;lb&uuml;l gibi ahım kaldı g&uuml;llerde</td>
 48 </tr>
 49 <tr>
 50 <td>baykuş gibi &ouml;tt&uuml;m viran yerlerde</td>
 51 </tr>
 52 <tr>
 53 <td>bir garibim kaldım gurbet ellerde</td>
 54 </tr>
 55 <tr>
 56 <td>perişan halimi sorda &ouml;yle git</td>
 57 </tr>
 58 <tr>
 59 <td></td>
 60 </tr>
 61 <tr>
 62 <td>Soz :  Neşet Ertaş </td>
 63 </tr>
 64 <tr>
 65 <td>Beste :  Neşet Ertaş </td>
 66 </tr>
 67 </table>
 68 </center>
 69 </body>
 70 </html>

Görüntü ise şöyle olur:

Dosya Listesi

İçindekilerGirişİndex
YukarıİlkÖncekiSonrakiSon
Geriİleri
Yazdır