Codeigniter 4 installation

This is a full tutorial of a suggested way to install Grocery CRUD Enterprise to your already existing project with Codeigniter 4 framework. For some people this tutorial may require too many steps. However have in mind that if you follow the instructions step by step you will have a successful installation as this page is actively updated.

Step 1. From the email that you’ve received or from the user’s page (you will get instructions at the email of how to access user’s page) download the file that say’s “Without composer”. Once you’ve downloaded it, unzip it!
The folder structure that you will get is the following:

├── examples
│   ├── config.php
│   ├── database.php
│   ├── example.php
│   └── view.php
├── libraries
│   ├── autoload.php
│   ├── bin
│   ├── composer
│   ├── ...
│   ├── phpunit
│   ├── symfony
│   └── zendframework
└── public
    └── grocery-crud
        ├── css
        ├── fonts
        ├── images
        └── js

Step 2. rename the folder libraries to GroceryCrudEnterprise and move it to your project at the following path app/Libraries/GroceryCrudEnterprise with this structure we simply follow the “Codeigniter way” of adding libraries.

Notice: Have in mind here that although the folder of Grocery CRUD Enterprise has the name libraries (with lowercase) that has almost nothing to do with the Codeigniter folder Libraries (with capital L). This is a very common confusion that people may have during the installation. As per step 2. you will basically rename the folder libraries to GroceryCrudEnterprise to also avoid this confusion.

Step 3. go to the folder public and copy the folder grocery-crud to your public folder of your Codeigniter project.

Step4. We did currently installed Grocery CRUD Enterprise in our project and we need to create our configuration files in order to make it work! Go to app/Config and create a file with name GroceryCrudEnterprise.php. As the configuration is different than other frameworks we will use a custom one that will look like this (just copy really the code below)

In order to confirm that so far you did copy the correct files, your folder structure will look something like this:
.
├── LICENSE
├── README.md
├── _support
├── app
│   ├── Common.php
│   ├── Config
│   │   ├── App.php
│   │   ├── Autoload.php
│   │   ├── ...
│   │   ├── Format.php
│   │   ├── GroceryCrudEnterprise.php
│   │   ├── Honeypot.php
│   │   ├── ...
│   │   └── View.php
│   ├── Controllers
│   │   ├── BaseController.php
│   │   └── Home.php
│   ├── Database
│   │   ├── Migrations
│   │   └── Seeds
│   ├── Filters
│   ├── Helpers
│   ├── Language
│   ├── Libraries
│   │   ├── GroceryCrudEnterprise
│   │   │   ├── autoload.php
│   │   │   ├── bin
│   │   │   ├── composer
│   │   │   ├── ...
│   │   │   ├── phpunit
│   │   │   ├── symfony
│   │   │   └── zendframework
│   ├── Models
│   ├── ThirdParty
│   ├── Views
│   │   ├── errors
│   │   └── welcome_message.php
│   └── index.html
├── composer.json
├── contributing.md
├── env
├── license.txt
├── phpunit.xml.dist
├── public
│   ├── grocery-crud
│   │   ├── css
│   │   ├── fonts
│   │   ├── images
│   │   └── js
│   ├── favicon.ico
│   ├── index.php
│   └── robots.txt
├── spark
├── system
├── tests
└── writable

Step5. Now you are ready basically to use grocery CRUD Enterprise. You only need some small modifications. The easiest way to create two private methods to your controller that it will look like this:

<?php namespace App\Controllers;

// Add those two lines at the beginning of your controller
include(APPPATH . 'libraries/GroceryCrudEnterprise/autoload.php');
use GroceryCrud\Core\GroceryCrud;

...

private function _getDbData() {
	$db = (new \Config\Database())->default;
        return [
            'adapter' => [
                'driver' => 'Pdo_Mysql',
                'host'     => $db['hostname'],
                'database' => $db['database'],
                'username' => $db['username'],
                'password' => $db['password'],
                'charset' => 'utf8'
            ]
        ];
    }
private function _getGroceryCrudEnterprise($bootstrap = true, $jquery = true) {
        $db = $this->_getDbData();
        $config = (new \Config\GroceryCrudEnterprise())->getDefaultConfig();

        $groceryCrud = new GroceryCrud($config, $db);
        return $groceryCrud;
}

And now when you want to use groceryCRUD enterprise you will simply do this:

// Your function at your controller
public function customers()
{
    $crud = $this->_getGroceryCrudEnterprise();
    $crud->setTable('customers');
    $crud->setSubject('Customer', 'Customers');

    $output = $crud->render();
    
    return $this->_example_output($output);
}

private function _example_output($output = null) {
    if (isset($output->isJSONResponse) && $output->isJSONResponse) {
                header('Content-Type: application/json; charset=utf-8');
                echo $output->output;
                exit;
    }

    return view('example.php', (array)$output);
}

A full working example of a controller with name Example located at app/Controllers/Example.php can be found here:

Go to app/Views and create a file with name example.php and it is the exact same view that we were using as an example at Community edition. More specifically the view example.php will contain the below code:

If you would like you can also check the above steps into a video tutorial:

Troubleshooting

1. Getting the message “Ooooops, something went wrong!”
The most common mistake of the installation of grocery CRUD Enteprise is when the assets_folder has a wrong path. If you did follow all the steps and you see that your webpage looks like that:

wrong-codeigniter-installation

then make sure that you have configured your app/Config/App.php
file at the line public $baseURL = 'http://localhost:8080';. For example if your project URL looks like this:
http://localhost/my-test-project/public/index.php then your baseURL should look like this:
public $baseURL = 'http://localhost/my-test-project/public/';

It is really important to also don’t forget the trailing slash at the end of the URL.

The most common approach, best for security and suggested way of Codeigniter 4 installation is to configure your URL to point directly to your public folder. For example for apache virtual hosts you will probably have an apache configuration that is looking like this:

At the above example your $baseURL should look like this:

public $baseURL = 'http://my-test-project.local/';

2. Getting an empty box with a border
If you are getting an empty box with a border that is looking like this:

wrong-codeigniter-installation

This is because by default Codeigniter 4 has as CI_ENVIRONMENT=production in simple words Codeigniter is trying to hide all of the errors by default and you will not get any errors. You can bypass that by renaming the env that you have at the root to .env and uncomment the below line:

# CI_ENVIRONMENT = production

And replace it with:

CI_ENVIRONMENT = development

If you are using Google Chrome press right click “Inspect Element” and then go to the Network tab and check where the response is red (or else it returns header 500). Once you click on the URL you can see the error as per below screenshot:

inspect-error

You can also press right click “Open in new Tab” to see the error at full screen rather than the “Preview” tab.

For example in our case we’ve forgot to change the default database credentials to our ones. So by going to .env file and uncommenting this lines:

# database.default.hostname = localhost
# database.default.database = ci4
# database.default.username = root
# database.default.password = root
# database.default.DBDriver = MySQLi

to your specific database credentials everything is just working smoothly.

Notice: Grocery CRUD Enterprise is a framework agnostic library. That simply means that it doesn’t matter which framework you are using and it doesn’t matter the architecture you are using. This tutorial is taking some architecture decisions basically for you. If you need to have the full freedom of what structure to choose we are suggesting to see the full installation guide here.