Multiple Language Demo

Return to demos index page

Share on Facebook Tweet about this on Twitter Join our Discord Share on LinkedIn Share on Reddit pinterest Email this to someone

Current language: English

Choose language:
english flag spanish flag french flag italian flag german flag

Full text explanation for this page.

That is a question that I see come up a lot... "How do I use multiple languages on one page?" I have written a few answers to explain this, but I thought an actual demo would be helpful.

Because English is my primary language, the only translation on this page that is definitely correct is English. The others are all created using Google Translate. Which means that they are certainly close, but not perfect.

That is the real problem with using something like that to have multiple languages on your pages. You don't know how good the translations are. In the cases where translation is important, you need to have the translations done ahead of time, and kept in a database to retrieve at runtime.

Most of this page will swap correctly based on the language. Except for this next part which shows how it is done. That will stay in English.


How does this work? (not translated). This is a full tutorial so you can build this for yourself.

There are 3 parts to this:
1. Database: Holds a table for pages, tags, and language translations
2. PHP: grabs the cookie value holding the language, and pulls from the database
3. JavaScript: Allows the user to change the language, write the language to a cookie, and refresh the page.

At page load, the page looks for a cookie containing the index for that language ID. The are:

var languagesAre = ['English','Spanish','French','Italian','German']

Or, ID 0 through 4. If there is no cookie, the default is 0 (English).
PHP Code to read the cookie:

$cookie_name = 'dpLangDemoId';
$langIs = 0;
if(!isset($_COOKIE[$cookie_name])) {
	//$langIs = 0;
	//echo "Cookie named '" . $cookie_name . "' is not set!<br>";
} else {
	//echo "Cookie '" . $cookie_name . "' is set!<br>";
	//echo "Value is: " . $_COOKIE[$cookie_name];
	$langIs = $_COOKIE[$cookie_name];
}

The database holds a table with the page name, tags, and language translation for each tag.

datatable

The PHP pulls the data by page name, and sets the text for the tags based on the language.

$sql = "SELECT `id`, `pageIs`, `tagIs`, `lang_english`, `lang_spanish`, `lang_french`, `lang_italian`, `lang_german`, `dateCreated`, `lastEdited`, `editedBy`, `active`, `notes` FROM `languagedemo` where pageIs='languageDemo'";

$result = $mysqli->query($sql);
$mysqli->close();

$recCount=0;
while($rows = $result->fetch_array()) {
	$tagsAre = $rows[2];
	$langTextIs = $rows[3 + $langIs];  //pulls text based on language
	
	
	if ($tagsAre=='title') $pageTitleIs = $langTextIs;
	if ($tagsAre=='choose') $chooseIs = $langTextIs;
	if ($tagsAre=='returnto') $returntoIs = $langTextIs;
	if ($tagsAre=='content') $contentIs = $langTextIs;

	$recCount++;
}

Once that information is gathered, the page can paint out using the variables for the text. Nothing of the content is hardcoded on the page. (look for the PHP tags with the ECHO statement)

<div id="curLang"></div>
<p><? echo $chooseIs ?>:<br /> 
	<img src="images/lang_english.png" alt="english flag" title="English" onclick="changeLang(0)" class="languageFlag">
	<img src="images/lang_spanish.png" alt="spanish flag" title="Spanish" onclick="changeLang(1)" class="languageFlag">
	<img src="images/lang_french.png" alt="french flag" title="French" onclick="changeLang(2)" class="languageFlag">
	<img src="images/lang_italian.png" alt="italian flag" title="Italian" onclick="changeLang(3)" class="languageFlag">
	<img src="images/lang_german.png" alt="german flag" title="German" onclick="changeLang(4)" class="languageFlag">
</p>

<div style="clear:both;"></div>


<? echo $contentIs; ?>

The last step is the JavaScript. This is just a couple of functions that change the language when a user clicks a flag. It will set the language, write the ID to the cookie, and reload the page. When the pages reloads, it will read the cookie that was just written.

function setCookie(cname, cvalue, exdays) {
	var d = new Date();
	d.setTime(d.getTime() + (exdays*24*60*60*1000));
	var expires = "expires="+d.toUTCString();
	document.cookie = cname + "=" + cvalue + "; " + expires;
}

var languagesAre = ['English','Spanish','French','Italian','German']
function changeLang(toWhat){
	alert ("changing language to: " + languagesAre[toWhat]);

	//write cookie for language
	setCookie('dpLangDemoId', toWhat, 120)
	//refresh page
	window.location.reload();
}

var curLangId = <? echo $langIs; ?>;
document.getElementById("curLang").innerHTML = "<p>Current language: <b>"+ languagesAre[curLangId] +"</b></p>";

In conclusion, if you were to implement this sort of system for your site, the unique identifiers you will need are:
Page name: The page for which you are pulling the data
Tags: Each section on the page that needs a translation Langauge: This demos uses 5 languages. You can do whatever you want with that.

Hope you find this helpful!

bottom corner