Site icon บริษัท โค๊ดบี จำกัด

Unity C# โหลดและแสดง JSON Data ติดฐานข้อมูล PHP & MySQL

<h3>Unity C&num; โหลดและแสดง JSON Data ติดฐานข้อมูล PHP &&num;038&semi; MySQL<&sol;h3>&NewLine;<p>1&period; ผมเทสโดยออกแบบฐานข้อมูลง่าย ๆ นะครับมีแค่ 2 field คือ id&comma;name ตามรูปครับ<br &sol;>&NewLine;<a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-1&period;png" rel&equals;"attachment wp-att-244"><img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-1-620x92&period;png" alt&equals;"unity-c&num;-php-mysql-connect-1" width&equals;"620" height&equals;"92" class&equals;"alignnone size-medium wp-image-244" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-1&period;png" data-full-size&equals;"905x135" &sol;><&sol;a><&sol;p>&NewLine;<p><&excl;--more--><&sol;p>&NewLine;<p>2&period; สร้างไฟล์ connect&period;php สำหรับติดต่อฐานข้อมูล<&sol;p>&NewLine;<pre class&equals;"lang&colon;php decode&colon;true " >&lt&semi;&quest;php &NewLine; &NewLine;define&lpar;"db&lowbar;server"&comma; "localhost"&rpar;&semi; &NewLine;define&lpar;"db&lowbar;username"&comma; "root"&rpar;&semi; &NewLine;define&lpar;"db&lowbar;password"&comma; "root"&rpar;&semi; &NewLine;define&lpar;"db&lowbar;name"&comma; "dbname"&rpar;&semi; &NewLine;&Tab; &NewLine;&dollar;conn &equals; mysql&lowbar;connect&lpar;db&lowbar;server&comma;db&lowbar;username&comma;db&lowbar;password&rpar;&semi; &NewLine;mysql&lowbar;select&lowbar;db&lpar;db&lowbar;name&comma; &dollar;conn&rpar;&semi; &NewLine;mysql&lowbar;query&lpar;'SET NAMES UTF8'&rpar;&semi; &NewLine; &NewLine;&quest;&gt&semi;<&sol;pre>&NewLine;<p>3&period; สร้างไฟล์ saveload&period;php สำหรับรับค่าจาก C&num; และบันทึกลงฐานข้อมูล พร้อมกับ return json data กลับไป<&sol;p>&NewLine;<pre class&equals;"lang&colon;php decode&colon;true " >&lt&semi;&quest;php &NewLine; &NewLine;require&lowbar;once&lpar;"connect&period;php"&rpar;&semi; &NewLine; &NewLine;&dollar;name &equals; &dollar;&lowbar;REQUEST&lbrack;'name'&rsqb;&semi; &NewLine; &NewLine;if&lpar;&dollar;name &excl;&equals; ""&rpar;&lbrace; &NewLine;&Tab;&dollar;sql &equals; "INSERT INTO member SET name&equals;'&dollar;name'"&semi; &NewLine;&Tab;&dollar;result &equals; mysql&lowbar;query&lpar;&dollar;sql&rpar;&semi; &NewLine;&rcub; &NewLine;&dollar;sql &equals; "SELECT&ast;FROM member"&semi; &NewLine;&dollar;result &equals; mysql&lowbar;query&lpar;&dollar;sql&rpar;&semi; &NewLine; &NewLine;&dollar;data &equals; array&lpar;&rpar;&semi; &NewLine;while &lpar;&dollar;row &equals; mysql&lowbar;fetch&lowbar;assoc&lpar;&dollar;result&rpar;&rpar; &lbrace; &NewLine; &dollar;r &equals; array&lpar; &NewLine; 'id' &equals;&gt&semi; &dollar;row&lbrack;'id'&rsqb;&comma; &NewLine; 'name' &equals;&gt&semi; &dollar;row&lbrack;'name'&rsqb; &NewLine; &rpar;&semi; &NewLine;&Tab;array&lowbar;push&lpar;&dollar;data&comma;&dollar;r&rpar;&semi; &NewLine;&rcub; &NewLine;echo json&lowbar;encode&lpar;&dollar;data&rpar;&semi; &NewLine; &NewLine;&quest;&gt&semi;<&sol;pre>&NewLine;<p>4&period; เปิดโปรแกรม unity ขึ้นมา ทดลองสร้าง InputField และ Button ให้มีหน้าตาประมาณนี้ ส่วนนี้ ตามใจท่านผู้ชมครับ<br &sol;>&NewLine; <a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-3&period;png" rel&equals;"attachment wp-att-250"><img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-3&period;png" alt&equals;"unity-c&num;-php-mysql-connect-3" width&equals;"515" height&equals;"559" class&equals;"alignnone size-full wp-image-250" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-3&period;png" data-full-size&equals;"515x559" &sol;><&sol;a><&sol;p>&NewLine;<p>5&period; คลิกขวาที่หน้าต่าง Hierarchy เลือก Create Empty เราจะได้ GameObject มาให้ตั้งชื่อใหม่ว่า AppController สำหรับ GameObject ตัวนี้จะเป็นวัตถุเปล่า ๆ นะครับ เอาไว้ใส่ C&num; Script ที่เราจะเขียนเพิ่มภายหลัง<br &sol;>&NewLine;<a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-4&period;png" rel&equals;"attachment wp-att-253"><img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-4&period;png" alt&equals;"unity-c&num;-php-mysql-connect-4" width&equals;"200" height&equals;"285" class&equals;"alignnone size-full wp-image-253" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-4&period;png" data-full-size&equals;"200x285" &sol;><&sol;a><&sol;p>&NewLine;<p>6&period; เสร็จแล้วให้ทำการเพิ่ม C&num; script ไปที่ AppController กดไปที่ Inspector->Add Component->New script ตั้งชื่อว่า AppController กดปุ่ม Create And Add<br &sol;>&NewLine; <a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-5&period;png" rel&equals;"attachment wp-att-252"><img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-5&period;png" alt&equals;"unity-c&num;-php-mysql-connect-5" width&equals;"474" height&equals;"522" class&equals;"alignnone size-full wp-image-252" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-5&period;png" data-full-size&equals;"474x522" &sol;><&sol;a><&sol;p>&NewLine;<p>7&period; ให้สังเกตุที่ส่วนของแทบ project เราจะได้ไฟล์ AppControler&period;cs มาให้ดับเบิ้ลคลิก<br &sol;>&NewLine; ระบบจะเปิดโปรแกรม MonoDevelop ขึ้นมาครับ<br &sol;>&NewLine; และก่อนที่เราจะไปเขียนโค๊ดที่ไฟล์นี้ ให้ไปโหลด LitJson มาไว้ใน assets ก่อนครับ<br &sol;>&NewLine; โหลดที่ <a target&equals;"&lowbar;blank" href&equals;"https&colon;&sol;&sol;lbv&period;github&period;io&sol;litjson&sol;">https&colon;&sol;&sol;lbv&period;github&period;io&sol;litjson&sol;<&sol;a><br &sol;>&NewLine; <a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-6&period;png" rel&equals;"attachment wp-att-256"><img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-6&period;png" alt&equals;"unity-c&num;-php-mysql-connect-6" width&equals;"198" height&equals;"178" class&equals;"alignnone size-full wp-image-256" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-6&period;png" data-full-size&equals;"198x178" &sol;><&sol;a><&sol;p>&NewLine;<p>8&period; ใน AppController&period;cs ให้เราสร้างตัวแปรแบบ public ขึ้นมา เพื่อเชื่อมโยงกับ InputField และ Button ที่เราสร้างไว้ก่อนหน้านี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;c&num; decode&colon;true " >using UnityEngine&semi; &NewLine;using UnityEngine&period;UI&semi; &NewLine;using System&period;Collections&semi; &NewLine;using LitJson&semi; &sol;&sol; import json เข้ามารอไว้เลย &NewLine; &NewLine;public class AppController &colon; MonoBehaviour &lbrace; &NewLine; &NewLine;&Tab;public Button btnSubmit&semi; &NewLine;&Tab;public InputField txtName&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p>9&period; ในหน้าต่าง hierarchy เลือก AppController แล้วทำการเชื่อมโยง โดยการลาก Button และ InputField ไปแทนค่าตัวแปรที่เราเขียนไว้คือ btnSubmit และ txtName<br &sol;>&NewLine;<a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-7&period;png" rel&equals;"attachment wp-att-259"><img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-7&period;png" alt&equals;"unity-c&num;-php-mysql-connect-7" width&equals;"474" height&equals;"411" class&equals;"alignnone size-full wp-image-259" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-7&period;png" data-full-size&equals;"474x411" &sol;><&sol;a><&sol;p>&NewLine;<p>10&period; เปิดไฟล์ AppController&period;cs ขึ้นมาครับ แล้วเขียนโค๊ด เพิ่มขึ้นมาประมาณนี้ครับ<&sol;p>&NewLine;<pre class&equals;"lang&colon;c&num; decode&colon;true " >private JsonData userData&semi; &NewLine; &NewLine;&Tab;void Start &lpar;&rpar; &lbrace; &NewLine;&Tab;&Tab;btnSubmit&period;onClick&period;AddListener &lpar;delegate &lbrace; &NewLine;&Tab;&Tab;&Tab;Debug&period;Log&lpar;"click &excl;"&rpar;&semi; &NewLine;&Tab;&Tab;&Tab;StartCoroutine&lpar;submitMyName&lpar;&rpar;&rpar;&semi; &NewLine;&Tab;&Tab;&rcub;&rpar;&semi; &NewLine;&Tab;&rcub; &NewLine; &NewLine;&Tab;IEnumerator submitMyName &lpar;&rpar; &lbrace; &NewLine;&Tab;&Tab;if &lpar;txtName&period;text&period;Length &lt&semi;&equals; 0&rpar; &lbrace; &NewLine;&Tab;&Tab;&Tab;Debug&period;Log &lpar;"please enter name"&rpar;&semi; &NewLine;&Tab;&Tab;&Tab;return false&semi; &NewLine;&Tab;&Tab;&rcub; &NewLine;&Tab;&Tab;Debug&period;Log&lpar;"submit &excl;"&rpar;&semi; &NewLine;&Tab;&Tab;WWWForm form &equals; new WWWForm&lpar;&rpar;&semi; &NewLine;&Tab;&Tab;form&period;AddField&lpar;"name"&comma;txtName&period;text&rpar;&semi; &NewLine; &NewLine;&Tab;&Tab;WWW www &equals; new WWW&lpar;"http&colon;&sol;&sol;localhost&colon;8888&sol;saveload&period;php"&comma; form&rpar;&semi; &NewLine;&Tab;&Tab;yield return www&semi; &NewLine; &NewLine;&Tab;&Tab;userData &equals; JsonMapper&period;ToObject&lpar;www&period;text&rpar;&semi; &NewLine; &NewLine;&Tab;&Tab;int maxUser &equals; userData&period;Count&semi; &NewLine;&Tab;&Tab;for&lpar;int i&equals;0&semi;i&lt&semi;maxUser&semi;i&plus;&plus;&rpar; &NewLine;&Tab;&Tab;&lbrace; &NewLine;&Tab;&Tab;&Tab;Debug&period;Log&lpar;userData&lbrack;i&rsqb;&lbrack;"name"&rsqb;&rpar;&semi; &NewLine;&Tab;&Tab;&rcub; &NewLine;&Tab;&Tab;StopCoroutine &lpar;submitMyName&lpar;&rpar;&rpar;&semi; &NewLine;&Tab;&rcub;<&sol;pre>&NewLine;<p>11&period; ลองกดปุ่ม play ทดสอบดูครับ จะเห็นข้อมูลที่เรากรอกไปทุก ๆ ครั้ง ถูกบันทึกและรีเทินค่ากลับมาที่หน้าต่าง Console ที่เหลือก็สุดแล้วแต่จะเอาข้อมูลไปทำอะไรครับ<br &sol;>&NewLine;<a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-8&period;png" rel&equals;"attachment wp-att-262"><img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-8&period;png" alt&equals;"unity-c&num;-php-mysql-connect-8" width&equals;"198" height&equals;"263" class&equals;"alignnone size-full wp-image-262" data-full&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;01&sol;unity-c-php-mysql-connect-8&period;png" data-full-size&equals;"198x263" &sol;><&sol;a><&sol;p>&NewLine;

Exit mobile version