Um simples encoder/decoder em php e javascript

Publicado em por _SDinfo

Meus queridos leitores, resolvi começar a publicar aqui no meu blog algumas pequenas aplicações que desenvolvo em meu tempo livre. Sendo assim segue abaixo um pequeno encoder e decoder de base 64.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<!--
Autor: Fábio Jânio
Contato: fabiojanio@segurancadigital.info
Licença: Liberdade total para modificar, utilizar e redistribuir! Favor citar a fonte.
-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Segurança Digital - Encode/Decode</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript" src="contar.js"></script>
</head>
<body>
<div id="quadro">
	<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
		<fieldset>
			<legend>Encode/Decode</legend>
			<div id="quadro_interno">
				<label for="mensagem">Digite sua mensagem:</label>
				<textarea name="msg" id="msg"  onkeyup="contarpalavra();mostrarResultado(this.value,140,'spcontando');contarCaracteres(this.value,140,'sprestante')" style="margin-top: 2px; margin-bottom: 2px; height: 120px; margin-left: 2px; margin-right: 2px; width: 600px; "></textarea><br />
				<span id="spcontando" style="font-family:Georgia;">Ainda não temos nada digitado... </span><span id="num">|| Nem uma palavra digitada...</span><br />
				<input type="submit" value="Códificar" name="submit" /><input type="submit" value="Descodificar" name="submit2" />
			</div>
		</fieldset>
	</form>
</div>
<br />
<?php
require_once('encode_decode.php');
?>
</body>
</html>

Na página index.php temos basicamente o código de apresentação do formulário. Observe que em momento algum iremos mudar de página, até mesmo quando o formulário é submetido este é enviado para a mesma página (index.php), isso pode ser notado na linha 16 (action=”<?php echo $_SERVER[‘PHP_SELF’]; ?>”), já na linha 30 é possível ver um (require_once) em ação, este tem por finalidade incluir o código da página encode_decode.php na estrutura da index.php

encode_decode.php

<?php
/*
* Autor: Fábio Jânio
* Contato: fabiojanio@segurancadigital.info
* Licença: Liberdade total para modificar, utilizar e redistribuir! Favor citar a fonte.
*/
function botao() {
	if (isset($_POST['submit'])) {
	codificar();
	}
	if (isset($_POST['submit2'])) {
	decodificar();
	}
}

function caixa_abertura() {
	echo 'Resultado:<br /><textarea border= 0px; style="margin-top: 2px; margin-bottom: 2px; height: 250px; margin-left: 2px; margin-right: 2px; width: 638px; ">';
}

function caixa_fechamento() {
	echo '</textarea>';
}

function codificar() {
$msg = $_POST['msg'];
	if (!empty($msg)) {
	caixa_abertura();
	echo base64_encode($msg);
	caixa_fechamento();
	}
	else {
	echo "<div id='erro'>Você precisa digitar um valor</div>";
	}
}

function decodificar() {
$msg = $_POST['msg'];
	if (!empty($msg)) {
	caixa_abertura();
	echo base64_decode($msg);
	caixa_fechamento();
	}
	else {
	echo "<div id='erro'>Você precisa digitar um valor</div>";
	}
}
botao();
?>

O código acima é responsável por fazer a codificação e decodificação do conteúdo, observe que este foi construído utilizando funções. Se tivermos um segundo para analisar este código,é possível notar que as funções da linha 16 e 20 poderiam ser mescladas dando origem a uma única função. Na verdade este código poderia ser construído utilizando mais ou menos funções, ou até mesmo sem utilizar funções. Cabe ao programador realizar a organização do seu código para que este fique compreensível aos demais.
contar.js

function mostrarResultado(box,num_max,campospan){
	var contagem_carac = box.length;
	if (contagem_carac != 0){
		document.getElementById(campospan).innerHTML = contagem_carac + " caracteres digitados || ";
		if (contagem_carac == 1){
			document.getElementById(campospan).innerHTML = contagem_carac + " caracter digitado || ";
		}
	}else{
		document.getElementById(campospan).innerHTML = "Ainda não temos nada digitado... || ";
	}
}

function contarpalavra() {
        getWord = document.getElementById( 'msg' ).value,
        num = document.getElementById( 'num' );
        if ( getWord == '' ) num.textContent = 'Nem uma palavra digitada...';
        else if ( getWord.search( /\s[a-z0-9]+$/gi ) > -1 ) num.textContent = getWord.replace( / +/g, ' ' ).split(' ').length + " Palavras";
        else if ( getWord.search( /[^\s]$/ ) > -1 ) num.textContent = '1 Palavra';
}

O código javascript acima realiza uma formatação e validação na camada de apresentação do usuário (browser).
style.css

#quadro {
  width: 630px;
}

#quadro_interno {
  margin-left: 4px;
  margin-bottom: 4px;
}

#erro {
  font-weight: bold;
  color: #FF0000;
}

Aqui temos um pequeno código css (folha de estilo) responsável por formatar a parte visual.