Nasrul Hazim Bin Mohamad

Laravel: Import Templates into Laravel

Apr
27

Assalamualaikum,

We know, there’s millions of web templates available out there – the clean look, corporate look, modern, minimalist. You name it, either it is free or paid version, usually it come in HTML, JS and CSS format. It’s hard to find template that is ready with Laravel.

Previously, here are some of the approaches I did, to get the template into Laravel application.

  1. Download the template, copy the assets, organise them in public directory. That’s ok, but I need a way to keep everything in resources/assets.
  2. Download the template, mimic / copy the important part of the template – CSS / JavaScript – place it in resources/assets and start writing codes for front-end assets, then compile using Laravel Mix.
  3. Get the list of dependencies used for the theme, manually install using yarn add..., then create scripts – CSS / JavaScripts – in resources/assets, then compile using Laravel Mix.

All these some of my previous approaches in importing templates into Laravel application.

Yesterday, I have a chance experimenting on new method. Here the workflow:

  1. Clone / Download the template into resources/assets/templates/
  2. In terminal, go into resources/assets/templates/the-template/, run npm install && npm run build – depending on your template selection, sometimes it is required to compile the template, but there is templates that did not require you to compile.
  3. Then in webpack.mix.js, copy all assets generated in resources/assets/templates/the-template/ to public/the-template.

Then you are done! You can start use the asset() helper like asset('the-template/js/vendor.js'), and so on in your layouts.

Following an example of the templates I have compile and export to public folders – but I did not implement in the new layout, as it require a lot of efforts to create components and use all the classes from the template.

Template Into Laravel

Hope my explanation will make you guys clear, how to import templates into Laravel projects – 3 main steps: git clone, build(optional), copy compiled assets with mix to public directory.

Thanks!

Laravel , , , , , , , 0 Comment

Laravel: Reset Password From an API

Apr
27

Assalamualaikum,

Today, will share about how to reset your account in Laravel application from an API.

This is assumed you already setup JWT Auth in your Laravel app.

Create a new API controller – php artisan make:controller Api/Auth/ForgotPasswordController and copy paste the following code, and add the forgot password route in routes/api.php.

So, basically what I did was to use Illuminate\Foundation\Auth\SendsPasswordResetEmails trait, which being used in the default Laravel Forgot Password Controller.

I just copy codes from sendResetLinkEmail method, and make changes on how the response we should receive from an API.

Then you are done! Easy right? 🙂

To test, open up your email, you just need to pass email address – just like we did in Laravel Auth Scaffold, then you are done.

The email owner will receive reset password link, and the owner open up the email, click on the link, go reset as usual, as we did on web app.

That’s all, thanks!

Laravel , , , , 0 Comment

Laravel: HasDatatable Trait

Apr
26

Assalamualaikum,

Just a simple setup on datatable – to have a trait that can be use for other models.

Assumed that you already install Yajra Datatable, we going to setup the API end point, simplify the setup of datatable.

Here the trait:

You can use the protected $datatable property to select which fields to display in your datatable.

The usage:

The API Endpoint:

Then you are done!

You may overwrite the datatable scope in your model if you need other implementation for the scope.

This is just one neat simple setup, reusable to your other models.

Hope this can help speed setup your datatable API Endpoint.

Thanks for reading!

p/s: You may see this setup in Cleanique Coders Boilerplate.app.

Laravel , , , , 0 Comment

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