Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
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 web

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:

tpl

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

español

Ingles

ingles

Italiano

el padrino

Eso es todo, bajate los archivos del proyecto AQUI

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

WhatsApp: Aprende a usar la nueva función ‘Estado’

WhatsApp: Aprende a usar la nueva función ‘Estado’

A continuación te mostramos una guía sobre la nueva nueva función ‘estado‘ de WhatsApp.  Primero que nada, a...

Gestión de Stock – La Vista (Parte 3)

Gestión de Stock – La Vista (Parte 3)

En esta tercera parte del tutorial crearemos la interfaz de usuario GUI (VISTA) para el sistema de gestión de stock. Tom...

Impresión de reportes con JasperReport + YAPA

Impresión de reportes con JasperReport + YAPA

En un post anterior [Guardar reporte PDF directamente con Jasperreports] vimos una manera de imprimir reportes directame...

Login estilo Google

Login estilo Google

Google tiene entre su formulario de autenticación de usuario para sus diferentes servicios (gmail, blogger, youtube, g+)...

Servicio Web SOAP en Java

Servicio Web SOAP en Java

En este post vamos a construir un Servicio Web bajo el protocolo SOAP (Simple Object Access Protocol) el cual básicament...

Crear archivos JNLP con Netbeans

Crear archivos JNLP con Netbeans

¿Que son los archivos JNLP? Java Network Launching Protocol (JNLP) es una especificación usada por Java Web Start. Esta...

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

  1. Neyra_Start dice:

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

  2. Laura dice:

    Un 10!! Gracias!!

  3. David dice:

    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:

      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

  4. miguel dice:

    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:

      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

  5. Hakiim dice:

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

  6. Elena dice:

    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:

      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

      🙂

  7. Elena dice:

    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:

      ¿te refieres a cambiar de imagen según el idioma? :/

  8. Leonardo dice:

    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

  9. israel dice:

    Muy buen articulo, gracias.

  10. David Fabian dice:

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

  11. Manu dice:

    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

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

MyBatis es un framework de persistencia Java que se encarga de mapear sentencias SQL y procedimientos almacenados a part...

Webcam Capture es un API  que permite usar una cámara web incorporada o externa directamente desde código Java utilizand...

im4java es una interfaz pura de Java para la línea de comandos de ImageMagick. La interfaz de la línea de comandos de IM...

En un post anterior conocimos una herramienta Open Source con un conjunto de herramientas para el trabajo con imágenes e...

Herramientas

Generador de Enlaces a Whatsapp