## Lógica de paginação do Google

A lógica na paginação do Google é a seguinte:

Há 10 links de página mostrados a qualquer momento (por exemplo, 1 2 3 4 5 6 7 8 9 10) a menos que haja menos de 10 páginas totais
o link ativo (página atual) está na 6ª posição, exceto quando o link ativo da página está abaixo de 6 ou a menos de 4 da última posição

Aqui está o que parece para cada página se houver 15 páginas totais:

<AngularPagination />

## Executando o Exemplo Angular 2 Localmente

Foi usado o projeto angular 2 quickstart como uma base para o aplicativo, ele é escrito em TypeScript e usa systemjs para carregar módulos. Também é possivel usar o angular-cli para o aplicativo importando os componetes e services. Se você é novo no angular 2, eu recomendaria verificar o curos de angular 2 da [Loiane Groner](https://www.youtube.com/playlist?list=PLGxZ4Rq3BOBoSRcKWEdQACbUCNWLczg2G), pois ela ensina em detalhes sobre como criar projetos com angular-cli.

1. Instale NodeJS e NPM de [nodejs.org](https://nodejs.org/en/download/), você pode verificar as versões que você instalou executando `node -v` e `npm -v` da linha de comando.

1. Faça o download do código-fonte do projeto em [github.com/cornflourblue/angular2-pagination-example](https://github.com/cornflourblue/angular2-pagination-example)

1. Instale todos os pacotes necessários com `npm install` npm é executando a partir da linha de comando na pasta raiz do projeto (onde o package.json está localizado).

1. Inicie o aplicativo executando `npm start` a partir da linha de comando na pasta raiz do projeto.

## Pager Service - Lógica de paginação em TypeScript como a do Google

Para facilitar a reutilização da lógica de paginação em diferentes componentes ou módulos Angular 2, colocamos a lógica de paginação em um serviço angular 2.

```typescript
import * as _ from 'underscore';

export class PagerService {
 getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) {
 // calculando o total de paginas
 let totalPages = Math.ceil(totalItems / pageSize);

 let startPage: number, endPage: number;
 if (totalPages <= 10) {
 // Se tiver menos de 10 páginas totais para mostrar tudo
 startPage = 1;
 endPage = totalPages;
 } else {
 // Se tiver mais de 10 páginas totais, calcular as páginas inicial e final
 if (currentPage <= 6) {
 startPage = 1;
 endPage = 10;
 } else if (currentPage + 4 >= totalPages) {
 startPage = totalPages - 9;
 endPage = totalPages;
 } else {
 startPage = currentPage - 5;
 endPage = currentPage + 4;
 }
 }

 // Cálculo de índices de itens iniciais e finais
 let startIndex = (currentPage - 1) * pageSize;
 let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

 // Criar um array de páginas para o ng-repeat no componente
 let pages = _.range(startPage, endPage + 1);

 // Retornar objeto com todas as propriedades exigidas para exibição
 return {
 totalItems: totalItems,
 currentPage: currentPage,
 pageSize: pageSize,
 totalPages: totalPages,
 startPage: startPage,
 endPage: endPage,
 startIndex: startIndex,
 endIndex: endIndex,
 pages: pages,
 };
 }
}
```

## AppComponent que usa o serviço Pager

Um exemplo de componente angular 2 que usa o Pager Service acima para paginar uma lista de itens fictícios que são extraídos de um arquivo json no servidor.

```typescript
import { Component, OnInit } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

import * as _ from 'underscore';

import { PagerService } from './_services/index';

@Component({
 moduleId: module.id,
 selector: 'app',
 templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
 constructor(private http: Http, private pagerService: PagerService) {}

 // array com todos os itens a serem paginados
 private allItems: any[];

 // pager object
 pager: any = {};

 // items paginados
 pagedItems: any[];

 ngOnInit() {
 // pega os arquivos
 this.http
 .get('./dummy-data.json')
 .map((response: Response) => response.json())
 .subscribe((data) => {
 //Definir os itens para a resposta json
 this.allItems = data;

 //Inicializar na página 1
 this.setPage(1);
 });
 }

 setPage(page: number) {
 if (page < 1 || page > this.pager.totalPages) {
 return;
 }

 // pega o objeto pager do serviço
 this.pager = this.pagerService.getPager(this.allItems.length, page);

 // pega a página atual de itens
 this.pagedItems = this.allItems.slice(
 this.pager.startIndex,
 this.pager.endIndex + 1
 );
 }
}
```

## HTML Template com itens paginados e navegação

Um exemplo de modelo angular 2 que mostra uma lista de itens paginados e os links de paginação para navegar entre páginas.

```html
<div>
 <div class="container">
 <div class="text-center">
 <h1>Angular 2 - Lógica de Paginação</h1>

 
 <div *ngFor="let item of pagedItems">{{item.name}}</div>

 
 <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
 <li [ngClass]="{disabled:pager.currentPage === 1}">
 <a (click)="setPage(1)">Início</a>
 </li>
 <li [ngClass]="{disabled:pager.currentPage === 1}">
 <a (click)="setPage(pager.currentPage - 1)">Anterior</a>
 </li>
 <li
 *ngFor="let page of pager.pages"
 [ngClass]="{active:pager.currentPage === page}"
 >
 <a (click)="setPage(page)">{{page}}</a>
 </li>
 <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
 <a (click)="setPage(pager.currentPage + 1)">Próximo</a>
 </li>
 <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
 <a (click)="setPage(pager.totalPages)">Último</a>
 </li>
 </ul>
 </div>
 </div>
</div>
```

O projeto está disponível no GitHub em [github.com/cornflourblue/angular2-pagination-example](https://github.com/cornflourblue/angular2-pagination-example)

---

## Referências

- Blog do Jason Watmore - [Angular 2 - Pagination Example with Logic like Google](http://jasonwatmore.com/post/2016/08/23/angular-2-pagination-example-with-logic-like-google)
- Documentação do Angular 2 - [Angular docs](https://angular.io/docs/ts/latest/)

Este é um exemplo de como implementar uma paginação em Angular 2 com uma lógica como a do Google.

Strobe - deadmau5

Esses exemplos fornecem trechos de código testado para a exibição de vários
formatos de data em um site Jekyll. Eles também devem funcionar no GitHub Pages,
Shopify ou qualquer outra coisa que usa Liquid.

Jekyll (gerador de site estático) usa do Shopify o
[Liquid Template Engine](https://docs.shopify.com/themes/liquid-documentation/basics).
Para ver as datas é usando a tag `{{ page.date }}` fornecida pelo Liquid.
Com nenhuma outra alteração, as datas produzidas são algo como:

```
2015-12-17 09:00:00 -0300
```

Se houver projetos que usam esse formato, eles são poucos e não se relacionam.
A criação de uma data mais amigável é feita através da aplicação do filtro `date:` do Liquid.
Por exemplo, combinando a tag e o filtro:

```tsx
{{ page.date | date: '%B %d, %Y' }}
```

produz uma data mais amigável ao leitor:

```
December 17, 2015
```

Com isso fica muito melhor, mas dependendo da data, as questões de sutileza no design aparecem.
Por exemplo, durante os primeiros nove dias de cada mês "zeros à esquerda"
surgem (Ex: "August 03, 2013" em vez de "August 3, 2013").
Outros erros básicos com os filtros do Liquid incluem:

1. Adicionando uma data com os nomes dos meses abreviados temos que ajustar para lidar
 com Maio que em ingles fica May. Por exemplo, "Aug. 16, 2013" está abreviado.
 "May. 16, 2013" não esta.

2. Setembro é geralmente abreviado em ingle como "Sept" e não "Sep" como é o padrão do Liquid.

3. Para cumprir com o estilo americano os meses _April_, _May_, _June_ e _July_ não devem ser abreviados.
 Alterações semelhantes são necessárias para atender as orientações do Manual de Estilo de Chicago.

A maioria dos projetos acompanham os padrões disponíveis. Ou usando um formato que
não tem esses problemas ou, mais frequentemente, não se importam com esses detalhes.
Mesmo com essa situação as datas ainda ficam na home dos sites e como cada projeto
tem sua lista de tarefas de possíveis mudanças que se estendem até o horizonte as
datas não são itens de importância. Então é comum adiar encontrar uma solução, mas
não ter formatação de data adequada é sempre um incomodo. Enquanto essas soluções
resolverem a questão, esta postagem será como uma referência pública também.

Este conjunto de filtros para datas do Liquid resolve os problemas listados acima
e explora algumas outras opções de formatação. Cada um oferece uma solução para
um formato de exibição específico e é fornecido com quatro exemplos de saída
para as seguintes datas: 1) _3 de Maio de 2015_, 2) _4 de Julho 2015_, 3) _23 Setembro de 2015_ e 4) _26 de Novembro de 2015_. Estes exemplos demonstram como
os vários problemas de formatação são manipulados. Após os exemplos, alguns trechos
de código para elementos individuais são fornecidos. Com estas amostras, é fácil
conseguir praticamente qualquer formato de data desejado.

## Usando Filtros do Jekyll para Date

- **Data para String**

 ```tsx
 {{ page.date | date_to_string; }}
 ```

 Saída do Examplo 1: **03 May 2015** 
 Saída do Examplo 2: **04 Jul 2015** 
 Saída do Examplo 3: **23 Sep 2015** 
 Saída do Examplo 4: **26 Nov 2015** 

- **Data para String longa**

 ```tsx
 {{ page.date | date_to_long_string; }}
 ```

 Saída do Examplo 1: **03 May 2015** 
 Saída do Examplo 2: **04 July 2015** 
 Saída do Examplo 3: **23 September 2015** 
 Saída do Examplo 4: **26 November 2015** 

- **Data no padrão XML**

 ```tsx
 {{ page.date | date_to_xmlschema; }}
 ```

 Saída do Examplo 1: **2015-05-03T00:00:00-03:00** 
 Saída do Examplo 2: **2015-07-04T00:00:00-03:00** 
 Saída do Examplo 3: **2015-09-23T00:00:00-03:00** 
 Saída do Examplo 4: **2015-11-26T00:00:00-03:00** 

- **Data no padrão RFC-822**

 ```tsx
 {{ page.date | date_to_rfc822; }}
 ```

 Saída do Examplo 1: **Sun, 03 May 2015 00:00:00 -0300** 
 Saída do Examplo 2: **Sat, 04 Jul 2015 00:00:00 -0300** 
 Saída do Examplo 3: **Wed, 23 Sep 2015 00:00:00 -0300** 
 Saída do Examplo 4: **Thu, 26 Nov 2015 00:00:00 -0300** 

## Formatação de datas no Jekyll com Liquid

- **Data no formato ISO 8601**

 ```tsx
 {{ page.date | date: "%Y-%m-%d" }}
 ```

 Saída do Examplo 1: **2015-05-03** 
 Saída do Examplo 2: **2015-07-04** 
 Saída do Examplo 3: **2015-09-23** 
 Saída do Examplo 4: **2015-11-26** 

- **Data no formato Americano com ano de 4 digitos** (com zeros à esquerda)

 ```tsx
 {{ page.date | date: "%m/%d/%Y" }}
 ```

 Saída do Examplo 1: **05/03/2015** 
 Saída do Examplo 2: **07/04/2015** 
 Saída do Examplo 3: **09/23/2015** 
 Saída do Examplo 4: **11/26/2015** 

- **Data no formato Americano com ano de 4 digitos** (sem zeros à esquerda)

 ```tsx
 {{ page.date | date: "%-m/%-d/%Y" }}
 ```

 Saída do Examplo 1: **5/3/2015** 
 Saída do Examplo 2: **7/4/2015** 
 Saída do Examplo 3: **9/23/2015** 
 Saída do Examplo 4: **11/26/2015** 

- **Data no formato Americano com ano de 2 digitos** (sem zeros à esquerda)

 ```tsx
 {{ page.date | date: "%-m/%-d/%y" }}
 ```

 Saída do Examplo 1: **5/3/15** 
 Saída do Examplo 2: **7/4/15** 
 Saída do Examplo 3: **9/23/15** 
 Saída do Examplo 4: **11/26/15** 

- **Data no formato Americano com mês completo** (sem zeros à esquerda)

 ```tsx
 {{ page.date | date: "%-d %B %Y" }}
 ```

 Saída do Examplo 1: **3 May 2015** 
 Saída do Examplo 2: **4 July 2015** 
 Saída do Examplo 3: **23 September 2015** 
 Saída do Examplo 4: **26 November 2015** 

- **Data no formato Brasileiro com mês completo** (sem zeros à esquerda)

 ```tsx
 {% raw %}
 {% assign m = page.date | date: "%-m" %}
 {{ page.date | date: "%-d de" }}
 {% case m %}
 {% when '1' %}Janeiro
 {% when '2' %}Fevereiro
 {% when '3' %}Março
 {% when '4' %}Abril
 {% when '5' %}Maio
 {% when '6' %}Junho
 {% when '7' %}Julho
 {% when '8' %}Agosto
 {% when '9' %}Setembro
 {% when '10' %}Outubro
 {% when '11' %}Novembro
 {% when '12' %}Dezembro
 {% endcase %}
 {{ page.date | date: " de %Y" }}
 {% endraw %}
 ```

 Saída do Examplo 1: **3 de Maio de 2015** 
 Saída do Examplo 2: **4 de Julho de 2015** 
 Saída do Examplo 3: **23 de Setembro de 2015** 
 Saída do Examplo 4: **26 de Novembro de 2015** 

- **Data no formato padrão Americano com mês completo** (sem zeros à esquerda)

 ```tsx
 {{ page.date | date: "%B %-d, %Y" }}
 ```

 Saída do Examplo 1: **May 3, 2015** 
 Saída do Examplo 2: **July 4, 2015** 
 Saída do Examplo 3: **September 23, 2015** 
 Saída do Examplo 4: **November 26, 2015** 

- **Data no formato Americano com mês completo e dias ordenados** (sem zeros à esquerda)

 ```tsx
 {% raw %}
 {% assign d = page.date | date: "%-d" %}
 {{ page.date | date: "%B" }}
 {% case d %}
 {% when '1' or '21' or '31' %}{{ d }}st
 {% when '2' or '22' %}{{ d }}nd
 {% when '3' or '23' %}{{ d }}rd
 {% else %}{{ d }}th
 {% endcase %},
 {{ page.date | date: "%Y" }}
 {% endraw %}
 ```

 Saída do Examplo 1: **May 3rd 2015** 
 Saída do Examplo 2: **July 4th 2015** 
 Saída do Examplo 3: **September 23rd 2015** 
 Saída do Examplo 4: **November 26th 2015** 

- **Data no formato Brasileiro com dia e mês completo** (sem zeros à esquerda)

 ```tsx
 {% raw %}
 {% assign d = page.date | date: "%a" %}
 {% assign m = page.date | date: "%-m" %}
 {% case d %}
 {% when "Sun" %}Domingo
 {% when "Mon" %}Segunda feira
 {% when "Tue" %}Terça feira
 {% when "Wed" %}Quarta feira
 {% when "Thu" %}Quinta feira
 {% when "Fri" %}Sexta feira
 {% when "Sat" %}Sábado
 {% endcase %}
 {{ page.date | date: "%-d de " }}
 {% case m %}
 {% when '1' %}Janeiro
 {% when '2' %}Fevereiro
 {% when '3' %}Março
 {% when '4' %}Abril
 {% when '5' %}Maio
 {% when '6' %}Junho
 {% when '7' %}Julho
 {% when '8' %}Agosto
 {% when '9' %}Setembro
 {% when '10' %}Outubro
 {% when '11' %}Novembro
 {% when '12' %}Dezembro
 {% endcase %}
 {{ page.date | date: " de %Y" }}
 {% endraw %}
 ```

 Saída do Examplo 1: **Domingo, 3 de Maio de 2015** 
 Saída do Examplo 2: **Sábado, 4 de Julho de 2015** 
 Saída do Examplo 3: **Quarta feira, 23 de Setembro de 2015** 
 Saída do Examplo 4: **Quinta feira, 26 de Novembro de 2015** 

---

## Referências

- Blog do Alan W. Smith - [Jekyll Date Formatting Examples](http://alanwsmith.com/jekyll-liquid-date-formatting-examples)
- Documentação do Liquid - [Liquid for Designers](https://github.com/Shopify/liquid/wiki/Liquid-for-Designers)
- Documentação do Shopify - [Additional Filters](https://docs.shopify.com/themes/liquid-documentation/filters/additional-filters#date)

Tudo o que você queria saber sobre formatação de datas no Jekyll, mas tinham medo de perguntar.

Houdini - Foster The People

Formatação de datas no Jekyll

Lógica de Paginação com Angular

Quando iniciamos um projeto do zero, fica fácil decidir qual a versão do PHP será usada.
Mais quando se trata de softwares legados, temos que utilizar a versão na qual o software foi feito.
As vezes também pode ocorrer que o servidor de hospedagem utilizado usa uma versão do PHP
que não temos instalado em nosso ambiente de desenvolvimento.

Com tudo isso, torna-se necessário instalar várias versões de PHP no mesmo ambiente de
desenvolvimento para diminuir a possibilidade de erros na hora de subir a aplicação
para o ambiente de produção.

## Wampserver 3.0

Desde 01 de maio de 2014, o wampserver 2.5 não sofria uma atualização,
o projeto parecia ter sido abandonado pela empresa francesa Alterway
que mantinha o projeto no sourceforge. Mais um francês de 71 anos de idade,
Dominique Ottello de codinome Otomatic, revoltado com o descaso, começou a
ele mesmo a fazer as atualizações do wampserver e a postá-las no fórum do
wampserver, ele chegou a atualizar até a versão 2.5.18 quando enfim a Alterway
decidiu implementar as atualizações feitas por ele e a inclui-lo no processo de
desenvolvimento do wampserver.

Veja o Changelog do wampserver 2.5.18 [aqui](http://forum.wampserver.com/read.php?2,130837).

Veja o Changelog do wampserver 3.0.0 [aqui](http://forum.wampserver.com/read.php?2,136483).

## Por onde começar?

Existem dois modos de adicionar versões do PHP no wampserver.
Uma das maneiras é a manual que pode ser conferida
[aqui nesse artigo](/blog/atualizando-a-versao-do-php-no-wampserver/).
E a outra é utilizando os add-ons do próprio wampserver.
Nesse artigo, vou mostrar como adicionar uma nova versão do PHP utilizando
os add-ons do wampserver 3.0.

1. Instale o wampserver 3.0 no [sourceforge](https://sourceforge.net/projects/wampserver/files/latest/download)

 > É importante notar que apenas as versões do PHP 5.5 e superiores
 > dão suporte 64 bits por isso para instalar versões como o
 > PHP 5.4 ou inferiores é necessário instalar o wampserver x86

2. Baixe os Add-ons do _wampserver x86_ 
 - [PHP 5.3](http://sourceforge.net/projects/wampserver/files/WampServer%203/WampServer%203.0.0/Addons/wampserver3_x86_addon_php5.3.29.exe/download)
 - [PHP 5.4](http://sourceforge.net/projects/wampserver/files/WampServer%203/WampServer%203.0.0/Addons/wampserver3_x86_addon_php5.4.45.exe/download)
 - [PHP 5.5](http://sourceforge.net/projects/wampserver/files/WampServer%203/WampServer%203.0.0/Addons/wampserver3_x86_addon_php5.5.30.exe/download)
 - [PHP 5.6](https://sourceforge.net/projects/wampserver/files/WampServer%203/WampServer%203.0.0/Addons/Php/wampserver3_x86_addon_php5.6.27.exe/download)
 - [PHP 7.0](https://sourceforge.net/projects/wampserver/files/WampServer%203/WampServer%203.0.0/Addons/Php/wampserver3_x86_addon_php7.0.13.exe/download)
 - [PHP 7.1](https://sourceforge.net/projects/wampserver/files/WampServer%203/WampServer%203.0.0/Addons/Php/wampserver3_x86_addon_php7.1.0.exe/download)
 - _Opcional_ [Apache 2.2](https://sourceforge.net/projects/wampserver/files/WampServer%203/WampServer%203.0.0/Addons/Apache/wampserver3_x86_addon_apache2.2.31.exe/download)

## PHP na linha de comando

O PHP, assim como outras linguagens de programação, oferece a opção
de execução via linha de comando. Para quem usa o [Composer](https://getcomposer.org/) é preciso
definir a variável de ambiente do PHP no Windows. Mas já que temos
várias versões do PHP instaladas será mais eficiente fazer com que
a variável de ambiente do Windows mude conforme mudamos a versão do php no wampserver.

Para isso vamos precisar cria um arquivo **php.bat** para que dinamicamente mude a variável de ambiente "PATH" após troca da versão do PHP no wampserver. O arquivo deve se parecer com esse abaixo.

```bat
@REM This file detects the current enabled PHP version
@REM of wampserver (http://www.wampserver.com/) and executes the enabled php.exe
@REM and all parameters are passed
@REM Copy this file to WAMPSERVERPATH\bin\php
@REM Now you can add WAMPSERVERPATH\bin\php to your Windows Environment-Variable "PATH".
@REM Now you can use "php" global. For example "php -v".
@REM You can show the current PHP version with "php -v"

@setlocal enableextensions enabledelayedexpansion
@echo off

set serverPath="%~dp0\..\.."
set file="!serverPath!\wampmanager.conf"
set area=[php]
set key=phpVersion

FOR /F "tokens=*" %%a IN ('type %file%') DO (
 set ln=%%a
 if "x!ln:~0,1!"=="x[" (
 set currarea=!ln!
 ) else (
 for /f "tokens=1,2 delims== " %%b in ("!ln!") do (
 set currkey=%%b
 set currval=%%c

 if "x!area!"=="x!currarea!" (
 if "x!key!"=="x!currkey!" (
 set !currkey!=!currval:"=!
 )
 )
 )
 )
)

CALL !serverPath:"=!\bin\php\php!%key%!\php.exe %*
```

Crie o arquivo **php.bat** em `path\para-o\wamp\bin\php`

Depois adicione a variável de ambiente _PATH_ para o php _`";path\para-o\wamp\bin\php"`_
(se existir remova seu _PATH_ php antigo)

Agora você pode executar o PHP na linha de comando sempre globalmente
com a versão atual do PHP no wampserver.

Use desde o PHP 5.3 até o PHP 7.0 no Wampserver.

Don't Stop - Knightlife

Várias versões do PHP no Wampserver


Siga os passos abaixo para atualizar o php no Wampserver

1.  Parar servidor WAMP.

2.  Vá para [A página de downloads do php](http://windows.php.net/download/) e faça o dowload do pacode zip da versão do php. Certifique-se que esta baixando a versão **Thread Safe** compativel (x86 ou x64).

3.  Crie uma pasta para sua versão do php. Ex: `wamp/bin/php/php5.6.11`

4.  Extraia o zip baixado para a pasta recém-criada

5.  Copie os arquivos:

    - php.ini
    - phpForApache.ini
    - wampserver.conf

    a partir da pasta do seu PHP existente (ex: `wamp/bin/php/php5.5.12`) para a nova pasta php5.6.11.

6.  Abra os arquivos:

    - php.ini
    - phpForApache.ini

    e substitua as string da versão antiga para a nova versão. Ex: de 5.5.12 para 5.6.11

7.  Vá para `wamp/bin/apache/apache/apache2.2.11/bin` e exclua o arquivo chamado `php.ini`

8.  Reinicie o servidor WAMP.

9.  Escolha a versão antiga do php. Ex: php 5.5.12
10. Reinicie o servidor WAMP.
11. Agora escolha a nova versão do php. Ex: php 5.6.11.
12. Verifique se o caminho do PEAR está correto em php.ini, e modifique caso precise.
13. Reinicie o servidor WAMP.
14. Aproveite!


Lógica de Paginação com Angular

Formatação de datas no Jekyll

Várias versões do PHP no Wampserver

Atualizando a versão do PHP no Wampserver