Nasrul Hazim Bin Mohamad

Laravel: Observer Setup Enhancement

Apr
24

Assalamualaikum,

It’s been awhile since my last blog post. Today, just want to share something simple, an enhancement of LARAVEL: CREATE HASHED ID FOR A RESOURCE USING OBSERVER. Going to refactor a bit.

First, let’s modify the app/Observers/Kernel.php, to be like the following:

Next, add new config file for our observer – config/observers.php:

And that’s it!

Very simple and straightforward setup of Laravel Observer, much cleaner than before.

Should I make this as a package? Do let me know if you guys need this as a package. 🙂

Thanks

Laravel , , , 0 Comment

Laravel: Create Telegram Bot Application without Botman Studio

Mar
21

Installation

We are using Botman package, and Botman Telegram Driver.

Configure .env

Use Bot Father to create new bot and get the API Token for the bot, store it in .env.

TELEGRAM_TOKEN="your-bot-api-token"

Telegram End Point

Create a route & controller for your Telegram Bot to use after this (webhook).

In TelegramController, add the following:

Now you are done preparing for next part.

Webhook

For development purpose, you can use valet share to have a live server. For Windows / Linux, you can install ngrok.io to have a live server.

valet share is actually running a ngrok.

Run command valet share and and then register our app with Telegram using php artisan botman:telegram:register command.

CSRF Token

In App\Http\MiddlewareVerifyCsrfToken, disable CSRF token for /telegram route.

One you are done setting up the webhook, open up your Telegram, start talk with your bot, /hi. You should received response from your bot.

Laravel , , 0 Comment

Laravel: Minify HTML

Feb
25

Assalamualiakum / Hi,

Just a quick blog post this time.

As part of optimisation, it’s important to minify your JavaScript & CSS – this can be done with Laravel Mix.

But how about HTML?

Seen this?

Ugly HTML Codes

So that’s how it’s look like our generated HTML codes.

And how we going to change into this?

Minified HTML Codes

A simple middleware will do to minify our HTML.

Then register the middleware and you are good to go!

Just grab this the Laravel Page Speed, then you’re done!

Thanks,
Nasrul

Laravel , , 3 Comments

Laravel: Custom Accept API Header

Feb
18

Assalamualaikum / Hi,

It’s been a while since I stumble upon an API, which have custom Accept header.

For a past few days, I have a chance to implement custom header on one of my client project.

Here is how I did – create a middleware to filter the coming request.

As you can see above, my approach is using a middleware to check out every request come in. You just need to register this middleware in api middleware.

Now you’re ready with your custom Accept header.

You also can use the custom Accept header to have version control of your API.

Thanks! Happy Coding!

Laravel , , , 0 Comment

Laravel: Datatable

Feb
18

Assalamualaikum / Hi,

Today I will share how to use Datatables in your Laravel project.

I will cover on:

  1. Setting up Datatables
  2. Compiling Datatables Asset with Laravel Mix
  3. Create route for Datatables
  4. Create reusable Blade Template for Datatable

Part 1: Installation

Create a new laravel project. Install package.json dependencies with npm install or yarn install. Add Datatable and Datatable Bootstrap 4 – yarn add datatables.net datatables.net-bs4 --dev. --dev means that we only need this on development since we will compile it once and used the compiled version for our application.

Open up webpack.mix.js and update the file as following.

Then run npm run prod – this should create public/js/datatables.js and public/css/datatables.css

The next thing you need to install is the Yajra Laravel Datatables – composer require yajra/laravel-datatables:^1.0 and then run php artisan vendor:publish --tag=datatables.

If you’re running on minimum of Laravel 5.5, thanks to package discovery. No need to setup config/app.php. 🙂

Part 2: Datatable Routes

In this part, I’m going to show how I manage Datatable routes.

The starting point is the app/Providers/RouteServiceProvider.php. Open up the file and we will duplicate one of the method – mapApiRoutes() – and name it as mapDatatableRoutes().

Next, create routes/datatable.php file and we can start write datatable routes in the file. As you can see, with this method, your datatable routes will be much cleaner and organised in a separate route file.

This is just an approach to make your route file easier to maintain. The other option, you may use macro.

Following are the sample datatable route that we will use in this post.

<?php 

Route::get('user', 'UserController')->name('user');

Part 3: Basic Datatable Controller

In this part, I’ll show how I manage the controllers for datatables. As you can see from my mapDatatableRoutes(), I have namespace for the datatable route to App\Http\Controllers\Datatable. This approach just to make your datable controllers well organise.

You can create your first datatable controller with php artisan make:controller Datatable/UserController and you can copy paste the basic setup of the datatable controller.

Part 4: View

In this part, I’ll show how I create basic datatable blade component that reusable – of course, you can use VueJs as well, but I’ll keep it simple for now.

By default, I have this resources/views/components/table.blade.php, which I always use for table based view.

Next, create resources/views/components/datatable.blade.php.

Now we are prepared with the requirements on datatable – Datatable JS & CSS, Laravel Datatable by Yajra, dedicated route and namespace to keep codes well organised. Next, we will test our setup.

Part 5: Final Countdown

We will list out users using datatable. Make sure to run php artisan make:auth and add @stack('styles') and @stack('scripts') in resources/views/layouts/app.blade.php.

Previously you have setup the route and controller. Next is to create a controller, route and a view to display the data from datatable. Following are the setup.

Create the controller – php artisan make:controller UserController -r

Create resources/views/users/index.blade.php

Add route for the view in routes/web.php: Route::get('/users', 'UserController@index')->name('user');

Next (2 more steps!), seed some data with tinker php artisan tinker, then factory(\App\User::class,100)->create();.

And finally, run php artisan serve, the go the browser – http://127.0.0.1/users, you have as the datatable display nicely!

Conclusion

So, as conclusion, the tedious part is to setup the requirement for the datatable. Once you’re done, you will probably will involved with creating route, controller for the datatable and view, and view for the controller view.

You can extend the datatable blade component based on your needs. As for me, for now, the basic setup is good enough.

Here the repository for this post example.

Should I create a package for this?

Thanks! Happy Coding!

Laravel, Uncategorized , , , , 0 Comment

PHP-CS-Fixer Configuration

Feb
11

Assalamualaikum / Hi,

Today, just a quick sharing on my PHP-CS-Fixer setup in my Laravel application.

First, you need PHP CS Fixer. You can go through the installation steps here.

Then, I’ve added an alias for my PHP-CS-Fixer alias csfix="php-cs-fixer fix".

Now my PHP-CS-Fixer config file, following are the setup in my Laravel application.

Once done, I just need to run csfix (since I’ve add an alias for the it).

Hope that will be helpful to keep things standardised across your Laravel application.

Thanks,
Nas

Laravel, PHP , 0 Comment

Laravel: BitBucket Pipeline

Feb
10

Assalamualaikum / Hi,

Just sharing my bitbucket-pipelines.yml file used:

I might be adding more in order to support Laravel Dusk. Feel free to share any references on this.

Thanks,
Nas

Laravel , , 0 Comment

Laravel: Font Awesome 5

Feb
09

Assalamualaikum / Hi,

Today, I’m going to share how to include the new Font Awesome 5 in your Laravel application. You will need Node.js to do so – see Laravel Mix.

So to start with let’s, consider that you have your fresh Laravel application created, you need to install all front-end dependencies then install Font Awesome 5.

Create resources/assets/js/font-awesome.js and in resources/assets/js/font-awesome.js add the following:

Next, in webpack.mix.js, add the following:

In terminal run npm run production.

Once you’re done, you may use Font Awesome 5 in your application. See Font Awesome 5 for the icons available.

Please take note, this is for free Font Awesome 5. For Pro, you just need the license key and replace the word `free` to `pro` during installing the package

Training on Web Development with Laravel Framework (Advanced) at Barracuda Campus, Cyberjaya (08 Feb 2018). Interested to learn? Check out our website at Cleanique Coders or email us for further enquiry.

Laravel , , , 2 Comments

Laravel: Notification to Slack

Feb
02

Assalamualaikum / Hi,

Today I will show you how to make a notification to Slack channel.

The approach slightly different you may came across on the internet, but they key point, still rely on Laravel Notification. It’s just how I manage my Slack service.

Configuration

First, we going to start with setting up our environment for Slack Notification by adding the Slack service configuration. Add new services in config/services.php:

Then create a webhook URL in Incoming Webhooks.

In your .env, add SLACK_WEBHOOK_URL, and add the webhook you just created above.

Once you’re done, in your terminal, don’t forget to run php artisan config:cache.

Service

Next step is to setup our Slack service and helper.

The service basically it’s just a simple class to have a webhook URL store in it, and a helper make it simpler to call the Slack service.

We going to create a service class in app/Services/Slack.php:

Then create a helper in app/Support, call it helpers.php. Then add the following and then make sure in composer.json, to load the app/Support/helpers.php:

Then composer dumpautoload -o once you have added the helper.

Notifiable Trait

Laravel provide a trait Illuminate\Notifications\Notifiable, which you can use it anywhere in any classes you want.

In our case, I want to create a class called Notify.php in app/Models.

Did you notice how I use slack() helper to get the Slack Webhook URL? Much convenient. You may want to extend the Slack service class in future, but in our case, we don’t need any as for now.

But again, you can simplify that by using env() function to get the Slack Webhook URL instead of having configuration, helper and Slack service class.

This is just my practice when dealing with 3rd party service – configuration, service class and a helper.

Don’t forget to composer dumpautoload -o once created the class.

Do take note the routeNotificationForSlack(), that is required in order Slack to work. Next will see how to notify to Slack channel.

Notification

This it the last section – now go and create a notification class via artisan – php artisan make:notification NotifyToSlackChannel.

Open up the NotifyToSlackChannel class and do two things:

One, update the via() method to accept only slack in the array.

Two, add a new method called toSlack($notification) and use \Illuminate\Notifications\Messages\SlackMessage to send messages to Slack channel.

Both steps above in following gist:

Let’s try!

So, you are ready to send messages to your Slack channel!

The fastest way to test your Slack notification is using tinker.

Here how I did:

Save it to tinker/notify-to-slack.php.

Then run php artisan tinker tinker/notify-to-slack.php.

That’s it! Working great!

User Cases

Some of user cases might need this type of notification:

  1. Helpdesk system – quick response from support team when get notify on new issues raised.
  2. E-commerce – placing new order, successful payment, out of stock items.
  3. Attendance system – you want know what time your employee come to your office (of course involve some other integration)

And I believe, it’s quite a lot of user cases can be implement, especially those involved with support, request, management.

Feel free to share your idea how we can implement more with Laravel Notification and Slack. 🙂

Happy coding guys!

Laravel, Uncategorized , , , , 0 Comment

Laravel: Packager

Jan
28

Assalamualaikum / Hi,

In this post, I will talk more about Laravel Package Generator, Packager.

And today, this morning, I just created Money Wrapper, a Money wrapper, and of course using Packager.

Before we go to the things inside Packager, here the package Money Wrapper provide:

  • Provide a Money helper – money()
  • Intended for Laravel Framework, but can be use outside from Laravel Framework as well.
  • Provide common usage such as:
    1. For Human Readability – RM 1.00, RM 345.00
    2. For Common Display – 1.00, 345.00
    3. For Machine (intended format to store in Database – integer) – 100, 34500
    4. Fixed Exchange Rate Conversion – $ 1 > RM 3.87

So, that’s just briefly about the package, you may go ahead to Money Wrapper to start use it.

Package Skeleton

First thing first, I’ve already give a short update about Packager, a Laravel Package Generator – help to speed up setup Laravel package skeleton.

The command to create new package is simple:

$ packager skeleton "Cleanique Coders" "Demo Package"

Following are the sample package generated:

Package Skeleton Generated

And other than generate the skeleton for you, it’s also install all the dependencies and initialise git! Fuh! Save lot time!!

The Skeleton Details

Files and Directories

As you can see, composer(including lock), LICENSE.txt, phpunit.xml, README.md files included in the package.

Then the structure of having src, tests and vendor already in place.

Source

Taking a bit deeper into src directory, we have the Facade and Service Provider. This is by default generated by the package. Come along in the directory is Support directory, which usually in the directory we have a helper file – which already auto loaded during package initialisation! Very helpful!

Test

Next, as for tests, the tests directory already setup and have a default TestCase.php, which our main file. This TestCase.php, we should extend from it when creating new test(make sure to have the suffix Test.php of the file name – you may change in phpunit.xml if you wanted to). TestCase.php also already load up your package service provider – so you don’t need to worry setting up migration. I would probably add some other setup like database settings to use SQLite in future.

I’ve also added Code Dungeon, PHPUnit Result Printer and Orchestra TestBench which both would be helpful in your test development for Laravel package.

Conclusion

As the conclusion, you might experienced (if you already have previously write packages), where you have missed out one or two things, or even, kinda difficult to setup one by one for your Laravel package – this is absolutely a solution for you!

For me, I’m bit lazy, and kinda irritate to keep on repeating setup the same thing, so I’ve decided to create the Packager!

And for me again, if i’m not satisfied with what’s exist, I’ll build it myself (of course with Allah’s will, insyaAllah).

When there’s a will and efforts, there’s always a result.

Hope this Packager, will help more people to learn not just about creating Laravel package, also, build a good structure and standard across Laravel packages. I did study how Laravel packages available setup, including those from Spatie, and many more. So this is the result.

Hint: Will add up for updates on Packager. Stay tuned!

Laravel, Package , , , , , , , 1 Comment