DEV Community: Harry

How to used Component in Laravel

Harry — Sat, 10 Jun 2023 05:33:40 +0000

WHY?? to use component?
Ans : Using components that help use clean code and we can separate reusable inside your components and use anywhere from your blade file.

There are two types of components in Laravel first class base component can pass data from from blade files and other one also called anonymous component that don't need to pass data directly using in your blade file.Okay ??? Don't worry I am going to explain you step by step.

Step 1

You need to generate a component using artisan commands line

php artisan make:component Forms/InputText

Then you will get two file one is inside
app\View\Components\Forms\InputText.php and other resources\views\components\forms\input-text.blade.php.

Step 2

Go to InputText.php folder


<?php

namespace App\View\Components\Forms;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class InputText extends Component
{

    public string $type;
    public string $label;
    public string $name;
    public string $placeholder;

    /**
     * Create a new component instance.
     */
    public function __construct(
        $type,
        $label,
        $name,
        $placeholder
    ) {

        $thsis->type = $type;
        $this->label = $label;
        $this->name = $name;
        $this->placeholder = $placeholder;
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View|Closure|string
    {
        return view('components.forms.input-text');
    }
}

This above code is for declare some variable that we will pass from blade components

Step 3

Go to forms\input-text.blade.php and used used the variables that you used in the InputText class.

<div>
    <label for="{{ $name }}">{{$label}}</label>
    <input type="{{ $type }}" 
           class="form-control @error('email') is-invalid @enderror" 
           id="{{ $name }}" name="{{ $name }}"
          placeholder="{{ $placeholder }}">

         @error($name)
          <div class="invalid-feedback">
            {{ $message->first() }}
          </div>
      @enderror
</div>

Step 4

Go any blade files inside your can used this components like below

  <x-forms.input-text type="text"
                      label="Name"
                      name="name"
                      placeholder="Please Enter your name"
  />

The InputText component allows you to create input text fields. When using this component, you can pass variables by using the name attribute inside :name="$name".

Thank for reading this articles if you have any questions or any suggestions free feel to comments down @harom284

Dynamic Render Inertia from different file path in using Laravel

Harry — Wed, 22 Mar 2023 19:15:34 +0000

I haven't written a blog post in a long time due to some personal issues. But today, I'm writing about how to dynamically render your Vue files inertia from different folder paths in inertia.

Before going to actual topic let's me example what is inertia. Inertia is a framework that makes it easy to build modern single-page applications with Laravel. Inertia works by sending data from your server-side controller to your client-side JavaScript application as props. These props can then be used in your client-side view components to display data or update the UI. By default inertia render app.blade.php as root file but you can modified it. Okay!!Let's go to actual topic.

This blog post is for someone who is facing this for the first time when they start working on Inertia. Here are the steps you need to follow.

Step 1

In your app.js inside resources/js

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => {
    //here below two lines you need to make some changes
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

Step 2

You have to modified like this.


import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => {
    //here below two lines you need to make some changes
    // name means full file path of your vue's file location
    const page = await import(`../../${name}.vue`,{
                eager: true,
            })
return page.default;
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

Step 3

You have have to pass your **vue** path from controller as below



namespace Src\ModuleName\User\Presentation\HTTP;

use Inertia\Inertia;
use App\Http\Controllers\Controller;


class UserController extends Controller
{

    public function index()
    { 
     //full path of your vue file path you need to configure
     return Inertia::render('src/ModuleName/User/Presentation/Resources/Index'); 
   }

}

I am give my screenshot of my folder structure .As below

If you have any questions about this topic, please feel free to leave a comment below or on my twitter handle @hareom284. I'm always happy to help!. Happy to share your though. Thanks for reading!

How to pass props object from child component to parent

Harry — Fri, 08 Oct 2021 17:28:29 +0000

Before starting the topics let me tell me this is a hack I just found this today when I am doing my project.I facing a problem when I am trying to change data from child to parent .I remember I only know pass props from parent to child but I need to pass props from child to parents..Let's get started !

Requirements need to understand

What is props

Props are arguments passed into React components. Props are passed to components via HTML attributes. props stands for properties.

Source

What is state

State is similar to props, but it is private and fully controlled by the component.You can make dynamic data using state.
source

Okay Now! Let't go into code .....

import { useState } from "react";
import Child from "./child";
const App = () => {
  const [Name, setName] = useState("Parent");

  return (
    <>
      <h1>{Name}</h1>
      <Child Changedata={(Name) => setName(Name)} />
    </>
  );
};

export default App;

** In this parent component we have set initiate state value to "parent" and pass a function to the child component using props.


const Child = (props) => {
  return (

   <button 
   onClick={() => props.Changedata("Child")}>
   Change</button>

  )
};

export default Child;

In child component we called that function using props.Changedata("child") and set a value inside the function parameter that value gonna effect to the state of parent's state and its turn into this value.
.

Demo link

Thus all for today If you found useful please share it to someone and I am waiting to see your feedback.Follow me on twitter

PS: I am just starting writing articles if any mistake feedback are welcome.

Javascript fundamentals before learning react

Harry — Sun, 26 Sep 2021 17:47:33 +0000

Before Going to Learn React You must need Some JavaScript concepts.

let,var and const
function and arrow function callback
hight order function
class
destructuring array and object
import and export
HTML and CSS Basic

Don't worry I will explain you in details.

let,var and const

let,var,const are just a variable declaring. let and const are come in ES6.
Before we use var for variable declaring. There are some advantages of using var and let.
var is used for functional scope and let is used for block scope.
Block scoped is only work in inside this { } and you can't call this variable outside of the scope. Var is used in function scope means like a global variable. You can call it from anywhere.CONST is the same use let but const is used only in const value , Array and Object.

function and arrow function

function is used to avoid DRY(Don't Repeat Yourself). You can declare a function like this.

function add(a,b)
{ 
           return a + b
}

What is arrow function? Arrow function is a new way to declaring function that comes in ES6. You can easily convert the above function into an arrow function like this.

   const add = (a,b) => { a + b} ;

It is short right ??

Callback

callback ?? confusing 😅 Don't worry I will explain easy way .
A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. see in demo

  setTimeout( function name(){
             console.log("This is zaw");
             },1000)

High Order Function

Higher-order functions are functions that take other functions as arguments or return functions as their results. Some high-order functions are map, filter, reduce, etc,.. .I am not going this in detail there are many articles on this you can easily search and read it.
link

Destructuring array and object

Destructuring is spliting value into pieces.

  var array = [ one = 1,two = 2,three = 3,four = 4]; 
  var [one,two,three,four] = array; 
  console.log(one);//you will get 1
  console.log(two);//2

To destruturing object

const Obj = { name:"Zaw",age:21,gender:"male"};
const {name,age,gender} = Obj;
console.log(name); //Zaw
console.log(age);

import and export .

import is used to call packages that already on .

 import React from {React} .

Export is used to export your own package that you have been written and you can call by using import when You need it.

  export package;

Thank for reading this I hope this will helpful to you please give me your feedback .I wrote this according to my experience if you found any mistake feel free to DM me on twitter hareom284

How to search google lik a pro

Harry — Thu, 23 Sep 2021 14:13:01 +0000

Search Exact words

Usage: "yourword"
Example: "How to learn JavaScript"

Search free ebooks

Usage: yourword filetype: pdf
Example: Think And Grow Rich filetype: pdf

Search in one website

Usage : site:URL yourword
Example: site:http://facebook.com "Scope in Javascript"

Search some missing words

Usage: *
Example: think and * rich

Search specific year

Usage : yourwords in year, your words between2020..2021
Example: coup in 2021 or Bitcoin price between 2000..2021

Search the latest update of the website

Usage : cache: http://Facebook.com

Find login page on the website

Usage : site: URL link:"login"
Example : site: http://facebook.com link:"login"

Find similar images reverse search

Usage: goto http://image.google.com upload your image search

I hope this will be helpful to you. Happy Coding .

PS:This is my first article.I am waiting to hear your feedback.