Dcat Admin Build Page Layout

Keywords: Laravel

Dcat Admin is a CMS background management framework based on the secondary development of laravel-admin. The main reason I chose it was also attracted by its rich components. After all, there is no front-end that I can work with right now. It would be a pleasure if I could make those forms easy.

If Dcat is skilled, a companion CRID is built after each module has built its data table. Searches are available. PHP developers can easily focus on other places.

This is a learning summary note that I can use to review in the future when my memory is lost.
Official Manual address on page layout: Read Chinese Documents for Dcat Admin before development

Next is my own summary note.

What I need now is to make a page with some tips on top, one line at a time.
The following line has left and right columns.

Content class files are encapsulated at the bottom level in the Dcat framework:

use Dcat\Admin\Layout\Content;

In the body() method, you can fill in the string directly.

public function index(Content $content){
   return $content->body("This is a custom page");
}

You can also place anonymous functions to lay out your pages. When you lay out your pages, you need to introduce two classes of files.

use Dcat\Admin\Layout\Row;
use Dcat\Admin\Layout\Column;

Here are index Complete code for class:
public function index(Content $content){
       //$tab is the code for the tab, delete it before you paste it.

        return $content
                ->body(function(Row $row) use($tab){
                     $row->column(12,$this->showMessage());

                     $row->column(12,function(Column $column) use ($tab){
                        $column->row(function(Row $row) use($tab){
                            $row->column(6,$this->form());
                            $row->column(6,$tab->withCard());  
                        });
                     });
                });
    }

Now the code:
An anonymous function is passed in the body() method, and the class Row is placed as a parameter. The Dcat framework uses a bootstrap raster system, with each row 12 in length.

//This way of writing defines a column that is 12 in length, meaning it fills the screen, and showMessage for parameter 2 returns some html strings.
$row->column(12,$this->showMessage());  

The next code sets the left and right columns, so first it makes a big frame that you can interpret as an iframe tag.

$row->column(12,function(Column $column) use ($tab){

Then set a line with $column->row()

$column->row(function(Row $row) use($tab){

Finally, two subcolumns are set, each occupying six widths.

$row->column(6,$this->form());
$row->column(6,$tab->withCard()); 

Complete code for left and right columns:

$row->column(12,function(Column $column) use ($tab){
      $column->row(function(Row $row) use($tab){
           $row->column(6,$this->form());
           $row->column(6,$tab->withCard());  
       });
});

Note that $row->column() first, if you want to continue nesting layouts inside, you need to convert to $column->row() first by setting up a row and then by column with $row->column(). It's not difficult to understand things, but it's good to wrap them up in notes. Ha-ha.

That's how it's described in the manual.

#Make Tab Tabs

The framework also provides a variety of page components, such as the Tab tab
This Tab class file needs to be introduced before use

use Dcat\Admin\Widgets\Tab;

Then follow the code below to instantiate the Tab class as an object and set the contents of the tab through the add() method.
Parameter 1: is the name of the tab
Parameter 2: What to show
Parameter 3:true represents the default selected state

public function index(Content $content){

        $tab = Tab::make();
        $tab->add('not running',$this->grid(), true);
        $tab->add('Run',$this->executeTable());
 Last call $tab->withCard() The method will display a tab

The complete code is as follows: I changed the layout to three rows and one column.

 public function index(Content $content){

        $tab = Tab::make();
        $tab->add('not running',$this->grid(), true);
        $tab->add('Run',$this->executeTable());

        return $content
                ->translation($this->translation())
                ->title("Batch Import Data")
                ->description($this->description()['index'] ?? trans('admin.list'))
                ->body(function(Row $row) use($tab){
                     $row->column(12,$this->showMessage());

                     $row->column(12,$this->form());
                     $row->column(12,$tab->withCard());  
                });
    }

Design sketch:

Currently, my plan is to do a data statistical analysis background using Dcat, and then do search engine + big data analysis using Elasticsearch.

If you can use your proficiency this week, you'll probably make much faster progress. If you can do it yourself, you won't have to do any mapping. Ha-ha.

Posted by sandeep251088 on Sun, 26 Sep 2021 09:47:52 -0700