การใช้งาน jQuery Mobile
การใช้งาน jQuery Mobile Framework ด้วย PHP กับฐานข้อมูล MySQL Database ใน jQuery Mobile Frameworkการเรียกใช้ UI นั้นมีให้เลือกใช้หลายรูปแบบมาก ถ้าหากได้เข้าไปอ่านใน Demo Manual และทำการใช้ Feature หลาย ๆ ตัวจะรู้สึกได้เลยว่ามันช่างเป็น Framework ที่เหมาะสมและลงตัวกับการนำมาใช้บน Smart Phone / Tablets ได้เป็นอย่างดี และการนำไปใช้กับ PHP กับ MySQL นั้นก็ไม่ต่างอะไรกับการเขียนโปรแกรมบน PHP กับ MySQL ในรูปแบบทั่ว ๆ ไปเลย แต่ทั้งนี้อยากให้ลองเข้าไปอ่านหรือดูใน Document หรือ Demo เพราะถ้าเราสามารถเลือกใช้ Feature ที่เหมาะสมกับงาน หรือกับหน้าจอที่ต้องการออกแบบ จะสามารถช่วยให้โปรแกรมของเรานั้นทำงานได้อย่างถูกต้องและเหมาะสม
ในบทความนี้จะยกตัวอย่างการใช้ PHP กับ MySQL บน jQuery Mobile Framework โดยสมมุติโปรแกรมในนี้มีอยู่ 4 ระบบ คือ
ทั้งหมดใช้ MySQL Database ในการจัดเก็บข้อมูล
Download jQuery Mobile Framework
http://jquerymobile.com/download/
สำหรับพื้นฐาน jQuery Mobile ในการออกแบบสำหรับ Smart Phone / Tablets สามารถอ่านเพิ่มเติมได้ที่บทความนี้
Basic jQuery Mobile เขียนเว็บให้แสดงผลสวย ๆ บน Mobile เช่น iPhone , iPad , Android
http://www.thaicreate.com/community/jquery-mobile-ui-iphone-ipad-android-blackberry.html
Download jQuery Mobile Framework
http://jquerymobile.com/download/
สำหรับพื้นฐาน jQuery Mobile ในการออกแบบสำหรับ Smart Phone / Tablets สามารถอ่านเพิ่มเติมได้ที่บทความนี้
Basic jQuery Mobile เขียนเว็บให้แสดงผลสวย ๆ บน Mobile เช่น iPhone , iPad , Android
http://www.thaicreate.com/community/jquery-mobile-ui-iphone-ipad-android-blackberry.html
โครงสร้างของ Table ใน MySQL
- News (ระบบแสดงข่าวสาร โดยมีการแบ่งเป็นหมวดหมู่ของข่าวสาร)
index.php
index.php
เลือกภาษาชิเชวาพม่าภาษากรีกภาษากันนาดาภาษากาลิเชียนภาษากูจาราติภาษาเกาหลีภาษาเขมรภาษาคะตะลันภาษาคาซัคภาษาโครเอเชียภาษาจอร์เจียภาษาจีน (ดั้งเดิม)ภาษาจีน (แบบย่อ)ภาษาชวาภาษาเช็กภาษาซีบัวโนภาษาซุนดาภาษาซูลูภาษาเซโซโทภาษาเซอร์เบียนภาษาโซมาลีภาษาญี่ปุ่นภาษาดัตช์ภาษาเดนมาร์กภาษาตุรกีภาษาเตลูกูภาษาทมิฬภาษาทาจิกภาษานอร์เวย์ภาษาเนปาลภาษาบอสเนียภาษาบัลกาเรียภาษาเบงกาลีภาษาเบลารูเชียนภาษาแบ็ซคภาษาปัญจาปภาษาเปอร์เซียภาษาโปรตุเกสภาษาโปแลนด์ภาษาฝรั่งเศสภาษาฟินแลนด์ภาษาฟิลิปปินส์ภาษาม้งภาษามหารัฐภาษามองโกเลียภาษามัลทีสภาษามาซีโดเนียภาษามาเลย์ภาษาเมารีภาษาแมละยา-ลัมภาษายิดดิชภาษายูเครนภาษาเยอรมันภาษาโยรูบาภาษารัสเซียภาษาโรมาเนียภาษาละตินภาษาลัทเวียภาษาลิทัวเนียภาษาเวลส์ภาษาเวียดนามภาษาสเปนภาษาสโลวักภาษาสโลเวเนียภาษาสวาฮิลีภาษาสวีเดนภาษาอังกฤษภาษาอัลบาเนียภาษาอาร์เซอรืไบจันภาษาอาร์เมเนียภาษาอาหรับภาษาอิกโบภาษาอิตาลีภาษาอินโดนีเซียภาษาอุสเบกิสถานภาษาอูรดูร์ภาษาเอสโทเนียภาษาเอสเปอแรนโตภาษาแอฟริกาภาษาไอซ์แลนดิกภาษาไอริชภาษาฮังกาเรียนภาษาฮัวซาภาษาฮินดูภาษาฮิบรูภาษาเฮติครีโอลมาลากาซีลาวสิงหล
ขับเคลื่อนโดย แปลภาษา
การใช้งาน jQuery Mobile Framework ด้วย PHP กับฐานข้อมูล MySQL Database ใน jQuery Mobile Frameworkการเรียกใช้ UI นั้นมีให้เลือกใช้หลายรูปแบบมาก ถ้าหากได้เข้าไปอ่านใน Demo Manual และทำการใช้ Feature หลาย ๆ ตัวจะรู้สึกได้เลยว่ามันช่างเป็น Framework ที่เหมาะสมและลงตัวกับการนำมาใช้บน Smart Phone / Tablets ได้เป็นอย่างดี และการนำไปใช้กับ PHP กับ MySQL นั้นก็ไม่ต่างอะไรกับการเขียนโปรแกรมบน PHP กับ MySQL ในรูปแบบทั่ว ๆ ไปเลย แต่ทั้งนี้อยากให้ลองเข้าไปอ่านหรือดูใน Document หรือ Demo เพราะถ้าเราสามารถเลือกใช้ Feature ที่เหมาะสมกับงาน หรือกับหน้าจอที่ต้องการออกแบบ จะสามารถช่วยให้โปรแกรมของเรานั้นทำงานได้อย่างถูกต้องและเหมาะสม
ในบทความนี้จะยกตัวอย่างการใช้ PHP กับ MySQL บน jQuery Mobile Framework โดยสมมุติโปรแกรมในนี้มีอยู่ 4 ระบบ คือ
- News (ระบบแสดงข่าวสาร โดยมีการแบ่งเป็นหมวดหมู่ของข่าวสาร)
- Oil Price (สำหรับแสดงราคาน้ำมัน)
- Member (แสดงหน้าจอ Login สำหรับสมาชิก)
- หน้า Page อื่น ๆ ของเว็บ เช่น About Us และ Contact us
ทั้งหมดใช้ MySQL Database ในการจัดเก็บข้อมูล
Download jQuery Mobile Framework
http://jquerymobile.com/download/
สำหรับพื้นฐาน jQuery Mobile ในการออกแบบสำหรับ Smart Phone / Tablets สามารถอ่านเพิ่มเติมได้ที่บทความนี้
Basic jQuery Mobile เขียนเว็บให้แสดงผลสวย ๆ บน Mobile เช่น iPhone , iPad , Android
http://www.thaicreate.com/community/jquery-mobile-ui-iphone-ipad-android-blackberry.html
โครงสร้างของ Table ใน MySQL
--
-- Table structure for table `category`
--
CREATE TABLE `category` (
`CategoryID` int(1) NOT NULL,
`CategoryName` varchar(30) NOT NULL,
PRIMARY KEY (`CategoryID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
-- --------------------------------------------------------
--
-- Table structure for table `member`
--
CREATE TABLE `member` (
`UserID` int(3) NOT NULL auto_increment,
`Username` varchar(20) NOT NULL,
`Password` varchar(20) NOT NULL,
`Name` varchar(100) NOT NULL,
`Email` varchar(150) NOT NULL,
PRIMARY KEY (`UserID`),
UNIQUE KEY `Username` (`Username`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
-- --------------------------------------------------------
--
-- Table structure for table `news`
--
CREATE TABLE `news` (
`NewsID` int(11) NOT NULL auto_increment,
`NewsDate` datetime NOT NULL,
`CategoryID` int(1) NOT NULL,
`Subject` varchar(150) NOT NULL,
`Details` text NOT NULL,
PRIMARY KEY (`NewsID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
-- --------------------------------------------------------
--
-- Table structure for table `oil`
--
CREATE TABLE `oil` (
`CompID` int(11) NOT NULL auto_increment,
`CompName` varchar(100) NOT NULL,
`Logo` varchar(100) NOT NULL,
`Price` varchar(150) NOT NULL,
PRIMARY KEY (`CompID`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
- News (ระบบแสดงข่าวสาร โดยมีการแบ่งเป็นหมวดหมู่ของข่าวสาร)
index.php
01.<!DOCTYPE html>
02.<html>
03.<head>
04.<title>ThaiCreate.Com</title>
05.<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
06.<link rel="stylesheet" href="theme/jquery.mobile-1.1.0.min.css" />
07.<script src="theme/jquery-1.7.1.min.js"></script>
08.<script src="theme/jquery.mobile-1.1.0.min.js"></script>
09.</head>
10.<body>
11.
12.<div data-role="page">
13.
14.<div data-role="header">
15.<h1>Welcome</h1>
16.</div><!-- /header -->
17.
18.<br />
19.
20.<ul data-role="listview" data-inset="true" data-theme="d">
21.<li><a href="category.php">News</a></li>
22.<li><a href="oil-price.php">Oil price</a></li>
23.</ul>
24.
25.<br />
26.
27.<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d">
28.<li data-role="list-divider">My</li>
29.<li><a href="aboutus.php">About Us</a></li>
30.<li><a href="contactus.php">Contact Us</a></li>
31.</ul>
32.
33.<p><a href="#popup" data-role="button" data-theme="a" data-rel="dialog" data-transition="pop">Login user and password</a></p>
34.
35.
36.
37.</div><!-- /page -->
38.
39.
40.<!-- Start of third page: #popup -->
41.<div data-role="page" id="popup">
42.
43.<div data-role="header" data-theme="c">
44.<h1>Login</h1>
45.</div><!-- /header -->
46.
47.<div data-role="content" data-theme="d">
48.<form action="login.php" method="post">
49.Username : <input "text" name="txtUser">
50.Password :<input "password" name="txtPassword">
51.<br />
52.<input "submit" value="Login">
53.</form>
54.
55.</div><!-- /content -->
56.
57.<div data-role="footer">
58.<h4>Security SSL</h4>
59.</div><!-- /footer -->
60.</div><!-- /page popup -->
61.</body>
62.</html>
Screenshot
แสดงหน้าแรกหรือหน้าหลักของเว็บไซต์ ประกอบด้วย Menu
โดยเมนูเหล่านี้จะสามารถคลิกไปยังส่วนต่าง ๆ ของโปรแกรม
category.php
Screenshot
หลังจากที่คลิกเมนู News จากหน้าหลัก จะเข้าสู่ Category ของ News
หลังจากที่คลิกเมนู News จากหน้าหลัก จะเข้าสู่ Category ของ News