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

دوره ی آموزش پروژه محور ساخت دفترچه مخاطبین بصورت single page application یا سایت تک صفحه ای توسط فریمورک Laravel و فریمورک Vue.js و فریمورک Bulma:: سخن مدرس ::در این دوره ی آموزشی بصورت پروژه محور ، یک دفترچه مخاطبین آنلاین میسازیم که بتوانیم عملیات CRUD دیتابیس یا همان عملیات CREATE READ UPDATE DELETE را بدون ریفرش کردن صفحه ی مرورگر و بصورت AJAX با استفاده از Vue.js انجام دهیم . در این دوره ی آموزشی از فریمورک Laravel پی اچ پی برای ایجاد پروژه و ارتباط آن با Vue.js استفاده میکنیم .از فریمورک Bulma که یک فریمورک جدید برای css هست بهره میبریم که باعث بالا رفتن سرعت سایت و همچنین ریسپانسیو بودن آن میشود که در دستگاه های موبایل به خوبی یک اپلیکیشن موبایلی نصب شده اجرا میشود . نحوه ی کار با axios برای ارسال داده ها بصورت AJAX را آموزش میدهیم و در نهایت میتوان گفت شما الفبای فریمورک قوی Vue.js را در این دوره طی خواهید کرد و مطمئنا مباحث مطرح شده در این دوره هم برای فریمورک Vue.js و هم برای Laravel و هم برای Bulma بی نظیر است . :: سرفصل های این دوره ی آموزشی ::

جلسه ۱ :
  • معرفی فریمورک 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 جستجو

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

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

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

.