HubertVanD

Member Since 8 Months Ago

Experience Points
23,170
Total
Experience

1,830 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
215
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start your 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-in-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 Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • evangelist 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.

  • Community Pillar

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

Level 5
23,170 XP
Jan
12
4 days ago
Activity icon

Replied to Cannot "get" Cached Data

Thanx for the advice: it solved the problem.

The Laravel documentation although clearly sates:

Cache::put('key', 'value', $seconds = 10);

And tinker does have access to the cache.

Kind regards,

HUbert

Jan
11
5 days ago
Activity icon

Started a new Conversation Cannot "get" Cached Data

It is the first time that I am using the cache in Laravel for an app. But I do not succeed in getting data out of teh cache.

My .env:

CACHE_DRIVER=file

The 2 methods in my controller:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Cache;

class LocationController extends Controller
{

    
    public function store(Request $request, $area_id, $location)
    {
        Cache::put('location', $location, $seconds = 36000);
        Cache::put('area', $area_id, $seconds = 36000);

        return [Cache::get('location')];
    }

    public function get(Request $request, $area_id)
    {

        $location = Cache::get('location');
        dd($location);

    }
}

When I use the store-method, the data seem to be stored in the cache: the return value is indeed the value to be stored in the cache. But when I use the get-method, dd($location) returns null. Also if I access the cache through php artisan tinker, I cannot find the data.

Any advice what I am doing wrong?

Kind reagrds,

Hubert

Jan
05
1 week ago
Activity icon

Replied to Problem Passing Collections To Vue Component

Clicked the wrong button. Sorry.

Jan
03
1 week ago
Activity icon

Replied to Problem Passing Collections To Vue Component

This was the cause of the error message! Thnx.

I must say that Vue eror messages are not always very helpfull.

Jan
02
2 weeks ago
Activity icon

Started a new Conversation Problem Passing Collections To Vue Component

I am building an application where I initially pass a collection of Areas to a vue component. Each Area contains a json encoded polygon with coordinates. The vue components renders the polygon on a (google) map. This works flawlessly. But then I want to add to each Area a number of Clients with their address information. If I do that, I get an error message from Vue:

Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': 'leijgraaf&quot;,&quot;pivot&quot;:{&quot;area_id&quot;:3,&quot;client_id&quot;:7,&quot;created_at&quot;:&quot;2021-01-01t21:17:14.000000z&quot;,&quot;updated_at&quot;:&quot;2021-01-01t21:17:14.000000z&quot;}}]}' is not a valid attribute name.

I can't find anything on this error message that helps me. I tried al kinds of variations in the encoding of the collection, but nothing works. Hope someone can give some suggestions.

The collection of Areas that is passed:

  Illuminate\Database\Eloquent\Collection {#4351
     all: [
       App\Models\Area {#4307
         id: 2,
         name: "Hasselderheide",
         polygon: "[{"lat":51.42734401458352,"lng":6.170142758003911},{"lat":51.42338365925515,"lng":6.169198620430669},{"lat":51.4206807872797,"lng":6.1736618162314505},{"lat":51.422922041443705,"lng":6.176204550377569},{"lat":51.42553781401708,"lng":6.176515686623296}]",
         created_at: "2021-01-01 15:42:42",
         updated_at: "2021-01-01 15:42:42",
         clients: Illuminate\Database\Eloquent\Collection {#4335
           all: [
             App\Models\Client {#4358
               id: 2,
               name: "Jaspers",
               pivot: Illuminate\Database\Eloquent\Relations\Pivot {#4354
                 area_id: 2,
                 client_id: 2,
                 created_at: "2021-01-01 21:06:18",
                 updated_at: "2021-01-01 21:06:18",
               },
             },
             App\Models\Client {#4359
               id: 3,
               name: "Jasperen",
               pivot: Illuminate\Database\Eloquent\Relations\Pivot {#4357
                 area_id: 2,
                 client_id: 3,
                 created_at: "2021-01-01 21:06:18",
                 updated_at: "2021-01-01 21:06:18",
               },
             },
           ],
         },
       },
       App\Models\Area {#4300
         id: 3,
         name: "Velden",
         polygon: "[{"lat":51.43030379856803,"lng":6.1642523369595414},{"lat":51.404931819567686,"lng":6.151377733688057},{"lat":51.40418222166233,"lng":6.176182802657784},{"lat":51.4246311190432,"lng":6.1903448662564164}]",
         created_at: "2021-01-01 15:43:06",
         updated_at: "2021-01-01 21:17:14",
         clients: Illuminate\Database\Eloquent\Collection {#4344
           all: [
             App\Models\Client {#4360
               id: 2,
               name: "Jaspers",
               pivot: Illuminate\Database\Eloquent\Relations\Pivot {#4336
                 area_id: 3,
                 client_id: 2,
                 created_at: "2021-01-01 21:17:14",
                 updated_at: "2021-01-01 21:17:14",
               },
             },
             App\Models\Client {#4361
               id: 3,
               name: "Jasperen",
               pivot: Illuminate\Database\Eloquent\Relations\Pivot {#4342
                 area_id: 3,
                 client_id: 3,
                 created_at: "2021-01-01 21:17:14",
                 updated_at: "2021-01-01 21:17:14",
               },
             },
             App\Models\Client {#4362
               id: 7,
               name: "De Leijgraaf",
               pivot: Illuminate\Database\Eloquent\Relations\Pivot {#4152
                 area_id: 3,
                 client_id: 7,
                 created_at: "2021-01-01 21:17:14",
                 updated_at: "2021-01-01 21:17:14",
               },
             },
           ],
         },
       },
     ],
   }

The method in the controller that generates the collection:

public function index()
    {
        
        $areas = Area::with('clients:id,name')->get();
        return view('admin.index', ['areas' => $areas]);
    }

The relevant code in the Blade view:

    @foreach($areas as $area)
    <div class="m-8 ">
        <h1 class="text-xl font-bold">{{ $area->name }}</h1>
        <edit-polygon area={{ $area->toJson() }}></edit-polygon>
    </div>
    @endforeach

If I don't use the "->toJson()", the error stays the same

Finally the edit-polygon component:

template>
  <div>
    <div class="flex-container">
      <gmap-map
        :center="reportedMapCenter"
        :zoom="13"
        ref="map"
        :options="mapOptions"
        class="map-container"
      >
        <gmap-polygon
          v-if="paths.length > 0"
          :paths="paths"
          :editable="editable"
          @paths_changed="updateEdited($event)"
          @rightclick="handleClickForDelete"
          :options="polygonOptions"
          ref="polygon"
        >
        </gmap-polygon>
<!--
        <gmap-cluster>
            <gmap-marker
                v-for="m in markers"
                :position="m.position"
                :key="index">
            </gmap-marker>
        </gmap-cluster> -->

      </gmap-map>
    </div>
    <div class="pt-2">
      <button
        v-if="editable"
        @click="savePath()"
        class="px-4 py-2 font-semibold bg-transparent border rounded hover:bg-blue text-blue-dark hover:text-blue hover:border-blue"
      >
        Save path
      </button>
      <button
        v-if="!editable"
        @click="toggleEdit()"
        class="px-4 py-2 font-semibold bg-transparent border rounded hover:bg-blue text-blue-dark hover:text-blue hover:border-blue"
      >
        Edit path
      </button>

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

<script>
// import Vue from "vue";
// import * as VueGoogleMaps from "gmap-vue";

// Vue.use(VueGoogleMaps, {
//   load: {
//     key: "AIzaSyCSPDTifDu_qeYo8VfU0aGhGDnWXtf8f60",
//     libraries: "places", // This is required if you use the Autocomplete plugin
//   },

//   installComponents: true,
// });

function closeLoop(path) {
  return path.concat(path.slice(0, 1));
}

export default {
  props: ["area"],

  data() {
    return {
      reportedMapCenter: {
        lat: 51.33,
        lng: 6.14,
      },
      markers: [
        {
          position: {
            lat: 51.4236,
            lng: 6.1709,
          },
        },
        {
          position: {
            lat: 51.4336,
            lng: 6.1709,
          },
        }],
      edited: null,
      mvcPaths: null,
      editable: false,
      id: null,
      paths: [],
      polygonOptions: {
        strokeColor: "#FF00AA",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
      },
      mapOptions: {
        zoomControl: true,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        rotateControl: false,
        fullscreenControl: true,
        disableDefaultUi: false,
        clickableIcons: false,
      },


    };
  },

  mounted() {
    this.paths = JSON.parse(JSON.parse(this.area).polygon);
    this.id = JSON.parse(this.area).id;
    // this.reportedMapcenter=this.polygonCenter();
    this.reportedMapCenter.lat = this.polygonCenter().lat;
    this.reportedMapCenter.lng = this.polygonCenter().lng;
  },

  watch: {
    polygonPaths: _.throttle(function (paths) {
      if (paths) {
        this.paths = paths.flat();
      }
    }, 1000),
  },

  computed: {
    polygonPaths: function () {
      if (!this.mvcPaths) return null;

      let paths = [];
      for (let i = 0; i < this.mvcPaths.getLength(); i++) {
        let path = [];
        for (let j = 0; j < this.mvcPaths.getAt(i).getLength(); j++) {
          let point = this.mvcPaths.getAt(i).getAt(j);
          path.push({ lat: point.lat(), lng: point.lng() });
        }
        paths.push(path);
      }

      return paths;
    },
  },

  methods: {
    mapCenter() {
      console.log(this.reportedMapCenter);
      return this.reportedMapcenter;
    },

    toggleEdit() {
      this.editable = true;
    },

    updateEdited: function (mvcPaths) {
      this.mvcPaths = mvcPaths;
    },

    addPath: function () {
      // obtain the bounds, so we can guess how big the polygon should be
      var bounds = this.$refs.map.$mapObject.getBounds();
      var northEast = bounds.getNorthEast();
      var southWest = bounds.getSouthWest();
      var center = bounds.getCenter();
      var degree = this.paths.length + 1;
      var f = Math.pow(0.66, degree);

      // Draw a triangle. Use f to control the size of the triangle.
      // i.e., every time we add a path, we reduce the size of the triangle
      var path = [
        {
          lng: center.lng(),
          lat: (1 - f) * center.lat() + f * northEast.lat(),
        },
        {
          lng: (1 - f) * center.lng() + f * southWest.lng(),
          lat: (1 - f) * center.lat() + f * southWest.lat(),
        },
        {
          lng: (1 - f) * center.lng() + f * northEast.lng(),
          lat: (1 - f) * center.lat() + f * southWest.lat(),
        },
      ];
      this.paths = path;
    },

    removePath: function () {
      this.paths = [];
      //   this.paths.splice(this.paths.length - 1, 1);
    },

    savePath() {
      axios
        .patch("/gebied/" + this.id, {
          id: this.id,
          polygon: JSON.stringify(this.paths),
        })
        .catch(function (error) {
          console.log(error);
        });
      this.editable = false;
    },

    handleClickForDelete($event) {
      if ($event.vertex) {
        this.$refs.polygon.$polygonObject
          .getPaths()
          .getAt($event.path)
          .removeAt($event.vertex);
      }
    },

    polygonCenter() {
      let top = 0;
      let bottom = 90;
      let left = 180;
      let right = 0;
      let center = {};

      for (let i = 0; i < this.paths.length; i++) {
        if (this.paths[i].lat > top) {
          top = this.paths[i].lat;
        }
        if (this.paths[i].lat < bottom) {
          bottom = this.paths[i].lat;
        }
        if (this.paths[i].lng > right) {
          right = this.paths[i].lng;
        }
        if (this.paths[i].lng < left) {
          left = this.paths[i].lng;
        }
      }

      center = {
        lat: (top + bottom) / 2,
        lng: (left + right) / 2,
      };

      return center;
    },
  },
};
</script>

Anyone suggestions? I do not have a lot of experience yet with passing clompex data to Vue.

Kind regards,

Hubert

Dec
31
2 weeks ago
Activity icon

Replied to Does Laravel Change Table Names By Itself??

I agree. I will read it, but for now the $table is a quick fix.

Activity icon

Replied to Does Laravel Change Table Names By Itself??

Although I thought I followed the documentation about many-to-many relationships, I now see that I didn't follow the naming conventions. I didn't read the piece about pivots. It looks complicated: I will study it at a later time.

Setting the $table proved to be a good fix though.

Thnx.

Hubert

Activity icon

Started a new Conversation Does Laravel Change Table Names By Itself??

I am building a project in Laravel 8.

I have a migration for a client_areas model that I use for a many-to-many relationship:

<?php

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

class CreateClientAreasTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('client_areas', function (Blueprint $table) {
            $table->unsignedBigInteger('clients_id')->constrained()->onDelete('cascade');
            $table->unsignedBigInteger('areas_id')->constrained()->onDelete('cascade');
            $table->timestamps();
        });
    }

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

My models: Client_Area.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Client_Area extends Model
{
    use HasFactory;

    protected $guarded = [];
}

Client.php

<?php

namespace App\Models;

use App\Models\Area;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Factories\HasFactory;

class Client extends Model
{
    use HasFactory;

    protected $guarded = [];


    public function areas()
    {
        return $this->belongsToMany(Area::class, 'client_areas', 'clients_id', 'areas_id');
    }
}

Area.php

<?php

namespace App\Models;

use App\Models\Area;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Factories\HasFactory;

class Client extends Model
{
    use HasFactory;

    protected $guarded = [];


    public function areas()
    {
        return $this->belongsToMany(Area::class, 'client_areas', 'clients_id', 'areas_id');
    }
}

The problem I run into is that when I call App\Models\Client_Area::all(); I get the error message

Base table or view not found: 1146 Table 'db_ijskar.client__areas' doesn't exist

It took me hours to find out that in the error message there is a double underscore in the table name. But I triplechecked my code and I cannot find that double underscore anywhere. Also the actual table in my database is called client_areas with a single underscore.

Can anyone give me advice what to do next?

Hubert

Dec
27
2 weeks ago
Activity icon

Awarded Best Reply on Uncaught ReferenceError: VueGoogleMaps Is Not Defined

Thanx for the reply again. Some answers:

  • My Laraval installation is fresh 8.0. Only changed the database data in .env. And installed Breeze.
  • The logfile is empty
  • vue2-google-maps forked into gmap-vue. I first used gmap-vue. Because of the error I changed to gmap-vue, but the error persisted. Then changed back.

Meanwhile I fixed the problem, although I do not understand exactly how!

  • I removed gmap-vue.
  • I selectively commented out lines in app.js to see what lines caused the problem. Uncommented them again
  • reinstalled gmap-vue
  • stared using gmap-vue again instead of vue2-google-maps. Then the error was gone!

Thanx anyway.

Regards,

Hubert

Activity icon

Replied to Uncaught ReferenceError: VueGoogleMaps Is Not Defined

Thanx for the reply again. Some answers:

  • My Laraval installation is fresh 8.0. Only changed the database data in .env. And installed Breeze.
  • The logfile is empty
  • vue2-google-maps forked into gmap-vue. I first used gmap-vue. Because of the error I changed to gmap-vue, but the error persisted. Then changed back.

Meanwhile I fixed the problem, although I do not understand exactly how!

  • I removed gmap-vue.
  • I selectively commented out lines in app.js to see what lines caused the problem. Uncommented them again
  • reinstalled gmap-vue
  • stared using gmap-vue again instead of vue2-google-maps. Then the error was gone!

Thanx anyway.

Regards,

Hubert

Dec
26
3 weeks ago
Activity icon

Replied to Uncaught ReferenceError: VueGoogleMaps Is Not Defined

I copied the code from another Laravel project where it worked flawlessly! So this is not the problem. Strangely enough that other project now also has the same problem.

One thing I changed is that I adapted Apache to use HTTPS. Could that be a problem?

Activity icon

Started a new Conversation Uncaught ReferenceError: VueGoogleMaps Is Not Defined

I ported some vue2-google-maps based components to a fresh Laravel project. But for some reason I keep getting this error and everything I tried didn't help. Hopefully someone has an advice. Most likely it is a very basic erro that I fail to see.

my app.js:

require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
load: {
    key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    libraries: "places", // This is required if you use the Autocomplete plugin
},

installComponents: true,
});

Vue.component('edit-polygon', require('./components/EditPolygon.vue').default);
Vue.component('create-area', require('./components/CreateArea.vue').default);
Vue.component('example-component', require('./components/ExampleComponent.vue').default);

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

My bladefile:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

       <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:[email protected];600;700&display=swap" rel="stylesheet">



        <style>
            body {
               font-family: 'Nunito';
            }
        </style>
        <script src="{{ asset('js/app.js') }}" defer></script>
    </head>
    <body class="antialiased">
         <div id="test1">
            <example-component></example-component>
        </div>

    </body>
</html>

My package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.2.1",
        "alpinejs": "^2.7.3",
        "autoprefixer": "^9.8.6",
        "axios": "^0.19",
        "cross-env": "^7.0.3",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "postcss-import": "^12.0.1",
        "resolve-url-loader": "^3.1.0",
        "tailwindcss": "npm:@tailwindcss/[email protected]^2.0.1",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "gmap-vue": "^1.5.0",
        "vue": "^2.6.12",
        "vue2-google-maps": "^0.10.7"
    }
}
Dec
14
1 month ago
Activity icon

Replied to 'cross-env' Is Not Recognized As An Internal Or External Command,

Thanx. I'll try it.

The worrying thing is of course that I have to do this anyhow. It already happened twice this week for the same Laravel project.

Any idea what I may be doing wrong?

Hubert

Dec
11
1 month ago
Activity icon

Replied to 'cross-env' Is Not Recognized As An Internal Or External Command,

Solved in meanwhile:

  • removes node_modules folder
  • removed package-lock.json
  • ran npm install
Activity icon

Started a new Conversation 'cross-env' Is Not Recognized As An Internal Or External Command,

I'm building a Laravel 8 project using Vue2. The initial problem was that Chrome dev tools did recognize Vue, but does not show the root component.

When I ran npm run dev in the root of my project, I got an error message:

> @ development C:\xampp\htdocs\api-frontend
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js

'cross-env' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Hubert\AppData\Roaming\npm-cache\_logs20-12-11T19_14_02_023Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Hubert\AppData\Roaming\npm-cache\_logs20-12-11T19_14_02_042Z-debug.log

Most likely it is an obvious error I make, but I don't see it!

Any suggestions?

Hubert

Nov
13
2 months ago
Activity icon

Replied to Debug Blade Variables During Rendering

Thanx. I could have thought about it myself!

Thnx.

Activity icon

Started a new Conversation Debug Blade Variables During Rendering

My project crashes during rendering of Blade files, most likely due to the value of Blade variables. Is there an easy way to debug this? E.g. by dumping the value of the variables in a way equivalent to dd() or dump() in php?

HUbert

Nov
12
2 months ago
Activity icon

Commented on Search Dropdown Autocomplete With Livewire

Many older games in IGDB don't have a complete record: all kinds of keys are missing. I could only fix this with a bunch of isset()'s in formatGameForView and show.blade.php.

Am I the only one with this problem?

Nov
09
2 months ago
Activity icon

Replied to Livewire Components Don't Work Asynchronous

Clear. I've managed to set up a virual host in Xampp.

Nov
07
2 months ago
Activity icon

Started a new Conversation Livewire Components Don't Work Asynchronous

I'm following the videogame aggregator training currently. U have 4 Livewire components on a page that each make an HTTP-request. This is supposed to happen asynchronously.

But when I put asleep(3) in the first component to make it slower, all other 3 seem to wait for the first to finish. Apparently they are not working asynchronously.

Am I doing something wrong?

Hubert

Nov
06
2 months ago
Activity icon

Commented on Improve Performance

When I put the sleep(3) in the first component, all other 3 seem to wait for the first to finish. Apparently they are not working asynchronously.

Am I doing something wrong?

Hubert

Oct
23
2 months ago
Activity icon

Replied to Laracasts.test/api/stats Not Found

Does that mean that I have to create the api-site myself locally?

Activity icon

Started a new Conversation Laracasts.test/api/stats Not Found

I'm currently following the video series about VUE and SPA. In episode seven the use axios calls to a remote api: laracasts.test/api/stats.

I however get the error: net::ERR_NAME_NOT_RESOLVED

It looks like laracast.test doesn't exist?

Or am I doing something wrong?

HUbert

Oct
20
2 months ago
Activity icon

Replied to Npm Error: Failed At The @ Development Script.

Meanwhile I found the error, and it was dumb: the path to tailwind.config.js was wrong!

Thanx anyway.

Activity icon

Started a new Conversation Npm Error: Failed At The @ Development Script.

I am starting a new Laravel project with Vue and Vue-router and Tailwind (the Laravel, Vue, and SPA videos form Laracasts). However I keep getting the npm error written in the title of this discussion.

My webpack.mix.js:

let mix = require('laravel-mix');

const tailwindcss = require('tailwindcss')

mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .options({ processCssUrls: false, postCss: [tailwindcss('./path/to/your/tailwind.config.js')], });

My app.scss:

@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities";

I tried a method described elsewhere in this form: removing node_modules and install npm again. But that didn't help.

Most likely I am making a stupid beginners error, but I can't find it.

Any suggestions?

Hubert

Oct
16
3 months ago
Activity icon

Commented on Refactoring To Custom Validation

In Laravel 7 only the second method works for me. And you have to import App\Rules\SpamFree.

Oct
12
3 months ago
Activity icon

Replied to How To Verify URI In Requests

Found it: A type : Middelware instead of Middleware!!

Thanx.

Hubert

Activity icon

Replied to How To Verify URI In Requests

[2020-10-12 20:24:40] local.ERROR: Method App\Http\Controllers\UserNotificationsController::middelware does not exist. {"exception":"[object] (BadMethodCallException(code: 0): Method App\Http\Controllers\UserNotificationsController::middelware does not exist. at C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Controller.php:68) [stacktrace] #0 C:\xampp\htdocs\forum-oude pc\app\Http\Controllers\UserNotificationsController.php(12): Illuminate\Routing\Controller->__call('middelware', Array) #1 [internal function]: App\Http\Controllers\UserNotificationsController->__construct() #2 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Container\Container.php(849): ReflectionClass->newInstanceArgs(Array) #3 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Container\Container.php(691): Illuminate\Container\Container->build('App\\Http\\Contro...') #4 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Application.php(796): Illuminate\Container\Container->resolve('App\\Http\\Contro...', Array, true) #5 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Container\Container.php(637): Illuminate\Foundation\Application->resolve('App\\Http\\Contro...', Array) #6 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Application.php(781): Illuminate\Container\Container->make('App\\Http\\Contro...', Array) #7 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Route.php(253): Illuminate\Foundation\Application->make('App\\Http\\Contro...') #8 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Route.php(970): Illuminate\Routing\Route->getController() #9 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Route.php(931): Illuminate\Routing\Route->controllerMiddleware() #10 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Router.php(702): Illuminate\Routing\Route->gatherMiddleware() #11 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Router.php(678): Illuminate\Routing\Router->gatherRouteMiddleware(Object(Illuminate\Routing\Route)) #12 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Router.php(662): Illuminate\Routing\Router->runRouteWithinStack(Object(Illuminate\Routing\Route), Object(Illuminate\Http\Request)) #13 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Router.php(628): Illuminate\Routing\Router->runRoute(Object(Illuminate\Http\Request), Object(Illuminate\Routing\Route)) #14 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Router.php(617): Illuminate\Routing\Router->dispatchToRoute(Object(Illuminate\Http\Request)) #15 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Kernel.php(165): Illuminate\Routing\Router->dispatch(Object(Illuminate\Http\Request)) #16 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(128): Illuminate\Foundation\Http\Kernel->Illuminate\Foundation\Http\{closure}(Object(Illuminate\Http\Request)) #17 C:\xampp\htdocs\forum-oude pc\vendor\barryvdh\laravel-debugbar\src\Middleware\InjectDebugbar.php(58): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #18 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Barryvdh\Debugbar\Middleware\InjectDebugbar->handle(Object(Illuminate\Http\Request), Object(Closure)) #19 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\TransformsRequest.php(21): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #20 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Illuminate\Foundation\Http\Middleware\TransformsRequest->handle(Object(Illuminate\Http\Request), Object(Closure)) #21 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\TransformsRequest.php(21): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #22 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Illuminate\Foundation\Http\Middleware\TransformsRequest->handle(Object(Illuminate\Http\Request), Object(Closure)) #23 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\ValidatePostSize.php(27): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #24 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Illuminate\Foundation\Http\Middleware\ValidatePostSize->handle(Object(Illuminate\Http\Request), Object(Closure)) #25 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode.php(63): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #26 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode->handle(Object(Illuminate\Http\Request), Object(Closure)) #27 C:\xampp\htdocs\forum-oude pc\vendor\fruitcake\laravel-cors\src\HandleCors.php(37): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #28 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Fruitcake\Cors\HandleCors->handle(Object(Illuminate\Http\Request), Object(Closure)) #29 C:\xampp\htdocs\forum-oude pc\vendor\fideloper\proxy\src\TrustProxies.php(57): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #30 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Fideloper\Proxy\TrustProxies->handle(Object(Illuminate\Http\Request), Object(Closure)) #31 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(103): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #32 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Kernel.php(140): Illuminate\Pipeline\Pipeline->then(Object(Closure)) #33 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Kernel.php(109): Illuminate\Foundation\Http\Kernel->sendRequestThroughRouter(Object(Illuminate\Http\Request)) #34 C:\xampp\htdocs\forum-oude pc\public\index.php(55): Illuminate\Foundation\Http\Kernel->handle(Object(Illuminate\Http\Request)) #35 {main} "}

Activity icon

Started a new Conversation How To Verify URI In Requests

I'm following the Forum-videos. In video 44 I am running into a problem that I am unable to solve:

In a test I make a getJson request:

    $this->assertCount(
        1,
        $this->getJson("/profiles/" . auth()->user()->name . "/notifications")->json()
    );

In web.php I have the route:

Route::get('/profiles/{user}/notifications', '[email protected]');

phpunit gives green light, but the index method in the controller is never called. Also later, when I use an axios call from a Vue component to the same route, I get a 500 error.

Most likely it is a stupid error I am making somewhere.

Is there a way to show the request that is received by the backend and that is used to select the right route in web.php? At least I an then check whether the right URI is coming in.

Kind regards,

Hubert

Sep
23
3 months ago
Activity icon

Commented on Object-Oriented Forms: Part 1

Spend hours to find this bug. Thanx.

Aug
30
4 months ago
Activity icon

Replied to Problem With Awesome Font

Ik heb de zaak inmiddels opgelost na een tip van iemand op stack-overflow:

Gewoon in de header van mijn layout blade file de regel link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" toevoegen.

Activity icon

Replied to Problem With Awesome Font

Version: where can I find that? I just installed last week, so I assume it is the latest version.

I am using only fa-heart and fa-copy. These are icons?

Aug
29
4 months ago
Activity icon

Replied to Problem With Awesome Font

Thnx for the quick reply.

I followed your instructions. Howver, I still get dummy icons: when using i get a kind of rectangle with F0C5 in it.

when using i get a kind of rectangle with F004 in it. Hubert

Activity icon

Started a new Conversation Problem With Awesome Font

I am trying to user an icon from Font Awesome in a Laravel project. I installed the font: npm install font-awesome --save Add to resources/sass/app.scss the line: @import "node_modules/font-awesome/scss/font-awesome.scss"; npm run dev

And on my page I used the font like: .

But the result is that only a kind of dummy icon (a kind of rectangle) is visible. I looked for solutions in stack-overflo and was give een reference to : https://stackoverflow.com/questions/43451509/how-to-install-font-awesome-in-laravel-mix.

The worrying thing is that many different solutions are given! I treid a few of them but nothing works.

I cannot understand it can be so hard to use the most used Icon font in teh most used php framwork!!

WHo can help. A emore detailled descriptiuon of my problem you can find here: https://stackoverflow.com/questions/63640648/awesome-font-icons-do-not-show-with-laravel-7.

Hubert

Aug
25
4 months ago
Activity icon

Replied to 405 Method Not Allowed With Axios

I found the problem and a workaround:

When a make a request from a form, I always have to use {{url(....)}} to get the url right. E.g. '/threads' should be changed to '{{url("/hreads')}}'.

When I (manually) replace the url in the axios.patch from '/replies/260' into 'http://localhost/public/replies/260' then I get a 200, as should be.

Can I use the url-function in the vue, sothat I always get ther right url in my request?

Hubert

Activity icon

Replied to 405 Method Not Allowed With Axios

General: Request URL: http://localhost/replies/260 Request Method: PATCH Status Code: 405 Method Not Allowed Remote Address: [::1]:80 Referrer Policy: no-referrer-when-downgrade

Response: HTTP/1.1 405 Method Not Allowed Date: Tue, 25 Aug 2020 18:24:59 GMT Server: Apache/2.4.38 (Win32) OpenSSL/1.1.1a PHP/7.3.2 Vary: accept-language,accept-charset Accept-Ranges: bytes Keep-Alive: timeout=5, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html; charset=utf-8 Content-Language: en

Request: PATCH /replies/260 HTTP/1.1 Host: localhost Connection: keep-alive Content-Length: 31 Pragma: no-cache Cache-Control: no-cache Accept: application/json, text/plain, / X-XSRF-TOKEN: eyJpdiI6InVvYjVnK2FUYXBsUEg5cnZZcUV5MFE9PSIsInZhbHVlIjoiM2pUM1I0RGVhbisyZkpOZDhFdURWN0pnWHNIcGxFUlBrVEVmekVzMVYyQld6V0JxZExXTVZOQ1JWdzdTOTZPVm1PRHgvUWNHS0k2NXR6YWVOWGNmaFlrb2phaTAwYjByOTdHdjR2SEdDbmVuK2ErK1FNSXgxemx1TUcvdGxTcWQiLCJtYWMiOiIxNDMzMGQ3NTliZTI3ZGQxYTE1ZTFkZTZjYTQ0NWYwYjEzZjdkNzZiNTQ1ZmVlODY4YjBlNTM3ZjM5ODRjNDNlIn0= X-Requested-With: XMLHttpRequest User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36 Content-Type: application/json;charset=UTF-8 Origin: http://localhost Sec-Fetch-Site: same-origin Sec-Fetch-Mode: cors Sec-Fetch-Dest: empty Referer: http://localhost/forum/public/threads/eveniet/68 Accept-Encoding: gzip, deflate, br Accept-Language: en-GB,en;q=0.9,en-US;q=0.8,nl;q=0.7,de-DE;q=0.6,de;q=0.5 Cookie: _ga=GA1.1.396230672.1518958878; hikashop_cart_id=4499; hikashop_cart_session_id=ipi7c560kkfcm5qbvu6nj54690; XSRF-TOKEN=eyJpdiI6InVvYjVnK2FUYXBsUEg5cnZZcUV5MFE9PSIsInZhbHVlIjoiM2pUM1I0RGVhbisyZkpOZDhFdURWN0pnWHNIcGxFUlBrVEVmekVzMVYyQld6V0JxZExXTVZOQ1JWdzdTOTZPVm1PRHgvUWNHS0k2NXR6YWVOWGNmaFlrb2phaTAwYjByOTdHdjR2SEdDbmVuK2ErK1FNSXgxemx1TUcvdGxTcWQiLCJtYWMiOiIxNDMzMGQ3NTliZTI3ZGQxYTE1ZTFkZTZjYTQ0NWYwYjEzZjdkNzZiNTQ1ZmVlODY4YjBlNTM3ZjM5ODRjNDNlIn0%3D; forum_session=eyJpdiI6InpHNlFTa2pES1kzRU8zVEYzWFRMRUE9PSIsInZhbHVlIjoiOERnMW5RdENRcEZ0T213MGI0ZmltNk5OYlBoTWljcmMweEptZ01ndm5ycExPM1VnUkNRRnRBNWp0M1ZwSlFjaWhGNXcvNUtpU3E2bTR1MytDUFNXNlc1K0RKSUJDMFV1VW5zY2xrOUJrUXBVU1hiMGFqa291SzdqR1MvajVyd04iLCJtYWMiOiJiZDk5YTMyOTgyNTg1MTU3YzQ3MTJjZjU4YjUxMzVlMWE0Y2U2ZGUyYTlkYjMyNDM1ZTdjMjZhOTY2YmFhY2NlIn0%3D {body: "ouyiouiooiuouyoyuouo"} body: "ouyiouiooiuouyoyuouo"

Aug
24
4 months ago
Activity icon

Replied to 405 Method Not Allowed With Axios

Thnx for your quick reply. The relevant information (I think):

In Reply.vue:

export default { props: ['attributes'], data() { return { editing: false, body: this.attributes.body }; }, methods: { update() { axios.patch('/replies/' + this.attributes.id, { body: this.body }); this.editing = false; flash('Updated!'); } } }

In web.php:

Route::patch('/replies/{reply}', '[email protected]');

In RepliesController:

public function update(Reply $reply)
{
    $this->authorize('update', $reply);
    $reply->update(['body' => request('body')]);
}

HUbert

Activity icon

Started a new Conversation 405 Method Not Allowed With Axios

I'm following the laracast on building a forum. Am currently in episode 32. I am using Laravel 7.

When I do everything as explained, and edit a reply, and then push the "update" button, I get the wrong message form the Chrome network inspector: "405 method not allowed".

Any suggestion what I am doing wrong?

Hubert