Um dos “módulos” que mais gosto deste plugin é o datepicker, que para quem não sabe é aquele “calendariozinho” que aparece abaixo de um campo de formulário para selecionarmos uma data.

Para utilizar o plugin você baixá-lo e para isso deve selecionar quais módulos do UI deseja utilizar.

Após escolher os módulos e baixar, descompacte e inclua os arquivos Javascript e CSS em seu documento HTML

<link type="text/css" href="css/custom-theme/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>

Agora o jQuery o método datepicker que adiciona o “calendariozinho” ao campo selecionado quando este for focado. Mas como este plugin é em inglês devemos configurar os nomes dos meses, dias e formato de data como esta baixo.

 $(".data").datepicker({
	dateFormat: 'dd/mm/yy',
	dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
	dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
	dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
	monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
	monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
	nextText: 'Próximo',
	prevText: 'Anterior'
});

Veja o exemplo aqui

PS.: Caso você não saiba o campo de formulário com datepicker(input type=”date”) foi inserido no HTML5 mas eu ainda acho que vai demorar um pouco para podermos utilizarmos ele livremente pois a maioria dos navegadores não o implementa ainda, enquanto isso o jQuery UI é um ótima alternativa.

Vamos criar um exemplo simples onde definiremos os links que irão abrir na forma modal utilizando o atributo rel com o valor “modal” e a janela que irá abrir será definida pelo atributo href onde colocaremos o id do elemento(div) que queremos que seja visualizado em forma modal.

Marcação HTML

	<a href="#janela1" rel="modal">Janela modal</a>

	<div class="window" id="janela1">
		<a href="#" class="fechar">X Fechar</a>
		<h4>Primeira janela moda</h4>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis auctor tempus. Lorem ipsum dolor sit amet,</p>
		<p>Morbi dui lacus, placerat eget pretium vehicula, mollis id ligula. Nulla facilisi. </p>
	</div>

	<!-- mascara para cobrir o site -->
	<div id="mascara"></div>

Na linha 1 definimos um link para abrir a janela modal como vimos na introdução.

Na linha 3 criamos uma div que será nossa janela modal, note que definimos uma class e um id, o class vai facilitar caso tivermos várias janelas modal diferentes no site e o id será para abrir somente a correta. Dentro dela colocamos todo o conteúdo normalmente, só não esqueça de colocar dentro dela um link para fechá-la.

Na linha 12 criamos um div para ser o fundo escuro que irá cobrir toda a área da site ficando acima dela somente a nossa janela.

O CSS

.window{
	display:none;
	width:300px;
	height:300px;
	position:absolute;
	left:0;
	top:0;
	background:#FFF;
	z-index:9900;
	padding:10px;
	border-radius:10px;
}

#mascara{
	display:none;
	position:absolute;
	left:0;
	top:0;
	z-index:9000;
	background-color:#000;
}

.fechar{display:block; text-align:right;}

Definimos a propriedade diplay em none para os elementos #mascara e .window para que não apareçam quando a página for carregada, já que só serão mostradas quando se clicar no link.

A janela modal será centralizado em relação os navegador e isso será feito por javascript então precisamos apenas definir a propriedade position em absolute e podemos definir as propriedades left e right como “0″ já que os valores corretos serão atribuídos por javascript no momento que o link for clicado.

Outra propriedade importante de frisar é o z-index, já que a janela modal deve ficar na frente da mascara devemos definir o z-index do .window maior que o da div #mascara, lembrando que que a div #mascara deve ter um z-index positivo e um pouco alto pois ela deve sobrepor todos os outros elementos da página.

O Javascript

$(document).ready(function(){
	$("a[rel=modal]").click( function(ev){
		ev.preventDefault();

		var id = $(this).attr("href");

		var alturaTela = $(document).height();
		var larguraTela = $(window).width();

		//colocando o fundo preto
		$('#mascara').css({'width':alturaTela,'height':larguraTela});
		$('#mascara').fadeIn(1000);
		$('#mascara').fadeTo("slow",0.8);

		var left = ($(window).width() /2) - ( $(id).width() / 2 );
		var top = ($(window).height() / 2) - ( $(id).height() / 2 );

		$(id).css({'top':top,'left':left});
		$(id).show();
 	});

 	$("#mascara").click( function(){
 		$(this).hide();
 		$(".window").hide();
 	});

 	$('.fechar').click(function(ev){
 		ev.preventDefault();
 		$("#mascara").hide();
 		$(".window").hide();
 	});
});

Como vemos na linha 2 selecionamos todos os link que possuem o atributo “rel” igual a “modal” e adicionamos o evento de click a ele. Na linha 3 cancelamos o evento padrão do link(para ele não ir a lugar nenhum) na linha 5 capturamos o valor do atributo href, que no nosso exemplo definimos que seria o id do elemento que irá ser mostrado como janela modal.

Nas linhas 7 e 8 pegamos a largura da janela do navegador e altura documento HTML para definir como tamanho da nossa mascara, se pegarmos a altura da janela do navegador obteremos somente altura da área atualmente visualizada e a mascara preta não irá cobrir tudo se o usuário fizer uma rolagem de página.

Na linha 11 configuramos o tamanho da nossa área de mascara preta com os valores pegos nas linha 7 e 8.

Na linha 12 mostramos a mascara com um efeito de “fade” e na linha 13 criamos uma transparência.

Na linha 15 calculamos a posição em que a janela modal deve aparecer, para isso pegamos a largura da janela do navegador e dividimos por 2, mas se colocar a janela modal neste ponto ela aparecerá com o canto superior esquerdo centralizado neste ponto, então temos que colocar o meio da janela modal alinhado com o centro da janela do navegador, então dividimos a largura da janela modal por 2 e subtraímos este valor do valor do valor da metade da janela do navegador, isso fará ficar corretamente alinhado. Na linha 16 fazemos isso também para a altura.

Na linha 18 configuramos as propriedades top e left com os valores calculados na linha 15 e 16. Na linha 19 mostramos a janela modal.

Na linha 22 definimos um evento de click para a mascara para quando for clicado fora da janela modal, tanto a janela modal e a máscara preta desapareçam.

Veja o exemplo funcionando

Acredito que seja isso, é bem simples e permite ter uma personalização bem grande de forma fácil, diferente de utilizar alguma biblioteca como o jQuery UI, que é muito bonita e fácil de utilizar, mas se precisar mudá-la pode ser um desafio.

Esse artigo foi “baseado” no do imortal Maujor

Para realizar a contagem mais simples de visualizações sempre existiram scripts prontos,  e também é muito fácil criar um código próprio.  Mas  o google revolucionou ao criar o Google Analytics, uma ferramenta grátis que fornece um quantidade informação inacreditavél sobre os visitantes de seu site e é muito fácil de utilizar.

O Analytics é atrelado a sua conta do Google então você precisa fazer o login na página do Google para se cadastrar, se você ainda não é usuário do serviço ele vai pedir para você se cadastrar clique em “Sign up”.

Logo após será pedido os dados da conta, um nome para conta, a URL, a Time Zone e vai pedir para aceitar os termos de serviço.

No próximo passo será informado o Tracking ID, mas o mais importante será copiar o código de rastreamento que deve ser inserido nas páginas do seu site que serão rastreadas, este código em javascript é o responsável por capturar os dados do seu visitante e gravá-lo no serviço do Analytics para você visualizar. De preferência ele deve ser inserido no final da página antes de fechar a tag body para que só registre o acesso se o usuário carregar a página completa.

Veja o código de rastreamento e note que o seu Tracking ID estará inserido no código na linha 3 do script de rastreamento.

<script type="text/javascript">// <![CDATA[
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
// ]]></script>

Após inserir este código na sua página, salve e a partir de agora o Analytics ira registrar os acessos do seu site, só vale a pena lembrar que os dados não são em tempo real(pelo menos pelo que sei?) então só devem estar disponíveis apenas os dados dos dias anteriores.

Depois disso clique em home e será apresentado o relatório padrão

Se você notar ele deve fornecer as seguintes informações:

Visitas: Este é o total de visitas que seu site teve no intervalo de tempo selecionado no canto superior direito, lembrando se um usuário acessar páginas em ocasiões diferentes cada ocasião contará como uma visita.

Visitantes únicos: Este é o total de “pessoas” diferentes que acessaram o site. O Analytics conta isso através de cookies.

Visualizações de página: É o total de páginas visualizadas, também conhecido como views, toda vez que um usuário acessar uma página contará como uma visualização.

Páginas/visita: Contará qual a média de páginas que seu usuário acessou em cada visita.

Duração média da visita: Tempo que o usuário ficou no site durante a visita

Taxa de rejeição: É quantidade de usuário que visualiza apenas uma página, não acessa outras páginas do site e vai embora, dependendo do seu tipo de site esse valor pode ser alto, principalmente se a grande maioria dos seu usuário vier de mecanismo de busca, lembre-se muita vezes um única página resolve o problema dele, mas se a estratégia do seu site necessita que o usuário navegue pelo site é interessante prestar atenção neste indicador.

Porcentagem de novas visitas: Indica se usuário novos estão chegando.

Algo que ajuda muito também é o relatório de visitas por página. Ele pode ser acessado no meu a esquerda em Conteúdo -> Conteúdo do site -> Páginas

Outro relatório que gosto muito é Navegador/Sistema Operacional/Resolução de tela, ele dá uma maior idéia de quais dispositivos seus usuários estão acessando o site, se por exemplo você precisa se preocupar em fazer uma versão mobile ou em quais navegadores testar mais, etc. Ele pode ser acessado em Público-alvo -> Tecnologia -> Navegador e sistema operacional

E como seu site não é uma ilha, sempre é bom saber de onde nossos visitantes estão vindo(inclusive para agradecer quem nos trás muitos visitantes) esses dados podem ser acessados em Fontes de tráfego -> Origens -> Todo o tráfego

Como toda ferramenta do Google ela nos dá muitas opções que podemos explorar, mas esse post ficaria muito grande(que desculpinha hein?).

Só lembrando o Analytics apenas recolhe e apresenta dados cabe a você interpretá-los e tirar as conclusões e saber o que fazer a partir delas.

Espero que tenham gostado T++.c

Vamos então começar inserindo um mapa em nossa página utilizando a API e para isso precisamos inserir a biblioteca do Google Maps:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

Agora vamos criar uma função que será chamada no onload da tag body para o mapa somente ser criado após o documento ser totalmente carregado, isso garante que o elemento div no qual iremos inserir o mapa, já esteja carregado quando o código javascript for carregado:

var map = null;
function carregar(){
	var latlng = new google.maps.LatLng(-29.767954,-57.071657);

	var myOptions = {
      		zoom: 12,
      		center: latlng,
      		mapTypeId: google.maps.MapTypeId.ROADMAP
     	 };

	//criando o mapa
   map = new google.maps.Map( document.getElementById("mapa") , myOptions );
}

Ver mapa

O código até é bem simples, na linha 3 criamos um objeto que representa uma coordenada em latitude e longitude, esses objetos são utilizados em vários métodos da API.

Na linha 5 definimos as opções iniciais do mapa, na linha 6 definimos o nível de zoom inicial, na linha 7 configuramos onde o mapa será centralizado(utilizamos o objeto criado na linha 3) . Na linha 8 definimos tipo de mapa, podemos utilizar os seguintes: ROADMAP, SATELLITE, HYBRID.

Na linha 12 é onde criamos realmente o mapa. No construtor do objeto o primeiro parâmetro recebe o elemento irá conter o mapa, no segundo os parâmetros de inicialização do mapa que definimos anteriormente. Note que ele armazenamos a referência ao mapa na variável map e é através dela que podemos modificar o mapa inserindo marcadores, etc.

Podemos mudar várias propriedades do mapa através de funções.

//centralizando o mapa
map.setCenter( new google.maps.LatLng(-29.767954,-53.071657) );

//mudando o zoom do mapa
map.setZoom(5);

//mudando o tipo do mapa
map.setMapTypeId(google.maps.MapTypeId.SATELLITE);

Marcadores

Também podemos inserir um marcador em um determinado ponto do mapa através de marcadores.

var praca = new google.maps.LatLng(-29.756200185902156, -57.08757859271242);
marcadorPraca = new google.maps.Marker({
	position: praca,
   map: map,
   title:"Praça da Cidade"
});

Criamos um marcador simples, basicamente definimos um ponto na linha 1, na linha 2 criamos o objeto de marcador passando as seguintes opções:

position: o ponto do mapa que o marcador vai ser inserido
map: mapa no qual vai ser inserido o marcador
title: um título para o marcador.

Podemos também inserir um ícone personalizado para o marcador através da opção icon

 icon: '/caminho/para/a/imagem'

Veja o exemplo

Eventos de click

Podemos definir certas ações para quando o usuário clicar em um mapa, ou em um marcador, para isso podemos dever criar um listener.

google.maps.event.addListener(map, 'click', function(event) {
	alert(event.latLng)
});

Veja o exemplo

No código acima estamos definindo que “escutaremos” eventos no objeto map ou seja no nosso mapa, e que o evento que escutaremos serão os eventos de “click”(podemos também escutar os eventos de ‘dblclick’, ‘mouseup’, ‘mousedown’, ‘mouseover’, ‘mouseout’) e ao ser executado pelo usuário um desses eventos será executado a function definida que receberá um objeto de evento como parâmetro que irá conter basicamente apenas um atributo, as coordenadas de latitude e logitude de onde foi executado o evento, com isso podemos colocar um marcador no local ou centralizar o mapa por exemplo.

Outra coisa interessante para fazer com evento é fazer abrir um balão com informações ao se clicar em um determinado marcador:

var praca = new google.maps.LatLng(-29.756200185902156, -57.08757859271242);
marcadorPraca = new google.maps.Marker({
      	position: praca,
      	map: map,
      	title:"Praça da Cidade",
});
var infowindow = new google.maps.InfoWindow({
      	content: "aqui voce pode adicionar conteudo <strong>HTML</strong>"
});

google.maps.event.addListener(marcadorPraca, 'click', function(event) {
	infowindow.open(map,marcadorPraca);
});

Veja o exemplo

Primeiro criamos um objeto de janela de informação com o texto do balão.

Depois em vez de “escutarmos” um evento de ‘click’ no mapa inteiro, vamos “escutar” apenas no marcador que criamos e na função que irá executar quando ‘click’ ocorrer irá abrir a janela de informação através do método open que receberá como parâmetro o mapa e ao qual marcador a janela pertence.

Transformar endereço em coordenadas

Como vimos acima, sempre que iremos inserir alguma coisa no mapa deveremos fornecer as coordenadas de latitude e longitude, mas vamos ser sinceros não é algo muito natural, para isso a API do Maps nos fornece um serviço de Geocoding para converter um endereço textual como estamos acostumado em coordenadas.

var endereco = 'Porto Alegre - RS';
geocoder = new google.maps.Geocoder();
geocoder.geocode({'address':endereco}, function(results, status){
	if( status = google.maps.GeocoderStatus.OK){
		latlng = results[0].geometry.location;
		markerInicio = new google.maps.Marker({position: latlng,map: map});
		map.setCenter(latlng);
	}
});

Veja o exemplo

Na linha 1 pegamos o endereço que pode vir de um formulário por exemplo.

Na linha 2 é criado um objeto Geocoder que é responsável por fazer a requisição assíncrona de endereço ao webservice do Maps.

Na linha 3 é feita requisição através do método geocode passando um objeto JSON como requisição, onde definimos que queremos a localização através do endereço ‘address’, também poderíamos enviar uma coordenada para pegar o endereço passando como requisição ‘latLng’.

Após a requisição ser feita será chamada a function que foi passada como segundo parãmentro do método geocode, esta function que recebe como parâmetro um array de resultados gerados pelo service do maps e um código de status da requisição.

Na linha 4 testamos se não houve erros na requisição, e na linha 5 pegamos o primeiro resultado do array e pegamos os dados de geometry.location que contem as coordenadas de latitude e longitude.

Depois apenas colocado um marcador no local do endereço e centralizamos neste local.

Bom isso é o básico, a API do Google Maps permite fazer bem mais coisas e possui muitas outras opções, essas foram apenas as mais básica, então consulte a documentação que é bem completa e com muitos exemplos.

Primeiramente como sempre devemos inserir a biblioteca do jQuery e do plugin que iremos utilizar.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script>

Depois iremos criar um formulário normal, só acrescentaremos a tag progress criada no HTML5, ela é bastante simples e possui basicamente dois atributos o max um valor inteiro que será o 100% da barra de progresso e o atributo value que será o valor atual do progresso.

<form action="post.php" method="post" id="form">

 	<div id="file">
		<input type="file" name="file">
		<br ><br >
		<progress value="0" max="100"></progress><span id="porcentagem">0%</span>

 	</div>
 	<br />
 <input type="submit">
</form>

E vamos onde a mágica realmente acontece:

$('#form').ajaxForm({
    	uploadProgress: function(event, position, total, percentComplete) {
        	$('progress').attr('value',percentComplete);
        	$('#porcentagem').html(percentComplete+'%');
    	},
    	success: function(data) {
        	$('progress').attr('value','100');
		$('#porcentagem').html('100%');
        	$('pre').html(data);
        }	

});

Como vemos no trecho de código acima é selecionado o formulário que será enviado e chamamos o método ajaxForm adicionado pelo plugin jQuery Form Plugin passando dois parâmetros: uploadProgress e success que recebem referências de funções que serão chamadas no processo de requisição AJAX.

uploadProgress será chamada de tempos em tempo durante a requisição recebendo como parâmetro os valores de progresso da requisição. Analisando um pouco melhor a função de uploadProgress na linha 3 selecionamos o elemento progress e configuramos seu atributo value com o valor da porcentagem já realizada da requisição o que irá fazer o indicador mudar sua vilualização. Na linha 4 atualizamos o texto do indicador textual de porcentagem.

success será chamada somente se a requisição terminar sem erros. Ela recebe como parâmetro o texto do retorno da requisição que no nosso caso será feita ao script post.php, neste script trataremos o arquivo enviado através da variável $_FILES como usual e podemos salvar onde desejarmos. Na linha 7 atualizamos para 100 o value do elemento progress pois é provável que a função uploadProgress tenha sido chamada pela ultima com uma porcentagem menor que 100%. Na linha 9 pegamos o retorno da requisição e colocamos dentro de um elemento pré-formatado pre, mas poderiamos dar qualquer outro tratamento para o retorno como por exemplo criar um elemento link para arquivo ou, se for uma imagem, criar uma miniatura da imagem enviada.

Você pode ver o exemplo do post

Uma aviso: os navegadores que não possuem suporte a “XMLHttpRequest Level 2″ como o Opera11 e o IE8 por exemplo irão utilizar o iframes para realizar o upload, fazendo a opção uploadProgress não funcionar e por conseguência a barra de progresso, embora o upload funcione. Recomendo testar se o navegar possui suporte a “XMLHttpRequest Level 2″ se não tiver substituir a barra de progresso por um gif animado de carregando.

Fica aqui um exemplo tosco de como resolver isso.

Recomendo ver a documentação do plugin jQuery Form Plugin que possue várias opções interessantes.

Parando com a enrolação vamos ao código:

Calendar cal = GregorianCalendar.getInstance();
cal.setTime( new Date() );

int dia = cal.getActualMaximum( Calendar.DAY_OF_MONTH );
int mes = (cal.get(Calendar.MONDAY)+1);
int ano = cal.get(Calendar.YEAR);

System.out.println( dia+"/"+mes+"/"+ano );

try {
	Date data = (new SimpleDateFormat("dd/MM/yyyy")).parse( dia+"/"+mes+"/"+ano );
} catch (ParseException e) {
	e.printStackTrace();
}

Para pegarmos o último dia do mês será necessário utilizar a classe GregorianCalendar, como vemos na linha 1. Na linha 2 configuramos no objeto Calendar um objeto Date representado a data atual ou uma data qualquer de um determinado mês que desejamos saber qual é o último dia.

Na linha 4 é o que realmente queremos, o método getActualMaximum(int) retorna o maior valor possível para o campo passado por parâmetro levando em conta a data atualmente definida na classe Calendar, então se passarmos por parâmetro a constante Calendar.DAY_OF_MONTH será retornado o maior dia do mês levando em consideração quantos dias o mês tem, inclusive os anos bissextos para o mês de fevereiro. Também é possível passar várias outras constantes da class Calendar embora não tenha grande serventia.

Na linha 5 pegamos o número do mês chamando a o método get(int) passando a constante de mês e somamos +1 pois em java o mês é representado de 0 até 11, então se o método nos retornar 1 ele representa o mês de fevereiro.

Na linha 6 pegamos o ano, sem mais.

A partir dai podemos concatenar para o formato desejado de data e pronto.

No MySQL por exemplo podemos utilizar da seguinte forma:

SELECT * FROM usuarios LIMIT 40 , 20;

Após o comando LIMIT temos dois valores separados por virgula, o primeiro é a partir de que número de linha que o SELECT comçará a mostrar os resultados e o segundo valor é a quantidade de valores que serão mostrados a partir do primeiro valor. Resumindo se a consulta acima sem o comando LIMIT retornasse 100 resultado, utilizando o
LIMIT seria retornado apenas 20, os resultados do 40 até 60.

No PostgreSQL o comando muda um pouco mas o modo de funcionamento é o mesmo:

SELECT * FROM usuarios LIMIT 20  OFFSET 40;

O primeiro valor após o comando LIMIt é a quantidade de resultados que irá mostrar e o valor após o comando OFFSET é a partir de que linha os resultados começarão a ser mostrados.

Tendo visto por auto como funciona o comando LIMIt podemos começar a ver o código de páginação:

try{
 	$conn = new PDO('mysql:host=localhost;port=3306;dbname=teste', 'root', '12345678');
 	$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

 	$por_pagina = 10;
 	$init = ( $_GET['pagina']-1) * $por_pagina;

	$result = $conn->query("SELECT * FROM usuarios limit $init, $por_pagina");

	$result_total = $conn->query("SELECT count(*) as total FROM usuarios")->fetch(PDO::FETCH_OBJ);

	$num_paginas = ceil( $result_total->total / $por_pagina);

   	$conn = null;
}catch (PDOException $i){
     	print "Erro: <code>" . $i->getMessage() . "</code>";
}

Neste exemplo foi utilizado PDO para realizar consultas ao banco que já foi abordado em outro post.

Na linha 2 conectamos ao banco e na linha 3 configuramos para utilizar exceções.

Na linha 5 definimos e armazenamos em uma variável o número de resultados que queremos por página, isso facilitará mais para frente.

Na linha 6 calculamos a partir de qual resultado deve ser mostrado, esse calculo é feito tendo como base o número da página em que se está visualizando que é recebido via parâmentro de URL ( index.php?pagina=2 por exemplo), se tivermos na página 1 deve ser mostrados os resultado de 0 até 10, se tivermos na 2 será mostrado de 10 até 20, então nosso calculo para o o resultado de inicio (fica pagina-1) * por_pagina.

Na linha 8 utilizamos os valores de $por_pagina e $init para construir a consulta SQL utilizando o comando LIMIT e armazenamos os resultados na variável $result para construir a tabela.

Na linha 10 consultamos o total de resultados da consulta sem o comando LIMIT que será necessário para construir a os links de navegação da paginação.

Na linha 12 calculamos o numero de páginas total que é dado pelo total de resultados divido por quantos resultados se esta mostrando por página, lembrando de utilizar a função ceil para arredondar o resultado.

Agora que temos todo o nossos resultados para mostrar vamos construir o HTML:

<table>
	<tr>
		<th>ID</th>
		<th>Nome</th>
		<th>Login</th>
		<th>E-mail</th>
	</tr>

<?php   foreach($result as $linha){  ?>
	<tr>
             	<td><?php echo $linha['id']?></td>
              	<td><?php echo $linha['nome'];?> </td>
              	<td><?php echo $linha['login'];?> </td>
              	<td><?php echo $linha['email'];?> </td>
	</tr>
         <?php } ?>

</table>

<div>
<?php for($i = 1 ; $i <= $num_paginas ;$i++ ){?>
 	<a href="index.php?pagina=<?php echo $i ?>"><?php echo $i ?></a>
<?php }?>
</div>

Como pode ser visto acima é criada uma tabela a primeira linha utilizaremos como nome das colunas e para as linha restantes é utilizada a instrução foreach para percorrer todos os resultados da consulta SQL(armazenada na variável $result) e criar para cada linha do resultado uma linha na tabela HTML.

Na linha 21 é utilizado um for normal para ir de 1 até o número de páginas e para cada passada é criado um link com a URL passando o parâmetro da página de resultado a ser mostrada.

Baixar o exemplo completo.

Era isso, t++

Quando se utiliza o VirtualBox da Oracle, ao copiarmos um template e adicionarmos uma VDI (Virtual Device Interface) existente, precisamos alterar o UUID (Universally Unique Identifier). Este procedimento é realizado pelos scripts de administração do próprio VirtualBox.

 VBoxManage internalcommands sethduuid arquivo.vdi

Onde: arquivo.vdi, é o disco virtual que será gerado o novo UUID.

Bom, era isso.

Primeiramente vamos as classes chaves desta biblioteca:

Document: Esta classe representa o documento inteiro, esta classe pode ter apenas um elemento que seria o elemento raiz do documento(elemento root), comentários e outros elementos de definição.

Element: Esta classe representa um elemento do documento XML(também chamado de nó), são os elementos que compõem o documento ele pode conter outros elementos, atributos, comentários e valores.

Attribute: Esta classe representa um atributo de um elemento XML.

Vamos ao código então! Só não esqueça de baixar a biblioteca JDOM e incluí-la no seu CLASSPATH.

Document doc = new Document();

Element root = new Element("turma");

Element pessoa = new Element("pessoa");
Attribute sexo = new Attribute("sexo","Masculino");
pessoa.setAttribute(sexo);

Element nome = new Element("nome");
nome.setText("Rodrigo");
pessoa.addContent(nome);

Element sobrenome = new Element("sobrenome");
sobrenome.setText("sobrenome");
pessoa.addContent(sobrenome);

Element notas = new Element("notas");
pessoa.addContent(notas);

Element teste1 = new Element("teste1");
teste1.setText("8.3");
Element teste2 = new Element("teste2");
teste2.setText("7.8");
Element prova = new Element("prova");
prova.setText("9.2");

notas.addContent(teste1);
notas.addContent(teste2);
notas.addContent(prova);

root.addContent(pessoa);

doc.setRootElement(root);

XMLOutputter xout = new XMLOutputter();
xout.output(doc , System.out);

XMLOutputter xout = new XMLOutputter();
OutputStream out = new FileOutputStream( new File("exemplo.xml"));
xout.output(doc , out);

<?xml version="1.0" encoding="UTF-8"?>
<turma>
	<pessoa sexo="Masculino">
		<nome>Rodrigo</nome>
		<sobrenome>sobrenome</sobrenome>
		<notas>
			<teste1>8.3</teste1>
			<teste2>7.8</teste2>
			<prova>9.2</prova>
		</notas>
	</pessoa>
</turma>

File f = new File("exemplo.xml");

SAXBuilder builder = new SAXBuilder();

Document doc = builder.build(f);

Element root = (Element) doc.getRootElement();

List pessoas = root.getChildren();

Iterator i = pessoas.iterator();

while( i.hasNext() ){
		Element pessoa = (Element) i.next();
		System.out.println("Nome: " + pessoa.getChildText("nome"));
		System.out.println("Sobrenome: " + pessoa.getChildText("sobrenome"));
		System.out.println("Sexo: " + pessoa.getAttributeValue("sexo"));
		System.out.println("Nota( teste1 ): "+pessoa.getChild("notas").getChildText("teste1"));
		System.out.println("Nota( teste2 ): "+pessoa.getChild("notas").getChildText("teste2"));
		System.out.println("Nota( prova ): "+pessoa.getChild("notas").getChildText("prova"));
		System.out.println();
}