Templat HTML

Pelajari cara mengisi template HTML dari sumber data dan mengonversinya menjadi dokumen HTML

Cara Menggunakan Templat HTML

Templat HTML adalah file HTML biasa yang berisi beberapa ekspresi sebaris khusus (placeholder) yang menentukan pemetaan sumber data input ke markup halaman HTML. Placeholder yang ditandai dengan kurung kurawal ganda menunjukkan area di mana data aktual dari sumber data harus disisipkan. Aspose.HTML untuk .NET menawarkan serangkaian metode ConvertTemplate() untuk mengonversi templat HTML menjadi dokumen HTML berisi data. Jadi, mari cari tahu cara mengisi template HTML dari sumber data dan mengonversinya menjadi file HTML.

Pertama, pastikan Anda telah menginstal pustaka Aspose.HTML untuk .NET di proyek Anda. Hal ini cukup mudah dilakukan. Anda dapat menginstalnya melalui NuGet Package Manager Console menggunakan perintah berikut:

Instal Aspose.HTML untuk .NETInstall-Package Aspose.HTML

Sumber Data

Untuk membuat dan mengisi dokumen HTML dari templat, Anda memerlukan sumber data untuk mengisinya. Aspose.HTML menyediakan sintaks ekspresi sebaris untuk bekerja dengan templat dan berbagai tipe sumber data, seperti XML dan JSON. Sumber data umum dalam format XML mungkin terlihat seperti ini:

Sumber Data XML<Data>
    <Persons>
        <Person>
            <FirstName>Sherlock</FirstName>
			<LastName>Doe</LastName>
			<Address>
				<City>Dallas</City>
				<Street>Main rd.</Street>
				<Number>114</Number>
			</Address>
			<Telephone>012-5344-334</Telephone>
        </Person>
        <Person>
            <FirstName>Jack</FirstName>
            <LastName>Fox</LastName>
            <Address>
                <Number>25</Number>
                <Street>Broadway</Street>
                <City>New York</City>
            </Address>
            <Telephone>081-544-12-15</Telephone>
        </Person>
    </Persons>
 </Data>

Markup templat

Markup template adalah sekumpulan sintaks yang digunakan untuk menyematkan konten dinamis ke dalam template HTML. Ekspresi sebaris digunakan dalam markup templat untuk mengeksekusi kode atau menghasilkan nilai dinamis langsung dalam dokumen HTML. Berikut adalah beberapa aturan sederhana untuk mempersiapkan template HTML yang akan diisi dari sumber data:

Ekspresi pengikatan data digunakan untuk menetapkan nilai elemen kontrol berdasarkan informasi yang terkandung dalam sumber data dengan sintaks berikut: {{ ekspresi pengikatan data }}. Misalnya, ekspresi di dalam templat, seperti {{FirstName}}, {{LastName}}, {{Address.Street}}, {{Address.Number}}, dan {{Telephone}}, menunjukkan bidang dari sumber data yang harus dimasukkan ke dalam sel tabel yang sesuai.
Atribut data_merge menetapkan bahwa sumber data adalah daftar objek, dan tabel harus diulang untuk setiap objek.
Ekspresi direktif foreach digunakan untuk melakukan iterasi melalui daftar elemen yang dikombinasikan dengan ekspresi pengikatan data.

Struktur Templat HTML<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Person Information</title>
	</head>
	<body>
		<table border=1 data_merge="{{#foreach Persons.Person}}">
			<tr>
				<th>Person</th>
				<th>Address</th>
				<th>Telephone</th>
			</tr>
			<tr>
				<td>{{FirstName}} {{LastName}}</td>
				<td>{{Address.Street}} {{Address.Number}}, {{Address.City}}</td>
				<td>{{Telephone}} </td>
			</tr>
		</table>
	</body>
</html>

Konversi Templat ke HTML

Setelah template HTML dan file sumber data Anda siap, Anda dapat menggabungkannya, yaitu mengonversi template menjadi file HTML berisi data. Aspose.HTML untuk .NET menawarkan serangkaian metode ConvertTemplate() untuk mengonversi templat menjadi dokumen HTML. Metode ini mengambil beberapa parameter dan mengembalikan dokumen HTML. Mari kita gunakan metode ConvertTemplate(HTMLDocument, TemplateData, TemplateLoadOptions, string) yang menggunakan empat parameter:

Objek HTMLDocument digunakan sebagai sumber templat.
Objek TemplateData menyimpan data yang akan digunakan untuk mengisi template.
Objek TemplateLoadOptions menyediakan opsi untuk memuat template.
Parameter string digunakan untuk menentukan jalur file HTML lengkap sebagai hasil konversi keluaran.

Kode C# untuk mengkonversi template ke file HTMLusing System.IO;
using Aspose.Html.Converters;
using Aspose.Html.Loading;
...

    // Initialize an HTML document as a conversion source (HTML template)
    var document = new HTMLDocument(Path.Combine(DataDir, "html-template.html"), new Configuration());

    // Define a TemplateData object
    var templateData = new TemplateData(Path.Combine(DataDir, "template-data.xml"));

    // Define a default TemplateLoadOptions object
    var options = new TemplateLoadOptions();

    // Prepare a path to the result file
    var resultPath = Path.Combine(OutputDir, "document.html");

    // Convert template to HTML
    Converter.ConvertTemplate(document, templateData, options, resultPath);

    // Clear resources
    document.Dispose();

Tabel yang berisi data dari file XML di atas dan menggunakan template HTML akan terlihat seperti ini:

Teks “Tabel HTML diisi dengan data menggunakan templat”

Bergantung pada tanda tangan metode ConvertTemplate() , Anda dapat menentukan sumber templat HTML dari file, URL, atau konten sebaris (string content). Anda juga dapat menambahkan configuration sebagai parameter.

Untuk mempelajari lebih lanjut tentang Aspose.HTML API, silakan kunjungi dokumentasi kami. Dari bab Working with HTML Templates , Anda akan menemukan informasi tentang cara mengisi templat HTML dari sumber data XML atau JSON, cara mengonversi templat ke HTML, cara mengatur atribut dalam templat HTML, dan cara mengontrol keberadaan atribut saat mengisi template.