How to make Bar Chart in YII Framework (using ext yii.Highcharts)

Hello again everyone, this last few weeks, i’ve been dealing with Graph in Java Web, espescially using D3.js but i’ll share about D3 in my next post may be.

Last time i posted about Yii Framework and now i will add one more post about it. Now, i want to share just a simple post (again) about how to make charts in Yii Framework. Well, may be you notice that i really like to use yii framework to my side-projects (outside of my works in the office building). Yes, i really like it. One of my reason is i can do the things in yii easily and more efficient code. Like one in THIS POST.

Well, back to Highcharts~ On my last projects, turns out that i need to make some graph on it, then, ok i will try some of it. One of the way to make it is using yii extension, and one of the famous one is Yii Highcharts. Well, now i will share about how to using it in my yii projects.

First, we need to download and extract yii.highchart extenstion inside protected/extensions folder. Do not forget to remove the version number in the folder name. Just like this :

Now, we need to modify config/main.php to add yii.highchart extension, on this line :

// autoloading model and component classes
‘import’=>array(
‘application.models.*’,
‘application.components.*’,
‘ext.yii-highcharts.*’,
‘ext.print.*’,
),

then we can use highchart extension like this -> “ext.yii-highcharts.highcharts.HighchartsWidget”

And we’re ready to use our highchart ext.

// BEGIN BAR CHART
$this->widget(‘ext.yii-highcharts.highcharts.HighchartsWidget’, array(
‘options’=>array(
‘chart’=> array(‘defaultSeriesType’=>’column’,),
‘title’ => array(‘text’ => ‘Fruits’),
‘legend’=>array(‘enabled’=>false),
‘xAxis’=>array(‘categories’=>array(‘Apples’, ‘Mangos’, ‘Strawberries’, ‘Grapes’, ‘Oranges’),),
‘yAxis’=> array(
‘min’=> 0,
‘title’=> array(
‘text’=>’Total’
),
),
‘series’ => array(
array(‘data’ => array(10,9,13,15,20))
),
‘tooltip’ => array(‘formatter’ => ‘js:function() {return “<b>”+ this.x +”</b><br/>”+”Fruits : “+ this.y; }’),
‘plotOptions’=>array(‘pie’=>(array(
‘allowPointSelect’=>true,
‘showInLegend’=>true,
‘cursor’=>’pointer’,
)
)
),
‘credits’=>array(‘enabled’=>false),
)
));

And the chart will looks like this :

Also, we can configure more about the chart widgets where you can read more here -> http://www.yiiframework.com/extension/highcharts/

Okay , that’s all. A very very simple post this morning. Btw, i”ve used plugin for syntax highlighter years ago, but looks like it doesn’t appear anymore. T.T

Advertisements

How to Generate Signed APK – Android Studio

This is another note for me, hehe. This is step from make new key and make signed apk.

  1. In the menu bar, Click Build > Generate Signed APK
  2. Click Create New

    • Key store path: Select the location where your keystore should be created.
    • Password: Create and confirm a secure password for your keystore. On the new keystore, we must fill the form.
    • Alias: Enter an identifying name for your key.
    • Password: Create and confirm a secure password for your key. This should be different from the password you chose for your keystore
    • Validity (years): Set the length of time in years that your key will be valid. Your key should be valid for at least 25 years, so you can sign app updates with the same key through the lifespan of your app.
    • Certificate: Enter some information about yourself for your certificate. This information is not displayed in your app, but is included in your certificate as part of the APK.
  3. Select apk destination folder, build type : release. Choose signature version and then click Finish!
  4. Open in File explorer, and there is your signed APK : yourprojectname/app/build/outputs/apk /app-release.apk
  5. Done!

It’s a very short post but thank you for visit.

Generate CRUD in Yii Project using Gii

This time, i will share about how to Generate code with Gii – in Yii Framework.

Last time, i got some projects, web based and i decided to use Yii to saved time. Bcz its easier, and provides Crud Generator , so it will make it faster in this short-time project. And, i use yii bcz it’s more familiar for me. And this is just a note for my self so dont hv to browse again.

  1. Make sure you already have database, and make your table. Ex: User
  2. Open URL : http://localhost/[YOUR_PROJECT_NAME]/gii/default/login
    use your login password, that you can find on config folder/ main.php, on this line :
    uncomment this line and just change your password:
    ‘gii’=>array(
    ‘class’=>’system.gii.GiiModule’,
    ‘password’=>’YOURPASSWORD HERE’,
    // If removed, Gii defaults to localhost only. Edit carefully to taste.
    ‘ipFilters’=>array(‘127.0.0.1′,’::1′),
    ),
  3. Click Generate Model -> Fill the texfield with your table name , ex “user” -> Click Preview -> Generate
  4. Click Generate Crud -> Type your model class name -> ex: “User” -> Click Preview -> Generate. When you’re on this step, its done.
  5. Test with access URL : http://localthost/user
    Ups, never let your password shown like that!
  6. Finish! Thanks!

Dynamic Dependence Select Box using JQuery

Hi, there, sudah lammaaa sekali sejak saya posting terakhir kali disini, well, dikarenakan banyak sekali hal.

Kali ini, saya ingin posting yang ringan saja, a simple trick buat bikin dynamic dependence select box, disini saya akan pakai jquery, ajax. Ini sebenernya simple banget and soo many example out there, but, i’ll write on my own XD

Nah, dependence select box itu banyak sekali digunakan, contohnya adalah saat memilih alamat, misalnya select box negara, kemudian province, kota, yang dibuat dependence untuk memudahkan user. Misal, di Indonesa saat pilih Provinsi Jawa Tengah, maka select box Kota/Kabupaten hanya akan berisi Kota/Kabupaten di provinsi tersebut, dst sampai kecamatan, kelurahan dst. That’s very simple;

HTML :

Select Box Provinsi (misalnya)

Provinsi:<select name="prov" class="form-control" id="provinsi">

<option value=''>Pilih Provinsi </option>

</select>

Select Box Kabupaten (misalnya) :

Kabupten:<select name="kab" class="form-control" id="kabupaten">

<option value=''>PilihKabupaten</option>

</select>

Event yang digunakan adalah on-change function, dimana fungsi ini akan dieksekusi each time the event is triggered. Bisa dituliskan dengan $(‘#provinsi’).on(‘change’,function(){-your code-}); atau cukup $(‘#provinsi’).change(function(){ -your code to execute-}); No prob, yang kedua adalah shortcut dari yang pertama ( berdasarkan yang saya baca di JQuery docs)

JQUERY :

$(‘#provinsi’).on(‘change’,function(){

var kd_kantor = $(this).val();

$(‘#kabupaten‘).val(“”);

var provinsi= document.getElementById(“provinsi”).value;

//remove option

$(‘#kabupaten‘) .find(‘option’) .remove() .end() .append(‘Please wait..’) ;

$.ajax({

type: ‘GET’,

url: ‘getDataKabupaten’,

data: {

provinsi: provinsi,

},

success: function(response){

var res = JSON.parse(response);

var data = res.data;

console.log(data.length);

// populate option

var optionList = ”;

if (data.length <1) { optionList = ‘- No Data -‘; }

else {

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

optionList += “<option value = “+data[i].id_kabupaten+”>”+data[i].nm_kabupaten+”</option>”;

}

}

$(‘#kabupaten’)
.find(‘option’)
.remove()
.end()
.append(optionList)
;

}

});

 

Contoh diatas  membuat satu request ke server menggunakan ajax yaitu ke “getDataKabupaten” , disini saya menggunakan service dengan java, kalian tentu bisa membuatnya dengan bahasa lainnya. Data yang saya dapatkan adalah JSON data yang berisi data kabupaten yang ada pada provinsi yang dipilih. Itu saja.

 

A very simple post 😦

Dependency Injection and Reflection

Yesterday i got some discussion with my Uncle, Mozkuri Eas (not his real name) about mobile application (again) and got some issue about the app i want to built. Then the discussion drive us (again) into “Dependency Injection and Reflection). My uncle said, i have to minimalize my code, he said i have to ensure that i have to split code in individual component that can be run without have any dependency with the other componen.  Separate it, make it as a Lib.

“Try dependency injection and reflection.” That’s the code my uncle said, and then “Artinya cari dan pelajari sendiri” As usual, “autodicact, self-taught” Oke, feni, you’re strong enaugh.

So let’s start gooling and found some good artcile. I don’t mind what programming language to describe dependency injection, i also use different language to my different apps.

“Jangan mengotak-kotakkan dirimu hanya dalam satu bahasa pemrograman, yang penting paham logicnya, Insya Allah yang lain juga bisa. Masalah script paling cuma beda dikit-dikit, logicnya tetap sama. Ga harus hafal semua code juga,  masih buka docsnya atau broswing aja. Fenifa 2017”

In software engineering, Dependency Injection is a design principle in which code creating a new object supplies the other objects that the new object depends upon for operation. This is a special case of inversion of control. Often a dependency injection framework (or “container”) is used to manage and automate the construction and lifetimes of interdependent objects.

A dependency is an object that can be used (a service). An injection is the passing of a dependency to a dependent object (a client) that would use it. The service is made part of the client’s state. Passing the service to the client, rather than allowing a client to build or find the service, is the fundamental requirement of the pattern.

Dependency injection separates the creation of a client’s dependencies from the client’s behavior, which allows program designs to be looselycoupled and to follow the dependency inversion and single responsibility principles. It directly contrasts with the service locator pattern, which allows clients to know about the system they use to find dependencies.

An injection, the basic unit of dependency injection, is not a new or a custom mechanism. It works in the same way that “parameter passing” works. Referring to “parameter passing” as an injection carries the added implication that it’s being done to isolate the client from details.

An injection is also about what is in control of the passing (never the client) and is independent of how the passing is accomplished, whether by passing a reference or a value.

Dependency injection involves four roles:

  • the service object(s) to be used
  • the client object that is depending on the services it uses
  • the interfaces that define how the client may use the services
  • the injector, which is responsible for constructing the services and injecting them into the clien

(source)

Dependency injection simply means receiving collaborators as constructor parameters instead of fetching them ourselves. (source)

Reflection is the ability to introspect and reverse engineer functions, classes, methods and interfaces during runtime. This makes it possible to find specific information about your code, such as a classes internal properties, methods & even doc blocks for those methods.

One of my favourite uses for the Reflection API is to have all of my class dependencies automatically injected when possible. If you’re new to dependency injection, then don’t worry, it’s quite simple. This makes my code cleaner to look at, and far more maintainable as the codebase grows. We’ve recently updated our company starter theme/framework to do just this. I figure it’s something I can show you how to do to. The full code & example can be found at the bottom of this post (TL/DR). (source)

Problem Installing Oracle Developer Suite 10g on Windows 10 64 bit

Today i’m trying to install Oracle Developer Suite 10g on my laptop, OS Windows 10 64bit and i’m having some trouble. I’ve extract developer suite disk1 and disk2.rar, and try double click on setup.exe but getting some errors. I already fix it, but i think it would be nice if i write it here, may be can be useful for others who facing the same problem during the instalation oracle developer suite.

What i have :

  1. OracleXE 11g
  2. Orcle DevSuite 11g Disk1 and Disk2
  3. jInit
  4. Windows
  5. 10

#ERROR 1

It’s appear on cmd like this :Starting Oracle Universal Installer…
Checking installer requirements…
Checking operating system version: must be 5.0, 5.1 or 5.2 . Actual 6.1
Failed <<<<

Then appears form that says would i like to install in compability mode? I click yes. The instalation started again, then i find the next errors :

Checking monitor: must be configured to display at least 256 colors . Actual
4294967296 Passed
Checking swap space: 0 MB available, 1535 MB required. Failed <<<<
Some requirement checks failed. You must fulfill these requirements before
continuing with the installation, at which time they will be rechecked.
Continue? (y/n) [n]

I type ‘y’ and it works, it drives me into instalation form, i click next next but, again, i have problem that says “Install has encoontered an error while attempting to verify your virtual memory setting. please verify that the sum of the initial sizes of the paging files is atleast 256 MB”

I start to search the same issue on google and find this thread that helps me a lot. https://community.oracle.com/thread/2444486

 have to remember that Oracle Developer Suite (ODS) 10g was written before well before Windows 7. Officially, ODS 10g is not Oracle Certified or supported on Windows 7 64-bit. Having said that, it can be made to work – relatively easy. Following these steps to install:
1. As you have discovered, ODS 10g installer can’t check Virtual Memory (VM) when it is managed by Windows. Therefore, you have to change the VM to specific sizes for the ODS installer to be able to read the settings. I recommend you set the Minimum to 2048 and the Max to 4096. Once the installation is complete, you can change VM back to Windows Managed.

Here step by step to change the size of virtual memory i found : http://mywindowshub.com/customization-virtual-memory-size-windows-10-technical-preview/

2. The ODS installer also checks for specific versions of Windows. The next error you would have gotten is that the installer needs Windows 5.0, 5.1, 5.2 or 5.3. You have to set the compatibility option to Windows XP service pack 3. Also, Oracle products are not designed to use “Least Privileges” so you must explicitly run the installer as Administator.

To set the compatibility and run-as –

 – Right-Click on the Setup.exe and select Properties
 – Choose Compatability tab => Compatability Mode
 – Select “Run this program in compatability mode for : Windows XP (Service Pack 3).
 – While in the Compatability Tab – also check the “Run this program as an administrator” as well.
#ERROR 2
I following the step, so far it works but then i got another errorrs (Oh, God!) Environment Path. It says that ” The value of the environtment variable PATH is more than 1023 characters, this value can not be set.”
It says that i need to remove some value path to reduce sthe size.
I need to copy text in variable path, delete some value, save it and continue instalation until it’s completed. Then, i can add again the value i’ve removed before, and it works! Thanks!
#ERROR 3 
ORA12560 : TNS protocol adapter error
Instalation is finished and i can open my oracle form builder, ready to create new form. But, when i try to connect to database, it gives me error TNS Protocol Adapter Error. After do some browsing here and there, i solve my problem by adding local service connaction in Net Manager.
Just type Net Manager on search windows, choose Oracle Net Configuration – Service Naming – click add button.
Fill net service name, and follows the instruction. At the end, you have to test connection. At first it will give error, klik change login button and fill login information with your login account, clik test again, if successfull, click finish.
#ERROR4
Okay, i can connect oracle form to database, but, here the new problem i got :  FRM-10142: The HTTP Listener is not running on -blablabla- at port 8889.
To solve this issue was very simple, just type ocj4 on your start windows, click Start OC4J instance, just wait until it fully started. Then, try to run oracle form again, wohooo! it’s success, after all this time facing some errorrs, finally i can do it!
Lessons :
“To me every hour of the light and dark is a miracle; every cubic inch of space is a miracle.”
-Walt Whitman (1819-1892)

Getting Auth with Cookie vs Token | AngularJS

These last few days, i’ve been working with AngularJS, dealing with RESTFull-API concept in my back end. And now, i learn to get auth with AngularJS.
The scenario is, when user login, i’ll send username and password, server with validate user credentials and send the auth that must be saved and for the next request, i had send the auth. Ok, and it drives me into Cookies vs Token. Which one i’ll use?

My senior do some research and decided to try with cookie first. But, i still want to share about this matter.

Good articles is here : http://www.angulartutorial.net/2014/05/set-headers-for-all-http-calls-in.html and http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/

Ya, there some word about interceptors :

Interceptors allow you to:

  • Intercept a request by implementing the request function: This method is called before $http sends the request to the backend, so you can modify the configurations and make other actions. This function receives the request configuration object as a parameter and has to return a configuration object or a promise. Returning an invalid configuration object or promise that will be rejected, will make the $http call to fail.
  • Intercept a response by implementing the response function: This method is called right after $http receives the response from the backend, so you can modify the response and make other actions. This function receives a response object as a parameter and has to return a response object or a promise. The response object includes the request configuration, headers, status and data that returned from the backend. Returning an invalid response object or promise that will be rejected, will make the $http call to fail.
  • Intercept request error by implementing the requestError function: Sometimes a request can’t be sent or it is rejected by an interceptor. Request error interceptor captures requests that have been canceled by a previous request interceptor. It can be used in order to recover the request and sometimes undo things that have been set up before a request, like removing overlays and loading indicators, enabling buttons and fields and so on.
  • Intercept response error by implementing the responseError function: Sometimes our backend call fails. Other times it might be rejected by a request interceptor or by a previous response interceptor. In those cases, response error interceptor can help us to recover the backend call.

I found a good article here and here.

What are the benefits of using a token-based approach?

  • Cross-domain / CORS: cookies + CORS don’t play well across different domains. A token-based approach allows you to make AJAX calls to any server, on any domain because you use an HTTP header to transmit the user information.
  • Stateless (a.k.a. Server side scalability): there is no need to keep a session store, the token is a self-contanined entity that conveys all the user information. The rest of the state lives in cookies or local storage on the client side.
  • CDN: you can serve all the assets of your app from a CDN (e.g. javascript, HTML, images, etc.), and your server side is just the API.
  • Decoupling: you are not tied to a particular authentication scheme. The token might be generated anywhere, hence your API can be called from anywhere with a single way of authenticating those calls.
  • Mobile ready: when you start working on a native platform (iOS, Android, Windows 8, etc.) cookies are not ideal when consuming a secure API (you have to deal with cookie containers). Adopting a token-based approach simplifies this a lot.
  • CSRF: since you are not relying on cookies, you don’t need to protect against cross site requests (e.g. it would not be possible to <iframe> your site, generate a POST request and re-use the existing authentication cookie because there will be none).
  • Performance: we are not presenting any hard perf benchmarks here, but a network roundtrip (e.g. finding a session on database) is likely to take more time than calculating an HMACSHA256 to validate a token and parsing its contents.
  • Login page is not an special case: If you are using Protractor to write your functional tests, you don’t need to handle any special case for login.
  • Standard-based: your API could accepts a standard JSON Web Token (JWT). This is a standard and there are multiple backend libraries (.NET, Ruby, Java, Python, PHP) and companies backing their infrastructure (e.g. Firebase, Google, Microsoft). As an example, Firebase allows their customers to use any authentication mechanism, as long as you generate a JWT with certain pre-defined properties, and signed with the shared secret to call their API.

Ya, as you see, JSON Web Token is quite popular i think, and you can see some example here : https://auth0.com/learn/token-based-authentication-made-easy/