Building a Support System with Laravel PHP and Froala HTML Editor Sofware – part 3
In this article, we will continue building a rich-text support system using the Laravel PHP Framework and the Froala html editor software. If you haven’t read the previous articles in this series, we recommend doing so as we will be building upon them.
Part 1: Building a Support System Using Laravel PHP Framework and Froala Rich Text Editor
Part 2: Simplify Froala Image Management in Laravel using Froala PHP SDK
A Quick Recap
In the previous articles, we built a page containing a form for users to send their issues to the support team. We used Froala to allow users to send a rich-text message. Users can include images within their messages to help them describe their issues better. We used Froala PHP SDK to validate the images and store them on the server. Once the user is done with their messages and submits the form, the data is saved into the database using our html editor software.
Retrieving and Displaying User Messages for Site Administrators
In this article, we will learn how to retrieve user messages from the database and display them to the site administrators. This will allow the administrators to respond to the users’ issues. We will not cover the implementation of a login system for the administrators, as there are already many resources available for setting up authentication in Laravel. Instead, we will focus on creating a page that lists all the user tickets and another page that displays the details of a specific ticket for the administrators to respond to.
List User Requests
Let’s create a new resource controller to allow the support team to review and read the submitted requests.
php artisan make:controller AdminRequestController --resource
Add the route in web.php
Route::resources(['admin/requests' => App\Http\Controllers\AdminRequestController::class]);
Open the AdminRequestController.php and add the following line at the top to allow us to use the Request model within the controller.
use App\Models\Request as RequestModel;
Edit the index function to
public function index()
{
//
$requests = RequestModel::all();
return view('requests.index', ['request'=>$request]);
}
The above code fetches all the user messages from the database using the RequestModel::all() method. Then it passes the retrieved data to the requests.index view.
We need to create the requests.index view to display the user tickets on the page. Let’s create a new file called index.blade.php in the resources/views/requests directory. In this file, we can iterate over the $requests variable using a @foreach loop and display the necessary information for each ticket.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Support App.</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Styles -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<h1 class="col-md-8 my-5 text-center">
All Requests
</h1>
</div>
<div class="row justify-content-center">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Subject</th>
<th scope="col">date</th>
<th scope="col">View</th>
</tr>
</thead>
<tbody>
@foreach ($requests as $i => $request)
<tr>
<th scope="row">{{$i}}</th>
<td>{{$request->subject}}</td>
<td>{{$request->created_at}}</td>
<td>
<a href="{{route('requests.show', $request->id )}}" type="button" class="btn btn-info">View</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</body>
Once we have the index.blade.php view set up, we can navigate to the /admin/requests route to see the list of user tickets.
Request Details View
Next to each ticket, there is a button to view the ticket details. Clicking on it redirects the support team member to the /admin/requests/{ID} URL, where ID is the unique identifier of the ticket.
To handle the route for viewing a specific ticket, we need to update the AdminRequestController show function. This function will retrieve the ticket details from the database based on the ID and pass them to the requests.show view.
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
$request = RequestModel::findOrFail($id);
return view('requests.show', ['request'=>$request]);
}
Next, let’s create a new file called show.blade.php in the resources/views/requests directory. In this file, we can display the details of a specific ticket by accessing the properties of the $request variable. We can show the subject, description, date, and any other relevant information.
On this page, it is crucial to include the CSS stylesheet provided below in the page header to ensure the accurate display of the data that users entered using the Froala html editor software.
<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_style.min.css' rel='stylesheet' type='text/css' />
The show.blade.php full code is:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Support App.</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Styles -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<!-- CSS file for showing Froala content outside the editor -->
<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 my-5 ">
<h1>
{{$request->subject}}
</h1>
<p>{!!$request->request!!}</p>
</div>
<div class="card col-md-4 my-5 ">
<div class="card-header">
Requester Details
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">{{$request->name}}</li>
<li class="list-group-item">{{$request->email}}</li>
<li class="list-group-item">{{$request->created_at}}</li>
</ul>
</div>
</div>
</div>
</body>
The above code will display the subject of the ticket, the content of the request (which includes HTML code), and the details of the requester’s name and email. We use Bootstrap to style the card that contains the requester details.
Displaying Froala Editor content Outside The Editor
In addition to adding froala_style.min.css to the header, it is important to note that we use {!! !!} instead of {{ }} to display the request variable that contains Froala Content. This is because it contains HTML code, which should be rendered as is without any character escaping.
The support team can now view the ticket and requester details. They have the option to manually email the requester with a solution to their issue. We could improve this process by including a “Reply” button that opens a Froala editor. This editor would enable the support team to draft a message that is automatically sent back to the requester. If you would like me to address this topic in another article, please leave a comment.
Conclusion
In this article, we have learned how to configure the index view to showcase a list of user tickets. We have also explored handling the route for viewing a specific ticket and presenting its details in the show.blade.php file. Bootstrap was utilized for styling, along with including the necessary CSS files for displaying Froala content outside the editor. This ensures that user-entered content is displayed accurately.
As a next step, consider enhancing system security by implementing authentication features that limit access to authorized administrators. Laravel provides built-in authentication capabilities that can be seamlessly integrated into the support system, offering an additional layer of control and privacy.
Overall, this article emphasizes the simplicity and effectiveness of showcasing Froala content outside the editor within the Laravel PHP framework. With this knowledge, you can handle user tickets and provide exceptional support within your application.
Start using Froala in your Laravel application now. For any queries or assistance, do not hesitate to reach out to us. Happy coding!
No comment yet, add your voice below!