Thursday, 7 June 2018

Download the eBook of react js for beginners

ReactJS basically is an open-source JavaScript library which is used for building user interfaces specifically for single page applications.

free-ebook-for-react-js-beginners


This react.js ebook include the following things. I haven't cover the topic in detail and you can go through the below topic and easily understand the react.


  1. Overview.
  2. Why we used react.js
  3. Why react.js is a great choice to start.
  4. Why react is great performer.
  5. Features of react.
    1. Components
    2. Virtual DOM
    3. Declarative
    4. Unidirectional data flow
    5. Isomorphic friendly
    6. JSX
  6. How to create component and jsx into react.
  7. React props and states why we used that.
  8. what are the testing frameworks we need in react ex. chai,mocha,jest,enzyme
  9. A few testing examples of react.js testing component.
  10. Usefull links for testing and learning.



Wednesday, 25 April 2018

how to configure your website with ssl

In this article i'll show you how to configure your website with ssl. It is also captured the user who can go directly yourdomain.com without www. Please note that this need two sets of ssl certificates, unless you have wildcard ones.

In ubuntu the file location is /etc/apache2/sites-available/default-ssl.conf  and enabled by running a2ensite default-ssl.conf . Also please don't forget to enable ssl with sudo a2enmod ssl.

# www.yourdomain.com
<VirtualHost *:443>
ServerName www.mydomain.com

SSLEngine on
SSLCertificateFile /etc/apache2/ssl/www.mydomain.com/cert.pem
SSLCertificateKeyFile /etc/apache2/ssl/www.mydomain.com/private.pem
SSLCertificateChainFile /etc/apache2/ssl/www.mydomain.com/chain.pem

ServerAdmin webmaster@localhost

DocumentRoot /var/www/my-site/public_html
<Directory /var/www/my-site/public_html/>
Options Indexes FollowSymLinks
AllowOverride All
Order allow,deny
allow from all
Require all granted
</Directory>

ErrorLog ${APACHE_LOG_DIR}/error.log

# Possible values you can use are debug, info, notice, warn, error, crit,
# alert, emerg.
LogLevel warn

CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>

# detect users going to mydomain.com without the www.
<VirtualHost *:443>
ServerName mydomain.com

SSLEngine on
SSLCertificateFile /etc/apache2/ssl/mydomain.com/cert.pem
SSLCertificateKeyFile /etc/apache2/ssl/mydomain.com/private.pem
SSLCertificateChainFile /etc/apache2/ssl/mydomain.com/chain.pem

ServerAdmin webmaster@localhost

DocumentRoot /var/www/my-site/public_html
<Directory /var/www/my-site/public_html/>
Options Indexes FollowSymLinks
AllowOverride All
Order allow,deny
allow from all
Require all granted
</Directory>

ErrorLog ${APACHE_LOG_DIR}/error.log

# values include debug, info, warn, notice , error, crit,
# alert, emerg.
LogLevel warn

CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>

Thursday, 22 March 2018

Reverse Proxy serve different folder NGINX

In this post i'll show you how we can configure NGINX to serve applications form the different directories. I have two application both are running at different ports, 8080 and 8090. I want to expose those APIs just like they are serving from a single source.

I want to expose those APIs just like they are serving from a single source. nginx config file /etc/nginx/site-available

server {
 
    listen              443 ssl;
    server_name         app.yourapp.com;
    ssl_certificate     /etc/nginx/ssl/app.yourapp.com.crt;
    ssl_certificate_key /etc/nginx/ssl/app.yourapp.com.key;
 
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';
 
    location /v1/ {
            proxy_pass http://localhost:8090;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
    }
 
    location / {
        proxy_pass http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
 }
}

If you add multiple application at same host. we have configured NGINX reverse Proxy for two apps using location block, v1 is listening at 8090 and / is listening at 8080.

You can access the app : https:://app. yourapp.com and https:://app.yourapp.com/v1

If you are new to nginx server so you can check this link to use nginx.

Install Typescript in ubuntu

For now I just know of the one main way to install Typescript, but as and when I find out more ways, such as a PPA, I'll post them here.

sudo apt update && sudo apt install node-typescript -y

Finally Clause in PHP

PHP has supported the finally clause.Finally will executed after a try block no matter what is your condition. if the try block threw an exception or not.

<?php

try 
{
    print "Start executing try block BEFORE exception." . PHP_EOL;
    throw new Exception("This is my exception");
    print "Executing try block AFTER exception thrown." . PHP_EOL;
} 
catch (Exception $e) 
{
    print "Executing the catch block." . PHP_EOL;
} 
finally 
{
    print "Executing 'finally' block." . PHP_EOL;
}

print "Executing code after finally." . PHP_EOL;

Start executing try block BEFORE exception.
Executing the catch block.
Executing 'finally' block.
Executing code after finally.

so finally is executed even if exception occurred. we can understand this with the below two examples.

try {
    throw_exception();
} catch (ExceptionTypeA $e) {
    echo $e->getMessage();
}

example(); // Will not execute if throw_exception throws an ExceptionTypeB

But this will execute.

try {
    throw_exception();
} catch (ExceptionTypeA $e) {
    echo $e->getMessage();
} finally {
    some_code(); // Will be execute even if throw_exception throws an ExceptionTypeB
}

As you can see the finally block is still executed, even though something went wrong within our exception handling.

Wednesday, 21 February 2018

Calling abstract classes in TypeScript

Abstraction is an Object Oriented programming concept whereby a class can specify how an inherited class should implement the class itself, including any abstract methods specified.The concept of abstraction is we are hiding the complexity of the implementation from inherited classes and we allow them to implement the functionality themselves . 

Abstraction can be achieved by using the abstract keyword - which can be applied to both classes and methods specified in classes.

Let's take an example of abstract class :

abstract class Warrior {
  readonly name: string;
  public weapon: string;
  constructor(name: string) {
    this.name = name;
  }

  abstract arm(weapon: string): void;
}


If we now attempt to instantiate this class we'll get an error:

const peter = new Warrior('Peter, the Nomad'); // Cannot create an instance of the abstract class 'Warrior'.

Now we need to implement the abstract class then we need to create a subclass and extend it using the extends keyword.

class SuperWarrior extends Warrior {
  constructor(name: string) {
    super(name);
  }
  arm(weapon: string): void {
    console.log(`${this.name} is a super warrior fighting with ${weapon}`);
  }
}


Now we have a subclass we can create our warriors.

const warrior = new SuperWarrior('John, the Nomad');
warrior.arm('lance'); // John, the Nomad is a super warrior fighting with lance



we can also utilise Interfaces and implement them for classes

interface IWarrior {
  name: string;
  weapon: string;
  arm(weapon: string): void;
}
abstract class Warrior implements IWarrior {
  readonly name: string;
  public weapon: string;
  constructor(name: string) {
    this.name = name;
  }

  abstract arm(weapon: string): void;
}

class SuperWarrior extends Warrior {
  constructor(name: string) {
    super(name);
  }
  arm(weapon): void {
    console.log(`${this.name} is a super warrior fighting with ${weapon}`);
  }
}

const warrior: IWarrior = new SuperWarrior('John, the Nomad');
warrior.arm('lance');

Saturday, 10 February 2018

Install Machine Learning Tool in Python

In this article i will show you how to install tensorflow in python3. It's quite easy in ubuntu to set the tensorflow which is an open-source machine learning software.

Run the following commands/script to get tensorflow (CPU only) installed on your Ubuntu 16.04 server.

# Install necessary python packages.
sudo apt-get install python3-pip python3-dev -y

# Upgrade pip using this
pip3 install --upgrade pip

# Install tensorflow (cpu only)
pip3 install tensorflow

If you want to use an NVIDIA GPU for tensorflow then run this instead:

# Install necessary python packages.
sudo apt-get install python3-pip python3-dev -y

# Upgrade pip
pip3 install --upgrade pip

# Install tensorflow with GPU support
pip3 install tensorflow-gpu

That seemed a little too easy, so let's just write a small test script that uses the tensorflow library that we have installed it correctly:

#!/usr/bin/python3
import tensorflow as tf
hello = tf.constant("Hello, Tensflow!")
sess = tf.Session()
print(sess.run(hello))

If you execute this output should be :

b'Hello, Tensflow!'

Now you have successfully installed tensorflow in your system. If you want to read more about the tensorflow then follow the link.


Thursday, 1 February 2018

Symfony console command basics

Let's take a look on symfony command.It very easy in symfony to check the existing command and list of all commands. Execute the following to check all the existing feature commands in console.

symfony console commands basics


run this command in your root directory,

php bin/console


You will see a list of existing commands. Each supported command has a short details. Each of the standard commands come with help, so I will not be describing each of them here, but it is worth to mention a few commonly used ones:

php bin/console: cache:clear

Symfonys in production store more data in caching. Therefore, if you need to change values within a template (Twig) or within configuration files while in production mode, you will need to clear the cache. Cache is also one of the reasons why it’s worth to work in the development mode.

php bin/console container:debug

Displays all configured public services in symfony.

php bin/console router:debug

It will displays all routing configuration along with method, scheme, host, and path.

php bin/console security:check

Checks your composer and packages version against known security vulnerabilities. You should run this command regularly.

Thursday, 25 January 2018

Yii2 custom pagination for gridview

Pagination is the process of dividing a document into discrete pages, either electronic pages or printed pages.In this article we discussed the Yii2 pagination how we used the pagination under yii2 framework.

There are two ways we can use the pagination in Yii2.

  • Simple Pagination
  • Custom Pagination

gridview,gridview pagination,pagination yii2,grid view custom search,pagination in yii2,sorting in gridview,pagination,yii2 gridview,footer in gridview in yii2,create custom widget in yii2,table pagination,yii2 custom widget,header in gridview in yii2,yii2 gridview filter,how to create custom widget in yii2,custom form,yii2 custom models,listview и gridview,php for beginners,yii2 php custom widget,pegination,yii custom widget,magento paginator,yii2 tutorials for beginners,custom rules yii

Add this function in your controller file.

function actionIndex()
{
    $query = User::find()->where(['status' => 1]);
    $countQuery = clone $query;
    $pages = new Pagination(['totalCount' => $countQuery->count()]);
    $models = $query->offset($pages->offset)
        ->limit($pages->limit)
        ->all();

    return $this->render('index', [
         'models' => $models,
         'pages' => $pages,
    ]);
}

Now come to view part index.php file.

foreach ($models as $model) {
    // display $model here
}
// display pagination
echo LinkPager::widget([
    'pagination' => $pages,
]);

Custom Pagination :

LinkPager is handling the pagination link with properties. Here we customized the link property.
so i have create CustomPagination class in app/components folder and set namespace as app/components.We removed the link and added onclick attribute in every pagination link.



<?php
namespace app\components;

use Yii;
use yii\base\InvalidConfigException;
use yii\helpers\Html;
use yii\base\Widget;
use yii\data\Pagination;

class CustomPagination  extends \yii\widgets\LinkPager
{
    public function init()
    {
        parent::init();
    }

    public function run()
    {
        parent::run();
    }

    protected function renderPageButton($label, $page, $class, $disabled, $active)
    {
        $options = ['class' => $class === '' ? null : $class];
        if ($active) {
            Html::addCssClass($options, $this->activePageCssClass);
        }
        if ($disabled) {
            Html::addCssClass($options, $this->disabledPageCssClass);

            return Html::tag('li', Html::tag('span', $label), $options);
        }
        $linkOptions = $this->linkOptions;
        $linkOptions['data-page'] = $page;
        $linkOptions['onclick']='submit_form('.$page.')';

        return Html::tag('li', Html::a($label, '#pagination', $linkOptions), $options);
    }
}

Now in Controller.php .

public function index(){
    $query = Tablereport::find();
    $countQuery = clone $query;
    
    $pages = new Pagination(['totalCount' => $countQuery->count()]);
    
    $dataProvider = new ActiveDataProvider([
        'query' => $query,
    ]);
     return $this->render('GridView', [
         'dataProvider' => $dataProvider,
         'pages' => $pages,
    ]);
}

GridView.php
Using 'layout' properties, we can remove the basic link pager.

<?php
use yii\helpers\Html;
use yii\grid\GridView;
use app\components\CustomPagination;
?>
<div class="report-index">
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        //'filterModel' => $searchModel,
         'layout' => "{summary}\n{items}",
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            'id',
            'report_name',
            'report_table',
            'report_query:ntext',
            'created_on',
            // 'created_by',

            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>

    <div id="custom-pagination">
        <?php
            echo CustomPagination::widget([
                'pagination' => $pages,
            ]);
        ?>
    </div>
</div>

Featured post

How to create dynamic schema in mongodb

Sometime what we need in our application is to create mongodb schema for collection and some of our collection schema are same but names are...

Popular Posts