Hackernoon logoThe Best Way to Create a Web Admin Dashboard for Your Projects by@miglisoft

The Best Way to Create a Web Admin Dashboard for Your Projects

image
Miglisoft Hacker Noon profile picture

@miglisoftMiglisoft

High quality plugins, scripts & tools for Web Development

If you are here you probably have some notions of web programming: HTML, CSS, PHP, MySQL, Javascript and others. And whether you are a professional, a developer within an agency, or have simply developed your own personal projects, you have probably needed at some point to create an administration panel to manage your data.

That's exactly what we're going to talk about here, and I'm going to introduce you to a tool that allows you to create a professional, fully customized dashboard admin in record time and without programming.

CMS or not CMS?

A simple solution at first glance is to opt for a CMS: there are indeed many of them, the most popular being for example Wordpress, Joomla!, Drupal, or for online sales Prestashop and Magento. All of these CMS have an integrated administration panel, capable of doing just about anything you want to ask it to do. Yes, ... but "just about". CMS are a good choice in certain situations, especially if you have a standard project and want to realize it quickly with limited means or efforts.

You want to create a corporate website, a blog? No problem: download Wordpress, buy a theme or use a free theme among the hundreds of thousands you can find on the market. You need to integrate a form? No problem, add a plugin. Improve security? speed up loading time? improve your SEO? create a sitemap? a payment system? No problem, add more plugins. And so on and so forth.

This is where difficulties can often be encountered, as soon as a project requires functionality that goes off the beaten track.

Plugins don't always do exactly what you need, and to modify them you'll have to hire a developer. You will then have to update them - security issues make it imperative that plugins are updated regularly. If a plugin has a bug ... the easiest way is to work around it ... if not, modify the code, but you will have to be very careful when updating ... otherwise report the bug to the developer and hope he will take it into account ... in not too long a time.

Maybe you want a design that reflects your corporate image rather than a standard theme? Well, hire a developer.

There are 2 more reasons why I almost never use a CMS. Once again, it is a personal choice, I do not want to denigrate them, but simply to point out their weaknesses.

  1. These systems are heavy. When one needs to enter the code or the database one can see how obese they have become by wanting to do everything. Typically, the question is: "where will I be able to find this function" or "where can I find this attribute in the database".
  2. The administration panels are not easy for everyone. They are not custom-made. If you're working for clients they're going to have to take them over, it's sometimes problematic. Even often.

For these reasons, many web agencies and developers prefer to opt for custom development.

  • I choose my development tools according to my needs and preferences.
  • I structure my project according to its internal logic.
  • I code exactly what I need to code.
  • I load only what I need to load.
  • I structure my database clearly, naming the tables and their respective contents.

Do not reinvent the wheel

Of course, it is unthinkable nowadays to program everything from A to Z.

CSS frameworks are for example very useful (even indispensable) for a responsive design. But I'm free to choose the one that suits me best: Bootstrap, Bulma, Pure, Semantic UI, ... and great, I can optimize and compile SCSS.

In the same way, you can opt for a Javascript framework like VueJs or React, or in a more traditional way use PHP and jQuery, depending on your preferences and objectives.

But there is no need to repeat the same preparation work each time. If I am working on a website, I will most of the time use the same base, which I will then adapt according to the needs.

Here's an example: Bootstrap 4 starter project

This directory is a working base, which includes these features:

  • MVC structure
  • Routing system
  • PHP Cache system
  • Bootstrap SCSS
  • CSS, JS and Image optimization
  • Gulp compiler

This is for me a good basis for work. But now let's get down to business.
I'm going to create my database, use its content to fill my pages, I'll have to create a backend to be able to manage all this. So here comes the big question.

How can I create my dashboard admin without having to work on it for weeks?

image

Here is the little story:

I started by developing from scratch my first admin panels. Then of course, by doing a little copy and paste, you save a little time. But soon I thought it would be interesting to change my approach.

I work with OOP programming in PHP. Each table of my database is managed by the administration system using a PHP object which properties are the fields of the table.

So I created a system that allows me to retrieve tables and fields from my database and convert them into PHP objects. Great, It works very well, I save hours of work and the result is perfect. But let's go further: wouldn't it be possible to generate my forms in the same way? Perfect!

Now let's think about it and go a bit further: a database is a logical system, data are characterized.

In other words, the fields of a table each have identifiable properties. By retrieving each property we can deduce the logic that will have to be implemented in the admin dashboard. An intelligent system capable of reading this data correctly should be able to generate most of the admin panel of my dreams.

The different types of fields will therefore be analyzed by the program, called "CRUD Generator".

image

This program allows using simple forms to display the fields of my database. The user reviews the options proposed for each field and then validates the form. The CRUD Generator generates the dashboard admin files. It's a bit magical actually.

Let's take a few examples:

The generator detects a numeric field: it will offer the user different choices (number or boolean value). In the generated administration, the forms will validate the data accordingly. If the field is of the boolean type, radio buttons "yes/no" will be displayed.

The generator detects a text field: the possibilities are different. The user may want a simple input field, or textarea. He will have the possibility to integrate other plugins: Rich Text Editor (TinyMce), character counter.

A text field can also be a file/image. In this case, the generator proposes to choose the path to save the files / images, different options to resize the images, create thumbnails, etc.. And the forms will automatically integrate an upload plugin.

The challenge is then, of course, to manage relationships between tables, generate queries to filter lists, manage users and their respective rights, and much more.

This program required several years of development, first from time to time as needed, then it became interesting to publish it and create a complete documentation, and an installation system. I won't detail all the features here, that's what the official website is for:

https://www.phpcrudgenerator.com

You will find a functional demo of the CRUD generator, the generated admin dashboard, the full documentation and many tutorials. The admin panel is built from the Sakila database, which is an example of a complete relational database offered by MySQL.

4 essential features of the CRUD generator

image
  • The CRUD Generator is a web application. You don't need anything other than your browser.
  • It is absolutely independent of your front end. It can therefore be used to manage websites as well as mobile applications.
  • It's an intelligent system. It analyzes and interprets the structure of your database, all types of relationships, fields, and allows you to generate your administration accordingly.
  • The generated code is clean, clear and understandable. If you are a programmer you can easily customize it according to your needs.

4 essential features of the generated admin dashboard

image
  • The admin panel is very simple and can be easily used by people with no prior knowledge of this type of content management system.
  • It is built with popular tools and frameworks known by every web programmer: Bootstrap, jQuery, a MVC structure, a router and TWIG templates (Symphony's template engine)
  • The system offers many advanced features such as filtering, searching, exporting and printing of data.
  • It offers a neat design, about twenty Bootstrap themes are included and customizable from the CRUD interface. The forms use the plugins adapted to each field: dates, uploads, text editor, etc.

Conclusion

The PHP Crud Bootstrap admin dashboard generator is perfect for anyone who wants to build a web admin application from any MySQL database. It is a very fast and efficient solution that can save you weeks of work. You will get a professional result, highly reliable, and easy to use for most people.

Web developers will be able to extend its functionalities as needed with clear and well-organized code, based on the most popular development tools mentioned above.

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.