In this tutorial we’ll build simple search / filter capability using Alpine.js in a Laravel 9 app, so that when you start typing in the search input field, the data presented in the data table is filtered in accordance with the input. Laravel 9.x requires a minimum PHP version of 8.0. This tutorial assumes that … Read more
In this tutorial we’ll create a Laravel 9 app using Breeze and then we’ll incorporate Spatie Permission for managing roles and permissions. Laravel 9.x requires a minimum PHP version of 8.0. This tutorial assumes that you are using Linux, MacOS or WSL on Windows and Node.js, Composer and PHP 8 along with required modules i.e … Read more
There was time in webapp development when employing Bootstrap and jQuery at frontend were the most favored options. Then there were heavyweight JS frameworks like Angular, React, Vue to handle interactivity and making webapps’ UI reactive – this gave rise to SPA (Single Page Application). SPAs are actually webapps but behave more like desktop applications … Read more
In this tutorial we’ll create Laravel 9 CRUD app using VILT (Vue Inertia Laravel Tailwind) stack. Laravel 9.x requires a minimum PHP version of 8.0. This tutorial assumes that you are using Linux, MacOS or WSL on Windows and Node.js, Composer and PHP 8 along with required modules i.e bcmatch, sqlite, mbstring, xml, zip, gd, … Read more
In this tutorial we’ll create Laravel 9 CRUD app with classic views utilizing Bootstrap 5 along with JQuery (the good ol’ days!). Laravel 9.x requires a minimum PHP version of 8.0. This tutorial assumes that you are using Linux, MacOS or WSL on Windows and Node.js, Composer and PHP 8 along with required modules i.e … Read more
In this tutorial we’ll create Laravel 9 CRUD app using default Breeze starter kit. Laravel 9.x requires a minimum PHP version of 8.0. This tutorial assumes that you are using Linux, MacOS or WSL on Windows and Node.js, Composer and PHP 8 along with required modules i.e bcmatch, sqlite, mbstring, xml, zip, gd, mcrypt are … Read more
Designing and managing web layouts by positioning individual elements proves to be cumbersome specially for modern web-based products which cater to various sizes of viewports. Enters Flexbox, a CSS layout model, which simplifies designing layouts for webpage / webapp. It’s a layout mechanism through which elements are arranged in rows or columns seamlessly. So without … Read more
We have already covered the essential concepts of CSS in Part 1, 2 and 3 of this tutorial series. Based on the concepts we’ve covered so far, let’s stylize an important HTML element i.e. HTML Form and its related elements. Usage of HTML Forms becomes ubiquitous when developing web applications, therefore their proper styling is … Read more
External Style Sheets So far in this tutorial we have used inline CSS (Part 1) and internal CSS (Part 2) respectively. Now let’s introduce external CSS. The drawback of using inline or internal CSS is that the styles defined as such are limited to only one element or webpage respectively – that’s OK if your … Read more
At the end of Part 1 of this tutorial we introduced <style></style> tags of HTML in order to define styles globally. By changing styles of <a></a> globally, we changed it for all the links. Problem with defining styles and modifying default look and feel of HTML elements is that we will have same look and … Read more