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.

[SithasoDaisy5] Creating your first MySQL CRUD WebApp using REST API With API-Key (Php)

Hi Fam Before you start this tutorial, please ensure that your dev environment is setup by following this tutorial. https://www.b4x.com/android/forum/threads/web-beginning-webapp-website-development-with-sithasodaisy5.166741/ Created with pleasure using PHP CRUD API BANano Laragon 6 B4j...

www.b4x.com

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

This has been inspired by Vertigos Family.Show Project

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.

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)

 

[Mashiane]

Family Tree - Member Information

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

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.

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]

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.

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.

Step 2

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

Step 3

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

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

 

[Mashiane]

Creating the Layout - Abstract Designer

1. Open the b4j layout named tableprefview
2. Save it as peopleview
3. Rename the tbl SDUI5Table to tblPeople
4. Rename the pref SDUI5Preferences to prefPeople
5. Save the layout

 

[Mashiane]

1st post updated with the link to the source code.

 

[rabbitBUSH]

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......

 

[Mashiane]

does/will it import GEDCOM?

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.

 

[rabbitBUSH]

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]

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]

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.

[SithasoDaisy5] - Create a WebApp From An Excel Spreadsheet / A Database - Part 1

Hi Fam... Let's say you have an excel sheet / a database that you want to convert to a WebApp, how can you do it? SithasoDaisy5 has a basic, simple app builder that can help you create a table and a preference dialog. To create your app, you will use a project template of SithasoDaisy5...

www.b4x.com

 

[Mashiane]

Running the Final Family Tree App

[Web] FamilyTree developed with SithasoDaisy5

Hi Fam There are 2 inspirations for this project, 1. Family.Show and 2. TreeSpider The family tree is built once you capture your family members and also create relationships between them, like adding a mother and a father. You can also include details like clan names for your family...

www.b4x.com