Embora eu sempre enxerguei como sendo meu último trabalho acadêmico a maioria dos meus professores vislumbraram que deveria ser o grande trabalho da minha vida. Ledo engano. Bom, fui aprovado, portanto não deve ter ficado tão ruim, principalmente porque apliquei nele diversas práticas que aprendi dentro e fora da instituição e se hoje fosse faze-lo novamente, estou certo de que escreveria uns 30% menos códigos, no mínimo.

De qualquer forma, eu compactei e coloco aqui como anexo. Podem baixar à vontade, só peço que, caso o utilizem de alguma forma como auxílio no seu trabalho, me citem de alguma forma como referência.

Projeto Completo

A documentação eu acrescento um outro dia.

Depois de colocar uma listagem bem simples, buscando os dados do banco e montando numa tabela, eu vou colocar o resto da implementação, bem como os arquivos do projeto.

Nesse post vamos criar a lista, pagina, postando para uma página de tratamento fictícia. Vamos usar um pouco de Javascript e CSS, mas não é obrigatório, é só para dar alguma elegância ao projeto.

Como eu fiz esse artigo meio que de encomenda para um amigo, que não queria usar Ajax, eu não isso aqui. Portanto pense nisso antes das críticas .

Bom, vamos ao código. Para fazer a chamada eu criei um arquivo chamado lstEstado.php. Nesse arquivo, vou colocar a chamada, e um tratamento para que o controle da página seja feito por aqui (o que seria dispensável se usássemos Ajax).

<?php
	// Arquivo de listagem lstEstado.php. 

	// Arquivo de conexão, faça como achar melhor
	include_once('conexao.php'); 

	// Arquivo que irá conter a função CriarLista
	include('funcoes.php');

	// Controle para o caso da variável $pg vir vazia
	// na primeira chamada da lista pelo menu
	if (!isset($_GET['pg'])) {
		$pg = 1;
	} else {
		$pg = $_GET['pg'];
	}

	// A chamada da função. Parâmetros:
	// 1 - o nome da tabela no banco
	// 2 - a quantidade de linhas que serão exibidas por páginas
	// 3 - a página que se deseja exibir
	// 4 - o arquivo que trata a postagem da lista
	// 5 - o arquivo da listagem (para paginar)
	CriarLista('estado', 7, $pg, 'req.php', 'lstEstado.php');
?>

Assim a chamada para o arquivo de listagem seria somente isso. Você poderia ter dois times de programação, um que usa as funções e outro que as desenvolve. No futuro eu oriento isso à objetos, para ficar mais interessante ainda.

No arquivo funções, eu vou ter dois blocos. O do Javascript e o do PHP propriamente dito. O bloco do Javascript, ao menos no meu arquivo, vai primeiro, mas aqui eu vou colocar depois por questões didáticas. Esse arquivo eu colocar ele inteiro aqui, mas com vários cortes para os meus comentários.

<?php
	include_once('conexao.php');

	// Criação da função...
	function CriarLista($tabela, $itemsPorPagina, $paginaAtual, $tratamento, $URL_Lista) {

		$sql = "select count(*) total from ".$tabela;
		$res = mysql_query($sql);
		$lin = mysql_fetch_assoc($res);
		$totalCidades = $lin['total'];

Nesse bloquinho acima, fizemos uma consulta ao banco para saber quantos registros eu tenho. Isso vai ser muito útil na hora de calcular a quantidade de páginas que teremos (dividindo esse total pela variável $itemsPorPagina).

No meio do código eu vou colocando imagens, que serão usadas para navegar nas páginas da listagem. Perceba que nessas eu uso a mesma $URL_Lista que recebi como parâmetro, acrescentando o parâmetro pg.

		echo "<a class=\"botao\" href=\"{$URL_Lista}?pg=1\" title=\"Primeira página\"><img src=\"navega/first.png\"></a>";

		if ($paginaAtual == 1) {
			echo "<img src=\"navega/stop.png\" />";
		} else {
			echo "<a class=\"botao\" href=\"{$URL_Lista}?pg=".($paginaAtual - 1)."\" title=\"Página anterior\"><img src=\"navega/previous.png\"></a>";
		}

Esse bloco acima, da condição da primeira página, bem como o do botão próximo, tem essa tratamento de condição somente para não deixar vazio o espaço desses botões e evitar problemas de consistência, como por exemplo, na primeira página existir um link para a página anterior que obviamente daria erro.

No bloco abaixo eu monto uma caixa de seleção com uma Option para cada página que pode existir, somente controlando a quantidade de itens que podem caber numa página. Caso a página atual seja o $i da vez naquele laço, o programa já o marca como selecionado.

Aproveitando que a última posição, que fica na variável $controle, guarda o número da última página, eu a coloco no último link do nosso navegadorzinho. Segue o código:

		echo " <select id=\"comboPagina\" onchange=\"javascript:window.location='{$URL_Lista}?pg='+(this.value)\">";

		for ($i = 1; $i <= $totalCidades; $i = $i + $itemsPorPagina) {
			$controle++;
			$selecionado = "";

			if ($paginaAtual == $controle) {
				$selecionado = " selected ";
			}

			echo "<option {$selecionado}>".$controle."</option>";
		}
		echo "</select>";

		if ($paginaAtual == $controle) {
			echo "<img src=\"navega/stop.png\" />";
		} else {
			echo "<a class=\"botao\" href=\"{$URL_Lista}?pg=".($paginaAtual + 1)."\" title=\"Próxima página\"><img src=\"navega/next.png\" /></a>";
		}

		echo "<a class=\"botao\" href=\"{$URL_Lista}?pg=".($controle)."\" title=\"Última página\"><img src=\"navega/last.png\" /></a></p>";

O código abaixo é muito semelhante ao que colocamos na semana passada. Nele, como já foi explicado, nós pegamos os dados da tabela citada no parâmetro. Com esses dados preenchemos um array, $estrutura, com os valores que essa consulta retorna (Field, Type, Collation, Null, Key, Default, Extra Privileges e Comment). Quando encontrar algum campo que na variável Key tenha o valor ‘PRI’ (Chave primária), ele o reserva na variável $campoChave (Tá, eu sei, só funciona para tabelas com uma chave única, simples, nunca composta, mas deixo isso para vocês resolverem).

No meio desse bloco já vou acrescentando os echos que vou precisar para a correta exibição do resultado. Acho que as tags falam por si.

		// *** Listagem *** //

		$sql = 'SHOW FULL COLUMNS FROM ' . $tabela;
		$res = mysql_query($sql);
		$sql = 'select ';
		$estrutura = array();
		$pos = 1;

		echo "
			<form action='{$tratamento}' method='post' id='frm1'>
				<input type='hidden' name='acao' id='acao' value='' />
				<input type='hidden' name='opcao' id='opcao' value='' />
				<table border='1'>
					<tr>";

		while ($lin = mysql_fetch_assoc($res)) {
			echo "<th>".$lin['Comment']."</th>";
			$estrutura[$pos++] = $lin;
			$sql .= $lin['Field'] . ', ';

			if ($lin['Key'] == 'PRI') {
				$campoChave = $lin['Field'];
			}
		}
		echo "</tr>";

Já que estava no laço que passava pelos nomes dos campos, já aproveitei e criei o início da tabela, com a linha que terá os <th>.

Veja que a variável $sql começou a ser preenchida com os nomes dos campos no bloco acima. Nesse ponto do código ela já deve estar mais ou menos assim:

SELECT CAMPO1, CAMPO2, CAMPOn,

Nosso próximo passo é tirar a vírgula que sobrou no final, acrescentar a tabela, juntamente com a limitação de páginas e mandar isso pro banco. A seguir eu preencho os dados da table, com o resultado do que veio da consulta que montamos. Para cada um daqueles campos, nós o colocamos dentro de uma tag <TD> para a correta exibição na tela.

		$sql = substr($sql, 0, strlen($sql) - 2);
		$sql .= " from ". $tabela ;
		$sql .= " limit ".(($paginaAtual - 1) * $itemsPorPagina).", ".$itemsPorPagina;
		$res = mysql_query($sql);

		while ($lin = mysql_fetch_assoc($res)) {
			echo "<tr onMouseOver=\"javascript:Sel('".$lin[$campoChave]."')\" >";
			foreach ($estrutura as $campo) {
				echo "<td>".$lin[$campo['Field']]."</td>";
			}
			echo "<td>";
			echo "<input type='button' value='altera' onclick=\"javascript:Posta('alterar')\" />";
			echo "<input type='button' value='excluir' onclick=\"javascript:Posta('excluir')\" />";
			echo "</td>";
			echo "</tr>";
		}
		echo "</table></form>";
	}
?>

Você prestou atenção, reparou que eu coloquei uma pitadinha de Javascript dentro da nossa tabela.

	// Pitada número 1
	echo "<tr onMouseOver=\"javascript:Sel('".$lin[$campoChave]."')\" >";

	// (...)
	// Essa função vai setar um campo oculto do campo chamado "opcao" para o valor do ID daquela linha
	function Sel(id) {
		document.getElementById('opcao').value = id;
	}

Ficou claro, o código acima faz o truque de ao mover o mouse por sobre uma determinada linha da tabela, seja setado o valor do ID daquela pro campo oculto opcao.

E para que isso serve? Serve para o código a seguir, que envia o formulário todo que está envolta da tabela toda, envie os dados para o nosso arquivo de postagem.

	// Pitada número 1
	echo "<input type='button' value='altera' onclick=\"javascript:Posta('alterar')\" />";
	echo "<input type='button' value='excluir' onclick=\"javascript:Posta('excluir')\" />";

	// (...)
	function Posta(acao) {
		document.getElementById('acao').value = acao;
		document.getElementById('frm1').submit();
	}

E isso gera o resultado que vocês mesmos podem verificar ao implementar o código acima.

Conclusão

A finalidade desse código é facilitar aos programadores para não terem que nunca mais voltar a programar um administrador (simples) para pequenos sites. Baseado nos conceitos apresentados aqui, o exemplo pode ser muito ampliado para um ponto tal de que até mesmo os formulários sejam feitos por funções prontas, e até mesmo o arquivo de tratamento dos formulários seja feitos de maneira automática. O limite é a habilidade do programador (e a sua preguiça). Qualquer dúvida podem me procurar no Twitter ou mandem um e-mail.

Site W3Tutor

Já está no ar desde o EDTED de Curitiba (06/06), o novo site da Agência W3Tutor.

O site foi criado com a estrutura adequada para mostrar os trabalhos realizados pelo nossa intrépida trupe. Visite e conheça um pouco sobre nós e sobre as nossas realizações.

Todo mundo sabe que estou longe de ser um designer. Vez por outra eu consigo fazer um layout legal, mas é raro. Com o treino e estudo acho que um dia posso chegar lá, mas deve demorar.

Bom, assim sendo, melhor focar na programação. Estou colocando aqui para quem quiser baixar a minha proposta de TCC que apresentei e foi aprovada. Para o PDF não ficar muito pesado estou colocando também as imagens referentes ao diagrama de classes e ao diagrama de caso de uso.

Proposta-de-TCC

Diagrama de Classes

Diagrama de Caso de Uso

Dentro de alguns dias eu coloco o documento de especificação. Assim que ele ficar pronto.

Como estamos desenvolvendo já o TCC, resolvi fazer sobre isso. O meu sistema é sobre Ordens de Serviço. Fazendo uma brincadeira horrorosa com a sigla: Sistema de Ordem de Serviço, surgiu a marca SOS.

SOS, para quem não sabe, não quer dizer nada. Não significa Save Our Souls ou Save Our Ship. Foi só os símbolos mais simples que Morse inventou, ou os mais destacáveis, ou ainda, como diria meu professor, os de mais alta pregnância.

Bom, tem aqui (manual-de-identidade-visual-sos) o link para o trabalho entregue. Já que o professor disse ser um dos melhores da sala, espero que ajude mais alguém.

Vou escolher outro nos próximos dias, mas o ideal seria eu montar o meu. Vamos ver se eu estou tão bem assim de CSS.

Ainda essa semana importo os comentários do blog antigo.

Ai você me pergunta:

Pô Juliano, então você está me dizendo que eu to jogando meu dinheiro fora? Que se eu quiser realmente aprender vou ter de me virar?

Bom, é e não é. Nesse momento em que estou do curso faço a seguinte avaliação: estamos num curso de programação para a web e o que os alunos mais reclamam é que não conseguem aprender programação. Gente, pelo divino, o curso é de programação. Ou aprendem isso ou saiam. Não estou expulsando ninguém, mas poxa, basta um mínimo de dedicação que a coisa flui. Nós estamos atrasados 3 bimestres com a matéria de PHP. Já deveríamos estar estudando Flex e ainda estamos em Javascript. Isso é completamente inaceitável.

Não estou generalizando. Vi excelentes iniciativas de pessoas que foram atrás, pagaram professores particulares, procuram alunos que saibam programar e conseguem melhorar o seu desempenho. Isso é salutar.

Esse post tem o seguinte intuito. Dar uma sacudida em todos vocês que esperam que a faculdade ensine todas as informações que você precisa para vida profissional.

No pain, no gain.

De outro lado, professores, não perguntem se não querem ouvir a resposta. Ontem um professor deixou um espaço aberto para que os alunos questionassem a prova e ficou furioso com o que ouviu. Mil desculpas, mas você perguntou. Citar referências externas para que alunos que querem se dedicar a isso possam ampliar seus conhecimentos é excelente. Falar que só porque essas referências foram citadas elas são matéria de prova, é ridículo.

Caros professores, temos uma vida fora da faculdade. Não somos máquinas de estudar bem como vocês não são máquinas de ensinar. Não cobre conhecimentos profundos de orientação à objetos se para muitos é a primeira vez que veem isso na vida.

Espero não ter sido muito ofensivo ou irritante, o espaço, como sempre, fica aberto para quem quiser se pronunciar. Abraços

Ontem depois de uma aula com o professor que ficou magoado com nossas notas, tivemos uma excelente aula introdutória (ui) sobre JavaScript. Aula interessante e bem básica, para se entender os conceitos fundamentais dessa “linguagem”.

Nosso querido professor, Ramazotti, disponibilizou alguns materiais na sua área, que eu estou replicando-os aqui. Espero ajudar. Parafraseando o Rodrigo:

programar é gostoso, morrer queimado é melhor ainda.

Apostila de Javascript e Apostila de Prototype

Mas percebi que o tempo que eu tinha para ficar fazendo implementações estava cada dia menor. E então disse para mim mesmo:

Pare de reinventar a roda, existem dezenas de blogs prontos para serem usados. Todo mundo sabe que você sabe programar, não precisa se exibir fazendo meia boca o que alguém já fez por completo.

E foi o que eu fiz. Aqui está, novo site, por enquanto com um tema pego do próprio site do wordpress, mas minha missão para as próximas semanas é aprimorar esse visual. Mostrar que existem um pouquinho de designer dentro de cada programador (essa foi profunda).

Logo eu implemento a seção de arquivos de novo.