چگونه سیستم مدیریت محتوای (CMS) مناسب را انتخاب کنیم؟

سیستم های مدیریت محتوا (CMS) از زمان به وجود آمدن زبان های برنامه نویسی همچون PHP تبدیل به یکی از قدرتمندترین ابزارهای توسعه وب در اینترنت شده اند.

در بازاری که وب سایتها بایستی سریع تر و آسانتر ساخته شوند، بسیاری از توسعه دهندگان وب در حال روی آوردن به CMSهای منبع باز (open source) هستند تا کار خود را پیش ببرند. متاسفانه، امروزه هزاران CMS در حوزۀ وب وجود دارد و یافتن مورد مناسب به کاری دشوار تبدیل شده است.

در این مقاله به این موضوع خواهیم پرداخت که چگونه می توانید CMS مناسب خود را برای هر پروژه پیدا کنید.

سیستم محتوا CMS چیست؟

سیستم مدیریت محتوا (CMS) یک برنامه تحت وب است که از یک پایگاه داده (معمولاً MySQL) یا روش های دیگر برای ایجاد، ویرایش و ذخیره محتوای HTML به شکلی قابل کنترل استفاده می کند.

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

چرا باید از CMS استفاده کرد؟

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

محتوا فقط شامل متن نمی شود. گاهی اوقات، محتوایی که شما در یک سایت نیاز دارید ممکن است فرم تماس یا سیستم احراز هویت کاربر باشد. هنر این است که یک CMS در عین داشتن قابلیت، استفاده از آن برای شما یا مشتریانتان آسان باشد. یک CMS خوب به شما امکان می دهد که زمان بیشتری را برای طراحی ظاهر وب سایت و سپس پیاده سازی برنامه های افزودنی (extensions و یا plugin ) یا قابلیت ها اختصاص دهید.

اشتباهات رایج در انتخاب سیستم های مدیریت محتوا

اشتباه اول : انتخاب یک CMS برای افراد ناشی

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

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

اشتباه دوم : کامیونیتی و ارتباطات هرچه بزرگتر، بهتر!

مراقب CMS هایی باشید (خواه متن باز و خواه غیره) که تعداد زیاد کاربرانشان را دلیلی برای ترغیب شما به استفاده از سیستم خود می دانند. فریب وعده وجود یک جامعه کاربری بزرگ و کمک کننده و برنامه های افزودنی یا افزونه های زیبا را نخورید. این یک تله است!

اینکه تعداد زیادی از افراد از یک CMS استفاده می کنند دلیلی بر خوب بودن آن نیست. انتخاب یک CMS صرفاً به خاطر سیل عظیم کاربرانش، یک اشتباه خیلی بزرگ است. برای مثال سیل عظیمی از کاربران از ووکامرس وردپرس برای فروشگاه استفاده میکنند آیا انتخاب این فروشگاه ساز، برای هر نوع فروشگاهی، واقعا کار درستی است؟

دلیل دیگری که افراد اینگونه CMS ها را انتخاب می کنند این است که می بینند جامعۀ عظیمی از توسعه دهندگان یا حجم بزرگی پول در پشت یک برنامه تحت وب قرار دارد.

 اشتباه سوم : راه رفتن با یک کوتوله!

همواره مطمئن شوید که CMS انتخابی شما برنامه های افزودنی و قابلیت های مورد نیازتان را داراست. بسیاری از اوقات، ممکن است به یک CMS امیدوارکننده برخورد کنید اما تا موقعی که مطمئن نشده اید قابلیت های مورد نیازتان را دارد بر روی آن سرمایه گذاری نکنید. متاسفانه برخی از بهترین CMSهای موجود هنوز در حال توسعه هستند.

اشتباه چهارم : تحقیق نکردن

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

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

در یک CMS باید به دنبال چه چیزی بود؟

می توان ویژگی های زیادی را در یک سیستم مدیریت محتوا جستجو کرد. در اینجا برخی از مهم ترینِ آن ها ذکر شده اند

  • نصب سریع و آسان
  • واسط مدیریتی(کاربری) ساده
  • توسعه سریع و آسان قابلیت های اضافی در CMS
  • دستکاری سادۀ قالب
  • جامعه کاربران کمک کننده
  • مستندات مناسب

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

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

توسعه سیستم های مدیریت محتوای منبع باز با سرعتی فزاینده در حال وقوع است. به طور پیوسته، سیستم های تازه ای پا به عرصۀ ظهور می گذارند و بسیاری از این سیستم ها امیدوارکننده به نظر می رسند. غول های دنیای CMS مانند WordPress ، Joomla و Drupal هر روز در حال تغییر و بروزرسانی هستند و با تغییرات زیادی که اعمال می شود روز به روز کاربرپسندتر می شوند.

نتیجه گیری :

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

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

پی نوشت :‌

این مقاله را قبلا در وب سایت بیلاود مارکتینگ منتشر کرده بودم.

استفاده از css preprocessor برای توسعه وب سایت

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

هرچقدر کدهای بخش فرانت‌اند را ماژولار و منظم بنویسیم باز دستمون برای ساختاری منظم برای توسعه راحتتر بسته است به همین دلیل استفاده از css preprocessor ها کار ما را خیلی راحت‌تر میکند به طوریکه حتی بتوانیم در سایر پروژه‌ها از بخشی از کدها استفاده کنیم.

استفاده از Sass

sass

Sass یکی از قدرتمندترین css preprocessor های موجود است که بهتون توصیه میکنم در استفاده از آن شک نکنید. لازم است تاکید کنم Sass هیچ چیزی به css اضافه نمی کند ولی قابلیت‌هایی به شما می‌دهد که بتوانید از کدنویسی سمت فرانت‌اند هم بیشتر لذت ببرید و هم امکاناتی را در اختیار شما قرار میدهد که تاثیر بسیار مثبتی روی پروژه‌ی شما می‌گذارد.

برای مثال ‌قابلیت‌هایی همچون تعریف متغیر، ایجاد فانکشن و … را در اختیار شما قرار میدهد.

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins , inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

شما میتوانید متغیرهایی را تعریف کنید و در بخش‌های مختلف پروژه از آن استفاده نمایید. همچنین میتوانید فایلهای جامعی برای تعریف فانکشن داشته باشید و برای بخش های مختلف پروژه از آن استفاده نمائید و یا قابلیت nesting برای تگ ها داشته باشید و در نهایت Sass  به css کانورت میکند.

برای مثال :

sass to css

نصب Sass

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

نصب Sass  بر روی مک

gem install sass

برای اینکه مطمئن شوید که Sass  نصب شده است می‌توانید کد زیر را در ترمینال اجرا کنید که ورژن Sass  نصب شده را نمایش می دهد.

sass -v

استفاده از Compass

compass style

در صورتیکه میخواهید از Sass  استفاده کنید بدون Compass  از آن استفاده نکنید! در واقع در بالا اشاره کردیم که شما میتوانید mixinهایی را تعریف کنید تا بتوانید راحت‌تر کدهای سمت فرانت‌اند  را توسعه دهید اما زمان بسیار زیادی لازم است تا شما تمام فانکشن‌هایی که لازم دارید را بنویسید به همین خاطر استفاده از Compass  که براساس Sass  به صورت متن‌باز نوشته شده است را توصیه میکنم.

برای استفاده از Compass  میتوانید توی ترمینال کد زیر را اجرا کنید :

 gem install compass

بعد از نصب آن، داخل فایل های Sass  ابتدا Compass  را import  کنید و سپس از امکانات آن استفاده می‌کنید.

@import "compass/css3"

 

@import "compass/css3";
 
@import "compass/utilities";
 
#demo {
  @include clearfix;
}
 
.border-radius-example {
  width: 125px;
  height: 125px;
  background: red;
  margin: 20px;
  float: left;
  padding: 5px;
}
 
#border-radius {
  @include border-radius(25px);
}
 
#border-radius-top-left {
  @include border-top-left-radius(25px);
}

استفاده از Susy

Susy

در صورتیکه با فریمورک‌هایی همچون FoundationBootstrap کار کرده باشید قطعا با طراحی واکنش‌گرا ( responsive ) و گریدبندی آشنا هستید. نقطه قوت این فریم‌ورک‌ها ریسپانسیو بودن و کامپوننت‌هایی است که میتوان استفاده کرد.

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

با استفاده از Susy شما میتوانید برای هر پروژه و بسته به نیازتون گریدبندی‌های مختلف داشته باشید.

برای نصب آن کافی است داکیومنتیشن آن را مطالعه نمایید، برای نصب آن بر روی مک می توانید کد زیر را اجرا نمایید :

gem install susy

برای استفاده از آن باید همچون Compass آن را import  نمایید.

@import "compass/css3";
@import "susy";

$susy: (
    columns: 12,
    container: 1200px,
    gutters: 1/4,
    global-box-sizing: border-box,
    debug: (image: hide)
);

در کد بالا شما تنظیمات Susy را برای پروژه می بینید که ۱۲ ستونه است و عرض تگ container آن ۱۲۰۰ پیکسل است و همچنین فضای خالی ( margin ) بین هر ستون است که میتوانیم مشخص کنیم قبل یا بعد از هر ستون قرار بگیرد.

gutter after in susy
منبع :  zellwk.com/blog/susy-gutter-positions

در صورتیکه حالت debug  را روی حالت نمایش قرار دهید بر روی پروژه مکان هر گرید را میتوانید ببینید.

تنظیمات کلی و پیشفرض susy به صورت زیر است که میتوانید هر کدام را تغییر دهید :

$susy: (
  flow: ltr,
  math: fluid,
  output: float,
  gutter-position: after,
  container: auto,
  container-position: center,
  columns: 4,
  gutters: .25,
  column-width: false,
  global-box-sizing: content-box,
  last-flow: to,
  debug: (
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

در نهایت یک نمونه کد یکی از کاربران که این ساختار را نوشته است می توانید ببینید و تست کنید :

See the Pen Susy Grid Example 1A by Michelle Barker (@michellebarker) on CodePen.

ترمینال ( iTerm ) خود را سفارشی کنید!

خیلی وقت بود دنبال برنامه ای میگشتم تا بتونم محیط ترمینال رو جذابتر کنم و حالت رنگی با تفکیک موارد مختلف داشته باشه که با برنامه oh my zsh به صورت اتفاقی آشنا شدم که با نصب اون روی مک میتونیم استایل دلخواهمون رو ست کنیم.

برای نصب کافیه کد زیر را در ترمینال وارد کنید.

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

install oh my zsh

شما میتوانید تم های موجود را در لینک زیر مشاهده کنید :

 Oh My Zsh Theme

oh my zsh theme

پس از بررسی تم های موجود میتوانید تم مورد نظر را به صورت زیر تنظیم کنید :

کد زیر را در ترمینال وارد نمایید :

sudo nano ~/.zshrc

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

change theme iterm

همانطور که می بینید در قسمت ZSH_THEME نام تم انتخابی را وارد میکنیم.

آپدیت پلاگین :

update oh my zsh

 

معرفی چند پلاگین کاربردی جاوااسکریپت (#2)

Bootstrap Tags Input :

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

bootstrap tags input

دانلود Bootstrap Tags input

Bootstrap Switch

با استفاده از این پلاگین می توانید رادیوباتن های جذاب و زیبایی برای پروژه های خود بسازید.

bootstrap switch

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

Bootstrap Tree View

با استفاده از این پلاگین میتوانید ساختار درختی برای لیستی از دسته بندی ها (  hierarchical tree structures ) داشته باشید. امکانات خوبی جهت دریافت مقادیر هر سطر و … ( events callback as nodeSelected, nodeChecked, nodeExpanded  ) را دارد.
Bootstrap tree view js

مشاهده پلاگین بر روی گیت هاب و مشاهده دمو

GRIDSTACK.JS

این پلاگین با استفاده از کتابخانه jQuery کار میکند و برای ایجاد حالت درگ دراپ برای المان های وب سایت استفاده میشود، در صورتی که برای بخشی از پروژه خود قصد ایجاد این حالت را دارید میتوانید به صورت کاملا ریسپانسیو این حالت را با این پلاگین ایجاد کنید. ( This is drag-and-drop multi-column grid )

drag-and-drop multi-column grid

مشاهده دمو پلاگین 

jsTree

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

( it supports HTML & JSON data sources and AJAX loading )

jsTree

اعتبارسنجی آجاکس – Is Valid Ajax Request

وقتی در پروژه های خود از AJAX استفاده میکنیم، قطعا با توجه به ساختار آن آدرسی را به مرورگر پاس می دهیم و درخواست AJAX را انجام میدهیم.

$.ajax({
    type 	: 'POST',
    url 	: 'editform.php',
    data 	: { data },
    success : function (response) {
       // code here
    }
});

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

function isValidAjaxRequest()
{
    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') 
    {
        return true;
    }
    
    return false;

}

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

if( isValidAjaxRequest() && isset( $_POST['body'] ) && isset( $_POST['operand'] ) )
	{
// code here	
	}

در صورت تمایل به مطالعه بیشتر در مورد AJAX می توانید لینک های زیر را بررسی و مطالعه نمایید.

یادگیری AJAX یکبار برای همیشه!

آموزش پروژه‌ محور آجاکس

معرفی چند پلاگین کاربردی جاوااسکریپت

dropify :

دراپی فای یکی از پلاگین هایی بود که وقتی باهاش کار کردم خیلی لذت بردم و استایل و امکان فوق العاده ای به وب سایت و فرم های شما میده تا هرچه بیشتر کاربرپسندتر باشه.

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

dropify plugin

croppie :

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

croppie image

 

JQuery Location Picker plugin – google map :

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

مشاهده مثالهای jquery location picker  ، دانلود و مشاهده پلاگین در گیت هاب

icheck :

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

icheck

برای دانلود و مشاهده  نمونه ها و نحوه استفاده وب سایت http://icheck.fronteed.com/ را مشاهده نمائید. و یا در
گیت هاب
از آن استفاده نمائید.

bootstrap select :

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

selectpicker

میتوانید نمونه select هایی که با این پلاگین میتوان ایجاد کرد را در وبسایتش و در منوی example مشاهده نمایید.

برای تغییر استایل هم میتوانید کدهای زیر رو به استایل پروژه خود اضافه کنید :

.bootstrap-select .btn {
    background-color    : #fff;
    font-weight         : 300;
    -webkit-appearance  : none;
    -moz-appearance     : none;
    appearance          : none;
}
.bootstrap-select.btn-group .dropdown-toggle .filter-option{
    text-align: right !important;
}
.bootstrap-select .dropdown-menu {
    margin: 15px 0 0;
}
select::-ms-expand {
    /* for IE 11 */
    display: none;
}

bootstrap-colorselector

در برخی از پروژه ها، نیاز به فرم هایی است که کاربر رنگهایی را در وب سایت انتخاب نماید، این پلاگین برای من بسیار جذاب و کاربردی بود.

bootstrap color selector

دانلود  bootstrap color selector 

دسترسی به bash_profile و ایجاد یک alias

برای دسترسی به پروژه هایی که روی گیت لب و یا گیت هاب داریم و clone کردن آنها روی سیستم، مکانی را روی سیستم بهشون اختصاص میدیم و هر سری برای دسترسی به اون پروژه با استفاده از cd address روی ترمینال به محیط پروژه دسترسی پیدا میکنیم.

اگر محیط ترمینال شما iTerm است قبلا در رابطه با سفارشی کردن iTerm ویدیویی رو منتشر کردم، میتوانید مشاهده کنید.

برای راحتی کار و اینکه با نوشتن یک کلمه مثلا projectName ، میتوانیم به محیط پروژه دسترسی داشته باشیم که برای اینکار باید یک alias داخل فایل .bash_profile تعریف کنیم.

نحوه ایجاد یک alias

  1. Start up Terminal
  2. Type “cd ~/” to go to your home folder
  3. Type “touch .bash_profile” to create your new file
  4. Edit .bash_profile with your favorite editor (or you can just type “open -e .bash_profile” to open it in TextEdit
  5. Add ” alias project=”cd /YOUR_ADDRESS ” to .bash_profile file
  6. Type “. .bash_profile” to reload .bash_profile and update any functions you add

بعد از انجام مراحل فوق با نوشتن project  داخل ترمینال به محیط پروژه مورد نظر دسترسی پیدا میکنیم.

ایجاد .bash_profile : 

در صورتیکه تا الان با این فایل کار نکردید و روی سیستم شما وجود ندارد به صورت زیر آن را بسازید :

دستورات زیر را به ترتیب وارد کنید :

1- مسیر ساخت فایل

cd ~

2- فایل را بسازید

sudo nano .bash_profile

بعد از اینکه فایل را ساختید و از آن خارج شدید به صورت زیر فایل را رفرش کنید تا تغییرات اعمال شود :

source ~/.bash_profile

 

آرشیو دستورات گیت – git

در این مطلب قصد دارم به مرور دستورات گیت  و … را آرشیو کنم تا در مواقع ضروری از آن استفاده کنم 🙂

گیت چیست ؟!

گیت یک ورژن کنترل است!

گیت (به انگلیسی: Git) یک نرم‌افزار کنترل نسخه و از مدل نرم‌افزارهای آزاد و متن‌باز برای بازنگری کد منبع توزیع شده و مدیریت منبع کد است که برای دنبال کردن تغییر فایلهای کامپیوتری و دنبال کردن کردن کارهای انجام شده روی آنها توسط افراد مختلف است. هدف اولیه این نرم‌افزار برای استفاده در پروژه‌های نرم‌افزاری بوده است ولی می‌توان از آن تنها برای دنبال کردن تغییر فایل‌ها هم استفاده کرد. [ ویکی پدیا ]

نصب و فعال سازی گیت :

برای نصب و دانلود گیت به وب سایت git-scm.com مراجعه کنید و مراحل نصبش را طی کنید و برای نصب گیت هاب هم در صورتیکه وارد وبسایت گیت هاب شوید می توانید نرم افزار مربوط به گیت هاب را دانلود کنید و به راحتی ریپازیتوری هایی که ایجاد میکنید را مدیریت کنید.

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

ایجاد SSH key برای گیت لب

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

profile settings ssh keys gitlab

برای فعالسازی ابتدا در مسیر موردنظر ترمینال را باز میکنیم و س‍پس کد زیر را وارد میکنیم :

ssh-keygen -t rsa -C "[email protected]"

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

pbcopy < ~/.ssh/id_rsa.pub

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

SSH KEY

گیت لب ( GitLab )

دستورات گیت به صورت زیر هستند :

git init [project name]

ایجاد یک ریپازیتوری جدید بر روی سیستم خود

git clone MY_URL

دانلود از یک ریپازیتوری موجود (url) بر روی سیستم خود

git status

لیست تغییرات و یا فایل های جدیدی که هنوز commit نشدند.

git add .

افزودن همه فایلهای جدید به stage و آماده بودن برای commit

git add [file name]

افزودن فایل موردنظر به stage و آماده برای commit کردن

git commit -m "Description "

commit کردن همه فایلهای موجود در stage

git commit am "Commit Description "

به طور همزمان، هم فایل ها را add میکنیم و هم commit  میکنیم و توضیحی برای commit قرار می دهیم.

git commit -a automatically stage all tracked, modified files before the commit If you think the git add stage of the workflow is too cumbersome, Git allows you to skip that part with the -a option. This basically tells Git to run git add on any file that is “tracked” – that is, any file that was in your last commit and has been modified. This allows you to do a more Subversion style workflow if you want, simply editing files and then running git commit -a when you want to snapshot everything that has been changed.

git push 

آپلود و ارسال فایلهای جدید به سرور زیر نظر branchی که در آن هستیم.

git push origin master

آپلود و ارسال فایلهای جدید به سرور زیر نظر branch اصلی master که معمولا اینکار انجام نمی شود و ترجیحا روی branch دیگری push میکنیم و سپس merge میکنیم.

git pull 

دریافت آخرین تغییرات از سرور و merge.

git branch

مشخص شدن این موضوع که در کدام branch هستیم و کدها را در کدام branch تغییر و یا دریافت میکنیم.

git fetch

و یا 

git fetch --all

دریافت آخرین تغییرات از origin branch. ( no merge )

( در صورتیکه در Branchی هستیم و میخواهیم تغییر branch دهیم، اگر branch را جدیدا ایجاد کرده باشیم باید کد فوق را وارد کنیم تا branch ها و تغییرات شناسایی شوند. )

git branch --all

و یا

git branch

نمایش لیست همه branch

git checkout Develope

تغییر branch مثلا به شاخه Develope

git branch New_Branch 

ایجاد Brnach جدید با نام New_Branch.

git branch -av 

نمایش لیست تمام Branchها، Local and Remote

git branch -d My_Branch 

حذف My_Branch از لیست Branchها.

git checkout Branch_A
git merge Branch_B 

Merge کردن Branch_B داخل Branch_A.

git diff 

نمایش تغییرات فایلهایی که هنوز وارد stage نشدند.

git diff --cached 

نمایش تغییرات فایلهایی که وارد stage شدند.

git diff HEAD 

نمایش تمام تغییرات فایلهایی که وارد stage شدند و فایل هایی که هنوز وارد stage نشدند (Unstage).

git diff commit1 commit2 

تفاوت تغییرات بین دو commit را نمایش میدهد.

git blame [File Name] 

لیست تمام تغییرات فایل موردنظر را همراه با تاریخ و نام دولوپری که تغییرات را ایجاد کرده است نمایش می دهد.

git log

نمایش لیست تمام تغییرات فایل ها.

git log -p [file/directory[

نمایش تاریخچه لیست تغییرات فایل file/directory با نمایش لیست تغییرات آنها (diff) در جریان کامیت ها.

git reset [file[

unstage  کردن فایل مورد نظر و اعمال تغییرات جدید.

git reset --hard

بازگردانی ( Revert ) تمام تغییرات از آخرین commitی که انجام شده است.

سفارشی کردن محیط sublime text

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

در این ویدیوی کوتاه تجربیاتم و مواردی که خودم ازش استفاده میکنم را سعی کردم واضح و شفاف با دوستان به اشتراک بذارم.

موضوع ویدئوی آموزشی

در رابطه با sublime text و نصب پکیج های اون و package control صحبت کردم و همچنین چگونه کلیدهای میانبر(short keys) برای خودمون ایجاد کنیم.

در نهایت محیط ترمینال iTerm رو کاستومایز کردم.

ویدیوی آموزشی کاستومایز کردن محیط sublime text در آپارات

 

ویدیوی آموزشی کاستومایز کردن محیط sublime text در یوتیوب

 

آرشیو اول : دستورات و نکات مهم لاراول

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

( لاراول ۵.۴ )

در این مطلب در رابطه با مواردی که در لاراول لازم میشه اشاره میکنم :

۱- ایجاد ارتباط بین فیلدهای جداول دیتابیس در migration :

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

پس در migration مربوط به مقالات که نام مقاله و slug ، …. وجود داره یک فیلد به نام user_id وجود داره که به فیلد id موجود در جدول users اشاره میکنه. ( جدول users مشخصات کاربران را ذخیره میکند )

پس داخل فایل migration مربوط به مقالات به این صورت می نویسیم :

$table->integer('user_id')->unsigned();
$table->foreign('user_id')->references('id')->on('users');

۲ –  گروه بندی مسیریابی Rout در فایل web.php

همانطور که میدونید برای اینکه مثلا لیست مقالات مربوط به وبسایت رو نمایش بدیم باید در فایل web.php که در فولدر rout است مسیردهی مورد نظر و کنترلر و تابع اون رو مشخص کنیم، برای مثال اگر قرار باشه با مسیر mekaeil.me/admin/articles لیست تمام مقالات را نمایش دهیم مسیردهی در فایل web.php به صورت زیر خواهد بود :

Route::get('/admin/articles', 'Admin\[email protected]')->name('admin.article.list');

که در اینجا با فراخوانی آدرس /admin/articles بعد از نام دامنه، کنترلر ArticlesController که در مسیر Http > Controllers > Admin > ArticlesController وجود دارد فراخوانی میشود و تابع list موجود در این فایل مدیریت نمایش لیست مقالات و ارسال اطلاعات به view را انجام خواهد داد.

نکته اینجاست که ما اگر کلی مسیردهی داشته باشیم برای آدرس های مختلف باید به تعداد آنها مسیریابی را داخل فایل web.php ایجاد کنیم، برای راحتی کار و خلاصه شدن کار میتوانیم از حالت گروه بندی استفاده کنیم به صورت زیر :

Route::namespace('Admin')->prefix('admin')->group(function(){

$this->get('/articles', '[email protected]')->name('admin.article.list');

// Another rout here ...
});

۳ – ایجاد کنترلرها و متدهای مربوط به آن ( CRUD )

هنگام ایجاد اپلیکیشن ها و برنامه ها، متدهای Create , Read, Update, Delete , Store  در کنترلرهای مربوط به مدیریت برنامه استفاده میشود، برای ایجاد کنترلر و متدهای مربوط به آن، بعد از اینکه مدل مورد نظر را ایجاد کردیم میتوانیم با استفاده از دستور زیر به صورت Resource کنترلر موردنظر را ایجاد کنیم در حالتی که شامل متدهای مورد نظر هستند‌:

php artisan make:controller PhotoController -r

CRUD

در حالت فوق متدهای show , edit و … مقداری به نام $id را به عنوان ورودی متد دریافت میکنند تا عملیات مورد نظر انجام شود :‌

Rout model binding in laravel

حالا با تغییر دستور ترمینال به صورت زیر، میتوان با استفاده از rout model binding دسترسی و ارتباط میان کنترلرها و مدلها را برقرار کرد :

 php artisan make:controller ArticleController -r --model=Article

۴ –  insert داده های اولیه ( پیشفرض ) به جداول دیتابیس

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

برای ایجاد این داده های پیشفرض، من داخل فایل migration مربوط به جدول مورد نظر داده ها را اضافه کردم به صورت زیر :

    public function up()
    {
        Schema::create('articlecats', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('slug')->nullable();
            $table->timestamps();
        });

        // Insert Default Data
        DB::table('articlecats')->insert(
            array(
                'id'            => '1',
                'name'      => 'پیشفرض',
                'slug'          => 'default',
                'created_at'    => '1991-07-14',
                'updated_at'    => '1991-07-14'
            )
        );    
    }

۵ – افزودن کاربر به دیتابیس به صورت دستی

گاهی وقت ها هنگام ایجاد پروژه در بخش هایی که هنوز به بخش سطوح دسترسی و احزارهویت کاربران نرسیدیم و لازم است یکسری دیتا را ایجاد کنیم، برای ایجاد این دیتاها از سمت برنامه باید کاربر لاگین کرده باشد و برای لاگین بودن کاربر باید کاربری وجود داشته باشد! پس به صورت دستی یا از سمت phpmyadmin کاربری را ایجاد میکنیم و یا با استفاده از کدنویسی و قراردادن در یکی از فانکشن های کنترلر کاربر را ایجاد میکنیم و سپس کد را حذف میکنیم، که من شخصا راه دوم رو با استفاده از کد زیر انجام میدم.

return User::create([
'name' => 'Mekaeil Andisheh',
'level' => 'admin',
'email'=> '[email protected]',
'password'  => bcrypt('123456')
 ]);