zerogpm

zerogpm

Member Since 4 Years Ago

Experience Points
18,975
Total
Experience

1,025 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
208
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 4
18,975 XP
Oct
26
11 months ago
Activity icon

Replied to How To Manage Your Global Vue Component?

@goatshark

import SomeComponentfrom './SomeComponentr.vue';
components: {
            SomeComponent,    <------ES6 magic
        },

in your blade.php

<some-component></some-component>

Should be like this you don need "-" since vue will add "-" automatically

Activity icon

Replied to How To Manage Your Global Vue Component?

@wilk_randall Thanks for the reply. Do you mind giving me some code examples to show me what make it child of the component? I try to do the following. When I tried using Vue-cli I can simply do it with local component, So I don't need to register globally.

import Counter from './components/Counter.vue';
export default {
  components: {      
        appCounter: Counter
  }
}

But when it come to laravel, I cannot do that? why is that, or is there a way I can reginster components locally?

Activity icon

Started a new conversation How To Manage Your Global Vue Component?

whenever you add a new component, you will have to add that to app.js as the project grow, this app.js will grow so big. I am thinking to split those component code into other files. what is the best way to do that? Need some advices. Thank you


Vue.component('app', require('./components/addNumber/App'));
Vue.component('shopping', require('./components/shop/Shopping'));
Vue.component('sum', require('./components/addNumber/Sum'));
Vue.component('number', require('./components/addNumber/Number'));
Vue.component('add-number', require('./components/addNumber/AddNumber'));
Vue.component('products', require('./components/shop/products'));
Vue.component('product', require('./components/shop/product'));
Vue.component('mini-cart', require('./components/shop/MiniCart'));
Vue.component('sort', require('./components/shop/Sort'));

......

This code can go on.

Jan
07
1 year ago
Activity icon

Replied to Could Not Access Vue Data

<template>
    <form action="/purchases" method="POST">

        <input type="hidden" name="stripeToken" v-model="formData.stripeToken">
        <input type="hidden" name="stripeEmail" v-model="formData.stripeEmail">

        <button type="submit" @click.prevent="buy">Buy my Book</button>
    </form>
</template>

<script>
    export default {

      data() {
        return {
          formData: {
            stripeEmail: '',
            stripeToken: ''
          }
        };
      },

      created() {
        this.stripe = StripeCheckout.configure({
          key: keyhash.key,
          image: "https://stripe.com/img/documentation/checkout/marketplace.png",
          locale: "auto",
          token: function (token) {
            this.formData.stripeEmail = token.email;
            this.formData.stripeToken = token.id;
            console.log(this.formData);
            //axios.post('/purchases', this.$data).then(response => alert('Complete! Thanks for your payment!'));
          }
        });
      },

      methods: {
        buy() {
          this.stripe.open({
            name: 'My Book',
            description: 'Some details about the book.',
            zipCode: true,
            amount: 2500
          });
        }
      }

    }
</script>

I changed the code a little bit using formData, but I am still not getting data back

Activity icon

Started a new conversation Could Not Access Vue Data

I am trying to following Strip series. Here is my code


<template>
    <form action="/purchases" method="POST">

        <input type="hidden" name="stripeToken" v-model="stripeToken">
        <input type="hidden" name="stripeEmail" v-model="stripeEmail">

        <button type="submit" @click.prevent="buy">Buy my Book</button>
    </form>
</template>

<script>
    export default {

      data() {
        return {
          stripeEmail: '',
          stripeToken: ''
        };
      },

      created() {
        this.stripe = StripeCheckout.configure({
          key: keyhash.key,
          image: "https://stripe.com/img/documentation/checkout/marketplace.png",
          locale: "auto",
          token: function (token) {
            this.stripeEmail = token.email;
            this.stripeToken = token.id;
            console.log(this.$data);
            //axios.post('/purchases', this.$data).then(response => alert('Complete! Thanks for your payment!'));
          }
        });
      },

      methods: {
        buy() {
          this.stripe.open({
            name: 'My Book',
            description: 'Some details about the book.',
            zipCode: true,
            amount: 2500
          });
        }
      }

    }
</script>

when I console'log(this.data) it is undefined. What is the correct way to do it?

Nov
21
1 year ago
Activity icon

Replied to How To Alias Multiple Tables In Laravel Eloquent Queries?

I used MYSQL view instead of writing this complex query. @cre3z but I marked you as correct answer.

Nov
06
1 year ago
Activity icon

Replied to How To Alias Multiple Tables In Laravel Eloquent Queries?

@cre3z Thank you for replying. I have tried you query, I got different result. my Raw query return me 1370 results, your return 1080 results. I think it is very close, but is it because missing tblClientLocations cl1, tblClientLocations cl2 and join them accordingly? I am actually struggling to get those alias working.

Nov
02
1 year ago
Activity icon

Started a new conversation How To Alias Multiple Tables In Laravel Eloquent Queries?

I have the following Query

select * from tblClientLocations cl1, tblClientLocations cl2, tblAddresses, tblRegions, tblClients WHERE tblClients.intID = cl1.intClientID AND cl1.blnMainLocation = 1 AND cl1.blnDeleted = 0 AND cl1.intAddressID = tblAddresses.intID AND tblAddresses.intRegionID = tblRegions.intRegionID AND tblClients.blnDeleted = 0 AND cl2.intClientID = tblClients.intID AND cl2.intApproved = 1 AND cl2.blnDeleted = 0 AND cl2.blnOptInBulkEmails = 1 AND tblClients.intClientTypeID <> 17 AND tblClients.intStatusID IN (1,2) AND cl1.intApproved = 1

I want to translate them into ORM.

Here is what did for my first attempt.


return $query
            ->leftJoin('tblAddresses', 'tblClientLocations.intAddressID', '=', 'tblAddresses.intID')
            ->leftJoin('tblRegions', function($join) {
                $join->on('tblAddresses.intRegionID', '=', 'tblRegions.intRegionID')
                ->whereNotNull('tblRegions.intRegionID');
            })
            ->leftJoin('tblClients', function($join) {
                $join->on('tblClientLocations.intClientID', '=', 'tblClients.intID')
                ->where('tblClients.blnDeleted', 0)
                ->where('tblClients.intClientTypeID', '<>', 17)
                ->whereIn('tblClients.intStatusID', [1, 2]);
            })
            ->where([
                ['tblClientLocations.blnDeleted', 0],
                ['tblClientLocations.intApproved', 1],
                ['tblClientLocations.blnMainLocation', 1],
                ['tblClientLocations.blnOptInBulkEmails', 1]
            ])

I don't think this is working. What I want do is tblClientLocations cl1, tblClientLocations cl2 how do I alias multiple tables in ORM. Could anyone point me to the right direction? Thanks in advance.

Oct
16
1 year ago
Activity icon

Replied to Tutorial Guide : Installing PHP REDIS PHP7 Branch On Fresh Install Homestead PHP7 Branch

@masterpowers Does this work with laravel5.4? I could not find nardev/laravel-5.4-phpredis

Or There is another package works for 5.4 version. Thanks in advance.

Apr
06
2 years ago
Activity icon

Replied to Eloquent Non Aggregate Columns And Group By

I think I solved the problem Here is the answer


Transaction::select(DB::raw('sum(amount) as Sum, monthname(insert_date) as EachMonth'))
    ->groupBy(DB::raw(monthname(insert_date)'))
    ->whereRaw("year(insert_date) = 2017 AND balanceType ='Debit' ")
    ->get();

Activity icon

Replied to Eloquent Non Aggregate Columns And Group By

@johanesarnold Thanks for replying, the code you provide it is not efficient since you have to do multiple queries inside that loop. I am looking for DB layer solution rather than Application layer. I am sure you can do it with just one Query.

Apr
05
2 years ago
Activity icon

Started a new conversation Eloquent Non Aggregate Columns And Group By

Hi guys:

I have the following Table

Transcation Table


|  id  | amount | insert_date                    | balanceType |
|   1   | 200.00 | 2016-11-03 00:00:00     | Credit      |
|   2  | 300.00 | 2017-04-03 00:00:00   | Debit       |
|   3  | 100.23 | 2017-03-06 00:00:00     | Credit      |
|   4  | 201.20 | 2017-03-26 00:00:00     | Debit       |

I want to have the sum of amount for each month.

here is my Eloquent Query


Transaction::select(DB::raw('sum(amount) as barSum, monthname(insert_date) as barMonth'))
            ->groupBy(DB::raw('year(insert_date), month(insert_date)'))
            ->whereRaw("year(insert_date) = 2017 AND balanceType = 'Debit' ")
            ->get();

I then ran into non-aggregate columns problem. I can fix this by using ANY_VALUE(monthname(insert_date)). But this is not ideal since only mysql 5.7 support this function.

I search online and I should inner join the same table, but after serval attempts no luck at all. If anyone can point me to the right direction, that would be great.

Thank you

Mar
28
2 years ago
Activity icon

Replied to Login Loop Redirection


Route::group(['middleware' => 'auth'], function () {

    Route::get('/', 'Auth\[email protected]');

});

try this at your route file

Then this LoginController.php

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Illuminate\Http\Request;

class LoginController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Login Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles authenticating users for the application and
    | redirecting them to your home screen. The controller uses a trait
    | to conveniently provide its functionality to your applications.
    |
    */

    use AuthenticatesUsers {
        logout as performLogout;
    }

    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = '/home';

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest', ['except' => 'logout']);
    }

    public function logout(Request $request)
    {
        $this->performLogout($request);
        return redirect()->route('login');
    }
}

Mar
05
2 years ago
Activity icon

Replied to Match Against Query Builder

@DmytroOlefyrenko

so you mean I have do the following like this.

Product::WhereRaw("MATCH(productName) AGAINST('1992')")->get()

Thank you sir

Activity icon

Started a new conversation Match Against Query Builder

Hi guys I have the following Query

SELECT productionName FROM products WHERE MATCH(productName) AGAINST('1992')

How do I translate Match Against into Eloquent? I really don't want to write raw query. Thanks Guys

Feb
28
2 years ago
Activity icon

Replied to Login Loop Redirection

Thank you @Snapey . This is Laravel 5.2. Does this method work on 5.4 as well?

Activity icon

Started a new conversation Login Loop Redirection

Hi guys:

I want to set login page as default page. Here is my route

<?php

/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| Here is where you can register all of the routes for an application.
| It's a breeze. Simply tell Laravel the URIs it should respond to
| and give it the controller to call when that URI is requested.
|
*/

Route::get('/', 'Auth\[email protected]');

Route::get('/blog/{post}', [
    'uses' => '[email protected]',
    'as' => 'blog.show'
]);

Route::get('/category/{category}', [
    'uses' => '[email protected]',
    'as' => 'category'
]);

Route::get('/author/{author}', [
    'uses' => '[email protected]',
    'as' => 'author'
]);

Route::auth();

Route::get('/home', 'Backend\[email protected]');

Route::resource('/backend/blog', 'Backend\BlogController');

However, when I login to the system and try to access "/" route, I have this redirect loop. How do I correct that?

Jan
11
2 years ago
Activity icon

Started a new conversation Best Way To Pass Props With Network Call?

I have the following code

Topics.vue


<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Topics</div>

                    <div class="panel-body">
                        <app-pages :pagination="meta.pagination"></app-pages>
                        <app-topic v-for="topic in topics" :topic="topic"></app-topic>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Topic from './Topic.vue';

    export default {
        data() {
            return {
                topics:[],
                meta: {}
            }
        },
        methods: {
            getTopics(page) {
                this.$http.get('/topics?page=' + page).then((response) => {
                    this.topics = response.body.data;
                    this.meta = response.body.meta;
                })
            }
        },
        mounted() {
            this.getTopics(1);
        },
        components:{
            'app-topic':Topic,
        }
    }
</script>

Pages.vue


<template>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">«</span>
                </a>
            </li>
            <li
            ><a href="#">{{ test() }}</a>
            </li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">»</span>
                </a>
            </li>
        </ul>
    </nav>
</template>
<style>
</style>
<script>
    export default{
        props:[
            'pagination'
        ],
        methods: {
            test() {
                console.log(this.pagination);
            }
        }
    }
</script>


As you can see I first Fetching data from An API endpoint and then pass the meta data to page child. But since this is asynchronous network call. my data would be undefined at the call which would break my application. once the data come back network, it was too late for vue to process. My question is what is the best way to pass props once the data is back? Thank you!

Dec
13
2 years ago
Activity icon

Replied to Vue Resource Call

@Willem as @jekinney said Resource is already loaded in the bootstrap.js file in 5.3. Here is my code bootstrap.js


window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require('vue');
require('vue-resource');

/**
 * We'll register a HTTP interceptor to attach the "CSRF" header to each of
 * the outgoing requests issued by this application. The CSRF middleware
 * included with Laravel will automatically verify the header's value.
 */

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

window.VueRouter = require('vue-resource');

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from "laravel-echo"

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

This is my app.js


/**
 * First we will load all of this project's JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

import App from './components/App.vue';
import AppEx from './components/exec/AppEx.vue';
import DynamicApp from './components/dynamic/DynamicApp.vue';
import FormApp from './components/Form/FormApp.vue';
import Exec from './components/Form/Exec.vue';
import AppDirective from './components/Directive/AppDirective.vue';
import AppFilter from './components/Filter/AppFilters.vue';
import ExFilter from './components/Filter/ExFilters.vue';
import Animation from './components/Transition/Animation.vue';
import AppNumber from './components/Number/AppNumber.vue';
import RestApp from './components/Rest/RestApp.vue';
import RouteApp from './components/Route/route-app.vue';

import VueRouter from 'vue-router';
import { routes } from './components/Route/routes';

const router = new VueRouter({
  routes
});

Vue.component('app-ex', AppEx);

Vue.component('app', App);
Vue.component('dynamic-app', DynamicApp);
Vue.component('form-app', FormApp);
Vue.component('exec-app', Exec);
Vue.component('app-directive', AppDirective);
Vue.component('app-filters', AppFilter);
Vue.component('ex-filters', ExFilter);
Vue.component('app-animation', Animation);
Vue.component('app-number', AppNumber);
Vue.component('rest-app', RestApp);
Vue.component('route-app', RouteApp);


export const eventBus = new Vue({
  methods:{
    changeAge(age) {
      this.$emit('ageWasEdited', age);
    }
  }
});

export const serverBus = new Vue();

Vue.directive('highlight', {
  bind(el, binding, vnode) {
    //el.style.backgroundColor = 'green';
    //el.style.backgroundColor = binding.value;
    var delay = 0;

    if (binding.modifiers['delayed']) {
      delay = 3000;
    }
    setTimeout(() => {
      if (binding.arg == 'background') {
        el.style.backgroundColor = binding.value;
      } else {
        el.style.color = binding.value;
      }
    },delay);
  }
});

Vue.filter('to-lowercase', function(value) {
  return value.toLowerCase();
});

Vue.filter('append-length', (value) => {
  return value + ' (' + value.length + ')';
});

const app = new Vue({
  el: '#app',
  router
});

Here is my gulpfile.js

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application as well as publishing vendor resources.
 |
 */

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js');
});

This is the gulp log, it has no error

[01:03:00] Finished 'default' after 8.59 ms
[01:03:00] Starting 'watch'...
[01:03:00] Finished 'watch' after 20 ms
[01:03:10] 
[01:03:10] webpack is watching for changes

The only thing I can do is to reinstall a new fresh laravel. Then problem is gone, but I really want to know how to fix it, so i can deal with it next time happen

Dec
09
2 years ago
Activity icon

Started a new conversation Vue Resource Call

I am using Laravel 5.3 and homestead as my backend to make API call.

problem:

when I tried to use vue resource, I got the following error.

vue-resource.common.js?d39b:280 TypeError: Cannot read property 'replace' of null(…)error @ vue-resource.common.js?d39b:280(anonymous function) @ vue-resource.common.js?d39b:1356 RestApp.vue?b905:40 TypeError: Cannot read property 'replace' of null(…)

Then I tried another test with Jquery Ajax Call. It works.

Here is my following code. If anyone can point me to a right direction, that would be great!



<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <h1 class="text-center">HTTP</h1>
                <div class="form-group">
                    <label>Username</label>
                    <input type="text" class="form-control" v-model="user.username">
                </div>
                <div class="form-group">
                    <label>Mail</label>
                    <input type="text" class="form-control" v-model="user.email">
                </div>

                <button class="btn btn-primary" @click="submit">Submit</button>
            </div>
        </div>
        <hr>
    </div>
</template>

<script>


  export default {
    data() {
      return {
        user: {
          username : '',
          email :''
        }
      };
    },
    methods: {
      submit() {
        this.$http.get('/rest').then((response) => {
          // success callback
          console.log(response);
        }, (response) => {
          console.log(response);
          // error callback
        });
      }
    }
  }
</script>

Nov
21
2 years ago
Activity icon

Replied to Gulp Not Creating Any Files

@ejdelmonico Thank you for spotting my stupid error. I marked you as the best answer.

Activity icon

Started a new conversation Gulp Not Creating Any Files

I created a project for becoming familiar with build tools. My folder structure for this project looks like so:

my public folder


+ my-project
|-- + css
|----document
|------dropbox.css
|------dropbox.css.map
|----knowledgebase
|------knowledgebase.css
|------knowledgebase.map
|app.css
|app.css.map

my resources/assets/sass/ folder look like this


|-- + css
|----document
|------dropbox.scss
|----knowledgebase
|------knowledgebase.scss
|app.scss

when i tried to add the third event.scss and run gule no files is creating


|-- + css
|----document
|------dropbox.scss
|----knowledgebase
|------knowledgebase.scss
|----event
|-------event.scss
|app.scss

Here is my gulp files


var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix.sass('app.scss', './public/css/app.css')
       .sass('document/dropbox.scss', './public/css/document/dropbox.css')
       .sass('knowledgebase/knowledgebase.scss', './public/css/knowledgebase/knowledgebase.css')
       .sass('event/event.scss', '.public/css/event/event.css');
    mix.version([
        'public/css/app.css',
        'public/css/document/dropbox.css',
        'public/css/knowledgebase/knowledgebase.css'
    ]);
    mix.scripts([
        'app.js',
        './public/js/all.js'
    ]);
});


The output has no errors

Fetching Sass Source Files...
   - resources/assets/sass/event/event.scss


Saving To...
   - .public/css/event/event.css

[11:19:16] gulp-notify: [Laravel Elixir] Sass Compiled!
[11:19:16] Finished 'sass' after 32 ms
[11:19:16] Starting 'version'...


at the end my public/css/event folder has no event.css any ideas would be great.Thank you

Nov
07
2 years ago
Activity icon

Replied to A Graph Vue Component

@vitorarjol

I tried your suggestion, it is still showing only one chart. I have no idea why this is happening

app.js


/**
 * First we will load all of this project's JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the body of the page. From here, you may begin adding components to
 * the application, or feel free to tweak this setup for your needs.
 */

Vue.component('chart', require('./components/Chart.vue'));

const app = new Vue({
    el: '#app'
});


home.blade.php


@extends('layouts.app')

@section('content')
<div class="container">

    <div>
        <h1>Rocket League Wins Comparison</h1>
    </div>

    <chart
            :label="['Jan', 'Feb', 'Mar']"
            :values="[10,42,4]"
            type="doughnut"
            :color="['#FF6384','#36A2EB', '#FFCE56']"
            id="firstChart"
    ></chart>

    <chart
            :label="['May', 'April', 'Augest']"
            :values="[21,22,11]"
            type="doughnut"
            :color="['#FF6384','#36A2EB', '#FFCE56']"
            id="secondChart"
    ></chart>

</div>
@endsection

Chart.vue


<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Chart</div>

                    <div class="panel-body">
                        <canvas id="myChart" width="400" height="400"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Chart from 'chart.js';
    export default {

      props: {

        label: {},

        values: {},

        color : {

          default: 'rgba(220, 220, 220, 0.2)'

        },

        id : {},

        type : {

           default: 'line',

        }

      },

      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          },
      },

      mounted(){
        console.log(this.id);
        var data = {
            labels: this.label,
            datasets: [{
                label: '# Cash',
                data: this.values,
                backgroundColor: this.color,
                borderWidth: 1
            }]
        };

        var ctx = document.getElementById(this.id);

        var myChart = new Chart(ctx, {

            type: this.type,

            data: data,

            options: this.options

          });
      }
    }

</script>



Activity icon

Replied to A Graph Vue Component

@vitorarjol

Thank you for replying I tried to follow your suggestion make somet change

<canvas :id="myChart" width="400" height="400"></canvas>
props: {

        label: {},

    id: {},

        values: {},

        color : {

          default: 'rgba(220, 220, 220, 0.2)'

        },
var ctx = document.getElementById(this.id);

But aren't they the same result? sorry I m little new to Vue

Nov
06
2 years ago
Activity icon

Started a new conversation A Graph Vue Component

Following the Chart JS video here in laracasts. I am not able to create 2 charts. only one chart is shown. any help would be greatly appreciated. I follow the video by using the following, but it doesn't work

var context = this.$el.getContext('2d');

Here is the Homeble.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <chart
            :label="['Jan', 'Feb', 'Mar']"
            :values="[10,42,4]"
            type="doughnut"
            :color="['#FF6384','#36A2EB', '#FFCE56']"
    ></chart>

    <chart
            :label="['April', 'May', 'June']"
            :values="[100,420,99]"
            type="doughnut"
            :color="['#FF6384','#36A2EB', '#FFCE56']"
    ></chart>
</div>
@endsection

here is my template

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Chart</div>

                    <div class="panel-body">
                        <canvas id="myChart" width="400" height="400"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

Here is my chart.vue

import Chart from 'chart.js';
    export default {

      props: {

        label: {},

        values: {},

        color : {

          default: 'rgba(220, 220, 220, 0.2)'

        },

        type : {

           default: 'line',

        }

      },

      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          }
      },

      mounted(){

        var ctx = document.getElementById("myChart");

        var myChart = new Chart(ctx, {
          type: this.type,

          data: {
            labels: this.label,
            datasets: [{
              label: '# Cash',
              data: this.values,
              backgroundColor: this.color,
              borderWidth: 1
            }]
          },

          options: this.options

          });
        }
    }
Sep
16
4 years ago
Activity icon

Replied to Configure Laravel 5.1

Hi @phildawson I figured out I need to go Digital Ocean control panel to add A record name(api.mydomain.com). solely configure Ubuntu won't do the trick.

Activity icon

Replied to Configure Laravel 5.1

Hi @phildawson I get laravel 5 landing page. But I just pointing my PC to this ip address. If other people view api.domain.com it will not work because they didn't set their machine to point to this ip address. Any ideas? Thank you

Activity icon

Started a new conversation Cross-Origin Request Blocked

I try to use Angular Ajax the API, i got blocked. "Cross-Origin Request Blocked" Any setting at laravel to stop blocking?

Sep
14
4 years ago
Activity icon

Replied to Saving Database Problem

@jakeryansmith what @bestmomo suggest is right! I made a mistake by puting public $timestamps = false to my lesson.php model instead of parent class Model.Class

Thank you both of you guys being very helpful :)

Activity icon

Replied to Saving Database Problem

@jakeryansmith I don't want to have timestamps(). but laravel try to insert created_at and updated_at timestamps why?

@bestmomo I tried add the following as you suggested, but no luck. thanks for reply

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class lesson extends Model
{
    protected $table = 'lesson';
    protected $fillable = ['title', 'body','confirmed','Added_on'];
    public $timestamps = false;
}
Activity icon

Started a new conversation Saving Database Problem

Here is my lesson object

>>> $lesson->toArray();
=> [
     "title" => "test",
     "body" => "test",
     "confirmed" => 1,
     "Added_on" => "2015-09-14",
   ]

Here is when I tried to save the object I have the following error

Illuminate\Database\QueryException with message 'SQLSTATE[42S22]: Column not found: 1054 Unknown column 'updated_at' in 'field list' (SQL: insert into `lesson` (`title`, `body`, `confirmed`, `Added_on`, `updated_at`, `created_at`) values (test, test, 1, 2015-09-14, 2015-09-14 19:32:58, 2015-09-14 19:32:58))'

As far as I know I don't have updated_at and created_at Column at my database. Here is migration file

<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateLessionTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('lesson', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->text('body');
            $table->boolean('confirmed');
            $table->timestamp('Added_on');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('lesson');
    }
}

Here is my lesson model class

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class lesson extends Model
{
    protected $table = 'lesson';
    protected $fillable = ['title', 'body','confirmed','Added_on'];
}

why laravel try to insert `updated_at and created_at' in to my database?

Activity icon

Replied to Configure Laravel 5.1

@phildawson Thank you for your reply. I follow your steps, but something is not right. Here is what I did

say I own this domain (domain.com), In order for laravel 5 to work, I need to configure AllowOverride all for sub domain as well.

  1. I create api.conf as following
<VirtualHost *:80>
  ServerName api.domain.com
  DocumentRoot /var/www/html/api/public
  <Directory "/var/www/html/api/public">
    AllowOverride all
  </Directory>
</VirtualHost>
  1. then I run a2ensite api.conf
  2. service apache2 reload.

However, When I type in api.domain.com, it display this This webpage is not available ERR_NAME_NOT_RESOLVED

Something wrong along the way, any ideas or suggests? thank you

By the way I am using Digtial ocean.

Activity icon

Started a new conversation Configure Laravel 5.1

I tried to edit the /etc/apache2/apache2.conf as following

DocumentRoot "/var/www/html/learning-laravel-5/public"
<Directory "/var/www/html/learning-laravel-5/public">
        AllowOverride All
</Directory>

The problem is when i have another project name api my route doesn't work

So I am thinking to do this as following

DocumentRoot "/var/www/html/learning-laravel-5/public"
<Directory "/var/www/html/learning-laravel-5/public">
        AllowOverride All
</Directory>

DocumentRoot "/var/www/html/api/public"
<Directory "/var/www/html/api/public">
        AllowOverride All
</Directory>

I am not sure what is the correct way to configure. any suggestion? Thanks in advance!