การสร้างเว็บเซอร์วิสตอนที่ 3 สร้าง Web Services ด้วยภาษา PHP ขั้นแรกสร้าง XML Schema

3. การสร้าง Web Services ด้วยแพลตฟอร์ม PHP

3.1 การสร้าง XML Schema สำหรับ Web Services

3.1.1 วัตถุประสงค์

เราจะสร้าง Web Services ด้วยภาษา PHP โดยจัดองค์ประกอบตามภาพนี้

รูปภาพ 1 ส่วนประกอบที่เราเกี่ยวข้องเพื่อทดลองสร้าง Web Service ด้วย PHP

สังเกตจากภาพเราจำเป็นต้องทำตามลำดับคือ สร้างไฟล์ ProductList.xsd ขึ้นมาใช้เป็น Data Type ก่อน หลังจากนั้นสร้างไฟล์ ProductList.wsdl ขึ้นมาเพื่อใช้เป็น Interface และขั้นที่ 3 สร้างโปรแกรมที่เป็น PHP ไว้ในไฟล์ ProductList.php และสุดท้ายไปเรียกใช้ Web Services ทางฝั่งไคลเอ็นต์ โดยอาจจะทดลองเป็นโปรแกรมภาษา Java หรือ .NET ก็ได้

·      การพัฒนา Web Services นี้จึงถูกแบ่งออกเป็น 4 การทดลองคือ

·      การสร้าง XML Schema

·      การสร้าง WSDL

·      การสร้าง PHP Web Services Provider

·      การสร้าง Web Services Client

3.1.2 สร้างโฟลเดอร์ที่วางไฟล์ PHP

ไปที่โฟลเดอร์ htdocs ในตำแหน่งที่ติดตั้ง Apache 2.2 ไว้แล้วสร้างโฟลเดอร์ย่อยชื่อว่า lab1 ดังนี้

รูปภาพ 2 สร้างโฟลเดอร์ย่อยชื่อว่า lab1 วางไว้ภายใต้ตำแหน่ง htdocs ใน Apache 2.2

เราจะใช้โฟลเดอร์ lab1 นี้เป็นที่วางไฟล์ PHP และไฟล์อื่นๆที่เกี่ยวข้องที่อยู่ทางฝั่งเซิร์ฟเวอร์

3.1.3 สร้างไฟล์ ProductList.xsd

เปิดโปรแกรม XML Spy เพื่อออกแบบ XML Schema สำหรับใช้กำหนดโครงสร้าง XML ที่จะส่งไปกับ SOAP เมื่อเปิดโปรแกรม XML Spy ขึ้นมาแล้วให้ไปที่เมนู File à New

รูปภาพ 3 เลือกชนิดเอกสารเป็น W3C XML Schema

 คลิกปุ่ม OK จะปรากฏเอกสาร XML Schema ตัวใหม่ออกมาดังนี้

รูปภาพ 4 ได้เอกสาร Untitled2.xsd (หรือชื่ออื่นที่คล้ายกัน) เป็นเอกสารเปล่ารอการออกแบบ

เอกสาร XML Schema ที่เกิดขึ้น ยังเป็นเอกสารเปล่าที่รอให้เราออกแบบ ให้เราเลือกเมนู File à Save และบันทึกไว้เป็นไฟล์ชื่อว่า ProductList.xsd วางไว้ที่โฟลเดอร์ lab1 ที่ได้สร้างขึ้นจากขั้นตอนที่แล้ว

รูปภาพ 5 บันทึกไฟล์ XML Schema ไว้ในโฟลเดอร์ lab1 ชื่อว่า ProductList.xsd

ให้ทดสอบว่าเราสามารถเบราซ์เปิดดูไฟล์ ProductList.xsd นี้ได้จากเว็บเซิร์ฟเวอร์ โดยสตาทร์ Apache Web Server ไว้แล้วเบราซ์ไปที่ตำแหน่ง http://localhost/lab1/ProductList.xsd ควรจะสามารถเปิดไฟล์ ProductList.xsd ได้และปรากฏผลลัพธ์คล้ายดังภาพต่อไปนี้

รูปภาพ 6 เบราซ์ไปที่ตำแหน่ง http://localhost/lab1/ProductList.xsd

ต่อไปนี้เราจะเริ่มออกแบบ complexType และ element ให้กับ XML Schema เพื่อใช้กำหนด XML ที่มีโครงสร้างดังนี้

<getProductListRequest xmlns=”http://lab1.demo.info/ProductList/type”>

</getProductListRequest>

และสำหรับ XML ที่ใช้ response ให้มีโครงสร้างดังนี้

<getProductListResponse xmlns=”http://lab1.demo.info/ProductList/type”>

       <productList>

              <product>

                      <code>S10_1678</code>

                      <name> 1969 Harley Davidson Ultimate Chopper </name>

                      <price>48.81</price>

              </product>

              <product>

                      <code>S10_1949</code>

                      <name>1952 Alpine Renault 1300</name>

                      <price>98.58</price>

              </product>

       </productList>

</getProductListResponse>

โดยทั้ง request และ response จะเป็น XML ที่อยู่ภายใน Namespace ชื่อว่า http://lab1.demo.info/ProductList/type

3.1.4 กำหนด targetNamespace ของไฟล์ ProductList.xsd

คลิกปุ่ม Text ด้านล่างเอกสาร ProductList.xsd เพื่อเปลี่ยนวิวเป็นแบบตัวอักษร

รูปภาพ 7 คลิกปุ่ม Text ด้านล่างเอกสาร ProductList.xsd เพื่อเปลียนวิว (View) เป็นแบบ Text

เติมแอททริบิวท์ targetNamespace และ xmlns:tns เข้าไปที่บริเวณเปิดแท็ก xs:schema ดังนี้

ซอร์สโค้ด 1 ไฟล์ ProductList.xsd (เพิ่มแอททริบิวท์ targetNamespace และ xmlns:tns)

<?xml version="1.0" encoding="UTF-8"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified" attributeFormDefault="unqualified"

     targetNamespace="http://lab1.demo.info/ProductList/type" xmlns:tns="http://lab1.demo.info/ProductList/type">

     <xs:element name="ENTER_NAME_OF_ROOT_ELEMENT_HERE">

         <xs:annotation>

              <xs:documentation>Comment describing your root element</xs:documentation>

         </xs:annotation>

     </xs:element>

</xs:schema>

บันทึกไฟล์ ProductList.xsd ไว้แล้วสลับวิว (View) กลับไปที่ Schema/WSDL

รูปภาพ 8 สลับกลับไปที่วิวแบบ Schema/WSDL โดยคลิกที่ปุ่ม Schema/WSDL ด้านล่าง

3.1.5 สร้าง complexType ชื่อว่า ProductType

ให้คลิกขวาที่ปุ่ม Append มุมบนซ้ายมือของเอกสาร ProductList.xsd ที่เปิดอยู่ จะปรากฏเมนูห้อยลงมาให้เลือกคำสั่ง Complex Type เพื่อเพิ่ม complexType ตัวใหม่

รูปภาพ 9 เพิ่ม ComplexType โดยคลิกที่ปุ่ม Append มุมบนซ้ายมือ

จะปรากฏแถวใหม่ออกมามีชนิดเป็น complexType ให้ตั้งชื่อเป็น productType ดังนี้

รูปภาพ 10 ตั้งชื่อ complexType ตัวใหม่เป็น ProductType

คลิกไปที่ปุ่มเบราซ์ ด้านหน้าแถว complexType ProductType

รูปภาพ 11 คลิกปุ่มเบราซ์ด้านหน้าแถว complexType ProductType

จะปรากฏรูปภาพ complexType อยู่หนึ่งตัวชื่อว่า ProductType อยู่กลางไดอะแกรม และ complexType นี้ยังไม่มี element ใดๆอยู่ภายใน

รูปภาพ 12 ปรากฏ complexType ชื่อว่า ProductType เปล่าๆ ยังไม่มี element ติดอยู่

คลิกขวาที่รูปภาพ complexType ProductType ที่ปรากฏอยู่ในไดอะแกรม จะปรากฏป็อบอัพเมนู ให้เลือกคำสั่ง Add Child à Sequence ดังนี้

รูปภาพ 13 คลิกขวาที่ตัว ProductType เลือกคำสั่ง Add child à Sequence

จะปรากฏหัว Sequence ต่อติดอยู่กับ complexType ProductType ดังนี้

รูปภาพ 14 ปรากฏ Sequence ต่ออยู่กับ ProductType

คลิกขวาที่หัว Sequence แล้วเลือกคำสั่ง Add child à Element ดังนี้

รูปภาพ 15 คลิกขวาที่หัว Sequence แล้วเลือกคำสั่ง Add child à Element

ให้ตั้งชื่อ element ชื่อว่า code ดังนี้

รูปภาพ 16 ตั้งชื่อ element เป็น code (ส่วน tns: ไม่ต้องพิมพ์ จะปรากฏออกมาเอง เนื่องจาก tns: เป็น prefix ที่ตั้งไว้แต่แรก)

สังเกตว่าจะมี prefix คำว่า tns: ปรากฏออกมาด้วย นั่นแสดงว่า targetNamespace และ xmlns:tns ที่กำหนดไว้ที่ขั้นตอนที่แล้วสามารถใช้งานได้อย่างถูกต้อง

คลิกที่ element code ที่พึ่งจะสร้างขึ้น แล้วดู Details ที่ด้านซ้ายมือ

รูปภาพ 17 สังเกตที่ type ในกรอบ Details ปัจจุบันจะว่างอยู่

ถ้า type เป็นว่างๆแบบนี้ถือว่า XML Schema ตัวนี้ยังไม่สมบูรณ์ เราไม่สามารถนำไปใช้งานจริงได้ ดังนั้นให้ใส่ type เป็น xs:string ดังนี้

รูปภาพ 18 กำหนด type ของ code เป็น xs:string

ให้ใช้วิธีการเดียวกันนี้ เพิ่ม element เข้าไปอีก 2 ตัวชื่อว่า name และ price ดังนี้

รูปภาพ 19 เพิ่ม element เข้าไปอีก 2 ตัวคือ name และ price

ให้กำหนด type ของ name เป็น xs:string และ type ของ price เป็น xs:double ตามลำดับ

รูปภาพ 20 ให้ element name มี type เป็น xs:string

และ element price มี type เป็น xs:double ดังนี้

รูปภาพ 21 ให้ element price มี type เป็น xs:double

บันทึกไฟล์ ProductList.xsd ไว้ แล้วสลับไปที่วิวแบบ Text เพื่อดูเนื้อหา XML ที่เกิดขึ้น

รูปภาพ 22 เนื้อหาไฟล์ ProductList.xsd บริเวณ ProductType ที่เกิดจากการออกแบบด้วย XML Spy

3.1.6 สร้าง complexType ชื่อว่า ProductListType

ให้สลับมาที่วิว Schema/WSDL และสร้าง complexType อีกตัวชื่อว่า ProductListType ดังนี้

รูปภาพ 23 เพิ่ม complexType เข้าไปอีกตัวชื่อว่า ProductListType

ให้คลิกปุ่มเบราซ์ด้านหน้าแถว complexType ProductListType เพื่อสลับไปที่โหมดออกแบบ แล้วเพิ่ม Sequence เข้าไปดังนี้

รูปภาพ 24 เพิ่ม Sequence ให้กับ complexType ProductListType

ให้เพิ่ม element ชื่อว่า product ให้กับ Sequence ของ ProductListType ดังนี้

รูปภาพ 25 เพิ่ม element ชื่อว่า product ให้กับ Sequence ของ ProductListType

กำหนด type ของ element ชื่อว่า product ตัวนี้ ให้มีชนิดเป็น tns:ProductType

รูปภาพ 26 กำหนด type ของ product ให้เป็น tns:ProductType

สังเกตว่าเมื่อกำหนด type ของ product มีชนิดเป็น tns:ProductType จะปรากฏปุ่มเครื่องหมายบวก (+) ที่ด้านขวามือของ product ให้คลิกไปที่ปุ่มบวกนั้นจะขยายโครงสร้างของ element product ออกมาดูดังนี้

รูปภาพ 27 คลิกบวก + ด้านขวาของ product จะขยายโครงสร้างของ product ออกมาดู พบว่ามี element 3 ตัว

บันทึกไฟล์ ProductList.xsd ไว้และดำเนินการที่ขั้นตอนต่อไป

3.1.7 สร้าง complexType ชื่อว่า GetProductListResponseType

ให้ใช้วิธีเดียวกับที่ผ่านมา เพื่อสร้าง complexType ชื่อว่า GetProductListResponesType

รูปภาพ 28 สร้าง complexType ชื่อว่า GetProductListResponseType

ให้ออกแบบ complexType GetProductListResponseType ดังนี้

รูปภาพ 29 ออกแบบ Sequence และ element ชื่อว่า productList ให้มี type เป็น tns:ProductListType

เมื่อสลับไปที่วิว Text จะพบเนื้อหา XML คล้ายดังซอร์สโค้ดต่อไปนี้

รูปภาพ 30 complexType ชื่อว่า ProductListType และ GetProductListResponseType

3.1.8 สร้าง element ชื่อว่า getProductListResponse

สลับมาที่วิว Schema/WSDL แล้วคลิกที่ปุ่ม Append มุมบนซ้ายมือ แล้วเลือกคำสั่ง Element

รูปภาพ 31 คลิกที่ปุ่ม Append แล้วเลือก Element เพื่อเพิ่ม element ใหม่

เมื่อปรากฏ element ใหม่เพิ่มเข้ามาให้ใส่ชื่อ element เป็น getProductListResponse ดังนี้

รูปภาพ 32 ตั้งชื่อ element ใหม่เป็น getProductListResponse

สังเกตว่าปัจจุบันเรายังมี element อยู่ตัวนึงที่แถวบนสุดที่มีชื่อเป็น ENTER_NAME… ซึ่ง element ตัวนี้ XML Spy สร้างขึ้นมาให้อัตโนมัติ แต่เราไม่จำเป็นต้องใช้ ดังนั้นให้ลบ element ตัวบนสุดตัวนี้ทิ้งไป

รูปภาพ 33 คลิกเลือกที่ element ตัวนี้แล้วกดคีย์ DEL เพื่อลบทิ้งไป

คลิกเลือกที่ element ตัวล่างสุดที่ชื่อว่า getProductListResponse แล้วไปที่กรอบ Details ด้านขวามือ และกำหนด type เป็น tns:GetProductListResponseType

รูปภาพ 34 กำหนด type ของ element getProductListResponse เป็น tns:GetProductListResponseType

หลังจากนั้นเมื่อคลิกปุ่มเบราซ์ที่ด้านหน้าแถว element getProductListResponse จะพบรูปภาพโครงสร้างของ element เป็นดังนี้

รูปภาพ 35 โครงสร้างของ element getProductListResponse

3.1.9 กำหนดค่าจำนวนนับ minOccur และ maxOccur

จากภาพไดอะแกรมโครงสร้างของ element getProductListResponse ให้คลิกที่ตัว tns:product แล้วไปที่กรอบ Details เพื่อกำหนดให้ minOcc เป็น 0 และ maxOcc เป็น unbounded จะทำให้ได้ภาพดังนี้

รูปภาพ 36 กำหนด minOcc เป็น 0 และ maxOcc เป็น unbounded

สาเหตุที่เราต้องกำหนดให้ tns:product มี maxOccur เป็น unbounded เนื่องจากเมื่อนำไปเขียน XML จะทำให้แท็กนี้สามารถมีซ้ำๆกันได้มากกว่า 1 ครั้ง

3.1.10 นำ XML Schema ไปสร้าง XML ตัวอย่าง

หากเราต้องการรู้ว่า XML Schema ที่สร้างขึ้นนี้จะนำไปใช้กำหนดเนื้อหา XML ออกมาในรูปแบบใด เราสามารถให้ XML Spy ช่วยสร้างตัวอย่าง XML ขึ้นมาดูได้ก่อน โดยไปที่เมนู DTD/Schema à Generate Sample XML File …

รูปภาพ 37 เลือกเมนู DTD/Schema à Generate Sample XML File …

เมื่อปรากฏหน้าต่างไดอะล็อกซ์ Generate sample XML file ออกมา ให้เลือกทางเลือกดังนี้

รูปภาพ 38 หน้าต่าง Generate sample XML file

สังเกตว่าการสร้าง Sample XML จะอนุญาตให้เราเลือกเฉพาะ element เท่านั้น เราไม่สามารถเลือก complexType มาสร้างตัวอย่าง XML ได้ ในที่นี้เลือก element ชื่อว่า getProductListResponse ที่เราได้สร้างเตรียมไว้ในขั้นตอนก่อนหน้า หลังจากเลือกทางเลือกที่เหมาะสมแล้วคลิกปุ่ม OK จะได้ตัวอย่าง XML ปรากฏออกมาคล้ายดังภาพต่อไปนี้

รูปภาพ 39 ตัวอย่าง XML สำหรับ element getProductListResponse

ให้บันทึกตัวอย่าง XML ที่เกิดขึ้นนี้ไว้เป็นไฟล์ชื่อว่า SampleResponse.xml วางไว้ที่โฟลเดอร์ lab1

รูปภาพ 40 บันทึกตัวอย่าง XML นี้เก็บไว้เป็นไฟล์ชื่อว่า SampleResponse.xml วางไว้ที่โฟลเดอร์ lab1

ให้ทดลองเบราซ์ดูจากอินเตอร์เน็ตเบราเซอร์ โดยไปที่ http://localhost/lab1/SampleResponse.xml ควรจะปรากฏหน้าเว็บคล้ายดังภาพต่อไปนี้

รูปภาพ 41 ทดลองเบราซ์ไฟล์ SampleResponse.xml จากตำแหน่ง http://localhost/lab1/SampleResponse.xml

3.1.11 ทดลองฝ่าฝืนกฏของ XML Schema

สังเกตว่าในไฟล์ SampleResponse.xml ที่บริเวร์แท็กเปิด tns:getProductListResponse จะผูกโยงเนื้อหา XML นี้ไว้กับไฟล์ XML Schema ชื่อว่า ProductList.xsd

รูปภาพ 42 การตรวจสอบไฟล์ XML ด้วย XML Schema โดยใช้แอททริบิวท์ xsi:schemaLocation

ซึ่งก็หมายความว่าหากเนื้อหา XML ในไฟล์นี้ไม่เป็นไปตามข้อกำหนดที่เขียนไว้ในไฟล์ ProductList.xsd จะถือว่า XML นี้ผิดกฏการตรวจสอบและจะเกิด Error เมื่อนำไปใช้งานกับ XML Parser เราสามารถทดลองฝ่าฝืนกฏแบบง่ายๆและให้ XML Spy แจ้งเตือน โดยลองลบบรรทัด tns:code บรรทัดที่ 6 ทิ้งไปทั้งบรรทัด จนเหลือโค้ดดังนี้

รูปภาพ 43 ลองลบบรรทัดนี้ทิ้งแล้วบันทึกไฟล์ SampleResponse.xml ดูอีกที

จะพบว่า XML Spy แจ้งข้อความเตือนออกมาว่าไฟล์นี้ไม่ถูกต้องตามกฏที่เขียนไว้ใน XML Schema

รูปภาพ 44 ปรากฏแจ้งเตือนว่าไฟล์ผิดกฏ XML Schema และไม่ยอมให้บันทึกไฟล์

ให้เราคลิกปุ่ม No แล้วกลับไปแก้ไขโค้ดที่บรรทัดที่ 6 ให้มีแท็ก <tns:code> กลับออกมาเหมือนเดิม จึงจะสามารถบันทึกไฟล์ SampleResponse.xml นี้ได้

จากการทดลองนี้จะทำให้เราเข้าใจ XML Schema มากขึ้น ว่า XML Schema มีหน้าที่ตรวจสอบว่าเนื้อหา XML ที่สร้างขึ้นเป็นไปตามกฏเกณฑ์ที่ตั้งไว้หรือไม่ หากไม่เป็นไปตามนั้น จะได้ตรวจสอบไม่ผ่าน โดยไม่ยอมให้ข้อมูลที่ผิดพลาดเข้าสู่ระบบ

3.1.12 สร้าง complexType ชื่อว่า GetProductListRequestType

กลับไปที่ไฟล์ ProductList.xsd แล้วให้ใช้วิธีการเช่มเดียวกับที่ผ่านมาสร้าง complexType ขึ้นใหม่อีกตัวนึง ตั้งชื่อว่า GetProductListRequestType ดังนี้

รูปภาพ 45 สร้าง complexType ชื่อว่า GetProductListRequestType

complexType ที่ชื่อว่า GetProductListRequestType นี้ไม่จำเป็นต้องมี Sequence และ element อยู่ภายใน เนื่องจากเราไม่มีข้อมูลใดที่จำเป็นต้องส่งให้ Web Services ในขณะ request

3.1.13 สร้าง element ชื่อว่า getProductListRequest

ให้ใช้วิธีการเช่นเดียวกับที่ผ่านมา สร้าง element เข้าไปอีกตัวชื่อว่า getProductListRequest และกำหนด type ของ element ตัวนี้ให้เป็นชนิด tns:GetProductListRequestType

รูปภาพ 46 สร้าง element ชื่อว่า getProductListRequest และให้มี type เป็น tns:GetProductListRequestType

ทดลองนำ element ชื่อว่า getProductListRequest นี้มาสร้างตัวอย่าง XML ควรจะได้ XML ดังนี้

รูปภาพ 47 ตัวอย่าง XML ของ element ชื่อว่า getProductListRequest

ให้บันทึกไฟล์ตัวอย่าง XML นี้ไว้ชื่อว่า SampleRequest.xml พร้อมทั้งไปเบราซ์ดูที่หน้าเว็บที่ตำแหน่ง http://localhost/lab1/SampleRequest.xml

รูปภาพ 48 เบราซ์ดูไฟล์ SampleRequest.xml ที่เป็นตัวอย่าง XML ของ element getProductListRequest

เมื่อทำมาถึงขั้นตอนนี้แล้วเราจะได้ XML Schema ที่ประกอบด้วย element 2 ตัวคือ getProductListRequest และ getProductListResponse พร้อมทั้ง complexType อีก 4 ตัวคือ ProductType, ProductListType, GetProductListResponseType และ GetProductListRequestType

รูปภาพ 49 ผลลัพธ์ของการทดลองนี้คือ 2 element และ 4 complexType

เราจะนำ element ทั้ง 2 ตัวนี้ไปใช้ทำเป็น input และ output ของ SOAP ให้กับไฟล์ WSDL ในการทดลองต่อไป