SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    view parent and child

    Hi
    I am writing a code like network bussness sites I have some users in this system that they invited by his/her friend they should see the tree of their invitation in a page like this :



    It not important for me using HTML or GD or any other think,
    In the picture the segments are the users that they name should be there and you can see everyone can invite 2 body and more than gose to his/her childs invites.

    I select ths structure for DB :
    Code:
    CREATE TABLE `alow` (
      `id` int(11) NOT NULL auto_increment,
      `pid` int(11) NOT NULL,
      `name` varchar(50) NOT NULL,
      PRIMARY KEY  (`id`)
    )
    
    name is the username,
    ID is for each user,
    PID is parent ID of the user
    Is it correct ?

    So how Can I make this page with PHP ?

  2. #2
    SitePoint Guru
    Join Date
    Aug 2005
    Posts
    986
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is correct!

    The best way is to load the entire table in one query, and then you create the structure with this array.

    Untested:

    PHP Code:
    <?php

    $nodes 
    mysql_query('SELECT * FROM alow');
    $node_list = array();
    while(
    $node mysql_fetch_assoc($nodes))
        
    # Store the node in the node list with its id as the key.
        
    $node_list[$node['id']] = $node;
        
    # Add this node to the subnodes of its parent. 
        # This will only work if the list is in correct order in the db: upper nodes first. 
        # If this is not the case, you have to put this in a separate while-loop.
        
    $node_list[$node['pid']]['subnodes'][] = $node['id'];
    }

    # This function will produce the HTML for a node.
    function create_node($node$node_list)
    {
        return 
    '<div class="node">' 
                
    $node['name'] . 
                
    create_subnodes($node$node_list) .
               
    '</div>';
    }

    # This function will transform subnodes of a node into HTML.
    function create_subnodes($node$node_list)
    {
        
    $r '';
        foreach(
    $node['subnodes'] as $subnode_id)
        {
            
    # Put the html (<div>....</div>) for each node in $r.
            
    $r .= create_node($node_list[$subnode_id]);
        }
        return 
    $r;
    }

    echo 
    create_node($node_list[0], $node_list);

  3. #3
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you

    and how show it like sample picture (not exacly like it I want show tree)

  4. #4
    SitePoint Guru
    Join Date
    Aug 2005
    Posts
    986
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can do that with CSS, just center the <div>'s and add background images.
    Last edited by Fenrir2; Jun 18, 2006 at 23:48.

  5. #5
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    only with CSS ?

    Can you help more ?

    I mean like the picture

  6. #6
    SitePoint Guru
    Join Date
    Aug 2005
    Posts
    986
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can do that with CSS, just center the <div>'s and add background images.
    Change the function so it will output this:

    Code:
    <div>
      <div class="left">{person name}
        {subnodes}
      </div>
      <div class="right">{person name}
        {subnodes}
      </div>
    </div>
    Now give the class=left divs a background with a line from bottom left to top right, and class=right from top left -> bottom right. After that, make sure the .left will be floated left, and .right floated right, and you're done.

  7. #7
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your helps

    I attached another view with this post ,
    How can I make my page like it (+ and - buttuns for close and open is not important)
    Attached Images Attached Images
    • File Type: jpg 2.jpg (11.2 KB, 37 views)

  8. #8
    SitePoint Guru
    Join Date
    Aug 2005
    Posts
    986
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've created this stylesheet for one of my projects:

    Code:
    /**
    * Stamboom
    */
    
    #stamboom
    {
    	text-align: left;
    }
    
    #stamboom ul
    {
    	border-left: 2px solid #999;
    	list-style: none;
    	padding-left: 0px;
    	margin-left: 102px;
    }
    
    #stamboom li
    {
    	position: relative;
    	left: -2px;
    	padding: 10px 0 5px 55px;
    	background: url('images/bullet.png') no-repeat 0 17px;
    }
    
    #stamboom li.last
    {
    	background: url('images/bullet_last.png') no-repeat 0 17px;
    }
    
    /*
    #stamboom a[href='#']:hover
    {
    	color: #655543;
    }*/
    
    #stamboom a
    {
    	color: #0D286A;
    	text-decoration: underline;
    }
    
    /*
    #stamboom a[title='Geboren: ']
    {
    	color: #3083D6;
    }
    
    #stamboom a[href='documenten/']
    {
    	color: #B5221E;
    	text-decoration: none;
    }
    
    #stamboom a[title='Geboren: '][href='documenten/']
    {
    	color: #54A72C;
    }
    */
    
    #stamboom a.overleden
    {
    	background: url('images/gestorven.gif') no-repeat right;
    	padding-right: 10px;
    }
    
    
    
    /**
    * Website
    */
    
    body
    {
    	text-align: center;
    	background: #E1DAD2;
    	font: 13px arial;
    }
    
    #wrapper
    {
    	text-align: left;
    	margin: 20px auto;
    	width: 750px;
    	* width: 760px;
    	background: #F0F0F0;
    	border: 5px solid #FFF;
    	position: relative;
    }
    
    #header
    {
    	background: url('images/header.png');
    	height: 177px;
    }
    
    #menu
    {
    	float: left;
    	width: 130px;
    	padding: 20px;
    }
    
    #menu ul
    {
    	list-style: none;
    }
    
    #menu li
    {
    	padding: 0 0 20px 0;
    }
    
    #kettekes
    {
    	position: absolute;
    	bottom: -50px;
    	left: -55px;
    	height: 149px;
    	width: 200px;
    	background: url('images/kettekes.gif');
    }
    
    a
    {
    	color: #655543;
    	text-decoration: underline;
    }
    
    a.active
    {
    	font-weight: bold;
    	color: black;
    }
    
    a:hover
    {
    	color: #000;
    }
    
    #content
    {
    	margin-left: 150px;
    	padding: 20px;
    }
    
    h1, h2, h3
    {
    	margin: 0;
    	font-size: 20px;
    }
    
    h2
    {
    	font-size: 16px;
    }
    
    h3
    {
    	font-size: 13px;
    }
    If you put your tree in <ul>'s and <li>'s, and give every last <li> in an <ul> class="last", you'll get a tree like in your image.

  9. #9
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much

    I test your code but I have this error :

    Warning: Missing argument 2 for create_node() in /var/www/test/index.php on line 16
    Line 16 is "function create_node($node, $node_list)"

    Code:
    If you put your tree in <ul>'s and <li>'s, and give every last <li> in an <ul> class="last", you'll get a tree like in your image.
    Can you show me in the code , plz

    (I am sorry my english is poor)

  10. #10
    SitePoint Guru
    Join Date
    Aug 2005
    Posts
    986
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Come on, you can fix that error yourself. At least try, or else learn to program first. If you already have, but you don't know how to fix it, ask me and I'll fix it.

  11. #11
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The error tell I missed a parameters of create_node() but in the code we have create_node($node_list[0], $node_list); I test the value of each parameters they have value, (I think I can find the problem) please help me about the changing DIV to <UL> and <LI> with your CSS , can you show me it in a code?

    thank you

  12. #12
    SitePoint Guru
    Join Date
    Aug 2005
    Posts
    986
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    $r .= create_node($node_list[$subnode_id]);
    Add second parameter $node_list

    Code:
    # This function will produce the HTML for a node.
    function create_node($node, $node_list)
    {
        return '<ul>' .
                $node['name'] .
                create_subnodes($node, $node_list) .
               '</ul>';
    }
    
    # This function will transform subnodes of a node into HTML.
    function create_subnodes($node, $node_list)
    {
        $r = '';
        foreach($node['subnodes'] as $subnode_id)
        {
            $r .= '<li>'.create_node($node_list[$subnode_id]).'</li>';
        }
        return $r;
    }

  13. #13
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you my friend,
    I change the code ,
    and I attached 2 image of my result one with CSS and one witout CSS its not like my sample,

    You have some codes about images in css is it special image ?
    Attached Images Attached Images

  14. #14
    SitePoint Guru
    Join Date
    Aug 2005
    Posts
    986
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have to add the bullet-images.

  15. #15
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is the images CSS special images or no (to make like my sample picture),
    Which on of this classes I shoud use for li and ul ? :
    #stamboom ul #stamboom li #stamboom li.last ... and other

  16. #16
    SitePoint Guru
    Join Date
    Aug 2005
    Posts
    986
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, you should rename #stamboom to a more descriptive name (stamboom means family tree in dutch). Second, you should read the CSS carefully, because it contains lots of things you don't need, and these things mess up your page. Third, you should add a class="last" to every last element of an ul, like this:
    HTML Code:
    <ul>
      <li>1</li>
      <li>2</li>
      <li class="last">3</li>
    </ul>
    Fourth, the bullet image should look like this:

    Code:
    |
    ---
    |
    And bullet_last:

    Code:
    |
    ---
    Or, if you want expand buttons:

    Code:
     |
    [+]---
     |
    Code:
     |
    [+]---

  17. #17
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much ,
    I could not find any think without your help,

    I undrstand carfuly but I have a little problem :

    How find the last <li> ? I test with a counter for array elements but it can not awnser me,


    I learn another thing in this topic !!! :
    that stamboom means family tree in dutch !
    So I can say : Ish eshpreshe dutch

  18. #18
    SitePoint Guru
    Join Date
    Aug 2005
    Posts
    986
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ;-)

    What is your code now, if you post it, I might be able to fix it.

  19. #19
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I mean like this :

    I now this way is not a good way for finding last. but I dont know any other way.
    Code:
    function create_subnodes($node, $node_list)
    {
        $r = '';
    	foreach($node['subnodes'] as $value)
        {
    	$counter++; //I use this foreach to counting the number of $node['subnodes'] indexes (because I need the last _ I dont know the better way)
        }
    
        foreach($node['subnodes'] as $subnode_id)
        {
    	$counter2++;
    	//I chek here that is this foreach the last !
    	//If its for last time so add class="last"
    	if ($counter2==$counter1){
    		$r .= '<li  class="last">'.create_node($node_list[$subnode_id],$node_list).'</li>'; 
    	}else{
    		$r .= '<li>'.create_node($node_list[$subnode_id],$node_list).'</li>'; 
    	}
        }
        return $r;
    }

  20. #20
    SitePoint Guru
    Join Date
    Aug 2005
    Posts
    986
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function create_subnodes($node, $node_list) {
        $last = '<li  class="last">'.create_node($node_list[array_pop($node['subnodes])], $node_list).'</li>';
        $r = '';
        foreach($node['subnodes'] as $subnode_id) {
    		$r .= '<li>'.create_node($node_list[$subnode_id],$node_list).'</li>'; 
        }
        return $r . $last;
    }

  21. #21
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I test it but I have another problem : ((

    I have this error :

    Warning: array_pop(): The argument should be an array in /var/www/test/index.php on line 27
    Warning: array_pop(): The argument should be an array in /var/www/test/index.php on line 27
    .
    .
    .
    Warning: array_pop(): The argument should be an array in /var/www/test/index.php on line 27
    Warning: array_pop(): The argument should be an array in /var/www/test/index.php on line 27

    And line 27 is :
    $last = '<li class="last">'.create_node($node_list[array_pop($node['subnodes'])], $node_list)."</li>";

  22. #22
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have 3 problem about this topic :

    1: errors about array_pop() I change my code like this but its wrong :
    Code:
    if ($node['subnodes'])
     $last = '<li  class="last">'.create_node($node_list[array_pop($node['subnodes'])], $node_list)."</li>";
    2:I attached a sample with HTML codes I can not set the place of the pictures correctly,

    3: this is my important question : In some pages of my project I need show the child of one of parents (one of that its PID is 0) not all of the rows how I can do it ?


    If you are busy please help me about the 3 question only,
    Thank you.
    Attached Files Attached Files

  23. #23
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I test this code without CSS I had this result:

    Code:
    <ul><li><ul>root<li><ul>sitest admin<li><ul>List of sitest</ul>
    </li>
    <li><ul>Creat new site</ul>
    </li>
    </ul>
    </li>
    <li><ul>programs admin<li><ul>in jadide haaaaaaa</ul>
    </li>
    </ul>
    </li>
    <li><ul>setting</ul>
    </li>
    <li><ul>users<li><ul>List of user</ul>
    </li>
    <li><ul>Add new user</ul>
    </li>
    <li><ul>Groups<li><ul>Add group</ul>
    </li>
    <li><ul>Groups users</ul>
    </li>
    </ul>
    </li>
    .
    .
    .
    .
    Is it correct ?


    Who can help me about my problems here?

  24. #24
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I test this code without CSS I had this result:

    Code:
    <ul><li><ul>root<li><ul>sitest admin<li><ul>List of sitest</ul>
    </li>
    <li><ul>Creat new site</ul>
    </li>
    </ul>
    </li>
    <li><ul>programs admin<li><ul>in jadide haaaaaaa</ul>
    </li>
    </ul>
    </li>
    <li><ul>setting</ul>
    </li>
    <li><ul>users<li><ul>List of user</ul>
    </li>
    <li><ul>Add new user</ul>
    </li>
    <li><ul>Groups<li><ul>Add group</ul>
    </li>
    <li><ul>Groups users</ul>
    </li>
    </ul>
    </li>
    .
    .
    .
    .
    Is it correct ?


    Who can help me about my problems here?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •