Lesson 5 - Simple CMS in Laravel - Project structure

In the last lesson, Finishing the calculator in Laravel, we focused on the basics and explanations of the necessary principles and we also completed a very simple application.

Today we will start a new project with the promised simple Content Management System (CMS). This project may be more interesting for some, as we will try working with other components that Laravel offers. One of these components is, for example, Eloquent, which provides ORM for working with databases. In today's lesson, however, we will go through the structure of the project, also because this time we have to set up the project.

Structure of Laravel project

Real commercial projects have a lot of classes and files, and we certainly wouldn't be satisfied with just dividing the project structure into controllers, models and views. Having dozens of files in one folder is at least confusing. The code would be mismanaged and you would get to the point where you would write similar methods over and over instead of parameterizing an existing one, because you simply wouldn't even know that there was already a similar one in the project. And that is the beginning of the end. How to get out of it?

We will divide the classes into logical groups and it will certainly not surprise you that we will use namespaces for this purpose. This is exactly the tool designed to solve the problem of a high number of classes. However, Laravel is not just a simple MVC framework. It contains a large number of components that we can work with, so even a simple division into several components will not suffice.

Laravel gives us freedom to organize our project. We do not create any modules and the project is not divided into "packages". The main criteria for dividing classes and other files is their role. Each part of the application logic has its own main folder to which it belongs, and it is only up to us whether we create subfolders in these folders for individual parts of the application (for example, article administration) or not. Anyway, creating subfolders is definitely suitable for larger applications (better orientation where what belongs) and we apply this to our project.

Framework structure

Let's now describe the default structure of the Laravel framework, which we will also extend in the following lessons. Currently, the directory structure of our application looks like this:

• app/ - Contains the core of our application and includes all various components from controllers to custom events
  • Console/ - Custom Artisan commands for Laravel console. Just like the make:controller command we used in the First Application in Laravel lesson, we can create our own. However, we will get to that in the next lessons
  • Exceptions/ - Exceptions
    • Http/ - Contains almost everything about request logic
      • Controllers/ - Controllers
      • Middleware/ - Middleware class
    • Providers/ - Contains classes that take care of, for example, registering our own events or setting up request processing
• bootstrap/ - Contains the framework boot file as well as the cache of generated routes and packages. We will not even touch this folder during our project
• config/ - Contains the project configuration
• database/ - Contains database migrations and classes for populating database tables with fake data
• public/ - The root directory of the entire site (access point where all located files are accessible from the outside). It also contains an index.php that handles all site requests
  • css/ - CSS files
  • js/ - JavaScript files
• resources/ - Contains uncompiled source files for front-end and application translations
  • js/ - Uncompiled JavaScript files
  • lang/ - Contains files with phrases and their translations
  • sass/ - Uncompiled SCSS files
  • views/ - Views
• routes/ - Routing for our website, API, custom Artisan commands and channels for WebSocket
• storage/ - Contains user file sessions, logs, possible storage for our generated files and cache of generated Blade views and other files
• tests/ - Automated tests for testing the functionality of application parts
• vendor/ - Libraries managed by Composer

You may be wondering where the models folder is? In earlier versions, the models/ folder was intended for this purpose, but it was abandoned. Framework developers consider the word "model" to be ambiguous, because it can mean something different to everyone. Therefore, as already mentioned, it is only up to the application developer to save the models. However, in most cases, only the app/ folder is used.

Although at first it may seem that the structure of the framework is too complex and branched, do not despair. Over time, we will learn to use many of the available components and thus also become more oriented in our project.

Creating a new project

It's time to create a new project to work on in the coming lessons. We have already shown the basic installation and launch of the new Laravel application in the lesson Installation of Laravel and first project run. We call our project laravel-cms (Laravel C ontent M anagement S ystem).

Install Node.js

Unlike the previous project, we anticipate that we will also work with the front-end part of the application. Therefore, we need something that will take care of external libraries and compile files created by us, such as CSS, JavaScript, SCSS and others. For this reason, we will download and install Node.js according to the instructions, the installer of contains the currently needed npm package system. This installer can be downloaded from the download section.

A detailed installation of Node.js can be found in the Node.js course.

After the installation is complete, all you have to do is run the npm install command in the root folder of the project, which will download and prepare the necessary libraries for the automatically created node_modules/ folder.

Laravel UI

As mentioned in the lesson The first application in Laravel, the styling and use of front-end frameworks has been removed from the ground up in version 6.0.0. However, since we want to focus primarily on the back-end part of the website in this course and do not want to waste time unnecessarily styling, we will use the Laravel UI package, where are these features.

Run the following command in the root folder of the project:

composer require laravel/ui --dev

Now we can use the Artisan command ui, where we pass the type of front-end framework we want to install. We will not use everything that is offered to us (we will do without Vue and React):

php artisan ui bootstrap

This command installed the CSS framework Bootstrap and jQuery which extends JavaScript. Let's talk about them now.

Front-end frameworks

Bootstrap

Bootstrap is the perfect solution for projects that are mainly focused on the back-end, so its developers do not have to worry about complicated design. Pre-built styles, icons and widgets created and imported by this CSS framework are used instead.

We can look at importing Bootstrap into the SCSS file resources/sass/app.scss, where we are using a package managed via npm:

// Bootstrap
@import '~bootstrap/scss/bootstrap';

The bootstrap is then inserted into the main file after compilation, so we don't have to link it from an external service. However, we will show this later in this series.

JQuery

Another front-end framework added is jQuery. This will extend JavaScript to important functions and thus make it easier to work with an HTML document.

Import of jQuery and other packages managed via npm takes place in the JavaScript file resources/js/boostrap.js via Node.js function require():

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

The imported libraries and frameworks are re-inserted into the main file after compilation. However, as we can see in the part of the file above, this is not the only external package that the Laravel UI defines when using the bootstrap type. However, jQuery and Bootstrap are the main front-end frameworks we will work with, and they are worth mentioning.

Compiling front-end files

We will deal with a complete explanation and description of the compilation process in the next lessons. Without this process we would not have the resulting CSS and JS files with the frameworks mentioned above, so we must use one of the available commands already. For simplicity, we will run the command recommended by the Laravel UI package:

npm run dev

Project configuration

In the next lessons we will work with the database, so we should also look at the configuration of our project. This is surprisingly found in the .env file in the root folder of the project. The variables defined in this file are then used by the configuration files in the config/ folder, and we can also use these variables in our own code.

In the following part of the file, we will adjust the mentioned variables to their own values:

APP_NAME="Laravel CMS"
APP_ENV=local
APP_KEY=base64:Cr35/skElLNn2RbKpOC7a9OaMCts8fA0NAmBpZnZ3a8=
APP_DEBUG=true
APP_URL=http://localhost:8000

LOG_CHANNEL=daily

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_cms
DB_USERNAME=root
DB_PASSWORD=password

...

As you may notice, multiword values must be enclosed in quotation marks. We use this for the name of our application defined by the APP_NAME variable. The APP_KEY value is already generated from the installation, we do not need to change it. However, we will change the value of the APP_URL variable to a URL that points to our project. It is also a good idea to adjust the LOG_CHANNEL setting to daily. Finally, we will also modify the group of variables defining the database connection settings, which will be useful in the next lesson.

For the time being, we will leave the rest of the variables as they are.

If the value of the APP_KEY variable in your .env file is empty, use the php artisan key:generate command to generate a new key.

So now I assume we already have everything set up. That's where this lesson ends.

In the next lesson, Simple CMS in Laravel - Migration, ORM over the database and working with migrations awaits us.