Creating HTML file Dynamically using XML Literal in VB 9.0

Posted at : Jan/02/2008

1000 Views

Lagi-lagi XML Literal... :) yup memang begitulah...how is powerful and flexible this feature. Fitur ini tidak hanya untuk digunakan untuk membuat file xml saja. File HTML pun dapat digenerate dengan XML Literal. Caranya pun sama dan sesimple seperti yang dilakukan dalam membuat file XML. Kita bisa menuliskan css code secara inline dan elemen-elemen html lainnya di dalam XML Literal tersebut layaknya jika kita design sebuah web form atau file html...nice! :)

Pada artikel ini saya akan membuat contoh bagaimana caranya membuat sebuah file HTML yang digenerate secara run time dan isinya dibuat dinamis sesuai dengan input user. Contoh aplikasinya sederhana dan dibuat dengan menggunakan web template project.

Misalkan terdapat sebuah web site komunitas yang memiliki halaman registrasi bagi user yang akan bergabung dengan komunitas tersebut. Setelah user selesai input data yang diperlukan, maka web site tersebut akan mengirimkan sebuah file HTML yang isinya merupakan konfirmasi informasi detail user tersebut ke email yang digunakan oleh user itu. Misalkan konfirmasi password user yang bersangkutan. Namun pada contoh aplikasi ini saya hanya akan menampilkan file HTML confirmation page yang di generate secara run time.

Mari kita mulai :)

Buat sebuah web application template. Pilih VB sebagai bahasa yang digunakan, karena C# tidak memiliki fitur XML Literal :)
Design web form dengan layout seperti pada gambar dibawah ini :

Tambahkan event handler untuk button yang digunakan sebagai Submit button dengan double click button tersebut. Code behind inilah yang akan generate file HTML berdasarkan input dari user. Kode nya seperti berikut :

   1:      Protected Sub btnSubmit_Click() Handles btnSubmit.Click

   2:          Dim confirmationHTMLPage = _

   3:          <html>

   4:              <head>

   5:                  <title>Confirmation Page</title>

   6:                  <style type="text/css">

   7:          .header

   8:          {

   9:              font-family: "Trebuchet MS";

  10:              color: #0000FF;

  11:              text-decoration: underline;

  12:          }

  13:          .thanks

  14:          {

  15:              font-family: Tahoma;

  16:              font-size: 12px;

  17:              font-style: italic;

  18:              font-weight: bold;

  19:              color: Green;

  20:          }

  21:          .secret

  22:          {

  23:              color: #CC0000;

  24:              font-weight: bold;

  25:              font-style: italic;

  26:          }

  27:      </style>

  28:              </head>

  29:              <body>

  30:                  <div>

  31:                      <h2 class="header">Confirmation</h2>

  32:                      <span class="thanks">Congratulation, now you're a member of this community!</span>

  33:                      <br/><br/>

  34:          Here is your user name, email, and password...<span class="secret">keep it secret!</span> :

  35:         <p>

  36:          User Name : <span style="font-weight:bold;font-style:italic"><%= Me.txtUserName.Text %></span>

  37:                          <br/>

  38:          Email : <span style="font-weight:bold;font-style:italic"><%= Me.txtEmail.Text %></span>

  39:                          <br/>

  40:          Password : <span style="font-weight:bold;font-style:italic"><%= Me.txtPassword.Text %></span>

  41:                      </p>

  42:                  </div>

  43:              </body>

  44:          </html>

45:

  46:          confirmationHTMLPage.Save(Server.MapPath("confirmPage.htm"))

  47:          System.Diagnostics.Process.Start(Server.MapPath("confirmPage.htm"))

  48:      End Sub

Simple? ... yang kita lakukan hanya save XML Literal tersebut dengan ekstensi .HTM atau .HTML...Web browser previewnya dapat dilihat pada gambar dibawah ini :