Integrate Html Theme in Laravel 9 Project

Lecture 03

Integrate Html Theme in Laravel 9 Project

Integration of Html Theme into Laravel project is the main part of Laravel website project. Laravel is top rated PHP Framework. Laravel is based on the MVC approach.

MVC has three main parts which are given below
1) Model
2) View
3) Controller

Html theme files are basically deployed into view. View blade is used in Laravel to show view/output of the function.
1) All HTML files of theme are copy-pasted into a directory of resources/views
2) Extention of all HTML files is changed into file-name.blade.php
3) CSS/JS files are copy-pasted into the public folder.
4) Images of theme are also copy-pasted into the public folder.

Theme CSS & JS files are set in head tag of blade files of Laravel

Theme CSS & JS files are set in head tag of blade files of Laravel using attribute of asset() or url(). CSS & JS files are paste in public folder and blade files are set in directory of resurces/views.

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href='https://fonts.googleapis.com/css?family=Raleway:400,300,500,600,700,800' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="{{ asset('assets/css/color-switcher.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/font-awesome.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/material-design-iconic-font.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/plugins.css') }}">
<link rel="stylesheet" href="{{ asset('assets/style.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/color.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/responsive.css' )}}">
<script src="{{ asset('assets/js/vendor/modernizr-2.8.3.min.js') }}"></script>

Main layout blade in Laravel

Blade is the simple, yet powerful templating engine that is included with Laravel. Unlike some PHP templating engines, Blade does not restrict you from using plain PHP code in your templates. In fact, all Blade templates are compiled into plain PHP code and cached until they are modified, meaning Blade adds essentially zero overhead to your application. Blade template files use the .blade.php file extension and are typically stored in the resources/views directory.

<html>
<head>
Paste title and CSS/JS files here
</head>
<body>
<div class="as-mainwrapper">
    <div class="bg-white">
        <!--Header NavBar MobileMenu-->
        @include('include.navbar')

        @yield('content')
       
        @include('include.footer')
    </div>   
</div>   
</body>
<html>

Displaying Data in blade

You may display data that is passed to your Blade views by wrapping the variable in curly braces. For example, given the following route

Route::get('/', function () {
    return view('welcome', ['name' => 'Ahmad Raza']);
});

Hello, {{ $name }}
Use this code in welcome.blade.php blade file which is placed in resources/views directory.

Lecture 03