Friday, July 8, 2016

Different between UI and UX

UI: This is an acronym for ‘User Interface’. It deals with how a website or an application looks. It covers the entire look of the application including the colors, fonts, icons and images used. The user interface is entirely about the visual and interface design.

UX: It deals with how easily a user can, well, use the app and how easily the app would serve to satisfy his requirements.
Consider this example: Say, you’re making a mobile app. When designing the interface (UI) of your app, you should not only consider how great your app will look, but also how easy it will be to use, i.e. how great the User Experience (UX) will be.


Monday, February 8, 2016

Yii 2 Advanced Project Installation

Yii 2 Advanced Project Installation

1. Download Yii2 Advanced from official site:


     i. Go to: http://www.yiiframework.com/download/
         And click on the link  Yii 2 with advanced application template
                                    OR
         Directly visit: https://github.com/yiisoft/yii2/releases/download/2.0.6/yii-advanced-app-2.0.6.tgz

      ii. Now place the extracted folder on your local server's htdocs folder. Say folder name is yii2advanced. In my case using xampp from windows 7. So placed on C:\xampp\htdocs\yii2advanced.

2. Create Database and Connect.
 
    i. Create a empty Database using PHPMyAdmin. Say database name is "yii2advanced".

    ii. Update database details on yii2advanced\common\config\main-local.php.

3. Run init and yii migrate commands.

     i. Go to installed path on your command line tool.
         c:\> cd xampp/htdocs/yii2advanced

     ii.  Run init command.
           c:\xampp\htdocs\yii2advanced>init                 // Select dev / product environment.

     iii. Now run yii migrate on same location.
          c:\xampp\htdocs\yii2advanced>yii migrate

Now you can see the frontend and backend on following urls
Backend:  http://locahost/yii2advanced/backend/web/
Frontend:  http://locahost/yii2advanced/frontend/web/

4. Remove index.php from URL(Enable Pretty URL).
     
Now we are going to remove index.php and query parameters like r=controller/action from URL.

      i. Create .htaccess files in frontend/web and backend/web folders with below codes.
          RewriteEngine on
          # If a directory or a file exists, use it directly
          RewriteCond %{REQUEST_FILENAME} !-f
          RewriteCond %{REQUEST_FILENAME} !-d
          # Otherwise forward it to index.php
          RewriteRule . index.php

      ii. Add urlManager component inside common/config/main.php as described below.
           'components' => [
        // Your other components.

        'urlManager' => [
                'class' => 'yii\web\UrlManager',
                // Disable index.php
                'showScriptName' => false,
                // Disable r= routes
                'enablePrettyUrl' => true,
                'rules' => array(
      '<controller:\w+>/<id:\d+>' => '<controller>/view',
      '<controller:\w+>/<action:\w+>/<id:\d+>' => '<controller>/<action>',
      '<controller:\w+>/<action:\w+>' => '<controller>/<action>',
        ),
         ],
           ],

Now we have to remove front/web from url.
To remove front/web from URL you have to follow Step 5 OR Step 6.

5. Remove frontend/web through .htaccess

i. Create a .htacces file on root direcctory(C:\xampp\htdocs\yii2advanced\) with following lines.

<IfModule mod_rewrite.c> 
  RewriteEngine on

  RewriteCond %{REQUEST_URI} !^public
  RewriteRule ^(.*)$ frontend/web/$1 [L] 
</IfModule>

# Deny accessing below extensions
<Files ~ "(.json|.lock|.git)">
Order allow,deny
Deny from all
</Files>

# Deny accessing dot files
RewriteRule (^\.|/\.) - [F]

ii. Create a .htacces file on frontend/web(C:\xampp\htdocs\yii2advanced\frontend\web) with following lines.

RewriteEngine on

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d 

RewriteRule . index.php


iii. Update your common config's main.php file(C:\xampp\htdocs\yii2advanced\common\config\main.php) as below

<?php
return [
    'vendorPath' => dirname(dirname(__DIR__)) . '/vendor',
    'components' => [
        'cache' => [
            'class' => 'yii\caching\FileCache',
        ],
'urlManager' => [
'class' => 'yii\web\UrlManager',
// Disable index.php
'showScriptName' => false,
// Disable r= routes
'enablePrettyUrl' => true,
'rules' => array(
'<controller:\w+>/<id:\d+>' => '<controller>/view',
'<controller:\w+>/<action:\w+>/<id:\d+>' => '<controller>/<action>',
'<controller:\w+>/<action:\w+>' => '<controller>/<action>',
),
        ],
    ],
];

iv. Update your frontend config's main.php file(C:\xampp\htdocs\yii2advanced\frontend\config\main.php) as below

<?php
$params = array_merge(
    require(__DIR__ . '/../../common/config/params.php'),
    require(__DIR__ . '/../../common/config/params-local.php'),
    require(__DIR__ . '/params.php'),
    require(__DIR__ . '/params-local.php')
);

use \yii\web\Request;
$baseUrl = str_replace('/frontend/web', '', (new Request)->getBaseUrl());

return [
    'id' => 'app-frontend',
    'basePath' => dirname(__DIR__),
    'bootstrap' => ['log'],
    'controllerNamespace' => 'frontend\controllers',
    'components' => [
'request' => [
            'baseUrl' => $baseUrl,
        ],
        'user' => [
            'identityClass' => 'common\models\User',
            'enableAutoLogin' => true,
        ],
        'log' => [
            'traceLevel' => YII_DEBUG ? 3 : 0,
            'targets' => [
                [
                    'class' => 'yii\log\FileTarget',
                    'levels' => ['error', 'warning'],
                ],
            ],
        ],
        'errorHandler' => [
            'errorAction' => 'site/error',
        ],
'urlManager' => [
            'baseUrl' => $baseUrl,
            'enablePrettyUrl' => true,
            'showScriptName' => false,
            'rules' => []
        ]
    ],
    'params' => $params,
];

All are done, now you can start developing your project.
Now you can see the frontend and backend on following urls
Frontend:  http://locahost/yii2advanced/
Backend:  http://locahost/yii2advanced/backend/web/

6. Remove frontend/web by registering vhost for front and back end.

    i. Open C:\Windows\System32\drivers\etc\hosts.php and add two new urls for your front and backends.

   127.0.0.1       frontend.yii2advanced.com
   127.0.0.1       backend.yii2advanced.com

   ii. Now open C:\xampp\apache\conf\extra\httpd-vhosts.conf file and map locations for above created urls.

<VirtualHost *:80>
   ServerName frontend.yii2advanced.com
   DocumentRoot "C:/xampp/htdocs/advanced_wp/frontend/web/"

   <Directory "C:/xampp/htdocs/advanced_wp/yii-application/frontend/web/">
  # use mod_rewrite for pretty URL support
  RewriteEngine on
  # If a directory or a file exists, use the request directly
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  # Otherwise forward the request to index.php
  RewriteRule . index.php

  # use index.php as index file
  DirectoryIndex index.php

  # ...other settings...
   </Directory>
</VirtualHost>

<VirtualHost *:80>
   ServerName backend.yii2advanced.com
   DocumentRoot "C:/xampp/htdocs/advanced_wp/backend/web/"

   <Directory "D:/xampp/htdocs/advanced_wp/yii-application/frontend/web/">
  # use mod_rewrite for pretty URL support
  RewriteEngine on
  # If a directory or a file exists, use the request directly
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  # Otherwise forward the request to index.php
  RewriteRule . index.php

  # use index.php as index file
  DirectoryIndex index.php

  # ...other settings...
   </Directory>
</VirtualHost>       

Now our site is ready visit front and back end sites on following urls respectively.
http://frontend.yii2advanced.com
http://backend.yii2advanced.com

Learn JavaScript - String and its methods - 16

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>String and it's methods - JS&l...