BootStrap & Flat UI – a new venture

image

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/

image

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/

What Flat-UI from DesignModo have to offer you?

Buttons

image

Dropdown (SELECT)

image

Inputs

image

Alerts

image

Top menus

image

Flat UI Pro

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.

AJAX to populate data from mobile web interface

This tutorial is to demonstrate how a mobile web interface could use AJAX facility to populate data from online database. In this tutorial, we need to have the front-end (HTML interface) and the backend (PHP+MySQL). We are going to show the xampp to prepare the backend facilities (localhost).

THE FRONT-END (mobile web client)

In the front-end, AJAX is implemented to be able to call the backend page (PHP script). This is done via JavaScript.

Screenshot_2015-04-24-07-58-03

Though the interface looks plain, the code lies on the JavaScript.

<!DOCTYPE html>
<html>
<head>
<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" />
<link rel="stylesheet" href="css/themes/test-theme2.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

<!-- AJAX proces -->
<script>
$( document ).ready(function(){//check if the document/browser ready to run JavaScript
$('#btncari').click(function(){//the btncari as the trigger.
var namacarian=$('#txtcari').val();//capture the content of the textbox.
//write to the div named displayresult
$("#displayresult").html("Searching for "+namacarian).enhanceWithin();
//change your web-server here
//in this case, the file search.php is to handle the online database connection
var urlcarian="http://localhost/jpa_dir_backend/search.php";

//AJAX configuration
$.ajax({
url:urlcarian,//the URL
type:'post',//method used
async:'true',
crossDomain : 'true',
data:{txtcari:namacarian},//the data parameter to transfer
success:function(result){//if the connection success
//display the record in div displayresult
$("#displayresult").html(result).enhanceWithin();
},//success
error:function(request,error){//if the connection fail
alert("Network error!!!");//display error message
$("#displayresult").html("Network error!!!").enhanceWithin();
}//error
});//ajax
});//btncari click
});//end document ready

</script><!-- end AJAX proces -->

</head>
<body>
<div data-role="page" id="search-ajax">
<div data-role="header" data-position="fixed">
<h1>JPA app</h1>
</div>

<div role="main" class="ui-content">
<h1>Search using AJAX</h1>
<input id="txtcari" name="txtcari" type="text">
<button id="btncari" name="btncari" data-icon="search">
Search</button>

<div id="displayresult"> <!-- DIV to display the content from server page -->
Result will be displayed here...
</div>

</div>
<!-- footer -->
<div data-role="footer" data-position="fixed">
<h2>Copyright @2015 JPA</h2>
</div><!-- end footer -->
</div> <!-- end of page -->
</body>
</html>



THE BACK-END (SERVER)


These server pages will communicate to the database to display the search result.


Multiplatform Mobile Web Apps development–Intro

Introduction and concept of Multiplatform Mobile Web Apps development

Multiplatform Approach using HTML interface
- HTML + jQuery (JavaScript, CSS)
- Apache Cordova (HTML to Android Project)
- Eclipse ADT – to generate APK

 

Generating Android project using Cordova

This is my slide presentation for Android app development  hybrid approach for beginners -
Installation, Settings & Deployment in Windows 8 (Hybrid approach using HTML5, jQuery, Apache Cordova and Android SDK)
http://blog.kerul.net

Among the contents in the slides are;
Hybrid Approach – consists of
- HTML + jQuery (JavaScript, CSS)
- Apache Cordova (HTML to Android Project)
- Android Studio– to generate APK

What are tools needed to develop Android App Hybrid?
- HTML knowledge
- jQuery (JavaScript + CSS framework)
- PHP&MySQL (Online DB)
- NodeJS
- Apache Ant
- Apache Cordova
- Latest JDK
- Android Studio
- Android SDK

This is among my earlier attempt to generate signed APK from Android project by Cordova Platform.

image

Android Studio has been the official IDE for Android apps development. So now is compulsory to migrate to Android Studio should you were obsessed with Eclipse ADT previously.

Bookmark this post to comeback later. To be continued. This post is developing, thanks for your patient…

Popular Posts

WorldConferences.net