JPF Example - Member Fees

This is an example of a simple project developed using the Java Portal Framework. The premise of the project is that you are the treasurer of a club you belong to and you need to keep track of the fees paid by your club members. This would be an offline system that you manage yourself, thus there will be no user management or anything like that. The system would be able to do the following things:

  1. Register/edit member information

  2. Manage fees type

  3. Record fees payment

  4. Print payment receipt

To achieve this, we would do the following steps:

  1. Create a tracker to manage member information

  2. Create a tracker to manage the type of fees

  3. Create a tracker to manage the payment

  4. Create a page to print receipt

To start, follow the steps in the Getting Started page to setup your base system.

Create the member tracker

  1. First step to create the member tracker is to login as Admin into your system.

  2. Click on the “Trackers” menu in the Sidebar menu.

  3. Click on the “Add” button under the “Tracker Listing”.

  4. In the form, fill in the following values:

    1. Module: club

    2. Slug: member

    3. Name: Club Members

    4. Type: Statement

  5. Click on the “Save” button.

  6. Once we’ve created the tracker, we need to add the fields for it. Click on the “Fields” tab at the “Tracker Info” page.

  7. Click on the “Add” button to add a new field.

  8. In the form, fill in the following values:

    1. Name: name

    2. Label: Name

    3. Type: String

    4. Widget: Default

  9. Click on the “Save” button to save the field.

  10. Repeat step 7-9 for the following fields

    Name

    Label

    Type

    Widget

    phone_number

    Phone Number

    String

    Default

    address

    Address

    Text

    Default

    e_mail

    E-Mail

    String

    Default

    member_since

    Member Since

    Date

    Default

  11. Once we have created all the fields, we need to update the database table for the tracker. Click on the “Details” tab, then on the “Update DB” button to update the database table for the tracker.

  12. Then we need to add the fields to view in the items listing. Click on the “Edit” button. Then add the fields we wish to display in the “List Fields”. So add the following values in the “List Fields” field, “name, phone_number, address, e_mail, member_since”. Then click on the “Save” button to update the tracker.

  13. Now we can start using the tracker. Click on the “View” button to view the “Club Members” tracker data.

  14. You can test the tracker by adding a new record. Press on the “Add” button. Fill in some test data in the form. Then click on the “Save” button to insert the information into the database.

  15. You should see it added to the data listing. You can view the record details by clicking on the item number on the very left column. In the details page, you can click on the “Edit” button to update the information for that record. Click on the “List” button to go back to the record listing.

  16. You can also try to delete information by clicking on the “Delete” button, then confirm the delete by clicking on the “OK” button or “Cancel” to cancel the process.

Create the fees type tracker

  1. Click on the “Trackers” menu in the Sidebar menu.

  2. Click on the “Add” button under the “Tracker Listing”.

  3. In the form, fill in the following values:

    1. Module: club

    2. Slug: fees_type

    3. Name: Fees Type

    4. Type: Statement

  4. Click on the “Save” button.

  5. Click on the “Fields” tab at the “Tracker Info” page.

  6. Add the following fields following step 7-9 from the “Create the member tracker” section

    Name

    Label

    Type

    Widget

    name

    Name

    String

    Default

    amount

    Amount

    Number

    Default

    repeat

    Repeat

    String

    DropDown

  7. To specify what values the user can select for the repeat field, update the “Option Source” value. Make sure the root node is an “array”. Then “Append” a “String” to it. Put “Monthly” for the first string. Then “Append” another “String” and put the value “Yearly”. And lastly “Append” the value “Once”.

  8. Once all there fields have been added, update the database table. Click on the “Details” tab, then on the “Update DB” button to update the database table.

  9. Next we need to specify the fields display in the default listing. Click on the “Edit” button. Add the values “name, amount, repeat” to the “List Fields” value. The click on the “Save” button.

  10. Now we can start using the tracker. Click on the “View” button to view the “Fees Type” tracker data.

  11. Click on the “Add” button, in the form, fill in the following values, then click on the “Save” button after:

    1. Name: Registration

    2. Amount: 100

    3. Repeat: Once

  12. Do the step above for the following values too:

    1. Name: Monthly Fee

    2. Amount: 20

    3. Repeat: Monthly

Create the payment tracker

  1. Click on the “Trackers” menu in the Sidebar menu.

  2. Click on the “Add” button under the “Tracker Listing”.

  3. In the form, fill in the following values:

    1. Module: club

    2. Slug: payment

    3. Name: Payment

    4. Type: Statement

  4. Click on the “Save” button.

  5. Click on the “Fields” tab at the “Tracker Info” page.

  6. Click on the “Add” button to add a new field. Then fill in the following values:

    1. Name: payment_date

    2. Label: Payment Date

    3. Type: Date

    4. Widget: Default

  7. Next we want to add information on who is currently paying their fees. Click on the “Add” button to add a new field. Then fill in the following values:

    1. Name: member

    2. Label: Member

    3. Type: TrackerType

    4. Widget: Default

    As a tracker type, we need to specify which tracker this particular field will be connected to. That is done by updating the “Option Source” field. First we need to change the root node to “object”, then add “String” with the name “module” and value “club”. Then add “String” with name “slug” and value “member”. The module and slug is the tracker the field is connected to. Then we specify which field will be used to display the selection for when the user type into the field. Add a “String” with the name “name_column” and value “name”. Then we need to specify how to query for the values to select. Add an “Object” with the name “query”. In the object add an “Array” with the name “like”. Then add a “String” with the value “name”.

  8. Next we want to add information on what fees is currently being paid. Click on the “Add” button to add a new field. Then fill in the following values:

    1. Name: fee

    2. Label: Fee

    3. Type: TrackerType

    4. Widget: Default

    As a tracker type, we need to specify which tracker this particular field will be connected to. That is done by updating the “Option Source” field. First we need to change the root node to “object”, then add “String” with the name “module” and value “club”. Then add “String” with name “slug” and value “fees_type”. The module and slug is the tracker the field is connected to. Then we specify which field will be used to display the selection for when the user type into the field. Add a “String” with the name “name_column” and value “name”. Then we need to specify how to query for the values to select. Add an “Object” with the name “query”. In the object add an “Array” with the name “like”. Then add a “String” with the value “name”.

  9. Click on the “Add” button to add a new field. Then fill in the following values:

    1. Name: amount

    2. Label: Amount

    3. Type: Number

    4. Widget: Default

  10. Once all there fields have been added, update the database table. Click on the “Details” tab, then on the “Update DB” button to update the database table.

  11. Next we need to specify the fields display in the default listing. Click on the “Edit” button. Add the values “payment_date, member, fee, amount” to the “List Fields” value. The click on the “Save” button.