කොහොමද ඉතින් යාලුවනේ ඔන්න අද මම ගොඩ කාලෙකට පස්සේ Bootstrap සම්බන්ධව ලියන පාඩම් මාලාවේ දෙවෙනි ලිපිය අරගෙන එන්න තමයි ලෑස්ති වෙන්නේ. ටිකක් ලිපිය අරගෙන එන්න කල් ගිය එක සම්බන්ධව තරහ වෙන්න එපා කියලත් මම යාලුවන්ගෙන් ඉල්ලනවා. ඔයාලට Bootstrap හැඳින්වීම සම්බන්ධ කලින් ලිපිය මග හැරුනා නම් මෙතනින් ඒ ලිපිය කියවන්න පුළුවන්. අද මම කියල දෙන්නේ කොහොමද bootstrap 3 හෝ bootstrap 2 ඔයගෙ project එකට දාගන්නෙ කියන කාරණය. හරි එහෙනම් වැඩි කතා නැතුව අපි පාඩමට අනුගත වෙමු.
 
අපේ project එකට Bootstrap Resources ඈඳා ගන්න ක්‍රම 2ක් තියෙනවා.

1.bootstrap download කරලා ඒ assets ටික අපේ project folder එකට දාගන්න එක.
2.bootstrap CDN (Content Delivery Network)  use කරන එක.
අපි මුලින් bootstrap download කරල ඒ assets ටික අපේ project folder එකට දාගන්න විදිහ ගැන දැනගෙන ඊට පස්සෙ bootstrap 3 CDN use කරන හැටි දැනගමු. අද මම ඔයාලට මේ ලිපි මාලාව පටන් ගන්නකොට පොරොන්දු වුන විදියටම මේ හැම ක්‍රමයක්ම Bootstrap 2 සහ Bootstrap 3 කියන සංස්කරණ දෙකෙන්ම අරගෙන එන්න බලාපොරොත්තු වෙනවා. ඒ මොකද කියනවනම් කලින් ලිපියෙන් කියුව වගේ ඔයාලට Browser Compatibility වලදී IE8 වැනි පැරණි සංස්කරනයන්ට ගැලපෙන ආකාරයට ලෙහෙසියෙන් තමන්ගේ Pages Design කර ගන්න ඕනි කෙනෙක්ට Bootstrap 2 භාවිතා කරන්න පුළුවන්. එකෙන් කියන්නේ Bootstrap 3 වලින් IE8 වැනි පැරණි සංස්කරනයන්ට ගැලපෙන ආකාරයට Pages Design කර ගන්න බැහැ කියන එක නෙමෙයි, Script වැඩි වුනහම ටිකක් කරදරයිනේ.

1. bootstrap download කරලා ඒ assets ටික අපේ project folder එකට දාගන්න එක.

Twitter Bootstrap. එය එක්තරා ආකාරයක කලින් සාදන ලද Styles සහ Plugins එකතුන්ය එනම් Bootstrap යනු කලින් ලියන ලද CSS හා JS කේත සමූහයක් කියා හැඳින්වීමක්ද සිදුකල හැකියි. මෙන්න මේ කියන CSS හා JS කේත ඇතුලත් වූ දත්ත එනම් .css , .js යන Extension වලින් යුක්ත දත්ත ඇතුලත් assets ටික අඩංගු වන ෆෝල්ඩරය අපට ඔවුන්ගේ ප්‍රධාන වෙබ් පිටු වලට පිවිස බාගත කර ගත හැකිය. ඒ සඳහා විස්තරාත්මක උපදෙස් මාලාවක් ද සපයා ඇත. තවද මුලික වශයෙන් ඔබට Bootstrap සමග වැඩ කිරීමට හැකි දැනුමක්ද මෙම වෙබ් අඩවිය මගින් ලබාගන්නත් පුළුවන්. මුලින් අපි බලමු මේ දත්ත භාගත කර ගන්නේ කොහොමද සහ ඒ Files අපේ පිටුවට Link කර ගන්නේ කෙසේද යනවග.

 

Bootstrap 3
මුලින්ම http://getbootstrap.com/ කියන web page එකට යන්න.
හරි main page එකට ගියට පස්සෙ එකෙ තියෙන Download Bootstrap button එක click කරල download කරගන්න. Download කරම අපිට ලැබෙන්නෙ zip file එකක්, තවදෙයක් තියෙනවා අපි use කරන්නෙ full version එක. ඔයාට ඔනි නම් customize version එකක් download කරගන්නත් පුලුවන්. දැන් ඔයා භාගත කර ගත්ත Zip එක Extract කරලා බැලුවම ඔයාට මේ වගේ Folder Tree එකක් තියෙන්න ඕනි.

Copy 
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

දැන් ඔය CSS, JS සහා font files ටික ඔයාගෙ project එකෙ assets ටික අඩංගු වන ෆෝල්ඩරය තුල ඇති CSS, JS, font folders වලට දාන්න. ඒ විතරක් මදි ඔයාගෙ web page එකට link කරන්නත් ඔනි. පහල රුපයේ පරිදි මේ තියෙන්නේ sample code එකක්. coding structure එක අඳුරගන්න පුළුවන් මේකෙන්. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Template - chandaregura.blogspot.com blog</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <!-- Bootstrap -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

JQuery – අනිවාර්යයෙන්ම ඕන කරනවා. මෙතනින් ගන්න පුළුවන්. මේකෙදි bootstrap.min.js file එක Jquery.min.js එකට යටින් තියෙන්න ඕන අනිවාර්යයෙන්ම. මොකද නැත්නම් Bootstrap transitions වලදී ඒ ක්‍රියාකාරකම් නිසි පරිදි සිදු නොවීමට ඉඩ තිබෙන නිසා.

 

Bootstrap 2
මුලින්ම http://getbootstrap.com/2.3.2/  කියන web page එකට යන්න.

හරි කලින් කිව්වා වගේම main page එකට ගියට පස්සෙ එකේ තියෙන Download Bootstrap button එක click කරල තමයි download කරගන්න ඕනි. Download කරහම අපිට කලින් වගේම ලැබෙන්නෙ zip file එකක්, මේකෙදිත් අපි භාගත කර ගන්නේ Full version එක. දැන් ඔයා භාගත කර ගත්ත Zip එක Extract කරලා බැලුවම ඔයාට පහල රුපයේ වගේ Folder Tree එකක් තියෙන්න ඕනි. 

   app/
       layouts/
       templates/
   public/
       css/
           bootstrap.min.css
       js/
           bootstrap.min.js
       img/
           glyphicons-halflings.png
           glyphicons-halflings-white.png

දැන් කරන්න තියෙන්නෙ ඔය CSS, JS සහ font files ටික ඔයාගෙ project  එකෙ CSS, JS, font folders වලට කලින් කියපු විදියටම දාගෙන link කර ගන්න එක. ඔන්න ඔහොම තමයි bootstrap download කරල ඒ assets ටික අපේ project folder එකට දාගන්නේ. හරි ඊට පස්සේ අපි බලමු කොහොමද Bootstrap වලදී  CDN (Content Delivery Network)  use කරන්නේ කියලා.

 

2. bootstrap CDN (Content Delivery Network)  use කරන එක.

CDN කියන්නේ මොකක්ද ?

හොඳයි අපි සේරටම කලින් බලමු මොකක්ද මේ CDN කියන්නේ කියලා, මොකද සතා මොකාද කියල දන්නේ නැතුව Chicken කාලා වැඩක් නැනේ යාලුවනේ පුර්ණ දැනුමක් ලබා ගන්න ගමන් අපි මේ පාඩම් මාලාව ඉස්සරහට ගෙනියමු. CDN කියන වචනේ Web එක්ක බැඳිලා ඉන්න අයට නිතර අහන්න ලැබෙන දෙයක්. CDN කියන එකේ තේරුම Content Delivery Network කියන එක. ඒ කියන්නේ මේකෙන් කරන්නේ contents deliver කරන එක. user කෙලින්ම origin server එකත් එක්ක, නැත්තම් parent server එකත් එක්ක connect වෙන්නේ නැතුව ඒ වෙනුවට node එකක් එක්ක connect වෙනවා. අදාළ server එකත් එක්ක connection එක තියාගන්නේ එකිනෙක බැඳුනු ජාල විසින්.

CDN එකක් කියන්නේ කෙටියෙන්ම කියනවනම් ලෝකය පුරා විහිදුණු ජාලයක්. ඒ කියන්නේ ලෝකය පුරා විහිදුණු server nodes විශාල ප්‍රමාණයක් තියනවා .මේවා හඳුන්වන්නේ CDN nodes නැත්තම් Edge Servers කියලා. මේ හැම node එකකම site වල Java Script files, images වගේ දේවල් cache ගත වෙලා තියනවා. මේ නිසා site loading time එක ගොඩක් අඩු කරගන්න පුළුවන්. මේ හේතුව නිසාම ලෝකය පුරා පැතිරුණු ජාලයක් දක්වා ව්‍යාප්ත වෙලා තියනවා. google, Akamai, maxcdn වගේ සමාගම් රාශියක CDN විශාල ප්‍රමාණයක් මේ වෙද්දී භාවිතයේ තියනවා. user කෙනෙක් site request එකක් යැව්වම දුර අනුව ලඟම තියන Node එකෙන් අදාළ content deliver කරනවා. මේ නිසා තමයි කලින් කිව්ව අඩු loading time එකක්, එහෙමත් නැත්තම් response time එකක් ලැබෙන්නේ.
මේ විදියේ nodes නැති උනා නම් user කෙලින්ම main server එකෙන් තමයි data ගන්න ඕන. ඒකට සැහෙන්න වෙලාවක් යනවා. මේ ගතවෙන වෙලාව මේක අවම කරගන්න තමයි මේ විසදුම නිර්මාණය වුනේ. නමුත් මේකේ වාසි වගේම අවාසිත් තියනවා. මේ තියෙන්නේ ඒ වගේ CDN link එකකට උදාහරණයක්.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
  • CDN වල වාසි 
ප්‍රධානම වාසිය වෙන්නේ කලින් කිව්ව speed එක, ඒක තමයි අංක එක වෙන්නේ.හේතුව අපි සාමාන්‍යයෙන් භාවිතා කරනවට වැඩිය හොඳ මට්ටමේ servers, CDN company වලට තියන එක.
site testing වලදීත් ගොඩක් වටිනවා, මොකද අලුතෙන් file add කරන්න දෙයක් නැති නිසා.අපිට තියෙන්නේ link එක use කරන්න විතරයි.
අපි මේ node වලට direct වෙන්නේ අපේ ISP හරහානේ, ගොඩක් වෙලාවට ISP ගේ severs වල මේ files cache වෙලා තියනවා.ඉතින් response time එක තවත් අඩු වෙනවා.
මේ files වලට new version එද්දී ඒවා update කරන ඒවා, maintaining කරන්නේ CDN එකෙන්.අපිට කරන්න තියන වැඩ ප්‍රමාණය අඩු වෙනවා වගේම, ඒවා ගැන කරදර වෙන්න දේකුත් නැහැ.
මේ දේවල් තමයි වාසි කියලා කියන්න පුළුවන්.නමුත් මේවා වල අවාසිත් තියනවා.කොහොම උනත් මේ දේවල් වෙන්න තියන ඉඩ නම් මේ වෙද්දී හරිම අඩුයි.
  • CDN වල අවාසි 
CDN එකෙන් file වල change එකක් උනොත් හැමදේම වරදිනවා.මේක තමයි ප්‍රධානතම අඩුපාඩුව.
CDN එකෙන් file remove කරොත්, නැත්නම් CDN එක down උනොත් ඒකත් site එකට බලපානවා.
CDN එක files update කරත් ඒවා අපේ site එකත් එක්ක match නොවෙන්න පුළුවන්.එහෙම උනොත් site එක හරියට preview වෙන්නේ නැහැ.
අනිත් දේ තමයි developing වලදී use කරත් internet connection එක නැතුව වැඩ කරන්නේ නැති එක.
මුල් දේවල් තුනම අමතක කරන්න පුළුවන් google, maxCDN වගේ හොඳ CDN එකක් use කරනවා නම්.
 
 
 
Bootstrap වලදී CDN භාවිතා කරන්නේ කොහොමද ?

Bootstrap 3

Copy 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Bootstrap 2

Copy 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter bootstrap/2.3.1/css/bootstrap-responsive.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter bootstrap/2.3.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/twitter bootstrap/2.3.1/js/bootstrap.min.js"></script>

මම මෙච්චර වෙලා කතා කරපු CDN ඔයාගේ web page එකට link කරන්නේ ඉහත රුපයේ සඳහන් ආකාරයට තමයි. මේ තියෙන්නේ sample code එකක්. coding structure එක අඳුරගන්න පුළුවන් මේකෙන්. මේකෙදිත් කලින් කිව්වා වගේ bootstrap.min.js file එක Jquery.min.js එකට යටින් තියෙන්න ඕන.

 

Written by
චන්දරේ…

Leave a comment