Projetista Digital

Olá Pessoal,

Continuando com nosso minicurso, vamos tratar hoje do assunto LISTAS. O uso de listas em páginas web é muito mais comum do que imaginamos: menus, galerias de fotos, notícias e vídeos etc. Sempre que precisarmos agrupar conteúdo de forma ordenada ou não, e apresentá-lo sob a forma de uma listagem, usaremos listas. Qualquer designer, desenvolvedor ou programador de interfaces que deseja trabalhar livremente com menus e outras interfaces web, aplicando efeitos CSS e uma marcação XHTML válida e acessível, tem como obrigação conhecer a fundo o uso de listas. Dentro do XHTML podemos trabalhar com três tipos de listas: ordenadas, não-ordenadas e definições. Dentro desse tutorial trabalharemos apenas com os dois tipos mais utilizados, que irão atender a totalidade dos seus trabalhos atuais e futuros: listas com ordenação e sem ordenação.

Listas Ordenadas

Chamamos de listas ordenadas aquelas cuja a informação é apresentada seguindo uma dada ordem. Normalmente os itens desse tipo de lista são apresentados com numeradores, letras ou algarismos romanos. Para iniciarmos uma lista ordenada é preciso utilizar a tag <ol></ol>. Cada item da lista é marcado pelo elemento <li></li>. Veja o código abaixo:

1
2
3
4
5
6

<h4>Listas Ordenadas</h4>
<ol>
<li>Misture os ingredientes</li>
<li>Bata no liquidificador</li>
<li>Asse por 40 minutos</li>
</ol>

Resultado:

Listas Ordenadas

1. Misture os ingredientes
2. Bata no liquidificador
3. Asse por 40 minutos

Percebam que cada item da lista possui sua própria marcação <li></li>. Se a sua lista possuir dez itens teremos um elemento <li> para cada um deles, ou seja dez elementos <li></li>. Sendo assim, a seguinte marcação não atenderia a nossa necessidade:

1
2
3
4
5
6

<h4>Listas Ordenadas</h4>
<ol>
<li>Misture os ingredientes
Bata no liquidificador
Asse por 40 minutos</li>
</ol>

Resultado:

Listas Ordenadas

1. Misture os ingredientes
   Bata no liquidificador
   Asse por 40 minutos

Erros comuns entre iniciantes

É um erro comum entre iniciantes marcar apenas um elemento <li>, criando listas de apenas um único item. Por isso repito: cada elemento de uma lista deve possuir sua própria marcação <li>. Outro erro bastante comum é marcar itens de lista sem iniciar a lista propriamente dita, ou seja, criar elementos <li> sem antes marcar o elemento <ol>. Essa marcação estaria errada:

1
2
3
4
5
6
7
8
9
10
11

<h4>Marcação errada</h4>
 
<li>Misture os ingredientes</li>
<li>Bata no liquidificador</li>
<li>Asse por 40 minutos</li>
 
<h4>Outra marcação errada</h4>
 
<ol>
<p>Escrevendo um parágrafo</p>
</ol>

Além do erro mencionado acima, podemos ver um terceiro erro bem comum: escrever diretamente qualquer outro elemento além de um <li> dentro de uma lista. Uma lista só pode conter ITENS, ou seja tags <li></li>. Qualquer outra tag deve ser escrita dentro dos elementos <li></li>, sob pena de escrever uma marcação inválida. Veja como ficará o código acima, quando escrito corretamente:

1
2
3
4
5
6
7
8
9
10
11
12
13

<h4>Marcação correta</h4>
 
<ol>
<li>Misture os ingredientes</li>
<li>Bata no liquidificador</li>
<li>Asse por 40 minutos</li>
</ol>
 
<h4>Outra marcação correta</h4>
 
<ol>
<li><p>Escrevendo um parágrafo</p></li>
</ol>

Resultado:

Marcação correta

1. Misture os ingredientes
2. Bata no liquidificador
3. Asse por 40 minutos

Outra marcação correta

1. Escrevendo um parágrafo

Listas não-ordenadas

Existem listas cuja informação não necessita de ordenação, essas listas são chamadas de não-ordenadas. Os itens desse tipo de lista não apresentam numeradores ou qualquer outro elemento que remeta a idéia de ordem, seus marcadores são, normalmente, glifos (umas bolinhas pretas como essa abaixo).

• Exemplo do marcador de uma lista não-ordenada

A tag que define uma lista não-ordenada é <ul></ul>, e seus elementos são marcados por <li></li> (assim como nas listas ordenadas). Tudo o que foi dito acima sobre listas ordenadas e erros de marcação, também é válido para listas não-ordenadas. Entre ambos os tipos de listas temos diferenças apenas do tipo de marcador e a questão da ordenação, de resto o funcionamento é o mesmo para ambas as listas. Vejamos a marcação de uma lista não-ordenada:

1
2
3
4
5
6
7
8
9

<h4>Lista não-ordenada</h4>
 
<ul>
<li>Maisena</li>
<li>Ovos</li>
<li>Leite</li>
<li>Farinha</li>
<li>Fermento</li>
</ul>

Resultado:

Lista não-ordenada

• Maisena
• Ovos
• Leite
• Farinha
• Fermento

Sobre a obrigatoriedade da tag de fechamento </li>

Alguns de vocês devem estar se perguntando: “mas é obrigatório fechar a tag </li>?” Sim, é obrigatório. “Ah! Mas eu aprendi há alguns anos que não era preciso”, ou então “Eu li em outro site que não preciso fechar a tag”… É o seguinte: no HTML antigo e velho de guerra, realmente não era obrigatório o fechamento da tag. Já no XHTML é necessário fechar tudo quanto é tag, mesmo elementos vazios. Aliás, falamos disso no primeiro tutorial.

O XHTML é uma versão reformulada do HTML velho, seguindo as regras sintáticas de XML. E XML exige fechamento de TODAS as tags, por isso o XHTML exige também. Então a marcação é inválida (ainda que alguns navegadores interpretem corretamente):

1
2
3
4
5
6
7
8
9

<h4>Marcação inválida</h4>
 
<ul>
<li>Maisena
<li>Ovos
<li>Leite
<li>Farinha
<li>Fermento
</ul>

Pessoal, ainda temos bastante conteúdo sobre listas e esse tutorial já está enorme. Vou dividí-lo em duas partes, então amanhã falaremos sobre listas mistas ou aninhadas (uma lista dentro da outra, criando níveis diferentes de listas). Até lá!!!

Forte abraço,
Diego.

Olá Pessoal,

Conforme prometido vamos ver como funcionam as funções fornecidas pelo PHP para tratamento de arrays.

array_push()

Essa função adiciona um valor como última posição do array. Admite dois parâmetros: o array ao qual adicionaremos um valor, e o valor a ser adicionado ao fim do array. Sua sintaxe é a seguinte: array_push(array, valor). Veja um exemplo da função em funcionamento:

1
2
3
4
5
6
7
8

<?php
//Declaro um array
$nomes = array("Diego", "Marcelo", "Maria", "João", "Mário", "José", "Juliana", "Fernanda");
//Adiciono um elemento ao fim do array
array_push($nomes, "Marcela");
//Imprimo o array
print_r($nomes);
?>

array_pop()

A função array_pop() retira um valor do fim de um array. Admite como parâmetro o nome do array a ser retirado um elemento. Sua sintaxe é: array_pop(array). Veja um exemplo de array_pop() em funcionamento:

1
2
3
4
5
6
7
8

<?php
//Declaro um array
$nomes = array("Diego", "Marcelo", "Maria", "João", "Mário", "José", "Juliana", "Fernanda");
//Retiro um elemento ao fim do array
array_pop($nomes);
//Imprimo o array
print_r($nomes);
?>

array_shift()

Essa função retira um elemento do início de um array. Admite como parâmetro o nome do array do qual retiraremos o primeiro elemento. Sua sintaxe é a seguinte: array_shift(array). Veja um exemplo da função em funcionamento:

1
2
3
4
5
6
7
8

<?php
//Declaro um array
$nomes = array("Diego", "Marcelo", "Maria", "João", "Mário", "José", "Juliana", "Fernanda");
//Retiro um elemento do começo desse array
array_shift($nomes);
//Imprimo o array
print_r($nomes);
?>

array_unshift()

Essa função insere um elemento do início de um array. Admite como parâmetros: o nome do array e o valor a ser inserido. Sua sintaxe é a seguinte: array_shift(array, valor). Veja um exemplo da função em funcionamento:

1
2
3
4
5
6
7
8

<?php
//Declaro um array
$nomes = array("Diego", "Marcelo", "Maria", "João", "Mário", "José", "Juliana", "Fernanda");
//Adiciono um elemento no começo desse array
array_unshift($nomes, "Marcela");
//Imprimo o array
print_r($nomes);
?>

array_pad()

Essa função faz com que um array seja preenchido com um determinado valor, em um dado número de posições. Admite como parâmetros: o nome do array, a quantidade posições e o valor que usaremos para preenchimento. Sua sintaxe é a seguinte: array_pad(array, quantidade_posições, valor). Veja um exemplo da função em funcionamento:

1
2
3
4
5
6
7
8

<?php
//Declaro um array
$nomes = array("Diego", "Marcelo", "Maria", "João", "Mário", "José", "Juliana", "Fernanda");
//Preencho esse array com um certo valor, um dado número de vezes
array_pad($nomes, 10, "Sem Nome");
//Imprimo o array
print_r($nomes);
?>

array_reverse()

Essa função retorna um array com seus elementos na ordem inversa. Admite dois parâmetros: o nome do array, e um valor lógico indicando se os elementos continuarão associados aos seus índices. Sua sintaxe é a seguinte: array_reverse(array, valor_lógico). Veja um exemplo da função em funcionamento:

1
2
3
4
5
6
7
8

<?php
//Declaro um array
$nomes = array("Diego", "Marcelo", "Maria", "João", "Mário", "José", "Juliana", "Fernanda");
//Inverto a posição dos elementos desse array
array_reverse($nomes, true);
//Imprimo o array
print_r($nomes);
?>

array_merge()

Essa função gera um array a partir da mesclagem dos valores de outros dois arrays, de forma que um seja adicionado ao final do outro, gerando esse novo array. Se houverem índices com o mesmo nome em ambos os arrays, o conteúdo do segundo irá se sobrepor ao primeiro. Admite como parâmetros: os dois arrays que serão mesclados. Sua sintaxe é a seguinte: array_merge(array1, array2). Veja um exemplo da função em funcionamento:

1
2
3
4
5
6
7
8
9

<?php
//Declaro os arrays
$nomes = array("Diego", "Marcelo", "Maria", "João", "Mário", "José", "Juliana", "Fernanda");
$nomes2 = array("Henrique", "Fernando");
//Gero um terceiro array com a mesclagem de outros dois
array_merge($nomes, $nomes2);
//Imprimo o array
print_r($nomes);
?>

array_keys()

Essa função retorna os índices de um array. Admite como parâmetros: o nome do array, e um dado que fará a função retornar apenas os índices cujo valor corresponda ao parâmetro. Sua sintaxe é a seguinte: array_keys(array, valor_para_busca). Veja um exemplo da função em funcionamento:

1
2
3
4
5
6
7
8

<?php
//Declaro um array
$nomes = array("Diego", "Marcelo", "Maria", "João", "Mário", "José", "Juliana", "Fernanda");
//Gero um segundo array somente com os índices do primeiro array
$chaves = array_keys($nomes);
//Imprimo o array
print_r($chaves);
?>

array_values()

Essa função retorna os valores de um array em um outro array. Admite como parâmetro o nome do array. Sua sintaxe é a seguinte: array_values(array). Veja um exemplo da função em funcionamento:

1
2
3
4
5
6
7
8

<?php
//Declaro um array
$nomes = array("Diego", "Marcelo", "Maria", "João", "Mário", "José", "Juliana", "Fernanda");
//Gero um segundo array somente com os valores do primeiro array
$values = array_values($nomes);
//Imprimo o array
print_r($values);
?>

strong>count()

Essa função retorna o tamanho de um array, ou seja a quantidade de posições que ele possui. Admite como parâmetro o nome do array. Sua sintaxe é a seguinte: count(array). Veja um exemplo da função em funcionamento:

1
2
3
4
5
6

<?php
//Declaro um array
$nomes = array("Diego", "Marcelo", "Maria", "João", "Mário", "José", "Juliana", "Fernanda");
//Conto o número de posições desse array
echo count($nomes);
?>

array_in()

Essa função busca por um dado valor dentro do array. Admite como parâmetros: conteúdo a ser buscado, nome do array. Sua sintaxe é a seguinte: array_in(valor_busca, array). Ela retorna um valor lógico TRUE em caso de sucesso, e FALSE em caso de erro. Veja um exemplo da função em funcionamento:

1
2
3
4
5
6
7
8
9
10
11

<?php
//Declaro um array
$nomes = array("Diego", "Marcelo", "Maria", "João", "Mário", "José", "Juliana", "Fernanda");
//Verifico se existe um dado valor dentro do array
if (array_in("Diego", $nomes)) {
echo "Encontramos o nome";
}
else {
echo "Não encontramos o nome";
}
?>

array_slice()

Essa função retorna um array com uma porção dos valores extraídos de um array maior, em suma ela extrai um pedaço de um array gerando um array menor. Admite como parâmetros: o nome do array, a posição inicial da porção a ser extraída, e o tamanho (quantidade de posições) da porção a ser extraída. Sua sintaxe é a seguinte: array_slice(array, posição_inicial, tamanho). Veja um exemplo da função em funcionamento:

1
2
3
4
5
6
7
8

<?php
//Declaro um array
$nomes = array("Diego", "Marcelo", "Maria", "João", "Mário", "José", "Juliana", "Fernanda");
//Gero um segundo array a partir de uma porção do primeiro
$porcao = array_slice($nomes, 3, 4);
//Imprimo o array
print_r($porcao);
?>

sort()

Essa função ordena os valores de um array, sem manter a associação de índices. Admite como parâmetro o nome do array. Sua sintaxe é a seguinte: sort(array). Veja um exemplo da função em funcionamento:

1
2
3
4
5
6
7
8

<?php
//Declaro um array
$nomes = array("Diego", "Marcelo", "Maria", "João", "Mário", "José", "Juliana", "Fernanda");
//Ordeno o array por seus valores
sort($nomes);
//Imprimo o array
print_r($nomes);
?>

rsort()

Essa função ordena de forma reversa os valores de um array, sem manter a associação de índices. Admite como parâmetro o nome do array. Sua sintaxe é a seguinte: rsort(array). Veja um exemplo da função em funcionamento:

1
2
3
4
5
6
7
8

<?php
//Declaro um array
$nomes = array("Diego", "Marcelo", "Maria", "João", "Mário", "José", "Juliana", "Fernanda");
//Ordeno em ordem reversa o array por seus valores
rsort($nomes);
//Imprimo o array
print_r($nomes);
?>

asort() e arsort()

Essas funções ordenam um array por seus valores (seja na ordem reversa ou não), porém mantém a associação de índices. Admite como parâmetro o nome do array. Sua sintaxe é a seguinte: asort(array) / arsort(array). Veja um exemplo da função em funcionamento:

1
2
3
4
5
6
7
8
9
10
11
12

<?php
//Declaro um array
$nomes = array("Diego", "Marcelo", "Maria", "João", "Mário", "José", "Juliana", "Fernanda");
//Ordeno o array por seus valores
asort($nomes);
//Imprimo o array
print_r($nomes);
//Ordeno de forma reversa
arsort($nomes);
//Imprimo
print_r($nomes);
?>

explode()

Essa função gera um array a partir de uma string, usando um caracter como separador dos elementos. Admite como parâmetros: o caracter separador, a string. Sua sintaxe é a seguinte: explode(caracter_separador, string). Veja um exemplo da função em funcionamento:

1
2
3
4
5
6

<?php
//Gero um array a partir dessa string
$data = explode("/", "09/08/1986");
//Imprimo o array
print_r($data);
?>

implode()

Essa função gera uma string a partir de um array, usando um caracter como separador dos elementos. Admite como parâmetros: o caracter separador, a string. Sua sintaxe é a seguinte: implode(caracter_separador, string). Veja um exemplo da função em funcionamento:

1
2
3
4
5
6
7
8

<?php
//Declaro um array
$data = array("09", "08", "1986");
//Gero uma string a partir desse array
$date = implode("/", $data);
//Imprimo o array
print_r($date);
?>

Bem, agora acabamos os tópicos sobre arrays em PHP. O próximo tema de nosso minicurso é gerenciamento de datas, é um assunto bem legal e útil para todos nós. Então, até lá!

Abraços,
Diego.