CodeWeb

How To Call Social Link In The Loop

code_web — Wed, 10 Apr 2024 05:11:25 +0000

Calling similar tags or input fields in a loop. Let us skip the repeating input text box with a PHP loop in Laravel.

Don’t just paste if you can use the loop

Suppose you have a database table called “socialtables” and it has 5 column names followed by numbers to let the user to select which social media they want to save.

Soc the database structure is like this:

socialtables
             |social_icon_1|
             |social_link_1|
             |social_icon_2|
             |social_link_2|
             |social_icon_3|
             |social_link_3|
             |social_icon_4|
             |social_link_4|
             |social_icon_5|
             |social_link_5|

As you in the above example, socialtables database table has five social profiles to be flooded with social site links and icons. Only the numbers differ. So we have decided to call the numbers using a loop and keep the rest.

Social site data we are going to save

social_icon_1 = [image/icon]

social_linnk_1 = https://fb.com/pagename

How the user interface will look like?

We will let the user select the social icons to choose from and then they can enter the site links. Let the admin/your client decide what icons to display.

For this, we will need predefined data to be flooded. For this, you can use a database filled with data or you can use a Laravel controller.

Use the array in the controller

public function sitesettings()
    {
        $socialicons = [
            'facebook' => [
                'icon' => ''
            ],
            'discord' => [
                'icon' => ''
            ],
            'twitter' => [
                'icon' => ''
            ],
            'github' => [
                'icon' => ''
            ],
            'dribbble' => [
                'icon' => ''
            ],
            'youtube' => [
                'icon' => ''
            ],
            'instagram' => [
                'icon' => ''
            ],
        ];
        
        $socialtables = Socialtable::first();
        return view('admin.settings', compact('socialtables', 'socialicons'));
    }

In the above is svg icon we are using to choose from the same will appear in the footer area. You can use predefined images. For SVG icons visit Bootstrap icons or Heroicons.

The structure is pretty simple: One variable has an array and each of them has one or two variables stored in it. So it in short looks like this:

$socialicons = [
     'facebook' => [
                'icon' => ''
                   ],
];

Laravel blade file to 5 loops of the same input box

Now the Laravel blade file is named settings and it is inside the admin folder, so it looks like admin.settings.

Now place this code that will show five main loops with a dropdown selection and input text box.

@for ($count = 1; $count <= 5; $count++)
                
                    
                    
                
            @endfor

You see, we have used one select tag and one input tag for five text fields.

In the above code, we have used a double exclamation mark !! with single curly brackets {!! $var !!}. This means to run the code stored in the variable. Because we are using svg icons in HTML format that need to be executed.

Main parts in the above code

For loop to count and store numbers in $count.
Calling social_icon_{{$count}} and social_link_{{$count}} respectively.
Foreach loop to get the social icons from the controller we stored in an array $socialicons. Here we can call platforms for the site name we defined and data to call the icons.

Livewire Error Fix: “Cannot assign null to property $name”

code_web — Wed, 03 Apr 2024 05:49:26 +0000

Resolving Null Value Assignment in Livewire Components

Troubleshooting “Cannot assign null to property $name”

What is actually the error?

Laravel 10 with the breeze and livewire project. When customizing the user profile area with adding extra fields like a unique username and about the field.

Cannot assign null to property Livewire\Volt\Component@anonymous::$name of type string

An error appears for the update-profile-information-form.blade.php file, in the mount function.

public function mount(): void
    {
        $this->name = Auth::user()->name;
        $this->email = Auth::user()->email;
    }

Above the name field is empty but we are using it. How do we make it nullable?

Solution

You just need to make the default value to show if there is a null field in the database.

public function mount(): void
    {
        $this->name = Auth::user()->name ?? '';
        $this->email = Auth::user()->email ?? '';
    }

Or make it more cleaner:

public function mount(): void
    { 
        $user = Auth::user();
        $this->name = $user->name ?? '';
        $this->email = $user->email ?? '';
    }

Seeding Inside Migration File

code_web — Sat, 27 Jan 2024 10:03:58 +0000

In Laravel, you can seed your database with data using seed classes. All seed classes are stored in the database/seeders directory. By default, a DatabaseSeeder class is defined for you.

Here we are talking about the initial data seeding along with the migration file. So you will get the first data just after migrating the database file.

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

    DB::table('table_name')->insert([
        'name' => 'John Doe',
        'short' => 'Short intro goes here...',
        'description' => 'All the details goes here...',
    ]);
}

In the above example, the up the method creates a table named table_name with columns id, name, and timestamps. After creating the table, it inserts three rows of data into the table using the insert method of the DB facade.

How To Show Checkbox Value Checked

code_web — Sat, 20 Jan 2024 06:56:04 +0000

In this post, we will work on checkbox status while updating the post. This example is very similar to other if-else statements.

Your table column will be false by default. It will store 0 in the database if not checked.

$table->boolean('visible')->default(false);

For the entry form it will be something like this:

Show checkbox checked

Now the main part here is to show checked when updating if there is a true value store that is 1 and not to show checked if there is a false value that is 0.

Example 1

Simple Laravel checkbox selected with the ternary operator

visible ? 'checked' : '' }}>

Laravel checkbox selected with the ternary operator and compare boolean values.

visible==1 ? 'checked' : '' }}>

Another way to check the same thing is with the true or false values we have used above for boolean values.

visible==true ? 'checked' : '' }}>

Example 2

There are other ways to do the same. You can always use the if-else statement to show if something is true or false. If-else statement will be messy and why not use the better few lines to complete the long path?

We can use the same statement within the input tag. Select the checkbox with the @if blade directives.

visible) checked @endif>

The thing with a shorter version by @checked blade directives.

visible)>

Dynamic Page Reordering with Laravel Livewire and Up/Down Arrows

code_web — Thu, 18 Jan 2024 06:19:36 +0000

Dynamic Page Reordering with Laravel Livewire and Up/Down Arrows.

Enhance the visual appeal and organization of your website by incorporating a neatly arranged list/page/menu in the footer area. You have the option to display it in alphabetical order or based on unique identifiers. Strategically placing vital links at the top can captivate user attention, while the rest gracefully follow below. This practice is particularly beneficial when working on expansive projects, as it ensures that key links are showcased prominently and arranged in a meaningful order, contributing to a more engaging and user-friendly experience.

Reordering the list using Laravel Livewire

Here we are not using any Laravel packages for changing the position of the list. Just the arrows to move one step up or down to rearrange the position.

If you like to use the packages get any of them:

For this example, we are using the page model. So you have to add the position column in the page table. $table->unsignedInteger() because we do not want the negative numbers to be stored.

/**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('pages', function (Blueprint $table) {
            $table->id();
            $table->unsignedInteger('position')->nullable();
            $table->string('title');
            $table->text('description');

            $table->timestamps();
        });
    }

Make Livewire component: php artisan make:livewire page-list

Implement the logic:

// app/Http/Livewire/PageList.php

class PageList extends Component
{
    public $pages = [];

    public function mount()
    {
        $this->pages = Page::orderBy('position')->get();
    }

    public function moveUp($pageId)
    {
        $page = Page::find($pageId);
        $previousPage = Page::where('position', '<', $page->position)->orderBy('position', 'desc')->first();

        if ($previousPage) {
            $tempPosition = $page->position;
            $page->position = $previousPage->position;
            $previousPage->position = $tempPosition;
            $page->save();
            $previousPage->save();
            $this->pages = Page::orderBy('position')->get();
        }
    }

    public function moveDown($pageId)
    {
        $page = Page::find($pageId);
        $previousPage = Page::where('position', '>', $page->position)->orderBy('position', 'asc')->first();

        if ($previousPage) {
            $tempPosition = $page->position;
            $page->position = $previousPage->position;
            $previousPage->position = $tempPosition;
            $page->save();
            $previousPage->save();
            $this->pages = Page::orderBy('position')->get();
        }
    }

    public function render()
    {
        return view('livewire.page-list');
    }
}

Create the blade view:


        @foreach ($pages as $page)
            
        @endforeach
    
    
        
            Title
            Position
            Actions
        
    
    
                {{ $page->title }}
                {{ $page->position }}
                
                    @if ($page->position > 1)
                      
                    @endif
                    @if ($page->position < $pages->max('position'))
                      
                    @endif

Title	Position	Actions
{{ $page->title }}	{{ $page->position }}	@if ($page->position > 1) @endif @if ($page->position < $pages->max('position')) @endif

Include the component in your view:

// In your main view or layout


    @livewire('page-list')

Creating Search Function

code_web — Wed, 20 Dec 2023 15:27:26 +0000

This is how you can use the search function used in the Laravel project.

Search the post and show all the results that match its title or description.

public function search(Request $request)
    {
        $this->validate($request, [
            'q' => 'required',
        ]);
        $posts = Post::where('title', 'like', '%' . $request->q . '%')->orWhere('description', 'like', '%' . $request->q . '%')->paginate(20);
    
        return view('pages.search', compact('posts'))->with('i', (request()->input('page', 1) - 1) * 20);
    }

How To Delete Old File While Uploading New

code_web — Fri, 15 Dec 2023 15:28:38 +0000

How to delete older file/image when you update the post?

To make the folder clean and remove all unused file/image from the folder, delete old files.

A Step-by-Step Guide to Updating Posts and Cleaning Up Images in Laravel

Learn How to Update Your Posts and Delete Unused Images in Laravel.

As your website grows and you create more and more blog posts, you might face some challenges in managing your content and images.

For example, you might want to update your old posts with new information or images, but you don’t want to leave behind the old images that are no longer relevant or used. These unused images can take up valuable space in your server and affect your website performance and loading speed.

Solution: Laravel provides us with a great solution to keep our blog folder clean and gives us the control to manage all the unnecessary files. When we update our old posts, we can check and delete the old files if we upload new ones.

So, we will create a function where we will check if the post has an image already. Then the next actions will depend on it.

Check if the post has an image
If yes, then delete and upload a new one (if the user wants)
If no, then upload a new image (if the user wants)
The field could be left empty as per the user’s requirement

Check if the file exists

Let’s see the code to check if there is already a file available in the folder.

        if ($request->hasFile('image')) {
            $oldfile = public_path('images/post_img/') . $post->image;
            $filename = 'image' . '_' .time() . '.' . $request->file('image')->getClientOriginalExtension();
            if(File::exists($oldfile)){
                File::delete($oldfile);
            }

We store the file path and the file name in a variable called $oldfile. This will make it easy to use the long file path if we need it for heavy actions.

Basically what the above code means: We check if the user is uploading a file. If yes, then we name it and then check if there is already a file exists. Here again, if the condition is yes, we will delete it and then update it with $post->update();

If the request has a file, change its name, and store it in a variable called $filename
If there is already a file (old file), remove it if(File::exists($oldfile)){File::delete($olderfile);}

Function for deleting old image and updating with new image

use File;

public function update(Request $request, Post $post)
    {
        $validatedData = $this->validate($request, [
            'title' => 'required',
            'category_id' => 'required',
            'description' => 'required',
            'image' => 'sometimes|mimes:jpeg,jpg,gif,png'
        ]);

        if ($request->hasFile('image')) {
            $oldfile = public_path('images/post_img/') . $post->image;
            $filename = 'image' . '_' .time() . '.' . $request->file('image')->getClientOriginalExtension();
            if(File::exists($oldfile)){
                File::delete($oldfile);
            }

            $request->file('image')->storeAs('post_img', $filename, 'public');

            $validatedData['image'] = $filename;
        }


    
        $post->update($validatedData);

        return redirect()->back()->withMessage('Your updated post is ready now!');
    }

Email Validation And Message In Laravel

code_web — Mon, 04 Sep 2023 06:47:26 +0000

//email validation and message
	//controller file
	public function store(Request $request)
	{
		$this->validation($request, ['email'=>'required|email']);
	}
	//Now on view page
	@if($error->any())
		@foreach($error->all() as $error)
			{{ $error }}
		@endforeach
	@endif

Laravel Route To Open Pages

code_web — Mon, 04 Sep 2023 06:39:54 +0000

Laravel function to open pages is simple. A demo function you will find on web.php for welcome page.

Simply you can copy paste the same to open any other pages.

        //Opens welcome blade page
	Route::get('/', function () {
	return view('welcome');
	});
	
	//Opens pages/about page
	Route::get('/about', function(){
		return view('pages.about');
	});
	
	//Opens custom pages
	Route::get('/users/{id}', function($id){
		return 'This is user '.$id;
	});

http://localhost/livewire/livewire.js was not found on this server

code_web — Mon, 13 Feb 2023 10:32:53 +0000

You just installed livewire to your existing laravel project. And came to net::ERR_ABORTED 404 (Not Found) message.

Or by you came to know the …livewire/livewire.js file is missing by inspecting.

Livewire does not work try basic steps.

What actually happened?

You did not complete the full installation steps instructed in the official document here.

Publish frontend assets by php artisan:livewire --assets