nitinjohnson

nitinjohnson

at Full Time Freelancer

Member Since 1 Year Ago

Ahmedabad

Experience Points
590
Total
Experience

4,410 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
0
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start-engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber-token Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer-token Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • lara-evanghelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

Level 1
590 XP
Oct
10
1 month ago
Activity icon

Replied to Using Jquery Plugins In Vue Components.

Thanks i will check

Activity icon

Started a new Conversation Using Jquery Plugins In Vue Components.

I want to use jquery and jquery-ui plugins in vue component. I have a Laravel website and I have purchased a template from themeforest but the main issue is all the plugins are jquery. I want to use these plugins inside vue component. For example the template has a custom datatable design. I want to use the same inside my vue component. I am new to vue js. Please tell me how to do so.

Laravel Blade File:

@section('breadcrumb')
  <div class="content-header-left col-md-9 col-12 mb-2">
    <div class="row breadcrumbs-top">
      <div class="col-12">
        <h2 class="content-header-title float-left mb-0">{{ $page_name }}</h2>
        <div class="breadcrumb-wrapper col-12">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('shophome') }}/dashboard">Home</a></li>
            <li class="breadcrumb-item">{{ $parent_page }}</li>
            <li class="breadcrumb-item active">{{ $page_name }}</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('content')
  <section>
    <div id="app">
      @if($original_page_name=='products')
        <product-page></product-page>
      @elseif($original_page_name=='commission')
        <commission-page></commission-page>
      @endif
    </div>
  </section>
@endsection

@section('pagecss')
  @if($original_page_name=='products')
  <link rel="stylesheet" type="text/css" href="{{ asset('public/frontend/shop/app-assets/vendors/css/tables/datatable/datatables.min.css') }}?v={{ time() }}">
  <link rel="stylesheet" type="text/css" href="{{ asset('public/frontend/shop/app-assets/css/pages/data-list-view.css') }}?v={{ time() }}">
  <style>
    .product_page_btn {
      padding:7px 10px;
      margin-right: 3px;
      border-radius: 3px;
      font-size: 13px;
    }
  </style>
  @endif
@endsection

@section('pagescripts')
  @if($original_page_name=='products')
    <!--<script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/datatables.min.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/pdfmake.min.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/vfs_fonts.js') }}?v={{ time() }}"></script>-->
    <!--<script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/datatables.min.js') }}?v={{ time() }}"></script>-->
    <!--<script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/buttons.html5.min.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/buttons.print.min.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/buttons.bootstrap.min.js') }}?v={{ time() }}"></script>-->
    <!--<script src="{{ asset('public/frontend/shop/app-assets/vendors/js/tables/datatable/datatables.bootstrap4.min.js') }}?v={{ time() }}"></script>-->
    <script src="{{ asset('public/js/productsapp.js') }}?v={{ time() }}"></script>
  @elseif($original_page_name=='commission')
    <script src="{{ asset('public/js/commission.js') }}?v={{ time() }}"></script>
  @endif
@endsection

Products Vue Component File

<template>
  <div class="card px-2">
    <div class="card-body">

      <!--Top Buttons-->
      <div class="mb-1" v-if="buttons_show">
        <div class="row">
          <div class="col-md-12">
            <button type="button" class="btn btn-primary product_page_btn waves-effect waves-light" v-on:click="{ buttons_show = !buttons_show, search_product_show = !search_product_show, manage_products_show = !manage_products_show }"><i class="fa fa-plus"></i> Add Product</button>
            <button type="button" class="btn btn-primary product_page_btn waves-effect waves-light"><i class="fa fa-cloud-upload"></i> Import Product</button>
            <button type="button" class="btn btn-primary product_page_btn waves-effect waves-light"><i class="fa fa-list-alt"></i> Product SKU Wise Report</button>
            <button type="button" class="btn btn-primary product_page_btn waves-effect waves-light"><i class="fa fa-cloud-download"></i> Download SKU Sheet</button>
            <button type="button" class="btn btn-primary product_page_btn waves-effect waves-light"><i class="fa fa-clipboard"></i> Download Product Format</button>
          </div>
        </div>
      </div>

      <!--Manage Products-->
      <section id="data-list-view" class="data-list-view-header manage_products" v-if="manage_products_show">
        <div class="action-btns d-none">
          <div class="btn-dropdown mr-1 mb-1">
            <div class="btn-group dropdown actions-dropodown">
              <button type="button" class="btn btn-white px-1 py-1 dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Actions
              </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Delete</a>
                <a class="dropdown-item" href="#">Archive</a>
                <a class="dropdown-item" href="#">Print</a>
                <a class="dropdown-item" href="#">Another Action</a>
              </div>
            </div>
          </div>
        </div>
        <!-- DataTable starts -->
        <div class="table-responsive">
            <vue-good-table
              mode="remote"
              @on-page-change="onPageChange"
              @on-sort-change="onSortChange"
              @on-column-filter="onColumnFilter"
              @on-per-page-change="onPerPageChange"
              :totalRows="totalRecords"
              :isLoading.sync="isLoading"
              :line-numbers="true"
              :pagination-options="{
                enabled: true,
              }"
              :rows="rows"
              :columns="columns"
              :line-numbers="true">
            </vue-good-table>
        </div>
        <!-- DataTable ends -->
      </section>

      <!--Search Products-->
      <div class="mb-2 search_product" v-if="search_product_show">
        <div class="mb-1">
          <div class="row">
            <div class="col-md-2">
              <h4 style="font-size: 1.20rem;">Search Product</h4>
            </div>
            <div class="col-md-10">
              <autocomplete></autocomplete>
            </div>
          </div>
        </div>
        <div class="mb-1">
          <div class="row">
            <div class="col-md-12">
              <h4 style="font-size: 1.20rem;">OR</h4>
            </div>
          </div>
        </div>
        <div class="mb-1">
          <div class="row">
            <div class="col-md-12">
              <p>
                Skip this Step. Move to <button type="button" class="btn btn-success product_page_btn"><i class="fa fa-plus"></i> Add New</button>
              </p>
            </div>
          </div>
        </div>
      </div>

      <!--Add Old Products-->
      <section id="data-list-view" class="data-list-view-header add_old_product d-none">
        <div class="action-btns d-none">
          <div class="btn-dropdown mr-1 mb-1">
            <div class="btn-group dropdown actions-dropodown">
              <button type="button" class="btn btn-white px-1 py-1 dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Actions
              </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Delete</a>
                <a class="dropdown-item" href="#">Archive</a>
                <a class="dropdown-item" href="#">Print</a>
                <a class="dropdown-item" href="#">Another Action</a>
              </div>
            </div>
          </div>
        </div>

        <!-- DataTable starts -->
        <div class="table-responsive">

        </div>
        <!-- DataTable ends -->

      </section>

      <!--Add Products-->
      <div class="mb-2 add_product" v-if="addproduct_show">

      </div>

    </div>
  </div>
</template>

<script>

import axios from 'axios'
import route from 'ziggy';
import { Ziggy } from '../../../ziggy';
import Autocomplete from './Autocomplete.vue';
import SellerProductsLoad from './SellerProductsLoad.vue';
import { VueGoodTable } from 'vue-good-table';

window.Ziggy = Ziggy;

export default {
  components: {
    Autocomplete,
    SellerProductsLoad,
    VueGoodTable
  },
  data() {
    return {
      isLoading: false,
      columns: [
        'sku',
        'product_name',
        'category',
        'selling_price',
        'is_sub_approved',
        'action'
      ],
      rows: [],
      totalRecords: 0,
      serverParams: {
      columnFilters: {
        },
        sort: {
          field: '',
          type: '',
        },
        page: 1,
        perPage: 10
      }
    }
  },
  mounted() {

  },
  methods: {

    updateParams(newProps) {
      this.serverParams = Object.assign({}, this.serverParams, newProps);
    },

    onPageChange(params) {
      this.updateParams({page: params.currentPage});
      this.loadItems();
    },

    onPerPageChange(params) {
      this.updateParams({perPage: params.currentPerPage});
      this.loadItems();
    },

    onSortChange(params) {
      this.updateParams({
        sort: [{
          type: params.sortType,
          field: this.columns[params.columnIndex].field,
        }],
      });
      this.loadItems();
    },

    onColumnFilter(params) {
      this.updateParams(params);
      this.loadItems();
    },
    loadItems() {
      getFromServer(this.serverParams).then(response => {
         this.totalRecords = response.totalRecords;
         this.rows = response.rows;
      });
    }


  }
}
</script>
Jul
15
4 months ago
Activity icon

Started a new Conversation Laravel Image Check Always Throws Status 401

Hi,

I am trying to save images from dropbox to my server. I have already done the code for that. I am also checking the HTTP status of the url before downloading the images with code. I am getting proper status but the issue is it always throws an error 401 even when i have put a condition to download images with status code 200 or 302. I am having the list of images in an excel file that i am importing with a package. I am using laravel Please help me.

Function to import images

        $product_type=$request->get('product_type');
        $category_id=$request->get('category_id');
        $category_level=$request->get('category_level');
        $filepath = $request->get('file_path');
        $total_rows = $request->get('total_rows');
        $start_index = $request->get('start_index');
        $row_counter_break = $request->get('row_counter_break');

        $data = Excel::load($filepath)->limit(false, ($start_index))->get();
        $dataArr = $data->toArray();
        $array = array_map('array_filter', $dataArr);
        $array = array_filter($array);

        if($start_index > $total_rows){
            return response()->json([
                'status' => 'complete',
                'product_type'=>$product_type,
                'category_id'=>$category_id,
                'category_level'=>$category_level,
                'file_path'=>$filepath,
                'total_rows'=>$total_rows,
                'start_index'=>0,
                'row_counter_break'=>$row_counter_break
            ]);
        } else {
            $rowCounter=0;            
            foreach($array as $value){
                $image_list=array();
                if(!empty($value['image1'])){
                    array_push($image_list,$value['image1']);
                }
                if(!empty($value['image2'])){
                    array_push($image_list,$value['image2']);
                }
                if(!empty($value['image3'])){
                    array_push($image_list,$value['image3']);
                }
                if(!empty($value['image4'])){
                    array_push($image_list,$value['image4']);
                }
                if(!empty($value['image5'])){
                    array_push($image_list,$value['image5']);
                }  
                
                foreach($image_list as $il){
                    if($rowCounter>=$row_counter_break)
                    break;  
                    
                    $status=self::CheckLinkStatus($il);
                    if($status==200){
                        if (strpos($il, "?dl=0") !== false) {
                            $image_url = str_replace("?dl=0","",$il);
                            $image_url = str_replace("www.dropbox.com","content.dropboxapi.com",$il);                            
                            $info = pathinfo($image_url);
                            $contents = file_get_contents($image_url,true);
                            $file =  $info['basename'];
                            file_put_contents(public_path('datauploads')."/".$file, $contents);
                        } else {                            
                            $img_status=self::CheckLinkStatus($il);                                
                            if($img_status!==404 && $img_status!==401){
                                $image_url = str_replace("www.dropbox.com","content.dropboxapi.com",$il); 
                                $info = pathinfo($image_url);
                                $contents = file_get_contents($image_url,true);
                                $file =  $info['basename'];
                                file_put_contents(public_path('datauploads')."/".$file, $contents);
                            }                                                   
                        }
                    }                                       
                } 

                $rowCounter++;
            }            

            return response()->json([
                'status' => 'success',
                'product_type'=>$product_type,
                'category_id'=>$category_id,
                'category_level'=>$category_level,
                'file_path'=>$filepath,
                'total_rows'=>$total_rows,
                'start_index'=>$start_index,
                'row_counter_break'=>$row_counter_break
            ]);
        }        
    }```

Function to Check image status
``` public static function CheckLinkStatus($image){
        $ch = curl_init($image);
        curl_setopt($ch, CURLOPT_NOBODY, true);
        curl_exec($ch);
        $retcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
        curl_close($ch);
        return $retcode;
    }```