Skip navigation

PHP JUGNOON jTree Documentation

Overview


A complete script with all basic and advance features for making professional solution which allow users to create real time family tree tree using latest web standard utilities including jquery, angular js, twitter bootstrap and PHP.

View details »


Change Log

Current version of jTree script is 1.0.0. There is no change log, bug fixes or update reports available yet.


Framework

Jugnoon Membership Kit has been used as core script for providing a back bone for jTree script demonstartion. You can use your own solution for jTree script integration.

View details »


What's Included

Core files related to jTree script includes.


root/
├── adm/sc/tree/ (manage & view family tree and data)
├── include/bll/treemgt.php (data access & business layer for tree data processing)
├── tree/ (core tree scripts & handler files)
├── include/db.php (core data access layer)
├── include/config.php (core website configurations)
├── process.php (main tree handler section)
├── myaccount/mytree.php (manage user own family tree)

Contents

Default folder where to store family tree member photos and thumbs.

contents/
├── org/ (for storing original photos)
├── / (for storing photo thumbs)

CSS

Jugnoon jTree Script uses core bootstrap 3.0 css and js files by default with some custom css. You can adjust custom css based with your own design requirements.

css/
├── base/ (main theme)
│    ├── images/ (Base theme images)
│    ├── bootstrap-glyphicons.css
│    ├── bootstrap.min.css
│    ├── layout.css (website own style sheet)
├── fonts/ (glyphicons fonts)

Installation


Dependencies

Feature Dependency
--- There is no dependencies required for using jTree script in your application.

Steps

Installation steps

Installation of jTree script is same as Jugnoon Membership Kit, click on Installation Guide for more detail.


Database


Tables

List of tables uses by jTree script to store tree structure, data and relationship information in database.

tables/
├── tree (for storing main tree information)
├── nodes (for storing tree node information)
├── treerelations (for storing tree relationship information)

Plugins


List of third party plugins we used in membership kit. Most of plugins located in folder plugins. All plugins we used are available for free but still you must use & obey their own license terms & conditions before using it.

Name Detail
Twitter Bootstrap http://getbootstrap.com/
Plupload For uploading photos. http://www.plupload.com/
jsPlumb http://jsplumbtoolkit.com

Configurations


Core Configurations

Tree have few configuration options which can be set through tree/js.php file.

Name Default Value Detail
dn root url Set website root url.
hd handler path set handler path reponsible for processing tree data
sconnects handler path set handler path reponsible for processing tree connects
lhandler handler path set handler path reponsible for loading tree data
chandler handler path set handler path reponsible for loading tree connects
strokeColor color set connect line color
hoverPaintStyle color set connect line color when hover
strokeLineWidth value set connect line width
hoverstrokeLineWidth value set connect line width when hover
connectStyle flowchart set connect line styles e.g Bezier, StateMachine, Flowchart,
offsetdiff value space between two nodes when dynamically created
defaultUName value default logged in username or full name, it also act as default node and represent author of tree
defaultFName value default logged in user first name
defaultSName value default logged in user sur name
redirectPageName value page name where actual tree creation resides. It can be used for redirection via js script
familyID value set family id. mostly used for loading family tree.

Data Access Layer


Files

All data processing and busines logic processing handle by files located at include/bll/ folder.

include/bll/
├── treemgt.php (for handling jtree data access & business layer managment)

Data Access Examples

jTree script uses advance PDO script for handling and processing data between database and website. We have extended PDO classes for making code as much easy as we can. Here is list of sample example code.

Add Operation

$db = new DB();
$lastinsertid = true;
$queryAnalysis = false;
$id = $db->Insert("[tablename]", $fields, $lastinsertid, $queryAnalysis); 
return $id;

[tablename] represent table name, while $fields represent array of fields with values e.g

$fields = array('field01' => 'value01', 'field02' => 'value02');

Update Operation

$db = new DB();
return $db->Update("[tablename]", $fields, $filters, $queryanalysis);

$filters represent sql where filter clause.

$filter = array('id' => '23', 'isenabled' => '1'); // goes to WHERE id = 23 AND isenabled = 1;

Delete Operation

$db = new DB();
$db->Delete("[tablename]", $filters);

Count Operation

$db = new DB();
return $db->Count("[tablename]", $filters);

Fetch Operation

$db = new DB();
return fetch_values($fields, $isadmin, $filters, $ismultiple = false, $queryonly=false);

$fields list of table fields to fetch e.g "username, firstname, lastname, email"
$isadmin true or false
$filters where clause array of values to filter records
$ismultiple true or false for fetching single or multiple records
$queryonly true or false for returning sql query for analysis purpose.


Family Tree


Sample screen shot of family tree creation
PHP jTree Sample Screenshot


Tree Nodes

Each node within family tree represent single person. View screenshots how each node represent in tree and store various types of data.
Node representation in family tree
Sample look and feel of node in family tree if photo available. Without photo node will display just name of person.
Detail view of node when clicked
Detail view of node when clicked.
Edit View - Personal Section of node when clicked
Edit View - Personal Section of node when clicked
Edit View - Contact Section of node when clicked
Edit View - Contact Section of node when clicked
Edit View - Bio Section of node when clicked
Edit View - Bio Section of node when clicked

Tree Node Relationship Options

Each node have options to create various relationsips including add parents, add childs, add partner, ex-partner, add brother, sister, some relationships have restrictions like child can add parents as his parent already defined.
Node Parent Option
Parent option when node clicked
Node Child Option
Node Child Option
Node Partner Option
Node Partner / Ex-Partner Option
Node Brother / Sister Option
Node Brother / Sister Option

Tree Node Other Options

When tree saved, user can load and make changes into tree. User can make a tree public or private, editable or readonly
Admin view of family tree listing
Admin view of family tree listing
User view of family tree listing
User view of family tree listing
Detail tree data view in admin section
Detail tree data view in admin section

Newsletter

Enter your e-mail and subscribe to our newsletter in order to get email notifications of our product upgrades and new product release.

Follow Us