Forem: webfuelcode

Like and Unlike Button with Alpine: Laravel

webfuelcode — Wed, 13 Nov 2024 06:16:08 +0000

Like and dislike buttons can be added to the Laravel project in a variety of ways. You can also use a simple form

to refresh the website, although this may not feel professional for some.

So we use JavaScript to create quick buttons similar to those found on Facebook and YouTube.

When using Laravel, we have several ways for accessing such functions. You can always get JS, but Laravel already includes a short version framework that allows you to avoid the JS setup with Laravel.

Livewire: full stack framework, that do all the JS functions in Laravel. Good for quick search, action without refreshing the page.
Alpine: Another one framework lighter than Livewire. But not always suitable for your heavy tasks. But does a lot for light or short projects.

How to get like and dislike button in Laravel with Alpine?

You have Laravel and installed breeze with below commands, will give you alpine installed.

While Laravel itself doesn't directly include AlpineJS, Laravel Breeze, a popular authentication scaffolding package, does integrate AlpineJS by default. This allows you to quickly create interactive user interfaces without the need for a full-fledged JavaScript framework like Vue or React.

composer create-project laravel/laravel like-app

cd like-app

composer require laravel/breeze --dev

php artisan breeze:install

php artisan migrate
npm install
npm run dev

The you will need to build the relationship between models. Like here we are going to set like by logged in users and they can remove it (no dislike button).

Another point is that you can use this to keep any kind of post. As we are here showinf you the blog like task but the same table (likes) can keep others too. Becasu the structre is:

Schema::create('likes', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('user_id'); // User who liked the item
            $table->morphs('likeable'); // Creates likeable_id and likeable_type

            // Foreign key constraint for user_id
            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');

            // Unique constraint to ensure a user can like an item only once
            $table->unique(['user_id', 'likeable_id', 'likeable_type']);
            $table->timestamps();
        });

The column 'likeable_type' will manage all similar ids to store.

So if the blog id (1), post id (1), or offer id (1). No matter the like table will save all, so you do not need to create different tables to keep the likes.

Set the relationship between models

In blog model (blog.php) put this:

public function likes()
    {
        return $this->morphMany(Like::class, 'likeable');
    }

We will keep the record of user like and gonna check if they already liked it or not, so the action will depend on their previous act. In user model (user.php) put this:

public function likes()
    {
        return $this->hasMany(Like::class);
    }

    public function hasLiked($blog)
    {
        return $this->likes()->where('likeable_id', $blog->id)
                            ->where('likeable_type', Blog::class)
                            ->exists();
    }

One more model is like model (like.php):

public function likeable()
    {
        return $this->morphTo();
    }

The blog.blade.php will have a button to show like and count. Put this code where ever you wanna show the likes.

<div x-data="{ liked: {{ json_encode(auth()->user()->hasLiked($blog)) }}, likesCount: {{ $blog->likes->count() }} }">
                                                <button
                                                    @click="
                                                        fetch('{{ route('blogs.toggleLike', $blog->slug) }}', {
                                                            method: 'POST',
                                                            headers: {
                                                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                                                'Content-Type': 'application/json'
                                                            },
                                                            body: JSON.stringify({})
                                                        })
                                                        .then(response => response.json())
                                                        .then(data => {
                                                            liked = data.liked;
                                                            likesCount = data.likesCount;
                                                        });
                                                    "
                                                    :class="{ 'text-blue-500': liked }"
                                                >
                                                    <span x-text="liked ? 'Unlike' : 'Like'"></span>
                                                </button>
                                                <span x-text="likesCount"></span> likes
                                            </div>

Now add function to handle like action this will check if the user has already like it or not. Here I have set the blog to open with slug not the id. For that I have used eloquent-sluggable by cviebrock. BlogController.php:

public function show(Blog $blog)
    {
        return view('show.blog', compact('blog'));
    }

public function toggleLike(Blog $blog)
    {
        $user = Auth::user();

        if ($user->hasLiked($blog)) {
            $blog->likes()->where('user_id', $user->id)->delete();
            $liked = false;
        } else {
            $blog->likes()->create(['user_id' => $user->id]);
            $liked = true;
        }

        return response()->json([
            'liked' => $liked,
            'likesCount' => $blog->likes()->count()
        ]);
    }

Now the route, web.php:

Route::post('/blog/{blog}/like', [BlogController::class, 'toggleLike'])->name('blogs.toggleLike');

Can You Really Host Laravel on Shared Hosting?

webfuelcode — Thu, 03 Oct 2024 11:27:30 +0000

Laravel 11 introduces numerous updates, and I opted to utilize Tailwind CSS due to its readily available theme upon installation.

Code-ready setups are generally preferable. However, utilizing older versions of Bootstrap can present challenges if project requirements are not carefully considered. For instance, the order-md-1 class, which does not function in older versions, has been a frequent source of error in my experience.

Tailwind CSS was selected due to its comprehensive functionality compared to Bootstrap, eliminating the need for additional JavaScript libraries. This feature set was a primary motivator for exploring Tailwind CSS once.

It is a separate matter that the production file must be executed upon completion of all other tasks.

Can you run a Laravel project on shared hosting?

The simple answer is yes. I was curious about placing the tailwind production file if I go to host on a shared environment.

In the previous version of Laravel and using Bootstrap, we just moved the file from the public folder to the root folder. Then update the paths in the index file.

And it is done. In some instances, clearing the cache or adjusting the PHP version was necessary. In this particular case, switching to a different PHP version resolved the problem.

The same thing still works but I was stuck on Tailwind CSS and the style was broken. So I tried different methods.

HTACCESS

The solution is still the same. But this never worked for me on older versions and Bootstrap.

But this time I had no option. Because the Tailwind does not work on Laravel 11, so I decided to keep all the files in their places and create .htaccess file in the root.

And all worked properly. This was the most simple task to start with Laravel.

Copy this

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ public/$1 [L]

How To Delete Old Image While Updating The Post

webfuelcode — Sat, 16 Dec 2023 06:06:18 +0000

The Laravel project can go and run well without touching the older files. For this, you will use the simple update function and update with the new text entered by the user.

The problem may occur when you grow and have thousands of images and files that are not in use.

The site will take time to load and at this time we know the power of fast-loading websites and how it impacts user performance.

Check if there is a file

If there is already a file we will remove it and update it with a new one. Or we can just leave to keep the older if the post has one.

        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);
            }

Full update function

Complete the update function by validating the title, description, category id, and image field.

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!');
    }

Post: How To Delete Old File While Uploading New

Laravel filesystems storage path

webfuelcode — Wed, 09 Mar 2022 14:20:44 +0000

I personally stuck on the point where I created projects and forgot to change the path from storage to public. Actually, I wanted to store the file(images) in the image folder that was created in the root.

This is what we see in the filesystems.php file

'disks' => [

        'local' => [
            'driver' => 'local',
            'root' => storage_path('app'),
        ],

        'public' => [
            'driver' => 'local',
            'root' => storage_path('img'),
            'url' => env('APP_URL').'/img',
            'visibility' => 'public',
        ],

        's3' => [
            'driver' => 's3',
            'key' => env('AWS_ACCESS_KEY_ID'),
            'secret' => env('AWS_SECRET_ACCESS_KEY'),
            'region' => env('AWS_DEFAULT_REGION'),
            'bucket' => env('AWS_BUCKET'),
            'url' => env('AWS_URL'),
        ],

    ],

Making your own way to stare the images. You can change the path by ...

'public' => [
            'driver' => 'local',
            'root' => storage_path('img'),
            'url' => env('APP_URL').'/img',
            'visibility' => 'public',
        ],

In the 'root' => storage_path('img), You can change it like these

base_path();    // '/var/www/mysite'
app_path();     // '/var/www/mysite/app'
storage_path(); // '/var/www/mysite/storage'

This post is just a help and it is available on StackOver: https://stackoverflow.com/questions/14631436/laravel-base-path

If Else Condition For URL In Laravel

webfuelcode — Fri, 28 May 2021 05:36:02 +0000

It will add "active" class if the URL matches with "/coupon/all"

<ul class="list-group">
       <a href="{{route('link')}}" class="list-group-item {{ Request::is('/coupons/all') ? 'active' : '' }}">Show all</a>
</ul>

Another method with using laravel if else

@if(Request::url() === 'your url')
//code
@endif

Laravel Check, In Controller If The User Has Liked It

webfuelcode — Sat, 13 Mar 2021 15:04:37 +0000

Laravel function to check if the user has already added(liked, followed...) the post.

If he did, then remove otherwise add it.

Here suppose post like and it is a pivot table. First, you check if the user has already liked the post and then the action will depend on it. If they liked, the same link will remove it otherwise it will add it to the database.
Check If The User Has Liked The Post In Laravel Controller

public function saveLike(Request $request)
    {
        $likecheck = Like::where(['user_id'=>Auth::id(),'thread_id'=>$request->id])->first();
        if($likecheck){
            Like::where(['user_id'=>Auth::id(),'thread_id'=>$request->id])->delete();
            return 'delete';
        }
        else{
            $like = new Like;
            $like->user_id = Auth::id();
            $like->thread_id = $request->id;
            $like->save();
        }
    }

How To Create Symlink For Laravel Website

webfuelcode — Tue, 02 Mar 2021 05:26:07 +0000

The process to create a symlink for laravel app in cPanel is simple.

Just create a file and fill it, then run it. And you are done. You will see a storage folder in the public folder(wherever you like to create a symlink).

Name the file whatever. Like here we call it "symlink.php"
Now fill the file with these.

<?php
symlink('/home/.../classific.gopickhost.com/classific/storage/app/public', '/home/.../classific.gopickhost.com/storage');

Run this file. Just call the file in your browser address bar.

Ex. Call gopickhost.com/symlink.php or gopickhost.com/dirname/symlink.php

Suppose the "Classific" is the new subdomain and the folder. So, you will tell which folder should be created a copy(symlink). Make sure you have entered the correct path.

Basically you are saying in this file.
symlink('from_folder', 'to_folder');