Skip to main content

Laravel Template blade concept

By

 All Laravel view files need to store at resources folder. 


Blade Document: https://laravel.com/docs/9.x/blade

Blade template always have blade extension

For ex:

Home.php as Home.blade.php



{{}} ==> it will print variable data simply act like PHP echo statements.

@directive it is used for template or nested template, loops and conditions statements


By default, Blade {{ }} statements are automatically sent through PHP's htmlspecialchars function to prevent XSS attacks. If you do not want your data to be escaped, you may use the following syntax:

{!! $title !!}







As refer above image, you can simply create a layout.blade.php for common page.

Let take sample example html template



In Layout



Yield second parameter will be a default value if you doesn't set any title value. 


















Labels:

Comments

Post a Comment

Thank you :)

Popular posts from this blog

Laravel form validations

By
 Laravel Validations: List of types "first_name" => 'required|alpha:ascii|min:3|max:100',// alpha:ascii (only accepts a-z) "middle_name" => 'string', "last_name" => 'required|string', "email" => 'required|email|unique:users,email', "password" => 'required|string|confirmed', "sex" => 'required|string', "phone_no" => 'required|string', "account_type" => 'required|string', "dob" => 'required|date_format:d-m-Y', // date with format "nationality" => 'required|string', "company" => 'required|string', "company_sector" => 'required|string', "company_address" => 'required|string' "bank_account_no" => 'required|min_digits:3|max_digits:5', "role" => 'required|in:admin,editor,viewer', ...
Post a Comment
Read more

React Js Commands

By
React JS Commands and Useful purposes  To Install react app: npx create-react-app app-name To Install react app: npx create-react-app . To check npm version: npm --version Inside that directory, you can run several commands:   npm start     Starts the development server.   npm run build     Bundles the app into static files for production.   npm test     Starts the test runner.   npm run eject     Removes this tool and copies build dependencies, configuration files     and scripts into the app directory. If you do this, you can’t go back! node -v (To check node version) The latest recommended command to create a new React app is: npx create-react-app@latest my-app Replace my-app with your desired project name. This approach uses the latest version of Create React App and works if Node.js (version 14+) and npm (version 5.2+) are installed Modern Alternatives If you prefer a faster, lighter setup, many developers n...
Post a Comment
Read more

AngularJS - Directives

By
First, we have to learn AngularJs directives, Directives are simple special attributes in HTML. It has own set of built-in directives which offers functionality to your applications. To check all directive list https://docs.angularjs.org/api/ng/directive  For example, I take ng-app , ng-model ,  ng-init and ng-bind .  First will talk about the ng-app directive, the ng-app directive is initializing the AngularJS application. To take the values of all HTML inputs ( input, radio, select and textarea ) we use the ng-model.     ng-bind is print the expression. we can also be written inside double braces: {{ expression }} . AngularJS - Directives Example 1  Note: All these directives are work in inside the ng-app closed tag. you can assign ng-app directive to any tag. like <HTML>, <DIV>, <SPAN> but make sure initialize the main parent tag.     Now, We can check data initializes before page load. For this, ...
1 comment
Read more