Laravel Query Scope

In Laravel most of the time you want to get a conditional result by using where function, so if I have to append many where on many places in my code best way can be “Query scope”

Check this example

$active_booked = User::where('active', '=', 1)->where('is_booked', '=', 1)->get();

So in your model create query scope methods to short this scenario

<?php

  namespace App;

  class User extends Model
  {
    public function scopeActive($query)
    {
        return $query->where('active', '=', 1);
    }

    public function scopeBooked($query)
    {
        return $query->where('is_booked', '=', 1);
    }
  }
?>

In your controller call simply like this

$active_booked = User::active()->booked()->get();

Laravel Console – Laravel custom command

Artisan Console

Artisan is Laravel command line interface, which has lot of per-build commands, to see this list just type

php artisan list

at top you can see options which you can use with any command like –help option with any command like

php artisan migrate  --help

Laravel Custom Command Line

In addition to pre-build command Laravel has option to create your own commands, for this you have to run this command and the respective file will be created in “App\Console\Commands” directory

php artisan make:command HiCommand

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;

class HiCommand extends Command
{

    protected $signature = 'command:name';
    protected $description = 'Command description';

    public function __construct()
    {
        parent::__construct();
    }
    
    public function handle()
    {
        return 0;
    }
}

So there are few main things

1. Signature:- command:name let me we change this with say:hi
2. Description:- Let change this to “This is my test command.”
3. Construct Function
4. Handle Function

Now we will play with “handle” function and change return 0; to echo “hi from my”.PHP_EOL; and resulted file will look like this

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;

class HiCommand extends Command
{

    protected $signature = 'say:hi';
    protected $description = 'This is my test command.';

    public function __construct()
    {
        parent::__construct();
    }

    public function handle()
    {
        echo "hi from my own command".PHP_EOL;
    }
}

Run your command now

php artisan say:hi

output will be “hi from my own command”

Arguments in custom command

Now we want to add custom arguments in our command like php artisan say:hi Tahir, we can acheive this by changing signature argument will be in curly braces

protected $signature = 'say:hi {name}';

We can get this argument like this

$this->argument('name')

So our handle function will look like this now

public function handle()
{
   echo "hi ".$this->argument('name')." from my own command".PHP_EOL;
}

Run command “php artisan say:hi Tahir” and output will be

hi Tahir from my own command

Optional arguments in command

If we will run this command without argument it will throw and error so solution is just add a ? in arugment

protected $signature = 'say:hi {name?}';

How to learn Alpine.js

What is Alpine.js

Alpine.js is a responsive front-end framework developed by developer Caleb Porzio. Unlike Vue.js, React, and Angular that people are familiar with in the past, Alpine.js does not require you to make high-cost transformations to existing applications, nor does it have the concept of VDom. It can be directly added to the existing system and Use .

Quick study guide

Alpine.js is not used much in China, so most of the corresponding learning content is written in English, but the concepts involved in Alpine.js will not be as many as Vue, React, etc. You can learn it easily.

Recommended learning route

Alpine.js does not have so many concepts, so the learning route is also very simple, you only need to master the following contents.

1. Basic syntax and usage of Alpine.js;
2. The magic helper of Alpine.js; (not required)
3. Spruce, a state management tool for Alpines.js (not required)

Understanding the basic syntax allows you to develop your own applications using Alpine.js. The latter two can simplify your entire development workflow and improve your own development efficiency.

Recommended learning documents

1. Check official documents and learn basic grammar

To learn Alpine.js, the first thing you can’t do without is the official documentation. The official documentation of Alpine.js is on the project homepage

https://github.com/alpinejs/alpine

If your English is not good enough, I recommend you to look at the traditional Chinese version translated by developers in Taiwan. Although the grammar and words are not exactly the same, it is a good supplement for developers with poor English.

https://github.com/alpinejs/alpine/blob/master/README.zh-TW.md

In addition, domestic developers also translate the simplified Chinese version on their blogs , but they are not officially approved, so please pay attention to the version when you read it.

Specific grammatical level, I suggest you follow the following logic to learn

The first echelon, learn:

• x-data: teach you how to organize your Alpine.js code
• x-on: event binding
• x-if: logical processing
• x-for: list rendering
• x-bind: data binding
• x-model: Two-way data binding

These six syntaxes allow you to basically start using Alpine.js.

The second echelon, learn:

• x-show: Control whether to display
• x-spread: Bind Alpine.js object properties to Object
• x-text: text within the control element
• x-html: Html within the control element
• x-transition: control transition animation

These five syntaxes make your Alpine.js project more functional

The third echelon, learn:

• x-cloak: The initialization of the control component is complete
• x-ref: binding parent component object
• $el: Get the element
• $refs: Get the x-ref marked in the parent component object
• $event: event object
• $dispatch: trigger event
• $nextTick: next DOM update
• $watch: monitor data changes

The above-mentioned grammar allows you to use Alpine.js in more depth, but in many scenarios you may not use it, so don’t worry.

2. View the implementation of common logic, compare different

Hugo is a member of the Alpine.js development team. In addition to development, Hugo also provides a Playground on its website. You can see some common use cases of Alpine.js here, such as: data binding, for Loop, grab data, etc.

You can visit https://alpinejs.codewithhugo.com/ to view some cases prepared by Hugo, so as to quickly understand how the functions you are familiar with should be implemented in Alpine.js.

3. Practice Alpine.js online

After you understand some basic usage, you can start to open a web page and start practicing on your own.

There are two debugging environments that can be used online. You can practice based on them and see the effect directly.

• A practice environment with TailwindCSS embedded
• A practice environment with built-in Console console

As a tool, Alpine.js requires more practice to be familiar with its use. With the documents and cases seen earlier, you can now practice the use of Alpine.js in these two practice environments.

4. View the real project and learn about Alpine.js

A tool needs reference from real projects from testing to landing to real environment. And Awesome provides many such cases.

By understanding these projects and tools, you can see how others use Alpine.js and learn about the development of Alpine.js.

Summary of learning resources of Alpine.js

There are not many learning resources in Alpine.js, but there are some that are more suitable for domestic developers. I will also list them as follows:

Video tutorial

• Building AlpineJS : A course on Laracasts opened by Alpine.js developer Caleb Porzio, introduces how to build an Alpine.js from 0. This course will give you a better and faster understanding of Alpine.js.

personal blog

• Code With Hugo : Alpine.js core developer’s blog, will update some technical articles about Alpine.js
• Alpine.js one step at a time : There is a series of Alpine.js introductory tutorials written by Taiwan compatriots. There are 30 complete articles, so you can read them a little bit.

Mailing Lists

• Alpine.js Weekly : Alpine.js Weekly is maintained by Hugo, the core developer of Alpine.js. An email is sent every Friday to introduce the latest Alpine.js community resources. It is worth subscribing.

forum

• Github Discussions
• Discord

Some common problems

1. Alpine.js depends on Webpack / Does Alpine.js support Webpack?

Answer: No, Alpine.js can be used in webpack or not in Webpack. Even if it is built by webpack, Alpine.js will automatically bind objects for your convenience.

2. Alpine.js is a technical solution designed for front-end/back-end

Answer: Alpine.js is not a technical solution designed for a certain type of people. Although in my opinion, he is very friendly to the back-end because it can be used without front-end build tools such as webpack, but if you are a front-end and don’t like React’s JSX or Vue’s template, you can still choose Use Alpine.js.

3. What is the threshold for learning Alpine.js?

The learning of Alpine.js only needs to master some core grammar, and then you can officially start using it. Compared to Vue and React, I think the cost of learning is still lower. Vue has a complete tool chain, which eases the learning curve, but there are still many concepts that need to be learned, but the difficulty of getting started is low.

My own experience

In my opinion, Alpine.js is a powerful tool for back-end developers. His grammar is simple enough and does not need to be packaged, so it can be easily accessed in the system for back-end developers. At the same time, Alpine.js can be well combined with the traditional server-side rendering logic, using the server-side rendering content, using Alpine.js to control the content, so that the page construction can be completed well, and the project can be improved without too much complexity. At the same time, it improves the dynamic effect of the page and the difficulty of logic writing. It is a good tool for back-end developers.

For front-end developers, if you hate the need to build and package every time you write a project, then Alpine.js is also a good choice.

Magento2 Nginx to allow execute other php or wordpress in subdirectory

Firt of all you have to update the “nginx.conf.sample”,

You can find this file at magento root, so change

location ~ ^/(index|get|static|errors/report|errors/404|errors/503|health_check).php$

TO

location ~ ^/(index|get|static|errors/report|errors/404|errors/503|health_check|mycustomfile).php$

Here I want to run mycustomfile.php so I will place this file in “pub” directory.

After this you have to reload the nginx by runing this command on ssh
sudo nginx -s reload

Hope it will help you

Cutting text effect with CSS

As a web developer we all know that CSS is major key part of web and most of us know very well CSS, but here I am going to share some secrets of CSS which mostly we are not familiar or not using much.

mix-blend-mode

Most of us are using blend mode in photoshop usually, CSS also offer this property

h1 {
  background: #f06;
  color: #000;
  mix-blend-mode: multiply;
}

Here is the result, here you can see cutting text effect too, someone can say that we can acheive this by “opacity”, but with opacity it will dull the background and text and there will be no cutting text effect with CSS

 

Get a list of WordPress menus

Sometimes in theme or in widget we need to get menus dropdown, so user can select to show a menu

Here is a loop which you can run on options

$menus = get_terms('nav_menu');
foreach($menus as $menu){
  echo '<option value="'.$menu->term_id.'">'.$menu->name . '</option>';
} 

Stripe Plugin for WordPress using WP Boilerplate

As world wide web has using wordpress a lot to build sites, so wordpress plugin are most in demand.
Behind the paypal, Stripe is the payment method which people like to use for payment. Although Woocommerce has builtin support for Stripe but what is the solution if someone just want a form so anyone can pay using a simple form, may be a charitable organization want to collect donation.

So keeping this in mind I develop a plugin for WordPress Stripe payment which I have build using WordPress Plugin Boilerplate.
You can find source code on my github account, I would love if you want to contribute, want any change in it or even want to use on your site.

Plugin is based on Stripe Strong Customer Authentication API of V3, which is now standard for payment now.

You can visit IDLBridge our website for more to know about our work, IDLBridge mostly work with WordPress and Magento.

Magento Error – Invalid Form Key. Please refresh the page?

On local host I was facing this error of user account page,
http://localhost/magento/customer/account/create/

On stackoverflow most of the answers were to update max_local_vars value, but it did’t work for me.
So the solution worked for me was to set virtual host, on WAMP it is very easy now to set a virtual host, you can search to how to set virtualhost

http://magento.test/customer/account/create/

Was working perfect for me.

Hope it will help you.

Stripe PHP API with Strong Customer Authentication (SCA) and 3D Secure

From Sep 14, 2019 European customer online payments need secure Strong Customer Authentication (SCA) namely as 3D Secure payment, so transactions which don’t follow this authentication may declined by banks so definitely will not successful with Stripe Api.
If you are working with PHP that can be a difficult task, but let see what you have to set for this.

1. We have to use stripe js version 3, so first include this

Magento get country id in custom shipping module (cart and checkout page)