Task Description

In this challenge, you'll create a simple USSD (Unstructured Supplementary Service Data) application interface using HTML, CSS, JavaScript, and AJAX to interact with a PHP server endpoint. USSD applications are used in mobile networks for services like balance checks, mobile banking, and more. This task will help you understand how USSD interactions can be simulated in a web environment and dynamically handled through server-side logic. Using AJAX, you will create a sample USSD app that communicates with a PHP server to simulate a simple banking menu system, allowing real-time data exchange and interaction based on user inputs.

Example

The USSD app will simulate the following menu structure:

            1. Check Balance
            2. Transfer Money
            3. Buy Airtime
            4. Exit
            

Each menu option will lead to further actions or submenus. For simplicity, we will only implement the first two options with basic interactions using AJAX to communicate with the PHP server.

Implementation Steps

1. Setup HTML Structure: Create an HTML file with an input field for user interaction and a display area for showing the menu.
2. Create CSS for Basic Styling: Add some basic styling to make the app look clean and user-friendly.
3. Implement JavaScript Logic: Write JavaScript code to handle user input, navigate through the menu options, and make AJAX calls to the PHP server.
4. Setup PHP Server Endpoint: Create a PHP script (ussd_api.php) that will process the incoming requests from the AJAX calls and return the appropriate responses based on the selected menu options.

                       
   <?php
   header('Content-Type: application/json');
   
   $input = isset($_POST['input']) ? $_POST['input'] : '';
   $currentMenu = isset($_POST['currentMenu']) ? $_POST['currentMenu'] : 'main';
   
   $response = array('output' => '', 'currentMenu' => 'main');
   
   if ($currentMenu === 'main') {
       switch ($input) {
           case '1':
               $response['output'] = '<p>Your balance is KES 1,000/=</p><p>0. Main Menu</p>';
               break;
           case '2':
               $response['output'] = '<p>Enter amount to transfer:</p>';
               $response['currentMenu'] = 'transfer';
               break;
           case '3':
               $response['output'] = '<p>Enter amount to buy airtime:</p>';
               $response['currentMenu'] = 'airtime';
               break;
           case '4':
               $response['output'] = '<p>Thank you for using Bora Wallet. Goodbye!</p>';
               $response['currentMenu'] = 'exit';
               break;
           default:
               $response['output'] = '<p>Invalid option. Try again.</p><p>1. Check Balance</p><p>2. Transfer Money</p><p>3. Buy Airtime</p><p>4. Exit</p>';
       }
   } elseif ($currentMenu === 'transfer') {
       $response['output'] = '<p>Transfer amount KES 
       ' . htmlspecialchars($input) . '/= </p><p>0. Main Menu</p><p>4. Exit</p>';
   } elseif ($currentMenu === 'airtime') {
       $response['output'] = '<p>Buy airtime of amount KES 
       ' . htmlspecialchars($input) . '/= </p><p>0. Main Menu</p><p>4. Exit</p>';
   }
   
   echo json_encode($response);
   
   
                       
                   
                   

Example Snapshots

This is an example of what the app should display. Feel free to get creative with it.

Example Solution:

Demo | Download

Support & Submission

Create a zip of your attempt including snapshots of your menus then forward it to:

or Email: playground@ilebora.com

Feel free to interact with me for support:

HAPPY CODING!!!

Follow @VisionaryDomie