اگر چه هسته وردپرس خوب نوشته شده است اما بنظرم پیاده سازی الگوی MVC کیک، می‌تواند وردپرس را برای توسعه دهند‌گان آن دگرگون کند.برای مثال قالب یا همان Layout وردپرس را تصور کنید، شلوغ و نامفهوم به نظر می‌آید(هرچند مستندات وردپرس جای هیچ سئوالی را بی‌پاسخ نگذاشته است). طراح مجبور است یک صفحه را به چند بخش در چندین فایل مجزا کند اما با معماری MVC همه در یک مجموعه منظم خواهند بود. مسلماً این پیاده سازی چالش های بزرگی خواهد داشت چرا که وردپرس یک سیستم ساده نیست امنیت و وسعت اختیارات فاکتورهای مهمی هستند که نباید نادیده گرفته شوند.

Tim Trice فردی است که روی این پروژه که اسم آن را CakePress گذاشته است کار می‌کند. کیک‌پرس هنوز در حال توسعه است و تمام قابلیت‌های وردپرس را ندارد اما بدنه و قابلیت‌های اصلی را پوشش داده است. می‌توانید CakePress را از گوگل کد از اینجا دریافت کنید. برای افرادی که با معماری دیتابیس وردپرس و همچنین MVC در کیک آشنایی دارند سورس این پروژه می تواند یک منبع آموزشی عالی برای فراگیری CakePHP باشد.توضیحات بیشتر را می‌توانید در وبلاگ Tim در اینجا بیابید.

ساده ترین راه برای انتقال داده ها، ذخیره فایل اکسل با فرمت های xls یا xlsx در قالب فرمت csv توسط مایکروسافت اکسل و ایمپورت آن به Mysql بود. این فرمت خلاصه شده عبارت comma-separated values ( مقادیر جدا شده با کاما) می باشد که داده ها را بصورت جدولی در یک فایل متنی که می توان آن را با یک وبرایش گر متن باز کرد ذخیره می کند. در حقیقت شماره خطها به ردیف های جدول و داده های جدا شده با کاما به فیلدها اشاره دارند. اما تبدیل به csv توسط اکسل UTF-8 را به خوبی پشتیبانی نمی کند و داده های فارسی در تبدیل قابل استفاده نیستند و اینکه می بایست کاربر عملیات تبدیل را خودش انجام می داد و فایل csv را برای ایمپورت وارد می کرد در حالی که استفاده از فایل اکسل با فرمت معمولی xls یا xlsx ارجحیت داشت.

خوشبختانه کلاس PHPExcel به اندازه ایی خوب و کامل نوشته شده بود که دغدغه نوشتن کلاس جدید را نداشتم. این کلاس که بر پایه استانداردهای OpenXML مایکروسافت نوشته شده است قابلیت نوشتن و خواندن از فایل Excel را براحتی فراهم می کند. برای وارد کردن اطلاعات از فایل Excel به Mysql تکه کد زیر را نوشتم:

<?php
require_once 'PHPExcel.php';
$objReader = new PHPExcel_Reader_Excel2007();
$objPHPExcel = $objReader->load('book1.xlsx');
$rowIterator = $objPHPExcel->getActiveSheet()->getRowIterator();

$skip_rows = 0;
$excell_array_data = array();
foreach($rowIterator as $row){
	$cellIterator = $row->getCellIterator();
	$cellIterator->setIterateOnlyExistingCells(false);
	if($skip_rows >= $row->getRowIndex ()) continue;
	$rowIndex = $row->getRowIndex ();
	$excell_array_data[$rowIndex] = array();

	foreach ($cellIterator as $cell) {
		$excell_array_data[$rowIndex][$cell->getColumn()] = $cell->getCalculatedValue();
	}
}

$link = @mysql_connect('localhost', 'root', '123');
if ($link){
	$db_selected = mysql_select_db('alvanweb.com', $link);
	@mysql_set_charset('utf8',$link);

	//Create Database table with one Field
	$sql = "CREATE TABLE xlsx (
	rowID INT NOT NULL ,
	PRIMARY KEY (rowID)
	)";
	mysql_query($sql);

	//Create Others Field (A, B, C & ...)
	$columns_name = array();
	$columns_name = $excell_array_data[$skip_rows+1];
	foreach (array_keys($columns_name) as $fieldname ){
		$sql = "ALTER TABLE xlsx ADD $fieldname VARCHAR(1000)";
		mysql_query($sql);
	}

	//Insert Excel data to MySQL
	foreach( $excell_array_data as $k=>$v){
		$keys = join(array_keys($v), ',');
		$values = join($v, "','");
		$sql = "insert into xlsx (rowID, $keys) values ($k, '$values') " ;
		mysql_query($sql);
	}

} else {
	echo "Error in database connection.";
}
?>

مستندات PHPExcel کامل است و نیاز به توضیح متدها نیست. ورود اطلاعات توسط این کد در چهار مرحله انجام می شود:
1- ریختن داده های فایل اکسل در آرایه $excell_array_data (خطوط 9 تا 19)
2- اتصال به پایگاه داده و ایجاد جدول xlsx در دیتابیس و افزودن فیلد rowed به عنوان PRIMARY KEY (خطوط 21 تا 31)
3- افزودن فیلدهای مربوط به نام ستون های فایل اکسل (A، B، C و …) به جدول xlsx (خطوط 34 تا 39)
4- خواندن آرایه $excell_array_data و افزودن داده ها به جدول ( خطوط 42 تا 47)

توضیح اضافه اینکه $skip_rows برای رد کردن ردیف ها بالای فایل اکسل مقداردهی می شود. معمولاً اولین ردیف قبل از داده ها معرف نام ستون هایی است که گویااطلاعات نوع فیلد است (فرضاً سن، جنسیت و …) برای رد کردن این ردیف این متغیر برابر 1 تنظیم می شود.

<?php
echo $javascript->link('jquery-1.3.2.min');
?>

پیشنهاد می‌کنم برای تکه کد زیر که قرار است درخواست‌ کلیک بر روی لینک صفحات را به صورت آژاکس ایجاد کند، یک فایل js جدید بسازید یا اینکه می‌توانید آن‌ را مستقیم در layout اضافه کنید:

$('a[href*=/page:]').live('click', function(){
    $('#content').load($(this).attr('href'));
    return false;
});

کار تمام است با کلیک بر روی شماره صفحات محتوا به صورت آژاکس بارگذاری می‌شود. اما یکسری نکات ریز که شاید از قلم انداخته باشید:

کامپوننت RequestHandler را می‌بایستی به کنترلرتان افزوده باشید. دلیل آن روشن است چرا که باید نوع تقاضای کنترلر را، تشخیص دهد و layout را بصورت خودکار به Ajax تبدیل کند. برای درک بیشتر این موضوع پیشنهاد می‌کنم تغییرات بوجود آمده درپی افزودن یا حذف این کامپوننت را از طریق کنسول FireBug دنبال کنید.

مقدار #content نشانگر id عنصری است که محتوا را در بر دارد. این مقدار layout پیشفرض کیک است اگر برای محتوا id یا class دیگری تعریف کرده‌اید روشن است که آن را باید تغییر دهید.

کمی بیشتر
با افزودن a[href*=/sort:] به کد بالا می‌توانید مرتب‌سازی عناصر را هم در یک جدول داده پیشفرض کیک به صورت آژاکس داشته باشید:

$('a[href*=/sort:],a[href*=/page:]').live('click', function(){
    $('#content').load($(this).attr('href'));
    return false;
});

خواندنی‌های کمکی دیگر
+ اگر از ویرایش‌های پایین jQuery استفاده می‌کنید، پلاگین Livequery می توانید جایگزینی برای تابع live باشد.
+ اگر هنوز نمی‌دانید چگونه صفحه‌بندی را در app تان ایجاد کنید، به مستندات کیک در اینجا مراجعه کنید.
+ همچنین در اینجا توضیح داده شده چگونه می‌توانید این کار را بدون jQuery و البته با استفاده از فریم‌ورک prototype انجام دهید.

امیدوارم میمنت سال جدید طلیعه‌ی موفقیت‌های بزرگ هم برای شما و هم برای خودم باشه. در لحظه حلول سال نو با زمزمه کردن دعای عرفانی یا مقلب القلوب و الابصار، دعا گوی ما هم باشید. عید بر همگان مبارک باد

در این آموزش فرض شده است اصول کار با کیک را فراگرفته‌اید. می‌توانید کیک را نصب کنید، تنظیمات اولیه را مقداردهی کنید و Cake Bake (پختن کیک) را با کنسول انجام دهید و … اگر آماده نیستید به سری آموزش‌های قبل (ساخت لینکدونی با CakePHP) رجوع کنید و بعدا برگردید. ضمنا از آخرین نسخه پایدار CakePHP و PHP 5 استفاده می‌کنیم.

خوشبختانه نصب و بکارگیری کامپوننت توکار auth ساده‌ترین شکل ممکن برای داشتن یک سیستم ورود کاربر است. مانند همه کامپوننت‌ها، با افزودن ‘Auth’ به پارامتر $components کامپوننت به کنترلر شما افزوده می‌شود. چون قصد داریم از این کامپوننت در دیگر کنترلر‌ها نیز استفاده کنیم برای جلوگیری از تکرار، آن را به AppController اضافه می‌کنیم. بنابراین فایلی بنام app_controller.php در شاخه اصلی app تان با محتوای زیر ایجاد کنید:

class AppController extends Controller {
	var $components = array('Auth');
}

روشن است که چون دیگر کنترلر‌ها فرزند AppController هستند خصوصیات آن را به ارث خواهند برد. بگذارید کمی در مورد قوانین توکار این کامپوننت بگویم. بطور پیشفرض این کامپوننت انتظار دارد شما جدولی بنام users با فیلدهایی بنام username و password داشته باشید.‌ اما در برخی موارد خاص، پایگاه داده بدلایل امنیتی اجازه نمی‌دهد که برای یک فیلد نام password را انتخاب کنید. مشکلی نیست ما این عرف را برهم میزنیم و از نام دلخواه خودمان استفاده می‌کنیم. ابتدا یک جدول بصورت زیر بسازید:

CREATE TABLE users (
  id integer auto_increment,
  email char(50),
  secretpass char(50),
  PRIMARY KEY (id)
);

از email برای نام کاربری و secretpass برای کلمه عبور استفاده کردیم. در اینجا لازم است با تابع beforeFilter در کیک آشنا شوید. CakePHP یکسری توابع callbacks توکار دارد که با آن‌ها می‌توان منطقی را بعد یا قبل اجرای یک کنش اضافه کرد. BeforeFilter قبل از هر کنشی در کنترلر اجرا می‌شود. اما در اینجا چه استفاده ایی دارد؟ برای برخی از تنظیمات کامپوننت Auth نیاز داریم قبل از اجرای هر کنشی آن‌ها را مقدار دهی کنیم

اولین موردی که باید به این تابع اضافه شود اعلام تغییر نام فیلدهای جدول users است (چون قوانین توکار این کامپوننت را رعایت نکردیم) بدین منظور کد زیر را مجددا به AppController اضافه می‌کنیم (دلیل این کار روشن است):

function beforeFilter() {
$this->Auth->fields = array('username' => 'email', 'password' => 'secretpass');
}

حال این کامپوننت می‌تواند با نام‌های جدید فیلدها کار کند. با ساخت این جدول، کنترلر و مدل و همچنین نمای login را برای این جدول bake کنید. به کنترلر users دو کنش login و logout را بصورت زیر اضافه کنید:

function login() {
 //Auth componet does it automatically
}
function logout() {
 $this->redirect($this->Auth->logout());
}

این کامپوننت بطور پیشفرض مسیر users/login (کنترلری بنام users و کنشی بنام login) را برای ورود در نظر می‌گیرد. می‌توانید با تکه کد زیر در BeforeFilter این مسیر را تغییر دهید:

$this->Auth->loginAction = array('admin' => false, 'controller' => 'members', 'action' => 'login');

در اینجا ما همان مسیر پیشفرض را بکار می‌گیریم. همچنین بطور پیشفرض نیازی نیست برای پردازش فرم login.ctp کنش login را کدنویسی کنید خود کامپوننت این کار را بطور خودکار انجام می‌دهد بنابراین آن را در بالا خالی گذاشتیم. حال فرم ورود را در login.ctp بصورت زیر تعریف کنید:

if ($session->check('Message.auth')) {
  $session->flash('auth');
}
echo $form->create('User', array('url' => array('controller' => 'users', 'action' => 'login')));
echo $form->input('email');
echo $form->input('secretpass', array('type' => 'password'));
echo $form->submit('Login');
echo $form->end();

این کامپوننت برای رمزنگاری کلمه عبور از یک کلاس امنیتی استفاده می‌کند که این کلاس بصورت پیشفرض از SHA1 بهره می‌گیرد. برای تغییر متد رمزنگاری می‌باید setHash را برحسب md5 ،sha1 یا sha256 در اولین پارامتر مقداردهی کنید. ما از md5 استفاده می‌کنیم بنابراین BeforeFilter به صورت زیر خواهد بود:

function beforeFilter() {
Security::setHash('md5');
$this->Auth->fields = array('username' => 'email', 'password' => 'secretpass');
}

توجه کنید! فایل core.php و مقدار امنیتی Security.salt را یادتان هست که در ابتدای تنظیمات کیک مقداردهی می‌کردید؟! درست حدس زده‌اید، کلاس امنیتی برای رمزنگاری بیشتر، از این مقدار نیز استفاده می‌کند بنابراین دقت کنید اگر زمانی خواستید پروژه را از نو با مقادیر قدیمی رمزنگاری شده‌ی موجود در دیتابیس بنویسید این مقدار را مشابه پروژه قبل لحاظ کنید.

در اینجا برای تست نیاز دارید یک نام و کلمه عبور به دیتابیس اضافه کنید. ساخت یک فرم ثبت نام به منظور وارد کردن یک ردیف در جدول users ساده است اما ساده‌تر برای ما که تنها قصد تست برنامه را داریم چیست؟ اگر debug را در تنظیمات (core.php) دستکاری نکردید (برابر مقدار 2 تنظیم شده است) در مرورگر مسیر users/login را مرور کنید و نام و کلمه عبور را انتخاب کنید. در نوار زیرین مربوط به debug کلمه عبوری که وارد کردید بطور هش شده (رمزنگاری شده) مشاهده می‌شود می‌توانید به phpMyAdmin بروید و این مقدار را بصورت دستی اضافه کنید. اگر هم برایتان دشوار است خط زیر را ایمپورت کنید. حال یک نام عبور alvani با کلمه عبور 123 دارید:

INSERT INTO 'users' ('id', 'email', 'secretpass') VALUES
(1, 'alvani', 'f6b48e1ff9c21a8fe36a77c1ec839086');

نگران نباشید در آموزش بعدی که کامپوننت ACL هم وارد شد، فرم ثبت نام هم افزوده می‌شود تا آن زمان خودتان هم می‌توانید با کمی کنجکاوی آن رابسازید.

نوبت آن رسیده است که دسترسی به برخی از کنش‌ها را در برخی کنترلرها محدود کنیم. فرض کنید قسمت مدیریت بصورت users/account باشد. می‌خواهیم برنامه را طوری طراحی کنیم که کاربر با ورود موفق به سیستم به این بخش هدایت شود و همچنین کاربران دیگر بدون ورود مجاز به دیدن این کنش نباشند. کنش account را در کنترلر users ایجاد کنید.

از دو متد allow و deny بدین منظور استفاده می‌کنیم. فرض کنید می‌خواهیم دسترسی به کنش account را در کنترلر users محدود کنیم کافیست تکه کد زیر را به این کنترلر اضافه کنیم:

function beforeFilter(){
 parent::beforeFilter();
 $this->Auth->deny('account');
}

تکه کد بالا ابتدا خصوصیات تابع BeforeFilter کنترلر پدر (یعنی AppController را به ارث می‌برد) سپس کنش account را محدود می‌کند. با انجام مراحل فوق تلاش برای مرور users/account شما را به users/login منتقل خواهد کرد. اما بعد از ورود موفق به کجا هدایت خواهید شد؟ این کامپوننت بطور خوردکار پس از ورود موفق شما را به صفحه‌ایی که تلاش می‌کردید آن را ببینید هدایت می کند اما با کد زیر در BeforeFilter چنانچه نیاز باشد می‌توانید کاربر را به کنترلر و کنش دلخواه هدایت کنید:

$this->Auth->loginRedirect = array('controller' => 'users', 'action' => 'account');

تمرین مناسبی است که BeforeFilter ایی که در کنترلر users در بالا (به منظور محدود کردن و مجوز دادان) استفاده کردید را حذف کنید و با استفاده از foreach بصورت زیر، در BeforeFilter کنترلر AppController، تنها با تعریف کنش‌های مجوز داده شده یا محدود شده در ابتدای هر کنترلر آن‌ها را مشخص کنید. مسلما باید ابتدا $allowedActions و $deniedActions را در AppController تعریف کنید:

class AppController extends Controller {
var $components = array('Auth');
public $allowedActions = array('index');
public $deniedActions = array();

function beforeFilter() {
Security::setHash('md5');
$this->Auth->fields = array('username' => 'email', 'password' => 'secretpass');
	
foreach( $this->allowedActions as $allowAction ){
	$this->Auth->allow( $allowAction );
}
		
foreach( $this->deniedActions as $denyAction ){
	$this->Auth->deny( $denyAction );
}
}
}

در اینجا من دسترسی به کنش‌ index را برای همه کنترلرها آزاد تعریف کردم . از طرف دیگر سایر کنش‌ها محدود شده‌اند. حال می‌توانم با مقداردهی مجدد $allowedActions و $deniedActions در ابتدای هر کنترلر کنش‌هایش را از لحاظ دسترسی تعریف کنم. برای مثال اگر بخواهم کنش register را در کنترلر users که بطور پیشفرض محدود است آزاد کنم به کنترلر users کد زیر را اضافه می‌کنم:

var $allowedActions = array('register');

حال تلاش برای نمایش users/register به صفحه users/login منتقل نخواهد شد. تا اینجای کار می‌توانید کنش‌ها را از لحاظ مجوز دسترسی به یک کاربر کنترل کنید اما این کامپوننت انعطاف پذیری‌ خیلی بیشتری دارد در ادامه برخی از آن‌ها بصورت مختصر ذکر می‌گردد.

چگونه خطاها را تغییر دهید؟ اگر دقت کرده باشید وقتی تلاش می‌کنید یک کنش محدود شده را ببینید و به Login منتقل می‌شود خطای عدم مجوز یا هنگامی که نام و کلمه عبورتان درست نیست خطای مربوطه در نمای login نمایش داده می‌شود با مقداردهی دو متغیر زیر در BeforeFilter می‌توانید این خطاها را تغییر دهید:

$this->Auth->authError = "Access denied!";
$this->Auth->loginError = "That's not the right email or password!";

گاهی اوقات نیاز است شرط دیگری را هم برای ورود موفق تعریف کنیم. مثلا کاربری که علاوه بر نام و کلمه عبورش اکانتش فعال هم شده باشد. یک فیلد دیگر بنام active به جدول users ‌اضافه می‌کنیم. اگر Y بود کاربر فعال اگر N غیرفعال. حال با کد زیر می‌توانیم به کاربران فعال مجوز ورود بدهیم:

$this->Auth->userScope = array('User.active' => 'Y');

وقتی users/logout را برای خروج مرور می‌کنید مستقیم به users/login منتقل می‌شوید با مقداردهی کنترلر و کنش زیر می‌توایند هدایت کاربر بعد از logout را تغییر دهید:

$this->Auth->logoutRedirect = array(Configure::read('Routing.admin') => false, 'controller' => 'members', 'action' => 'logout');

سایر متغیرهای کامپوننت authentication را می‌توانید در مستندات کیک در اینجا دنبال کنید . در پست‌های آینده این کامپوننت را با ACL و Cookie ترکیب می‌کنیم تا سیستمی با مجوزها و گروه‌های مختلف بسازیم. هرچند با امکانات کامپوننت authentication به تنهایی می‌توان سیستمی با گروه‌های مختلف ایجاد کرد، نمونه‌اش را می‌توانید اینجا بیابید. اما انعطاف پذیری ACL بخصوص در پروژه‌های بزرگ که کاربران در گروه‌های مختلف قرار دارند فوق العاده قوی‌تر است.

هرگونه مشکلی در خصوص این کامپوننت دارید در کامنت‌ها مطرح کنید حتما پاسخ خواهم داد بخصوص اینکه فکر می‌کنم در این پست بعضی از نکته‌ها از قلم افتاده‌اند و شاید نیاز به توضیح بیشتر باشد. موفق باشید، مرتضی الوانی اسفندماه 1387.

سیستم‌های تصدیق هویت کاربر بخش رایج بسیاری از برنامه‌های کاربردی تحت وب هستند. در CakePHP چندین سیستم بدین منظور وجود دارد که هر یک اختیارات متفاوتی ایجاد می‌کند. ساده‌ترین آن استفاده از کامپوننت authentication است که در صورت تصدیق کاربر، مجوز ورود به تمام بخش‌های برنامه می‌دهد.

این کامپوننت می تواند با کامپوننت دیگری بنام Access Control Lists برای ساخت مدل‌های پیچیده‌تری که سطوح مختلفی از دسترسی را تعیین می‌کند، ترکیب شود. برای مثال به یک کاربر مجوز دسترسی به بخش‌های عمومی، به دیگری اجازه ویرایش مطالب و به کاربری دیگر مجوز مدیر سیستم را بدهد.

کار با کامپوننت authentication بطور باورنکردنی ساده‌ و سریع است اما کاربرد کامپوننت ACL شاید برای بار اولی که از ان استفاده می‌کنید کمی مشکل‌تر باشد اما با یادگیری کاربرد آن به یکی از جالب‌ترین و پرقدرت ترین کامپوننت‌های توکار کیک تبدیل خواهد شد. برای شروع یک سناریو ساده به شکل زیر را که در عمل صورت می‌گیرد تصور کنید:

1- تلاش برای مشاهده آدرس. در ابتدا فرض کنید کاربری بنام محسن سعی میکند محتویات صفحه‌ایی به آدرس http://alvanweb.com/article/edit را مشاهده کند.

2- تجزیه‌ آدرس. هنگامی که درخواست کاربر از طریق مرورگر ارسال می‌شود، کامپوننت authentication تشخیص می‌دهد که آدرس درخواستی با کنترلری بنام article و کنشی بنام edit (که خود با کنشی از نوع update رابطه دارد) در ارتباط است.

3- آیا صفحه محدود شده است؟ همچنین این کامپوننت تشخیص می‌دهد که دسترسی به این کنش در کنترلر article محدود شده است. بنابراین بررسی می‌کند که آیا کاربر وارد سیستم شده است یا خیر.

4- نمایش فرم ورود کاربر. تا هنگامی که کاربر وارد نشده باشد هر درخواستی برای مشاهده این آدرس به صفحه‌ایی حاوی فرم ورود هدایت می‌شود تا کاربر بتواند با درج نام و کلمه عبور وارد سیستم شود.

5- تطبیق نام‌ و کلمه عبور کاربر. پس از ارسال فرمی که منطبق با اطلاعات موجود در بانک‌داده است، این کامپوننت تشخصی می‌دهد که نام‌کاربری mohsen است. تا اینجا فقط صحبت از کامپوننت authentication بود…

6- پرسش از ACL برای دسترسی. کامپوننت authentication از ACL می‌پرسد که آیا کاربر mohsen اجازه دارد کنش update رابرای کنترلر article بکار برد یا خیر.

7- ACL دسترسی را تشخصی می‌دهد. حال کامپوننت ACL با بررسی جدول‌های داده تشخیص می‌دهد که کاربر mohsen بطور صریح به هیچکدام از صفحات این سایت بمنظور ویرایش دسترسی ندارد اما این کاربر جز‌ء گروه ویراستار‌ها (Editors) می‌باشد و هر کاربری جزء این گروه قابلیت ویرایش مقالات را دارد. بنابراین کامپوننت ACL این‌گونه پاسخ می‌دهد: تا هنگامی که کاربر mohsen یک ویراستار است، وی مجوز ویرایش مقالات را به ارث می‌برد.

8- authentication هدایت می‌کند. بمحض تشخیص این دسترسی مجددا کامپوننت authentication وارد می‌شود تا کاربر را به صفحه درخواستی هدایت کند.

نکته کلیدی: کامپوننت ACL می‌بایستی با یک سیستم ورود کاربر بکار گرفته شود.
آنچه مدل بالا در این نوع از کاربرد نشان می‌دهد، نقش کامپوننت ACL بررسی مجوزهای خاص برای دسترسی به بخش‌های مختلف سیستم است بدین دلیل می‌توانیم استدلال کنیم، این کامپوننت باید با کامپوننتی در ارتباط باشد که شامل موارد زیر باشد:

+ نام و کلمه عبور را ذخیره کند.
+ نام و کلمه عبور را از فرم ورود بگیرد.
+ نام و کلمه عبور را با مقادیر ذخیره شده تطبیق دهد.
+ بمحض تطبیق موفق، نام کاربری را با اطلاعات نوع درخواست به کامپوننت ACL ارسال کند.
+ صفحه در خواستی را نمایش دهد یا اینکه با توجه به مجوزی که کامپوننت ACL تعیین می‌کند به صفحه دیگری هدایت کند.

بنابراین می‌توان دریافت کامپوننت توکار authentication یک انتخاب طبیعی برای داشتن یک سیستم ورود کاربر است. که می‌تواند در کنار ACL بکار گرفته شود.

نمونه بالا تنها یک تفکیک وظیفه میان این دو کامپوننت بود. در پست‌های آینده در مورد این کامپوننت و کاربرد آن خواهم نوشت سپس کار با کامپوننت ACL را فرا می‌گیرد در نهایت در مثال ساخت لینکدونی با CakePHP که در همین وبلاگ آموزش داده شد از این دو کامپوننت استفاده می‌کنیم.

برنامه‌نویسانی که با PHP مقدماتی آشنایی داشته و مباحث اولیه وب را بشناسند می‌توانند با مطالعه این کتاب اطلاعات مفیدی را در زمینه‌هایی مانند سبک‌های برنامه‌نویسی، شی‌گرایی، بالا بردن کارایی و سرعت و افزایش امنیت به دست آورند. به کسانی که در PHP مبتدی هستند توصیه می‌شود پیش از خواندن کتاب به کتب مقدماتی در این زمینه مراجعه کنند.

برخلاف عنوان فارسی و همچنین توضیح روی جلد لاتین، محتوا کاملا منطبق با PHP 5 نیست و هیچ چیز به طور خاص محدود به PHP 5 نمی‌شود! کتاب بیشتر روی ایده‌ها و استراتژی‌ها (بخصوص در قسمت بهبود کد به منظور افزایش سرعت، دقت و طراحی) تمرکز کرده است و صرفا یک آموزش گام به گام نیست و از این جنبه در کتاب‌های نوع خود عالیست.

اگر قبلا دو یا سه یا تعداد بیشری پروژه‌ی متوسط و بزرگ با PHP‌ انجام داده‌اید این کتاب مناسب شماست. چرا که ایده‌های مطرح شده می‌توانند در تغییر افق‌های دید در جهت بهینه‌سازی کد موثر باشند. بنظرم یکی از اصول برنامه‌نویسی حرفه‌ایی، نوشتن کد قابل نگهداری و خوانا است زیرا کدی را که خوب نوشته شده بهتر می‌توان بهینه کرد تا کدی که بهینه بوده اما بد نوشته شده است. این کتاب مقداری شما را با این اصول آشنا می‌کند.

کتاب اصلی (لاتین) 5 بخش (23 فصل) دارد اما در ترجمه فارسی تنها 3 بخش (16 فصل) آورده شده است و دو بخش آخر حذف شده است. بخش چهارم در مورد کارایی و بخش پنجم در مورد توسعه پذیری (توسعه PHP و Zend Engine) بحث می‌کند که هر دو جزء مهمترین مباحث این کتاب هستند اما نمی‌دانم چرا مترجم آن‌ها را حذف کرده است؟! فهرست کتاب لاتین به صورت زیر است:

• I-Implementation and Development Methodologies
  1-Coding Styles
  2-Object-Oriented Programming Through Design Patterns
  3-Error Handling
  4-Implementing with PHP: Templates and the Web
  5-Implementing with PHP: Standalone Scripts
  6-Unit Testing
  7-Managing the Development Environment
  8-Designing a Good API

  II-Caching
  9-External Performance Tunings
  10-Data Component Caching
  11-Computational Reuse

  III-Distributed Applications
  12-Interacting with Databases
  13-User Authentication and Session Security
  14-Session Handling
  15-Building a Distributed Environment
  16-RPC: Interacting with Remote Services

  IV-Performance
  17-Application Benchmarks: Testing an Entire Application
  18-Profiling
  19-Synthetic Benchmarks: Evaluating Code Blocks and Functions

  V-Extensibility
  20-PHP and Zend Engine Internals
  21-Extending PHP: Part I
  22-Extending PHP: Part II
  23-Writing SAPIs and Extending the Zend Engine

ترجمه فارسی کتاب خوب است اما توصیه می‌کنم دو فصل آخر را هم بخوانید (خوشبختانه کتاب جدید نیست و با یک جستجوی کوچک می‌توانید فرمت PDF لاتین آن را دانلود کنید)

لازم به ذکر است که تمام مثال‌های این کتاب روی سیستم‌عامل لینوکس نوشته شده است هرچند بسیاری از کدها با تغییراتی اندک روی ویندوز نیز اجرا می‌شوند اما بعضی از مثال‌ها غیر قابل انتقال هستند. همچنین در پایان هر فصل لیستی از منابع آنلاین برای مطالعه بیشتر عنوان شده است.

• + مشخصات لاتین کتاب:
  عنوان: Advanced PHP Programming
  مولف: George Schlossnagle
  ناشر: Sams

  + مسخصات ترجمه کتاب:
  عنوان: برنامه‌نویسی پیشرفته در PHP 5

  مترجم: محسن مسگر هروی
  ناشر: موسسه فرهنگی هنری دیباگران تهران

• قابلیت‌های فعلی:
  + امکان افزودن خوراک وبلاگ‌ به‌نهایت سادگی و آگاهی از وضعیت آن
  + بروزرسانی خوراک‌ها هر 5 دقیقه یکبار
  + منظم سازی بر اساس زمان بروزرسانی، حروف الفبا، تعداد مشترکین فید‌برنر
  + نمایش عنوان 10 مطلب اخیر وبلاگ‌های ثبت شده
  + جستجوی پیشرفته در نام‌وبلاگ‌ها، زمان بروز‌رسانی و تعداد مشترکین فیدبرنر
  + خروجی RSS با قابلیت سفارشی‌سازی

تمام قابلیت‌های فوق توسط آژاکس (تماماً کتابخانه JQuery) و زبان قدرتمند PHP و بانک اطلاعاتی MySQl پیاده‌سازی شده و سعی شده نهایت کاربر پسند بودن در آن لحاظ شود. برخلاف خواسته‌ام ناگزیر شدم CakePHP را در این پروژه کنار بگذارم و کلاس‌ها را از نو بنویسم.

خوراک چندی از وبلاگ‌های دوستان اضافه شده ‌است می‌توانید خوراک وبلاگتان را اضافه کنید اگه در سیستم موجود باشد هم مطلع خواهید شد. اما چگونه خوراک اضافه کنید. بدین منظور فیلد مناسبی در بالای صفحه تعبیه شده که به سهولت می‌توانید خوراک‌ها را اضافه کنید لازم است توضیحی در مورد محتوای خوراک‌ها بدهم. قرار است روی خوراک‌ها کار آماری شود و علاوه برآن لیست سازی انجام شود پس لازم است به این نکات توجه کنید:

چگونه خوراک اضافه کنید؟
قبل از هر چیز می‌بایست خوراکتان معتبر باشد. منظور از اعتبار رعایت معیارهایی است که توسط کنسرسیوم جهانی وب تعریف شده است. اگر وبلاگتان دو خوراک یا بیشتر دارد فقط مجاز هستید یکی را اضافه کنید (خوراکی که مشتمل بر محتوای اصلی وبلاگ‌تان است) خوراک‌ها فقط می‌بایست مخصوص وبلاگ باشند نه وب‌سایت‌هایی نظیر مجله‌ها یا دانلود سنتر‌ها و…

بهتر است از فیدبرنر استفاده کنید و اگر وبلاگتان این خوراک را دارد آن را اضافه کنید. چرا که تعداد مشترکین فیدبرنر یکی از معیارهای منظم‌سازی است. اگر هم فیدبرنر دارید و از روی ناآگاهی Awareness API غیرفعال است و مایلید دیگران به تعداد مشترکین خوراکتان دسترسی داشته باشند بهتر است Awareness API را فعال کنید در غیراین‌صورت سیستم تعداد مشترکان را صفر لحاظ می‌کند.

از آنجایی که پس از خرید فیدبرنر توسط گوگل برخی از خوراک‌ها در حال انتقال از سیستم قدیمی به سیستم جدید هستند همه خوراک‌های فیدبرنر (سازگار با API قدیمی و جدید، شامل دامنه‌های feedburner.com و feedproxy.google.com) پشتیبانی می‌شوند.

انتخاب شمار مشترکان فیدبرنر بصورت خام (فیدبرنر آمار روز قبل را ارائه می‌دهد) معیار چندان مناسبی برای منظم‌سازی نیست در آینده از تغییرات در یک بازه زمانی بصورت درصد افزایش یا کاهش هم استفاده خواهد شد. ضمنا منظور از تعداد مشترکان آیتم circulation فیدبرنر است نه تعداد هیت!

پیام‌های موجود در نتیجه افزودن خوراک، گویا هستند اما فعال بودن و غیر فعال بود و درانتظار تایید بودن به چه منظور است. کارکرد سیستم گونه‌ایی است که خوراک‌ها باید تایید شود. پیام معتبر نیست یعنی یا خوراک شرایط اعتبار را ندارد یا سیستم نمی‌تواند خوراک را بخواند. پیام در انتظار تایید یعنی خوراک ثبت شده اما هنوز تایید نشده است. پیام فعال یعنی خوراک در سیستم پردازش می‌شود. فعلا خوراک غیر فعال نداریم اما اگر محتویات خوراک‌ها در سیستم اختلال ایجاد کند غیرفعال خواهد شد.

چگونه خوراک‌ها را مرتب کنید؟
با یک کلیک! در حالت پیشفرض خوراک‌ها بر اساس زمان بروزرسانی(صعودی به نزولی از پایین به بالا) منظم هستند با بردن نشانگر ماوس روی عنوان ستون‌ها و کلیک بر روی آن‌ها می‌توانید بر اساس همان ستون خوراک‌ها را بصورت نزولی و صعودی درآورید و با دکمه‌های زیرین آن‌ها را پیمایش کنید. همچنین با کشیدن ستون‌ها می‌توانید‌ آن‌ها را بزرگ و کوچک کنید. دقیقا همانند کار با سلول‌ها در اکسل.

چگونه در خوراک‌ها جستجو کنید؟
برای شروع جستجو بر روی نماد جستجو در پایین سمت چپ کلیک کنید. نماد کناری عمل بروزرسانی را انجام می‌دهد. پنجره معلق جستجو قابل جابجا شدن است آن را می‌توانید به گوشه‌ایی خارج از جدول بکشید و براساس فیلدها و عملگرهای کاملا هوشمند، جستجوی پیشرفته‌ایی در تمام خوراک‌ها انجام دهید.

محتویات خوراک‌ها را چگونه مشاهده کنید؟
محتویات کامل خوراک‌ها فعلا مقدور نیست (فضا و پهنای باند کافی برای این کار نداریم) منحصرا لیست 10 مطلب اخیر هر خوراک با کلیک بر روی علامت مربع دراولین ستون کنار هر خوراک قابل مشاهده است.

چگونه از خروجی RSS استفاده کنید؟
فعلا خروجی RSS (خوراک فیدرول) بصورت صعودی به نزولی از آخرین آپدیت‌ها مرتب می‌شود تعداد آیتم‌ها را می‌توانید مشخص کنید برای مثال خروجی 20 وبلاگی که اخیراً بروزرسانی شده‌اند به صورت زیر است:

http://feedroll.izfree.com/rss.php?nu=20
nu = Item Count 

بزودی خروجی براساس تعداد مشترکین فیدبرنر و سایر معیارها با قابلیت offset برای دسترسی به آیتم‌های داخلی اضافه می‌شود. قابلیت‌های دیگری نیز به زودی افزوده خواهند شد. از هر نظر یا پیشنهاد شما برای بهبود عملکرد فیدرول مشتاقانه استقبال می‌شود. ضمنا یادتان نرود خوراک وبلاگ‌تان را اضافه کنید.

چند وقت پیش در یک پروژه کوچک با کلاس SimplePie آشنا شدم. انصافا در تجزیه عناصر درونی فید عالی عمل می‌کرد به خصوص اینکه مکانیزم caching مناسبی داشت. دو هفته قبل تصمیم گرفتم از این کلاس در قالب یه کامپونت برای CakePHP بمنظور ایجاد سیستمی مشابه بلاگرولینگ استفاده کنم.

خوشبختانه تا امروز با وجود کمبود وقتی که داشتم این وب اپلیکیشن کوچک رو تا یه جایی رسوندم نتیجه‌اش هم بلاگرول همین‌جاست. بعلت پهنای باند محدودم مجبور شدم فعلا پروژه را روی یک سرور رایگان ران کنم. هنوز پروژه تکمیل نشده و اگه فرصتم اجازه بده روی مولتی یوزر بودنش کار می‌کنم. (البته خبرهای خوشی از تیم توسعه بلاگرولینگ به گوش میرسه شاید تا اون زمان دوباره همه برگشتیم)

مهمترین دلیلم برای عدم استفاده از یه تجزیه‌گر فید ساده بمنظور لیست کردن وبلاگ‌ها، عدم ویرایش عناصر فیدها بود. حالا با استفاده از یه مکانیزم کش مناسب و ذخیره آخرین فید هر بلاگ در MySQL هم عناصر عنوان و توضیحات فیدها قابل ویرایش هستند و هم از لحاظ بهینه‌سازی بار سرور برای لیست‌های طولانی کمتر می‌شه.

لیست بلاگرول اینجا هر 15 دقیقه رفرش می‌شه خروجی فید بلاگرول من هم اینجاست. این‌ها همه رو گفتم برای این که بگم با گسترش کاربرد فید‌ها تگ pubDate خیلی مهمه. خیلی‌ها هنوز آیتم‌های فیدشون این برچسپ رو نداره یا مقدارش معتبر نیست!

• + بخش اول:
  1- معرفی اجمالی Eclipse و ایجاد workspace و project
  2- پیوند هسته کیک به پروژه جهت استفاده از قابلیت‌های توکار Eclipse
  3- پیکربندی برای شناسایی فایل‌های thtml یا ctp
  4- پیکربندی برای طبخ کیک بطور مستقیم با کنسول CakePHP

  + بخش دوم:
  5- دسترسی به پایگاه داده MySQL به کمک پلاگ‌‌این QuantumDB
  6- افزودن پشتیبانی از Subversion به کمک پلاگ‌این Subclipse

  آنچه بدین منظور نیاز دارید:
  +‌ نسخه‌ای از Eclipse که شامل ابزارهای توسعه‌ی پی‌اچ‌پی است (3.3.2)
  + نسخه‌ای از XAMPP که بطور پیشفرض در C:xampp نصب شده است
  + نسخه‌ای از CakePHP که بطور پیشفرض در C:xampphtdocscake قرار دارد
  + سیستم عامل ویندوز ایکس‌پی

چرا از Eclipse استفاده می‌کنم؟
اول اینکه کد باز است و تعداد زیادی پلاگ‌این برای آن نوشته شده است که همه‌ی نیازهای یک توسعه دهنده‌ی وب را پوشش می‌دهد بطوریکه با اطمینان می توان گفت این نرم‌افزار به تنهایی یک توسعه دهنده را راضی خواهد کرد.

دوم اینکه بزرگ و قدتمند است اما در عین حال ساده برای بکارگیری. Eclipse یک IDE خاص نیست بلکه برای طیف وسیعی از زبان‌های برنامه‌نویسی منتشر شده است. حتی خیلی از ادیتورهایی که جدیدا عرضه می‌شوند بر پایه‌ی Eclipse بنا شده‌اند. از آن جمله می‌توان نرم‌افزار Carbide.ui Theme Edition شرکت نوکیا که برای طراحی تم‌های گوشی‌های موبایل ساخته شده است را نام برد یا جای دوری نرویم همین Aptana که برای کار با فریم‌ورک‌های جاوااسکریپت پیشنهاد می‌شود و …

نصب Eclipse برای PHP
گفتم که Eclipse یک IDE کلی هست. در پروژه‌ایی تحت نام PHP Development Tools معروف به PDT (ابزارهای توسعه پی‌اچ‌پی) آنچه برای توسعه‌ی پی‌اچ‌پی مورد نیاز است به این IDE افزوده شده است.

براساس وب سایت PDT، پکیج All-in-One شامل مجموعه کاملی است برای آنکه بتوان بی‌درنگ از PDT استفاده کرد. آخرین نسخه پایدار برای ویندوز را می توانید از اینجا دریافت کنید.
خوشبختانه نصب eclipse بسیار ساده است چرا که هیچ مرحله‌ای برای نصب ندارد. کافیست آن را از حالت فشرده خارج کنید و در جایی مناسب کپی کنید سپس برنامه را اجرا کنید. برای اولین اجرا احتمالا سوالی برایتان پیش خواهد آمدکه …

workspace چیست؟
معمولا افراد از تعریف workspace تعابیر متفاوتی دارند. من آن را فضای کاری ترجمه می‌کنم. workspace در حقیقت مکانی است که پروژه‌هایتان را در آنجا نگه می‌دارید (در مثال ما خود فریم‌ورک CakePHP بعنوان workspace شناخته می‌شود) ساده بگویم یک دایرکتوری روی هارد. برای اولین بار اجرای eclipse باید workspace را تعریف کنید.

تعریف‌ کردن workspace
قاعده ثابتی بدین منظور وجود ندارد، اما من توصیه می‌کنم آن را برابر C:xampphtdocs مقدار‌دهی کنید. همچنین از طریق منو File و Switch Workspace می توانید workspace متفاوت دیگری مشخص کنید.

پروژه (Project) چیست؟
همانگونه که شما می‌دانید پروژه‌ی کاری، برنامه‌ا‌‌ی که در حال توسعه دادن است تعریف می‌شود. در مورد CakePHP پروژه‌ایی که در حال توسعه‌دادن است یک کپی از فولدر app کیک است. بنابراین نیاز داریم تا یک پروژه تعریف کنیم.

تعریف کردن پروژه
از منو File گزینه New و سپس PHP Project را انتخاب کنید. در صورتی که این گزینه وجود ندارد در قسمت Other و زیر شاخه PHP می‌توانید PHP Project را بیابید. تنظیمات بعدی را مطابق شکل انجام دهید (برای دیدن تصاویر در سایز واقعی روی آن‌ها کلیک کنید):

در eclipse هنگام تعریف پروژه چنانچه دایرکتوری پروژه محتوی فایل باشد پنجره‌ایی به شکل زیر برای تایید مسیر پروژه نمایان خواهد شد:

این پنجره هشدار می‌دهد که محلی که برای تعیین پروژه انتخاب کرده‌اید حاوی فایل است و پاک کردن پروژه در محیط eclipse فایل‌ها را پاک خواهد نمود. با انتخاب گزینه پیشفرض یعنی گزینه دوم، برنامه در مسیر داده شده یک فولدر جدید (هم‌ نام پروژه) می‌سازد و عملیات توسعه در آن انجام خواهد شد. اما از آنجایی که برای توسعه کیک می‌بایستی عملیات توسعه بر روی فایل‌هایی که از فولدر app کپی گرفته‌ایم انجام شود گزینه اول را انتخاب می‌کنیم. دقت کنید که در این حالت پاک کردن پروژه از داخل محیط IDE تمامی فایل‌های آن دایرکتوری را پاک خواهد کرد. هم اکنون می‌بایستی در ستون سمت چپ، پروژه‌تان را مشاهده کنید. می‌توانید هر فولدر را بسهولت باز و ساختار فایل‌های آن را مشاهده کنید.

پیوند هسته کیک به پروژه
حال نوبت آن رسیده است که این پروژه را به هسته کیک پیوند دهیم. به این معنی که بتوانید از کلاس‌ها و ثابت‌های کیک (classes & constants) با قابلیت تکمیل خودکار (auto-complete) استفاده کنید. علاوه بر این می‌توانید به فایل‌های هسته کیک دسترسی داشته باشید. یک راهنمای دم دست!
ابتدا هسته کیک را بعنوان یک پروژه تعریف می‌کنیم. دقیقا شبیه قبل از منو File گزینه New و سپس PHP Project را انتخاب کنید و سپس مطابق شکل زیر عمل کنید:

مجددا در پنجره تاییدیه مسیر پروژه، گزینه اول را انتخاب کنید. حال می‌بایستی بین این دو پروژه پیوند برقرار کنیم بدین منظور در نمای PHP explorer بر روی پروژه اصلی (نه پروژه‌ایی که بعنوان هسته تعریف شد) راست کلیک کرده و گزینه Configure Include Path را انتخاب می‌کنیم. در تب projects با انتخاب add پروژه‌ی Cake را تیک می‌زنیم (دقت کنید چنانچه پروژه Cake بسته باشد در این قسمت موجود نخواهد بود)

حالا می‌توانید نتیجه عملیات رو آزمایش کنید. برای برنامه‌ایی که در نظر دارید یک کنترلر باز یا ایجاد کنید و به نمای Outline بروید. همانطور که مشاهده می کنید کلاس‌ها، توابع و متغیر‌ها را تشخیص داده است. حتی وراثت کلاس را به خوبی مشخص می‌کند بطوری که می توانید به سادگی تمام زیرشاخه‌ها را وارسی کنید. خیلی جالبه نه! و جالب تر اینکه در ویرایشگر PHP قابلیت تکمیل خودکار خیلی هوشمندانه عمل می‌کنه (می‌توانید با میان‌بر Ctrl+Space آزمایش کنید)

پیکربندی برای شناسایی فایل‌های thtml یا ctp
بسته به اینکه از چه نسخه‌ایی از کیک استفاده می کنید با فایل‌هایی با فرمت thtml (برای نسخه 1.1 کیک) و یا ctp (برای نسخه 1.2 کیک) که برای ایجاد نما (view) استفاده می‌شوند، سر و کار خواهید داشت. این فایل‌ها در حقیقت محتوای PHP‌ دارند. برای اینکه بتوان از قابلیت های‌لایت و تکمیل کد استفاده کنیم بهتر است به روش زیر این فایل‌ها را برای Eclipse بعنوان فایل PHP تعریف کنیم.

بدین منظور از منو Window گزینه Preferences و سپس General را انتخاب کنید. در قسمت Content types شاخه‌ی text را باز کنید و PHP content type را انتخاب کنید. حال در قسمت file associations بر روی add کلیک کنید و *.ctp و *.thtml را در مراحلی جداگانه اضافه کنید.

حالا دوباره به preferences برگردید و اینبار Editors و از آنجا File Associations را انتخاب کنید. با انتخاب add مجددا فرمت‌های فوق را اضافه کنید. سپس با انتخاب این فرمت‌ها بطور جداگانه در قسمت Associated Editors با انتخاب add آن‌ها را به PHP Editor بطور پیشفرض اضافه کنید. حال می توانید یک فایل با فرمت ctp در کیک 1.2 باز کنید و های‌لایت کدها را ببینید.

پیکربندی برای طبخ کیک بطور مستقیم
این یک مجتمع‌سازی ماهرانه است و یکی از جالبترین بخش‌هایی است که می‌بایستی در تنظیمات eclipse لحاظ کرد. بسته به اینکه از چه نسخه‌ایی از کیک استفاده می کنید، تنظیمات متفاوت خواهد بود:

برای نسخه 1.1
از منو Run گزینه External Tools و از آنجا Open External Tools Dialogue را انتخاب کنید. بر روی Program از سمت چپ، راست کلیک کنید و New را انتخاب کنید. تنظیمات تب main را مطابق شکل زیر لحاظ کنید:

Apply و سپس Close کنید. حال از منوی run‌ گزینه External tools و از آنجا Organise favourites را انتخاب و با کلیک روی add و تیک دار کردن Bake_1_1 آن را به لیست اجرا اضافه کنید.

برای نسخه 1.2
ابتدا می‌بایستی کنسول CakePHP را در ویندوز پیکربندی کنید. هر چند یک فیلم آموزشی در این مورد در اینجا موجود است اما مراحل را توضیح می‌دهم:
به Control Panel از آنجا System و تب Advanced بروید. Environment Variables را انتخاب و از قسمت System variables متغیر سیستمی Path را باز کنید و در فیلد Variable Value در ادامه محتویات مقادیر زیر را قرار دهید (دقت کنید قبل از وارد کردن این مقادیر، در انتهای مقدار موجود علامت سیمیکولون یعنی ; را بگذارید):

C:xamppphp;C:xampphtdocscakecakeconsole;

پنجره‌ها را بترتیب ok کنید. در قسمت run منوی استارت cmd را تایپ کنید تا محیط Command Prompt باز شود در خط فرمان cake تایپ کنید چنانچه پیام خوش‌آمدگویی کنسول کیک را مشاهده کردید پیکربندی کنسول روی ویندوز درست انجام شده است. می توانید با استفاده از دستور cd به شاخه نصب کیک بروید تا مسیرهای صحیح Current Patch را ببینید (هر چند نیازی نیست)

به Eclipse برمی‌گردیم. برای اینکه تنظیمات پیکربندی کنسول در محیط IDE هم لحاظ شود Eclipse را ببندید و مجدد اجرا کنید. از منو Run گزینه External Tools و از آنجا Open External Tools Dialogue را انتخاب کنید. بر روی Program از سمت چپ، راست کلیک کنید و New را انتخاب کنید. تنظیمات تب main را مطابق شکل زیر لحاظ کنید:

Apply و سپس Close کنید. حال از منوی run‌ گزینه External tools و از آنجا Organise favourites را انتخاب و با کلیک روی add و تیک دار کردن Bake_1_2 آن را به لیست اجرا اضافه کنید.

چگونه کیک را طبخ کنیم؟
برای Bake کردن (که من طبخ کردن ترجمه‌اش کردم) run external tool را انتخاب و برحسب نسخه کیک bake_1_1 یا bake_1_2 را اجرا کنید. از طریق منوی run و گزینه External tools نیز قابل دسترسی هستند.
اگر از کیک 1.2 استفاده می‌کنید همانطور که در تنظیمات فوق مشاهده کردید برای آدرس دایرکتوری کاری مقدار ${project_loc} را جایگزین کردیم که بطور خودکار به پروژه‌ایی اشاره دارد که انتخاب شده است. یعنی در هنگام Bake کردن، پروژه‌ای که انتخاب شده باشد را Bake خواهد کرد نه سایر پروژه‌ها را. بنابراین باید دقت کنید که قبل از شروع عملیات طبخ پروژه را انتخاب کرده باشید (پروژه کاری نه پروژه‌ایی که بعنوان هسته کیک تعریف شد)

حال با کنسول CakePHP بسادگی می‌توانید پروژه‌های جدید ایجاد کنید، مدل، کنترلر و نما بسازید و دیتابیس را پیکربندی کنید. امیدوارم طباخی یاد داشته باشید. چون توضیح این قسمت خارج از حوصله من است اگر مشکلی داشتید مطرح کنید.

در ادامه این مطلب در پست‌های آینده، دسترسی به پایگاه داده MySQL به کمک پلاگ‌‌این QuantumDB و همچنین افزودن پشتیبانی از Subversion به کمک پلاگ‌این Subclipse توضیح داده خواهد شد.

طبق نمونه‌های گذشته به فایل links_controller.php کنش add را بصورت زیر اضافه می‌کنیم تا بتوانیم لینک‌های جدیدی در دیتابیس اضافه کنیم:

<?php
class LinksController extends AppController {
  var $name = 'Links';
  function index() {
    $this->set('links', $this->Link->find('all'));
  }     
  function view($id = null) {
    $this->Link->id = $id;
    $this->set('link', $this->Link->read());
  }       
  function add() {
    if (!empty($this->data)) {
     if ($this->Link->save($this->data)) {
$this->flash('Your link has been saved.', '/links');
     }
    }
  }  
}
?>

تابع add را به این صورت تعریف می‌کنیم که چنانچه فرم ارسال شده خالی نبود، با استفاده از مدل Link سعی شود داده ذخیره شود اما چنانچه بنا به دلایلی ذخیره نشد، نما نمایش داده شود. این خود فرصتی را در اختیارمان قرار می‌دهد تا خطاهای ناشی از محتوای فیلدهای ارسالی را نمایش دهیم.

هنگامی کاربر به روش POST داده‌ها را به برنامه ارسال می‌کند، این اطلاعات در $this->data وجود دارند با استفاده از تابع pr‌ می‌توانید آن‌ها را چاپ کنید. تابع $this->flash() یک متد کنترلر است که برای چند ثانیه پیامی را به کاربر نشان می‌دهد. سپس کاربر را به صفحه‌ای که به عنوان پارامتر دوم دریافت می‌کند هدایت می‌کند. (در اینجا کاربر به صفحه‌ی links هدایت می‌شود)

در اینجا لازم است در مورد اشکال زدایی توکار فریم‌ورک (Debug) توضیح بدهم. کیک برای اشکال زدایی دو حالت تولید (Production) و توسعه (Development) دارد. حالت تولید مربوط به زمانی است که پروژه تان با کیک اتمام یافته و قصد دارید آن را ارائه کنید. حالت توسعه هم گویای زمان توسعه پروژه است. این حالت‌ها در فایل appconfigcore.php با مقداردهی عددی از 0 تا 3 برای debug قابل تنظیم است.

مقدار 0 مربوط به حالت تولید می‌شود، در این حالت هیچ خطا و هشداری مشاهده نمی‌شود و تابع Flash که در بالا معرفی شد بصورت redirect عمل میکند (بطور خودکار کاربر به صفحه دیگر منتقل می‌شود) در حالتی که این مقدار بزرگتراز صفر تنظیم شود فریم‌ورک در حالت توسعه است و تابع Flash بطور خودکار عمل انتقال کاربر به صفحه جدید را انجام نمی‌دهد (بطور پیشفرض مقدار روی 2 تنظیم شده است)

متد save خطاها را بررسی خواهد کرد و چنانچه خطایی رخ دهد عمل ذخیره انجام نخواهد شد. در قسمت بعد توضیح خواهم داد که چگونه این خطاها را کنترل کنید.

هر برنامه‌نویس تحت وبی رویکردی برای بررسی صحت اطلاعات وارد شده در فیلدهای فرم‌ها دارد و تقریبا معتبرسازی اطلاعات وارد شده و هدایت کاربر به پرکردن صحیح فرم‌ها کار وقت گیری است. کیک در این مورد بی‌اندازه متنوع و انعطاف‌پذیر است.

برای بهره‌گیری از قابلیت‌های معتبرسازی فرم‌ها کافیست از FormHelper کیک استفاده کنید. FormHelper بطور پیشفرض در همه نماها که در آن عملگر $form بکار رود موجود است. نمای add را بصورت زیر ایجاد می‌کنیم:

/app/views/links/add.ctp
<h1>Add Link</h1>
<?php
echo $form->create('Link');
echo $form->input('title');
echo $form->input('url');
echo $form->input('body', array('rows' => '3'));
echo $form->end('Save Link');
?>

در اینجا از $form->create() بمنظور ایجاد تگ باز form استفاده کردیم این کد خروجی زیر را تولید می‌کند:

<form id="LinkAddForm" method="post" action="/cake/links/add">

اگر تابع create هیچ پارامتری نداشته باشد، بطور پیشفرض کیک action و method را مقدار‌دهی می‌کند. از $form->input() هم برای ایجاد عناصر فرم با همان نامی که به عنوان پارامتر می‌گیرد استفاده می‌شود. کیک توسط اولین پارامتر تشخیص می‌دهد که فیلد از چه نوعی است و دومین پارامتر این امکان را فراهم می کند که آرایه وسیعی با اختیارات فراوان تعیین کنیم. در اینجا تعداد سطرهای textarea لحاظ شده است. input() عناصر فرمی متفاوتی را، مبنی بر مدل فیلد مشخص شده، ایجاد می‌کند و این یکی از شگردهای کیک است.
با فراخوانی $form->end() یک کلید ارسال ایجاد، و تگ form بسته می‌شود. رشته‌ای که به عنوان اولین پارامتر end() قرار می‌گیرد، برابر مقدار (value) کلید ارسال خواهد بود.

حال اجازه بدهید به صفحه اصلی لینکدونی برگردیم و در فایل app/views/links/index.ctp لینک صفحه جدیدی را که بمنظور افزودن داده به دیتابیس ساختیم، قبل از جدول اضافه کنیم:

<?php echo $html->link('Add Link','/links/add')?>

ممکنه تعجب کنید که چطور کیک صحت اعتبار این فیلدها را بررسی می‌کند. قاعده‌های معتبر‌سازی در مدل تعریف می‌شوند. بدین منظور مجدداً به مدل Link بر می‌گردیم و اصلاحاتی را به شکل زیر لحاظ می‌کنیم:

<?php
class Link extends AppModel {
   var $name = 'Link';
   var $validate = array(
     'title' => array(
     'rule' => array('minLength', 1)
    ),
     'url' => array(
     'rule' => array('minLength', 1)
    ),    
     'body' => array(
     'rule' => array('minLength', 1)
    )
  );	
}
?>

آرایه $validate به کیک می‌گوید که هنگامی که متد save() فراخوانی شد چگونه صحت اطلاعات بررسی شود. در اینجا سه فیلد عنوان، آدرس و توضیحات را چک می‌کنیم که نبایستی خالی باشد. یکبار دیگر تکرار می‌کنم موتور معتبرسازی کیک بسیار قوی است چرا که شمار زیادی از قواعد پیش‌ساخته شده (بررسی صحت آدرس ایمیل، شماره کارت اعتباری، تلفن و …) در آن گنجانده شده است و سفارشی سازی آنها انعطاف پذیری فوق العاده‌ای دارد. برای اطلاعات بیشر می توانید به اینجا رجوع کنید.

هم‌اکنون قواعد معتبرسازی لحاظ شده‌اند. فرم افزودن لینک را با فیلدهای خالی تست کنید تا ببینید چگونه کار می‌کند. هنگامی که از input() برای ایجاد عناصر فرم استفاده می‌کنیم، خطاهای مربوط به عدم صحت داده بطور خودکار نمایش داده می‌شوند.

قصد داریم امکانی را ایجاد کنیم که کاربران بتوانند لینک‌ها را از دیتابیس پاک کنند. خوب! با کنش delete() در LinksControlle به شکل زیر شروع می کنیم:

function delete($id) {
$this->Link->del($id);
$this->flash('The link with id: '.$id.' has been deleted.', '/links');
}

این تابع با گرفتن $id هر لینک، آن را از دیتابیس پاک می‌کند و با استفاده از flash() پیام تاییدی را مبنی بر حذف لینک قبل از ری‌دایرکت (انتقال خودکار) شدن به صفحه‌ی /links به کاربر نشان می‌دهد. با این وجود یکبار دیگر باید فایل index.ctp را بصورت زیر ویرایش کنیم و قابلیت حذف هر لینک را به آن بیفزاییم:

<h1>Links:</h1>
<p><?php echo $html->link('Add Link','/links/add')?></p>

<table>
<tr>
<th>Id</th>
<th>Title</th>
<th>Actions</th>
<th>Created</th>
</tr>
<?php foreach ($links as $link): ?>
<tr>
<td><?php echo $link&#91;'Link'&#93;&#91;'id'&#93;; ?></td>
<td><?php echo $html->link($link['Link']['title'],
"/links/view/".$link['Link']['id']); ?></td>
<td><?php echo $html->link('Delete', "/links/delete/{$link['Link']['id']}", null, 'Are you sure?' )?></td>
<td><?php echo $link&#91;'Link'&#93;&#91;'created'&#93;; ?></td>
</tr>
<?php endforeach; ?>
</table>

کد بالا از قابلیت توکار HtmlHelper بمنظور ایجاد یک دیالوگ جاوااسکریپتی تایید حذف لینک، قبل از اینکه کاربر لینک را حذف کند، استفاده می کند. می‌بینید این فریم‌ورک تا چه اندازه همه چیز را ساده کرده است!

اگر مراحل قبل را فراگرفته باشید از الان شما یک حرفه‌‌ای کیک پی‌اچ‌پی هستید! پس می‌بایستی الگوی ادامه کار را حدس بزنید. یک کنش می‌سازیم و سپس نما را اضافه می‌کنیم. در زیر کنش edit() را که باید در LinksControlle لحاظ شود می‌بینید:

function edit($id = null) {
 $this->Link->id = $id;
 if (empty($this->data)) {
  $this->data = $this->Link->read();
 } else {
  if ($this->Link->save($this->data)) {
$this->flash('Your link has been updated.','/links');
  }
 }
}

این تابع ابتدا داده ارسالی فرم را بررسی می‌کند ، اگر هیچ چیزی فرستاده نشده باشد لینک‌ها را به نما منتقل می‌کند. اگر داده‌ای در نتیجه تغییر، ارسال شده باشد سعی می‌کند از طریق مدل Link داده‌ جدید را در دیتابیس ذخیره کند (یا خطاهای ناشی از عدم اعتبار داده را نشان خواهد داد) نمای edit بصورت زیر است:

/app/views/links/edit.ctp
<h1>Edit Link</h1>
<?php
echo $form->create('Link', array('action' => 'edit'));
echo $form->input('title');
echo $form->input('url');
echo $form->input('body', array('rows' => '3'));
echo $form->input('id', array('type'=>'hidden'));
echo $form->end('Save Link');
?>

خروجی کد بالا فرمی خواهد بود که درفیلدهای آن اطلاعات لینکی که درخواست ویرایش آن داده شده قرار دارد. باید در اینجا توجه کنید که id هر لینک بصورت یک عنصر مخفی (hidden) در فرم آمده است. در حقیقت هنگامی که id هر لینک با اطلاعات ارسال شده باشد کیک تشخیص می‌دهد که این لینک باید ویرایش شود در صورتی که اگر id با اطلاعات ارسالی نباشد هنگامی که تابع save() فراخوانی می‌شود یک لینک جدید اضافه خواهد شد.

مجدداً به نمای index برمی‌گردیم و قابلیت ویرایش هر لینک را به صورت زیر در کنار پیوند مربوط به حذف لینک اضافه می‌کنیم (تا در صفحه‌ی اصلی قابلیت ویرایش لینک را داشته باشیم):

<?php echo $html->link('Edit', '/links/edit/'.$link['Link']['id']);?>

تا اینجا آموختید که چگونه با CakePHP یک لینکدونی ساده بسازید. قابلیت‌هایی نظیر افزودن، ویرایش و حذف لینک تنها به این دلیل بود که با نحوه ایجاد کنش در کنترلر آشنا شوید و بتوانید نماهای مربوطه را ایجاد کنید. به ادمه بحث در مورد Routes (مسیرها) می‌پردازیم.

برای بعضی‌ها تنظیمات پیشفرض کیک در مورد مسیرها کافی است. اما توسعه دهندگان نسبت به کاربرپسند کردن URL‌ها و سازگاری با موتورهای جستجو حساس هستند. از اینرو می‌توانند از تنظیمات Routes استفاده کنند. در این آموزش تغییرات ناچیزی را در این مورد لحاظ می‌کنیم برای اطلاعات بیشتر و تکنیک‌های مسیر‌دهی پیشرفته، بخش Routes Configuration در مستندات کیک را ببینید.

تا اینجا که لینکدونی را ایجاد کردیم چنانچه کاربری به صفحه‌ی اصلی (شاخه دایرکتوری اصلی) به نشانی example.com/cake مراجعه کند بطور پیشفرض PagesController فراخوانی می‌شود و نمایی بنام home رندر می‌شود. قصد داریم مسیر را طوری تعیین کنیم که با درخواست شاخه اصلی، لیست لینک‌ها نمایش داده شود.

مسیرها در فایل app/config/routes.php تعیین می‌شوند. خط زیر مسیر پیشفرض شاخه اصلی را تعیین می‌کند. آن را توسط کامنت (//) غیرفعال کنید یا این خط را پاک کنید:

Router::connect('/', array('controller' => 'pages', 'action' => 'display', 'home'));

خط فوق آدرس ‘/’ را با صفحه پیشفرض کیک مرتبط می‌کند. ما می‌خواهیم آن را با کنترلر خودمان ارتباط دهیم بنابراین خط زیر را به این فایل اضافه می‌کنیم:

Router::connect('/', array('controller' => 'links', 'action' => 'index'));

حال با رفتن به صفحه اصلی کیک به نشانی example.com/cake بجای صفحه پیشفرض لیست لینک‌ها را می‌بینید. می‌توانید نام شاخه اصلی را که در بخش اول آموزش cake گذاشتید، به linkdump تغییر دهید (تا هخوانی بیشتری با پروژه داشته باشد) بنابراین آدرس صفحه اصلی به example.com/linkdump تغییر خواهد کرد.

اگر نام شاخه را از cake به linkdump تغییر دادید فایل‌های تمپ را پاک کنید تا صفحه اصلی را ببینید. تنها جهت آشنایی شما با خطاهای پیکربندی اولیه کیک، نام دایرکتوری را ابتدا cake انتخاب کردم چون می‌توانست از همان ابتدا linkdump انتخاب شود.

نوشتن این لینکدونی در اینجا به پایان رسید. ساده نبود؟! یادتان باشد این آموزش پایه بود CakePHP خیلی خیلی قابلیت‌های بیشتری از آنچه گفته شد دارد و بیش از آنچه تصور کنید انعطاف‌پذیر است. متاسفم از اینکه باید بگویم فرصت کافی ندارم تا آنچه از کیک می‌دانم بزبان ساده بیان کنم.

از همین الان می‌توانید پروژه‌های آزمایشی را با کیک شروع کنید. بزرگترین راهنما یعنی Manual و API کیک در اختیار شماست. اگر مشکلی داشتید در حد دانشم درخدمتم. موفق باشید. (مرتضی الوانی، آبانماه 1387)

[+] دایرکتوری app این پروژه بهمراه فایل sql ساخت جدول
[+] آموزش کامل (بخش‌های اول و دوم و سوم) بصورت PDF

/* First, create our links table: */
CREATE TABLE links (
id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
url VARCHAR(255),
title VARCHAR(255),
body TEXT,
created DATETIME DEFAULT NULL,
modified DATETIME DEFAULT NULL
);
/* Then insert some links for testing: */
INSERT INTO links (url, title, body, created) VALUES
('http://alvanweb.com', 'Alvanweb', 'All about web design and progrmming', NOW()),
('http://cakephp.org', 'CakePHP', 'The rapid development php framework', NOW());

نام‌ جدول و ستون‌ها اختیاری نیستند! اگر از قواعد نامگذاری جداول و کلاس‌های کیک پیروی کنید خواهید توانست از مزایای توابع توکار کیک بدون پیکر‌بندی براحتی استفاده کنید. کیک تا انجا انعطاف پذیر است که حتی با وجود عدم تطابق با طرح‌های پیشفرض می‌توانید آن را سفارشی کنید اما استفاده از قواعد در صرفه‌جویی زمان موثر است.

برای اطلاعات بیشتر در مورد این قواعد نامگذاری اینجا را ببینید. اما همین اندازه کافی است که بدانید جدول links بطور خودکار به مدلی بنام link اشاره دارد و همچنین فیلدهای created و modified بطور منطقی و خودکار توسط کیک مدیریت می‌شوند.

به سراغ کدنویسی کیک می‌رویم. اولین فایلی که باید ایجاد کنیم یک مدل برای لینک‌ها است. به زبان ساده بگویم مدل در واقع نان و کره‌ی یک برنامه نوشته شده با کیک است. با ایجاد یک مدل با دیتابیس ارتباط برقرار کرده‌ایم. در ابتدا پایه کد را می‌نویسیم سپس اعمالی نظیر نمایش، افزودن، ویرایش و حذف لینک را اضافه خواهیم کرد.

کلاسی که به عنوان مدل تعریف می‌شود در app/models قرار می‌گیرد و محتویات فایلی که در app/models/link.php ذخیره خواهد شد بصورت زیر است:

<?php
class Link extends AppModel {
   var $name = 'Link';
}
?>

یادتان نرود قواعد نامگذاری در کیک بسیار مهم است. با نامیدن مدل بنام Link کیک بطور خودکار می‌تواند تشخیص دهد که این مدل توسط کنترلری بنام LinksController بکار گرفته خواهد شد و با جدولی بنام links در دیتابیس در ارتباط است.

اگر کیک نتواند فایلی مطابق با مدل در app/models بیابد، بطور داینامیک یک آبجکت مدل ایجاد می‌کند. این همچنین به این معناست که اگر بطور تصادفی نام فایل مدل را اشتباه تایپ کنید (مثلا بجای link.php نام فایل links.php شود) کیک هیچ کدام از تنظیمات شما را لحاظ نمی کند و در عوض مقادیر پیشفرض خودش را جانشین خواهد کرد.

در این مرحله برای لینک هایمان یک کنترلر ایجاد می‌کنیم. کنترلر جایی است که قصد داریم جزئیات لینک ها را استخراج کنیم. فایلی بنام links_controller.php را با محتویات پایه‌ی زیر در app/controllers ایجاد می‌کنیم:

<?php
class LinksController extends AppController {
   var $name = 'Links';
}
?>

حال اجازه دهید یک کنش (Action) به کنترلر بیفزایم. کنش اغلب به یک تابع در برنامه اشاره دارد. برای مثال وقتی کاربران درخواست example.com/cake/links/index را ‌می‌دهند (که با example.com/cake/links مشابه است) انتظار دارند با لیستی از لینک‌ها مواجه شوند. کدی که این کنش را تعریف می‌کند بصورت زیر است:

<?php
class LinksController extends AppController {
   var $name = 'Links';
   function index() {
     $this->set('links', $this->Link->find('all'));
   }
}
?>

با تعریف تابع index در LinksController، کاربران می‌توانند به درخواستی مانند این example.com/cake/links/index دسترسی داشته باشند. بطور مشابه اگر تابعی بنام foobar تعریف کنیم کاربران قادر خواهند بود به درخواست example.com/links/foobar دسترسی داشته باشند.

ممکن است کنجکاو شوید تا به طریقی نام‌های کنترلر و کنش را تغییر دهید. فعلاً دست نگهدارید و از قواعد کیک بمنظور ایجاد کنش‌های قابل فهم استفاده کنید. در آینده بدین منظور با routes در کیک آشنا خواهید شد.

در این کنش از تابع set برای گذر داده از کنترل‌کننده به نمایش (view) استفاده می‌کنیم. این خط، متغیر links را برابر مقدار بازگشتی از find(‘all’) تنظیم می‌کند. مدل لینک بطور خودکار در $this->Link موجود خواهد بود چراکه از قواعد نامگذاری کیک استفاده کردیم.

تا هم اکنون با جریان داده به مدل، منطق برنامه و روند تعریف شده توسط کنترلر آشنا شدید حال اجازه دهید یک نما برای کنش index که در بالا تعریف شد ایجاد کنیم. نماهای کیک در واقع نمایش اجزایی هستند که در طرح‌بندی (layout) برنامه کنار هم قرار میگیرند. برای بیشتر برنامه‌ها HTML مخلوط با PHP استفاده می‌شود اما می تواند بصورت XML، CSV یا حتی داده باینری باشد.

آخرین قسمت عنوان قبل را بیاد آورید، که چگونه متغیر links را با متد set به نما ارجاع می‌دادیم؟ خروجی آرایه را می‌توانیم به صورت زیر نشان دهیم:

// print_r($links) output:
Array
(
 [0] => Array
  (
	[Link] => Array
	 (
	 [id] => 1
	 [url] => http://alvanweb.com
	 [title] => Alvanweb
 [body] => All about web design and progrmming
	 [created] => 2008-10-22 20:29:21
	 [modified] =>
	 )
  )
 [1] => Array
  (
	Link] => Array
	 (
	 [id] => 2
	 [url] => http://cakephp.org
	 [title] => CakePHP
 [body] => The rapid development php framework
	 [created] => 2008-10-22 20:29:21
	 [modified] =>
	 )
  )
)

فایل‌های مربوط به نما در app/views در فولدری همنام با واژ‌ه‌ای که در کنترلر تعریف می‌شود، ذخیره می‌شوند. (در اینجا می‌بایستی نام فولدر ما links باشد) برای فرم‌دادن به داده‌ی لینک‌هایمان در قالب یک جدول زیبا(ایجاد صفحه‌ای برای کنش index)، از کد زیر استفاده می‌کنیم:

/app/views/links/index.ctp
<h1>Links:</h1>
<table>
<tr>
<th>Id</th>
<th>Title</th>
<th>Created</th>
</tr>
<?php foreach ($links as $link): ?>
<tr>
<td><?php echo $link&#91;'Link'&#93;&#91;'id'&#93;; ?></td>
<td><?php echo $html->link($link['Link']['title'],
"/links/view/".$link['Link']['id']); ?></td>
<td><?php echo $link&#91;'Link'&#93;&#91;'created'&#93;; ?></td>
</tr>
<?php endforeach; ?>
</table>

احتمالاً متوجه استفاده از آبجکتی بنام $html شده‌اید. این یک نمونه از کلاس HtmlHelper کیک است. کیک‌ پی‌اچ‌پی مجموعه‌ای از این آبجکت‌ها را تحت نام view helpers در خود گنجانده است مواردی از قبیل لینک‌گذاری، خروجی فرم، جاوااسکریپت و آژاکس از این دسته‌اند. اطلاعات تکمیلی درمورد کار با آنها را می‌توانید اینجا بیابید. اما انچه در اینجا مهم است که بدان اشاره شود متد link است که بوسیله‌ی پارامترهایی که گرفته است، یک لینک HTML را ایجاد خواهد کرد. در این مرحله می بایستی بتوانید در مرورگرتان مسیر example.com/cake/links/index را ببینید.

اگر بر روی هر یک از لینک‌ها کلیک کنید تا توضیحاتش را ببینید با صفحه‌ی خطایی مواجه خواهید شد مبنی بر این که کنش مربوطه در فایل کنترل‌کننده هنوز تعریف نشده است. بنابراین مجدداً به فایل links_controller.php بر‌ می‌گردیم تا یک کنش بنام view بمنظور نمایش اطلاعات هر لینک ایجاد کنیم:

<?php
class LinksController extends AppController {
  var $name = 'Links';
  function index() {
    $this->set('links', $this->Link->find('all'));
  } 
  function view($id = null) {
    $this->Link->id = $id;
    $this->set('link', $this->Link->read());
  }    
}
?>

خوب با set که از قبل آشنایی دارید اما نکته‌ای که در اینجا لازم است به آن اشاره کنیم این است که بجای find(‘all’) از read استفاده کردیم چراکه قصد داریم اطلاعات تنها یک لینک را استخراج کنیم.

دقت کنید کنش view یک پارامتر می‌گیرد که برابر با ID هر لینک است. این پارامتر از طریق درخواست از طریق URL مقداردهی می‌شود بطوریکه اگر کاربری links/view/2 را درخواست دهد، مقدار 2 برابر ID خواهد بود. حال اجازه دهید نمای view را برای این کنش در app/views/links بصورت زیر ایجاد کنیم:

/app/views/links/view.ctp
<h1><?php echo $html->link($link['Link']['title'],
$link['Link']['url']); ?></h1>
<p><small>Created: <?php echo $link&#91;'Link'&#93;&#91;'created'&#93;?></small></p>
<p><?php echo $link&#91;'Link'&#93;&#91;'body'&#93;?></p>

حال با کلیک بر روی هر لینک اطلاعات مربوط به آن لینک در صفحه‌ای دیگر نمایش داده خواهد شد. در پست بعدی سایر مراحل را دنبال خواهیم کرد.
ادامه: ساخت لینکدونی با CakePHP (بخش سوم)

1) سرور HTTP،‌ ترجیاً Apache با mod_rewrite فعال (برای کاربرپسند کردن URL‌ها و کار با فایل‌های htaccess بهتر است قابلیت mod rewrite را فعال کنید. بدین منظور می‌بایستی فایل httpd.conf سرور آپاچی را ویرایش کنید)

2) پی‌‌اچ‌پی 4.3.2 یا بالاتر، کیک پی‌اچ‌پی با نسخه‌های 4 و 5 پی‌اچ‌پی کاملاً سازگار است. برای نصب PHP تحت ویندوز خواندن این مطلب پیشنهاد می‌شود.

برای اجرای کیک موارد فوق کافی است اما در مورد ساخت لینکدونی به یک پایگاه داده نیاز داریم. ترجیحاً از MySQL استفاده می‌کنیم. برای نصب و راه‌اندازی مای ‌اس‌کیو‌ال سرور، خواندن این مطلب پیشنهاد می‌شود. لازم به ذکر است، CakePHP علاوه بر MySQL از پایگا‌ه‌های داده زیر پشتیبانی می‌کند:

• PostgreSQL| Firebird DB2 | Microsoft SQL Server | Oracle | SQLite | ODBC

برای راحت‌کار کردن با MySQL بهتر است از رابط تحت وب phpmyadmin استفاده کنید یا با استفاده از رابط گرافیکی MySQL GUI Tools دیتابیس را مدیریت کنید.

کیک کاملاً رایگان و کد‌باز است. به دو طریق می‌توانید آخرین نسخه از آن را دریافت کنید. اول اینکه یک نسخه فشرده شده‌ی (zip/tar.gz/tar.bz2) آن را از اینجا بگیرید یا از مخزن SVN (برای سری 1.2.x.x از اینجا) استفاده کنید. تمامی متعلقات کیک در پروژه‌ای بنام CakeForge جمع آوری شده است. دریافت مستقیم کیک بهمراه مستندات نسخه‌های 1.1 و 1.2 آن در اینجا موجود است. در این آموزش از سری 1.2 این فریم‌ورک استفاده می کنیم.

پس از دریافت کیک آن را به وب سرور خود منتقل کنید ساختار فولدر‌ها و فایل‌های بیس کیک به صورت زیر است:

از فولدر App شروع می‌کنیم، این همان فولدری است که بیشترین کار توسعه پروژه‌ در آن انجام می شود. هر چند نام فایل‌ها و فولدر‌های موجود در این شاخه گویای همه چیز است اما اجازه دهید نگاه دقیقتری به محتویات آن داشته باشیم:

Config فایل‌های مربوط به پیکربندی برنامه معمولا در اینجا قرار دارند. دقت کنید این فایلها تنظیمات مربوط به هسته فریم ورک را شامل نمیشود (تنها تنظیمات مختصری در مورد پروژه‌ی کاریمان نظیر جزییات اتصال به پایگاه داده، محل قرار گیری فایل‌ها روی سرور و …)

Controllers کنترل‌گرها و مولفه‌ها‌ی (کامپونت‌ها‌ی) پروژه‌ در این فولدر قرار خواهند گرفت. پیش از این گفتیم کنترل کننده (کنترلر) درخواست‌هایی که توسط کلاینت ایجاد شده را بررسی و به یه مسیر صحیح هدایت می کند.

Locale برای فایل‌های مربوط به بومی‌سازی پروژه مورد استفاده قرار می‌گیرد. برای مثال قصد دارید پروژه‌ای را شروع کنید که به چند زبان مختلف موجود باشد، فایل‌های حاوی سایر زبان‌ها در اینجا قرار می‌گیرند.

Models مدل‌‌های پروژه ‌در این فولدر قرار خواهند گرفت. قبلاً گفتیم که که مدل‌ها به نوعی به داده برنامه اشاره دارد. معمولاً جداول پایگاه‌های داده در اینجا مورد بحث قرار می‌گیرند بطوریکه به ازای هر جدول پایگاه داده، یک فایل در این فولدر قرار خواهد گرفت که بدان جدول اشاره دارد.

Plugins پکیج‌های پلاگین چنانچه در صورت نیاز برای پروژه نوشته شود در اینجا قرار خواهد گرفت. پس از اتمام پروژه می توانید افزونه‌هایی بنویسید که بدون تغییر اساسی در پروژه قابلیت‌های جداگانه‌ای بدان اضافه کند.

Tmp در این فولدر اطلاعات تمپ (موقتی) ذخیره می‌شوند. نحوه ذخیره اطلاعات به تنظیمات کیک بستگی خواهد داشت، اما بطور معمول توضیحات مدل، فایل‌های ثبت وقایع و گاهی اوقات اطلاعات نشست‌ها در این فولدر ذخیره می‌شوند.

Vendors کلاس‌ها یا کتابخانه‌هایی که توسط شخص برنامه‌نویس برای استفاده در برنامه نوشته می‌شوند باید در اینجا قرار بگیرند. جلوتر خواهید دید که بایک تابع توکار براحتی می‌توانید این محتویات را به پروژه‌ الحاق و از آنها استفاده کنید.

Views صفحات بصری که به نوعی با کاربر در ارتباط است شامل صفحات مربوط به طرح‌بندی، عناصر، خطا‌ها، راهنماها در اینجا قرار می‌گیرند.

Webroot در نهایت این فولدر در نصب برنامه می‌بایستی به عنوان root (شاخه اصلی) پروژه بکار گرفته شود. همچنین این فولدر فایل‌های مربوط به CSS، تصاویر و جاوااسکریپت را در بر خواهد داشت.

به فولدر اصلی بر‌میگردیم. دو فولدر cake و vendors هسته این فریم‌ورک را تشکیل می‌دهند و همین اندازه آشنایی با این دو فولدر برای کار با این فریم‌ورک کافی است (اگر مشتاقید به جمع توسعه دهندگان این فریم‌ورک بپوندید مستندات کیک درمورد توابع و کلاس‌های سازنده هسته کاملاً روشن است)

هر چند توضیحات ساختاری فایل‌ها و فولدرها می توانست بیش از این به تفصیل بیان شود اما بعلت کمبود وقت و دورشدن از هدف اصلی از آنها عبور می‌کنیم .

یک فولدر بنام cake در وب سرور می‌سازیم و محتویات کیک‌پی‌اچ‌پی را به آن منتقل می‌کنیم. در مرورگر آدرس دایرکتوری که فایل‌های پروژه در آن قرار دارد به صورت زیر خواهد بود:

اگر وب سرور را اجرا کرده باشید پس از ارسال درخواست صفحه‌‌ی خوش آمد کیک را مشاهده خواهید نمود. چنانچه چیدمان مطالب موجود آرایش منظمی ندارد (صفحه فاقد تصویر و استایل است)، احتمالاً mod rewrite سرور فعال نیست. بدین منظور فایل httpd.conf وب سرور آپاچی را با یک ویرایشگر متن با کرده و بدنبال خط زیر بگردید و با حذف علامت # از ابتدای خط، mod_rewrite.so را به ماژول‌های وب سرور اضافه کنید. حال وب سرور را ریستارت کنید و صفحه را ریفرش کنید مشکل باید حل شده باشد.

#LoadModule rewrite_module modules/mod_rewrite.so

برای اجرای صحیح کیک بطور پیشفرض، تاکید بر این است که mod rewrite سرور فعال باشد اما چنانچه بنا به دلایلی نخواستید این ماژول را به وب سرور اضافه کنید، می‌بایستی تمامی فایل‌های htaccess را از فولدرهای کیک حذف کنید و در فایل app/config/core.php با حذف علامت کامنت (//) از ابتدای خط زیر، کیک را بدون mod rewrite اجرا کنید:

Configure::write('App.baseUrl', env('SCRIPT_NAME'));

برای اولین مرتبه که کیک راه‌اندازی می‌شود، در صفحه اصلی هشدارهایی را خواهید دید. در نسخه 1.2 کیک، استایل بکار رفته با رنگ‌های زرد و سبز، کاربر را راهنمایی می‌کند. ابتدا فایل app/config/core.php را باز کنید. Security.salt را پیدا کنید و آن را به دلخواه تغییر دهید (می توانید دو سه کاراکتر آن رشته را تغییر دهید) این یک رشته تصادفی است که کیک برای رمزنگاری از آن استفاده می‌کند تا هنگامی که مقدار پیشفرض آن را تغییر ندهید خطای زرد رنگ مبنی بر تغییر آن در صفحه اصلی وجود خواهد داشت.

خطای زرد رنگ دیگری که در این صفحه خواهید دید مربوط به تنظیمات پایگاه داده است. بمنظور رفع آن فایل app/config/ database.php.default را به database.php تغییر نام دهید. پایگاه‌ داده‌ای بنام linkdump درMySQL بسازید و بمنظور ارتباط پایگاه داده به کیک فایل database.php را باز کنید و آرایه default را با آنچه قبلاً در نصب پایگاه داده وارد کرده‌اید تنظیم کنید:

var $default = array(
'driver' => 'mysql',
'persistent' => false,
'host' => 'localhost',
'login' => 'root',
'password' => 'nbuser',
'database' => 'linkdump',
'prefix' => '',
);

خطای دیگری که ممکن است موجود باشد مربوط به فولدر app\tmp است. قبلاً گفتیم که tmp برای ذخیره‌ی فایل‌های موقتی نظیر ثبت وقایع و نشست‌ها استفاده می‌شود از این رو می‌بایستی مجوز آن را طوری تعیین کنید که قابلیت نوشتن در فولدر فعال باشد. در صورتی که موارد فوق را درست انجام داده باشید صفحه‌ی اصلی کیک به صورت زیر خواهد بود:

در پست بعدی سایر مراحل را دنبال خواهیم کرد.
ادامه: ساخت لینکدونی با CakePHP (بخش دوم) و (بخش سوم)

1- Model مدل به داده برنامه اشاره دارد (معمولا جداول پایگاه داده). 2- View شاید هیچ لفظ فارسی جز خود این واژه نتونه جایگزین خوبی باشه اما این واژه را “نما” تعریف می‌کنم. نما در حقیقت یه رندر تصویری از داده مدل هست که در انتها به مرورگر کاربر ارسال میشه. 3- Controller کنترل کننده (کنترلر) درخواست‌هایی که توسط کلاینت ایجاد شده را بررسی و به یه مسیر صحیح هدایت می کند.

نمودار زیر چرخه معماری MVC را در CakePHP توضیح می ده:

برای مثال فرض کنید یه کلاینت بنام ریکاردو بر روی یک لینک (بالفرض خرید کیک که لینکی شبیه زیر داره) در صفحه اصلی برنامه کلیک کنه بنابراین درخواست از مرورگر وی به وب سرور منتقل می‌شه.

http://www.example.com/cakes/buy

در اینجا dispatcher آدرس درخواستی رو بررسی می‌کنه (cakes/buy/) و این درخواست رو به یک کنترلر صحیح هدایت می‌کند. کنترلر، منطق مشخص برنامه رو انجام می‌ده، برای مثال چک می کنه آیا ریکاردو تا حالا لاگین کرده یا نه. علاوه براین کنترلر بمنظور دستیابی به داده‌های برنامه از مدل ها استفاده می کنه. مدل ها معمولا نمایانگر جداول پایگاه داده هستند اما می تونن معرف ورودی‌های LDAP، فیدهای RSS یا فایل‌های روی سیستم هم باشند. بعنوان مثال در اینجا کنترلر یه مدل رو به کار می‌بره تا آخرین خرید ریکاردو رو از دیتابیس بکشه بیرون (به اصطلاح Fetch کنه).

وقتی کنترلر کار خودش رو بر روی داده انجام داد نوبت مرحله نما می‌رسه. همانطور که گفتم در نما داده هایی که آماده‌سازی شدن به کلاینت عرضه می‌شن. بعبارت ساده‌تر کلایت بطور معمول می تونه از طریق مرورگر نتیجه رو مشاهده کنه. در کیک، خروجی نما، بصورت HTML است اما بر حسب نیاز می تونه بسادگی به فرمت‌ PDF، XML و JSON تبدیل بشه.

اما مزایا استفاده از MVC چیست؟
ببینید این معماری مورد آزمون قرار گرفته و بعنوان یک الگوی طرحی نرم‌افزار مورد قبول واقع شده چرا که برنامه رو قابل نگاهداری و ماژولار می‌کنه و به امر توسعه سرعت می‌ده. تقسیم عملکرد برنامه در سه بخش مدل، نما و کنترلر پایداری رو بدنبال داره. ویژگی های جدید بسهولت افزوده می‌شن و چهره جدید ویژگی های قدیمی رو بهبود می ده.

همچنین طراحی جداگانه و ماژولار به طراحان و توسعه‌دهندگان این اجازه رو می‌ده که همزمان با هم کار کنند و به سرعت بر توانایی نمونه اولیه بیفزایند. جداسازی یه خوبی دیگه هم داره اینکه به توسعه‌دهندگان این امکان رو میده که تغیرات مورد نظر رو در یک بخش لحاظ کنند بدون اینکه نیازی باشه سایر بخش‌ها تغییری بکنه.

اگر تا حالا برنامه ای رو به این سبک نساخته اید، یه خورده وقت می‌‌بره تا این معماری رو بکار ببرید. اما مطمنم برای اولین بار که یه برنامه با کیک پی‌اچ‌پی بسازید دیگه حاضر نخواهید شد از یه روش دیگر انجامش بدید. در پست‌های آینده به شرح تنظیمات و پیکربندی CakePHP خواهم پرداخت.
+ [منبع]

منابع زیادی برای آموزش این فریم‌ورک روی وب هست. برای دو نسخه 1.1 و 1.2 که با هم تفاوت‌هایی دارند، بطور جداگانه راهنمای کاملی در سایت اصلی کیک پی‌اچ‌پی موجوده. قسمت مثال‌ها و بخصوص The Cake Blog Tutorial محبوب‌ترین قسمت این راهنما است. در این آموزش یاد میگیرید که چطور بر پایه این فریم‌ورک یه وبلاگ ساده بسازید.

هدفم از کیک پی‌اچ‌پی و راهنما گفتنش معرفی پست‌های James Fairhurst در این رابطه هست. حدود آوریل امسال James یه سری آموزش در رابطه با ایجاد یک کاتالوگ DVD با CakePHP‌ رو شروع کرد. این آموزش‌ شامل 12 قسمته که دو هفته قبل قسمت آخرش تموم شد. لیست این پست ها رو در زیر آوردم که انصافا‍ یکی از دیگری بهتره:

• + Part 1: Setup of CakePHP and creation of the tables and models
  + Part 2: Creating the first controller and the corresponding views
  + Part 3: Creating two more controllers with the respective views
  + Part 4: File upload and introduction of jQuery
  + Part 5: Working with a HABTM association
  + Part 6: Adding authentication to the application
  + Part 7: Graphical design of the application
  + Part 8: Realizing the design with HTML and CSS
  + Part 9: Introduction to layouts and elements
  + Part 10: Defining the start page
  + Part 11: Using requestAction
  + Part 12: Finishing the application

فقط کافیه یه خورده زمان داشته باشید و البته اشتیاق برای یادگیری این فریم‌ورک. نتیجه‌ی نهایی آموزش بالا رو می‌تونید اینجا ببینید. سعی می‌کنم پست‌های آینده ام بیشتر در رابطه با توضیح ساختار MVC و آموزش CakePHP باشه.

داشتن یه صفحه وب رنگارنگ کار خیلی راحت و وسوسه انگیزی است. اما آیا گزینه‌های دیگری هم برای کاربرد رنگ در طراحی وجود داره؟

طرح‌های تک رنگ (Monochromatic Design)
همانطور که از اسمش معلومه، طرح تک رنگ طراحی با یک رنگه. یه رنگ رو به عنوان پایه انتخاب می‌کنید و سفید و سیاه رو بهش اضافه می‌کنید تا سایه‌های متفاوت از اون رنگ بسازید. در این حالت طرحتون منحصراً یک پالت تک رنگ داره و چندین سایه‌ی رو به سفید یا تیره شدن. شکل زیر این بیان رو می‌تونه کاملاً مشخص کنه:

مزایای طرح‌های تک‌ رنگ
ساخت یک پالت تک رنگ خیلی ساده است. رنگ دلخواه رو انتخاب کنید و سیاه و سفید رو بهش اضافه کنید. همین!

وقتی از یک رنگ واحد استفاده می‌کنید، رنگ‌ها هرگز نمی تونن برخورد داشته باشند. اگر رنگ‌ها رو بطور ناگهانی انتخاب کنید، طرح تک رنگ نسبتاً یه گزینه ایمن برای انتخابه.

طرح حالت ساده پیدا می‌کنه. سادگی طرح رنگ، خودش رو به طرح بسط می‌ده و هیچگونه مقایسه و رقابتی بین رنگ‌های مختلف بوجود نمیاد بطوریکه در عین سادگی طرح آرامش و سکون پسندیده‌ای رو تداعی می کنه.

به شما اجازه می‌ده تا به المان‌های مهم اهمیت بدین. اگرچه تمام طرحتون یه پالت تک رنگ داره اما می‌تونید کنتراست رنگ رو برای المان هایی که می‌خواهید اهمیت بیشتری بهشون بدین تغییر بدین. برای نمونه آیکون خروجی فید.

معایب طرح‌های تک رنگ
تغییر ناچیز در طرح. نبود تنوع و تباین، دلبستگی دیداری طرح رو کم می‌کنه. اما در مقابل گزینه سادگی طرح رو داره که می‌تونه یه طرح رو از شلوغی نجات بده.

سختی در خواندن متن. اغلب بین رنگ متن نوشته و رنگ پس زمینه کنتراست خیلی کمی وجود داره و خواندن متون دشوار می‌شه. بهتره در این حالت تیرگی رو نسبت به پس زمینه بیشتر کرد.

ناامیدی. محدودیت در پالت رنگ در هنگامی که برای اولین بار باهاش کار می‌کنید خیلی ناامید کننده است. گاهی اوقات ممکنه وسوسه انگیز باشه که قاعده رو بهم بزنید و چند رنگ بیشتر اضافه کنید. گاهی اوقات انتخاب خوبیه اما گاهی اوقات نه، به تجربه نیاز داره.

نمونه‌ایی از طرح‌ تک رنگ

طرح های بی رنگ (Achromatic Design)
در طرح‌های بی‌رنگ هیچ رنگی وجود نداره جز سایه‌های ساده‌ای از تیرگی. مزایا و معایب طرح‌های بی‌ رنگ مشابه طرح‌های تک رنگ بالا هستن اما یه خورده بیشتر. مثلا عنوان کردیم با طرح‌های تک رنگ حالت ساده ای رو داریم که آرامش رو تداعی می کنه باید بگم یه طرح بی رنگ می تونه این حالت رو بیشتر بوجود بیاره یا همانطور که یک طرح تک رنگ می تونه متمایز از رنگارنگ بودن باشه یک طرح بی رنگ می تونه خیلی بیشتر این تمایز رو دارا باشه.

یافتن طرح‌های بی‌رنگ خالص روی وب مشکله. بیشترشون کمی قانون شکنی می‌کنند و کمی از رنگ دیگری رو اضافه می کنند. البته منحصراً برای تاکید روی یک المان‌های معین و برای اینکه بی تنوعی رو از بین ببرند. طرح زیر می‌تونه جز این دسته باشه:

نتیجه‌گیری
لزوماً استفاده از رنگ‌های بیشتر مساوی یه طرح بهتر نیست. اگر طرح نیازی به اون رنگ نداره لزومی نداره با رنگ‌های گوناگون جاذبه رو بیشتر کنید.

اگر نوشته‌های وبلاگتون ساده و بدون تکلفه، یه طرح تک رنگ یا بدون رنگ می‌تونه اثر‌گذاری بیشتری روی خوانندگان و بازدیدکنندگان داشته باشه. در کل این طرح‌ها مناسبه برای وبلاگ‌های شخصی و وبلاگ‌هایی که به نوعی لایف استایل هستن.

پس بهتره همیشه به فکر طرح‌های رنگارنگ نباشید و وب رو اندکی کم‌رنگ تر کنید.

قبلاً هم در مورد طرح های بدون آلایش در اینجا نوشتم. از اونجایی که به طرح‌های تک رنگ علاقه زیادی دارم، پست تخصصی Michael Martin در آخرین یادداشت وبلاگش در این مورد، این پست وبلاگ من رو ساخت.راستی بنظر شما الوان وب جز کدوم یکی از این طرح‌هاست؟

SitePoint افزونه‌ای بنام Dust-Me Selectors برای فایرفاکس منتشر کرده است که به شما کمک می‌کند به راحتی این سلکتورها را شناسایی کنید.

برای کار با این افزونه طرح مورد نظر را در مرورگر فراخوانی کرده و بر روی آیکونی که در پایین سمت راست فایرفاکس ایجاد شده است، کلیک کنید. این افزونه فایل سی‌اس‌اس طرحتان را آنالیز کرده و با توجه به المانهایی که در صفحه جاری بکار رفته است انتخابگرهایی که مورد استفاده قرار نگرفته‌اند را در مشخص می‌کند.

توجه کنید شاید سایر سلکتورها را در المانهایی در سایر صفحات طرحتان بکار برده‌اید، بنابراین با آنالیز یک صفحه همانطور که در بالا اشاره شد سلکتورهای استفاده نشده در آن صفحه به عنوان unused شناخته می‌شوند. اما با آنالیز سایر صفحات طرحتان تعداد سلکتورهای unused مرتبا کم می‌شود تا جایی که سلکتورهای زاید پیدا شوند.

نسخه جدید این افزونه می‌تواند به عنوان یک اسپایدر صفحه‌های طرحتان را آنالیز کند تنها کافیست آدرس Sitemap را به آن بدهید. اگر کل صفحات در Sitemap نیامده است دادن آدرس همان صفحه اول هم کفایت می‌کند البته اگر لینک سایر صفحات در آن موجود باشد. به این روش دیگر نیازی به آنایز تک تک صفحات بصورت منوال نیست.

+ برای ساخت Sitemap می توانید از این سرویس استفاده کنید. وردپرسی ها هم می‌توانند با سرویس گوگل به کمک این پلاگین Sitemap بسازند.

امسال برای من سال خیلی بدی نبود هر چند لحظات تلخی رو در این سال تجربه کردم ولی در کنار اون شیرین‌ترین‌ها هم وجود داشت. به بعضی از اهداف و خواسته‌هام رسیدم، باقی یا نیمه‌کاره موند یا اصلا بهشون نرسیدم و رفت برای سال آینده.

امیدوارم سال جدید طلیعه‌ی موفقیت‌های بزرگ برای شما و هم برای خودم باشه. در لحظه حلول سال نو با زمزمه کردن دعای عرفانی یا مقلب القلوب و الابصار، دعاگوی ما هم باشید. عید بر همگان مبارک باد.

Aptana را در کار با فریم‌ورک‌های جاوا اسکریپت پیشنهاد می‌کنم اما اگر هنوز از Dreamweaver استفاده می‌کنید و از عدم پشتیبانی از فریم‌ورک‌های جاوا اسکریپت خسته شده‌اید، دیگر نگران نباشید. Chris Charlton افزونه‌ای برای Dreamweaver نوشته است که مشکل را حل می‌کند.

این افزونه برای دو فریم‌ورک jQuery و Prototype از اینجا قابل دریافت است. گویا پشتیبانی از سایر کتابخانه‌ها از جمله MooTools و YUI نیز در حال انجام است.

درهمین رابطه:
+ تنظیمات مربوط به پکربندی فریم‌ورک jQuery را برای Aptana می‌توانید در اینجا بیابید.
+ Spket را هم فراموش نکنید، نحوه بکارگیری jQuery در این IDE هم اینجاست.

PHP Speedy بطور خودکار تمام فایل‌های لازم را با یكدیگر ترکیب و بصورت فشرده در می‌آورد که این خود بار درخواستی سرور و همچنین اندازه فایل‌ها را کاهش می‌دهد. در نتیچه زمان بارگذاری کاهش خواهد یافت.

این اسکریپت به دو صورت خودکار و دستی می‌تواند نصب شود. بعد از نصب، کدهای این اسکریپت می‌بایستی درابتدای فایل اصلی وب‌سایت (در بیشتر موارد index.php) الحاق شود. نتایج زیر را مشاهده کنید:

قبل از نصب اسکریپت (14 درخواست در مدت زمان 4.44 ثانیه)

بعد از نصب اسکریپت (4 درخواست در مدت زمان 1.1 ثانیه)

اگر Firebug بر روی مرورگرتان ندارید تفاوت را با این ابزار آنلاین (Pingdom) میتوانید مشاهده کنید. قبلا Pingdom در این یادداشت بطور کامل معرفی شد.

کد‌نویسی .htaccess بسته به آنچه می‌خواهیم انجام دهیم گاهی اوقات کار پیچیده‌ای است. با ویرایشگر htaccess برخی از این‌ کارها را می‌توانید بطور آنلاین انجام دهید. این ویرایشگر بر پایه آژاکس طراحی شده است و کار با آن بسیار ساده است.

+ مقاله کاملی در مورد کار با فایل‌های htaccess را می توانید در اینجا بیابید. همه موارد بصورت کاربردی همراه با نمونه در آن آورده شده است.

پی نوشت نامرتبط:
نزدیک به هشت ماه می‌شود از سرویس رایگان Clicky استفاده می‌کنم. مزیت‌های آن در مقابل دیگر ویزیتور آنالیزگرها قابل توجه است (در اینجا جدول مقایسه‌ای همه چیز را نشان می‌دهد) فیلترهای جالبی برای اطلاعات ویزیتورها دارد و مهمتر از همه به طور پیوسته آپگرید می‌شود.

در اکانت رایگان تنها برای 21 روز اجازه استفاده از تمام قابلیت‌ها وجود دارد. امروز دل را به دریا زدم و اکانت بلاگر یکساله Clicky را خریدم البته نه برای دو سه ویزیتور اینجا. اگر شما هم دنبال یک آنالیزگر جمع جور و حرفه‌ای می‌گرید Clicky را امتحان کنید.

صحبت از Firebug شد. اکستنشنی که هر طراح و توسعه‌دهنده‌ی وب به آن نیاز خواهد داشت. چند روز قبل Roger در وبلاگش مطلبی در مورد شیوه‌های تشخصی سی اس اس با دو ابزار آنلاین نوشته بود که بد نیست مختصری در مورد آنها توضیح بدهم.

همانطور که می‌دانید چندین ابزار وجود دارد که می‌توانید از آنها برای عیب‌یابی سی اس اس استفاده کنید. بعضی‌ها مثل دو اکستنشن Web Developer و Firebug با مرورگرها قابل استفاده هستند. اما گاهی اوقات پیش میاد که دسترسی به این مرورگرها یا اکستنشن‌ها وجود ندارد. هر چند XRAY‌ و MRI این دو ابزار آنلاین، قابلیت‌های سایرین رو به طور کامل ندارند اما می‌توانند کار راه انداز باشند.

XRAY به شما اجازه می‌دهد که تنها با یک کلیک بر روی عنصر، خصوصیات آن عنصر، مثل نوع عنصر، کلاس، آی دی، اندازه، حاشیه‌ها و … را در یک پنجره معلق جدید ببینید. ویژگی جالب آن نمایش عناصر وارث به صورت سلسله مراتبی است.

MRI هم پنجره‌ای شبیه فوق باز می‌کند که یک فیلد ورودی دارد که می‌توانید سلکتور سی اس اس مربوطه را در آن وارد کنید. هنگامی که بر روی دکمه آن کلیک کردید عناصری که با آن انتخابگر مطابق هستند را مشخص خواهد کرد. البته می‌توانید با کلیک بر روی هر کدام از عناصر صفحه نیز سلکتور مربوطه را ببینید.

خلاصه این که با صرف کمی وقت توانستم این پلاگین رو طوری کاستومایز کنم که مشابه پلاگین قبلی کار کنه و چیدمان قبلی وبلاگ رو بهم نزنه و در نهایت وردپرس رو با موفقیت به روز کردم. چند مورد به ذهنم جالب اومد که در ادامه توضیح می‌دم:

نسخه 2.3 به نظر پایدارتر میاد (هر چند فکر می کنم همین امروز فردا نسخه جدیدی برای رفع بعضی از باگها منتشر بشه) و مهمتر اینکه یکسری تغییرات بنیادی در این نسخه صورت گرفته که در تاریخ انتشار وردپرس بی سابقه بوده مهمترینش تغییر در جداول پایگاه داده است که هنوز دلیلش رو نمی‌دونم.

همچنین یه مورد دیگه که شاید هنگام بروز رسانی متوجه نشده باشید (به علت اینکه دیتابیس همون مقادیر اولیه رو داره) بروزرسانی لیست بلاگ‌رول پیشفرض وردپرس هست. از همون اولین نسخه‌ای که وردپرس منتشر شد این لیست شامل وبلاگ‌های توسعه‌دهندگان وردپرس بوده اما حالا تنها به مستندات خود وردپرس اشاره شده. هر چند به گفته Carthik این چند ساله لینکها حداقل یه رتبه تاپ گوگلی به ارمغان آورد.

فکر می‌کنم اکثر تغییرات جز مهمترین و البته محبوب‌ترین ایده‌ها و پیشنهادات کاربران وردپرس بودند و این جای تحسین داره. اما من خیلی از نامهای جدید در دیتابیس استقبال نکردم ‌ همانطور که خود مستندات وردپرس اشاره کرده:

• WordPress 2.3 introduces our new taxonomy schema. Any plugin that queries against the old table will break horribly. Plugins that use the category API should be fine. This new schema replaces the categories, post2cat, and link2cat tables with three new tables that are more flexible.
  Three new terms tables (schema) term_relationships, term_taxonomy, and terms support combined post categories, link categories, and the new tags. The tables, categories, link2cat, and link2post, are gone!

اگر جداول جدید در رابطه با دسته‌ها و برچسب‌ها و فرضاً لینک‌های بلاگ‌رول هستند خوب بهتر اینه که جداول هم نامی مشابه داشته باشند. در صورتی که از نامهای جدید هیچ نقشی در مورد جایگاه آنها در دیتابیس نمی‌شه تصور کرد. تمام این سه نام کاملاً نو هستند و هرگز قبل از این در تاریخ انتشار وردپرس نبوده‌اند. من مطمئنم باید دلیل خوبی برای این نامگذاری وجود داشته باشه و مشتاقم که در این مورد بیشتر بدانم…

من زیاد با رابط کاربری وردپرس مشکلی نداشتم ولی احساس می‌کنم با افزودن فیلد برچسب برای هر پست، اگر از آژاکس برای کامل کردن اتوماتیک برچسپ استفاده می‌شد خوب بود. همچنین نبود یه قسمت مجزا برای مدیریت برچسب‌ها واقعا یه مشکل بزرگه! من به شخصه با Slug برچسبها و فارسی نوشتنش حساسیت دارم نه ظاهر خوبی در دیتابیس داره نه هم در یو.ار.ال مگر اینکه برچسب‌ها رو انگلیسی بنویسم یا برای هر برچسب slugش رو از خود دیتابیس به فرم انگلیسی ویرایش کنم چون هیچ رابطی برای این‌کار در پانل تعریف نشده است. هر چند که با نوشتن یک پلاگین ساده این مشکل قابل حله اما امیدوارم در نسخه‌های آینده وردپرس این مشکل حل شود.

پی‌نوشت: کمی سه جدول جدید رو وارسی کردم نظرم در مورد ساختار دیتابیس عوض شد. بنظرم این taxonomy آزادی بیشتری به توسعه دهندگان خواهد داد. برای مثال شما قادر خواهید بود برای هر آبجکتی در پایگاه داده از جمله پست‌ها، صفحات، لینکها و برچسب‌ها taxonomy جداگانه و متفاوتی داشته باشید. در مورد خود واژه term هم اینجوری می‌شه بیان کرد که در واقع یه کلمه کلیدی هست که آبجکت رو توصیف می‌کنه و taxonomy هم یک سیستم دسته‌بندی که term هر آبجکتی رو کنترل می‌کنه. رویکرد جالبی بنظر می‌رسه فکر می کنم این حرکت پیشرفت‌های و بهبودهای بزرگی رو آینده به دنبال خواهد داشت.

شعر: سیاوش کسرائی
پی نوشت: متاسفانه این‌ روزها درگیر یکسری مسائل شخصی هستم و کمتر فرصت می‌کنم به اینجا برسم. امیدوارم در آینده نزدیک بتوانم بیشتر بنویسم.

نمی‌دانم وقتی صحبت از فریمورک می‌شود چه تعریفی برای آن در ذهن دارید. بطور کلی می‌توان فریمورک را مجموعه‌ای از ابزارها، کتابخانه‌ها، قراردادها و بهترین شیوه‌ها تعریف کرد بطوریکه سعی می‌کنند وظایف روتین را به سوی مدل‌های جامعی سوق دهند که دوباره می‌توانند مورد استفاده قرار بگیرند. هدف این است که به یک طراح یا توسعه دهنده اجازه داده شود تا بر روی وظایفی که در انجام پروژه مهم هستند تمرکز کند. البته وقتی صحبت از فریمورک می‌شود الزاماً در مورد چیزی که ساخته شده، بصورت پکیج در آمده و برای عموم منتشر شده حرف نمی‌زنیم. چرا که ممکن است یک فریمورک منحصراً برای شما یا تیم شما باشد.

فکر می‌کنم برای مقدمه تا همین اندازه از فریمورک بدانید کافی باشد برای اطلاعات بیشتر می‌توانید مقاله “فریمورک برای طراحان” نوشته Jeff Croft را بخوانید. به گفته نویسنده سی‌اس‌اس فریمورک، همین مقاله باعث شده است تا به فکر ایجاد یک فریمورک عمومی برای سی‌اس‌اس بیفتد. برویم سراغ اصل مطلب که همان سی‌اس‌اس فریمورک و پروژه Blueprint است.

Blueprint یک فریمورک برای سی‌اس‌اس است که با هدف کاهش زمان توسعه فایل‌های سی‌اس‌اس ایجاد شده است. این فریمورک ساختار یکپارچه‌ای از کدهای سی‌اس‌اس را در اختیارتان قرار می دهد بطوریکه براحتی می‌توانید طرح را شبکه بندی کنید، تایپوگرافی عناصر را به دلخواه تغییر دهید و حتی یک استایل برای چاپ بسازید. این فریمورک انعطاف پذیری بی‌نظیری در بکارگیری مقاس‌های استاندارد دارد. برای اولین بار همچین فریمورکی آن هم برای سی‌اس‌اس بطور عمومی منتشر می‌شود. کار با آن بسیار ساده است و هر کس می‌تواند با توجه به نوع طرح از آن استفاده کند. مستندات نسبتاً خوبی هم برای آموزش دارد.

در نسخه جدید (0.4) که چند روز پیش منتشر شد، قابلیت‌های بیشتری به آن اضافه شده است و با استقبالی که از آن صورت گرفته، پیش‌بینی می‌شود این روند همچنان ادامه داشته باشد. تنها مشکلی که فکر می‌کنم ما کاربران فارسی زبان در استفاده از آن داشته باشیم نوع فونت بکار رفته در مشخصه‌ی font-family و همچنین نوع چیدمان باشد که با کمی وارسی سورس فریمورک قابل حل است.

+ برای اطلاعات بیشتر در مورد این فریمورک اینجا را ببینید. اگر Google code اجازه دریافت فایل را به شما نمی‌دهد، نسخه 0.4 (آخرین نسخه در زمان نگارش این مطلب) را از اینجا دریافت کنید.

هنگامی که یک فایل CSS می‌نویسید، ممکن است با یک ایده‌ی خوب مواجه شوید یا برعکس به یک مشکل برخورد کنید و برای آن راه‌حلی بیندیشید. اما اگر پس از گذشت مدت زمانی دوباره به آن فایل برگردید احتمال دارد نتوانید آن ایده یا رویکردی را که از آن استفاده کرده‌اید به خاطر بیاورید. این مشکل در طراحی مجدد (Redesign) بخصوص اگر حجم کارهایتان زیاد باشد، جدای از اینکه وقت‌تان را خواهد گرفت ممکن است شما را دچار سردرگمی کند. همچنین اگر بخواهید مراحل پیاده‌سازی را برای فرد دیگری شرح دهید یا یک توسعه‌دهنده دیگر بخواهد کدهای شما را در آینده ویرایش کند، توضیح نویسی یک راه‌حل مناسب خواهد بود.

افزودن توضیح در CSS بسیار ساده است. یک توضیح در CSS با علامت */ شروع و با /* خاتمه می‌یابد. این نوع از توضیح‌نویسی به عنوان C style شناخته می‌شود چرا که در زبان برنامه‌نویسی C این متد کاربرد دارد. توضیحات می‌توانند در یک یا چند خط باشند و در هر جایی در کنار کد قرار بگیرند:

/* Body Styles */
body {
font-size: 67.5%; /* Set the font size */
}

افزودن توضیحات ساختاری
اولین توضیحی که معمولاً در سرآیند یک فایل CSS قرار می‌گیرد نشان می‌دهد که این استایل برای چیست، همچنین تاریخ ایجاد و شماره نسخه، نام و وب آدرس نویسنده را نیز در بر می‌گیرد:

/*–––––––––––––––––––––––––––––––––––––––––––––––––
Basic Style Sheet (for version 4 browsers)
version: 1.0
author: morteza alvani
email: info@example.com
website: http://www.alvanweb.com/
–––––––––––––––––––––––––––––––––––––––––––––––––*/

سپس کدها را به طور مشهود از هم تفکیک می‌کنیم. معمولاً این‌کار با قواعد عمومی نظیر تایپوگرافی، عناوین (headlines) و لینک‌ها شروع می‌شود. پس از آن وارد زیر ساخت پایه و جزیی می‌شویم به طور مثال می‌توانیم استایل طرح را به قسمت‌های: محتوای اصلی (main content)، محتوای فرعی (secondary content)، هدایت‌گر اصلی (main nav) و فرعی و در نهایت پانویس (footer) تقسیم کنیم. نظیر بخش اول از الگویی مثل زیر برای جداسازی قسمت‌های مختلف استفاده می‌کنیم. بزرگ بودن این توضیح باعث خواهد شد تا از لحاظ دیداری زودتر قسمت مربوطه را بیابیم:

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––*/

این یک مدل خیلی ساده و در عین حال جزئی است شما می‌توانید این قسمت‌ها را به زیر مجموعه‌های کوچک‌تری نیز تقسیم کنید که باعث سهولت در فهم و جستجوی آسان خواهد شد. کد‌نویسی یک سایت بزرگ این موضوع را به وضوح نشان خواهد داد. حتی در برخی موارد نمی‌توان به مورد فوق هم بسنده کرد و نیاز خواهیم داشت تا از یکسری کاراکتر اضافی پیش از توضیحی که در مورد کدها می‌نویسیم استفاده کنیم. چرا که ممکن است فایل‌های CSS ساختارهای مشابهی داشته باشند. به طور نمونه الگوی زیر را در نظر بگیرید:

/* =Typography
–––––––––––––––––––––––––––––––––––––––––––––––––*/

در این مثال جستجو برای ” typ= ” شما را مستقیماً به قسمت تایپوگرافی هدایت خواهد کرد. بنابراین با این روش می‌توانید در پروژه‌های یزرگ زمان جستجو را به حداقل کاهش دهید. بیشتر طراحان یک مدل اولیه دارند و از آن برای نظم دهی به استایل در همه طرح‌هایشان استفاده می‌کنند بنابراین نیازی ندارند تا در هر پروژه جدید مجدداً به توضیح‌نویسی کامل بپردازند.

یادداشت‌هایی برای خودتان
گاهی اوقات برای حل یک مشکل خاص ممکن است به CSS Hack نیاز داشته باشید. در این موارد نوشتن توضیح مختصری در مورد نحوه کار کد و یا اگر توضیحی در مورد آن بر روی اینترنت موجود است و از آن استفاده کرده‌اید، درج نشانی آن صفحه یک ایده خوب است:

/*Use the star selector hack to give IE a different font size http://tinyurl.com/5hf69*/
* html body {
font-size: 75%;
}

همچنین برای اینکه توضیحات خود را معنی‌دار تر کنید می توانید از واژه‌های کلیدی برای توضیحات مهم استفاده کنید. بالفرض از TODO برای یادآوری آنچه باید تغییر کند، از BUG برای مشکلی که وجود داشته است و از KLUDGE برای بیان راه حلی که استفاده کرده‌اید:

/* :TODO: Remember to remove this rule */
/* :KLUDGE: Setting a small negative margin but it's not pretty */
/* :BUG: Rule breaks in IE 5.2 Mac */

همچنین می توانید از واژه TRICKY برای هشدار به سایر توسعه‌دهندگان در مورد پیچیدگی قسمتی از کد استفاده کنید. در قوانین برنامه‌نویسی، این واژه‌های کلیدی Gotcha به معنی I caught you نامیده می‌شوند و می‌توانند در مراحل بعدی توسعه خیلی مفید باشند.

حذف توضیحات و بهینه‌سازی استایل‌ها
توضیحات به طور قابل ملاحظه‌ای می‌توانند حجم فایل‌های CSS را افزایش دهند. بنابراین ممکن است بخواهید از این توضیحات صرفنظر کنید. خیلی از ویرایشگرهای متن گزینه جستجو و جایگزین کردن را دارند و مشکل حذف توضیحات را تا حدی حل می‌کنند. همچنین بهینه‌سازهای آنلاین CSS نظیر این می‌تواند این کار را انجام دهد. البته این بهینه‌سازها علاوه بر حذف توضیحات، فضاهای خالی بین کدهای CSS را حذف می‌کند و می‌تواند بایت‌های اضافی را کاهش دهد. برخی هم از ترکیب زبان برنامه‌نویسی PHP با CSS استفاده می‌کنند. قبلا در مورد این روش در اینجا و اینجا بحث شده است. جدای از مشکلات بعلت پیچیدگی، این روش زیاد مقبول و مرسوم نیست.

بهترین گزینه شاید فعال کردن فشرده‌سازی سمت سرور باشد. اگر شما از سرور آپاچی استفاده می‌کنید با مسئول هاست خود در مورد نصب mod_gzip و mod_deflate صحبت کنید. بسیاری از مرورگرهای مدرن می توانند فایل‌های فشرده شده با GZIP را پردازش کنند و آن‌ها را در کسر کوچکی از زمان از حالت فشرده خارج کنند. این ماژول‌های آپاچی می‌توانند تشخصی دهند که آیا مرورگر می‌تواند این قبیل فایلها را پردازش کند یا خیر، اگر بتواند، یک نسخه فشرده شده از فایل را ارسال می‌کند. فشرده سازی سمت سرور می تواند تا حدود 80 درصد از حجم فایل‌های XHTML و CSS را کاهش دهد، در نتیجه پهنای باند مصرفی را کاهش می‌دهد و صفحات سریع‌تر بارگذاری خواهند شد. اگر شما دسترسی به این ماژول‌ها ندارید، می توانید با استفاده از این آموزش فایل‌هایتان را فشرده کنید. قبلا روش ترکیب PHP و فشرده‌سازی CSS در اینجا توضیح داده شده است.

• + CSS Mastery book (Chapter 1: SETTING THE FOUNDATIONS)
  + CSS Management and Optimization
  + Gzipping your CSS

+ منابعی که در تدوین این مقاله از آنها استفاده کرده‌ام.

زمان شروع، خواندن و پایان فایل با یک ستون افقی در سه رنگ مجزا برای هر فایل همراه با حجم آن به تفکیک نشان داده می‌شود. این ابزار می‌تواند چیدمان و ترتیب بارگذاری المان‌های صفحه را در مرورگر نشان دهد. مورد جالبی که در این ابزار به چشم می‌خورد کامپایل پیوندها در فایل‌های سی اس اس است. بالفرض اگر در فایل سی ‌اس اس المانی با خاصیت نمایش یک تصویر داشته باشید، آن تصویر هم در آنالیز تفکیک می‌شود. اما گویا قدرت کامپایل فایل‌های جاوااسکریپت و عناصر درونی‌اش را به طور مجزا ندارد. همچنین یک حداکثر مقداری به عنوان اندازه هر فایل در نظر گرفته شده است تا از آنالیز فایل‌های حجیم جلوگیری شود.

صفحه‌ی اصلی وبلاگم را چک کردم، در مجموع 27 آبجکت با حجم 82 کیلوبایت در صفحه اصلی وجود دارد. که اگر کاربری با سرعت پایین یک اتصال دیال‌آپ را هم در نظر بگیریم در مدت زمانی کمتر از 6 -8 ثانیه کل محتوای صفحه اصلی بارگذاری می‌شود. این ابزار آنلاین را می‌توانید در اینجا بیابید.

مقالات جالبی در خصوص آموزش و پژوهش علم اقتصاد در این همایش مطرح و میزگردهایی در این خصوص انجام خواهد شد. علاوه برمباحث مطرح شده، فرصت مناسبی است تا با اقتصاددانان کشور که در این همایش شرکت کرده‌اند از نزدیک بیشتر آشنا شد. در آینده در این مورد بیشتر خواهم نوشت.

اما امروز که به خانه آمدم با پاکت ارسالی سی ‌دی‌های اوبونتو نسخه ۷.۰۴ مواجه شدم. جالب اینکه علاوه بر سی دی‌ها، چند برچسپ زیبا با آرم اوبونتو و البته شعار Linux for human beings در پاکت قرار داشت. از شرکت Canonical که این بسته را برایم فرستادند هم متشکرم. و خلاصه اینکه از امروز من هم به جمع کاربران این توزیع محبوب لینوکس پیوستم.

از جمله امکانات بی‌نظیری که این پلاگین در اختیارتان قرار می‌دهد می‌توان به ارسال خودکار لینک‌ها در قالب پست‌های وبلاگ اشاره نمود. بطوریکه می‌شود آن را سفارشی کرد که هر N لینک را در یک پست مجزا ارسال کند. یا دسته ارسال پست و کاربر آن را مشخص کرد و حتی امکان کامنت و پینگ را حذف نمود و جالب‌تر اینکه مشخص کرد لینک‌هایی با تگ به خصوص به وبلاگ ارسال شوند.

نکته ظریفی که در این پلاگین به چشم می‌خورد سفارشی نمودن استایل پست‌هایی است که لینک‌ها تحت آن‌ها منتشر می‌شوند. البته باید به این موضوع اشاره کرد که این N لینک شما می‌تواند در یک روز ارسال شده باشد یا در طی چند روز. که در هر مورد الگو مجزایی دارد. که نشانگر انعطاف‌پذیری فوق العاده این پلاگین است.

نصب و راه‌اندازی این پلاگین بسیار ساده‌ است. اطلاعات کاملتر را می‌توانید در اینجا بیابید. بنظرم با کمی ذوق و سلیقه می‌تواند کاربردهای دیگری هم برایتان داشته باشد. مثلاً مولتی یوزرش کرد و یک دایرکتوری ساخت و یا …

این مجله 35 طراح و کمپانی برتر در سرتاسر جهان را در ماه مارس انتخاب کرده و از آن‌ها خواسته تا به 5 سئوال در رابطه با طراحی پاسخ‌ دهند تا از این طریق دانش و تجربه‌هایشان را با دیگر توسعه‌دهندگان تقسیم کنند. پنج سئوال به این صورت بوده است:

• 1- یک جنبه از طرح که بیشترین ارجحیت را به آن می‌دهید.
  2- یکی از مفیدترین تکنیک‌های CSS که اغلب از آن استفاده می‌کنید.
  3- یک فونت که اغلب در پروژه‌ها بکار می‌برید.
  4- یک کتاب عالی در زمینه طراحی که خواندن آن را توصیه می‌کنید.
  5- یک مجله در زمینه طراحی که بصورت روانه یا هفتگی می‌خوانید.

این مجله می‌نویسد در انتها، پاسخ‌های بیشتری از آنچه انتظار داشتیم دریافت کردیم. بیش از 80 تکنیک سی‌ اس اس ، ایده طراحی، پیشنهاد، فونت، کتاب‌های مرتبط با طراحی وب و مجلات آنلاین در این خصوص. که همه آن‌ها در اینجا لیست شده است. دانستن این جالبه که طراح‌های معروف چگونه طرح‌های بی‌نظیری رو خلق می‌کنند.

اصل مقاله را خودتان بخوانید، فرصت اندکم اجازه ویرایش و نگارش آن را نمی‌دهد. باید در لینکدونی بالا معرفی می‌شد ولی جذابیتش ایجاب می‌کرد کمی در موردش توضیح دهم.

این اواخر برای کار راحت‌تر با PHP و بخصوص GTK لینوکس فدورا کور 6 را نصب کردم. خوشبختانه تمام سخت‌افزارها شناسایی شدند و تنها مشکلم با بلوتوث بود که امروز که کرنل را به روز کردم آن هم رفع شد. مشکل دیگر فونت تاهوما بود، اوایلی که این فونت را نصب کردم خیلی اذیتم می‌کرد (شاید بدلیل عادتی بود که به ClearType مایکروسافت داشتم، هر چند آنجا هم مجبور بودم از ClearTweak برای کنترلش استفاده کنم) اما الان برعکس شده است.

تنها موردی که فکر می‌کنم در ویندوز بود و اینجا نیست، کرک و سریال و … باشد . که یکی از صدها مزیت دنیای کد باز است. هیچ تعصبی نسبت به لینوکس و ویندوز ندارم اما کد باز را به دلیل دادن آزادی بیشتر به کاربر بیشتر می‌پسندم. امیدوارم فرصت این را داشته باشم که به عنوان یک کاربر تازه‌کار لینوکس هر چه را فرا می‌گیرم منتشر کنم.

متن فوق قسمتی از خبری است که در بخش توسعه و انتشار وب سایت رسمی وردپرس اعلام شده است. گویا یک کراکر به سطح کاربری یکی از سرورهای سایت وردپرس دسترسی داشته است و توانسته در سورس فایل دریافتی تغییراتی ایجاد کند. اگر چه تمام فایل‌های دانلود شده این مشکل را ندارند ولی وردپرس به محض اطمینان کاربران از عدم وجود فایل‌های دست خورده نسخه جدید 2.1.2 را منتشر کرده که چند بروزرسانی جزئی نیز در آن انجام شده است.

البته در نظر داشته باشید که این اکستنشن علاوه بر Kodak از سایت‌های دیگری از جمله Flickr، Tabblo و … پشتیبانی می‌کند و در آینده سرویس‌های دیگری به آن افزوده خواهد شد. توضیحات بیشتر در مورد این اکستنشن را در اینجا بیابید.

پی‌نوشت: در مورد محدودیت در آپلود، کمتر سیستمی پیدا می‌شود که محدودیت نداشته باشد، در هر صورت باید هزینه‌ این همه امکانات به نوعی تامین شود. اما فکر می‌کنم کداک در این مورد کمی سختگیرانه‌تر عمل می‌کند. طبق قوانین و مقررات کداک در Kodak Gallery محدودیت حجمی برای آپلود تصویر ندارید اما به محض آپلود اولین تصویر در این سرویس تا 12 ماه بعد فقط خواهید توانست به طور رایگان تصویر آپلود کنید. برای فعال شدن اکانت‌تان هر 12 ماه یکبار، باید خریدی از Imaging Network کداک داشته باشید. در غیر اینصورت اکانت غیر فعال و تصاویر حذف خواهد شد. البته این نکته هم ذکر شده است که در هر زمانی که کداک بخواهد می‌تواند مقررات این بند را تغییر دهد.

علاوه بر تصاویر، با این سرویس فایل‌های ویدیویی تا 15 مگابایت در هر فایل را می‌توان آپلود کرد که حجم محدودی برای هر اکانت در نظر گرفته شده که نهایتاً 150 مگابایت می‌باشد. همچنین Kodak Gallery هر فایل ویدیویی را تنها تا 30 روز بعد از آپلود آن ذخیره خواهد نمود.
اگر چه برای ما ایرانیان داخل رعایت این مقررات دشوار است اما می‌توان از امکان آپلود تصویر در سایر سیستم‌های این اکستنشن بهره برد.

توسعه ‌دهندگان وب برای حل این موضوع عمدتاً به ترکیب یک زبان برنامه نویسی تحت وب مثل PHP با CSS متوسل می‌شوند. (روش اول استفاده از PHP محض و روش دوم ویرایش فایل Htaccess است) هر چند خیلی کم هستند کسانی که این متد رو بکار می‌برند. چند وقت پیش که با Rachel Andrew در این مورد بحث می‌کردم اینطور وانمود می‌کرد که روش‌های مرسوم برای این کار جدای از اینکه مورد انتقاد قرار گرفتن، عمدتاً به علت ناآگاهی طراح، زیاد مورد استقبال قرار نگرفته و انتظار می‌رود در آینده نزدیک تعداد طراحانی که این متدها رو بکار می‌برند بیشتر شود.

اما بنظر خودم ترکیب یک زبان برنامه نویسی تحت وب مثل PHP با CSS برای یک سایت پر ترافیک واقعاً می‌تواند ناکارآمد باشد. موضوع دقیقاً روشن است، کامپایل یک فایل PHP به CSS مقداری از پهنای باند را مصرف خواهد کرد. چرا که یک فایل استاتیک (مثلاً یک فایل نرمال با فرمت CSS) می‌تواند کش شود در حالی یک فایل پویا در هر بار که یک صفحه از سایت را باز کنید باید کامپایل و دوباره روی مرورگر بارگذاری شود. بنابراین قبلاً از اینکه این ترکیب رو بکار برد باید به فکر یک مکانیسم کشینگ عالی بود. از طرف دیگر من هم قبول دارم که CSS باید گزینه‌ای برای ثابت‌ها داشته باشد اما W3C این روش را قبول نمی‌کند، خودتان قضاوت کنید. پس راه حل چیست؟

خیلی از طراحان دیگر استفاده از فهرست رنگ‌ها یا همان Color Glossary را به عنوان جزئی از راه‌حل در مقابل پیشنهاد می‌کنند. اگر چه این روش نمی‌تواند جایگزین مناسبی برای ترکیب یک زبان برنامه نویسی با CSS باشه اما تا حد قابل توجهی در اتلاف زمان طراحی و بخصوصی ویرایش‌های بعدی فایل‌های CSS‌ مان موثر خواهد بود. روش کار به این شکل است که لیستی از رنگ‌هایی را که در فایلمان استفاده کرده‌ایم همراه با توضیحات مربوطه و البته به طور دلخواه (به طوریکه مشخص شود هر رنگ مربوط به چه قسمتی از صفحه است) در داخل کامنت بیاوریم و آن را در بالای فایل قرار دهیم. نمونه زیر را ببینید:

 /*
Dark grey (text): #333333
Dark Blue (headings, links) #000066
Mid Blue (header) #333399
Light blue (top navigation) #CCCCFF
Mid grey: #666666
*/

فرض کنید می‌خواهیم خاکستری کمرنگ یا همان Mid grey را به 999999 تغییر دهیم، یک جستجو و جایگزینی سریع به کمک ادیتورمان می‌تواند تمام مقادیر 666666 را با مقدار 999999 جانشین کند. همانطور که گفتم منصفانه این متد در برابر ترکیب یه زبان برنامه نویسی یک تکنیک ضعیف محسوب می‌شود. چرا که می‌توانستیم مقدار رنگ را در یک متغیر قرار دهیم و هنگام کد نویسی فقط از نام متغیر استفاده کنیم علاوه بر این در هنگام ویرایش مقادیر نیز، نیازی به جستجو نخواهد بود.

در نظر داشته باشید که این موضوع Color Glossary تنها به این جهت مطرح شده که رنگ‌ها کاربرد زیادی در المان‌ها دارند و نسبت به سایر خاصیت‌های بکار رفته شده در فایل‌های CSS‌ مان بیشتر ویرایش می‌شوند و این تکنیک منحصراً دسترسی به محتوای فایل و تغییرات آن را (البته برای رنگ‌ها و نه همه خاصیت‌ها) آسان‌تر می‌کند.

+ هر چند جستجوهایم در مورد استفاده از مقادیر ثابت در فایلCSS فراتر از جزییات فوق بود اما تمامی روش‌های بکارگرفته شده به همین‌هایی که گفتم ختم می‌شد. آیا شما روش دیگری یا ایده جدیدی سراغ دارید؟

حرفه‌ای‌ها این نوع قهوه رو بعد از ریختن داخل فنجان به کمک كمى خامه رقیق شده با شیر پرچرب و البته کمی دقت و حوصله تزیین می‌کنند که زیبایی خاصی رو به این نوع از قهوه می‌ده و لذت خوردنش رو دو چندان می‌کنه و باعث شده تا این هنر تزیین قهوه رو، هنر اسپرسو بنامند. (من در کافی شاپ‌های ایران این چنین تزییناتی رو تا بحال ندیدم) اگر می‌خواهید از نزدیک با هنر تزیین آشنا بشین این ویدیو YouTube رو از دست ندین. نیویورک تایمز همچنین مقاله مفصلی در مورد آموزش هنر اسپرسو به همراه یک فیلم دارد. نمونه‌هایی از این هنر رو در تصاویر زیر مشاهده می‌کنید:

آن قدر زیبا تزیین شده‌اند که کمتر کسی راضی خواهد شد کمی از آن بخورد. دلت می‌خواهد تصویرش را قاب بگیری بزنی به دیوار اتاقتت.

از پیامبر وب نویس، حمید‌رضا محمدی و محمد میهن خواه عزیز که من رو هم به این بازی دعوت کردند، سپاسگزارم. با اینکه خیلی چیز مهمی برای اعتراف ندارم ولی فکر می‌کنم پنج تا از همه مهمترش اینان:

1- یه زمانی عاشق شنا و استخر و این ماجراها بودم، سال دوم دبیرستان به طور اتفاقی در عمق 4.5 متر نفسم گرفت و از حال رفتم. از همون زمان از استخر و آب و دریا وحشت دارم.

2- به اندازه یه سنسور حساسم. یه مورد خاصی که پیش بیاد مدت‌ها در ذهنم می‌مونه و شاید هیچ وقت پاک نشه. ولی تا جایی که تونستم سعی کردم به آینده جدای از گذشته فکر کنم. البته این حساس بودن در مود کارم بیشتر مصداق پیدا می‌کنه. هر کاری رو حتی اگه سودی هم برام نداشته باشه باید تمام و کمال انجام بدم و تا وقتی کار تموم نشده آرامش ندارم.

3- الوان وب تنها وبلاگی نیست که می‌نویسم، وبلاگ دیگری به زبان روسی دارم که در جای خودش آدرسش را فاش خواهم کرد (جدای از الوان وبِ وردپرس دات کام، که فقط برای تست ساخته شده و چند پستش عمدتاً انگلیسی است)

4- با خواب اصلاً میانه خوبی ندارم. اگر خیلی سرم شلوغ باشد با 3 ساعت خواب در 24 ساعت شبانه روز هیچ مشکلی ندارم (بارها و بارها برایم پیش آمده که به همین سه ساعت اکتفا کردم)

5- همیشه سعی کردم “نه گفتن” را بیاموزم و به طرز قاطعانه، اما با خوشرویی به دوستان بفهمانم که گرفتار هستم، اما اعتراف می‌کنم که زیاد موفق نشده‌ام.

من هم بنا به شیوه این بازی دوستان زیر رو دعوت می‌کنم. شرمنده از حد نصاب کمتره، هر کسی رو خواستم دعوت کنم تکراری بود. مانی منجمی، علی ستاری، زندگی دیجیتال

اما این روزهای آخر سال میلادی در وبگردی‌های روزانه با ایده‌های جالبی در وب مواجه می‌شوم، وب سایت‌هایی جهت هر چه با‌شکوه‌تر شدن کریسمس در دنیای مجازی. یکی یکماه مانده به پایان سال هر روز یک سایت زیبا معرفی می‌کند. دیگری سایتی است با نام 24Ways که حتما می‌شناسید. هر سال 24 مقاله جدید در زمینه توسعه وب توسط معروف‌ترین توسعه‌دهندگان و طراحان وب منتشر می‌کند که نظیر ندارد. به طوریکه مقالات هر سال یکماه مانده به پایان سال‌(در دسامبر)، هر روز یک مقاله منتشر می‌شود و صدها سایت مشابه که هر سال با ایده‌های نو و خلاقانه پا به عرصه وب می‌گذارند.

چه می‌شود از همین الان به فکر شویم تا عیدمان را فراتر از سال پیش به وب بیاوریم. ایده‌های جدید مطرح کنیم و حداقل تا جایی که می‌توانیم آن‌ها را عملی کنیم.

+ پی نوشت: بابت حذف کامنت‌های این پست و پست قبل متاسفم. مشکل حل شد.

باکس جستجو یک سایت چیست؟
باکس جستجوی سایت یک ابزار جستجو است که به طور مستقیم در درون مرورگر افزوده می‌شود معمولاً در اطراف فیلد آدرس دیده می‌شود و عملیات جستجو را برای یکسری سایت‌های مخصوص آسان‌تر و سریع‌تر می‌کند. پس از نصب فایرفاکس چندین باکس جستجوی استاندارد از جمله گوگل، یاهو، آمازون و ایی‌بی به طور پیشفرض موجود هستند. از اینرو این سئوال مطرح می‌شود که چگونه می‌توانم یک نمونه برای سایتم ایجاد کنم؟ این آسان‌تر از آپلود یک فایل XML روی سرورتان و اضافه نمودن یک خط کد به برچسپ HEAD صفحه‌هایتان است.

اول: ساخت فایل XML
برای افزودن جستجوی سایت، مرورگر باید این فایل xml را دانلود کند. (در واقع این فایل به‌عنوان یک پلاگین برای مرورگر در نظر گرفته می‌شود) و تنها اطلاعات مخصوصی از سایت‌تان را شامل می‌شود. قبل از هر چیز فایل XML نمونه را از اینجا دریافت کنید و آن را opensearch_desc.xml بنامید. در ادامه روش سفارشی کردن را توضیح می‌دهیم، اولین دو خطی را که بسادگی می‌توانید سفارشی کنید، نام و توضیح است. فقط مقادیر زیر را مطابق با اطلاعات سایت‌تان تغییر دهید:

<shortname>Alvanweb</shortname>
<description>Alvanweb - Article Search</description>

سپس آیکونی را جهت نمایش در باکس جستجو اضافه می‌کنیم. می‌توانید از همان آدرس Favicon استفاده کنید. (اگر هنوز نمی‌دانید Favicon چیست در اینجا توضیح مفصلی در موردش داده شده است) فقط آدرس را تغییر دهید:

<image height="16" width="16" type="image/x-icon"> /old_media/favicon.ico</image>

و در نهایت رشته جستجو را اضافه‌ می‌کنیم. مهمترین مرحله کار همین‌ جاست. این به نوع سیستمی که برای مدیریت محتوایتان بکارگرفته‌اید بستگی خواهد شد. برای این منظور باید رشته مورد جستجو را از طریق روش GET ارسال کنیم. برای این وبلاگ (الوان وب و بقیه دوستانی که وردپرس استفاده می‌کنند) از فرمتی به شکل زیر استفاده شده است:

<url type="text/html" method="get" template="https://weblog.alvanweb.com/index.php? s={searchTerms}" />

فایل XML را ذخیره و روی سرورتان آپلود کنید. و در انتها کد زیر را در قسمت Head صفحات سایت‌تان اضافه کنید. البته ویرایش آدرس مسیر فایل و عنوان را یادتان نرود:

<link rel="search" type="application/opensearchdescription+xml" href="https://weblog.alvanweb.com/opensearch_desc.xml" title="Alvanweb" />

تمام شد
آدرس سایت‌تان را در مرورگر فایرفاکس 2 یا اکسپلرر 7 (با نسخه‌های پایین‌تر این نرم‌افزارها جواب نخواهید گرفت) تایپ کنید. پس از بارگذاری کامل سایت در لیست سایت‌های جستجو پیغامی را مبنی بر نصب جستجوی این سایت خواهید دید با کلیک روی آن، جستجوی سایت به مرورگر اضافه خواهد شد.

بعد از اینکه رفتم دنبال برنامه‌نویسی و طراحی وب باز هم وضعیت به همین منوال بود. در کارهایی که انجام می‌دادم بودند کسانی که به ما وصله‌های این مدلی بزنند. آن موقع به خودم می‌گفتم بی‌خیالش. به قول معروف از این گوش می‌شنوم و از اون گوش…
اما این روزها در محیط کاری‌ام و دیگر محیط‌ها می‌بینم که این حس مسئول بودنم در مورد کاری که انجام می‌دهم کار دستم می‌دهد. حتی اگر موارد فوق را نداشته باشد حداقلش این است که شخصیتم انگشت‌نمای دیگران در یک اجتماع کوچک می‌شود. راست می‌گویند خواهی نشوی رسوا همرنگ جماعت شو.

امروز مشابه موارد گذشته با من برخورد شد. این ترم خیر سرم 3 واحد کار تحقیقاتی دارم. وقتی طرح تحقیق را به استاد محترم ارائه دادم بی‌مقدمه گفت: این کار شما نیست. همه حرف‌هایشان بجای خود ولی این حرف خیلی برام گرون تموم شد: “انتظار داشتم خودتون برید دنبال کار…” و کلی نصیحت. دوستانی که مرا می‌شناختند صدایشان درآمده بود. دلم نمی‌خواست هیچ چیزی بگویم. به استادی که از چهار تا جدول و دو تا خط شکسته نستعلیق نوشتن و یک حاشیه و کادر این ور و آن ور کردن، این چنین قضاوت می‌کند چه می‌توان گفت؟ اگر استاد محترم قبل از وصله زدن کمی از سابقه‌ی کارهای پژوهشی‌ام می‌پرسید، این حرف رو می‌زد؟ کما اینکه وقتی در انتهای کلاس به اصرار یکی از دوستان کمی از کارهایم برایش گفتم کاملا قانع شد.

من از هیچ چیز حرص نمی‌خورم ولی از دیگران، از استاد دانشگاه، از فردی که عضو هیات علمی دانشگاه است، فردی که تجربه کاری‌اش به اندازه موهای سفید سرش هست انتظار دیگری دارم. ایراد بزرگی که ماها داریم همین است. قبل از اینکه در مورد شخصی یا چیزی اطلاعاتی داشته باشیم شروع به انتقاد می‌کنیم، طرف را به هزار دلیل محکوم می‌‌کنیم و حتی به جاهایی ارتباطش می‌دهیم که طرف در خواب هم ندیده‌ است.
البته این منوط به امروز من نمی‌شود در اجتماعات دیگر هم این وجود دارد و البته نه برای من بلکه برای همه افراد مثل من. هر چند به امروز و گذشته توجهی ندارم ولی مطمئنم برای دفعات بعدی روی کاری که انجام ‌می‌دهم تاثیر خواهد داشت.

در همین راستای گرایشات و تمایلات به سمت اقتصاد، علی الخصوص اقتصاد مملکت گل مان (که هیچ متغیر کلانش در چهارچوب تئوری های اقتصادی قابل توجیه نیست یا توجیه اش کمرشکن است) دست به یک کار پژوهشی، تحقیقاتی زده ام در مورد صنایع کوچک البته در سطح منطقه‌ای و استانی. و تاکنون جز انتظار پشت درب دفتر ارتباط با صنعت و سازمان صنایع و معادن کار دیگری نکرده‌ام.

از طرف دیگر روز و شب منتظرم و مثل این‌که باید یکماه دیگر هم منتظر بمانم تا کمی ذهنم آرام شود (خودتون بهتر از من می‌دونید انتظار چه قدر سخته، مخصوصا وقتی که مورد انتظارت هم خیلی برات عزیزه، اون هایی که منو ذاتاً می شناسن که بهتر) وقتی منتظری، ذهنت منتظر است و تخیلاتت مثل سوهان تفرکت را می سائد حداقل برای من این‌طور است. وقتی انتظارم به پایان رسید منم داد می زنم “بسه بسه، انتظار…” آن زمان فکر می‌کنم و امیدوارم وضع از اینی که هست بهتر شود.

دو ماه دیگر هم الوان‌وب اکسپایر می‌شود فعلا برنامه دقیقی برایش ندارم. ناچاراً مجبورم برای کاهش دغدغه های ذهنیم، حداقل به مدت دو ماه از این حواشی مرخصی نیمه وقت بگیرم. البته همانطور که شاهد و ناظرید اینجا از دیر وقت مرخصی گرفته، ماهی به زور یک یا دو پست نیمه آبکی نوشتن، این موضوع را کاملا تصدیق می‌کنه. منظورم از مرخصی از جواب ندادن ایمیل ها و آفلاین ها و این موارد بود. این را گفتم که اگر ایمیل زدید و جواب ندادم داغ نکنید. به‌هر حال هر وقت فرصت کنم حتما تا جایی که بتوانم پاسخگو خواهم بود.

کم کم دارم به این نتیجه می رسم که جای یک فرام تخصصی CSS بین مان خالیست. خیلی ها کله هایشان پر است و رو نمی کنند. بعضی ها اصالتا خسیس اند حتی در این مورد، بعضی ها هم فرصت و مکانش را ندارند. بعضی ها هم پولکی هستند اگر حرف $ به میان بیاید با کله می آیند. بنظرم ایجاد یک فرام، علاوه بر ایجاد حس رقابت میان اعضای فعال، مشکل دوستان رده دوم را کمی حل می کند. اشتراک اطلاعات حداقل مزیتش این است که از قافله عقب نمی افتی. اگر کسی از دوستان ایده ای دارد مطرح کند.

تغییر سایز متن بدون استفاده از واحد پیکسل
(در این پست سعی می کنم بیشتر در مورد تایپوگرافی بنویسم) قدیما هر وقت طرح های حرفه ای رو نگاه می کردم می دیدم بیشترشون برای سایز متن ها از واحد em بجای px استفاده می کنن. حالا دلیل این کار بماند آخر مقاله؟ اما جالب اینجا بود که اگر المانی رو که مثلا اندازش 12px بود رو می خواستی معادل کنی به واحد em بجاش می نوشتن 1.2em یعنی تقسیم بر ده می کردنش. کار ساده ای به نظر می رسید. ما هم گفتیم همه المان هایی که به واحد پیکسل هستند رو بر ده تقسیم و بجاش از em استفاده می کنیم. ولی دیدم خیلی سایزش متفاوت شد. دو تا کلاس ساده به شکل زیر ایجاد کنید:

<div class="test1">Hello Morteza</div>
<div class="test2">Hello Morteza</div>

این هم سورس سی اس اس کلاس ها، یکی سایز فونتش به واحد px و دیگری به واحد em
(نوع فونت هم مهم نیست):

.test1 { font-size: 1.5em; }
.test2 { font-size: 15px; }

اگر مدل بالا رو امتحان کنید نتیجه دو نوع نوشته با فونت سایزهای متفاوت خواهد بود. (یقینا نوع مرورگر هم بی تاثیر است). برای حل مشکل فوق تنها کافیه برای مشخصه body در فایل سی اس اس، سایز فونت رو برابر با 62.5% قرار بدین. به غیر از این عدد هر عددی رو که انتخاب کنید دو سایز با هم متفاوت خواهند بود. (البته این حالت هم مقدار ناچیزی خطا داره که به چشم نمیاد) کد زیر رو به فایل سی اس اس خودتون انتقال و نتیجه رو مشاهده کنید:

body { font-size: 62.5%; }

پس هر جا دیدید طرف اندازه فونت رو در body برابر 62.5 درصد قرار داده، تعجب نکنید این از کجا اومد. اما چرا بجای px از em استفاده کنیم؟ ببینید اگر جهان وب یک نمونه ایده آل و یکسان بود یقینا از پیکسل استفاده می کردیم. اما این جور نیست، ما مرورگرهایی داریم که برخی فرآیندها رو نقض می کنن. اینترنت اکسپلرر ویندوز (IE/Win) به خوانندگانش اجازه نمی ده که المان هایی رو که سایزشون بر مبنای واحد پیکسل تنظیم شده، تغییر اندازه بدن. همون مثال فوق رو در نظر بگیرید هر دو واحد رو مثلا به 15px بنویسید در IE به منوی Viwe و از اونجا Text Size رو تغییر بدین، آیا تغییری مشاهده می کنید؟!

چه لزومی داره که خوانندگان فونت نوشته رو تغییر سایز بدهند؟ شاید خواننده ای نزدیک بین باشه، شاید از این لب تاب های خنده دار با رزولیشن بالا استفاده کنه یا واقعا با سایزی که شما انتخاب کردید چشمهاش خسته بشه. بنابراین مگر اینکه شما بدانید (فکر نکنید) که مخاطبان شما از IE استفاده نمی کنن یا هرگز تمایل ندارند سایز نوشته هایتان را تغییر بدهند. اما وقتی از em استفاده می کنید قابلیت تغییر سایز متن برای همه مروگرها وجود خواهد داشت.

کمی آن طرف تر:
نمی دونم تا چه حد با مفاهیم parent و child در المان های آشنا هستید. اما همین قدر بدونید که المان هایی که تحت یک المان دیگه واقع می شن یا به عبارتی زیر مجموعه ای از سری بالاتر قرار می گیرند child و خود سری اصلی رو parent می نامند. بنظرم این مفاهیم آشنا باشه و نیازی به شرح بیشتر نیست. تنها برای روشن تر شدن قضیه مثال زیر رو در نظر بگیرید:

<div id="page">
<h1>Hello Morteza</h1>
</div>

در الگوی بالا مشخصه page رو parent و تگ عنوان H1 رو child تعریف می کنیم. در مرورگرهایی که مبنی بر موزیلا (Mozilla) هستند هرگاه المان های عنوان یا سر فصل نظیر h1، h2 تا h6 یا بعبارتی heading elements ها به عنوان child در نظر گرفته بشن، فونت سایز المان parent رو به ارث می برند. اما سایر مرورگرها از این متد تبعیت نمی کنند و heading ها رو در اندازه های متفاوت نشون می دن. راه حل همه اینه که بیایم به المان های عنوان ها فونت سایزهای از پیش تععین شده نسبت بدیم. اما اینکه چه سایزی رو بر حسب واحد em انتخاب کنیم کمی مشکل خواهد بود.

فرض کنید در مثال بالا سایز فونت المان page برابر 12px باشه. شما می خواهید عنوان h1 فونت سایزی برابر 24px داشته باشه. چکار کنیم؟ چه طور بر حسب em تبدیلش کنیم؟ حتما می گید تقسیم بر ده می کنیم و بجاش می نویسیم 2.4em البته 62.5% رو هم در body لحاظ می کنیم. نه این اشتباهه ! امتحان کنید چرا که فونت سایز المان h1 تحت تاثیر فونت سایز المان page قرار خواهد گرفت. برای اینکه این واحد را به em معادل کنید یه فرمول خیلی جالب هست و اون اینکه فونت سایز المان child رو بر مبنای px بر فونت سایز المان parent بر مبنای px تقسیم می کنیم، فونت سایز المان child بر مبنای em بدست خواهد آمد. یعنی در این مثال فونت سایز المان h1 رو که به عنوان child لحاظ شده (عدد 24 پیکسل) بر فونت سایز المان page که به عنوان parent واقع شده (عدد 12 پیکسل) تقسیم می کنیم در نهایت فونت سایز المان h1 برمبنای em به صورت 2em خواهد بود.

موضوع رو گرفتید؟! امیدوارم. حرف هایی که بالا زده شد در مورد المان های تیتر یا عنوان یا همان heading ها بود. برای درک بیشتر موضوع به سراغ لیست آیتم ها ( آیتم های لیست شده) می رویم. قاعده زیر را در نظر بگیرید این به ما می گوید که تمام آیتم هایی که در زیر مجموعه المان page قرار دارند باید سایزشان 10px باشد. (فراموش نکنید فونت سایز المان page همان 12px مثال بالا در نظر گرفته شده است)

#page li { font-size:0.8333em }

چرا 10px؟ طبق فرمول 10px تقسیم بر 12px می شود 0.8333 em اما به نظر شما وقتی یک لیست در زیر مجموعه یک لیست دیگر قرار بگیرد چه اتفاقی خواهد افتاد؟ کوچکتر خواهد شد اما چرا؟ چون قاعده بالا به ما می گه هر لیست آیتمی که در زیر مجموعه المان page واقع بشه، باید 0.8333 ام سایز المان parent خودش باشه. بنابراین دوباره ما به یک قاعده ای نیاز داریم که تاثیر این کاهش ارثی رو از بین ببره. الگوی زیر این کار رو انجام می ده:

li li {font-size:1em}

این به ما می گه که هر لیست آیتمی که در زیر مجموعه یه لیست آیتم دیگر واقع شد، باید سایزی یکسان با parent خودش داشته باشه. بهتره برای جلوگیری از آشفتگی و سر درگمی طرح از همون اول یک قاعده برای تمامی انتخابگر های child ای که استفاده می کنید به شکل زیر لحاظ کنید:

li li, li P, TD P, BLOCKQUOTE P {
font-size:1em
}

اگر این پست رو تا آخر خوندین و چیزی هم یاد گرفتید یا از قبل یاد داشتید و از یادتون رفت حتما در نظرات مطرح کنید تا کیفیت مطالب رو تغییر بدم. اگر قسمتی از این پست رو هم متوجه نشدین همین جا مطرح کنید بهتر از ایمیل زدن خواهد بود. موفق باشید.

• + How to size text using ems
  + Effective Style with em
  + CSS Font Size Explained
  + Font Sizing by Eric Meyer
  + Sitepoint Forums: Best Practice for font-size
  + Webmaster world forums: PX to em and more

+ لیست منابعی که در این آموزش بیشتر کمکتان خواهند کرد.

واقعا جای شرمندگی است که وسایل دیجیتالی با آخرین امکانات و تکنولوژی های روز، از خارج وارد، و در کشور ما فقط منو فارسی می شوند. تنها هنرمان همین است و به آن افتخار هم می کنیم که آقا ما فلان وسیله رو داریم منو فارسی هم داره ها. بنظرم اگر برای ایده ها و طرح هایی که مطرح می شد و می شود بستر سازی مناسب می شد، الان اینجای کار نبودیم. باید فقط ببینیم که آن ور آبی ها ایده هایمان را مفت مفت می خرند و بکار می گیرند و خودمان از ته دل آه بکشیم.
کلی حرف اینجاست این چند خط رو هم نوشتم تا امروز یادم نره …