Nenhum produto encontrado nessa seleção.
Quando eu comecei a aprender a desenvolver, não tinha a menor ideia do que o tal do charset (codificação de caracteres) fazia. Como consequência disso, vivia lutando com os erros de charset em meu código.
Quando conseguia resolver o problema no HTML utilizando a meta tag referente, aparecia o problema na base de dados, quando conseguia resolver o problema da base de dados, aparecia o problema em requisições Ajax, e assim por diante. Você pode imaginar todos os tipos de problemas de codificação de caracteres, e eu posso garantir que tive todos eles no início.
Neste tutorial, vou explicar um pouco sobre o que e como evitar erros de charset no seu código, seja PHP, HTML, JavaScript ou bases de dados.
O que é charset?
Charset é a codificação de caracteres utilizada para formar qualquer valor fora das mais básicas letras do alfabeto inglês. Isso significa que você não terá problemas se utilizar apenas letras de A a Z e números de 0 a 9 no seu código. Mas quem utiliza apenas isso? E pior, quem vai confiar que um programa vai utilizar apenas letras e números?
Qualquer caractere com acento, cedilha ou caracteres especiais precisa ser decodificado para que o navegador ou o programa que você estiver utilizando saiba como apresentar seu conteúdo na tela.
Se você não for consistente e utilizar o mesmo charset em seu projeto inteiro, o texto abaixo:
Atenção, meu nome é Luiz Otávio
Pode ser apresentado assim:
Atenção, meu nome é Luiz Otávio
Para seu usuário final.
Além de prejudicar a leitura dos seus usuários, você terá problemas com SEO, já que os buscadores também não entenderão o que estiver escrito no seu site (apenas um exemplo).
Então vamos ver como corrigir este problema.
Qual charset utilizar?
Na verdade você pode utilizar qualquer charset que preferir, contanto que seja consistente e utilize o mesmo valor em todas as partes do seu código. Tanto no mais simples HTML, quanto na base de dados e códigos PHP.
Quando digo que você deve ser consistente, estou me referindo a configurar seu editor de textos com aquela codificação, e seguir o padrão em tudo o que utilizar dali em diante.
Tudo o que você utiliza para desenvolvimento pode ser configurado para uma codificação de caracteres específica, se você não achar essa configuração, infelizmente acho que você está utilizando o software incorreto.
Se eu tiver que indicar uma codificação de caracteres padrão para todos os elementos do seu projeto, com certeza iria com UTF-8. Portanto, daqui em diante vou assumir que você vai utilizar UTF-8.
Editor de textos
Todo editor de texto para desenvolvimento tem uma configuração onde você modifica a codificação de caracteres, seja pago ou gratuito.
Não tenho como detalhar como fazer a modificação em todos eles, então vou explicar como fazer apenas no Notepad++ (que é o programa que utilizo).
Alterando o charset no notepad++
Para alterar a codificação de caracteres do Notepad++, simplesmente clique no menu “Formatar” e escolha a opção “Configuração em UTF-8 (Sem BOM)”.
Codificação em UTF-8 (Sem BOM)
Infelizmente o Notepad++ não corrige o que já foi escrito, apenas mostra caracteres estranhos onde deveriam aparecer letras acentuadas e coisas do tipo. Para resolver este problema, você deve modificar o documento manualmente.
Por outro lado, você pode fazer com que todos os seus novos arquivos sejam iniciados com essa configuração. Para isso siga os passos abaixo:
- Clique em “Configurações” – “Preferências”;
- Vá até “Novo documento”;
- Marque a opção “UTF-8 sem BOM”.
UTF-8 sem BOM
Agora todos os novos documentos serão automaticamente configurados para o charset UTF-8.
O HTML
Todo documento HTML deve ter uma meta tag especificando qual charset utilizar. No HTML5 isso ficou tão simples que você pode gravar de cabeça:
<meta charset="UTF-8">
Toda meta tag deve vir na head do seu documento HTML, ou seja, para exibirmos a frase que mostrei na introdução do artigo, basta criar um documento HTML5 com o seguinte:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Título do documento</title>
</head>
<body>
<p>Atenção, meu nome é Luiz Otávio</p>
</body>
</html>Pronto, apenas com a combinação do editor de textos e a meta tag charset nos seus documentos HTML, você não terá problemas ao exibir qualquer tipo de caractere na tela do navegador.
Se seu documento for XML, faça o seguinte:
<?xml version="1.0" encoding="UTF-8" ?>
Informando UTF-8, conforme o código acima.
O PHP
Normalmente, quando exibimos qualquer caractere na tela utilizamos PHP, estamos envolvidos em documentos HTML que já trazem a meta tag charset embutida. O PHP deverá seguir o padrão e exibir os caracteres conforme o documento HTML indicar.
Se por algum motivo você precisar forçar o PHP a exibir qualquer coisa com charset UTF-8, é possível utilizar a função header.
Essa função modifica o cabeçalho do documento e deve ser utilizada antes que você exiba qualquer coisa na tela (normalmente na primeira linha do arquivo).
Veja:
<?php
// Charset UTF-8
header('Content-Type: text/html; charset=utf-8');
// Sem erros de caracteres
echo 'Atenção';
?>Se você analisar o cabeçalho do documento, agora temos a codificação de caracteres exatamente conforme esperávamos.
Cabeçalho do documento HTML
Simplesmente fazendo isso, agora seu documento não apresentará mais erros de charset.
Bases de dados
Na criação de tabelas e bases de dados, informe que a codificação de caracteres é UTF8. Qualquer programa razoavelmente bom irá perguntar qual o charset você deseja.
Configurando uma nova base de dados
Se você tiver o hábito de criar bases de dados manualmente, faça o seguinte:
CREATE DATABASE `Nome_da_BD` CHARACTER SET utf8 COLLATE utf8_bin;
O mesmo serve para tabelas:
Nova tabela
Se você tiver o hábito de criar tabelas manualmente, faça o seguinte:
CREATE TABLE `nome_da_bd`.`mesma_coisa` (`id` INT NOT NULL, PRIMARY KEY (`id`)) ENGINE = INNODB CHARSET = utf8 COLLATE = utf8_bin ;
Conexão
Uma das partes mais importantes para evitar erros de codificação com a base de dados, com certeza é a conexão. Se você não especificar o charset a ser utilizado, provavelmente terá problemas com caracteres.
Se você estiver utilizando PDO, é bem simples de resolver este problema, basta adicionar “charset=utf8” na conexão. Veja:
$conexao_pdo = new PDO(
'mysql:host=localhost;dbname=nome_da_bd;charset=utf8',
'root',
''
);
Agora você pode tanto inserir quanto buscar valores da base de dados que os caracteres serão exatamente os mesmos do seu HTML e PHP.
Não se esqueça: UTF-8
Em qualquer lugar que puder modificar a codificação de caracteres, configure para UTF-8 e você nunca mais terá problemas com caracteres estranhos aparecendo na tela.
Concluindo
Este foi um artigo bem básico, mas que detalha uma parte muito essencial da sua programação. Normalmente, livros e cursos passam por essa parte sem dar a importância requerida, com isso novos desenvolvedores também deixam de dar importância para a codificação de caracteres e sofrem com isso posteriormente.
Se você tiver alguma dica para acrescentar a este artigo, sinta-se à vontade. O mesmo serve para suas dúvidas.
Referências:
- Codificação de caracteres para iniciantes – W3C
- Codificação de caracteres – Wikipédia
