Toggle List in PHPMaker

PHPMaker Tutorial Series

Hi All, welcome to PHPMaker Tutorial Series.

In order to make our website informative and also increasing user experiece, we can use toggle list to make expandable detail about our topic we want to share to the users.

Figure 1. Example of Toggle List

In PHPMaker, toggle list called Master-Detail feature. Master Is the general topic that we have and Detail is the explanation or the further information about the topics. In this article i will use this case :

The University has a lot of Laboratories and each laboratory has lectures. We will show the list of lectures in each Laboratory using Master-Detail Feature in PHPMaker.

1. Take a look its data Structure

Analyze the Data structrure will help us define the master dan the detail. The raw data as shown in the excel below :

From the excel above, we can see that the Master Data are Laboratories and the detail data are the lectures name.

2. Separate the Master and The Details Table in Database

//Master  Table

CREATE TABLE [dbo].[laboratorium_anggota_head](
 [id] [int] IDENTITY(1,1) NOT NULL,
 [nama_lab] [varchar](255) NULL,

) ON [PRIMARY]

//Detail Table

CREATE TABLE [dbo].[laboratorium_anggota_detail](
 [id] [int] IDENTITY(1,1) NOT NULL,
 [id_laboratorium] [int] NOT NULL,
 [nip_kepegawaian] [nvarchar](255) NOT NULL,
 [nama] [nvarchar](255) NULL,
 
 CONSTRAINT [PK_Dosen_anggota_lab] PRIMARY KEY CLUSTERED 
(
 [id_laboratorium] ASC,
 [nip_kepegawaian] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

Insert the data to the table

3. Load Data to PHPMaker

Load Data to PHPMaker by clicking the refresh button as shown below

Figure 2. Load Data

4. Setting Access Of Table

Before make the master-detail toggle, we need to grant access to our new tables. In this case, i want to grant CRUD to both of Master dan Detail Table.

Figure 3. Grant Access

5. Set-up the Master-Detail

We can configure the setting to display master-detail by clicking the table tab as shown below

Figure 6. Table Tab

Then click at the master table and click Modify button to configure the link of master and detail table

Figure 7. Modify Setting

The popup window for modifying the table can be seen as below

Figure 8. Relation of Master and Detail Table

drag and drop the primary key on Master table to foreign key at Detail Table. In this case, the primary key of master table is “id” and the foreign key is “id_laboratorium”. Click ok then the modify table will show blue text

Figure 9. Master Detail Has done

Make sure to check the referential integrity.

6. Generate The Project

7. Try it Out !

Try the toggle list by click on + button beside the id column

That’s it. Hope it Helps!