<![CDATA[Shikhun Blog]]>https://blog.shikhun.nethttps://cdn.hashnode.com/res/hashnode/image/upload/v1671038743418/wTNX977A4.pngShikhun Bloghttps://blog.shikhun.netRSS for NodeSun, 12 Apr 2026 20:29:40 GMT60<![CDATA[Web Fundamentals]]>https://blog.shikhun.net/web-fundamentalshttps://blog.shikhun.net/web-fundamentalsWed, 01 Nov 2023 17:15:11 GMT

  • HTTP vs HTTPS

    HTTP হলো Browser এর মাধ্যমে কোন ওয়েব পেজে Request পাঠালে সেই Request Server এ একটা Plain Text হিসেবে যায়। যেখানে Request হিসেবে দেওয়া Data গুলো Insecure অবস্থায় চলাচল করে। মানে, যদি কোনো Request এ Username / Password / Card Details ইত্যাদি আমরা দেই তাহলে শুধু HTTP এর মাধ্যমে এগুলো যেভাবে লিখেছি সেভাবেই যাবে। এতে Hacker রা সহজেই আমাদের Data গুলো দেখতে পারবে।

    কিন্তু যদি এখানে HTTPS ব্যবহার করি তাহলে HTTPS এই Plain Text টাকে একটা Extra Security Layer বসিয়ে এরপর সেটা Server এ পাঠায়। Data গুলো Encrypt করে ফেলে, যা আসল Data কে পরিবর্তন করে ফেলে। সেই Encrypted Text কে শুধুমাত্র Server Decode করতে পারে। যে কারণে Hacker রা Data Leak করতে পারে না।

    আর HTTPS এই Encryption এর কাজ করে SSL Certificate এর মাধ্যমে।

  • Cache and Cookies

    Cache: কোনো Website এ বার বার যাওয়া লাগলে সাইটের প্রতিটা Content প্রতিবার লোড হয়। এতে সাইটের Loading Time বাড়ে। যার কারণে Visitor হারানোর শঙ্কা থাকে।

    এই সমস্যা দূর করতে Cache ব্যবহার করা হয়। এটি Client Machine এ, মানে যে Website Visit করছে তার ডিভাইসে একটি Temporary File বানায়। যেখানে ওই Website এর বার বার ব্যবহার করা কিছু ফাইল Download করে রেখে দেয়। যেমনঃ Logo, Images, Js file, Css file ইত্যাদি। পরবর্তিতে যখন আবার সাইটটাতে Visit করে তখন এই Download হওয়া ফাইলগুলো থেকে Load করে দ্রুত Response করে দেয়। এর ফলে Loading Time কমে যায় ও User Experience Smooth হয়।

    Cookies: যখন কোনো Website এ আমরা Password, Address Details, Ordering Process ইত্যাদি দিয়ে থাকি তখন এগুলো ওই Website কে মনে রাখতে হয় যে এই User টা কে? যেমনঃ কোনো Ecommerce সাইটের Cart এ কোনো Product Add করে রেখে দিয়ে Close করে দেওয়া হলো। পরে আবার Visit করলে যেন সেই User কে মনে রেখে Cart এর Product গুলো দেখাতে পারে সেজন্য Website Provider রা Server থেকে একটা Cookie Store করে রাখে যাতে User কে চিনতে পারে।

    এই Cookie Server থেকে Set করা হলেও এটা মূলত Client Machine এ একটি Temporary File বানায়। ফাইলের মধ্যে Server থেকে পাওয়া Password, Reset Password, Address Details, Ordering Process ইত্যাদির Data থাকে। যখন User Request পাঠায় তখন এই Data গুলো সাথে নিয়ে Request যায় Server এ। তখন Server User কে চিনতে পেরে সেই অনুযায়ী Response করে। এই Cookies এর কারণেই Auto-Password, Cart Details ইত্যাদি দেখা যায়।

    • ]]>    <![CDATA[We discuss basic routing]]>https://blog.shikhun.net/we-discuss-basic-routinghttps://blog.shikhun.net/we-discuss-basic-routingThu, 01 Jun 2023 07:07:37 GMTবেসিক রাউটিং

    সফটওয়্যার আর্কিটেকচারে রাউট হচ্ছে মৌলিক উপাদান(Basic Component). রাউট URL(URL = Uniform Resource Locator)

    থেকে অনুরোধ গ্রহণ করে এবং এপ্লিকেশনকে রিসোর্সের জন্য নির্দেশনা প্রদান করে। লারাভেলের রাউট সমূহ একই সাথে সুবিন্যস্ত করে রাখার জন্য routes/web.php তে লিখা হয়।

    এর সবচেয়ে বড় সুবিধা হচ্ছে আপনি এক যায়গা থেকেই সমস্ত রাউটকে নিয়ন্ত্রণ করতে পারবেন অর্থাৎ পরবর্তিতে রাউট সম্পর্কিত যেকোনো ধরনের পরিবর্তন এখান থেকেই করতে পারবেন।

    উদাহরণ হিসেবে একটি সাধারণ রাউট তুলে ধরা হল।

    Route::get('/', function()

    {

    return view('hello');

    }); উপরোক্ত উদাহরণে Route class এর get() মেথডকে কল করা হয়েছে। get() মেথডটি দুইটি আর্গুমেন্ট গ্রহণ করে। প্রথম আর্গুমেন্ট হিসেবে পাথ (URL Path) এবং দ্বিতীয় আর্গুমেন্ট হিসেবে ক্লোজার(Anonymous Function) যেমনঃ উপরোক্ত উদাহরণে প্রথম আর্গুমেন্ট হিসেবে ফরয়ার্ড স্লাশ / ব্যবহার করা হয়েছে যার দ্বারা রুট ডোমেইনকে নির্দেশ করা হচ্ছে। দ্বিতীয় আর্গুমেন্ট হিসেবে ক্লোজার ব্যবহার করা হয়েছে যার দ্বারা একশন সম্পাদিত হচ্ছে। অর্থাৎ উক্ত রাউটটি resources/views/hello.php ফাইলকে রিটার্ন করবে।

    কি বিষয়টু একটু ঘোলা মনে হচ্ছে? সমস্যা নাই চলুন আমরা আর একটি উদাহরণের মাধ্যমে স্বচ্ছ ধারণা লাভ করি।

    Route::get('books', function()

    {

    return 'Hey, I am laravel!';

    });

    এখন যদি আপনি ব্রাউজার এর Address Bar এ /books (http://localhost/your-project-name/books) লিখে হিট করেন, তাহলে দেখতে পাবেন Hey, I am laravel!

    অর্থাৎ get() মেথডটিতে প্রথম আর্গুমেন্ট হিসেবে books যা পাথ নির্দেশ করে এবং দ্বিতীয় আর্গুমেন্ট ক্লোজার যা দ্বারা কাঙ্ক্ষিত একশন সম্পাদিত হচ্ছে।

    লারাভেলে রাউট মুলত দুই ভাবে লেখা যায়।

    ১) resource ডিফাইন করে রাউটারের উদাহরণঃ

    Route::resource('users', 'UserController');

    ২) controller ডিফাইন করে রাউটারের উদাহরণঃ

    Route::controller('users', 'UserController');

    এ ক্ষেত্রে Controller class টি হবে।

    class UserController extends BaseController {

    public function getIndex()

    {

    return 'I am restful index';

    }

    }

    নোট : এই দুই পদ্ধতি যথাযথভাবে কাজ করবে যদি আপনার Controller এবং Method সমূহ RESTful হয়। RESTful Controller সম্পর্কে এখান থেকে বিস্তারিত পড়ুন

    অনুশীলনঃ কোন কিছু শেখার সময় হাতে কলমে করতে পারলে শেখাটা ভাল হয় তাই আমরা চেষ্টা করবো কিছু অনুশীলন করতে।

    দ্বিতীয় অধ্যায়ে আমরা শিখেছিলাম লারাভেল ইন্সটল করতে, আসুন blog.app নামে একটি লারাভেল অ্যাাপ বানাই ও বেসিক রাউটিং অনুশীলন করি, পরবর্তীতে আমরা আরও নতুন নতুন জিনিস শিখবো ও এটাকে উন্নত করব।

    আমাদের নিজস্ব এনভায়রনমেন্ট(htdocs, www etc.) এ যাই ও টার্মিনালে নিচের কমান্ড দেই

    composer create-project laravel/laravel blog.app এই কমান্ড টি আমাদের ওয়ার্কিং ফোল্ডারে blog.app নামে একটি directory বানিয়ে তার ভিতরে লারাভেল এর যাবতীয় ফাইল ইন্টারনেট থেকে নামিয়ে নিবে।

    আশাকরি ব্রাউজারে আপনি সাইটটি দেখতে পারছেন ।

    আসুন নতুন রাউট বানাই ঃ

    আমরা যদি routes/web.php ফাইলটি খুলি তাহলে এটা দেখবো

    Route::get('/', function () { return view('welcome'); }); আসুন নতুন কিছু রুট বানাই এটাকে পরিবর্তন করে। এই মুহূর্তে আমরা সৌন্দর্যের কথা না ভেবে শুধু কার্যকরীটা দেখি।

    Route::get('/', function () { return 'This is our home page.'; });

    ​ Route::get('/about', function () { return 'This is our about page.'; }); ​ Route::get('/contact', function () { return 'This is our contact page.'; }); ​

    //Lets make some group route Route::group(['prefix' => 'admin'],

    function () {

    Route::get('/', function () { return 'This is our Admin Dashboard'; });

    // this link: blog.app/admin/ ​ Route::get('/user-list', function () {

    return 'This is our Admin Dashboard user list page';

    });

    // this link: blog.app/admin/user-list

    ​ Route::get('/create-blog', function () {

    return 'This is our Admin Dashboard create-blog page';

    });

    //// this link: blog.app/admin/create-blog

    });

    এখানে নতুন হলো রুট গ্রুপ করা। 'prefix' ব্যবহার করে গ্রুপ তৈরি করেছি। আশা করি বুজতে পারছেন। এখন একটু কঠিন মনে হলেও পরবর্তী অধ্যায় করতে করতে সব আয়ত্তে এসে যাবে ।

    পরবর্তী চ্যাপ্টারে ভিউ নিয়ে আলোচনা করা হবে।

    ]]>    <![CDATA[Visual Studio Code এডিটর কি-বোর্ড শর্টকার্ট]]>https://blog.shikhun.net/visual-studio-code-shortcuthttps://blog.shikhun.net/visual-studio-code-shortcutThu, 01 Jun 2023 07:07:17 GMTএখন কোডিংয়ের স্পীড হবে রকেটের গতি যদি আপনি ব্লগটি পড়েন এবং শর্টকাট ব্যবহার করেন তাহলে চলুন শুরু করি।

    Visual Studio Code এডিটর কি-বোর্ড শর্টকার্টঃ

    MAC ও WINDOWS এর জন্য আলাদা কি-বোর্ড শর্টকাট নিচে দেওয়া হল-

    Visual Studio Code এর কমান্ড পেলেট কিভাবে ওপেন করতে হয়-

    MAC

    WINDOWS

    COMMAND+SHIFT+P

    CTRL+SHIFT+P

    Visual Studio Code এর file কমান্ড পেলেট কিভাবে ওপেন করতে হয়-

    কোডিং এর মধ্যে আপনি যদি কোন file খুঁজতে চান সেক্ষেত্রে আপনি যে শর্টকার্টটি ব্যবহার করবেন-

    MAC

    WINDOWS

    COMMAND+P

    CTRL+P

    Visual Studio Code এ কিভাবে নতুন Tab ওপেন করতে হয়-

    MAC

    WINDOWS

    COMMAND+N

    CTRL+N

    Visual Studio Code এ কিভাবে নতুন Tab বন্ধ করতে হয়-

    MAC

    WINDOWS

    COMMAND+W

    CTRL+W

    Visual Studio Code এ recently close করা Tab কিভাবে re-open করতে হয়-

    MAC

    WINDOWS

    COMMAND+SHIFT+T

    CTRL+SHIFT+T

    Visual Studio Code এ Tab এর মধ্যে কিভাবে switch করতে হয়-

    MAC

    WINDOWS

    COMMAND+TAB

    CTRL+TAB

    Visual Studio Code এ কিভাবে কোন একটা নির্দিষ্ট লাইনে যেতে হয়-

    ধরুন আপনি ১২ নাম্বার লাইনে যেতে চান তাহলে আপনি CTRL+G দিয়ে ১২ চেপে ENTER চাপুন

    MAC

    WINDOWS

    COMMAND+G

    CTRL+G

    Visual Studio Code এ বাম পাশে যে explorer section আছে সেটা show এবং hide করতে চাইলে-

    MAC

    WINDOWS

    COMMAND+G

    CTRL+G

    Visual Studio Code এ কিভাবে multiple curcer নিয়ে কাজ করা যায়-

    MAC

    WINDOWS

    COMMAND+SHIFT+L

    CTRL+SHIFT+L

    Visual Studio Code এ একটা word কে কি-বোর্ড শর্টকার্ট এর মাধ্যমে কিভাবে find এবং replase করা যায়-

    MAC

    WINDOWS

    COMMAND+OPTION+F

    CTRL+H

    Visual Studio Code এ terminal open করার জন্য কি-বোর্ড শর্টকার্ট হল-

    MAC

    WINDOWS

    COMMAND+,

    CTRL+,

    Visual Studio Code এ file এর লাইনের শুরুতে যেতে হলে-

    MAC

    WINDOWS

    COMMAND+ (←)

    HOME

    Visual Studio Code এ file এর লাইনের শেষে যেতে হলে-

    MAC

    WINDOWS

    COMMAND+(→)

    END

    Visual Studio Code এ আপনি যদি প্রতিটা word by word যেতে চান-

    MAC

    WINDOWS

    OPTION+(→/←)

    CTRL+(→/←)

    Visual Studio Code এ একদম file এর শুরুতে যেতে হলে-

    MAC

    WINDOWS

    COMMAND+ (↑)

    CTRL+CHOME

    Visual Studio Code এ একদম file এর শেষে যেতে হলে-

    MAC

    WINDOWS

    COMMAND+(↓)

    CTRL+END

    VS code এর অফিসিয়াল ওয়েবসাইটে কি-বোর্ড শর্টকার্ট এর একটি চিটশীট পাওয়া যায়: লিঙ্ক নিচে দেওয়া হল

    Visual Studio Code Shortcut Cheatsheet for MacOS:

    shorturl.at/gsGU6

    Visual Studio Code Shortcut Cheatsheet for Windows:

    shorturl.at/mry38

    consol.log এর কি-বোর্ড শর্টকার্ট:

    এটা একটা pluggin তাই এটা MacOS এবং Windows এ একই রকম।

    MAC

    WINDOWS

    CONTROL+OPTION+L

    CTRL+ALT+L

    consol.log দেওয়ার পর আবার যদি delete করার প্রয়োজন হয় তাহলে

    MAC

    WINDOWS

    SHIFT+OPTION+D

    SHIFT+ALT+D

    consol.log যদি comment করার প্রয়োজন হয় তাহলে

    MAC

    WINDOWS

    SHIFT+OPTION+C

    SHIFT+ALT+C

    consol.log যদি uncomment করার প্রয়োজন হয় তাহলে

    MAC

    WINDOWS

    SHIFT+OPTION+U

    SHIFT+ALT+U

    ]]>    <![CDATA[WordPress Support Engineer Input Field And Form]]>https://blog.shikhun.net/wordpress-support-engineer-input-field-and-formhttps://blog.shikhun.net/wordpress-support-engineer-input-field-and-formSun, 07 May 2023 09:22:02 GMTআজকে আমরা আলোচনা করব আমাদের WordPress Support Engineer Course এর ক্লাস ২ নিয়ে এবং আমাদের টপিক হলো html input fields.

    ইনপুট ফিল্ডে বিভিন্ন রকম টাইপ রয়েছে এর মধ্যে default html,html-5,iput type="text" ইত্যাদি।

    তো চলুন শুরু করি ।প্রথমেই আমরা আলোচনা করব ডিফল্ট html input field type="text" নিয়ে।

    সিম্পল ভাবে আমরা এখানে type="text" দিলে এটা সাধারন লেখার মত আচরন করবে।এই টাইপের ওপর ভিত্তি করেই ইনপুট ফিল্ডের বিভিন্ন রকম ব্যাবহার হয়ে থাকে। আমরা বিভিন্ন রকম ইনপুট ফিল্ড গুলোর লিস্ট দেখি।

    <center>
    <h2>WordPress Support Engineer Input Field And Form</h2>

    1. <h1>Input type text</h1>
    <input type="text">:
    <form>  
        <label>Enter first name</label><br>  
        <input type="text" name="firstname"><br>  
        <label>Enter last name</label><br>  
        <input type="text" name="lastname"><br>  
        <p><strong>Note:</strong>The default maximum cahracter lenght is 20.</p>  
    </form>  



2.<h1>Input type Password</h1>
 <input type="password">:

<form>  
    <label>Enter User name</label><br>  
    <input type="text" name="firstname"><br>  
    <label>Enter Password</label><br>  
    <input type="Password" name="password"><br>  
    <br><input type="submit" value="submit">  
</form>  


3. <h1>Input type Submit</h1>
<input type="submit">:
<form action="https://www.javatpoint.com/html-tutorial">  
    <label>Enter User name</label><br>  
    <input type="text" name="firstname"><br>  
    <label>Enter Password</label><br>  
    <input type="Password" name="password"><br>  
    <br><input type="submit" value="submit">  
</form>  

<h1>Input type reset</h1>
4. <input type="reset">:
<form>  
    <label>User id: </label>  
     <input type="text" name="user-id" value="user">  
              <label>Password: </label>  
     <input type="password" name="pass" value="pass"><br><br>   
     <input type="submit" value="login">  
      <input type="reset" value="Reset">  
</form>  

5.<h1>Input type radio</h1>
 <input type="radio">:
<form>  
    <p>Kindly Select your favorite color</p>  
    <input type="radio" name="color" value="red"> Red <br>  
    <input type="radio" name="color" value="blue"> blue <br>  
    <input type="radio" name="color" value="green">green <br>  
    <input type="radio" name="color" value="pink">pink <br>  
    <input type="submit" value="submit">  
  </form>  


  6.<h1>Input type checkbox</h1>
   <input type="checkbox">:<form>   
    <label>Enter your Name:</label>  
    <input type="text" name="name">  
    <p>Kindly Select your favourite sports</p>  
    <input type="checkbox" name="sport1" value="cricket">Cricket<br>  
    <input type="checkbox" name="sport2" value="tennis">Tennis<br>  
    <input type="checkbox" name="sport3" value="football">Football<br>  
    <input type="checkbox" name="sport4" value="baseball">Baseball<br>  
    <input type="checkbox" name="sport5" value="badminton">Badminton<br><br>  
    <input type="submit" value="submit">  
</form>  


7. <h1>Input type Button</h1>
<input type="button">:
<form>  
    <input type="button" value="Clcik me " onclick="alert('you are learning HTML')">  
</form>

8. <h1>Input type file</h1>
<input type="file">:

<form>  
    <label>Select file to upload:</label>  
    <input type="file" name="newfile">  
    <input type="submit" value="submit">  
</form>  


9.<h1>Input type image</h1>
 <input type="image">:

<h2>Input "image" type.</h2>  
<p>We can create an image as submit button</p>  
  <form>  
    <label>User id:</label><br>  
     <input type="text" name="name"><br><br>  
     <input type="image" alt="Submit" src="login.png"  width="100px">  
  </form>  


  1. <h1>Input type color</h1>
  <input type="color">:
  <form>  
    Pick your Favorite color: <br><br>  
    <input type="color" name="upclick" value="#a52a2a"> Upclick<br><br>  
    <input type="color" name="downclick" value="#f5f5dc"> Downclick  
</form>  


2. <h1>Input type date</h1>
<input type="date">:
<form>  
    Select Start and End Date: <br><br>  
      <input type="date" name="Startdate"> Start date:<br><br>  
      <input type="date" name="Enddate"> End date:<br><br>  
     <input type="submit">  
</form>  

3. <h1>Input type datetime-local</h1>
<input type="datetime-local">:
<form>  
    <label>  
      Select the meeting schedule: <br><br>  
      Select date & time: <input type="datetime-local" name="meetingdate"> <br><br>  
    </label>  
      <input type="submit">  
</form>  

4. <h1>Input type email</h1>
<input type="email">:
<form>  
    <label><b>Enter your Email-address</b></label>  
   <input type="email" name="email" required>  
   <input type="submit">  
    <p><strong>Note:</strong>User can also enter multiple email addresses separating by comma or whitespace as following: </p>  
    <label><b>Enter multiple Email-addresses</b></label>  
    <input type="email" name="email"  multiple>  
   <input type="submit">  
</form>     

5. <h1>Input type month</h1>
<input type="month">:

<form>  
    <label>Enter your Birth Month-year: </label>  
    <input type="month" name="newMonth">  
    <input type="submit">  
</form>  

6.<h1>Input type Number</h1>
 <input type="number">:
<form>  
    <label>Enter your age: </label>  
    <input type="number" name="num" min="50" max="80">  
     <input type="submit">  
</form>  

7. <h1>Input type url</h1>
<input type="url">:
<form>  
    <label>Enter your website URL: </label>  
    <input type="url" name="website" placeholder="http://example.com"><br>  
    <input type="submit" value="send data">  
</form>  

8. <h1>Input type week</h1>
<input type="week">:
<form>  
    <label><b>Select your best week of year:</b></label><br><br>  
    <input type="week" name="bestweek">  
    <input type="submit" value="Send data">  
 </form>  

 9. <h1>Input type search</h1>
 <input type="search">:
 <form>  
    <label>Search here:</label>  
    <input type="search" name="q">  
    <input type="submit" value="search">  
</form> 

10.<h1>Input type tel</h1>
 <input type="tel">:
<form>  
    <label><b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b></label>  
    <input type="tel" name="telephone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>  
    <input type="submit"><br><br>  
 </form>  

</center>
    ]]>    <![CDATA[Tailwind Css CLI ব্যাক্ষ্যা সহ Install প্রসেস]]>https://blog.shikhun.net/tailwind-css-cli-installhttps://blog.shikhun.net/tailwind-css-cli-installMon, 03 Apr 2023 14:34:02 GMT

  • সবার প্রথমে আমাদের একটা Directory বানাতে হবে। আপনার Project এর নাম দিয়ে একটি Directory বানিয়ে ফেলুন। এরপর যেকোনো একটা Terminal ব্যবহার করে এই Directory তে ঢুকুন।

  • npm install -D tailwindcss autoprefixer vite এই কমান্ড Terminal-এ দিবো। এক্সট্রা হিসেবে autoprefixer ও vite আছে। এই autoprefixer ব্যবহার করেছি যেনো যেকোনো Browser এ সব css কাজ করে। আর vite ব্যবহার করেছি Live Server জন্য। আর ভবিষ্যতে Build করার জন্যও এটা দরকার পড়বে।

  • npx tailwindcss init এই কমান্ড Terminal-এ ব্যবহার করবো tailwind.config.js ফাইল তৈরি হওয়ার জন্য। আর এই ফাইলের ভিতরে আমরা নিচের কোডগুলো লিখে দিব…

    • /** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["*"],
  theme: {
    extend: {},
  },
  plugins: [],
}

    💡 এইখানের content এর ভিতরে *(Star) চিহ্ন দিয়ে বোঝানো হয়েছে যে এই Directory-র ভিতরে যেখানে Tailwind CSS ব্যবহার করা হবে সেখান থেকেই যেনো কাজ করে। আলাদা ভাবে Path বা html/css ফাইলও চিনিয়ে দেওয়া যায়।

    • এরপর Directory তে একটা src নামে ফোল্ডার বানাবো। src ফোল্ডারের ভিতরে tailwind.css নামে একটা ফাইল নিব। আর এই ফাইলের ভিতরে নিচের কোড দিয়ে দিব…
    @tailwind base;
@tailwind components;
@tailwind utilities;
    • এবার package.json ফাইলে চলে যাবো এবং নিচের কোডটা devDependencies এর নিচে দিয়ে দিবো…
    ,
  "scripts": {
    "dev": "npx tailwindcss -i ./src/tailwind.css -o ./output/style.css --minify --watch",
        "build": "vite"
  }

    💡 এখানে "dev" এর ভিতরের কোডটা ব্যবহার করবো বিভিন্ন জায়গার css প্রসেস করে এক জায়গায় এনে Output দিয়ে দেওয়ার জন্য। এটাই হবে Directory-র মূল css ফাইল।

    এখানে -i দিয়ে বোঝানো হয়েছে কোন ফাইলটা input হিসেবে কাজ করবে আর -o দিয়ে বোঝানো হয়েছে output হিসেবে কোথায় যাবে। যে নামের ফাইল বানানো হবে সেই নামই এখানে দিয়ে দিতে হবে। --minify ফ্ল্যাগ ব্যবহার করা হয়েছে যেন আমাদের css ফাইলটার জায়গা কম লাগে আর --watch ফ্ল্যাগ হলো আমরা যদি কোনো ফাইলে পরিবর্তন করি তাহলে Live Server এ তা সাথে সাথে আপডেট হয়ে যাবে।

    আর “build” এর ভিতরের vite দিয়ে আমাদের প্রজেক্টের Live Server চালু করা যাবে।

    এই "dev" এবং “build” পরবর্তিতে Terminal এ ব্যবহার করবো। এগুলো আপনি চাইলে নাম হিসেবে যে কোনো কিছু দিতে পারেন।

    • এবার Directory-র যেকোনো জায়গায় একটা index.html ফাইল বানাবো আর নিচের কোডটা দিয়ে দিব…
    <!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/output/style.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-3xl font-bold underline">Hello From SHAMIM</h1>
</body>
</html>

    💡 এই html ফাইলে আমরা ৫ নম্বর স্টেপে একটা css ফাইল বানিয়েছি, এটা মূল css ফাইল। এই css ফাইলটা ওইখানে Link করিয়ে দিতে হবে।

    • সর্বশেষ Terminal-এ npm run dev কমান্ড দিলে আমাদের প্রসেস করে একটা Output css ফাইল বানিয়ে দিবে। এবার Terminal-এ নতুন আর একটা Tab নিব এবং npm run build কমান্ড দিব, তাহলে একটা Server Link তৈরি হবে। সেখানে গেলেই আমরা আমাদের Tailwind CSS এর Output দেখতে পারবো। ধন্যবাদ।
    ]]>    <![CDATA[কিভাবে ইলেমেন্টর কাস্টম উইজেড ডেভেলপ করতে হয়?]]>https://blog.shikhun.net/how-to-develop-elementor-custom-widgethttps://blog.shikhun.net/how-to-develop-elementor-custom-widgetFri, 17 Mar 2023 17:01:32 GMTআজকে থেকে আমরা এলেমেন্টর এর widget development নিয়ে শিখব কিভাবে এটা register করতে হয় । এর বিভিন্ন Settings এবং এটা আমরা কখন কিভাবে ব্যাবহার করব সে বিষয় নিয়ে বিস্তারিত শেখা এবং জানার চেষ্টা করব।

    এর জন্য প্রথমেই আমাদের যেটার প্রয়োজন হবে সেটা হলো প্রথমেই আপনার ইলেমেন্টর plugins টা আপনার wordpress plugins folder এর মধ্যে install করা থাকতে হবে।

    এরপর প্রথম কাজ plugin folder এর মধ্যেই আরেকটা ফোল্ডার তৈরি করবেন যার নাম দিবেন elementor-addon এরপর এর মধ্যে একটা ফাইল তৈরি করবেন যেখানে আপনার addon টা register করবেন। ফাইল টার নাম দিবেন elementor-addon.php

    এবার আপনার ফাইলের মধ্যে আপনার যে কয়টা widgets লাগবে সে গুলো register করতে পারেন তবে এখানে প্রথমেই আপনাকে আরেকটা প্লাগিনের structure follow করতে হবে। মানে একটা প্লাগিন বানিয়ে সেটা কে active করতে হবে।

    তারমানে widget development করতে হলে আপনাকে wordpress theme development ,plugin development সম্পর্কে ভাল ধারনা থাকতে হবে। তো একটা প্লগিন বা থিম এর header লিখে ফেলি।

    <?php
/**
 * Plugin Name: Elementor Addon
 * Description: Simple my custom widgets for Elementor.
 * Version:     1.0.0
 * Author:      Rakibul Islam
 * Author URI:  http://rakibulislam33.github.io/
 * Text Domain: elementor-addon
 */

    এবার আপনার কাজ হলো আপনার custom widgets কে এখানে register করা ।

    function register_my_custom_widget( $widgets_manager ) {

    require_once( __DIR__ . '/widgets/my-custom-widget-1.php' );//আপনার উইজেড এর ফাইল এখানে দেখিয়ে দিতে হবে ।

    $widgets_manager->register( new \Elementor_My_Custom_Widget_1() ); //যে নামে এখানে আপনার উইজেড এখানে রেজিস্টার করা হলো সেটাই আপনার উইজেড ফাইলের ক্লাস নাম হবে ।
}
add_action( 'elementor/widgets/register', register_my_custom_widget);

    এবার আমার আপনার পরিচিত সেই action হুক এর মাধ্যমে সেটাকে add করে দিব।

    এবার আপনার উইজেড ফাইলের মধ্যে এবার আপনার প্রয়োজনীয় কোড গুলো লিখবেন এবং এর জন্য প্রথমেই যেটা প্রয়োজন হবে সেটা হলো একটা php block নিয়ে এর মধ্যে একটা ক্লাস নাম দিতে হবে কারন হলো যেহেতু আপনি elementor এর ই একটা functionality extend করছেন এবং elementor এর সব কিছুই object oriented follow করে তাই elementor এর কাস্টম ক্লাস কে extend করে নতুন functionality add করতে হয় । তবে ক্লাস নাম দেওয়ার সময় অবশ্যয় একটা জিনিষ মনে রাখবেন সেটা হলো ক্যামেল ক্যাস ফলো করে লিখবেন।

    চলুন নিচে তার উদাহরন দেখে নেই।

    <?php
class Elementor_My_Custom_Widget_1 extends \Elementor\Widget_Base {

}

    আমাদের একটা ক্লাসের নাম লিখে elementor এর ক্লাস কে extends করেছি এবার আমাদের প্রয়োজনীয় function গুলো লিখতে হবে এক্ষেত্রে elementor এর default একটা structure আছে আমাদের সেই অনুযায়ী কোড গুলো লিখতে হবে যেমন কোন abstract use করেছে কি না , কি কি মেথড ব্যাবহার করেছে সব গুলো আমাদের সেই structure follow করে আগাতে হবে।

    তো এর পরেই আমাদের একটা নাম দিতে হবে।

        public function get_name() {
        return 'My_Custom_widget_1';
    }

    এরপরে আমাদের উইজেড এর টাইটেল টা লিখব। এবং সেটা translate করে দিব text-domain এর মাধ্যমে।

        public function get_title() {
        return esc_html__( 'Hello World 1', 'elementor-addon' );
    }

    এর পরে আমাদের প্রয়োজন হবে আমাদের উইজেড এর আইকনের ।

        public function get_icon() {
        return 'eicon-code';
    }

    এর পরে আমাদের প্রয়োজন হবে আমাদের উইজেড টা কোথায় কিসের মধ্যে থাকবে সেটা ডিফাইন করা যেমনঃ- basic,pro,etc

        public function get_categories() {
        return [ 'basic' ];
    }

    এরপর আমাদের প্রয়োজন হবে আমাদের উইজেড টা সহজেই খুজে পাওয়ার জন্য আমরা search করব। এবং এর জন্য প্রয়োজন হবে keywords তাই আমরা keywords গুলো দিব।

        public function get_keywords() {
        return [ 'hello', 'world' ];
    }

    এবং finally আমরা আমাদের ডিফল্ট text যেটা আমাদের উইজেড drag করে আনার সময় থাকবে সেটা দিয়ে দিব।

        protected function render() {
        ?>

        <p> this is my custom title </p>

        <?php
    }

    ব্যাস আমাদের প্রাথমিক উইজেড বানানো complete আমরা যদি এখন elementor এ গিয়ে search করি তাহলে আমরা আমাদের উইজেড কে দেখতে পাব।

    নিচে উইজেড এর পুরো কোড টা দেওয়া হলোঃ-

    <?php
class Elementor_My_Custom_Widget_1 extends \Elementor\Widget_Base {

    public function get_name() {
        return 'My_Custom_widget_1';
    }

    public function get_title() {
        return esc_html__( 'Hello World 1', 'elementor-addon' );
    }

    public function get_icon() {
        return 'eicon-code';
    }

    public function get_categories() {
        return [ 'basic' ];
    }

    public function get_keywords() {
        return [ 'hello', 'world' ];
    }

    protected function render() {
        ?>

        <p> this is my custom title </p>

        <?php
    }


}

    Follow me on Facebook: https://www.facebook.com/rakibuli33 Follow me on Linkedin:https://www.linkedin.com/in/rakibuli33/ Facebook Group:https://www.facebook.com/groups/35255...

    ]]>    <![CDATA[পিএইচপি if…else…elseif স্ট্যাটমেন্ট]]>https://blog.shikhun.net/ifelseelseifhttps://blog.shikhun.net/ifelseelseifThu, 26 Jan 2023 01:16:53 GMTPost No:32

    আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন আজকে আমরা পিএইচপি if…else…elseif এর ব্যবহার সম্পর্কে জানবো।

    আমার আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
    hashnode.com/@Labib

    PHP তে আমরা কোন variable ঘোষণা করলে তা $ চিহ্ন দিয়ে প্রকাশ করে থাকি। আমরা যদি if-else statement এর কাজ করতে যাই তাহলে আমাদের এই চিহ্ন নিয়ে কাজ করতে হবে। কোন উদাহরন দেওয়ার আগে আমরা একটু if-else বিষয় টা বুঝে নেই।

    পিএইচপি ফাইল রান করার ক্ষেত্রে আমাদের অনেক condition থাকতে পারে if-else এর মাধ্যমে আমরা সেই condition গুলো প্রকাশ করতে পারি এবং প্রিন্ট করতে পারি।

    < ?php
 $t = date("H");            /*variable ঘোষণা করেছি */

    if ($t < "20")              /*এর মাধ্যমে আমরা শর্ত দিয়ে দিয়েছি*/
 {
 echo "Have a good day!";   /*এবং শর্ত যদি মিলে তাহলে তা প্রিন্ট করবে */
 }
 ?>

    যদি আমরা if এর সাথে else ব্যবহার করি তাহলে দেখুন

    < ?php
 $t = date("H");          /*variable ঘোষণা করেছি */

    if ($t < "20")            /*এর মাধ্যমে আমরা শর্ত দিয়ে দিয়েছি*/
 {
 echo "Have a good day!"; /*এবং শর্ত যদি মিলে তাহলে তা প্রিন্ট করবে */
 }
 else {
 echo "Have a good night!";/*যদি শর্ত না মিলে তাহলে এটা প্রিন্ট হবে*/
 }

     অনেক সময় অনেকগুলো if-else ব্যবহার করতে হতে পারে।

      $t = date("H");   /*এই কোড এর মাধ্যমে খুঁজে পাবে দিনের ঘণ্টা*/

    if ($t < "10")      /*প্রথম শর্ত দেওয়া হল*/ {
 echo "Have a good morning!";/*শর্ত মিললে এটি প্রকাশ করবে।*/
 } elseif ($t < "20")/*যদি না মিলে তাহলে দ্বিতীয় শর্ত প্রকাশ করা হোল*/ {
 echo "Have a good day!"/*দ্বিতীয় শর্ত মিললে এটা প্রকাশ করবে। */;
 } else {
 echo "Have a good night!/*যদি কোনটাই না মিলে তাহলে এটি প্রিন্ট করবে।*/";
 }
 ?>

    নোটপ্যাড ওপেন করে এই example টুকু টাইপ করে ফাইল টি সেভ করুন if-else.php extension দিয়ে। আপনার ফাইল টি localhost > htdocs> test ফোল্ডার এর ভিতর রাখুন। ব্রাউজার ওপেন করে এড্রেস বারে লিখুন localhost/test/if-ese.php. Go বাটন এ ক্লিক করলে একটি ফলাফল আপনি খুজে পাবেন।

    ]]>    <![CDATA[PHP Operator]]>https://blog.shikhun.net/php-operatorhttps://blog.shikhun.net/php-operatorTue, 24 Jan 2023 02:08:22 GMTPost No:31

    আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন আজকে আমরা পিএইচপি PHP Operator এর ব্যবহার সম্পর্কে জানবো।

    আমার আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
    hashnode.com/@Labib

    ভেরিয়েবল এবং মুল্যের উপর অপারেশন সম্পাদন করতে অপারেটর ব্যবহার করা হয়।

    পিএইচপি অপারেটরকে নিম্নলিখিত গ্রুপ এ ভাগ করা যায়:

    • গাণিতিক অপারেটর

    • অ্যাসাইনমেন্ট অপারেটর

    • তুলনা অপারেটর

    • বর্ধিত / হ্রাস অপারেটার

    • লজিক্যাল অপারেটর

    • স্ট্রিং অপারেটর

    • এরে অপারেটর

    পিএইচপি গাণিতিক অপারেটর

    পিএইচপি গাণিতিক অপারেটর যেমন উপরন্তু, বিয়োগ, গুণ, ইত্যাদি হিসাবে সাধারণ আঙ্কিক অপারেশন, সঞ্চালন সাংখ্যিক মান সঙ্গে ব্যবহার করা হয়।

    অপারেটর

    নাম

    উদাহরণ

    ফলাফল

    +

    সংযোজন

    $x + $y

    $ X এবং $ y এর যোগফল

    -

    বিয়োগ

    $x - $y

    $ X ও $ Y এর পার্থক্য

    গুণ

    $x $y

    $ X এবং $ X এর গুণ

    /

    ভাগ

    $x / $y

    $ x এবং $ y এর ভাগফল

    %

    বাকি

    $x % $y

    $ x এর ভাগফল

    সূচকীয়

    $x $y

    $ x এর পাওয়ার $ y এর ফলাফল

    পিএইচপি অ্যাসাইনমেন্ট অপারেটর

    পিএইচপি অ্যাসাইনমেন্ট অপারেটর ভ্যারিয়েবল এর মান লেখার জন্য সংখ্যাগত মান এর সাথে ব্যবহার করা হয়।
    পিএইচপি মৌলিক অ্যাসাইনমেন্ট অপারেটর হচ্ছে "=" । এটা বাম operand এর মান ডান operand এর মান দ্বারা পরিবর্তিত হয়।

    অ্যাসাইনমেন্ট

    হিসাবে একই ...

    বিবরণ

    x = y

    x = y

    বাম operand এর মান ডান দিকের মানের সমান

    x += y

    x = x + y

    সংযোজন

    x -= y

    x = x - y

    বিয়োগ

    x = y

    x = x y

    গুণ

    x /= y

    x = x / y

    ভাগ

    x %= y

    x = x % y

    ভাগশেষ

    তুলনা অপারেটর

    পিএইচপি তুলনা অপারেটর দুটি মান (সংখ্যা বা স্ট্রিং) এর মধ্যে তুলনা করতে ব্যবহৃত হয়:

    অপারেটর

    নাম

    উদাহরণ

    ফলাফল

    ==

    সমান

    $x == $y

    $ x ও $ y সমান হলে TRUE প্রদান করে

    ===

    অভিন্ন

    $x === $y

    $ x ও $ y সমান এবং একই টাইপের হলে TRUE প্রদান করে

    !=

    সমান না

    $x != $y

    $x, $y এর সমান না হলে TRUE প্রদান করে

    <>

    সমান না

    $x <> $y

    $x, $y এর সমান না হলে TRUE প্রদান করে

    !==

    অভিন্ন নয়

    $x !== $y

    $ x ও $ y সমান না হলে অথবা একই টাইপের না হলে TRUE প্রদান করে

    >

    তার চেয়ে অনেক বেশী

    $x > $y

    $x, $y এর থেকে বড় হলে TRUE প্রদান করে

    <

    কম

    $x < $y

    $x, $y এর থেকে ছোট হলে TRUE প্রদান করে

    >=

    এর চেয়ে বড় বা সমান

    $x >= $y

    $x, $y এর থেকে বড় অথবা সমান হলে TRUE প্রদান করে

    <=

    এর চেয়ে কম বা সমান

    $x <= $y

    $x, $y এর থেকে ছোট অথবা সমান হলে TRUE প্রদান করে

    **বর্ধিত / হ্রাস অপারেটার PHP Increment / Decrement Operators

    **

    পিএইচপি বৃদ্ধি অপারেটরদের একটি ভেরিয়েবল এর মান বৃদ্ধি করতে ব্যবহার করা হয়।

    পিএইচপি হ্রাস অপারেটরদের একটি ভেরিয়েবল এর মান হ্রাস করতে ব্যবহার করা হয়।

    অপারেটর

    নাম

    বর্ণনা

    ++$x

    প্রাক-বৃদ্ধি

    $x এর মান এক বৃদ্ধি করে, তারপর $x এর মান প্রদান করে

    $x++

    পরবর্তীতে-বৃদ্ধি

    $x এর মান প্রদান করে, তারপর $x এর মান এক বৃদ্ধি করে

    --$x

    প্রাক-হ্রাস

    $x এর মান এক হ্রাস করে, তারপর $x এর মান প্রদান করে

    $x--

    পরবর্তীতে-হ্রাস

    $x এর মান প্রদান করে, তারপর $x এর মান এক হ্রাস করে

    লজিক্যাল অপারেটর

    পিএইচপি লজিক্যাল অপারেটর শর্তাধীন বিবৃতি একত্রিত করতে ব্যবহার করা হয়।

    অপারেটর

    নাম

    উদাহরণ

    ফলাফল

    and

    And

    $x and $y

    সত্য যদি $x এবং $y উভয়ই সত্য হয়

    or

    Or

    $x or $y

    সত্য যদি $x অথবা $y এর যেকোনটি সত্য হয়

    xor

    Xor

    $x xor $y

    সত্য যদি $x অথবা $y সত্য হয়, কিন্তু উভয়ই সত্য না হয়

    &&

    And

    $x && $y

    সত্য যদি $x এবং $y উভয়ই সত্য হয়

    ||

    Or

    $x || $y

    সত্য যদি $x বা $y সত্য হয়

    !

    Not

    !$x

    সত্য যদি $x সত্য না হয়

    স্ট্রিং অপারেটর

    পিএইচপি এ দুটি অপারেটর আছে যাদেরকে বিশেষভাবে স্ট্রিং এর জন্য ডিজাইন করা হয়েছে।

    অপারেটর

    নাম

    উদাহরণ

    ফলাফল

    .

    সংযুক্তকরণ

    $txt1 . $txt2

    $txt1 এবং $txt2 কে সংযুক্ত করে

    .=

    সংযুক্তকরণের অ্যাসাইনমেন্ট

    $txt1 .= $txt2

    $txt2 কে $txt1 এর সাথে যুক্ত করে

    পিএইচপি অ্যারে অপারেটর

    পিএইচপি অ্যারে অপারেটর অ্যারেগুলোর মধ্যে তুলনা করতে ব্যবহার করা হয়।

    অপারেটর

    নাম

    উদাহরন

    ফলাফল

    +

    মিলন

    $x + $y

    $x এবং $y এর মিলন

    ==

    সমতা

    $x == $y

    True প্রদান করে যদি $x এবং $y এর একই কী / মান জোড়া থাকে

    ===

    পরিচিতি

    $x === $y

    True প্রদান করে যদি $x এবং $y এর একই ক্রম এবং প্রকার অনুসারে কী/মান জোড়া থাকে

    !=

    অসাম্য

    $x != $y

    True প্রদান করে যদি $x, $y এর সমান না হয়

    <>

    অসমতা

    $x <> $y

    True প্রদান করে যদি $x, $y এর সমান না হয়

    !==

    অ-পরিচয়

    $x !== $y

    True প্রদান করে যদি $x, $y এর সাথে পরিচিত না হয়

    ]]>    <![CDATA[পিএইচপি Strings, Constants]]>https://blog.shikhun.net/strings-constantshttps://blog.shikhun.net/strings-constantsSat, 21 Jan 2023 20:37:06 GMTPost No:30

    আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন আজকে আমরা পিএইচপি Strings, Constants এর ব্যবহার সম্পর্কে জানবো।

    আমার আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
    hashnode.com/@Labib

    যে কোন প্রুগ্রামিং ল্যাঙ্গুয়েজে স্ট্রিং এর উপর পরিষ্কার ধারনা থাকাটা খুবয় জরুরি। একটা স্ট্রিং তৈরি হয় এক বা একাধিক ক্যারেক্টার মিলে । সোজা কথায় স্ট্রিং হচ্ছে ক্যারেক্টারের সমষ্টি ।

    যেমন “Hello World” হচ্ছে একটি স্ট্রিং।

    পিএইচপি স্ট্রিং ফাংশন

    পিএইচপিতে স্ট্রিং মেনিপুলেট করার অনেক ফাংশন রয়েছে। নিচে কিছু কমন ফাংশনের বর্ণনা দেওয়া হয়েছে।

    স্ট্রিং এর দৈর্ঘ্য (number of characters) বের করা

    strlen() ফাংশনের মাধ্যমে স্ট্রিং এর দৈর্ঘ্য বের করতে হয়, নিচে উদাহরন দেওয়া হল।
    উদাহরণঃ

    < ?php
 $text = “Hello World!”
 echo strlen($text); // outputs 12
 ?>

    এই কোডটার আউটপুট হবে 12

    স্ট্রিং এর ওয়ার্ড এর সংখ্যা বের করা

    স্ট্রিং এর ওয়ার্ড এর সংখ্যা বের করার জন্য str_word_count() ফাংশনটা ব্যাবহার করা হয়
    উদাহরণঃ

    < ?php
 $text = “Hello World!”
 echo str_word_count($text);// outputs 2
 ?>

    এই কোডটার আউটপুট হবে 2

    স্ট্রিং রিভার্স করা

    strrev()ফাংশনের মাধ্যমে একটি স্ট্রিং কে রিভার্স করা যায়।
    উদাহরণঃ

    < ?php
 echo strrev("Hello world!"); // outputs !dlrow olleH
 ?>

    আউটপুট হবে !dlrow olleH।

    স্ট্রিং এ নির্দিষ্ট একটা টেক্সট কোজে বের করা

    strpos()ফাংশন এর মাধ্যমে এই কাজটি করা হয়।
    উদাহরণঃ

    < ?php
 echo strpos("Hello world!", "world"); // outputs 6
 ?>

    আউটপুট হবে 6 যেহেতু "Hello world!" এ “world” এর পজিশন 6।

    স্ট্রিং এ টেক্সট রিপ্লেস করাঃ
    এই কাজটি করতে হয় str_replace() ফাংশনের মাধ্যমে।
    উদাহরণঃ

    < ?php
 echo str_replace("world", "Dolly", "Hello world!"); // outputs Hello Dolly!
 ?>

    এই কোডটির আউটপুট হবে
    Hello Dolly!

    কনস্টান্ট হচ্ছে এমন একটি identifier যেইটা ভেরিয়েবলের মতই কাজ করে তবে ডিফারেন্স হচ্ছে ভেরিয়েবলের মান বিভিন্ন সময় বিভিন্ন রকম হয় কিন্তু কনস্টান্ট একবার ডিফাইন করা হলে পুরো স্ক্রিপ্টে আর পরিবর্তন হয় না।

    একটি ভ্যালিড কনস্টান্টের নাম আরম্ভ করতে হয় লেটার অথবা আন্ডারস্কোর ক্যারেক্টার দিয়ে। এক্ষেত্রে মনে রাখা জরুরি যে কনস্টান্টের নামের আগে কোন $ সাইন ব্যাবহার করা হয় না। প্রচলিত নিয়ম অনুযায়ী কনস্টান্ট লিখতে হয় আপারকেস লেটার দিয়ে।
    একটি কনস্টান্ট বানানোর জন্য পিএইচপির define() ফাংশন ব্যাবহার করা হয়। নিচে উদাহরণ দিয়ে বিষয়টি বোজানো হয়েছে।

    define() ফাংশনটি দেখতে নিচের মত

    define(name, value, case-insensitivity)

    প্যারামিটারগুলুর বর্ণনা নিচে দেওয়া হল

    • name: এইটি কনস্টান্টের নামে নির্দেশ করে।

    • value: এইটি কনস্টান্টের মান নির্দেশ করে।

    case-insensitivity

    এইটি নির্দেশ করে কনস্টান্টের মান কেস সেনসিটিভ কিনা। এইটা ডিফল্ট হিসেবে false থাকে।
    উদাহরণ

    < ?php
 define("GREETING", "Welcome to PHP!");
 echo GREETING;
 ?>

    এই কোডটি GREETING নামের একটি কন্সটান্ট তৈরি করে যার মান হচ্ছে “Welcome to PHP!”।
    কনস্টান্ট অটোমেটিক্যালি গ্লূবাল অর্থাৎ এইটি পুরো স্ক্রিপ্টে ব্যাবহার করা যেতে পারে। নিচে একটি উদাহরণ দিয়ে বিষয়টি বোঝানো হয়েছে।

     < ?php
 define("GREETING", "Welcome to PHP!");

    function showGreeting() {
 echo GREETING;
 }

    showGreeting();
 ?>

    উপরের উদাহরণে GREETING কনস্টান্টটি showGreeting() ফাংশনের বাইরে সংজ্ঞায়িত করার পরেও, ফাংশনের ভিতরে এইটি ব্যবহার করা যাচ্ছে।

    ]]>    <![CDATA[পিএইচপি ডাটা টাইপ (PHP Data Types)]]>https://blog.shikhun.net/php-data-typeshttps://blog.shikhun.net/php-data-typesFri, 20 Jan 2023 15:56:27 GMTPost No:29

    আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন আজকে আমরা পিএইচপি ডাটা টাইপ (PHP Data Types) এর ব্যবহার সম্পর্কে জানবো।

    আমার আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
    hashnode.com/@Labib

    ভেরিয়েবল বিভন্ন রকমের ডাটা স্টোর করতে পারে, এবং বিভন্ন ডাটা টাইপ বিভন্ন রকম কাজ করে। পিএইচপি নিচে উল্লেখিত ডাটা টাইপ গুলো সাপোর্ট করে।

    স্ট্রিং (String):

    স্ট্রিং তৈরি হয় এক বা একাধিক ক্যারেক্টার মিলে । সোজা কথায় স্ট্রিং হচ্ছে ক্যারেক্টারের সমষ্টি । যেমনঃ “Hello World” হচ্ছে একটি স্ট্রিং।
    ডাবল কিংবা সিঙ্গল কোট ব্যবহার করে স্ট্রিং (string) ভেরিয়েবল তৈরি করতে হয়।
    উদাহরণঃ

     <?php 
 $x = "Hello world!";
 $y = 'Hello world!';

 echo $x;
 echo "<br>"; 
 echo $y;
 ?>

    এইখানে $x এবং y হল দুটি string টাইপ ভেরিয়েবল

    ইন্টিজার (integer)

    ইন্টিজার মানে হল পূর্ণ সংখ্যা । এইটি -2,147, 483, 648 এবং +2, 147, 483, 647 এর মধ্যে যে কোন একটি সংখ্যা হতে পারে। নিচের উদাহরণে $x হল একটি ইন্টিজার (integer) টাইপের ভেরিয়েবল।

    <?php 
 $x = 5985;
 var_dump($x);
 ?>

    var_dump() ফাংশনটি ডাটা টাইপ এবং মান রিটার্ন করে।

    ফ্লোটিং পয়েন্ট (Float)

    ফ্লোট হল একটি decimal point নাম্বার। নিচের উদাহরণে $x হল একটি ফ্লোট টাইপের ভেরিয়েবল।

    <?php 
 $x = 10.365;
 var_dump($x);
 ?>

    বুলিয়ান (boolean)

    কোন কিছু সত্য না মিথ্যা তা প্রকাশ করার জন্য বুলিয়ান ডাটা টাইপটি ব্যাবহার করা হয়।বুলিয়ান এর দুইটি মান হতে পারে – true অথবা false
    উদাহরনঃ

    $x = true
$y = false

    এ্যারে (Array)

    একটি সিঙ্গেল ভেরিয়েবলে একের অধিক মান স্টোর করার জন্য এ্যারে ব্যাবহার করা হয়। নিচের উদাহরণে $cars হল একটি এ্যারে।

    <?php 
 $cars = array("Volvo","BMW","Toyota");
 var_dump($cars);
 ?>

    এইখানে $cars এ্যারেতে তিনটি স্ট্রিং টাইপের মান রয়েছেঃ
    Volvo, BMW এবং Toyota।

    অবজেক্ট টাইপ (Object)

    কোন নির্দিষ্ট একটি ক্লাসের instance কে অবজেক্ট বলা হয়। অবজেক্ট হচ্ছে ভেরিয়েবল এবং ফাংশন এর সমস্টি। অবজেক্ট ইন্সট্যান্স তৈরি করতে হয় new কিওয়ার্ডটি ব্যবহার করে।
    উদাহরনঃ

    <?php
 class Car {
     function Car() {
         $this->model = "VW";
     }
 }

 // create an object
 $herbie = new Car();

 // show object properties
 echo $herbie->model;
 ?>

    নাল টাইপ (Null)

    নাল একটি বিশেষ ধরণের ডাটা টাইপ যেটার মান হতে পারে শুধুমাত্র একটি- এবং এইটি হল null । একটি ভেরিয়েবলে কোন মান এসাইন করা না হলে ওইটাকে নাল ডাটা টাইপের ভেরিয়েবল বলা হয়।
    উদাহরনঃ

    <?php
    $x = "Hello world!";
    $x = null;
    var_dump($x);
    ?>

    এইখানে $x হল একটি নাল টাইপের ভেরিয়েবল।

    ]]>    <![CDATA[পিএইচপি ভেরিয়েবল Echo এবং প্রিন্ট স্ট্যাটমেন্ট]]>https://blog.shikhun.net/echohttps://blog.shikhun.net/echoWed, 18 Jan 2023 17:46:22 GMTPost No:28

    আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন আজকে আমরা পিএইচপি ভেরিয়েবল Echo এবং প্রিন্ট স্ট্যাটমেন্ট এর ব্যবহার সম্পর্কে জানবো।

    আমার আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
    hashnode.com/@Labib

    ভেরিয়েবল হচ্ছে একটি স্টোরেজ এরিয়া । এইটিকে কমপিউটারের ডাটা জমা রাখার একটি অস্থায়ী বক্সের মত কল্পনা করা যায়। পিএইচপি তে ভেরিয়েবলকে ডলার চিহ্ন এবং এর পরে ভেরিয়েবলের নাম দ্বারা প্রদর্শন করা হয়। নিচে একটি উদাহরণ দিয়ে বিষয়টি বোজানো হয়েছে।

    < ?php
 $text = "Hello World!";
 $num1 = 5;
 $num2 = 10.5;
 ?>

    উপরের স্টেটমেন্টটা এক্সিকিউট হওয়ার পর ভেরিয়েবল $text এ থাকবে “Hello world!”, ভেরিয়েবল $num1 এ থাকবে 5 এবং ভেরিয়েবল $num2 এ থাকবে 10.5.

    ভেরিয়েবল লেখার সময় আমাদের কিছু নিয়ম অনুসরণ করতে হবে, যেমনঃ

     ভেরিয়েবল সবসময় ডলার চিহ্ন দ্বারা আরম্ভ হবে এবং এর পরে ভেরিয়েবলের নাম লিখতে হবে।

     ভেরিয়েবলের নাম অবশ্যই লেটার অথবা আণ্ডারস্কোর ক্যারেকটার দ্বারা আরম্ভ করতে হবে। কখনো নাম্বার দিয়ে আরম্ভ করা যাবে না।

     আলফা-নিউমেরিক এবং আণ্ডারস্কোর ক্যারেকটার (A-z,0-9,-) ছারা অন্য কিছু ভেরিয়েবলে ব্যাবহার করা যাবে না।

     পিএইচপি তে ভেরিয়েবল কেস সেনসিটিভ । অর্থাৎ $name এবং $NAME দুইটা ভিন্ন ভেরিয়েবল হিসেবে বিবেচিত হবে।

    ভেরিয়েবলের ডাটা আঊটপূটে দেখানোর জন্য পিএইচপি এর echo স্টেটমেন্টটা ব্যাবহার করতে হবে। নিচে একটি উদাহরণ দিয়ে বিষয়টি বোজানো হয়েছে।

    < ?php
 $myName = "john";
 $myAge = 40;
 echo "Hello, there. My name is $myName and I am $myAge years old"
 ?>

    এই কোডটার আঊটপূট হবে নিচের মত

    Hello, there. My name is john and I am 40 years old

    Php তে ফলাফল পাওয়ার জন্য আমাদের echo বা print ব্যবহার করতে হয়। পিএইচপি এর প্রায় সব উদাহরন এ print বা echo এর ব্যবহার দেখতে পাওয়া যায়। কমবেশি print এবং echo এর ফাংশন প্রায় একই। তবে print এর তুলনায় echo একটু তারাতারি কাজ করে।
    Echo statement ব্যবহার করে পিএইচপি তে একটি উদাহরন দেখা যাক

    <?php
 echo "<h2>PHP is Fun!</h2>";
 echo "Hello world!<br>";
 echo "I'm about to learn PHP!<br>";
 echo "This ", "string ", "was ", "made ", "with multiple parameters.";
 ?>

    এটি যদি রান করি তাহলে ফলাফল দেখা যাবে

    PHP is Fun!

    Hello world!
    I'm about to learn PHP!
    This string was made with multiple parameters.

    ]]>    <![CDATA[ক্লাস নং-২০(পার্ট-১৯) - Cash payment refund ,- Stripe payment refund through transaction_id,]]>https://blog.shikhun.net/cash-payment-refund-stripe-payment-refund-through-transactionidhttps://blog.shikhun.net/cash-payment-refund-stripe-payment-refund-through-transactionidMon, 16 Jan 2023 18:24:59 GMTআজকের ক্লাসে আমরা আমাদের - Cash payment refund through transaction_id,- Stripe payement refund through transaction_id নিয়ে আলোচনা করব। এছাড়াও আমাদের payment gateway তে payment করার সময় কার্ড নং এবং আমাদের অন্যান্য এরর গুলো সুন্দর মত শো করাব।

    তো প্রথমেই আমরা refund policy তে যায়। এবং এর জন্য আমরা database migration এ যায়। এবং আগের যে টেবিল আছে সেখানে আমরা transaction id column add করি।

     Schema::create('payments', function (Blueprint $table) {
            $table->id();
            $table->float('amount');
            $table->unsignedBigInteger('invoice_id');
            $table->string('transaction_id');
            $table->timestamps();

            $table->foreign('invoice_id')->references('id')->on('invoices')->onDelete('cascade');
        });

    এবার আমাদের এই payment create admission যে livewire component আছে সেখানে payment create এর মধ্যে আমরা দিয়ে দিই।

    if(!empty($this->payment)) {
            Payment::create([
                'amount' => $this->payment,
                'invoice_id' => $invoice->id,
                'transaction_id' => Str::random(8),
            ]);
        }

    এবং এই transaction id টা আমাদের যে payment model আছে সেখানে fillable property তে দিয়ে দিতে হবে।

     protected $fillable =[
        'amount',
        'invoice_id',
        'transaction_id'
    ];

    এবার আমরা একবার আমাদের Database এ migration চালিয়ে নেব যেহেতু আমাদের migration এ change করা হয়েছে।

    এবার আমরা student admission করিয়ে আমাদের invoice create করে refund policy চেক করতে পারব।

    আশা করি বুঝতে পেরেছেন।

    এখন আমরা যে বিষয় টা নিয়ে কথা বলব সেটা হলো আমরা যদি admission section এ গিয়ে email দিয়ে লিড খুজে admission করানোর সময় যদি না পায় বা ভূল email দেই তাহলে সেখানে আমাদের new admission form আসবে যেখানে

    • -name

    • -email

    • -password

    দিলে নতুন করে admission course select করে payment করার অপশন আসবে আমরা সেটা করব।

    তো এর জন্য প্রথমেই আপনাকে livewire এর admission file এ গিয়ে সেখানে fillable property নিতে হবে।

     public $name;
    public $email;
    public $password;
    public $notFound = false;
    public $user_id;

    এরপর search function এ সেগুলো দিয়ে define করতে হবে।

      public function search() {
        $this->notFound = true;
        $this->course_id = null;
        $this->lead_id = null;
        $this->selectedCourse = null;
        $this->leads = Lead::where('name', 'like', '%' . $this->search . '%')
            ->orWhere('email', 'like', '%' . $this->search . '%')
            ->orWhere('phone', 'like', '%' . $this->search . '%')
            ->get();
    }

    এরপর আমাদের student কে নতুন করে add করে নিতে হবে।

    public function addStudent(){
        $this->validate([
            'name'=>'required',
            'email'=>'required|email',
            'password'=>'required'
        ]);
        $user = User::create([
            'name' => $this->name,
            'email' => $this->email,
            'password' => bcrypt($this->password),
        ]);

        $this->user_id = $user->id;

    }
    public function studentAdmit(){

        $invoice = Invoice::create([
            'due_date' => now()->addDays(7),
            'user_id' => $this->user_id,
        ]);

        InvoiceItem::create([
            'name' => 'Course: ' . $this->selectedCourse->name,
            'price' => $this->selectedCourse->price,
            'quantity' => 1,
            'invoice_id' => $invoice->id,
        ]);

        $this->selectedCourse->students()->attach($this->user_id);

        if (!empty($this->payment)) {
            Payment::create([
                'amount' => $this->payment,
                'invoice_id' => $invoice->id,
                'transaction_id' => Str::random(8),
            ]);
        }



        $this->selectedCourse = null;
        $this->course_id = null;
        $this->lead_id = null;
        $this->search = null;
        $this->leads = [];
        $this->notFound = false;


        flash()->addSuccess('Admission successful');
    }

    এবার আমাদের admission blade file এ elseif দিয়ে নতুন করে form নিয়ে আসতে হবে।

    @elseif(count($leads) === 0 && $notFound)
        <form class="mt-6" wire:submit.prevent="addStudent">
            <div class="mt-6 mb-3 w-full flex items-center gap-4">
                <div>
                    @include('components.form-field', [
                        'name' => 'name',
                        'label' => 'Name',
                        'type' => 'text',
                        'placeholder' => 'Enter name',
                        'required' => 'required',
                    ])
                </div>
                <div>
                    @include('components.form-field', [
                        'name' => 'email',
                        'label' => 'Email',
                        'type' => 'email',
                        'placeholder' => 'Enter Email',
                        'required' => 'required',
                    ])
                </div>

                <div>
                    @include('components.form-field', [
                        'name' => 'password',
                        'label' => 'Password',
                        'type' => 'password',
                        'placeholder' => 'Enter password',
                        'required' => 'required',
                    ])
                </div>

            </div>

          <div class="mt-3">
              @if (empty($user_id))
                  @include('components.wire-loading-btn')
              @endif
          </div>
        </form>

        <form class="mt-4" wire:submit.prevent="studentAdmit">
            @if(!empty($user_id))
                <div class="mb-4">
                    <select wire:change="courseSelected" wire:model.lay="course_id" class="lms-input">
                        <option value="">Select course</option>
                        @foreach($courses as $course)
                            <option value="{{$course->id}}">{{$course->name}}</option>
                        @endforeach
                    </select>
                </div>
            @endif

            @if(!empty($selectedCourse))
                <p class="mb-4">Price: ${{number_format($selectedCourse->price, 2)}}</p>

                <div class="mb-4">
                    <input wire:model.lazy="payment" type="number" step=".01" max="{{number_format($selectedCourse->price, 2)}}" class="lms-input" placeholder="Payment now">
                </div>

                @include('components.wire-loading-btn')
            @endif
        </form>

    ব্যাস আমাদের কাজ complete .

    discord link: discord.gg/9qWUUbQ3

    facebook group :web.facebook.com/groups/1661735757554627

    Happy Learning

    Rakibul Islam

    ]]>    <![CDATA[ক্লাস নং-২০(পার্ট-১৮) payment gateway stripe, and their services]]>https://blog.shikhun.net/payment-gateway-stripe-and-their-serviceshttps://blog.shikhun.net/payment-gateway-stripe-and-their-servicesMon, 16 Jan 2023 18:15:54 GMTআজকের ক্লাসে মূলত আমাদের payment gateway stripe নিয়ে আলোচনা হবে গতক্লাসে এটা নিয়ে কথা হয়েছে কিন্তু আমরা আমাদের invoice করে এবং payment gateway and theiir services নিয়ে প্রাথমিক আলোচনা করেছিলাম আজকে আমরা সেটা কে ভাল ভাবে জানব এবং ব্যাবহার করব।

    তো প্রথমেই আমরা আমাদের project এ stripe install করে নেই।

    composer require stripe/stripe-php

    এরপর আমরা আমাদের show.blade.php file এ একটা ফর্ম নিয়ে সেখানে payment এর অপশন তৈরি করি।

    <form method="post" action="{{route('stripe-payment')}}"> @csrf
                        <div class="flex mb-4">
                            <div class="w-full">
                                <input value="4242424242424242" name="card_no" type="number" class="lms-input" placeholder="Card number">
                            </div>
                            <div class="min-w-max ml-4">
                                <input value="12/30" name="card_expiry_date" type="text" class="lms-input" placeholder="Expiry month/year">
                            </div>
                            <div class="min-w-max ml-4">
                                <input value="232" name="card_ccv" type="text" class="lms-input" placeholder="CCV">
                            </div>
                            <div class="min-w-max ml-4">
                                <input name="amount" type="number" class="lms-input" value="{{number_format($invoice->amount()['due'], 2)}}" placeholder="Amount">
                            </div>
                            <input type="hidden" name="invoice_id" value="{{$invoice->id}}">
                        </div>
                        <button type="submit" class="lms-btn">Pay Now</button>
 </form>

    এবার আমাদের একটা controller make করা লাগবে যেখানে আমাদের payment এর কাজ গুলো করব।

    php artisan make:controller StripePaymentController

    এবার আমাদের একটা post রাউট তৈরি করা লাগবে।

    Route::post('/stripe-payment', [StripePaymentController::class, 'stripePayment'])->name('stripe-payment');

    এবার আমাদের controller এর মধ্যে গিয়ে সেখানে আমাদের প্রয়োজনীয় কোড গুলো লিখি।

    public function stripePayment(Request $request) {

        $validator = Validator::make($request->all(), [
            'card_no' => 'required',
            'card_expiry_date' => 'required',
            'card_ccv' => 'required',
            'amount' => 'required',
            'invoice_id' => 'required|integer',
        ]);

        // validator fails
        if($validator->fails()) {
            flash()->addWarning('Please fill all the fields');
        } else {
            $stripe = new StripeClient(env('STRIPE_SECRET'));

            // try catch stripe token
            try {
                $token = $stripe->tokens->create([
                    'card' => [
                        'number' => $request->card_no,
                        'exp_month' => explode('/', $request->card_expiry_date)[0],
                        'exp_year' => explode('/', $request->card_expiry_date)[1],
                        'cvc' => $request->card_ccv,
                    ],
                ]);
            } catch (\Exception $e) {
                flash()->addWarning('Invalid card details');
                return redirect()->back();
            }

            // dd('test');

            $charge = $stripe->charges->create([
                'amount' => intval($request->amount * 100),
                'currency' => 'usd',
                'description' => 'Payment for invoice #' . $request->invoice_id,
                'source' => $token->id,
            ]);

            // dd($charge);
            Payment::create([
                'amount' => $request->amount,
                'invoice_id' => $request->invoice_id,
                'transaction_id' => $charge->id,
            ]);

            flash()->addSuccess('Payment successful');
        }
        return redirect()->back();
    }

    এবং আমাদের stripe website এ গিয়ে একটা accaount make করতে হবে।এবং developer option mood on করলে সেখানে একটা secret key পাওয়া যাবে সেটা কপি করে নিয়ে env file এর নিচে paste করতে হবে' STRIPE_SECRET=sk_test_51MQaveCXCmINpP8TXp2F6DW8N7lLqwLCxGxti7kA80QdT00zmLkc3Cf(এমন একটা কোড তবে এটা দিয়েন না কাজ করবে না ।)

    এবং আমাদের invoice-edit.blade.php file এ গিয়ে আমরা নিচের কোড গুলো দিতে পারি,।

    <div>
    <h2 class="font-bold text-green-700  ">Information</h2>
    <p>Invoice to: {{$invoice->user->name}}</p>

    <table class="table-auto w-full mb-4">
        <tr>
            <th class="lms-cell-border text-left">Name</th>
            <th class="lms-cell-border">Price</th>
            <th class="lms-cell-border">Quantity</th>
            <th class="lms-cell-border text-right">Total</th>
        </tr>

        @foreach($invoice->items as $item)
        <tr>
            <td class="lms-cell-border">{{$item->name}}</td>
            <td class="lms-cell-border text-center">${{number_format($item->price, 2)}}</td>
            <td class="lms-cell-border text-center">{{$item->quantity}}</td>
            <td class="lms-cell-border text-right">${{number_format($item->price * $item->quantity, 2)}}</td>
        </tr>
        @endforeach
        <tr>
            <td colspan="3" class="lms-cell-border text-right">Subtotal</td>
            <td class="lms-cell-border text-right">${{number_format($invoice->amount()['total'], 2)}}</td>
        </tr>
        <tr>
            <td colspan="3" class="lms-cell-border text-right">Paid</td>
            <td class="lms-cell-border text-right">- ${{number_format($invoice->amount()['paid'], 2)}}</td>
        </tr>
        <tr>
            <td colspan="3" class="lms-cell-border text-right">Due</td>
            <td class="lms-cell-border text-right">${{number_format($invoice->amount()['due'], 2)}}</td>
        </tr>
    </table>




    @if($enableAddItem)
    <form class="mb-4" wire:submit.prevent="saveNewItem">
        <div class="flex mb-4">
            <div class="w-full">
                @include('components.form-field', [
                    'name' => 'name',
                    'label' => 'Name',
                    'type' => 'text',
                    'placeholder' => 'Item name',
                    'required' => 'required',
                ])
            </div>

            <div class="min-w-max ml-4">
                @include('components.form-field', [
                    'name' => 'price',
                    'label' => 'Price',
                    'type' => 'number',
                    'placeholder' => 'Type price',
                    'required' => 'required',
                ])
            </div>

            <div class="min-w-max ml-4">
                @include('components.form-field', [
                    'name' => 'quantity',
                    'label' => 'Quantity',
                    'type' => 'number',
                    'placeholder' => 'Type quantity',
                    'required' => 'required',
                ])
            </div>


        </div>
        <div class="flex mb-4">
            @include('components.wire-loading-btn')
            <button class=" bg-red-500 ml-4 py-2 px-4 font-bold text-white " wire:click="addNewItem" type="button">Cancel</button>
        </div>
    </form>
    @else
        <button class="px-4 py-2 bg-green-300 mt-4 mb-4" wire:click="addNewItem" class="underline">Add New Item</button>
    @endif


    <h3 class="font-bold text-lg mb-2">Payments</h3>
    <ul class="mb-4">
        @foreach($invoice->payments as $payment)
        <li>{{date('F j, Y - g:i:a', strtotime($payment->created_at))}} - ${{number_format($payment->amount, 2)}} - transaction ID: {{$payment->transaction_id}} <button wire:click="refund({{$payment->id}})" class="bg-red-500 text-white px-4 py-1 mb-2 text-xs">Refund</button></li>
        @endforeach
    </ul>
</div>

    এবার আমরা আমাদের website এ গিয়ে invoiceedit এ গিয়ে test করতে পারি।

    discord link: discord.gg/9qWUUbQ3

    facebook group :web.facebook.com/groups/1661735757554627

    Happy Learning

    Rakibul Islam

    ]]>    <![CDATA[ক্লাস নং-২০(পার্ট-১৭)- invoice single, invoice payment by stripe and others]]>https://blog.shikhun.net/invoice-single-invoice-payment-by-stripe-and-othershttps://blog.shikhun.net/invoice-single-invoice-payment-by-stripe-and-othersMon, 16 Jan 2023 18:08:36 GMTযেহেতু আমাদের প্রজেক্টের সব কিছুই livewire দিয়ে করছি তাই আমরা এটাও করার জন্য প্রথমেই একটা component make করব।

    php artisan livewire:make InvoiceEdit

    এবার আমাদের user folder এর মধ্যে যে invoice folder আছে তারমধ্যে আমাদের show.blade.php file এই ফাইলের মধ্যে আমরা আমাদের livewire যে component make করলাম সেটাকে শো করাব।

    এবার আমাদের invoice-edit blade file এ গিয়ে কোড গুলো লিখি।

    <div>
    <h2 class="font-bold text-green-700  ">Information</h2>
    <p>Invoice to: {{$invoice->user->name}}</p>

    <table class="table-auto w-full mb-4">
        <tr>
            <th class="lms-cell-border text-left">Name</th>
            <th class="lms-cell-border">Price</th>
            <th class="lms-cell-border">Quantity</th>
            <th class="lms-cell-border text-right">Total</th>
        </tr>

        @foreach($invoice->items as $item)
        <tr>
            <td class="lms-cell-border">{{$item->name}}</td>
            <td class="lms-cell-border text-center">${{number_format($item->price, 2)}}</td>
            <td class="lms-cell-border text-center">{{$item->quantity}}</td>
            <td class="lms-cell-border text-right">${{number_format($item->price * $item->quantity, 2)}}</td>
        </tr>
        @endforeach
        <tr>
            <td colspan="3" class="lms-cell-border text-right">Subtotal</td>
            <td class="lms-cell-border text-right">${{number_format($invoice->amount()['total'], 2)}}</td>
        </tr>
        <tr>
            <td colspan="3" class="lms-cell-border text-right">Paid</td>
            <td class="lms-cell-border text-right">- ${{number_format($invoice->amount()['paid'], 2)}}</td>
        </tr>
        <tr>
            <td colspan="3" class="lms-cell-border text-right">Due</td>
            <td class="lms-cell-border text-right">${{number_format($invoice->amount()['due'], 2)}}</td>
        </tr>
    </table>




    @if($enableAddItem)
    <form class="mb-4" wire:submit.prevent="saveNewItem">
        <div class="flex mb-4">
            <div class="w-full">
                @include('components.form-field', [
                    'name' => 'name',
                    'label' => 'Name',
                    'type' => 'text',
                    'placeholder' => 'Item name',
                    'required' => 'required',
                ])
            </div>

            <div class="min-w-max ml-4">
                @include('components.form-field', [
                    'name' => 'price',
                    'label' => 'Price',
                    'type' => 'number',
                    'placeholder' => 'Type price',
                    'required' => 'required',
                ])
            </div>

            <div class="min-w-max ml-4">
                @include('components.form-field', [
                    'name' => 'quantity',
                    'label' => 'Quantity',
                    'type' => 'number',
                    'placeholder' => 'Type quantity',
                    'required' => 'required',
                ])
            </div>


        </div>
        <div class="flex mb-4">
            @include('components.wire-loading-btn')
            <button class=" bg-red-500 ml-4 py-2 px-4 font-bold text-white " wire:click="addNewItem" type="button">Cancel</button>
        </div>
    </form>
    @else
        <button class="px-4 py-2 bg-green-300 mt-4 mb-4" wire:click="addNewItem" class="underline">Add New Item</button>
    @endif


    <h3 class="font-bold text-lg mb-2">Payments</h3>
    <ul class="mb-4">
        @foreach($invoice->payments as $payment)
        <li>{{date('F j, Y - g:i:a', strtotime($payment->created_at))}} - ${{number_format($payment->amount, 2)}} - transaction ID: {{$payment->transaction_id}} <button wire:click="refund({{$payment->id}})" class="bg-red-500 text-white px-4 py-2 text-xs">Refund</button></li>
        @endforeach
    </ul>
</div>

    এবং আমাদের যে component file টা আছে সেখানে নিচের কোড গুলো লিখি,।

    public $invoice_id;
    public $invoice;
    public $enableAddItem = false;
    public $name;
    public $quantity;
    public $price;

    public function mount() {
        $this->invoice = Invoice::findOrFail($this->invoice_id);
    }
    public function render()
    {
        return view('livewire.invoice-edit');
    }

    public function addNewItem() {
        $this->enableAddItem = !$this->enableAddItem;
    }

    public function saveNewItem() {
        InvoiceItem::create([
            'name' => $this->name,
            'price' => $this->price,
            'quantity' => $this->quantity,
            'invoice_id' => $this->invoice_id,
        ]);

        $this->name = '';
        $this->price = '';
        $this->quantity = '';

        $this->addNewItem();

        flash()->addSuccess('Added!');

        return redirect(route('invoice-show', $this->invoice_id));
    }

    এবং আমাদের যে controller আছে সেখানে id এর পরিবর্তে invoice গুলো পাঠিয়ে দেই।

    return view('user.invoice.show', [
            'invoice' => Invoice::findOrFail($id),
        ]);

    এবং আমাদের যে মডেল আছে সেখানে fillable property গুলো দিয়ে দেই।

    এবং আমাদের আগেই subtotal calculate করা আছে আমরা সেই কোড গুলো review করলেই বুঝতে পারব আশা করি ।আর যদি কোন কিছু মিসিং থাকে আমাদের github repository তো আছেই।

    আশা করি খুব সিম্পল ভাবেই বুঝতে পেরেছেন।

    discord link: discord.gg/9qWUUbQ3

    facebook group :web.facebook.com/groups/1661735757554627

    Happy Learning

    Rakibul Islam

    ]]>    <![CDATA[পি এইচ পি সিন্ট্যাক্স (PHP Syntax)]]>https://blog.shikhun.net/php-syntaxhttps://blog.shikhun.net/php-syntaxMon, 16 Jan 2023 17:28:58 GMTPost No:27

    আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন আজকে আমরা পি এইচ পি সিন্ট্যাক্স (PHP Syntax) এর ব্যবহার সম্পর্কে জানবো।

    আমার আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
    hashnode.com/@Labib

    পিএইচপি হলো একটি প্রোগ্রামিং ল্যাগুয়েজ যা ওয়েব ডেভেলপমেন্ট এর জন্য বহুল ব্যবহৃত।

    পিএইচপি কোড এর প্রতিটি অংশ < ?php চিহ্ন দিয়ে শুরু এবং ?> চিহ্ন দিয়ে শেষ হবে।
    এবার আপনার কোড এডিটর (নোটপ্যাড/ড্রিময়েভার বা আপনি যা ব্যাবহার করেন) খুলুন এবং নিচের মত লিখুনঃ

    < ?php
 // PHP code goes here
 ?>

    পিএইচপি কোড কে কাজ করাতে অবশ্যই ফাইলটি সেভ করার সময় .php এক্সটেনশন দিয়ে সেভ করতে হবে। যদি .html থাকে তাহলে পিএইচপি কোড execute হবেনা।

    এবার তাহলে ছোট একটা কোড লেখা যাক।

    <!DOCTYPE html>
 <html>
 <body>

 <h1>My first PHP page</h1>

 <?php
 echo "Hello World!";
 ?>

 </body>
 </html>

    উপরে লক্ষ্য করুন echo নামে একটা ফাংশন ব্যবহার করা হয়েছে যেটা দিয়ে php তে কোনো লেখা প্রদর্শন করানো হয়। তারপর লক্ষ্য করুন ";" সেমিকোলন চিহ্ন ব্যবহার করা হয়েছে। এটা দিয়ে পিএইচপি-তে কোনো লাইন শেষ বুঝনো হয়। অর্থাৎ কোনো লাইনের শেষে ; দিয়ে সেই লাইনের এক্সিকিউশন বন্ধ করা হয়। উদাহরণঃ " Hello World!"

    PHP তে কমেন্ট

    কোনো প্রোগ্রামিং লান্গুয়েজে যখন কমেন্ট বা মন্তব্য যোগ করা হয় তখন তা এক্সিকিউশন হয় না। কমেন্ট সাধারনত সাহায্যকারী হিসেবে ব্যবহৃত হয়। যাতে একটা কোড লেখা দেখে সহজে বুঝা যায় যে কোডটি কেন লেখা হয়েছে। পিএইচপি-তে সাধারনত তিন ধরনের কমেন্ট ব্যবহার করা হয়।

    উদাহরণঃ

    <!DOCTYPE html>
 <html>
 <body>

 <?php
 // This is a single-line comment

 # This is also a single-line comment

 /*
 This is a multiple-lines comment block
 that spans over multiple
 lines
 */

 // You can also use comments to leave out parts of a code line
 $x = 5 /* + 15 */ + 5;
 echo $x;
 ?>

 </body>
 </html>

    single line comment - // এই চিহ্ন দ্বারা।
    এখানে // এই চিহ্ন এর পরের This is single line comment এই লেখাটি ব্রাউজার প্রদর্শন করবে না। কারণ এইটা কমেন্ট এর মধ্যে লেখা

    multi-line comment - /* */
    এখানে # এর পরের লেখাগুলোও ব্রাউজার দেখাবে না। কারণ এটাও একটা কমেন্ট। এটাকে বলা হয় ইউনিক্সের শেল স্টাইল মন্তব্য। এই স্টাইলটা বেশি ব্যবহৃত হয় কোনো পিএইচপি কনফিগারেশন বা মান সম্পর্কিত মন্তব্য যোগ করতে।

    ]]>    <![CDATA[পি এইচ পি ইন্সটলেশন (PHPInstallation)]]>https://blog.shikhun.net/phpinstallationhttps://blog.shikhun.net/phpinstallationSun, 15 Jan 2023 20:43:10 GMTPost No:26

    আসসালামুয়ালাইকুম ,আশা করি সবাই অনেক অনেক ভালো আছেন।গত দুই তিন আমি কিছুই ব্ পোস্ট করিনি এইটার জন্যে আপনাদের কাছে আগেই ক্ষমা চেয়ে নিচ্ছি তার কারণ ছিলো আমার ল্যাপটপের যান্ত্রিক ক্রুটির জন্যে । আজকে থেকে ইনশাআল্লাহ নিয়মিত ব্লগ দেওয়ার চেষ্টা করবো আমার আগের বেসিক Html and Css ব্লগ সিরিজ টা শেষ হয়েছে ২৫ নং ব্লগ পোস্টের মাধ্যমে ।আশা করছি অনেক কিছু শিখতে পারছেন আমি যতোটুকু পারি ঠিক এতোটুকু শিখানোর ট্রাই করছি। আমার ব্লগের বাহিরে ও অনেক কিছু আছে যেগুলো আপনাদের নিজে নিজে রিসার্চ করে গুগল ইউটউবে থেকে শিকতে হবে।
    আচ্ছা যাই হোক এখন আসল কথায় আসি আজকে থেকে আমি যতোটুকু পারি এতোটুকু দিয়ে পি এইপির বেসিক একটা সিরিজ ব্লগ করবো যেটাতে আমি Php বেসিক টাকে কভার করার চেষ্টা করবো ।এই ব্লগ সিরিজটা খুব বড়ো হবে না ছোটো ছোট অংশে পোস্ট করা হবে আশা করি সবাই সাপোর্ট করবেন। আজকে এই পর্যন্তই কাজে ফিরে আসা যাক আমি এর আগে Php পরিচিত নিয়ে পোস্ট দিয়েছি ঐ ব্লগটা পরার জন্যে নিচে লিংকে ক্লিক করুন।
    https://blog.shikhun.net/php

    আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
    https://hashnode.com/@Labib

    PHP 5 ইনস্টলেশন

    PHP শিখতে গেলে আপনার নিজের পিসিতে কিংবা ওয়েব সার্ভারে এই সফটওয়্যারটি প্রয়োজন। তাই ইনস্টলেশনটা আগে শিখতে হবে।

    PHP ইনস্টল করতে আমরা যেসব ব্যবস্থা নিতে পারি:

    • PHP এবং MySQL সাপোর্ট করে এমন একটি ওয়েব হোস্টিং খুজে বের করা। কিংবা,

    • আপনার নিজের কম্পিউটারে ওয়েব সার্ভার ইনস্টল করা এবং তারপর PHP এবং MySQL ইনস্টল করা।

    আপনার ওয়েব সার্ভারে যদি আগে থেকেই PHP সাপোর্ট বিদ্যমান থাকে, তবে নতুন করে কিছু করতে হবে না। পিএইচপি এক্সটেনশনযুক্ত একটি ফাইল (*.php) তৈরী করুন এবং তা সার্ভারে আপলোড করুন। তাহলে সার্ভার এই ফাইল আপনার কাজের জন্য প্রস্তুত করে দিবে। আপনার অতিরিক্ত কোনো টুলস ইনস্টল করার প্রয়োজন হবে না। পিএইচপি একটি ফ্রি সফটওয়্যার এবং বেশিরভাগ ওয়েব হোস্টিং এটি সাপোর্ট করে।

    নিজের পিসিতে PHP ইনস্টল

    যদি আপনার ওয়েব সার্ভার পিএইচপি সাপোর্ট না করে তবে পিএইচপি শিখতে গেলে আপনাকে অবশ্যই নিজের পিসিতে এটি ইনস্টল করে নিতে হবে।
    ধারাবাহিকভাবে আপনাকে যা করতে হবে:

    • নিজের পিসিতে একটি ওয়েব সার্ভার ইনস্টল করুন,

    • PHP ইনস্টল করুন,

    • MySQL বা অন্য কোনো ডাটাবেজ ইনস্টল করুন।

    পিএইচপি’র অফিসিয়াল ওয়েবসাইটে এটি ইনস্টল করার বিস্তারিত নির্দেশনা দেয়া আছে। সাইটের লিংক ব্রাউজ করতে ক্লিক করুন –
    http://php.net/manual/en/install.php

    ]]>    <![CDATA[লারাভেল শিখতে হলে আপনার যা জানা থাকা লাগবে এবং শুরু করার সময় যা যা লাগবে (Requirements for Learning Laravel Framework)]]>https://blog.shikhun.net/requirements-for-learning-laravel-frameworkhttps://blog.shikhun.net/requirements-for-learning-laravel-frameworkSun, 15 Jan 2023 18:19:17 GMTলারাভেল শিখতে হলে আপনার যা জানা থাকা লাগবে:

    HTML

    CSS

    JavaScript

    SQL

    PHP

    PHP OOP

    MVC

    Composer

    HTML:

    অর্থ্যাৎ HyperText Markup Language. এইচটিএমএল হল ওয়েব ব্রাউজারে প্রদর্শনের জন্য স্ট্রাকচার করার জন্য আদর্শ মার্কআপ ভাষা। এটি CSS এবং JavaScript এর মতো স্ক্রিপ্টিং ভাষা ।

    CSS:

    অর্থ্যাৎ Cascading Style Sheets. HTML দিয়ে মার্কাপ করা হয় আর সিএসএস দিয়ে ডিজাইন।

    JavaScript:

    জাভাস্ক্রিপ্ট কে সংক্ষেপে JS বলা হয়, এটি একটি প্রোগ্রামিং ল্যাঙ্গুয়েজ যা HTML এবং CSS এর পাশাপাশি ওয়ার্ল্ড ওয়াইড Web এর অন্যতম প্রধান টেকনোলজি। 2022 সালের হিসেবে, 98% ক্লায়েন্ট সাইডে JavaScript ব্যবহার করা হয়েছে এবং থার্ট পার্টি লাইব্রেরিগুলিকে অন্তর্ভুক্ত করে।

    SQL:

    Structured Query Language., সংক্ষেপে SQL বল হয়। এটি একটি কুয়ারি ল্যাঙ্গুয়েজ, সহজ ভাষায় বলা যায় ডেটা সংরক্ষন ও মেনেজমেন্ট করার জন্য আমরা যে ল্যাঙ্গুয়েজ ব্যবহার করি তাকে এসকিউএল বলে।

    PHP:

    পিএইচপি হল একটি সার্ভার স্ক্রিপ্টিং ল্যাঙ্গুয়েজ এবং পাওয়ারফুল গতিশীল ডাইনামিক ওয়েব পেইজ তৈরির জন্য একটি শক্তিশালী টুল। এটি অপেন সোর্স বা সম্পূর্ণ ফ্রি।

    OOP:

    অর্থ্যাৎ Object-Oriented Programming. কোড লেখার ধরন সাধারনত দুইভাবে হয়, ১) Object-oriented programming. ২) Procedural programming.

    Procedural programming –এর তুলনায় Object-oriented programming -এর বেশ কিছু সুবিধা রয়েছে।

    MVC:

    অর্থ্যাৎ Model–view–controller হল একটি সফ্টওয়্যার আর্কিটেকচারাল প্যাটার্ন যা সাধারণত user interface তৈরির জন্য ব্যবহৃত হয় যা প্রোগ্রামিং লজিকগুলোকে 3 টি সংযুক্ত উপাদানে ভাগ করে দেয়।

    Composer:

    অর্থ্যাৎ এটি পিএইচপির ডিপেনডেন্সি ম্যানেজার। যেটা ডেভেলপারের কাজ সহজ ও দ্রুতগতিতে করতে সহায়তা করে।

    ফাইনালি লারাভেল শুরু করার সময় যা যা লাগবে:

    PHP (আপডেট ভার্শন).

    Local Server (Xampp, Wamp, Valit, Laragon).

    Composer.

    Text/Code Editor (VS Code, Notepad++, Brackets).

    Web Browser.

    ]]>    <![CDATA[ক্লাস নং-২০(পার্ট-১৫)-লারাভেল LMS Project Quiz section create crud operation and others]]>https://blog.shikhun.net/lms-project-quiz-section-create-crud-operation-and-othershttps://blog.shikhun.net/lms-project-quiz-section-create-crud-operation-and-othersSun, 15 Jan 2023 13:51:42 GMTআজকের ক্লাসে আমরা মূলত আমাদের লারাভেল প্রজেক্টের যে বাকি কাজ গুলো ছিল কুইজের সেগুলো complete করব।এবং আমরা আরো অন্যান্য বিষয় গুলো দেখবো।

    যেহেতু আমরা আগের ক্লাসেই আমাদের টাস্ক গুলো complete করেছি ওখান থেকেই আমরা আমাদের কুইজ গুলোকে ভিউ করিয়েছি ।এবং আজকে আমরা সেই কুইজ গুলোকে ইডিট করে সেখানে সঠিক উত্তর সেট করব।

    তো এর জন্য আমরা আমাদের কুইজ ইডিট ফাইলে গিয়ে আমাদের কোডের সাথে মিল রেখে গিটহাবের কোড গুলো আপডেট করব এখানে হয়তো একটু মাথা গুলিয়ে যেতে পারে কারন অনেকেই অনেক কোড আপডেট করে সেগুলো কমিট করছে সুতরাং কোডের স্টাইলের পরিবর্তন হচ্ছে তাই আমি এখানে কোড দিলাম না। আগের কোড গুলো quize option থেকে মিলিয়ে নেবেন।

    এবার আসি আমরা আমাদের কুইজে প্রশ্ন সেট করা এবং কুইজের উত্তর গুলো সঠিক কি না সেটা দেখানো।

    আমরা প্রথমেই একটা রাউট তৈরি করি।

    Route::get('/quiz-show/{id}', [QuizController::class, 'quizShow'])->name('quiz-show');

    এখান থেকে আমাদের কুইজ গুলো আইডি অনুযায়ী বিভিন্ন কুইজ শো করবে।

    এবং আমাদের QuizController এর মধ্যে শো function লিখব।

    public function quizShow($id) {
        $quiz = Quiz::findOrFail($id);
        return view('quiz.quiz-show', [
            'quiz' => $quiz,
        ]);
    }

    প্রথমেই আমাদের কুইজ show livewire component এ গিয়ে আমাদের কোড গুলো লিখে ফেলি।

    public $quiz;
    public $answerOpitons = [
       'answer_a',
       'answer_b',
       'answer_c',
       'answer_d',
    ];
    public $answer;
    public $answer_id;
    public $count_correct_answer = 0;
    public $count_incorrect_answer = 0;
    public $correct_answers = [];
    public function render()
    {

        return view('livewire.quiz-show');
    }
    public function answerUpdate($id){
        $this->answer_id = $id;
    }
    public function result(){
        $question = Question::select('correct_answer')->findOrFail($this->answer_id);
        if($question->correct_answer === $this->answer[$this->answer_id]){
            flash()->addSuccess('Answer is correct');
            $this->correct_answers[$this->answer_id] = true;
            $this->count_correct_answer++;
        }else{
            flash()->addWarning('Answer is incorrect');
            $this->correct_answers[$this->answer_id] = false;
            $this->count_incorrect_answer++;

        }
    }

    এবং ভিউ ফাইলে সেগুলো কে শো করি।

    <div>
    <h1 class="text-center text-2xl py-2">{{$quiz->name}}</h1>
    @php
        $i=1
    @endphp
    <div class="flex items-center gap-4 py-4">
        <p class="flex items-center gap-2">Total <span class=" text-sm radius-full text-white flex justify-center items-center w-8 h-8">{{count($quiz->questions)}}</span></p>
        <p class="flex items-center gap-2">Correct <span class=" text-sm radius-full text-white flex justify-center items-center w-8 h-8">{{$count_correct_answer}}</span></p>
        <p class="flex items-center gap-2">Wrong <span class=" text-sm radius-full text-white flex justify-center items-center w-8 h-8">{{$count_incorrect_answer}}</span></p>
    </div>
    @foreach($quiz->questions as $question)
       <div class="border border-gray-300 mb-4 p-4  @if(array_key_exists($question->id,$correct_answers)) {{$correct_answers[$question->id] ? 'bg-green-100': 'bg-red-100'}} @endif}}">
           <h3 class="text-gray-600"> {{$i++}}.{{$question->name}}</h3>
           <div class="flex gap-4">
               @forEach($answerOpitons as $option)
                   <div class="flex items-center pl-4  rounded">
                       <input wire:click="answerUpdate({{$question->id}})" @if(array_key_exists($question->id,$correct_answers)) disabled @endif wire:change="result" wire:model="answer.{{$question->id}}" id="answer-{{$option}}-{{$question->id}}"  type="radio" value="{{explode('_',$option)[1]}}" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500">
                       <label for="answer-{{$option}}-{{$question->id}}" class="w-full py-4 cursor-pointer ml-2 text-sm font-medium text-gray-900">{{$question->$option}}</label>
                   </div>
               @endforeach
           </div>
       </div>
    @endforeach
</div>

    এবার আমাদের কুইজ গুলো কে সুন্দর মত ভিউ করতে পারব।এবং আইডি অনুযায়ী সেটা করতে পারব। এখানে একটা বিষয় সেটা হলো যেহেতু এগুলোতে টাস্ক দেওয়া থাকছে সাথে ডিজাইন ও পরিবর্তন হচ্ছে তাই আগের ব্লগেও অনেক কিছু update code দেওয়া আছে যেগুলো ক্লাসে দেখানো হয়নাই ।আশা করি বুঝতে পারছেন।

    আমাদের কোর্সের tutorial-20(part-16) এই ব্লগ part-15 এর মধ্যেই দেওয়া হয়েছে ১৬ নং পার্টে মূলত আমাদের যে কুইজ পেইজ আছে সেই পেইজের answer গুলো dynamic এবং style করা হয়েছিল এবং এটাকে সুন্দর ভাবে single page এ দেখানোর কথা বলেছিল যা আমরা আজকের এবং গত ব্লগেই কাভার করেছি।

    discord link: https://discord.gg/9qWUUbQ3

    facebook group :https://web.facebook.com/groups/1661735757554627/

    Happy Learning

    Rakibul Islam

    ]]>    <![CDATA[ক্লাস নং-২০(পার্ট-১৪)-লারাভেল LMS Project Quiz section create and functionality add]]>https://blog.shikhun.net/lms-project-quiz-section-create-and-functionality-addhttps://blog.shikhun.net/lms-project-quiz-section-create-and-functionality-addSun, 15 Jan 2023 13:36:49 GMTআজকের ক্লাসে আমরা মূলত আমাদের লারাভেল প্রজেক্টের কুইজ সেকশন নিয়ে কাজ করব।এবং এখানে teacher কুইজ তৈরি করে সেটার লিংক students এর সাথে share করতে পারবে।এবং students সেই লিংকে গিয়ে তাদের নিজের কোর্সের অবস্থা সম্পর্কে জানতে পারবে।

    তো এর জন্য লাগবে প্রশ্ন যেটা থেকে শিক্ষক কুইজ তৈরি করবেন। তো প্রথমেই আমাদের question model make করব।এবং সেই সাথে migration and controller

    php artisan make:model Question -mc

    এবং এর পর আমরা আমাদের quiz এর জন্য তৈরি করব।

     php artisan make:model Quiz -mc

    এবার আমাদের question এর migration টা ready করে ফেলি।

                $table->id();
            $table->string('name');
            $table->string('answer_a');
            $table->string('answer_b');
            $table->string('answer_c');
            $table->string('answer_d');
            $table->string('correct_answer');
            $table->timestamps();

    এবং আমাদের কুইজ migration এ মেইন টেবিল এ শুধুমাত্র নাম থাকবে ।এবং এর নিচে আমাদের পিভট টেবিল লাগবে সেখানে আমাদের question and quize থাকবে।

    Schema::create('quizzes', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });

        Schema::create('quiz_question', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('quiz_id');
            $table->unsignedBigInteger('question_id');
            $table->timestamps();

            $table->unique(['quiz_id', 'question_id']);

            $table->foreign('quiz_id')->references('id')->on('quizzes')->onDelete('cascade');
            $table->foreign('question_id')->references('id')->on('questions')->onDelete('cascade');
        });

    এবার আমরা আমাদের web.php file এ রাউট গুলো ডিফাইন করে দিব।

        Route::resource('question', QuestionController::class);
    Route::resource('quiz', QuizController::class);

    এবার আমরা আমাদের যে navigation file আছে সেখানে আমাদের দুইটা মেনু নিব।

    <x-nav-link :href="route('question.index')" :active="request()->routeIs('question.index')">
                        {{ __('Questions') }}
</x-nav-link>

 <x-nav-link :href="route('quiz.index')" :active="request()->routeIs('quiz.index')">
                        {{ __('Quizes') }}
</x-nav-link>

    এবার আমাদের questions and quize dynamic করার জন্য আমরা livewire template make করব।

    php artisan livewire:make QuestionIndex
php artisan livewire:make QuestionCreate
php artisan livewire:make QuestionEdit

    edit টা যেহেতু আমাদের টাস্ক দেওয়া থাকবে তাই আমরা এটাকে আগেই তৈরি করে নিয়েছি। এবার আমাদের যে course folder টা আছে সেটাকে কপি করব এবং এর মধ্যে যে curiculum folder টা আছে সেটাকে ডিলেট করে দিব। এবং আমাদের question index file টা কে এডিট করে নি।

    এবং এবার আমাদের questionController এর মধ্যে আমাদের function গুলো লিখে ফেলি।

     public function index()
    {
        return view('question.index');
    }

    public function create()
    {
        return view('question.create');
    }

    public function edit($id)
    {
        return view("question.edit", [
            'question_id' => $id
        ]);
    }

    এবং এবার যদি আমরা ভিউ করি তাহলে আমরা সুন্দর ভাবে সব গুলো কে শো করাতে পারব। আমাদের ফাইল গুলো যেহেতু কপি করা তাই আমরা question related সেগুলো কে ঠিক করে নিব।এবং প্রথমেই আমরা create এ তৈরি করব। তো আমরা এবার livewire এর create file এ আমাদের form টা লিখব।

    <form wire:submit.prevent="formSubmit">
    <div class="mb-4">
        @include('components.form-field', [
        'name' => 'name',
        'label' => 'Name',
        'type' => 'text',
        'placeholder' => 'Question name',
        'required' => 'required',
        ])
    </div>

    @foreach($answers as $answer)
    <div class="mb-4">
        @include('components.form-field', [
        'name' => 'answer_' . $answer,
        'label' => 'Answer '. ucfirst($answer),
        'type' => 'text',
        'placeholder' => 'Type answer ' . ucfirst($answer),
        'required' => 'required',
        ])
    </div>
    @endforeach

    <div class="mb-4">
        <label class="lms-label" for="correct_answer">Correct answer</label>
        <select class="lms-input" wire:model.prevent="correct_answer" id="correct_answer">
            @foreach($answers as $answer)
            <option value="{{ $answer }}">{{ ucfirst($answer) }}</option>
            @endforeach
        </select>
    </div>

    @include('components.wire-loading-btn')
</form>

    যেহেতু এই ফর্ম এর ফিল্ড গুলো একের অধিক যায়গায় লেগেছে তাই আমরা এগুলো কে dynamic করে নিয়েছি।এবং প্রয়োজন অনুযায়ী বসিয়ে দিয়েছি,।এবং আমাদের question এর answer গুলো কে আমরা dynamic ভাবে এখানে শো করাব এর জন্য আমাদের livewire এর যে questioncreate file আছে সেখানে গিয়ে আমরা আমাদের সেগুলো লিখে ফেলব।এছাড়াও আমাদের question make করব।

    
  public $answers = ['a', 'b', 'c', 'd'];
    public $name;
    public $answer_a;
    public $answer_b;
    public $answer_c;
    public $answer_d;
    public $correct_answer = 'a';

    public function render()
    {
        return view('livewire.question-create');
    }

    protected $rules = [
        'name' => 'required',
        'answer_a' => 'required',
        'answer_b' => 'required',
        'answer_c' => 'required',
        'answer_d' => 'required',
        'correct_answer' => 'required',
    ];

    public function formSubmit()
    {
        $this->validate();

        Question::create([
            'name' => $this->name,
            'answer_a' => $this->answer_a,
            'answer_b' => $this->answer_b,
            'answer_c' => $this->answer_c,
            'answer_d' => $this->answer_d,
            'correct_answer' => $this->correct_answer,
        ]);

        flash()->addSuccess('Question created successfully!');

        return redirect()->route('question.index');
    }

    এবার আমরা একবার migration চালাব ।এবং সেই সাথে আমরা question make করব।

    এবং আমাদের index টা যেহেতু টাস্ক দেওয়া ছিল সেগুলো আমরা এখান থেকেই complete করব।এরজ্যন আমাদের livewire এর questionindex এ গিয়ে নিচের কোড গুলো লিখব।

    <div>
    <table class="w-full table-auto">
        <tr>
            <th class="border px-4 py-2 text-left">SL.</th>
            <th class="border px-4 py-2 text-left">Question</th>
            <th class="border px-4 py-2 text-left">Answer A</th>
            <th class="border px-4 py-2 text-left">Answer B</th>
            <th class="border px-4 py-2 text-left">Answer C</th>
            <th class="border px-4 py-2 text-left">Answer D</th>
            <th class="border px-4 py-2 text-left">Correct Answer</th>
            <th class="border px-4 py-2">Actions</th>
        </tr>
        @foreach($questions as $question)
        <tr>
            <td class="border px-4 py-2">{{$loop->iteration}}</td>
            <td class="border px-4 py-2">{{$question->name}}</td>
            <td class="border px-4 py-2">{{$question->answer_a}}</td>
            <td class="border px-4 py-2">{{$question->answer_b}}</td>
            <td class="border px-4 py-2">{{$question->answer_c}}</td>
            <td class="border px-4 py-2">{{$question->answer_d}}</td>
            <td class="border px-4 py-2">{{$question->correct_answer}}</td>

            <td class="border px-4 py-2 text-center">
                <div class="flex items-center justify-center">
                    <a class="mr-1" href="{{route('question.edit', $question->id)}}">
                        @include('components.icons.edit')
                    </a>

                    <form class="ml-1" onsubmit="return confirm('Are you sure?');"
                        wire:submit.prevent="questionDelete({{$question->id}})">
                        <button type="submit">
                            @include('components.icons.trash')
                        </button>
                    </form>
                </div>
            </td>
        </tr>
        @endforeach
    </table>

    <div class="mt-4">
        {{$questions->links()}}
    </div>
</div>

    এবং আমাদের livewire component এর মাধ্যমে data পাঠাব।questionIndex থেকে।

     public function render()
    {
        $questions = Question::paginate(15);

        return view('livewire.question-index', [
            'questions' => $questions
        ]);
    }

    public function questionDelete($id)
    {
        $question = Question::findOrFail($id);

        $question->delete();

        flash()->addSuccess('Question deleted successfully!');
    }

    এবার আমরা আমাদের qustion গুলো কে ভিউ করতে পারব।

    এবার আসি questionedit এ এবং এখান থেকে আমরা dataগুলো database এ save করে update করে দেব।

    public $question_id;
    public $answers = ['a', 'b', 'c', 'd'];
    public $name;
    public $answer_a;
    public $answer_b;
    public $answer_c;
    public $answer_d;
    public $correct_answer;

    public function mount()
    {
        $question = Question::where('id', $this->question_id)->first();
        $this->name = $question->name;
        $this->answer_a = $question->answer_a;
        $this->answer_b = $question->answer_b;
        $this->answer_c = $question->answer_c;
        $this->answer_d = $question->answer_d;
        $this->correct_answer = $question->correct_answer;
    }

    protected $rules = [
        'name' => 'required',
        'answer_a' => 'required',
        'answer_b' => 'required',
        'answer_c' => 'required',
        'answer_d' => 'required',
        'correct_answer' => 'required',
    ];

    public function render()
    {
        return view('livewire.question-edit', [
            'answers' => $this->answers
        ]);
    }

    public function questionUpdate()
    {
        $this->validate();

        $question = Question::where('id', $this->question_id)->first();

        $question->update([
            'name' => $this->name,
            'answer_a' => $this->answer_a,
            'answer_b' => $this->answer_b,
            'answer_c' => $this->answer_c,
            'answer_d' => $this->answer_d,
            'correct_answer' => $this->correct_answer,
        ]);

        flash()->addSuccess('Question updated successfully!');

        return redirect()->route('question.index');
    }

    এবং edit এর ভিউ তে গিয়ে আমরা নিচের কোড গুলো লিখব।

    <form wire:submit.prevent="questionUpdate">
    <div class="mb-4">
        @include('components.form-field', [
        'name' => 'name',
        'label' => 'Name',
        'type' => 'text',
        'placeholder' => 'Question name',
        'required' => 'required',
        ])
    </div>

    @foreach($answers as $answer)
    <div class="mb-4">
        @include('components.form-field', [
        'name' => 'answer_' . $answer,
        'label' => 'Answer '. ucfirst($answer),
        'type' => 'text',
        'placeholder' => 'Type answer ' . ucfirst($answer),
        'required' => 'required',
        ])
    </div>
    @endforeach

    <div class="mb-4">
        <label class="lms-label" for="correct_answer">Correct answer</label>
        <select class="lms-input" wire:model.prevent="correct_answer" id="correct_answer">
            @foreach($answers as $answer)
            <option value="{{ $answer }}">{{ ucfirst($answer) }}</option>
            @endforeach
        </select>
    </div>

    @include('components.wire-loading-btn')
</form>

    এবং সেই সাথে আমাদের delete function টাও লিখেছি আমাদের questionindex এ সুতরাং আমাদের এটাও dynamic. তাহলে আমাদের question section complete

    • -question create

    • -question Index

    • -question edit

    • -question delete

    এবার আসি আমাদের quize section এ।

    এবং আমাদের যে question folder টা আছে সেটাকে আমরা কপি করে সেটার নাম দেই quize এবং আমাদের question এর data গুলো কে এডিট করে আমরা সেটা কুইজের ডেটা গুলো দিয়ে দিব।এবং এখানে যেহেতু আমাদের create file টা লাগবে না তাই আমরা সেটাকে ডিলেট করে দিব।

    index, edit, show এই ফাইলগুলো তে।আমাদের কুইজের ডেটা গুলো লিখবো।

    এবার আসি index file এ।আমরা আমাদের create file এ যেহেতু livewire এর টা দিয়ে ডায়নামিক করছি না তাই আমরা এখানে normally করে সেটা livewire এর index এ পাঠিয়ে দিব।

    <x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Quiz') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <form action="{{route('quiz.store')}}" method="post"> @csrf
                        <div class="mb-4">
                            <label for="name" class="lms-label">Name</label>
                            <input type="text" name="name" id="name" class="lms-input">
                        </div>
                        <button type="submit" class="lms-btn">Add a quiz</button>

                    <livewire:quiz-index  />
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

    এবং আমাদের quizecontroller এর মধ্যে আমাদের store function লাগবে ।তো এখানে আমাদের অন্যান্য function যেগুলো আমাদের কুইজের সাথে লাগবে সেগুলো এখানে দিয়ে দি।

    public function index() {
        return view('quiz.index');
    }

    public function create() {
        return view('quiz.create');
    }

    public function store(Request $request) {
        $quiz = $request->validate([
            'name' => 'required',
        ]);


        $created = Quiz::create($quiz);

        flash()->addSuccess('Quiz created successfully');


        return redirect()->route('quiz.index',$created->id);
    }

 public function show(Quiz $quiz) {
        return view('quiz.show', [
            'quiz' => $quiz,
        ]);
    }

    public function edit(Quiz $quiz)
    {
        return view('quiz.edit', compact('quiz'));
    }


    public function quizShow($id) {
        $quiz = Quiz::findOrFail($id);
        return view('quiz.quiz-show', [
            'quiz' => $quiz,
        ]);
    }

    এবং আমাদের quize model এ গিয়ে সেখানে fillable property দিয়ে দিব। এবং সেখানে একটা রিলেশন তৈরি করব যদি এটা আমাদের পরে করলেও হত।

    
protected $fillable = [
        'name',
    ];

    public function questions() {
        return $this->belongsToMany(Question::class, 'quiz_question', 'quiz_id', 'question_id');
    }

    এবার আমরা আমাদের livewire components গুলো make করতে পারি।

    php artisan livewire:make QuizCreate
php artisan livewire:make QuizIndex
php artisan livewire:make QuizEdit
php artisan livewire:make QuizShow

    এবার আমাদের কুইজ livewire-edit file এ আমাদের যে টাস্ক গুলো দেওয়া হয়েছে সেই অনুযায়ী করব এবং যেভাবে দেখেনো হয়েছে সেভাবে।

    <div>
    <form class="p-4" wire:submit.prevent="editQuiz">

        <div class="mb-4">
            @include('components.form-field', [
            'name' => 'name',
            'label' => 'Name',
            'type' => 'text',
            'placeholder' => 'Question name',
            'required' => 'required',
            ])
        </div>
        <button type="submit" class="lms-btn">Submit </button>


    </form>

    @if (count($questions)>0)
    <form class="p-4" wire:submit.prevent="addQuestion">
        <div class="min-w-max ml-3">
            <label for="question" >Add Question</label>
            <select wire:model="question" id="question" class= "mb-4">
                @foreach($questions as $question)
                    <option value="{{$question->id}}">{{$question->name}}</option>
                @endforeach
            </select>
            @error('correct_answer')
            <p class="mt-2 text-sm text-red-600 dark:text-red-500">{{$message}}</p>
            @enderror
        </div>
        <button type="submit" class="lms-btn">Add </button>
    </form>

    @else
        <h3 class="my-4 text-gray-600 text-lg p-4 ml-3">Add Question</h3>
        <p class="text-red-500 px-4 ml-3">Not Found Any Question!</p>
    @endif
   <div class="p-4">
       <h3 class="my-4 text-gray-600 text-lg ml-3">Question List</h3>
       <div class="table w-full p-2">
           <table class="w-full border">
               <thead>
               <tr class="bg-gray-50 border-b">
                   <th class="p-2 border-r cursor-pointer text-sm font-thin">
                       <div class="flex items-center justify-center"> Name</div>
                   </th>
                   <th class="p-2 border-r cursor-pointer text-sm font-thin">
                       <div class="flex items-center justify-center">Action</div>
                   </th>
               </tr>
               </thead>
               <tbody>
               @foreach($quiz->questions as $question)
                   <tr class="bg-gray-100 text-center border-b text-sm text-gray-600">
                       <td class="p-2 border-r text-left px-4">{{$question->name}}</td>
                       <td class="flex items-center justify-center">
                           <form wire:submit.prevent="removeQuiz({{$question->id}})" class="bg-red-500 p-2 inline-block text-white hover:shadow-lg text-xs font-thin">
                               <button onclick="return confirm('Are you Sure')" type="submit">Remove</button>
                           </form>
                       </td>
                   </tr>
               @endforeach
               </tbody>
           </table>
       </div>
   </div>
</div>

    এবং livewire এর quizedit এ আমরা নিচের কোড গুলো লিখবো,।

     public $quiz;
    public $name;
    public $question;
    public $questions;

    protected $rules = [
        'name' => 'required',
    ];
    public function mount(){
        $this->name = $this->quiz->name;
        $alreadyAddQuestion = $this->quiz->questions->pluck('id')->toArray();
        $this->questions = Question::select(['id', 'name'])->whereNotIn('id',$alreadyAddQuestion)->get();
        if (count($this->questions)>0){
            $this->question =$this->questions[0]->id;
        }
    }
    public function render(){

        return view('livewire.quiz-edit');
    }


    public function addQuestion(){
        $this->validate([
            'question' => 'required',
        ]);
        $quiz = Quiz::findOrFail($this->quiz->id);
        $quiz->questions()->attach($this->question);

        flash()->addSuccess('Question added successfully');

        return redirect()->route('quiz.edit',$this->quiz->id);
    }


    public function editQuiz(){
            $this->validate();
            $quiz = Quiz::findOrFail($this->quiz->id);

            $quiz->name = $this->name;
            $quiz->save();

            flash()->addSuccess('Quiz edit successfully');
    }

    এবং এই quize গুলো show করানোর জন্য আমরা আমাদের index file create করব।

    quizeIndex component

     public function render() {
        $quizzes = Quiz::paginate(10);
        return view('livewire.quiz-index',[
            'quizzes' => $quizzes]);
    }

    এবং ভিউ ফাইলে।

    <div>
    <div class="table w-full p-2">
        <table class="w-full border">
            <thead>
            <tr class="bg-gray-50 border-b">
                <th class="p-2 border-r cursor-pointer" > Name</div>
                </th>
                <th class="p-2 border-r cursor-pointer ">
                    <div class="flex items-center justify-center"> Action</div>
                </th>
            </tr>
            </thead>

            <tbody>
            @foreach($quizzes as $quiz)
                <tr class="bg-gray-100 text-center border-b ">
                    <td class="p-2 border-r text-left px-4">{{$quiz->name}}</td>
                    <td class="flex items-center justify-center">
                        <a href="{{route('quiz.edit',$quiz->id)}}" class="ml-2 pt-2">@include('components.icons.edit')</a>
                        <a href="{{route('quiz.show',$quiz->id)}}" class="ml-2 pt-2">@include('components.icons.eye')</a>
                        <form class="ml-2  pt-3" wire:submit.prevent="deleteQuiz({{$quiz->id}})" ><button onclick="return confirm('Are you sure?');" type="submit" > @include('components.icons.trash')
                        </button>
                        </form>

                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
        <div class="mt-4">
            {{$quizzes->links()}}
        </div>
    </div>

    আমরা কুইজ টা কে ভিউ করতে চাইলে আমাদের প্রথমে livewire component QuizShow file এ কোড গুলো লিখে ফেলি।

       public $quiz;
    public $answerOpitons = [
       'answer_a',
       'answer_b',
       'answer_c',
       'answer_d',
    ];
    public $answer;
    public $answer_id;
    public $count_correct_answer = 0;
    public $count_incorrect_answer = 0;
    public $correct_answers = [];
    public function render()
    {

        return view('livewire.quiz-show');
    }
    public function answerUpdate($id){
        $this->answer_id = $id;
    }
    public function result(){
        $question = Question::select('correct_answer')->findOrFail($this->answer_id);
        if($question->correct_answer === $this->answer[$this->answer_id]){
            flash()->addSuccess('Answer is correct');
            $this->correct_answers[$this->answer_id] = true;
            $this->count_correct_answer++;
        }else{
            flash()->addWarning('Answer is incorrect');
            $this->correct_answers[$this->answer_id] = false;
            $this->count_incorrect_answer++;

        }
    }

    এবং আমাদের livewire এর blade file এ।

    <div>
    <h1 class="text-center text-2xl py-2">{{$quiz->name}}</h1>
    @php
        $i=1
    @endphp
    <div class="flex items-center gap-4 py-4">
        <p class="flex items-center gap-2">Total <span class=" text-sm radius-full text-white flex justify-center items-center w-8 h-8">{{count($quiz->questions)}}</span></p>
        <p class="flex items-center gap-2">Correct <span class=" text-sm radius-full text-white flex justify-center items-center w-8 h-8">{{$count_correct_answer}}</span></p>
        <p class="flex items-center gap-2">Wrong <span class=" text-sm radius-full text-white flex justify-center items-center w-8 h-8">{{$count_incorrect_answer}}</span></p>
    </div>
    @foreach($quiz->questions as $question)
       <div class="border border-gray-300 mb-4 p-4  @if(array_key_exists($question->id,$correct_answers)) {{$correct_answers[$question->id] ? 'bg-green-100': 'bg-red-100'}} @endif}}">
           <h3 class="text-gray-600"> {{$i++}}.{{$question->name}}</h3>
           <div class="flex gap-4">
               @forEach($answerOpitons as $option)
                   <div class="flex items-center pl-4  rounded">
                       <input wire:click="answerUpdate({{$question->id}})" @if(array_key_exists($question->id,$correct_answers)) disabled @endif wire:change="result" wire:model="answer.{{$question->id}}" id="answer-{{$option}}-{{$question->id}}"  type="radio" value="{{explode('_',$option)[1]}}" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500">
                       <label for="answer-{{$option}}-{{$question->id}}" class="w-full py-4 cursor-pointer ml-2 text-sm font-medium text-gray-900">{{$question->$option}}</label>
                   </div>
               @endforeach
           </div>
       </div>
    @endforeach
</div>

    আপাতত আমাদের quize section রেডি এর কাজ গুলো আমরা বাকি টিউটোরিয়ালে complete করব।

    discord link: discord.gg/9qWUUbQ3

    facebook group :web.facebook.com/groups/1661735757554627

    Happy Learning

    Rakibul Islam

    ]]>    <![CDATA[লারাভেলের ভবিষ্যৎ কী?]]>https://blog.shikhun.net/laravel-futurehttps://blog.shikhun.net/laravel-futureFri, 13 Jan 2023 18:18:35 GMTলারাভেলের ভবিষ্যৎ সেটা নিয়ে আলোচনা করতে গেলে প্রথমে পিএইচপি নিয়ে কিছু কথা বলতে হবে।

    পৃথীবিতে এমন কিছু টেকনোলজি আছে যা আগেও জনপ্রীয় ছিল এখনও আছে এবং ভবিষ্যতেও জনপ্রীয় থাকবে (ইনশাআল্লাহ্), যার প্রয়োজনীয়তা সহজেই শেষ হবেনা, সেরকম একটি টেকনোলজি হচ্ছে পিএইচপি।

    ১৯৯৫ সালে পিএইচপি এসেছে এখন ২০২৩ সাল, জন্ম লগ্ন থেকেই পিএইচপি রাজত্ব করে আসছে এখনও রাজত্ব করছে যত দিন যাচ্ছে তার ব্যবহার ও জনপ্রীয় বাড়ছে। ৬৮% এর চেয়েও বেশি ওয়েবসাইট পিএইচপি দিয়ে বানানো।

    শুধু র পিএইচপি দিয়ে কোয়ালিটিফুল বড় ওয়েবসাইট/এ্যাপ্লিকেশন বানানো অসম্ভব প্রায়, এজন্য প্রয়োজন হয় লাইব্রেরী ও ফ্রেমওয়ার্কের।

    লারাভেল কী?

    লারাভেল হলো পিএইচপির একটি ফ্রেমওয়ার্ক, র পিএইচপি দিয়ে একটি ওয়েবসাইট/এ্যাপ্লিকেশন বানানোর চেয়ে লারাভেল দিয়ে বানালে সেটা অনেক বেশি সিকিউর হবে, কোয়ালিটি সম্পন্ন হবে এবং অনেক অনেক ভালো হবে। পিএচপির অনেক ফ্রেমওয়ার্ক আছে তার মধ্যে লারাভেল সবার সেরা।

    লারাভেল এসেছে ২০১১ সালে এখন ২০২৩ সাল, শুরু থেকে নিয়ে এখন পর্যন্ত তার জনপ্রীয়তা ধরে রেখেছে বরং জনপ্রীয়তা দিন দিন আরো বাড়ছে।

    সুতরাং আপনি যদি লারাভেল শিখতে চান বা শিখছেন তাহলে নিশ্চিন্তে শিখুন/শিখতে থাকুন।

    অনেকের মধ্যে একটা ভূল ধারণা কাজ করে যে লারাভে প্রতি নিয়ত আপডেট হয় এখন লারাভেল-৯ শিখলে আবার কদিন পর লারাভেল-১০, ১১, ১২ …..। আসল কথা হচ্ছে আপনি যদি লারাভেলের যেকোন ভার্সন শিখেন তাহলে পরবর্তি যেই ভার্সন আসুক না কেন আপনি পারবেন এতে কোন সন্দেহ নেই।

    ]]>