دوره ی آموزشی پروژه محور دفترچه تلفن با Vue.js و Laravel

دوره ی آموزشی پروژه محور دفترچه تلفن با Vue.js و Laravelhttps://avasam.ir/product/27

دوره ی آموزش پروژه محور دفترچه تلفن با Vue.js و فریمورک محبوب Laravel

دوره ی آموزش پروژه محور ساخت دفترچه مخاطبین بصورت single page application یا سایت تک صفحه ای توسط فریمورک Laravel  و فریمورک Vue.js و فریمورک Bulma میباشد . در این پروژه تمرکز اصلی و هدف اصلی ما یادگیری کامل Vue.js نسخه ی دوم میباشد که جدیدترین و بروزترین نسخه ی این فریمورک است . شما با طی کردن این دوره ی آموزشی علاوه بر اینکه خود مبحث ویو جی اس را بصورت کامل یاد میگیرید بلکه نحوه ی استفاده ی Vue در فریمورک محبوب توسعه ی وب سایت به نام Laravel را نیز یاد خواهید گرفت . 

از آنجایی که Vue.js یک فریمورک برای JavaScript خالی است برای دیزاین و طراحی نهایی سایت نیز باید یک فریمورک دیگر استفاده کنید البته چه بهتر که فریمورک شما عاری از هرگونه کد JavaScript باشد ( برعکس بوت استرپ که به جاوااسکریپت محتاج است ) چونکه کارهای مربوط به جاوا اسکریپت را Vue.js برای شما انجام خواهد داد پس برای فرانت اند وب سایت دیگر نیازی به چیز اضافه دیگر مربوط به جاوااسکریپت نیست . 

پس ما انتخابمان فریمورک Bulma است یک فریمورک کاملا ریسپانسیو برای طراحی انواع وب سایت ها به زیبایی هر چه تمام تر ...

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

همچنین Bulma بر پایه ی طراحی جدید Flex است . 

سایت SPA یا  single-page application چیست ؟‌

سایت single page application همانطور که از اسمش هم پیداست با هدف این بوجود آمده است که سایت ها را درون یک صفحه ی واحد درست همانند یک اپلیکیشن دسکتاپ که باز میشود به اجرا بگذارد .

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

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

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

بلکه بصورت خیلی ساده هدف این بود که سایت ها مثل یک اپلیکیشن نصب شده باشند که به این هدف هم کاملا رسیده شد . 

فریمورک ها و کتابخانه های JavaScript دست از تلاش خود برنداشتن و Vuejs و Reactjs و Angularjs فریمورک ها و کتابخانه هایی بودن که به توسعه دهنده ساخت سایت های بدون نیاز به ریفرش را به ارمغان آورندند . 

پس سایت SPA یا Single Page Application سایتی است که تک صفحه ای هست و نیاز نیست برای کارهای مختلف ریفرش در مرورگر اتفاق بیوفتد مثل یک برنامه ی نصب شده درون یک مرورگر است . مثلا برنامه ی چت نسخه ی وب تلگرام :) که با انگولار نوشته شده 

درباره ی کلیات دوره ی آموزش پروژه محور دفترچه تلفن با Vuejs و Laravel 

در بحش پروژه محور این دوره ی آموزشی ، دفترچه مخاطبین آنلاین ساخته میشود که بتوانیم عملیات CRUD دیتابیس یا همان عملیات CREATE READ UPDATE DELETE را بدون ریفرش کردن صفحه ی مرورگر و بصورت AJAX با استفاده از Vue.js انجام دهیم . 

در این دوره ی آموزشی از فریمورک Laravel پی اچ پی برای ایجاد پروژه و ارتباط آن با Vue.js استفاده میکنیم .

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

نحوه ی کار با axios برای ارسال داده ها بصورت AJAX را آموزش میدهیم و در نهایت میتوان گفت شما الفبای فریمورک قوی Vue.js را در این دوره طی خواهید کرد و مطمئنا مباحث مطرح شده در این دوره هم برای فریمورک Vue.js و هم برای Laravel و هم برای Bulma  بی نظیر است . 

سرفصل های دوره ی آموزش پروژه محور ساخت دفترچه مخاطبین آنلاین با Vuejs و Laravel 

جلسه ۱ : 

• معرفی فریمورک Vue.js و مقایسه آن با انواع فریمورک های JavaScript
• آموزش دانلود و نصب Node.js و npm
• آموزش دانلود و نصب Vue.js

جلسه ۲ : 

• آموزش افزودن صحیح فایل Vue.js به سند HTML
• آموزش شروع کدنویسی با Vue.js
• آموزش کار با آبجکت اصلی Vue 
• آموزش کار با el و انتخاب element مورد نظر 
• آموزش کار با متد data  و تعریف متغیرهای Vue.js 

جلسه  ۳ : 

• آموزش مدیریت آبجکت ها در Vue.js
• آموزش نحوه ی استفاده از console مرورگر کروم جهت مشاهده ی رخ دادها در طول کدنویسی Vue.js و مدیریت خطاهای کدنویسی رخ داده
• آموزش تغییر لحظه ای داده ها با console
• آموزش کار با delimiters در Vue.js
• آموزش استفاده از v-bind: جهت تغییر ویژگی های تگ های HTML با استفاده از Vue.js

جلسه ۴ : 

• آموزش کار با فرم های HTML و V-bind
• آموش کار با v-model 
• آموزش کار با v-model-lazy
• آموزش کار با checkbox و v-model برای دریافت آیتم های انتخاب شده در فرم HTML
• آموزش متد  join در Vue.js
• آموزش کار با v-for یا ساخت حلقه در Vue.js

جلسه ۵ : 

• آموزش کار با آرایه ها در Vue.js
• ساخت یک لیست از آیتم های قابل انتخاب در Vue.js
• آموزش تعریف key برای آیتم های حلقه ی v-for 
• آموزش شرط if و else و elseif 

جلسه ۶ : 

• آموزش کار با رویداد کلیک یا v-on:click 
• آموزش کار با توابع در Vue.js و نوشتن تابع جدید در بخش methods
• آموزش استفاده از @click بجای v-on:click در رویداد کلیک 
• آموزش کار با @click.prevent 

جلسه ۷ : 

• آموزش استایل نویسی با Vue.js
• آموزش اختصاص کلاس css توسط Vue.js
• آموزش کار با متد @mousehover در Vue.js
• اختصاص مقادیر استایل با استفاده از v-model

جلسه ۸ :

• آموزش Bind کردن انواع کلاس های css با استفاده از Vuejs به همراه مثال 
• تغییر کلاس های css و استایل element های HTML با استفاده از Vue.js

جلسه ۹ : 

• آموزش ساخت لیست در Vuejs 
• آموزش ساخت لیستی از مرورگرها و ورژن های متناظر آنها بصورت تمرین عملی

جلسه ۱۰ : 

• آموزش انتساب رشته ها  در Vuejs
• آموزش انجام عملیات ریاضی روی داده های عددی
• آموزش ایجاد پروژه مبدل داده های ریاضی(سانتی متر) بصورت عملی 

جلسه ۱۱ : 

• آموزش کار با متد indexOf
• ساخت یک پروژه سوال و جواب اتوماتیک برای نشان دادن کارآیی indexOf
• آموزش افزودن Jquery و استفاده از متد Ajax
• آموزش فراخوانی api جیسان یک وب سرویس
• آموزش لود کردن محصولات از یک وب سرویس به همراه توضیحات و تصویر و ...

جلسه ۱۲ : 

• آموزش چرخه ی حیات در Vuejs 
• آموزش کار با متد beforeCreate
• آموزش کار با متد Created 
• آموزش کار با متد beforeMounted
• آموزش کار با متد Mounted
• آموزش کار با متد beforeUpdate
• آموزش کار با متد Updated
• آموزش کار با متد beforeDestroy
• آموزش کار با متد destroyed
• آموزش ایجاد و کار با component های Vue.js
• آموزش ایجاد template های مختلف با استفاده از Component ها 

جلسه  ۱۳ : 

• ادامه ی آموزش کار با component ها و ایجاد component های جدید 
• دریافت json از وب سرویس و نمایش محصولات با استفاده از component ها 
• آموزش استفاده از component برای افزودن element های جدید 

جلسه ۱۴ : 

• آموزش نصب و کار با vue.js devtools برای مرورگر کروم 
• آموزش ایجاد toggle برای نمایش بخشی از متن محصول 
• آموزش کار با devtools جهت پیدا کردن component های vue.js و مدیریت آنها به آسانی

جلسه ۱۵ :

• آموزش پیشرفته ی کار با component ها در Vue.js و ایجاد template های بیشتر
• آموزش کار با scope
• آموزش افزودن تگ های HTML سفارشی به لیست component ها فراخوانی شده با json

جلسه ۱۶ : 

• آموزش تعریف متد remove برای پاک کردن یک آیتم از یک لیست در Vue.js 
• آموزش کار با متد splice در Vue.js 

سرفصل دوره ی پروژه محور Vue.js + Laravel ۵ + Bulma

جلسه ۱۷ : 

• آموزش نصب Composer 
• آموزش نصب فریمورک  Laravel 
• آموزش نصب Nodejs و npm
• آموزش دانلود و نصب فریمورک Bulma
• آموزش نصب Vue.js و Vue-router 

جلسه ۱۸ : 

• ایجاد view جدید در Laravel 
• ایجاد route جدید در Laravel 
• آموزش ایجاد یک view به همراه Vuejs در Laravel 
• تست و راه اندازی Vuejs و استفاده از Laravel Mix 

جلسه ۱۹ : 

• آموزش نصب محیط توسعه ی Atom و افزونه های مورد نیاز برای Laravel و Vue.js 
• آموزش استفاده از دستور npm run watch برای کامپایل css و js های پروژه در یک فایل
• آموزش ایجاد و استفاده از component مربوط به header و footer سایت توسط Vue.js
• آموزش استفاده از vue-router در پروژه دفترچه مخاطبین 
• آموزش ساخت فایل component های مختلف و لود کردن آنها بدون ریفرش شدن مرورگر

جلسه ۲۰ : 

• آموزش نصب Font Awesome در Laravel با استفاده از npm 
• ایجاد item برای نمایش مخاطبین در لیست 
• ایجاد دکمه های مدیریتی مثل ویرایش - حذف - نمایش یک آیتم در دفترچه مخاطبین 
• آموزش استفاده از پنجره ی modal در bulma و استفاده ی آن توسط Vue.js
• آموزش کدنویسی رویداد کلیک @click برای نمایش و بستن یک پنجره ی modal

جلسه ۲۱ : 

• آموزش ایجاد دامنه ی مجازی در xampp بصورت phonebook.me 
• آموزش ساخت Model جدید در لاراول
• آموزش ساخت migration جدید در لاراول
• آموزش ساخت Controller جدید در لاراول از نوع resource
• آموزش مدیریت جدول دیتابیس با استفاده از Migration 
• آموزش استفاده از php artisan جهت migrate کردن تغییرات جدول دیتابیس
•  

جلسه ۲۲ : 

• آموزش اعتبار سنجی فرم با Laravel Request اختصاصی و Vuejs 
• آموزش نصب axios و استفاده از آن برای درج اطلاعات در پایگاه داده با استفاده از Model لاراول و Vuejs بصورت ایجکسی ( درج مخاطب جدید )

جلسه ۲۳ : 

• آموزش ایجاد متد جدید getData در کنترلر برای لود کردن داده های مخاطبین از دیتابیس
• آموزش لود کردن داده ها توسط axios 
• آموزش پر کردن لیست از مخاطبین موجود در دیتابیس توسط Vue.js

جلسه ۲۴ : 

• آموزش ایجاد modal جدید و نمایش آن زمان کلیک شدن نمایش یک مخاطب 
• آموزش فراخوانی یک مخاطب با آیدی بدون رفرش صفحه توسط axios
• آموزش نمایش اطلاعات یک مخاطب لود شده در modal ایجاد شده 

جلسه ۲۵ : 

• آموزش ایجاد modal یا پنجره جدید با استفاده از Vue.js برای عملیات بروزرسانی یک مخاطب خاص از دفترچه مخاطبین
• آموزش فراخوانی اطلاعات مخاطب از دیتابیس و نمایش ان در فرم modal ،  جهت ویرایش
• آموزش ثبت تغییرات انجام شده در دیتابیس با Axios و متدهای model

جلسه ۲۶ : 

• آموزش ایجاد متد delete یک مخاطب خاص از دیتایس با استفاده از axios 
• آموزش برنامه نویسی متد delete و پاک کردن آیتم انتخاب شده توسط Vue.js و متد destroy کنترلر ، بدون رفرش مرورگر

جلسه ۲۷ : 

• رفع برخی باگ های پروژه 
• آموزش تبدیل تمام قسمت های پروژه به یک وب سایت Single Page Application 

جلسه ۲۸ : 

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

جلسه ۲۹ : 

• آموزش ایجاد متد جستجو بین آیتم های لیست مخاطبین با وارد کردن عبارت در input جستجو
• ایجاد watcher برای جستجو بین فیلدهای Name 

جلسه ۳۰ : 

• آموزش کدنویسی جستجوی پیشرفته برای سرچ بین فیلد های دیگر مثل email , phone و ...
• آموزش پر کردن لیست از نتایج جستجو شده و بازگشت اطلاعات قبلی بعد از پاکسازی فیلد جستجو
• جستجو بصورت آنی با تایپ هر حرف یا حذف آن ، در فیلد input جستجو 

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

دمو دوره ی آموزش پروژه محور ساخت دفترچه تلفن بصورت SPA با Vuejs و لاراول