Skip to main content

Mobile Apps using HTML interface with jQueryMobile

image

This is the main tutorial for developing a mobile web app using the HTML  interface with jQueryMobile. The series contains tutorial on how to use HTML and jQueryMobile to construct the app’s interface, PHP+MySQL to run the back-end, AJAX, using phoneGap/Cordova to generate Android APK, and lastly to upload to Google Play Store.

These are the link of completed tutorials related to Mobile Web Apps Development

  1. Mobile Apps using HTML interface with JQUERYMOBILE (this page)
  2. Complete code sample of Mobile Web Apps with FRONT-END and BACK-END
  3. Using AJAX to populate data from mobile web interface
  4. Generating APK using BUILD.PHONEGAP.com
  5. Generating Android Project using CORDOVA
  6. Publishing to Google Play Store
  7. Mobile Web Apps development TRAINING
  8. The sample app published in Google Play Store

jQueryMobile is a JavaScript + CSS framework born from jQuery. The best place to learn jQueryMobile is by accessing the official website at http://demos.jquerymobile.com/

As the name framework, there suppose to have library of codes ready to use. In the jQueryMobile case, you need to download both the jQuery framework, and the jQueryMobile framework in order for this tutorial to proceed as we intent.

image

 

STEP 1: Preparing the project folder with the jquery & jquerymobile library.

We’d like to recommend the following folder and sub-folders for your HTML app project. Prepare them first.

image

Open the jquerymobile zip files you just downloaded previously. Copy all the Cascading Style Sheet (*.css)files and the images to the css folder you created. You can do this by selecting the images folder and the css, clicking and dragging them to your css folder. *The images folder in the jquerymobile zip file contains the icons for your css interface.

image

imageThe css files copied to your css folder.

Then copy the javascript files (*.js) to your js folder.

image

Now open the jquery file (*.js) your downloaded early in the tutorial.

image

Then you got your js folder ready for jquerymobile implementation.

image

STEP 2: Developing the HTML interface

The mobile interface is mainly in the index.html. Use any of your HTML editor to ammend the index.html content. This is some example of the content. The first part is the jquery and jquerymobile API inclusion in the header. The template below also provide heading, content and footer divisions.

image

The sample code:

<!DOCTYPE html>
<html>
<head><title>Page title is here</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- include the jquerymobile and jquery API files here -->
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.2.min.js"></script><script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
<!-- main page -->
<div data-role="page" id="home">
<!-- header -->
<div data-role="header" data-position="fixed">
<h1>Header content is here</h1>
</div>

<!-- content -->
<div role="main" class="ui-content">
<p>Main content is here</p>
</div><!-- end content -->

<!-- footer -->
<div data-role="footer" data-position="fixed">
<h2>Footer text is here</h2>
</div><!-- end footer -->
</div><!-- end of home -->
</body>
</html>


Note the viewport in one of the meta. By setting the viewport attributes to content="width=device-width, initial-scale=1", the width will be set to the pixel width of the device screen.


<meta name="viewport" content="width=device-width, initial-scale=1">


Output sample: preview in the browser.


image





STEP 3: Multi-page template structure


A single HTML document can contain multiple "pages" that are loaded together by stacking multiple divs with a data-role of "page". Each "page" block needs a unique id that will be used to link internally between "pages" (href="#foo"). When a link is clicked, the framework will look for an internal "page" with the id and transition it into view.


Here is an example of a three"page" site built with three jQuery Mobile divs navigated by linking to an id placed on each page wrapper. Note that the ids on the page wrappers are only needed to support the internal page linking, and are optional if each page is a separate HTML document.



  • page 1 is the main page with id=”home”
  • page 2 is the about page with id=”about”
  • page 3 is the directory page with id=”directory”

For this exercise to work, there’s an image named logo.jpg need to be prepared in the folder images. Your company logo or any low resolution image will do.


The complete source-code of the index.html file.


<!DOCTYPE html>
<html>
<head><title>Kerul.net Company Directory</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.2.min.js"></script><script src="js/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>

<!-- ************************** main page -->
<div data-role="page" id="home">
<!-- header -->
<div data-role="header" data-position="fixed">
<h1>kerul.net</h1>
</div>

<!-- content -->
<div role="main" class="ui-content">
<p>This app provide info about the company.</p>
<!-- provide a logo.jpg image in the folder images -->
<img src="images/logo.jpg" width="200" height="200">
</br>
</div><!-- end content -->

<!-- footer -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#directory" >Dir</a></li>
<li><a href="#about" >About</a></li>
</ul>
</div><!-- end navbar -->
</div><!-- end footer -->
</div><!-- end of home>



<!-- ************************** about apps -->
<div data-role="page" id="about">
<!-- header -->
<div data-role="header" data-position="fixed">
<h1>kerul.net</h1>
</div>

<!-- content -->
<div role="main" class="ui-content">
<p>Developer - kerul.net</p>
<p>
This is the a sample app developed using HTML for Kerul.net. The blog has been discussing programming since 2005. The company started publishing Android apps in the year 2010, and its apps among others are Malay Proverb Dictionary (Peribahasa) and m-Mathurat. Currently, it is working on the Windows Phone version of the apps. There are also Hijra of the Prophet Muhammad app in the Windows Phone store.

PHP, C#, and Java are also the programming languages that the blog is familiar with.
</p>
<a href="http://kerul.net" class="ui-btn ui-icon-action ui-btn-icon-right ui-btn-corner-all" target="_blank"> go to kerul.net</a>
</br>
</div><!-- end content -->

<!-- footer -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#directory" >Dir</a></li>
<li><a href="#about" >About</a></li>
</ul>
</div><!-- end navbar -->
</div><!-- end footer -->
</div><!-- end of home>



<!-- ************************** direktori page -->
<div data-role="page" id="directory">
<!-- header -->
<div data-role="header" data-position="fixed">
<h1>kerul.net</h1>
</div>

<!-- content -->
<div role="main" class="ui-content">
<p>Company staff directory</p>
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search staffs..." data-inset="true">
<li><a href="#s1" data-rel="popup">Khirulnizam</a></li>
<li><a href="#s2" data-rel="popup">Ashraf Chunawi</a></li>
<li><a href="#s3" data-rel="popup">Faiz Othman</a></li>
<li><a href="#s4" data-rel="popup">Athirah Ghani</a></li>
<li><a href="#s5" data-rel="popup">Najwa Humaira</a></li>
<li><a href="#s6" data-rel="popup">Osman Ahmad</a></li>
</ul>
</div><!-- end content -->

<!-- popup staff1 -->
<div id="s1" data-role="popup">
<ul data-role="listview" data-inset="true">
<li><a href="tel:+6012-9034614"
class="ui-icon-phone ui-btn
ui-btn-icon-left ui-btn-corner-all ui-btn-inline"
>
Call</a></li>
<li><a href="mailto:khirulnizam@gmail.com"
class="ui-icon-mail
ui-btn ui-btn-icon-left ui-btn-corner-all
ui-btn-inline"
>
Email</a></li>
</ul>
</div>
<!-- popup staff2 -->
<div id="s2" data-role="popup">
<ul data-role="listview" data-inset="true">
<li><a href="tel:+6012-0122655055"
class="ui-icon-phone ui-btn
ui-btn-icon-left ui-btn-corner-all ui-btn-inline"
>
Call</a></li>
<li><a href="mailto:mf4iz@gmail.com"
class="ui-icon-mail
ui-btn ui-btn-icon-left ui-btn-corner-all
ui-btn-inline"
>
Email</a></li>
</ul>
</div>

<!-- footer -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#directory" >Dir</a></li>
<li><a href="#about" >About</a></li>
</ul>
</div><!-- end navbar -->
</div><!-- end footer -->
</div><!-- end of directory -->
</body>
</html>



The output sample:

imageimageimage

***We have made the tutorial on how to use build.phonegap.com to generate signed Android APK, proceed here for the compete step-by-step lesson.

Comments

Popular posts from this blog

Several English proverbs and the Malay pair

Or you could download here for the Malay proverbs app – https://play.google.com/store/apps/details?id=net.kerul.peribahasa English proverbs and the Malay pair Corpus Reference: Amir Muslim, 2009. Peribahasa dan ungkapan Inggeris-Melayu. DBP, Kuala Lumpur http://books.google.com.my/books/about/Peribahasa_dan_ungkapan_Inggeris_Melayu.html?id=bgwwQwAACAAJ CTRL+F to search Proverbs in English Definition in English Similar Malay Proverbs Definition in Malay 1 Where there is a country, there are people. A country must have people. Ada air adalah ikan. Ada negeri adalah rakyatnya. 2 Dry bread at home is better than roast meat home's the best hujan emas di negeri orang,hujan batu di negeri sendiri Betapa baik pun tempat orang, baik lagi tempat sendiri. 3 There's no accounting for tastes We can't assume that every people have a same feel Kepala sama hitam hati lain-lain. Dalam kehidupan ini, setiap insan berbeza cara, kesukaan, perangai, tabia

Contact Us at blog.kerul.net

Powered by EMF HTML Contact Form

Login JSON Android using Login Activity

I’ve been trying to release this tutorial quite a while. At last after a long hard effort. Since HttpClient is not supported any more in Android SDK 23, I have to resort to org.json.JSONObject and java.net.HttpURLConnection library to do online database with JSON. The objective of this tutorial is to log-in from a mobile client with the username and password stored in an online database facility. STEP 1: Create a new Android project, this time choose the LoginActivity .

Bootstrap Template for PHP database system - MyCompanyHR

HTML without framework is dull. Doing hard-coded CSS and JS are quite difficult with no promising result on cross platform compatibility. So I decided to explore BootStrap as they said it is the most popular web framework. What is BootStrap? - Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. (  http://www.w3schools.com/bootstrap/   ) Available here -  http://getbootstrap.com/ Why you need Flat-UI? Seems like a beautiful theme to make my site look professional. Anyway you could get variety of BootStrap theme out there, feel free to select here  http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/ Flat-UI is from DesignModo -   http://designmodo.com/flat/ Web Programming MyCompanyHR – PHP & MySQL mini project (with Boostrap HTML framework) Template 1: Template for the Lab Exercise. This is a project sample of a staff record management system. It has the PHP structured co

WebDev

http://blog.kerul.net PHP DEVELOPMENT TOOLS Download the XAMPP latest version from www.apachefriends.org . This installation file contains the Apache web server, PHP 5 and 4 interpreter, and the MySQL 5 Community edition. - download latest version MozillaFireFox (OpenSource web browser firefox) – download latest version Google Chrome – fastest web browser on earcth – fast download chrome here TEACHING PLAN Download the teaching plan here for Web/Internet Programming ( download ) NOTES HTML references HTML Editor -  http://www.sublimetext.com/ Lab 1: HTML Basics -  http://www.w3schools.com/html/ Lab 2: Responsive Design:  http://www.w3schools.com/html/html_responsive.asp Lab 3: HTML Forms  http://www.w3schools.com/html/html_forms.asp Lab 4: HTML 5  http://www.w3schools.com/html/html5_intro.asp Lab 5: Bootstrap for responsive Web -  http://www.w3schools.com/bootstra