Our Black Friday sale is now live! All individual subscriptions are 50% OFF. This week only!

raheelkhan

raheelkhan

Member Since 1 Year Ago

Experience Points
1,580
Total
Experience

3,420 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
10
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.

Level 1
1,580 XP
Oct
28
3 weeks ago
Activity icon

Replied to Submit Data Post Axios Using Specific Format

axios.post('/owner', {
	user
})
.then((response) => {
  console.log(response);
}, (error) => {
  console.log(error);
});

or another option is, you can send the data directly and process it to the format on the server-side

axios.post('/owner', {
	name: this.UserData.name,
            lastname: this.UserData.surname,
            gender: this.UserData.gender,
            dob: this.UserData.birthDate
})
.then((response) => {
  console.log(response);
}, (error) => {
  console.log(error);
});


// or this way
axios.post('/owner', {
	data:{
            name: this.UserData.name,
            lastname: this.UserData.surname,
            gender: this.UserData.gender,
            dob: this.UserData.birthDate
          }
})
.then((response) => {
  console.log(response);
}, (error) => {
  console.log(error);
});

Activity icon

Replied to Submit Data Post Axios Using Specific Format

which format do you want?

{"_data":{"name":"cvc","lastname":"cv","gender":"Male","dob":"2020-10-27"}}

or this one

like this {"data":{"name":"cvc","lastname":"cv","gender":"Male","dob":"2020-10-27"}}

this make sure you make your object that way

const user = {
          _data:{
            name: this.UserData.name,
            lastname: this.UserData.surname,
            gender: this.UserData.gender,
            dob: this.UserData.birthDate
          }
      }

// or this

const user = {
          data:{
            name: this.UserData.name,
            lastname: this.UserData.surname,
            gender: this.UserData.gender,
            dob: this.UserData.birthDate
          }
      }
Activity icon

Replied to Submit Data Post Axios Using Specific Format

in your route do this and let us know the response


Route::post('owner', function(){
	return	request()->all();
});
Activity icon

Replied to Submit Data Post Axios Using Specific Format

Are you sure you have set the CSRF token?

Oct
27
3 weeks ago
Activity icon

Replied to Blog

@sinnbeck I would love to give this package a try in upcoming projects.

Activity icon

Replied to Blog

@sinnbeck is senior, he would suggest something more precise but If I was starting something similar I would explicitly ask the user to upload "featured-image". Sometimes we don't want the feature-image to appear in text or blog post.

As per your need right now try this;

$doc = new DOMDocument();
$doc->loadHTML($html);
$elements = $doc->getElementsByTagName('img');

// you need this, it will return src URL of image
$image = $elements[0]->getAttribute('src') ;


// to print all images, use foreach
foreach($elements as $element) {
    echo $element->getAttribute('src') . "\n";
}

UPDATE: I read your reply after my comment but you can remove all the images from your text like;

    $html = "your all html <img src=\"test.png\"/> with images goes here.";
    $html_without_images  = preg_replace("/<img[^>]+\>/i", "", $html); 
    echo $html_without_images  ;

https://stackoverflow.com/a/1107203/4154520

Activity icon

Replied to Const App = New Vue({}), Access App Outside Vue Or In Vanilla JS

Well, thank you @sinnbeck my bad, my background process "npm run watch" has stopped and I was not aware of that.

running the command fixed the issue. Thank you

Activity icon

Replied to Const App = New Vue({}), Access App Outside Vue Or In Vanilla JS

Yes, Just updated my app.js file but it still throws the same error. This is how I called it.

	// throw the error both ways If I comment one or other, or use both
 	app.callStatesByCountryId()
        window.app.callStatesByCountryId()
Activity icon

Replied to How To Add Buttons For Certain Functions On A Dashboard

Use this extension for datatable buttons

https://datatables.net/extensions/buttons/

Add the required file (CSS/Js) and then update your datatable instance to something like this

$('#myTable').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'copy', 'excel', 'pdf'
    ]
} );
Activity icon

Started a new Conversation Const App = New Vue({}), Access App Outside Vue Or In Vanilla JS

I am not able to access the methods of my root Vue instance.

What I have done;

var app = new Vue({
    el: '#app',
    data:{
            base_url : "http://localhost/NaiZindagiMIS/ajax/",
            state_id: "",
            area_id: "",
            cities: null,
            states: null,
            country_id: null
	}, 
	methods:{
	callStatesByCountryId(){
            axios.get(this.base_url + 'states/' + this.country_id)
                .then(response => {
                    this.states = response.data
                }).
            catch(error => {
                console.log(error)
                this.errored = true
            })
                .finally(() => this.loading = false)
        	}
	callCitiesByStateID(){
            console.log("StateId inner : " , this.state_id)
            axios.get(this.base_url + 'cities/' + this.state_id)
                .then(response => {
                    this.cities = response.data
                    console.log(this.cities);
                }).
            catch(error => {
                console.log(error)
                this.errored = true
            })
                .finally(() => this.loading = false)
        }
	}
});

In my blade view,

@push('scripts')
    <script>
        app.country_id = {{ $city->state->country->ID }}
        app.state_id = {{ $city->StateID }}
        app.callStatesByCountryId()
    </script>
@endpush

this throw error in the console;

edit:477 Uncaught TypeError: app.callStatesByCountryId is not a function

and I have called @stack('scripts) at the end of my layout, so the app.js is just above this file.

<script src="{{ asset('public/js/app.js') }}"></script>
@stack('scripts')
Oct
26
4 weeks ago
Activity icon

Replied to Integrating Vue With Laravel

Thanks, just fixed it.

My auto import plugin was inserting the tag at the end of my layout. Removing that fixed the issue.

Activity icon

Replied to Integrating Vue With Laravel

In my main layout main.blade.php

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


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

I have done something like this, When I try to use

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

it throws this error

Exception
Unable to locate Mix file: /public/js/app.js

and I am running this command whenever making changes to vue files

npm run watch

and this is my webpack.min.js file

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


mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

Activity icon

Replied to Model Returns Data But Neither Returns True Nor False Using If-else .

Check for is_empty or is null on your $lastreq

Secondly, if you need true or false, try ->exits(); instead of ->first();

$lastReq = XpgReply::where('gameId', $data['GameId'])->where('roundId', $data['RoundId'])->where('sequence', $data['Sequence'])->exists();

if($lastReq){
// returnd true
} else {
returned false
}
Activity icon

Replied to Integrating Vue With Laravel

That's worked very well!

I have one more question in the same scope, please bear with me; This is my Vue Component

<template>
    <div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="country">Country</label>
                <select name="" id="country" class="form-control" v-model="country_id"
                        @change="callStatesByCountryId()">
                    <option value="" selected>Select Country</option>
                    <option :for="country in countries" :value="country.Id">{{ country.CountryName }}</option>
                </select>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="state">State</label>
                <select name="" id="state" class="form-control" @change="callCitiesByStateID()" v-model="state_id">
                    <option v-for="state in states" :value="state.ID"> {{ state.StateName }}</option>
                </select>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="city">City</label>
                <select name="" id="city" class="form-control" v-model="city_id" @change="callAreaByCityID(city_id)">
                    <option value="0" disabled selected> Select City </option>
                    <option v-for="city in cities" :value="city.ID"> {{ city.CityName }}</option>
                </select>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="area">Area</label>
                <select name="area_id" id="area" class="form-control" v-model="area_id">
                    <option value="0" disabled selected> Select Area </option>
                    <option v-for="area in areas" :value="area.ID"> {{ area.AreaName }}</option>
                </select>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'spot-search-filter',
        props: ['countries'],
        data(){
            return {
                base_url : "http://localhost/NaiZindagiMIS/ajax/",
                state_id: "",
                area_id: "",
                cities: null,
                states: null,
                areas: null,
                spots: null,
                errored: false,
                loading: false,
                city_id: "",
                spot_id: "",
                country_id: "",
                country: ""
            }
        },
        methods:{
            callStatesByCountryId(){
                axios.get(this.base_url + 'states/' + this.country_id)
                    .then(response => {
                        this.states = response.data
                    }).
                catch(error => {
                    console.log(error)
                    this.errored = true
                })
                    .finally(() => this.loading = false)
            },
            callCitiesByStateID(){
                axios.get(this.base_url + 'cities/' + this.state_id)
                    .then(response => {
                        this.cities = response.data
                        console.log(this.cities);
                    }).
                catch(error => {
                    console.log(error)
                    this.errored = true
                })
                    .finally(() => this.loading = false)
            },
            callAreaByCityID(city_id){

                axios.get(this.base_url + 'areas/' + city_id)
                    .then(response => {
                        this.areas = response.data
                        console.log(this.areas);
                    }).
                catch(error => {
                    console.log(error)
                    this.errored = true
                })
                    .finally(() => this.loading = false)
            },
            callSpotByAreaID(area_id){
                console.log(area_id)
                axios.get(this.base_url + 'spots/' + area_id)
                    .then(response => {
                        this.spots = response.data
                        console.log(this.spots);
                    }).
                catch(error => {
                    console.log(error)
                    this.errored = true
                })
                    .finally(() => this.loading = false)
            },
        },
        mounted() {

        }
    }
</script>

and this is my app.js

import SpotSearchFilter from "./components/global/SpotSearchFilter";
require('./bootstrap');
window.Vue = require('vue');
window.axios = require('axios')

const app = new Vue({
    el: '#app',
    components: {
        'spot-search-filter': SpotSearchFilter
    }
}

and this Is my blade

<form action="{{route('spots.index')}}" method="GET" class="row">
                    <input type="hidden" name="search" value="true"/>
                    <spot-search-filter countries="@json($countries)"></spot-search-filter>
</form>

It throws this error in the console.

spots:2 Uncaught SyntaxError: Cannot use import statement outside a module

and when I click on this error, it has appended the following script on the top of my blade page in source code

<script>
    import SpotSearchFilter from "../../js/components/global/SpotSearchFilter";
    export default {
        components: {SpotSearchFilter}
    }
</script>
Activity icon

Replied to Integrating Vue With Laravel

@rodrigo.pedra It should be a plain object only on the root component? and the rest of the components should have it as function?

Activity icon

Started a new Conversation Integrating Vue With Laravel

WHAT I DID

npm install
npm run dev

// added the CSS and JS files to my layout.

Here is my App.js file

const app = new Vue({
    el: '#app',
    data() {
	return {
            base_url : "http://localhost/abc/ajax/",
            state_id: "",
            area_id: "",
            cities: null,
            states: null,
            areas: null,
            spots: null,
            errored: false,
            loading: false,
            city_id: "",
            spot_id: "",
            country_id: ""
	}
   },
   methods: {
        callStatesByCountryId(){
            axios.get(this.base_url + 'states/' + this.country_id)
                .then(response => {
                    this.states = response.data
                }).
            catch(error => {
                console.log(error)
                this.errored = true
            })
                .finally(() => this.loading = false)
        }
   }	
});

My blade file

<div class="col-md-2">
                        <div class="form-group">
                            <label for="country">Country</label>
                            <select name="" id="country" class="form-control" v-model="country_id"
                                    @change="callStatesByCountryId()">
                                <option value="" selected>Select Country</option>
                                @foreach($countries as $country)
                                    <option value="{{ $country->ID }}">{{ $country->CountryName }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="state">State</label>
                            <select name="" id="state" class="form-control" @change="callCitiesByStateID()" v-model="state_id">
                                <option v-for="state in states" :value="state.ID"> @{{ state.StateName }}</option>
                            </select>
                        </div>
                    </div>

Errors in my console

app.js:38428 [Vue warn]: Property or method "base_url" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

app.js:38428 [Vue warn]: Property or method "country_id" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

app.js:38428 [Vue warn]: Property or method "state_id" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

app.js:38428 [Vue warn]: Property or method "states" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

As @change I have called a function then after click it throw this error

app.js:38428 [Vue warn]: Property or method "callStatesByCountryId" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

app.js:38428 [Vue warn]: Error in v-on handler: "TypeError: callStatesByCountryId is not a function"

app.js:39691 TypeError: callStatesByCountryId is not a function
    at _c.on.change (eval at createFunction (app.js:49443), <anonymous>:3:1240)
Oct
24
4 weeks ago
Activity icon

Replied to Barryvdh/laravel-dompdf Large White Space Problem

<tr class="row">
	<td class="col-sm-6 invoice-amounts">
		<p>Total: 0.00 &euro; </p>
		<p>Tax 20%: 0.00 &euro; </p>
		<p>Grand Total: 0.00 &euro; </p>
	</td>
</tr>

try this

or you can also go with custom CSS like width and alignment properties.

Activity icon

Replied to Barryvdh/laravel-dompdf Large White Space Problem

<div class="col-sm-12 invoice-details">
	  				<p><b>AN0001/2020</b></p>
	  				<p>12.10.2020</p>
	  				<p>24.10.2020</p>
	  				<p>Customer Nr.: 0001</p>
	  			</div>

try to use a specific number for col-sm or col-md

Activity icon

Replied to I Want To Use To And From To Match Id In Hasone Relationship

[No Answer related to your question, BUT] what exactly are you trying to create? A Chatting Module between two users?

Oct
23
1 month ago
Activity icon

Replied to I Get Errors When I Click On The Submit Button

MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=username
MAIL_PASSWORD=password
MAIL_ENCRYPTION=null
[email protected]
MAIL_FROM_NAME="${APP_NAME}"

Fill any email from which you want to send the email.

Activity icon

Replied to Model Approach Like ASP.NET MVC In Laravel

@michaloravec @martinbean @jlrdw I feel like I did not correctly ask the question in a proper way.

I will explain it with examples.

IN ASP.NET MVC we can directly call the column names in view. like this;

@model NZMIS.Models.Area


<span>  @Model.AreaCode </span>

This way. I can see each column name in my Model and I don't need to check DB or table to check column names or anything else.

I want such an approach in Laravel.

Oct
22
1 month ago
Activity icon

Replied to Model Approach Like ASP.NET MVC In Laravel

@martinbean @jlrdw Let me explain, In ASP.NET we can reference the Column name in Razor Views and Controllers by calling Model.Column name.

I just want to achieve that approach in my Laravel project.

If I go this way

$items = select("Id", "Name", "Quantity", "Quality", "Price", "GST")->get();

and in the future, I change the column name for GST to GovernmentServiceTax Then I will need to manually update the column name everywhere in my project.

That's all I want if we can declare them in one place and call it everywhere we need. changes in one place automatically change everywhere.

that's why I declared them in Model as constant to let it call anywhere in my controller.

Activity icon

Started a new Conversation Model Approach Like ASP.NET MVC In Laravel

I am trying to achieve something similar to the Dot Net framework in Laravel. As we declare all of our table columns in the Model and in the controller we can simply call them using model object.

  1. WHAT I WANT (Something Similar)
public function functionaName(){
	$object = ModelName::class
         $items = Item::select($object->name1, $object->name2)->get()
	return view('welcome', compact('items');
}

And want to achieve the same in Blade's view as well.

  1. Currently, what I am doing is;

That I have created constant fields in my Model

	public const ItemName = "ItemName";
	public const ItemQuantity = "Quantity";

and In my Controller, I used them like

	$items = Item::select(Item::ItemName, Item::ItemQuantity)->get();

is this the right approach? if not, then what is the best approach?

Thank you

Oct
02
1 month ago
Activity icon

Replied to Passing Variable From Controller To Blade With Loop (@for Inside @foreach)

Just go for

@php @endphp 

Your code would like this

@foreach($data as $v2)
   	 <tr>
        	<th>{{ $v2->aa }}</th>
       		 <td>{{ $v2->last_name }}</td>
		<td>{{ $v2->first_name }}</td>
        
			@for($i = 1; $i <= $n; $i++)
				@php ($field = 'year'.$i)
                                 <td>{{ $v2->$field }}</td>    // --> HERE IS SOLUTION !! <--
			@endfor
		<td>{{ $v2->score }}</td>    	
          </tr>
@endforeach


Activity icon

Replied to How To Get The Difference Between Employment Date And Current Date In Month

You can use Carbon to perform that

use Carbon\Carbon;
$current_date = Carbon::now();
$difference = $current_date->diffInMonths($employee_date);

echo $difference;

That's it.