Laravel 11 Call API Project Example with Template

Introduction

Hello and welcome!

In this tutorial, you'll learn how to clone a Laravel project from GitHub, GitLab, or Bitbucket and set it up step by step on an Ubuntu server. Whether you're working with Laravel 6, 7, 8, 9, 10, or 11, this guide will walk you through the complete process in a clear and beginner-friendly way.

We'll cover everything from cloning the repository to configuring and running the Laravel application. By the end of this tutorial, you'll have a Laravel project up and running on your server.

So, let's dive into the step-by-step guide and get your Laravel app cloned and ready to use.

Prerequisites

Before you begin, ensure the following tools are installed on your system:

Git: A version control system used for cloning and managing code repositories.
👉 Download: https://git-scm.com/
PHP: Laravel requires PHP 7.3 or higher.
👉 Check your version:
```
php -v
```
Composer: A PHP dependency manager required to install Laravel packages.
👉 Download: https://getcomposer.org/
Web Server: Laravel includes a built-in development server, but for production use, it's recommended to set up Apache or Nginx.
Database: Ensure your system has a compatible database server installed (e.g., MySQL, PostgreSQL, SQLite), depending on your project’s needs.
Postman (Optional): A powerful API client to test your Laravel API endpoints.
👉 Download: https://postman.com/

Steps to Clone and Set Up a Laravel Project

1. Clone the Repository

Open your terminal and navigate to the directory where you want the project installed:

git clone https://gitlab.com/SoengSouy/laravel-11-front-end-dashboard-premium.git

Replace the URL with your own Git repository if needed.

2. Navigate to the Project Directory

cd laravel-11-front-end-dashboard-premium

3. Install Dependencies

composer install

4. Copy and Configure Environment File

cp .env.example .env

Then, open .env and configure your environment variables, especially your database settings:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db
DB_USERNAME=root
DB_PASSWORD=your_password

5. Generate Application Key

php artisan key:generate

6. Run Database Migrations

php artisan migrate

7. (Optional) Create Personal Access Client

If you're using Laravel Passport for API authentication:

php artisan passport:client --personal

8. Start Laravel Development Server

php artisan serve

The application will be available at:

http://localhost:8000

Web Routes Setup

In routes/web.php, your route definitions might look like this:

use Illuminate\Support\Facades\Route;

// Helper function for active menu
function set_active($route) {
    if (is_array($route)) {
        return in_array(Request::path(), $route) ? 'active' : '';
    }
    return Request::path() == $route ? 'active' : '';
}

Route::get('/', fn() => view('authentication.login'));

Route::group(['namespace' => 'App\Http\Controllers'], function () {
    Route::controller(AuthenticationController::class)->group(function () {
        Route::get('login', 'login')->name('login');
        Route::post('login/account', 'loginAccount')->name('login/account');

        Route::get('register', 'register')->name('register');
        Route::post('register/account', 'registerAccount')->name('register/account');

        Route::get('logout', 'logoutAccount')->name('logout');
    });

    Route::controller(HomeController::class)->group(function () {
        Route::get('/home', 'index')->name('home');
    });
});

Authentication Controller (Summary)

The AuthenticationController handles:

register() → Returns the register view
registerAccount(Request $request) → Handles registration with validation, API call, and feedback
login() → Returns the login view
loginAccount(Request $request) → Authenticates the user via API and stores the session token
logoutAccount(Request $request) → Logs out the user and clears session/cookies

This controller uses Laravel’s HTTP client and Toastr for notifications.

Souy Soeng

Laravel 11 Call API Project Example with Template

Introduction

Post a Comment

Souy Soeng