Insert new values into the database

In this topic you will learn how to create a page that allows adding new entries to the database. You will use the Insert Record Form Wizard and the Comma-Separated CheckBoxes widget to enhance it.

To create the page you must:

1. Create the basic insert form which uses a textfield for the list of languages.

2. Use the Comma Separated Checkboxes to replace the tex-field added earlier with a set of check boxes from the correct table.

Create the basic insert form for adding entries.

To create the insert form, follow the steps below:

1. Open the insert page in Dreamweaver.

2. Go to the MX Kollection tab of the Insert bar and click on the Insert Record Form Wizard icon.

3. The wizard interface is divided into three steps which must be configured.

4. In the first step define the database information, as shown below:

• In the Connection drop-down menu select the connStudents Dreamweaver database connection defined earlier.

• In the Insert into table drop-down menu select the student_std table.

• In the Primary key column drop-down menu select the id_std column if not automatically selected.

• In the After inserting, go to text box specify the page to load after the insert operation completes. Click the Browse button and select the index page in the site root.

• Click Next to move on to the second step of the wizard.
  
  
   

5. In the second step of the wizard define the columns to insert into and what form elements to display:

• The Form fields grid displays the columns into which information will be inserted. By default the primary key column has been removed from the list. To configure a field, select it in the grid and use the controls underneath to change its options.

• For the name_std field, in the Display as drop-down menu select the Text field option.

• For the languages_std field, in the Display as drop-down menu select the Text field option.

• Click Next to move on to the last step of the wizard.
  
  
   

6. In the last step of the wizard define validation rules for the fields involved in the transaction:

• Select the name_std field in the Form fields grid and check the Required option.

• Select the languages_std field in the Form fields grid and check the Required option.

• Click the Finish button when done configuring all the options:
  
  
   

7. The wizard adds HTML code for the insert form and server behaviors to handle the application logic - the insert operation and the field validity.

To test the page save it and press F12 to load it into the browser:

Note: If using a remote server you might also need to upload the includes folder that was created by MX Kollection.

Enhance the insert form: pick languages from the database

After creating the basic form you will notice that in order to set the languages that one student wants to learn you have to manually enter their ID's. And this is highly unpractical - you would need to know the exact ID's by heart. To make it easier, the text field will be replaced with a group of checkboxes - each corresponding to one entry in the language_lan table.

First you must create a recordset that retrieves all entries in the language_lan table:

1. Open the insert page in Dreamweaver.

2. Go to the Bindings tab of the Application panel > Plus(+) > Recordset (Query). Configure the user interface that loads as shown in the image below:
   
   
    

3. Click OK to close the user interface and create the recordset.

Next you have to replace the regular text field with a widget:

1. Open the insert page in Dreamweaver.

2. Click on the Languages text field to select it.

3. Go to the Server Behaviors tab of the Application panel > Plus(+) > MX Kollection > Form Controls > Comma Separated Checkboxes.

4. Configure the user interface that loads:

• In the Apply to field drop-down menu select the languages_std text field. B

• In the Recordset drop-down menu select the rsLanguages recordset created earlier.

• In the Get labels from drop-down menu select the name_lan table column.

• In the Get values from drop-down menu select the id_lan table column.

• In the Display columns textfield enter how many columns of checkboxes will be displayed. Enter 3.

• Click OK to close the user interface and apply the server behavior.
  
  
   

If you want to test the page, save it and press F12 to load it into a browser. The text field has been replaced by a set of checkboxes.

After adding a new record, the languages_std column of the student_std table will contain the values of the id_lan columns for the checked options:

Next you will learn how to display all entries in the database - with the name and the name of the foreign language courses to attend.