دوره ی آموزش پروژه محور دفترچه تلفن با 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 

.

.