Implementing multiselect dropdown

  select2 is one of the nicest jQuery libraries available for web site development. It gives the web developer a lot of power in creating select boxes. In this post I would like to discuss how to implement a multiselect dropdown in PHP using select2 When we need to select multiple options from a list of many options. Multi checkbox will also work, but the UI of it will not be as neat as multiselect dropdown. Initial UI of shifts page In the above image. We can see all the rooms. It becomes tough for the user to select and go through each one of them and the UI also looks clumsy. After implementing multi select dropdown UI looks like the below image. After implementing multiselect dropdown UI looks likes this. Once we select rooms/Angel type/Occupancy. The list of options will be visible as a drop-down. Implementation Library used for implementing multiselect dropdown is select2 we can download the select2 Library from here Download CODE Cdn links for js and css files should be added <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> We need to call this function whenever we need to implement a multi select drop containing the $items in its list. // $items = items for multiselect dropdown function multiple_select($items, $selected, $name, $title = null){ $html_items = array(); if (isset($title)) $html .= '<h4>' . $title . '</h4>' . "\n"; // assigning the items to multiple $html .= '<select multiple id="selection_' . $name . '" class="selection ' . $name . '" style="width:200px">'; foreach ($items as $i) $html_items[] = '<option value="' . $i['id'] . '"' . '>' . $i['name'] . '</option>'; $html .= implode("\n", $html_items); $html .= '</select>'; $html .= '<input type="checkbox" id="checkboxall_' . $name . '" >All' . '<br>'; $html .= '<input type="checkbox" id="checkboxnone_' . $name . '" >None'; // javascript for multiselect $html .= '$("#' . "selection_" . $name . '").select2({ placeholder: "Select", }); }); '; return $html; } Englesystem Development: https://github.com/fossasia/engelsystem Issues/Bugs: Issues  

Continue ReadingImplementing multiselect dropdown

Deploying PHP and Mysql Apps on Heroku

This tutorial will help you deploying a PHP and Mysql app. Prerequisites a free Heroku account. PHP installed locally. Composer installed locally. Set up In this step you will install the Heroku Toolbelt. This provides you access to the Heroku Command Line Interface (CLI), which can be used for managing and scaling your applications and add-ons. To install the Toolbelt for ubuntu/Debian wget -O- https://toolbelt.heroku.com/install-ubuntu.sh | sh After installing Toolbelt you can use the heroku command from your command shell. $ heroku login Enter your Heroku credentials. Email: dz@example.com Password: ... Authenticating is required to allow both the heroku and git commands to operate. Prepare the app In this step, you will prepare a fossasia/engelsystem application that can be deployed. To clone the sample application so that you have a local version of the code that you can then deploy to Heroku, execute the following commands in your local command shell or terminal: $ git clone --recursive https://github.com/fossasia/engelsystem.git $ cd engelsystem/ If it is not a git repository you follow these steps $ cd engelsystem/ $ git init You now have a functioning git repository that contains a simple application now we need to add a composer.json file. Make sure you’ve installed Composer. The Heroku PHP Support will be applied to applications only when the application has a file named composer.json in the root directory. Even if an application has no Composer dependencies, it must include at least an empty ({}) composer.json in order to be recognized as a PHP application. When Heroku recognizes a PHP application, it will respond accordingly during a push: $ git push heroku master -----> PHP app detected … Define a Procfile A Procfile is a text file in the root directory of your application that defines process types and explicitly declares what command should be executed to start your app. Your Procfile will look something like this for engelsystem: web: vendor/bin/heroku-php-apache2 public/ Since our folder named public that contains your JavaScript, CSS, images and index.php file, your Procfile would define the Apache web server with that directory used as document root. Create the app In this step you will create the app to Heroku. Create an app on Heroku, which prepares Heroku to receive your source code: $ heroku create Creating sharp-rain-871... done, stack is cedar-14 http://sharp-rain-871.herokuapp.com/ | https://git.heroku.com/sharp-rain-871.git Git remote heroku added When you create an app, a git remote (called heroku) is also created and associated with your local git repository. Heroku generates a random name (in this case sharp-rain-871) for your app, or you can pass a parameter to specify your own app name. But Once you open http://sharp-rain-871.herokuapp.com/ we will not be able to view the site if there are database connections. We need to migrate the database using Cleardb ClearDB MySQL Migrating database Creating your ClearDB database To create your ClearDB database, simply type the following Heroku command: $ heroku addons:create cleardb:ignite -----> Adding cleardb to sharp-mountain-4005... done, v18 (free) This will automatically provision your new ClearDB database for…

Continue ReadingDeploying PHP and Mysql Apps on Heroku

Engelsytem – Sending messages to users or groups with PHP

In this post I will be discussing on how to send messages to other users and members of groups in PHP. Implementation We need to create a table for Message where we can store sender’s id and receiver id, text which are required while sending and receiving messages. MYSQL Syntax of Messages Table DROP TABLE IF EXISTS `Messages`; CREATE TABLE IF NOT EXISTS `Messages` (   `id` int(11) NOT NULL AUTO_INCREMENT,   `Datum` int(11) NOT NULL,   `SUID` int(11) NOT NULL DEFAULT '0',   `RUID` int(11) NOT NULL DEFAULT '0',   `isRead` char(1) NOT NULL DEFAULT 'N',   `Text` text NOT NULL,   PRIMARY KEY (`id`),   KEY `Datum` (`Datum`),   KEY `SUID` (`SUID`),   KEY `RUID` (`RUID`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Fuers interen Communikationssystem' AUTO_INCREMENT=1 ; After initializing the table. we need to create a Page for sending and receiving messages which looks like this       $messages_table_entry = array(       'new' => $message['isRead'] == 'N' ? '<span class="glyphicon glyphicon-envelope"></span>' : '',           'timestamp' => date("Y-m-d H:i", $message['Datum']),           'from' => User_Nick_render($sender_user_source),           'to' => User_Nick_render($receiver_user_source),           'text' => str_replace("\n", '<br />', $message['Text'])       ); The message table looks something like this. we need to store the sender and receiver id and update the message table .The function for sending messages looks something like this. function Message_send($id, $text) {   global $user;   $text = preg_replace("/([^\p{L}\p{P}\p{Z}\p{N}\n]{1,})/ui", '', strip_tags($text));   $to = preg_replace("/([^0-9]{1,})/ui", '', strip_tags($id));   if (($text != "" && is_numeric($to)) && (sql_num_query("SELECT * FROM `User` WHERE `UID`='" . sql_escape($to) . "' AND NOT `UID`='" . sql_escape($user['UID']) . "' LIMIT 1") > 0)) {     sql_query("INSERT INTO `Messages` SET `Datum`='" . sql_escape(time()) . "', `SUID`='" . sql_escape($user['UID']) . "', `RUID`='" . sql_escape($to) . "', `Text`='" . sql_escape($text) . "'");     return true;   } else {     return false;   } } this function is to send message $id is the id of receiver and $text is the text message. To delete messages          $message = sql_select("SELECT * FROM `Messages` WHERE `id`='" . sql_escape($id) . "' LIMIT 1");  if (count($message) > 0 && $message[0]['SUID'] == $user['UID']) {           sql_query("DELETE FROM `Messages` WHERE `id`='" . sql_escape($id) . "' LIMIT 1");           redirect(page_link_to("user_messages"));         } else           return error(_("No Message found."), true); Development: https://github.com/fossasia/engelsystem Issues/Bugs:Issues

Continue ReadingEngelsytem – Sending messages to users or groups with PHP

Adding Notifications, Volunteer Shifts and DB Export in Engelsystem

Admin can change the display message in registration form The present system doesn't allow to change the display message in register form. When the system is used for different events it would be useful if the admin is able to change the display message in registration form . I have added feature were admin can change the display message By changing the message in the message box admin can change the display message.Now the message looks like this. Implementation of changing display message. Adding display_msg field to User Table so that the display_msg can be accessed through the database any where through the code and can be changed easily ALTER TABLE `User` ADD `display_msg` varchar(255) DEFAULT "By completing this form you're registering as a Chaos-Angel. This script will create you an account in the angel task scheduler."; Next step is to update the field whenever it is changed by admin sql_query("UPDATE `User` SET `display_msg`='" . sql_escape($display_message) . "' WHERE `UID`='" . sql_escape($user['UID']) . "'"); Copy/ Duplicate function for creating new shifts from existing shifts The present system doesn't allow admin to edit an existing shift and create a new shift from the existing data of already created shifts . I have created a copy shift option where admin can edit the shift and create a new shift In this page admin can create new shift or update the existing shift . Admin can change the date , time , no of angels etc as admin used to create shifts. Implementation of copy shifts function Once the admin selects create new shifts button , we need to use the same data so we need to store the values in variables. once admin selects the option we need to do all the error handling and create new shifts . if (isset($_REQUEST['shifttype_id'])) { $shifttype = ShiftType($_REQUEST['shifttype_id']); if ($shifttype === false) engelsystem_error('Unable to load shift type.'); if ($shifttype == null) { $ok = false; error(_('Please select a shift type.')); } else $shifttype_id = $_REQUEST['shifttype_id']; } else { $ok = false; error(_('Please select a shift type.')); } $title = strip_request_item('title'); // check for errors if (isset($_REQUEST['rid']) && preg_match("/^[0-9]+$/", $_REQUEST['rid']) && isset($room_array[$_REQUEST['rid']])) $rid = $_REQUEST['rid']; else { $ok = false; $rid = $rooms[0]['RID']; error(_('Please select a location.')); } if (isset($_REQUEST['start']) && $tmp = DateTime::createFromFormat("Y-m-d", trim($_REQUEST['start']))) $start = $tmp->getTimestamp(); else { $ok = false; error(_('Please select a start date.')); } if (isset($_REQUEST['end']) && $tmp = DateTime::createFromFormat("Y-m-d", trim($_REQUEST['end']))) $end = $tmp->getTimestamp(); else { $ok = false; error(_('Please select an end date.')); } if (isset($_REQUEST['start_time']) && $tmp = DateTime::createFromFormat("H:i", trim($_REQUEST['start_time']))) $start_time = $tmp->getTimestamp(); else { $ok = false; error(_('Please select an start time.')); } if (isset($_REQUEST['end_time']) && $tmp = DateTime::createFromFormat("H:i", trim($_REQUEST['end_time']))) $end_time = $tmp->getTimestamp(); else { $ok = false; error(_('Please select an end time.')); } if (strtotime($_REQUEST['start']) > strtotime($_REQUEST['end'])) { $ok = false; error(_('The shifts end has to be after its start.')); } if (strtotime($_REQUEST['start']) == strtotime($_REQUEST['end'])) { if (strtotime($_REQUEST['start_time']) > strtotime($_REQUEST['end_time'])) { $ok = false; error(_('The shifts end time has to be after its start time.')); } }…

Continue ReadingAdding Notifications, Volunteer Shifts and DB Export in Engelsystem

Engelsystem – Implementing Localization

This post is on how to make your website available in different languages.The main reason of localization is that it can be used by different people knowing different languages across the world and help them to understand the system better . The tools used in implementing localization are poedit where we create the .po files . Steps to download poedit and Run it. sudo apt-get install poedit On ubuntu/linux this can be used On Mac/Windows The executable can be downloaded at https://poedit.net/download Steps to run poedit in Linux/Windows/Mac choose File → New Catalog.Enter the details in Translation properties like your email . Source code charset should be selected as UTF-8.Now the source path should be selected as (.) dot to tell Poedit to search for PHP files in the same folder. In the source keywords there are three options '_' , 'gettext' and 'gettext_noop'.Make sure all necessary functions are added and press OK. Now we can see list of strings and their translated strings comes like this.we need to install the necessary dictionary for this. If we save it we get a .po and .mo files if it passing all the validation.which can be used to implement localization in the project. How to Use .po and .mo files In our engelsystem.we need to add the list of languages we would like to implement in the file internationalization_helper.php $locales = array( 'de_DE.UTF-8' => "Deutsch", 'hi_IN.UTF-8' => "Hindi", 'sp_EU.UTF-8' => "Spanish", 'en_US.UTF-8' => "English" ); these are list of languages currently implemented. function make_langselect() { global $locales; $URL = $_SERVER["REQUEST_URI"] . (strpos($_SERVER["REQUEST_URI"], "?") > 0 ? '&' : '?') . "set_locale="; $items = array(); foreach ($locales as $locale => $name) $items[] = toolbar_item_link(htmlspecialchars($URL) . $locale, '', '<img src="pic/flag/' . $locale . '.png" alt="' . $name . '" title="' . $name . '"> ' . $name); return $items; } This function renders a language selection. Development: https://github.com/fossasia/engelsystem Issues/Bugs:Issues

Continue ReadingEngelsystem – Implementing Localization