Internationalization & Localization Application with CakePHP 3

CakePHP has one of the coolest features to make application Internationalization & Localization. It’s really easy to translate your application or website into multiple languages with CakePHP 3.  Let’s see it.

First of all, create a directory Locale inside PROJECT_ROOT/src

Create a subdirectory of each language (which language you want to translate your application) inside PROJECT_ROOT/src/Locale/. Subdirectory name can be anything (ex. english, french, etc), but prefer ISO code of the language (ex. en_US, fr_FR, bn_BN etc). So follow this tutorial and make your subdirectory name en_USfr_FR, and bn_BN

Create default.po file inside all subdirectories (en_USfr_FR, and bn_BN). And copy the following code in the respective file.

src/Locale/en_US/default.po

msgid "message"
msgstr "Hello World"

 

src/Locale/fr_FR/default.po

msgid "message"
msgstr "Bonjour le monde"

 

src/Locale/bn_BN/default.po

msgid "message"
msgstr "ওহে বিশ্ব"

Here msgid key of which will use inside the template (view files) and msgstr is the values which will gonna translate.

So now you have three different languages (en_USfr_FR, and bn_BN). and one key (message) which can be translated into these three languages.

Now use <?php echo __(‘message’); ?> in your view (any ctp file of your application).

Then open PROJECT_ROOT/config/app.php file and find

 'defaultLocale' => env('APP_DEFAULT_LOCALE', 'fr_FR')

and replace with your language.

But if you want to translate language in runtime then you can use it

use Cake\I18n\I18n;

I18n::locale('fr_FR');

I hope this article will help you to translate your application in multiple language.

Host Static Website in Google App Engine

This article is for hosting your static website into Google App Engine. This article provides an app.yaml file so you can host your static website into Google App Engine. Before do anything make your website’s folder structure like that (see below image). So put all the static files inside assets folder (css, js, images, fonts) and all HTML files in project’s root directory. Inside assets folder css, js, img, and fonts are sperate folders for holding separate files (ex. css file stylesheets, img for images)

Host Static Website in Google App Engine

Then copy-paste this snipped in your YAML file. And then deploy (gcloud app deploy) your application.

You can also make your project structure your own way, then you have to change YAML content based on your changes. So that means need to change YAML information according to your project’s structure.

CakePHP 3 – DebugKit Toolbar Not Visible

Are you looking for the solution of DebugKit Toolbar not visible in CakePHP 3? These small tips will help you do that. Ensure you have pdo-sqlite installed & enabled on your machine. Cause debugKit by default uses a sqlite db. If not then follow this instruction.

At first install pdo-sqlite in your machine.

sudo apt-get install php7.0-sqlite

Then restart your server (apache server)

sudo service apache2 restart

Now that will help you to visible the DebugKit Toolbar

 

Getting Query String Values Without a Hash in the URL

$location.search() returns empty? Angular does not remove the query before the hash bang in URL. According to AngularJS documentation,  hash bang URL format is:

http://example.com/#!/bar?baz=23

So if you have no hash bang in your URL (e.g. http://example.com/bar?baz=23), and try to get query string value, then you can use this snippet.

function getQueryParams(queryParam, url) 
{
        var pageUrl = url || window.location.search.substring(1);
        var urlVariables = pageUrl.split(/[&||?]/);
        var response = null;

        for (var i = 0; i < urlVariables.length; i += 1) {
            var param = urlVariables[i];
            var paramName = (param || '').split('=');

            if (paramName[0] === queryParam) {
                response = paramName[1];
            }
        }
        return response;
}
    
console.log(getQueryParams('baz', 'http://example.com/bar?baz=23'));

This code is also with pure JavaScript (withour AngularJS).

Change Bower Default Directory And Folder

Bower is the client-side dependencies manager. The developer can easily manage their client-side dependencies with the Bower. By default when you install any package (e.g jQyery, Bootstrap etc) through Bower, then a bower_components folder will create in the project’s root directory and store all the files inside it. So the default directory of bower installation is ROOT and folder is bower_components
But if you want to change the Bower default directory and folder then you have to follow these following steps.

Remove bower_components (if exist) from your project root directory

 

Create .bowerrc file in your project’s root directory

 

Paste these code in .bowerrc file and modify DIRECTORY_NAME & FOLDER_NAME

{
  "directory": "DIRECTORY_NAME/FOLDER_NAME"
}

Then finally run bower install command.

Hope these will helpful to configure your Bower directory and folder name.

Loading Model Inside Another Model and Controller in CakePHP 3

Sometimes it necessary to load a model inside another model as well as another controller in CakePHP. This article will help you to load a model from another model & controller with CakePHP 3

Load From Model:
$anotherTable = TableRegistry::get('AnotherTable');
$data = $anotherTable->find('list');

CakePHP TableRegistry is a factory of the Table object. It comes with a lot of static function and get() one of them. TableRegistry::get() provides an instance of Table. You can see an example from above snippet.

Load From Controller:
$this->loadModel('AnotherModel');
$data = $this->AnotherModel->find('list');

If you need to load a model from the controller which does not default model of the controller. You can use loadModel() function to get an instance of another model.

Start Counting After Scroll on Specific Element

Sometimes it’s important to do some activities when a specific element is visible on the web page. So something needs to be trigger when that element is showing on the web page. Suppose you want to start counting after scroll on that specific element. Here is the code for that.

HTML CODE:
<div class="container">
  <h2 class="well well-lg" style="margin-top: 200px;">Scroll Down</h2>
  <h2 class="well well-lg" style="margin-top: 200px;">Scroll Down</h2>
  <div class="jumbotron text-center" style="margin-top: 200px;">
    <div class="container">
      <div class="col-lg-3">
        <h2>Total Sales</h2>
        <h1 class="counter">967</h1>
      </div>
      <div class="col-lg-3">
        <h2>Total Sales</h2>
        <h1 class="counter">967</h1>
      </div>
      <div class="col-lg-3">
        <h2>Total Sales</h2>
        <h1 class="counter">967</h1>
      </div>
      <div class="col-lg-3">
        <h2>Total Sales</h2>
        <h1 class="counter">967</h1>
      </div>
    </div>
  </div>
</div>
JAVASCRIPT CODE:
function isCounterElementVisible($element) {
  var topView = $(window).scrollTop();
  var botView = topView + $(window).height();
  var topElement = $element.offset().top;
  var botElement = topElement + $element.height();
  return ((botElement <= botView) && (topElement >= topView));
}

$(window).scroll(function() {
  $(".counter").each(function() {
    isOnView = isCounterElementVisible($(this));
    if (isOnView && !$(this).hasClass('visibled')) {
      $(this).addClass('visibled');
      $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
      }, {
        duration: 3000,
        easing: 'swing',
        step: function(now) {
          $(this).text(Math.ceil(now));
        }
      });
    }
  });
});

See Demo:

An invalid form control with name=” is not focusable?

Are you getting An invalid form control with name=” is not focusable message on your browser’s console log? Don’t be worried about this problem. Here is the quick fix for this issue.

First of all why it’s happened? It’s happened when you have some hidden fields with required true and these fields have no parent ‘form‘ element. In that case, this error might happen. Especially when you work on Jquery, AngularJS.

To fixed this issue you can just add ‘novalidate’ in your opening ‘form ‘ tag. Just like that <form action” novalidate>

Implement Non-Blocking Session in PHP

As we all know Session is the most important component in the web application. Before describing the non-blocking session, I would like too little introduce about PHP Session. The session is the way to store data for each user against a unique session ID. By default, session usages file to storing the session data. When session_start() is called then PHP creates a unique identifier number for that particular session. And sent that number to users browser to save that number. Contiguous create a new file with the same name of the unique identification number. And browser will use that unique identification number to communicate with that server. To know more about How Does PHP Session Works read this article.

Non-Blocking Session

What Does Session Locking:

When web server getting the concurrent request which involves with PHP Session. Then the first request will engage the Session file to work with it and locked that Session file. And rest of the request who also have to engage with Session, they will be blocked (waiting for the unlock of the Session file). When the first request did its activities then release the Session file and then the second request will engage with The session. And this happened until the last request is served. This is actually called Session Looking. To understand more about Session Locking read this article.

Non-Blocking Session:

To improve the application performance we need to avoid this problem. To avoid the PHP Session blocking we can start the session and then close the session. This will unlock the session file and allow the remaining requests to engage with Session, even before the previous request has served.

session_write_close(); function need to call to close the session.

This trick works great if you do not need to read anything in session while your another process is engaged with the session. With this technique, you still able to read the $_SESSION data while the session is engaged with another request.

Example Script:

// start the session
session_start();
// read/write to session
$_SESSION['login_time'] = time();
// close the session
session_write_close();
// now do my long-running code.
// still able to read from session, but not write
$twitterId = $_SESSION['userId'];

Search Key Value Pair in Multidimensional Array

Are you Looking for key value search of a multidimensional array? This script will help you to search multidimensional array by key value pair.

You will get following output after executing this script.

Result:

Array
(
    [0] => Array
        (
            [name] => DDD
            [role] => agent
        )

    [1] => Array
        (
            [name] => EEE
            [role] => agent
        )

)