author-img

Shailesh Ladumor's Posts

Web Development Head

post

Recently, I have created a new package for Laravel Community. it's called Laravel PWA. first of all what is PWA? let me explain a bit more about PWA. PWA means progressive web application. PWA provides a facility to install your web application on mobile and desktop. you don't need to write lots of line code in native platform-specific code.

You can create a PWA site in a few minutes using Laravel PWA.

You can watch the video tutorial as well to install this package.

Step 1:

Install the package by the following command,

composer require ladumor/laravel-pwa

Step 2:

Add Service Provide into app.php config file in provider section. You can skip this step if you installed it in Laravel 6 and more.

Ladumor\LaravelPwa\PWAServiceProvider::class,

Step 3:

Add Facade to app.php config file in aliases section. You can skip this step if you installed it in Laravel 6 and more.

'LaravelPwa' => \Ladumor\LaravelPwa\LaravelPwa::class,

Step 4:

I think installation is done and no need to publish all the assets using the following command,

php artisan laravel-pwa:publish

Step 5:

This step is very important. you published all the assets in the previous step. now, you need to link all the assets in your main blade file. for ex app.blade.php

Add the following code in the root blade file in the header section.

<!-- PWA  -->
<meta name="theme-color" content="#6777ef"/>
<link rel="apple-touch-icon" href="{{ asset('logo.PNG') }}">
<link rel="manifest" href="{{ asset('/manifest.json') }}">

Add following code in root blade file before close the body,

<script src="{{ asset('/sw.js') }}"></script>
<script>
    if (!navigator.serviceWorker.controller) {
        navigator.serviceWorker.register("/sw.js").then(function (reg) {
            console.log("Service worker has been registered for scope: " + reg.scope);
        });
    }
</script>

You should watch this tutorial if you want to set it up manually instead of using this package.

October 08, 2021authorShailesh Ladumor
post

Generally, we are using a Swagger in Laravel. it will take time if we set up swagger manually. so, In this article, I going to show you very easy steps for setup in Laravel.

You can watch the following video tutorial as well.

Steps 1:

You should download these assets from here. unzip the folder and go to the public directory. you can found the swagger directory in the side public folder. let open the swagger directory and you can see the following files.

jquery-2.1.4.min.js style.css swagger-bundle.js swagger.yaml

If are you still confuse then visit this link for files.

now, Copy the swagger directory and put it in your laravel application on the same path.

Steps 2:

We need to load swagger with proper swagger UI. so, let navigate to resources/views on the downloaded source code project.

You can see the swagger directory inside the views directory. copy the swagger directory to your laravel application on the same path. I don't think you need to do anything in this view file. let's go to the next step.

Steps 3:

You need to update this swagger.yaml file. you should update the following details first. and then add APIs documentation in this file. Api document example given here. you can refer it.

info: description: LPT APis version: 1.0.0 title: LPT Frontend API's basePath: /api/

Steps 4:

In this step, you need to create a route for loading swagger docs. so, let's open the web.php file add the following few lines of code.

Route::get('/docs', function () { return view('swagger.index'); });

Now, run a command php artisan serve and open http://127.0.0.1:8000/docs or open a virtualHostDomain/docs if you have one.

You should watch this tutorial as well if you using InfyOm Generator

September 22, 2021authorShailesh Ladumor
post

Nowadays, people are hacking secure data systems, so will See the security testing criteria for reCAPTCHA forms.

reCAPTCHA is a technology that assesses the probability that the entity that uses your web code (page, app, portal, etc.) is a human and not a bot (or the other way around). Grabbing information of behavior (of a user or a bot) encapsulates it in the token that gets sent to your server. On your server, the token is being sent again to Google for returning the assessment on how probable it is that the token was generated by a human. Part of the response returned from Google to your server:

Let's See the points how to Test 🛠️

First, we validate from the frontend

on any reCAPTCHA from removing that div from inspect element and then trying to save there must be valid and records should not store on the backend as shown in the image.

2021-07-22-60f90c027ead1

Remove this div then save the form there should be a validation message for reCAPTCHA verification and the form should not be saved, if the form is submitted then the data were stored in the data table which was False to the system.

Now Let's see how we validate from the postman

First, add testing form URL on browser and apply Post method and on body add all fields which are added in form lets see on the image.

2021-07-22-60f90c12e0f33

Now add on the header at Key column CSRF token, X-Requested, cookie and add its perspective value as shown in the image.

CSRF token and XSRF-TOKEN will store in the cookie which will get from the front page from inspect element.

2021-07-22-60f90c2315082

Now, click on send request and validate the status should be false as shown in the image

2021-07-22-60f90c3081ca1

If the status changes to true, then the data stored in a table & will create a problem, and the reCAPTCHA form will validate false.

Hence, reCAPTCHA form Test, Hope this helps.

July 24, 20213 minutesauthorShailesh Ladumor
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 the 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 to a doc if not familiar. Also, fire the following command to create a mailable

php artisan make:mail UserLoginMail

Step 7: Create an 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 this to get this my global git to 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 the video tutorial here as well.

March 06, 20211 minuteauthorShailesh Ladumor
post

Recently, I've started working on one project where we need to set up a virtual host with HTTPS because I need to run that project with expose and Shopify in my local development machine. I've wamp 3.2.3 on my local machine.

I spent a lot of time setting it. so, I thought I should write one article for a step by step guide. So, I will show you in this article how to set up HTTPS for a local machine.

Step 1 - Install Wamp

Install wamp server if not installed in your local machine. you can download the latest version of the wamp server from here. wamp server is available in 32 bit and 64 bit. make sure you select the correct version of the wamp server based on your operating system (window)'s version.

Step 2 - Install OpenSSL

OpenSSL is an open-source command-line tool that is used to generate the SSL certificate and private key. OpenSSL is available in both versions 32 and 64 bit. download the latest version of OpenSSL from here.

2021-01-29-601401f28a12b

I hope you successfully installed OpenSSL on your machine. let's take the next step

Step 3 - Create a Private key

Open your terminal as an Administrator otherwise you will get a permission denied error. Also, you can provide permission to the OpenSSL directory and run the terminal in normal mode.

Now, let go to where we installed OpenSSL

cd C:\Program Files\OpenSSL-Win64\bin

Let's create a private key which is 2048 bits encryption. fire one by one the following two commands to create it.

openssl genrsa -aes256 -out private.key 2048

openssl rsa -in private.key -out private.key

2021-01-29-60140b3530e0b

Your private.key is successfully generated here C:\Program Files\OpenSSL-Win64\bin

Step 4 - Create an SSL Certificate

Let's create a certificate using the following command,

openssl req -new -x509 -nodes -sha1 -key private.key -out certificate.crt -days 36500

You need to enter a detail that looks like

2021-01-29-60140cd318bd9

You can verify here

2021-01-29-60140d37b3a9f

Step 5 - Move both Private Key and a Certificate

Open a directory D:\wamp64\bin\apache\apache2.4.46\conf (Based on where your wamp is installed) and create a key directory.

Now, move both files to the key directory.

Step 6 - Configure Your httpd.conf File

Open your D:\wamp64\bin\apache\apache2.4.46\conf\httpd.conf (the drive should be where your wamp is installed) and un-comment the following 3 lines one by one.

LoadModule ssl_module modules/mod_ssl.so
Include conf/extra/httpd-ssl.conf
LoadModule socache_shmcb_module modules/mod_socache_shmcb.so

Step 7 Configure Your httpd-ssl.conf File

Open your D:\wamp64\bin\apache\apache2.4.46\conf\extra\httpd-ssl.conf (the drive should be where your wamp is installed) and change the following lines.

DocumentRoot "${INSTALL_DIR}/www"
ServerName localhost:443
ServerAdmin admin@example.com
SSLCertificateKeyFile "${SRVROOT}/conf/key/private.key"
SSLCertificateFile "${SRVROOT}/conf/key/certificate.crt"

Make sure, these following all lines are set or not. if not, add it as well.

SSLSessionCache "shmcb:${SRVROOT}/logs/ssl_scache(512000)"
CustomLog "${SRVROOT}/logs/ssl_request.log" \
          "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"

Step 8 Configure a Virtual Host

Hope you have created a virtual host. if not, create a virtual host using the virtual host manager which is provided by wamp.

Open an D:\wamp64\bin\apache\apache2.4.46\conf\extra\httpd-vhosts.conf and update your virtual host

Change the port :80 to :443

add the following lines into the VirtualHost.

SSLEngine on
SSLCertificateFile "${SRVROOT}/conf/key/certificate.crt"
SSLCertificateKeyFile "${SRVROOT}/conf/key/private.key"

Now, the code of VirtualHost looks like,

Now, we are done. Let's restart a wamp server.

If you see a green WAMP icon everything should be right. If the icon is orange there is a problem with your syntax somewhere.

Open terminal and go to the D:\wamp64\bin\apache\apache2.4.46\bin and run httpd -t in the command prompt and if there are any syntax errors they will be listed.

if fine then open https://ladumor.test on the browser

January 30, 20213 minutesauthorShailesh Ladumor