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
Images Folder
Create new folder named images in public folder. Copy images need to use in project to images folder.
CSS Folder
Create new folder named css in public folder. In this folder, create new css file named style.css as below:
.format-text {
color: red;
font-size: 20px;
}
img {
width: 120px;
height: 100px;
}
JS Folder
Create new folder named js in public folder. In this folder, create new javascript file named mylib.js as below:
function clickMe() {
alert('Hello World');
}
Create Controller
Create new PHP file named DemoController.php in app/Http/Controllers folder as below:
<?php
namespace App\Http\Controllers;
class DemoController extends Controller
{
public function index()
{
return view('demo/index');
}
}
Create View
Create new folder named demo in resources/views folder. In this folder, create new Blade file named index.blade.php as below:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="{{asset('css/style.css')}}" rel="stylesheet" type="text/css">
<script src="{{asset('js/mylib.js')}}" type="text/javascript"></script>
</head>
<body>
<h3 class="format-text">Demo Page</h3>
<img src="{{asset('images/thumb1.gif')}}" onclick="clickMe()">
</body>
</html>
Create 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']);
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