Create a Product Grid using Json

Here is the Part 1

Here is the Part 2

Here is the Part 3

Here I have posted all the three Videos to Create the product Grid.
Download the project from here

Dear Guys in this video I show you how to populate the product grid with JSON data.Note that this JSON data was created using PHP language.Comment your doubts below in the comment section.
Share this Video with your friends if you found this helpful!

View my Blog

View my Website

Subscribe to my channel

Recommended BlueHost Webhosting

Remove background noise from videos using Adobe Premier Pro cc

View my Blog

Subscribe to my channel


fade volume

Improve audio

Dear Guys,

In this Video I show you how to remove noise from audio using denoiser it is an easy tutorial and should be easy to follow.

I hope you enjoy watching the video thank you.

#Angular & JavaScript Series - On Ready function & Asynchronous code

Dear Guys This is the third Video in the Series I show you about the On Ready function and some small explanation for Asynchronous Javascript Code..

View My Blog

Subscribe to my channel for More Videos :)

Cheap lighting for videos | Create Good Videos | Importance of lighting ...

Dear Guys,
I have tried to improve the lighting in my house to so thought I will show you what difference it made...
I how cost effective it is to improve video quality by just improving the lighting!
I hope that you enjoy watching this Video.Take Care Guys!

View my Blog

Subscribe to my channel

Moon Timelapse Video | Magic Lantern | Canon 700d T5i 55-250 mm kit lens...

Dear Guys,

I thought of Creating this video to show you how to Video Record the moon.

I used the zoom kit lens lens 55-250 mm to record the video.I used the magic crop in magic lantern to obtain the zoom,

I hope that this Video was useful to help you know the settings that I have used.

I hope you enjoyed watching the Video!

Song in this video

DEAF KEV - Invincible

View my Blog

Subscribe to my channel

Create your Website in Minutes free | Create a Website Easy Tutorial

Visit Wix Using this link

View the Website here

Dear Guys in this Video I show you how I Create a Very simple yet powerful website.This website can be used for your business purposes too since it its Very Elegant and Professional.

Many people think that Website Creation is a very complicated task and difficult but in this Video I have proved you wrong.

I hope you have enjoyed watching this Tutorial.

View my Blog

Subscribe to my channel

#DoNotLitter KEEP THE PLACE YOU LIVE CLEAN | Joel Vlog at Bhuigauv beach...

Dear Guys in this Video I show you the beach in Vasai.This beach is called bhuigao beach.This Beach is a really beautiful beach but few days ago I visited the beach I found the surrounding littered with a lot of plastic bags and many funny things I urge you to share this page with others so that people are always aware to keep their surrounding clean.Take care guys.Stay updated for more Videos.

sqllite Easy Tutorial

Here is the Video

Dear Guys,
In this Video I show you how to set up a simple Sqlite database using js.This database will be very useful for you Cordova or phone gap app database.I hope you enjoy watching this Video.
Share your thoughts and questions below.Take care Guys!

View my Blog

Subscribe to my channel

Below is the code to help you understand the basic Note that the same code was used in the Video.

function DBHelper() {
    var database = window.openDatabase("DoctorChat", "1.0", "DoctorChat", 200000);
    return database;

function SuccessDB(tx) {
    alert('Successfully Inserted.');

function SucessCreateTable(tx) {
    //alert('Successfully Table Created.');

function ErrorDB(error) {
    alert('Error : ' + error.message);

function ErrorInsertDB(error) {
    alert('Error when inserting : ' + error.message);

var Syncanswertable = function () {
     var url = '';
     $.post(url, function(data){
    DBHelper().transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS app_getanswers(ID Text, question Text, answer Text, weight Text, synonyms Text, other Text)');

//DBHelper().transaction(function (tx) { tx.executeSql("DELETE FROM app_getanswers"); });

DBHelper().transaction(function (tx) {

        var length = localStorage.getItem('length');
        if(length == null){length = 0;}
        alert(length+'i am length');
        if(length < data.length){
        alert(data.length+'i am getanswers');
        tx.executeSql("DELETE FROM app_getanswers");
   for (var cnt = 0; cnt < data.length; cnt++) {

       var ID = data[cnt].CashRegisterID;
       var question = data[cnt].question;
       var answer = data[cnt].answer;
       var weight = data[cnt].weight;
       var synonyms = data[cnt].synonyms;
       var other = data[cnt].other;

       tx.executeSql("INSERT INTO app_getanswers(ID, question, answer, weight, synonyms, other) values('" + ID + "', '" + question + "', '" + answer + "', '" + weight + "', '" + synonyms + "', '" + other + "' " + ");");
}, ErrorDB, SucessCreateTable);
           /* DBHelper().transaction(function (tx) {
       tx.executeSql('CREATE TABLE IF NOT EXISTS app_getanswers(ID Text, question Text, answer Text, weight Text, synonyms Text, other Text,UNIQUE (question))');
    }, ErrorDB, SucessCreateTable);

    var url = '';
     $.post(url, function(data){
   //alert(JSON.stringify(data)+'i am getanswers');
         //var getanswers = data; " + "
         for (var i = 0; i < data.length; i++) {
             var queryss = "INSERT OR REPLACE INTO app_getanswers(ID, question, answer, weight, synonyms , other) values( '" + data[i].ID + "'  , '" + data[i].question + "'  , '" + data[i].answer + "'  , '" + data[i].weight + "' , '" + data[i].synonyms + "' , '" + data[i].other + "' ); ";
             DBHelper().transaction(function (tx) {
    }, ErrorInsertDB, SuccessDB);
         //var strQuery="INSERT INTO app_getanswers(ID, question, answer, weight, synonyms, other) Values(?, ?, ?, ?, ?, ?) ON DUPLICATE KEY UPDATE subs_name     = VALUES("+subs_name+"),subs_birthday = VALUES("+subs_name+")";
         /*   $.each(data.d, function (index, store) {
            DBHelper().transaction(function (tx) {
            tx.executeSql(strQuery,[store.StoreID, store.Name, store.Address, store.State, store.City, store.CountryName]);
            }, ErrorDB, SuccessDB);
    }).fail( function(jqXHR, textStatus, errorThrown) {
  alert('error occured');

function GetAnswers(question)
    // WHERE question LIKE %"+question+"%
    //alert('hi i amget answers');
    return new Promise(function(resolve, reject) {
    var question = 'hi';
var sqlData = "SELECT * FROM app_getanswers WHERE question LIKE '%"+question+"%'";
    DBHelper().transaction(function (tx) {
        tx.executeSql(sqlData, [], function (tx, results) {

            for (var i = 0; i < results.rows.length; i++) {
                //alert(results.rows.item(i).answer+'i am the answer');
                var answer = results.rows.item(i).answer;
    },ErrorDB, function (data) {
   //return 5; 

how to increase website traffic for free - Tips by JoelWebsites

Some related articles that may help you are linked here

Hey guys today I will show you how to increase traffic to your website..Nice video for people who have new websites...Having a website without is pointless having it... so here are some few tips to help you get some more traffic!  ... you may be wondering what is traffic?... traffic is people visiting your website, its not the traffic we see on do not get confused by hearing the word traffic because traffic has multiple meanings!

One of the important tips is to share your website on social media, but before you share the website to social media you need to ensure that your website has a blog.. if your website has a blog people tend to read the post and they may find the post engaging!... so if your website has a blog people tend to read all the post on your website if they find it interesting to them...So make sure that your post are engaging and interesting and try to make sure people will read the post for a long time!..This will help you increase the time that people are present on your website!

Here are some nice blogs that are successful

Use these above blogs as a reference and an example ... so you can apply similar strategies and then create your blog too! ...the point is to look at other people`s blog and then take ideas for yourself!

Next step is to optimize your blog with keywords! So lets say if you have a ladies top business the keywords would be red ladies top, Green ladies top for young girls ,black dress...This will vary based on many factors!

You can try going to and then tyoe for a search phrase then you will see some related searches ...these are the searches that are being searched the most so I recommend you to use those keywords.This technique will help you find the correct keywords..

Once you got the keywords use these keywords in the title,meta description,url and the content...

Make sure that you do not spam too much using these keywords...

Google checks if you are following the webmaster guidelines...

Look at this link for the webmaster guidelines

Make sure the website content is suitable for new users to read ... try to explain to new website users about your website niche step by step... use some sort of numbering to the post to be systematic!

Next tip is to ask your friends what they think about your website,just some feedback it will help you find some flaws! A bad user experience is not good for seo.

Design is not so important but make sure your website loads fast and is easy to navigate!

Next tip is to put attractive images on your website to enhance the user experience so will decrease the bounce rate! optimize the image tags using the alt attribute...

Try to make sure that your post are interlinked with each other look at the video to get an idea this will help the google crawler to crawl properly on your website.

Create official pages on all social media make sure you share your content there and be sure that people see your content...if people like your content they will like and share your posts hence creating backlinks to your website..Create such quality content that people share your post automatically...

Create backlinks make sure your webpages are linked to and from other websites...Similar applies for youtube videos make sure your videos are linked to other videos.

Do not over do Seo .. content is king! Create content on a regular basis rather than focusing too much on Seo strategies!

Never Buy traffic from Pay Per Click websites

Be patient and keep Creating Content and you will see seo work!

Insert or Update data securely using Json php webservices

Dear Guys I have created this video because I had got a comment on my before video on how to insert data securely using the Json webservices ...This is a frequently asked question so that is the reason why I have created this video..
In this video I have shown you the most important steps to set this type of code it should be really easy..

Below are the code for the most important files


<?php header('Access-Control-Allow-Origin: *'); ?>
<?php header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept'); ?>
<?php header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT'); ?>

//Get the variables here
$username = isset($_POST['username']) ? mysql_real_escape_string($_POST['username']) :  "";
$email = isset($_POST['email']) ? mysql_real_escape_string($_POST['email']) :  "";
$password = isset($_POST['password']) ? mysql_real_escape_string($_POST['password']) :  "";
//Get the variables here end/update statement
$insertstatement = 'INSERT INTO `mytesttable`(`id`,`username`,`email`,`password`) VAlUES (NULL,"'.$username.'","'.$email.'","'.$password.'")';

$query123 = mysql_query($insertstatement) or trigger_error(mysql_error()." ".$insertstatement);

//echo "$query123";
//Registration code here (insert statements)

if($query123 == 1){

$result[] = array("status" => 1);
   $result[] = array("status" => 0); 
/* Output header */
header('Content-type: application/json');
echo json_encode($result);

Post in the javascript that was in login.htm

        password: confirmpassword,
        email: email,
        username: username
    function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
                var status = data[0].status;
                if(status == 1){
                    alert('inserted /updated sucessfully');
                if(status == 0){
                    alert('failure statement');


I hope that this tutorial was helpful comment below my video in case you have doubts or questions..

Subscribe to my channel

Retrieve Multiple Values using Json webservices

Dear Guys,
In this tutorial I show you how to retrieve multiple Values using Json webservices.

Here below is the code for the get answers file which is the most important which I had explained on the Video
<?php header('Access-Control-Allow-Origin: *'); ?>
<?php header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept'); ?>
<?php header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT'); ?>
error_reporting(E_ALL & ~E_NOTICE);

$uid = isset($_GET['uid']) ? mysql_real_escape_string($_GET['uid']) :  "";
$qur = mysql_query('SELECT * from app_getanswers ');
$result =array();
while($r = mysql_fetch_array($qur)){
//multiple values will be stored in the result varaible array
$result[] = array("ID" => $id,"question" => $question, "answer" => $answer, "weight" => $weight, "synonyms" => $synonyms, 'other' => $other);
          // $json = array("status" => 3, "msg" => "User ID not define");
$json = $result;
$json = array("status" => 0, "msg" => "UID not define");

/* Output header */
header('Content-type: application/json');
echo json_encode($json);

Now here is the Javascript that is needed to get the data using the for loop
which is really simple

 var url = '';
     $.post(url, function(data){

 for (var cnt = 0; cnt < data.length; cnt++) {

       var ID = data[cnt].ID;
       var question = data[cnt].question;
       var answer = data[cnt].answer;
       var weight = data[cnt].weight;


I hope that this article helped you ...If yes mention a comment below thank you :) View my Youtube channel here

How to Choose Blogging Platform? (Blogger Vs Wordpress)

How to Choose Blogging Platform?

You need to ask yourself one main question before you select your blogging platform..
You need to know what is your budget much money you can afford as a person.

Another question you need to ask yourself is what is the main purpose for your website?
Is it going to be just for fun? or Is it something serious....
WordPress is for someone more serious whereas Blogger is for other users..
Blogger has a search Description section where you can enter in your keywords so you can optimize your posts for Google...

I hope you see the above video which will help you take a Good Decision...

Basic Angular File Structure for Most Applications

Hey Guys here I am sharing with you the Very basic file structure to start writing any Angular Js application...I hope it is useful in your projects

It consists of two main files

the html file and the js file

The HTML file will look like the following

<html ng-app="joealmodule" ng-controller="JoelController">
/*scripts to include jquery and angular and css*/
<link rel="stylesheet" type="text/css" href="style.css">

        <link rel="stylesheet" type="text/css" href="">
<script src=""></script>
<script src=""></script>
    <script src="js/angular.min.js"></script>
    <script src="js/angular-animate.js"></script>
    <script src="js/pagination.js"></script>
    <script src="js/toastr/angular-toastr.min.js"></script>
    <script src="js/toastr/angular-toastr.tpls.min.js"></script>

    <script src="js/admin.js"></script>

Now here below you will see the admin.js file

var joelmodule = angular.module("joelmodule",["toastr","angularUtils.directives.dirPagination"]);
joelmodule.controller("JoelController", function($scope,$http, toastr,$timeout) {
toastr.success('Hello world!', 'Toastr fun!');

/*define functions*/
$scope.myfunctionname = function (){
alert('my first function');


joelmodule.config(function(paginationTemplateProvider) {
    setTimeout(function(){ paginationTemplateProvider.setPath('dirPagination.tpl.html'); }, 3000);

Here is the full explanation for pagination

View his Video for full understanding

Apart from this I have even added Toaster for messages

Make sure to download the files in the correct location ie dirPagination.tpl.html should be placed in the same folder as the html file as per the above example..Comment below if you still have doubts..

I hope that this tutorial was useful to you...

Angular JavaScript Tutorial Series - Soon to be Launched!

Dear Guys!...Welcome to my website ! :D I will soon be launching my own tutorial series after a few weeks where I will post one video Daily for 30 days!

In the Videos I will teach you about the basic concepts to learn Angular Js and JavaScript.

I will show you as I create small Examples

Subscribe to my channel to stay tuned

Improve Sound Quality in Adobe Premier Pro (Vocal Enhancer in Premiere Pro)

Dear Guys I have created this video to show you how I applied the effects that are the De hummer ,the  De Noise and Equalizer Effects in Adobe Premier.Fiddle with the settings as shown and preview untill you get the best sound output :)

Adobe Premier Pro is the Best software to edit your Videos.

Making these changes where quiet easy when using adobe premier pro

Subscribe to my channel

Php Code to send Push Notifications

Hey Guys Below is the code to help you send Push Notifications to your mobile app from your website (php server)

You will need to pass the device id in the url

For Example

Below is the sendpushnotification.php you will need to put in your Google Api key on the line  $apiKey = 'yourapikeyhere'.You will get it form the Google Developer Console.

// API access key from Google API's Console

echo $_GET['id'];
$registrationIds = array( $_GET['id'] );//

// prep the bundle
$msg = array
'message' => 'here is a message. message',
'title' => 'This is a title. title',
'subtitle' => 'This is a subtitle. subtitle',
'tickerText' => 'Ticker text here...Ticker text here...Ticker text here',
'vibrate' => 1,
'sound' => 1,
'largeIcon' => 'large_icon',
'smallIcon' => 'small_icon'
$fields = array
'registration_ids' => array($registrationIds),
'data' => $msg

$headers = array
'Authorization: key=' . API_ACCESS_KEY,
'Content-Type: application/json'

$ch = curl_init();
curl_setopt( $ch,CURLOPT_URL, '' );
curl_setopt( $ch,CURLOPT_POST, true );
curl_setopt( $ch,CURLOPT_HTTPHEADER, $headers );
curl_setopt( $ch,CURLOPT_RETURNTRANSFER, true );
curl_setopt( $ch,CURLOPT_SSL_VERIFYPEER, false );
curl_setopt( $ch,CURLOPT_POSTFIELDS, json_encode( $fields ) );
$result = curl_exec($ch );
curl_close( $ch );
echo $result;

Comment Below if you have Doubts or Questions

How to Update Version Cordova PhoneGap App?

Dear Guys,Joel here from :D in this small post I show you how to update your cordova app version
So how is this tutorial Going to be useful?
When uploading apps this happens during updating the existing app on the playstore we get an error that we need to update the Android Version for the app.

So it is really difficult to update the Version if you do not know what are the steps to done.
After lot of searching online.I finally found the solution.

We need to add android-versionCode="yourappversion" to the config.xml file like below.

Your widget tag code should look like below in the config.xml

Here is just an example

<widget android-versionCode="7" id="com.yourapp.YourApp" version="0.0.1" xmlns="" xmlns:cdv="">

You will find the config file in the following directories in your project folder.I made changes in all the config.xml files to make things simpler.

Later on you will see the manifest file updated like below after the build the android project
Your App directory/platforms/android/AndroidManifest.xml

<manifest android:versionCode="7" android:hardwareAccelerated="true" android:versionName="0.0.1" package="com.yourapp.Yourapp" xmlns:android="">

if android:versionCode is not available then you will need to add it like shown above.

Moreover , Google playstore may say that the version you need should be greater than 10 whereas you would see it to be set as 1 in your AndroidManifest.xml .So do not worry just increase the number and the rebuild the app and you should be fine...View the other article on how to sign and align the apk file for the playstore here

So once again here is the Golden code to change the app version for your Cordova PhoneGap Project in config.xml

<widget android-versionCode="AppVersion" id="com.yourapp.YourApp" version="0.0.1" xmlns="" xmlns:cdv="">

So I hope that this tutorial was useful do comment below if you have doubts or questions,Thank you

Check my youtube channel here

My skateboard fail 3/17/2013 INDIA Joel Fernandes

Think Before getting a Free theme! Should I Use a paid theme?

Dear Guys!..In this video I just explain some Reasons why its important to think before getting a new theme that is free...Most of the times its Good to opt for themes that are however most of the times it is Good to go for themes that are paid..It Really Depends on the seriousness of your Website.

SO the conclusion is that you should go for free themes if you are just a starter or otherwise Opt for a Paid Theme.

Angularjs for Beginners Simple login page using Angular JS and JSON

Dear Guys,

In this tutorial JoelWebsites have Created a very basic login Page using Angular Js,BootStrap,Json PHP

Its a Very useful tutorial for beginners who want to Learn about Angular and Php Json webservices.

View the full tutorial and download angularlogin the project files using link ( Remove all the javascripts alerts from the code & modify it as per your needs)

View the previous Jqery login tutorial here

Comment Below if you have doubts or Questions or If you have better methods to code

Subscribe to my channel

Basic Website Questions Answered! basic web development questions

Buy a Hosting or get a Domain from one of the best hosting services Bluehost

Arvixe Webhosting Don't forget to use the Arvixe coupon insaneadvantage and link to pick up your web hosting & domain for $4/month

Register on blogger to create a free Blog

Comment Below if you have more basic questions...
Hey Guys..Bhavesh Desai takes a very basic web development test an interview sort of where he asks Joel Fernandes JoelWebsites the very basic questions that people have when Creating website projects.
Note that these questions are based on what a common user think.
This video may be a bit funny but I am not sure...Comment your thoughts in the comments :)

I hope you enjoyed watching the video...

Subscribe to my channel

Create a Cordova Project from Scratch - Install the Most Important Softw...

USE the below steps to Create your Cordova App


(Setup for Eclipse Android Package Environment - if installed please ignore)
Download Package For Android setup Click To Download

Set Java Environment Variables
  1. Start > My Computer (right click)> Properties> Advance System Settings
  2. On System Properties window  Select Advance Tab
  3. Click Environment Variables
  4. In System Variable click New
  5. Variable Name: ANDROID_HOME  
  6. Variable Value: D:\All Proj\Android Activity\adt-bundle-windows-x86-20130917\sdk  (set your path)
  7. In System variable Open path variable and append in variable value  ;%ANDROID_HOME%\tools
  8. In System Variable click New ( Download latest version of  Apache .)
  9. Variable Name: ANT_HOME  
  10. Variable Value: C:\Program Files\ANT\apache-ant-1.9.3  (set your path)
  11. In System variable Open path variable and append in variable value  ;%ANT_HOME%\bin
  12. In System Variable click New ( Download latest version of  java jdk.)
  13. Variable Name: JAVA_HOME
  14. Variable Value: C:\Program Files\Java\jdk1.7.0_45  (set your path)
  15. In System variable Open path variable and append in variable value  ;%JAVA_HOME%\bin

Download and install Node.js.

Install the cordova module using npm utility of Node.js. The cordova module will automatically be downloaded by the npm utility.

(Commands for Installation :-  Start > Run > “cmd” )// to open command prompt
on Mac:
sudo npm install -g cordova

on Windows:
C:\>npm install -g cordova

Create New App ( Move to your folder path in cmd then follow below steps. )
>cordova create hello com.example.hello HelloWorld// Folder bundleID AppName
>cd hello
>cordova platform add ios  //For Mac
>cordova platform add android  //For Windows
>cordova platforms ls//For Mac -Folder view
>cordova build//For  Windows
>cordova build ios //For Mac
>cordova run android //For Windows( Please refer below section -- Get the device recognized by your system)

Plugins- if required
Basic device information (Device API):
cordova plugin add org.apache.cordova.device
Network Connection and Battery Events:
cordova plugin add
cordova plugin add org.apache.cordova.battery-status
Accelerometer, Compass, and Geolocation:
cordova plugin add org.apache.cordova.device-motion
cordova plugin add org.apache.cordova.device-orientation
cordova plugin add org.apache.cordova.geolocation
Camera, Media playback and Capture:
cordova plugin add
cordova plugin add
cordova plugin add
Access files on device or network (File API):
cordova plugin add org.apache.cordova.file
cordova plugin add org.apache.cordova.file-transfer
Notification via dialog box or vibration:
cordova plugin add org.apache.cordova.dialogs
cordova plugin add org.apache.cordova.vibration
cordova plugin add org.apache.cordova.contacts
cordova plugin add org.apache.cordova.globalization

cordova plugin add org.apache.cordova.splashscreen
Open new browser windows (InAppBrowser):
cordova plugin add org.apache.cordova.inappbrowser
Debug console:
cordova plugin add org.apache.cordova.console

To remove plugins
cordova plugin rm Plugin-Name
cordova plugin rm org.apache.cordova.console