Nasrul Hazim Bin Mohamad

Training: Mobile Apps Development with Intel XDK

Jan
18

Location: Medina Arabic Training & Solutions, Bangi Sentral (Above Melaka Kitchen Restauurant)


 

Date: 23th & 24th January 2016

Available Seats: 20 seats

Fees:

Student
Package Intel XDK API
2 Days 150
1 Day 50 120

 

Public
Package Intel XDK API
2 Days 250
1 Day 100 175

* Fee payment must be made first in order to reserved your seats.

Training-Intel-XDK-NHM-20160121

 

 

Register here if you unable to see the Google Form embed in this post.

JavaScript: JSON

Nov
17

JSON, number of references for beginners, shared by one of my student during training in INTIM, Kemaman.

blog-json

blog-json

Training: Web Mobile Application Development (Basic / Intermediate) – INTIM – August 2015

Aug
16

Training: Web Mobile Application Development (Basic / Intermediate)

Location: INTAN Kampus Wilayah Timur (INTIM), Kemaman, Terengganu

Date: 17th – 20th August 2015

Slide: http://bit.ly/training-web-mobile-application-development

Training Materials:

  1. Web Mobile Application Starter Kit – https://bit.ly/training-mobile-app-starter-kit
  2. Basic Android Configuration – https://bit.ly/training-mobile-app-android-config
  3. API Template – https://bit.ly/training-api-template

Important Articles:

  1. HTTP Methods for Restful Services – http://bit.ly/htpp-nethods-for-restful-services
  2. Android Configuration – http://bit.ly/android-config-xml
  3. Chrome Device Mode – http://bit.ly/chrome-device-mode

 

HTML: Editable Elements

Apr
24

I’m using the following:

  1. X-editable
  2. Bootstrap 2
  3. Cakephp / Any PHP Framework

Include the jQuery, Bootstrap 2 in your HTML head

<head>
    <!-- jQuery -->
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <!-- Bootstrap -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="js/bootstrap.min.js"></script>

    <!-- X-Editable -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap-editable/js/bootstrap-editable.min.js"></script>
</head>

The View

<a href="#" class="x-editable" data-type="text" data-pk="1">Some value 1</a>
<a href="#" class="x-editable" data-type="text" data-pk="2">Some value 2</a>

The JavaScript

$(document).ready(function() {
    $.fn.editable.defaults.mode = 'inline';

    $('.x-editable').editable({
        url: 'something/update'
    });
});

The Controller

<?php 
App::uses('AppController', 'Controller');

class Something extends AppController {

    public function update()
    {
        /* Data structure we received from x-editable
            Array
            (
                [name] => 
                [value] => Some value 1
                [pk] => 1
            )
        */
        $data = $this->request->data;
        $this->Some->read(null, $data['pk']);
        $this->Some->set('value', $data['value']);
        $this->Some->save();
        // return JSON if u need it or render a HTML (need to handle on success event)
    }
}
?>

References

  1. X-editable
  2. http://jquery.com/download/
  3. http://getbootstrap.com/2.3.2/getting-started.html

Angular X-editable – http://vitalets.github.io/angular-xeditable

Android – Connect to PHP

Feb
13

Search keyword: android connect to php

Here, I’m going to show the simplest way to connect to the PHP in Android – receiving JSON(JavaScript Object Notation) upon successful. You could make a simple JSON response in a PHP script like the following and deploy it to the server / localhost.

$arr = (object) array();
$arr->str = "String";
$arr->number = 1;
$arr->rightOrWrong = true;
$arr->nothing = null;
$arr->decimal = 10.209;
$arr->arr = array(1,2,3,4);
$arr->obj = (object) array('one' => 1, 'two' => 2, 'three' => 3, 'four' => 4);
$arr->title = "This is a JSON object";

echo json_encode($arr);

I’m creating a new Android project in Eclipse and extending the AsyncTask class in order to connect to PHP, and using HtppGet to make a connection to the server(can be Windows / Linux base).

package com.rndxpress.androidphpmysql;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;

import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.os.AsyncTask;
import android.util.Log;

public class Conn extends AsyncTask<Void, Void, Void> {
	
	private static String convertStreamToString(InputStream is) {
        
        BufferedReader reader = new BufferedReader(new InputStreamReader(is));
        StringBuilder sb = new StringBuilder();
 
        String line = null;
        try {
            while ((line = reader.readLine()) != null) {
                sb.append(line + "n");
            }
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            try {
                is.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return sb.toString();
    }
	@Override
	protected Void doInBackground(Void... params) {
	String url = "http://[domain-name]/[json-interface]";
		
        HttpClient httpclient = new DefaultHttpClient();
 
        HttpGet httpget = new HttpGet(url); 
 
        HttpResponse response;
        try {
        	
            response = httpclient.execute(httpget);
            // Examine the response status
            Log.i("Conn::response",response.getStatusLine().toString());
 
            HttpEntity entity = response.getEntity();
            
            if (entity != null) {
            	 
                // A Simple JSON Response Read
                InputStream instream = entity.getContent();
                String result = convertStreamToString(instream);
                Log.i("Conn::result",result);
 
                // A Simple JSONObject Creation
                JSONObject json=new JSONObject(result);
                Log.i("Conn::JSONObject",json.toString());
                
                instream.close();
            }
        } catch (ClientProtocolException e) {
        	Log.i("Conn::ClientProtocolException",e.getMessage());
        } catch (IOException e) {
        	Log.i("Conn::IOException",e.getMessage());
        } catch (JSONException e) {
        	Log.i("Conn::JSONException",e.getMessage());
        } catch (Error e) {
        	Log.i("Conn::Error",e.getMessage());
        } 
		return null;
	}
}

Following are the screenshot from my Galaxy Nexus & result logged in Eclipse.

Once you able to received result / response, next step you can further develop apps for more complex operations with PHP, MySQL or any further processing on the server side.

Simple UI - a button with click event to connect to the server.

Simple UI – a button with click event to connect to the server.

Logged result - JSON.toString()

Logged result – JSON.toString();