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.

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.

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

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

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

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.

Machine Learning in Rust

1619247660

Google's TPU's being primed for the Quantum Jump

The liquid-cooled Tensor Processing Units, built to slot into server racks, can deliver up to 100 petaflops of compute.

As the world is gearing towards more automation and AI, the need for quantum computing has also grown exponentially. Quantum computing lies at the intersection of quantum physics and high-end computer technology, and in more than one way, hold the key to our AI-driven future.

Quantum computing requires state-of-the-art tools to perform high-end computing. This is where TPUs come in handy. TPUs or Tensor Processing Units are custom-built ASICs (Application Specific Integrated Circuits) to execute machine learning tasks efficiently. TPUs are specific hardware developed by Google for neural network machine learning, specially customised to Google’s Machine Learning software, Tensorflow.

The liquid-cooled Tensor Processing units, built to slot into server racks, can deliver up to 100 petaflops of compute. It powers Google products like Google Search, Gmail, Google Photos and Google Cloud AI APIs.

#opinions #alphabet #asics #floq #google #google alphabet #google quantum computing #google tensorflow #google tensorflow quantum #google tpu #google tpus #machine learning #quantum computer #quantum computing #quantum computing programming #quantum leap #sandbox #secret development #tensorflow #tpu #tpus

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.

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

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

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

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

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

5: Tạo chế độ xem Blade

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

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

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

What is GEEK

Buddha Community

Laravel 8 Socialite Login with Google Account

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

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

Step 2: Create Route

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

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

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

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

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

5: Tạo chế độ xem Blade

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

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

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

Google's TPU's being primed for the Quantum Jump

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

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

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

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

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

5: Tạo chế độ xem Blade

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

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

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