Laravel, Navigator – Discovering Navigator an admin panel generator for Laravel

by Posted on

My purpose was to build-up a quick working administration interface to manage users listing. To be even more precise, journalists’ listing. At least, I had 2 main objectives :

  1. presenting these elements to my clients (PO) to insure that their needs have been correctly collected and understood.
  2. showing the same elements to the developers that will be in charge to develop it in Symfony.

I have decided first to use a tool name Agile Toolkit aka atk4, easy way to created working CRUD screens, but renounced after several attempts. Even though the tool seems very promising, it is far too similar to a true framework PHP like Symfony or Laravel so why don’t use directly a true framework, if you are able to do so. Then, I start to look-up for such resource especially in Laravel, that is considerably well documented and easy to handle for a non-developer like me.

Like always the project obey to the 3 main legitimated criteria of our desperate and desacralized digital world : it has to be technical, “ROIstic” and “waiting-phobic” aka a person unable to wait, too impatient of getting a result as quick as possible with minimizing the effort of inquiry.

Last but not least, I was forced to renounce to MAMP as it has taken me much more in configuration than in the real conception mostly because of PHP version or MySQL version.

I bumped into this article, written by Povilas Korop and that was it. I had to test one of these tool, Navigator seems to be the perfect tool.

Source : https://laravel-news.com/13-laravel-admin-panel-generators

One of the best concept in Navigator: BREAD

You may know CRUD, let me introduce you to BREAD. That is one of many core concepts inside the Navigator project.

BREAD is an acronym that stands for:

  • B for Browse
  • R for Read
  • E for Edit
  • A for Add
  • D for Delete

That was exactly what I was looking for : a turn-to-key and effective CRUD tool to manage whatever. In my case, manage journalists. Each journalist tightened to many articles.

Roughly, here is one of the screens that I made with Balsamiq. It is much better in this case to present a fully functional application.
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

Stop the crap: Install MySQL and Laravel globally

First of all, I was force to install MySQL. I used to leverage on the version of MySQL delivered with MAMP but this time it does not fit, it creates annoying artificial errors due to MySQL version. I invite you to read this article if you need to do so. I did also the installation of Sequel Pro, a free soft, which provide a nice GUI to manage your MySQL databases. In my case, it was also a way to verify the validity of the migration files made by Laravel.

Source : https://coolestguidesontheplanet.com/get-apache-mysql-php-and-phpmyadmin-working-on-macos-sierra/

To install Laravel globally, I strongly advise you to use Composer. That supposes you have installed Composer, that is a piece of cake, just make a quick search on Google for “Composer”. Here is some command to install Laravel globally.

Install globally Laravel and add to your bash profile

composer global require "laravel/installer"
echo 'export PATH="$PATH:$HOME/.composer/vendor/bin"' >> ~/.bash_profile
source ~/.bash_profile

Go to the path where you intend to dump your Laravel project. For me, it was historically the MAMP directory.

  cd /Applications/MAMP/htdocs/admin_voyager_laravel_explained/

Create the new project

laravel new voyager_admin_test_1

Go to the project

  cd /voyager_admin_test_1/

Install Voyager with the help of composer

composer require tcg/voyager

Do not forget to change to make in .env, the credentials for the MySQL database, that you have previously created. After this operation, do not forget to start your MySQL server.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_demo_1
DB_USERNAME=root
DB_PASSWORD=root

If you are still in the directory, you can launch the web application with the following command on the local server given by Laravel.

  php artisan serve

This is it! You can connect to Voyager via the local address: http://localhost:8000/admin/login. The couple user and password is: admin@admin.com:admin

Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

Installing MySQL

For those like me, who had the habit to use the MySQL from MAMP. Here the quick guide for the main commands in order to manage MySQL. You have to download the MySQL server and install it.

Source : https://coolestguidesontheplanet.com/get-apache-mysql-php-and-phpmyadmin-working-on-macos-sierra/

To connect to mysql

/usr/local/mysql/bin/mysql -v -uroot -p

To change the password of the admin root

SET PASSWORD FOR 'root'@'localhost' = PASSWORD('root');

The command line to Start MySQL

sudo /usr/local/mysql/support-files/mysql.server start

The command line to Stop MySQL

sudo /usr/local/mysql/support-files/mysql.server stop

To add the MySQL directory to your shell path

echo $PATH
echo 'export PATH="/usr/local/mysql/bin:$PATH"' >> ~/.bash_profile
source ~/.bash_profile

After the last command, you can connect to your MySQL server with your credentials root:root with this single line below.

mysql -u root -p;

“Hitting” some BREADs

This is where Navigator assists you as you may know what are the fields you want to expose for a future web application. For instance, you may want to expose Products, Shoes, Photos, Basket Players whatever… In my case, the idea was to handle journalists profile so I need to create a table with related information to the these journalists : address, email, photo, location, twitter account, preferred languages… etc and then another table that will store the posts for each journalist.

For simplicity purpose, I have drastically downgraded the information defining the journalist’s profile but the idea is here.

Do not forget to start the MySQL server
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

The database laravel_demo_1 will be the database that will back Voyager
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

This is it! You can connect to Voyager via the local address: http://localhost:8000/admin/login. The couple user and password is: admin@admin.com:admin
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

Nice! The welcome screen of Navigator, it works!
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

If you forgot to start the MySQL server, you will get some errors.
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

In Navigator, you will access to the entire database that give you the chance to create any table wanted.
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

In each table creation, do no forget to add every time as the 2 last columns, 2 timestamps one named created_at, the other updated_at.

We create a table named “gonzoarticles” and at the same time the model for this table.
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

You are assisted in the all process of creation
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

Defining the fields for the table
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

You can now add the BREAD to your table
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

Do not forget to give the authorization to the users to browse, unless you will not be able to check you recent listing of journalists for instance.
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

The BREAD for table gonzoarticle
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

The BREAD for table gonzojournalist
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

Create a relationship between my 2 tables: gonzoarticles, gonzojournalists
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

Add some stuff to gonzojournalist
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

Add some stuff to gonzoarticle
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

Check the result in the MySQL database with Sequel pro for table gonzojournalist
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

Check the result in the MySQL database with Sequel pro for table gonzoarticle
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

Some other great features in Navigator

Making Model
In the “app” folder of Laravel, if you ask to create the model, you will get it. The equivalent of php artisan make:model Gonzoarticle or php artisan make:model Gonzojournalist
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

Usage of the compass
If you are looking for application log, extra resources or you want to run some commands in tour Laravel project.
Have a look to the Compass. It is a section where you can run a bunch of Laravel command. It is sometime very handy because as you want to focus on you web application creation and are not often using command-line, you will not to have to jump to the console. Compass will be there to assist you in passing the command line, right through your browser.

You can in Compass, search for artisan make:model for instance and let Navigator run the command for you.
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

The application errors log file
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

The guys behind Navigator has the sense of detail, that makes the difference between a great tool and a common one. Sound frivolous, pointless and futile but you can select the icon for each content. Very seducing and educational when you presenting the tool to your Product Owner.
Laravel, Navigator - Discovering Navigator an admin panel generator for Laravel

Conclusion: The tool is great! It assists you in every step. A true time saver for a non-developer who wants to make the best presentation, sounds familiar to me šŸ™‚

The 2 tables for my project
A quick and dirty description of my 2 tables used in the project.

--- TABLE gonzojournalists
--- description Gonzo Journalism
portrait -- varchar(191)
displayName -- varchar(180)
addressCity -- longblob
--- PEOPLE
-- Guy de Maupassant
-- Buffalo Roam
-- Hunter S Thompson
-- Tom Wolf
-- Guido Gansoda
 
--- TABLE gonzoarticles 
--- description Gonzo articles
id -- integer
author_id -- integer (that make the relationship)
title -- varchar(191)
excerpt -- text 65535
body -- text 65535
image  -- varchar(191)
created_at -- timestamp
updated_at -- timestamp
 
 
--- DESCRIPTION
-- Style of journalism outrageously personal, opposed to the dogmas of subjective neutrality of the profession.
--- EXTENSION
-- Also refers to a type of pornography where the actor holds the camera at the same time as he interprets the scene.
--- ORIGINE
-- gonzo: silly, credulous, dupe in Italian or ganso: goose in Spanish
-- At the origin of gonzesse (chick), gorgonzola (cheese)... No just kidding, cheesy sense of humor :)

Read more

Published by Bruno Flaven

Bruno Flaven has been a Project Manager in a wide variety of Internet business applications both in Mobile and in Desktop for 20 years now. You can ļ¬nd more information about his professional life on his personal website (www.ļ¬‚aven.fr) or his linkedin proļ¬le: https://fr.linkedin.com/in/brunoļ¬‚aven. He is currently working In France Media Monde (FMM) mostly on mobile applications (iOS and Android). He is currently P.O for a Backoffice project made with Symfony. He also made few trainings to facilitate the handling of the tools that he helps to make.

Related Posts