menu

Folder Structure

Materialize also provide HTML laravel version. In this page, we have provided installation and usage information.

Once you download the template from ThemeForest, unzip the package and you will find the below folder structure in Materialize-html-laravel-template/.


  Materialize-html-laravel-template/
      ├── app/
      |   ├── Http/
      |   |   ├── Controllers/
      ├── bootstrap/
      ├── config/
      |   ├── custom.php (Template configuration file)
      ├── database/
      ├── public/(public content generated after compilation done.)
      |   ├── css/
      |   ├── fonts/
      |   ├── images/
      |   ├── js/
      |   ├── json/
      |   |   ├── horizontalMenu.json
      |   |   ├── template-list.json
      |   |   ├── verticalMenu.json
      |   ├── vendors/
      |   ├── mix-manifest.json
      ├── resources/
      |   |   ├── fonts
      |   |   ├── images
      |   |   ├── js
      |   |   ├── json/
      |   |   ├── lang/ (Include Languages)
      |   |   |   ├── de/
      |   |   |   |  ├── locale.php
      |   |   ├── sass/ (Include scss files)
      |   |   ├── vendors/
      |   |   ├── views/ (Include blade.php files)
      |   |   |   ├── auth/
      |   |   |   ├── layouts/
      |   |   |   ├── pages/
      |   |   |   ├── panels/
      ├── routes/
      ├── storage/
      ├── tests/ (For testing)
      ├── .editorconfig (Related with your editor)
      ├── .env.example (Include Database credentials, it will be .env after update it.)
      ├── artisan (Include artisans commands)
      ├── composer.json (Dependencies used by composer)
      ├── package.json (Dependencies used by node)
      ├── phpunit.xml (Related With testing)
      ├── server.php (For php's internal web server)
      └── webpack.mix.js (Laravel's webpack file) 
  

Tip: We also provide laravel starter-kit to speed up your laravel development with Materialize Admin.

Following is the details for laravel folder structure.
Folder/Files Details
app/ This folder contains all the controller inside controllers folder and model files.
bootstrap/ This folder contains cache and app.php.
config/ This folder contains the config files. You can find custom.php file for template customization.
database/ This folder contains database Migrations, model factories, & seeds.
public/ This folder contains index.php ,static folder & Build of the tempalte.
public/json/template-list.json This file contains the list of search menu items.
resources/ This folder contains views, layouts, store and js, sass, json,lang files.
routes/ It contains the web.php file where pages can be served on the browser.
storage/ This folder contains compile blade templates.
verticalMenu.json It contains the list of main-menu sidebar items of Vertical menu.
horizontalMenu.json It contains the list of main-menu items of Horizontal menu.
views/layouts It contains the all master layout files.
views/panels It contains all panel files like header / footer / sidebar / navbar etc.
views/pages It contains the content page files. To create new page refer the code.

Installation

Given below are the steps you need to follow, to install the materialize-html-laravel-template on your system:

Step 1: Open the terminal in your root directory(Materialize-html-laravel-template) & to install the composer packages run the following command:

  
    composer install
  
      

Step 2: In the root directory, you will find a file named .env.example, rename the given file name to .env and run the following command to generate the key (and you can also edit your database credentials here).

  
    php artisan key:generate
  
      

Step 3: By running the following command, you will be able to get all the dependencies in your node_modules folder:

  
    npm install
  
      

Step 4: To run the project, you need to run following command in the project directory. It will compile the php files & all the other project files. If you are making any changes in any of the .php file then you need to run the given command again.


  npm run dev

    

Step 5: To serve the application you need to run the following command in the project directory. (This will give you an address with port number 8000.)

Now navigate to the given address you will see your application is running.


php artisan serve

  

To change the port address, run the following command:


  php artisan serve --port=8080 // For port 8080
  sudo php artisan serve --port=80 // If you want to run it on port 80, you probably need to sudo.

      

Watching for changes: If you want to watch all the changes you make in the application then run the following command in the root directory.

  
    npm run watch
  
      

Building for Production: If you want to run the project and make the build in the production mode then run the following command in the root directory, otherwise the project will continue to run in the development mode.

  
    npm run prod
  
      
Required Permissions

If you are facing any issues regarding the permissions, then you need to run the following command in your project directory:

  
    sudo chmod -R o+rw bootstrap/cache
    sudo chmod -R o+rw storage
  
      

Create New Page

How to add a New Page:
  • Create New View with blade.php extenstion.
  • Create Controller for different methods related to page. (Optional. You can use default controller also.)
  • Set Path in routes/web.php file to serve the page on the browser.
  • Add page link to resources -> json -> verticalMenu.json & horizontalMenu.json files to display menu item in sidebar/menu.

  • Add page link to resources -> json -> template-list.json file to display in navbar search option.

  • Add page name to resources -> lang -> en{all language folder} -> locale.php file to display in multi language.
Steps to add a new page :

Step 1: Create a file with the extension .blade.php under the resources -> views -> pages directory. Let's create a testPage for an example with filename testPage.blade.php and placing the below code in that file.

        
  @extends('layouts/contentLayoutMaster') // choose any one option {contentLayoutMaster/fullLayoutMaster}

  @section('title', 'Content Layout')  // change title accrodingly

  @section('content')
      <div>
          .....
      <div>
  @endsection
        
      

Step 2: To add new controller, use below command :

  
    php artisan make:controller {ControllerName} {-r}
  
      
Add Configuration in controller as described here.

To add breadcrumbs :

        
  $breadcrumbs = [
      ['link'=>"/",'name'=>"Home"],['link'=>"/",'name'=>"Page"], ['name'=>"Content Layout"]
  ];

  return view('/pages/content-layout', [
      'breadcrumbs' => $breadcrumbs
  ]);
        
      

Step 3: After creating file and controller you need to declare its route where it can be served on the browser, suppose you want created page to be serve on the route http://localhost:8080/testPage . To access this page define its routes in the resources -> web.php file.

    
      Route::get('/testPage', function () {
        return view('pages/testPage');
      });
    
      

Step 4: After defining the route, add page link to sidebar at resources -> json -> verticalMenu.json / horizontalMenu.json file.

Option 1: To add item in menu.


  {
    "url": "testPage",
    "name": "Test Page",
    "class": "waves-effect waves-cyan",
    "icon": "test_icon",
    "slug": "test-menu",
    "tag": "5",
    "tagcustom": "new badge pill pink accent-2 float-right mr-2"
  },

      

Option 2: To add item as a sub menu item.


  {
    "url": "javascript:void(0)",
    "name": "Test Page",
    "class": "collapsible-header waves-effect waves-cyan",
    "slug": "test-slug",
    "icon": "test-icon",
    "submenu": [
      {
        "url": "submenu1",
        "name": "submenu1",
        "slug": "submenu1"
      }
    ]
  },

  

Step 5: For page searching options in navbar search box, add page link in resources -> json -> template-list.json file.

  
    {
      "url": "testPage",
      "name": "Test Page",
      "icon": "test-icon",
      "category": "Test Category"
    },
  
      

Step 6: Add page name to resources -> lang -> en{all language folder} -> locale.php file to display in multi language.

  
    "Dashboard"=> "Instrumententafel",
    "Modern"=> "Modern",
  
      

After completing these above steps you need to run the command npm run dev or npm run watch command in the project directory. After running this process you need to run the command php artisan serve. It will serve your app on the localhost.

Configuration

To configuration Options in details:

You can change configuration options from config -> custom.php file which can be effected for all pages in templates. For Page Level Configuration you can change variable values in App -> Http -> Controller -> {Controller File} file.

Key Possible Options Details
mainLayoutType vertical-modern-menu(default),vertical-menu-nav-dark,vertical-gradient-menu,vertical-dark-menu,horizontal-menu Set available Layout themes.
pageHeader true / false (default) This option is used to show breadcrumb.
bodyCustomClass Using this variable, you can add your own custom class to include in <body> tag.
navbarLarge true (default), false This option is used to show navbar large.
navbarBgColor cyan,teal,light-blue,amber(any materializecss color class) This option is used to change the background color of navbar.
isNavbarDark null (default), true and false Use true for dark navbar and false for white navbar. Null is used for set navbar accrodin to layout types.
isNavbarFixed true(default) or false This is used to set navbar fix or static.true for fixed and false static.
activeMenuColor Any of materializecolor class can be pass This option is used to change the sidebar's active menu color.
isMenuDark null (default),true or false. This option is used to set sidebar menu dark or light. True for dark, false for light and null for sidebar according to layout theme.
isMenuCollapsed true, false(default) Toggle display of collapse or expand.
activeMenuType ""(default),sidenav-active-square,sidenav-active-rounded,sidenav-active-fullwidth This option is used to set the sidebar active-menu's style. Blank("") used to set default style according to layout theme.
isFooterDark null(default), true,false This option is used to set footer dark or light. Null is used to set footer default according to layout.
isFooterFixed true, false(default) This option is used to set footer fixed or static.
templateTitle Materialize (default) This option is used to change the Template name.
isCustomizer true(default),false This option is used to add or remove costomizer from template.
defaultLanguage en(default),pt,de,fr This option is used to change the default change of whole template.
'largeScreenLogo' =>"" images/logo/materialize-logo-color.png(default) This option is used to change logo of materialize template.
'smallScreenLogo' =>"" images/logo/materialize-logo.png(default) We used two default logo for small and large screen because of template layout variation.
'isFabButton' true and false(default) To add or remove favorite fix floating button on page.
'direction env('MIX_CONTENT_DIRECTION', 'ltr')(default), env('MIX_CONTENT_DIRECTION', 'rtl') To switch ltr/rtl direction of the layout. By defaul this will work with LTR layout.
IMPORTANT

It is mendetory to change the Main layout name in variable.scss file. Refer the below file path.

materialize-admin\materialize-html-laravel-template\resources\sass\pages\variables.scss

e.g.

For vertical-gradient-menu:-
@import "../themes/vertical-gradient-menu/variables";
@import "../themes/vertical-gradient-menu/theme-variables";

Then run npm run dev

Change for Page Level Configuration :

If you want to add Page level configuration for layout, you need to to set array for page configuration in app -> Http -> Controller -> {Controller file} and send it to your view.

      
      public function {functionName}(){
        $pageConfigs = [
            'mainLayoutType' => 'vertical-menu-nav-dark',
            'navbarLarge' => false,
            'navbarBgColor' => 'cyan',
            'bodyCustomClass' => 'testClass'
        ];
    
        return view('/pages/testPage', [
            'pageConfigs' => $pageConfigs
        ]);
      }
    

RTL

To create RTL layout.There are two way to do this.

First way

Change MIX_CONTENT_DIRECTION variable value from ltr to rtl in .env file

Second way

Change configuration option from config -> custom.php file.

Update direction value from 'direction' => env('MIX_CONTENT_DIRECTION', 'ltr'), to 'direction' => env('MIX_CONTENT_DIRECTION', 'rtl'),

;