Saturday, June 3, 2017

Laravel From Scratch 4

.
.
BLADE TEMPLATING & COMPILING

1)CREATE VIEW LAYOUT

create file: lsapp/resources/views/layouts/app.blade.php

edit content:
<!doctype html>
<html lang="{{config('app.locale')}}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"
<meta name="viewport" content="device-width,initial-scale=1">
<title>{{config('app.name','LSAPP')}}</title>
</heade>
<body>
@yield('content')
</body>
</html>


2) EDIT VIEW PAGE

edit file: lsapp/resources/views/pages/index.blade.php

edit content:
@extends('layouts.app')

@section('content')
<h1>Welcome To Laravel</h1>
<p>This is the Laravel application from the "Laravel From Scratch" Youtube series</p>
@endsection


edit file: lsapp/resources/views/pages/about.blade.php

edit content:
@extends('layouts.app')

@section('content')
<h1>About</h1>
<p>This is the about page</p>
@endsection


edit file: lsapp/resources/views/pages/services.blade.php

edit content:
@extends('layouts.app')

@section('content')
<h1>Services</h1>
<p>This is the services page</p>
@endsection


browse: /index
browse: /about
browse: /services



3) ADD PAGE DATA TO PAGE CONTROLLER USING COMPACT

edit file: lsapp/resources/views/pages/index.blade.php

edit content:
@extends('layouts.app')

@section('content')
<h1>{{$title}}</h1>
<p>This is the Laravel application from the "Laravel From Scratch" Youtube series</p>
@endsection


edit file: lsapp/resources/views/pages/about.blade.php

edit content:
@extends('layouts.app')

@section('content')
<h1>{{$title}}</h1>
<p>This is the about page</p>
@endsection


edit file: lsapp/app/Http/Controllers/PagesController.php

file content:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PagesController extends Controller
{
public function index(){
$title = 'Welcome To Laravel';
return view('pages.index',compact('title'));
}
public function about(){
return view('pages.about');
}
public function services(){
return view('pages.services');
}
}



4) ADD PAGE DATA TO PAGE CONTROLLER USING WITH

edit file: lsapp/app/Http/Controllers/PagesController.php

file content:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PagesController extends Controller
{
public function index(){
$title = 'Welcome To Laravel';
return view('pages.index')->with('title',$title);
}
public function about(){
$title = 'About Us';
return view('pages.about')->with('title',$title);
}
public function services(){
return view('pages.services');
}
}



note:
-compact() is a PHP Function.
-compact() creates an array from existing variables given as string arguments to it.
-with() is a Laravel method.
-with() allows you to pass variables to a view.



5) ADD PAGE ARRAY DATA TO PAGE CONTROLLER USING WITH

edit file: lsapp/resources/views/pages/services.blade.php

edit content:
@extends('layouts.app')

@section('content')
<h1>{{$title}}</h1>
<p>This is the services page</p>
@endsection



edit file: lsapp/app/Http/Controllers/PagesController.php

file content:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PagesController extends Controller
{
public function index(){
$title = 'Welcome To Laravel';
return view('pages.index')->with('title',$title);
}
public function about(){
$title = 'About Us';
return view('pages.about')->with('title',$title);
}
public function services(){
$data=array(
'title'=>'Our Services'
);
return view('pages.services')->with($data);
}
}





6) ADD PAGE NESTED ARRAY DATA TO PAGE CONTROLLER USING WITH

edit file: lsapp/resources/views/pages/services.blade.php

edit content:
@extends('layouts.app')

@section('content')
<h1>{{$title}}</h1>
@if(count($services)>0)
@foreach($services as $service)
<ul>
<li>{{$service}}</li>
</ul>
@endforeach
@endif
@endsection



edit file: lsapp/app/Http/Controllers/PagesController.php

file content:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PagesController extends Controller
{
public function index(){
$title = 'Welcome To Laravel';
return view('pages.index')->with('title',$title);
}
public function about(){
$title = 'About Us';
return view('pages.about')->with('title',$title);
}
public function services(){
$data=array(
'title'=>'Our Services',
'services'=>['Web Design','Programming','SEO']
);
return view('pages.services')->with($data);
}
}




7) ADD STYLING TO VIEW LAYOUT

to add link to css file
create file: lsapp/resources/views/layouts/app.blade.php

edit content:
<!doctype html>
<html lang="{{config('app.locale')}}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"
<meta name="viewport" content="device-width,initial-scale=1">
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<title>{{config('app.name','LSAPP')}}</title>
</heade>
<body>
@yield('content')
</body>
</html>



8) USING NODE TO COMPILE STYLING CODES
time:10.25


.

.

Laravel From Scratch 3

.

.

BASIC ROUTING & CONTROLLERS


1) INSERT ROUTE EXAMPLE

edit file: lsapp/routes/web.php

file content:
<?php
Route::get('/', function () {
    return view('welcome');
});
Route::get('/hello',function(){
return '<h1>Hello World</h1>';
});



2) INSERT PAGE EXAMPLE

edit file: lsapp/resources/views/pages/about.blade.php

file content:
About

edit file: lsapp/routes/web.php

file content:
<?php
Route::get('/', function () {
    return view('welcome');
});
/*
Route::get('/hello',function(){
return '<h1>Hello World</h1>';
});
*/
Route::get('/about',function(){
return view('pages.about');
});


3) INSERT URL PARAM EXAMPLE

edit file: lsapp/routes/web.php

file content:
<?php
Route::get('/', function () {
    return view('welcome');
});
/*
Route::get('/hello',function(){
return '<h1>Hello World</h1>';
});
Route::get('/about',function(){
return view('pages.about');
});
*/
Route::get('/users/{id}',function($id){
return 'This is user ' .$id;
});


4) USING ARTISAN

cmd: php artisan make:controller PagesController

edit file: lsapp/app/Http/Controllers/PagesController.php

file content:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PagesController extends Controller
{
public function index(){
return 'INDEX';
}
}


edit file: lsapp/routes/web.php

file content:
<?php
/*
Route::get('/', function () {
    return view('welcome');
});
Route::get('/hello',function(){
return '<h1>Hello World</h1>';
});
Route::get('/about',function(){
return view('pages.about');
});
Route::get('/users/{id}',function($id){
return 'This is user ' .$id;
});
*/
Route::get('/', 'PagesController@index');



5) CONTROLLER RETURNING VIEW

edit file: lsapp/resources/views/pages/index.php

file content:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <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>{{config('app.name','LSAPP')}}</title>
    </head>
    <body>
            <h1>Welcome To Laravel</h1>
            <p>This is the laravel application
            from the "Laravel From Scratch" Youtube series</p>
    </body>
</html>


edit file: lsapp/resources/views/pages/about.php

file content:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <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>{{config('app.name','LSAPP')}}</title>
    </head>
    <body>
            <h1>About</h1>
            <p>This is the laravel application
            from the "Laravel From Scratch" Youtube series</p>
    </body>
</html>



edit file: lsapp/resources/views/pages/services.php

file content:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <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>{{config('app.name','LSAPP')}}</title>
    </head>
    <body>
            <h1>Services</h1>
            <p>This is the laravel application
            from the "Laravel From Scratch" Youtube series</p>
    </body>
</html>



edit file: lsapp/app/Http/Controllers/PagesController.php

file content:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PagesController extends Controller
{
public function index(){
return view('pages.index');
}
public function about(){
return view('pages.about');
}
public function services(){
return view('pages.services');
}
}



edit file: lsapp/routes/web.php

file content:
<?php
/*
Route::get('/', function () {
    return view('welcome');
});
Route::get('/hello',function(){
return '<h1>Hello World</h1>';
});
Route::get('/about',function(){
return view('pages.about');
});
Route::get('/users/{id}/{name}',function($id,$name){
return 'This is user '.$name.' with and id of '.$id;
});
*/
Route::get('/', 'PagesController@index');
Route::get('/about', 'PagesController@about');
Route::get('/services', 'PagesController@services');
.

NEXT: Laravel From Scratch 4

Laravel From Scratch 2

.

.

ENVIRONMENT & INSTALL


0) PREPARATION
- Windows 7 SP1
- Chrome Web Browser
- php version 7.2.+
- composer 1.7.2
- git 2.19.1
- visual studio 1.28.2



1) DOWNLOAD AND INSTALL XAMPP

go to https://www.apachefriends.org/index.html


add php path to windows environment path
ie type cmd: set PATH=%PATH%;C:\xampp\php\

test for php version
ie type cmd: php --version



2) DOWNLOAD AND INSTALL COMPOSER

go to https://getcomposer.org/doc/00-intro.md

Download Composer-Setup.exe (for windows) and install

The exe file will install Composer
and insert its path Windows Environment Path Variable

test for composer version
ie type cmd: composer --version


or manual steps,

go to https://getcomposer.org/download/

Download Composer (Latest: v1.7.2)

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"

php -r "if (hash_file('SHA384', 'composer-setup.php') === '93b54496392c062774670ac18b134c3b3a95e5a5e5c8f1a9f115f203b75bf9a129d5daa8ba6a13e2cc8a1da0806388a8') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

php composer-setup.php

php -r "unlink('composer-setup.php');"

echo @php "%~dp0composer.phar" %*>composer.bat



3) DOWNLOAD AND INSTALL GIT

go to https://git-scm.com/

Download git and install


During installation,
under "Adjusting your PATH environment",
select (the 3rd option) "Use Git and optional Unix tools from the Windows Command Prompt"

For the rest parts, select default options.



4) DOWNLOAD AND INSTALL VISUAL STUDIO
go to https://code.visualstudio.com

Download visual studio and install


During installation,
under "Select additional Tasks",
select "Add 'Open with Code' action to Windows Explorer file context menu"
select "Add 'Open with Code' action to Windows Explorer directory context

Run Visual Studio

* update : VS code now lets you select or change command line shell directly, no extra effort needed. Just install git. *

You can also access via menu
select Menu File/Preferences/Settings/
select Features/Terminal
search "terminal.integrated.env.linux"



5) START EDITING USING VISUAL STUDIO WITH BASH COMMAND TERMINAL

goto to the xampp htdocs location ie /c/xampp/htdocs

type:
composer create-project laravel/laravel lsapp



6) ADD PROJECT FOLDER

(click folder icon, click Open Folder, select lsapp folder)


.
NEXT: Laravel From Scratch 3

Laravel From Scratch 1

.

.

INTRODUCTION TO LARAVEL



What Is Laravel?
• Open Source PHP Framework
• Aims to make dev process pleasing without sacrificing quality
• One of the most popular and respected PHP frameworks
• Uses The MVC (Model View Controller) Design Pattern


What Is Included In This Series?
• Laravel Overview
• Installation / Setup
• Build a Website & Blog Application
• Authentication & Access Control
• Deploying a Laravel Application

AFTER THIS SERIES:
10 Project Laravel Course
• Basic Website
• Todo List
• Business Listings App
• Photo Gallery
• REST API
• OctoberCMS Website
• Twitter API App
• Bookmark Manager
• Contacts Manager With Vue.js
• Backpack Site Manager

What Does Laravel Do?
• Route Handling
• Security Layer
• Models & DB Migrations
• Views/ Templates
• Authentication
• Sessions
• Compile Assets
• Storage & File Management
• Error Handling
• Unit Testing
• Email & Config
• Cache Handling


Installing Laravel
Laravel is installed using Composer
• Download composer from http://getcomposer.org
• Install Composer
composer create-project laravel/laravel myapp
• Add V-Hosts and hosts file entry

Artisan CLI
Laravel includes the Artisan CLI which handles many tasks
• Creating controllers & models
• Creating database migration files and running migrations
• Create providers, events, jobs, form requests, etc
• Show routes
• Session commands
• Run Tinker
• Create custom commands

Examples of Artisan Commands
$ php artisan list
$ php artisan help migrate
$ php artisan make:controller TodosController
$ php artisan make:model Todo —m
$ php artisan make:migration add todos_to_db —table=todos
$ php artisan migrate
$ php artisan tinker


Eloquent ORM
Laravel includes the Eloquent object relational mapper
• Makes querying & working with the DB very easy
• We can still use raw SQL queries if needed
Use App\Todo;
$todo = new Todo;
$todo->title = 'Some Todo';
$todo->save();


Blade Template Engine
• Simple & powerful
• Control structures (if else, loops, etc)
• Can use <?php echo 'PHP Tags'; ?>
• Can create custom components
• Template Inheritance: Extend layouts easily


<!-- Stored in resources/views/layouts/app.blade.php -->
<html>
<head>
<title>App Name - @yield('title')</title>
</head>
</body>
@section('sidebar')
This is the master sidebar.
@show
<div class="container">
@yield('content' )
</div>
</html>


<!-- Stored in resources/views/child.blade.php -->
@extends('layouts.app')
@section('title','Page Title')
@section('sidebar')
@parent
<p>This is appended to the master sidebar.</p>
@endsection
@section('content')
<p>This is my body content. </p>
@endsection

FOLLOW:
Youtube.com/c/traversymedia
Facebook.com/traversymedia
Twitter.com/c/traversymedia

SUPPORT:
Patreon.com/traversymedia
Paypal.me/traversymedia
.

NEXT: Laravel From Scratch 2

Labels