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.
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 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.
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.
Bootstrap provides dozens of custom plugins that helps to create better UI. With this, you can easily add tooltip to the HTML elements.
A tooltip will appear when the user moves the mouse pointer over the element e.g. link, buttons, etc. This gives hint or quick information to the user.
PhoneGap is a framework that use to build mobile applications for multiple platforms - Android, iOS, Windows Phone, Blackberry etc.
With HTML, CSS, and JavaScript you can build an application.
You don't have to require to re-write code for other platforms.
AJAX is use to communicate with the server to perform the action without the need to refresh the page.
You can either handle AJAX requests on the same page or on the separate page.
The pace.js is an automatic page load progress bar. You don't need to write any code to initialize the script during page load.
It is easy to implement and not dependent on any other external JavaScript libraries.
There is always the possibility that the users may not enter the values as we expected and the data is being saved on the Database table. E.g. unwanted whitespace or characters with the value.
You will see the issue when you check for duplicate records or sort the list.
Webcam.js is a JavaScript library that allows us to capture picture from the webcam.
It uses HTML5 getUserMedia API to capture the picture. Flash is only used if the browser doesn't support getUserMedia.
Most of the eCommerce sites e.g. Flipkart, Snapdeal, etc have a price range slider for searching purpose.
The user doesn't have to enter price range manually.
The alphabetical pagination searches the records according to the first character in a specific column.
You can either manually fix the characters from A-Z or use the database table column value to create the list.
It is always a better idea to check the entered username exists or not if you are allowing the users to choose username while registration and wants it to be unique.
With this, the user will instantly know that their chosen username is available or not.
By default, jQuery uses $ as an alias for jQuery because of this reason sometimes it conflicts with other JS libraries if they are also using $ as a function or variable name.
jQuery has inbuilt methods that allow searching for the certain class within the element.
By using them you can easily check class on the selector and perform the action according to the response.
There are many sites which offer free weather widget for the website. That are easy to embed.
You only need to specify some of the mandatory fields for generating the code.
The Unix timestamp value conversion with JavaScript mainly requires when the API request response contains the date time value in Unix format and requires to show it on the screen in user readable form.
The Siema is a lightweight JavaScript plugin that adds carousel slider on the page. It is not dependent on any other plugins and not require to do any styling.
It is easy to setup on the page.
The autocomplete functionality gives the user suggestions based on its input. From there, it can select an option.
In the demonstration, I am creating a search box and display suggestion list whenever the user input value in the search box.