B4J Tutorial [SithasoDaisy5] Creating your 2nd MySQL CRUD WebApp using REST API With API-Key (Php) - FamilyTree

Hi Fam


Download (Source code is in the tutorials folder)
READ THIS FIRST

In our first example, we introduced you to MySQL CRUD WebApps using SithasoDaisy5. It was a basic example to get you going building your first CRUD App. It also helps you setup your dev environment and the tools needed to get this going. You need to understand that first.


Let's go continue into this beautiful app. This is becoming beautiful...

1744621403686.png


This has been inspired by Vertigos Family.Show Project

1744438447129.png




This example is a little advanced as it looks at other input components like selects, images, file selectors (dropdown), selects etc.

  1. You will learn how to select an image file and then update an image from the file you selected.
  2. You will learn how to add options to a dropdown from a database. Whilst this will be from the same database table, using the same approach you can use another database table.
  3. You will learn the concept of self-referencing database schemas
We will use the same approach as before. And our final screen would look like this.

Creating the people table.

As we are continuing with an existing project, we will use the old stock mysql database.

We create the people table to store our family members with this command. Open MySQL and execute this command. Please note this table schema is not really optimised.

B4X:
CREATE TABLE If Not EXISTS `people` (`id` VARCHAR(255) PRIMARY KEY, `profiledisplay` LONGTEXT, `gender` VARCHAR(255), `firstname` VARCHAR(255), `middlename` VARCHAR(255), `lastname` VARCHAR(255), `suffix` VARCHAR(255), `dateofbirth` VARCHAR(255), `isliving` BOOL, `placeofbirth` VARCHAR(255), `dateofdeath` VARCHAR(255), `placeofdeath` VARCHAR(255), `father` VARCHAR(255), `mother` VARCHAR(255), `parentsstatus` VARCHAR(255), `clannames` LONGTEXT)

Table & Preference Dialog Entry (we use a table and preference dialog to enter information about the family members)

1744468418917.png
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Family Tree - Member Information

The preference dialog to enter the information for a family member will look like this.

1744437465833.png


As noted above, we are using new input components in this example. We have an avatar, a file selector, a radio group, textboxes, checkbox, selects, filter, text area. All these are meant to solicit information from the end user of our app.

To design this UI, we used the preference dialog, which makes it very easy for us to create UIs.

B4X:
comppreview.AddPropertyTextBox("id", "#", "", true)
comppreview.SetPropertyVisible("id", False)
comppreview.AddPropertyAvatar("profiledisplay", "Profile Display", "80px", "circle", "./assets/mashy.jpg")
comppreview.SetPropertyAvatarRing("profiledisplay", false, "primary", "2", "base-100")
comppreview.SetPropertyAvatarOnline("profiledisplay", false, false)
comppreview.AddPropertyCamera("selectprofile", "Choose Profile Image", "80px", "42px", "error", "#ffffff")
Dim genderoptions As Map
genderoptions.Initialize
genderoptions.put("Male", "Male")
genderoptions.put("Female", "Female")
comppreview.AddPropertyRadioGroup("gender", "Gender", "Male", "neutral", "#22c55e", genderoptions)
comppreview.AddPropertyTextBox("firstname", "First Name", "", true)
comppreview.AddPropertyTextBox("middlename", "Middle Name", "", false)
comppreview.AddPropertyTextBox("lastname", "Last Name", "", true)
comppreview.AddPropertyTextBox("suffix", "Suffix", "", false)
comppreview.AddPropertyDatePicker("dateofbirth", "Date of Birth", "", false, "Y-m-d", "F j, Y", "en", )
comppreview.AddPropertyCheckBox("isliving", "Living", true, "success")
comppreview.SetPropertyChecked("isliving", true)
comppreview.AddPropertyTextBox("placeofbirth", "Place of Birth", "", false)
comppreview.AddPropertyDatePicker("dateofdeath", "Date of Death", "", false, "Y-m-d", "F j, Y", "en", )
comppreview.AddPropertyTextBox("placeofdeath", "Place of Death", "", false)
Dim fatheroptions As Map
fatheroptions.Initialize
comppreview.AddPropertySelect("father", "Father", "", false, fatheroptions)
Dim motheroptions As Map
motheroptions.Initialize
comppreview.AddPropertySelect("mother", "Mother", "", false, motheroptions)
Dim parentsstatusoptions As Map
parentsstatusoptions.Initialize
parentsstatusoptions.put("married", "Married")
parentsstatusoptions.put("divorced", "Divorced")
parentsstatusoptions.put("nevermarried", "Never Married")
parentsstatusoptions.put("other", "Other")
parentsstatusoptions.put("separated", "Separated")
comppreview.AddPropertyFilter("parentsstatus", "Parents Status", "married", "neutral", "#22c55e", parentsstatusoptions)
comppreview.AddPropertyTextArea("clannames", "Clan Names", "", true, "4")
 

Mashiane

Expert
Licensed User
Longtime User
Preferences Builder - Creating the Family Tree Member Input

Fortunately, the source code above we did not have to write, by selecting the components we need using the Preference Builder and changing some properties for them, we were exposed to some efficiency. As you add each component you need, you can see the whole picture of what you need to achieve.

1744438802764.png


To create each component listed here, which then produces the UI you see above, we follow a simple 3 step process.

Step 1.

Select the component you need from the listed components.

1744438960912.png


Step 2

Update the properties of the component to be exactly how you want them to be.

1744439028630.png


Step 3

When you are satisfied with the *preview* of your component, click Apply to store it as a build up to your UI.

1744439113414.png


The builder will store all the details of the components you will use in defining your UI.
 

rabbitBUSH

Well-Known Member
Licensed User
1st post updated with the link to the source code.
Whoaaaa Mash, I'm working with our family trees currently using other software dinguses.

Your project was discovered sort of accidentally and I'm going to certainly go into it (provided I can finally get my head around this methodology of yours).... I'm still baffled by BANANO and etc..

So Many questions about this project - but I guess I need to try get B4j going and work that out as well, first.

First question would be - does/will it import GEDCOM? Retyping 4k people would be a pain in the poondoo.

Gee what a project... In the good old EC parlance -> Good One...I look forward to fiddling......
 

rabbitBUSH

Well-Known Member
Licensed User
My guess is that the GEDCOM to MY/SQL is going to be a brain twister exercise....

Best of luck with that.....by the time I really get tucked into investigating this you should have finished......😁☕
 

rabbitBUSH

Well-Known Member
Licensed User
Thanks, yeah I am planning this and its my todo list.

It will be an awesome addition. I'm glad you are finding it helpful.
And.....just in case this will be useful when you get to it.

GEDCOM will have preserved the compiler profile (I think that would be original compiler - I also think one can rename that later if one wants to add additionals); anyway -

I, at first, sucked the GEDCOM into the software, it did ask about including the compiler's profile. I didn't do that. What happened was that it sucked in all the names, but, none of the relatives and relationships. (The list only.).

Oi. I then redid the import and included the compiler profile which did what I was expecting - linkages and lines imported.

So that seems to be something you want to keep in mind when you get to it.

Just thought, don't know why the bits in brackets and some others are there pedantically explaining stuff. Pretty sure you're not a Dodo 🦤 (I'll claim thoroughness on my part). 😇.
 

Mashiane

Expert
Licensed User
Longtime User
Part of this tutorial is looking at how we created this Family Tree WebApp. We use the same methodology discussed there to build the app.

 

Mashiane

Expert
Licensed User
Longtime User
Running the Final Family Tree App

 
Top