4 => Views - Templates, Components & Pagination

-

This blog entry will discuss views, more specifically Blade Templates, and how I implemented pagination. The creation of views, templates and dynamically rendering content for the client will be covered throughout this entry. I'll also discuss some of the problems I faced while attempting to use views and how I overcame those problems.

Views

In its most basic description, views are what the customer is served, it is the HTML page that the customer interacts with on their client. Laravels Blade files provide functionality that vanilla php can provide however it provides a consistent and straightforward method in doing so. An example of this is @foreach loops and the displaying of error messages using @error.
Laravel allows for views to be constructed in several ways.
  • Vanilla php ( You are not forced to use .blade.php files )
  • Laravel Blade templates
  • Plain HTML ( Doing this you lose most of the functionality php provides however if a page is static and the content never changes this is possible and is faster as there is no server side rendering )

Blade Templates

Laravels blade templates are a powerful way to generate views that dynamically change based on the data they are provided with at run time. 

Ideally pages should use one master template that contains all of the HTML that is common to all pages, then templates should be inserted into this view using Laravels Blade syntax.

Our template view extends our app view with @extends('app') and then contains named sections that are labelled using @section('content') and @endsection. Your pages HTML & PHP is contained within the @section & @endsection syntax.

When I first used Blade templates I made the mistake of pointing my router to the app page, which resulted in nothing rendering, which was not the result I had in mind. What I learned was that you should actually point your router towards your content template, which tells the rendering engine which page it should be wrapped in. 

Blade templates are easy to write and the double brace syntax feels familiar due to its use in other templating engines. 

Components

Components allow you to modularise your pages even more. In the example above we're likely to have some parts of the page that are repeated. 

My applications navbar for example is featured on each page so instead of including its code into each template it can become a component. This can be achieved by using the command in the image below.

Throughout these blog entries it will become more apparent how useful the php artisan command is as it can generate much of your applications base scaffolding code instantly.
Now the navbar component can be added to the master app template so that it appears on every page. This is done by using <x-navbar /> and can be seen in use in the image below. Components like this can be passed data however in this instance this is unnecessary. 

Pagination

Understanding pagination took me a little while because the default pages generated use Tailwind CSS, and there is a lot of code automatically generated that needs to be read. Due to my use of Bulma over Tailwind (two CSS frameworks) I had to rewrite my Blade templates from scratch to work with Bulma.
When fetching database results using eloquent  the Model::paginate(n) method, where n is the amount of items returned per page.
To modify the style of the pagination though you must run the following command in the terminal
Once run, a directory is created in your views directory called vendor/pagination that contains several prewritten pagination templates.
Instead of this approach I chose to write mine from scratch to get a better feel for how it works.
To do this I had to go into app/Providers/AppServiceProviders and list my paginator default view under the boot method.
The Paginator class has several useful instance methods that can be found in the official Laravel documentation. An instance of this class is used when rendering the paginator view. Some of these functions can be seen in the following image that shows a sample of the paginators Blade file.
Example screenshots of my applications pagination can be seen below. The paginator updates the clickable buttons based on which page number the client is currently viewing. I successfully added a skip to start and end button which was a straightforward process.



Laravel makes pagination really easy to configure and setup, easier than I had initially anticipated, a common theme for Laravel so far.

Concluding Remarks

Laravel successfully abstracts a lot of implementation details away from the developer which helps improve productivity. Getting functionality working at first took me a little while to understand but now that I have done it once, making more pages out of templates and components is a streamlined process. Pagination 'out the box' is an excellent feature, even if putting your view together for it is a bit tricky and time consuming.

Comments

Post a Comment

Popular posts from this blog

8 => Gates & Authorization Policies

-
Image
Determining whether or not a user is allowed to perform a certain action is an important aspect of building a CMS. It provides users with ownership of their data, preventing other users from performing CRUD functionality on data that should be hidden from them. This is more commonly referred to as authorization. Laravel accomplishes this job by using gates and/or policies . This blog entry will cover how gates are used in the KANBAN application. Only one example will be covered as the process is the same for creating different gates for different actions. Workflow There are multiple steps involved when attempting to secure actions. There are shortcuts that can be taken to reduce the number of these steps however in doing so the applications logic becomes less manageable as some methods could become 'fat'. This makes the code harder to understand. Initially the developer should create a security policy, these are stored in app_route/app/Policies and follow the xPolicy.php conven...
Read more

5 => User Accounts & Authentication

-
Image
Implementing Authentication In Laravel This entry to the blog will explain how I personally went about adding authentication into an existing application along with the issues I faced. I'll be covering both the good and bad, what I found intuitive and where I feel that Laravel could potentially improve and why. Database Table Structure So far the project already has a users table that were generated by default. This table is already suitable providing the appliation what it requires for authentication, the application just needs the logic for authentication. Each users table has the following general structure : The following is an example of some data that has been generated with Faker through the use of Factories( you can read more about factories in blog #6 ). You'll notice that every password is identical, at the moment as they are hardcoded. The pre-hashed version of the password is the word 'password' so that while testing functionality I don't need to rememb...
Read more