PHP programming for mobile phones and tablets with JQuery Mobile

Imagine you use PHP to develop their applications to run on mobile devices. With JQuery Mobile you create interfaces that interact with the Web server via Ajax.


Presentation

There is no magic! What is the usual: use HTML to fit the canvas and Javascript (AJAX) to make requests to the Web server, where are the PHP sources that will receive, process and return the information. And for this, We can count on the set of features that JQuery enables us.

jQuery Mobile

jQuery Mobile is a Web Framework optimized for smartphones and tablets. It is a system based on HTML5 compatible interfaces with the most popular mobile device platforms. Built on the jQuery and jQuery UI, your code allows a flexible design, easily customizable.

In practice

Let's take a simple example, We have an interface with a text field for the user to enter your “name”. By clicking the button “Send”, the form is sent to the server (via Ajax), that displays the message “Hello nomeDoUsuario!” or “Hello world!”, If the name field is empty.

Hello world!

index.php | User interface (client-side)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?PHP
<!DOCTYPE html>
<HTML>
    <head>
    <title>Hello world! Jquery Mobile</title>
    <meta name="viewport" content="width=device-width, initial-scale = 1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>   
    <script>
        $(function() { 
            $("#bt-enviar").Click(function() {
                $.AJAX({
                  type: "POST",
                  URL: "http://taylorlopes.com/util/jquerymobile/olamundo/olamundo.php",
                  date: ({name: $.trim($("#nome").Val()) }),
                  datatype: "text",
                  success: function(date) {
                    $("#nome").Val("");
                    $("#resultado").HTML(date);
                  }
                });
            });
        });
    </script>     
</head>
<body> 
    <div date-scroll="page" ID="indexPage">
        <div date-scroll="header">
            <H1>Hello world - Jquery Mobile</H1>
        </div>
        <div date-scroll="content">
            <div date-scroll="fieldcontain">
                <label is="nome">Notify your name:</label>
                <input type="text" ID="nome" name="nome" value="" />
            </div>
            <input id="bt-enviar" type="button" value="Enviar" />
            <div id="resultado"></div>
        </div>
    </div> 
</body>
</HTML>
?>
olamundo.php | Your PHP code (server-side)
1
2
3
 
  <?PHP header("Content-Type: text/html;  charset=ISO-8859-1",true) ?>
  <H3>Hello <?PHP echo $_ POST[' name '] ? $_ POST[' name '] : "Mundo" ?>!</H3>

The result is something:


See this code working!

The big deal of JQuery Mobile is in meta-tag “viewport”, where the parameter “device-width = width” automatically resizes the content as the screen of the mobile device that is accessing. In this way, the presentation by accessing a Desktop is different from a cell phone.

You can use an emulator to better visualize how your page behaves and appears in a cell phone, Tablet, etc, as seen in figure above. In the case of Chrome, just install an extension type “Ripple Emulator” and use it as a test tool. There are several similar solutions.

The rest goes to your need and creativity…

Total hits: 31008

11 comments on “PHP programming for mobile phones and tablets with JQuery Mobile

  1. Fábio said:

    Good morning, congratulations for the post. I would like to take his content to clarify a doubt(If you can help me thanks). I would like to make a simple query in the in PHP and then show on the screen of the user that registered or not in the Bank using jquery mobile. You know how can I do that? Grateful for the attention.

    • Hello Fabio. Yes, I know how to do, but you have to know a bit of programming to understand the explanation. The principle is the same as used in the example “olamundo.php”; the difference is that you must make the connection with the database, get the desired result (set up your SQL) and display it. Hugs!

      • Max said:

        Hello Taylor, you would have a full course of PHP Programming for mobile phones and tablets with JQuery Mobile. Type a CRUD.

        Um exemplo um sistema de agenda de cursos onde me mostrasse um lista de cursos vindo do banco de dados e ao clicar no curso eu pudesse ver todas as informações do Curso.

      • Hi Max. I don't have this course :( The example in this post is already very close to what you need, você só precisa trabalhar as request (sending data/html/form by Ajax) and the response (data return processed php/sql/server). Na Internet tem muitos exemplos de CRUD em PHP.

        Hoje se seu fosse fazer algo para Mobile, usaria o Ionic.

    • The code is based on HTML, CSS and JavaScript. So, the browser itself (IE, Firefox, Chrome) of your device (cell phone, Tablet, notebook) takes care of interpreting. You do not need to install any software. Client-side, put the code into a text file (Notepad, for example) and save it as html file extension. Server-side, to manipulate the data, will have to use a programming language, as PHP, Java, ASP, .NET, etc.

  2. Rafael Augusto said:

    Good afternoon,

    First, Congratulations for the article.

    So and can develop apps for both android and IOS using Jquery Mobile and Phonegap and also can use PHP and MYSQL to connect to the server?

    • Good night, Yes it is quite possible. With the Phonegap you create your application in html/js (client side) and she's going to run on Android, iOS, accessing server-side resources (PHP and MySQL), via Ajax.

  3. Jan said:

    Have as the sample program that you did be installed on google play ? or just wheel, accessing directly in a Web browser ?

    • Yes, you do your application with HTML, CSS and Javascript, then use programs like Phonegap to generate applications (almost) natives for platforms like Android and iOS. Then it's just up to the Google Play (Android). Your application will be able to communicate with your PHP normally doing Ajax requests, as in the example.

Leave a reply

The your email address will not be published. Required fields are marked with *