Laravel Home Services Project - Change Location
In this video, we will learn about implementing the change location feature in our Laravel project.
Let's see how we can change the location.
To do this, we need to create a Livewire component for changing the location.
So, go to the command prompt and run the following command:
php artisan make:livewire ChangeLocationComponent
Now, switch to the project and create a route for this component.
Go to the web.php file and add the following route:
Route::get('/change-location',ChangeLocationComponent::class)->name('home.change_location');
Next, go to the ChangeLocationComponent class file and add the following code:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class ChangeLocationComponent extends Component
{
public $streetnumber;
public $routes;
public $city;
public $state;
public $country;
public $zipcode;
public function changeLocation()
{
session()->put('streetnumber',$this->streetnumber);
session()->put('routes',$this->routes);
session()->put('city',$this->city);
session()->put('state',$this->state);
session()->put('country',$this->country);
session()->put('zipcode',$this->zipcode);
session()->flash('message','Location has been changed');
$this->emitTo('location-component','refreshComponent');
}
public function render()
{
return view('livewire.change-location-component')->layout('layouts.base');
}
}
Now, open the change-location-component.blade.php view file and write the following code:
<div>
<div class="section-title-01 honmob">
<div class="bg_parallax image_01_parallax"></div>
<div class="opacy_bg_02">
<div class="container">
<h1>Change Location</h1>
<div class="crumbs">
<ul>
<li><a href="/">Home</a></li>
<li>/</li>
<li>Change Location</li>
</ul>
</div>
</div>
</div>
</div>
<div class="content-central">
<div class="semiboxshadow text-center">
<img src="img/img-theme/shp.png" class="img-responsive" alt="">
</div>
<div class="content_info">
<div class="paddings-mini">
<div class="container">
<div class="row">
@if(Session::has('message'))
<div class="alert alert-success" role="alert">{{Session::get('message')}}</div>
@endif
<form wire:submit.prevent="changeLocation">
<div class="col-md-8">
<h3>Search Your Location</h3>
<p class="lead">
</p>
<input type="text" class="form-control" id="autocomplete" name="location"
placeholder="Search Location....">
<div id="map" style="height: 400px;"></div>
</div>
<div class="col-md-4">
<aside class="addlocation">
<h4>Your Location<input type="submit" class="btn btn-primary pull-right"
name="submit" value="Add Location"></h4>
<address>
<div class="form-group">
<label for="streetnumber" class="col-form-label">Street Number:</label>
<input type="text" class="form-control" id="street_number"
name="streetnumber" wire:model="streetnumber">
</div>
<div class="form-group">
<label for="routes" class="col-form-label">Route:</label>
<input type="text" class="form-control" id="route" name="routes" wire:model="routes">
</div>
<div class="form-group">
<label for="city" class="col-form-label">City:</label>
<input type="text" class="form-control" id="locality" name="city" wire:model="city">
</div>
<div class="form-group">
<label for="state" class="col-form-label">State:</label>
<input type="text" class="form-control" id="administrative_area_level_1"
name="state" wire:model="state">
</div>
<div class="form-group">
<label for="country" class="col-form-label">Country:</label>
<input type="text" class="form-control" id="country" name="country" wire:model="country">
</div>
<div class="form-group">
<label for="pincode" class="col-form-label">Pincode:</label>
<input type="text" class="form-control" id="postal_code" name="pincode" wire:model="zipcode">
</div>
</address>
</aside>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="section-twitter content_resalt border-top">
<i class="fa fa-twitter icon-big"></i>
<div class="container">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>
</div>
</div>
Now, let's create another component for this location.
Go to the command prompt and run the following command:
php artisan make:livewire LocationComponent
Now, let's run the application:
php artisan serve
Switch to the project and open the base.blade.php layout file.
Cut the search div from here and render the location-component.blade.php view file:
@livewire('location-component')
Now, go to the location-component.blade.php view file and paste the code as follows:
<div>
<div class="col-md-6">
<ul class="visible-md visible-lg text-right">
<li><i class="fa fa-comment"></i> Live Chat</li>
@if(Session::has('city'))
<li><a href="{{route('home.change_location')}}"><i class="fa fa-map-marker"></i> {{Session::get('city')}}, {{Session::get('state')}}</a></li>
@else
<li><a href="{{route('home.change_location')}}"><i class="fa fa-map-marker"></i> Faridabad, Haryana</a></li>
@endif
</ul>
</div>
</div>
And here, paste the code.
Now, go to the LocationComponent.php class file and add the following code:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class LocationComponent extends Component
{
protected $listeners = ['refreshComponent'=>'$refresh'];
public function render()
{
return view('livewire.location-component');
}
}
Next, go to the ChangeLocationComponent.php class file and inside the changeLocation method, add the following code:
$this->emitTo('location-component','refreshComponent');
Now, it's done. Let's check the result.
Switch to the browser and refresh the page.
Click here to change the location.
And here, you can see the change location form.
Enter the location details and click on "Add Location".
And here, you can see that the location has been changed.
So, in this way, you can change the location.
