Tutoriais PHP, CSS, JavaScript, MySQL

DIV com cantos Arredondados JQUERY

Neste post mostrarei como criar DIVS com cantos arredondados usando JQUERY.
Primeiro vamos ter que importar as bibliotecas Jquery e Jquery.Corner:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" src="http://www.malsup.com/jquery/corner/jquery.corner.js?v2.11"></script>

A sintaxe é simples, vejam um exemplo completo:

<html>
<head>
<title>DIVS com cantos arredondados com JQUERY</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://www.malsup.com/jquery/corner/jquery.corner.js?v2.11"></script>

<style type="text/css">
div.demo{background-color:#4281FF;text-align:center;float:left;width:200px;height:100px;margin:02px;padding:05px;}
div.main{width:650px;height:320px;background-color:#999999;padding:05px;}
</style>
<script type="text/javascript">
$("#main").corner("sculpt");
$("#div1").corner();
$("#div2").corner("bevel");
$("#div3").corner("notch");
$("#div4").corner("bite");
$("#div5").corner("cool");
$("#div6").corner("sharp");
</script>
</head>
<body>
<div class="main" id="main">
<h2><b>Exemplos:</b></h2>

<div class="demo" id="div1">

<p style="font-weight:bolder">Round</p>

<p>$("#div1").corner();</p>

</div>

<div class="demo" id="div2">

<p style="font-weight:bolder">Bevel</p>

<p>$("#div2").corner("bevel");</p>

</div>

<div class="demo" id="div3">

<p style="font-weight:bolder">Notch</p>

<p>$("#div3").corner("notch");</p>

</div>

<div class="demo" id="div5">

<p style="font-weight:bolder">Bite</p>

<p>$("#div5").corner("bite");</p>

</div>

<div class="demo" id="div6">

<p style="font-weight:bolder">Cool</p>

<p>$("#div6").corner("cool");</p>

</div>

<div class="demo" id="div4">

<p style="font-weight:bolder">Sharp</p>

<p>$("#div4").corner("sharp");</p>

</div>
</div>
</body>
</html>

Uma simples linha de código basta para criar o efeito:

$("DIV").corner();

Lembrando ainda que você definir o tamanho do corner:

$("DIV").corner("bevel 10px");

Muito simples e útil, já que nem todos os browsers renderizam a regra CSS border-radius.
Mais exemplos no site: JQUERY.CORNER

Cor Hexadecimal para RGB no PHP

Olá amigos, hoje mostrarei como converter o padrão de cores Hexadecimal para o padrão RGB utilizando o PHP. No PHP existe uma função que converte strings hexadecimais para um número decimal (HEXDEC), então criamos um função:

hextorgb.php

<?php function hex2rgb ($color) {
return array (
'Red'=> hexdec (substr ($color, 0, 2)),
'Green'=> hexdec (substr ($color, 2, 2)),
'Blue'=> hexdec (substr ($color, 4, 2))
);
}
?>

A função acima recebe como parâmetro uma cor hexadecimal e retorna uma matriz com os valores decimais, então podemos usar estes valores para ter a cor no padrão RGB, basta incluir a função no seu código, passar a cor hexadecimal como parâmetro na função:

<?php
require 'hextorgb.php';

$cor_hex = "00FF00";//verde
//Obervação: A cor hexadecimal não pode ter o sinal de sustenido (#).
$rgb = hex2rgb($cor_hex);
//Observe que concatenamos o sinal de sustenido à variável
echo "<span style='background-color:#$cor_hex;'>Cor Hexadecimal</span><br/> $cor_hex";

$r = $rgb["Red"];
$g = $rgb["Green"];
$b = $rgb["Blue"];
echo "<span style='background-color:rgb($r,$g,$b);'>Cor padrão RGB</span><br/> $r $g $b";

?>

Isto é muito útil para quem gosta de trabalhar com a biblioteca GD do PHP.

Criar Planilha Excel XLS via PHP

A vida de programador não é fácil, as vezes ns damos de frente com diversos tipos de problemas.
Dias atrás estava desenvolvendo um script para imobiliária e surgiu a idéia de criar uma opção de exportar toda a base de dados para o Excel, depois de queimar alguns neurônios consegui e é tão fácil que pasmo. Segue um exemplo simples sem usar banco de dados, leia os comentários para tirar dúvidas:

Salve como exp_xls.php

<?php
//Aqui no primeiro header definimos o tipo do arquivo

header('Content-type: application/msexcel');

//Neste header definimos como será gravado e o nome do arquivo
header('Content-Disposition: attachment; filename="produtos.xls"');

//Criamos uma tabela em HTML normal
echo "<table>";
echo "<tr>";
echo "<td>Produto</td>";

echo "<td>Valor</td>";
echo "</tr>";

echo "<tr>";

echo "<td>Notebook</td>";

echo "<td>R$1250,00</td>";

echo "</tr>";
echo "</table>";
?>

Somente estas linhas é o suficiente para gerar uma planilha no Excel, caso queira com formatação é só definir estilos para a tabela, utilize também tags HTML como <b></b> ou <i></i> ou <u></u>, é só usar a criatividade.

Para gerar a planilha a partir de uma consulta SQL é fácil também, vejamos:

Suponhamos que você tenha uma tabela em seu BD chamada PRODUTOS desta forma:

| ID | PRODUTO | VALOR |
| 1   | DVD           | R$ 15,00 |
| 2   | CDR           | R$ 1,80   |
| 3   | CDRW       | R$ 2,80   |

Salve como exp_xlsBD.php

<?php

//Fazemos a conexão com o mysql, coloque os dados de acesso do seu servidor

$mysql_servidor="localhost";/*Seu servidor MYSQL*/
$mysql_usuario="root";/*Usuario de acesso ao MYSQL*/
$mysql_senha="*******";/*Senha de acesso ao MYSQL*/
$mysql_database="teste";/*Nome do banco de dados*/
mysql_connect($mysql_servidor,$mysql_usuario,$mysql_senha) or die(mysql_error());
mysql_select_db($mysql_database) or die(mysql_error());

//Fazemos uma consulta no banco

$sql = "select * from produtos";
//Executamos a query
$query = mysql_query($sql) or die(mysql_error());
//Verificamos se retornou algum valor
if(mysql_num_rows($query)==0){
echo "<h2>Nenhum produto cadastrado</h2>";
}
else{
//Caso retornar algum valor então criamos a tabela HTML e inserimos os dados
//Cabeçalho a tabela
$html = "";
$html .= "<table border='01' padding='01px'>";
$html .= "<tr style='font-weight:bold;'>";
$html .= "<td>ID</td>";
$html.= "<td>PRODUTO</td>";
$html .= "<td>VALOR</td>";
$html .= "</tr>";

//Atribuindo os resultados em um array
while($resultados = mysql_fetch_array($query){
$id = $resultados["id"];
$produto = $resultados["produto"];
$valor = $resultados["valor"];

//Criamos as linhas restantes da tabela com os valores das variáveis
$html.= "<tr style='background:#F0F0F0;height:20px;'>";
$html.= "<td>$id</td>";
$html.= "<td>$produto</td>";
$html.= "<td>$valor</td>";
$html.= "</tr>";
//Fechamos o laço while
}
//Fechamos a tabela
echo "</table>";

//Criamos os headers para forçar o download do arquivo
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header ("Last-Modified: " . gmdate("D,d M YH:i:s") . " GMT");
header ("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");
header("Content-type: application/msexcel");
}
header("Content-Disposition: attachment; filename=produtos.xls");
echo $html;
}
mysql_close();
?>
Assim você fez uma consulta no BD, atribuiu os valores retornados à variáveis e populou uma tabela HTML, modificou o tipo de arquivo para XLS e forçou o download do mesmo. Aproveitei para inserir algums estilos na tabela só para exemplo. Espero que consigam fazer.

Usando a API de busca do Google com PHP

Muitos não sabem, mas o Google disponibiliza a API de busca para possamos criar páginas personalizadas com os resultados da busca. Vou passar para vocês de forma rápida como funciona, a parte do layout e outras melhorias ficam por vossa conta certo... Então vamos começar...

Tentem acessar pelo seu navegador a seguinte url:

http://ajax.googleapis.com/ajax/services/search/web?v=1.0&hl=pt-br&cr=countryBR&q=codigofonte.net

Como podem verificar o que apareceu foi um monte de coisa escrita. Isto que apareceu é exatamente o resultado da pesquisa feita pela API em forma de uma string JSON. É a partir dela que extrairemos os resultados da pesquisa. Notem que o parâmetro q=codigofonte.net é onde definimos o termo pesquisado.

Criamos então o arquivo buscaAPI.php:

<?php

header('Content-type: text/html; charset=utf-8');

//URL da API

$url = "http://ajax.googleapis.com/ajax/services/search/web?v=2.0&hl=pt-br&cr=countryBR&q=codigofonte.net";

// Enviando a requisição da URL via Curl

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $url);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

curl_setopt($ch, CURLOPT_REFERER, "http://seusite.com");

$body = curl_exec($ch);

curl_close($ch);

//Processando a string Json

$json = json_decode($body);

//Array com os resultados

$array = $json->responseData->results;

//Total de resultados retornados

$n_result = "Aproximadamente ".$json->responseData->cursor->estimatedResultCount;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Busca do Google Usando a API e PHP</title>

</head>

//Imprimindo os resultados

echo "<div style='position:relative;width:80%;height:600px;text-align:left;'>";

foreach($array as $key){

//Div para cada resultado

echo "<div style='border:01px solid #CCCCCC;margin:02px;padding:02px;width:75%;'>";

$ret_url = $key->url;

echo "<a href=".$ret_url.">";

echo "<span style='color:blue;font-size:18px;font-weight:bold;'>".$key->title."</span>";

echo "</a>";

echo "<br/>";

echo "<span style='color:black;font-size:12px;'>".$key->content."</span>";

echo "<br/>";

echo "<span style='color:green;font-size:14px;font-weight:bold;'>".$key->visibleUrl."</span>";

echo "<br/>";

$cache = $key->cacheUrl;

echo "<a href=".$cache.">";

echo "<span style='color:#CCCCCC;font-size:12px;'>CACHE...</span>";

echo "</a>";

echo "</div>";

}

//Fim da lista de resultados

//Mostra o total de resultados encontrados

echo $n_result;

echo "</div>";

</center></body>

</html>

Salve o arquivo e chame-o pelo navegador, se tudo estiver correto é para aparecer uma lista com 04 resultados como o termo codigofonte.net. Caso não aparecer verifique o código, uma dica... evitem usar o copiar - colar, é melhor imprimir é depois digitar o código linha por linha para entender e evitar erros, uma vírgula errada estraga tudo em PHP.

Como podem notar ele mostra somente 04 resultados, analisem bem a string JSON retornada e descubram como obter mais resultados, vai uma dica:

O resultado é paginado de 04 em 04 resultados, dentro do JSON retornado existem arrays, uma é o array results do qual obtivemos os resultados e outro e o array pages que fica em

$pages = $json->responsaData->cursor->pages;

É uma array assim:

array[0] => 04

array[1] => 08

array[2] => 12

array[3] => 16

array[4] => 20

array[5] => 24

array[6] => 28

array[7] => 32

Cada posição do array pode ser passado com parâmetro na url da seguinte forma:

http://ajax.googleapis.com/ajax/services/search/web?v=1.0&hl=pt-br&cr=countryBR&q=codigofonte.net&start=0

Notem o parâmetro start=0, significa que ele exibirá os 04 resultados da posição 0 do array, você pode mudar para 1 para obter mais 04 resultados e assim sucessivamente até obter 32 resultados que é o limite que a API fornece.

Você pode passar o parâmetro de busca via GET através de um formulário e depois passar o parâmetro de paginação via GET diretamente na URL do site.

Espero que entendam e consigam aprimorar.

Abs... Guilherme Lima

Tabela zebrada com PHP

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:

$("tr:odd td").css('background', '#008800'

);

Note que todas as tabelas da página ficarão com este efeito.
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...

Arquivo do blog