Development

Lacalization in Laravel 5.8 made easy

Development

In this tutorial we’re only focussing on localization, so I won’t go over the installation of Laravel and I assume that you already have a working Laravel project.
We are going to implement localization in 5 simple steps.

Step 1. Provide a language route

In the routes/web.php file you can find all the routes for your project, so we will also put our language route in this file.
I prefer to also put my language function in the route, by doing this we don’t need to have a LanguageController for this simple task.

Route::get('lang/{locale}', function ($locale) {
    session()->put('locale', $locale);
    return redirect()->back();
});

In this function we’re setting the locale in our App and also providing a locale variable to our session that we’re going to use in the next step.

Step 2. Provide a Localization Middleware

In order to create this new Middleware we’ll run the following command in our terminal.

php artisan make:middleware Localization

Once this middleware is created by Artisan, we can find it in the app/Http/Middleware folder. To complete this middleware we’ll need to make some small changes to it, in order to get the behaviour we want. For starters we need to make sure it uses our App. this can be done by adding use App to it. We also need to make sure it sets the correct language. This can be done by setting the App locale value to what we have stored in our session.
The final result of this file should look like this.

namespace App\Http\Middleware;

use Closure;
use App;

class Localization
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    { 
        if (session()->has('locale')) {
            App::setLocale(session()->get('locale'));
        }
        return $next($request);
    }
}

Step 3. Register our Localization Middleware

In order to make the application use our newly created Localization Middleware we need to add it to the middelwaregroup. In the app/Http/Kernel.php file we need to add our Middleware class to the middlewareGroups.

The contents should then by like this.

    
    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
            \App\Http\Middleware\Localization::class,
        ],

        'api' => [
            'throttle:60,1',
            'bindings',
        ],
    ];

Step 4. Create language files

In the resources/lang folder there is a standard en folder, containing a few language files.
In this example we’re going to add our own language file to it called “customlang” and provide the following content to it.

return [

    /*
    |-------------------------------
    | Custom Language Lines
    |-------------------------------
    */

    'welcome' => 'Welcome',
    'chooselang' => 'Choose your language',

];

Now we can just make copy of the en folder and translate all content in it to a preferred language.
For example

return [

    /*
    |-------------------------------
    | Custom Language Lines
    |-------------------------------
    */

    'welcome' => 'Welkom',
    'chooselang' => 'Kies uw taal',

];

Step 5. Setup the view

Now we’re able to use these custom translations in our views.
For example:

<div class="content">
    <div class="title m-b-md">
        {{__('customlang.welcome')}}
    </div>
    <p>{{__('customlang.chooselang')}}</p>
    <div class="links">
        <a href="lang/en">EN</a>
        <a href="lang/nl">NL</a>
    </div>
</div>

Bonus

To add some extra flavour to it we can make use of a variable in our language file.
For example, we can add a username to our welcome message:

'welcome' => 'Welcome :user !',

To make use of this we need to update our view as follows:

<div class="content">
    <div class="title m-b-md">
        {{__('customlang.welcome', [ 'user' => 'Bert'])}}
    </div>
    <p>{{__('customlang.chooselang')}}</p>
    <div class="links">
        <a href="lang/en">EN</a>
        <a href="lang/nl">NL</a>
    </div>
</div>

Share this post

301 Redirects, when and why should we use them

Development

301 Redirects are permanent redirections, so it redirects a certain URL to another one.

When we use them?

  • When the website url changes for the same content. For example http://www.website.tld/oldpage -> http://www.website.tld/newpage
  • When the main url of a website changes. For example http://www.oldwebsite.tld/page -> http://www.newwebsite.tld/page

Why we use them?

  • In order to keep the links that were already indexed by search engines.
  • To keep customers on your website when the url changes.

How to use them

301 redirects are added to the .htaccess file on an Apache server.

Redirect 301 [old page url] [new page url]

For pages:

Redirect 301 /oldpage.html https://www.url.tld/newpage.html
Redirect 301 /oldpage2.html https://www.url.tld/newpage2.html
Redirect 301 /oldpage3.html https://www.url.tld/newpage3.html

For an entire website:

Redirect 301 / https://www.newurl.tld

Share this post

Laravel – Artisan – Cheat Sheet

Development

Here’s an overview of what you could use while developing a project with Laravel.
In order to create controllers, models, migrations, … we can use artisan.

Creating a Controller

php artisan make:controller MyController

When we want artisan to provide a controller with the “resource functions” (index, create, store, show, edit, update, destroy) predefined for us, we can simply add “–resource” to our command to provide these functions out of the box.

php artisan make:controller MyController --resource

Creating a Model

php artisan make:model

If you want artisan to provide a migration file related to our newly created model, you can just add “-m” to the command. Which gives us something like this:

php artisan make:model -m

Creating a Migration file

We’re also able to create our own migration file, for example is we want to add field to an existing table or create a pivot table, or …

php artisan make:migration the_name_of_your_migration

Just like the migration file that artisan provided for us when we used -m on the creation of a model, the migration file will be added to the /database/migrations folder.

Deploy the migration file(s) to the database

In order to get our migration file(s) migrated into the database, we need to tell artisan to migrate them. Like so:

php artisan migrate

Be aware that once a migration file has been migrated to the database, all changes to the file afterwards will be discarded. We’ll need to create a new migration file in order to add additional changes / migrations. In the database you can see the hierarchy of the migrations in the table migrations.

Share this post

Dive into Laravel – Installation

Development

Installing Laravel

Installing Laravel and getting your project going is quite easy, if you know how to do it. So here we go!

First of all you’ll need a local server.
You’ll be needing at least PHP version 7.1.3. and I’m currently working on PHP 7.2.

I prefer to install Laravel globally. Use the following command on your terminal.

composer global require "laravel/installer"

After Laravel is installed you can run the simple command.

laravel new myFirstProject

And it will create a new folder for you with the name myFirstProject with a fresh installation of Laravel in it.

The next step is to set up your vhost to your folder. (don’t forget to link it to the public folder)
Once this is done, you’ll be able to browse to your newly created project using the browser of your choosing.

Installing Laravel using these steps will automatically result in a secure installation, meaning that there will be a Application Key generated for you.

Setting up the database

Setting up a database for your project will be quite easy because we will be using the power of artisan to build our project.
The only thing you need to do manually is creating an empty database. Afterwards you’ll need to put in the credentials into the .env file, right over here:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

When this is done we can start using the database.

From this point forward you can start developing your project!

Share this post

Clearing your local DNS Cache

Development

While editing DNS settings for a client (or for yourself) and the URL’s don’t resolve like they should, it’s probably your local DNS Cache fooling you.
It would be a good idea to clear your local DNS Cache.

For macOS Sierra 10.12.0, OSX 10.11.0, OSX 10.10.4 and OSX 10.9 – 10.8 – 10.7 you can use this.

sudo killall -HUP mDNSResponder

For OSX 10.10.0 – 10.10.3 you can use this.

sudo discoveryutil mdnsflushcache

For OSX 10.5 – 10.6 you must use this.

sudo dscacheutil -flushcache

Share this post

Getting started with Grunt and Sass

Development

This year I’ve started working with some new tools, two of them are Grunt and Sass. Grunt is a commandline JavaScript Task Runner, and Sass is a Css preprocessor allowing you to write more powerful css, with the use of variables, mixins/functions and nesting!

Off we go !

First of all you’ll need to install a few things. Ruby to get Sass, and NodeJs to get npm, so we can work with Grunt.

Grunt

Step one: installing Grunt. If you have NodeJs installed properly you simply run: npm install -g grunt-cli

This will install Grunt globally. So you can use it wherever you want.

Now we need to create the “package.json” file there are several ways to do this. But I prefer to create a new file and input this.

{
  "name": "Project Name",
  "version": "0.0.1",
  "devDependencies": {
     //installed packages 
  }
}

And then save it as “package.json” in the root of my project.

After that we need to install our Dependencies. This can be done by running the following command: npm install <package> --save-dev

I want to use Grunt to compile my Sass when I save my project. To do this I need to install 2 dependencies.

grunt-contrib-sass: It is used to actually compile your scss files to css.

grunt-contrib-watch: It watches our folders for file changes.

Example

npm install grunt-contrib-sass --save-dev

Now my “package.json” looks like this:

"devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-sass": "~0.3.0",
    "grunt-contrib-watch": "~0.4.4"
}

Next is our “Gruntfile.js”. This file contains the tasks that grunt needs to do for you.

This is how my Gruntfile looks like:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    'style/style.css' : 'sass/style.scss'
                }
            }
        },
        watch: {
            css: {
            files: '**/*.scss',
            tasks: ['sass']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

This file starts with a wrapper function and we pass in grunt so that we can access it..

Adding tasks with :

grunt.loadNpmTasks('*Name of the task*')

Register Tasks with :

grunt.registerTask('default',['*tasks to run*']);

the 'default' task is what gets running when you type grunt in the commandline.

The end !

When working on your project, just run the grunt command in your commandline in your project folder.

Hit ctrl+c to quit grunt when you’re done.

Share this post