การใช้งานโปรแกรมประยุกต์บนอุปกรณ์คอมพิวเตอร์พกพา

บทท่ี 4 การสร้างแอพพลิเคชันด้วย jQuery Mobile รู้จักกับ jQuery และ jQuery Mobile jQuery เป็น Java Script Framework ท่ใี ชใ้ นการพฒั นาเว็บแอพพลเิ คชนั เพ่ือลด ภาระในการเขียน Java Script เช่นจากท่ีตอ้ งเขยี น 20 บรรทดั อาจลดลงเหลือแค่ 5 บรรทดั งานท่ีเคยเขียนยากๆ ดว้ ย Java Script พอมาเขยี นดว้ ย jQuery สามารถ เขียนไดโ้ ดยง่าย ซง่ึ ในตอนนีท้ มี jQuery ไดแ้ บง่ ชดุ API ออกเป็น 3 รูปแบบคือ

▪ jQuery – ใชก้ บั การเขียนเวบ็ ท่วั ไป เนน้ การเขา้ ถึง element ตา่ ง ๆ ของ HTML และเขียนโปรแกรมติดตอ่ Server ดว้ ย AJAX ท่คี นนยิ มกนั เพราะไฟล์ เล็กมาก ▪ jQueryUI – มีฐานเดิมมาจาก jQuery และเพ่มิ เตมิ สว่ นของ Widget (พวก คอมโพเนน้ สาเรจ็ รูปเช่น เมนู ไดอะลอกบ๊อกซ์ ปฏทิ นิ เป็นตน้ ) สาหรบั งาน ออกแบบเว็บ ▪ jQuery Mobile – ใชฐ้ านจาก jQuery โดยมกั ถกู เรยี กยอ่ ๆวา่ JQM โดยเนน้ ท่ี การแสดงผลบนหนา้ จอมอื ถือ หลกั การเขียนจะมองเป็น page (คือ 1 หนา้ จอ ของมือถือ) โดยในไฟล์ html 1 ไฟล์ อาจมีหลาย page ก็ได้ ทาใหก้ ารเขียน UI (User Interface) เพ่ือรองรบั มอื ถือหรอื แท็บเลต็ กลายเป็นเร่อื งง่าย นอกจากนนั้ ยงั มีคนเขียน Plug-in แบบ Opensource มาใหใ้ ชอ้ ีกเป็นจานวนมาก และดว้ ยท่มี นั เป็น Java Script จงึ สามารถใชร้ ว่ มกบั ภาษาโปรแกรมยอดนิยมอยา่ ง PHP, JSP, JSF และ ASP.NET รวมถงึ HTML5 ไดโ้ ดยไมม่ ีปัญหา ลองดตู วั อยา่ งโคด้ เทียบกบั ของตอนท่ีแลว้ //โคด้ เดมิ ของ app.js ของตอนทแี่ ล้ว function changeContent() { var txt = this.innerHTML; var ct = document.getElementById(\"content\"); ct.innerHTML = \"<h1>\" + txt + \"</h1>\"; }

function init () { document.getElementById(\"bt1\").onclick = changeContent; document.getElementById(\"bt2\").onclick = changeContent; document.getElementById(\"bt3\").onclick = changeContent; } window.onload = init; //โค้ด jQuery ซงึ่ ทางานไดเ้ หมอื น Java Script แตส่ ัน้ กว่าเดมิ เยอะ function changeContent() { //เลอื ก <div id=\"content\"> แล้วเซต็ ข้อมูลของ <button> ลงไป $(\"#content\").html(\"<h1>\" + $(this).html() + \"</h1>\"); } function init () { //เลือก <button> bt1, bt2, bt3 แล้วกาหนด function changeContenet สาหรับ onclick $(\"#bt1, #bt2, #bt3\").click(changeContent); } // กาหนดให้ init () ทางานเมื่อโหลดเอกสารเสร็จ

$(document).ready(init); หลักสูตรเร่งรัด jQuery การเขยี น jQuery ถา้ คนทคี่ นุ้ เคยกบั CSS และ Java Script จะกลายเป็นเรอื่ งงา่ ย แตถ่ า้ ไม่คนุ้ อาจตอ้ งใชเ้ วลากบั ลงแรงหนอ่ ย ลองเขา้ ไปฝึกฝนใน นี้ http://api.jquery.com/ แลว้ ดูวธิ ีใชแ้ ตล่ ะหวั ขอ้ สว่ นของผมจะเลอื กดงึ เฉพาะที่ จาเป็นในการใชง้ าน แลว้ จะคอ่ ยๆทยอยปล่อยของตามเนอื้ หาไปเรอื่ ย ๆ แตม่ สี ่งิ ที่ ตอ้ งรูอ้ ยูน่ ดิ หนอ่ ยเพอื่ ใหง้ า่ ยในการเขา้ ใจหวั ขอ้ อนื่ ๆ ▪ โคด้ ของ jQuery ทางานผา่ นสญั ลกั ษณ์ $ ใชร้ ว่ มกบั การเลอื ก (selector) ซ่ึงจะใกลเ้ คยี งกบั selector ของ CSS ▪ $(“selector”) คอื การเลือก element ใด ๆ เชน่ $(“h1”), $(“p”), $(“a”), $(“input”) ▪ $(“. selector”) คอื การเลอื ก class เหมอื นกบั เรอื่ งของ CSS เชน่ $(“. myClass”) คอื การเลอื ก <div class=” myClass”> นน่ั เอง ▪ $(“#selector”) คอื การเลอื ก id เหมอื นกบั ของ CSS เชน่ กนั เชน่ $(“#myID”) คอื การเลอื ก <div id=” myID”> ▪ สามารถเลอื กแบบผสมได้ เชน่ $(“div.myClass”) หรอื $(“div.myID”) ▪ สามารถเลอื กแบบรวมกล่มุ หลายๆตวั พรอ้ มกนั ได้ เชน่ $(“#myID , #myClass, h1, a”) ▪ เมอื่ เลอื กไดแ้ ลว้ จะนามาทาอะไรตอ่ กแ็ ลว้ แตเ่ รา เช่น $(“#myID”).html(“Hello”) ใสค่ า่ “Hello” ไปใน myID เป็นตน้

นอกจาก jQuery Mobile มีตวั อน่ื ใหใ้ ช้อกี รึเปล่า? มีครบั มีเยอะดว้ ย ลองคน้ ดใู น Google ไดซ้ ง่ึ ก็แลว้ แต่คนชอบ มีทงั้ แบบฟรี และแบบ เสียเงินโดยแตล่ ะตวั กจ็ ะมีขอ้ ดีขอ้ ดอ้ ยกนั คนละแบบ ขอยกตวั อยา่ งมาเปรยี บเท่ยี บให้ ดนู ะครบั ▪ Sencha Touch – เป็นเวอรช์ ่นั Mobile ของ ExtJS คแู่ ข่งของ jQuery รูปแบบการเขียนจะเนน้ หนกั ไปท่ีโคด้ ของ Java Script และการกาหนดคา่ ตา่ ง ๆดว้ ย JSON ทาใหเ้ วลาเขียนตอ้ งมีความคนุ้ เคยกบั Java Script และรูปแบบ การเขียนของ ExtJS อยพู่ อสมควร …ณ ตอนท่ีเขียนอยนู่ ีต้ วั API ยงั คงใช้ Theme แบบโบราณอยู่ (ประมาณหนา้ จอของ iOS6 ซง่ึ ตอนนีไ้ มม่ ีใครใชแ้ ลว้ ) ▪ ionic – นอ้ งใหมม่ าแรง ท่ีมาพรอ้ มกบั ตวั Cordova เพ่ือทา Hybrid Mobile App (ท่เี ขียนดว้ ย HTML5 แลว้ แปลงไปเป็น iOS, Android) โดยเฉพาะ รูปแบบการเขียนเป็นแบบ MVC (Model-View-Controller) และใช้ AngularJS เป็นโคด้ หลกั ทาใหค้ นท่ีเพ่งิ เรม่ิ เขียนอาจจะเจอสตนั้ ไดเ้ หมือนกนั จดุ เดน่ ของ ตวั นีอ้ ยทู่ ่ี UI ครบั ทาออกมา เรยี บสวย นา่ ใช้ และท่ีสาคญั มนั ปรบั ใหต้ าม Platform ปลายทางเลย เช่น UI ของ iOS จะไมเ่ หมอื นของ Android ถา้ ใครจะ ทา Hybrid App ใหด้ โู ปร แนะนาตวั นีเ้ ลยครบั (ตวั นีผ้ มจะเขียนลง เป็นตอนๆ หลงั จากจบเร่อื งเอาแอพขนึ้ PlayStore ครบั ) ▪ ตวั อ่ืน ๆเช่น Onsen UI, Kendo UI, Framework 7 เป็นตน้ ซง่ึ มีจดุ ดจี ดุ ดอ้ ย ไมเ่ หมือนกนั วา่ งๆก็ลองเขา้ ไปดนู ะครบั ถา้ เช่ียวแลว้ ชอบใจตวั ไหนก็ใชต้ วั นัน้ สว่ น Responsive Framework ยอดนยิ มอย่าง Bootstrap และ Web App Framework อยา่ ง AngularJS ก็ยงั มคี นใชอ้ ยูเ่ ป็นจานวนมาก แตส่ ว่ นใหญจ่ ะเนน้ ใน การเขยี นเวบ็ และมหี ลาย Framework (เช่น ionic) นาไปใชเ้ ป็นสว่ นประกอบ ถา้ มี

เวลายงั ไมเ่ หนอื่ ยก็ศกึ ษาเลอื กดคู รบั (แตค่ วามเหน็ สว่ นตวั คอื พยายามพง่ึ พา Framework ใหน้ อ้ ยทสี่ ดุ แลว้ ใชค้ วามรูเ้ รอื่ ง CSS และ JavaScript ปรบั แตง่ เอาครบั ถา้ ตอ้ งการเนน้ ทปี่ ระสทิ ธิภาพ Pure Java Script แนน่ อนทสี่ ดุ ฟันธง) การตดิ ตัง้ และการใช้งาน ผมขอรวบรดั เนน้ ท่ี JQM เลยนะครบั เพราะก็องิ อยบู่ นโคด้ ของ jQuery และมบี างสว่ น ท่เี พ่มิ ขนึ้ มา วิธีติดตงั้ คือเขา้ ไปท่ี http://jquerymobile.com แลว้ ดาวนโ์ หลด jQueryMobile ตวั ลา่ สดุ (Lastest stable) ณ. ตอนท่ีเขยี นน่ีคือเวอรช์ ่นั 1.4.5 เม่ือไดไ้ ฟล์ zip มาแลว้ ใหใ้ ชโ้ ปรแกรมแตกไฟล์ แลว้ หาโฟลเดอร์ demo ในนนั้ มีไฟล์ ตวั อยา่ งอยเู่ พียบ คณุ สามารถดโู ปรแกรมตวั อยา่ งโดยเปิดไฟล์ index.html ได้ … หลงั จากนนั้ ใหม้ องหาโฟลเ์ ดอร์ js และ css ซง่ึ เราจะนาไปใชใ้ น NetBean IDE สามารถใชว้ ิธี copy ไปวางใน Site Root หรอื จะใชว้ ิธีลากจาก Windows Explorer มาไวท้ ่ี Site Root ก็ได้

หลงั จากนนั้ ลากไฟล์ jquerymobile.css, jquery.js และ jquerymobile.js มาไวก้ อ่ น แท็ก </head> หลงั จากนนั้ ก็สรา้ งโฟลเ์ ดอร์ app และสรา้ งไฟล์ app.css และ app.js เหมือนบทความท่แี ลว้ เสรจ็ แลว้ ลาก app.css วางไวใ้ ต้ jquerymobile.css และ app.js วางไวใ้ ต้ jquerymobile.js ดตู ามรูป

เริ่มโปรแกรมแรกกัน ขอเรม่ิ ดว้ ยโปรแกรมเบาๆ กอ่ นละกนั นะครบั โจทยค์ อื ใหเ้ ขียนโปรแกรมแสดงรายช่ือ เพ่ือนเรา 10 คน ในลกั ษณะของ List Menu โดยเม่อื คลกิ ท่รี ายการโปรแกรมจะพาไป อีกหนา้ หนง่ึ ซง่ึ แสดงรายละเอยี ดของเพ่ือนเรา(เป็นพืน้ ฐานของโปรแกรม สมดุ โทรศพั ทน์ ่นั เอง) เขียนหนา้ main ใต้ <body> ในไฟล์ index.html ดงั นี้ <html> <head> <title>TODO supply a title</title> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link href=\"css/themes/default/jquery.mobile-1.4.5.min.css\" rel=\"stylesheet\" type=\"text/css\"/> <link href=\"app/app.css\" rel=\"stylesheet\" type=\"text/css\"/> <script src=\"js/jquery.js\" type=\"text/javascript\"></script> <script src=\"js/jquery.mobile-1.4.5.js\" type=\"text/javascript\"></script> <script src=\"app/app.js\" type=\"text/javascript\"></script> </head> <body>

<div id=\"main\" data-role=\"page\"> <div data-role=\"header\"> <h1>My JQM App</h1> </div> <div data-role=\"content\"> <ul data-role=\"listview\" data-filter=\"true\"> <li><a href=\"#p1\">Person 1</a></li> <li><a href=\"#p2\">Person 2</a></li> <li><a href=\"#p3\">Person 3</a></li> <li><a href=\"#p4\">Person 4</a></li> <li><a href=\"#p5\">Person 5</a></li> <li><a href=\"#p6\">Person 6</a></li> <li><a href=\"#p7\">Person 7</a></li> <li><a href=\"#p8\">Person 8</a></li> <li><a href=\"#p9\">Person 9</a></li> <li><a href=\"#p10\">Person 10</a></li> </ul> </div>

<div data-role=\"footer\" data-position=\"fixed\"> <h1>My Footer</h1> </div> </div> <! -- End Main Page --> </body> </html> ทดสอบการทางานโดยการ Run เม่ือเบราเซอรเ์ ปิดขนึ้ ใหก้ ด F12 เพ่ือเขา้ Developer Mode แลว้ คลกิ ท่รี ูป “มือถือ” เพ่ือจาลองการแสดงผล … ในชอ่ Device คณุ สามารถ เลือกรุน่ ของมอื ถือท่ีตอ้ งการทดสอบได้ หรอื เลอื กการแสดงผล แนวตงั้ (Portrait) หรอื แนวนอน (Landscape)

เพ่มิ หนา้ แสดงรายละเอียดใหค้ รบจานวนคน (ของตอนนีเ้ ราจะทาแบบถึก กอ่ นเด๋ยี ว ตอนหนา้ คอ่ ยใหด้ งึ ขอ้ มลู จาก JSON นะ) <! -- End Main Page --> <div id=\"p1\" data-role=\"page\"> <div data-role=\"header\"> <h1>Person 1</h1>

</div> <div data-role=\"content\"> <h1>Person 1</h1> <h3>Phone: 11111111</h3> <h3>Email: [email protected]</h3> <a href=\"#main\" data-role=\"button\">Back</a> </div> <div data-role=\"footer\" data-position=\"fixed\"> <h1>My Footer</h1> </div> </div> <! -- End Page 1 --> <div id=\"p2\" data-role=\"page\"> <div data-role=\"header\"> <h1>Person 2</h1> </div> <div data-role=\"content\"> <h1>Person 2</h1> <h3>Phone: 22222222</h3>

<h3>Email: [email protected]</h3> <a href=\"#main\" data-role=\"button\">Back</a> </div> <div data-role=\"footer\" data-position=\"fixed\"> <h1>My Footer</h1> </div> </div> <! -- End Page 2 --> <! -- ...ทาใหค้ รบ p1-p10 ใช้วิธี copy วางแล้วเปล่ียนคา่ ได้ --> ทดสอบการเปล่ยี นหนา้ : ตอนนีเ้ ราสามารถกดท่ี list menu เพ่ือไปยงั หนา้ ตา่ งๆ ท่ี ตอ้ งการไดแ้ ละกดป่มุ [Back] เพ่ือยอ้ นกลบั ไปยงั หนา้ แรก

การเปลีย่ นหน้าด้วย โคด้ Java Script นอกจากการเปล่ยี นหนา้ โดยใช้ <a href=”#pageid”> แลว้ เรายงั สามารถใชโ้ คด้ Java Script ในการเปล่ียนหนา้ ดว้ ยเหตผุ ลหลายๆอย่างเชน่ ตอ้ งมีการเตรยี มขอ้ มลู กอ่ นเปลยี่ นหนา้ หรอื ตอ้ งการควบคมุ การทางานผา่ นโคด้ แทนการกาหนดฝังไวใ้ น HTML เพ่ือความสะดวกในการจดั การ // app.js function gotoDetailPage () { $. mobile.changePage(\"#p1”, {\"transition\":\"slide\"}); var pdata = $(this).text ();

// กาหนด Person # ใหกั ับ title และช่ือ $(\"#ptitle, #pname\").html(pdata); //แยก \"Person 1\" ใหเ้ ป็ น [\"Person\",\"1\"] เก็บใน ar [] var ar = pdata.split(\" \"); //สร้างเบอรโ์ ทรโดยการแทนที่ ตัวเลข person ลงใน 11111111 var phone = \"11111111\".replace(/\\d/g,ar[1]); //กาหนดรายละเอียดของ person ทงั้ phone และ email $(\"#pphone\").html(phone); $(\"#pemail\").html(\"p\" + ar[1] + \"@abc.com\"); } function init(){ //เลอื ก <a> ทกุ ตัวทอี่ ยู่ใต้ <ul id=\"#mylist\"> $(\"#mylist a\").click(gotoDetailPage); // กาหนดการทางานของป่ มุ backBt โดยใช้ฟังชันไม่มีช่อื function(){...} $(\"#backBt\").click(function (){ //ใช้การเปลีย่ นหน้าแบบ slide โดยทา animation แบบย้อนกลับ $.mobile.changePage(\"#main\",{\"transition\":\"slide\", \"reverse\":\"true\"}); });

} //เขยี นลดรูป เหมอื นกบั $(document).redy(init); $(init); เปลย่ี นโค้ดส่วนของ index.html ใหส้ อดคล้องกับ jQuery ของเรา <body> <div id=\"main\" data-role=\"page\"> <div data-role=\"header\"> <h1>My JQM App</h1> </div> <div data-role=\"content\"> <ul id=\"mylist\" data-role=\"listview\" data-filter=\"true\"> <li><a href=\"#\">Person 1</a></li> <li><a href=\"#\">Person 2</a></li> <li><a href=\"#\">Person 3</a></li> <li><a href=\"#\">Person 4</a></li> <li><a href=\"#\">Person 5</a></li> <li><a href=\"#\">Person 6</a></li> <li><a href=\"#\">Person 7</a></li>

<li><a href=\"#\">Person 8</a></li> <li><a href=\"#\">Person 9</a></li> <li><a href=\"#\">Person 10</a></li> </ul> </div> <div data-role=\"footer\" data-position=\"fixed\"> <h1>My Footer</h1> </div> </div> <! -- End Main Page --> <div id=\"p1\" data-role=\"page\"> <div data-role=\"header\"> <h1 id=\"mytitle\">Person 1</h1> </div> <div data-role=\"content\"> <h1 id=\"pname\">Person 1</h1> <h3>Phone: <span id=\"pphone\">11111111</span></h3> <h3>Email: <span id=\"pemail\">[email protected]</span></h3>

<a id=\"backBt\" href=\"#\" data-role=\"button\">Back</a> </div> <div data-role=\"footer\" data-position=\"fixed\"> <h1>My Footer</h1> </div> </div> <! -- End Page 1 --> </body> บทที่ 5 การตดิ ต่อฐานข้อมูลและประยุกตใ์ ช้งาน สอน php เชอื่ มตอ่ ฐานข้อมูล การใช้คาส่ังในการ INSERT ข้อมูลลง ฐานข้อมูล ในตวั อยา่ งนีเ้ ราจะทาการสรา้ ง ฟอรม์ รบั ขอ้ มลู ไวใ้ นไฟล์ form.php หลงั จากนนั้ จะให้ สง่ คา่ ไปยงั ไฟล์ save.php เพ่ือทาการ insert ขอ้ มลู ลงฐานขอ้ มลู ในการสรา้ งไฟล์ save.php เราจะตอ้ งมีการเช่ือมตอ่ กบั ฐานขอ้ มลู ขนึ้ มาก่อน connect.php เม่ือทา การ insert จะนาขอ้ มลู ไปแสดง ในหนา้ list.php ในตวั อยา่ งเราจะทาการ INSERT ขอ้ มลู ลงใน ตาราง test สิง่ เเรกกอ่ นเราจะตอ้ งทา การสรา้ งตารางเพ่ือรบั ขอ้ มลู

จากนนั้ ทาการสรา้ ง form ตามโครงสรา้ งของตาราง ไฟลต์ วั อย่าง form.php <form name=\"form\" method=\"post\" action=\"save.php\" enctype=\"multipart/form-data\"> <label>Title:</label><input type=\"text\"name=\"rank_title\" /><br/> <label>Min:</label><input type=\"text\"name=\"rank_min\"/> <label>special:</label> <input type=\"radio\"name=\"rank_special\"id=\"rank_special1\" value=\"1\"checked=\"checked\"/> <label for=\"rank_special1\">yes</label> <input type=\"radio\"name=\"rank_special\"id=\"rank_special2\"value=\"0\"/> <label for=\"rank_special2\">no</label><br/> <label>image:</label> <input type=\"file\"name=\"rank_image\"/><br/> <input type=\"submit\" name=\"save\" value=\"save\" />

คาอธิบาย <form name=\"form\" method=\"post\" action=\"save.php\" enctype=\"multipart/form-data\"> ในการสรา้ งฟอรม์ เราจะเห็นวา่ มกี าร สง่ ค่า method=\"post\" ไปยงั ไฟล์ save.php เเละในสว่ นของ enctype=\"multipart/form-data เป็นการกาหนดให้ ฟอรม์ นีม้ ีการเก็บขอ้ มลู ไดห้ ลายประเภท <label>Title:</label><input type=\"text\"name=\"rank_title\" /><br/> <label>Min:</label><input type=\"text\"name=\"rank_min\"/> ในการเก็บขอ้ มลู rank_Tilte ,rank_Min จะทาการเก็บในรูปแบบ input type\"text\" name=ก็ช่ือฟิลดข์ องตาราง <label>special:</label> <input type=\"radio\"name=\"rank_special\"id=\"rank_special1\" value=\"1\"checked=\"checked\"/> <label for=\"rank_special1\">yes</label> <input type=\"radio\"name=\"rank_special\"id=\"rank_special2\"value=\"0\"/><label>speci al:</label> <input type=\"radio\"name=\"rank_special\"id=\"rank_special1\" value=\"1\"checked=\"checked\"/> <label for=\"rank_special1\">yes</label> <input type=\"radio\"name=\"rank_special\"id=\"rank_special2\"value=\"0\"/>

ในการเกบ็ special เราจะเก็บในรูปแบบ radio ใหม้ ีการตรวจสอบคา่ เรม่ิ ตน้ ถา้ ไมม่ ี การคลกิ ใหก้ าหนดเป็น value 1 value=\"1\"checked=\"checked” <label>image:</label> <input type=\"file\"name=\"rank_image\"/><br/> Image เราจะเก็บเป็นการอพั โหลดไฟลร์ ูป type=\"file\" < input type=\"submit\" name=\"save\" value=\"save\" /> การสรา้ ง ป่มุ ไฟล์ connect.php <?php $host ='localhost'; $username ='root'; $password =''; $db ='test'; mysql_connect($host,$username,$password) or die ('error connect'); mysql_query('set name utf8'); mysql_select_db($db)or die('select error'); ?> คาอธิบาย การสรา้ งไฟลท์ ่ใี ชใ้ นการเช่ือมตอ่ กบั ฐานขอ้ มลู $host = ช่ือโฮลต์

$username = ช่ือผใู้ ชฐ้ านขอ้ มลู $password = รหสั ผา่ นในการเขา้ ฐานขอ้ มลู $db = ช่ือตาราง mysql_connect = คาส่งั sql ในการเช่ือมตอ่ ฐานขอ้ มลู mysql_query = set คา่ ของภาษา mysql_select_db = คาส่งั เลือกตาราง ไฟล์ save.php <?php require_once'connect.php'; if(isset($_POST['save']));{ if(!empty($_FILES['rank_image']['name'])){ $filename = md5($_FILES['rank_image']['name'].time()); $ext = explode('.',$_FILES['rank_image']['name']); $dest = __DIR__.DIRECTORY_SEPARATOR.'image'.DIRECTORY_SEPARATOR.$filen ame.'.'.$ext[1]; if(!copy($_FILES['rank_image']['tmp_name'], $dest)) { echo 'upload Error'; exit();

} $rank_image = $filename.'.'.$ext[1]; } $rank_title =$_POST['rank_title']; $rank_min =$_POST['rank_min']; $rank_special =$_POST['rank_special']; $sql = \"INSERT INTO phpbb_ranks (rank_title,rank_min,rank_special,rank_image)\" . \"VALUES('$rank_title',$rank_min,$rank_special,'$rank_image')\"; mysql_query($sql)or die ('insert error'); header('location: lish.php'); } ?> คาอธบิ าย require_once'connect.php'; คอื การเรยี กไฟล์ connect.php เขา้ มาใชง้ านโดยไมต่ อ้ งเขียนคาส่งั เช่ือมตอ่ ฐานขอ้ มลู อีก if(isset($_POST['save'])); การตรวจสอบการกด ป่มุ คอื ถา้ มีการกด ป่มุ จะมีการทางานของโคด้ ตอ่ ไป

if(!empty($_FILES['rank_image']['name'])){ $filename = md5($_FILES['rank_image']['name'].time()); $ext = explode('.',$_FILES['rank_image']['name']); $dest = __DIR__.DIRECTORY_SEPARATOR.'image'.DIRECTORY_SEPARATOR.$filen ame.'.'.$ext[1]; if(!copy($_FILES['rank_image']['tmp_name'], $dest)) { echo 'upload Error'; exit(); } $rank_image = $filename.'.'.$ext[1]; } คาส่งั เช็คการอพั โหลดไฟลภ์ าพ ถา้ ไมม่ ีการอพั โหลดภาพก็ไมต่ อ้ งทาการเก็บภาพ ถา้ มใี หท้ างานตามคาส่งั การคดั ลอกภาพไปเก็บท่ี $dest คอื ตาแหน่งของโฟลเดอรท์ ่เี รา ตอ้ งการใหม้ นั คดั ลอกไปไว้ แลว้ ถา้ คดั ลอกไมผ่ า่ น ก็จะแสดง upload Error เม่ือทา การ คดั ลอกไฟลส์ าเรจ็ จะเก็บ ในตวั แปร $rank_image เพ่ือใชใ้ นคาส่งั insert ตอ่ ไป จากนนั้ ใหท้ าการสรา้ งไฟลเ์ ดอรใ์ นการเก็บภาพ $rank_title =$_POST['rank_title']; $rank_min =$_POST['rank_min']; $rank_special =$_POST['rank_special']; การประกาศตวั แปรรบั คา่ POST ท่เี ป็นการเกบ็ คา่ ในรูปแบบ text และ radio

$sql = \"INSERT INTO phpbb_ranks (rank_title,rank_min,rank_special,rank_image)\" . \"VALUES('$rank_title',$rank_min,$rank_special,'$rank_image')\"; คาส่งั sql insert ใหม้ ีการบนั ทกึ ขอ้ มลู ลงตาราง phpbb_ranks โดย (rank_title,rank_min,rank_special,rank_image) จะเป็นช่ือของฟิ ลดใ์ นตาราง เเละ VALUES ใสค่ า่ ตวั แปรท่ีเราประกาศไว้ สงั เกตุ ถา้ เป็นการเก็บ แบบ string จะตอ้ งใส่ เคร่อื งหมาย ‘’ เพ่ือระบวุ า่ เป็น string ในสว่ นของการดงึ ขอ้ มลู จากฐานขอ้ มลู มาเเสดงผล เราจะทาการใชค้ าส่งั sql ในการ เลือกว่าเราจะทาการแสดงขอ้ มลู ตารางใด ในตวั อยา่ งนีเ้ ราจะทาการดงึ ขอ้ มลู ของ ตารางมาแสดงทงั้ หมด ไฟล์ list.php <?php require_once 'connect.php'; $sql =\"SELECT * FROM phpbb_ranks\"; $result = mysql_query($sql); ?> <html> <head> <meta charset=\"UTF-8\"> <title></title> </head>

<body> <table border=\"1\"> <tr> <th>id</th> <th>rank title</th> <th>rank min</th> <th>rank special</th> <th>rank image</th> </tr> <?php while ($fetch = mysql_fetch_assoc($result)){ ?> <tr> <td><?php echo $fetch['rank_id']?></td> <td><?php echo $fetch['rank_title']?></td> <td><?php echo $fetch['rank_min']?></td> <td><?php echo $fetch['rank_special']?></td> <td><?php echo $fetch['rank_image']?></td> <?php }

?> </table> </body> </html> คาอธบิ าย <?php require_once 'connect.php'; $sql =\"SELECT * FROM phpbb_ranks\"; $result = mysql_query($sql); ?> คาส่งั sql ในการดงึ ขอ้ มลู จากฐานขอ้ มลู <?php while ($fetch = mysql_fetch_assoc($result)){ ?> การดงึ ขอ้ มลู มาแสดงผลในรูปของตาราง โดยจะทาการ วนลปู ในการแสดงผล <td><?php echo $fetch['rank_id']?></td> <td><?php echo $fetch['rank_title']?></td> <td><?php echo $fetch['rank_min']?></td> <td><?php echo $fetch['rank_special']?></td> <td><?php echo $fetch['rank_imagel']?></td>