In this tutorial, we are going to create a new Laravel application for creating blogs or posts. While creating a blog we'll use CKEditor to take input or HTML input and store it in our database.
Before starting, let's understand why CKEditor is useful compared to HTML elements like text-area or inputs. The CKEditor is a rich text editor which means it has basic formatting abilities like font size, color, family, and more. But with the latest release, you can almost use it like Microsoft Word. You can show tables, headers, images, links, and many more things with help of CKEditor.
As you know HTML text area or input can allow us to submit some data as text but can not take inputs like HTML elements titles or tables. Plugins like CKEditor provides a way to create HTML based format converting user input into text.
For a better understanding of implementation we have divided the program into a few steps :
- Step 1: Create New Laravel Application
- Step 2: Database Configuration
- Step 3: Creating Model and Migrations
- Step 4: Controller Logic
- Step 5: Adding Views
- Step 6: Define Routes
- Step 7: Testing Application
Create New Laravel Application
Let's begin this tutorial by creating a new Laravel application. Navigate to your localhost directory based on XAMPP or WAMPP then you can create a fresh Laravel application with one of the below commands:
It will take some time to create a new application and downloading/set new files.
Database Configuration
Let's configure a database for our application. If you don't have a database then create a new one. After making database open .env file from root directory of your project. The .env file defines many common environment variables
Creating Model and Migrations
In this example, we will integrate CKEditor and store its input into our database and render it back whenever we require. For database operation in Laravel, we need to create model which handles database operation for a particular table.
Here, we will simply create a post model and define two columns to store title and content. In actual project, you can define numbers of columns into your model as per your requirements.
To create model and migration enter below command to terminal :
This will create a Contact model and a migration file. In the terminal, we get an output similar to:
After completion of command's execution. let's define table schema for post table. Open the database/migrations/xxxxxx_create_posts_table migration file and update it accordingly:
Here, We added the title and body fields in the posts table structure.
Let's make some changes into our model so we can use mass assignment for this table. Open the app/models/Post.php file and update it accordingly:
Now, we have defined database structure and made necessary changes to our model. It's time to create actual table in our database. Open terminal and enter below command:
It will generate table into your database specified in .ENV file. You can verify that in phpMyAdmin.
Controller Logic
Controllers are meant to group associated request-handling logic within a single class. For operations related to Post, we have to create a controller. You can use any other controller or existing controller for this task but we suggest create seperate controller as per your logic. It will help you to maintain minimum response time and code understanding.
In your terminal, run the following command to create a controller:
This command will generate a controller at app/Http/Controllers/PostController.php. Here, we will define methods for post-operations. Let's modify it as per our logic:
Here, we have used Post Model and defined three different methods. The index method will get all post data and pass it to show a listing of posts/blogs. While create method will just return create a view which contains Form with CKEditor. At last, the store method will handle the save process based on user input.
Adding Views
The view performs all front-end functionality of our application like displaying data, getting user input or getting requests. In this example, we need to create 1 view and we will modify the default welcome view. The first view will be displayed on home page and shows stored post data while the second view will be used to get post-related user input.
We'll use the default welcome view to display list of posts. Open welcome view and modify as below:
Here, we just added simple link to navigate to post creation page and table to display posts. At bottom of table, we have included pagination links too so it will display 10 posts at a time.
Let's create another view for form which will handle post inputs. Create new file with name as create_post.blade.php and add below code in it.
Here, we have created a simple form which takes two input. First one is title and second is body part of post. We have also added CDN for CKEditor at header.
In the script part, we have initialized the CKEditor instance on text-area input by passing ID of input. It will convert normal text area into a Rich text editor using CKEditor plugin functionality.
Define Routes
In this step, we will define routes for posts. This route will handle user requests and deliver it to a specific controller and its method. In Laravel, All web routes must be added to a particular file routes/web.php. Although you can create a custom route file and bind it to your application.
Open the web routes file and update it accordingly:
Testing Application
For Running or Testing the CRUD application enter below command :
It will produce output like below :
Open your browser and go to below URL and test your application.
In case, you are facing an issue while running application verify the CKEditor link or check the console for error logs.
Conclusion
In this article, we have created functionality to create post using CKEditor and display it using table. There are many useful methods and functionality of CKEditor which can be useful as Image upload, enabling or disabling some formatting functionality, showing HTML code based on user input, or many more.