Acredito que todos já devem ter visto por aí com fazer uma tabela zebrada (com cores das linhas alternadas) utilizando JQuery, aqui mesmo do blog tem como fazer. Agora vou ensinar como fazer com PHP, é bem simples e didático. Vamos ao código:
<html>
<head><title>Tabela zebrada com PHP</title>
<style type="text/css">
tr.par{background-color:#CCCCCC;}
tr.impar{background-color:#FAFAFA;}
table{border-collapse:collapse;}
</style>
</head>
<body>
<table>
<?php
//variável que servirá para criar as linhas
$linha = 1;
for($linha=1;$linha<10;$linha++){
if($linha%2==0){
$class="impar";
}
else{
$class="par";
}
echo "<tr class='$class'><td>Coluna1</td><td>Coluna2</td></tr>";
}
?>
</table></body></html>
O segredo está na linha if($linha%2==0){
O operador % retorna o resto da divisão, caso o valor da variável dividido por 2 retornar 1 significa que ele é impar, então é atribuido o valor da classe CSS á variável $class que deternimará a cor de fundo da linha da tabela, e assim sucessivamente até que se satisfaça a condição (que $linha sej menor que 10).
Simples não...
Tabela zebrada com JQuery
Um efeito bem legal em tabelas é o famoso "cor-sim, cor-não, cor-sim, cor-não". Eu mesmo já quebrei a cabeça um tempão tentando fazer isto, atéque descobri o JQuery, o canivete suíço da web. Com apenas uma linha de código é possível "zebrar" a tabela, vejam como:
Note que todas as tabelas da página ficarão com este efeito.$("tr:odd td").css('background', '#008800');
Só isto e todos os <td> de todos os <tr> ímpares ficarão com o efeito, isto por causa do (odd), simples e fácil pra caramba.
Exibindo Google Maps com PHP
Ter mapas do Google Maps em seu site é fácil usando a API do Google Maps, aqui neste exemplo criaremos um formulário onde o usuário digitará o endereço completo, pelo método POST enviaremos o endereço para uma função PHP que será responsável por retornar a latitude, longitude e zoom, com o javascript criaremos o mapa.
Primeiramente devemos entrar neste link http://code.google.com/intl/pt-BR/apis/maps/signup.html para obter a chave da API. Guarde-a pois usaremos mais adiante.
Crie um formulário HTML assim:
<html>
<head><title>Usando API do Google Maps com PHP</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=DIGITE AQUI SUA CHAVE" type="text/javascript"></script>
</head>
<body>
<form method="post" action="g_map.php">
Endereço: <input type="text" size="50" name="endereco"/><br/>
Cidade: <input type="text" size="50" name="cidade"/><br/>
UF: <input type="text" size="05" name="uf"/><br/>
<input type="submit" value="Gerar Mapa"/>
</form>
</body>
</html>
Salve o arquivo como GMAPS.html
Agora crie o arquivo g_map.php e insira nele o seguinte código:
<?php
class gMaps {
private $mapsHost = 'maps.google.com';
public $mapsKey ='DIGITE AQUI SUA CHAVE ';/
function __construct($key = null) {
if (!is_null($key)) {
$this->mapsKey = $key;
}
}
function carregaUrl($url) {
if (function_exists('curl_init')) {
$cURL = curl_init($url);
curl_setopt($cURL, CURLOPT_RETURNTRANSFER, true);
curl_setopt($cURL, CURLOPT_FOLLOWLOCATION, true);
$resultado = curl_exec($cURL);
curl_close($cURL);
} else {
$resultado = file_get_contents($url);
}
if (!$resultado) {
return false;
} else {
return $resultado;
}
}
function geoLocal($endereco) {
$url = 'http://'. $this->mapsHost .'/maps/geo?output=csv&key='. $this->mapsKey .'&q='. urlencode($endereco);
$dados = $this->carregaUrl($url);
list($status, $zoom, $latitude, $longitude) = explode(',', $dados);
if ($status != 200) {
return false;
}
return array('lat' => $latitude, 'lon' => $longitude, 'zoom' => $zoom, 'endereco' => $endereco);
}
}
$end = $_POST["endereco"];
$cidade = $_POST["cidade"];
$uf = $_POST["uf"];
$endereco = $end.", ".$cidade.", ".$uf;
$gmaps = new gMaps('DIGITE AQUI SUA CHAVE');
$dados = $gmaps->geolocal($endereco);
$lat = $dados['lat'];
$lon = $dados['lon'];
$zoom = $dados['zoom'];
?>
<html>
<head><title>Google MAPS com PHP<title><head>
<body>
<div id="googleMap" width="400px" height="400px"></div>
<script type="text/javascript">
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("googleMap"));
var lat = <?php echo"$lat"; ?>; // Latitude do marcador
var lon = <?php echo"$lon"; ?>; // Longitude do marcador
var zoom = 16; // Zoom
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.addControl(new GOverviewMapControl());
map.removeMapType(G_HYBRID_MAP);
map.setCenter(new GLatLng(lat,lon),zoom);
var marker = new GMarker(new GLatLng(lat,lon));
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<?php echo"$endereco";?>");
});
map.addOverlay(marker);
map.setCenter(point, zoom);
}
</script>
</body>
</html>
Salve o arquivo e chame o GMAPS.html pelo browser e digite algum endereço real para ver como ficou, o javascript coleta os dados enviados pela função PHP e cria o mapa carregando na div googleMap, com o tempo você saberá pegar o endereço em uma base MySQL e criar mapas. Espero que sirva para vocês. Abs...
Primeiramente devemos entrar neste link http://code.google.com/intl/pt-BR/apis/maps/signup.html para obter a chave da API. Guarde-a pois usaremos mais adiante.
Crie um formulário HTML assim:
<html>
<head><title>Usando API do Google Maps com PHP</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=DIGITE AQUI SUA CHAVE" type="text/javascript"></script>
</head>
<body>
<form method="post" action="g_map.php">
Endereço: <input type="text" size="50" name="endereco"/><br/>
Cidade: <input type="text" size="50" name="cidade"/><br/>
UF: <input type="text" size="05" name="uf"/><br/>
<input type="submit" value="Gerar Mapa"/>
</form>
</body>
</html>
Salve o arquivo como GMAPS.html
Agora crie o arquivo g_map.php e insira nele o seguinte código:
<?php
class gMaps {
private $mapsHost = 'maps.google.com';
public $mapsKey ='DIGITE AQUI SUA CHAVE ';/
function __construct($key = null) {
if (!is_null($key)) {
$this->mapsKey = $key;
}
}
function carregaUrl($url) {
if (function_exists('curl_init')) {
$cURL = curl_init($url);
curl_setopt($cURL, CURLOPT_RETURNTRANSFER, true);
curl_setopt($cURL, CURLOPT_FOLLOWLOCATION, true);
$resultado = curl_exec($cURL);
curl_close($cURL);
} else {
$resultado = file_get_contents($url);
}
if (!$resultado) {
return false;
} else {
return $resultado;
}
}
function geoLocal($endereco) {
$url = 'http://'. $this->mapsHost .'/maps/geo?output=csv&key='. $this->mapsKey .'&q='. urlencode($endereco);
$dados = $this->carregaUrl($url);
list($status, $zoom, $latitude, $longitude) = explode(',', $dados);
if ($status != 200) {
return false;
}
return array('lat' => $latitude, 'lon' => $longitude, 'zoom' => $zoom, 'endereco' => $endereco);
}
}
$end = $_POST["endereco"];
$cidade = $_POST["cidade"];
$uf = $_POST["uf"];
$endereco = $end.", ".$cidade.", ".$uf;
$gmaps = new gMaps('DIGITE AQUI SUA CHAVE');
$dados = $gmaps->geolocal($endereco);
$lat = $dados['lat'];
$lon = $dados['lon'];
$zoom = $dados['zoom'];
?>
<html>
<head><title>Google MAPS com PHP<title><head>
<body>
<div id="googleMap" width="400px" height="400px"></div>
<script type="text/javascript">
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("googleMap"));
var lat = <?php echo"$lat"; ?>; // Latitude do marcador
var lon = <?php echo"$lon"; ?>; // Longitude do marcador
var zoom = 16; // Zoom
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.addControl(new GOverviewMapControl());
map.removeMapType(G_HYBRID_MAP);
map.setCenter(new GLatLng(lat,lon),zoom);
var marker = new GMarker(new GLatLng(lat,lon));
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<?php echo"$endereco";?>");
});
map.addOverlay(marker);
map.setCenter(point, zoom);
}
</script>
</body>
</html>
Salve o arquivo e chame o GMAPS.html pelo browser e digite algum endereço real para ver como ficou, o javascript coleta os dados enviados pela função PHP e cria o mapa carregando na div googleMap, com o tempo você saberá pegar o endereço em uma base MySQL e criar mapas. Espero que sirva para vocês. Abs...
SlideShow de Imagens com JQuery
Criar um slideshow de imagens "no braço" não é fácil, mas com JQuery e uma mãozinha do JCycle tudo fica muito fácil vejamos como:
Primeiramente devemos fazer o download das bibliotecas JQuery e JCycle:
JQuery => http://jquery.com/
JCycle => http://jquery.malsup.com/cycle/
Salve os arquivos na raiz do site ou em algum diretório de scripts do site.
Importe as bibliotecas e insira estes códigos entre as tags <HEAD> do site assim:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//#slides é o id da DIV que carregará as imagens
$('#slides').cycle({
//Fade é o efeito de transição das imagens
fx: 'fade',
//É a velocidade do efeito
speed: 1000,
timeout: 7000,
//#thumbs é o id do DIV que carregará os thumbnails
pager: '#thumbs',
//É para parar a transição no evento onmouseover
pause:true,
// Esta parte cria pega as imagens carregadas no #slides e cria o thumbnails
pagerAnchorBuilder: function(idx, slide) {
var img = $(slide).children().eq(0).attr("src");
return '<a href="#"><img src="'+ img +'" width="45px" height="35px" border="0"/></a>';
}
});
});
</script>
Agora no corpo da página é só criar as DIVS e carregar as imagens assim:
<div id="slides" width="400px" height="400px">
<img src="imagem1.jpg" width="398px" height="398px"/>
<img src="imagem2.jpg" width="398px" height="398px"/>
<img src="imagem3.jpg" width="398px" height="398px"/>
<img src="imagem4.jpg" width="398px" height="398px"/>
</div>
<div id="thumbs"></div>
Lembre-se de não alterar os IDs das divs, senão será necessário alterar o código javascript.
Caso queira aplicar alguma regra CSS utilize classes assim: Exemplo: <div id="slides" class="div_slide">
Com um pouco de imaginação dá para melhorar muito este exemplo, mas ainda sim espero que ajude alguém.
Primeiramente devemos fazer o download das bibliotecas JQuery e JCycle:
JQuery => http://jquery.com/
JCycle => http://jquery.malsup.com/cycle/
Salve os arquivos na raiz do site ou em algum diretório de scripts do site.
Importe as bibliotecas e insira estes códigos entre as tags <HEAD> do site assim:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//#slides é o id da DIV que carregará as imagens
$('#slides').cycle({
//Fade é o efeito de transição das imagens
fx: 'fade',
//É a velocidade do efeito
speed: 1000,
timeout: 7000,
//#thumbs é o id do DIV que carregará os thumbnails
pager: '#thumbs',
//É para parar a transição no evento onmouseover
pause:true,
// Esta parte cria pega as imagens carregadas no #slides e cria o thumbnails
pagerAnchorBuilder: function(idx, slide) {
var img = $(slide).children().eq(0).attr("src");
return '<a href="#"><img src="'+ img +'" width="45px" height="35px" border="0"/></a>';
}
});
});
</script>
Agora no corpo da página é só criar as DIVS e carregar as imagens assim:
<div id="slides" width="400px" height="400px">
<img src="imagem1.jpg" width="398px" height="398px"/>
<img src="imagem2.jpg" width="398px" height="398px"/>
<img src="imagem3.jpg" width="398px" height="398px"/>
<img src="imagem4.jpg" width="398px" height="398px"/>
</div>
<div id="thumbs"></div>
Lembre-se de não alterar os IDs das divs, senão será necessário alterar o código javascript.
Caso queira aplicar alguma regra CSS utilize classes assim: Exemplo: <div id="slides" class="div_slide">
Com um pouco de imaginação dá para melhorar muito este exemplo, mas ainda sim espero que ajude alguém.
Relógio digital com Javascript
Com esta simples função em javascript é possível criar um relógio digital para seu site:
Coloque este código entre as tags HEAD do site:
<script language="JavaScript">
function do_Relogio(){
momentoAtual = new Date()
var hora = momentoAtual.getHours()
if(hora<10) hora = "0"+hora;
var minuto = momentoAtual.getMinutes()
if(minuto<10) minuto = "0"+minuto;
var segundo = momentoAtual.getSeconds()
if(segundo<10) segundo = "0"+segundo;
horaImprimivel = hora + " : " + minuto + " : " + segundo
document.form_relogio.relogio.value = horaImprimivel
setTimeout("do_Relogio()",1000)
}
</script>
Dentro da tag <body> chame a função no evento onload assim:
<body onload="do_Relogio();">
Crie um formulário com o campo que exibirá a hora assim:
<form name="form_relogio" align="center" style="margin:01px; padding:03px;">
<input type="text" name="relogio" size="09" readonly="true" style="color:#339966; font-size:11px;>
</form>
Como podem ver a função javascript captura a data atual date(), extrai dela a hora, os minutos e os segundos e armazena nas variáveis. Após isto cria-se outra variável concatenando as horas, minutos e segundos para ficarem com o formato de horas (00:00:00 ) e atribui-se ao input do form o valor retornado (usamos um input do tipo texto). Com setTimeout fazemos a atualização do valor das variáveis a cada 1000 milisegundos (1s). Muito simples e didático.
Coloque este código entre as tags HEAD do site:
<script language="JavaScript">
function do_Relogio(){
momentoAtual = new Date()
var hora = momentoAtual.getHours()
if(hora<10) hora = "0"+hora;
var minuto = momentoAtual.getMinutes()
if(minuto<10) minuto = "0"+minuto;
var segundo = momentoAtual.getSeconds()
if(segundo<10) segundo = "0"+segundo;
horaImprimivel = hora + " : " + minuto + " : " + segundo
document.form_relogio.relogio.value = horaImprimivel
setTimeout("do_Relogio()",1000)
}
</script>
Dentro da tag <body> chame a função no evento onload assim:
<body onload="do_Relogio();">
Crie um formulário com o campo que exibirá a hora assim:
<form name="form_relogio" align="center" style="margin:01px; padding:03px;">
<input type="text" name="relogio" size="09" readonly="true" style="color:#339966; font-size:11px;>
</form>
Como podem ver a função javascript captura a data atual date(), extrai dela a hora, os minutos e os segundos e armazena nas variáveis. Após isto cria-se outra variável concatenando as horas, minutos e segundos para ficarem com o formato de horas (00:00:00 ) e atribui-se ao input do form o valor retornado (usamos um input do tipo texto). Com setTimeout fazemos a atualização do valor das variáveis a cada 1000 milisegundos (1s). Muito simples e didático.
Maiúsculas e Minúsculas no PHP
O PHP oferece bons recursos para trabalharmos com strings.
Consideremos a seguinte variável string:
$texto = "lorem ipsum tudor";
Para converter todo texto em letras minúsculas usamos o strtolower( );
Ex: strtolower($texto);
Resultado é: "lorem ipsum tudor";
Para converter todo texto em letras maiúsculas usamos o strtoupper( );
Ex: strtoupper($texto);
Resultado é: "LOREM IPSUM TUDOR";
Para converter o primeiro carcter de uma string em maiúsculo usamos o ucfirst( );
Ex: ucfirst($texto);
Resultado é: "Lorem ipsum tudor";
Para converter o primeiro caracter da cada palavra de uma string usamos o ucwords( );
Ex: ucwords($texto);
Resultado é: "Lorem Ipsum Tudor";
Consideremos a seguinte variável string:
$texto = "lorem ipsum tudor";
Para converter todo texto em letras minúsculas usamos o strtolower( );
Ex: strtolower($texto);
Resultado é: "lorem ipsum tudor";
Para converter todo texto em letras maiúsculas usamos o strtoupper( );
Ex: strtoupper($texto);
Resultado é: "LOREM IPSUM TUDOR";
Para converter o primeiro carcter de uma string em maiúsculo usamos o ucfirst( );
Ex: ucfirst($texto);
Resultado é: "Lorem ipsum tudor";
Para converter o primeiro caracter da cada palavra de uma string usamos o ucwords( );
Ex: ucwords($texto);
Resultado é: "Lorem Ipsum Tudor";
Assinar:
Postagens (Atom)