අපි කලින් ලිපි කිහිපයකින්ම කතා කලා මේ MEAN Stack ගැන වෙන වෙනම Examples විදියට. මේ ලිපි කිහිපයෙන් කරන්න බලාපොරොත්තු වෙන්නේ මේ වෙන වෙනම කතා කරපු Applications ටික එකතු කරලා තනි Application එකක් හදා ගන්න. මේ Application එක Issue Tacking Application එකක්. ඒ කියන්නේ Users ලට Log වෙලා Issues post කරන්න පුළුවන් Application එකක්.

මේ Post එකෙන් කලින් post වලදි වගේ මේ MEAN Stack එක Install කරන විදිය මුල ඉදන් කියන්න යන්නේ නෑ. ඒ ගැන කලින් ලිපි වලින් අපි කතා කලා. ඒ ලිපි බැලුවේ නැත්නම් මේ Link වලින් මුලින්ම ඒ ටික බලලා ඉන්න.

• MongoDB
• Express
• Angular
• Node

මේ Project එකේ අන්තිමට මොන වගේ Application එකක් හැදෙයිද කියලා Idea එකක් ගන්න මේ Images ටික බලන්න.

හරි එහෙනම් අපි මුල ඉඳන් වැඩේ පටන් ගමු..

Installing Node.js & Angular CLI

මේ Project එකේ dependencies install කරගන්න ඉදිරියේදී පාවිච්චි කරන්නේ npm package එක. ඒක නිසා මුලින්ම Nodejs Install කරගන්න ඕන. දැනට Nodejs Install කරලා නැත්නම් මේ Link එකෙන් ගිහින් Download කරගන්න.

දැන් අපි ළඟ npm එක තියෙන නිසා අපිට පුළුවන් ලේසියෙන්ම අලුන් Angular project එකක් Initialize කරගන්න. ඒකට මේ Command එකෙන් Packages Install කරගන්න.

$ npm install -g @angular/cli

මේ command එකෙන් අපේ path variable එකක් හැදෙනවා ng commands වලට Response කරන්න පුළුවන් විදියට.

FRONT-END Design

මේ පළවෙනි ලිපියෙන් කරන්න යන්නේ Front-End එක Design කරගන්න එක. ඒකට මුලින්ම අලුතින් Project එකක් හදා ගන්න ඕන. ඒකට අපි මුලින් Install කරපු ng command එක දැන් භාවිතා කරන්න පුළුවන්. ඒකට මේ Command එක Use කරන්න. (Command Line එකේ)

ng new frontend

Project එක හදා ගන්නකොට අපෙන් අහනවා Routing Module එක දාන්න ඕනද කියලා. වැඩේ ලේසි වෙන්න ඒකට yes දෙන්න. අපි මේකට ගන්නේ CSS stylesheets. ඒකත් එතනින් Select කරගන්න.

අදාල Module ටික install වෙලා ඉවර වුණාම font-end කියලා අලුතින් Project එකක් හැදෙයි. ඒකෙ අපේ Font-end එකට අදාල Codes ටික තියා ගන්නේ. දැන් අලුතින් හැදුනු folder එක ඇතුලට ගිහින් ng serve කරලා අලුතින් හැදුනු project එක වැඩ කරනවද කියලා test කරලා බලන්න පුළුවන්.

cd fontend
ng serve -o

Adding Angular Material

Interfaces ලස්සනට Design කරගන්න පුළුවන් වෙන්න අපි මේ Project එකට භාවිතා කරනවා Angular Material CSS Library එක. ඒක මේ විදියට Project එකට Add කරගන්න පුළුවන්.

ng add @angular/material

මේ Package එක Install වෙනකොට ඔයාගෙන් අහයි මොන වගේ Theme එකක්ද ඕන Animation Use කරන්නද වගේ දේවල්. ඒවට yes select කරලා enter කරන්න.

Creating Components

දැන් අපි හදන්නේ අපිට ඕන කරන Components ටික හදා ගන්න. මේකට අපි ng command එක use කරනවා.

ng g c components/list 
ng g c components/create
ng g c components/edit

මේකෙන් components කියලා folder එකක් හැදිලා ඒක ඇතුලට මේ list, create, edit කියල components 3 create වෙනවා. අපි දැන් බලමු routings ටික හදා ගන්න.

Adding Routing

දැන් අපි කලාන් හදා ගත්ත RouterModule එකේ තමයි අපිට ඕන කරන routes ටික ලියා ගන්න ඕන.

src -> app -> app-routing.module.ts file එක open කරගෙන මේ Code එක routes කියන variable එක වෙනුවට replace කරගන්න.

const routes: Routes = [
  { path: 'create', component: CreateComponent },
  { path: 'edit/:id', component: EditComponent },
  { path: 'list', component: ListComponent },
  { path: '', redirectTo: '/list', pathMatch: 'full'}
]; 

මේ විදියට Code එක දාගෙන උඩින්ම අදාල Components Import කරගන්නත් ඕන වෙනවා.

මේ ටික කර ගත්තාම ඔයාගෙ AppRoutingModule එක මේ විදියට තියෙන්න ඕන.

 
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CreateComponent } from './components/create/create.component'
import { EditComponent } from './components/edit/edit.component'
import { ListComponent } from './components/list/list.component'

const routes: Routes = [
  { path: 'create', component: CreateComponent },
  { path: 'edit/:id', component: EditComponent },
  { path: 'list', component: ListComponent },
  { path: '', redirectTo: '/list', pathMatch: 'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

දැන් අපි කරන්න යන්නේ හැම page එකේම Display වෙන විදියට පොඩි Menu tool එකක් දාගන්න. ඒකට මේ Code එක app.component.html file එකේ Paste කරගන්න.

<mat-toolbar>
  <span>Angular 6 - MEAN Stack Sample Application</span>
</mat-toolbar>
<div>
  <router-outlet></router-outlet>
</div> 

අපි මේ Layout එකට <mat-toolbar> කියන tag එක යොදා ගන්න හින්දා මුලින්ම ඒක import කරගන්න ඕන. ඒකට මේ Import command එක app.module.ts එකේ දාන්න

 
import { MatToolbarModule } from '@angular/material'; 

ඒ වගේම ඒකෙ Import Array එකටත් මේක දාගන්න ඕන.

 
imports: [
    ...
    MatToolbarModule
 ], 

අන්තිමට File එකේ Content එක මේ වගේ තියෙන්න ඕන

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ListComponent } from './components/list/list.component';
import { CreateComponent } from './components/create/create.component';
import { EditComponent } from './components/edit/edit.component';
import { MatToolbarModule } from '@angular/material'; 

@NgModule({
  declarations: [
    AppComponent,
    ListComponent,
    CreateComponent,
    EditComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

app.component.html

<mat-toolbar>
  <span>Angular 6 - MEAN Stack Sample Application</span>
</mat-toolbar>
<div>
  <router-outlet></router-outlet>
</div>

<router-outlet></router-outlet>

 

මේක කලාම අපේ Basic Frontend part එක ඉවරයි. ඊළඟ Part එක තමයි අපේ Application එකේ BackEnd එක Design කරගන්න විදිය. ඊළඟ ලිපියෙන් ඒ ගැන කතා කරමු. මේකෙ Installation වල හරි Code වල හරි මොකක් හරි ප්‍රශ්ණයක් ආවොත් Comment එකක් දාන්න.

The post MEAN Stack වලින් Sample Application එකක් Design කරගමු. (PART 01) appeared first on The SIGMA.

මේ පාඩමේදී බලාපොරොත්තු වෙන්නේ Routing කරන්නේ කොහොමද කියල.ඔයා තාම express install කරගෙන නැත්නම් මෙන්න මේ link එකට ගිහින් කලින් post එක බලන්න.

අද මම get request handle කරන විදිය තමා කියල දෙන්න බලාපොරොත්තු වෙන්නේ. මම මේ routes ටික ලියන්නේ app.js එකේ

මෙතන 1st line එකෙන් කරන්නේ express කියන framework එක load කරගන්නවා var express කියල තියෙන variable එකට.

එතකොට 2nd line එකෙන් කරන්නේ app කියල variable එකක් හදාගන්නවා express එකේ තියෙන method call කරන්න

එතකොට දැන් අපි බලමු server එක හදාගන්න හැටි

මෙතන මම කරලා තියෙන්නේ අපේ express project එක 8080 කියන port එකෙන් open කරන එක.එතකොට මේ නමක් නැති function වලට කියන්නේ anonymous function කියල.

කොහොමද දැන් මේ express project එක run කරන්නේ?

ඔයාගේ terminal එකේ node app.js කියලා type කරලා enter කරන්න.

.ඔන්න ඔය විදියට display උනොත් අවුලක් නෑ

දැන් බලමු get request handle කරන විදිය

app.get("/home",function(req,res){
    res.send("This is home page");
}); 

මෙතන වෙලා තියෙන්නේ get request එකක් ආවොත් /home කියල එතකොට server එක response කරනවා.This is home page කියල.මට අමතක උනා කියන්න req වලින් කියන්නේ request කියන එක res වලින් කියන්නේ response කියන එක. send වලින් වෙන්නේ html page එකක අපේ message එක render කරන එක.

http://localhost:8080/home කියල ඔයාගේ web browser එකේ address එක විදියට දුන්නොත් This is home page කියල display වේවි.මතක තියාගන්න ඔය app.js වල මොනවහරි වෙනස් කරොත්, save කරලා ආයේ server එක start කරන්න වෙනවා.

ඔයාට මේ send වලදී html tag use කරන්නත් පුළුවන්.හැබැයි මේක අපි use කරන් නෑ මොකද ඒක සංකීර්ණ වැඩි සරලවම කිවොත් කැතයි.එත් use කරන්නේ කොහොමද කියල බලන්න මම එක example එකක් දාන්නම්.

 
app.get("/login",function(req,res){
    res.send("<h1>This is login page</h1>");
}); 

මෙන්න මේ get request එක වැදගත්

  
app.get("/home/:id/sigma",function(req,res){
    res.send("sigma page");
}); 

මෙතනදී වෙන්නේ pattern එකක් search කරනවා වගේ seen එකක්. :id කියන එකට url request එකේදී ඕනි දෙයක් එන්න පුළුවන්.නමුත් /home / සහ /sigma දෙපැත්තෙන් තිබුනොත් විතරයි sigma page කියල render කරන්නේ http://localhost:8080/home/dfbsdjfw/sigma මෙන්න මේ වගේ url request එකක්.

දැන් අපි හිතමු අපේ website එකේ නැති page එකක් request කරනවා කියලා

  
app.get("*",function(req,res){
    res.send("Page Not found");
}); 

“*” කියන්නේ ඕනිම url get request එකකට render කරනවා Page Not found කියල.

මේ get request එක අපේ app.js එකේ මුලින් කියපු ඒවායින් පස්සේ තමයි මේක use කරන්නේ නැත්නම් හැම url requset එකටම Page Not found කියල තමා එන්නේ.http://localhost:8080/jhwwbdjwdbwkdjnwk වගේ request එකකට අපි code කරලා නැති නිසා අපිට Page Not found කියන page එක තමා ලැබෙන්නේ

පහල තියෙනවා මුළු code එකම අද කතා කරපු.

 
var express=require("express");
var app=express();

app.get("/home",function(req,res){
    res.send("This is home page");
});
app.get("/login",function(req,res){
    res.send("<h1>This is login page</h1>");
});
app.get("/home/:id/sigma",function(req,res){
    res.send("sigma page");
});

app.get("*",function(req,res){
    res.send("Page Not found");
});

app.listen(8080,function(){
    console.log("server has been started");
}); 

අදට මේ ටික ඇති වගේ post එකක් ටිකක් වෙනදට වඩා දිගයි.ඊලග post එකෙන් හමුවෙමු.

The post express-03 basic Routing කරමු appeared first on The SIGMA.

codeigniter වල laravel වල වගේ ලොකූ folder structure එකක් නෑ… codeigniter වල folder structure එක බැලුවොත් application, system සහ user_guide කියලා ප්‍රධාන folder තුනක් දැකගන්න පුලුවන්..මුලින්ම අපි application folder එක ගැන බලමු..

1.0 – Application Folder

application folder  එකේ තමයි අපිට project එක කරන්න අවශ්‍යි වන වැඩදගත්ම files ටික තියෙන්නෙ. උදාහරණයක් විදිහට ගත්තොත් models, views, controllers, config වගේ වැදගත්ම files මේ ටික තියෙන්නේ මෙන්න මේ applications folder එක ඇතුලෙ.. ඒ නිසා අපි හරියටම  application folder එක ගැන මුලින්ම දැනගනිමු.application කියන ලොකු folder  එක ගත්තොත් මෙන්න මේ වගේ පොඩි පොඩි  folders ගොඩක් ඔයාලට දැකගන්න පුළුවන්.

හරි අපි දැන් එකින් එක මේ folders ගැන කතා කරලා බලමු.

1.1 – Cache  –

මෙයින් කරන්නේ web page එක access කරන්න speed එක වැඩි කරන එකයි. තවත් විදියකින් කියනවා නම් web page එකේ performance එක වැඩි කරන එකයි.

1.2 – Config –

මේ folder එක ඇතුලෙ නම් ටිකක් වැදගත් php files ගොඩක් තියෙනවා.. හරි folder එක open කරලා බැලුවම මෙන්න මේ වගේ files  ගොඩක් දැකගන්න පුළුවන් .

ඔන්න ඔය උඩින්ම තියෙන autoload.php file එකෙන් තමයි ඔයාලට  ඔයාගේ project එකට අවශ්‍ය  සියලුම libraries ටික load කරගන්නේ.අපේ project එකේ තියෙන base url  ටික set කරන්නේ මේ config.php කියන file එක ඇතුලට..   අපේ project එක database එකත් එක්ක සම්බන්ධ කරන්නේ මෙන්න මේ database.php   මෙන්න මේ file එකෙන්. config folder එක ඇතුලේ තියෙන  මීළඟ වැදගත් වැදගත්ම file එක තමයි routes.php කියන්නේ. browser එක හරහා එන  url  එකට අනුව  අදාළ controller  එකෙ function  එක  call  කරන්නේ මෙන්න මේ routes.php කියන file එකෙන්.

1.3 – controllers

codeigniter folder structure එකෙ  තියෙන  තවත්  වැදගත්ම folder එකක් තමයි මේ controllers කියන්නේ. ඇත්තටම කිව්වොත් අපේ project එක පාලනය වෙන්නේ මෙන්න මේ කියන controllers folder එකෙන්. සියලුම  server-side functionalities  ඔක්කෝම පාලනය කරන්නෙත් මෙන්න මේ controllers folder එකෙන්..මේ  වැඩේ කොහොමද වෙන්නේ කියලා හරිහැටි දන්නෙ නැතිනම්  බය වෙන්න එපා..ඉදිරි පාඩම් වලදී අපි ගොඩක් කතා කරනවා මේ controllers  ගැන

1.4 – core

codeigniter කියන framework එක හැදිලා තියෙන ප්‍රධාන files ටික ආරක්ෂා කරන එක තමයි මෙන්න මේ core folder එකෙන් කරන්නෙ.. සාමාන්‍යයෙන් මේ folder එකේ තියෙන files වෙනස් කරන්න  යන්නේ නැහැ. එහෙම වෙනස්  කරනවානම් ‘application\core’  ඇති file එකේ නමින්ම තවත් file එකක් ‘system \core’ folder එක  ඇතුලේ  හදන්න ඕනේ.

1.5 – helpers

නමේ තේරුම වගේම තමයි… මෙයින් කරන්නේ project එක කරගෙන යද්දි  ඔයාට  help  කරන එක.. Helpers  ඇතුලේ define කරලා තියෙනවා functions සෙට් එකක්  අදාල වැඩේ ලේසි කරගන්න..උදාහරණයක් විදිහට ගත්තොත් links හදන්න ලේසි ලේසි වෙන්න URL Helpers තියෙනවා..forms  හදන්න ලේසි වෙන්න Form Helpers තියෙනවා..තව ගත්තොත් Text Helpers, cookie Helpers වගේ ඒවත් තියනවා.. සාමාන්‍යයෙන් helper files තියෙන්නෙ system/helpers හෝ application/helpers directory  එක අතුලේ.. අපිට Helper  එකක්  මේ විදියට load  කරගන්න පුලුවන්..

$this->load->helper('name'); // name means that , helper name without .php file extension and the “helper” part

1.6 – Libraries 

             ඔයාලගේ project   එකට අවශ්‍ය ඔයාල විසින් develop  කරපු files මෙන්න මේ folder  එක අතුලේ store කරන්න පුළුවන් .

1.7 – Logs

project එකෙ තියන errors , exception handling වගේ ඒවායේ විස්තර තියාගන්නේ  මෙන්න මේ Logs කියන folder එකෙ.

1.8 – models

controller එකක් database   එකත් එක්ක ගනුදෙනු කිරීමේදී තමයි මේ models අවශ්‍යය වෙන්නේ.. controller එකක තියන data, database  එකට  යවද්දීත් database එකේ තියන data, controller එකට  ගනිද්දිත් මෙන්න මේ models අවශ්‍යය වෙනවා..  කෙටියෙන්ම කිව්වොත් controller එකක් database  එකත් සමග සම්බන්ධ වෙන්නේ මෙන්න මේ models හරහායි..models කොහොමද වැඩ කරන්නෙ කියල ඔයාලට ඉදිරි පාඩම් වලදී හොඳටම තේරේවි.

1.9 – third_party

plugins store  කරන්නේ මෙන්න මේ third party කියන folder එක ඇතුලෙ ..

1.10 –  view

අපිට පෙනෙන output එක එහෙමත් නැත්නම්  සියලුම html files store කරන්නේ  මෙන්න මේ view folder එක ඇතුලේ.

2.0  System folder 

system කියන ලොකු folder  එක ගත්තොත් මෙන්න මේ වගේ පොඩි පොඩි  folders ගොඩක් ඔයාලට දැකගන්න පුළුවන්

ඔයාලට හොඳට බැලුවොත් පෙනෙයි මෙතන තියන folders  ඔක්කොම වගේ කලින් කතා කියලා තියනවා..  අලුත් එකකට කියලා තියෙන්නෙ fonts කියන folder  එක.. fonts  වලට අදාළ සියලුම විස්තර   මේ fonts folder එක ඇතුලෙ තමයි තියාගන්නේ.

3.0 – user_guide

user_guide කියන ලොකු folder  එක ගත්තොත් මෙන්න මේ වගේ පොඩි පොඩි  folders ගොඩක් ඔයාලට දැකගන්න පුළුවන්

folders ගොඩක් වගේ පෙනුනට මේ තියෙන්නෙ codeigniter වල user manual guide එකෙ  offline version එකයි. අපි download  කරන්න සෑම codeigniter version එකක් එක්කම user guide  එක auto download වෙනවා ..මේක  බැලුවොත් ඔයාලට තේරුම තේරුම් ගන්න පුළුවන් codeigniter වල define  කරල තියන functions,Helpers සහ libraries    වගේ දේවල්..

ඔන්න ඔය ටික තමයි codeigniter වල folder structure එක  ගැන කියන්න තියෙන්නේ.. අදට පාඩම නිමයි.. codeigniter  වලින් basic application  එකක් හදන විදිය අපි  මීළඟ පාඩමින්  බලමු..  හැමෝටම සුභ දවසක් !

The post Codeigniter වල folder structure එක හඳුනාගනිමු appeared first on The SIGMA.