اعتبارسنجی آجاکس – 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 روی ترمینال به محیط پروژه دسترسی پیدا میکنیم.

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

 

  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  داخل ترمینال به محیط پروژه مورد نظر دسترسی پیدا میکنیم.

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

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

گیت چیست ؟!

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

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

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

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

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

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

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

profile settings ssh keys gitlab

گیت لب ( 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 رو کاستومایز کردم.

لینک ویدئوی آموزشی کاستومایز کردن محیط برنامه نویسی در آپارات :

 

لینک ویدئوی آموزشی کاستومایز کردن محیط برنامه نویسی در یوتیوب :

 

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

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

( لاراول ۵.۴ )

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

۱- ایجاد ارتباط بین فیلدهای جداول دیتابیس در 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')
 ]);  

 

دستورات اولیه و مهم لاراول

در این مقاله قصد دارم دستورات مهم و کاربردی که در محیط ترمینال و controller , route و Model کاربرد دارند و معمولا باید بدونیم رو بنویسم که به صورت یک مطلب روی وبلاگم داشته باشم.

( لاراول ۵.۴ )

۱ – رفع باگ migration در لاراول ۵.۴

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

syntax-error-laravel

که برای رفع این مشکل در فایل AppServiceProvider.php در مسیر app > providers کد زیر را اضافه می کنیم :

public function boot()
{
Schema::defaultStringLength(191);
}

۲ – نمایش لیست Route های موجود پروژه در ترمینال

برای نمایش لیست Route های موجود در پروژه و جزئیات آنها از دستور زیر در ترمینال استفاده میکنیم

php artisan route:list

route-list

۳ –  اعتبارسنجی فرم ها و ایجاد Request

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

php artisan make:request ArticleValidate

بعد از اینکار وارد فولدر Http > Request میشیم و فایل ArticleValidate را میبینیم که میتوانیم موارد مربوط به اعتبارسنجی را داخل آن وارد کنیم، اولین کار اینه که متد authorize() را از حالت false به true تغییر دهیم و سپس داخل متد rules() اعتبارسنجی را انجام دهیم.

    public function rules()
    {
        return [
            'ArticleTitle'      => 'required',
            'MetaDescriptions'  => 'required',
            'body'              => 'required'
        ];
    }

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

  public function saveArticle(ArticleValidate $request){
 //....
 }

که برای نمایش Error ها، داخل فایلی که فرم ارسال میشود میتوان آنها را نمایش داد.

۴ – فارسی سازی خطاهای نمایش داده شده به کاربر

برای فارسی سازی خطاهایی که مثلا هنگام ارسال فرم نمایش داده میشود، وارد فولدر resource > lang میشیم، در این فولدر یک فولدر به نام en وجود دارد که یک کپی از آن میگیریم و به fa تغییرش میدیم و وارد فایلهای فولدر میشیم و به فارسی تغییر میدیم ( البته فایل فارسی شده آن توسط بقیه دوستان برای دانلود روی گیت هاب وجود داره ) سپس وارد فولدر config و فایل app.php میشیم و کد ‘locale’ => ‘en’  را به ‘locale’ => ‘fa’ تغییر می دهیم.

Locale-laravel-to-farsi

۵ – تغییر مکان قرارگیری فایلهای مدل و کنترلر و مرتب سازی آنها

وقتی پروژه خود را با لاراول استارت میزنید، به صورت اتوماتیک یکسری از کنترلرها و مدلها ساخته میشود، من شخصا برای پروژه دوست دارم که فایلهای کنترلر و مدل را تفکیک کنم مثلا همه مدل ها را داخل فولدری به نام Models قرار دهم که با اینکار باید namespace و مسیر دسترسی به مدل را داخل کنترلر ادیت کنم. همچنین مدل User.php را نیز به فولدر Models انتقال میدم که با خطای زیر مواجه میشم :

Fatal error access model user in laravel

برای رفع این خطا و دسترسی کنترلر به مدل وارد فایل config/auth.php میشم و مسیر دسترسی به مدل را ویرایش میکنم :

'providers' => [
    'users' => [
        'driver' => 'eloquent',
        'model' => App\Models\User::class,
    ],

همچنین داخل مدل User قسمت namespace را نیز به App\Models تغییر میدم.

۶ –  رفع خطای Mass Assignment در لاراول

وقتی میخواهیم با استفاده از متدهایی همچون create مقاله ای ، …  را اضافه کنیم و نیاز داریم که فیلدهای دیتابیس را تغییر دهیم با اجرای متد با خطایی به نام Mass Assignment روبرو میشیم که اجازه تغییر فیلدها دیتابیس را به کاربر نمیده، برای اینکار در فایل مدل مربوطه باید مشخص کنیم که کاربر اجازه تغییر کدام یک از فیلدها را خواهد داشت، که برای اینکار مثلا برای مقالات ما اگر بخواهیم فقط اجازه تغییر مقادیر تایتل و متن توضیحات رو به کاربر بدیم به صورت زیر اقدام میکنیم :

    protected $fillable = ['title' , 'body' ];

و اگر بخواهیم به همه فیلدها به جز یک فیلد یا تعداد کمتری اجازه تغییر دهیم، به جای ذکر همه فیلدها با استفاده از متد فوق میتوان به صورت زیر عمل کرد : ( اگر به همه فیلدها اجازه تغییر دهیم برای حالت زیر یک آرایه خالی قرار میدهیم )

  protected $guarded = ['price'];

۷ – رفع مشکل composer autoload

گاهی وقت ها مجبور میشیم که فایل کنترلر را حذف و مجددا بسازیم که در این حالت به دلیل باقی ماندن فایل در دایرکتوری composer با خطای زیر مواجه میشیم :

composer autoload

با اجرای کد زیر در ترمینال میتوان مشکل مورد نظر را حل و کنترلر را ایجاد کرد.

composer dumpautoload

۸ – ایجاد بخش لاگین و ثبت نام کاربر

php artisan make:auth

با استفاده از دستور فوق بخش های مربوط به لاگین و ثبت نام کاربران در پروژه لاراولی ایجاد میشود. ( مانند route ها و view ها )

 

انتقال مجنتو از لوکال هاست به هاست و برعکس

سیستم فروشگاه ساز مجنتو

( این آموزش برای مجنتو 1.9.x نوشته شده است هرچند به احتمال خیلی زیاد برای سایر نسخه ها نیز کاربرد دارد. )

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

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

نحوه انتقال مجنتو به لوکال هاست و برعکس ساده تر از چیزی است که فکرش را بکنید 🙂

برای انتقال مجنتو از هاست به لوکال قبل از هر چیزی تمام فایلهای خود را در مسیری که نصب کردید زیپ و سپس دانلود نمائید و در مسیری که میخواهید ( که معمولا Xampp است ) نصب کنید و وفولدر آن را به نام مورد نظر خود ذخیره نمایید. ( من نام فولدر را shop قرار می دهم)

ادامه مراحل را به صورت زیر انجام می دهیم.

گام اول : یک نسخه از دیتابیس را Export کنید.

گام دوم : روی لوکال هاست وارد phpmyadmin شوید و دیتابیس جدیدی با نام دلخواه بسازید.

گام سوم : نسخه دیتابیس دانلود شده از هاست را ایمپورت کنید و سپس وارد قسمت Structure دیتابیس شوید و جدول core_config_data را پیدا کنید و روی آن کلیک کنید. ( در صورتیکه پیشوندی به نام جداول دیتابیس اضافه کردید نام پیشوند به نام جداول نیز اضافه میشود : prefix_core_config_data )

structure phpmyadmin database

core config data in magento

گام چهارم : عبارت base_url را اگر در صفحه جستجو کنید دو تا سطر پیدا میکنید که آدرس وب سایت در آن درجشده است، این دو آدرس را به آدرس لوکال هاست خود تغییر دهید. ( من از دامنه مجازی استفاده میکنم و آدرس لوکال هاست من shop.dev است. )

base-url-magento

گام پنجم : وارد مسیر app < etc شوید و فایل local.xml را ویرایش نمائید. (username , password , dbname)

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

magento - local-xml

گام ششم: وارد فولدر فروشگاه شوید که در لوکال هاست مجنتو را در آن نصب کردید و سپس وارد وفولدر کش شوید  ( shop > var  > cache )  و تمام فولدرهای داخل آن را حذف نمایید، هم اکنون باید با وارد کردن آدرس لوکال فروشگاه شما نمایش داده شود.

var folder cache magento

هم اکنون اگر آدرس وبسایت را روی لوکال یا سایت باز کنید، اگر با خطای زیر مواجه شدید، باید دسترسی به فولدرهای var , media  رو بررسی کنید که روی ۷۷۷ باشند.

magento permission folder var and media

شاد و موفق باشید.

دیباگ وب سایت روی گوشی موبایل

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

چند لینک مفید :

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

توصیه هایی برای ایجاد وب سایت های بهینه شده برای گوشی های هوشمند

طراحی سایت واکنش گرا : ۶ نکته برای ارتقای عملکرد

اصول نویگیشن واکنش‌گرا در وب سایت های پیچیده

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

البته لازم است تاکید کنم که این ابزار برای دیباگ نهایی که وب سایت شما روی هاسته و به صورت آنلاین قابل مشاهده است کاربرد داره، در غیر اینصورت من خودم شخصا با Inspector گوگل کروم همه حالتهای واکنش گرایی ( responsive ) وب سایت را انجام میدم.

Google Chrome Inspector Element

دیباگ وبسایت به صورت آنلاین با مرورگر سافاری :

در صورتیکه گوشی آیفون داشته باشید، در قسمت تنظیمات مرورگر سافاری امکانی برای دولوپرها وجود داره به نام Web Inspector که در قسمت Advanced میتوانید آن را فعال نمائید.

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

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

safari developer tools

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

developer tools iphone

با تغییر ساده بالا، تغییرات را بر روی گوشی موبایل میبینیم :

safari inspector develop tools

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

دیباگ وبسایت به صورت آنلاین بر روی گوشی اندروید

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

Debugging Firefox for Android over USB

شاد باشید.

نصب لاراول

برای نصب لاراول ابتدا بخش داکیومنتیشن لاراول را بررسی میکنیم که برای ورژنی که مایل هستیم نصب کنیم به چه نسخه ای از php  نیاز داریم، که معمولا بهتره حداقل نسخه 5.6  رو نصب داشته باشیم. البته اگر از XAMPP  استفاده میکنید دیگه نیازی نیست نگران این موضوع باشیم و از آخرین ورژن XAMPP  استفاده میکنیم.

برای نصب لاراول در راهکار پیش رو داریم

گام اول : Composer  را نصب میکنیم.

composer یک پکیج منیجر php است که با استفاده از ان میتوان پکیج های مختلف php  را استفاده کرد و با استفاده از وب سایت packagist میتوانید پکیج های مختلفی که نیاز دارید را پیدا کنید و از آنها در پروژه های خود استفاده نمائید.

برای نصب composer طبق مستندات خود وبسایت عمل خواهیم کرد. و دستور زیر را اجرا میکنیم :

php composer-setup.php --install-dir=bin --filename=composer

بعد از اینکه composer را نصب کردیم در صورتیکه در ترمینال کلمه composer را بنویسیم و Enter  بزنیم نصب شدن آن را به ما نمایش می دهد:

composer-installed-successfully

حالا که composer  را نصب کردیم با استفاده از دستور زیر به راحتی میتوانیم به مسیر مورد نظر بریم و فولدر پروژه را بسازیم و سپس پروژه لاراول را ایجاد کنیم :

composer create-project --prefer-dist laravel/laravel blog "5.3.*"

دقت کنید به جای نام blog نام فولدر پروژه ای که میخواهیم را مینویسیم.

تا به اینجای کار لاراول را نصب کردیم و میتونیم وارد فولدر پروژه پویم و فایلهای پروژه را ببینیم. اما در صورتیکه بخواهیم کار را راحتتر کنیم و نصب لاراول را آسان تر انجام دهیم.

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

mv composer.phar /usr/local/bin/composer

در صورتیکه با نصب آن با مشکل مواجه شدید می توانید از صفحه دانلود آن ، آخرین نسخه آن را دانلود نمائید و سپس با ترمینال به مسیری که آن را دانلود کردید برید. مثلا اگر فایل دانلود شده را در دسکتاپ قرار دادید داخل ترمینال کافیه بنویسید cd/desktop  و سپس آن را به صورت Global نصب کنید به دستور زیر :

mv composer.phar /usr/local/bin/composer

در واقع دستور فوق فایل composerی که دانلود کردیم را انتقال می دهید.

اکنون که composer به صورت Global نصب شده است طبق داکیومنت لاراول دستور زیر را انجام می دهیم‌ و پکیج لاراول را نصب میکنیم :

composer global require "laravel/installer" 

طبق داکیومنت لاراول مسیر زیر را باید به مسیر PATH سیستم اضافه کنیم :

در سیستم عامل مکینتاش در قسمت ترمینال وارد روت اصلی میشویم ( با اینتر کردن cd ) و سپس با تایپ دستور ls -a  میتوانیم فایل ها موجود را مشاهده کنیم و تغییرات لازم را اعمال کنیم، تصویر زیر فایلهای موردنظر را نمایش می دهد، فایل .bash_profile فایلی است که میخواهیم ادیت را بر روی آن انجام دهیم :

file path on mac

مطابق تصویر زیر PATH File  را به آن اضافه و ذخیره میکنیم. ( خط انتخاب شده در تصویر زیر به آن اضافه شده است ).

path bash file

بعد از نوشتن PATH برای reload شدن فایل دستور زیر را مینویسیم :

source ~/.bash_profile

اکنون تنظیمات لازم اعمال شد. با تایپ دستور laravel –version نسخه ی لاراول به شما نمایش داده خواهد شد.

laravel-version

برای نصب لاراول با ترمینال به مسیر مورد نظر که میخواهیم پروژه لاراول را در آن ایجاد کنیم وارد می شویم و سپس  دستور زیر را تایپ میکنیم.

laravel new blog

در پست قبل دامنه ای مجازی به نام laracms ایجاد کردیم، وارد فولدر htdocs می شویم و دستور فوق را وارد میکنیم تا لاراول شروع به نصب کند :

نصب لاراول

در صورتیکه با موفقیت لاراول نصب شود پیغام زیر به شما نمایش داده خواهد شد.

install successfully laravel

وارد فولدر می شویم و دستور زیر را تایپ میکنیم :

php artisan serve

بعد از تایپ دستور فوق با خطای زیر مواجه می شویم :/

error 500 laravel

که لازم است سطوح دسترسی به فولدر را درست کنیم 🙂

chmod 777

و درنهایت :

php artisan serve

 

laravel

 

شاد باشید.