How To

Start by creating a Page for each person in the family tree. Fill the Page with introductory information of the person. You may link to images, videos and other media files on the Page itself. THe Family Tree box is generated from the Page. If you have images in the Page, the first image will be used for the Family Tree box. For specific events or information, you may use Posts. Images, video and media files can also be used in Posts. The cards in the Posts List on the right will include an image randomly generated from images in the Post if they are present. To make Posts associated with a Page, first click on the Page from the Page List or the Family Tree, then add Post to that page.

Link the Page to other Pages by using the Partner or Children links. The Partner or Children links are selected from Dropdown boxes with entries created from existing Pages. As a matter of convention, Partner and Children links are taken from the male side. It is not possible to separate siblings from different partners.

Please note that every Page and Post is viewable by the public. Please refrain from posting advertisements or profanity. Advertisements or profanity or undersirable content will be deleted and the User account will be disabled.

The main components of this application are Pages and Posts. A Page is used to represent a person. A Page can hold text and media. Posts are made with a Page and any Page can hold any number of Posts. The Page holds information on the person. Posts are part of that information. A Post here is similar to a Blog post so it is a text document that can contain links to different media e.g. images or video or other media. Pages and Posts will be described in more detail below.

Most of the application is run through two pages. The Homepage and the Editor page. The Homepage is a page that allows browsing through Pages and Posts. When logged in, there is an add Post button on the top of the central portion of the Homepage. The Editor page has a rich text editor which allows linking to various media files. Below is the Homepage.

The Editor page is displayed in the sections below. There are several parts of the screen that are common to both the Homepage and the Editor page. These are

• The Navbar on the top
• The Pages list on the left
• The Posts list on the right

The portion of the screen that changes between the Homepage and the Editor page is the center of the screen. In the Homepage, the center of the screen views the selected Page or Post. At the bottom right of the Homepage, there are two buttons with a pencil and bin icon. The pencil icon edits the Page or Post and the bin icon deletes the Page or Post. Clicking on the pencil button changes the Homepage to the Editor page. In the Editor page, the center of the screen is the Editor.

The Navigation Bar consists of several parts. From the extreme left,

• Navbar Icon

  Clicking on this icon will return the browser to the initial Homepage.

• Info dropdown

  Currently, there are 3 items in the Info dropdown. They include a link to the About page, a link to this the HowTo page, and finally a link to the User Profile page.

• Search Input and Button

  Search string is keyed into the Input and the Button activates search. The response of the search will be displayed as a change in the Pages list showing those Pages that conform to the Search string searched. This is not a search form for Posts but Pages only.

• Family Tree button

  This button will create a Family Tree diagram with the current selected Page as the highest node. In the family tree diagram, each box represents a Page and therefore a person. Clicking on a box in the family tree will send the browser to the particular Page.

• Login and Logout group

  Includes Register and Login buttons when no user is logged in and Logout button when logged in.

The Pages List shows a list of buttons with the Title of the Pages on them. Clicking on a Page button will select that particular page. Posts within the Page will be listed on the Posts List. When Logged in, an add Page button is displayed on top of them Pages List.

This is a list of Posts from within the selected Page. Each Post is represented by a card with a brief of the Post blog and a thumbnail of the image if an image exists. If there are more than one image, one of the images are randomly selected to generate the thumbnail.

The Page represents the person with the following information. The following information is required to be input :-

1. Title

   English transliteration or name of person.

2. Alt Title

   Alternate name of person. Either Alias or name in main language.

3. Blog

   This is where information of the person should be entered. As more detailed information can be entered in Posts, then the information here should be introductory in nature and provide a backgkround of the person. Images and media are included by inserting a link to where they are. Images and media must be viewable to the world so that they are accessible through the link. The recommendation is to link to publicly accessible media files located elsewhere as the website is not set up for file storage.

4. Male/Female

   To select the sex of the person.

5. Children

   Lists the children of the person. As a manner of convention, the Father of the family should list the children although this selection is also available for the mother. Note that the respective children Pages must be defined so that they are available in the dropdown selection.

6. Partner

   List the partner/s of the person. Note that the partner Page must be defined so that they are available in the dropdown selection.

7. Treeroot

   Node from which the Family Tree is built. A drop down list of all names created is presented. If the intended root is intended to be the page at which is being currently editted, select "default". Otherwise select one of the names on the list.

8. Start Date

   Date of Birth

9. End Date

   Date of Death

Page information is input into the editor which is shown on the screen shot below. Once information input is complete, the Publish button will save the text and attachments into the database.

Family Tree view is generated with the selected Page so the selected Page will be the highest generation on the diagram. Also, note that if there are images in the Page, the first image will be used to generate the thumbnail in the Family Tree diagram.

Posts are the posts that are made within a particular Page. A Post can contain text, images and other attached media information. The attached media information are included as links into the text. The recommendation is to link to publicly accessible media files located elsewhere as the website is not set up for file storage. These links must point to media that is accessible to the public. The following information should be input into the Post :-

1. Title

   Title of the blog. Make this title descriptive by itself.

2. Blog

   The main text of the Post. Images and media are included by inserting a link to where they are. Images and media must be viewable to the world so that they are accessible through the link.

3. Tags

   Comma separated keywords that can categorize the Post.

4. Start Date

   Start date of event/s described by the Post.

5. End Date

   End date of event/s described by the Post.

The Family Tree is a tree diagram originating from the currently selected Page (person). Only the entries that are connected to that Page via Partner or Children relationships are drawn. To generate the Family Tree, first ensure that a Page is selected. You select a page by either clickong on the Page List buttons on the left or the boxes (corresponding to Pages) in the generated Family Tree diagram. Once you are on the proper page, click the Family Tree button in the Navbar to the right of the Search inputs. Note that if the selected Page is not connected via Partner or Children relationships to any other page, only one box will be drawn.

Both Pages and Posts can be assessed via the http address bar in the following manner.

• /page/select/(ObjectId of page) - This displays the specified page
• /page/goto_edit/(ObjectId of page) - This opens the specified page in the editor
• /view/tree/(ObjectId of page) - This displays the ancestry tree below the specified ObjectId
• /post/select/(ObjectId of post) - This displays the specified post
• /post/goto_edit/(ObjectId of post) - This opens the specified post in the editor

Another way of accessing the page or post record is via the Title field. The Title field may not be unique in which case more than 1 record can be returned. The functions below return only the 0th record. Hence it is prefarable to access Pages and Posts via the _id or ObjectId field (as above). The following backdoors have been added to the Pages and Posts.

• /page/sel_title/(title of page)/(index) - This displays the specified page indexed by the parameter index.
• /page/edit_title/(title of page)/(index) - This opens the specified page indexed by the parameter index in the editor.
• /view/tree_title/(title of page)/(index) - This displays the ancestry tree below the specified title indexed by the parameter index.
• /post/sel_title/(title of post)/(index) - This displays the specified post indexed by the parameter index.
• /post/edit_title/(title of post)/(index) - This opens the specified post indexed by the parameter index in the editor.

Please note that the when using Titles, the Title input must be exact with spaces substituted with %20 e.g. /page/sel_title/Merlene%20Lee/0. As Pages and Posts can have the same title, the index after the title field is used to index the titles that are returned from the filter operation. Hence /page/sel_title/Merlene%20Lee/0 refers to the 0th (first) entry, /page/sel_title/Merlene%20Lee/1 the 1st (second) entry if there are more than 1 record returned by the database operation etc.. If this parameter is left out, /page/sel_title/Merlene%20Lee, then the selection defaults to the 0th entry.

Pages and Posts can be selected (displayed) and viewed (family tree) without authentication, and without being logged in. On the other hand, it is necessary to be logged in in order to access the edit forms.