Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You should combine your <code>top_category</code> and <code>bottom_category</code> tables into a single table, perhaps <code>category</code>. There's really no reason that these need to be separated. It would look like this:</p> <pre><code>CREATE TABLE category ( id INT PRIMARY KEY, parent_id INT, NAME VARCHAR(100) ); </code></pre> <p>For all "top" categories, the <code>parent_id</code> would be 0. For any "bottom" categories, the <code>parent_id</code> would be the <code>id</code> of the "top" category under which it falls. In addition to cleaning up the database a bit, it allows for future expansion into more than just two layers if you desired.</p> <p>Then you'd create a recursive function (a function that calls itself) to loop through and display the menu structure, something like this:</p> <pre><code>function menus( $parent_id, $pdo ) { $menu_query = "SELECT * FROM category WHERE parent_id = :parent_id"; $menu_result = $pdo-&gt;prepare( $menu_query ); $menu_result-&gt;execute( array( ":parent_id" =&gt; $parent_id )); $menu = ""; if( $menu_result-&gt;rowCount() ) { $menu .= "&lt;ul&gt;\n"; while( $menu_row = $menu_result-&gt;fetch( PDO::FETCH_ASSOC )) { $menu .= "&lt;li&gt;{$menu_row['NAME']}\n"; $menu .= menus( $menu_row['id'], $pdo ); $menu .= "&lt;/li&gt;\n"; } $menu .= "&lt;/ul&gt;\n"; } return $menu; } </code></pre> <p>Then to display your menu, you'd simply print the results of the function:</p> <pre><code>print menus( 0, $pdo ); </code></pre> <p>It'll return a structure that basically looks like this:</p> <pre><code>&lt;ul&gt; &lt;li&gt;prod1 &lt;ul&gt; &lt;li&gt;subprod1&lt;/li&gt; &lt;li&gt;subprod2&lt;/li&gt; &lt;li&gt;subprod3&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;prod2 &lt;ul&gt; &lt;li&gt;subprod4&lt;/li&gt; &lt;li&gt;subprod5&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;prod3 &lt;ul&gt; &lt;li&gt;subprod6&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>(Indentation added for readability, the code above does not add the indentation, but that's the structure).</p> <p>Here's essentially what this does. The function pulls all of the top-level entries, then as it loops through each one, it calls itself but with the ID of the currently-selected entry, which then pulls all of the children, and does the same thing. Each time it completes a layer (i.e. creates the structure for all entries at a given level), it returns that to the parent function and concatenates the data.</p> <p>I haven't tested this specific code, so it may contain a minor issue here or there, but the concept is solid (I've implemented it many times myself).</p> <p><strong>UPDATE (styling)</strong></p> <p>If you want to apply styles to this menu where each layer has a different set of styles, there are two ways to do this. The first is to a $level variable to the function so that it'd be defined like this:</p> <pre><code>function menus( $parent_id, $pdo, $level ) </code></pre> <p>Start out by calling it with <code>0</code> for the level, then within the function call it with <code>$level + 1</code>. This way, each successive level will be called with the correct value. You can create classes based on this, such as <code>level-1</code>, then define the element as having <code>class="level-{$level}"</code>.</p> <p>The second is to wrap the entire thing in a <code>&lt;div&gt;</code>, and then use immediate child selectors to reference a specific level. <code>div&gt;ul&gt;li</code> would be the first level of <code>&lt;li&gt;</code>, <code>div&gt;ul&gt;li&gt;ul&gt;li</code> would be the second level of <code>&lt;li&gt;</code>, and so on.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload