I Need help to create database driven nav menu

Can someone guide me with step by step documented instruction if any on how to create a dynamic nav menu from a database. I have tried “url parameters”, repeating div, with dynamic attribute links and even “page routing” and a combination of trying to create the dynamic menu without using app connection and just writing all php with sql to my database but Wappler didn’t make that easy.

If anyone out there that has done a dynamic nav menu before driven by a database for cms purposes to manage the website where you can click on the menu and it takes you to the related dynamic data can you please share. Even a quick video will be much appreciated.

I have my database table build as such with these fields [page_id, menu_name, page_title, page_contents, page_description, page_img, Page_keyword, page_metadesc, datetime]

My goal is to query the page_id and menu_name to create the website main nav menu, with url parameters or page routing or whatever way is used to accomplish this. Then query the rest of the table data on a new page, let say the menu_name was the about us page. So, once you click the “about us” link it will redirect you to the page base of the page_id to the content. Please I need help I have been struggling to figure this simple task now for a year using Wappler. The goal here is to build my own cms where I can add new nav menu and delete.

Thanks a lot @Hyperbytes @ben @George @Teodor

I am actually about to put something like this together for my own project I am working on that needs to be ready by month end, so when I do that part I will share with you how I did it.

Hello @bradbrd992
The dynamic menu is actually nothing more than a repeat region, which repeats your dynamic menu items (links).

Yup I just tested this out, and obviously it is pretty dependant on your database and your needs however.

Database Structure

id url name status depth
1 /index.php Home 1 1
2 /about.php About Us 1 1
3 /contact.php Contact Us 1 1
4 /products.php Our Products 1 1

So I have used a really simple database, most is self explanatory, the status is 0 for disabled or 1 for enabled, because I may not want to always have a navigation items that shows in the navigation, like a privacy policy, i may only want that to show as a link in some text or in the footer, so i can set the status to 0.
The depth is 1 for all navigation i want to show all the time, if I had a dropdown I may make it depth 2 lets say, for navigation i want to show inside a dropdown menu.

In its simplest form you need a database query

  1. Server connect, make a database query to call in all your navigation data, save
  2. Make a new page
  3. Make sure all the frameworks are added like jquery, app connect, bootstrap
  4. Save your page
  5. Click App in your App Structure, give it some random App ID
  6. Right click App, choose Data, Server Connect
  7. Choose your action back to the database query you made in Step 1
  8. Right click App, choose Blocks, choose Navigation, I chose Brand Menu
  9. Arrow out everything, till you find 3 x Nav Item elements, delete 2 of them, leaving 1
  10. Click Navbar Nav, in the properties, click Make Repeat Children
  11. Choose your expression of the Server Connect data query from the App Structure
  12. Click Nav Item element again, in properties uncheck Active, click the Dynamic Data Picker next to the Text Property, and choose your “name” binding.
    Remove the “#” symbol from the Link Property.
    Scroll down to Dynamic Attributes and click the + and add Link, click the Dynamic Data Picker and choose your “url” binding.

Save and test, mine worked great.
Obviously for dropdowns etc. you are going to need to use nested repeats, more data on those can be found here

3 Likes

Paul! you are a Wappler hero man! Thanks. that work find for me too. Having a url in the database table is a less complex way than I was planning on doing it. I was aiming to do something much like Simple Tut Youtube (https://youtu.be/Ct8NKKlsiMM (min 21 for db creation and min 36 for nav menu creation)) but in Wappler. But the Url in db is not a bad at all idea.

Now I just need to figure how I am going to add the backslash " / " in the back-end of the code for the create new menu upload form. This is to reduce the chances of someone not typing the backslash when creating a new menu each time as a CMS users. Another thing is I am going to have to figure out how to get the actual page url from the upload form into the file manager folders on the server so the url link in the database can link to the page that just created from (step number 12 instructions). Or maybe the url parameter might help with this. Let me know if you have any thoughts on this or how to get what Simple Tut did in his video but with Wappler? thanka again.

Will take a look at the video and se if I can assist.
As far as adding the / that part could not be simpler in Wappler

Thanks Paul!

Well all I can say is wow, I can hardly recall how difficult web development was back in 2014, that video should be an advertisement for why anyone should have Wappler.

Up to 21 minutes, you could literally produce in 2 minutes in Wappler, and to be fair quite a number of other modern web development technologies.
The rest of the video is where Wappler really shines, and you could do that in about 10 minutes if not less from start to finish.

There are 2 different ways this could be done

  1. Have a CMS, that literally duplicates a temporary file on the server, and places it inside a folder, and the user accesses the content of that page from there. This is a bit of a silly way to do it, but sometimes depending on what you need, it’s the only way.

  2. Is the same way the video tutorial has done it, which is having a single php page and depending on a URL parameter it pulls different content from the database.
    As it is coming up for the weekend now, I will try do a video on this, as it is going to be difficult to explain this in text, but honestly this type of thing in Wappler could be done in minutes.

Thanks Paul. Most of these simple database trick are just a learning curve for me using Wappler. I appreciate your help I know it way in the Am by you now but yet you reply and I just wanna say thanks a lot and from day one your videos has help me out a lot understanding the know how in Wappler.

1 Like