I have a website that is developed with Laravel which supports multi languages using localization.
firstly: I created the language folder along with its file /resources/lang/en/message.php
<?php
return [
'page_title' => 'Welcome Page',
'welcome_message' => 'Hi, Welcome to this page',
'author_information' => 'My name is Sanjay. This blog is mine and we created this post for you to learn.',
];
/resources/lang/fr/messages.php
<?php
return [
'page_title' => 'Pagina de bienvenida',
'welcome_message' => 'Hola bienvenido a esta pagina',
'author_information' => 'Mi nombre es Sanjay. Este blog es mío y creamos esta publicación para que aprendas.',
];
secondly: I created the application routes in web.php file
Route::get('/', [LocalizationController::class, "index"]);
Route::get('change/lang', [LocalizationController::class, "lang_change"])->name('LangChange');
thirdly: I created the LocalizationController to mange the language changes
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\App;
class LocalizationController extends Controller
{
public function index()
{
return view('language');
}
public function lang_change(Request $request)
{
App::setLocale($request->lang);
session()->put('locale', $request->lang);
return view('language');
}
}
lastly: The language can be changed using the drop down list which is managed by the LocalizationController
<body>
<div class="container">
<div class="row" style="text-align: center;margin-top: 40px;">
<h2>How to Create Multi Language Website in Laravel - Online Web Tutor Blog</h2><br>
<div class="col-md-2 col-md-offset-3 text-right">
<strong>Select Language: </strong>
</div>
<div class="col-md-4">
<select class="form-control Langchange">
<option value="en" {{ session()->get('locale') == 'en' ? 'selected' : '' }}>English</option>
<option value="es" {{ session()->get('locale') == 'es' ? 'selected' : '' }}>Spanish</option>
</select>
</div>
<h1 style="margin-top: 80px;">{{ __('message.page_title') }}</h1>
<h2 style="margin-top: 80px;">{{ __('message.welcome_message') }}</h2>
<h3 style="margin-top: 80px;">{{ __('message.author_information') }}</h3>
</div>
</div>
</body>
<script type="text/javascript">
var url = "{{ route('LangChange') }}";
$(".Langchange").change(function(){
window.location.href = url + "?lang="+ $(this).val();
});
</script>
However, when the user inserts data into the database using the website forms, the website shows exactly what user inserted, is there any way for the website to translate user inputs ?
After too much research I got a free solution for translating data that comes from the database, and I will share it in case someone come here later.
Firstly, use google tool for translation.
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage:"en"}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
However, this will translate the whole page, and you don't want that, you want it to translate only data that comes from the database.
you can use the two classes translate and notranslate. Where elements with the class "translate" will be translated, and elements with class "notranslate" will be ignored.
<p class="notranslate"> This Paragraph will remain same because it is using notranslate class.</p>
<p class="translate"> This Paragraph will change because it is using translate class. </p>
more details here https://www.coderepublics.com/howto/how-to-google-translate.php
I made the whole body as notranslate class, and I added translate class to the elements that contain data come from database.
For changing the text language when the app language is changed, I made it like this
<div id="google_translate_element" style="display:none;"></div>
<script type="text/javascript">
var currentLang = "";
var targetLang = "";
if (document.documentElement.lang === "en") {
currentLang = "ar";
targetLang = "en";
}else{
currentLang = "en";
targetLang = "ar";
}
//In case we write ar, the tenslation that will apply is english, otherwise if it is en
//the translation that will be apllied is arabic
function googleTranslateElementInit() {
setCookie('googtrans', '/'+currentLang +'/'+targetLang,1);
new google.translate.TranslateElement({pageLanguage: currentLang,includedLanguages: 'en,ar',);
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Of course for other parts which are not data comes from database, I simply used laravel Localization here are the details https://laravel.com/docs/8.x/localization
Hope that will help someone out there.