Laravel Posts

post

Lots of developers have a question How do I set up React in the Laravel application? so, In this article, I show you how to set up a React in Laravel.

We have a video tutorial as well. so, you can watch it or follow this article.

Follow the following steps

I hope you created a Laravel application in your local machine.

You should watch this tutorial first if not and don't know how to create a Laravel application.

Steps 1:

Let's navigate to the resource directory of your laravel application.

Now, create react application using npx create-react-app react-app. also, you can follow an official docs.

Steps 2:

Now, move all the packages from the package,json to package.json which is located in the root directory of the laravel application.

Steps 3:

Run the following command,

npm install

Steps 4:

We need to compile the react application and convert it into js file. so, let's use laravel mix.

Let's open a file webpack.mix.js and put the following code,

 mix.options({
  postCss: [
      require('autoprefixer'),
  ],
});

mix.setPublicPath('public');

mix.webpackConfig({
  resolve: {
      extensions: ['.js', '.vue'],
      alias: {
          '@': __dirname + 'resources'
      }
  },
  output: {
      chunkFilename: 'js/chunks/[name].js',
  },
}).react();

// used to run app using reactjs
mix.js('resources/react-app/src/index.js', 'public/js/app.js').version();
mix.copy('resources/react-app/public', 'public');

Steps 5:

Fire the following command for compile the assets,

npm run dev

Steps 6:

React application compiled successfully and created all files in the public directory. now, we need to include this js file into the laravel root file. I guess we have a fresh laravel project. so, let's add in welcome.balde.php. you can add in any file where you want to load react application.

Include the following line before end the body,

<script type="text/javascript" src="{{ mix('js/app.js') }}"></script>

also, one more thing we should not forget to include a <div id="root"></div> in root file of laravel. I going to put right now into welcome.blade.php

The last step is just to fire the artisan command php artisan serve and open this URL http://127.0.0.1:8000 in the browser.

July 24, 20212 minutesauthorShailesh Ladumor
post

People nowadays are becoming more intelligent, so better to protect our application's content/data from those who are calling themself hackers.
One of the best examples is the data URLs from AWS buckets. it's not a good idea to store sensitive data into a public AWS Bucket, as the URL is accessible by the people.

Of Course, you can store profile avatars and others data to the public bucket's that not contains any confidential information. so that's fine. 
But when it's about confidential information like PAN CARD Details, AADHAR Card Details, Bank Informations we Must Recommend using AWS Protected Bucket.

In this tutorial, we are going to show that how we can prevent that kind of case, Or how we can integrate AWS Protected Bucket in our Laravel Application.
 
The following code will help you to generate a pre-signed AWS URL that will prevent our data, that URL is non guessable and it will expire within some minutes/hours specified by us.

So let's start with some code :

$s3 = \Storage::disk(config('filesystems.s3_protected_disk'));
$client = $s3->getDriver()->getAdapter()->getClient();
$expiry = "+1 minutes";
$command = $client->getCommand('GetObject', [
'Bucket' => \Config::get('filesystems.disks. s3_protected_disk.bucket'),
'Key'    => 'Path to your file',
]);
$request = $client->createPresignedRequest($command, $expiry);
	return (string) $request->getUri();

So here we have created an s3 instance and it's stored on the $s3 variable, we have specified the expiry time as 1 minute so the given URL for data will be expired within a minute.
Also, we have to specify the bucket name and path to our protected file to generate AWS pre-signed URL.

it will return the pre-signed URL and its looks like as the following URL.

             https://pre-signed.s3.au-west-2.amazonaws.com/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=xxxxxxxx%2F20180210%2Feu-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210210T171315Z&X-Amz-Expires=60&X-Amz-Signature=xxxxxxxx&X-Amz-SignedHeaders=host

Hope this helps.


July 16, 20212 minutesauthorVishal Ribdiya
post

Generally, we are using a Laravel One Signal package for push notification. if you are planning to use one signal in the mobile application then this package right for you.

Recently, I add a new feature UserDevice. let me explain why I added support for user Device APIs.

We need to create an API to register a device because One Signal sends a push notification using os player id. so, we need to store os_player_id in the backend from the mobile application. So, need to create an API for it.

Now. you can save your time using this package. you can Generate APIs using one artisan command,

php artisan one-signal.userDevice:publish

This command generates the following files,

  • UserDeviceAPIController
  • UserDeviceAPIRepository
  • UserDevice (model)
  • Migration So, everything is ready in minutes and delivered an API on the spot.

Also, do not forget to add the following routes to the api.php file.

use App\Http\Controllers\API\UserDeviceAPIController;

Route::post('user-device/register', [UserDeviceAPIController::class, 'registerDevice']);
Route::get('user-device/{playerId}/update-status', [UserDeviceAPIController::class, 'updateNotificationStatus']);

If you are a good Eye listener then you should watch the video tutorial

July 08, 20211 minuteauthorShailesh Ladumor
post

Today we are going to see how we can image based on resolution. We have the most common issue of loading big images in small devices take time. So, the basic solution is to use the picture element to load a different image in different devices and resolutions.

The <picture> element will be for the art direction of responsive design.

The element contains two tags.

  • <source>
  • <img>

So, the browser will look for the first <source> element where the media query matches the current width, and then it will display the image. The <picture> element is required as the last child of the <picture> element.

Let me show you an example of how to display a different image in different widths.

Here is a Code example,

<picture>
    <source media="(min-width:900px)" srcset="infyom_logo_lg.jpg">
    <source media="(min-width:700px)" srcset="infyom_logo_md.jpg">
    <source media="(min-width:500px)" srcset="infyom_logo_sm.jpg">
    <img src="infyom_logo_xl.jpg" alt="Flowers" style="width:auto;">
</picture>
June 18, 20211 minuteauthorShailesh Ladumor
post

Basically, we set up email/username and password login in all our projects. but, sometimes we need to implement s passwordless login in laravel application,

First of all, what is passwordless login? passwordless login is an authentication method that allows the user to log in without entering a password.

In this article, I show you how to set up passwordless login laravel step by step.

Step 1:

one great laravel package Laravel Passwordless Login provides the ability to log in without a password. 

This package provides a temporary signed URL link that logs in a user, What it does not provide is a way of actually sending the link to the route to the user. This is because I don't want to make any assumptions about how you communicate with your users.

Step 2:

Open the terminal and go to the project directory and fire the following command to install

composer require grosv/laravel-passwordless-login

Step 3:

Configure the following variables in your env file

LPL_USER_MODEL=App\User
LPL_REMEMBER_LOGIN=false
LPL_LOGIN_ROUTE=/magic-login
LPL_LOGIN_ROUTE_NAME=magic-login
LPL_LOGIN_ROUTE_EXPIRES=30
LPL_REDIRECT_ON_LOGIN=/
LPL_USER_GUARD=web
LPL_USE_ONCE=false
LPL_INVALID_SIGNATURE_MESSAGE="Expired or Invalid Link"

Step 4:

Create one function in your login controller. it looks like

use App\User;
use Grosv\LaravelPasswordlessLogin\LoginUrl;

function sendLoginLink(\Request $request)
{
    $user = User::where('email','=', $request->get('email))->first();

    $generator = new LoginUrl($user);
    $url = $generator->generate();

    //OR Use a Facade
    $url = PasswordlessLogin::forUser($user)->generate();

    $data['url'] = $generator->generate();
    $data['user'] = $user;

    Mail::to($user->email)->send(new UserLoginMail($data));
        
    return back();
}

Step 5:

Set following route in your web.php

Route::post('/user/login', [LoginController::class, 'sendLoginLink'])->name('userLogin');


Step 6:

Create one mailable. you can refer a doc if not familiar.  also, fire the following command for create a mailable

php artisan make:mail UserLoginMail

Step 7:

Create a Email UI as per your requirement.

Video tutorial available as well here 



April 02, 20212 minutesauthorShailesh Ladumor
post

Lots of developers have a question How do I create a global gitignore file? so, In this article, I show how to set up a global git ignore.

Reviewing pull requests, I often see contributors sneakily adding editor configuration to the repository’s .gitignore file. If everyone would commit their environment-specific .gitignore rules, we’d have a long list to maintain! My repository doesn’t care about your editor configuration. There’s a better solution to this: a personal, global .gitignore file for all your repositories. Here’s how you can set one up. create a .gitignore file for your global rules.

You need to set up your global core.excludesfile configuration file to point to this global ignore file. So, let's start step by step

Step1:

Create a file .gitignore on your profile C:\Users\{username} for example C:\Users\Shailesh

Step 2:

Now you can set a  .gitignore  path with a three-way. we need to tell to git this my global git ignore file. 

First Way:  Using Windows git bash

Let's open Windows git bash and fire the following command,

git config --global core.excludesFile '~/.gitignore'


Second Way:  Using Windows cmd

Let's open Windows cmd and fire the following command,

git config --global core.excludesFile "%USERPROFILE%\.gitignore"


Third Way:  Using Windows PowerShell

Let's open Windows PowerShell and fire the following command,

git config --global core.excludesFile "$Env:USERPROFILE\.gitignore"


 So, you can easily set the .gitignore global file. You can also see here video tutorial here as well. 




March 06, 20211 minuteauthorShailesh Ladumor
post

In our daily life, we are going through lots of packages, and some of us don't know how to build our own package into Laravel.

We are going to perform the core steps to create your own package in laravel. In this tutorial we are going to build zoom package, so we will perform steps related to it.

Setup Fresh Laravel Repo 

Setup fresh laravel repo, and then create directories within it. 

for e.g Create infyomlabs/zoom-api directory into root.


Now create src directory into zoom-api

Run Composer init Into src Directory

After hitting composer init it will ask some information from you, as you can see in below image I have entered some of information. you can just hit enter if you do not want to add other information.


Add your config file (Optional)

Create directory config into src directory and add your config.php file there from where you can manage your env variables. 


Add Service Provider

Create your service provider from where you can do lots of actions. like you can publish config/routes/ migrations files from there. here we are publishing the zoom config file. 


Add your class (Which contains all functions) 

Here we have added a Zoom class which will be contained all zoom functions. 

Update Composer.json 


Finally, Test it in your existing project

Put the following code to your main composer.json (in your project's root). and hit composer update

  "repositories": [
        {
            "type": "path",
            "url": "infyomlabs/zoom-api",
            "options": {
                "symlink": true
            }
        }
    ],
    "license": "MIT",
    "require": {
        "infyomlabs/zoom-api": "dev-develop"
    },


January 27, 20211 minuteauthorVishal Ribdiya
post

Today we are going to see how we can generate a data table with one of the most popular a stisla theme.

We can actually do that in minutes with the package that we Recently developed called stisla-templates.

Our team made a great effort into this package and developed it with a new feature. this template package has Jquery Datatable support. So, anyone can easily generate CRUD(scaffold) with a Data table. 

Let's see step by step, how we can do that.

Install Packages


Follow the installation steps given in our official documentation of Laravel InfyOm generator and stisla-templates if not installed.

Now, you have to perform the following steps.

composer require yajra/laravel-datatables-oracle:"~9.0"

this package handles the query and frontend stuff.

Register provider and facade on your `config/app.php` file.



Now clear your cache and regenerate it using the following command,

php artisan config:cache

We are done with installation and configuration.

Use Generate Scaffold with Datatable

Now I going to add an option  jqueryDT, at last, to use JQuery Datatables while generating scaffold. the command looks like

php artisan infyom:scaffold Post --jqueryDT

Enter all required inputs and generate scaffold of Post.
All views are created inside the posts directory in the resource. also, the `post.js` file created inside the js directory in assets that are located inside the resource.
Fire the following command for compile and publish the `post.js`

npm run dev

Now, datable is ready for use. you can watch the video tutorial here

January 24, 20211 minuteauthorShailesh Ladumor