（转载）Create a blog with JQuery Mobile and PHP

最新推荐文章于 2025-08-08 14:10:14 发布
原创 最新推荐文章于 2025-08-08 14:10:14 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#mobile #jquery #blog #mysql #function #exception

本文介绍使用JQuery Mobile框架创建简易移动博客的过程。该博客可在多种移动平台上运行，包括iOS、Android等。文中详细讲解了从数据库搭建到前端页面布局及交互实现的全过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

With the recent “alpha 1” release of JQuery Mobile. I decided to learn about this new framework and create a simple mobile blog. With this new framework we can target several platforms easily:

  • Apple iOS: iPhone, iPod Touch, iPad (all versions)
  • Android: all devices (all versions)
  • Blackberry Torch (version 6)
  • Palm WebOS Pre, Pixi
  • Nokia N900

    Let’s start…


    Update – Nov. 11, 2010: Code updated to reflect changes in JQuery Mobile Alpha 2.

    Update – April 5, 2011: Code updated to reflect changes in JQuery Mobile Alpha 4. Fixed capitalization in code for “posts” table.

    I built this using PHP, Apache 2, and of course JQuery Mobile. To keep it simple I’m only using two PHP files, the bulk of the code is in a file called index.php. The code to insert new posts is in a file called newpost.php. Please keep in mind this code was put together quickly as a demo more than anything so if you use this as a base for a future projects you need to validate the data, ensure strings lengths are of acceptable ranges, and much more, etc.

    The nice thing about working with JQuery Mobile is that I was able to use Google Chrome to easily debug and view my work as I proceeded. I found IE 7 though to be problematic. I didn’t test any other browsers.

    The MySQL script for the database is very straight forward:

    CREATE DATABASE MobileBlog;
     
    CREATE TABLE IF NOT EXISTS `posts` (
       `post_id` int (10) unsigned NOT NULL AUTO_INCREMENT,
       `post_title` varchar (100) NOT NULL ,
       `post_content` text NOT NULL ,
       `post_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ,
       PRIMARY KEY (`post_id`)
    ) ENGINE=MyISAM

    Simply a place to put the blog post’s title, content and the time it was created.

    With the database in place let’s move onto the HTML and JQuery code.

    The header is simple enough with a call to grab the JQuery files we will need:

    <!DOCTYPE html>
    < html >
         < head >
         < title >MobileBlog</ title >
         < link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
         < script src = "http://code.jquery.com/jquery-1.5.2.min.js" ></ script >
         < script src = "http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js" ></ script >
    </ head >

    The nice thing is you now have all the power of JQuery available to you in the mobile framework.

    Laying out the initial view is very straight forward and you can read more about it as well as grab a starter template here.

    < div data-role = "page" id = "indexPage" >
         < div data-role = "header" >
             < h1 >Welcome!</ h1 >
         </ div >
         < div data-role = "content" >
             < ul data-role = "listview" >
                 < li >
                     < a href = "#createNewPostPage" >Create New Post</ a >
                 </ li >
                 < li >
                     < a href = "#readBlogPage" >Read Blog</ a >
                 </ li >
                 < li >
                     < a href = "#aboutMobileBlogPage" >About MobileBlog</ a >
                 </ li >
             </ ul >
         </ div >
     
         < div data-role = "footer" >
             < h1 >- MobileBlog -</ h1 >
         </ div >
    </ div >

    Typical structure once the container is in place looks like this:

    < div data-role = "header" >...</ div >
    < div data-role = "content" >...</ div >
    < div data-role = "footer" >...</ div >

    The first component I used was a List View and you need to get familiar with these since they are going to be a primary component when working with this mobile framework.

    I then laid out a few more pages. One to create new posts, one to read them, and an about page. In the case of creating a new post I used Ajax to call the newpost.php file which looks like this:

    <?php
         try
         {
             $connection = mysql_connect( "localhost" , "mobileblog" , "password" );
             mysql_select_db( "MobileBlog" , $connection );
             // Note: You need to verify the data coming in isn't harmful, this SQL pretty much puts anything into the database so make sure to change this!
             $postTitle = mysql_real_escape_string( $_POST [postTitle]);
             $postContent = mysql_real_escape_string( $_POST [postContent]);
     
             mysql_query( "INSERT INTO posts (post_title, post_content) VALUES ('$postTitle', '$postContent')" );
             mysql_close( $connection );
             echo "SUCCESS" ;
         }
         catch (Exception $e )
         {
             echo $e ->getMessage();
             // Note: Log the error or something
         }
    ?>

    Very simple code and directly to the point. If the insert works a string is passed back as “SUCCESS” otherwise the error is passed back. Obviously in a production environment you would want to hide the true error from the user and dump a more friendly message to them.

    The Ajax code looks like this to make the save:

    $(document).ready( function () {
         $( "#submit" ).click( function (){
     
             var formData = $( "#newPostForm" ).serialize();
     
             $.ajax({
                 type: "POST" ,
                 url: "/mobile/newpost.php" ,
                 cache: false ,
                 data: formData,
                 success: onSuccess
             });
     
             return false ;
         });
     
         $( "#cancel" ).click( function (){
             resetTextFields();
         });
     
         $( "#refresh" ).click( function (){
             location.reload();
         });
    });

    On a successful Ajax call this code is called:

    function onSuccess(data, status)
    {
         resetTextFields();
         // Notify the user the new post was saved
         $( "#notification" ).fadeIn(2000);
         data = $.trim(data);
         if (data == "SUCCESS" )
         {
             $( "#notification" ).css( "background-color" , "#ffff00" );
             $( "#notification" ).text( "The post was saved" );
         }
         else
         {
             $( "#notification" ).css( "background-color" , "#ff0000" );
             $( "#notification" ).text(data);
         }
         $( "#notification" ).fadeOut(5000);
    }

    To read the blogs posts I simply put the PHP code directly in rather than make an Ajax call and populate it as needed. I also added a refresh button since any new posts added after the site loads won’t show up automatically. Ideally you would want to load the post titles into a List View and then link to the full article and load just that data since loading everything at once could get very slow if you are loading a lot of posts with content. In fact on a mobile device you could easily frustrate the user so keep this in mind. Its really about speed with mobile web apps.

    The code looks like this to read the blog posts:

    <div data-role= "page" id= "readBlogPage" >
         <div data-role= "header" >
             <h1>Read Blog</h1>
         </div>
         <div data-role= "content" >
             <button data-theme= "b" data-role= "button" data-iconpos= "left" id= "refresh" type= "button" data-icon= "refresh" >Refresh</button>
             <ul data-role= "listview" data-theme= "d" data-inset= "true" >
                 <!-- Note: You should really display the blog post articles and then link to the full article, since this is a simple demo
                     I'm just loading all the articles, obviously this is not a production quality blog since this could take a long
                     time to load all the articles and on a mobile device speed counts.  Also, this data won't automatically refresh on a new post insert.
                 -->
                 <?php
                     try
                     {
                         $connection = mysql_connect( "localhost" , "mobileblog" , "password" );
                         mysql_select_db( "MobileBlog" , $connection );
                         $result = mysql_query( "SELECT * FROM posts" );
     
                         while ( $row = mysql_fetch_array( $result ))
                         {
                             echo "<li><h2>" . $row [ 'post_title' ] . "</h2>" . $row [ 'post_content' ] . "<p class='ui-li-aside'>" . $row [ 'post_date' ] . "<strong></p>" ;
                         }
     
                         mysql_close( $connection );
                     }
                     catch (Exception $e )
                     {
                         echo $e ->getMessage();
                     }
                 ?>
             </ul>
         </div>
     
         <div data-role= "footer" >
             <h1>- MobileBlog -</h1>
         </div>
    </div>

    The final code looks like this:

    <!DOCTYPE html>
    <html>
         <head>
         <title>MobileBlog</title>
         <link rel= "stylesheet" href= "http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
         <script src= "http://code.jquery.com/jquery-1.5.2.min.js" ></script>
         <script src= "http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js" ></script>
    </head>
     
    <body>
     
         <script type= "text/javascript" >
             function resetTextFields()
             {
                 $( "#postTitle" ).val( "" );
                 $( "#postContent" ).val( "" );
             }
     
             function onSuccess(data, status)
             {
                 resetTextFields();
                 // Notify the user the new post was saved
                 $( "#notification" ).fadeIn(2000);
                 data = $.trim(data);
                 if (data == "SUCCESS" )
                 {
                     $( "#notification" ).css( "background-color" , "#ffff00" );
                     $( "#notification" ).text( "The post was saved" );
                 }
                 else
                 {
                     $( "#notification" ).css( "background-color" , "#ff0000" );
                     $( "#notification" ).text(data);
                 }
                 $( "#notification" ).fadeOut(5000);
             }
     
             $(document).ready( function () {
                 $( "#submit" ).click( function (){
     
                     var formData = $( "#newPostForm" ).serialize();
     
                     $.ajax({
                         type: "POST" ,
                         url: "/mobile/newpost.php" ,
                         cache: false,
                         data: formData,
                         success: onSuccess
                     });
     
                     return false;
                 });
     
                 $( "#cancel" ).click( function (){
                     resetTextFields();
                 });
     
                 $( "#refresh" ).click( function (){
                     location.reload();
                 });
             });
     
         </script>
     
         <!-- indexPage -->
         <div data-role= "page" id= "indexPage" >
             <div data-role= "header" >
                 <h1>Welcome!</h1>
             </div>
             <div data-role= "content" >
                 <ul data-role= "listview" >
                     <li>
                 <a href= "#createNewPostPage" >Create New Post</a>
                     </li>
                     <li>
                 <a href= "#readBlogPage" >Read Blog</a>
                     </li>
                     <li>
                 <a href= "#aboutMobileBlogPage" >About MobileBlog</a>
                     </li>
                 </ul>
             </div>
     
             <div data-role= "footer" >
                 <h1>- MobileBlog -</h1>
             </div>
         </div>
     
         <!-- createNewPostPage -->
         <div data-role= "page" id= "createNewPostPage" >
             <div data-role= "header" >
                 <h1>Create New Post</h1>
             </div>
     
             <div data-role= "content" >
                 <div data-role= "content" >
                     <form id= "newPostForm" >
                         <div data-role= "fieldcontain" >
                             <label for = "postTitle" ><strong>Post Title:</strong></label>
                             <input type= "text" name= "postTitle" id= "postTitle" value= ""  />
     
                             <label for = "postContent" ><strong>Post Content:</strong></label>
                             <textarea name= "postContent" id= "postContent" ></textarea>
     
                             <fieldset class = "ui-grid-a" >
                                 <div class = "ui-block-a" ><a href= "#indexPage" id= "cancel" data-role= "button" >Cancel</a></div>
                                 <div class = "ui-block-b" ><button data-theme= "b" id= "submit" type= "submit" >Submit</button></div>
                             </fieldset>
                             <h3 id= "notification" ></h3>
                         </div>
                     </form>
                 </div>
             </div>
     
             <div data-role= "footer" >
                 <h1>- MobileBlog -</h1>
             </div>
         </div>
     
         <!-- readBlogPage -->
         <div data-role= "page" id= "readBlogPage" >
             <div data-role= "header" >
                 <h1>Read Blog</h1>
             </div>
             <div data-role= "content" >
                 <button data-theme= "b" data-role= "button" data-iconpos= "left" id= "refresh" type= "button" data-icon= "refresh" >Refresh</button>
                 <ul data-role= "listview" data-theme= "d" data-inset= "true" >
                     <!-- Note: You should really display the blog post articles and then link to the full article, since this is a simple demo
                         I'm just loading all the articles, obviously this is not a production quality blog since this could take a long
                         time to load all the articles and on a mobile device speed counts.  Also, this data won't automatically refresh on a new post insert.
                     -->
                     <?php
                         try
                         {
                             $connection = mysql_connect( "localhost" , "mobileblog" , "password" );
                             mysql_select_db( "MobileBlog" , $connection );
                             $result = mysql_query( "SELECT * FROM posts" );
     
                             while ( $row = mysql_fetch_array( $result ))
                             {
                                 echo "<li><h2>" . $row [ 'post_title' ] . "</h2>" . $row [ 'post_content' ] . "<p class='ui-li-aside'>" . $row [ 'post_date' ] . "<strong></p>" ;
                             }
     
                             mysql_close( $connection );
                         }
                         catch (Exception $e )
                         {
                             echo $e ->getMessage();
                         }
                     ?>
                 </ul>
             </div>
     
             <div data-role= "footer" >
                 <h1>- MobileBlog -</h1>
             </div>
         </div>
     
         <!-- aboutMobileBlogPage -->
         <div data-role= "page" id= "aboutMobileBlogPage" >
             <div data-role= "header" >
                 <h1>About MobileBlog</h1>
             </div>
     
             <div data-role= "content" >
                 <div data-role= "content" >
                     <div data-role= "fieldcontain" >
                         <p><a href= "http://giantflyingsaucer.com/blog/?p=1856" >MobileBlog</a></p>
                         <p>Created by: <a href= "http://twitter.com/chadlung" >Chad Lung</a></p>
                         <p>Powered by: <a href= "http://jquerymobile.com" >JQuery Mobile</a></p>
                     </div>
                 </div>
             </div>
     
             <div data-role= "footer" >
                 <h1>- MobileBlog -</h1>
             </div>
         </div>
     
    </body>
    </html>

    I then used the Android Emulator to view MobileBlog running using this address: http://10.0.2.2/mobile – Keep in mind you cannot use “localhost” in the emulator.

    Here are some screenshots of MobileBlog running:



风暴
关注
PHP语法摘要
生活在别处
05-11 1885
PHP（PHP: Hypertext Preprocessor的缩写，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，入门门槛较低，易于学习，使用广泛，主要适用于Web开发领域。PHP是将程序嵌入到HTML（标准通用标记语言下的一个应用）文档中去执行，执行效率比完全生成HTML标记的CGI要高许多。1. 在linux下，直接输入php后可以开始输入php代码（仍然需要以结尾），输入完毕后输入Ctrl+D开始执行。
（转载）How to create a mobile WordPress theme with jQuery Mobile
风暴－高会冬
08-22 1470
Last month, jQuery Mobile was released. This tool allows you to easily create mobile websites and web apps. In this tutorial, I’ll show you
(转载)Building a Website with PHP, MySQL and jQuery Mobile, Part 1
风暴－高会冬
08-22 1082
In this two-part tutorial, we will be building a simple website with PHP and MySQL, using the Model-View-Controller (MVC) pattern. Finally,
Using jQuery Mobile with MVC and Netduino for Home Automation
figerDeng的专栏
11-05 1984
jquerymobile theme工具，最后把工具放入书签工具栏，打开自己的网页，然后点击工具栏，就可以看到不同大小的页面了。 http://jquerymobile.com/themeroller/?ver=1.3.2&style_id=20131104-76 Download source code - 281.2 KB Introduction How
经典收藏 50个jQuery Mobile开发技巧集萃
u013406800的专栏
08-28 564
1、Backbone移动实例 这是在Safari中运行的一款Backbone移动应用程序。想开始体验移动开发，一个好的出发点就是关注这个应用程序的构建方式。先不妨在你的浏览器中查看该应用程序。 相关链接：http://bennolan.com/2010/11/24/backbone-jquery-demo.html 2、使用媒体查询来锁定设备 你可能会问如何使用CSS来锁定设备(根
快来收藏 50个经典的jQuery Mobile开发技巧集萃
kgsew的专栏
07-10 722
1、Backbone移动实例 这是在Safari中运行的一款Backbone移动应用程序。想开始体验移动开发，一个好的出发点就是关注这个应用程序的构建方式。先不妨在你的浏览器中查看该应用程序。 相关链接：http://bennolan.com/2010/11/24/backbone-jquery-demo.html 2、使用媒体查询来锁定设备 你可能会问如何
jQuery Mobile 50个经典案例
weixin_34262482的博客
11-15 2371
1、Backbone移动实例这是在Safari中运行的一款Backbone移动应用程序。想开始体验移动开发，一个好的出发点就是关注这个应用程序的构建方式。先不妨在你的浏览器中查看该应用程序。相关链接：http://bennolan.com/2010/11/24/backbone-jquery-demo.html2、使用媒体查询来锁定设备你可能会问如何使用CSS来锁定设备(根据...
收藏 30个jQuery Mobile开发技巧集萃
bookzhaopin的专栏
08-21 1062
都是最常用的，锁屏，jquery调用，字体、工具等等，赶紧收起来，时不时拿出来翻翻，受益匪浅！
8个优秀的jQuery Mobile教程
muxiaobo的专栏
01-30 985
jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。虽然jQuery Mobile相对较新，但开发人员可以用jQuery Mobile为许多移动设备（包括智能手机和平板电脑）开发网站应用程序，RSS阅读器等应用。本文将为大家介绍8个有用的jQuery Mob
如何以正确的方式在您的WordPress网站上安装jQuery Mobile
culi3118的博客
08-25 249
So, you want to start taking advantage of some of the fantastic new jQuery Mobile features on your WordPress site, but you could use some guidance as to the best way to get up and running fast. No pro...
软件工程师-经典收藏50个jQueryMobile开发技巧集萃.docx
11-06
《软件工程师-经典收藏50个jQueryMobile开发技巧集萃》文档汇集了众多关于jQuery Mobile的实用技巧，这些技巧对于软件工程师来说是构建高效、跨平台的移动网站和应用的宝贵资源。jQuery Mobile是一个强大的框架，它...
A-计算机毕业设计定制:42655基于微信小程序的车位预约系统的研究（免费领源码）可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C# 、C++、python、数据可视化、大数据、全套文案
vx_fybswa的博客
09-26 1498
用户在手机移动端便可用户该系统，实现线上查询和浏览停车位信息，并进行车位预约、支付费用、车位评价操作。该系统给管理员提供了一个操作简易、界面友好的车位预约管理平台的工具，提高车位预约的管理效率。
MySQL vs PostgreSQL 深度对比：为你的新项目选择正确的开源数据库 (2025)
Clownseven的博客
08-08 789
在MySQL和PostgreSQL之间纠结？这不仅仅是速度之争。本文从设计哲学、性能特点、高级功能（如JSONB）和数据一致性等多个维度，深度剖析两大开源数据库的本质区别。通过场景化建议，帮你为Web应用、数据分析或新项目，做出最合适的数据库技术选型。
MySQL(183)如何设计MySQL的分布式系统？
qq_43012298的博客
08-07 743
本文详细介绍了MySQL分布式系统的设计实现方案。首先阐述了设计原则，包括数据分片、高可用性、一致性保障等核心要素。随后提出完整的架构方案，通过分片、主从复制、中间件和负载均衡四个关键组件实现分布式部署。在具体实现部分，详细展示了数据分片规则设定、主从复制配置步骤、ShardingSphere中间件的安装与配置流程，以及负载均衡的部署方法。整套方案从理论到实践，提供了完整的代码示例和配置说明，为构建高性能、高可用的MySQL分布式系统提供了可落地的技术方案。
MySQL(185)如何进行MySQL的容量规划？
qq_43012298的博客
08-08 430
摘要：MySQL容量规划是保障数据库性能稳定的关键步骤，主要包括评估当前资源使用情况、预测未来增长以及调整配置和硬件资源。评估阶段需分析磁盘空间、内存、CPU和网络带宽使用情况，通过SQL命令和系统工具获取数据。预测阶段基于历史数据和业务需求估算未来负载。最后根据评估和预测结果调整MySQL配置参数（如缓冲池大小、最大连接数等）或升级硬件资源。容量规划是一个持续优化的过程，需定期监控和调整以确保数据库高效运行。
【数据库】MySQL库的操作
最新发布
Menior_的博客
08-08 294
在信息化时代，数据已经成为企业和个人的重要资产。而数据库（Database）正是管理这些数据的核心工具。MySQL 作为全球使用最广泛的开源关系型数据库之一，具有高性能、易用性强、跨平台等优点，非常适合初学者入门以及企业级开发。本文将结合 MySQL 数据库的基础概念与常用操作，带你从零开始掌握数据库的创建、修改、删除、备份及恢复等技巧。数据库（Database）是按照一定数据结构组织、存储和管理数据的仓库。它不仅可以存储大量数据，还能保证数据的完整性安全性和高效查询。MySQL 属于关系型数据库。
30天入门Python（基础篇）——第31天：标准库学习之re模块
weixin_42636075的博客
08-04 702
Python re模块是一个强大的正则表达式工具，可用于高效处理文本数据。摘要包括：1）基本功能：模式匹配、文本搜索、字符串替换、数据验证等；2）核心语法：元字符（.^$+?等）、字符类（[ ]）、预定义字符类（\d\w\s等）及量词（+?{}）；3）高级特性：分组捕获、贪婪/非贪婪匹配、性能优化。通过示例演示了正则表达式在邮箱验证、HTML解析等场景的应用，帮助开发者掌握文本处理利器。
MySQL的存储过程和存储函数：
HMBBLOVEPDX的博客
08-07 779
MySQL存储过程与存储函数详解 存储过程是预先编译并存储在数据库中的可重用代码块，具有简化操作、提高效率、增强安全性等优势。存储过程支持三种参数类型（IN/OUT/INOUT），创建时需使用DELIMITER修改结束符。调用方式为CALL存储过程名()，可返回零或多个值，常用于数据更新操作。 存储函数与存储过程类似，但必须返回单一值且调用方式为SELECT函数名()，常用于查询场景。两者都可通过SHOW、ALTER、DROP命令进行查看、修改和删除。支持事务和表操作创建时需注意处理权限和确定性声明等问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值