Web Hub

“ LEARN JavaScript + ReactJS with 20+ Projects “

WHM ရဲ့ Eid Promotion ကြီးကတော့ Projects တွေ အမြောက်များနဲ့ ကျောင်းသားများစွာလေ့လာခဲ့တဲ့ JavaScript Class နဲ့ ReactJS advanced တန်းကို Promotion အချိန်အတွင်း သက်သက် သာသာ ဝယ်ယူလေ့လာနိုင်မှာပဲ ဖြစ်ပါတယ် ။

❇️ ဘယ်လိုလူတွေလေ့လာသင့်လဲ ။

JavaScriptအခုမှ စတင်လေ့လာမယ့်သူတွေ ၊ Theory အခြေခံရှိပြီး Project ကောင်းကောင်း မရေးသားနိုင်သေးတဲ့သူတွေ ၊ JS OOP Programming နဲ့ Project ရေးချင်ပြီး React မလေ့လာခင် Functional Programmingကို ထိထိမိမိလေ့လာလိုသူများ ၊ Asynchronous, DOM, BOM အစရှိတဲ့အပိုင်းတွေကို Projects များများရေးပြီးလေ့လာလိုသူများ ၊ ReactJS ကို လက်တွေ့
လုပ်ငန်းသုံး Structure တွေ Performance tips တွေနှင့် Theory တွေကို Projects ပါတခါတည်းတွဲရေးပြီး Practice လုပ်ချင်သူများ Animation Libraries တွေနဲ့ လုပ်ငန်းမှာ အသုံးဝင်တဲ့ Libraries တွေ လေ့လာလိုသူများ တက်ရောက်သင့်ပါတယ်။

❇️ ဘာအခြေခံတွေရှိဖို့လိုလဲ ။

အခြေခံအားဖြင့် Computer အခြေခံ အသုံးပြုတက်ပြီး HTML,CSS နှင့် Bootstrap ဒါမှမဟုတ် Tailwindcss တစ်ခုခု နားလည်ထားဖို့လိုအပ်ပါတယ် ။

❇️ ဘာတွေသင်ကြားမှာလဲ ။

JavaScript ကို အခြေခံ Zero ကနေ သင်ကြားမှာ
ဖြစ်ပြီး Programming သဘောတရားနားလည်စေဖို့ Coding Challenges များနှင့် Projects အမြောက်အများ ထည့်သွင်းသင်ကြားပေးထား ပါတယ် ။ ReactJS ကိုလဲ Functional Programming Concept တွေကနေစပြီး လက်တွေ့အသုံးချနိုင်
မယ့် Libraries များကိုလဲ Projects များနှင့်တကွ ထည့်သွင်းသင်ကြားပေးထားပါတယ် ။ အသေးစိတ်ကို Course Outline တွင်ဖတ်ရှုနိုင်ပါတယ်။

❇️ JavaScript Course Outlines
Introduction
Programming Knowledge
Vaariables
Data Types
Operators
Conditional Statements (If, Else, Switch, Ternary)
Function (Part 1 - 3)
String
Number
Loops (For,While,do while)
Math Object
Date Object
Array (Part 1 - 2) & Iteration
Coding Challenges (Part 1 to 8 )
Object (Part 1 -2)
Hoisting and Strict
Error Handling
Asynchronous Programming
Fetching Api
DOM (Part 1 - 4)
BOM (Part 1 - 2)
Navigator
Object Oriented Programming ( Part 1 - 3)
Wowjs Animation Library
Modules
Login Project
Age Calculator
Digital Clock
Calculator
Show Hide Password Toggle
To Do List
Slider
Darkmode
Password Generator
Movie Project (Part 1 - 7)
Weather Project
Music App (Part 1 - 2)
Video Recording Project

❇️ ReactJS Course Outlines
Introduction
Functional Programming
Installation & Project Structure
JSX
Components & Props (Lists and Keys)
Handling Events
State Management
Hooks (useState,useRef,useEffect, and so on....)
Form
Code Splitting
Context API
Custom Hooks
Working With JSON Server
Fetch API
React Router
Redux
Redux Toolkit
Useful Libraries
Projects (include most of each lesson)
Conclusions
Counter
To Do List
Calculator
Movie App
Shopping Cart
Blog App
Custom Pagination
Weather App
Portfolio Template
Animation Libraries
Other Useful Libraries

❇️ သင်တန်းကာလ ဘယ်လောက်ကြာမှာလဲ ။

သင်ခန်းစာ Lesson ပေါင်း ၁၇၀ ကျော်ရှိပြီး Lesson များ အားလုံး Upload လုပ်ပေးထားတာ ဖြစ်တဲ့အတွက် ကျောင်းသားတို့လေ့လာအချိန်ပေးနိုင်မှုပေါ်သာမူတည်ပါတယ်။

❇️ ProMotion ကာလ က ဘယ်နေ့ထိလဲ ။

June 30 , ထိသာ ၄၀၀၀၀ ကျပ်တည်းနဲ့ ဝယ်ယူရရှိနိုင်မှာဖြစ်ပါတယ် ။

အသေးစိတ်အချက်လက်ကို Page Chat Box မှတစ်ဆင့် ဆက်သွယ်မေးမြန်းနိုင်ပါတယ် ။

" နှစ်သစ်ကူး ပရိုမိုးရှင်းနှင့် WEBHUB Myanmar ၏ Development Courses များကို လေ့လာလိုက်ပါ! "

၂၀၂၂ ဇန်နဝါရီလ တစ်ရက်နေ့ မှာ WHM ကနေ JavaScript Donation Class တစ်ခု စတင် ဖွင့်လှစ်သင်ကြားပေးခဲ့ပြီး နောက်ပိုင်း Paid Class အဖြစ်ထပ်မံရောင်းချခဲ့ရာ လက်ရှိ တစ်နှစ်တာအတွင်းကျောင်းသား ၅၀၀ ကျော်လောက်လေ့လာနိုင်ခဲ့ပါတယ် ။

WHM ရဲ့ နှစ်ကုန် အစီစဥ်သစ်လေးကတော့ WHM ရဲ့ JavaScript Course ကို Course Promotion ကာလ အတွင်း အခမဲ့ တက် ရောက် နိုင်မှာဖြစ်ပါတယ် ။ Theory ကို အရှင်းလင်းဆုံးနားလည်စေမယ့် Projects တွေ
အပြင် လက်တွေ့ လုပ်ငန်းခွင်မှာလဲ အကျိုးရှိစေမယ့် Projects များလဲ ပါဝင်ပြီး Programming စတင်လေ့လာ သူများ အတွက်လဲ အဆင်ပြေစေဖို့ Coding Challenges များလဲ ထည့်သွင်း သင်ကြားပေးထားပါတယ် ။ ကျောင်းသားဟောင်း များ အနေနှင့်လဲ Group အသစ် Guide အသစ် Join လိုလျှင်လဲ လာရောက် ဆက်သွယ်နိုင်ပါပြီ ။

ဒါ့အပြင် တခြား Course တွေဖြစ်တဲ့ ReactJS နဲ့ Laravel Class များကိုလဲ 20% discount နဲ့ ဝယ်ယူနိုင်ပါပြီ။

JavaScript နဲ့ ReactJS Courses များမှာ Project Based Courses များဖြစ်ပြီး Coding Challenges တွေ Related ဖြစ်တဲ့ Packages တွေနဲ့ Projects အများအပြားကို လေ့လာနိုင်ပါတယ် ။ Laravel Courses ကတော့ Real World အသုံးများတဲ့ Packages တွေ Usage တွေအများအပြားပါဝင်ပြီး News App တစ်ခုပါဝင်ပါတယ် ။

✨ Course Outline အသေးစိတ်ကို ပုံတစ်ပုံ ချင်းစီကို ထောက်ကြည့်ပြီး ဖတ်ရှုနိုင်ပါတယ် ။

✨ Courses အားလုံးမှာ Pre recording Class များဖြစ်ပြီး Youtube Private Channel ကိုအသုံးပြုပြီး တင်ပေးထားပါတယ်။

✨ Facebook Private Group တွင်တော့ Guide အလိုက် နံပါတ်စဥ်နှင့်တစ်ကွ စီစဥ် ပေးထား တဲ့အတွက် အလွယ်တကူ လေ့လာ နိုင်ပါ တယ်ဗျ ။

✨ သင်တန်းအပ်နှံငွေလွှဲရန် ဖုန်းနံပါတ် အချက်လက်များကို Page Chat Box တွင်လာရောက်တောင်းယူနိုင်ပါပြီ ။

Courses Promotion များမှာ ၂၀၂၃ ဇန်နဝါရီလ ၅ ရက်နေ့အထိသာ Promotion ရှိမှာဖြစ်တဲ့အတွက် အမြန်ဆုံး ဝယ်ယူ လေ့လာ နိုင်ပါပြီ ။

webhubmm.com
[email protected]
09793148428 (Htet Myat Soe)

Laravel and realtime part 2
Laravel and Realtime ရဲ့ အရင်အပတ်က အဆက်ဖြစ်တဲ့ private channel ကိုပြောပြသွားပါမယ်။

Private channel

Private channel ဆိုတာကတော့ ကိုယ့် dataတွေကို ရောက်စေချင်တဲ့ နေရာ ဒါမှမဟုတ် ရောက်စေချင်တဲ့ user ဆီကိုဘဲ ပို့ပေးတာပါ။ ရှေ့အပတ်ကပြောခဲ့တဲ့ Public channel လို နေရာတိုင်းကိုမပို့တော့ပါဘူး ဒါကြောင့် ပိုလုံခြုံပြီး performance လည်းပိုကောင်းပါတယ်။ ဘယ်လိုနေရာမှာအသုံးပြုလို့ရလည်းဆိုတော့ chat appတွေ၊ notification ပို့တဲ့ feature တွေမှာသုံးလို့ပါတယ် တခြားအသုံးပြုလို့ရတဲ့နေရာတွေအများကြီးရှိပါသေးတယ်။
Private channel တခုကို စလုပ်ဖို့ event တခုကို create လုပ်ပါ။ Example အနေနဲ့ chat app တခုမှာလိုအပ်တဲ့ အဆင့်တွေနဲ့လုပ်ပြသွားပါမယ်။
Event မှာက public channel လို data တခုထဲ ကို ဖမ်းလို့မရတော့ပါဘူး။ ကိုယ်က စာပို့ချင်တဲ့ user id တွေကို ပါဖမ်းထားဖို့လိုပါပြီ။

ပထမပုံမှာ message send button ကို နှိပ်ရင် axios နဲ့ message နဲ့ စာပို့ချင်တဲ့ user id ကို ထည့်ပေးလိုက်ပါတယ်။ အဲ့ဒါကို controller ဘက်ကနေ ဖမ်းပြီး ခုနက create လုပ်ခဲ့တဲ့ Event ဆီကို broadcast လုပ်လိုက်ပါတယ်။

Event ရဲ့ constructor မှာ controller ကနေ broadcast လုပ်လိုက်တဲ့ user id နဲ့ message ကို ထည့်လိုက်ပါတယ်။ broadcastOn function မှာက channel ကို သတ်မှတ်ပေးရပါမယ် ကျွန်တော်တို့ လိုချင်တဲ့ channel က private မို့လို့ PrivateChannel ဆိုတဲ့ keywordကိုသုံးရပါတယ် channel name ပေးတဲ့နေရာမှာ တခုသိရမှာက ကျွန်တော်တို့ message ပို့ချင်တဲ့ user ရဲ့ idကို တွဲထည့့်ပေးရပါမယ် ဒါမှ လူတိုင်းဆီမရောက်မှာပါ။ ဒီနည်းကိုသုံးပြီး public မဟုတ်တဲ့ dataတွေကို target userဆီကို ပို့လို့ရပါတယ်။

ကျွန်တော်တို့ရဲ့ channel က private channel မို့လို့ user authenticate ဖြစ်မဖြစ်စစ်ပေးဖို့လိုပါတယ်။ မစစ်စ်ထားရင် error တက်ပါတယ် ဘာမှပို့လို့ရမှာမဟုတ်ဘူး။ ဘာမှာစစ်မှာလည်းဆိုတော့ route/channel.php မှာ ပုံထဲကအတိုင်းရေးလိုက်ပါ။ Event file ထဲမှာ channel ကို create လုပ်တုန်းက ပို့ချင်တဲ့ user id ကိုထည့်ခဲ့တဲ့အတွက် channel.php မှာ ရေးရင်လည်း user idကို accept လုပ်မယ့်နေရာတခုလိုပါတယ် channelname အနောက်မှာ ကိုယ်ပေးချင်တဲ့ parameter ပေးလိုက်ပါ။ function ထဲက $user ဆိုတာဘယ်ကလာတာလဲဆိုတော့ user model နဲ့တခါထဲချိတ်ပြီးသားပါ channel.php မှာ နဂိုပါတဲ့ broadcast တခုကိုအပေါ်မှာတွေ့ရမှာပါ အဲ့မှာ $user ကို user modelနဲ့ချိတ်ထားလိုက်တာပါ။ $user ကို ပြန်ယူသုံးလိုက်တဲ့သဘောပါ။ second parameter က ခုနက channel nameအနောက်ကနေ ထည့်ပေးလိုက်တဲ့ user id ကိုလက်ခံတဲ့ parameter nameဖြစ်ရပါမယ်။ $user နဲ့ second parameter ညီရင် return true ဖြစ်တဲ့ အတွက် authenticate ဖြစ်သွားပါပြီ errorမတက်တော့ပါဘူး။ ခုဆိုရင် ကျွန်တော်တို့ပို့လိုက်တဲ့ message က pusher ဆီရောက်သွားပါပြီ။ ဆိုတော့ message တွေကို blade မှာပြန်ပြဖို့ channel ကို subcribe လုပ်ရပါမယ်။
private channel ကို subcribe လုပ်ဖို့က
Echo.private('channelname.{{auth()->user()->id}}') ဆိုပြီး channelnameအနောက်မှာ authenticate user idကိုထည့့်လိုက်ရင် ရပါပြီ မြင်အောင်ပြောရရင် pusher မှာရောက်နေတဲ့ channelက channelname.4 ဆိုရင် user id 4 ကို ပို့တဲ့ message ဖြစ်တဲ့အတွက် auth user 4 ကဘဲ အဲ့ channel ကို subcribe လုပ်သွားမှာပါ။ message ကိုတွေမြင်ရဖို့အတွက် listen ထက်လုပ်ရပါမယ် listen လုပ်ပုံကတော့ public channel ကို listen လုပ်တာနဲ့အတူတူပါဘ မသိသေးရင် ဒီ link ကနေဖတ်ကြည့်ပါ
https://www.facebook.com/100146849002344/posts/236521628698198/?mibextid=Nif5oz
။ ဒါဆိုရင် ကျွန်တော်တို့ message တွေကို blade မှာမြင်ရပါပြီ။ codeအပြည့်စုံကို ပုံထဲမှာကြည့်ပါ။

Pusher private channel documentation https://pusher.com/docs/channels/using_channels/private-channels/

//Ye Aung Khant (WHM Team member)