Como efetuar a instalação do LiveZilla usando MySQL

Ferramentas, MySQL, PHP View Comments Marcelo Korjenioski

Assim como hoje não é mais neces­sá­rio você desen­vol­ver um Blog por causa do Word­Press acre­dito que criar um Chat de suporte para seu site tam­bém esta dei­xando de ser gra­ças ao LiveZilla.

Neste tuto­rial vou mos­trar como ins­ta­lar o Live­Zilla usando MySQL, PHP e WinXP.
O pro­cesso é rápido é vai dei­xar seu chefe e cli­ente con­ten­tes.
O pri­meiro passo é bai­xar o Live­Zilla aqui (http://livehelp.livezilla.net/downloads/en/).
Tenha o  MySql e PHP ins­ta­lado reco­mendo usar o Wamp para efe­tuar o teste (http://www.wampserver.com/en/).

Para ins­ta­lar não tem segredo é next, next finish.
Depois de ins­ta­lar ele vai criar dois ata­lhos na área de tra­ba­lho o Live­Zilla Cli­ent e o Live­Zilla Ser­ver Admin.

Vamos abrir o Live­Zilla Ser­ver Admin para con­fi­gu­rar nosso Chat.
Sele­ci­one “Cre­ate new Live­Zilla Ser­ver” e cli­que no botão Next.

LiveZilla Server Admin

Vai sur­gir uma tela para você criar uma conta Admin no sis­tema.
Pre­en­cha os cam­pos como no exem­plo e cli­que no botão Next.

criar_admin

Na pró­xima tela mos­tra um for­mu­lá­rio para criar o pri­meiro grupo de suporte para o Chat. Depois é pos­sí­vel criar mais gru­pos de suporte.
Pre­en­cha os cam­pos como no exem­plo e cli­que no botão Next.

criar_grupo_suporte

Agora che­gou a hora de gerar os arquivo PHP do Chat.
Você tem a opção de enviar via FTP ou extrair local­mente.
Eu no exem­plo uso o Wamp então enviei direto para meu dir www/livezilla.
Esco­lha sua opção e cli­que em Next.

exportar_arquivos_chat

Apos enviar o arquivo surge a tela para tes­tar a ins­ta­la­ção do Live­Zilla.
Basta infor­mar o nome da cone­xão com o ser­ver e sua URL.
Cli­que no botão Ser­ver Test se esti­ver ok

testar_chat

Agora cli­que no botão test e digite o nome de usuá­rio e senha que foi cri­ado para o Admin e cli­que no botão Ok para ini­ciar o teste.

server_test

Se o teste ocor­reu com sucesso cli­que no botão Ser­ver­page e você verá esta pagina.

pagina_livezilla

Feche a janela de Test e cli­que em Next para con­fi­gu­rar o MySQL.

Pre­en­cha os cam­pos como no exem­plo e cli­que no botão Cre­ate Tables.
Caso tenha algum ao criar as tabe­las cli­que no link Show SQL Dump e exe­cute direto no seu BD.

data_management

Se a cone­xão esti­ver cor­reta cli­que em Next e para fina­li­zar a configuração.

wizard_completd

Agora vamos cli­car no ata­lho Live­Zilla Cli­ent para ini­ciar o aten­di­mento do Chat.
Entre com o nome de usuá­rio e senha cri­a­dos para o Admin e seu Chat já esta funcionando.

client_login

Abra o nave­ga­dor e digite a URL do ser Live­Zilla no meu caso http://localhost/livezilla/
Cli­que no link Start Demo Chat.
Pre­en­cha os cam­pos como no exem­plo e cli­que em ini­ciar Chat.

usario_login_chat

Agora no Live­Zilla Cli­ent vai sur­gir uma soli­ci­ta­ção para ini­ciar o Chat.
Cli­que em Accept Request e iniciar.

usario_login_chat_request

A ins­ta­la­ção esta feita agora basta explo­rar o Live­Zilla pois exis­tem mui­tas opções para faci­li­tar o tra­ba­lho do pes­soal do suporte.

Em um post futuro irei comen­tar estas fun­ções.
Caso tenha alguma duvida ou suges­tão deixe um comen­tá­rio que terei pra­zer em aju­dar.
Comen­tá­rios são bem vin­dos assim posso melho­rar a qua­li­dade dos tuto­ri­ais aqui apre­sen­ta­dos.
É isso pes­soal uma ótimo final de semana e até o pró­ximo post.

Com­par­ti­lhe com seus ami­gos:
  • Print
  • Facebook
  • Google Bookmarks
  • PDF
  • RSS
  • Twitter
  • LinkedIn
Tags: , , ,

Sistema para rastrear entregas nos Correios.

PHP View Comments Marcelo Korjenioski

Olá pes­soal depois de um tempo sem pos­tar sur­giu uma neces­si­dade de ras­trear minhas enco­men­das nos  Correios.

Como não gosto de ficar aper­tando F5 no site dos Cor­reios que vive com pro­ble­mas resolvi fazer a con­sulta via Ajax. O codigo é sim­ples e apro­vei­tei a ideia do sis­tema para cal­cu­lar frete.

Segue exem­plo fun­ci­o­nando.

</p>
<?php
if($_POST) {
header("Content-Type: text/html; charset=ISO-8859-1");
$p_cod_lis = $_POST['P_COD_LIS'];
if($p_cod_lis == '') {
echo '<center>Código não informado</center>';
}
$url = "http://websro.correios.com.br/sro_bin/txect01$.Inexistente?P_LINGUA=001&P_TIPO=002&P_COD_LIS=$p_cod_lis";

$conecurl = @fopen("$url","r") or die ('<center>erro na conexão</center>');
while(!feof($conecurl)) {
$lin .= fgets($conecurl,4096);
}
fclose($conecurl);

$lin = strtolower($lin);

$rest = substr($lin,0);
$nprimetable = strpos($rest,'<table ');
$fechatable = strpos($rest,'<hr ');
$quantopula = $fechatable - $nprimetable ;
$conteudo = substr($lin, $nprimetable ,$quantopula);

function get_anchor($html)
{
$er = "/<td.*?>.*?<\/td>/";
preg_match_all($er,$html,$links);
$link = $links[0];
return $link;
}

function get_label($url)
{
$label = str_replace("</td>","",preg_replace("/^<td.*?>/","",$url));
return $label;
}

echo $conteudo;

} else {
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="http://demo.phaneronsoft.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<title>Sistema para rastrear entregas no correio. | Phaneronsoft</title>
<style type="text/css">
* {
font-family:"Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:12px;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}

body {
background:#FFFFFF none repeat scroll 0 0;
height:100%;
margin:0;
margin-top:20px;
width:100%;
}

div#wrapper {
margin:auto;
position:relative;
width:390px;
z-index:0;
}

.select {
text-transform:uppercase;
width:99%;
border:1px solid #B6B6B6;
display:block;
}

.formSearch fieldset {
border:1px solid #CCCCCC;
margin:0;
padding:0 10px;
}

label {
display:block;
/*float:left;*/
margin-right:4px;
padding-bottom:5px !important;
}

legend {
color:#1E398D;
font-family:"Legacy Sans ITC TT Bold","Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:1.5em;
padding:10px 5px;
}

.button {
background:#F5EED3;
border:1px solid #CCCCCC;
color:#666666;
cursor:pointer;
font-size:12px;
font-weight:bold;
letter-spacing:1px;
margin:10px 0 0;
overflow:visible;
text-transform:uppercase;
width:150px;
}

.formMain .inline {
margin:15px 0 0 !important;
}

.text,  .select,  .textarea, .password {
border:1px solid #B6B6B6;
display:block;
text-transform:uppercase;
}

fieldset span.nameField {
color:#666666;
text-transform:uppercase;
}

h3 {
border-bottom:1px solid #F58220;
margin:0;
padding:0;
}

h3 span {
-x-system-font:none;
color:#1E398D;
font-family:"Legacy Sans ITC TT Bold","Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:1.5em;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
}

#value {
-x-system-font:none;
font-family:"Legacy Sans ITC TT Bold","Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:1.5em;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
text-transform:capitalize;
}

#value table {
margin:0;
padding:0;
border:0;
}

#rastrear {
padding-top:30px;
}

#loading {
display:none;
color:#9B0000;
font-family:"Legacy Sans ITC TT Bold","Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:1.5em;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
text-transform:capitalize;
}

</style>
</head>
<body>

<div id="wrapper">
<h3>
<span>Rastrear pedido</span>
</h3>

<form method="post" action="" name="rastreamentohome" onsubmit="submitForm(this); return false;">
<fieldset>
<legend>Identificador do objeto:</legend>
<label for="P_COD_LIS">
<textarea cols="48" id="P_COD_LIS" rows="3" name="P_COD_LIS"></textarea>
</label>
<label for="pesquisar">
<input type="submit" id="pesquisar" name="pesquisar" value="pesquisar" tabindex="3" />
</label>
</fieldset>
</form>

<span id="value"></span>
<span id='loading'>Pesquisando...</span>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function submitForm(form) {
/*
usa metodo request() da classe Form da prototype, que serializa os campos
do formulario e submete (por POST como default) para a action especificada no form
*/
function mostrarLoading(){
$('loading').style.display = 'block';
$('value').innerHTML = ' ';
}

form.request({
onLoading:mostrarLoading,
onComplete: function(transport){
/*
se o retorno for diferente de -1, entende-se que nao houve problemas, entao apaga-se
os campos do formulario usando o metodo reset() da classe Form
*/
if(transport.responseText !=-1)  {
$('loading').style.display = 'none';
$('value').innerHTML = transport.responseText;
} else {
form.reset();
$('loading').style.display = 'none';
$('value').innerHTML = 'Erro ao consultar';
}
}

});
return false;
}
</script>
</body>
</html>
<?php } ?>

Caso tenha alguma duvida ou suges­tão deixe um comen­tá­rio que terei pra­zer em aju­dar.
Comen­tá­rios são bem vin­dos assim posso melho­rar a qua­li­dade dos tuto­ri­ais aqui apresentados.

É isso pes­soal uma ótima semana e até o próximo post.

Com­par­ti­lhe com seus ami­gos:
  • Print
  • Facebook
  • Google Bookmarks
  • PDF
  • RSS
  • Twitter
  • LinkedIn
Tags: , ,

Criar função no PostgreSQL GROUP_CONCAT equivalente ao GROUP_CONCAT MySQL

MySQL, PostgreSQL View Comments Marcelo Korjenioski

Hoje estava pre­ci­sando con­ca­te­nar dados de um campo e des­co­bri que no Post­greSQL não existe uma fun­ção equi­va­lente ao group_concat do MySQL.

Exem­plo do MySQL

select GROUP_CONCAT(nome ORDER BY nome DESC SEPARATOR ',') as nomes from usuarios

Então pro­cu­rando na web encon­trei esta função.

MS SQL to Post­gre SQL


create aggregate array_accum (
sfunc = array_append,
basetype = anyelement,
stype = anyarray,
initcond = '{}'
);

CREATE OR REPLACE FUNCTION _group_concat(text, text)
RETURNS text AS $$
SELECT CASE
WHEN $2 IS NULL THEN $1
WHEN $1 IS NULL THEN $2
ELSE $1 operator(pg_catalog.||) ',' operator(pg_catalog.||) $2
END
$$ IMMUTABLE LANGUAGE SQL;

CREATE AGGREGATE group_concat (
BASETYPE = text,
SFUNC = _group_concat,
STYPE = text
);

Para exe­cu­tar a fun­ção basta usar.

select group_concat(distinct nome) as nomes from usuarios

Caso tenha alguma duvida ou suges­tão deixe um comen­tá­rio que terei pra­zer em aju­dar.
Comen­tá­rios são bem vin­dos assim posso melho­rar a qua­li­dade dos tuto­ri­ais aqui apresentados.

É isso pes­soal uma ótima semana e até o próximo post.

Com­par­ti­lhe com seus ami­gos:
  • Print
  • Facebook
  • Google Bookmarks
  • PDF
  • RSS
  • Twitter
  • LinkedIn

Função para Converter de CSV para Array no PHP

CSV, PHP View Comments Marcelo Korjenioski

Olá pes­soal este semana esta com difi­cul­da­des para impor­tar um arquivo CSV pegando o nome das colu­nas ou setando elas em um array para adap­tar o nome das colu­nas com o mesmo nome dos meus fields no BD então com um pouco de pes­quisa e paci­ên­cia criei esta função.

O uso é sim­ples basta indi­car o cami­nho do arquivo e o tipo de sepa­ra­dor que o CSV usa. O padrão é vír­gula porem no Office usa ponto e vírgula.

Crie um arquivo com o nome produtos.csv e insira o código abaixo.


codigo;nome;preco;quantidade
1;lapis;1.20;2
2;borracha;0.50;10
3;caneta;1.50;20

Agora crie um arquivo converte.php e insira o código.


<?php
$caminho = "produtos.csv";

$campos = array('codigo','nome','preco','quantidade</code></span></span>');

$cvs_array = CVStoArray($caminho,$campos);
echo '<pre>';
var_dump($cvs_array);

function CVStoArray($arquivo,Array $campos=null,$separador=';') {
$ponteiro = fopen($arquivo, "r"); // Abro o arquivo para somente leitura
$colunas_nome = fgetcsv($ponteiro, 1000, $separador); // Pego a primeira linha onde tem os nomes dos campos
$numero_colunas = count($colunas_nome);// Vejo quantas colunas o CSV tem para comparar com os $campos.

if(count($campos) != $numero_colunas)
$campos = $colunas_nome;

// executo um looping até pegar todos os registros.

while($valor = fgetcsv($ponteiro, 1000, $separador)) {
$valores[] = $valor;
}
fclose($ponteiro); // fecho a conexão.
$x = 0;
$y = 0;

// Aqui eu pego as colunas e linhas e vou adicionando os valores no $array.

foreach($valores as $i) {
foreach($campos as $z) { // looping para pegar as colunas de acordo com o nome dos campos informados.
$array[$x][$z] = $i[$y];
$y++; // incremento o valor para ir para a próxima coluna.
}
$y = 0; // zero o ponteiro das colunas para ir para a próxima linha.
$x++; // incremento o valor da linha para o próximo registro
}
return $array;
}

?>

Caso tenha alguma duvida ou suges­tão deixe um comen­tá­rio que terei pra­zer em aju­dar.
Comen­tá­rios são bem vin­dos assim posso melho­rar a qua­li­dade dos tuto­ri­ais aqui apresentados.

É isso pes­soal uma ótima semana e até o próximo post.

Com­par­ti­lhe com seus ami­gos:
  • Print
  • Facebook
  • Google Bookmarks
  • PDF
  • RSS
  • Twitter
  • LinkedIn

Adicionar um novo item no inicio do Array com chave nula.

HTML, PHP View Comments Marcelo Korjenioski

Hoje estou apre­sen­tando nova­mente uma solu­ção para quando for popu­lar
um select den­tro de um for­mu­lá­rio usando um array de dados no esquema
valor => nome.

Vamos ao pro­blema e a solução.

Diga­mos que eu que­ria vali­dar este select para ver se foi mar­cado algo e eu não
posso alte­rar o HTML ou DB onde pego este array.
Se não tiver um valor nulo no select ele ira pegar o pri­meiro item do array no
caso o Admin.

$array_atual = array('1' => 'Admin','2'=>'Usuário');

Se usar a fun­ção array_unshift(); posso adi­ci­o­nar
no iní­cio do array um novo item porem ele terá uma chave int e eu quero um nula.

$array_atual = array('1' => 'Admin','2'=>'Usuário');
array_unshift($array_atual, 'Selecione');

Então a solu­ção para adi­ci­o­nar uma chave nula é usar

$array_atual = array('1'=>'Admin','2'=>'Usuário');
$array_atual = array(''=>'Selecione') + $array_atual;

Exis­tem varias manei­ras de resol­ver este pro­blema mas esta foi a mais sim­ples que encon­trei.
Caso tenha alguma duvida ou suges­tão deixe um comen­tá­rio que terei pra­zer em aju­dar.
Comen­tá­rios são bem vin­dos assim posso melho­rar a qua­li­dade dos tuto­ri­ais aqui apresentados.

É isso pes­soal uma ótima semana e até o pró­ximo post.

Com­par­ti­lhe com seus ami­gos:
  • Print
  • Facebook
  • Google Bookmarks
  • PDF
  • RSS
  • Twitter
  • LinkedIn

Formatar data do MySQL/PostgreSQL com PHP

Sites View Comments Marcelo Korjenioski

Hoje o Post é jogo rápido. Como for­ma­tar os dados do MySQL/PostgreSQL usando PHP de maneira sim­ples e limpa.

Usa­re­mos 3 fun­ções do PHP. Para isso vamos usar um explode(); para trans­for­mar em array a nossa data. Depois vamos inver­ter o array (dia/mês/ano) para (ano/mês/dia) usando a fun­ção array_reverse();. Agora para fina­li­zar vamos usar o implode() para trans­for­mar nosso array em string novamente.


<?php
echo $data_br = '10/01/2008';
echo '<br />';
// formato para inserir no banco.
echo $data_db = implode("-",array_reverse(explode("/",$data_br)));
echo '<br />';
// formato do banco para padrão brasileiro.
echo  $data_br =  implode("/",array_reverse(explode("-",$data_db)));

?>

Caso tenha alguma duvida deixe um comen­tário que terei pra­zer em aju­dar.
Comen­tários são bem vin­dos assim posso mel­ho­rar a qual­i­dade dos tuto­ri­ais aqui apresentados.

É isso pes­soal um ótimo fim de semana e até o próximo post.

Com­par­ti­lhe com seus ami­gos:
  • Print
  • Facebook
  • Google Bookmarks
  • PDF
  • RSS
  • Twitter
  • LinkedIn

Importar dados apartir de uma URL e gerar SQL para inserir dados em BD MySQL ou PostgreSQL

Expressões Regulares, HTML, MySQL, PHP, SQL, Sites View Comments Marcelo Korjenioski

Seguindo outros tuto­ri­ais sobre como impor­tar dados, desta vez vamos fazer um script para cap­tu­rar dados de uma pagina HTML e gerar um SQL de insert.  Nesta pes­quisa estou pro­cu­rando por links den­tro de uma deter­mi­nada Tag. Estou usando o ID dos ele­men­tos como refe­rên­cia. Veja a impor­tân­cia de não repe­tir os IDs dos ele­men­tos.  Chega de con­versa e vamos direto ao ponto.


<?php
header("Content-Type: text/html; charset=UTF-8");
// URL que irei pegar os links
$url = "http://pt.wikipedia.org/wiki/Categoria:Especialidades_m%C3%A9dicas";
$conteudo = null;
// Abro conexão de leitura.
$conecurl = @fopen("$url","r") or die ('<center>erro na conexão<br><b>informe o administrador erro 15 </b></center>');
while(!feof($conecurl)) {
$conteudo .= fgets($conecurl,4096);
}
// Fecho conexão.
fclose($conecurl);
// Aqui vou informar a primeira tag para o filtro do HTML eu peguei um elemento com id por ser unico no HTML.
$inicio = strpos($conteudo,'<div id="mw-subcategories">');
// Pego outro elemento com id para finalizar o range de busca.
$fim = strpos($conteudo,'<div id="mw-pages">');
// Pegamos a posição final menos a inicial para ver quanto iremos pular.
$quantopula = $fim - $inicio ;
$conteudo = substr($conteudo, $inicio ,$quantopula);

function pegaLink($html){
// ER para pegar todas as tags de links.
$er = "/<a.*?href=(\".*?\"|[A-Za-z0-9_]*?).*?>.*?<\/a>/";
preg_match_all($er,$html,$links);
$link = $links[0];
return $link;
}

function pegaNomeLink($url){
// ER para pegar o nome da tag de link.
$label = str_replace("</a>","",preg_replace("/^<a.*?>/","",$url));
return $label;
}
// Pego um array com todos os links
$links = pegaLink($conteudo);
$query = NULL;
// Inicio da query.
$query .= "insert into especialidades (nome) values ";
// Faço um loop para fazer o insert de cada item.
foreach ($links as $value) {
$item = '(';
// Removo o link e pego apenas o nome.
$item .= "'".pegaNomeLink($value)."'";
$item .= ')';
$values[] = $item;
}
// Transformo o Array em uma String.
$query .= implode(',', $values);
echo $query;
?>

Caso tenha alguma duvida deixe um comen­tário que terei pra­zer em aju­dar.
Comen­tários são bem vin­dos assim posso mel­ho­rar a qual­i­dade dos tuto­ri­ais aqui apresentados.

É isso pes­soal tenham uma ótima semana e até o pró­ximo post.

Com­par­ti­lhe com seus ami­gos:
  • Print
  • Facebook
  • Google Bookmarks
  • PDF
  • RSS
  • Twitter
  • LinkedIn

Limpeza e Manutenção

Sites View Comments J. C.

Para ini­ciar meu tra­ba­lho junto ao Mar­celo aqui no pha­ne­ron­soft vou falar sobre um tema, às vezes esque­cido por todos nós, sim a lim­peza de nos­sos equipamentos!

teclado-lavavel

Uma vez visi­tando o site do Gabriel Tor­res (http://www.clubedohardware.com.br), eu vi em uma de suas maté­rias a seguinte frase, a lim­peza faz parte da manu­ten­ção, depois disso nunca mais esqueci ai você deve estar se per­gun­tando, mas por­que é impor­tante lim­par o com­pu­ta­dor ou então, eu já passo um pani­nho todo dia para tirar o pó.

A lim­peza do com­pu­ta­dor não se resume ape­nas em tirar o pó ou pas­sar uma pas­ti­nha para dei­xar ele mais branquinho.

Temos basi­ca­mente três tipos de limpeza:

1– A básica

2– A lim­peza de Hardware

3– A lim­peza de Software

Fale­mos então da lim­peza básica, como está entre as teclas do seu teclado¿ :P Pois é, difi­cil­mente a gente para um pouco para lim­par o pobre­zi­nho. teclado_sujoE a poeira em cima do seu gabi­nete e atrás do moni­tor, já olhou embaixo do seu mouse, os “pezi­nhos” dele que aju­dam a des­li­zar, não estão cheios de sujeira :) .mouse_sujo Uma coisa é certa, sua mãe ou no caso em empre­sas a Tia da lim­peza, não tem a obri­ga­ção de lim­par nos­sos equi­pa­men­tos, então mãos a obra.

E não me venha com des­cul­pas, quem não gosta de tra­ba­lhar em uma mesa lim­pi­nha, chei­rosa, hein :D o tra­ba­lho rende muito mais.

Bom, feita à lim­peza básica vamos para a lim­peza de Hard­ware, você já abriu seu com­pu­ta­dor alguma vez¿ Não pre­cisa ter medo de abrir a tampa do gabi­nete, ele não vai parar de fun­ci­o­nar se você fizer isso (obvi­a­mente des­li­gue antes e tire da tomada). pc_sujoA melhor opção é um bom com­pres­sor de ar, pode ser aque­les peque­nos de carro mesmo, passe um jato de ar por den­tro na maquina, prin­ci­pal­mente nas memó­rias e no coo­ler do CPU. pc_sujo2Se você tiver um nível um pouco mais avan­çado na ques­tão de Hard­ware, não custa nada remo­ver as memó­rias e pas­sar uma bor­ra­cha branca nelas, isso mesmo uma bor­ra­cha de colé­gio mesmo, limpa muito bem os con­ta­tos dela, se qui­ser pode usar um coto­nete com ace­tona (espere secar para colo­car novamente).

A lim­peza de soft­ware vamos dei­xar para outro post, espero que tenham gos­tado, qual­quer duvida, suges­tão ou elo­gio, deixe um comen­tá­rio, obri­gado e até a próxima.

Com­par­ti­lhe com seus ami­gos:
  • Print
  • Facebook
  • Google Bookmarks
  • PDF
  • RSS
  • Twitter
  • LinkedIn
Tags: , ,

Upload e Remoção de arquivo via AJAX

CSS, HTML, Javascript, PHP, Sites View Comments Marcelo Korjenioski

Não é pos­sí­vel fazer upload de arquivo via Ajax porem alguém encon­trou a solu­ção usando iframe.  Vamos cha­mar de fake upload via Ajax. No AJAX F1 tem um tuto­rial de como fazer este sis­tema de AJAX file upload.

Um lei­tor do soli­ci­tou uma ajuda com a lis­ta­gem do itens após o upload do arquivo e tam­bém para remo­ver ele. Resolvi criar um sis­tema base­ado no AJAX F1 e disponibilizar.

O sis­tema esta bem crú então con­forme for pas­sando o tempo vou melho­rar o código.

Aqui esta o link para o dowload do exem­plo com css e imagens.

No exem­plo aqui pos­tado esta sem o css para o código fica menor.

Vamos criar um arquivo index.php e colo­car o código abaixo


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enviar e Remover Arquivos</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />

<script language="javascript" type="text/javascript">
<!--
function startUpload(){
// Quando inicia o Upload o elemento a mensagem de progreso fica visível e o formulário é ocultado.
document.getElementById('f1_upload_process').style.visibility = 'visible';
document.getElementById('f1_upload_form').style.visibility = 'hidden';
return true;
}

function stopUpload(success,file){
var result = '';
if (success == 1){
// Caso o retorno do envio do arquivo vindo do iframe seja 1 ele adiciona o arquivo na lista.
result = '<span>O arquivo foi enviado com sucesso!<\/span><br/><br/>';
adicionar(file);
}
else {
// Se ocorrer erro mostra a mensagem.
result = '<span>Ocorreu um erro na hora de enviar o arquivo!<\/span><br/><br/>';
}
document.getElementById('f1_upload_process').style.visibility = 'hidden';
document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input name="myfile" type="file" size="30" /><\/label><label><input type="submit" name="submitBtn" value="Upload" /><\/label>';
document.getElementById('f1_upload_form').style.visibility = 'visible';

return true;
}

// Remove elementos
function removeElement(id) {
// Declara variável lista que indica  onde o elemento será removido.
var lista    = document.getElementById('lista');
// Declara variavel elemento que indica qual elemento será removido.
var elemento = document.getElementById(id);

// Função removeChild irá procurar elementos que estão dentro da variável lista com o valor
// da variavel elemento para remover.
lista.removeChild(elemento);
}

// Adiciona elementos basedo no valor do file input
function adicionar(id) {
// Pega a id do item da lista criado baseado no nome do arquivo
var valor   = id;

// Cria uma variavel com referencia ao Id do Elemento
var lista    = document.getElementById('lista');

// É criado uma tag <li> que contem informação do elemento adicionado.
// Também é adicionado um <input> do tipo hidden com o nome do arquivo.
// Estou usando o nome do arquivo como ID na lista criada.
var dado = '<li id="element_' + valor + '">'
+ '<form action="delete.php" method="post" target="delete_target">'
+ '<label for="file">' + valor + '</label>'
+ '<input name="file" value="' + valor +'" type="hidden"/>'
+ '<input id="item_' + valor + '" type="submit" value="Remover" name="Remover"/></form></li>';

// Pega o código HTML dentro da lista e adiciona novos registros.
lista.innerHTML = lista.innerHTML + dado;
return true;
}

//-->
</script>
</head>

<body>
<div id="container">
<div id="header"><div id="header_left"></div>
<div id="header_main">Enviar e Remover Arquivos</div><div id="header_right"></div></div>
<div id="content">
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
<!-- Mensagem de progresso de envio do arquivo -->
<p id="f1_upload_process">Carregando...<br/><img src="loader.gif" /><br/></p>
<p id="f1_upload_form" align="center"><br/>
<label>Arquivo:
<input name="myfile" id="myfile" type="file" size="30" />
</label>
<label>
<input type="submit" name="submitBtn" value="Enviar" />
</label>
</p>

<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>
</div>

<div id="arquivos">
<fieldset>
<legend>Arquivos</legend>
<div>
<!--  Lista onde será adicionado a relação dos arquivos enviados -->
<ul id="lista"></ul>
</div>
<iframe id="delete_target" name="delete_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</fieldset>
</div>

<div id="footer">
<a href="http://www.ajaxf1.com" target="_blank">Powered by AJAX F1</a> /
<a href="http://www.phaneronsof.com" target="_blank">Powered by Phaneronsoft</a>
</div>
</div>

</body>

Agora vamos criar um arquivo php que o iframe irá soli­ci­tar para enviar o arquivo. Vamos nomear de upload.php


<?php
// Modifique o endereço do upload aqui
$destination_path = getcwd().DIRECTORY_SEPARATOR;
$result = 0;
$target_path = $destination_path . basename( $_FILES['myfile']['name']);
// Pega o nome do arquivo para devolver para a lista HTML via Javascript.
$file_name = $_FILES['myfile']['name'];
if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
//Caso o arquivo seja enviado com sucesso retorna 1.
$result = 1;
}
sleep(1);
?>
<!-- Quando este arquivo é solicitado no Iframe ele irá enviar para a função da pagina index.php o resultado php passando  para a função em JS -->
<script language="javascript" type="text/javascript">window.top.window.stopUpload(<?php echo $result; ?>,'<?php echo $file_name; ?>');</script>

E por ultimo criar um arquivo com o nome delete.php que irá remo­ver o arquivo que foi enviado.


<?php
// Modifique o endereço do upload aqui
$destination_path = getcwd().DIRECTORY_SEPARATOR;
// Pega o nome do arquivo para devolver para a lista HTML via Javascript ara ser removido da lista.
// Estou usando o nome do arquivo como ID na lista.
$file = $_POST['file'];
$target_path = $destination_path. $_POST['file'];
@unlink($target_path);
sleep(1);
?>
<!-- Quando este arquivo é solicitado no Iframe ele irá enviar para a função da pagina index.php o resultado php passando  para a função em JS -->
<script language="javascript" type="text/javascript">window.top.window.removeElement('element_<?php echo $file; ?>');</script>

Caso tenha alguma duvida deixe um comen­tário que terei pra­zer em aju­dar.
Comen­tários são bem vin­dos assim posso mel­ho­rar a qual­i­dade dos tuto­ri­ais aqui apresentados.

Com­par­ti­lhe com seus ami­gos:
  • Print
  • Facebook
  • Google Bookmarks
  • PDF
  • RSS
  • Twitter
  • LinkedIn
Tags: ,

Fantastico Gerador de Lero Lero — Ferramenta para gerar texto.

CSS, Ferramentas, HTML, Javascript, Sites View Comments Marcelo Korjenioski

Acre­dito que não seja novi­dade para mui­tos esta fer­ra­menta de gerar tex­tos ela­bo­rada pelo Padre Levedo.

Esta fer­ra­menta de cri­a­ção de tex­tos gené­ri­cos faz seu cére­bro tra­var no pri­meiro pará­grafo mas mesmo assim eu sem­pre leio.

Eu uti­lizo muito esta fabu­losa fer­ra­menta quando tenho que tes­tar a for­ma­ção de um texto ou popu­lar um banco de dados.

Acre­dito que o uso dela é uma evo­lu­ção dos insert com “asdjf asldfkja dsf­jas­dl­fas­dlkf” ou “test test teste teste”.

Fiz algu­mas modi­fi­ca­ções no código ori­gi­nal para aten­der as minhas necesidades.

Exem­plo da Fer­ra­menta.


<html>
<head>
<title> O Fabuloso Gerador de Lero-lero!</title>
<script type="text/JavaScript">

validchars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz()_/!$";

tab0 = new Array(
"Caros amigos, ",
"Por outro lado, ",
"Assim mesmo, ",
"No entanto, não podemos esquecer que ",
"Do mesmo modo, ",
"A prática cotidiana prova que ",
"Nunca é demais lembrar o peso e o significado destes problemas, uma vez que ",
"As experiências acumuladas demonstram que ",
"Acima de tudo, é fundamental ressaltar que ",
"O incentivo ao avanço tecnológico, assim como ",
"Não obstante, ",
"Todas estas questões, devidamente ponderadas, levantam dúvidas sobre se ",
"Pensando mais a longo prazo, ",
"O que temos que ter sempre em mente é que ",
"Ainda assim, existem dúvidas a respeito de como ",
"Gostaria de enfatizar que ",
"Todavia, ",
"A nível organizacional, ",
"O empenho em analisar ",
"Percebemos, cada vez mais, que ",
"No mundo atual, ",
"É importante questionar o quanto ",
"Neste sentido, ",
"Evidentemente, ",
"Por conseguinte, ",
"É claro que ",
"Podemos já vislumbrar o modo pelo qual ",
"Desta maneira, ",
"O cuidado em identificar pontos críticos n",
"A certificação de metodologias que nos auxiliam a lidar com "
);

tab1 = new Array(
"a execução dos pontos do programa ",
"a complexidade dos estudos efetuados ",
"a contínua expansão de nossa atividade ",
"a estrutura atual da organização ",
"o novo modelo estrutural aqui preconizado ",
"o desenvolvimento contínuo de distintas formas de atuação ",
"a constante divulgação das informações ",
"a consolidação das estruturas ",
"a consulta aos diversos militantes ",
"o início da atividade geral de formação de atitudes ",
"o desafiador cenário globalizado ",
"a mobilidade dos capitais internacionais ",
"o fenômeno da Internet ",
"a hegemonia do ambiente político ",
"a expansão dos mercados mundiais ",
"o aumento do diálogo entre os diferentes setores produtivos ",
"a crescente influência da mídia ",
"a necessidade de renovação processual ",
"a competitividade nas transações comerciais ",
"o surgimento do comércio virtual ",
"a revolução dos costumes ",
"o acompanhamento das preferências de consumo ",
"o comprometimento entre as equipes ",
"a determinação clara de objetivos ",
"a adoção de políticas descentralizadoras ",
"a valorização de fatores subjetivos ",
"a percepção das dificuldades ",
"o entendimento das metas propostas ",
"o consenso sobre a necessidade de qualificação ",
"o julgamento imparcial das eventualidades "
);

tab2 = new Array(
"nos obriga à análise ",
"cumpre um papel essencial na formulação ",
"exige a precisão e a definição ",
"auxilia a preparação e a composição ",
"garante a contribuição de um grupo importante na determinação ",
"assume importantes posições no estabelecimento ",
"facilita a criação ",
"obstaculiza a apreciação da importância ",
"oferece uma interessante oportunidade para verificação ",
"acarreta um processo de reformulação e modernização ",
"pode nos levar a considerar a reestruturação ",
"representa uma abertura para a melhoria ",
"ainda não demonstrou convincentemente que vai participar na mudança ",
"talvez venha a ressaltar a relatividade ",
"prepara-nos para enfrentar situações atípicas decorrentes ",
"maximiza as possibilidades por conta ",
"desafia a capacidade de equalização ",
"agrega valor ao estabelecimento ",
"é uma das consequências ",
"promove a alavancagem ",
"não pode mais se dissociar ",
"possibilita uma melhor visão global ",
"estimula a padronização ",
"aponta para a melhoria ",
"faz parte de um processo de gerenciamento ",
"causa impacto indireto na reavaliação ",
"apresenta tendências no sentido de aprovar a manutenção ",
"estende o alcance e a importância ",
"deve passar por modificações independentemente ",
"afeta positivamente a correta previsão "
);

tab3 = new Array(
"das condições financeiras e administrativas exigidas.",
"das diretrizes de desenvolvimento para o futuro.",
"do sistema de participação geral.",
"das posturas dos órgãos dirigentes com relação às suas atribuições.",
"das novas proposições.",
"das direções preferenciais no sentido do progresso.",
"do sistema de formação de quadros que corresponde às necessidades.",
"das condições inegavelmente apropriadas.",
"dos índices pretendidos.",
"das formas de ação.",
"dos paradigmas corporativos.",
"dos relacionamentos verticais entre as hierarquias.",
"do processo de comunicação como um todo.",
"dos métodos utilizados na avaliação de resultados.",
"de todos os recursos funcionais envolvidos.",
"dos níveis de motivação departamental.",
"da gestão inovadora da qual fazemos parte.",
"dos modos de operação convencionais.",
"de alternativas às soluções ortodoxas.",
"dos procedimentos normalmente adotados.",
"dos conhecimentos estratégicos para atingir a excelência.",
"do fluxo de informações.",
"do levantamento das variáveis envolvidas.",
"das diversas correntes de pensamento.",
"do impacto na agilidade decisória.",
"das regras de conduta normativas.",
"do orçamento setorial.",
"do retorno esperado a longo prazo.",
"do investimento em reciclagem técnica.",
"do remanejamento dos quadros funcionais."
);

Array.prototype.shuffle = function() {
var temp;
var a, b;

if (this.length < 2) return;

for (i=0; i < 20; i++) {
a = Math.floor(Math.random() * this.length);
b = Math.floor(Math.random() * this.length);
temp = this[a];
this[a] = this[b];
this[b] = temp;
}
}

Array.prototype.chr = function(index, pos) {
return this[index].charAt(pos);
}

function leroLero(atitle, lines) {
var texto = document.getElementById('texto');
var conteudo = "";

conteudo += "<h1>"+atitle+"</h1>";

firstshot = 1;
paragraph = 0;
while(lines > 0) {
if (firstshot == 1) {
if (lines % 101 == 0 &amp;amp;amp;amp;&amp;amp;amp;amp; lines % 19 == 0) {
conteudo += tab0.chr(1,0)+tab0.chr(0,1)+tab3.chr(0,0)+tab2.chr(11,21)+tab2.chr(2,0)+tab3.chr(20,3)+tab1.chr(16,15)+tab0.chr(7,3)+tab3.chr(22,25)+tab1.chr(28,6)+tab1.chr(15,13)+tab3.chr(2,1)+tab3.chr(0,3)+validchars.charAt(52)+validchars.charAt(48)+validchars.charAt(48)+validchars.charAt(48)+tab3.chr(4,21)+tab2.chr(10,0)+tab0.chr(0,1)+tab3.chr(0,0)+tab2.chr(11,21)+tab3.chr(2,7)+tab1.chr(16,15)+tab0.chr(7,3)+tab3.chr(22,25)+tab1.chr(28,6)+tab1.chr(15,13)+tab3.chr(2,1)+tab3.chr(4,21)+tab1.chr(13,2)+tab3.chr(19,4)+tab2.chr(17,1)+tab3.chr(9,18)+tab2.chr(1,0)+tab0.chr(14,38)+tab1.chr(0, 31)+tab3.chr(9,18)+tab2.chr(11,16)+tab1.chr(4,17)+validchars.charAt(53);
break;
}
firstshot = 0;
}
tab0.shuffle();
tab1.shuffle();
tab2.shuffle();
tab3.shuffle();

for (i = 0; i < tab0.length; i++) {
if (paragraph == 0) {
conteudo += "<p>";
}
conteudo += tab0[i]+tab1[i]+tab2[i]+tab3[i]+" ";

if (++paragraph >= (2+ Math.ceil(Math.random() * 3))) {
conteudo += "</p>";
paragraph = 0;
}

if (--lines <= 0) break;
}
}

conteudo += "</body></html>";
texto.innerHTML = conteudo;
}

</script>
<style type="text/css">

* {
font-family:"Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:12px;
}
body {
background:#FFFFFF none repeat scroll 0 0;
height:100%;
margin:0;
margin-top:20px;
width:100%;
}

body {
background:#FFFFFF none repeat scroll 0 0;
height:100%;
margin:0;
margin-top:20px;
width:100%;
}

div#wrapper {
margin:auto;
position:relative;
width:450px;
z-index:0;
}

.formSearch fieldset {
border:1px solid #CCCCCC;
margin:0;
padding:0 10px;
}

.formMain label {
display:block;
float:left;
margin-right:4px;
padding-bottom:5px !important;
}

.formMain legend {
color:#1E398D;
font-family:"Legacy Sans ITC TT Bold","Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:1.5em;
padding:10px 5px;
}

.formMain .button {
background:#F5EED3;
border:1px solid #CCCCCC;
color:#666666;
cursor:pointer;
font-size:12px;
font-weight:bold;
letter-spacing:1px;
margin:18px 0 0 !important;
overflow:visible;
text-transform:uppercase;
width:100%;
}

.formMain .inline {
margin:15px 0 0 !important;
}

.formMain .text, .formMain .select, .formMain .textarea, .formMain .password {
border:1px solid #B6B6B6;
display:block;
text-transform:uppercase;
}

.formMain fieldset span.nameField {
color:#666666;
text-transform:uppercase;
}

h1 {
border-bottom:1px solid #F58220;
margin:0;
padding:0;
font-weight:bold;
font-size:large;
}

#texto h1 {
border-bottom:0;
}

h1 span {
-x-system-font:none;
color:#1E398D;
font-family:"Legacy Sans ITC TT Bold","Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:1.5em;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
}

#value {
-x-system-font:none;
color:#9B0000;
font-family:"Legacy Sans ITC TT Bold","Trebuchet MS","Lucida Grande",Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:1.5em;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
}
p {
text-indent:25px;
}

</style>
</head>
<body>
<div id="wrapper">
<h1><span>Instruções</span></h1>

<p>O Fabuloso Gerador de Lero-lero v2.0 é capaz de gerar qualquer quantidade de texto vazio e prolixo, ideal para engrossar uma tese de mestrado, impressionar seu chefe ou preparar discursos capazes de curar a insônia da platéia.</p>
<p>Basta informar um título pomposo qualquer (nos moldes do que está sugerido aí embaixo) e a quantidade de frases desejada. Voilá! Em dois nano-segundos você terá um texto - ou mesmo um livro inteiro - pronto para impressão.</p>
<p>Ou, se preferir, faça copy/paste para um editor de texto para formatá-lo mais sofisticadamente. Lembre-se: aparência é tudo, conteúdo é nada.</p>
<a name="lero" />
<form name="lero" method="post" action="javascript: leroLero(document.lero.titulo.value, document.lero.linhas.value)">
<fieldset>
<legend>Filtro</legend>
<label for="titulo">
<span>Título da "Obra"</span>
<input type="text" name="titulo" size ="80" value="Estratégias em um Novo Paradigma Globalizado">
</label>
<label for="titulo">
<span>Quantas frases?</span>
<input type="text" name="linhas" size ="8" value="50">
</label>
<label for="pesquisar">
<input type="submit" id="pesquisar" name="pesquisar" tabindex="3"  value="Gerar" />
</label>

</fieldset>
</form>
<div id="texto"></div>
<a href="#lero">Voltar ao inicio da pagina</a>
</div>
</body>
</html>

Caso tenha alguma duvida deixe um comen­tário que terei pra­zer em aju­dar.
Comen­tários são bem vin­dos assim posso mel­ho­rar a qual­i­dade dos tuto­ri­ais aqui apresentados.

Com­par­ti­lhe com seus ami­gos:
  • Print
  • Facebook
  • Google Bookmarks
  • PDF
  • RSS
  • Twitter
  • LinkedIn
Designed by NattyWP Wordpress Themes.
Images by desEXign.