خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

نحوه استفاده از XSLT برای نمایش داده های XML در یک صفحه وب HTML

ارشیا یوسفی ادیب ۹ بهمن, ۱۴۰۲ 3 min read

برای مشاهده داده های XML به عنوان بخشی از یک صفحه وب، می توانید از XSLT استفاده کنید. مرورگرها به تنهایی این قابلیت را ارائه نمی دهند.

XML زبانی است که برای ساختار، ذخیره و تبادل داده ها استفاده می شود. XSLT زبان دیگری است که به شما امکان می دهد داده های XML خود را به فرمت های دیگری مانند HTML تبدیل کنید.

می توانید از XSLT برای نمایش داده های XML در یک صفحه وب HTML استفاده کنید. استفاده از XML و XSLT برای نمایش داده های شما می تواند مفید باشد، زیرا به شما امکان می دهد داده ها را به گونه ای ساختار دهید که برای نیازهای خاص شما منطقی باشد.

چگونه داده های نمونه را به یک فایل XML اضافه کنیم

برای نمایش داده های XML در یک صفحه وب، ابتدا باید فایل XML را ایجاد کرده و داده ها را به آن اضافه کنید.

  1. یک فایل جدید به نام data.xml ایجاد کنید.
  2. در داخل فایل XML، کدگذاری و نسخه XML را اعلام کنید:
  3. فایل XML را به یک فایل شیوه نامه XSL پیوند دهید، که در مرحله بعد ایجاد خواهید کرد.
  4. داده ها را به فایل XML اضافه کنید. XML حاوی داده های ساختار یافته است و هر نقطه داده را در یک تگ جداگانه ذخیره می کند. این مثال شامل یک تگ ریشه به نام بازی است. در داخل تگ بازی، هر بازی جداگانه را در تگ بازی خود ذخیره کنید. داده های هر بازی مانند نام و توسعه دهنده را در برچسب های جداگانه ذخیره کنید.          آخرین بازی ما قسمت دوم      Naughty Dog            Ghost of Tsushima      Sucker Punch Productions   >   Death Stranding      Kojima Productions   
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="xmlstylesheet.xsl"?>
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="xmlstylesheet.xsl"?>
<games>
   <game>
      <name>The Last of Us Part II</name>
      <developer>Naughty Dog</developer>
   </game>
   <game>
      <name>Ghost of Tsushima</name>
      <developer>Sucker Punch Productions</developer>
   </game>
   <game>
      <name>Death Stranding</name>
      <developer>Kojima Productions</developer>
   </game>
</games>

نحوه استفاده از XSLT برای خواندن داده ها از فایل XML

یک فایل XSL جدید ایجاد کنید تا در هر نقطه داده در صفحه XML حلقه بزنید و داده ها را نمایش دهید.

  1. در همان پوشه فایل XML خود، یک فایل جدید به نام xmlstylesheet.xsl ایجاد کنید.
  2. در داخل فایل، نسخه XSL را اعلان کنید و ساختار اصلی تگ XSL را اضافه کنید:         // کد شما در اینجا
  3. داخل تگ XSL اصلی، یک تگ الگو اضافه کنید. اینجاست که می‌توانید کد HTML سفارشی را برای نمایش و استایل داده‌های XML خود اضافه کنید.                            // کد HTML شما در اینجا               
  4. در داخل تگ بدنه، از انتخابگر تگ xsl:for-her استفاده کنید. این به عنوان یک حلقه for عمل می کند تا از طریق هر تگ بازی که در زیر تگ بازی قرار دارد، حلقه بزند.                 
  5. در داخل حلقه برای هر، نام و نقاط داده توسعه دهنده را با استفاده از انتخابگر تگ xsl:value-of نمایش دهید. 
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
        // Your code here
</xsl:stylesheet>
<xsl:template match="/">
      <html>
         <body>
             // Your HTML code in here
         </body>
      </html>
</xsl:template>
<xsl:for-each select="games/game">
                
</xsl:for-each>
<xsl:value-of select="name" />
<xsl:value-of select="developer" />

نحوه نمایش داده ها در یک صفحه وب HTML

شما نمی توانید فایل XSLT یا XML را مستقیماً در مرورگر باز کنید تا داده ها را به عنوان بخشی از یک صفحه وب مشاهده کنید. یک فایل HTML جدید ایجاد کنید و داده ها را با استفاده از تگ iframe رندر کنید.

  1. در همان پوشه فایل های XML و XSL خود، یک فایل جدید به نام index.html ایجاد کنید.
  2. ساختار اصلی یک فایل HTML را اضافه کنید. اگر قبلا از HTML استفاده نکرده اید، می توانید مفاهیم مقدماتی HTML را بررسی کنید.            نمونه XML و XSLT                         
  3. در داخل تگ بدنه، از یک تگ iframe برای پیوند به فایل XML و فایل XSL استفاده کنید:

    مثال XML و XSLT

    محتوای زیر از یک فایل XML تولید می‌شود:

  4. یک فایل جدید به نام styles.css ایجاد کنید.
  5. در داخل فایل، مقداری CSS برای استایل دادن به صفحه وب خود اضافه کنید. با استفاده از سایر نکات و ترفندهای جالب CSS، می توانید CSS خود را تغییر دهید. html,body {   ارتفاع: 100%; حاشیه: 0;}body {    display: flex; justify-content: center; align-اقلام: مرکز; جهت خم شدن: ستون؛}p {    margin-bottom: 24px;}
  6. فایل HTML خود را با افزودن موارد زیر به تگ head HTML به استایل CSS پیوند دهید.
  7. فایل HTML خود را با استفاده از مرورگر باز کنید تا داده های XML خود را مشاهده کنید. برخی از مرورگرها از XSLT پشتیبانی نمی کنند، اما برخی از مرورگرها مانند فایرفاکس از آن پشتیبانی می کنند.
<!DOCTYPE html>
<html>
    <head>
       <title>XML and XSLT Example</title>
    </head>
    <body>
       
       
    </body>
</html>
<h1>XML and XSLT Example</h1>
<p>The following content is generated from an XML file:</p>
<iframe src="data.xml" xslt="xmlstylesheet.xsl"></iframe>
html,
body {
   height: 100%;
   margin: 0;
}

body {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

p {
    margin-bottom: 24px;
}
<link rel="stylesheet" href="styles.css">

داده های XML در داخل صفحه وب HTML

نمایش داده ها در صفحات وب HTML

راه های زیادی برای نمایش داده ها در صفحات وب HTML وجود دارد که XML و XSLT یکی از آنهاست. به راحتی می توانید راه های دیگری را که می توانید این کار را انجام دهید، مانند ذخیره و نمایش ورودی کاربر با استفاده از جاوا اسکریپت بررسی کنید.

مطلب مرتبط:   چگونه یک وب سایت را با استفاده از Go and goquery خراش دهیم
Tags: