آشنایی با مدل MVC و سیستم احراز هویت

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

php artisan serve

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

Laravel development server started: http://127.0.0.1:8000

با کپی کردن آدرس http://127.0.0.1:8000 در مرورگر می توانید صفحه اولیه پروژه را ببینید:

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

در مرحله بعد باید با view ها آشنا شویم. در حال حاضر ما صفحه ای را در مرورگر می بینیم که عنوان آن Laravel بوده و چند لینک را در زیر خود دارد اما نمی دانیم این صفحه HTML در کجا قرار گرفته است. باید برایتان توضیح بدهم که لاراول از معماری MVC استفاده می کند. بگذارید به طور خلاصه معماری MVC را فارغ از لاراول برایتان توضیح بدهم.

MVC مخفف Model View Controller است (یک جمله نیست بلکه سه مفهوم جداگانه هستند) و به نوعی از دسته بندی و نظم دهی به کدهای شما گفته می شود. Model قسمتی از کد شما است که نماینده داده های برنامه و کار با آن ها است؛ به عبارتی قسمتی که بیشتر با پایگاه داده سر و کار دارد و داده های شما را از آن می گیرد اما بحث لزوما کار با پایگاه داده نیست. دریافت داده ها می تواند از یک فایل یا حتی از مموری باشد!

View قسمتی از برنامه است که مسئول نمایش داده ها به کاربر است. به زبان ساده تر View همان چیزی است که کاربر مشاهده می کند (فایل های HTML و غیره) و طبیعتا تا حد زیادی از منطق backend برنامه شما جدا شده است.

Controller ها نیز نقطه اتصال بین Model و View هستند. ما گفتیم که View ها تقریبا از منطق backend جدا بوده و به آن اهمیتی نمی دهند (به غیر از موارد حداقلی برای تبادل داده) بنابراین باید چیزی وجود داشته باشد که آن ها را به model ها متصل کند. در واقع Model ها داده ها را از جایی مانند پایگاه داده دریافت کرده و به Controller می فرستند و Controller پس از اعمال هر تغییر یا ویرایش یا هر کار دیگر آن ها را به View می فرستد تا به کاربر نمایش داده شوند.

حالا به پروژه خود نگاه کنید. باید پوشه ای به نام resources ببینید. درون این پوشه یک پوشه دیگر به نام views داریم که view های ما را در خود نگه می دارد. در حال حاضر فایلی به نام welcome.blade.php در این پوشه موجود است که همان view ما است اما قبل از وارد شدن به این فایل باید در مورد blade صحبت کنیم. blade یک template engine است که توسط لاراول ارائه می شود. template engine ها ابزاری هستند که به ما اجازه می دهند داده های خود را از backend (سرور) مستقیما وارد frontend (صفحه های HTML) کنیم. در حال حاضر به صورت عادی و با php ساده نیز می توانیم این کار را انجام بدهیم اما blade کار ما را بسیار ساده تر می کند که در طول این دوره آموزشی می بینید (من فعلا از blade حرفی نمی زنم). تمام فایل های blade باید دارای پسوند blade.php باشند.

حالا فایل welcome.blade.php را باز کرده و بدون اعتنا به کدهای عجیب و غریب blade، به انتهای آن می رویم:

<div class="content">
    <div class="title m-b-md">
        Laravel
    </div>

    <div class="links">
        <a href="https://laravel.com/docs">Docs</a>
        <a href="https://laracasts.com">Laracasts</a>
        <a href="https://laravel-news.com">News</a>
        <a href="https://blog.laravel.com">Blog</a>
        <a href="https://nova.laravel.com">Nova</a>
        <a href="https://forge.laravel.com">Forge</a>
        <a href="https://vapor.laravel.com">Vapor</a>
        <a href="https://github.com/laravel/laravel">GitHub</a>
    </div>
</div>

همانطور که می بینید، صفحه Laravel که در مرورگر ما است از اینجا نمایش داده می شود. برای تست می توانیم Laravel را به RoxoGram تغییر بدهیم:

<div class="title m-b-md">
    RoxoGram
</div>

سپس به مرورگر رفته و صفحه را refresh می کنیم:

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

php artisan make:auth

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

composer require laravel/ui

سپس دستور زیر را اجرا نمایید:

php artisan ui vue --auth

این دستور کتابخانه بوت استرپ (برای CSS) و فریم ورک Vue.js و کتابخانه jquery را برای شما نصب می کند. در واقع اگر الان به فایل package.json بروید (وابستگی های جاوا اسکریپتی پروژه) در قسمت devDependencies چنین لیستی را می بینید:

"devDependencies": {
    "axios": "^0.19",
    "bootstrap": "^4.0.0",
    "cross-env": "^7.0",
    "jquery": "^3.2",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.13",
    "popper.js": "^1.12",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.20.1",
    "sass-loader": "^8.0.0",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.6.10"
}

همانطور که می بینید پروژه ما از تمام این پکیج ها (lodash و jquery و vue و popper.js و bootstrap و axios و غیره) استفاده می کند تا کار توسعه برای ما بسیار راحت باشد.

همچنین با اجرای این دستور پوشه view شما تغییر می کند! اگر حالا به resources و سپس views برویم، می بینیم که یک پوشه auth و یک پوشه layout و یک فایل home.blade.php به این پوشه اضافه شده اند. حالا اگر به مرورگر برویم و صفحه را refresh کنیم، می بینیم که دو لینک Login و Register نیز به گوشه بالا و سمت راست صفحه قرار گرفته اند. هدف ما کپی کردن اینستاگرام است بنابراین به یک سیستم احراز هویت نیاز خواهیم داشت.

همانطور که می بینید کل سیستم احراز هویت با دو دستور ساده برای ما پیاده سازی شده است! در قسمت بعدی روی کدنویسی view ها و البته تنظیم پکیج ها کار می کنم تا کلیت npm را درک کنید.