LexMihaylov - Blog

Generating hash using native Crypto API (Example)

2016-06-30T14:41:00.001+03:00

You can find more information about the crypto api here: https://developer.mozilla.org/en-US/docs/Web/API/Window/crypto

function arrayBufferToStringAsync( /*ArrayBuffer*/ buffer) {
    var reader = new FileReader();
    return readAsync(reader, 'Text', new Blob([buffer])).then(function() {
        return new Promise(function(resolve, reject) {
            resolve(reader.result);
        });
    });
};

function arrayBufferToHexAsync( /*ArrayBuffer*/ buffer) {
    return new Promise(function(success, error) {
        arrayBufferToStringAsync(buffer).then(function(string) {
            var hex = '';
            for (var i = 0; i < string.length; i++) {
                var char = ('000' + string.charCodeAt(i).toString(16)).slice(-4);
                hex += char;
            }

            success(hex);
        }).catch(error);
    });
};

function readAsync( /* FileReader */ reader, as, data, encoding) {
    return new Promise(function(resolve, reject) {
        reader.onloadend = resolve;
        reader.onerror = reject;
        reader['readAs' + as](data, encoding);
    });
};

var blob = new Blob(['Hello World']);
var reader = new FileReader();

readAsync(reader, 'ArrayBuffer', blob).then(function() {
    var result = reader.result;
    return crypto.subtle.digest("SHA-1", result);
}).then(function(hash) {
    return arrayBufferToHexAsync(hash);
}).then(function(hexHash) {
    console.log(hexHash);
});

Is NodeJS the best solution for your project

2014-02-16T22:57:00.001+02:00

Ever since all the commotion around NodeJS started, I was wondering, if javascript is really good for backend development. So I started looking up various subjects regarding NodeJS, like how to configure a production server, benchmarks and others. After doing some reading I was able to form an opinion.

1. JavaScript is event driven.

Although it would be really good to have an asynchronous and event driven application in the backend, the web is stateless. Most web servers use technologies like CGI and Fast CGI, which enable them to execute scripts. While you will be able to configure node to run as a cgi script, you will also be defeating the purpose of using JavaScript in the backend. So to be able to run a node application properly, you will have to setup a node http server that will serve all the requests.

2. Node is single threaded

This part is really interesting. Node is single threaded but asynchronous, and the thing is that if your node application does not do a lot of CPU intensive operations, it can actually handle more requests than the Apache server. One downside is that you would almost every time have to use a balancer to distribute the load across several node servers.

3. Building realtime apps

Node is really good for developing applications that transfer realtime data to the users. Realtime applications are easily monitored by using some third party modules like nodetime, node-uptime, log.io and many others.

4. Using only one language

NodeJS uses the same engine as google chrome, the V8, and when you are building a web app you will only need to use one language - JavaScript.

Conclusion

Although you could build an event driver realtime app by using Ruby or Python, it would've taken you a lot of time and effort to do so, instead it is way better to use NodeJS, which has event driven asynchronous structure and gives you most of the functionality that you need. But if you are building a large scale web application that needs to handle a lot of concurrent connections, maybe it's better to stick with a threaded system. Anyway it all depends on the technical requirements of the application that you are building. If you want a more detailed explanation of how NodeJS works, read this great article by Tomislav Capan: Why The Hell Would I Use Node.js? A Case-by-Case Introduction

CSS class generator using SASS

2014-02-13T18:32:00.008+02:00

Sass give us a lot of flexibility when we are building big web apps. One of my favorite function is to be able to create css classes by using a loop:

@mixin zoom($scale) {
    $scale: $scale / 100;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    -o-transform-origin: 50% 0;
    transform-origin: 50% 0;
    
    -webkit-transform: scale($scale);
    -moz-transform: scale($scale);
    -ms-transform: scale($scale);
    -o-transform: scale($scale);
    transform: scale($scale);
}

$zoomFactor: 100;
@while $zoomFactor >= 20 {
    .zoom-#{$zoomFactor} {
        @include zoom($zoomFactor);
    }
    $zoomFactor: $zoomFactor - 10;
}

The resulting css should look something like this:

.zoom-100 {
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1); }

.zoom-90 {
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9); }

.zoom-80 {
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8); }

.zoom-70 {
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -o-transform: scale(0.7);
  transform: scale(0.7); }

.zoom-60 {
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -o-transform: scale(0.6);
  transform: scale(0.6); }

.zoom-50 {
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5); }

.zoom-40 {
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: scale(0.4);
  -moz-transform: scale(0.4);
  -ms-transform: scale(0.4);
  -o-transform: scale(0.4);
  transform: scale(0.4); }

.zoom-30 {
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  -ms-transform: scale(0.3);
  -o-transform: scale(0.3);
  transform: scale(0.3); }

.zoom-20 {
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: scale(0.2);
  -moz-transform: scale(0.2);
  -ms-transform: scale(0.2);
  -o-transform: scale(0.2);
  transform: scale(0.2); }

Create a jquery extension for handling dom insert events

2014-02-13T16:23:00.003+02:00

Very often when I'm building a web application, I need to dynamically create some objects and append them to the dom. Well thats ok, but if there are some additional calculations that you need to do after inserting your objects, then things are getting a bit messy. For example you need to position your objects according to a relative parent object's dimensions or initialize a plugin that requires your object to appended to the dom. Well there is always a way of getting around issues like that, but I wanted to keep thing simple and to do that I needed some king of "onDomInsert" event.

Solutions

1. Mutation Observers

One way of getting around this was to detect dom changes using "Mutation Observers". This approach is pretty great and there is a great post on how to use them at html5rocks.com, but the problem is that they aren't that widely supported (http://caniuse.com/mutationobserver).

2. Detecting dom insertions using css animation.

In my opinion this is a pretty great hack, but still a hack, and because it uses css3 animations, you limit your application usage to only modern browsers. If you want you can read more about that approach here: http://davidwalsh.name/detect-node-insertion

3. Creating a dom insertion event using jquery.

After some thinking, I thought that it wouldn't be so bad to create a jquery extension, that will override some of the dom manipulation methods of jquery with a event trigger. So here it is.

Dom Insert jQuery Extension

The first thing i had to do was to modify some methods to trigger a "beforeDomInsert" and "domInsert" events. After some testing I was able to find that some methods are used in others and there was no point in overriding all of them. For the first part I saved the old methods in a temporary object:

    var parent_methods = {
        // inset inside methods
        /*
         * append
         * appendTo
         * html
         */
        append: $.fn.append,
        /*
         * prepend
         * prependTo
         */
        prepend: $.fn.prepend,
        // insert outside methods
        /*
         * after
         * insertAfter
         */
        after: $.fn.after,
        /*
         * before
         * insertBefore
         */
        before: $.fn.before
    };

Then I created two function - one for before dom insert event and one for dom insert event

     /**
     * Triggers an event if item is a jquery object
     * @param {type} item
     * @return {undefined}
     */
    var on_after_insert = function(item) {
        if (item.triggerHandler) {
            if(item.closest('body').length > 0) {
                item.triggerHandler('domInsert');
                item.find('*').each(function() {
                    $(this).triggerHandler('domInsert');
                });
            }
        }
    };
    
    /**
     * Triggers an event before the element has been inserted
     * @param {type} item
     * @returns {undefined}
     */
    var on_before_insert = function(item) {
        if(item.triggerHandler) {
            if(item.closest('body').length === 0) {
                item.triggerHandler('beforeDomInsert');
                item.find('*').each(function() {
                    $(this).triggerHandler('beforeDomInsert');
                });
            }
        }
    };

Note that here I'm using the 'triggerHandler', because 'trigger' will cause the event to bubble up and we don't want that, we just need the event handler to be executed on the specific element and sub elements. To make the event bubble down trough the element's structure, we use item.find('*') and trigger the event on all child elements.

Now all we need to do is override the existing jquery methods with our own implementation.

    /**
     * modifys a dom insertion method
     * @param {type} method
     * @return {unresolved}
     */
    var dom_events_modifyer = function(method) {
        return function() {
            var args = Array.prototype.splice.call(arguments,0),
                result = undefined,
                i = 0;
        
            for(i = 0; i < args.length; i++) {
                on_before_insert(args[i]);
            }
            
            result = parent_methods[method].apply(this, args);
            
            for(i = 0; i < args.length; i++) {
                on_after_insert(args[i]);
            }

            return result;
        };
    };
    
    $.fn.append = dom_events_modifyer('append');
    $.fn.prepend = dom_events_modifyer('prepend');
    $.fn.after = dom_events_modifyer('after');
    $.fn.before = dom_events_modifyer('before');

And we're done. Here is the complete jquery extension code:

/** 
 * Adds a domInsert event to dom insertion methods 
 */

(function($) {
    
    var parent_methods = {
        // inset inside methods
        /*
         * append
         * appendTo
         * html
         */
        append: $.fn.append,
        /*
         * prepend
         * prependTo
         */
        prepend: $.fn.prepend,
        // insert outside methods
        /*
         * after
         * insertAfter
         */
        after: $.fn.after,
        /*
         * before
         * insertBefore
         */
        before: $.fn.before
    };
    
    /**
     * Triggers an event if item is a jquery object
     * @param {type} item
     * @return {undefined}
     */
    var on_after_insert = function(item) {
        if (item.triggerHandler) {
            if(item.closest('body').length > 0) {
                item.triggerHandler('domInsert');
                item.find('*').each(function() {
                    $(this).triggerHandler('domInsert');
                });
            }
        }
    };
    
    /**
     * Triggers an event before the element has been inserted
     * @param {type} item
     * @returns {undefined}
     */
    var on_before_insert = function(item) {
        if(item.triggerHandler) {
            if(item.closest('body').length === 0) {
                item.triggerHandler('beforeDomInsert');
                item.find('*').each(function() {
                    $(this).triggerHandler('beforeDomInsert');
                });
            }
        }
    };
    
    /**
     * modifys a dom insertion method
     * @param {type} method
     * @return {unresolved}
     */
    var dom_events_modifyer = function(method) {
        return function() {
            var args = Array.prototype.splice.call(arguments,0),
                result = undefined,
                i = 0;
        
            for(i = 0; i < args.length; i++) {
                on_before_insert(args[i]);
            }
            
            result = parent_methods[method].apply(this, args);
            
            for(i = 0; i < args.length; i++) {
                on_after_insert(args[i]);
            }

            return result;
        };
    };
    
    $.fn.append = dom_events_modifyer('append');
    $.fn.prepend = dom_events_modifyer('prepend');
    $.fn.after = dom_events_modifyer('after');
    $.fn.before = dom_events_modifyer('before');
    
})($);

Fixing filename encoding using a PHP console script

2013-03-29T09:49:00.000+02:00

Recently i had received an archive with files required for a project. It was awful. The filenames were in ciryllic and on top of that the encoding was broken. So what to do when something like this happens? I wrote a little php script that walks all directories and files and renames the files with the appropriate encoding:

<?php
const FromEncoding = 'utf-8';
const ToEncoding = 'cp1251';


function convertEncoding($filename) {
    return mb_convert_encoding($filename, ToEncoding, FromEncoding);
}

function traverse($dir) {
    $handler = opendir($dir);
 
    if(!$handler) {
        echo ("\n* * *\tError: Cannot open directory ($dir)\n");
        return 0;
    }
 
    echo "* * *\tENTERING: " . $dir . PHP_EOL;
 
    while($filename = readdir($handler)) {
        if($filename != '.' && $filename != '..') {
            echo $dir . '/' . $filename;
         
            $newName = convertEncoding($filename);
         
            rename($dir . '/' . $filename, $dir . '/' . $newName);
         
            echo "\n\t=>\t" . $newName . PHP_EOL;
         
            if(is_dir($dir . '/' . $newName)) {
                traverse($dir . '/' . $newName);
            }
        }
    }
}

if(is_dir($argv[1])) {
    chdir($argv[1]);
    traverse(getcwd());
} else {
    die("\n* * *\tError: Cannot open directory ($argv[1])\n");
}

echo "\n* * * DONE * * *\n";
?>

After that just open a terminal window and write:

php mb_conv.php /PATH

After that i found a really good tool that does the same thing, it's called convmv.
If you are using Ubuntu you can open a terminal window and type:

sudo apt-get install convmv
convmv --notest -r -f cp1251 -t utf8 DIR

Hope that helps someone out there :).

Startup Weekend Varna: Как ще протече събитието

2013-03-15T23:51:00.001+02:00

Startup Weekend Varna започва с регистрирането на участниците в Петък 18.00 и на техните идеи. След това на всеки участник се дава възможност да презентира идеята си пред другите в рамките на 60 секунди (Elevator pitch / Power pitch). Участниците гласуват за най-добрите идеи и се присъединяват към определна идея, която им е допаднала. Сформираните екипи често включват маркетолог, програмист, дизайнер и бизнес анализатор или предприемач.

Дните Събота и Неделя се използват за разработването на продукт или крайното оформяне на бизнес идеята в бизнес план с ясни параметри за изпълнение. Като през тези два дни на разположение на екипите са Бизнес ментори и Технически помощници. Те помагат да се изясни пазара на различните идеи, как да се достигне до клиента, точни бизнес модели и монетаризационен модел.

В Неделя 18.00 всички екипи представят готовите си продукти или услугите пред всички частници и журито, което награждава най-добрите. Често този етап от събитието присъстват бизнес ангели и инвеститори желаещи да подпомогнат стартиращите идейни бизнеси.

Това събитие ще отбележи Варна на световната карта на предприемачестовто за млади хора и ще сформира кръг от млади, позитивни и предприемчиви хора които целят да използват знанието от университета, високите технологии и инновации за да стартират бизнес.

UI Creation using QtQuick

2013-03-15T10:43:00.000+02:00

Justin Noel, Senior Consulting Engineer at ICS gives a detailed overview of Qt Quick, and how to create killer user interfaces using a combination of Qt Quick, C++, and PhotoShop.

Part 1:

Part 2:

JQuery UI resizable layout

2013-03-15T10:35:00.001+02:00

I've created a plugin for jquery ui that enables developers to create layouts that can be resized by the users, and brings a more functional frontend design.

You will need git to download it. The repository url is https://github.com/lexmihaylov/jquery.ui.layout

How to use:

Creating a vertical resizable layout:


 

  Some Content Here
  Some Content Here

Creating a horizontal layout:


 

  Some content
  Some content

Creating a mixture of horizontal and vertical layouts:


 

  Your content
  
    
      Your Content
      Your content

Options:

type - determines the type of the layout (horizontal or vertical);

resizable - if true than the layout would be resizable be the users

helper - enables or disables the use of helpers when resizing

panes - an array of panes; the pane should be set as an array: the first element of the array should be the id of the element and the second is optional and it should be an object that holds the minimum and maximum width or height used when resizing.

You can view a live demo here.

Object Oriented JavaScript Using JQuery

2013-03-15T10:15:00.000+02:00

Javascript becomes more and more popular these days, and what best way to write reusable code if not writing it the OO style. JS is not your tipical programming language, the classes in js are not actualy classes, but funcions. Every function has a prototype object that contains methods and properties, we can use this object to write javascript classes.

1. Creating a JS Class:

To create a js class you need to create a function and after that you can use the this keyword to access the object's properties and methods.

2. Inheritance

Basicaly to inherit a class you need to extend the parent's class prototype object. To do that we can use jQuery.extend() function.

To call a parent method in the context of the child class you can use the call function:

3. How to extend the jQuery Class

After creating the object in the constructor we have to set the object's constructor to jquery's constructor, because jquery is using it internaly.

Using compression in REST communication between applications

2013-03-15T09:59:00.001+02:00

When you are working on a large project, there are alot of situations that the project is composed of more than one application. The problem here is how to solder everything together. There are alot of ways you can handle communication between applications, for example you can use XML, JSON, HTTP Requests, etc. If you are using PHP for building your project maybe the easiest way of handling communication is by using JSON.

There are two buildin function that you need to look at before starting:

- json_encode(): http://php.net/manual/en/function.json-encode.php

- json_decode(): http://php.net/manual/en/function.json-decode.php

We will use these two functions to serializing and deserializing the data that we need to send between applications.

So what we need now is methods for encoding data and sending the encoded data to a certain url:

Now we have two static methods:

- send - sends the json string via http post request

- encodeParams - convert an object or array to json string

Because we don't need to wait for the request to finish we add:

curl_setopt($curl, CURLOPT_FRESH_CONNECT, true);

curl_setopt($curl, CURLOPT_TIMEOUT, 1);

This two lines of code mean that the connection will be broken after one second.

If there is alot of data that needs to be tranfered then we will need to use somekind of data compression. To do that in php we can use the zlip library.

- gzcompress() - http://php.net/manual/en/function.gzcompress.php

- gzuncompress() - http://php.net/manual/en/function.gzuncompress.php

We update the encodeParams method to handle zlip compression.

1. We convert the object to a json string

2. We compress that string using gzcompression

3. Because the compressed string has many bytes that connot be send via a post request, we need to encoded. We use base64 firs because we wont gain much if url encode it first.

4. We encode the string with urlencode, because we need to send it via a http post request.

To recieve compressed data from another application we need to decode the post prameter:

Here is the complete class:

Securing your data using PHP and OpenSSL

2012-11-06T13:54:00.000+02:00

I saw that there wasn’t alot of information on the internet about how to encrypt data in your web application using php an openssl, so here it is.
First of all you need to understand how ssl connections works. If you already know that just skip this part:

The secured socket layer or ssl has many applications, but mostly it is used for creating an encrypted data tunnel between two remote machines.
1. The client application sends a handshake request to the remote server;
2. The server sends the ssl certificate information along with his public key;
3. The client application checks the hostname, expiration date, and authority registration of the certificate, and if some of these parameters is not met then a warning message is displayed to the user.
4. After receiving the public key form the server the client application generates an envelope key that is used to encrypt the data transfer between the two machines. This key is then encrypted with the server’s public key and send back to the server.
5. The envelope key can be decrypted only with the private key that server has.
6. After both machines have the envelope the data transfer can begin.

Although we won’t use any transfer protocol, we will do something very similar.
Lets start with openssl. OpenSSL is a command line tool that can help you generate your public and private keys needed for this example.

1. For generating public-private key pair, open a terminal and run:

# openssl genrsa -des3 -out certificate.pem 1024

You will be prompted for a passphrase. This passphrase will be used for decrypting the private key and it’s use is recommended.
After executing the command you should have a file named certificate.pem that should look like this:

—–BEGIN RSA PRIVATE KEY—–
Proc-Type: 4,ENCRYPTED
DEK-Info: DES-EDE3-CBC,3D2A826DAA45A4FD

oejviR8IoXgLnS3ZEC26vBt+IIlrRpvCn5R/JGm49UCEr5ItLdpWqQxib40IPgYu
f9nusVYKi2WLtCmtGKI7UcyZvZYOfksTbC6vzemorwcnkgBkWoLn1W/qyLaW2t6S
H4w+woz4hmak/VJJFBx2KGn9jWdC3rx4GdlNWJDLuzpa4ObUPgqClhLoBS2nXwWe
mjdrs7jNcz7CPXYTGhS5puAYzS6d8/0oJVBuZTtmXvJNU2TMwKcpmYMxJZ4ZBbR/
dfZyTq671i36ra3j7d7uSVRDlTFbd8708OalhRHxOuVHJKnd5H9N0AU8baXV6D0X
5EPMK8INiLZxtnZdc0zO7b+zOJ1f7ELL7g7Cwj8TzBJ8nT0yJCGnJWkp0ZpUGsOT
K9zeSApQgUWGj8ejaPOIkoqToNrSkiv/8/LzAkep37SBYpMdQf6sAuNDRYed+ktM
vsZYyOkNXXzxEUkPZsfzntGTDYypMJKX7FI4z8ovL5L+OPjrHIZVuNNrmgnOKs1E
KHCwQ0XQlPlK3/BC1TxB13PaSlf+/UGgzuQzl7gf6f48UMlOse0lhVzVj5U7zKhz
/ZAWg9oz0MjTXTccyQkuMMcrvOx9qN1o3YEuafcmDFK0CVkMvle53GvRzk+sVx76
UMO4/h6MrUo+WEslHbHgwOYrGCqw7xYRUhjUVY6/mthOeeJHg9uyMYyqWiyb0AE3
3ZSHVKkB9qjWCW8B74aW93XsV9oMungfLBBB8BC4c0NPBZVSSvZbmDWQOD0/qP6T
qYiffbW9kDwrjX2CnWccFk4o90XiAcP40GeLzna0xNRgsF+DL9o8kg==
—–END RSA PRIVATE KEY—–

2. Now we need to export the public key that will be used to encrypt our data. Run the following command:

# openssl rsa -in certificate.pem -pubout > public.key

You will be prompted for the passphrase that you’ve entered earlier.
Now we should have a file named public.key that looks like this:

—–BEGIN PUBLIC KEY—–
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC0VfvEmljGvRQDmEPpy2UgsWsJ
d5kJJMmUENbeKquR8RDeZTKdLfO4Ts4cWucKOfJFREWgub1pf0ncZeyjZlkbPKEZ
wFT3ECrercmlK7QYZkh1R7AzPUxrj4foSP6EsvanxzFIQi2SkgNKLRyoRRfuMNaR
2/8P7Z3aKmnqhvse7wIDAQAB
—–END PUBLIC KEY—–

We can go ahead now and move the certificate.pem to a safe place where the apache user can’t access it.

Using openssl and php to encrypt and decrypt data.

There are three functions used in this example:
- openssl_seal() -> for encrypting data
- openssl_open() -> for decrypting data
- openssl_get_privatekey() -> for loading the private key

Encrypting data.

For the data encryption we need only the public key that we’ve created. Note that data encrypted with the public key can only be decrypted with it’s private key.

Code:
<?php
$publicKeyPath = ‘/path/public.key’;
$data = ‘I should be encrypted’;
$publicKey = array(file_get_contents($publicKeyPath));

$encData = null;
$envKey = null;
openssl_seal($data, $encData, $envKey, $publicKey);

// as we use only one public key to encrypt data we will receive only one envelope key
$envKey = current($envKey);

var_dump($encData/*encrypted data*/, $envKey/*envelope key*/);
?>

The data from this example can be then saved to the application’s database for future usage.

Decrypting data:

Code:
<?php
$privateKeyPath = ‘/path/certificate.pem’;
$passPhrase = ‘passphrese for decrypting the private key’;

$encData = ‘the encrypted data string’;
$envKey = ‘envelope key used for encryption’;

$privateKey = openssl_get_privatekey(file_get_contents($privateKeyPath), $passPhrase);

$data = null;
openssl_open($encData, $data, $envKey, $privateKey);

var_dump($data);
?>

There are numerous ways of decrypting your data depending on the sensitivity level of the information. You can import the private key from a remote machine, use it in another system that will need the ability of reading this data or you can implement it on the same machine and application, wich is not recommended, beacause if an attacker has gained access to your system he can easily load your private key and access the information.

Source: http://team.158ltd.com/2012/11/06/securing-your-data-using-php-and-openssl/