El proceso se explica por completo en el vídeo a continuación
En el presente blog se muestra el código de todos los archivos que aparecen en el vídeo, de este modo podrás replicar lo que se muestra en el tutorial.
En adición te muestro como agregar un nuevo idioma, para que puedas a partir de la muestra, hacer sitios más complejos en PHP.
Implementar un Servidor Local en PHP
Lo primero es montar un servidor local donde corra PHP, en el vídeo utilizo XAMPP, pero es perfectamente posible utilizar cualquier desarrollo que consideres viable para el proyecto.
Descarga he instalación de XAMPP
La descarga he instalación de XAMPP es un proceso recurrente en la gran mayorías de mis publicaciones de desarrollo.
Por este motivo no haré mucho énfasis en el proceso. Basta con descargar XAMPP en la siguiente ubicación:
https://www.apachefriends.org/es/index.html
Posteriormente se debe realizar la instalación de todos los parámetros por defecto. Esto para garantizar que la configuración del proyecto de como hacer un sitio multidioma en PHP quede implementado en tu servidor local fácilmente.
El proyecto se puede subir a Heroku
Dada la sencillez del proyecto, ya que ni siquiera se usa base de datos, en el proceso de traducción es muy fácil subir el proyecto a Heroku.
Opté por no hacerlo porque como aplicación, mi sitio multilenguaje no aporta mucho valor en si mismo, para estar público todo el tiempo.
Si deseas posteriormente, subir el proyecto a Heroku, te recomiendo veas el vídeo a continuación donde explico el proceso de como subir un Sistema POS a Heroku, específicamente en el minuto 27:45.
El proceso es totalmente gratuito y si sigues todos los pasos que planteo, puedes tener al final un sistema robusto, que puedes utilizar sin ningún coste adicional es varios puntos de venta.
Puesta a punto del proyecto de como hacer un sitio multidioma en PHP
Según el vídeo, debes ir a la siguiente ubicación, claro está si pusiste todos los parámetros por defecto en la instalación de XAMPP
C:\xampp\htdocs
En esta ubicación creas una carpeta que tendrá el nombre de tu proyecto, en el caso del vídeo, el nombre de mi carpeta se llama multilenguaje.
Dentro de esta carpeta debemos guardar los archivos a continuación:
Archivo index.php
<?php
include "configuracion.php"
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $lang['title'] ?></title>
<link rel="stylesheet" href="./bootstrap-4.4.1-dist/css/bootstrap.min.css">
<style type="text/css">
.footer {
left:0;
position:fixed;
bottom:0;
text-align:center;
color:white;
width:100%;
}
body, html {
height: 100%;
}
/* The hero image */
.hero-image {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("mujerfondo.png");
/* Set a specific height */
height: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* Place text in the middle of the image */
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
</style>
</head>
<body>
<div class="hero-image">
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"><?php echo $lang['Inicio'] ?></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><?php echo $lang['Precios'] ?></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><?php echo $lang['Contacto'] ?></a>
</li>
</ul>
</nav>
<div class="container" style="margin-top: 300px;">
<div class="row justify-content-left">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="hero-text">
<img src="logoblanco.png" alt="logoconfiguroweb">
<h1><?php echo $lang['Titular'] ?></h1>
<p> <?php echo $lang['Descripcion'] ?></p>
</div>
</div>
</div>
</div>
<div class="footer bg-dark">
<a href="index.php?lang=es"> <?php echo $lang['es'] ?> </a> | <a href="index.php?lang=en"> <?php echo $lang['en'] ?></a> | <a href="index.php?lang=it"> <?php echo $lang['it'] ?> </a>
</div>
</div>
</body>
</html>Archivo configuracion.php
<?php
session_start();
if (!isset($_SESSION['lang']))
$_SESSION['lang'] = "es";
else if (isset($_GET['lang']) && $_SESSION['lang'] != $_GET['lang'] && !empty($_GET['lang']))
{
if ($_GET['lang'] == "es")
$_SESSION['lang'] = "es";
else if ($_GET['lang'] == "en")
$_SESSION['lang'] = "en";
else if ($_GET['lang'] == "it")
$_SESSION['lang'] = "it";
}
require_once "lenguajes/" . $_SESSION['lang'] . ".php";
?>Archivo es.php
<?php
$lang = array(
"title" => "Mi Página Web en Español",
"Inicio" => "Inicio",
"Precios" => "Precios",
"Contacto" => "Contacto",
"Descripcion" => "Esta es la descripción de mi Sitio Web en Español",
"Titular" => "Mi Página Web en Español",
"en" => "Inglés",
"es" => "Español",
"it" => "Italiano"
)
?>Archivo en.php
<?php
$lang = array(
"title" => "My Web Site in English",
"Inicio" => "Home",
"Precios" => "Pricing",
"Contacto" => "Contact",
"Descripcion" => "This is the description of my English Website",
"Titular" => "My Website in English",
"en" => "English",
"es" => "Spanish",
"it" => "Italian"
?>Archivo it.php
<?php
$lang = array(
"title" => "Il mio sito Web in italiano",
"Inicio" => "iniziazione",
"Precios" => "Prezzi",
"Contacto" => "Contatto",
"Descripcion" => "Questa è la descrizione del mio sito Web Italiano",
"Titular" => "Il mio sito Web in Italiano",
"en" => "Inglese",
"es" => "Spagnolo",
"it" => "Italiano"
)
?>Archivo ru.php
<?php
$lang = array(
"title" => "Мой русский сайт",
"Inicio" => "Дома",
"Precios" => "цены",
"Contacto" => "контакт",
"Descripcion" => "Это описание моего русского сайта",
"Titular" => "Мой русский сайт",
"en" => "английский",
"es" => "испанский",
"it" => "итальянский",
"ru" => "русский"
)
?>Enlace de Bootstrap para las CSS básicas del proyecto de hacer un sitio multidioma en PHP
Enlace de la modelo de la plantilla que muestro en el vídeo
Le das guardar como a la imagen, la conviertes a PNG y la pones el proyecto tal como muestro en el vìde
Activación del Servidor Local
Para este punto ya debimos haber instalado XAMPP. Solo es acceder a XAMPP, en mi caso que tengo un ordenador Windows 10 con 64 bits de arquitectura, presiono la tecla de Windows, escribo XAMPP, le doy Abrir y luego en el panel, activo el servicio de Apache. No necesito activar otro más.
Posterior a la activación del servicio de Apache, según el nombre que le hayas puesto a la carpeta de tu proyecto, solo pones en el navegador
localhost/'nombre de tu carpeta'
Para el caso del vídeo, la dirección sería la siguiente:
localhost/multilenguaje
Para este punto, ya el proyecto debe estar funcional en tu ordenador, en el vídeo relacionado, en adición explico, como agregar otros idiomas.
