Laravel integration
How to use Bootstrap 5 with Laravel - free starter
This guide will provide you with a free template for a Laravel application, with MySQL database and Bootstrap 5 front-end.
Prerequisites
Before starting the project make sure to install the following utilities:
Creating a new Laravel application
Let's create a fresh Laravel application so that we can go through all the steps together. For this tutorial we'll be using MySQL database.
Step 1
Creating Laravel project.
You can initialize a MDB GO starter. Simply run the following command:
Note: If you don't have MDB CLI installed yet, you can do it with NPM: npm install -g mdb-cli.
Now log in with your MDB account, type: mdb login.
If you don't have account yet you can create one using mdb register command.
Step 2
Creating a MySQL database.
In order to create a new database you need to run the following command.
- Create a new user
- Provide username, password, database name and description.
CLI will display your username, password, database name and connections string. You will need this data in the next step. Now you can go to phpMyAdmin where you will be able to handle the administration of the MySQL database.
Note: the password must contain at least one uppercase letter, one lowercase letter, one number, one special symbol and have minimum length of 8.
Step 3
After initialization just go to the newly created project directory and open the .env file.
After that edit the config values that start with DB_.
You should make use of credentials that's been shown to you in the previous step.
In my case the updated values look like this:
Step 4
Create a table.
Go to phpMyAdmin, log in, and add a table, which name will be a plural form of created model. For example on purpose of this tutorial: tasks. Then create a three columns: id (type: int + auto increment), name (type: text) and description (type: text).
Step 5
Navigate to you project direction and install Laravel dependencies using Composer.
php-free-laravel is the name from MDB GO starter (you can change whatever you like).
Note: If after this process you got an error bound installation - try
composer install --ignore-platform-req=ext-fileinfo or composer update --ignore-platform-reqs.
To Do App with MDB
Step 1
Create a model. You can use built in Laravel pre-made function: php artisan make:model Task,
where Task is your custom name (you can change it whatever you like).
Nevertheless this model should being inserted in app/Models directory and looks like this:
Step 2
Now create a controller for handling an endpoints. You can use built in Laravel pre-made function: php artisan make:controller TaskController, where TaskController is your custom name (you can change it whatever you like). Nevertheless this controller should being inserted in app/Http/Controllers directory and looks like this:
Step 3
Add routes for newly created controller in api.php file (found in routes
folder in root directory).
Step 4
One more route must be set inside web.php.
Step 5
Now all we need is to write some code in resources/views/welcome.blade.php.
This is the layout of the page and the place where all the requests will be sent from.
Finally, we can run app using php artisan serve.
Publish your app
Now you can publish your project on MDB GO using the following command:
Note: If you don't have MDB CLI installed yet, you can do it with NPM: npm install -g mdb-cli.
Now log in with your MDB account, type: mdb login.
If you don't have account yet you can create one using mdb register command.
Note Since we need to install dependencies and run your app, it may take a few moments until it will be available under the provided URL.
Optimization
If you want to further optimize your application please visit:
Backend features
Laravel:
This example was created with Laravel-starter. By creating new endpoints, we could pass or receive data from this application.
Frontend features
MDB UI KIT:
To create the project we used our ui kit, with which we can build basic views very quickly.
Views and Layouts:
In this project we used the welcome.blade.php file created by Laravel where we placed our
MDB components. We have successfully integrated the backend with the
MDB Standard package and can send basic requests to the Laravel application.