Burned out mainboard, had to have fun with jQuery + PHP!

Low level blog with jQuery? Am I kidding? Unfortunately no 🙂  This one will not be that much low level due to bad luck. As a matter of fact, I was planning to write some sniffer for KdSendPacket / KdReceivePacket and it was probably going to be some POC related to !chkimg interference but all the plans ended in smoke after hearing  that my mainboard was burned out on Wednesday morning :):)

From a system programmer’s point of view, It’s quite tough to get yourself up and running with a fresh install of Windows. It was the same for me  but , developer is the one who develops even in the worst scenario coz I believe it’s a way of thinking, not a job only… So, here is some code I have developed for one of my friends : PHP Translation Engine.

First of all, why do we need a translation engine?

If you are heading a big project and need to support lots of languages believe it or not, translation suddenly becomes a big problem. Biggest problem generally faced is translating some word without knowing the context word is used, which results in gibberish words 🙂 People generally use CSV files but I do not like them which is why I started to write something new for one of my friends.

Translation Module with jQuery + PHP 

1

You see the admin panel in the screenshot above. Red dashed borders shows that the text inside it is Translatable. But how? Actually it’s all jQuery… Whenever you want to add something translatable, here are the steps you need to perform :

1. Open up your HTML, include translator.js

2. Place some div inside the HTML with the following syntax :

<div id=”<?=$keyword?>” class=”Translatable”><?=$value?></div>

3. Call PrepareForTranslation whenever you are ready!

That’s it! It’s that much simple 🙂 But how does it work?

First of all, we need to have some database layout to make it work. Simplest form is as follows :

2

DB with 4 columns is enough for us. We need to enter some keywords into our database, with the appropriate values in one of 3 languages (en, ru, tr).

3

Alright, now you know what is keyword and what is value. What about class Translatable?  It’s just a marker for translatable elements which will be used by jQuery to draw a read dashed  border around them and make them clickable (translatable). Following is the code I used for marking Translatable elements :

4

Why mouseenter / mouseleave? Because, I wanted to support clickable elements with the others.

Whenever document is ready, function PrepareForTranslation is called and it loops all the items which has class Translatable and adds TranslationActive class to each of them which makes the the element have a red dashed border and a hand / pointer cursor. Click handler is directly calling ShowTranslationDialog, and the other two handlers mouseleave / mouseenter are setting a global variable for future use but when? Global var is used for clickable items like <a href=”…..”> </a>. When ever you hover your mouse over something clickable, element is saved into g_Element and when ever you press Q it calls ShowTranslationDialog which in turn uses global to show translation dialog. Do not  get confused, all the handlers are used for the same purpose, call ShowTranslationDialog!

5

Want to take a look at the source code itself? Here it is : SOURCE CODE for translator.js

This is the source code for displaying following Translator UI :

6

Whenever user clicks the Save button, jQuery serializes the form like :

?keyword=Label&en=Label&tr=Etiket&ru=этикетка   and posts it to ajax.php.

8

ajax.php saves the updated values and echoes the new values.

9

See you next week!