Shailesh Ladumor's Posts

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 can also see the following video tutorial as well.

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

Step 1:

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.

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 and video for a step-by-step guide. So, I will show you in this article how to set up HTTPS for a local machine.

You can watch the following video tutorial or follow the article.

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.

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

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

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

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.

You can watch the following video tutorial or follow the article.

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 am going to add an option jqueryDT, at last, to use JQuery Datatables while generating scaffolds. the command looks like

php artisan infyom:scaffold Post --jqueryDT

Enter all required inputs and generate a scaffold of Post.

All views are created inside the posts directory in the resource. Also, the post.js file is 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, the data table is ready for use. you can watch the video tutorial here.

We have recently developed a site into the gatsby.

We have a blog site and hosted it on a different domain but now we want to move to one place at our main site. now, we have challenges for displaying dynamic blogs on the gatsby site.

Finally, I found that gatsby provides support to render dynamic blogs as static pages. when build is created that time fetches the blogs from the server and creates a static page for all the blogs.

Gatsby is a very good platform and manages such a kind of thing easily.

So, I will show you how to create static pages from the API response into the Gatsby site.

Here are the steps you need to follow correctly.

Steps 1

Create a one blog file where you want to load a blog in your design.

For an ex. I created a file blog/index.js inside the component directory and the code looks like this,

Steps 2

Open a file gatsby-node.js

Declare the const for the API URL at the beginning of the file.

const blogURL = 'http://blog-api.com/api/posts';

We need to create an instance of the node-fetch for fetching data from the API server.

const fetch = require(`node-fetch`);

Import the path for resolving the page while creating a static page.

const path = require('path');

See the example how to create a static page from APIs. code look's like,

exports.createPages = (async ({graphql, actions}) => {
    const blogs = await fetch(blogURL);
    blogs.data.forEach((blog) => {
        createPage({
            path: 'blog/' + blog.slug,
            component: path.resolve(`./src/components/blog/index.js`),
            context: {
                // Data passed to context is available
                // in page queries as GraphQL variables.
                slug: blog.slug,
                blog: blog,
            },
        })
    })

Now we are done, and you can access the blog page via slug.

We have recently developed a site into the gatsby. We want to add Google Analytics to the website.

So, this is the way we implemented Google Analytics in the Gatsby site.

Use Gatsby Google GTag Plugin

Gatsby has a plugin gatsby-plugin-google-gtag that be used to easily add Google Global Site Tag to your Gatsby site.

Install the package by running the following command:

npm i gatsby-plugin-google-gtag --save

Configuration

Once the installation is complete, you can now add this plugin to your gatsby-config.js:

Configure trackingIds and other options. Add this into the plugins array. Like,

module.exports = {
  // ...
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
              // You can add multiple tracking ids and a pageview event will be fired for all of them.
              trackingIds: [
                "GA-TRACKING_ID", // Google Analytics / GA
                "AW-CONVERSION_ID", // Google Ads / Adwords / AW
                "DC-FLOODIGHT_ID", // Marketing Platform advertising products (Display & Video 360, Search Ads 360, and Campaign Manager)
              ],
              // This object gets passed directly to the gtag config command
              // This config will be shared across all trackingIds
              gtagConfig: {
                optimize_id: "OPT_CONTAINER_ID",
                anonymize_ip: true,
                cookie_expires: 0,
              },
              // This object is used for configuration specific to this plugin
              pluginConfig: {
                // Puts tracking script in the head instead of the body
                head: false,
                // Setting this parameter is also optional
                respectDNT: true,
                // Avoids sending pageview hits from custom paths
                exclude: ["/preview/**", "/do-not-track/me/too/"],
              },
      },
    },
  ],
}

This plugin automatically sends a “pageview” event to all products given as “trackingIds'' on every Gatsby's route change.

If you want to call a custom event you have access to window.gtag where you can call an event for all products.

Check out this code.

typeof window !== "undefined" && window.gtag("event", "click", { ...data })

NOTE: This plugin only works in production mode! To test your Global Site Tag is installed and

You need to run the following command for firing events correctly.

gatsby build && gatsby serve

If you need to exclude any path from the tracking system, you can add one or more to this optional array.

We have recently developed a site into the gatsby. Basically, the contact us feature is common on all websites. and we are implementing Mailchimp because it's a very popular platform in the email market. So, I will show you how to set up a Mailchimp on the Gatsby site.

Using gatsby-source-mailchimp

Use your Mailchimp API key to download your campaigns into Gatsby’s GraphQL data layer! Install the package by running the following command: npm i gatsby-source-mailchimp --save. How to configure Once the installation is complete, you can now add this plugin to your gatsby-config.js, like so: Configure Mailchimp Key and add this {resolve: gatsby-source-mailchimp} into the plugins array. code looks like,

module.exports = {
  // ...
  plugins: [
    {
      resolve: 'gatsby-source-mailchimp',
      options: {
        // Avoid including your key directly in your file.
        // Instead, opt for adding them to .env files for extra
        // security ;)
        key: 'asd712jdas90122jdas90122jkadsd1-usXX',
        rootURL: 'https://usXX.api.mailchimp.com/3.0',
      },
    },
  ],
  // ...
}

This plugin was made out of a specific necessity, so it doesn't cover all of Mailchimp’s data sources, focusing only on campaigns.

This plugin provides a few options. you can refer here

Using .env variables to hide your key

If you don’t want to attach your API key to the repo, you can easily store it in .env files by doing the following:

Put this in your .env file

MAILCHIMP_KEY = 'asd712jdas90122jdas90122jkadsd1-usXX';

Put this in your gatsby-config.js file

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
});

module.exports = {
  // ...
  plugins: [
    {
      resolve: 'gatsby-source-mailchimp',
      options: {
        key: process.env.MAILCHIMP_KEY,
        rootURL: '[https://usXX.api.mailchimp.com/3.0',](https://usxx.api.mailchimp.com/3.0%27,)
        // ...
      },
    },
  ],
  // ...
};

We are adding a sitemap in our all site pages for making sure search engines (such as Google) can find and crawl them all.

So, I will show you how to set a sitemap on the Gatsby site.

Using gatsby-plugin-sitemap

To generate an XML sitemap, you will use the gatsby-plugin-sitemap package.

Install the package by running the following command: npm install gatsby-plugin-sitemap

How to configure

Once the installation is complete, you can now add this plugin to your gatsby-config.js, like so:

Configure siteUrl and add this {resolve: gatsby-plugin-sitemap} into the plugins array. code looks like

module.exports = {
  siteMetadata: {
    title: `InfyOm Technologies`,
    description: `InfyOm Technologies`,
    keyword: `InfyOm Technologies`,
    author: `@gatsbyjs`,
    siteUrl: `http://infyom.com`
  },
  flags: {
    PRESERVE_WEBPACK_CACHE: true,
  },
  plugins: [
    {resolve: `gatsby-plugin-sitemap`},
  ],
}

Above is the minimal configuration required to have it work. By default, the generated sitemap will include all of your site’s pages.

You can exclude a path using the exclude option. you need to configure its

• output (string) The file path and name. Defaults to /sitemap.xml.
• exclude (array of strings) An array of paths to exclude from the sitemap.

code looks like,

module.exports = {
  siteMetadata: {
    title: `InfyOm Technologies`,
    description: `InfyOm Technologies`,
    keyword: `InfyOm Technologies`,
    author: `@gatsbyjs`,
    siteUrl: `http://infyom.com`
  },
  flags: {
    PRESERVE_WEBPACK_CACHE: true,
  },
  plugins: [
    {
    resolve: `gatsby-plugin-sitemap`,
    options: {
      output: `/some-other-sitemap.xml`,
        exclude: [`/category/*`, `/path/to/page`],
        }
    },
  ],
}

NOTE: This plugin only generates an output when run in production mode! To test your sitemap, run: gatsby build && gatsby serve

Now we are done and open the sitemap using your domain. for ex. https://abc.com/sitemap.xml

We work on projects with the admin panel every day. In which we mostly use data tables and we need to delete the record from the data table without page refresh.

So, today I will show you how to extract a record using Ajax. It's very easy to integrate.

Let's take one example. I have a Category data table and I want to delete one category from the table without refreshing the page. Now, what am I doing for that? First of all, I add a class for the listen to a click event into the delete button and it says delete-btn.

See the following image for where I added a class.

I used SweetAlert for the confirmation popup. let add sweet alert's CSN into the index.blade.php.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

Let's declare routes of the delete record.

<script>let categoryUrl = '{{route('categories.index')}}'; </script>

Next steps, I'm going to listen to the click event of the delete button. one more thing does not forget to add the record id into the data attribute to the delete button. see the above image for it. I highlighted it with a yellow line.

So the general practices we use in Laravel is to write the following code to listen to a click event and delete a record,

$(document).on('click', '.delete-btn', function (event) {             
           const id = $(event.currentTarget).data('id');

  swal({ 
      title: 'Delete !',                     
      text: 'Are you sure you want to delete this Category" ?',                     
      type: 'warning',                    
      showCancelButton: true,                     
      closeOnConfirm: false,                     
      showLoaderOnConfirm: true,                     
      confirmButtonColor: '#5cb85c',                     
      cancelButtonColor: '#d33',                     
      cancelButtonText: 'No',                     
      confirmButtonText: 'Yes',                 },                 
          function () {                    
                   $.ajax({                 
                       url: categoryUrl + '/' + id,                 
                       type: 'DELETE',                 
                       DataType: 'json',                 
                       data:{"_token": "{{ csrf_token() }}"},                 
                       success: function(response){                     

                              swal({                                 
                                  title: 'Deleted!',                                 
                                  text: 'Category has been deleted.',                                 
                                  type: 'success',                                 
                                  timer: 2000,                             
                              });                     
  $('#categoryTbl').DataTable().ajax.reload(null, false);                 
              },                 
               error: function(error){                     
               swal({                                 
                   title: 'Error!',                                 
                   text: error.responseJSON.message,                                 
                   type: 'error',                                 
                   timer: 5000,                             
              })                     
            }             
        });                 
    });         
});

Now we are done with the front-end side and need to look into it backend side.

Let's declare the destroy method into the category Controller. I hope are you generating crud with InfyOm Laravel Generator. so, the Destroy method and routes are there. If not please create a route. if the destroy method is there then need to change the response of that method.

The destroy method code looks like,

 public function destroy($id)     { 
        $category = $this->categoryRepository->find($id);
        if (empty($category)) {
            Flash::error('Category not found');

            return $this->sendError('Category not found.');
        }

        $this->categoryRepository->delete($id);

        return $this->sendSuccess('Category deleted successfully.');
    }