10. Implementing a Tag System for Posts

I wanted my blog application to make use of a tag system, so users can add tags to their posts and also filter posts by tags. To start implementing a tag system, I need to create a tag model and a database migration, this was achieved by running the following command:
php artisan make:model Tag -m

The screen capture below shows the create_tags_table migration. This migration creates two tables - a tags table and a post_tag pivot table. An intermediate pivot table is required in order to facilitate the many-to-many relationship between posts and tags. The name field in the tags table will represent a tag name, such as 'Fishing' or 'Golfing'. The post_tag table will have 2 foreign keys:

  • post_id, which references the id in the posts table
  • tag_id, which references the id in the tags table
Both of the foreign keys will cascade through the database - if a tag or a post is deleted, the associated row in the post_tag table will be deleted.


Next, I will define the relationships between posts and tags. The screen capture below is from the post model - the many-to-many relationship is created using the belongsToMany() method.


The same approach needs to be applied to the tag model - again, the many-to-many relationship is created using the belongsToMany() method.



Now I need to implement the tags into the post controller (PostController.php), allowing them to be displayed within various views. I will only point out sections of code where the tags have been added (to avoid repeating a previous blog post).

Index function: All tags are retrieved from the database (line 18) using the get() method. Next, I need to check if the request includes any tags, in which case the user is attempting to view all posts with a chosen tag (line 20-22). Finally, a post index view is returned, where an array of tags are passed as a parameter.




Store function: The tags function within the post model is invoked, and any tags within the request are linked to/attached to the post using the attach() method (line 76).



Update function: To check if tags are present within the request, I use an if statement. This allows me to check if the existing tags are going to be updated or left as is (lines 115-120). If the request does include tags, all existing tags are unassociated from a post using the detach() method. At this point, the tags included within the request are then attached.


Create function: Tags need to be sent as a parameter to the post create view, in order to allow users to choose from a selection of possible tags (line 43).


The form in the post create view now has access to the array of tags available as seen below:




Edit function: Similar to the create function, tags need to be sent as a parameter to the post edit view, in order to allow users to choose from a selection of possible tags (line 88).

The form in the post edit view now has access to the array of tags available, as seen below:


The screen captures below contain code snippets from the post index view (index.blade.php) and the page in the browser window. This will show how all tags can be displayed on a page and how tags can be displayed alongside an associated post.

Code in post index view (index.blade.php), which shows all available tags:

Code in post index view (index.blade.php), which displays tags associated with a single post:


Post index view (index.blade.php) being displayed in the browser, which the code above being rendered:



Comments