කොහොමද යාලුවනේ! ඔන්න මං අදත් ආවා Angular පාඩම් මාලාවේ තුන්නවෙනි පාඩමත් සමගින්.කලින් පාඩමේදී අපි කතා කලා Angular වල folder structure එක සහ index page එක render වුන විදිය ගැන. අද පාඩමේදී අපි කතා කරන්ට බලාපොරොත්තු වෙන්නේ Angular වල components ගැන.ගොඩක් දේවල් කතා කරන්න තියන නිසා කෙලින්ම පාඩමට බහිමු.

Angular වල component එකක් හැදිලා තියෙන්නේ Template , class හා metadata කියන කොටස් තුනේ එකතුවෙන්.view එකට අදාලව තියන HTML code ඔක්කොම වගේ අයිති වෙන්නේ මෙන්න මේ Template කියන කොටසට…component එකේ properties , methods හා view එකට අදාලව තියන logic තියාගන්නේ component class එක ඇතුලේ..metadata කියන කොටසේ තමයි තියෙන්නේ component එක අපේ app එකට සම්බන්ධ(attach) කිරීමට අදාල විස්තර…Metadata define කරලා තියෙන්නේ Decorator කියලා එකකින්.Decorator එකක් කියන්නේ අපේ component එක app එකට සම්බන්ධ කිරීමට අදාල විස්තර සපයන විශේෂ function එකක්.component එකක ප්‍රධාන කොටස් තුන ගැන සරලව ඔය ටික තමයි කියන්න තියෙන්නේ…දැන් අපි එකින් එක ගැන තව පොඩ්ඩක් කතා කරලා බලමු.

මුලින්ම අපි අලුත් component එකක් හදාගමු. ඔයාලගේ terminal එකේ අපි කලින් හදා ගත්ත angular project එක ඇතුලට ගිහින්ng g c <component_name> කියන command එක දුන්නාම අලුත් component එකක් හදා ගන්න පුලවන්.ඔන්න ඔය විදියට component එකක් හදා ගත්තාම ඔයාලට පේනවා file 4 ක් තියන folder එකක් තමයි component එකක් විදියට හැදිලා එන්නේ.අන්න ඒ file 4 ගැන සලකා බැලුවොත් , typescript (.ts ) file එකේ තමයි component එකේ class එකයි metadata යි තියා ගන්නේ.html file එකේ තමයි component එකේ view එක තියෙන්නේ. component එකකට අදාල styles තියාගන්නේ මෙන්න මේ .css කියන css file එක ඇතුලේ..අනික් file එක(.spec.ts) නම් පාවිච්චි කරන්නේ testing වලට.

ඔයාලට මතකද දන්නේ නෑ මං කලින් පාඩමේදී පාවිච්චි කලා root component කියලා වචනයක්..ඒ වෙලාවෙදි ඒක ගැන කතා කලේ නැති වුනාට දැන් අපි ඒ ගැන පොඩ්ඩක් කතා කරලා බලමු.root component එක තමයි අපේ app එකේ තියන ප්‍රධානම component එක.අපි අලුතින් හදන component දාන්නේ මෙන්න මේ root component එක ඇතුලට.මුලින්ම අපිට index page එක render වෙද්දි පෙනුනේ මෙන්න මේ root component එකේ elements තමයි.මුලින්ම අපි root component එකේ typescript file එකට ගිහින් බලමු.

ඔන්න ඔහොම තමයි root component එකට අදාල typescript file එක( app.component.ts file ) තියෙන්නේ. මෙහි මුලින්ම තියනවා Metadata..

Metadata ගැන බැලුවොත්, මුලින්ම තියන selector එක , component එක html file එකට attach කරන විට custom html tag එකක් විදියට වැඩ කරනවා …අපි open කරලා තියෙන්නේ root component එකට අදාල typescript file එක නිසා එහි selector එක නම් කරලා තියනවා app-root කියලා..දැන් ඔයාලට index.html file එක ඇතුලට ගියොත් බලාගන්න පුලුවන් app-root කියලා custom html tag එකක් තියනවා

ඔන්න ඔය custom html tag එක තියන තැනට තමයි root component එක index page එකට attach කරලා තියෙන්නේ.

component එකක් තවත් component එකකට හරි අදාල html page එකකට හරි attach කරන්න පුලුවන් විදි තුනක් තියනවා..පලමු ක්‍රමය තමයි selector එක custom html tag එකක් විදියට පාවිච්චි කරලා attach කරන්න පුලුවන්..අපි ඉහලින් කතා කලේ අන්න ඒ ක්‍රමය ගැන තමයි..දෙවෙනි ක්‍රමය තමයි selector එක class එකක් විදියට පාවිච්චි කරල attach කරන්නත් පුලුවන්..code එක ගත්තොත් මෙන්න මේ වගේ..

app-component.ts

index.html

තුන්වෙනි විදිය තමයි selector එක attribute එකක් විදියට පාවිච්චි කරලත් component එක page එකට attach කරන පුලුවන්.ඒකේ code එක ගත්තොත් මෙන්න මේ වගේ..

app.component.ts

Index.html

ඔන්න ඔය ක්‍රම තුනෙන් කැමති විදියක් පාවිච්චි කරලා අලුත් component එකක් html page එකට attach කරන්න පුලුවන්.

Metadata වල ඊලගට තියෙන්නේ templateurl එකයි styleurls එකයි. templateurl එකෙන් තමයි අපේ component එකේ html page එක තියන තැන පෙන්නනේ. component එකේ styles තියන css file එක තියන තැන පෙන්නනේ මෙන්න මේ styleurls එකෙන්.component එකකට අදාල metadata නම් තියෙන්නේ ඔච්චරයි..

typescript file එකේ metadata වලට යටින් තියෙන්නේ component එකේ class එක..component එකේ methods , properties තියාගන්නේ මෙන්න මේ component class එක ඇතුලේ. මුලින් අපි කතා කලානේ root componet එකේ metadata ගැන.දැන් බලමු root componet එකේ class එක ගැන.

ඉහලදි මම පෙන්නපු විදියට root component එකේ typescript file එක ඔන්න ඔය විදියට තමයි තියෙන්නේ. root component කියලා metadata වලට යටින් තියෙන්නේ component class එක.root component class එක ගත්තොත් ඔයාලට පේනවා ඇති title කියලා property එකක් define කරලා තියනවා..ඔන්න ඔය විදියට අපේ component එකට අවශය properties , methods ඕනි තරමක් define කරන්න පුලුවන් මෙන්න මේ component class එක ඇතුලේ.

component එකක තියන අනෙක් කොටස තමයි view එක .component එකේ view එක පෙන්නනේ මෙන්න මේ html file එකෙන්.root component එකේ view එක බැලුවොත් මෙන්න මේ වගේ view එකක් තමයි තිබුනේ.

root component එකට අදාල html file එක බැලුවොත් මෙන්න මේ වගේ.

මුලින්ම තියනවා well come message එක.

ඔයාලට මතක ඇති root component class එකේ property එකක් තිබුණා title කියලා.අන්න ඒ title property එක තමයි well come massage එක වදියට මෙතනදි display වෙලා තියෙන්නේ.ඔන්න ඔය වඳියට component class එකේ define කරන properties සහ methods අපේ component එකේ view එකට අවශය විදියට display කරලා පෙන්න පුලුවන්.component ගැන කියන්න තියෙන්නෙනම් ඔච්චරයි. component ගැන තවමත් පොඩි හෝ අවුලක් තියනවනම් මෙන්න මේ උදාහරණයත් බලන්නකෝ.

මෙහිදී මම කරන්න යන්නේ අලුතින් component එකක් හදාගෙන ඒක root component එකට attach කරලා display කරන එක.

මුලින්ම මම component එකක් හදා ගන්නම් “firstComponent” කියලා.

ng g c firstComponent

හරි, දැන් ඔයාලට හැදිලා එන්න ඇති file 4 ක් තියන “firstComponent” කියලා folder එකක්. මුලින්ම මම හදා ගත්ත අලුත් component එකේ property එකක් define කරනවා “header” කියලා. “header ” එකට value එකක් දෙනවා “This is my first component ” කියලා.

හරි , දැන් ඒ define කරපු property එක මෙන්න මේ විදියට html page එකට set කරමු.

හරි දැන් හදා ගත්ත component එක root component එකට attach කරමු. අපේ හදා ගත්ත component එක පැහැදිලිව පෙනෙන්න ඕනි නිසා root component එකේ දැනට තියන elements delete කරලා අපේ අලුත් component එක attach කරමු.හරියට මෙන්න මේ වගේ.

ඔන්න ඔය විදියට අලුත් component එක attach කලාට පස්සේ මෙන්න මේ වගේ view එකක් ඔයාලට දැක ගන්න පුලුවන්

හරි, components ගැන හොදටම තේරෙන්න ඇති කියලා හිතනවා..තවත් මොකක් හරි අව්ලක් තියනවනම් comment එකක් දාන්න.මීලඟ පාඩමෙන් අපි බලමු Angular වල data binding ගැන.මීලඟ පාඩමෙන් හමුවන තුරු ඔබට සුභ දවසක් ! ☺☺

The post Components in Angular appeared first on The SIGMA.

laravel folder structure එක ගත්තොත් middleware එක තියෙන්නේ App/Http/Middleware කියන තැන. මේ Middleware folder එක ඇතුලට ගියාම ඔයාලට දැකගන්න පුලුවන් laravel වල default එන middlewares කිහිපයක්ම තියනවා.(VerifyCsrfToken , Authenticate , EncryptCookies. ..etc).අපිට ඕනි නම් middleware එකක් හදන්න පුලුවන්

php artisan make:middleware <middleware_name>

කියන artisan command එක run කරලා.middleware එකක් හදා ගත්තට පසුව අපි පලමුවෙන්ම කරන්න ඕනි දේ තමයි හදාගත්ත middleware එක App/Http/Kernel.php එකේ register කර ගන්න එක. හරි ඔන්න ඕකයි සිද්ධිය..☺☺..පොඩ්ඩක් පොඩ්ඩක් අව්ල් වගේනං අපි පොඩි උදාහරණයක්ම ඇරගෙන වැඩේ කරලා බලමුකෝ..😃😃

හරි මම middleware එකක් හදා ගන්නවා checkIp කියලා..

php artisan make:middleware checkIp

ඊට පස්සේ ඒ හදා ගත්ත middleware එක මෙන්න මේ විදියට kernel එකේ register කර ගන්නවා..

<?php namespace App\Http; use Illuminate\Foundation\Http\Kernel as HttpKernel; class Kernel extends HttpKernel { /** * The application's global HTTP middleware stack. * * These middleware are run during every request to your application. * * @var array */ protected $middleware = [ \App\Http\Middleware\CheckForMaintenanceMode::class, \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class, \App\Http\Middleware\TrimStrings::class, \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class, \App\Http\Middleware\TrustProxies::class, ]; /** * The application's route middleware groups. * * @var array */ protected $middlewareGroups = [ 'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
            'throttle:60,1',
            'bindings',
        ],
    ];

    /**
     * The application's route middleware.
     *
     * These middleware may be assigned to groups or used individually.
     *
     * @var array
     */
    protected $routeMiddleware = [
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
        
        'checkIp'=> \App\Http\Middleware\checkIp::class,
    ];
}

හරි මට දැන් කරන්න ඕනි දේ තමයි 127.0.0.1 කියන Ip address එකින් request එකක් ආවොත් එයා system එකට ඇතුලු වෙන එක වලක්වන එක. එතකොට අපි checkIp කියන middleware එකේ මෙහෙම කලානම් හරි නේද…

හරි දැන් මෙන්න මේ විදියට rote එකයි view එකකුයි set කරලා run කරලා බලන්නකෝ…

Route ;

Route::get('/home',function(){
    return view('testView.home');
})->middleware('checkIp');

output

වැඩේ හරි නේද…127.0.0.1 කියන ip එකෙන් එන requests වලට system එක access කරන්න එක middleware එකෙන් වලක්වලා තියෙන්නේ..

ඔන්න ඔය විදියට route එකට middleware එක set කරනවට අමතරව අපිට පුලුවන් middleware එක controller එකක් ඇතුලට set කරන්න…එහෙම කලාම වෙන්නේ ඒ controller එකේ තියන සියලුම methods සදහාම middleware එකෙන් ආරක්ෂාවක් සැලසීමයි..controller එකට middleware එක අපි set කරන්නේ __construct() කියන method එක එකේදී..හරි අපි එහෙනං ඒකත් කරලා බලමු.

දැන් පුරුදු විදියටම route එකයි view එකයි set කරලා output එක බලන්නකෝ…

Route ->

 Route::get('/home','studentController@index');

Output

ඔන්න ඔය විදියට තමයි middleware එකක් set කරන්නේ..middleware එකට වැඩි ගනනක් අපිට set කරන්න ඕනිනම්, middlewares ටික __constructor() method එකේ parameters විදියට අපිට pass කරන්න පුලුවන්.හරියට මෙන්න මේ විදියට…

demo1,demo2,demo3 කියලා middlewares තුනක් මං ගන්නම්..

public function __construct(){
        $this->middleware('demo1','demo2','demo3');
}

ඔන්න ඔය විදියට තමයි multiple middlewares set කරන්නේ… middlewares ගොඩක් තියනවනම් controllers විශාල ගානකට set කරන්න ආමාරුයි නේ…😯😯 අන්න ඒ නිසා අපිට පුලුවන් ඒවා kernel එකේදීම ඒවා ටික group කරගන්න..හරි මගේ demo1,demo2 සහ demo3 කියන middlewares ටික group කරලා ඒකට මම නමක් දෙනවා demo කියලා…

    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
            'throttle:60,1',
            'bindings',
        ],

        'demo'=>[
            'demo1',
            'demo2',
            'demo3',
        ],
    ];

දැන් middleware එක controller එකට set කරමු…

public function __construct(){
        $this->middleware('demo');
}

හරි අපි දැන් හිතමු කලින් database එකේ ඉන්න user කෙනෙක්ට system එක access කරන එක වලක්වන්න ඕනි කියලා…අන්න එතකොට middleware එක set කරන්නේ කොහොමද කියලා දැන් අපි බලමු.
මගේ database එකට නමක් දෙනවා studentdatabase කියලා..ඒකේ තියන student table එක සලකමුකෝ…

දැන් මට ඕනි name එක ‘smith’ කියලා තියන student , system එක access කරන එක වලක්වන්ට..එතකොට route එක මෙන්න මේ විදියට set කරන්න පුලුවන්..

 Route::get('/profileInfo',function(){
    return view('testView.prof');
})->middleware('profile:smith');

route එක ඔන්න ඔය විදියට set කරන්න පුලුවන්..middleware එක මෙන්න මේ විදියට define කලානම් හරි නේද..

Output එකත් බලන්නකෝ…

;

හරි නේද …’smith’ user ට system එක access කරන්න දෙන එක middleware එකෙන් වලක්වලා තියෙන්නේ….

හරි ඔන්න ඔය ටික තමයි middleware එක ගැන කියන්ට තියෙන්නේ…අදට පාඩම ඉවරයි..ඔයාලගේ අදහස් කියලා comment එකක් දාන්නත් අමතක කරන්න එපා..project එකට අදාල source code එක පහල තියන link එකට ගිහින් බලාගන්න පුලුවන්..සුබ දවසක් හැමෝටම !

GitHub Source Code

The post Laravel- Middleware appeared first on The SIGMA.