GhazaliTajuddin.com

Another Kuantan Blogger

Technology

Laravel + VueJS: Cant call routers within Store.js

by Leave a Comment

As mention in Vue Router documentation, we can simply use this.$router.push(‘router-name’) to get to the other component.

For some reason, i have some issues to use it in my store.js.

One of the solution i found here, where i need to exports all declaration inside app.js to other instance, then import it in my store.js.

app.js

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

export {app}

store.js

// import the app instance
import {app} from './app'
.
.
.
//calling example
app.$router.push('route-name');

Reference:

 

Laravel + VueJS: Handling Exception In Vuex

by Leave a Comment

Example 1

a) Controller 

When using get() method, you can provide constraint that will return collection in array. 

If no object. This will return empty array []

public function search($search)
    {
        
        $group = Group::query($search)
        ->where('name', '=', $search) 
        ->get();

        return response()->json($group, 200);
}

b) Thus, in Store.js (Vuex). We can do like this.

actions : {
        
        checkGroupName : async (context, name) => {

                let { data } = await Axios.get('http://localhost:8888/test/public/api/groups/search/'+name);

                if(data.length === 0){
                
                    context.commit('setGroup',{id:0,name:""}); //set to data to null
                    context.commit('setGroupAvailable',false); //set group availability to false

                }else{

                    context.commit('setGroup',data[0]);
                    context.commit('setGroupAvailable',true);

                }
}
}

Example 2

a) Controller

If you are using first() or firstOfFail() it will retrieve the first results of the query. If not, it will throw an exception (Illuminate\Database\Eloquent\ModelNotFoundException)

public function search($search)
    {
        
        $group = Group::query($search)
        ->where('name', '=', $search) 
        ->first();

        return $group;

    }

b) Store.js

By using try .. catch you can captured any exception occurs during API request.

actions : {
        
        checkGroupName : async (context, name) => {
                
                try{
                
                let { data } = await Axios.get('http://localhost:8888/test/public/api/groups/search/'+name);

                console.log(data)
                
                context.commit('setGroup',data);
                context.commit('setGroupAvailable',true);

            } catch (err){
                
                context.commit('setGroup',{id:0,name:""}); //set to data to null
                context.commit('setGroupAvailable',false); //set group availability to false

            }
}
}

 

 

 

Laravel + VueJS + Vuetify: Installation

by Leave a Comment

Laravel secara default telah pun didatangkan dengan Vuejs. Anda boleh lihat dalam file package.json.

Jadi untuk mula menggunakannya. Pertama sekali sila pastikan anda telah install npm yang membantu anda compile semua asset bagi menguruskan semua js dependencies.

Berikut command install NPM.

npm install

Run command berikut untuk install Vuetify

npm install vuetify --save

package.json akan dikemaskini seperti berikut

Selepas install vuetify. Compile semua asset melalui command npm berikut. 

npm run watch

atau

npm run watch-poll

Command npm run watch ini akan sentiasa update sebarang perubahan yang dibuat pada code kita.

Remember, you should run the npm run dev command each time you change a Vue component. Or, you may run the npm run watch command to monitor and automatically recompile your components each time they are modified.

Buka resources/js/app.js update

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

Buka resources/sass/app.css update

@import 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons';

@import '~vuetify/dist/vuetify.min.css';

Edit main(cth home.blade.php) blade. Tambah pada header seperti berikut

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

Tambah pada sebelum close tag body.

<script src="{{ asset('js/app.js') }}"></script>

 

 

Rujukan

  • https://vuetifyjs.com/en/getting-started/quick-start
  • https://laravel.com/docs/5.7/frontend

Migrate:Refresh does not work after deleting / renaming migration

by Leave a Comment

If you just like me, accidently renaming the migration and then later realise something goes wrong or having some kind of migration error that really makes you want to jump out shouting hardly, this is might be a solution for you.

First just reset your migration.

php artisan migrate: reset

Then browse to your migration tables, suppose to be empty. BUT there will a record left that you can manually delete it.

Then try to migrate again. Hope it will settle your problem. Good luck!

Reference: https://github.com/laravel/framework/issues/2105

 

 

Laravel Passport: How to hide Client_Secret using GuzzleHttp

by Leave a Comment

Guzzle is a PHP HTTP client that makes it easy to send HTTP requests and trivial to integrate with web services. … Middleware system allows you to augment and compose client behavior.Apr 22, 2018

How GuzzleHttp helps?

The idea is to create an endpoint at our back end, that we can make a request to the backend endpoint that contain those secret information that we need to keep secret. This way we can avoid to embed / hard coded all the important information on our javascript request each time..

Install the package on our Laravel.

composer require guzzlehttp/guzzle

Make a route on our api. Let say AuthController

Route::post('/login','Auth\AuthController@login');

Create a controller route. 

php artisan make:controller Auth/AuthController

Paste this on our controller

public function login(Request $request)
    {
        $http = new \GuzzleHttp\Client;

        try{
            $response = $http->post('http://localhost:8888/test/public/oauth/token',[
                'form_params' => [
                    'grant_type' => 'password',
                    'client_id' => 2,
                    'client_secret' => 'Fi7uzcm31Luf3LTz5ZevBVL',
                    'username' => $request->username ,
                    'password' => $request->password ,
                ]
            ]);

                    return $response->getBody();

        } catch (\GuzzleHttp\Exception\BadResponseException $e){

            if($e->getCode()==400){
                return response()->json('Invalid Request. Please enter a username or a password', $e->getCode());
            }else if($e->getCode()==401){
                return response()->json('Your credential is incorrect. Please try again.', $e->getCode());
            }

        return response()->json('Something wrong on the server.',$e->getCode());
        
        }


    }

 

Promosi 2019 Udemy.com Hanya RM40.00++

by 1 Comment

Biasanya kalau kita nak belajar sesuatu di internet, search engine seperti Google boleh bantu kita mencari tutorial. Sekarang ini kita boleh guna Google Youtube pula untuk mencari video tutorial atau apa sahaja video yang kita mahu.

Bagi aku pulak, selain daripada rangkaian Google, aku juga guna perkhidmatan Udemy.com. Aku rasa ramai dah kenal Udemy.com ni. Udemy.com ni adalah sebuah website yang menawarkan pelbagai kursus secara atas talian (online) dengan harga yang murah dan berpatutan. Korang juga boleh download kursus yang korang beli itu ke handphone atau laptop korang jika perlu. 

Kelebihan kursus di Udemy.my pada aku:

  1. Promosi
    • Udemy kerap buat promosi. Terlalu kerap. Jangan beli dengan harga yang asal. Tunggu harga promosi.
  2. Kursus percuma
    • Haaa ada juga kursus percuma! Biasanya ada trainer yang baru akan buat kursus percuma bagi memperkenalkan perkhidmatan mereka dalam Udemy. Jadi tak rugi pun daftar di Udemy! Daftar pun percuma!
  3. Lifetime
    • Semua kursus yang dibeli adalah lifetime subscription. So bayar sekali sahaja, tengok sampai bila-bila.
  4. Accessible
    • Course online, boleh buka bila-bila masa dan dimana jua. Nak download pun boleh.
  5. Trainer
    • Ramai trainer bagus-bagus dalam Udemy ni. Mereka semua daripada pelbagai latarbelakang. Jadi cara mereka approach berbeza-beza. So kita boleh tengok dulu sample presentation mereka sebelum membeli.
  6. Content
    • Korang boleh mencari content yang spesifik mengikut keperluan. Setiap kursus trainer akan pecahkan dalam masa 5-10 minit mengikut topik. Jadi anda boleh view dari awal atau jump terus ke topik yang anda mahu.
  7. dan banyak lagi sebab nak subscribe…

PROMOSI 2019

So sebenarnya aku nak bgtau ni. Sempena tahun baru 2019, Udemy ada buat promosi harga besar-besaran. So boleh sign up dulu buka akaun secara percuma di Udemy dan lihat-lihat kursus apa yang korang perlukan. Klik image link dibawah atau key in maklumat berikut:

Start Date: 12/31/18
End Date: 01/10/19
Promo Code: AFFUDENY19