Table Row in Laravel becomes clickable link - laravel

Question

I have a question about how to make a table row in Laravel become a clickable link. I want to when the user inputs a link in the form and click save. Then the title in the table will become clickable so when the user clicks on the title, it will lead them to the page. So like in the Input Form picture, I have a field called "Hyperlink" to get the link and save it in the database. When the user clicks the button "Save", the post will be displayed in the "Post Page". I want the "Title" column in the "Post Page" to become clickable, so when the user clicks on the "Tile" (Test Link), it will lead them to the link which they did input in the "Input Form".
Input Form
Post Page
posts.blade.php
<tbody>
#foreach($posts as $post)
#if( $post->published =='publish')
<tr href="{{$post->hyperlink}}">
<td class="border px-4 py-2">{{ $post->id }}</td>
<td class="border px-4 py-2">{{ $post->title }}</td>
<td class="border px-4 py-2">{{ $post->body }}</td>
<td class="border px-4 py-2">{{ $post->author }}</td>
<td class="border px-4 py-2">{{$post->published}} </td>
<td class="border px-4 py-2">
<button wire:click="edit({{ $post->id }})" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Edit</button>
<button wire:click="delete({{ $post->id }})" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Delete</button>
</td>
</tr>
#endif
#endforeach
</tbody>
create.blade.php
<form>
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="">
<div class="mb-4">
<label for="exampleFormControlInput1" class="block text-gray-700 text-sm font-bold mb-2">Title:</label>
<input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput1" placeholder="Enter Title" wire:model="title">
#error('title') <span class="text-red-500">{{ $message }}</span>#enderror
</div>
<div class="mb-4">
<label for="exampleFormControlInput2" class="block text-gray-700 text-sm font-bold mb-2">Body:</label>
<textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput2" wire:model="body" placeholder="Enter Body"></textarea>
#error('body') <span class="text-red-500">{{ $message }}</span>#enderror
</div>
<div class="mb-4">
<label for="exampleFormControlInput2" class="block text-gray-700 text-sm font-bold mb-2">Author:</label>
<textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput2" wire:model="author" placeholder="Enter Author"></textarea>
#error('author') <span class="text-red-500">{{ $message }}</span>#enderror
</div>
<div class="mb-4">
<label for="exampleFormControlInput2" class="block text-gray-700 text-sm font-bold mb-2">Hyperlink:</label>
<textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput2" wire:model="hyperlink" placeholder="Enter link here"></textarea>
#error('hyperlink') <span class="text-red-500">{{ $message }}</span>#enderror
</div>
<div class="mb-4">
<label for="check" class="form-check-label">Publish:</label>
<input class="form-check-input" id="publish" value="publish" type="checkbox" name="published" wire:model="published">Publish</input>
<input class="form-check-input" id="no-publish" value="no-publish" type="checkbox" name="published" wire:model="published">No Publish</input>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
<button wire:click.prevent="store()" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-green-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5">
Save
</button>
</span>
<span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
<button wire:click="closeModal()" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5">
Cancel
</button>
</span>
</form>
Post Schema
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->string('body');
$table->string('author');
$table->boolean('published')->default(0);
$table->string('hyperlink');
//create the relationship between a task and the user that created it
$table->integer('user_id')->unsigned()->index();
$table->timestamps();
});
}
app/Http/Livewire/Posts.php
use Livewire\Component;
use App\Models\Post;
use App\Models\User;
class Posts extends Component
{
public $posts, $title, $body, $post_id, $author, $published, $hyperlink;
public $isOpen = 0;
/**
* The attributes that are mass assignable.
*
* #var array
*/
public function render()
{
$user = auth()->user();
$this->posts = $user->posts;
return view('livewire.posts');
}
/**
* The attributes that are mass assignable.
*
* #var array
*/
public function create()
{
$this->resetInputFields();
$this->openModal();
}
/**
* The attributes that are mass assignable.
*
* #var array
*/
public function openModal()
{
$this->isOpen = true;
}
/**
* The attributes that are mass assignable.
*
* #var array
*/
public function closeModal()
{
$this->isOpen = false;
}
/**
* The attributes that are mass assignable.
*
* #var array
*/
private function resetInputFields(){
$this->title = '';
$this->body = '';
$this->post_id = '';
$this->author = '';
$this->published = '';
$this->hyperlink = '';
}
/**
* The attributes that are mass assignable.
*
* #var array
*/
public function store()
{
$this->validate([
'title' => 'required',
'body' => 'required',
'author' => 'required',
'published' => 'required',
'hyperlink' => 'required'
]);
Post::updateOrCreate(['id' => $this->post_id], [
'title' => $this->title,
'body' => $this->body,
'author' => $this->author,
'published' => $this->published,
'hyperlink' => $this->hyperlink
]);
Page::updateOrCreate(['id' => $this->post_id], [
'title' => $this->title,
'body' => $this->body,
'publish' => $this->published
]);
session()->flash('message',
$this->post_id ? 'Post Updated Successfully.' : 'Post Created Successfully.');
$this->closeModal();
$this->resetInputFields();
}
/**
* The attributes that are mass assignable.
*
* #var array
*/
public function edit($id)
{
$post = Post::findOrFail($id);
$this->post_id = $id;
$this->title = $post->title;
$this->body = $post->body;
$this->author = $post->author;
$this->published = $post->published;
$this->hyperlink = $post->hyperlink;
$this->openModal();
}
/**
* The attributes that are mass assignable.
*
* #var array
*/
public function delete($id)
{
Post::find($id)->delete();
session()->flash('message', 'Post Deleted Successfully.');
}
}
Post Model
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Auth;
class Post extends Model
{
use HasFactory;
protected $fillable = [
'title', 'body', 'author', 'published', 'hyperlink'
];
public function user(): \Illuminate\Database\Eloquent\Relations\BelongsTo
{
return $this->belongsTo(User::class);
}
protected static function boot()
{
parent::boot();
static::creating(function ($model) {
$model->user_id = Auth::id();
});
static::updating(function ($model) {
$model->user_id = Auth::id();
});
}
}

Answer 1

I solve something similar and expose this to you like one way to do it.
<td class="border px-4 py-2" onclick="window.location='{{ route('show.companies', ['company' => $company]) }}'" style="cursor: pointer;">{{ $post->title }}</td>
As you can see, when the column title is clicked, it's going to resume the function that I implement in the route...in this case act like a link to another component with data binding.