Creating a Membership List Database Application: Part 1
Tags: superbase, database, applications, membership
Published: 2021-04-19 19:05:53

**THIS BLOG WAS ORIGINALLY POSTED ON [SIMPOL.COM] (https://www.simpol.com)**

This is the first in a series of blog posts showcasing how you can use Superbase NG to create applications that help your business. This blog will teach you the basics of SIMPOL and Superbase NG by creating a simple membership list program.

Download the free for Non-commercial of Superbase NG to make this yourself: [here] (https://www.superbase.com/products/superbase-ng-free/)

#Creating the Database and GUI
The first part of this process will be creating the database and GUI of your program, a simple process with Superbase NG Personal. Once you start Superbase NG Personal you are greeted with the following screen.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dvrrfkd0vm94ahuj9m7.png">
  <figcaption>Superbase NG Personal (Our WYSIWYG Editor)</figcaption>
</figure>

The first thing we want to do is create our membership table, the table should contain all the fields you want to store, as well as a unique membership ID field which will become very useful later. To create a new table go to _File > New > Table._

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uffgdozr7lgfd6enyl7p.png">
  <figcaption>Creating our Customer Table</figcaption>
</figure>

Tick the "New table from template" box and select "CUSTOMER: Customer information table…".

In Superbase, it is conventional for the table and filename to be the same with the Table Name in all caps and the filename all lower-case. This convention becomes very useful later on but for now, simply save the file.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6zug34k11u8zf1tdx437.png">
  <figcaption>The Customer Database</figcaption>
</figure>

You can change the names, or datatype, of any field by simply double-clicking on any box. The columns of this table are explained in much more detail in our Superbase NG Personal Start Guide. For now, we can exit this popup and start designing the GUI
Adding a record into the database

## Creating the GUI

This next step is where you get to be as creative as you like as we'll be designing the visual part of the application, this may look basic for now, but you can jazz it up as much as you'd like.
The first thing you need to do is create a new form by going to File > New > Form…

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1bcjey2amtgl7uerabg.png">
  <figcaption>Superbase NG Form Designer</figcaption>
</figure>


The first thing we want to do is change the size of the form to something more reasonable, to do this, select File > Page Setup… and change the width and height to 800 by 400. We can also change the background colour by specifying the RGB value. Alternatively, tick the 'Use System Colors' box and select "CLR_WINDOW" for a white background.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwpug43zcyrkitp4j9eq.png">
  <figcaption>Page Setup Properties</figcaption>
</figure>

We now have a basic empty form and want to add some form elements onto it. Do this by selecting the Editable Text icon and drawing a large rectangle by clicking and dragging your mouse along the canvas. Once you release the mouse button, a popup will appear. The parts of this popup that concern us are on the right side, namely Bound Field. By holding down the CTRL button, you can select all the fields you want as text boxes on the form. The other thing we want to do is tick the Create field label.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mo4j86ywmh6wukht1tcb.png">
  <figcaption>Text Properties popup</figcaption>
</figure>


Click OK, and you can now see all the text boxes and their labels. We should now save the form.

> If you get a popup saying "Form contains unlinked controls, continue to save?" Press No, and go to Define > File Links and drag the CUSTOMER Database from the left box to the right. Save the link and now you can save the form without issue.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f1z9igh9f3ri43n7yjg2.png">
  <figcaption>SIMPOL Linking Tool</figcaption>
</figure>

As you can see, this looks very basic. We should split the text boxes into two sections: Personal Details and Address Information. These should have headings, and we should tidy up the colours to make everything look uniform, maybe even add a logo somewhere.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4zlf7czpuh7i6aa92gt.png">
  <figcaption>First set of text boxes in our GUI</figcaption>
</figure>

>To tidy up the colours, fonts, etc. the Right-Click Menu and menu-bar are your friends.

To see what we ended up with, exit the form-designer, and you can see what the form would look like with some data.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ka3q5i0h9h90ln872bs.png">
  <figcaption>The final design</figcaption>
</figure>


We're nearly done! We can now see all our members records, select a record by index value (click on the ?), and even Add and Delete Records. 

But wait… we are missing a very crucial part there is currently no membership field. To add it go to File > Modify > Table… or press F3. This reopens the Database Table Definition, press Add Field, and give the field a name.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iu1zpho68v5fo4skrms2.png">
  <figcaption>Adding a new field</figcaption>
</figure>

We can optionally index this new field so we can sort by members by level. Additionally, we can change the CustSerNo field to be unique. 

>There is a bug in the current version of Personal where modifying the table doesn't work in Form View switch to Record View by going to View > Record

Once this has been done, we can add a dropdown to select between the membership tiers.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wi46uskddr4kw0enw5m.png">
  <figcaption>List Contents</figcaption>
</figure>

And just like that, you've created a very simple membership database & GUI

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9cg2410wxzgz0j25wmz.png">
  <figcaption>The Final Thing! Well done!</figcaption>
</figure>