Create Database
Create new database named laravel_db. In this database, create new table named product as below:
Structure of Product Table
Data of Product Table
Install Laravel
-
Download and install the latest version of Composer from https://getcomposer.org/download/
-
Open Windows Terminal in Visual Studio Code install Laravel Installer with command as below:
composer global require laravel/installer -
Create new folder named LearnLaravelWithRealApps. Use Visual Studio Code open to LearnLaravelWithRealApps foler. In this folder, create new project named LearnLaravelWithRealApps with command as below:
laravel new LearnLaravelWithRealApps
-
Run LearnLaravelWithRealApps project with command as below:
php artisan serve -
Open LearnLaravelWithRealApps project with url as below:
http://localhost:8000
Connect to Database
Open .env file in root folder. Add values as below connect to database:
DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=laravel_db
DB_USERNAME=root
DB_PASSWORD=
Clear Config Cache
Open Windows Terminal in Visual Studio Code and clear config cache with command as below:
php artisan config:clear
Create Product Model
Create new PHP file named Product.php in app/Models folder as below:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
protected $primarykey = 'id';
protected $table = 'product';
public $timestamps = false;
}
Create ProductRepository Interface
Create new folder named Repositories. In Repositories folder, create new folder named Product. Create new PHP file named ProductRepository.php in app/Repositories/Product folder as below:
<?php
namespace App\Repositories\Product;
interface ProductRepository
{
public function search($keyword);
}
Create ProductRepositoryImpl Class
Create new PHP file named ProductRepositoryImpl.php in app/Repositories/Product folder as below:
<?php
namespace App\Repositories\Product;
use App\Models\Product;
class ProductRepositoryImpl implements ProductRepository
{
public function search($keyword)
{
return Product::where('name', 'like', '%'.$keyword.'%')->select('name')->pluck('name');
}
}
Declare Product Repository
Open AppServiceProvider.php file in app/Providers folder and add declare new repository to register method as below:
<?php
namespace App\Providers;
use App\Repositories\Product\ProductRepository;
use App\Repositories\Product\ProductRepositoryImpl;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
public function register()
{
$this->app->bind(ProductRepository::class, ProductRepositoryImpl::class);
}
public function boot()
{
}
}
Controllers
Create new PHP file named DemoController.php in app/Http/Controllers folder as below:
<?php
namespace App\Http\Controllers;
use App\Repositories\Product\ProductRepository;
use Illuminate\Http\Request;
class DemoController extends Controller
{
protected $productRepository;
public function __construct(ProductRepository $productRepository)
{
$this->productRepository = $productRepository;
}
public function index()
{
return view('demo/index');
}
public function search(Request $request)
{
$keyword = $request->get('term');
return response()->json($this->productRepository->search($keyword));
}
}
Views
Create new folder named demo in resources/views folder. In this folder, create new Blade file named index.blade.php as below:
<html>
<head>
<title>Laravel</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$(function() {
$("#keyword").autocomplete({
source: "{{url('/demo/search')}}"
});
});
</script>
</head>
<body>
<h3>AutoComplete</h3>
<input id="keyword" placeholder="Keyword...">
</body>
</html>
Routes
Open web.php file in routes folder, add new routes as below:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\DemoController;
Route::get('/', [DemoController::class, 'index']);
Route::get('/demo', [DemoController::class, 'index']);
Route::get('/demo/index', [DemoController::class, 'index']);
Route::get('/demo/search', [DemoController::class, 'search']);
Structure of Laravel Project
Run Application
Access index action in Demo controller with urls as below:
- http://localhost:8000
- http://localhost:8000/demo
- http://localhost:8000/demo/index
Output
