New Color Schemes in Engelsystem

Engelsystem is a well-built MVC application. It seems to have everything an event manager could want. During the Week 2 of my Summer of Code, I worked on creating new color schemes/themes for the system. Engelsystem initially had 4 color schemes:

  1. Engelsystem cccamp15
    01

  2. Engelsystem 32C3

    02

  3. Engelsystem Dark

    03

  4. Engelsystem Light

    04

Color wields enormous sway over our attitudes and emotions. When our eyes take in a color, they communicate with a region of the brain known as the hypothalamus, which in turn sends a cascade of signals to the pituitary gland, on to the endocrine system, and then to the thyroid glands. The thyroid glands signal the release of hormones, which cause fluctuation in mood, emotion, and resulting behavior.

Research from QuickSprout indicates that 90% of all product assessments have to do with color. “Color,” writes Neil Patel, is “85% of the reason you purchased a specific product.” It’s a no-brainer fact of any website that color affects conversions. Big time.

So, the bottom line is: use the right colors, and you win.

Color schemes lets the user to set the system looks (i.e how the system will appear) which the user likes. During the week 2 of my Summer of Code, I worked on implementing 2 new color schemes for the system:

  1. Engelsystem color scheme-1

    05

  2. Engelsystem color scheme-2

    06

In the later weeks, other developers and I would be working on creating more themes and enhancing them. Anyone who would like to work in the project are welcome. Developers can feel free to take up any issues they would like to work on just like any other open source projects.

Development: https://github.com/fossasia/engelsystem                                           Issues/Bugs:https://github.com/fossasia/engelsystem/issues

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.

Screenshot from 2016-06-04 17:23:39

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.

Screenshot from 2016-06-04 17:44:25

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

Engelsystem: Enhancing security in registration form

My first impression when looking at the PHP application (Engelsystem) was that it is a well-built MVC app. It seems to have everything an event manager could want. But the security implemented in the registration form was not good.

Registration forms are a great way to follow up people’s interest in what you are offering on your website and with these tools you are able to make sure it is done right. Unfortunately, registration forms can be a large source of a sender acquiring bounced addresses and Spam Traps which could cause your business to spam a hosts mailbox without proper validation of addresses. This can reflect poorly in your SendGrid internal reputation as well as reflect poorly upon your business. Fortunately, there are many helpful techniques that can help a sender avoid many of the issue that can come up through their registration form.

A registration from should ask for complete information about the user to ensure that the user registering for the service is not fake.

Sometimes in the registration process, a person makes a mistake in entering their email such as [email protected] or person@@domain.com. By entering the email address twice and having a system in place that checks that the addresses match up, the person entering their email address has a much smaller chance of accidentally entering an invalid address.

A good technique in protecting your registration form from bots is placing a required Captcha in the form:

04

A Captcha is a test to ensure that form is filled out by a human being as opposed to a bot. The image is not replicable by a bot but easily replicated by a human being.

One common issue that arises with email registration forms is people registering false or fake addresses. To prevent this, the form can say that the service is not granted unless they confirm via email that they would like the service. This can be done with a Double Opt-In Email, confirming that their address exists. A double opt-in email not only helps ensure that there is an actual human being registering but also validates that the recipient did indeed sign up for your registration.
There are many great techniques available to protect your registration form but a balance must be created between user friendliness and security. Some forms have many required fields in registering as well as checks to make sure that the form is filled out correctly. Too many fields can drive away potential interest in your site or product. One way to balance out the registration process is to have other information about the person be collected on a landing page after the registration form is done. This serves to be both user friendly as well as allow you to collect valuable information.

In my first week, I enhanced the registration form, adding new fields and marking some fields as important.

05

Development: https://github.com/fossasia/engelsystem                                           Issues/Bugs:https://github.com/fossasia/engelsystem/issues

Deploy Engelsystem on Your Local Server

Today, I decided to set up Engelsystem on a clean local server as a task for Google Summer of Code. My first impression when looking at the PHP application was that it is a well-built MVC app. It seems to have everything an event manager could want. When I looked at the README, all the instructions were in German, but I decided to follow the gist of it anyways. I will be telling you how to setup the application step by step in English on Ubuntu 15.10  x64.

Instructions for Setup

Step 1: Setup LAMP and install GIT

The first you want to do is to setup LAMP stack (linux, apache, mysql, and php). Please follow the tutorial here on how to set up LAMP on Ubuntu 15.10 x64. If you are running this app on a different operating system, a quick Google search will provide you with installation steps.

Afterwards, you may install git by these commands:

apt-get update
apt-get install git -y

Step 2: Clone the Repository and Setup Database

First, clone the repository (the recursive parameter allows us to clone the submodules):

git clone --recursive https://github.com/engelsystem/engelsystem.git

Note the absolute path of the Engelsystem directory. For example, mine is /root.

Next, configure your MySQL Engelsystem database:

mysql -u root -p
[Enter your password]
CREATE DATABASE engelsystem;
use engelsystem;
source [path to engelsystem]/engelsystem/db/install.sql;
source [path to engelsystem]/engelsystem/db/update.sql;
exit;

Go to engelsystem/config and copy the default config into config.php. Modify the new file to match your MySQL credentials so that the system could access the database on the localserver.

Step 3: Test That App is Working

Move the app to your /var/www/html/ directory by typing mv ./engelsystem /var/www/html (alternatively create a symlink to your current directory). Go to your browser and type in [serverhost]/engelsystem/public to see the application in action.

01

To login, type use the following credentials:

Username: admin
Password: asdfasdf

Be sure to change your password for security reasons. You can generate a strong password here.

02

Step 4: Modify Apache to Use Server for Production

We must make sure to point our apache2 document root to the Engelsystem directory to prevent any user from accessing anything other than the public/ directory for security reasons. Do this by modifying the apache2 configuration file (assuming you are running this on a server hosting no other sites):

apt-get install nano -y
nano /etc/apache2/sites-available/000-default.conf

Change DocumentRoot /var/www/html into DocumentRoot /var/www/html/engelsystem/public. Restart apache by typing service apache2 restart. See the result of your page by going to your host in your browser.

03

If you made it this far without any issues, congratulations! You have successfully set up Engelsystem on your localserver and can use it to manage your event.