PHP

Home

PHP Tutorial
Knowledge Developer Database Internet Resource
XML และ XHTML
1. XML
2. การทำงานกับ XML ใน PHP
3. XHTML
 
การสร้างโปรแกรมประยุกต์เว็บ
1. Cookie และ Session
2. ระบบการรับรองของ PHP และ MySQL
3. XML และ XHTML
4. PEAR
 
PHP
PHP เบื้องต้น
การสร้างโปรแกรมประยุกต์เว็บ
PHP ระดับสูง
 
Internet
PHP
SSI
HTML
AJAX
 
การสร้างโปรแกรมประยุกต์เว็บ > XML และ XHTML

XML

ในช่วงก่อน (อย่างน้อย 10 ถึง 15 ปีที่ผ่านมา) ถ้าคนทั่วไป 2 กลุ่มต้องการใช้ข้อมูลร่วมกับบนเครือข่าย เมื่อเริ่มต้นต้องมีการสร้างข้อกำหนดข้อมูลสำหรับการสร้างชุดคำสั่ง ถ้ามีบุคคลอื่นต้องการข้อมูลจะต้องคัดลอกข้อกำหนด ไลบรารีของคำสั่งเพื่อสร้างชุดดำสั่งสำหรับการทำงานกับข้อมูลนั้น สิ่งเหล่านี้มีความซับซ้อนและต้นทุนสูง การแก้ไขปัญหานี้จึงนำไปสู่การประดิษฐ์ Extensible Markup Language (XML)

อะไรคือ XML

XML จัดการและเจาะจงภาษาสำหรับการอธิบายข้อมูลได้ง่าย ขณะที่ HTML ใช้อธิบายการแสดงข้อมูล XML เกี่ยวข้องกับการอธิบายโครงสร้างข้อมูลและความสัมพันธ์กับข้อมูลอื่น ภาษานี้เป็นข้อความอย่างง่าย (plain text) ได้รับการออกแบบให้ช่วยแบ่งข้อมูลโครงสร้างระหว่างคอมพิวเตอร์

tag ของ XML ต่างจาก HTML คือ tag ไม่ได้กำหนดไว้ก่อน ผู้เขียนโปรแกรมต้องรับผิดชอบทั้งหมด ข้อได้เปรียบของ XML

  • ไฟล์ข้อความอย่างง่ายใช้เก็บข้อมูล หมายความว่าคนและเครื่องสามารถอ่านได้ ไม่ต้องการรูปแบบข้อมูลพิเศษ
  • การสนับสนุน unicode ดีมาก หมายความว่า ข้อมูลตัวอักษรต่างๆ รอบโลกสามารถนำเสนอได้อย่างง่ายดาย
  • ไม่มีแพล็ตฟอร์มขึ้นต่อใน XML จึงเป็นเทคโนโลยีข้ามแพล็ตฟอร์มอย่างแท้จริง
  • รวมทั้งเป็นมาตรฐานเปิด
  • ความเข้มงวดรูปแบบแอกสารทำให้การกระจายและจัดการทำได้เร็วและมีประสิทธิภาพ
  • มาตรฐานที่มีอยู่ใกล้เคียงกับ แพล็ตฟอร์มหลักหมายความว่าไม่ต้องทำงานกับการเพิ่มส่วนสนับสนุน XML ในโปรแกรมประยุกต์เว็บ
  • เครื่องมือในการทำงานกับ XML มีมาก

ตามความจริง XML เป็นเพียงภาษาอธิบายข้อมูล เอกสารเหล่านั้นไม่ได้ทำอะไรเพียงช่วยการทำงานกับข้อมูลง่ายขึ้น

ข้ออ่อนของ XML

  • เนื่องจากมีพื้นฐานไฟล์ข้อความและ tag จำนวนมากที่มีชื่อเดียวกับหมายความว่าไฟล์ XML มีขนาดใหญ่กว่าไฟล์ไบนารีที่ออกแบบมาดี ความสามารถในการบีบอัดข้อมูลและเพิ่มการใช้แถบความถี่ทำให้เป็นปัญหาได้
  • XML ได้รับการออกแบบ เฉพาะการอธิบายข้อมูลตามลำดับชั้น ไม่ใช่ข้อมูลแบบสุ่มหรือซ้อนทับ
  • สนันสนุนส่วนการทำงานปกติทั้งหมดหมายความว่าการใช้ XML บางครั้งอาจจะไม่เร็วหรือมีประสิทธิภาพตามที่ต้องการ

ทำไมต้องใช้ XML

ความยืดหยุ่นและการขยายของ XML ทำให้ใช้ได้กว้างขวาง

  • โครงสร้างข้อมูลง่าย เช่น ไฟล์คอนฟิก, address book หรือการเก็บข้อมูลขนาดเล็ก การใช้ XML เก็บค่าคอนฟิกและสารสนเทศของผู้ใช้กับเพิ่มจำนวนโปรแกรมทำให้ไม่ต้องเขียนคำสั่งขนาดใหญ่เพื่อจัดการสิ่งเหล่านี้
  • โปรแกรมประยุกต์ แลกเปลี่ยนข้อมูล โดยเฉพาะ business-to-business (B2B) บริษัทต้องการใช้ข้อมูลร่วม เช่น คลังสินค้า และฝ่ายกระจายสินค้า สามารถใช้ XML ส่งผ่านสารสนเทศได้ เอกสารเหล่านี้สามารถตรวจสอบได้เอง และไม่ต้องเขียนคำสั่งใหญ่
  • การประยุกต์ข้อมูลร่วม ถ้าโปรแกรมเก็บข้อมูลเป็นไฟล์ข้อมูล XML เอกสารจัดการได้กว้างตามแพล็ตฟอร์มและโปรแกรม
  • สร้างภาษา markup ใหม่ บางครั้งเรียกว่า meta language เนื่องจาก XML ยืดหยุ่นและคอนฟิกทำให้สามารถกำหนดภาษา markup ใหม่สำหรับวัตถุประสงค์หลากหลาย

Terminology พื้นฐาน

ก่อนการอธิบายรูปแบบจริงของเอกสาร XML ต้องกำหนดศัพท์ร่วมเพื่อหลีกเลี่ยงความสับสน

tag เป็นตัวกำหนด markup ล้อมด้วยวงเล็บเหลี่ยม (< และ >) ตัวอย่าง <Doctor> , <Books> และ </Address> ตัวหลังคือ tag ปิด

element คือ หน่วยของสารสนเทศในเอกสาร XML โดย element เป็นตัวระบุโดยมี tag เปิดและ tag ปิด (ตัวอย่าง <ElementName>....</ElementName>) สิ่งที่เก็บภายใน tag เป็นหนึ่งในสี่อย่าง

  • element อื่น ตัวอย่าง element นำเสนอเป็น collection ของหนังสือที่เก็บหนังสือแต่ละเล่ม
    <books> <book>...</book> </books>
  • ข้อความเนื้อหา เช่น กรณี element ชื่อ title
    <title> Health Report </title>
  • เนื้อหาผสม (ทั้งเนื้อหาและ element อื่น) เช่น
    <date><month>December </month> <day>7 </day> </date>
  • ไม่มีข้อมูล element ไม่มีข้อมูลระหว่าง tag เปิดและปิด เรียกว่า element ว่าง

document element เรียกได้อีกว่า document node หรือ root node โดย document element เป็น element บนสุดในเอกสาร XML

attribute เป็นสารสนเทศพิเศษภายใน tag เปิด คุณลักษณะนี้ระบุในรูปแบบ name = ‘value' และ value ต้องอยู่ใน single หรือ double quote ตัวอย่าง <holiday type= ‘international'>, <message class = ‘tip'> และ <font name = ‘Helvetica' size = ‘15pt'> คุณลักษณะไม่สามารถปรากฏใน tag ปิด

parent, child, sibling ในเอกสาร XML ใช้ element จัดรูปลำดับชั้นและ node เหล่านั้นเก็บ node อื่นได้รับการอ้างอิงเป็น node แม่ (parent) ของ node เหล่านั้น ส่วน node เหล่านั้นเป็นลูก (child) ของ node แม่ และเป็น sibling ของกันและกัน (บางครั้งเรียกว่า node พี่น้อง) ดูตามภาพที่ 2.3.1


ภาพ 2.3.1 แบบจำลอง XML

โครงสร้างเอกสาร XML

เริ่มต้นจากอธิบายผังพื้นฐานของเอกสาร XML

โครงสร้างพื้นฐาน

ก่อนการดูเอกสาร XML ให้คิดเกี่ยวกับข้อมูลที่ต้องการนำเสนอในรูปโครงสร้างตามลำดับชั้นของข้อมูล การระบุคุณสมบัติที่สามารถใช้สร้างหน่วยข้อมูลย่อยหรือคุณลักษณะ

ในตัวอย่าง ใบสั่งซื้อ สามารถพิจารณาได้ว่าต้องมี Orders เป็น element ที่เก็บแต่ละ element ของใบสั่งซื้อที่มีความสัมพันธ์ เช่น หมายเลขใบสั่งซื้อ รหัสและชื่อลูกค้า วันที่ใบสั่งซื้อ จำนวนเงิน

ตัวอย่างเอกสาร XML

<?xml version="1.0" encoding="utf-8"?>
<orders>
    <order id ="95236">
        <customer id="47">
            <name> วันชัย รักคีรี </name>
            <address>17/452 ถนนเทศบาล 4 ต.ตลาด อ.เมือง ชัยนาท </address>
        </customer>
        <orderdate><year>2549</year><month>6</month> <day>25</day></orderdate>
        <amount>5840</amount>
    </order>
    <order id ="95310">
        <customer id="125">
            <name> สิงห์โต ทุ่งใหญ่</name>
            <address>61/582 ถนนแสงชูโต อ.เมือง กาญจนบุรี </address>
        </customer>
        <orderdate><year>2549</year><month>7</month> <day>01</day></orderdate>
        <amount>2750</amount>
    </order>

</orders>

 

โครงสร้างของเอกสาร XML ประกอบด้วยหน่วยข้อมูลต่อไปนี้

  • การประกาศ XML
  • คำสั่งตัวเลือกสำหรับตัวกระจาย XML
  • โครงสร้างตามลำดับชั้นของ element เริ่มต้นด้วย document element

การประกาศ XML ต้องเป็นบรรทัดแรกของทุกเอกสาร XML ด้วยโครงสร้างพื้นฐานนี้

<?xml version="1.0" encoding = "iso-8859-11" ?>

ชุดเอกสารในพารามิเตอร์ encoding ขึ้นกับการเขียนโปรแกรม เช่น UTF - 8 ใช้กับ unicode

ส่วนที่ 2 ของไฟล์ XML ประกอบเป็นคำสั่งตัวเลือกเพื่ออธิบายรายละเอียดเช่น Document Type Definitions

<!DOCTYPE orders SYSTEM "/home/xml-resource/orders.dtd"
[<!ENTITY dept "Retailer">] >

ลำดับชั้นของ element เริ่มต้นด้วย document element (รากของเอกสาร) โดยสามารถเป็นเพียง 1 document node และสิ่งที่อยู่ข้างหน้าเช่น การประกาศ XML คำสั่ง DTD ไม่พิจารณาเป็นส่วนหนึ่งของเอกสาร

ตลอดเอกสารอาจจะมี comment ที่ใช้อธิบายประกอบข้อมูล

<!--customer details-->

comment ไม่สามารถเก็บชุดของตัวอักษร - - และไม่สามารถเป็นหน่วยย่อย

<!-- รูปแบบนี้ <!-- ห้ามใช้ !!!--> หรือแบบนี้ ---:-->

กฎการจัดรูปแบบเอกสาร

การสร้างเอกสาร XML จำเป็นต้องทำตามกฎการสร้างเอกสาร well-formed โดยเอกสารลักษณะนี้สามารถอ่านหรือจัดการโดยเอกสาร XML

  • ชื่อ element ของ XML ตัวพิมพ์มีผล tag เปิดและปิดต้องตรงกัน ต่อไปเป็นตัวอย่างไม่ถูกต้อง <Name> </NAME>
  • เอกสารสามารถมีได้เพียง 1 document element
  • element สามารถว่างเปล่าหรือเก็บ element อื่น ข้อความ หรือการผสมของ element กับข้อมูล
  • element ทั้งหมดต้องมี tag ปิด หรือ เป็น element เปล่าที่มีไวยากรณ์เหมาะสม (ตัวอย่าง <moo/>
  • element ของ XML ต้องเป็นลำดับย่อยอย่างเหมาะสม การซ้อนทับ หรือ การข้ามของ element เป็นข้อห้าม ตัวอย่างต่อไปไม่ถูกต้อง

<bold> รายงานการผลิต <italic> เดือนมกราคม </bold> </italic>

การเขียนอย่างถูกต้อง

<bold> รายงานการผลิต <italic> เดือนมกราคม <italic> </bold>

  • element สามารถเก็บ attribute ได้ attribute และค่าของ attribute ต้องหุ้มด้วย single หรือ double quote เช่น <car type = ‘passenger' engines=' 1800 '> โดยแต่ละ attribute ใน 1 element กำหนดได้ 1 ค่า ตัวอย่างนี้ไม่ถูกต้อง <car type = ‘passenger' engines='1800' engines = ‘Turbo'/>
  • whitespace ในเอกสาร XML ได้รับการรักษาเป็นส่วนหนึ่งของเนื้อหา
    <desc>
    รายงานการผลิต เดือนมีนาคม 2549
    แผนกประกอบ 47, 845 ชุด แผนกพ่นสี 25,125 ชิ้น
    </desc>

Entity

entity ของ XML มีหลากหลายที่สำคัญ คือ พารามเตอร์และทั่วไป แต่ส่วนที่ต้องระมัดระวังคือ entity ตัวอักษร ที่ XML สำรองสำหรับใช้โดยคำอธิบาย XML โดยเฉพาะตัวอักษร < และ > และไม่สามารถใช้กับข้อความใน element เพราะขัดแย้งกับหน้าที่เฉพาะ

<logic> if (x > y) </logic>

การโหลดเอกสาร XML ด้วยรูปแบบข้างบน จะทำให้เกิดผลลัพธ์ความผิดพลาดจากตัวกระจาย XML

การใช้เครื่องหมายพิเศษนี้กำหนดเป็น entity ( predefined character entities) โดย entity เป็นชื่อ element ในรูปแบบ &entity-name; การเริ่มต้น entity ใช้ตัวอักษร ampersand (&) และ จบด้วย semicolon (;) แล้วระบุ entity ที่ใช้ภายในนี้ XML 1.0 มี 5 entity หลัก

ตาราง 16.1 entity หลักของ XML

Entity ตัวอย่าง ค่า

Left-angle bracket

&&t;

<

Right-angle bracket

&gt;

>

Ampersand

&amp;

&

Single quote (apostrophe)

&apos;

‘

Double quote

&quot;

“

ตัวอย่างการใช้ ถ้าต้องการมี element ในเอกสาร XML ที่เก็บประโยคคำสั่ง logic เช่น (A>B) && (A<C) สามารถเขียนได้ดังนี้

<logic> <A&gt;B> &amp; &amp; (A&lt; C) </logic>

ตามปกติมักจะลืมใช้ entity สำหรับตัวอักษร ampersand (&) เมื่อแทรกข้อความใน เอกสาร

Attribute

attribute สามารถใช้แยก element ออกจากกันโดยไม่ต้องสร้าง element ในทุกสถานการณ์ เช่น

<message class="tip"> การเขียนโปรแกรม PHP ควรจะ... </message>
<message class="warning"> ไม่ควรเดินทางคนเดียว... </message>

class attribute สามารถใช้กับ stylesheet สำหรับการระบุโฉมหน้าของข้อความ นอกจากนี้ attribute สามารถระบุค่าเอกลักษณ์ (unique identifier) เช่น id ของลูกค้า

<customer id="47"> ... </ customer>

ตัวอย่างการกำหนดคุณลักษณะและ element

<customer id="125" name=" สิงห์โต ทุ่งใหญ่ " address="61/582 ถนนแสงชูโต อ.เมือง " province=" กาญจนบุรี " >

<customer>
   <customerid>125</customerid>
   <name> สิงห์โต ทุ่งใหญ่ </name>
   <address>61/582 ถนนแสงชูโต อ.เมือง </address>
   <province> กาญจนบุรี </province>
</customer>

โดยทั่วไปควรจำกัดการใช้ attribute ด้วยเหตุผลต่อไปนี้

  • attribute มีได้เพียง 1 ชื่อต่อ element
  • โครงสร้างของ attribute ไม่สามารถกำหนด ถ้าต้องการแสดงรายชื่อลูกค้าและสารสนเทศของทั้งหมด จะไม่สามารถนำเสนอในโครงสร้างภายใน attribute
  • attribute จัดการได้ยากจากภายในคำสั่งและต้องทำงานเพิ่มเติม
  • การตรวจ attribute ผ่าน DTD หรือ XML schema ทำได้ยากมาก

การเรียกรายชื่อลูกค้าด้วยการเปิด node ลูกของแต่ละ element อาจจะมีประสิทธิภาพต่ำ ถ้าดูการค้นหารายชื่อลูกค้า ส่วนใหญ่มองหาหมายเลขลูกค้า (ID) หรือชื่อ ดังนั้นสามารถปรับโครงสร้างใหม่ได้ดังนี้

<customer>
   <customerid>125</customerid>
   <name> สิงห์โต ทุ่งใหญ่ </name>
   <address>61/582 ถนนแสงชูโต อ.เมือง </address>
   <province> กาญจนบุรี </province>
</customer>

เนื่องจาก XML เป็นระบบอธิบายข้อมูลโครงสร้างตามลำดับชั้น ดังนั้นต้องไม่สูญเสียการใช้โครงสร้างและวางสารสนเทศทั้งหมดใน attribute ของ element

การตรวจสอบความถูกต้องของ XML

ตามแนวคิด well-form ของเอกสาร XML ที่มีนัยยะในการสร้างเอกสาร XML อย่างถูกต้อง เช่น tag มีการปิด attribute ทั้งหมดล้อมด้วย quote มี 1 document node และอื่นๆ รวมทั้งความเข้มแข็งของมาตรฐาน XML คือ มีวิธีอธิบายโครงสร้างของข้อมูลที่ควรเป็นและตรวจสอบข้อมูลกับคำอธิบาย สิ่งนี้ทำให้มีการกำหนดเอกสาร เพิ่มเติมจากเอกสาร well-formed โดยสามารถทำได้ 2 วิธี

กลไกแรก(วิธีเก่า) คือผ่าน DTD ที่เป็นชุดสารสนเทศที่สามารถรวมกับเอกสาร XML เพื่อใช้อธิบาย เมธอดนี้ยอมให้อธิบายลำดับชั้น ของ element สำหรับเอกสาร ถึงแม้ว่า node มีข้อมูล node อื่นหรือทั้ง 2 อย่าง

วิธีที่ 2 (วิธีใหม่) ทำในสิ่งที่เรียกว่า XML schema วิธีนี้มีความสามารถสูงและระบบยืดหยุ่นในการอธิบายโครงสร้างของเอกสาร แต่มีต้นทุนจากการศึกษาและเขียนคำสั่งมากกว่า อย่างไรก็ตามวิธีนี้สนับสนุนส่วนการทำงานมากกว่า DTD รวมถึงความสามารถในการระบุประเภทข้อมูลของ element ลำดับของ element และข้อจำกัดยืดหยุ่นกับการแสดงจำนวน element นอกจากนี้ XML schema เป็น เอกสาร well-formed

ถึงแม้ว่าไม่สามารถให้รายละเอียดของเทคโนโลยี เหล่านี้ แต่จะแสดงตัวอย่างสำหรับเอกสาร orders

DTD สำหรับเอกสารคือ

<!DOCTYPE orders[
<!ELEMENT orders (order*)>

<!-- order infomation -->
<!ELEMENT order (customer, orderdate, amount)>
<!ELEMENT amount #PCDATA>
<!ATTRLIST order id CDATA #REQUIRED>

<!-- customer infomation -->
<!ELEMENT customer (name, address)>
<!ELEMENT name #PCDATA>
<!ELEMENT address #PCDATA>
<!ATTRLIST customer id CDATA #REQUIRED>

<!-- date infomation -->
<!ELEMENT orderdate (year, month, day)>
<!ELEMENT year #PCDATA>
<!ELEMENT month #PCDATA>
<!ELEMENT day #PCDATA>

]>

สิ่งเหล่านี้มักจะได้รับการแทรกในเอกสาร XML โดยตรงระหว่างเริ่มต้นการประกาศ <?xml.... ?> กับ document element ทำให้ส่งได้ง่าย

XML Schema Definition (XSD) สำหรับโครงสร้างเดียวกันคือ

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<!-- document root-->
  <xs:element name="orders">
    <xs:complexType>
      <xs:sequence>
        <xs:element ref="order" maxOccurs="unbounded" />
      </xs:sequence>
    </xs:complexType>
  </xs:element>

<!-- document element-->
  <xs:element name="order">
    <xs:complexType>
      <xs:sequence>
        <xs:element ref="customer" />
        <xs:element ref="orderdate" />
        <xs:element ref="amount" />
      </xs:sequence>
    </xs:complexType>
    <xs:attribute ref="id" />
  </xs:element>

<!-- date basic element -->
<xs:element name="name" type="xs:string" />
<xs:element name="address" type="xs:string" />
<xs:element name="year" type="xs:integer" />
<xs:element name="month" type="xs:integer" />
<xs:element name="day" type="xs:integer" />
<xs:element name="amount" type="xs:float" />

<!-- complex type customer-->
  <xs:element name="customer">
    <xs:complexType>
      <xs:sequence>
        <xs:element ref="name" />
        <xs:element ref="address" />
      </xs:sequence>
      <xs:attribute name="id" type="xs:integer" use="required" />
    </xs:complexType>
  </xs:element>

<!-- complex type orderdate-->
  <xs:element name="customer">
    <xs:complexType>
      <xs:sequence>
        <xs:element ref="name" />
        <xs:element ref="address" />
      </xs:sequence>
      <xs:attribute name="id" type="xs:integer" use="required" />
    </xs:complexType>
  </xs:element>

  <xs:element name="orderdate">
    <xs:complexType>
      <xs:sequence>
        <xs:element ref="year" />
        <xs:element ref="month" />
        <xs:element ref="date" />
      </xs:sequence>
    </xs:complexType>
  </xs:element>

</xs:schema>

เทคโนโลยีที่เกี่ยวข้อง

ส่วนการทำงานความสามารถสูงอีกประเภทคือ ภาษาอธิบายเอกสารและส่วนขยายสำหรับวัตถุประสงค์อื่น สิ่งนี้นำส่วนขยายของข้อกำหนด XML และภาษาเนื้อหาใหม่ที่มีพื้นฐานบนหลักการของ XML จากการยินยอมให้ใช้ภาษาเหล่านี้ในการเน้นหลักรายละเอียดเจาะจงของโดเมน และอิสระจากความกังวลเกี่ยวกับการกระจายและ “well-formed” ตามปกติสามารถพบส่วนขยายเหล่านี้เมื่อเขียนโปรแกรมประยุกต์เว็บคือ

•  Xpath เป็นส่วนขยายขนาดเล็กในข้อกำหนด XML ที่ยอมให้สำหรับการระบุเนื้อหาเจาะจงภายในเอกสาร XML ส่วนนี้สามารถเป็น element ที่มีอยู่ภายในเอกสารหรือมีพื้นฐานจากส่วนขยาย XML ส่วนใหญ่คือ XSLT

•  XSL/XSLT โดย Extensible Stylesheet Language (XSL) เป็นตระกูลภาษาที่ยอมให้ใช้จัดรูปแบบและปรับแปลงข้อมูลในเอกสาร XML ภาษาที่เด่นคือ XSLT ( XSL Transformation) ที่ใช้เอกสารและปรับแปลงเนื้อหาให้เป็นสิ่งอื่น สิ่งนี้มีผลกระทบยากในเว็บที่ใช้ข้อมูล XML และสร้าง XHTML

•  XQuery ข้อมูลในเอกสาร XML ไม่สมบูรณ์เหมือนในฐานข้อมูล เนื่องจากธรรมชาติตามลำดับชั้นกับแบบจำลองเชิงสัมพันธ์แบบรวมของฐานข้อมูล สิ่งนี้นำไปสู่การพัฒนาภาษาสำหรับคิวรี่ข้อมูลภายในเอกสาร XML ภาษาที่เด่นคือ ภาษาโปรแกรม XQuery

•  XML – RPC นี่เป็นโปรโตคอลสำหรับการเรียกเมธอดหรือฟังก์ชันบนเครื่องทางไกล (RPC ย่อมาจาก Remote Procedure Call) ด้วยการใช้ XML เป็นวิธีการผ่านข้อมูลฟังก์ชันได้รับการส่งผ่านและส่งออก

 


  

สงวนลิขสิทธิ์ (C) widebase / Julaphak