پلاگین 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 را معرفی می کنیم. در اینجا از خصوصیات بسیار ساده ی پلاگین استفاده کرده ایم . برای  مشاهده ی خصوصیات بیشتر به اینجا مراجعه کنید.

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





محدود کردن برنامه ها به استفاده از cpu

25 05 2009

بسیاری از اوقات نمی خواهیم برنامه ای بیش از حد از سی پی یو استفاده کنه! مثلا تصور کنید می خواین یک DVD رو به divx تبدیل کنید . در این صورت برنامه ها از ۱۰۰٪ cpu شما استفاده می کنن بنا براین یا باید کار تبدیل رو انجام بدین یا توی اینترنت چرخ بزنین!

برای خلاص شدن از این مشکل راحت ترین کار اینه که سطح دسترسی برنامه ها رو به cpu محدود کنید ! در این صورت هست که می تونید به راحتی چندین کار حجیم رو با هم انجام بدین بدون این که کامپیوتر هنگ کنه

ابتدا برنامه ی cpulimit رو نصب می کنیم:

sudo apt-get install cpulimit

حالا با دستور زیر به فایرفاکس (یا هر برنامه دیگه ای) بیشتر از ۳۰٪ حق استفاده از cpu رو نمی دیم.

cpulimit -e firefox -l 30

یا حتی به جای استفاده از نام برنامه می تونید از PID اون پروسه استفاده کنید:

cpulimit -p 1313 -l 30





آمار ترافیک مصرفی با vnstat در لینوکس – اوبونتو

28 04 2009

نرم افزار های زیادی در لینوکس برای چنین کاری هستند !‌تنها چیزی که برای اکثر افراد مهم هست اینه که خیلی راحت و بدون دردسر از اون برنامه ها استفاده کنند.
برنامه ی vnstat در کنسول اجرا می شود و مزیت آن اینه که برای remote هم قابل استفاده می باشد.
برای شروع باید این برنامه رو نصب کنیم
برای اوبونتو:
# apt-get install vnstat
حالا باید vnstat رو فعال کنیم:
# vnstat -u -i eth0
الآن باید دستوری رو به crontab معرفی کنیم تا هر چند لحظه اطلاعات رو ذخیره کنه:
crontab -e
در صفحه ی باز شده دکمه ی Insert را بزنید و متن زیر را به صفحه اضافه کنید:
0-55/5 * * * * root /usr/bin/vnstat -u
حالا دکمه ی Esc رو بزنید و wq را تایپ کنید و enter کنید.

مراحل نصب تموم شد.
برای مشاهده ی آمار دستور
vnstat
آپشن های اختیاری :
-d : آمار روزانه
-m : آمار ماهانه
–help: راهنما
آپشن های حرفه ای هم داره برای مثال آپشن -h نمودار رسم می کنه
vnstat





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

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





دسترسی به لوکال هاست آپاچی در virtual box

1 02 2009

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

طراحان باید تمامی نسخه های مرورگر ها را در کامپیوتر خود نصب کنند و صفحات ساخته شده را در تمامی حالات در تمامی مرورگر ها چک کنند.

در این جا مشکل بزرگ تری هم وجود داره و اون هم اینه که بعضی از مرورگر ها در تمامی سیستم عامل ها نصب نمی شوند!! برای مثال اینترنت اکسپلورر تنها در ویندوز نصب می شود(هر چند در لینوکس هم قابل اجرا است ولی کیفیت ویندوزی را ندارد). مثالی دیگر مرورگر safari هست که تنها در مکینتاش قابل اجرا است.

راه کاری که در این جا وجود دارد استفاده از برنامه ی virtual box است. در این برنامه به هر تعداد سیستم عامل مجازی که مایل باشید می توانید نصب کنید و سیستم عامل مورد نظر خود را در آن اجرا کنید. با این کار با نصب ویندوز در این برنامه شما قادر هستید با استفاده از برنامه ی اینترنت اکسپلورر صفحات ساخته شده در لوکال هاست لینوکسی تان را مشاهده کنید.

سوالی که پیش می آید این است که چگونه به لوکال هاست در virtual box دسترسی پیدا کنیم؟؟ !! برای این کار از این آی پی استفاده کنید:
10.0.2.2
آی پی را در virtual box در سیستم عامل دلخواهتان و در مرورگر دلخواهتان در نوار آدرس وارد کنید..!!!! الان home page شما مشاهده می شود.

امیدوارم مطلب رو به خوبی تونسته باشم توضیح بدم.

در آخر از محمد ریخته گران برای راهنمایی من در این زمینه تشکر می کنم