Blogs

Blog Crud using Laravel Livewire

Published On: 8 August 2022.By .
  • Digital Engineering

Blog Crud using Laravel Livewire

Laravel

Laravel is a free and open-source PHP Framework for Web Artisans based on Symfony that helps craft Web Applications following the MVC (Model View Controller) design pattern. Many developers would prefer the MVC framework as the architecture of the app is fully maintained and the management is much more easier than the core web applications structure.

Besides that many frameworks would inbuilt packages that provide us more fundamental security required for every web app, features like authentication, user registration and supported by many 3rd party packages.

What is livewire ?

Livewire is a Laravel library that makes it simple to create contemporary, dynamic interfaces from the comfort of Laravel. If you want to create a dynamic application but are hesitant to use a complete Js framework like Vue or react, this is a fantastic tool to use.

How it works ?

Write a PHP class, that will act as the backend portion of a frontend component. The public fields will be visible to Livewire. Write a frontend component in Laravel’s templating language (Blade). This component references the fields in the backend component that you wrote before. Write methods in your backend-component’s class, that change the state of the public fields. Instantiate the component in another view, or another component.

Why Livewire ?

Nowadays there are many frameworks like Vue js or React js which provide full stack developers many options to work. But they add complexity to them of learning various new skills and then interacting between different languages. While in Livewire we only need to use laravel and PHP and the operations will be performed as if they were performed using js.

Advantages of Livewire

  1. Beginner-friendly, since AJAX requests can be made with little or no JavaScript knowledge
  2. SEO-friendly, as the HTML is sent to the browser on first rendering
  3. Integration into existing Laravel pages possible
  4. Automated testing possible due to included test suite

Disadvantages of Livewire

  1. Increased server load, since all status changes are done via AJAX request
  2. More difficult troubleshooting possible due to mixing of backend frontend logic

Create a Blog Crud using Laravel Livewire

    1. Create a project with name my-blog. Type the following command:
    1. Creating Database
      • Go to http://localhost/phpmyadmin/ 
      • Create new database “myblogs”.
    2. Open the .env file in your code editor
      • APP_NAME key to name of your blog i.e. “My Blog”
      • DB_DATABASE key to database name i.e. myblogs
    3. Run the application, by typing the following command:
      • php artisan serve
      • It will start the application and give you a URL, http://127.0.0.1:8000, open the URL in your browser
    4. Lets reate a new posts table. Run
      • php artisan make:migration create_posts_table
      • If we open up that file, we can add the following schema data to our migration:
    1. After creating the migration please run the following command: php artisan serve Before running the migration, be sure to connect your database by adding the correct DB info to your .env file:
    1. Now we will Install Livewire. Run the following command:
      • composer require livewire/livewire
    2. Create our App layout
        • Inside our app, we’ll create a new layout file located at resources/views/layouts/app.blade.php, with the following contents:
      • Lets included a CDN link to the Tailwind CSS.
      • Now that we have our main layout file, we can add our Livewire scripts and styles.
    3. Adding the Livewire scripts and style to our layout file is very simple. We include @livewireStyles to our head and @livewireScripts to our body, like so:
  1. Add Our Homepage
      • Inside of routes/web.php, you’ll see a home route pointing to our welcome.blade.php:
      • Lets change this route to the following:
      • This will point our homepage to a new file at resources/views/home.blade.php. You will want to create that file with the following contents:
      • Using Blade Components, we can create a header component for our blog with the following command:
      • This will generate our new component view template located at resources/views/components/header.blade.php, which we’ll want to add the following contents:
  2. Create Posts Component
      • Run the following command to create a new Livewire component that will be used for creating posts on our blog:
      • This will create a component CLASS and a component VIEW in our application located at:
      • We can add a new route to our routes/web.php, which will load our new component:
      • Open up the app/Http/Livewire/PostCreate.php file, and we can specify the section we want our component to be injected inside our layout file. We can do that by modifying the render() function:
      • The reason that we added the ->section('content') to our view is that inside of our layout file, we output that section with the @yield('content') line. Next, we’ll add an <h1> to our component view resources/views/livewire/post-create.blade.php, like so:
  3. Create Post Functionality
      • To create a new post, we’re going to need a Post model, which we can create by running:
      • We’ll need a form to create a new post inside of our Livewire view file resources/views/livewire/post-create.blade.php:
      • In the HTML above, we have a title and body input where we are binding the values to Livewire with wire:model.
      • Now we need to add the logic to our Livewire class app/Http/Livewire/PostCreate.php, so we can easily create a new post.
  4. Displaying Posts
      • Displaying a post is pretty easy. We know that we want a user to visit /post/{slug}, and our application will lookup the post with the corresponding slug slug and display it on the page. Let’s create a new Livewire component with the following command:
      • And, we’ll have 2 new files created at:
      • If we jump into our app/Http/Livewire/Post.php, we can add the following code:
      • We will also need to add a route that maps to our Livewire controller inside of our routes/web.php:
      • Finally, we can output our post content inside of our Livewire view file located at resources/views/livewire/post.blade.php:
  5. Displaying our Post List
      • Lastly, we are going to display our posts in our resources/views/home.blade.php file file. We can easily loop through all of our posts by adding the following code:

Conclusions

Laravel Livewire is a great tool and it can be used to make robust and flexible web applications. There are so many features of laravel livewire that i have not used in this blog like state management. Apart from that laravel is the most loved framework and a framework that has a large community.
Let us know your valuable thought about why Laravel is thriving now? Share in the comments below.

Related content

That’s all for this blog

Go to Top