Our Black Friday sale is now live! All individual subscriptions are 50% OFF. This week only!

oussamaSid

oussamaSid

Member Since 2 Years Ago

Algeria

Experience Points
4,430
Total
Experience

570 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
31
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start your engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-in-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • evangelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

Level 1
4,430 XP
Nov
13
1 week ago
Activity icon

Replied to Using Trix Text Editor With Livewire

Hey, @sunnyboy

Can you provide a code example?

Sep
07
2 months ago
Activity icon

Replied to Using Spatie Permission Package With Livewire

Yes, you are right.

but when you coming to protect the controllers, there is no method called middleware in livewire components

Sep
04
2 months ago
Activity icon

Started a new Conversation Using Spatie Permission Package With Livewire

I'm Using Spatie Permission With Laravel livewire, but when I check the role in livewire component it's through middleware does not exist error

code sample

    public function mount()
    {
        $this->middleware('permission:role-list');
    }

I saw Livewire Authorization but I don't know what I'm missing here?

any help I'll be appreciated.

Aug
12
3 months ago
Activity icon

Started a new Conversation Must Not Run With Sudo Error | GitHub Actions

have anyone work with GitHub actions I'm trying to config the actions runner in my virtual private server and I got Must not run with Sudo with Sudo user and with a normal user I got permission denied any help I'll be appreciated

Jul
25
3 months ago
Activity icon

Awarded Best Reply on [Solved] Using Google Captcha With Laravel Livewire

I Solved the issue by doing the following with Captcha V3

in the view

       <button type="submit"
              data-sitekey="{{env('CAPTCHA_SITE_KEY')}}"
              data-callback='handle'
              data-action='submit'
               class="g-recaptcha some-button-style">
               Submit
      </button>
    <script src="https://www.google.com/recaptcha/api.js?render={{env('CAPTCHA_SITE_KEY')}}"></script>
    <script>
        function handle(e) {
            grecaptcha.ready(function () {
                grecaptcha.execute('{{env('CAPTCHA_SITE_KEY')}}', {action: 'submit'})
                    .then(function (token) {
                        @this.set('captcha', token);
                    });
            })
        }
    </script>

in the Controller

...
    public $captcha = 0;

    public function updatedCaptcha($token)
    {
        $response = Http::post('https://www.google.com/recaptcha/api/siteverify?secret=' . env('CAPTCHA_SECRET_KEY') . '&response=' . $token);
        $this->captcha = $response->json()['score'];

        if (!$this->captcha > .3) {
            $this->submit();
        } else {
            return session()->flash('success', 'Google thinks you are a bot, please refresh and try again');
        }
    }

for more info, you can check reCAPTCHA v3 manual

Activity icon

Replied to [Solved] Using Google Captcha With Laravel Livewire

I Solved the issue by doing the following with Captcha V3

in the view

       <button type="submit"
              data-sitekey="{{env('CAPTCHA_SITE_KEY')}}"
              data-callback='handle'
              data-action='submit'
               class="g-recaptcha some-button-style">
               Submit
      </button>
    <script src="https://www.google.com/recaptcha/api.js?render={{env('CAPTCHA_SITE_KEY')}}"></script>
    <script>
        function handle(e) {
            grecaptcha.ready(function () {
                grecaptcha.execute('{{env('CAPTCHA_SITE_KEY')}}', {action: 'submit'})
                    .then(function (token) {
                        @this.set('captcha', token);
                    });
            })
        }
    </script>

in the Controller

...
    public $captcha = 0;

    public function updatedCaptcha($token)
    {
        $response = Http::post('https://www.google.com/recaptcha/api/siteverify?secret=' . env('CAPTCHA_SECRET_KEY') . '&response=' . $token);
        $this->captcha = $response->json()['score'];

        if (!$this->captcha > .3) {
            $this->submit();
        } else {
            return session()->flash('success', 'Google thinks you are a bot, please refresh and try again');
        }
    }

for more info, you can check reCAPTCHA v3 manual

Jul
24
4 months ago
Activity icon

Started a new Conversation [Solved] Using Google Captcha With Laravel Livewire

I'm trying to use a google captcha validation in a form and I notice the value of the response won't send with the request

Here is my Captcha Rule:

    public function passes($attribute, $value)
    {
        $captcha = new ReCaptcha(env('CAPTCHA_SECRET_KEY'));
        $response = $captcha->verify($value, $_SERVER['REMOTE_ADDR']);

        return $response->isSuccess();
    }

The view

      <div class="flex items-center justify-center mt-10">
          <div>
              <div class="g-recaptcha"  data-sitekey="{{ env('CAPTCHA_SITE_KEY') }}"></div>
               @if ($errors->has('g-recaptcha-response'))
                     <span class="block text-orange-700 mt-5">
                           <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                      </span>
                @endif
         </div>
      </div>

The $request->all() output

array:6 [▼
  "id" => "X501DDfFUiLy8CTmEYhc"
  "data" => array:1 [▼
    "demo" => null
  ]
  "name" => "landing.demo"
  "checksum" => "4b5c299935b0bfd844d49277dda19706da1812008cb763b973406163eef7e08a"
  "children" => []
  "actionQueue" => array:1 [▼
    0 => array:2 [▼
      "type" => "callMethod"
      "payload" => array:2 [▼
        "method" => "submitDemo"
        "params" => []
      ]
    ]
  ]
]

Any Ideas?

Jul
22
4 months ago
Activity icon

Replied to Make A Demo App

Thanks, @snapey for the hint, really appreciated

Activity icon

Started a new Conversation Make A Demo App

I want to make a temporary demo for each user to test the app without effecting any data

any idea on how to make a demo like this one?

Jul
10
4 months ago
Activity icon

Started a new Conversation Argument 1 Passed To Illuminate\Mail\MailManager::getConfig() Must Be Of The Type String, Null Given,

i'm trying to make a custom email configuration in the service provider, and when trying to send an email i got this error Argument 1 passed to Illuminate\Mail\MailManager::getConfig() must be of the type string, null given, here is my configuration in the service provider

if (!is_null($mail)) {
    // dd($mail['smtp_host']);
    $mailConfigArray = [
        // 'driver'     => $mail['driver'] ?? '',
        'host'       => $mail['smtp_host'] ?? 'localhost',
        'port'       => $mail['smtp_port'] ?? '564',
        'from'       => [
                'address' => $mail['from_email'] ?? $setting->website_email,
                'name' => $mail['from_name'] ?? $setting->website_name,
            ],
        'encryption' => $mail['encryption'] ?? 'tls',
        'username'   => $mail['smtp_username'] ?? 'root',
        'password'   => $mail['smtp_password'] ?? '',
        'sendmail'   => '/usr/sbin/sendmail -bs',
        'pretend'    => false,
    ];

    app('config')->set('mail', $mailConfigArray);
}

any ideas?

Jul
09
4 months ago
Activity icon

Awarded Best Reply on Using Trix Text Editor With Livewire

The DOM is swapping out your input on round trip. You’ll need to use some combination of wire:ignore and moving your wire:model.

Try:


<div> <!-- top-most div don't attach livewire-->
    <div class="mb-4" wire:model.debounce.365ms="form.body" wire:ignore>
        <label class="block text-gray-700 text-sm text-xl font-bold mb-2" for="order">
            Page Content
        </label>
        <input id="body" value="Your Page Content Here" type="hidden" name="content">
        <trix-editor input="body"></trix-editor>
        @error('form.body')
        <p class="text-red-700 font-semibold mt-2">
            {{$message}}
        </p>
        @enderror
    </div>
</div>

Solved by: shortbrownman

Activity icon

Replied to Using Trix Text Editor With Livewire

The DOM is swapping out your input on round trip. You’ll need to use some combination of wire:ignore and moving your wire:model.

Try:


<div> <!-- top-most div don't attach livewire-->
    <div class="mb-4" wire:model.debounce.365ms="form.body" wire:ignore>
        <label class="block text-gray-700 text-sm text-xl font-bold mb-2" for="order">
            Page Content
        </label>
        <input id="body" value="Your Page Content Here" type="hidden" name="content">
        <trix-editor input="body"></trix-editor>
        @error('form.body')
        <p class="text-red-700 font-semibold mt-2">
            {{$message}}
        </p>
        @enderror
    </div>
</div>

Solved by: shortbrownman

Activity icon

Started a new Conversation Using Trix Text Editor With Livewire

I'm using Trix text editor and when I'm implemented on livewire I have this weird error (nothing in the console or the network tab)

trix fading|656x500

View:

  <div class="mb-4">
      <label class="block text-gray-700 text-sm text-xl font-bold mb-2" for="order">
            Page Content
       </label>
       <input id="body"
              value="Your Page Content Here"
              type="hidden"
              wire:model.debounce.365ms="form.body"
              name="content">
        <trix-editor input="body"></trix-editor>
            @error('form.body')
                <p class="text-red-700 font-semibold mt-2">
                   {{$message}}
                </p>
            @enderror
  </div>

Any Ideas?

Jun
13
5 months ago
Activity icon

Replied to Markdown Css Style

hey @bobbybouwmann thank's for passing by.

actually i have an issue with it i don't know why?

the hightlight.js won't render when the page load until i refresh the page manually.

i'm using turbolinks for the spa functions.

Activity icon

Started a new Conversation Markdown Css Style

how can i got like this markdown style like in scotch.io website except hightligh.js library.

article in scotch.io for example

Jun
03
5 months ago
Activity icon

Replied to SQLSTATE[42S22]: Column Not Found: 1054 Unknown Column 'categories.id'

@guybrush_threepwood thank you so much for the notice.

voyager this is not my first project with it, i done this so many times.

There were issues too with the return statement and the string concatenation (orWhere statement).

yeah you are right about that my bad i don't observe it until you tell me about it [the Pressure] you know that.

PS: I think the search function is not 100% right. I believe the ->take(5)->get() statement should not be placed inside the whereHas callback:

yes, cause the model is like a bridge between the DB and the controller should not execute any statment.

THANK YOU SO MUCH for you help again.

Activity icon

Replied to SQLSTATE[42S22]: Column Not Found: 1054 Unknown Column 'categories.id'

@guybrush_threepwood yeah no problem:

Category Model


class Category extends Model
{
    use Translatable;

    protected $translatable = ['slug', 'name'];

    protected $table = 'categories';

    protected $guarded = [];

    public function posts()
    {
        return $this->hasMany(Voyager::modelClass('Post'))
            ->published()
            ->orderBy('created_at', 'DESC');
    }

    public static function search($search)
    {
        self::whereHas('posts', function (Builder $query) use ($search) {
            return $query->where('title', 'LIKE', '%' . $search . '%')
                ->orWhere('body', 'LIKE', '%', $search . '%')
                ->take(5)
                ->get();
        });
    }

    public function parentId()
    {
        return $this->belongsTo(self::class);
    }

    public function subcategories()
    {
        return $this->hasMany(self::class);
    }

    public static function parent()
    {
        return self::where('order', 1);
    }
}

Post Model

class Post extends Model implements Feedable
{
    use Translatable;
    use Resizable;
    use HasTags;

    protected $translatable = ['title', 'seo_title', 'excerpt', 'body', 'slug', 'meta_description', 'meta_keywords'];

    const PUBLISHED = 'PUBLISHED';
    const FEATURED = 1;

    protected $guarded = [];

    public function save(array $options = [])
    {
        // If no author has been assigned, assign the current user's id as the author of the post
        if (!$this->author_id && Auth::user()) {
            $this->author_id = Auth::user()->getKey();
        }

        return parent::save();
    }

    public function getRouteKeyName()
    {
        return 'slug';
    }

    public function authorId()
    {
        return $this->belongsTo(User::class, 'author_id', 'id')->withDefault([
            'name'  => 'guest',
        ]);
    }

    /**
     * Scope a query to only published scopes.
     *
     * @param \Illuminate\Database\Eloquent\Builder $query
     *
     * @return \Illuminate\Database\Eloquent\Builder
     */
    public function scopePublished(Builder $query)
    {
        return $query->where('status', '=', static::PUBLISHED);
    }

    public function scopeFeatured(Builder $query)
    {
        return $query->where('featured', '=', static::FEATURED);
    }

    public function scopeUnfeatured(Builder $query)
    {
        return $query->where('featured', '=', 0);
    }



    public static function featuredArticles($numberOfArticles = 4)
    {
        return self::orderBy('id', 'desc')->featured()->published()->take($numberOfArticles)->get();
    }

    public static function latestArticles($numberOfArticles = 5)
    {
        return self::orderBy('id', 'desc')->unfeatured()->published()->paginate($numberOfArticles);
    }

    /**
     * @return \Illuminate\Database\Eloquent\Relations\HasOne
     */
    public function category()
    {
        return $this->belongsTo(Category::class)->withDefault([
            'name'  => 'Uncategorized',
        ]);
    }



    public function toFeedItem()
    {
        return FeedItem::create()
            ->id($this->id)
            ->title($this->title)
            ->summary($this->excerpt)
            ->updated($this->updated_at)
            ->link($this->link)
            ->author($this->authorId->name);
    }


    public function getBodyAttribute($value = '')
    {
        // $key = 'article|'.$this->token ?? $this->id .'|'.hash(MHASH_ADLER32, $value);

        // return Cache::remember($key, 86400, function () use ($value) {
            return $this->parseMarkdownToHtml($value ?? '');
        // });
    }


    public function setTokenAttribute()
    {
        $this->attributes['token'] = random_int(0, 2020);
    }

    public function setEstimatedTimeAttribute()
    {
        $this->attributes['estimated_time'] = estimated_reading_time($this->body);
    }

    public static function getFeedItems()
    {
        return static::all();
    }


    public function getLinkAttribute()
    {
        return route('blog.show', $this);
    }

    /**
     * Get the Article's text as HTML
     *
     * @return \Illuminate\Support\HtmlString
     */
    protected function parseMarkdownToHtml(string $text = '')
    {
        return  new HtmlString(app(CommonMarkConverter::class)->convertToHtml($text));
    }
}
Activity icon

Replied to SQLSTATE[42S22]: Column Not Found: 1054 Unknown Column 'categories.id'

hi @guybrush_threepwood yeah for sure:

categories table


<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;

class CreateCategoriesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        // Create table for storing categories
        Schema::create('categories', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('parent_id')->unsigned()->nullable()->default(null);
            $table->foreign('parent_id')->references('id')->on('categories')->onUpdate('cascade')->onDelete('set null');
            $table->integer('order')->default(1);
            $table->string('name');
            $table->string('slug')->unique();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('categories');
    }
}

Posts Table


<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        // Create table for storing roles
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('author_id');
            $table->integer('category_id')->nullable();
            $table->string('title');
            $table->string('seo_title')->nullable();
            $table->text('excerpt');
            $table->text('body');
            $table->string('image')->nullable();
            $table->string('slug')->unique();
            $table->text('meta_description');
            $table->text('meta_keywords');
            $table->enum('status', ['PUBLISHED', 'DRAFT', 'PENDING'])->default('DRAFT');
            $table->boolean('featured')->default(0);
            $table->timestamps();

            //$table->foreign('author_id')->references('id')->on('users');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('posts');
    }
}

i make some changes on it:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AlterColumnCategoryIdOnPostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('posts', function (Blueprint $table) {
            $table->unsignedInteger('category_id')->nullable()->change();
            $table->foreign('category_id')
                ->references('id')
                ->on('categories')
                ->onUpdate('cascade')
                ->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('posts', function (Blueprint $table) {
            //
        });
    }
}
Activity icon

Started a new Conversation SQLSTATE[42S22]: Column Not Found: 1054 Unknown Column 'categories.id'

when i'm trying to make a search for all posts i got this error:

SQLSTATE[42S22]: Column not found: 1054 Unknown column 'categories.id' in 'where clause' (SQL: select * from `posts` where `categories`.`id` = `posts`.`category_id` and `name` LIKE %% or `body` LIKE % limit 5)

The Search Mehod:

    public static function search($search)
    {
        self::whereHas('posts', function (Builder $query) use ($search) {
            return $query->where('title', 'LIKE', '%' . $search . '%')
                ->orWhere('body', 'LIKE', '%', $search . '%')
                ->take(5)
                ->get();
        });
    }

** Search Query**

Category::search($this->search

any Ideas?

Activity icon

Started a new Conversation Backslash To Focus On Search Bar Using Alpine

i'm building website using alpinejs and i want to when the user hit backslash the cursor auto focus on search bar.

Note: i tried x-ref directive with $nextTick and nothing happened :)

any Help

Jun
01
5 months ago
Activity icon

Replied to The Command "PATH=$PATH:/usr/local/bin NODE_PATH=`npm Root -g` Node

Hey @flor Thanks for the reply.

i will give another shot by installing puppeteer

Activity icon

Started a new Conversation The Command "PATH=$PATH:/usr/local/bin NODE_PATH=`npm Root -g` Node

when i tried to generate a sitemap using laravel-sitemap by spatie team in localhost it gives me an empty sitemap.

    $path = public_path('/sitemap.xml');
    SitemapGenerator::create(env('APP_URL'))->writeToFile($path);

when upload the file into web server and tried to generate the sitemap it gives me this error:

The command "PATH=$PATH:/usr/local/bin NODE_PATH=`npm root -g` node '/path/to/project/vendor/spatie/browsershot/src/../bin/browser.js' '{"url":"https:\/\/coderflex.com\/","action":"content","options":{"args":[],"viewport":{"width":800,"height":600}}}'" failed. Exit Code: 1(General error) Working directory: /path/to/project/public Output: ================ Error Output: ================ internal/modules/cjs/loader.js:960 throw err; ^ Error: Cannot find module 'puppeteer' Require stack: - /path/to/project/vendor/spatie/browsershot/bin/browser.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:957:15) at Function.Module._load (internal/modules/cjs/loader.js:840:27) at Module.require (internal/modules/cjs/loader.js:1019:19) at require (internal/modules/cjs/helpers.js:77:18) at Object.<anonymous> (/path/to/project/vendor/spatie/browsershot/bin/browser.js:1:19) at Module._compile (internal/modules/cjs/loader.js:1133:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10) at Module.load (internal/modules/cjs/loader.js:977:32) at Function.Module._load (internal/modules/cjs/loader.js:877:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) { code: 'MODULE_NOT_FOUND', requireStack: [ '/path/to/project/vendor/spatie/browsershot/bin/browser.js' ] }

any ideas?

Activity icon

Replied to Turbolinks Can't Load Script After Visiting The Page

Thank you Martin, for giving me the hint!

Activity icon

Started a new Conversation Turbolinks Can't Load Script After Visiting The Page

I'm using turbolinks with laravel-livewire and i when visiting specific page the script within this page can't load until i refresh the page.

Any Ideas?

May
27
5 months ago
Activity icon

Awarded Best Reply on Make Loading State In SPA Mode

@topvillas Thank you for helping me about.

after debugging i found there is already progress bar at the top of the page injected automatically when the page load.

i can't see it because of the network speed.

when i'm switch the mode to slow 3G i can see it clearly.

Info: https://github.com/turbolinks/turbolinks#displaying-progress

Thank you again for you help.

Activity icon

Replied to Make Loading State In SPA Mode

@topvillas Thank you for helping me about.

after debugging i found there is already progress bar at the top of the page injected automatically when the page load.

i can't see it because of the network speed.

when i'm switch the mode to slow 3G i can see it clearly.

Info: https://github.com/turbolinks/turbolinks#displaying-progress

Thank you again for you help.

Activity icon

Started a new Conversation Make Loading State In SPA Mode

How can i make a loading state while Go from one page to another using livewire and turbolinks.

i saw in the loading state section in the docs but i can’t find any things related with this question.

any ideas?

Activity icon

Replied to GitHub Flavored Markdown Rendered

yes you are right, but the main question about the syntax highlighting with GitHub API.

this is what i'm confusing of.

May
26
5 months ago
Activity icon

Started a new Conversation GitHub Flavored Markdown Rendered

I'm using markdown inside my website and i use the Github Stylesheet to style the mardown text.

the question is: How to Deal with Github Flavored Markdown rendered for staying the code syntax using Github API

Any Ideas i will be appreciated. Thanks in advance

May
25
5 months ago
Activity icon

Awarded Best Reply on [Solved] Undefined Offset: 1 | Laravel Livewire

Updates:

I solved my problem by simply remove the @section('content') directive from register view because it's already injected [automatically] and wrap the whole code inside a div like so:

<div>
<div class="container mx-auto">
        <div class="flex flex-wrap justify-center">
            <div class="w-full max-w-sm">
                <div class="flex flex-col break-words bg-white border border-2 rounded shadow-md">

                    <div class="font-semibold bg-gray-200 text-gray-700 py-3 px-6 mb-0">
                        {{ __('Register') }}
                    </div>

                    <form class="w-full p-6" method="POST" wire:submit.prevent="register">

                        <div class="flex flex-wrap mb-6">
                            <label for="name" class="block text-gray-700 text-sm font-bold mb-2">
                                {{ __('Name') }}:
                            </label>

                            <input id="name" type="text" class="form-input w-full @error('name')  border-red-500 @enderror" wire:model="name" value="{{ old('name') }}" required autocomplete="name" autofocus>

                            @error('name')
                                <p class="text-red-500 text-xs italic mt-4">
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>

                        <div class="flex flex-wrap mb-6">
                            <label for="email" class="block text-gray-700 text-sm font-bold mb-2">
                                {{ __('E-Mail Address') }}:
                            </label>

                            <input id="email" type="email" class="form-input w-full @error('email') border-red-500 @enderror" wire:model="email" value="{{ old('email') }}" required autocomplete="email">

                            @error('email')
                                <p class="text-red-500 text-xs italic mt-4">
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>

                        <div class="flex flex-wrap mb-6">
                            <label for="password" class="block text-gray-700 text-sm font-bold mb-2">
                                {{ __('Password') }}:
                            </label>

                            <input id="password" type="password" class="form-input w-full @error('password') border-red-500 @enderror" wire:model="password" required autocomplete="new-password">

                            @error('password')
                                <p class="text-red-500 text-xs italic mt-4">
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>

                        <div class="flex flex-wrap mb-6">
                            <label for="password-confirm" class="block text-gray-700 text-sm font-bold mb-2">
                                {{ __('Confirm Password') }}:
                            </label>

                            <input id="password-confirm" type="password" class="form-input w-full" wire:model="password_confirmation" required autocomplete="new-password">
                        </div>

                        <div class="flex flex-wrap">
                            <button type="submit" class="inline-block align-middle text-center select-none border font-bold whitespace-no-wrap py-2 px-4 rounded text-base leading-normal no-underline text-gray-100 bg-blue-500 hover:bg-blue-700">
                                {{ __('Register') }}
                            </button>

                            <p class="w-full text-xs text-center text-gray-700 mt-8 -mb-4">
                                {{ __('Already have an account?') }}
                                <a class="text-blue-500 hover:text-blue-700 no-underline" href="{{ route('login') }}">
                                    {{ __('Login') }}
                                </a>
                            </p>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

i hope this help someone around.

Activity icon

Replied to [Solved] Undefined Offset: 1 | Laravel Livewire

Updates:

I solved my problem by simply remove the @section('content') directive from register view because it's already injected [automatically] and wrap the whole code inside a div like so:

<div>
<div class="container mx-auto">
        <div class="flex flex-wrap justify-center">
            <div class="w-full max-w-sm">
                <div class="flex flex-col break-words bg-white border border-2 rounded shadow-md">

                    <div class="font-semibold bg-gray-200 text-gray-700 py-3 px-6 mb-0">
                        {{ __('Register') }}
                    </div>

                    <form class="w-full p-6" method="POST" wire:submit.prevent="register">

                        <div class="flex flex-wrap mb-6">
                            <label for="name" class="block text-gray-700 text-sm font-bold mb-2">
                                {{ __('Name') }}:
                            </label>

                            <input id="name" type="text" class="form-input w-full @error('name')  border-red-500 @enderror" wire:model="name" value="{{ old('name') }}" required autocomplete="name" autofocus>

                            @error('name')
                                <p class="text-red-500 text-xs italic mt-4">
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>

                        <div class="flex flex-wrap mb-6">
                            <label for="email" class="block text-gray-700 text-sm font-bold mb-2">
                                {{ __('E-Mail Address') }}:
                            </label>

                            <input id="email" type="email" class="form-input w-full @error('email') border-red-500 @enderror" wire:model="email" value="{{ old('email') }}" required autocomplete="email">

                            @error('email')
                                <p class="text-red-500 text-xs italic mt-4">
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>

                        <div class="flex flex-wrap mb-6">
                            <label for="password" class="block text-gray-700 text-sm font-bold mb-2">
                                {{ __('Password') }}:
                            </label>

                            <input id="password" type="password" class="form-input w-full @error('password') border-red-500 @enderror" wire:model="password" required autocomplete="new-password">

                            @error('password')
                                <p class="text-red-500 text-xs italic mt-4">
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>

                        <div class="flex flex-wrap mb-6">
                            <label for="password-confirm" class="block text-gray-700 text-sm font-bold mb-2">
                                {{ __('Confirm Password') }}:
                            </label>

                            <input id="password-confirm" type="password" class="form-input w-full" wire:model="password_confirmation" required autocomplete="new-password">
                        </div>

                        <div class="flex flex-wrap">
                            <button type="submit" class="inline-block align-middle text-center select-none border font-bold whitespace-no-wrap py-2 px-4 rounded text-base leading-normal no-underline text-gray-100 bg-blue-500 hover:bg-blue-700">
                                {{ __('Register') }}
                            </button>

                            <p class="w-full text-xs text-center text-gray-700 mt-8 -mb-4">
                                {{ __('Already have an account?') }}
                                <a class="text-blue-500 hover:text-blue-700 no-underline" href="{{ route('login') }}">
                                    {{ __('Login') }}
                                </a>
                            </p>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

i hope this help someone around.

May
24
6 months ago
Activity icon

Replied to Compile Blade View Syntax To HTML

look at this answers from stackoverflow

Activity icon

Replied to [Solved] Undefined Offset: 1 | Laravel Livewire

No it just a typo here :)

Activity icon

Started a new Conversation [Solved] Undefined Offset: 1 | Laravel Livewire

i got this error when i'm trying to build the register page using **laravel livewire**

 (View: /path/to/files/sitename/vendor/livewire/livewire/src/Macros/livewire-view.blade.php)

Route

Route::livewire('/register', 'auth.register')->name('register');

Register View


@section('content')
    <div class="container mx-auto">
        <div class="flex flex-wrap justify-center">
            <div class="w-full max-w-sm">
                <div class="flex flex-col break-words bg-white border border-2 rounded shadow-md">

                    <div class="font-semibold bg-gray-200 text-gray-700 py-3 px-6 mb-0">
                        {{ __('Register') }}
                    </div>

                    <form class="w-full p-6" method="POST" wire:submit.prevent="register">

                        <div class="flex flex-wrap mb-6">
                            <label for="name" class="block text-gray-700 text-sm font-bold mb-2">
                                {{ __('Name') }}:
                            </label>

                            <input id="name" type="text" class="form-input w-full @error('name')  border-red-500 @enderror" wire:model="name" value="{{ old('name') }}" required autocomplete="name" autofocus>

                            @error('name')
                                <p class="text-red-500 text-xs italic mt-4">
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>

                        <div class="flex flex-wrap mb-6">
                            <label for="email" class="block text-gray-700 text-sm font-bold mb-2">
                                {{ __('E-Mail Address') }}:
                            </label>

                            <input id="email" type="email" class="form-input w-full @error('email') border-red-500 @enderror" wire:model="email" value="{{ old('email') }}" required autocomplete="email">

                            @error('email')
                                <p class="text-red-500 text-xs italic mt-4">
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>

                        <div class="flex flex-wrap mb-6">
                            <label for="password" class="block text-gray-700 text-sm font-bold mb-2">
                                {{ __('Password') }}:
                            </label>

                            <input id="password" type="password" class="form-input w-full @error('password') border-red-500 @enderror" wire:model="password" required autocomplete="new-password">

                            @error('password')
                                <p class="text-red-500 text-xs italic mt-4">
                                    {{ $message }}
                                </p>
                            @enderror
                        </div>

                        <div class="flex flex-wrap mb-6">
                            <label for="password-confirm" class="block text-gray-700 text-sm font-bold mb-2">
                                {{ __('Confirm Password') }}:
                            </label>

                            <input id="password-confirm" type="password" class="form-input w-full" wire:model="password_confirmation" required autocomplete="new-password">
                        </div>

                        <div class="flex flex-wrap">
                            <button type="submit" class="inline-block align-middle text-center select-none border font-bold whitespace-no-wrap py-2 px-4 rounded text-base leading-normal no-underline text-gray-100 bg-blue-500 hover:bg-blue-700">
                                {{ __('Register') }}
                            </button>

                            <p class="w-full text-xs text-center text-gray-700 mt-8 -mb-4">
                                {{ __('Already have an account?') }}
                                <a class="text-blue-500 hover:text-blue-700 no-underline" href="{{ route('login') }}">
                                    {{ __('Login') }}
                                </a>
                            </p>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
@endsection

Controller


<?php

namespace App\Http\Livewire\Auth;

use App\User;
use Livewire\Component;

class Register extends Component
{
    public $form = [
        'name'  => '',
        'email' => '',
        'password'  => '',
        'password_confirmation' => '',
    ];

    public function validated($field)
    {
        $this->validateOnly($field, [
            'form.name'  => 'required|string|max:30|min:2',
            'form.email' => 'required|email|max:100',
            'form.password'  => 'required|confirmed',
        ]);
    }


    public function register()
    {
        $this->validate([
            'form.name'  => 'required|string|max:30|min:2',
            'form.email' => 'required|email|max:100',
            'form.password'  => 'required|confirmed',
        ]);

        User::create($this->form);

        return redirect(route('login'));
    }


    public function render()
    {
        return view('livewire.auth.register');
    }
}

User Model

<?php

namespace App;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable implements MustVerifyEmail
{
    use Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];

    public function comments()
    {
        return $this->hasMany(Comment::class);
    }

    public function setPasswordAttribute($value)
    {
        $this->attributes['password'] = bcrypt($value);
    }

}

any Ideas?