หากมีคำถาม ขอให้ไปโพสต์ลง เว็บบอร์ดจีทูจีเน็ตดอตคอม ตัวใหม่แทนน่ะครับ

หรือติดต่อเข้ามาทาง Inbox ที่ เฟซบุ๊ค ผมครับ

หน้าหลัก
ข่าวสาร - บทความ ทั้งหมด
VB 6/VB.Net
ASP/ASP.Net
จับฉ่ายคอมพิวเตอร์
เรียนรู้ผ่าน Flash Movie
บทความที่มีผู้ตอบล่าสุด  
 RSS Feeds
 ดาวน์โหลดโปรแกรม RSS Reader ได้ที่นี่ ...   Download โปรแกรม RSS Reader

Forum - www.g2gnet.com
Webmaster - www.g2gnet.com
Visitors - Session views
 5 1 0 9 6 1 1

7 ธันวาคม พ.ศ.2549
251 Users On-Line.
Visitors - Page views
 8 4 0 2 7 6 8
1 กุมภาพันธ์ พ.ศ.2551

Google   
เว็บ g2gnet.com
ขนาดตัวอักษร:  

เรียนรู้ XML กับ Visual Basic 6.0 ภาค 3 (แปลงร่าง XML ให้กลายเป็น HTML)

Category »  VB 6/VB.Net
โดย : Webmaster เมื่อ 22/6/2551 10:58:00
(อ่าน : 30309) 
แรกเริ่มที่ผมฝึกหัดทำเอกสาร HTML ผมก็จะสร้างมันขึ้นมาด้วย vi editor ซึ่งอยู่บนระบบปฏิบัติการ Unix และใช้ Notepad ที่อยู่ใน MS Windows แน่นอนครับ การทำเอกสารเหล่านี้ออกมาได้ มันต้องมาจากรากฐานของเอกสาร HTML จริงๆเลย นั่นก็คืออาศัย TAG แม้ในทุกวันนี้มีเครื่องมือที่ช่วยในการทำเว็บให้ง่ายขึ้น อย่างเช่น DreamWeaver แต่ก็หนีไม่พ้นต้องใช้ TAG เข้ามาช่วยอยู่ดี ไม่งั้นแล้วมันปรับหน้าตา ตำแหน่งที่จะวางสิ่งต่างๆลงไป มันไม่ได้ดั่งใจสั่งมาหรอกครับ ... ทีนี้สำหรับเอกสาร XML (eXtensive Markup Language) มันมีทฤษฎี XML ภาคภาษาไทยตามเว็บไซต์ต่างๆเยอะแยะมากมาย หาอ่านได้ไม่ยากหรอกครับ (ตรึมๆๆๆๆ) ผมจะข้ามในส่วนนี้ไปเลย เพราะที่ผมจะนำมาสาธยายให้ได้รับชมกันนั้น จะนำทางพี่น้องเพื่อไปสู่ภาคปฏิบัติ ที่มันจับต้องได้ (ฟรีๆ ... ไม่เสียตังค์อีก ... 55555+)
Basic Diagram
ผัง Diagram ของผม มันเป็นแนวคิดแบบบ้านๆ (อีกแล้ว) ... เพราะสิ่งที่ผมจะพูดคุยกับโปรแกรมเมอร์ในภาษาอื่นๆ ก็จะคุยกันเฉพาะลักษณะ หรือ รูปแบบของเอกสาร XML ที่ส่งมาให้เท่านั้น ... ตัวอย่างที่ผมนำมาเสนอนี้ พี่น้องจะเห็นได้ว่า VB6.0 Programmer ก็ไม่ได้อยู่อย่างโดดเดี่ยวเดียวดาย แต่ (พวกเรา) ยังสามารถทำงานร่วมกับโปรแกรมเมอร์ในสายอื่นๆได้ก็เพราะเจ้า XML นี่แหละครับผม

การรับข้อมูลผ่านทางเอกสาร XML
บทความนี้จะทำการแปลง XML ให้กลายเป็น HTML ด้วย MS Visual Basic 6


เรียนรู้ XML กับ Visual Basic 6.0 ภาค 1
เรียนรู้ XML กับ Visual Basic 6.0 ภาค 2
เริ่มต้นกระบวนการทำงาน

Project --> References ...
ผมเลือก XML 4.0 มาใช้ก็เพื่อเอาแบบกลางๆไว้เฉยๆน่ะครับ ... พี่น้อง


Project --> Components ...


Design Time


Run Time
พวกปุ่มต่างๆก็ทำแบบง่ายๆไว้ ยังไงช่วยไปเพิ่มเติมให้มันเหมือนกับ IE Browser จริงๆด้วยล่ะกัน

รูปแบบมาตรฐานของเอกสาร XML สำหรับการทำ RSS Feed

สิ่งสำคัญ คือ ความเข้าใจให้ตรงกันสำหรับ รูปแบบของข้อมูลข่าวสาร ระหว่างผู้ให้ กับ ผู้รับ
<?xml version="1.0" encoding="Windows-874" ?> 
  <rss version="2.0">
    <channel>
      <title>จี ทู จี เน็ต ดอต คอม - www.g2gnet.com</title> 
      <link>http://www.g2gnet.com/News/</link> 
      <language>th-TH</language> 
      <copyright>Copyright @ 2006 www.g2gnet.com</copyright> 

รูปแบบเนื้อหา สาระของข่าวสาร
<item>
    <title>ตรวจสอบการกดแป้นคีย์บอร์ดเพื่อให้รับค่าเฉพาะตัวเลข (VB.Net)</title> 
    <link>http://www.g2gnet.com/News/activenews_view.asp?articleID=106</link>
    <description><![CDATA[ พี่น้องชาว VB6 เห็นหัวข้อ .NET ล่ะก็อย่าประหลาดใจไปเลย ...]]></description>
    <pubDate>15/6/2551 16:39:00</pubDate> 
</item>
ข่าวสาร ... ต่อไป
<item>
    <title>การปรับแต่งให้สามารถใช้งาน Mouse Wheel สำหรับ MS Visual Basic 6 IDE</title> 
    <link>http://www.g2gnet.com/News/activenews_view.asp?articleID=105</link>
    <description><![CDATA[ Mouse Wheel ก็คือ เจ้าตุ่มลูกกลิ้งกลมๆที่อยู่ตรงกลางเมาส์นั่นแหละ ...]]></description>
    <pubDate>14/6/2551 1:11:00</pubDate> 
</item>
...
...
ไปเรื่อยๆ ... จนจบแล้วปิด Tag ด้วย 
    </channel>
  </rss>

ดังนั้นในแต่ละ Node ของ Item ... ก็จะถูกบรรจุไว้ในแต่ละแถว (<TR>) ของตาราง (<TABLE>) ... สำหรับเอกสาร HTML
ทำความรู้จักกับ HTML Tag เบื้องต้น

รายละเอียดของ HTML Tag เมื่อสร้างตารางจำนวน 1 แถว และ 3 หลัก

แปลงร่าง XML ให้กลายเป็น HTML

ตัวอย่างนี้จะใช้จำนวนหลายๆแถว (ตามจำนวนข้อมูล) แต่มีเพียง 1 หลักเท่านั้นน่ะครับ
<table width=100% border=0 cellpadding=3 cellspacing=0 bordercolor=#000000>
<tr>    <--- แถว
<td>   <--- หลัก
<a href='http://www.g2gnet.com/News/activenews_view.asp?articleID=106' target='_self'>
ตรวจสอบการกดแป้นคีย์บอร์ดเพื่อให้รับค่าเฉพาะตัวเลข (VB.Net)</a><br>
พี่น้องชาว VB6 เห็นหัวข้อ .NET ล่ะก็อย่าประหลาดใจไปเลย ...
15/6/2551 16:39:00
</td>    <--- ปิดหลัก
</tr>    <--- ปิดแถว
ขึ้นแถวใหม่ (TR)
<tr>    <--- แถว
<td>   <--- หลัก
<a href='http://www.g2gnet.com/News/activenews_view.asp?articleID=105' target='_self'>
การปรับแต่งให้สามารถใช้งาน Mouse Wheel สำหรับ MS Visual Basic 6 IDE</a><br>
<b>Mouse Wheel</b> ก็คือ เจ้าตุ่มลูกกลิ้งกลมๆที่อยู่ตรงกลางเมาส์นั่นแหละครับพี่น้อง ...
14/6/2551 1:11:00
</td>    <--- ปิดหลัก
</tr>    <--- ปิดแถว
...
...
ไปเรื่อยๆ ... จนจบแล้วปิด Tag ด้วย 
</table>
ดาวน์โหลด Source Code สำหรับ MS Visual Basic 6.0 - Service Pack 6
 ดาวน์โหลด Visual Basic 6.0 SP5: Run-Time Redistribution Pack
 ดาวน์โหลด Microsoft Data Access Object (MDAC) และ Jet 4.0 Update
 ดาวน์โหลด Microsoft Visual Basic Service Pack 6

Option Explicit

Private Sub ConvertXML(strURL As String)
' strURL เพื่อกำหนดตำแหน่งของไฟล์ XML เช่น
' strURL = "http://www.rssthai.com/rss/it.xml"
' หรือใช้ ASP/PHP Script ที่สามารถอ่านจากฐานข้อมูลแล้วสร้างไฟล์เป็น XML ออกมาก็ได้ ... ข้อมูลมันก็ UpToDate
' strURL = "http://www.g2gnet.com/news/rss.asp"
' หากไม่ได้ต่อกับอินเทอร์เน็ต ก็สามารถจำลองการใช้งานบนเครื่องได้ด้วยน่ะครับ เช่น ...
' strURL = "http://localhost/ชื่อไฟล์ XML"

' งานนี้ต้องการ DOM (Document Object Model) Component
' ซึ่ง Component ตัวนี้ จะประกอบไปด้วย
' Nodes - IXMLDOMNode
' NodeLists - IXMLDOMNodeList
' Elements - IXMLDOMElement
' Attributes - IXMLDOMattribute
Dim xmlDom As New MSXML2.DOMDocument40
Dim nodeCol, oNode, oChildNode


Set xmlDom = New MSXML2.DOMDocument40

' ตั้งค่าคุณสมบัติให้กับเอกสาร (Run Time)
xmlDom.async = False
xmlDom.validateOnParse = False
xmlDom.resolveExternals = False

' เมื่อเริ่มต้นการทำงานผ่าน Remote Server
xmlDom.setProperty "ServerHTTPRequest", True

' กำหนดเอกสารปลายทางที่จะอ่าน
xmlDom.Load (strURL)

' เอาไว้สำหรับการเก็บค่า Tag ของ HTML ทั้งหมด
Dim strTag As String
' เก็บ Link หน้าที่จะไป
Dim strLink As Boolean
' ส่วนของ Title (หัวข้อข่าว)
Dim strTitle As String
' วันที่ของการเผยแพร่ข่าว
Dim strPubdate As String
' รายละเอียดของข่าว
Dim strDescription As String

    ' เริ่มต้นการแปลงร่าง XML มาเป็น HTML
    ' ทดสอบก่อนว่าเอกสารที่รับมามีรูปแบบ XML หรือไม่ (ลักษณะของต้นไม้กลับหัวนั่นแหละครับ)
    If Not xmlDom.documentElement Is Nothing Then
        Set nodeCol = xmlDom.documentElement.selectNodes("channel/item")
        
        ' เริ่มต้นการสร้าง Tag โดยผมให้ตาราง (Table) เป็นตัวคลุมเนื้อหาข่าวสารทั้งหมด
        ' ใครสามารถอ่าน/เขียน HTML Tag ... ย่อมได้เปรียบครับ ...
        strTag = strTag & ("<table width=100% border=0 cellpadding=3 cellspacing=0 bordercolor=#000000>")
        
        ' เริ่มต้นไล่ตาม Element
        ' แต่ละวงรอบของ FOR คือ การสร้าง 1 แถว (TR) และ 1 หลัก (TD) ของตาราง (TABLE) น่ะครับ
        For Each oNode In nodeCol
            ' เพิ่มแถว <tr> และ หลัก <td> สำหรับ HTML Tag
            strTag = strTag & ("<tr><td>")
            strTag = strTag & ("<div align='left'>" & vbCrLf)
            
            ' ทดสอบว่ามีรายการ Link เข้ามาหรือไม่
            Set oChildNode = oNode.selectSingleNode("link")
            If Not oChildNode Is Nothing Then
                ' หากต้องการเปิด Browser หน้าใหม่
                'strTag = strTag & ("<a href='" & oChildNode.Text & "' target='_blank'>")
                
                ' เปิด Browser หน้าเดิมของมันนี่แหละ
                ' ผมยังไม่ปิด Tag ในส่วนนี้ เพราะต้องการทำลิ้งค์ใส่ไว้ให้กับ Title
                strTag = strTag & ("<a href='" & oChildNode.Text & "' target='_self'>")
                strLink = True
            Else
                strLink = False
            End If
            
            ' หัวเรื่อง  (Title)
            Set oChildNode = oNode.selectSingleNode("title")
            If Not oChildNode Is Nothing Then
                strTitle = oChildNode.Text
                strTitle = Replace(strTitle, "&apos;", "'")
                strTitle = Replace(strTitle, "&", "&")
                strTitle = Replace(strTitle, vbCrLf, "<br>")
                strTag = strTag & ("" & strTitle & "")
            End If
            
            ' ถ้าหากมี Link
            If strLink = True Then
                ' ปิด Link ด้วย tag </a>
                strTag = strTag & ("</a><br>" & vbCrLf)
            End If
            
            ' รายละเอียดของข่าว (Description)
            Set oChildNode = oNode.selectSingleNode("description")
            If Not oChildNode Is Nothing Then
                strDescription = oChildNode.Text
                strDescription = Replace(strDescription, "![CDATA[", "'")
                strDescription = Replace(strDescription, "]]", "'")
                strDescription = Replace(strDescription, vbCrLf, "<br>")
                strTag = strTag & ("" & strDescription & "")
            End If
            
            ' วันที่ (PubDate)
            Set oChildNode = oNode.selectSingleNode("pubDate")
            If Not oChildNode Is Nothing Then
                strPubdate = oChildNode.Text
                strPubdate = Replace(strPubdate, "&apos;", "'")
                strPubdate = Replace(strPubdate, "&", "&")
                strPubdate = Replace(strPubdate, vbCrLf, "<br>")
                strTag = strTag & ("" & strPubdate & "</div></td></tr>" & vbCrLf)
            End If
            
            ' การอ่านค่าอื่นๆเข้ามา ก็เช่นเดียวกันครับ ... จบ
            
        Next
        ' ปิดตารางด้วย Tag </table>
        strTag = strTag & ("</table>")
    End If
    
    ' เมื่อได้ข้อมูล HTML Tag มาแล้ว ... (มันก็ Text ดีๆนี่แหละครับ)
    ' ก็ทำการจับยัดใส่เข้าไปไว้ในไฟล์ ... RSSFeed.html ... เหมือนบันทึกไฟล์ข้อมูลปกติ
    ' เพราะ HTML Tag มันก็คือ Text File ... แต่มีรูปแบบมาตรฐานในตัวมันเพื่อนำไปเปิดดูตาม Browser ต่างๆ
    Open App.Path & "\RSSFeed.html" For Output As #1
    Print #1, strTag
    Close #1
    
    ' ให้ Web Browser ของเรา (webXML) ชี้ไปที่หน้าเว็บ RSSFeed.html
    webXML.Navigate App.Path & ("\RSSFeed.html")
    
    ' หากกำหนดแบบนี้คุณจะได้เอกสาร XML แบบเพียวๆเลยครับ (โซดาไม่ต้อง ... เหอๆๆๆๆ)
    'webXML.Navigate strURL

End Sub

Private Sub cboAddress_KeyPress(KeyAscii As Integer)
    If Trim(cboAddress.Text) = "" Or Len(Trim$(cboAddress.Text)) = 0 Then Exit Sub
    If KeyAscii = vbKeyReturn Then
        cboAddress.AddItem cboAddress.Text
        Call ConvertXML(cboAddress.Text)
    End If
End Sub

Private Sub Form_Load()
    Me.Move (Screen.Width - Width) \ 2, (Screen.Height - Height) \ 2
    
    ' สมมุติตัวอย่างแล้วกัน และ
    ' เป็นโปรแกรมทดสอบ ดังนั้นกรุณาพิมพ์ขึ้นต้นด้วย http:// ก่อนให้ครบด้วยน่ะครับ
    cboAddress.Text = "http://www.g2gnet.com/News/rss.asp"
    
    ' หรือใช้ไฟล์ XMLTest.xml ทดสอบแบบ Off Line ก็ได้ครับ ... หากไม่ได้ต่อเน็ต หรือ จำลอง Server ไว้
    'cboAddress.Text = App.Path & "\XMLTest.xml"
    
    ' กำหนดเป็นหน้าเว็บที่ว่างเปล่าไว้ก่อนครับ ... ทำไมเหรอ ...
    ' ก็ขืนไม่ให้ตัว Web Browser มีอะไรมารองรับมันๆก็จะช้า จะอืดน่ะซิครับ ... แบบนี้ชายไม่ชอบเลย 55555+
    webXML.Navigate App.Path & "\Blank.html"
End Sub
เอาไปใช้กับอะไรได้บ้าง
การอ่านเอกสาร XML จาก Server (ทั้ง LAN และ Internet) เข้ามายังฝั่งเครื่องลูก (Client) ทำให้เราไปต้องไปวุ่นวายกับ Connection ที่ใช้ในการเชื่อมต่อกับแหล่งฐานข้อมูลต่างๆ เช่น MSSQL, Oracle หรือ MYSQL ... อย่างนี้มันก็พอจะติ๊ต่างว่าสามารถทำงานข้ามแพลตฟอร์มได้แล้วน่ะ เหอๆๆๆๆ ...
    มาดูตัวอย่างที่ผมพอจะนึกออกว่าจะนำไปใช้งานอะไรดี ...
  • แบบพื้นๆ ก็คือ ทำการอ่านข่าวที่เราเรียกว่า RSS Feed Reader ... ก็ตัวอย่างโปรแกรมนี้แหละครับพี่น้อง
  • ใช้ในระบบการเรียน การสอน โดยใช้ ASP/PHP Script สุ่มแบบทดสอบส่ง XML มายังเครื่องลูก ... แล้วใช้ Application เป็นตัวจัดการแทน เพราะว่า ...
    1. ไม่ต้องการให้ผู้เรียนเห็นและโหลดข้อมูลแบบทดสอบทั้งหมดได้ (Update แบบทดสอบผ่านทางเว็บไซต์อย่างเดียว ... ก็คนมันหวงข้อสอบนี่หว่า เอิ๊กๆๆๆๆ)
    2. กรณีนี้ใช้เพื่อทดสอบระดับความรู้ของตัวผู้เรียนเฉยๆครับ ไม่ได้ทำข้อสอบ On Line น่ะขอรับพี่น้อง ...
    3. เขียนโปรแกรมด้วย Win Application เพื่อควบคุมมันง่ายกว่าการทำผ่าน Web Application เยอะ ... 55555+
  • ทำเป็นทีวี ON Line ก็ได้ ... อันนี้ผมก็จะปั่นเป็นบทความตอนต่อไปทันทีเลย เพราะเบื่อหน่ายกับการเข้าไปดูในเว็บ สำหรับ IE มันช้า สำหรับ FireFox กลับดูไม่ได้ ... พี่น้องก็ช่วย Sniff URL สถานีต่างๆให้ผมเผื่อด้วยหน่อยน่ะครับ (ช่อง 3/5/7/9 ... ใช้ RTSP Protocol ดังนี้ rtsp://202.43.34.236/3 ... เลข 3 น่ะเปลี่ยนไปตามหมายเลขช่องเลยครับ (รับชมใน Windows Media Player ได้เลย)
  • ทำเอกสาร รายงาน ... และอื่นๆแต่ตอนนี้ผมยังนึกไม่ออก ... 55555+

จี ทู จี เน็ต ดอต คอม - g2gNet Dot Com
เลขทะเบียนพาณิชย์อิเล็กทรอนิกส์ 0407314800231
CopyLeft © 2004 - 2099 g2gNet.Com All rights reserved.
Email: [email protected] หรือ โทร. 08-6862-6560