ចែក​រំលែក​គំនិត​ និង​ចំណេះដឹង​ជាមួយគ្នា

5 Popular CSS Frameworks ដែល​លោក​អ្នក​គួតែ​ចាប់​ផ្តើម​ជាមួយ​វា

Posted in ពត៌មាន by ប្រាក់ សុភី on ខែ​មីនា 13, 2009

ភាសា​ជាច្រើន​សុទ្ធតែមាន​ Framework របស់វា ដូចជា Java, PHP, JavaScript ASP.NET, C#…។ប្រកាស់មុន ខ្ញុំ​បានដាក់​ Framework របស់​ JavaScript នឹង​ PHP រួច​មក​ហើយពេលនេះសូមបង្ហាញ Framework របស់ CSS វិញម្តង តើ​លោក​អ្នក​ចំលែក​ទេ ហេតុអ្វី CSS មាន​ Framework ដែរ? មិនមាន​​អ្វី​គួ​អោយ​ឆ្ងល់​​នោះទេ គោល​ការណ៍​នៃការបង្កើត​ Framework នេះឡើងគឺមាន​បួនចំនុច​ដូចខាងក្រោម

១) បង្កើន​ល្បឿននៃការអភិវឌ្ឍន៍ដោយ​ចំនាយពេល​ខ្លី

២) មានទំហំឯកសាមួយ(CSS)យ៉ាងតូចតែអាចប្រើការបានច្រើន នឹង​មាន​ប្រសិទ្ធភាពល្អ

៣) មានឯកសាមេរៀន និង​ការបង្ហាត់បង្រៀនល្អៗ

៤) ភាពច្បាស់លាស់អំពីរចនាសម្ព័ន្ធនៃ Grid

 

ថ្ងៃនេះខ្ញុំសូម​លើក​ CSS Framework ចំនូន​ ៥​ ដែល​កំពុង​ពេញនិយម មកបង្ហាញ រួមជាមួយ នឹង មេរៀន​ ឧទាហរណ៍ ដែល​ធ្វើ​អោយលោក​អ្នកកាន់តែយល់ច្បាស់អំពី Framework ទាំងនេះ។

១. 960 CSS Framework

960

960 Grid System ជា framework មួយដែល​ផ្តល់អោយ​យើង​ក្នុងការ​ប្រើប្រាស់ តាមខ្នាតសាមញ្ញ ដែលមាន width 960px។

 វាមាន 2 Variant: 12 និង 16 columns ដែលយើង​អាចប្រើវាបានដោយ​ការ​បំបែក​ពីគ្នា ឬក៏តាម​លំដាប់​លំដោយគ្នា ហើយមានទំតែ 3.6KB ដែលបាន compress រួចហើយ។

Live Demos

 កាពន្យល់ពីការប្រើប្រាស់ 960 CSS Framework

សូមចួល​ទៅ​មើលតំណខាង​ក្រោម​នេះ

 

 ២.​Blueprint CSS Framework

blueprint

 Blueprint ជា​ CSS Framework មួយដែលជួយយើងកាត់បន្ថយពេលវេលា​បង្កើត​ CSS វាផ្តល់អោយយើងនូវ​​មួល​ដ្ឋាល​ CSS ដ៏រឹង​មាំមួយ ដើម្បីបង្កើត​ គំរោងរបស់យើង​អោយ​ស្ថិតនៅ​កំរិតខ្ពស់​ជាមួយភាពងាយស្រួលការប្រើប្រាស់Grid, ពុម្ភអក្សរច្បាស់ៗ form ស្រស់ស្អាត។ លក្ខណះសំខាន់ផ្ទាល់ របស់វាគឺ Mass Reset នៃ Browser default style ដែល​ផ្តល់អត្ថិភាពអោយ​យើង​គ្រប់គ្នា​អាចគ្រប់គ្រង់ Layout ផ្ទាល់ខ្លួនបាន​យ៉ាង​ងាយ។

Live Demos

 កាពន្យល់ពីការប្រើប្រាស់ Blueprint CSS Framework

សូមចួល​ទៅ​មើលតំណខាង​ក្រោម​នេះ

 3.jQuery UI CSS Framework

jquery

 Jquery UI បានដាក់ CSS Framework មាំមួនមួយ​ដែលរចនាឡើងសំរាប់ការបង្កើត Custom Jquery widgets.

 CSS Framework បានរូមបញ្ចួល​ classes ដែលគ្រប់ដណ្តប់យ៉ាងទួលំទួលាយ​សំរាប់ការ​រចនា UI ហើយអាចរៀបចំដោយការប្រើ​ប្រាស់​  jQuery UI ThemeRoller

កាពន្យល់ពីការប្រើប្រាស់ Jquery UI CSS Framework

សូមចួល​ទៅ​មើលតំណខាង​ក្រោម​នេះ

 Live Demos

 ៤. YAML

yaml

 Yaml(Yet Another Multicolumn Layout) ផ្តោត​ទៅលើការរចនា Flexible Layouts និង column និង grid​ based​អ្នក​ត្រូវការ license ដើម្បីប្រើវា។​ YAML បាន​ភ្ជាប់​មកជាមួយ​ Ajax Builder ដ៏ពិសេសមួយ​ មាន​ភាពងាយស្រួល​ក្នុងការ​អភិវឌ្ឍ YAML-base CSS layouts ដែល​អនុញ្ញាតិ្ត​អោយ​យើង

 ដាក Containers នៃ layouts ទាំងនោះ​ដោយ​ការចាប់ដាក់​ ហើយ​HTML និង​ CSS កូដ ត្រូវបាន​ Generate automatically។

Live Demos


 កាពន្យល់ពីការប្រើប្រាស់ YAML

 

 ៥. Yahoo YUI Grids CSS

yahoo

 មួលដ្ឋាន​ YUI Grids CSS សំដៅទៅ 4 preset page widths, 6 preset templates, និងមាន​លត្ថភាពដាក់ចួល និង​បែងចែក​ជាផ្នែក​តួចៗ ២, ៣ ឬ ៤ columns. វាមាន​ធំហំតែ​ ៤KB ​អាចផ្តល់ទៅអោយច្រើន​ជាង​ ១០០០ Page layout ដាក់បញ្ចួលគ្នា។

 សូមកុំភ្លេចមើល CSS Reset/Base/Fonts/Grids Cheat Sheat

 Live Demos 


 កាពន្យល់ពីការប្រើប្រាស់ Yahoo YUI Grids CSS

Tagged with: , ,

The best 5 Javacript Frameworks

Posted in ពត៌មាន, Javascript, php, web standards by ប្រាក់ សុភី on ខែ​មីនា 7, 2009

JavaScript ជា Client-side ដែល​កំពុង​ពេញនិយម​នាពេល​បច្ចុប្បន្ននេះ ព្រោះ​វាធ្វើ​អោយ​ គេហទំព័រ​មាន​ភាព​ស្រស់​ស្អាត ទាកទាញ​ រស់​វើក​។ JavaScript ​ត្រូវបាន​គេយក​ទៅ​ប្រើច្រើន​ផ្នែក​ក្នុង គេហទំព័រ​ដួច​ជា Map (Google Map, Yahoo Map…), Mail (gmail, yahoo mail…), Reader ( google reader), online documents (Google Documents), Auto-Complete នេះ​ជាផ្នែក​មួយ​សំខាន់​ផងដែរ​ សំរាប់គេហទំព័រ មាន​គេហទំព័រ​ជាច្រើន​បាន​ប្រើ​បច្ចេក​ទេស​សំរាប់សំរួល​ដល់​ការស្វែង​រក ពេល​ដែល​យើង​ចង់រក​អ្វីមួយ​គ្រាន់តែវាយ​ពាក្យនោះ វា​នឹង​ផ្តល់​លទ្ធ​អោយ​យើង​ភ្លាមៗ ព្រម​ទាំង​ចំនួន​ពាក្យ​នោះ​ផងដែរ។ Search Engine បានប្រើ​ Auto-Complete នេះ​ផងដែរ​សំរាប់សំរួល​ដល់ការស្វែង​រក។

ក្រៅ​ពី​នេះ​នៅ​មាន​ផ្នែក​ជាច្រើន​ទៀ​ដែល​ JavaScript អាច​ធ្វើ​បាន ជា​ពិសេស​នោះ​ Ajax ជា​បច្ចេក​វិទ្យាដែល​កំពុង​ពេញ​និយមបំផុត​នា​ពេល​បច្ចុប្បន្ន​សំរាប់ Web2.0។ ហើយនៅ​ក្នុង​ប្រកាស់នេះដែ​ខ្ញុំ​សូម​លើក​យក JavaScript Framework សំខាន់ៗ​ចំនួន​ ៥​ ដែល​កំពុងពេញ​និយម​ជាង​។

Jquery

jquery
jquery

Jquery ជា JavaScript Framework មួយ​ដែល​កំពុង​ពេញ​និយម​ មាន​ល្បឿន​លឿន​ទៀត​ផង។ Jquery បាន​ក៏ឡើង​ក្នុងឆ្នាំ ២០០៥ ដែលសរសេដោយលោក​ John Resig ជាស្ថាបនិកមួយ​រូបរបស់ Web Browser ដ៏ល្បី Firefox។ ចំពោះ​ Framework មួយ​នេះត្រូវបាន​ Open Source មួយ​ចំនូន​យក​ទៅ​ប្រើ​ដូចជា WordPress, Drupal..

បន្ថែម

២​Prototype

prototype
prototype

Prototype ជា Framework មួយ​ដែល​ចំណាសជាងគេ​ ហើយ​ត្រូវ​បាន​ប្រើ​ច្រើន​ផង​នៅ​ក្នុងគេហទំព័រ​ជាច្រើន​។ Prototype ត្រូវបាន​ដាក​បញ្ចួល​ក្នុង Cakephp framework,

Ruby on rails framework ហើយ Hi5 Social Network ក៏​ប្រើ​ Framework នេះដែរ។

បន្ថែម

Mootools

Mootools
Mootools

Mootools ជា Object-Oriented JavaScript framework សំរាប់ JavaScript Developer ដែល​មាន​កំរិត​ពីមធ្យម​ ដល់ កំរិត​ខ្ពស់ វាអនុញ្ញាតិអោយ​យើង​សេរសេ powerful, flexible, និង​ cross-browser កូដ ជាមួយ​ភាស្រស់ស្អាត​របស់វា។ Mootools ត្រូវបាន​ web developers ពេញចិត្ត​ផង​ដែរ ហើយ​ត្រូវបាន​ប្រើ​ជាមួយ Joomla CMS និង ក្រុម​ហ៊ុនរចនា Template មួយ​ចំនួន​ទៀត។

បន្ថែម

YUI

Yahoo
Yahoo

YUI ជា JavaScript Framework ពេញនិយម​ផងដែរ ហើយ​ត្រូវបាន​ប្រើ​ ហើយ​ឥឡូវ​ចេញដល់ Version 2.7.0 ។​ត្រូវ​បាន​ប្រើ សេវាកម្ម​របស់ ក្រុម​ហ៊ុន​ Yahoo នេះ ហើយ​ក៏មាន​ Web Developers ប្រើ​វា​ផងដែរ។

បន្ថែម

Dojo

dojo

Dojo ជា​ JavaScript មួយ​ទៀ​ត​ដែល​យើង​អាច​យក​មក​បង្កើត​ ជា​ Web Application បាន​យ៉ាង​ស្រស់​ស្អាត។​ Dojo ត្រូវបាន​ដាក់​បញ្ចួល​ទៅ​ Zend Framewrok

Tagged with: , , ,

The best PHP frameworks for developers

Posted in ពត៌មាន by ប្រាក់ សុភី on ខែ​កុម្ភៈ 16, 2009

សំរាប់ Web developer ពិតជាស្គាល់ខ្លះហើយ អំពី PHP Frameworks បើសិនជាយើងប្រើ Framework ទាំងនេះពិតជួយសំរូល​ដល់​ការងារយើង​ច្រើនណាស់ ក្នុង Develop Website ហើយលឿនទៀតផង មិនត្រឹមតែប៉ុណ្ណឹង កូដរបស់យើងបានរៀបចំ​តាម​លក្ខណៈ​​​​ស្តង់ដា MVC (Model View Controller) ដែលធ្វើអោយការងាយើងមាន​លក្ខណៈ ងាយស្រូលក្នុងការកែរប្រែរនៅថ្ងៃក្រោយ។ ខាងក្រោមនេះខ្ញុំសូមនែនាំ PHP Framework  មួយចំនួនដែលគេពេញនិយមសព្ទថ្ងៃនេះ​៖

1 cakephp
php-2

CakePHP is a rapid development framework for PHP that provides an extensible architecture for developing, maintaining, and deploying applications.

Read more…

 
(more…)

Tagged with: ,

Ajaxloader

Posted in ពត៌មាន by ប្រាក់ សុភី on ខែ​កុម្ភៈ 12, 2009

ajax-loader

ajax-loader1

Bar Ajax loader

 

37

នេះជាគេហទំព័រដែលអោយយើង​ទាញយក Style Ajaxloader ដែលយើងបានឃើញ គេប្រើជា​ញឹកញាប់ក្នុងគេហទំព័រ នៅពេលដែល​យើងចុចលើតំណរអ្វីមួយ ហើយត្រូវការរង់ចាំ រហូតដល់ទិន្នន័យបានបង្ហាញចេញមក​។ ការដែលយើងរងចាំនោះ គឺ​ឃើញមានសញ្ញា load ចេញ​មក​(ដូចរូបខាងលើ) ដែលបញ្ចាក់ប្រាប់ថា សូមរងចាំបន្តិច នោះជារូបភាព GIF Animation គឺយើងអាចរចនាវាតាម កម្មវិធីជាច្រើន​។ តែគេហទំព័រទាំងនេះគ្រានចំនាយពេលមួយរយៈពេលខ្លី គឺលោក​អ្នកអាច​រើស​យករូបណាមួយ ហើយជ្រើសរើស​យក​ពណ៏តាមចិត្តចង់បាន រូចហើយ Generate វានោះលោកអ្នក នឹងឃើញរូប​បង្ហាញ​ចេញមក ប្រសិនបើចង់បានសូមទាញយកវាសំរាប់ប្រើថៃ្ងក្រោយ។ 

http://www.ajaxload.info/    ផ្តល់ជួន Ajax loader ជាលក្ខណៈ 2d ។

 

ajaxload.info

ajaxload.info

http://preloaders.net ផ្តល់ជួន Ajax loader ជាលក្ខណៈ 2d  និង 3d។

 

ajax_com

Preloaders.net

 

Tagged with: , ,

សាកល្បង Ajax ជាមួយភាសា Server-Side PHP

Posted in កម្មវិធីទូរស័ព្ទ by ប្រាក់ សុភី on ខែមករា 31, 2009

Source Code

Ajax មកពីពាក្យ Asynchronous JavaScript and XML វាមានដើមកំនើតក្នុង ឆ្នាំ2005 សូមមើលអត្ថបទរបស់លោក Jesse James Garrett។Ajax បានធ្វើអោយ Web Application មានការពេញនិយមជាង Desktop Application នាពេលបច្ចុប្បន្ននេះ ព្រោះវាអាចភ្ជាប់ទៅកាន់ Sever ដោយមិនចាំបាច់ Refresh Page ដូចជាភាសា Server-Side(PHP, ASP.NET, JSP…)។

សូមមិនរៀបរាប់ច្រើនទេអំពី Ajax សូមើល http://www.w3schools.com បន្ថែម។ ខាងក្រោមនេះជាឧទាហរណ៍ ពីការប្រើប្រាស់ Ajax សង្ឃឹមថានេះ ជាឧទាហរណ៍មួយជួយបង្ហាញផ្លូវដល់អ្នកដែលចង់ស្វែងយល់អំពី Ajax។

dknowknow

១ បង្កើត index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>AJAX with PHP: Quickstart</title>
    <script type="text/javascript" src="ajax.js"></script>
	<style type="text/css">
		.message{
			color:red;
		}
	</style>
  </head>
  <body onload='process()'>
    សូមបញ្ចួលឈ្មោះត្រង់នេះ: 
    <input type="text" id="myName" />
    <div id="divMessage" class="message"></div>
  </body>
</html>

សំរាប់បង្ហាញ message ពី ajax សូមមើលរូប ខាងក្រោម

 

div message

២បង្កើត ajax.js

/*
*author: PRAK Sophy
*email: sophy.prak@gmail.com
*website: https://kooms.wordpress.com
*/
// រក្សាទុក  XMLHttpRequest object ក្នុង xmlHttp variable ពី function createXmlHttpRequestObject()
var xmlHttp = createXmlHttpRequestObject(); 

// function ចាប់យក XMLHttpRequest object ពី browser
function createXmlHttpRequestObject() 
{	
  // will store the reference to the XMLHttpRequest object
  var xmlHttp;
  // ប្រសិនបើយើងដំណើការលើ Internet Explorer
  if(window.ActiveXObject)
  {
    try
    {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e) 
    {
      xmlHttp = false;
    }
  }
  //សំរាប់ Mozilla ឬ browsers ផ្សេងទៀត
  else
  {
    try 
    {
      xmlHttp = new XMLHttpRequest();
    }
    catch (e) 
    {
      xmlHttp = false;
    }
  }
  // return ការបង្កើត object ឬ បង្ហាញសារ error ប្រសិនបើយើងមិនអាចបង្កើត xmlHttp
  if (!xmlHttp)
 
    alert("មិនអាចបង្កើត XMLHttpRequest object.");
  else 
    return xmlHttp;
}

// បង្កើត asynchronous HTTP request ដោយប្រើ XMLHttpRequest object 
function process()
{
  //ដំណើរការប្រសិនបើ xmlHttp object មិនរវល់
  if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
  {
    // ចាប់យកឈ្មោះដែលបានបញ្ចួលដៅយអ្នកប្រើប្រាសពី form
    name = encodeURIComponent(document.getElementById("myName").value);
    // ប្រតិបត្តការ firstajax.php page ពី  server
    xmlHttp.open("GET", "firstajax.php?name=" + name, true);  
    // define the method to handle server responses
    xmlHttp.onreadystatechange = handleServerResponse;
    // make the server request
    xmlHttp.send(null);
  }
  else
    // ប្រសិនបើ connection ជាប់រវល់ វានឹងព្យាយាមម្តងទឿត បន្ទាប់ពី ១ វិនាទីក្រោយមក  
    setTimeout('process()', 1000);
}

// executed automatically when a message is received from the server
// ដំណើរការដោយស្វ័យប្រវត្ត ពេលដែលសាត្រូវបានបញ្ជួនពី Server
function handleServerResponse() 
{
  // ដំណើការ ប្រសិនបើ transaction ត្រូវបានបំពេញចប់
  if (xmlHttp.readyState == 4) 
  {
    // status of 200 indicates the transaction completed successfully
	//status = 200 មានន័យថា Transaction បានបញ្ចប់ដោយជោកជ័យ
    if (xmlHttp.status == 200) 
    {
	 //ចំលងចេញ XML ទទួលបានពី server
      xmlResponse = xmlHttp.responseXML;
      // បានជា document element (the root element) of the XML structure
      xmlDocumentElement = xmlResponse.documentElement;
      // get the text message, which is in the first child of
      // the the document element
      helloMessage = xmlDocumentElement.firstChild.data;
      // update the client display using the data received from the server
      document.getElementById("divMessage").innerHTML = 
                                            '<i>' + helloMessage + '</i>';
      // restart sequence
      setTimeout('process()', 1000);
    } 
    // a HTTP status different than 200 signals an error
    else 
    {
      alert("មានបញ្ហាកើតឡើងនៅពេលដែល access​ ទៅកាន់ server: " + xmlHttp.statusText);
    }
  }
}

៣ បង្កើត file firstajax.php
ជា PHP Script នៅផ្នែក Server-side ajax អាចដំណើការបាន ដោយពឹងផ្អែកទៅ ផាសា Server-Side។
ត្រូវបានហៅមកប្រើដោយកូដ javascript ក្នុង ajax.js នៅផ្នែក Client-Side ។

<?php
// we'll generate XML output
header('Content-Type: text/xml');
// generate XML header
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
// create the <response> element
echo '<response>';
 
// retrieve the user name
$name = $_GET['name'];
// generate output depending on the user name received from client
$userNames = array('KOOMS', 'SOPHY', 'AROCORE', '4KHMER', 'YODA');
if (in_array(strtoupper($name), $userNames))
  echo 'សូស្តី ' . htmlentities($name) . '!';
else if (trim($name) == '')
  echo 'អាចប្រាប់ខ្ញុំបានទេ តើអ្នកឈ្មោះអី?';
else
  echo htmlentities($name) . ', ខ្ញុំមិនស្គាល់អ្នកទេ';
// close the <response> element
echo '</response>';
?>

Source Code

Tagged with: , , ,
%d bloggers like this: