944,204 Members | Top Members by Rank

Web Development > PHP > Binary Tree Using PHP & MySQL
Ad:
  • PHP Discussion Thread
  • Unsolved
  • Views: 22396
  • PHP RSS
You are currently viewing page 3 of this multi-page discussion thread; Jump to the first page
Permalink
Nov 4th, 2009
-2
Re: Binary Tree Using PHP & MySQL
Hi,wenzlerpaul
Can you send me full source code ,with html and php and your database
,Definately i help you, i have made four MLM Software, if u have any problem then, solved it
if it is solved then also send us code,I want to check for new method ,if you use recursive then it will slow access the data from database.
Last edited by Ezzaral; Nov 25th, 2009 at 12:11 pm. Reason: Snipped email. Please keep it on site.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Anubhav kumar is offline Offline
5 posts
since Nov 2009
Permalink
Nov 8th, 2009
0
Re: Binary Tree Using PHP & MySQL
Click to Expand / Collapse  Quote originally posted by Atli ...
Hey.

I'm not sure exactly what you are asking for.
What is the problem? Could you explain it a bit better?
And perhaps show us the code that is causing it?
Atil Could u tell me that how i can draw lines between tree level.
i am trying very much to draw lines but i am not getting success in this method.
please Help me.

Thanx...
Reputation Points: 18
Solved Threads: 17
Junior Poster
hemgoyal_1990 is offline Offline
175 posts
since Aug 2007
Permalink
Nov 13th, 2009
-1
Re: Binary Tree Using PHP & MySQL
Please Help me...
Reputation Points: 18
Solved Threads: 17
Junior Poster
hemgoyal_1990 is offline Offline
175 posts
since Aug 2007
Permalink
Nov 13th, 2009
1
Re: Binary Tree Using PHP & MySQL
Ok. So I've been messing around, creating a JavaScript object that draws lines between the IDs in my tree-view code. Might help you.

This is basically the same code I posted before, with minor modifications to the Index and PHP file, and an added JavaScript file.
Note; I use jQuery for the JavaScript, loaded from the Google APIs.

I've tested this in all major browsers.

index.php
Uses the PHP class to generate the tree-structure, and includes and executes the JavaScript object that draws the lines between the tree elements.
php Syntax (Toggle Plain Text)
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Tree-view Test</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf8">
  6.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  7.         <script type="text/javascript" src="TreeView.js"></script>
  8.         <script type="text/javascript">
  9.             // Have the TreeView.drawAll method executed as soon as the DOM is ready.
  10.             $(document).ready(function(){ 
  11.                 TreeView.drawAll();
  12.             });
  13.         </script>
  14.     </head>
  15.     <body>
  16.         <?php
  17.         // Fetch the TreeView class from the other file.
  18.         include("class.TreeView.php");
  19.  
  20.         // Open a database connection
  21.         // TODO: Replace the info here with your real info.
  22.         $dbLink = new mysqli("localhost", "usr", "pwd", "dbName");
  23.  
  24.         // Create an instance of the TreeView class.
  25.         $treeView = new TreeView($dbLink);
  26.  
  27.         // Print the tree view
  28.         // TODO: Insert your real table name here.
  29.         $treeView->printTree('dbTable');
  30.  
  31.         $dbLink->close();
  32.         ?>
  33.     </body>
  34. </html>

class.TreeView.php
Uses the database to generate the tree-structure.
php Syntax (Toggle Plain Text)
  1. <?php
  2. /**
  3.  * Handles creating and/or printing a Tree-Like HTML output, complete with
  4.  * all necessary CSS styles.
  5.  *
  6.  * Assumes a MySQL database table structure like so:
  7.  *  CREATE TABLE `name` (
  8.  *    `id` int(11) NOT NULL AUTO_INCREMENT,
  9.  *    `parentID` int(11) DEFAULT NULL,
  10.  *    PRIMARY KEY (`id`)
  11.  *  );
  12.  *
  13.  * Public methods:
  14.  *   createTree - Returns the HTML tree-view.
  15.  *   printTree  - Prints the HTML tree-view.
  16.  *
  17.  * Private methods
  18.  *   fetchTree  - Reads the complete tree structure into an array.
  19.  *   buildHtml  - Builds the HTML div hierarchy based.
  20.  */
  21. class TreeView
  22. {
  23.     private $bgColor = ""; //"background-color: rgba(0, 100, 0, 0.10); ";
  24.  
  25.     private $dbLink;
  26.     private $tblName;
  27.  
  28.     /**
  29.      * Default constructor
  30.      * @param mysqli $dbLink A open MySQL (mysqli) connection.
  31.      * @throws Exception
  32.      */
  33.     public function __construct(mysqli $dbLink)
  34.     {
  35.         if($dbLink != null && $dbLink->connect_errno == 0)
  36.         {
  37.             $this->dbLink = $dbLink;
  38.  
  39.             // This number is added the the container DIV ID, so that we can
  40.             // tell the DIVs a part if there are more than one view created.
  41.             if(!isset($GLOBALS['TreeView_DivID'])) {
  42.                 $GLOBALS['TreeView_DivID'] = 0;
  43.             }
  44.         }
  45.         else
  46.         {
  47.             throw new Exception("The mysqli object provided is invalid.");
  48.         }
  49.     }
  50.  
  51.     /**
  52.      * Creates a descending tree-like view of the tree-structure in the given
  53.      * database table and returns it as a string.
  54.      * @param <type> $tblName The name of the database table to use.
  55.      * @return <string> The string output.
  56.      * @throws Exception
  57.      */
  58.     public function createTree($tblName)
  59.     {
  60.         if(!isset($tblName) || empty($tblName))
  61.         {
  62.             throw new Exception("Failed to create the tree. Table or database information is invalid");
  63.         }
  64.         else
  65.         {
  66.             // Set up variables
  67.             $this->tblName = $tblName;
  68.             $treeData = array();
  69.             $output = "";
  70.  
  71.             // Create the output
  72.             $this->fetchTree($treeData);
  73.  
  74.             // Set up the CSS styles, and create the container DIV.
  75.             $divID = "TreeView_ContainerDiv_" . $GLOBALS['TreeView_DivID'];
  76.             $output = <<<HTML
  77. <style type="text/css">
  78.     div#{$divID}     { margin: 0; padding: 0; text-align: center; }
  79.     div#{$divID} div { margin: 0; padding: 0 10px; float: left; {$this->bgColor}}
  80.     div#{$divID} p   { margin: 0; padding: 0; margin-bottom: 10px; }
  81. </style>
  82. <div id="{$divID}">
  83. HTML;
  84.  
  85.             // Add the DIV hierachy.
  86.             $this->buildHtml($treeData, $output);
  87.  
  88.             // Add the JavaScript call to start drawing the lines
  89.             $rootID = array_keys($treeData);
  90.             $rootID = $rootID[0];
  91.             $output .= <<<HTML
  92.  
  93. <script type="text/javascript">
  94. TreeView.addTree('Tree{$GLOBALS['TreeView_DivID']}_{$rootID}');
  95. </script>
  96. HTML;
  97.  
  98.             // Increment the DIV ID number
  99.             $GLOBALS['TreeView_DivID']++;
  100.  
  101.             return $output;
  102.         }
  103.     }
  104.  
  105.     /**
  106.      * Prints a descending tree-like view of the tree-structure in the given
  107.      * database table.
  108.      * @param <type> $tblName The name of the database table to use.
  109.      * @throws Exception
  110.      */
  111.     public function printTree($tblName)
  112.     {
  113.         echo $this->createTree($tblName);
  114.     }
  115.  
  116.     /**
  117.      * A recursive function that fetches a tree-structure from a database into an array.
  118.      * @global <mysqli> $dbLink A open MySQLI connection.
  119.      * @param <number> $parentID The ID the current recursion uses as a root.
  120.      */
  121.     private function fetchTree(&$parentArray, $parentID=null)
  122.     {
  123.         global $dbLink;
  124.  
  125.         // Create the query
  126.         if($parentID == null) {
  127.             $parentID = 0;
  128.         }
  129.         $sql = "SELECT `id` FROM `{$this->tblName}` WHERE `parentID`= ". intval($parentID);
  130.  
  131.         // Execute the query and go through the results.
  132.         $result = $dbLink->query($sql);
  133.         if($result)
  134.         {
  135.             while($row = $result->fetch_assoc())
  136.             {
  137.                 // Create a child array for the current ID
  138.                 $currentID = $row['id'];
  139.                 $parentArray[$currentID] = array();
  140.  
  141.                 // Print all children of the current ID
  142.                 $this->fetchTree($parentArray[$currentID], $currentID);
  143.             }
  144.             $result->close();
  145.         }
  146.         else {
  147.             die("Failed to execute query! ($level / $parentID)");
  148.         }
  149.     }
  150.  
  151.     /**
  152.      * Builds a HTML <div> hierarchy from the tree-view data.
  153.      * Each parent is encased in a <div> with all their child nodes, and each
  154.      * of the children are also encased in a <div> with their children.
  155.      * @param <array> $data The tree-view data from the fetchTree method.
  156.      * @param <string> $output The <div> hierachy.
  157.      */
  158.     private function buildHtml($data, &$output)
  159.     {
  160.         // Add the DIV hierarchy.
  161.         foreach($data as $_id => $_children)
  162.         {
  163.             $output .= "<div id=\"Tree{$GLOBALS['TreeView_DivID']}_{$_id}\"><p>{$_id}</p>";
  164.             $this->buildHtml($_children, $output);
  165.             $output .= "</div>";
  166.         }
  167.     }
  168. }
  169. ?>

TreeView.js
Draws the lines between the elements in the PHP generated tree-structure.
javascript Syntax (Toggle Plain Text)
  1. /**
  2.  * Handles drawing lines between the tree structures generated by PHP.
  3.  */
  4. var TreeView =
  5. {
  6.     /** Constants (sort of) **/
  7.     LINE_MARGIN : 10, // px
  8.     BORDER_STYLE : "solid 1px #555555",
  9.  
  10.     /** A list of root elements to draw when the window is loaded. */
  11.     trees : [],
  12.  
  13.     /**
  14.      * Adds a tree to the list of trees to be drawn.
  15.      * @param rootID The ID of the root element of the tree.
  16.      */
  17.     addTree : function(rootID)
  18.     {
  19.         this.trees.push(rootID);
  20.     },
  21.  
  22.     /**
  23.      * Loops through all the trees and executes the drawing function for each of them.
  24.      */
  25.     drawAll : function()
  26.     {
  27.         for(var x = 0; x < this.trees.length; x++)
  28.         {
  29.             var root = $("#" + this.trees[x]);
  30.             if(root.length > 0)
  31.             {
  32.                 this.drawTree(root);
  33.             }
  34.         }
  35.     },
  36.  
  37.     /**
  38.      * Recursively draws all lines between all root-child elements in the given tree.
  39.      * @param root The root element of the tree to be drawn.
  40.      */
  41.     drawTree : function(root)
  42.     {
  43.         root = $(root);
  44.         if(root.length > 0)
  45.         {
  46.             var children = root.children('div');
  47.             for(var i = 0; i < children.length; i++)
  48.             {
  49.                 this.drawLine(root, children[i]);
  50.                 this.drawTree(children[i]);
  51.             }
  52.         }
  53.     },
  54.  
  55.     /**
  56.      * Draws a line between the two passed elements.
  57.      * Uses an absolutely positioned <div> element with the borders as the lines.
  58.      * @param elem1 The first element
  59.      * @param elem2 The second element
  60.      */
  61.     drawLine : function(elem1, elem2)
  62.     {
  63.         // Use the <p> element as the base. Otherwise the height() call on the
  64.         // <div> will return the entire hight of the tree, including the children.
  65.         elem1 = $(elem1).find("p").eq(0);
  66.         elem2 = $(elem2).find("p").eq(0);
  67.  
  68.         var e1_pos = $(elem1).position();
  69.         var e2_pos = $(elem2).position();
  70.         var borders = { top:true, left:true, right:false, bottom:false };
  71.  
  72.         // Move the position to the center of the element
  73.         e1_pos.left += ($(elem1).width() / 2);
  74.         e1_pos.top += ($(elem1).height() / 2);
  75.         e2_pos.left += ($(elem2).width() / 2);
  76.         e2_pos.top += ($(elem2).height() / 2);
  77.  
  78.         // Position if they are horizontally aligned.
  79.         if(e1_pos.left == e2_pos.left)
  80.         {
  81.             borders.top = false;
  82.             if(e1_pos.top < e2_pos.top)
  83.             {
  84.                 e1_pos.top += ($(elem1).height() / 2);
  85.                 e2_pos.top -= ($(elem2).height() / 2);
  86.             }
  87.             else
  88.             {
  89.                 e1_pos.top -= ($(elem1).height() / 2);
  90.                 e2_pos.top += ($(elem2).height() / 2);
  91.             }
  92.         }
  93.  
  94.         // Position if they are verticaly aligned.
  95.         else if(e1_pos.top == e2_pos.top)
  96.         {
  97.             borders.left = false;
  98.             e1_pos.top += ($(elem1).height() / 2);
  99.             e2_pos.top += ($(elem2).height() / 2);
  100.             if(e1_pos.left < e2_pos.left)
  101.             {
  102.                 e1_pos.left += $(elem1).width();
  103.             }
  104.             else
  105.             {
  106.                 e2_pos.top += $(elem2).height();
  107.             }
  108.         }
  109.  
  110.         // Position if the elements are not aligned.
  111.         else
  112.         {
  113.             if(e1_pos.left < e2_pos.left)
  114.             {
  115.                 borders.right = true;
  116.                 borders.left = false;
  117.             }
  118.  
  119.             if(e1_pos.top > e2_pos.top)
  120.             {
  121.                 borders.bottom = true;
  122.                 borders.top = false;
  123.             }
  124.         }
  125.  
  126.         // Calculate the overlay position and size
  127.         var over_position = {
  128.             left:(e1_pos.left < e2_pos.left ? e1_pos.left : e2_pos.left),
  129.             top:(e1_pos.top < e2_pos.top ? e1_pos.top : e2_pos.top)
  130.         };
  131.         var over_size = {
  132.             width:Math.abs(e1_pos.left - e2_pos.left),
  133.             height:Math.abs(e1_pos.top - e2_pos.top)
  134.         }
  135.  
  136.         // Create the overlay div
  137.         var raw_overlay = document.createElement('div');
  138.         var overlay = $(raw_overlay);
  139.  
  140.         // Add the borders, and create a margin for the lines so they are not
  141.         // drawn "into" the numbers.
  142.         if(borders.top) {
  143.             overlay.css('border-top', this.BORDER_STYLE);
  144.             over_size.height -= this.LINE_MARGIN;
  145.         }
  146.         if(borders.bottom) {
  147.             overlay.css('border-bottom', this.BORDER_STYLE);
  148.             over_position.top += this.LINE_MARGIN;
  149.             over_size.height -= this.LINE_MARGIN;
  150.         }
  151.         if(borders.left) {
  152.             overlay.css('border-left', this.BORDER_STYLE);
  153.             over_size.width -= this.LINE_MARGIN;
  154.         }
  155.         if(borders.right) {
  156.             overlay.css('border-right', this.BORDER_STYLE);
  157.             over_position.left += this.LINE_MARGIN;
  158.             over_size.width -= this.LINE_MARGIN;
  159.         }
  160.  
  161.         overlay.css('position', 'absolute');
  162.         overlay.css('top', over_position.top);
  163.         overlay.css('left', over_position.left);
  164.         overlay.css('width', over_size.width);
  165.         overlay.css('height', over_size.height);
  166.  
  167.         document.body.appendChild(overlay.get(0));
  168.     }
  169. }
Reputation Points: 93
Solved Threads: 70
Posting Pro
Atli is offline Offline
526 posts
since May 2007
Permalink
Nov 13th, 2009
0
Re: Binary Tree Using PHP & MySQL
P.S.
You can see the above code in action on my test server: http://atli.advefir.com/test/treeview/.
Reputation Points: 93
Solved Threads: 70
Posting Pro
Atli is offline Offline
526 posts
since May 2007
Permalink
Nov 21st, 2009
0
Re: Binary Tree Using PHP & MySQL
Thanx Atli for Helping me Out.
But i found some bug in your above given code:
Please Visit Below URL for Some Bug:
http://www.liferider.info/mlm/tree.php?tree=0 (without name)
http://www.liferider.info/mlm/tree1.php?tree=0 (with name) //Problem Occur in Display.)
You may Change Above tree=0 Value with any of parent id.

There are a Problem When The Parent ID Contain Too Much Node in First Level The Remaining Node Show Below Second Level Node.
So There Occur Many Confusion Understanding Tree.

and another Problem is When we Draw any Parent ID Tree Only First Node will Print Lines in Tree.

Please Check Above URL for Batter Understanding.
Thank You.
Reputation Points: 18
Solved Threads: 17
Junior Poster
hemgoyal_1990 is offline Offline
175 posts
since Aug 2007
Permalink
Nov 21st, 2009
0
Re: Binary Tree Using PHP & MySQL
Click to Expand / Collapse  Quote originally posted by hemgoyal_1990 ...
Thanx Atli for Helping me Out.
But i found some bug in your above given code:
The problem is that the code relies on your browser to correctly align the <div> elements. When the tree is wider then the browser window, the browser automatically re-arranges the <div> elements to fit the window size.

What you need to do to get around this is to create a container around the tree - a <div> element - and manually set it's width to something large enough to contain the entire width of the tree. This will add a horizontal scroll-bar to the browser window, allowing you to scroll sideways to see the parts of the tree that will not fit.

To that end, try altering the PHP TreeView::createTree method to include this container div in the tree output.
Starting at line #74:
php Syntax (Toggle Plain Text)
  1.            // Set up the CSS styles, and create the container DIV.
  2.             $divID = "TreeView_ContainerDiv_" . $GLOBALS['TreeView_DivID'];
  3.             $output = <<<HTML
  4. <style type="text/css">
  5.     div#{$divID}     { margin: 0; padding: 0; text-align: center; }
  6.     div#{$divID}_Inner { width: 5000px; }
  7.     div#{$divID} div { margin: 0; padding: 0 10px; float: left; {$this->bgColor}}
  8.     div#{$divID} p   { margin: 0; padding: 0; margin-bottom: 10px; }
  9. </style>
  10. <div id="{$divID}">
  11.     <div id="{$divID}_Inner">
  12. HTML;
  13.  
  14.             // Add the DIV hierachy.
  15.             $this->buildHtml($treeData, $output);
  16.  
  17.             // Add the JavaScript call to start drawing the lines
  18.             $rootID = array_keys($treeData);
  19.             $rootID = $rootID[0];
  20.             $output .= <<<HTML
  21.     </div>
  22.     <script type="text/javascript">
  23.         TreeView.addTree('Tree{$GLOBALS['TreeView_DivID']}_{$rootID}');
  24.     </script>
  25. </div>
  26. HTML;
This will set the maximum with of the tree to 5000px, which should be large enough for a pretty large tree.
Reputation Points: 93
Solved Threads: 70
Posting Pro
Atli is offline Offline
526 posts
since May 2007
Permalink
Dec 9th, 2009
0
Re: Binary Tree Using PHP & MySQL
PHP Syntax (Toggle Plain Text)
  1. Hello.
  2. Urgent need help.
  3. I was testing the code, but it displays an error class.TreeView.php file.
  4. Maybe I can send the zip with the files.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
erickaf10 is offline Offline
2 posts
since Dec 2009
Permalink
Dec 9th, 2009
0

Help

PHP Syntax (Toggle Plain Text)
  1. Hello.
  2. Urgent need help.
  3. I was testing the code, but it displays an error class.TreeView.php file.
  4. Maybe I can send the zip with the files.
  5.  
  6.   <code class="inlinecode">Parse error: syntax error, unexpected T_CLASS in C:\AppServ\www\elquebuscaba\class.TreeViewb2.php on line 42</code>
Reputation Points: 10
Solved Threads: 0
Newbie Poster
erickaf10 is offline Offline
2 posts
since Dec 2009
Permalink
Dec 10th, 2009
0
Re: Binary Tree Using PHP & MySQL
Hey.

Just post the code here and I'll take a look at it.

You can also attach whole files your posts if you need to. (See "Additional Options" below the reply box)
Reputation Points: 93
Solved Threads: 70
Posting Pro
Atli is offline Offline
526 posts
since May 2007
Message:
Previous Thread in PHP Forum Timeline: Mysql database and php for booking fom
Next Thread in PHP Forum Timeline: Online flight reservation


Tags
mysql, php



About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC