Pesquisar

6 de dez. de 2014

Como resolver problemas de Charset Encoding - HTML, PHP, MySQL, JS, CSS e XML - De uma vez por todas!

É comum ver aspirantes ou mesmo desenvolvedores "quebrarem a cabeça" para resolver problemas de charset/encoding, o que é uma verdadeira perda de tempo e de produção se forem seguidos os passos corretamente aqui. Acentos com caracteres e caracteres especiais se tornam códigos como ù e �.

Vamos priorizar o uso da codificação padrão universal UTF-8 para resolver nossos problemas de codificação.

O mais importante de tudo, é na hora de salvar nossos arquivos! Quando criar um arquivo e salvar, salve como UTF-8 e corrija o conteúdo, isso praticamente cessa o problema sem necessitar indicar "charset='utf-8' aqui e ali"! Vamos aos ambientes de programação mais comuns e ver como se faz isso:

Bloco de notas:

 

Ao tentar fechar um arquivo não salvo ou clicar no item do menu "Arquivo > Salvar como..." Esta tela aparecerá:
Então, salve como UTF-8.

como resolver probelmas de charset


 

Notepad++:

 

No item do menu "Formatar" coloque: "Codificação em UTF-8 (Sem BOM)"


Se ali dentro do arquivo já estiver com o texto em má codificação, clique em "Converter para UTF-8 (Sem BOM)" , depois corrija os erros e coloque em UTF-8 como visto acima, e já pode salvar seus arquivos tranquilamente e abri-los sem dar problema.

Eclipse:

 

Vá no item do menu "Window > Preferences", e abrirá uma janela. Nela, abra a lista "General" e clique em "Workspace", como visto abaixo. E no inferior da página mude de "Default Cp1252" ou qualquer outra opção selecionada para: "Other: UTF-8"



 Assim deve servir para Sublime Text ou Netbeans...

Como eu falei lá no começo, depois de salvar e corrigir o conteúdo, o problema praticamente cessa, já que o maior problema está aqui, a maneira com qual são salvas os arquivos, já que nada adianta estar tudo padronizado para receber UTF-8 e o que você escreve e salva, na verdade, está em ISO-8859-1 ou Cp1252, por exemplos. Portanto, salve sempre os arquivos de maneira correta!

Vamos agora padronizar como os navegadores e visualizadores irão ler.

Páginas em HTML5:


Dentro da tag <head> ... </head> coloque: <meta charset="utf-8"> Ficando algo parecido com isso:

<DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<title> Seu título </title>
...
</head>

Páginas em xHTML, HTML 4.01 Trasitional, Strict e companhia:


Dentro da tag <head> ... </head> coloque: "<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />" Sem aspas, ficando algo parecido com isso:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Seu título </title>
...
</head>

Em formulários você deve usar " accept-charset="utf8" " como a seguir:

<form action="exemplo.php" method="post" accept-charset="utf-8"> ... </form>

PHP:

 

Para fazer um trabalho bom no PHP, é sempre ideal colocar a função header() como descrita abaixo, no início do arquivo ou aplicação, devendo ficar assim.:

<?php header('Content-type: text/html; charset=utf-8'); ?>
<DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<title> Seu título </title>
...
</head>

Isso dirá ao servidor como o navegador deve interpretar a codificação dessa aplicação, entretanto não se torna necessário colocar essa função se o arquivo estiver realmente salvo como UTF-8.

Ainda no PHP, se você faz algum arquivo de configuração, ou quer iniciar o arquivo realizando um padrão para todos, altere a configuração assim:

<?php
ini_set('default_charset','utf-8');
mb_internal_encoding("UTF-8");
setlocale(LC_ALL, 'pt_BR.utf8');
?>

Você pode usar no início da página como a função header() acima.

Extras:

 

Você pode usar a função do PHP:
utf8_decode("texto") para converter o "texto" que está em UTF-8 para ISO-8859-1;
utf8_encode("texto") codifica a string "texto" (na codificação em que ela estiver) para UTF-8;

Alterando o MySQL pelo PHP:

Você pode alterar por SET NAMES o MySQL pelo PHP, deixando padronizado todos os nomes para UTF-8, assim:

<?php 

$link = mysqli_connect("SeuHost", "SeuUsuário", "SenhaBancoDados","NomeDoBancoDados");

/*
Meu colega Jhonatta me lembrou do PDO! Se você o usa isto deve bastar : 
$link= new PDO("mysql:host=SeuHost;dbname=NomeDoBancoDados;charset=utf8","SeuUsuário","SenhaBancoDados"); 
*/
$query[0] = mysqli_set_charset($link, "utf8");
//ou mysqli_query($link, "SET CHARACTER SET utf8");
$query[1] = mysqli_query($link, "SET NAMES 'utf8' ");
$query[2] = mysqli_query($link, "SET character_set_results=utf8");
?>

Todos os SETs de charset se tornam desnecessários se você já tiver colocado o banco de dados com charset em UTF-8 como visto se vê no tópico abaixo:

MySQL:

 

Clique no banco de dados ou em alguma tabela dele, e aparecerá uma tela como esta abaixo.
  • Se você clicar no link do nome do banco de dados para colocar todo o banco em UTF-8, Vá em "Operações" e no grupo "Agrupamento (Collation)" selecione: "utf8_general_ci".
  • Se você for em alguma tabela do banco e quiser colocar ela para UTF-8, vá também em "Operações" e no grupo "Opções da Tabela", e no "Agrupamento (Collation)" selecione "utf8_general_ci".


Pronto, agora seu banco de dados ou tabelas estarão colocando os dados para UTF-8.

Framework CodeIgniter:

 

Se você usa algum framework, é provável que ele tenha uma área só de configuração de com uma instância para charsets. Como um extra trago aqui rapidamente o local onde estão as configurações dele a respeito.

Entre no diretório principal da sua aplicação e vá no seguinte arquivo: "application/config/database.php"
Altere o valor dos arrays $db['default']['char_set'] e $db['default']['dbcollat'] assim:


$db['default']['char_set'] = 'utf8';
$db['default']['dbcollat'] = 'utf8_general_ci';


Javascript


Nos seus scripts, de forma simples, basta adicionar "charset="utf-8" " , lembrando com clareza de que usar esse atributo é desnecessário se o arquivo for salvo como UTF-8:
<script src="scripts.js" charset="utf-8"></script>

CSS:

No início das suas StyleSheets, coloque o código: @charset "UTF-8";

XML:

 

Relativamente simples também, quando for iniciar um XML basta adicionar: "encoding=utf-8" :
<?xml version="1.0" encoding="utf-8" ?>



Pronto! Você nunca mais terá problemas com charsets "bugando" na sua vida!

Pesquisas  relacionadas:
  • Problemas com charset
  • Codificação da página errada
  • Erro na codificação charset
  • UTF-8 and ISO-8859-1 Error encoding

2 comentários:

  1. Sugiro incluir a opção de usar o collate utf8_swedish_ci para que as consultas não diferenciem acentos e "ç". Usuários sempre pedem, e se feito em SQL pesa na performance.

    ResponderExcluir