Use Images, CSS and JavaScript in Laravel Framework

  1. Download and install the latest version of Composer from https://getcomposer.org/download/

  2. Open Windows Terminal in Visual Studio Code install Laravel Installer with command as below:

    composer global require laravel/installer
  3. 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

  4. Run LearnLaravelWithRealApps project with command as below:

    php artisan serve
  5. Open LearnLaravelWithRealApps project with url as below:

    http://localhost:8000

Create new folder named images in public folder. Copy images need to use in project to images 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;
}

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 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 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>

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']);

Access index action in Demo controller with urls as below:

  • http://localhost:8000
  • http://localhost:8000/demo
  • http://localhost:8000/demo/index

Output