Makitweb Posts

File Transfer plugin allows to upload photo or files to the remote server from the PhoneGap app.

In this tutorial, I am using Camera plugin to take a photo from camera or gallery. It will return response either in base64 format or path. You can use jQuery AJAX to upload photo in base64 format.

But it is not the better way because it works well when the image quality is low but when the image is taken from better camera device or photo quality is good then it increases the image size and takes a longer time to process, crash the app, slow down the device.

While adding File transfer plugin it will automatically download File plugin also that use to manipulate files in the device.

In the demonstration, I am creating a basic app where upload the selected photo to the server.

Capture and Upload photo to server with PhoneGap

Phonegap

Require using device camera to allow the users to change or upload their image from the app either by taking a photo with the camera or choose from the photo gallery.

With camera plugin, you can access device camera to capture a picture and select existing photos from the device gallery.

It gives a response in the base64 format or path on the successful callback that can use in image source to show the preview of selected photo or save it to the server.

In this tutorial, I show how you can implement the plugin in your project and select photo with it.

Choose an image from camera or gallery - PhoneGap

Phonegap

QR code is quick response code that has large storage capacity. It is consist of black and white square box that can be read using smartphones or dedicated QR reading devices to gain access to additional information.

This can be used for advertisement, storing web site URL, information, etc.

In this tutorial, I am using the jquery.qrcode.js plugin to generate custom QR code and embed on the web page.

You can adjust its size, background and foreground color with options.

Add QR code to the webpage with jquery.qrcode.js

Jquery

CodeIgniter have an inbuilt upload library that allows to upload file.  You can specify various preference like – destination path, valid file types, max file size, etc.

In this tutorial, I create a simple example to demonstrate file uploading in CodeIgniter.

How to upload file in CodeIgniter

PHP

If you know how to send jQuery AJAX request in Core PHP then it is simpler for you to do it in CodeIgniter.

In CodeIgniter, you can use the controller and model to handle AJAX call instead of creating the separate file. Make AJAX call either from the view or external script file.

In this tutorial, I am creating a simple example to demonstrate the AJAX calling in CodeIgniter.

How to Send AJAX Request In CodeIgniter

AJAX Jquery PHP

Load more pagination allows the users to load new content on a button click. This appends new content with existing contents.

It is the type of infinite pagination where the user has to click the action button to view new records. This load data until records are available.

In this tutorial, I am implementing this functionality on a page with AngularJS and PHP.

Load more pagination with AngularJS and PHP

AJAX AngularJS PHP

Data storing is a basic requirement while creating an application.

It is possible to store data online but the app needs to be online whenever data processing is required.

For local data storage use SQLite database which is already embedded on the mobile platforms – Android, IOS, Windows, Blackberry, etc.

The Cordova plugin provides support to access SQLite database in the app.

In this tutorial, I am creating an Android app where use SQLite database to save and retrieve records. Deploy the application with PhoneGap Build.

Storing Data Locally in a PhoneGap App with SQLite

DataBase Phonegap

The autocomplete functionality shows the suggestion list according to the entered value. The user can select a value from the list.

With jQuery UI you can easily add autocomplete widget on the input element. Navigate to the suggestion list either by mouse or keyboard arrow keys.

It has the various options that allow us to customize the widget.

You can fix the suggestion source value while initializing in this case whenever the user typed any character then it searches the value within the given source value or you can make it dynamic with AJAX.

In the demonstration, I am implementing this on an element which shows the user’s name list according to the entered value with AJAX.

jQuery UI autocomplete with PHP and AJAX

AJAX Jquery PHP

You cannot directly access the system feature in your PhoneGap app to extend its functionality.

PhoneGap provide various plugins that allow accessing features like – camera, geolocation, contacts, battery status etc.

The plugins are written in native language for each platform e.g. Java for Android, Objective-C for IOS, etc. It is accessed by JavaScript in PhoneGap project.

You can easily add plugin using NodeJS.

Plugin implementation is different for each platform.

In this tutorial, I am adding the battery-status plugin to PhoneGap android app. That gives battery level status of the device.

To deploy the application I am using PhoneGap Build.

Add plugin to the Android app - PhoneGap

Phonegap

All logical operation and database handling done in the Models like insert, update or fetch records.

Codeigniter has predefined Database methods to perform database request.

In the demonstration, with View show the HTML form and when the user submits the forms then call the Model method to insert record from the controller.

Insert record to Database Table - Codeigniter

PHP