InfyOm Blog

latest-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,



June 18, 20211 minuteuserShailesh Ladumor

Posts

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

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 spend a lot of time for setup it. so, I thought I should write one article for step by step guide. So, I show you in this article how to setup 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 wampserver from here. wampserver is available in 32 bit and 64 bit. make sure you select the correct version of the wampserver 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.


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 on 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


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 looks like


You can verify here 

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 all 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 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 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
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
post
While developing complex applications, sometimes we have to validate fields and data in a totally customized way, at that time you can use laravel's custom validations rules functionality. 

In this tutorial, we are going to create our own custom validation rule to compare UUID. In our case, I have to check the UUID which is actually a binary string, that exists on DB or not.
Laravel doesn't provide any rule to compare that binary UUID string, so we will create our own validation rule. 

So let's create our custom validation rule::

Generate Custom Validation Class

So here we have created new class with named UuidExists into App\Rules

namespace App\Rules;
use Illuminate\Contracts\Validation\Rule;
use Ramsey\Uuid\Uuid;
class UuidExists implements Rule
{
   
    protected $table;
    protected $column;

    public function __construct($table, $column)
    {
        $this->table = $table;
        $this->column = $column;
    }
    public function passes($attribute, $value)
    {
        $value = Uuid::fromString(strtolower($value))->getBytes();
        return \DB::table($this->table)->where($this->column, $value)->exists();
    }
    public function message()
    {
        return 'The validation error message.';
    }
}


Add Rule to AppService Provider

Add your rule to AppServiceProvider.php into boot() method. here I have to give the named uuid_exists to my custom rule. you can give your own name whatever you want. 

\Validator::extend('uuid_exists', function ($attribute, $value, $parameters, $validator) {
  list($table, $column) = $parameters;
  return (new UuidExists($table, $column))->passes($attribute, $value);
});

How to use custom Rule ?

You can use your custom rule as follows. here we have using required and uuid_exists rule, where we are passing attribute and values to our custom rule, which will be used to passes($attribute, $value) function.

'tenant_id' => ['required', 'uuid_exists:tenant_id,uuid']

Keep connected to us for more interesting posts about Laravel.


January 21, 20211 minuteauthorVishal Ribdiya
post

In the last blog- https://infyom.com/blog/balanced-scorecard-strategic-management-system-2  we have discussed two perspectives namely Financial Perspective and Internal Process perspective out of four perspectives of BSC. let's look at the remaining two perspectives.


Customer Perspective


We all know that the 'Customer is the king of market'  and that's why we need to ensure that we have satisfied customer group in market. 

Each organization serves a specific need in the market and this is done with a target group in mind. There are many points to focus like the Quality, Price, Service, and acceptable Margins on the products and/or services.

The organization always try to meet customers' expectation in the market and that's why any organization need to keep eyes on the market and ready to adapt changes quickly.


The existence of alternatives( competitors ) has a huge influence on customers' expectations and we need to focus on overall market trends to build satisfied buyers in the market.


This perspective answer the question:

"How attractive should we appear to our customers?"


In short we need to focus on three points-

  1. Target Group in Market
  2.  Expectation of the Customers
  3.  Our Competitors 

after focusing on these points definitely, we will able to lure maximum potential customers in the market.


Learning and Growth Perspective


In today's comitative era, if we are not ready/capable to learn something new then it's next to impossible to survive in the market as 'nothing is constant only the change is constant ' 

 Here the only knowledge is not important but advancing knowledge plays a vital role.

The organization's learning ability and innovation indicated whether an organization is capable of continuous improvement and growth in a dynamic environment or not. The dynamic environment subject to change on daily basis due to new laws, economical changes, technological changes, or even increasing competition.


This perspective answer the questions:

"How can we sustain our ability to achieve our chosen strategy ?"  


To know more about the BSC please read my upcoming weekly Blog.














January 19, 20212 minutesauthorMariyam Bemat
post

Here we will learn how to send real-time notifications using Pusher + Laravel.

First of all, you need to create an account in the Pusher and get API keys from there.

Setting up your Laravel application

Now we need to install Pusher SDK, you can install it by the composer using the below command,

composer require pusher/pusher-php-server

After the composer is done, we will need to configure Laravel to use Pusher as its broadcast driver, update the below variables in the .env file,

PUSHER_APP_ID=123456
BROADCAST_DRIVER=pusher

// Get the API Keys from your pusher dashboard

PUSHER_APP_ID=XXXXX
PUSHER_APP_KEY=XXXXXXX
PUSHER_APP_SECRET=XXXXXXX

Open config/app.phpand uncomment the "App\Providers\BroadcastServiceProvider::class".

Now we need an event that will broadcast to the pusher driver. Let's create a NotificationEvent.

php artisan make:event NotificationEvent

This command will create a below file

namespace App\Events;
use Illuminate\Queue\SerializesModels;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class NotificationEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $username;
    public $message;
    public function __construct($username)
    {
        $this->username = $username;
        $this->message  = "{$username} send you a notification";
    }
    public function broadcastOn()
    {
        //it is a broadcasting channel you need to add this route in channels.php file
        return ['notification-send'];
    }
}

Add broadcasting route in channels.php file

Broadcast::channel('notification-send', function ($user) {
    return true;
}); 

Cache Event at Javascript Side

// Initiate the Pusher JS library

var pusher = new Pusher('YOUR_API_KEY', {
    encrypted: true
});

// Subscribe to the channel we used in our Laravel Event

var channel = pusher.subscribe('notification-send');
channel.bind('App\\Events\\NotificationEvent', function(data) {
    // this is called when the event notification is received...
});

Testing and Setup

Using the below route we can send a notification.

Route::get('test', function () {
    event(new App\Events\NotificationEvent('Monika'));
    return "Event has been sent!";
});
January 16, 20211 minuteauthorMonika Vaghasiya