title: Table Row in Laravel becomes clickable link
body: <p>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 &quot;Hyperlink&quot; to get the link and save it in the database. When the user clicks the button &quot;Save&quot;, the post will be displayed in the &quot;Post Page&quot;. I want the &quot;Title&quot; column in the &quot;Post Page&quot; to become clickable, so when the user clicks on the &quot;Tile&quot; (Test Link), it will lead them to the link which they did input in the &quot;Input Form&quot;.</p>
  <p>Input Form</p>
  <p><a href="https://i.stack.imgur.com/p09WV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p09WV.png" alt="enter image description here" /></a></p>
  <p>Post Page</p>
  <p><a href="https://i.stack.imgur.com/WUnwY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WUnwY.png" alt="enter image description here" /></a></p>
  <p>posts.blade.php</p>
  <pre><code>     &lt;tbody&gt;
              @foreach($posts as $post)
                  @if( $post-&gt;published =='publish')
                  &lt;tr href=&quot;{{$post-&gt;hyperlink}}&quot;&gt;
                      &lt;td class=&quot;border px-4 py-2&quot;&gt;{{ $post-&gt;id }}&lt;/td&gt;
                      &lt;td class=&quot;border px-4 py-2&quot;&gt;{{ $post-&gt;title }}&lt;/td&gt;
                      &lt;td class=&quot;border px-4 py-2&quot;&gt;{{ $post-&gt;body }}&lt;/td&gt;
                      &lt;td class=&quot;border px-4 py-2&quot;&gt;{{ $post-&gt;author }}&lt;/td&gt;
                      &lt;td class=&quot;border px-4 py-2&quot;&gt;{{$post-&gt;published}} &lt;/td&gt;
                      &lt;td class=&quot;border px-4 py-2&quot;&gt;
                          &lt;button wire:click=&quot;edit({{ $post-&gt;id }})&quot; class=&quot;bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded&quot;&gt;Edit&lt;/button&gt;
                          &lt;button wire:click=&quot;delete({{ $post-&gt;id }})&quot; class=&quot;bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded&quot;&gt;Delete&lt;/button&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  @endif
              @endforeach
       &lt;/tbody&gt;
  </code></pre>
  <p>create.blade.php</p>
  <pre><code>&lt;form&gt;
              &lt;div class=&quot;bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4&quot;&gt;
                  &lt;div class=&quot;&quot;&gt;
                      &lt;div class=&quot;mb-4&quot;&gt;
                          &lt;label for=&quot;exampleFormControlInput1&quot; class=&quot;block text-gray-700 text-sm font-bold mb-2&quot;&gt;Title:&lt;/label&gt;
                          &lt;input type=&quot;text&quot; class=&quot;shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline&quot; id=&quot;exampleFormControlInput1&quot; placeholder=&quot;Enter Title&quot; wire:model=&quot;title&quot;&gt;
                          @error('title') &lt;span class=&quot;text-red-500&quot;&gt;{{ $message }}&lt;/span&gt;@enderror
                      &lt;/div&gt;
                      &lt;div class=&quot;mb-4&quot;&gt;
                          &lt;label for=&quot;exampleFormControlInput2&quot; class=&quot;block text-gray-700 text-sm font-bold mb-2&quot;&gt;Body:&lt;/label&gt;
                          &lt;textarea class=&quot;shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline&quot; id=&quot;exampleFormControlInput2&quot; wire:model=&quot;body&quot; placeholder=&quot;Enter Body&quot;&gt;&lt;/textarea&gt;
                          @error('body') &lt;span class=&quot;text-red-500&quot;&gt;{{ $message }}&lt;/span&gt;@enderror
                      &lt;/div&gt;
  
                      &lt;div class=&quot;mb-4&quot;&gt;
                          &lt;label for=&quot;exampleFormControlInput2&quot; class=&quot;block text-gray-700 text-sm font-bold mb-2&quot;&gt;Author:&lt;/label&gt;
                          &lt;textarea class=&quot;shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline&quot; id=&quot;exampleFormControlInput2&quot; wire:model=&quot;author&quot; placeholder=&quot;Enter Author&quot;&gt;&lt;/textarea&gt;
                          @error('author') &lt;span class=&quot;text-red-500&quot;&gt;{{ $message }}&lt;/span&gt;@enderror
                      &lt;/div&gt;
  
                      &lt;div class=&quot;mb-4&quot;&gt;
                          &lt;label for=&quot;exampleFormControlInput2&quot; class=&quot;block text-gray-700 text-sm font-bold mb-2&quot;&gt;Hyperlink:&lt;/label&gt;
                          &lt;textarea class=&quot;shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline&quot; id=&quot;exampleFormControlInput2&quot; wire:model=&quot;hyperlink&quot; placeholder=&quot;Enter link here&quot;&gt;&lt;/textarea&gt;
                          @error('hyperlink') &lt;span class=&quot;text-red-500&quot;&gt;{{ $message }}&lt;/span&gt;@enderror
                      &lt;/div&gt;
  
                      &lt;div class=&quot;mb-4&quot;&gt;
                          &lt;label for=&quot;check&quot; class=&quot;form-check-label&quot;&gt;Publish:&lt;/label&gt;
                          &lt;input class=&quot;form-check-input&quot; id=&quot;publish&quot; value=&quot;publish&quot; type=&quot;checkbox&quot; name=&quot;published&quot; wire:model=&quot;published&quot;&gt;Publish&lt;/input&gt;
                          &lt;input class=&quot;form-check-input&quot; id=&quot;no-publish&quot; value=&quot;no-publish&quot; type=&quot;checkbox&quot; name=&quot;published&quot; wire:model=&quot;published&quot;&gt;No Publish&lt;/input&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse&quot;&gt;
      &lt;span class=&quot;flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto&quot;&gt;
        &lt;button wire:click.prevent=&quot;store()&quot; type=&quot;button&quot; class=&quot;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&quot;&gt;
          Save
        &lt;/button&gt;
      &lt;/span&gt;
                  &lt;span class=&quot;mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto&quot;&gt;
  
        &lt;button wire:click=&quot;closeModal()&quot; type=&quot;button&quot; class=&quot;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&quot;&gt;
          Cancel
        &lt;/button&gt;
      &lt;/span&gt;
          &lt;/form&gt;
  </code></pre>
  <p>Post Schema</p>
  <pre><code>public function up()
  {
      Schema::create('posts', function (Blueprint $table) {
          $table-&gt;bigIncrements('id');
          $table-&gt;string('title');
          $table-&gt;string('body');
          $table-&gt;string('author');
          $table-&gt;boolean('published')-&gt;default(0);
          $table-&gt;string('hyperlink');
          //create the relationship between a task and the user that created it
          $table-&gt;integer('user_id')-&gt;unsigned()-&gt;index();
          $table-&gt;timestamps();
      });
  }
  </code></pre>
  <p>app/Http/Livewire/Posts.php</p>
  <pre><code>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()-&gt;user();
  
      $this-&gt;posts = $user-&gt;posts;
      return view('livewire.posts');
  }
  
  /**
   * The attributes that are mass assignable.
   *
   * @var array
   */
  public function create()
  {
      $this-&gt;resetInputFields();
      $this-&gt;openModal();
  }
  
  /**
   * The attributes that are mass assignable.
   *
   * @var array
   */
  public function openModal()
  {
      $this-&gt;isOpen = true;
  }
  
  /**
   * The attributes that are mass assignable.
   *
   * @var array
   */
  public function closeModal()
  {
      $this-&gt;isOpen = false;
  }
  
  /**
   * The attributes that are mass assignable.
   *
   * @var array
   */
  private function resetInputFields(){
      $this-&gt;title = '';
      $this-&gt;body = '';
      $this-&gt;post_id = '';
      $this-&gt;author = '';
      $this-&gt;published = '';
      $this-&gt;hyperlink = '';
  }
  
  /**
   * The attributes that are mass assignable.
   *
   * @var array
   */
  public function store()
  {
      $this-&gt;validate([
          'title' =&gt; 'required',
          'body' =&gt; 'required',
          'author' =&gt; 'required',
          'published' =&gt; 'required',
          'hyperlink' =&gt; 'required'
      ]);
  
      Post::updateOrCreate(['id' =&gt; $this-&gt;post_id], [
          'title' =&gt; $this-&gt;title,
          'body' =&gt; $this-&gt;body,
          'author' =&gt; $this-&gt;author,
          'published' =&gt; $this-&gt;published,
          'hyperlink' =&gt; $this-&gt;hyperlink
      ]);
  
      Page::updateOrCreate(['id' =&gt; $this-&gt;post_id], [
          'title' =&gt; $this-&gt;title,
          'body' =&gt; $this-&gt;body,
          'publish' =&gt; $this-&gt;published
      ]);
  
      session()-&gt;flash('message',
          $this-&gt;post_id ? 'Post Updated Successfully.' : 'Post Created Successfully.');
  
      $this-&gt;closeModal();
      $this-&gt;resetInputFields();
  }
  /**
   * The attributes that are mass assignable.
   *
   * @var array
   */
  public function edit($id)
  {
      $post = Post::findOrFail($id);
      $this-&gt;post_id = $id;
      $this-&gt;title = $post-&gt;title;
      $this-&gt;body = $post-&gt;body;
      $this-&gt;author = $post-&gt;author;
      $this-&gt;published = $post-&gt;published;
      $this-&gt;hyperlink = $post-&gt;hyperlink;
      $this-&gt;openModal();
  }
  
  /**
   * The attributes that are mass assignable.
   *
   * @var array
   */
  public function delete($id)
  {
      Post::find($id)-&gt;delete();
      session()-&gt;flash('message', 'Post Deleted Successfully.');
  }
  }
  </code></pre>
  <p>Post Model</p>
  <pre><code>&lt;?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-&gt;belongsTo(User::class);
      }
      protected static function boot()
      {
          parent::boot();
          static::creating(function ($model) {
              $model-&gt;user_id = Auth::id();
          });
          static::updating(function ($model) {
              $model-&gt;user_id = Auth::id();
          });
      }
  }
  </code></pre>