Lokalizace v PHP

Jak psát vícejazyčné aplikace v PHP? PHP disponuje prostředky pro použití lokalizačních souborů. Zdrojový předpis pro lokalizované popisky pro různé jazyky jsou v .po souboru:  

Obsah messages.po
  

################################################################
# Hlavní stránka
################################################################
msgid "Main Page"
msgstr "Hlavní stránka"

################################################################
# Navbar
################################################################
msgid "Current Time"
msgstr "Aktuální čas"

msgid "Logout"
msgstr "Odhlásit"

Tento textový soubor je potřeba převést do binárního .mo tvaru:

msgfmt messsages.po -o messages.mo 

 pozn. msgfmt je součástí gettext na unixu. Pro Windows nainstalujte Cygwin jehož součástí je i msgfmt nebo je možné použít například POEDIT (https://poedit.net/).



Inicializace localizace je v PHP následující:
 

function initialize_i18n($locale) {
 $locales_root = $_SERVER['DOCUMENT_ROOT'] . "/locale";
 putenv('LANG='.$locale);
 setlocale(LC_ALL,$locale);
 if ( ! defined( 'LC_MESSAGES' ) ) {
  define( 'LC_MESSAGES', 5 );
 }
 setlocale(LC_MESSAGES,$locale);
 setlocale(LC_CTYPE,$locale);
 $current='messages';
 bindtextdomain($current,$locales_root);
 textdomain($current);
}

initialize_i18n('cs_CZ');

Inicializace určuje umístění lokalizačních souborů .po a .mo do adresáře /locale. Tento adresář pak obsahuje podadresáře podle lokalizací:

/locale
  /cs_CZ
    /LC_MESSAGES
      messages.po
      messages.mo
  /en_US
    /LC_MESSAGES
      messages.po
      messages.mo

V PHP kódu pak použít funkci _ s parametrem dohledávaného klíče (pokud klíč není v messages.mo nalezen, zobrazí se vlastní klíč).

Fragment PHP kódu:

<a class='navbar-brand' href='#'>"<%php echo _('Main Page') %>"</a>

Pozor na Cross-Origin Resource Sharing (CORS)

Pokud v Javascriptu voláte nějaký zdroj na serveru, ze kterého nepochází váš Javascript. Například voláte z Javascriptu v browseru nějakou REST službu na jiném serveru, musí hlavičky přesně odpovídat CORS. Jinak se na službu nedovoláte.
V některých případech odešle dokonce browser nejprve ověřovací OPTION dotaz, kterým si u serveru ověří, zda může request odeslat viz:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Jak provést redirect v Butotn onClick handleru

React router posílá do komponenty property history, kterou lze použít pro provedení přesměrování na další stránku.

import React, { Component } from 'react';
import { Button } from 'react-bootstrap';
import {withRouter} from 'react-router-dom';


class Home extends Component {

    doRedirect = () => {
        this.props.history.push('/next_page');    }

    render() {
         return (
                          <Button onClick={this.doRedirect} >
                            Klikni pro přesměrování
                          </Button>
        );
    }
}

export default Home;

pokud je potřeba do handleru poslat i nějaká data, lze takto:

    doRedirect = (id) => {
        this.props.history.push('/next_page/'+id);    }


    render() {
         return (
                          <Button onClick={(e) => this.doRedirect("12345",e)} >
                            Klikni pro přesměrování
                          </Button>
        );

nebo zjednodušeně:

    render() {
         return (
                          <Button onClick={() => this.doRedirect("12345")} >
                            Klikni pro přesměrování
                          </Button>
        );

Jak propagovat custom properites do komponenty v případě použití react-router

Namísto původní route, která používá compoent atribut
 <Route path="/" compoent={Home} />

použít atribut render a předat custom properties k původním, které používá vlastní Router:

<Route path="/" render={props => <Home runSection={actions.runSectionCall} getUnitStatus={actions.getUnitStatusCall} {...props} />} />

Kde nastavit komponmentu z výsledku REST volání v React?

Ideální pro provolání REST API a nastavení stavu komponenty podle výsledku volání je hook (nebo jinak Lifecycle method) metoda componentDidMount. V době, kdy React framework zavolá tuto metodu je již připravený DOM a existuje také state, do kterého zaznamenáme výsledek REST volání.

Jak nastavit title a favicon v React

Jednoduché použití s react-helmet

Pomocí npm naistalujte react-helmet

npm install --save react-helmet

Do úvodu v App.js vložte

import {Helmet} from 'react-helmet'; 
import favicon from '../img/favicon.ico';

V render() stránky pak uveďte:

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="icon" href={favicon} />
            </Helmet>
            ...
        </div>
    );
  }
};

Jak vložit obrázek v React

Přímý odkaz v React nebude fungovat. Obrázek je nunto vložit pomocí importu.

import logoImage from '../img/logoMain.gif';

a pak se na něj odkázat v React komponentě Image:

<Image src={logoImage} />

Jak přidat do React - bootstrap ikonky s počasím

Knihovna ikonek se symboly počasí je na těchto stránkách:

http://erikflowers.github.io/weather-icons/

Nahrajte ikonky jako modul do React aplikace:

npm install --save weather-icons

Do index.js přidejte odkaz na weather-icons:

import 'weather-icons/css/weather-icons.css';

V aplikaci pak použijte class wi wi-............. :

<Button bssize="small" bsstyle="warning"><i class="wi wi-day-storm-showers"></i></Button> 

Výsledek pak vypadá takto:

Nette

Oblíbený PHP framework pro vývoj Web aplikací. Vyzkoušel jsem si jeho instalaci. Níže jsem popsal několik drobností, které jsem musel během instalace řešit.

Příprava prostředí pro vývoj v Nette

Připravit Apache Web Server s VC15 (http://www.apachelounge.com/)
Rozbalit do adresáře a nakonfigurovat httpd.conf: SeverRoot a DocumentRoot

Nainstalovat PHP

Nainstalovat composer https://getcomposer.org/download/

Pomoci composer založit Nette projekt.

Kompletní instalace Apache, PHP lze pomocí instalátoru Bitnami WAMP:

 Bitnami WAMP Stack provides a complete, fully-integrated and ready to run WAMP development environment. In addition to PHP, MySQL and Apache, it includes FastCGI, OpenSSL, phpMyAdmin, ModSecurity, SQLite, ImageMagick, xDebug, Xcache, OpenLDAP, ModSecurity, Memcache, OAuth, PEAR, PECL, APC, GD, cURL and other components and the following frameworks:Zend Framework, Symfony, CodeIgniter, CakePHP, Smarty, Laravel.

➯Po instalaci nenaběhl Apache. Je nutno ještě do php.ini přidat:

opcache.file_cache="C:\temp"
opcache.file_cache_fallback=1

Pro další instalace možno doinstalovat composer (https://getcomposer.org/download/)

Nette pak nainstalovat prostřednictvím composeru:

composer create-project nette/web-project

Projekt lze vyzkoušet pomocí příkazu php v adresáři porojektu:

php -S localhost:8000 -t www

V prohlížeči by se na http://localhost:8000 měla objevit náledující strínka: