Cargando



Sitios web multilenguaje con Codeigniter

Os enseño como instalar Codeigniter paso a paso con las diferentes opciones de lenguaje además de la creación de formulario de contacto traducido.


ago 31 2015 18:26
Profesional
CodeIgniter es un marco de desarrollo de aplicaciones web, un conjunto de herramientas para desarrolladores que construyen sitios web usando PHP. Su objetivo es permitir desarrollar proyectos mucho más rápido de lo que podría si estuviera escribiendo código desde cero, proporcionando un conjunto de librerías para tareas como gestionar sesiones, bases de datos, así como una interfaz sencilla y estructura lógica para acceder a estas bibliotecas.

CodeIgniter permite creativamente centrarse en su proyecto al minimizar la cantidad de código necesario para una tarea determinada. A diferencia de otros framework es muy rápido y consume poca memoria RAM.

Como instalar Codeigniter en nuestro ordenador

Deberemos descargar Codeigniter desde la web oficial, actualmente esta disponible la versión 3.0, luego descomprimimos el archivo zip y lo copiamos a una carpeta de nuestro servidor local.

En otro tutorial se explico "Como Instalarte Xampp para convertir tu ordenador en un servidor web", un servidor que puede instalarse en el ordenador tanto en Windows como en Linux.

codeigniter-lenguajes.jpg


No entraremos en Codeingiter básico pero podemos ver como funciona en este tutorial


Para este tutorial creamos una carpeta tuto y copiamos los archivos descomprimidos dentro.

Luego podremos acceder para probar nuestra web desde el navegador http://localhost/pro...dex.php/Welcome

A continuación vamos a crear un archivo htaccess con las reglas necesarias para quitar de la url index.php que es una ruta por defecto en Codeigniter.

Creamos un archivo de texto y le asignamos el nombre .htaccess y dentro copiamos el siguiente código:
Options FollowSymLinks

<IfModule mod_rewrite.c>
    RewriteEngine on

   
    RewriteCond %{REQUEST_FILENAME} !-f

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?/$1 [L]

</IfModule>

<IfModule !mod_rewrite.c>
    ErrorDocument 404 /index.php

</IfModule>
Esto evitará que se muestre el index.php y podamos invocar al controlador.
Si nos da el siguiente error:

"Your view folder path does not appear to be set correctly.

Please open the following file and correct this: index.php"


Esto indica que la carpeta de la web no tiene permisos por lo tanto deberemos darle permisos de lectura y escritura a todos los archivos. En Linux desde la terminal nos establecemos un nivel superior a la carpeta de proyecto y con los comandos siguientes asignamos los permisos:
sudo chmod -R 777 tuto
Y permiso de usuario:
sudo chown -R usuario:usuario tuto
Si funciona bien deberemos ver la pantalla de Codeigniter que trae por defecto:

codeigniter-lenguajes2.jpg


A continuación deberemos crear unas librerías de soporte o bien descargarlas desde ci_i18n_library.zip, una librería creada por Jérôme Jaglale para Codeigniter, esta librería funciona en Codeigniter 2.x , aunque Codeigniter trae una clase para gestionar idiomas no es tan buena.

En al carpeta core creamos el archivo MY_Config.php, en caso de utilizar Codeingiter 3.0 deberemos hacer algunos cambios y el código actualizado para Codeigniter 3.0.
<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class MY_Config extends CI_Config {

function site_url($uri = '', $protocol = NULL)
{

  if (is_array($uri))
  {

   $uri = implode('/', $uri);
  }


  if (class_exists('CI_Controller'))

  {
   $CI =& get_instance();

   $uri = $CI->lang->localized($uri);  
  }


  return parent::site_url($uri);

}
 

}
?>
A continuación copiamos en la carpeta core el archivo MY_Lang, este archivo es compatible con la versión 2.x y 3.x.

Abrimos este archivo y añadiremos o modificaremos idiomas en la variable language, aquí definiremos cuales son la carpetas que contiene cada idiomas.
// languages

var $languages = array(
  'en' => 'english',

  'es' => 'spanish'
);
Luego deberemos crear nuestros archivos de idiomas, en la carpeta Language, crearemos dos carpetas, english (ingles) y spanish (español).

codeigniter-lenguajes3.jpg


Recordemos en cada carpeta que creemos deberemos poner un archivo index.html con el siguiente código:
<!DOCTYPE html>

<html>
<head>

<title>403 Forbidden</title>
</head>

<body>

<p>Directory access is forbidden.</p>

</body>
</html>
Así cualquier persona que intentará acceder sin permiso o con fines maliciosos se encontraría con el mensaje: "Acceso a Directorio está prohibido".

codeigniter-lenguajes4.jpg


A continuación en la carpeta Language /english crearemos nuestro archivo en ingles, donde iremos añadiendo variables que representaran lo que queramos traducir, siempre utilizaremos una matriz $lang[‘variable’]=’palabra o frase’], por ejemplo en ingles $lang[‘usuario'] = "User".

El nombre de los archivos php para idiomas deben finalizar con el nombre “_lang“. Por ejemplo idiomas_lang.

Idiomas_lang.php - Versión en ingles
<?php

$lang['usuario'] = "User";
$lang['recargo']='This payment method is subject to a charge of 5 euros';

$lang['leyenda']='Complete the contact form';
$lang['titulo']='My multi-language example';

?>

Luego configuramos el archivo para la traducción a Español.
Idiomas_lang.php - Versión en Español



<?php
$lang['usuario'] = "Usuario";

$lang['recargo']='Esta forma tiene un recargo de 5.00 euros';
$lang['leyenda']='Complete el formulario de contacto';

$lang['titulo']='Mi ejemplo multi-Idioma';  ?>

A continuación deberemos crear el controlador en la carpeta controllers, que se llamara Testidioma.php que contendrá el siguiente código:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');


class Testidioma extends CI_Controller {


function index()

{
  // añadimos los helpers para gestionar idioma y enlaces

  $this->load->helper('language');
  $this->load->helper('url');


  //habilitamos el archivo de idiomas

  $this->lang->load('idiomas');

    //mostramos nuestra vista
  $this->load->view('Home');

}
}


?>


A continuación crearemos la vista, en la carpeta view creamos el archivo Home.php y añadimos el siguiente código:

<!DOCTYPE html>
<html lang="<?=$this->lang->lang(); ?>">

<head>
    <meta charset="utf-8" />

    <link rel="stylesheet" type="text/css" href="<?=base_url()?>css/960.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="<?=base_url()?>css/text.css" media="screen" />

    <link rel="stylesheet" type="text/css" href="<?=base_url()?>css/reset.css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<title><?=lang('titulo')?></title>

<style>
span{

background: #959595;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk1OTU5NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ2JSIgc3RvcC1jb2xvcj0iIzBkMGQwZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAxMDEwMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUzJSIgc3RvcC1jb2xvcj0iIzBhMGEwYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc2JSIgc3RvcC1jb2xvcj0iIzRlNGU0ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg3JSIgc3RvcC1jb2xvcj0iIzM4MzgzOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYjFiMWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#959595), color-stop(46%,#0d0d0d), color-stop(50%,#010101), color-stop(53%,#0a0a0a), color-stop(76%,#4e4e4e), color-stop(87%,#383838), color-stop(100%,#1b1b1b));

background: -webkit-linear-gradient(top, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
background: -o-linear-gradient(top, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);

background: -ms-linear-gradient(top, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);
background: linear-gradient(to bottom, #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 );
padding:5px;

margin:5px;
float:left;

}

a:link {
    color: #ffffff;

    text-decoration: none;


}

a:visited {
        text-decoration: none;

color: #ffffff;

}
a:hover {

text-decoration: none;


}

</style>
</head>

<body>

<p><?=lang('usuario')?></p>
<p><?=lang('recargo')?></p>


<p><?=lang('leyenda')?></p>

<br>


<span><?=anchor('es/Testidioma','Español'); ?></span><span><?=anchor('en/Testidioma','Ingles'); ?></span>


A continuación vamos a la carpeta config y en el archivo routes.php, debemos configurar las rutas de los idiomas e indicar cual es el controlar de la home de nuestra web.

$route['default_controller'] = 'Testidioma';
$route['404_override'] = '';

$route['translate_uri_dashes'] = True;
//indicamos idiomas disponibles

$route['^es/(.+)$'] = "$1";
$route['^en/(.+)$'] = "$1";


//indicamos cual es la home

$route['^es$'] = $route['default_controller'];
$route['^en$'] = $route['default_controller'];
Cada vez que queremos añadir un idioma deberemos modificar el archivo my_lang y routes.php, para añadir la configuración correspondiente. Ahora podremos probar nuestro ejemplo accediendo en este caso a la url.
http://localhost/proyectos/tuto/

codeigniter-lenguajes5.jpg


Si presionamos el botón Español, veremos como cambia de idioma.

codeigniter-lenguajes6.jpg


Otro aspecto importante es que podemos tener diferentes archivos de idiomas según la sección o modulo de la web.

Supongamos que quiero separar la traducciones del backend o administrador y de la web del usuario entonces en la carpeta language creo dos archivos diferentes uno admin_lang con la siguiente estructura:

Definimos las variables como modulo.variable, así admin.usuario y usuarios.usuario serán distintas, vemos los archivos:

En la carpeta english (admin_lang.php)
<?php

$lang['admin.usuario'] = "User Administrator";

?>
Archivo usuarios_lang.php
<?php

$lang['usuarios.usuario'] = "User Home";

?>
En la carpeta spanish (admin_lang.php)
<?php

$lang['admin.usuario'] = "Usuario Administrador";
El otro archivo será usuarios_lang
<?php


$lang['usuarios.usuario'] = "Usuario";


?>
A continuación añadimos al controlar los dos archivos de idiomas de cada módulo.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');


class Testidioma extends CI_Controller {


function index()

{

  $this->load->helper('language');
  $this->load->helper('url');


  // load language file

  $this->lang->load('admin');
$this->lang->load('usuarios');


  $this->load->view('Home');

}
}

?>
Luego en la vista deberemos invocar a cada variable de la siguiente manera:
<p><?=lang('usuarios.usuario')?></p>
<p><?=lang('admin.usuario')?></p>
Luego ejecutamos en el navegador, veremos que cada variable respeta la traducción de su módulo:

codeigniter-lenguajes7.jpg


Codeigniter por defecto siempre inicia en inglés, si queremos que inicie en otro idioma, deberemos ir a la carpeta config y en el archivo config.php buscamos la linea:
$config['language'] = 'english';
Y la cambiamos por el idioma que queramos, por ejemplo
$config['language'] = ‘spanish’;
Veamos un ejemplo más interesante:

Como crear un formulario de Contacto y un diseño sencillo


1. Creamos la vista del formulario
</html>
<html>

<head>
<title>CodeIgniter Language Class</title>

<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>

<style>
body {

font:12px Arial, Helvetica, sans-serif;
}

.boton {
  float:left;

    background-color:#1e5184;
    border:0.1em solid #555;

    margin: 0.2em;
    padding:0.2em;

    display:block;
    color: #eee;

}

a:link, a:hover {

    color:#ffffff;
    font-weight:bolder;

    text-decoration: none;
}


label {
margin-right:5px;

}

</style>
<script type="text/javascript">

function Enviar()
{

var msg = "<?php echo $msg_enviado; ?>"
alert(msg);

}

</script>
</head>

<body>
<?php

echo form_open('/Enviar', 'class="email" id="miform"');
?>

<div class="main">
<div id="content">

<h2 id="form_head"><?php echo $titulo; ?></h2>

<span class="boton"><?=anchor('es/Contacto','Español'); ?></span><span class="boton"><?=anchor('en/Contacto','Ingles'); ?></span>
<br/>

<br/>
<hr>

<div id="form_input">
<?php

echo form_label($nombre);
$html = array(

'name' => 'nombre',
'class' => 'input_box'

);
echo form_input($html);

echo '<br>';
echo form_label($email);

$html = array(
'name' => 'email',

'class' => 'input_box'
);

echo form_input($html);
echo '<br>';

echo "<div class='textarea_input'>";
echo form_label($mensaje);

echo '<br>';
$html = array(

'rows' => 10,
'cols' => 50,

'name' => 'mensaje'
);


echo form_textarea($html);

echo "</div>";
echo '<div id="form_button">';

echo form_submit('submit', $enviar, 'id="submit" onclick="Enviar()"');
echo '</div>';

echo form_close();
?>

</div>
</div>

</body>
</html>
Aunque todavía no podremos verlo porque falta el controlador, la vista quedará de la siguiente manera:

codeigniter-lenguajes8.jpg


2. Creamos el controlador
<?php

ob_start();

class Contacto extends CI_Controller {

    function __construct() {
        parent::__construct();

     
    }


public function index() {
        $this->load->helper('language');

  $this->load->helper('url');
  $this->load->helper('form');


//Tomamos el idioma que viene por la url y determinamos cual es


$idioma=$this->uri->segment(1);

if ($idioma=='es') {
$idioma='spanish';

}
if ($idioma=='en') {

$idioma='english';
}


// Invocamos el archivo de idioma

$this->lang->load('contacto', $idioma);

// Creamos una matriz con los datos que enviaremos a la vista
$datosvista = array();

$datosvista['default'] = $idioma;
$datosvista['titulo'] = $this->lang->line('contacto.titulo');

$datosvista['idioma'] = $this->lang->line('contacto.idioma');
$datosvista['nombre'] = $this->lang->line('contacto.nombre');

$datosvista['mensaje'] = $this->lang->line('contacto.mensaje');
$datosvista['email'] = $this->lang->line('contacto.email');

$datosvista['msg_enviado'] = $this->lang->line('contacto.msg_enviado');
$datosvista['enviar'] = $this->lang->line('contacto.enviar');


// Send retrieved data to view page

$this->load->view('Contacto',$datossesion);
}


}


?>
3. Creamos el archivo de traducción en Español (contancto_lang.php)
<?php
$lang['contacto.titulo'] = 'Formulario de contacto';

$lang['contacto.nombre'] = 'Nombre';
$lang['contacto.mensaje'] = 'Mensaje';

$lang['contacto.email'] = 'Email';
$lang['contacto.msg_enviado'] = '¡Gracias! Tu mensaje ha sido enviado.';

$lang['contacto.enviar'] = 'Enviar';
?>
4. Creamos el archivo de traducción en inglés (contacto_lang.php)
<?php

$lang['contacto.titulo'] = 'Contact Form';
$lang['contacto.nombre'] = 'Name';

$lang['contacto.mensaje'] = 'Message';
$lang['contacto.email'] = 'Email';

$lang['contacto.msg_enviado'] = 'Thank you! Your message has been sent.';
$lang['contacto.enviar'] = 'Send';

?>
El formulario traducido quedará de la siguiente manera:

codeigniter-lenguajes9.jpg


Podemos crear o incorporar así cualquier archivo de archivo con variables personalizadas que requiera nuestra web, según sea necesario, a fin de proporcionar mensajes de error y mensajes específicos de la aplicación, o proporcionar traducciones de webservices a otros idiomas.

Estas traducciones o nuevos idiomas siempre deben estar dentro de su directorio de la language/idioma/, y llamarse igual, es decir si tenemos un archivo errores_lang deberá llamarse igual en todos los idiomas y las variables corresponderse.

CodeIgniter viene con un conjunto de archivos de idioma por defecto en idioma Inglés. Codeigniter incorpora traducciones ya listas para errores de formulario, bases de datos, calendarios, email en casi todos los idiomas estas se pueden descargar del repositorio de traducciones.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X