author-img

Shailesh Ladumor's Posts

Web Development Head

post
We are recently developed a site into the gatsby. basically contact us feature is common in all website.
and we are implementing Mailchimp because it's a very popular platform in email market.

So, I will show you how to setup a Mailchimp in 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',
      },
    },
  ],
  // ...
}
```

Above is the minimal configuration required to have it work. By default,
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 are provide 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:

```
// In your .env file
MAILCHIMP_KEY = 'asd712jdas90122jdas90122jkadsd1-usXX';
```

```
// 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',
        // ...
      },
    },
  ],
  // ...
};
```


October 31, 20201 minuteauthorShailesh Ladumor
post
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.

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 it

  • 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 sitemap using your domain. for ex. https://xxx.com/sitemap.xml










September 28, 20201 minuteauthorShailesh Ladumor
post
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 take one example. I have a Category data table and I want to delete one category from the table without refresh 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's 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 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 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 generate 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.');
    }
Now we are done. the video tutorial also available here

August 19, 20202 minutesauthorShailesh Ladumor
post
The OneSingnal is the market leader in push notification providers. It provides the mobile + web push, email & in-app messages and easy way to send notifications. OneSignal provides an officially core PHP APIs but not Laravel package. We are using OneSignal in many projects and write a bunch of line code in all projects where we needed OneSingnal.

One day I had an Idea in my mind why I should not write a Laravel wrapper for OneSignal?. Finally, I wrote the shailesh-ladumor/one-signal Laravel Wrapper for it. Using this package, we can write neat & clean code and just a few lines of code.

OneSignal add this package in his docs here.. and watch the video tutorial  here

This package also works with the previous Laravel version.

Today we are going to see how we can use Laravel OneSignal Wrapper in Laravel. Let's see step by step, how we can do that.

Install Packages

Install shailesh-ladumor/one-signal by the following command,

composer require ladumor/one-signal
Publish the config file

Run the following command to publish config file,

php artisan vendor:publish --provider="Ladumor\OneSignal\OneSignalServiceProvider"
Add Provider

Add the provider to your config/app.php into provider section if using lower version of Laravel,

Ladumor\OneSignal\OneSignalServiceProvider::class,
Add Facade

Add the Facade to your config/app.php into aliases section,

'OneSignal' => \Ladumor\OneSignal\OneSignal::class,
configure a .env file with following keys

ONE_SIGNAL_APP_ID=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
ONE_SIGNAL_AUTHORIZE=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
X
ONE_SIGNAL_AUTH_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
ONE_SIGNAL_AUTH_KEY is optional if you do not want to create an app. I hope you are familiar with the OneSignal Platform and know how to get APP_ID and AUTHORIZE. If not, you should see the below image for how to get it.

So, we are done. let's check how to send push notifications.

Checkout this code to send a push notification.

use Ladumor\OneSignal\OneSignal;
$fields['include_player_ids'] = ['xxxxxxxx-xxxx-xxx-xxxx-yyyyy']
$message = 'hey!! This is a test push.!'
OneSignal::sendPush($fields, $message);
Video tutorial also available here

July 02, 20202 minutesauthorShailesh Ladumor