Menu ordering/management application demo, like Wordpress menu manager

Overview

Menu manager like Wordpress using Laravel and Nestable

See demo at: http://laravel-menu-builder.gopagoda.com/admin/menu Tutorial coming up at: http://maxoffsky.com

This application demonstrates usage of Nestable plugin jQuery plugin to provide the user with nice menu ordering experience without a page refresh: menu ordering in action

The menu controller is in app/controllers/Admin/MenuController.php The menu model is in app/models/Menu.php

A note on the data structure for the menu

The important columns of the "menus" table are:

  • id
  • parent_id
  • order

With these 3 fields we can build nested menus as many levels deep as you want. The Nestable plugin helps modify the values of these fields for the appropriate rows of data.

Use of recursion

The hard part that took me a looong time to build is a very small function inside of app/models/Menu.php:

public function buildMenu($menu, $parentid = 0) 
{ 
  $result = null;
  foreach ($menu as $item) 
    if ($item->parent_id == $parentid) { 
      $result .= "<li class='dd-item nested-list-item' data-order='{$item->order}' data-id='{$item->id}'>
      <div class='dd-handle nested-list-handle'>
        <span class='glyphicon glyphicon-move'></span>
      </div>
      <div class='nested-list-content'>{$item->label}
        <div class='pull-right'>
          <a href='".url("admin/menu/edit/{$item->id}")."'>Edit</a> |
          <a href='#' class='delete_toggle' rel='{$item->id}'>Delete</a>
        </div>
      </div>".$this->buildMenu($menu, $item->id) . "</li>"; 
    } 
  return $result ?  "\n<ol class=\"dd-list\">\n$result</ol>\n" : null; 
} 

This function uses recursion to display the menu to the user even if the menu is many many levels deep. This function alone can save you a bunch of time.

Installation instructions:

  • Download this repo
  • Set up a MySQL DB named 'shop-menu' and import install.sql file into it, make sure you edit credentials in app/config/database.php to match yours
  • Open up terminal and CD into the folder of this repo
  • Run "php artisan serve" to run the application
  • Open up the browser and navigate to "localhost:8000" to see it in action

Star this repo!

The more people star my repos - the more I will give back to the community.

Read more on my blog and follow on Twitter

I post tutorials all the time on my blog : http://maxoffsky.com, stay updated on my Twitter: http://twitter.com/msurguy

License

The Laravel menu manager is open-sourced software licensed under the MIT license

Comments
  • Rendering issue

    Rendering issue

    This is what I get in return

    121

    code

    model

    public function buildMenu($menu, $parentid = 0) 
    	{ 
    	  $result = null;
    	  foreach($menu as $item) 
    	    if ($item->parent_id == $parentid) { 
    	      $result .= "<li class='dd-item nested-list-item' data-order='{$item->order}' data-id='{$item->id}'>
    	      <div class='dd-handle nested-list-handle'>
                <i class='fas fa-arrows-alt'></i>
    	      </div>
    	      <div class='nested-list-content'>{$item->title}
    	        <div class='float-right'>
    	          <a href='/admin/menusnav/{$item->id}'>Edit</a> |
    	          <a href='#' class='delete_toggle text-danger' rel='{$item->id}'>Delete</a>
    	        </div>
    	      </div>".$this->buildMenu($menu, $item->id) . "</li>"; 
    	    } 
    	  return $result ?  "\n<ol class=\"dd-list\">\n$result</ol>\n" : null; 
    	}
    	// Getter for the HTML menu builder
    	public function getHTML($items)
    	{
    		return $this->buildMenu($items);
      }
    

    controller

    public function index() {
                     $categories = Category::orderby('title', 'asc')->get();
    		//navbar
    		$navbars = NavbarMenu::orderby('order', 'asc')->get();
    
    		$navbar = new NavbarMenu;
                   $navbar = $navbar->getHTML($navbars);
            
            return view('admin.menus.index', compact('navbars', 'navbar'));
        }
    

    and my blade

    {!! $navbar !!}
    

    Any idea what might cause the problem?

    opened by robertnicjoo 5
  • Some remarks

    Some remarks

    Hey, Thanks for the example code. I did it somewhat similar, but instead of dropping, just use a save button and serialize/save the entire form at once, and created a Twig macro for menu builder :)

    I just have a few remarks/questions:

    • You escape all input, ie. e(Input::get('order')). But isn't this unneeded because of Laravels ORM? Isn't it more logical to escape when displaying data?
      • You use dropCallback, which isn't in the linked version of Nestable. What fork do you use/recommend, as the original project doesn't seem to be maintained?
      • Instead of buildMenu function directly, you could also create a method to build a tree, and use that to create your menu. This would make the buildMenu function a tiny bit simpler and you could use the same tree to build the front-end menu. (Just a suggestion)
      • Isn't it best practice to create links to actions (or named routes), and not just (url('admin/menu/etc')). Doesn't matter that much, but when you are creating a tutorial, might as well use best practices.
    opened by barryvdh 4
  • get items in front-end

    get items in front-end

    Hi,

    How do I get menu in front-end?

    I mean when I use

    $menus = TopMenu::orderby('order', 'asc')->get();
    $topmenu = new TopMenu;
    $topmenu = $topmenu->getHTML($menus);
    

    I will get public function buildMenu($menu, $parentid = 0) from model which is include edit,delete buttons etc. at this point i only need to get menu items in order to show in navbar to users, what should i do?

    Thanks.

    opened by robertnicjoo 2
  • facing compilation problem in ubuntu

    facing compilation problem in ubuntu

    PHP Warning: require(/home/cavisson/work/laravel/laravel-shop-menu-master/bootstrap/../vendor/autoload.php): failed to open stream: No such file or directory in /home/cavisson/work/laravel/laravel-shop-menu-master/bootstrap/autoload.php on line 17 PHP Fatal error: require(): Failed opening required '/home/cavisson/work/laravel/laravel-shop-menu-master/bootstrap/../vendor/autoload.php' (include_path='.:/usr/share/php') in /home/cavisson/work/laravel/laravel-shop-menu-master/bootstrap/autoload.php on line 17

    opened by sonu2018 0
  • error when running 'php artisan serve'

    error when running 'php artisan serve'

    {"error":{"type":"Symfony\Component\Debug\Exception\FatalErrorException","me ssage":"Class 'Fideloper\Proxy\ProxyServiceProvider' not found","file":"C:\xa mpp\htdocs\menumaster\vendor\laravel\framework\src\Illuminate\Foundation \ProviderRepository.php","line":158}}

    opened by nanangkoesharwanto 1
Owner
Maksim Surguy
MS in Tech Innovation, Design Tech at Amazon Past: dev @firstech, @nbcuniversal, creator of Bootsnipp, Drawingbots, Plotterfiles and many more.
Maksim Surguy
Laravel Manager provides some manager functionality for Laravel

Laravel Manager Laravel Manager was created by, and is maintained by Graham Campbell, and provides some manager functionality for Laravel. Feel free t

Graham Campbell 371 Jul 11, 2022
Eloquent Befriended brings social media-like features like following, blocking and filtering content based on following or blocked models.

Laravel Befriended Eloquent Befriended brings social media-like features like following, blocking and filtering content based on following or blocked

Renoki Co. 720 Jan 3, 2023
Slim Jam is a demo application to provide examples for composer package, PHPSpreadsheet, Shopify API etc. usages.

SLIM JAM Slim Jam is a demo application to provide examples for composer package, PHPSpreadsheet, Shopify API etc. usages. This project aims to take a

Uğur ARICI 2 Jan 9, 2022
A Laravel package to retrieve key management from AWS Secrets Manager

A Laravel package to retrieve key management from AWS Secrets Manager Communication via AWS Secrets Manager may incur unnecessary charges. So we devel

null 2 Oct 10, 2022
Bring multi themes support to your Laravel application with a full-featured Themes Manager

Introduction hexadog/laravel-themes-manager is a Laravel package which was created to let you developing multi-themes Laravel application. Installatio

hexadog 86 Dec 15, 2022
Laravel-tagmanager - An easier way to add Google Tag Manager to your Laravel application.

Laravel TagManager An easier way to add Google Tag Manager to your Laravel application. Including recommended GTM events support. Requirements Laravel

Label84 16 Nov 23, 2022
Livewire component that brings Spotlight/Alfred-like functionality to your Laravel application.

About LivewireUI Spotlight LivewireUI Spotlight is a Livewire component that provides Spotlight/Alfred-like functionality to your Laravel application.

Livewire UI 792 Jan 3, 2023
Livewire component that brings Spotlight/Alfred-like functionality to your Laravel application.

About Wire Elements Spotlight Wire Elements Spotlight is a Livewire component that provides Spotlight/Alfred-like functionality to your Laravel applic

Wire Elements 790 Dec 27, 2022
Laravel & Hasura Demo

Laravel & Hasura Demo

Rob Mellett 2 Oct 4, 2021
Laravel Datatables Package Demo App

#Laravel Datatables Demo App Datatables Package for Laravel 4|5 This package is created to handle server-side works of DataTables jQuery Plugin via AJ

Arjay Angeles 139 Dec 23, 2022
The best squirrel tracker. Ever. (A demo app for LaravelSF meetups)

LaraSqrrl Identify and track squirrels via text, now using AWS Rekognition! Created for the November 10th, 2015; February 9th, 2016; May 10th, 2016; a

Paul Foryt 3 Mar 29, 2022
Repository with demo for "Sextou"

Newsletter Demo APP Beer & Code Newsletter Page for newsletter. ?? About this repository Demo App Demo APP for the talks at Beer and Code Youtube chan

Beer And Code 4 Feb 5, 2022
Lumen rest api demo with Dingo/Api, JWT, CORS, PHPUNIT

lumen-api-demo 这是一个比较完整用 lumen 5.7 写的的 REST API 例子。使用了 dingo/api ,jwt 实现登录,功能上很简单,登录,注册,发帖,评论,单元测试(正在补充)。 lumen5.x 请看对应的分支 有需要随时联系我 lumen/laravel/rest

Yu Li 859 Oct 25, 2022
This is an open source demo of administration panel for polymorphic relationship and SEO content

Laravel SEO admin This application demonstrates usage of polymorphic relationships described at (http://maxoffsky.com/code-blog/using-polymorphic-rela

Maksim Surguy 127 Oct 11, 2022
A Laravel 8 and Livewire 2 demo showing how to search and filter by tags, showing article and video counts for each tag (Polymorphic relationship)

Advanced search and filter with Laravel and Livewire A demo app using Laravel 8 and Livewire 2 showing how to implement a list of articles and tags, v

Sérgio Jardim 19 Aug 29, 2022
Laravel Real-time chat app demo with React, Laravel Echo, Breeze, Socket.io, Redis, Inertia.js, TailwindCSS stack.

Laravel Real-time Chat App You can build yours from scratch with the following Medium article https://medium.com/@sinan.bekar/build-a-real-time-chat-a

Sinan Bekar 9 Oct 3, 2022
A demo of how to use filament/forms to build a user-facing Form Builder which stores fields in JSON.

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Dan Harrin 41 Dec 24, 2022
Html menu generator for Laravel

Html Menu Generator for Laravel This is the Laravel version of our menu package adds some extras like convenience methods for generating URLs and macr

Spatie 813 Jan 4, 2023
A TWBS menu builder for Laravel

Laravel Menu Builder A menu builder for Laravel 4-5 using Bootstrap's markup. Документация на Русском Note that this package is shipped with no styles

Alexander Kalnoy 24 Nov 29, 2022