راهنمای git قسمت دوم

6 12 2010

این قسمت دوم این راهنما هست برای دیدن قسمت اول به اینجا بروید.

توی این مدت ۲ تا کنفرانس خیلی خوب در مورد گیت که توسط google پر شده پیدا کردم که به دردتون میخوره و حتما پیشنهاد می کنم ببینید: اولیش اینجا هست که لینوس توروالدز (آغاز کننده ی پروژه ی گیت و کرنل لینوکس) صحبت می کنه دومی هم اینجا هست.

برای کار گروهی نیاز به یک سرور دارین که یه گیت رو به عنوان repository روی اون نصب کنین و بقیه ی افراد تغییرات مورد نظرشون رو روی اون بذارن. برای این کار در سرور یه فولدر بسازین و دستور زیر رو توش بزنین: git init --bare توجه کنین که برای repository حتما باید bare رو استفاده کنید.

حالا توی لوکال باید از پروژه یه clone بگیرین:به فولدر مورد نظر در لوکال بروید و دستور زیر رو بزنید: git clone ssh://USER@HOST/PATHTOGIT و پس از اتمام مراحل فایل هایی که می خواهین توی پروژه بذارین رو در همین فولدری که ساخته شد قرار دهید. سپس commit کنید و با دستور زیر اون ها رو به سرور بفرستید: git push origin master حالا به طور گروهی هر نفر از گروه می تونه از پروژه clone کنه و روی اون کار کنه. ممکنه وقتی شما اقدام به push کردن می کنین با خطای زیر مواجه بشین: ! [rejected] branchname -> branchname (non-fast forward) error: failed to push some refs to 'user@HOST:FOLDERTOGIT'

شما باید قبلا از push تغییرات رو از سرور دریافت کنین: git pull origin master

اگر طراحی وب کار میکنید و میخواین سایت هاتون رو روی وب بذارین و با git اون ها رو آپدیت کنین(البته به طور کلی اگه میخواین یه work dir بسازین که سورس کد هاتون توی سرور توی یه فولدر نشون داده بشن)مراحل زیر رو انجام بدین:

پس از این که گیت رو روی سرور نصب کردین و ریپوزیتوری را ایجاد کردید باید آن را کانفیگ کنید:

با استفاده از دستور git config مقادیر زیر را سِت کنید:

git config core.bare false
git config core.worktree /PATHTOWORKTREE/.

git config receive.denyCurrentBranch ignore

git config core.logAllRefUpdates true

PATHTOWORKTREE آدرس فولدری هست که میخواین تو سرور فایل ها قرار بگیرن مثلا /var/www/project .

مهم: به نقطه ‹.› بعد آخر خط اول دقت کنید. این نقطه فراموش نشود.

تمام تنظیماتی که انجام می دهید در فایل config درون ریپوزیتوری تان ذخیره میشود که میتوانید در صورت اشتباه انجام دادن کانفیگ آن را ویرایش کنید.

الآن باید کاری کنیم که وقتی به سرور push کردیم به طور خودکار git دایرکتوری مورد نظر توی سرور رو آپدیت کنه.

git دارای hook هایی هست که برای اعمال مختلفی از جمله وقتی push رو انجام میدیم تعریف شده. ما تنها کاری که باید بکنیم باید بریم اون hook رو دستکاری کنیم.

فایل hooks/post-receive رو در ریپوزیتوری بسازید و آن را به صورت زیر ویرایش کنید: #!/bin/sh
git checkout -f master
خوب حالا باید این فایل رو با دستور زیر executable کنیم: chmod +x hooks/post-receive الآن هر باری که به سرور push کنید دایرکتوری آپدیت میشه. فقط نکته ای که هست باید دایرکتوری مورد نظرتون وجود داشته باشه و git بتونه توش بنویسه

برای استفاده ی گیت بر روی ویندوز از برنامه ی msysgit می تونید استفاده کنید. نرم‌افزار های مدیریت گیت: برای مدیریت گیت به صورت گرافیکی نرمافزار های متفاوتی نوشته شده از جمله ی اون ها می توان به qgit , gitk, gitview اشاره کرد. این برنامه ها واسط های گرافیکی شما با گیت هستند که به راحتی می تونید تغییرات ثبت شده در پروژه رو مشاهده کنین. من توی این مقاله سعی کردم کلیات ماجرا رو بگم و یه راهنمایی مختصری کرده باشم به هر حال شما برای کار با برنامه باید کتابش رو بخونین.





پلاگین jquery validation

29 08 2009

با استفاده از پلاگین validation شما می توانید به راحتی فورم هایتان را چک کنید. یعنی لازم نیست کاربر فورم را پر کند سپس بر روی submit کلیک کند و کمی صبر کند و با پیغامی شبیه » لطفا یک ایمیل صحیح وارد کنید » رو به رو شود.

برای شروع ابتدا پلاگین را از اینجا دانلود کنید

به مثال زیر توجه کنید:
ابتدا در هدر سایت jquery و سپس jquery validator را لود کنید(توجه کنید که حتما باید اول jquery لود شود و سپس پلاگین:

<script type="text/javascript" src="PATH TO JQUERY"></script>
<script type="text/javascript" src="PATH TO VALIDATE PLUGIN"></script>

یک فرم html ساده برای مثال ورود به سیستم آماده می کنیم:

<form id="myForm"> email: <input name="email" type="text" />
password: <input name="password" type="password" />
<input type="submit" value="submit" />
</form>

حالا با jquery فورم رو انتخاب کرده و برای اون تعیین می کنیم هر فیلدی چه خصوصیاتی داشته باشه:

<script type="text/javascript">
$("#myForm").validate({
rules:{
email:{
required:true,
email:true
},
password:{
required:true,
minlength:5,
maxlength:20
}
}
})
</script>

به کد بالا دقت کنید ابتدا فورم را انتخاب کرده ایم و سپس تابع validate را روی آن اعمال می کنیم. به عنوان آرگومان یک کلاس را برای آن ارسال می کنیم . که در خصیصه ی rules نام هر input را قرار می دهیم و در آن خصوصیات هر input را معرفی می کنیم. در اینجا از خصوصیات بسیار ساده ی پلاگین استفاده کرده ایم . برای  مشاهده ی خصوصیات بیشتر به اینجا مراجعه کنید.

دیدید چه سادست؟؟ با این پلاگین دیگه لازم نیست دونه دونه بشینین اینپوت ها رو چک کنین !!





MVC در جاوا اسکریپت

7 03 2009

بله !!‌درست می بینید!! معماری MVC نیز در جاوا اسکریپت می توان پیاده سازی کرد!! توجه تان را به ادامه ی داستان جلب می کنم 😀

MVC نوعی معماری نرم افزار هست .مخفف Model View Controller می باشد. در این معماری ۳ بخش از برنامه نویسی از هم جدا می شوند و در کلاس های مجزا قرار می گیرند.

اکثر طراحان وب فکر آن را نمی کنند که می توان این معماری را در جاوااسکریپت به کار برد و تنها فکر می کنند که این معماری تنها مختص زبان های سرور ساید است.

در جاوا اسکریپت ۳ بخش model view controller به صورت زیر تعریف می شوند:

۱. Model: در این کلاس تمامی توابع و کلاس هایی نوشته می شود که مربوط به بانک اطلاعاتی می باشد. برای مثلا کانکشن های آژاکس و ارسال و دریافت اطلاعات و یا آرایه ای از اطلاعات و …  را در آن می توان حا داد.

۲. View :شامل توابع و کلاس هایی که مربوط به نشان دادن و تغییر در محتویات صفحه هستند می باشد.

۳. Controller : وظیفه ی آن کنترل کردن رویداد های صفحه می باشد.

به مثلا زیر توجه کنید:
HTML:

<a href="">click</a>
<div id="messages"></div>

JS:

// app/webroot/js/models/example.js
$m.Example = {

    getText: function() {
        return "hello world";
    }
};
// app/webroot/js/views/examples.js
$v.Examples = {

    showMessage: function(message) {
        $('#messages').append(message);
    }
};

//app/webroot/js/controllers/examples_controller.js
$c.ExamplesController = {

    index: function() {
        $('a').click(this.sayHelloWorld);
    },

    sayHelloWorld: function() {
        $v.Examples.showMessage($m.Example.getText());

        return false;
    }
};


توجه داشته باشید که در این مثال از فریم ورک JQUERY استفاده شده است.





یک دستور css پر کاربرد

3 03 2009

در HTML به هر المان می توان بیش از یک کلاس (class) نسبت داد. و حتی در css selector ها نیز می توان هنگامی که المانی را انتخاب می کنیم تعیین کنیم که حتما هر۲ یا چند کلاس را داشته باشد . مثلا می توان تمامی div هایی را انتخاب کرد که هم کلاس txt1 و هم کلاس txt2 را داشته باشند. برای تعیین چند کلاس برای یک المان می توان با استفاده از فاصله انجام داد! و حتی برای انتخاب المان با css با ‹.› آن ها را جدا می کنیم‌ به مثال زیر توجه کنید:

<style type="text/css">
div.txt1.txt2{ color:red; }
</style>
<div class="txt1 txt2">hi</div>
<div class="txt2">bye</div>
<div>sorry</div>

کد CSS تمامی div هایی که دارای هم کلاس txt1 و هم کلاس txt2 هستند را قرمز می کند.

چیز بسیار جالب این است که از این روش کمتر جایی دیده ام که استفاده شده باشد. در حالی که تمامی مرورگر های رایج از جمله IE6 نیز از این روش پشتیبانی می کنند.





debug کردن جاوا اسکریپت توسط firebug

11 02 2009

firebug ابزار بسیار قدرت مندی برای طراحان وب می باشد. به طوری در عصر حاضر هیچ کس حاضر نیست بدون آن به طراحی وب مشغول شود.

یکی از ابزار هایی که firebug در اختیار ما می گذارد debug کردن javascript می باشد.

جاوا اسکریپت کار ها بدون استفاده از چنین ابزار هایی برای debug کردن کد خود باید در حین برنامه از alert استفاده کنند(حداقل خود من قبل از کار با firebug همین کار رو می کردم!! هی هی هی عجب روزگاری بود!!)

برای debug کردن . firebug شی ای را در اختیارتان قرار می دهد که می توانید در کدتان استفاده کنید.!‌ مثلا با قرار دادن console.log(var1); در داخل کدتان هنگام اجرای برنامه مقدار متغیر var1 در console فایر باگ چاپ می شود. console.dir(obj) شی obj را به صورت درختی در console چاپ می کند.

console.time(«message start») را در اول کد دل خواهتان قرار دهید و سپس console.timeEnd(«message end») را در آخر کدتان قرار دهید!! مثلا اول و آخر یک تابع قرار دهدید. بعد از اجرا زمان پردازش را در console چاپ می کند. از console.profile() در ابتدای کد و از console.profileEnd() در آخر کد استفاده کنید تا تمامی اتفاق هایی که در این هنگام افتاده است را گزارش کند.

حتی می توانید از console.dir(OBJ) برای نشان دادن تمامی اطلاعات و اعضای شی OBJ استفاده کنید.

این ها همه تنها امکاناتی بود که در کد نویسی می توانید به کار برید.

ابزار های دیگری نیز در اختیار شما قرار می دهد.

در پنجره ی فایر باگ در تب console در پایین یک console ای وجود دارد که در آن هر دستوری (از زبان javascript) را که وارد کنید برایتان پردازش می کند. مثلا با اجرای دستور زیر مقدار یک تگ را چاپ می کند:

document.getElementById(«tagname»).innerHTML;

از دیگر امکانات آن می توان breakpoint را نام برد. در تب script در کنار هر خط از دستور ها که می خواهید debug را انجام دهید یا فکر می کنید اشکال برنامه در انجاست کلیک کنید تا دایره ای روشن شود.(همانند شکل رو به رو) و صفحه را refresh firebugsmallکنید. پس از refresh کردن برنامه تا آنجایی که breakpint گذاشته اید پردازش را انجام می دهد و سپس exit می کند ! در سمت راست exception ها و سایر اطلاعات این خط را نشان می دهد.

firebug1

از محمد قیومی به خاطر راهنمایی من در این زمینه کمال تشکر را دارم.





چند نکته در جاوا اسکریپت

12 12 2008

امروز تصمیم گرفتم تجربه هایی را که در زمینه ی جاوا اسکریپت کسب کرده ام را به قلم بیارم :

۱. هرگز نام متغیر هاتون رو یکسان با نام آی دی المان در صفحه قرار ندهید . فرض کنید در صفحه تون المانی دارید که id اون هست testing1 دقت کنید که در کد جاوا اسکریتتون هرگز از متغیر testing1 استفاده نکنید یا حتی آن را تعریف نکنید . چون در اینترنت اکسپلورر به آن ایراد می گیره !! و هیچ ارور مشخصی هم نمیده . در نتیجه مجبور میشید ساعت ها در کدتان بگردید تا به خطایتان پی ببرید.

۲. شی گرای جاوا اسکریپت را هیچ گاه فراموش نکنید. همیشه اطلاعات موقت را در شی ذخیره کنید و هیچ گاه اطلاعات را به طور موقت درون input ها ذخیره نکنید (کاری که من خیلی می کردم و اصلا نتایج خوبی نداشت -باعث شلوغ شدن کد می شد)

۳. سعی کنید همیشه کدتان به کمترین حجم ممکن برسد چون جاوا اسکرپت در کلاینت پردازش می شود در نتیجه بهتره حجم آن کم باشد. پیشنهاد می کنم از yui compressor استفاده کنید.

۴. از فریم ورک ها و کتابخانه هایی نظیر prototype و JQuery و … استفاده کنید تا حجم کدتان کم شود و خودتان راحت تر برنامه بنویسید. من قبلا هم بر این عقیده بودم که فریم ورک ها اصلا به درد نمی خورن و خودم برنامه رو می نوشتم ولی بعد از مدتی فهمیدم فریم ورک ها عجب نعمت هایی هستند.





فشرده سازی فایل های جاوااسکریپت و css

20 11 2008

آیا تا به حال به این فکر کرده اید که چگونه می توان فایل های جاوا اسکریپت را کم حجم کرد؟؟ چگونه کامنت ها و خط های اضافی را حدف کرد؟؟

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

توسط ابزاری به نام YUI compressor که شرکت یاهو آن را تولید کرده است می توانید این کار را انجام بدهید.

برای دانلود  برنامه و اطلاعات بیشتر به  این آدرس بروید: http://developer.yahoo.com/yui/compressor/

می توانید از ابزاری آنلاین ( که از yui compressor استفاده شده است) نیز این کار را انجام دهید:  http://refresh-sf.com/yui/