Index / Desarrollo Web / PHP / Crear web multi-lenguaje con php

Crear web multi-lenguaje con php

Autor jc mouse lunes, febrero 27, 2012

En este tutorial realizaremos un proyecto web de un «sitio multi lenguaje» o «web multi idiomas» como prefieran llamarlo, utilizaremos el lenguaje php, este ejemplo será sencillo asi que nada de sesiones nada de javascript, nada de imagenes, puro código php, si bien existen frameworks para php creo yo que lo mejor forma de aprender este lenguaje es desde cero.

Para este tutorial utilizaremos phpDesigner, usted puede utilizar el IDE de su agrado, la estructura del sitio web sera la siguiente:

Estructura del proyecto en phpDesginer

Crea esta estructura de carpetas junto a los archivos en tu servidor local, más adelante incluiremos el código necesario.

Expliquemos un poco nuetro proyecto: utilizamos programacion orientada a objetos (POO) y las clases las colocaremos en la carpeta «class», en la carpeta «lenguaje» colocaremos los archivos de los diferentes idiomas que utilizaremos (ingles, español e italiano), cuando termines el proyecto te daras cuenta de lo facil que sera añadir otro idioma más, tambien haremos uso de plantillas TPL, estas las colocamos en la carpeta «TPL», el archivo raiz del sitio se llama index.php.

¿Cómo funciona? como habras notado cuando visitas una web multi-idiomas, esta tiene unas pequeñas banderitas las cuales simbolizan los lenguajes que soporta, cuando haces clic en uno de ellos se recarga la pagina con el idioma elegido, pues eso ni más ni menos es lo que haremos aqui.

Comencemos.

1. Comenzaremos con la creación de nuestra plantilla web, se llama «plantilla.tpl.php», este archivo no contiene código php, es puro HTML y CSS, podras ver tambien que tiene etiquetas de la forma {nombre_etiqueta}, son estas etiquetas las que utilizaremos para cambiar el contenido de nuestra web multilenguaje. Cada etique tiene un ID el cual nos sirve para reconocerlo en todo el proyecto, este id puede repetirse no es único como en el caso de {titulo_web}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>{titulo_web}</title>
<style type="text/css">
html, body{
 margin:0;
 padding:0;
 text-align:center;
 background-color:#EFEFEF;
} 

#pagewidth{
 width:600px;
 text-align:left;
 margin:20px auto;
 border:1px solid #000000;
} 

#header{
 position:relative;
 height:80px;
 background-color:#528BC5;
 width:100%;
 display:block;
 overflow:auto;
} 

#leftcol{
 width:200px;
 float:left;
 position:relative;
 background-color:#FFD595;
 }

#maincol{
 background-color: #93A056;
 position: relative;
 width:400px;
 float:right;
 }

#footer{
 height:50px;
  background-color:#9FC0A6;
 clear:both;
 display:block;
 overflow:auto;
} 

.clearfix:after {
 content: ".";
 display: block;
height: 0;
 clear: both;
 visibility: hidden;
 }

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */

</style>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="pagewidth" >
 <div id="header">
        <h1>&nbsp;&nbsp;&nbsp;{titulo_web}</h1>
    </div>
 <div id="wrapper" class="clearfix">
   <div id="maincol">
                <h1>&nbsp;&nbsp;&nbsp;{titulo_pagina}</h1>
                <p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. </p>
            </div>
  <div id="leftcol">
            <ul>Elija su idioma
                <li><a href="index.php?idioma=es">Español</a></li>
                <li><a href="index.php?idioma=en">Ingles</a></li>
                <li><a href="index.php?idioma=it">Italiano</a></li>
            </ul>
            <hr />
            <ul>Menu
                <li><a href="#">{#archivo}</a></li>
                <li><a href="#">{#herramientas}</a></li>
                <li><a href="#">{#ayuda}</a></li>
                <li><a href="#">{#proyecto}</a></li>
                <li><a href="#">{#acercade}</a></li>
            </ul>
        </div>
 </div>
 <div id="footer">&nbsp;&nbsp;&nbsp;Copyright © 2012 jc-Mouse</div>
 </div>
</body>

</html>

Graficamente debes tener algo como esto:

Plantilla web TPL

2. Vamos ahora a crear la clase «lenguaje.php», esta clase es la que nos permite elegir entre los diferentes lenguajes que soporte nuestra web.

<?php
# CLASE PARA GESTIONAR EL IDIOMA DEL USUARIO
class lenguaje
{
    private $key;
#:._________________________________________________ soy una barra separadora 🙂
  public function __construct($k='es')
  {
    $this->key = $k;
  }
#:._________________________________________________ soy una barra separadora 🙂
# Carga idioma elegido y retorna en un array 
    public function get_idioma()
    {
        #Si achivo de idioma es correcto
        $file = 'inc/lenguaje/'.$this->key.'.inc.php';
        if ( is_file( $file ) )
            include_once $file;
        else
            include_once 'inc/lenguaje/es.inc.php';
        return $id;
    }
#:._________________________________________________ soy una barra separadora 🙂 
}
?>

Como puede verse, hace uso de los archivos con extensión «*.inc.php» estos archivos que contienen los diferentes idiomas que utilizamos, los crearemos a continuación.

3. Los archivos multi-lenguajes, son solo archivos php que contienen en su interior a un array asociativo con los id de cada palabra o palabras que se desea traducir, estos archivos son guardados en la carpeta «lenguajes».

Lenguaje español: es.inc.php

<?php
    $id = array(
        'titulo_web'=>'Web Multilenguaje',
        '#archivo' => 'Archivo',
        '#herramientas' => 'Herramientas',
        '#ayuda' => 'Ayuda',
        '#proyecto' => 'Proyecto',
        '#acercade' => 'Acerca de...',
        'titulo_pagina' => 'Contenido Principal'
);
?>

Lenguaje ingles: en.inc.php

<?php
    $id = array(
        'titulo_web'=>'Multi Language Website',
        '#archivo' => 'File',
        '#herramientas' => 'Tools',
        '#ayuda' => 'Help',
        '#proyecto' => 'Project',
        '#acercade' => 'About',
        'titulo_pagina' => 'Main Content'
);
?>

Lenguaje Italiano: it.inc.php

<?php
    $id = array(
        'titulo_web'=>'Lingua del sito Multi',
        '#archivo' => 'Archivio',
        '#herramientas' => 'Strumenti',
        '#ayuda' => 'Aiuto',
        '#proyecto' => 'Progetto',
        '#acercade' => 'Circa',
        'titulo_pagina' => 'Contenuto Principale'
);
?>

4. Pues nada, ya estamos por terminar el proyecto, solo falta el archivo index.php, el código es el siguiente:

<?php
    require 'inc/class/lenguaje.php';

    if( $_GET )       
        $key = ( isset($_GET['idioma']) )? $_GET['idioma'] : 'es' ;  

    # se crea instancia a lenguaje
    $idioma = new lenguaje( $key );
    # se carga array de idioma
    $diccionario = $idioma->get_idioma(); 
    # se carga la plantilla HTML
    $template = file_get_contents('inc/tpl/plantilla.tpl.php');
    #se llenan los valores generales a toda la plantilla
    foreach ($diccionario as $clave=>$valor) {
        $template = str_replace('{'.$clave.'}', $valor, $template);
    }
    #Se muestra pagina web
    echo $template;
 ?>

En esta archivo cargamos la plantilla y tambien iniciamos el lenguaje (español por defecto) a utilizar, para cambiar el idioma estamos utilizando GET, podriamos utilizar POST incluso una base de datos y mucho mejor hacer uso de SESION almacenar los valores «en, es, it» en variables de sesion, pero el objetivo del tuto es mostrar al programador novato como funcionaria un sistema web multilenguaje, ya si le gusto el codigo, lo modifica asu gusto y lo amplia según sus necesidades.

Ejecutando la web desde el navegador obtendremos las siguientes salidas:

Español

Ingles

Italiano

Eso es todo, bajate los archivos del proyecto AQUI

También Te Podría Interesar

Crear XML desde una base de datos con jDom

Un post cortito de fin de semana 🙂 , este trata de la forma de extraer la información de una base de datos formar una es...

Conexión a MySQL con PDO

¿Que es PDO? PHP Data Objects (o PDO) es una extensión que provee una capa de abstracción de acceso a datos para PHP 5,...

Lector Feed con Java/Rome

En este tutorial crearemos un lector de Feeds en Java/netbeans, pero antes debemosa saber que es un Feed, según Santa Wi...

JLabel: Escalar imagen

El componente swing JLabel nos permite cargar una imagen con la propiedad setIcon, sin embargo la imagen no toma el tama...

Conexion vb.net y access

Para conectar Visual Basic .NET con una base de datos de MS Access se utiliza la libreria «System.Data.OleDb» en el sigu...

JLabel circular

En este post crearemos un swing Label personalizado que tendrá la forma circular en su borde, con esto obtendremos un bo...

15 comentarios en “Crear web multi-lenguaje con php”

Neyra_Start dice:

29 febrero, 2012 a las 5:03

Muy bueno eh!!
es de mucha ayuda tus proyectos
Super ++ ..
Laura dice:

27 noviembre, 2012 a las 4:43

Un 10!! Gracias!!
David dice:

6 enero, 2013 a las 20:42

El metodo es muy bueno y te doy las gracias por compartirlo..

Pero he encontrado un problema grave. Estoy intentando crear una web y al seguir este tuto funciona todo excepto si incluyo mas codigo php en la «plantilla» en ese momento se muestra la palabra «echo» en lugar de ejecutarse el codigo.

A que es debido? Comose puede solucionar?

Muchas gracias..
1. Mouse dice:
  
  9 enero, 2013 a las 2:33
  
  eso se debe a que el archivo plantilla.tpl.php lo estamos llamando utilizando «file_get_contents» por lo cual el codigo php no se ejecuta, si te das cuenta en ese archivo no tenemos codigo php sino etiquetas de la forma {etiqueas} que despues reemplazamos desde index.php
miguel dice:

9 marzo, 2013 a las 12:32

Buenos días, he leido su artículo y me parece muy interesante, pero me encuentro el problema que mi web tiene bases de datos y quiero hacerla multilenguaje y la verdad nose como hacer para que lea las bases de datos.
Le agradeceria su respuesta

saludos
Miguel
1. Mouse dice:
  
  12 marzo, 2013 a las 19:27
  
  si utilizas una base de datos para un sitio web, guardas los idiomas en la tabla por ejemplo:
  tabla = idioma
  español | ingles | frances | aleman
  Hola hello bonjour hallo
  
  después, implementar eso en la aplicacion es como dice en este post
Hakiim dice:

19 marzo, 2013 a las 15:51

Hola Muchas gracias…. el tuto es muy bueno…. quería algo asi para no cargar la base de dato con tantas conexiones
Elena dice:

21 mayo, 2013 a las 23:08

Hola una pregunta.

Descargue el archivo y funciona correctamente solo que me tira un error el cual te anexo aquí:

Notice: Undefined variable: key in C:\xampp\htdocs\i\multi\index.php on line 8

No reconoce la variable key aunque ya se ha intanciado.

Saludos
1. Mouse dice:
  
  22 mayo, 2013 a las 15:05
  
  Eso sale en XAMP porque lo tienes configurado para mostrar todo tipo de advertencias, debes buscar
  
  error_reporting = E_ALL | E_STRICT
  
  en el archivo php.ini
  
  y reemplazarlo por
  
  error_reporting = E_ALL & ~E_NOTICE & ~E_DEPRECATED
  
  🙂
Elena dice:

22 mayo, 2013 a las 15:51

Hola! muchas gracias funciona correctamente ;D

Aprovechándote , tengo una duda diferente, mira te explico:

Al hacer clic al cambio de idioma funciona con el texto pero no tengo idea como puede ser lo mismo pero con una imagen.

O conoces de algún código JavaScript para ello?

Encontre uno:

— Js —

$(function() {
$(‘#en’).click( function (){
$(‘#menut1’).text(«HOME»);
});
$(‘#es’).click( function (){
$(‘#menut1’).text(«INICIO»);
});
});

— html —

Seleccione su idioma:

Inicio

Te explico cuando le das clic a la selección de idioma dependiendo si es EN o ES te ejecuta la función y cambia el texto, por ejemplo ahí tengo estático que es inicio pero si le doy EN cambia a home. Toda va perfecto es una manera fácil para no utilizar php, pero el problema que tengo es que necesito que me haga lo mismo pero con las imágenes y pues que me respete la selección del cambio de idioma en las demás paginas.

De verdad espero me puedas ayudar, y también que con esto si alguien no sabia pues tiene una idea más…

Saludos!!! ;D
1. Mouse dice:
  
  29 mayo, 2013 a las 18:19
  
  ¿te refieres a cambiar de imagen según el idioma? :/
Leonardo dice:

24 junio, 2013 a las 17:13

Hola Muy bueno tu aporte me a servido quisiera saber si es posible lo siguiente
1 almacenar el array en una session o cookie hacer que el contenido de toda la web cambie me refiero al texto a cambiar muchas gracias por tu ayuda
israel dice:

20 febrero, 2015 a las 18:57

Muy buen articulo, gracias.
David Fabian dice:

14 agosto, 2015 a las 16:32

Sos un crack, gracias por compartir y enseñar, he aprendido a programar mas aqui que en la universidad
Manu dice:

21 octubre, 2015 a las 11:14

Muy buena explicación ante todo, pero como se puede utilizar a la hora de cambiar en el menú por ejemplo a ayuda, sin que utilice el idioma por defecto si no el que seleccionaste en la pagina principal