Install the App?

Tutorial

Learning how to add a contact list to your web application

What you will develop...

You will learn in the first part of this tutorial, how to display within a PHP view, a list of contacts stored in a MySQL database.

Then, at the end of the fourth part of the tutorial, you'll be able to add new contacts to the list, to edit existing ones, to search for contacts and to delete a contact.

Prerequisite...

Before starting this tutorial, be sure to get the ZnetDK for Mobile Starter Application installed and configured to access to a MySQL database.
Otherwise, go to the Get Started Page and follow the procedure indicated.

SUMMARY

PART 1 - DISPLAYING A CONTACT LIST
PART 2 - ADDING AND EDITING CONTACTS
PART 3 - SEARCHING FOR CONTACTS
PART 4 - DELETING A CONTACT
GOING FURTHER

PART 1 - Displaying a contact list

In this chapter, you will add a new table contacts to the web application database and then a PHP view contactlist.php to the application.

This first part only requires knowledge in PHP and HTML.

Creating the SQL table

First, download the zdk4m-tuto-contacts.sql Tutorial SQL script from the Download page.

Next, log in to your phpMyAdmin tool with a user account allowed to create a new table and to insert rows into the web application datatable.
Finally, import the downloaded zdk4m_tuto_contacts.sql script into your web application database.

Once import terminated, you should see a new table named contacts containing 100 sample rows as shown on the picture beside.

ZnetDK for Mobile Tutorial - Loading contacts in MySQL

Adding the "My contacts" item to the navigation menu

To display the contactlist.php view, a new menu item named My contacts is added to the navigation menu by editing the INSTALL_DIR/applications/default/app/menu.php script.

Insert the line #3 below just after the definition of the Home menu.

TUTORIAL: menu.php

\MenuManager::addMenuItem(NULL, 'home', 'Home', 'fa-home');

\MenuManager::addMenuItem(NULL, 'contactlist', 'My contacts', 'fa-address-card-o');

\MenuManager::addMenuItem(NULL, 'myview1', 'My first view', 'fa-hourglass-1');
PHP

Each call to the ZnetDK \MenuManager::addMenuItem() method adds a new item to the navigation menu and connect it to the view to display.

The parameters passed to the method are explained below:

  • NULL: this NULL value indicates that the item is to display as a root menu item.
  • 'contactlist': this is the name of the PHP view (without the .php extension) to display when the user clicks on the menu item.
  • 'My contacts': the label displayed for the menu item on the navigation menu.
  • 'fa-address-card-o': the name of the Font Awesome icon to display for the menu item on the navigation menu.

Now, reload the application into your web browser to display the My contacts menu item.

ZnetDK for Mobile Tutorial part 1 - My contacts menu

Creating the PHP view

To begin, add a new PHP script named contactlist.php into the INSTALL_DIR/applications/default/app/view/ folder of the Starter Application then copy and paste the following code.

TUTORIAL: contactlist.php

<?php
    $contactsDao = new SimpleDAO('contacts');
    $rowsFound = array();
    $rowCount = $contactsDao->getRows($rowsFound, 'name');
?>
<h3><?php echo "{$rowCount} contacts found:"; ?></h3>
<ul class="w3-ul w3-border">
<?php foreach ($rowsFound as $row) : ?>
    <li>
        <b><?php echo $row['name']; ?></b>
        <a class="w3-right" href="tel:<?php echo $row['phone']; ?>">
            <i class="w3-text-theme fa fa-phone-square fa-lg"></i>
            <span style="font-family: monospace;"><?php echo $row['phone']; ?></span>
        </a>
    </li>
<?php endforeach; ?>
</ul>
PHP HTML5
ZnetDK for Mobile Tutorial part 1 - display of contacts

This code is a simple and usual way in PHP to display data rows in a HTML view.

The first 3 lines of code in the view are written in PHP. They consist in extracting the data rows from the contacts database table thanks to the ZnetDK SimpleDAO class.
The rows of contacts are assigned to the $rowsFound variable by the SimpleDAO::getRows() method which further sorts the returned rows by name.

The next lines of PHP code iterate over the table rows (foreach loop) in order to display them within a HTML unordered list (ul HTML tag).

Only the values of the name and phone columns of the contacts table are displayed.

Finally, the w3-ul, w3-border, w3-right and w3-text-theme W3.CSS classes help to style a minimum the HTML list.

PART 2 - Adding and editing contacts

This chapter presents another solution to display the list of contacts, in particular based on AJAX requests, JavaScript code and the ZnetDK for Mobile framework.

This solution is particularly suitable for displaying a large number of data rows by loading them on demand using an infinite scroll mechanism.

At last, this second part shows how to add and edit contacts.

Adding a controller to the application

According to the MVC design pattern, we will add the contactctrl.php application controller to handle the AJAX requests sent by the view.

The contactctrl.php controller is a PHP script added to the INSTALL_DIR/applications/default/app/controller/ folder.
This script contains the definition of the PHP class ContactCtrl consisting of 3 methods, each one matching a specific controller action.

The 3 actions of the controller are:

  • action_all(): method called by the view to get the 20 next data rows to display.
  • action_detail(): called to retrieve the data of a given contact for editing purposes.
  • action_store(): action called to store a new contact or to update the data of an existing one.

These controller actions use the SimpleDAO class again to manipulate the data in the contacts MySQL table.

Here is below the PHP code of the contactctrl.php script.

TUTORIAL: contactctrl.php controller script

<?php
namespace app\controller;
class ContactCtrl extends \AppController {
    static protected function action_all() {
        $response = new \Response();
        $contacts = array();
        $dao = new \SimpleDAO('contacts');
        $response->total = $dao->getRows($contacts, 'id');
        $response->rows = $contacts;
        return $response;
    }
    static protected function action_detail() {
        $request = new \Request();
        $dao = new \SimpleDAO('contacts');
        $detail = $dao->getById($request->id);
        $response = new \Response();
        $response->setResponse($detail === FALSE ? array() : $detail);
        return $response;
    }
    static protected function action_store() {
        $request = new \Request();
        $formData = $request->getValuesAsMap('id', 'name', 'birthdate',
                'address', 'zip', 'city', 'country', 'phone', 'email');
        $dao = new \SimpleDAO('contacts');
        $contactId = $dao->store($formData);
        $response = new \Response();
        $response->setSuccessMessage('Contact',
                "Storage of the contact with ID={$contactId} succeeded.");
        return $response;
    }
}
?>
PHP

A controller action returns its response in JSON format thanks to a ZnetDK \Response object.

Each property set for the \Response object is automatically converted to a JSON property by the ZnetDK framework, before being returned to the AJAX caller.
The \Response::setResponse() method allows to assign multiple properties in only one instruction (for example all the properties of a given contact selected by ID into the action_detail() method).
The \Response::setSuccessMessage() method sets the message displayed by the web browser when a server-side action is fullfilled successfully.

The POST parameters of the AJAX request are read by the controller action by instantiating a ZnetDK \Request object.

A single value can be directly read by specifying the name of the relevant POST parameter (i.e. $request->id into the action_detail() method).
The ZnetDK \Request::getValuesAsMap() method helps to assign multiple POST parameters to an indexed array as illustrated by the action_save() method.

The view - Displaying contacts from AJAX request

In this chapter, we will replace the contactlist.php view code written in PART 1 of this tutorial, by new code based on the ZnetDK for Mobile framework.

This new version of the view has the advantage of only loading on demand a subset of contacts (infinite scroll), unlike the previous version that loaded all the contacts into the view at one time.

Here is the new code of the view.

TUTORIAL PART 2: contactlist.php, ZnetDK Data List implementation

<ul id="contactlist" class="w3-ul w3-border w3-margin-top w3-hide"
    data-zdk-load="contactctrl:all">
    <li data-id="{{id}}">
        <a class="edit w3-xlarge"><i class="fa fa-edit fa-lg"></i></a>
        <b>{{name}}</b>
        <a class="w3-right" href="tel:{{phone}}">
            <i class="w3-text-theme fa fa-phone-square fa-lg"></i>
            <span style="font-family: monospace;">{{phone}}</span>
        </a>
    </li>
</ul>
<script>
    var myContactList = znetdkMobile.list.make('#contactlist', false, false);
</script>
HTML5 JS

As you can see, there is no PHP code in this new version of the view.

It means that the HTML list is no longer built by the Web server before being downloaded.

Indeed, the list is now generated in JavaScript on the client-side by the ZnetDK for Mobile znetdkMobile.list.make() method once the view is loaded, where the '#contactlist' parameter value is the selector of the HTML list in the DOM.
The rows are retrieved from the Web server through an AJAX call to the ContactCtrl:action_all() controller action implemented at the previous chapter.
This is the data-zdk-load="contactctrl:all" HTML attribute set to the <ul> element that connects the list to the remote PHP controller action.
The {{name}} and {{phone}} placeholders are used to display the name and the phone of each contact in the list.
The {{id}} placeholder set to the data-id attribute of the <li> element will be required to edit a contact when clicking on the a.edit anchor element.
Only 20 rows are returned at the first AJAX call. The following 20 rows are returned on demand only when the list is scrolled down and so on until the end of the list is reached.
Finally, you will notice that the total number of contacts is automatically added to the right of the My contacts menu item.

ZnetDK for Mobile Tutorial part 2 - display of contacts

The view - Adding an input form for creating and editing contacts

Now, we will add to the contactlist.php view, the definition in HTML of the input form used for editing the information of an existing contact and for adding new contacts.

Here is the new code of the view including the input form implementation.

TUTORIAL PART 2: contactlist.php, the input form

<!-- LIST OF CONTACTS -->
<ul id="contactlist" class="w3-ul w3-border w3-margin-top w3-hide"
    data-zdk-load="contactctrl:all">
    <li data-id="{{id}}">
        <a class="edit w3-xlarge"><i class="fa fa-edit fa-lg"></i></a>
        <b>{{name}}</b>
        <a class="w3-right" href="tel:{{phone}}">
            <i class="w3-text-theme fa fa-phone-square fa-lg"></i>
            <span style="font-family: monospace;">{{phone}}</span>
        </a>
    </li>
</ul>
<!-- CONTACT INPUT FORM -->
<div id="contact-modal" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
        <header class="w3-container w3-theme-d5">
            <a class="close w3-button w3-xlarge w3-hover-theme w3-display-topright" href="javascript:void(0)" aria-label="<?php echo LC_BTN_CLOSE; ?>">
                <i class="fa fa-times-circle fa-lg" aria-hidden="true" title="<?php echo LC_BTN_CLOSE; ?>"></i>
            </a>
            <h4 class="title">Contact</h4>
        </header>
        <form class="w3-container w3-theme-light" data-zdk-load="contactctrl:detail"
                data-zdk-submit="contactctrl:store">
            <input type="hidden" name="id">
            <div class="w3-section">
                <label><b>Name</b> <i class="fa fa-asterisk w3-text-red" aria-hidden="true"></i>
                    <input class="w3-input w3-border w3-margin-bottom" type="text" name="name" autocomplete="name" required>
                </label>
                <label>
                    <b>Birthdate</b>
                    <input class="w3-input w3-border w3-margin-bottom" type="date" name="birthdate">
                </label>

                <label>
                    <b>Address</b>
                    <input class="w3-input w3-border w3-margin-bottom" type="text" name="address" autocomplete="street-address">
                </label>
                <label>
                    <b>ZIP</b>
                    <input class="w3-input w3-border w3-margin-bottom" type="text" name="zip" autocomplete="postal-code">
                </label>
                <label>
                    <b>City</b>
                    <input class="w3-input w3-border w3-margin-bottom" type="text" name="city">
                </label>
                <label>
                    <b>Country</b>
                    <input class="w3-input w3-border w3-margin-bottom" type="text" name="country" autocomplete="country">
                </label>
                <label>
                    <b>Phone</b>
                    <input class="w3-input w3-border w3-margin-bottom" type="text" name="phone" autocomplete="tel">
                </label>
                <label>
                    <b>Email</b>
                    <input class="w3-input w3-border" type="email" name="email" autocomplete="email">
                </label>
                <button class="w3-button w3-block w3-green w3-section w3-padding" type="submit"><i class="fa fa-save"></i> <?php echo LC_BTN_SAVE; ?></button>
            </div>
        </form>
    </div>
</div>
<script>
    // The list of contacts is generated
    var myContactList = znetdkMobile.list.make('#contactlist', false, false);
    // The contact input form is linked to the list
    myContactList.setModal('#contact-modal', true, function(){ // NEW
        this.setTitle('New contact');
    }, function(formObject) { // EDIT
        var contactId = formObject.getInputValue('id');
        this.setTitle('Edit contact #' + contactId);
    });
</script>
PHP HTML5 JS

If we look now at the HTML source code of the input form, we can notice that the <form> element is surrounded by a <div> element having the w3-modal CSS class.
Indeed, the form is displayed in a modal dialog as shown on the picture below.

On the other hand, you can see the data-zdk-load="contactctrl:detail" attribute of the form element that indicates to the ZnetDK framework, the controller action to call for getting the information of a given contact to edit.
According to the same principle, the data-zdk-submit="contactctrl:store" attribute indicates the controller action to call on form submit.

About the Javascript source code, a call to the setModal() method on the myContactList ZnetDK object specifies the modal dialog to display (matching the '#contact-modal' selector) when editing a contact and when adding a new contact.
Two callback methods are passed in parameters of the setModal() method to customize the title of the modal dialog when adding and editing a contact.

To see the new version of the view in action, click on the red Plus button (+ at the bottom right of the list) to display the new contact form. Once filled in, click on the Save button to store the new contact.
To modify an existing contact, click on the Edit icon () from the list, change data in the form and save by clicking on the Save button.

ZnetDK for Mobile Tutorial - Contact form

The view - Styling the contact list

Finally, we will display additional information for each contact in the list while ensuring their optimal readability regardless of the dimensions of the screen.

To do this, simply apply the W3.CSS responsive grid style classes for an adaptive display based on the size of the viewport.

See below the new HTML code of the list of contacts.

TUTORIAL PART 2: contactlist.php, styles of the contact list

<!-- LIST OF CONTACTS -->
<ul id="contactlist" class="w3-ul w3-hide"
    data-zdk-load="contactctrl:all">
    <li class="w3-border-theme" data-id="{{id}}">
        <div class="w3-row">
            <div class="w3-col" style="width: 60px;">
                <a class="edit w3-button w3-circle w3-ripple w3-xlarge w3-theme-action w3-hover-theme"><i class="fa fa-edit"></i></a>
            </div>
            <div class="w3-rest w3-row">
                <div class="w3-col s12 m5 l3 w3-padding-small">
                    <span class="w3-tag w3-theme-d1">{{id}}</span>
                    <span class="w3-text-theme w3-large"><strong>{{name}}</strong></span>
                </div>
                <div class="w3-col s12 m7 l3 w3-padding-small">
                    <i class="w3-text-theme fa fa-map-signs fa-lg"></i> <span>{{zip}} - {{city}}</span>
                </div>
                <div class="w3-col s12 m9 l4 w3-padding-small">
                    <a href="mailto:{{email}}">
                        <i class="w3-text-theme fa fa-envelope fa-lg"></i> <span>{{email}}</span>
                    </a>
                </div>
                <div class="w3-col s12 m3 l2 w3-padding-small">
                    <a href="tel:{{phone}}">
                        <i class="w3-text-theme fa fa-phone-square fa-lg"></i> <span>{{phone}}</span>
                    </a>
                </div>
            </div>
        </div>
    </li>
</ul>
HTML5

As shown in the screenshot below, the contact list display automatically adjusts according to the screen orientation.

In portrait orientation, the name, address, email and phone number of the contact are stacked on top of each other.
The w3-col CSS class combined with the s12 CSS class indicates that the text should occupy the full width of the container on a small screen.
Indeed, the W3.CSS responsive grid is divided into 12 columns.

In landscape orientation that corresponds to a medium screen, the name and address are displayed on the same line according to a distribution of 5/12 (m5 CSS class for a width=41.66%) and 7/12 (m7 CSS class for a width=58.33%).
Concerning the email and the phone number, the m9 and m3 CSS classes respectively apply a display on 3 columns (width=25%) and 9 columns (width=75%) in the grid.

ZnetDK for Mobile Tutorial - Responsive Contact list

PART 3 - Searching for contacts

In this chapter, you will see how to add an additional action button to search for contacts whose name matches a keyword entered by the user.

The view - Adding search button and keyword input

The first step is to enable the Data List search feature by simply replacing the third parameter false of the znetdkMobile.list.make() JS method with true.
To do this, edit the contactlist.php view script and make the change in the HTML <script> tag at line #3.

TUTORIAL PART 3: contactlist.php, enabling Data List search feature

<script>
    // The list of contacts is generated
    var myContactList = znetdkMobile.list.make('#contactlist', false, true);
    // The contact input form is linked to the list
    myContactList.setModal('#contact-modal', true, function(){ // NEW
        this.setTitle('New contact');
    }, function(formObject) { // EDIT
        var contactId = formObject.getInputValue('id');
        this.setTitle('Edit contact #' + contactId);
    });
</script>
JS

Now, if you reload the app in the web browser, a new blue search button will appear just above the Add button.
When clicking on the search button, a modal dialog is displayed with a search field.

ZnetDK for Mobile Tutorial - Search action button

The next step is to connect the search field to the controller action in charge of offering suggested contact names while entering a keyword (autocompletion).
To do so, we edit again the contactlist.php view script to specify through the data-zdk-autocomplete HTML attribute (see line #4 below), the controller and the action to call on search for retrieving suggestions of contact names.

TUTORIAL PART 3: contactlist.php, connecting the search field to a remote controller

<!-- LIST OF CONTACTS -->
<ul id="contactlist" class="w3-ul w3-hide"
    data-zdk-load="contactctrl:all"
    data-zdk-autocomplete="contactctrl:suggestions">
    <li class="w3-border-theme" data-id="{{id}}">
        <!-- The rest of the HTML code... -->
    </li>
</ul>
HTML5

The implementation of the controller action specified for data-zdk-autocomplete is described in the next chapter.

ZnetDK for Mobile Tutorial - Search action button

The controller - Searching for contacts by name

To take in account the keyword entered as search criteria and specify the column in the SQL table where to search in, the action_all() method is modified by calling the \SimpleDAO::setKeywordSearchColumn() method as shown below.

Now, the action_all() method only returns the contacts whose name matches the keyword entered.

TUTORIAL PART 3: contactctrl.php, specifying the name column where to search in.

static protected function action_all() {
    $response = new \Response();
    $contacts = array();
    $dao = new \SimpleDAO('contacts');
    $dao->setKeywordSearchColumn('name');
    $response->total = $dao->getRows($contacts, 'id');
    $response->rows = $contacts;
    return $response;
}
PHP

Finally, to get the suggestions of contacts while entering a keyword in the search field, the action_suggestions() method is declared in the ContactCtrl class when the contactctrl::suggestions action is invoked by the Data List from the view.

TUTORIAL PART 3: contactctrl.php, getting search suggestions

static protected function action_suggestions() {
    $dao = new \SimpleDAO('contacts');
    $dao->setKeywordSearchColumn('name');
    $suggestions = $dao->getSuggestions();
    $response = new \Response();
    $response->setResponse($suggestions);
    return $response;
};
PHP

The search for suggestions from the keyword is performed by a call to the \SimpleDAO::getSuggestions() method. As for the action_all() method, the column of the contacts table in which to search for suggestions is also indicated by a call to the \SimpleDAO::setKeywordSearchColumn() method.

The search can be launched several times. In this case, the criteria are applied cumulatively.
A search criterion is deleted by clicking on the close icon to the left of the criterion's blue label.

ZnetDK for Mobile Tutorial - Search result

PART 4 - DELETING A CONTACT

The view - Adding a link to the input form to delete the contact

Firstly, an HTML anchor is inserted into the input form to delete the contact.
See below the 3 lines of HTML code (lines #10 to #12) added to the contactlist.php view:

TUTORIAL PART 4: contactlist.php, HTML link to remove the contact

<div id="contact-modal" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
        <header class="w3-container w3-theme-d5">
            <span class="close w3-button w3-xlarge w3-hover-theme w3-display-topright"><i class="fa fa-times-circle fa-lg"></i></span>
            <h4 class="title">Contact</h4>
        </header>
        <form class="w3-container w3-theme-light" data-zdk-load="contactctrl:detail"
             data-zdk-submit="contactctrl:store">
            <input type="hidden" name="id">
            <div class="w3-section w3-display-container">
                <a class="remove w3-text-red w3-display-right" href="#"><i class="fa fa-close"></i> Remove contact</a>
            </div>
            <div class="w3-section">
                <label class="zdk-required"><b>Name</b></label>
                <input class="w3-input w3-border w3-margin-bottom" type="text" name="name" required>
                <!-- Rest of the form definition... -->
            </div>
        </form>
    </div>
</div>
HTML5
ZnetDK for Mobile Tutorial - Link to remove a contact

This new Remove contact link should be hidden when the modal dialog is displayed to register a new contact and so only be visible when an existing contact is edited.
For that, the callback functions passed as parameters (named onAdd and onEdit) to the znetdkMobile.list.setModal() method are the perfect places where to show and hide the Remove contact link.
See below the changes made to the two callback functions (lines #5 and #9).

TUTORIAL PART 4: contactlist.php, show / hide removal HTML link

<script>
    var myContactList = znetdkMobile.list.make('#contactlist', false, true);
    myContactList.setModal('#contact-modal', true, function () { // NEW
        this.setTitle('New contact');
        this.element.find('a.remove').hide();
    }, function (formObject) { // EDIT
        var contactId = formObject.getInputValue('id');
        this.setTitle('Edit contact #' + contactId);
        this.element.find('a.remove').show();
    });
</script>
JS

Next, a jQuery events handler is coded to catch click events of the new Remove contact HTML anchor.
As shown below, the JavaScript code is directly inserted into the contactlist.php view, inside the HTML <script> tag.

TUTORIAL PART 4: contactlist.php, jQuery remove events handler

<script>
    var myContactList = znetdkMobile.list.make('#contactlist', false, true);
    myContactList.setModal('#contact-modal', true, function () { // NEW
        this.setTitle('New contact');
        this.element.find('a.remove').hide();
    }, function (formObject) { // EDIT
        var contactId = formObject.getInputValue('id');
        this.setTitle('Edit contact #' + contactId);
        this.element.find('a.remove').show();
    });
    // Click remove link events handler
    $('#contact-modal a.remove').on('click', function (event) {
        event.preventDefault();
        znetdkMobile.messages.ask('Confirmation', 'Remove this contact?', null, function (isYes) {
            if (isYes) { // OK to remove
                var myForm = znetdkMobile.form.make('#contact-modal form'),
                        contactId = myForm.getInputValue('id');
                znetdkMobile.ajax.request({
                    controller: 'contactctrl',
                    action: 'remove',
                    data: {id: contactId},
                    callback: function (response) {
                        if (response.success) { // Removal succeeded
                            // Modal dialog is closed
                            var myModal = znetdkMobile.modal.make('#contact-modal');
                            myModal.close();
                            // The list of contacts is refreshed
                            myContactList.refresh();
                            // The removed contact message is displayed
                            znetdkMobile.messages.showSnackbar(response.msg);
                        } else { // Removal failed
                            // Error message directly displayed in the form
                            myForm.showError(response.msg);
                        }
                    }
                });
            };
        });
    });
</script>
JS
ZnetDK for Mobile Tutorial - Ask for confirmation

When the HTML link is clicked, the user is asked for confirmation before deleting the contact, by calling the znetdkMobile.messages.ask() method.

If the user confirms the removal, then the remove action of the contactctrl controller is invoked via an AJAX call using the znetdkMobile.ajax.request() method.
The identifier of the contact to remove is read from the id hidden input field through the znetdkMobile.form.getInputValue() method.

Once the deletion succeeded, the modal dialog is closed (see znetdkMobile.modal.close()), the list of contacts is refreshed (see znetdkMobile.list.refresh()) and finally a snackbar message is displayed to notify the user (see znetdkMobile.messages.showSnackbar()).

Otherwise, if an error occured, the error message is directly displayed in the input form by calling the znetdkMobile.form.showError().

The controller - Deleting the contact in the database

In this last step, here is the code of the action_remove() method in the contactctrl.php script that is executed by the AJAX request from the view.

TUTORIAL PART 4: contactctrl.php, action for removing a contact

static protected function action_remove() {
    $request = new \Request();
    $dao = new \SimpleDAO('contacts');
    $contactsFound = $dao->getRowsForCondition('id = ?', $request->id);
    $response = new \Response();
    if (count($contactsFound) === 1) {
        $dao->remove();
        $response->setSuccessMessage(NULL, "Contact '{$contactsFound[0]['name']}' removed.");
    } else {
        $response->setFailedMessage(NULL, "Contact #{$request->id} does not exist!");
    }
    return $response;
}
PHP

First, the identifier of the contact to remove is read through a \Request() object.

Next, a \SimpleDAO object is instantiated and used to select in the contacts table the row matching the specified identifier (see \SimpleDAO::getRowsForCondition()).
If one row is found, the row is removed by a call to the \DAO::remove() method.

In case of error, the error message directly displayed in the input form is returned in JSON format through the \Response::setFailedMessage().

Going further

Downloading source code

The full source code presented in this tutorial can be downloaded as a zip archive named zdk4m-tuto-contacts.zip from the Download page.

If you have any question or comment about this tutorial, please post a message on the official ZnetDK Forum.

Reading more documentation

To learn more about formatting views with W3.CSS, I invite you to visit the W3.CSS Tutorial page.

For a full documentation of the ZnetDK Framework methods used in this tutorial, please visit the Documentation pages on this website.

If any documentation is missing, fill free to post a message on the official ZnetDK Forum.