Multilingual support in PHP website

NOTE: This post is written for developers having some knowledge of PHP/MySQL. So, if you find it difficult to understand some part, plz leave your comments. - Nilesh

So many developers thinks that its hard to provide multilingual support to website. Are you one of them? No problem. Here are some helpful tips to provide basic multilingual support for you website.

There are 3 different cases

CASE#1 Provide multilingual to static contents of site.

For e.g. if you have header navigation, left navigation in website OR if you have predefined messages e.g. greeting messages, validation error messages etc then you need to do following things.

Create one configuration file per language.
E.g. if your site has English and Hindi support, then create 2 language configuration files.
(1) en.lang.inc.php
(2) hi.lang.inc.php

Both file will content same data in following format.
(1) en.lang.inc.php

define(‘WELCOME’, ‘Welcome’);
define(‘SIGN_IN’, ‘Sign In’);

NOTE: you need to find all places in your application to check how many strings you need with multilingual support and store in this file.

(2) hi.lang.inc.php

define(‘WELCOME’, ‘<place here hindi version of - Welcome>’);
define(‘SIGN_IN’, ‘<place here hindi version of - Sign In>’);

On user side, you need to provide selection to choose language.
English will be default language so lang=en

Your application request to change language will be xyz.com/file.php?lang=en for English, xyz.com/file.php?lang=hi for hindi.

Once user will make selection store that selection in COOKIE and use that value later so, you don’t have to pass “lang” parameter in each request.

Write code in your application’s common include file (this must be included in every request), to include proper configuration file based on selection.

So if user select English, only en.lang.inc.php will be included and if user selects Hindi, then only hi.lang.inc.php will be included.

Now you need to replace all your static contents with php constants in HTML/template files.

e.g. if your signin page contains.

<h1>Welcome</h1>

Then replace it with <h1><?php echo WELCOME ?></h1>

So, page will load language specific contents.

CASE#2 Provide multilingual to images.

E.g. in header you have used one image for text “about us” then for hindi version you need same image with hindi text.

You can use two directories in your images directory. Image name must be same in two directories.

Images/en/about_us.jpg
Images/hi/about_us.jpg

Then you need to change your code to load proper image based on language selection.

So, your image code

<img src=”images/about_us.jpg”>

will look like

<img src=”images/<?php echo $lang ?>/about_us.jpg”>

CASE#3 Provide multilingual to page contents.


e.g. if you have provision in admin panel to add content for “about us” page. You need to provide selection, for which language you are entering data. So, in database you will have two entries/versions for about us pages for two languages.

e.g. DB entries will be like below.
en | about_us | English contents
hi | about_us | Hindi contents

While displaying it to user, your query must use “language selected by user” to get proper contents from DB.

WYSWYG / TinyMCE editor has multilingual support for entering data. That you can use for entering data, else copy the data from any translator (e.g .google) and paste it into editor.

Database table for storing Unicode contents; must need to have UTF-8 setting >> charset: UTF-8 Unicode (utf8)

Also, you need to add following META into your HTML head.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

That’s all!

How to set priority of a bug in a web application?

Software bugs are un-avoidable. No one can deliver bug free system at first stage. It means some how we need to deal with bugs. Here I have written some guideline to set bug priority in web application. One can use it for other applications too.

Consider a small web application where user can register and upload photos & videos after log in. I have used this example to visualize various conditions as below.
Here P1, P2, P3, P4 & P5 are priorities.

P1: Blocking, High level importance & Can occur during Testing/QA phase.
e.g.
(1) Development is done, but QA is not able to start testing as he is getting blank screen due to improper DB connection.
(2) User is not able to register or sign in.

P2: Blocking, Low level importance & Can occur during Testing/QA phase.
e.g. User is able to login but there is some problem in photo upload feature and user is not able to upload photo.

P3: Not Blocking, High level importance & Can occur during Development phase as well as Testing/QA phase.
e.g.
(1) Normally when ever you start developing some module, by default you can set priority to P3 for all your tasks.
(2) Forgot password feature is not working.

P4: Not Blocking, Low level importance & Can occur during Development phase as well as Testing/QA phase.
e.g.
(1) Design related issues. Thumbnails are not looking good for photos in photo album.
(2) Browser issues. Sign Up page is looking great in Firefox but not aligned well in IE & Safari.

P5: Not Blocking & Can occur during Development phase as well as Testing/QA phase.
e.g. Text changes. Error message is not proper / some spelling mistakes

You can deliver your project successfully if it passes following criteria.
Total P1 Open should be 0
Total P2 Open should be 0
Total P3 Open should be 0
Total P4 Open should be 5 (You can change this no.)
Total P5 Open should be 5 (You can change this no.)

Is there a way to change YouTube player skin?

Many of you have tried embedding YouTube video in webpage using EMBED tag. It’s very easy. Just copy the code and paste it in webpage, it will start streaming video. You may think, what’s new here? Yes, you are right there is nothing tricky here. Wait for a while.

Check the second scenario. Let say you want to steam any random video (.flv) other than YouTube video. What options do you have? Either you can use built in flash video player with little customization to match look and feel with your website theme or you can use free open source flash video player (e.g. flowplayer) to stream your video. So, what’s exciting here? Nothing.

Now check the third scenario. Let say you want to steam video provided by YouTube, but want to change video skin to match look and feel with your website? What you will do? Is there any option available to change skin of YouTube player other than default skin?

Yes; it’s possible. You can choose “YouTube Custom Player” if you just want to change background color, name of the player and content of default YouTube player. Or you can user “YouTube Chromeless Player”. You can use either JavaScript APIs or Flash APIs to make your custom player.

See the demo here; cromeless player using JavaScript APIs.

I found some limitation in integrating this APIs
(1) YouTube has provided numerous functions to integrate. But it’s hard to control various events like play, pause, mute, un-mute etc. in design.
(2) The given example support embedding of only one video player at a time. What to do if you have more than one video on a webpage?

I have made a JavaScript class using JavaScript APIs which allows user to overcome both the listed issues.

You can download the class and example code here!

Also, check the demo here of what I have implemented.

If you find any difficulties using this class, please contact me.

Hope you will find this post helpful.

Use a CDN to improve your website's performance

"80-90% of the end-user response time is spent downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Rather than starting with the difficult task of redesigning your application architecture, it's better to first disperse your static content. This will achieves a bigger reduction in response times." - Steve Saunders

Performance, Scalability and Cost efficiency to end users are main key factors for any web application. CDN (content delivery network) is the solution to achieve it. A CDN can offer 100% availability, even with large power, network or hardware outages. Traditional CDNs focus on web acceleration. New CDNs have integrated media delivery services so they are optimized for live video streaming, high definition video and large asset delivery.

Why we need to use CDN?
The main point of the CDN is caching. So, it definitely helps in improving performance and scalability of a website.

When not to use a CDN?
- Whenever you’re working offline.
- When you can deliver faster than the CDN, and care about that. This might be the case when all users are close to the server.

Privacy and security concerns.
Using the CDN, you are trusting the CDN to faithfully serve contents and relying on no third-parties injecting funniness in between the CDN and your user’s browser. It's good to use a reliable CDN like "Google’s The AJAX Libraries API"

The AJAX Libraries API is a content distribution network and loading architecture for the most popular, open source JavaScript libraries. By using the Google AJAX API Loader's google.load() method, your application has high speed, globally available access to a growing list of the most popular, open source JavaScript libraries including: jQuery, jQuery UI, Prototype, script.aculo.us, MooTools, Dojo, SWFObject and YUI

Try it in your web application to see performance improvement in your application.

Book Review: High Performance Web Sites - Steve Souders

High Performance Web Sites by Steve Souders is one of the most important books front end engineers should read to be able to develop a proper web sites. In 14 chapter, you will know 14 of the best tips to enhance the performance of your website. the author gives example by numbers and statistics about the top 10 websites on the internet. In each tip Steve tells the effect of applying this tip on the top 10 websites.

This book is short and definitely very good in term of contents. The subtitle is, "Essential Knowledge for Frontend Engineers." The book is a quick read compared to most technical books, and not just due to its relatively small size (168 pages), but also the writing style.

According to Joe (Developer of Firebug debugger and Mozilla's DOM Inspector) -
"If everyone would implement just 20% of Steve's guidelines, the Web would be a dramatically better place. Between this book and Steve's YSlow extension, there's really no excuse for having a sluggish web site anymore."

Each performance rule in the book is supported by specific examples, and code snippets are available on the book's companion web site. The rules include how to:
* Make Fewer HTTP Requests
* Use a Content Delivery Network
* Add an Expires Header
* Gzip Components
* Put Stylesheets at the Top
* Put Scripts at the Bottom
* Avoid CSS Expressions
* Make JavaScript and CSS External
* Reduce DNS Lookups
* Minify JavaScript
* Avoid Redirects
* Remove Duplicates Scripts
* Configure ETags
* Make Ajax Cacheable

Here I have shared a presentation by Steve Souders and Tenni Theurer on
"High Performance Web Sites"