Amazon Relational Database Service (RDS)

GETTING STARTED

If you ever wanted to start your own e-commerce website its crucially have to safe place that allow yo to store data and your asset files while at the same time able to retrieve and response instantly at right place and right time. With the new Amazon Relational Database Service (RDS) you now easily to set up, operate and scale a relational database in cloud. Amazon RDS provides you six similar database engines choose from, including Amazon Aurora, PostgreSQL, MySQL, MariaDB, Oracle and Microsoft SQL Server.

BENEFITS 

1. Easy To Administer

Amazon RDS runs on the same highly reliable infrastructure used by other Amazon Web Services. When you provision a Multi-AZ DB Instance, Amazon RDS synchronously replicates the data to a standby instance in a different Availability Zone (AZ). Amazon RDS has many other features that enhance reliability for critical production databases, including automated backups, database snapshots, and automatic host replacement.

2. Highly Scalable

Amazon RDS runs on the same highly reliable infrastructure used by other Amazon Web Services. When you provision a Multi-AZ DB Instance, Amazon RDS synchronously replicates the data to a standby instance in a different Availability Zone (AZ). Amazon RDS has many other features that enhance reliability for critical production databases, including automated backups, database snapshots, and automatic host replacement.

3. Available and Durable

Amazon RDS runs on the same highly reliable infrastructure used by other Amazon Web Services. When you provision a Multi-AZ DB Instance, Amazon RDS synchronously replicates the data to a standby instance in a different Availability Zone (AZ). Amazon RDS has many other features that enhance reliability for critical production databases, including automated backups, database snapshots, and automatic host replacement.

4. Fast and Reliable

Amazon RDS runs on the same highly reliable infrastructure used by other Amazon Web Services. When you provision a Multi-AZ DB Instance, Amazon RDS synchronously replicates the data to a standby instance in a different Availability Zone (AZ). Amazon RDS has many other features that enhance reliability for critical production databases, including automated backups, database snapshots, and automatic host replacement.

5. Secure

Amazon RDS runs on the same highly reliable infrastructure used by other Amazon Web Services. When you provision a Multi-AZ DB Instance, Amazon RDS synchronously replicates the data to a standby instance in a different Availability Zone (AZ). Amazon RDS has many other features that enhance reliability for critical production databases, including automated backups, database snapshots, and automatic host replacement.

6. Inexpensive

Amazon RDS runs on the same highly reliable infrastructure used by other Amazon Web Services. When you provision a Multi-AZ DB Instance, Amazon RDS synchronously replicates the data to a standby instance in a different Availability Zone (AZ). Amazon RDS has many other features that enhance reliability for critical production databases, including automated backups, database snapshots, and automatic host replacement.

STEPS DEPLOYING

1. SELECT ENGINE

For testing and to get start , i will show using MySQL Engine on a free tier eligibility. The details of free tier eligibility can be seen at here . 

2. SELECT PRODUCTION 

For this i use dev/test option since i intend to use under free tier usage.

3. SPECIFY DB DETAILS

If you want to use tier options only , please tick the checkbox "Only show options that are eligible for RDS Free Tier" otherwise you will charged normal RDS prices.

4. CONFIGURE ADVANCED SETTINGS

Source : 

1. https://aws.amazon.com/rds/?nc2=h_m1
2. https://aws.amazon.com/rds/free/

TypeScript : JavaScript Feature Gap

Building your first TypeScript file

In your editor, type the following JavaScript code in greeter.ts:

function greeter(person) {
    return "Hello, " + person;
}

var user = "Syafiq Zahir";

document.body.innerHTML = greeter(user);

Compiling your code

We used a .ts extension, but this code is just JavaScript. You could have copy/pasted this straight out of an existing JavaScript app.

At the command line, run the TypeScript compiler:

tsc greeter.ts

The result will be a file greeter.js which contains the same JavaScript that you fed in.

Now we can start taking advantage of some of the new tools TypeScript offers. Add a : string type annotation to the ‘person’ function argument as shown here:

function greeter(person: string) {
    return "Hello, " + person;
}

var user = "Syafiq Zahir";

document.body.innerHTML = greeter(user);

Type annotations

Type annotations in TypeScript are lightweight ways to record the intended contract of the function or variable. In this case, we intend the greeter function to be called with a single string parameter. We can try changing the call greeter to pass an array instead:

Exploring Datatable & Export Plug-in

Code changes in ionic 1 and 2

Directives

This is another preference thing for me because the template syntax between Ionic 1 and Ionic 2 is extremely similar. It looks a little weird and quirky at first but I find the template syntax in Ionic 2 to be cleaner. Let’s take a look at a couple of examples:

Ionic 1:

<img ng-src="{{image_url}}"/>

Ionic 2:

<img [src]="image_url"/>

TypeScript

class HelloWorld {

So in order you to  move from ionic 1 to ionic 2, there are several aspect you need to take important of , these are the list :

1) ECMAScript (ES6)
2) Angular JS 2
3) TypeScript

References :

https://www.joshmorony.com/7-reasons-why-ionic-2-is-better-than-ionic-1/

Bootstrap as CSS Framework

Topic 16 - Php Artisan Console Command

Artisan Command

Today we will learn how to create our own console command . PHP Artisan has many and particularly made easy to developers to create their own command.

The very basic installment that laravel provide is in Kernel.php located at app/Console. To use this console command we can open our command prompt inside our project directory and then write

php artisan make:command QuizStart --command quiz:startt

php artisan make: command  -  this create a command class inside Console/Commands folder

--command  -  will assign our command signature as "quiz:start" 

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;

class QuizStart extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'quiz:start';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Command description';

    /**
     * Create a new command instance.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }

    /**
     * Execute the console command.
     *
     * @return mixed
     */
    public function handle()
    {
        //
    }
}

However , we need to display some information if we write the command. The handle function will do the code that correspond to our command. So here we are gonna do some construct several text to require confirmation from user.

 public function handle()
 {
     if ($this->confirm('Are you a human? [yes|no]'))
     {
        $this->info('Authorization Success!');
     }
}

However , the command are yet cannot be run since we didnt put our command class inside Kernel.php. To solve this problem, we need to assign or write our command directory inside $command property in Kernel.php.

    protected $commands = [
        'App\Console\Commands\MyCommand',
        'App\Console\Commands\QuizStart'
    ];

So our result should be like this :

References :

• http://ourcodeworld.com/articles/read/248/how-to-create-a-custom-console-command-artisan-for-laravel-5-3
• https://laravel.com/docs/5.4/artisan#writing-commands

Post (Angular) 6 - Tabs inside Angular

Ng-Click

This responses to user click on the tab and display the data that were bind.

Given the example like below , where we can use ng-click inside the page :

<div class="section">
        <ul class="nav nav-pills nav-sm">
          <li><a href ng-click="tab = 1">Personal Info</a></li>
          <li><a href ng-click="tab = 2">Career</a></li>
          <li><a href ng-click="tab = 3">Study</a></li>
        </ul>
       {{ tab }}
 </div>

From the example, when ng-click changes the value inside a tab. The {{ tab }} expression automatically get updated.

Now lets define our tab panel,

<div class="panel" ng-show="tab === 1">
     <h4> {{ product.name }} </h4>
     <p> {{ product.description }}</p>
 </div>
<div class="panel" ng-show="tab === 2">
     <h4> {{ product.name }} </h4>
     <p> {{ product.description }} </p>
</div>

Ng-Init

As you can see, our panel will be displayed if the correct number of tab is equal to value of ng-show. Product name and description will display accordingly. However , when we refresh the page none of the panel will show up. This comes ng-init property where we set initial tab section to be shown first to a corresponding panel.

<div class="section" ng-init="tab = 1" >
        <ul class="nav nav-pills nav-sm">
          <li><a href ng-click="tab = 1">Personal Info</a></li>
          <li><a href ng-click="tab = 2">Career</a></li>
          <li><a href ng-click="tab = 3">Study</a></li>
        </ul>
       {{ tab }}
 </div>

Ng-Class

Now that we learn to set initial value for a tab when the user comes at the first time to see our page. The first tab panel will be display to them . However, when user changing the tab. It is important to set the current active tab to easily track on their navigation.

<div class="section" ng-init="tab = 1" >
        <ul class="nav nav-pills nav-sm">
          <li ng-class= "{ active:tab === 1 }">
             <a href ng-click="tab = 1">Personal Info</a>
          </li>
          <li ng-class= "{ active:tab === 2 }">
             <a href ng-click="tab = 2">Career</a>
          </li>
          <li ng-class= "{ active:tab === 3}">
             <a href ng-click="tab = 3">Study</a>
          </li>
        </ul>
       {{ tab }}
 </div>

Create Controller Function(s)

To do a cleaner code we should set all controller things inside our controller. First, we can create a controller called "TabController" which we can compare the current active tab and set the value of tab that being changed.

app.controller('TabController', function(){
    this.tab = 1;
    
   // to set tab value and change the panel
    this.selectTab = function(setTab){
      this.tab = setTab;
    };
    
    // to check and set current active tab
    this.isSelectedSet = function(checkTab){
      return this.tab === checkTab;
    };
    
  });

And then in our page we can write it like this :

<div class="section" ng-controller = "TabController as panel">
        <ul class="nav nav-pills nav-sm">
          <li ng-class= "{ panel.isSelected(1) }">
             <a href ng-click="panel.selectTab(1)">Personal Info</a>
          </li>
          <li ng-class= "{ panel.isSelected(2) }">             <a href ng-click="panel.selectTab(2)">Career</a>          </li>
          <li ng-class= "{ panel.isSelected(3) ">             <a href ng-click="panel.selectTab(3)">Study</a>          </li>
        </ul>
       {{ tab }}
 </div>

References :

https://material.angularjs.org/latest/demo/tabs
http://campus.codeschool.com/courses/shaping-up-with-angularjs/level/2/section/2/tabs-inside-out

Post (Angular) 5 - Filters in Angular

Good things in angular we have proper standard way to present our data into our page using filters. With filters , items in array will be displayed in constant way. For example, if we include the  any price decimal value inside our application. The filters has a way to control those.

For Example : 

<div ng-controller="StoreController as store" style="padding:20px;">
          <div ng-repeat="productss in store.product">
            <h1> {{productss.name}}</h1>
            <h2> ${{productss.price | currency }}</h2>
            <p>{{productss.description}}</p>

            <button ng-show="productss.canPurchase">Add to Cart </button>
          </div>
        </div>

From the example , we can observe that the prices inside ng-repeat were filtered using currency option. This will standardize the decimal price to be displayed.  If the current price stated is 

$2 , it turns out will be 2 decimal place ( $2.00 ) .

There are many other filters that we can found inside angular JS documentation.

The global understand format filters are :

{{ data* |  filter:options* }}

Type of Filters : 

1. date

{{  '1388123412323' | date:'MM/dd/yyyy @ h:mma' }}  //12/27/2013@12:50AM

2. uppercase&lowercase

{{  'diamond gem' | uppercase }}  //DIAMOND GEM

3. limitTo

{{  'My Project' | limitTo:5 }}  //My Pr

4. orderBy

<div ng-controller="StoreController as store" style="padding:20px;">
          <div ng-repeat="productss in store.product | orderBy:'price' ">  //ascending order or -price for descending
            <h1> {{productss.name}}</h1>
            <h2> ${{productss.price | currency }}</h2>
            <p>{{productss.description}}</p>

            <button ng-show="productss.canPurchase">Add to Cart </button>
          </div>
        </div>

References : 

https://docs.angularjs.org/api/ng/filter

Topic (Angular) 4 - Array in Angular

Manual Array

Create an array is the basic thing in programming language. This happens when we are dealing we set of property. In angular Js we can define manually using expressions. The property inside StoreController which is product  can be iterate using array index.

<div ng-controller="StoreController as store" style="padding:20px;">
            <h1> {{store.product[0].name}}</h1>
            <h2> ${{store.product[0].price}}</h2>
            <p>{{store.product[0].description}}</p>

            <button ng-show="store.product[0].canPurchase">Add to Cart </button>

            <h1> {{store.product[1].name}}</h1>
            <h2> ${{store.product[1].price}}</h2>
            <p>{{store.product[1].description}}</p>

            <button ng-show="store.product[1].canPurchase">Add to Cart </button>

        </div>

Ng-repeat

There is a simple way when we are going to working around with array in angular. Luckily angular js provide an alternative way where developers can iterate property using ng-repeat directive.

  <div ng-controller="StoreController as store" style="padding:20px;">
          <div ng-repeat="productss in store.product">
            <h1> {{productss.name}}</h1>
            <h2> ${{productss.price}}</h2>
            <p>{{productss.description}}</p>

            <button ng-show="productss.canPurchase">Add to Cart </button>
          </div>
        </div>

This will produce a result like below : 

Topic (Angular) 3 - Built-In Directives

Ng-Show Directives

In Angular, we are given with options to show attributes or elements that we want to be displayed on our pages.  Lets say we have a button "Add to Cart" we want to display. In <button> tag we can include our ngShow directive .

<div ng-controller="StoreController as store" style="padding:20px;">
        
            <h1> {{productss.name}}</h1>
            <h2> ${{productss.price}}</h2>
            <p>{{productss.description}}</p>

            <button ng-show="productss.canPurchase">Add to Cart </button>
      
        </div>

This will produce a result :

Ng-Hide Directives

Likewise, we also can hide elements that we dont want to be displayed in our screen. Ng-hide are purposely to control elements or section that we want to be displayed. Lets say in our body class we have a controller  directive called StoreController alias store. The ng-hide directive inside <div> tag is to control either the instance of property either have a soldOut element which if is true then the product will be hide from being displayed.

<body class="container" ng-controller="StoreController as store">
    <div ng-hide="store.product.soldOut" class="product row">
      <h3>
        {{store.product.name}}
        <em class="pull-right">${{store.product.price}}</em>
      </h3>
      <button ng-show="store.product.canPurchase">Add to Cart</button>
    </div>
  </body>

Topic (Angular) 2 - Application Controller

Application Controller

Today we are going to explore a few things regarding controller inside ionic app. In controller we have a controller name , a dependency function and their properties.

Lets look at this example : 

.controller('StoreController',function(){
  this.product = gem;
});

In above example we can see that our controller was named as StoreController and the respect property is gem . This gem object will hold attributes variable that will define below : 

var gem = {
  name : 'emerald',
  price : 99.99,
  description : 'This gem is a rare shiny object',
}

After we have define the details of attributes variable gem that we appoint to product property we can call these attribute inside our html page . Lets say in our html we declare a div and a directive ng-controller to the controller we declare inside Angular JS file.

Index.html 

<div ng-controller="StoreController as store">
            <h1> {{store.product.name}}</h1>
            <h2> ${{store.product.price}}</h2>
            <p>{{store.product.description}}</p>
</div>

The result will be like this :