Tag: Class

Basics of Page Component: Ionic 2

In this video tutorial we shall learn some basics of a page component.

Topics Covered
1. Decorators – little bit
2. Class
3. Template File – ionic list items, For loop in ionic template.
4. Variables in Ionic – data type(number, string, Array, any)
5. Importing libraries and using it in our project.
6. Setting home page of our project.

Related Read:
Project Structure: Ionic 2

Video Tutorial: Basics of Page Component: Ionic 2


[youtube https://www.youtube.com/watch?v=Tb4k00ALHeA]

YouTube Link: https://www.youtube.com/watch?v=Tb4k00ALHeA [Watch the Video In Full Screen.]



In this tutorial we are using a blank template and setting home.html as our home page.

inside src/app/app.component.ts file
We import the HomePage page

import { HomePage } from '../pages/home/home';

next inside the class definition we assign this HomePage as root file for our application

rootPage = HomePage;

Full Source Code src/app/app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { HomePage } from '../pages/home/home';


@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
  rootPage = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}

Important: Do NOT forget to import all your classes in app.module.ts file, also specify its class name inside declarations and entryComponents section.

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: []
})
export class AppModule {}

Now lets take a look at our HomePage component, which is present inside pages directory and Home folder
src/pages/home/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {
  }

}

Here we have imported two important library files. Component is used to configure the decorator and NavController is used for navigation purposes. In this tutorial we’re not using Navigation, but we’ll make use of it in our next video tutorial.

Decorators
There are 3 types on decorators:
1. Component
2. Pipe
3. Directive

I’ll explain each one of them separately in other videos.

Component
In today’s tutorial we’ve a component and it has a selector and a templateUrl. Selector name is used to inject an element or an attribute into the DOM. TemplateUrl tells the class about its associated template file. Components(Decorative) are placed just above the class definition.

Class
A class is a blueprint of an object. This is where we write our logic. It’ll usually have some properties(public or private or protected) and some methods.

In Ionic 2 class, you might have seen export keyword – which means we can import this file in some other class file and make use of its service or output.

variables
In TypeScript variables are typed – which means, variables have data type.
var1: any; Means variable var1 can take value of any data type.
var1: string; Here var1 can be assigned with string value only.
var1: number; as you might have already guessed, var1 takes number value.
var1: Array< {}>; var1 takes an array as its value.
var1: boolean; var1 takes value true or false.

Wrong initialization
var1: number = ‘Satish’;
var1: string = 1;

Correct initialization
var1: number = 1;
var1: string = ‘Satish’;

src/pages/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
companies: Array< {name: string, code: number}>;
  constructor(public navCtrl: NavController) {
    this.companies = [
      {name: 'Microsoft', code: 1},
      {name: 'Apple', code: 2},
      {name: 'Google', code: 3},
      {name: 'Oracle', code: 4},
      {name: 'IBM', code: 5}
    ];
  }
}

Here we have an array called companies – which has a list of company names like Microsoft, Apple, Google, Oracle, IBM. Each of this is stored as an individual element inside the array.

Using ngFor loop we can iterate through this array and display the company names.

*ngFor loop

<p *ngFor="let company of companies">
</p>

In Ionic 2, we make use of *ngFor for for loop. We declare a new variable company and reference individual elements of the array present inside companies array.

src/pages/home/home.html

<ion-list>  
  <ion-item *ngFor="let company of companies">  
    {{company.name}}  
  </ion-item>  
</ion-list>

Here I’m making use of ion-list tag and ion-item tags to display the company names.

ion-list-no-lines

If we want to remove the default lines which come along with the ion-list items then we can add no-lines styling to ion-list tag.

<ion-list no-lines>  
  <ion-item *ngFor="let company of companies">  
    {{company.name}}  
  </ion-item>  
</ion-list>

In next video tutorial lets learn how to navigate to other pages using Ionic 2 routing.

Access Specifiers: PHP OOP

Controlling Access with public, private and protected access modifiers.
These access specifiers can be used on both variables/attributes and methods.

In this video tutorial, we’ll demonstrate it using attributes.

Access Specifiers:
1. public
2. private
3. protected

Class With Attributes

1
2
3
4
5
6
7
8
9

< ?php
 class container
 {
 var $a       = 10;
public $b    = 20;
private $c   = 30;
protected $d = 40;
 }
?>

var $a is similar to writing public $a

We shall extend class container to another class called contains.
Extending class is an inheritance property, and we shall discuss inheritance in another article. For now, know that, with extends keyword, all the properties and methods with public / protected access are inherited.

Extends

1
2
3
4
5
6
7
8
9
10
11
12
13

< ?php
 class container
 {
 var $a       = 10;
public $b    = 20;
private $c   = 30;
protected $d = 40;
 }
 
 class contains extends container
 {
 }
?>

Here, contents of class container is extended by class contains.

Object of class container

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

< ?php
 class container
 {
 var $a       = 10;
public $b    = 20;
private $c   = 30;
protected $d = 40;
 }
 
 class contains extends container
 {
 }
 
 $obj1 = new container();
         echo $obj1->a;
         echo $obj1->b;
?>

This outputs: 10 and 20 respectively.

Object of class contains

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

< ?php
 class container
 {
 var $a       = 10;
public $b    = 20;
private $c   = 30;
protected $d = 40;
 }
 
 class contains extends container
 {
 }
 
 $obj2 = new contains();
         echo $obj2->a;
         echo $obj2->b;
?>

This outputs: 10 and 20 respectively.
i.e., public attributes are inherited

Accessing private / protected attributes outside class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

< ?php
 class container
 {
 var $a       = 10;
public $b    = 20;
private $c   = 30;
protected $d = 40;
 }
 
 class contains extends container
 {
 }
 
 $obj1 = new container();
         echo $obj1->c;
         echo $obj1->d;
?>

It through’s error, since you cannot access, private and protected variables/attributes outside the class.

Now lets check if private and protected variables are actually inherited:

Inheriting private attribute

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

< ?php
 class container
 {
 var $a       = 10;
public $b    = 20;
private $c   = 30;
protected $d = 40;
 }
 
 class contains extends container
 {
 function __construct()
{
echo $this->c;
}
 }
 
 $obj1 = new contains();
?>

This through’s error, because $c is not inherited to class contains and thus not present inside class contains. Which means, private variables and methods cannot be inherited.

Inheriting protected attribute

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

< ?php
 class container
 {
 var $a       = 10;
public $b    = 20;
private $c   = 30;
protected $d = 40;
 }
 
 class contains extends container
 {
 function __construct()
{
echo $this->d;
}
 }
 
 $obj1 = new contains();
?>

Output’s 40.
This means, protected variables and methods are inherited.

Access Specifiers: PHP OOP


[youtube https://www.youtube.com/watch?v=2Ow_cgBEGmk]

YouTube Link: https://www.youtube.com/watch?v=2Ow_cgBEGmk [Watch the Video In Full Screen.]



Conclusion
public attributes and methods are inherited and can be accessed outside the class.
private attributes and methods cannot be inherited and cannot be accessed outside the class.
protected attributes and methods can be inherited but cannot be accessed outside the class.

Object Oriented Programming Basic: PHP

Video tutorial illustrates basics of OOP in PHP.

Things covered:
Defining class.
Creating Objects.
Public and Private access of Properties/Data.
Separating Class file and the application file.

What is a Class ?
A class is simply a representation of a type of object. It is the blueprint/ plan/ template that describe the details of an object. A class is the blueprint from which the individual objects are created. Class is composed of three things: a name, attributes, and operations.

Class Add
add.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

< ?php
class Add
{
private $a;
private $b;
 
function setValues($v1, $v2)
{
   $this->a = $v1;
   $this->b = $v2;
}
 
function add()
{
return( $this->a + $this->b );
}
}
?>

class is a keyword. Add is the name of the class we’ve assigned.
$a and $b are two variables of class Add. These have private access specifier, meaning, they’re not accessible directly from outside the class.
Public access specifier indicates that they can be accessed even outside the scope of a class. Private variables are treated as safe, so we prefer that.

Since private variables are accessed inside the class, we declared two methods inside the class Add. i.e., setValues() and add()
setValues() has two parameters which are then assigned to the local variables $a and $b using the $this pointer.

$this pointer references to the object which is currently pointing to it.

add() method adds the user passed values and returns the result.

Application File
index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

?php
 include_once('add.php');
 
$add = new Add();
 
$add->setValues(50, 100);
echo $add->add();
 
$add->setValues(150, 100);
echo '<br />'.$add->add();
 
$add2 = new Add();
 
$add2->setValues(500, 1000);
echo '<br />'.$add2->add();
 
?>

Here we include the add.php file and create an object of (class)type Add.
Using this object we pass values to setValues(), and then call add() method, which returns the added value of the passed numbers. which is then output to the browser.

We could create as many objects as we wish and then pass and output as many results as required, without altering the class file what so ever, once finalized.

So this is the power of Object Oriented Programming.
This way we could manage complex applications easily or in an organized/standard way.
Increase code re-usability.
Also reduce maintenance cost etc..

Object Oriented Programming Basic: PHP


[youtube https://www.youtube.com/watch?v=0smq5Lf6Q2k]

YouTube Link: https://www.youtube.com/watch?v=0smq5Lf6Q2k [Watch the Video In Full Screen.]



Why OOP in PHP ?
Most web projects still use procedural i.e., function based software development approach. And honestly, it has no issue, because most web projects are so small scale and straight forward that they don’t require OOP in most cases.

But for complex application development, you need OOP for effectiveness.
Like, if you want to build a home, you need a lot of planning, preparation and some standard approach to build it.