CODE VN

CODE VN

1647529740

Cách tạo ứng dụng web địa chỉ tự động điền của Google với Laravel

Trong hướng dẫn này, bạn sẽ học cách tạo ứng dụng web địa chỉ tự động điền của google bằng cách sử dụng API địa chỉ google trong ứng dụng laravel 8.

1: Cài đặt ứng dụng Laravel 8

Trước hết, thực hiện lệnh sau trên thiết bị đầu cuối để cài đặt / tải xuống ứng dụng laravel 8 trong hệ thống (máy chủ) của bạn:

composer create-project --prefer-dist laravel/laravel blog

2: Nhận khóa Api từ Google

Để triển khai địa chỉ tự động điền trong laravel, chúng tôi sẽ phải lấy khóa. Vì vậy, chỉ cần truy cập liên kết  https://cloud.google.com  và lấy khóa API của google.

3: Thêm tuyến đường

Trong bước này, hãy thêm các tuyến đường trong tệp web.php. Đi tới tệp app / route / web.php và các tuyến sau trong tệp web.php:

use App\Http\Controllers\GoogleController;
Route::get('auto-complete', [GoogleController::class, 'index']);

4: Tạo bộ điều khiển bằng lệnh

Trong bước này, thực hiện lệnh sau trên thiết bị đầu cuối để tạo tên bộ điều khiển GoogleController. Vì vậy, bạn cần sử dụng lệnh dưới đây và tạo Bộ điều khiển:

php artisan make:controller GoogleController

Sau khi tạo thành công bộ điều khiển, hãy truy cập app / controllers / GoogleController.php và cập nhật mã sau:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class GoogleController extends Controller
{
    // ---------------- [ Load View ] ----------------
    public function index(Request $request) {
 
        return view("auto-complete");
 
    }
}

5: Tạo chế độ xem Blade

Trong bước này, hãy tạo một tệp dạng xem phiến. Đi tới app / resources / views và tạo một tên tệp auto-complete.blade.php:

<!doctype html>
<html lang="en">
<head>
<title>Google Autocomplete Address Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12 m-auto">
<div class="card shadow">
<div class="card-header bg-primary">
<h5 class="card-title text-white"> Google Autocomplete Address</h5>
</div>
<div class="card-body">
<div class="form-group">
<label for="autocomplete"> Location/City/Address </label>
<input type="text" name="autocomplete" id="autocomplete" class="form-control" placeholder="Select Location">
</div>
<div class="form-group" id="lat_area">
<label for="latitude"> Latitude </label>
<input type="text" name="latitude" id="latitude" class="form-control">
</div>
<div class="form-group" id="long_area">
<label for="latitude"> Longitude </label>
<input type="text" name="longitude" id="longitude" class="form-control">
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-success"> Submit </button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Thêm tập lệnh tự động hoàn thành

Vì vậy, trong phần footer trước khi đóng thẻ body, chỉ cần thêm tập lệnh bên dưới vào đó.

{{-- javascript code --}}
<script src="https://maps.google.com/maps/api/js?key=AIzaSyDxTV3a6oL6vAaRookXxpiJhynuUpSccjY&libraries=places&callback=initAutocomplete" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#lat_area").addClass("d-none");
$("#long_area").addClass("d-none");
});
</script>
<script>
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var input = document.getElementById('autocomplete');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
$('#latitude').val(place.geometry['location'].lat());
$('#longitude').val(place.geometry['location'].lng());
// --------- show lat and long ---------------
$("#lat_area").removeClass("d-none");
$("#long_area").removeClass("d-none");
});
}
</script>

6: Chạy Máy chủ Phát triển

Trong bước này, thực hiện lệnh sau trên thiết bị đầu cuối để bắt đầu máy chủ phát triển. Sử dụng lệnh phục vụ nghệ nhân php và khởi động máy chủ của bạn:

php artisan serve
If you want to run the project diffrent port so use this below command 
php artisan serve --port=8080

7: Kiểm tra ứng dụng này

Mở trình duyệt của bạn và nhấn vào url sau:

 http://localhost:8000/auto-complete

Trong hướng dẫn laravel, bạn đã học cách triển khai ứng dụng web tự động hoàn thành của google bằng cách sử dụng các API của google địa điểm trong laravel.

What is GEEK

Buddha Community

CODE VN

CODE VN

1647529740

Cách tạo ứng dụng web địa chỉ tự động điền của Google với Laravel

Trong hướng dẫn này, bạn sẽ học cách tạo ứng dụng web địa chỉ tự động điền của google bằng cách sử dụng API địa chỉ google trong ứng dụng laravel 8.

1: Cài đặt ứng dụng Laravel 8

Trước hết, thực hiện lệnh sau trên thiết bị đầu cuối để cài đặt / tải xuống ứng dụng laravel 8 trong hệ thống (máy chủ) của bạn:

composer create-project --prefer-dist laravel/laravel blog

2: Nhận khóa Api từ Google

Để triển khai địa chỉ tự động điền trong laravel, chúng tôi sẽ phải lấy khóa. Vì vậy, chỉ cần truy cập liên kết  https://cloud.google.com  và lấy khóa API của google.

3: Thêm tuyến đường

Trong bước này, hãy thêm các tuyến đường trong tệp web.php. Đi tới tệp app / route / web.php và các tuyến sau trong tệp web.php:

use App\Http\Controllers\GoogleController;
Route::get('auto-complete', [GoogleController::class, 'index']);

4: Tạo bộ điều khiển bằng lệnh

Trong bước này, thực hiện lệnh sau trên thiết bị đầu cuối để tạo tên bộ điều khiển GoogleController. Vì vậy, bạn cần sử dụng lệnh dưới đây và tạo Bộ điều khiển:

php artisan make:controller GoogleController

Sau khi tạo thành công bộ điều khiển, hãy truy cập app / controllers / GoogleController.php và cập nhật mã sau:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class GoogleController extends Controller
{
    // ---------------- [ Load View ] ----------------
    public function index(Request $request) {
 
        return view("auto-complete");
 
    }
}

5: Tạo chế độ xem Blade

Trong bước này, hãy tạo một tệp dạng xem phiến. Đi tới app / resources / views và tạo một tên tệp auto-complete.blade.php:

<!doctype html>
<html lang="en">
<head>
<title>Google Autocomplete Address Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12 m-auto">
<div class="card shadow">
<div class="card-header bg-primary">
<h5 class="card-title text-white"> Google Autocomplete Address</h5>
</div>
<div class="card-body">
<div class="form-group">
<label for="autocomplete"> Location/City/Address </label>
<input type="text" name="autocomplete" id="autocomplete" class="form-control" placeholder="Select Location">
</div>
<div class="form-group" id="lat_area">
<label for="latitude"> Latitude </label>
<input type="text" name="latitude" id="latitude" class="form-control">
</div>
<div class="form-group" id="long_area">
<label for="latitude"> Longitude </label>
<input type="text" name="longitude" id="longitude" class="form-control">
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-success"> Submit </button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Thêm tập lệnh tự động hoàn thành

Vì vậy, trong phần footer trước khi đóng thẻ body, chỉ cần thêm tập lệnh bên dưới vào đó.

{{-- javascript code --}}
<script src="https://maps.google.com/maps/api/js?key=AIzaSyDxTV3a6oL6vAaRookXxpiJhynuUpSccjY&libraries=places&callback=initAutocomplete" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#lat_area").addClass("d-none");
$("#long_area").addClass("d-none");
});
</script>
<script>
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var input = document.getElementById('autocomplete');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
$('#latitude').val(place.geometry['location'].lat());
$('#longitude').val(place.geometry['location'].lng());
// --------- show lat and long ---------------
$("#lat_area").removeClass("d-none");
$("#long_area").removeClass("d-none");
});
}
</script>

6: Chạy Máy chủ Phát triển

Trong bước này, thực hiện lệnh sau trên thiết bị đầu cuối để bắt đầu máy chủ phát triển. Sử dụng lệnh phục vụ nghệ nhân php và khởi động máy chủ của bạn:

php artisan serve
If you want to run the project diffrent port so use this below command 
php artisan serve --port=8080

7: Kiểm tra ứng dụng này

Mở trình duyệt của bạn và nhấn vào url sau:

 http://localhost:8000/auto-complete

Trong hướng dẫn laravel, bạn đã học cách triển khai ứng dụng web tự động hoàn thành của google bằng cách sử dụng các API của google địa điểm trong laravel.

Mansi Gandhi

Mansi Gandhi

1624438819

Laravel Development services india | Laravel Web Development Company - CMARIX Technolabs

CMARIX is one of the leading Laravel web development company at this time with a rating of 4.9/5 on Clutch. This is the best place where you could probably find the Best Laravel developers in the industry. Being one of the top Laravel development companies, CMARIX aims to create an atmosphere of collaboration, creativity, and excellence where everyone is doing their best work.

#laravel web development company india #laravel development services india #laravel web development company #laravel framework development services #laravel development #laravel development company

websolution stuff

websolution stuff

1626848460

Laravel 8 Socialite Login with Google Account

Hello Guys,

Today I will share laravel 8 socialite login with google account. In this post give you example of laravel 8 socialite login with google account and also you can knowledge about how to socialite login with google account in laravel 8 jetstream.

This tutorial will give you very easy and simple example of login with gmail in laravel 8.

Read More : Laravel 8 Socialite Login with Google Account

https://websolutionstuff.com/post/laravel-8-socialite-login-with-google-account

Read More : How To Create Dynamic Pie Chart In Laravel

https://websolutionstuff.com/post/how-to-create-dynamic-pie-chart-in-laravel

Read Also : Stripe Payment Gateway Integration Example In Laravel 8

https://websolutionstuff.com/post/stripe-payment-gateway-integration-example-in-laravel-8

#laravel 8 socialite login with google account #laravel #laravel 8 login with google #login with gmail account #laravel socialite #login with gmail in laravel 8

Seamus Quitzon

Seamus Quitzon

1595201363

Php how to delete multiple rows through checkbox using ajax in laravel

First thing, we will need a table and i am creating products table for this example. So run the following query to create table.

CREATE TABLE `products` (
 `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
 `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
 `description` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
 `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
 `updated_at` datetime DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

Next, we will need to insert some dummy records in this table that will be deleted.

INSERT INTO `products` (`name`, `description`) VALUES

('Test product 1', 'Product description example1'),

('Test product 2', 'Product description example2'),

('Test product 3', 'Product description example3'),

('Test product 4', 'Product description example4'),

('Test product 5', 'Product description example5');

Now we are redy to create a model corresponding to this products table. Here we will create Product model. So let’s create a model file Product.php file under app directory and put the code below.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $fillable = [
        'name','description'
    ];
}

Step 2: Create Route

Now, in this second step we will create some routes to handle the request for this example. So opeen routes/web.php file and copy the routes as given below.

routes/web.php

Route::get('product', 'ProductController@index');
Route::delete('product/{id}', ['as'=>'product.destroy','uses'=>'ProductController@destroy']);
Route::delete('delete-multiple-product', ['as'=>'product.multiple-delete','uses'=>'ProductController@deleteMultiple']);

#laravel #delete multiple rows in laravel using ajax #laravel ajax delete #laravel ajax multiple checkbox delete #laravel delete multiple rows #laravel delete records using ajax #laravel multiple checkbox delete rows #laravel multiple delete

CODE VN

CODE VN

1648635492

Cách tạo địa chỉ tự động điền của Google với Laravel

Trong hướng dẫn này, bạn sẽ học cách tạo ứng dụng web địa chỉ tự động điền của google bằng cách sử dụng API địa chỉ google trong ứng dụng laravel 8.

1: Cài đặt ứng dụng Laravel 8

Trước hết, thực hiện lệnh sau trên thiết bị đầu cuối để cài đặt / tải xuống ứng dụng laravel 8 trong hệ thống (máy chủ) của bạn:

composer create-project --prefer-dist laravel/laravel blog

2: Nhận khóa Api từ Google

Để triển khai địa chỉ tự động điền trong laravel, chúng tôi sẽ phải lấy khóa. Vì vậy, chỉ cần truy cập liên kết  https://cloud.google.com  và lấy khóa API của google.

3: Thêm tuyến đường

Trong bước này, hãy thêm các tuyến đường trong tệp web.php. Đi tới tệp app / route / web.php và các tuyến sau trong tệp web.php:

use App\Http\Controllers\GoogleController;
Route::get('auto-complete', [GoogleController::class, 'index']);

4: Tạo bộ điều khiển bằng lệnh

Trong bước này, thực hiện lệnh sau trên thiết bị đầu cuối để tạo tên bộ điều khiển GoogleController. Vì vậy, bạn cần sử dụng lệnh dưới đây và tạo Bộ điều khiển:

php artisan make:controller GoogleController

Sau khi tạo thành công bộ điều khiển, hãy truy cập app / controllers / GoogleController.php và cập nhật mã sau:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class GoogleController extends Controller
{
    // ---------------- [ Load View ] ----------------
    public function index(Request $request) {
 
        return view("auto-complete");
 
    }
}

5: Tạo chế độ xem Blade

Trong bước này, hãy tạo một tệp dạng xem phiến. Đi tới app / resources / views và tạo một tên tệp auto-complete.blade.php:

<!doctype html>
<html lang="en">
<head>
<title>Google Autocomplete Address Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12 m-auto">
<div class="card shadow">
<div class="card-header bg-primary">
<h5 class="card-title text-white"> Google Autocomplete Address</h5>
</div>
<div class="card-body">
<div class="form-group">
<label for="autocomplete"> Location/City/Address </label>
<input type="text" name="autocomplete" id="autocomplete" class="form-control" placeholder="Select Location">
</div>
<div class="form-group" id="lat_area">
<label for="latitude"> Latitude </label>
<input type="text" name="latitude" id="latitude" class="form-control">
</div>
<div class="form-group" id="long_area">
<label for="latitude"> Longitude </label>
<input type="text" name="longitude" id="longitude" class="form-control">
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-success"> Submit </button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

 

Thêm tập lệnh tự động hoàn thành

Vì vậy, trong phần footer trước khi đóng thẻ body, chỉ cần thêm tập lệnh bên dưới vào đó.

{{-- javascript code --}}
<script src="https://maps.google.com/maps/api/js?key=AIzaSyDxTV3a6oL6vAaRookXxpiJhynuUpSccjY&libraries=places&callback=initAutocomplete" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#lat_area").addClass("d-none");
$("#long_area").addClass("d-none");
});
</script>
<script>
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var input = document.getElementById('autocomplete');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
$('#latitude').val(place.geometry['location'].lat());
$('#longitude').val(place.geometry['location'].lng());
// --------- show lat and long ---------------
$("#lat_area").removeClass("d-none");
$("#long_area").removeClass("d-none");
});
}
</script>

6: Chạy Máy chủ Phát triển

Trong bước này, thực hiện lệnh sau trên thiết bị đầu cuối để bắt đầu máy chủ phát triển. Sử dụng lệnh phục vụ nghệ nhân php và khởi động máy chủ của bạn:

 php artisan serve
 If you want to run the project diffrent port so use this below command 
 php artisan serve --port=8080

7: Kiểm tra ứng dụng này

Mở trình duyệt của bạn và nhấn vào url sau:

 http://localhost:8000/auto-complete

Trong hướng dẫn tự động hoàn thành google địa điểm trong laravel này, bạn đã học cách triển khai ứng dụng web tự động điền của google bằng cách sử dụng các API địa điểm của google trong laravel.