#HTML5, Salvando texto na bd *ContentEditable*

3

Agosto 31, 2012 por Firmino Changani

html5

Sem duvidas que o HTML5 trouxe consigo uma grande bagagem de features que têm facilitado a vida dos desenvolvedores através da independência de certas plataformas ou linguagens.

Vocês já  devem ter visto, usado ou lido um pouco sobre o atributo contenteditable que possui valores true false, está propriedade torna o conteudo de um elemento editavel quando definida com o valor true ex: <h1 contenteditable=”true”> WebVisão </h1>

VAMO QUE VAMO

Vamos para alem disso, vou mostrar pra vocês como salvar o conteudo editado numa bd com jquery(AJAX), php e mysql. Os arquivos estão disponiveis no GitHub.

Criei 2 arquivos: index.html e o guardar.php;

No <head>

<style type=”text/css”>
   #wrap{
    width:500px;
    margin:0 auto;
   }
   h1{
    font-size:50px;
   }
  </style>
  <script type=”text/javascript” src=”jquery-1.8.0.min.js”> </script> 

No codigo acima apenas fiz a insersão do css interno onde o #wrap é um section de 500px de largura e está centralizado na pagina, e adicionei tambem o jquery v1.8.0.

No <body>

<section id=”wrap”>
   <h1> A tua ideia? </h1>
   <p contenteditable=”true” onBlur=”guardar()”  id=”valor2″> Escrever mais post’s no blog  </p>
  </section>

Acima declarei um section que vai estar centralizado segundo o que foi declarado no css (#wrap), a seguir o h1 que não é relevante só coloquei para fazer sentido, agora sim a tag <p> que possui o atributo contenteditable e o evento onBlur que vai executar a função guardar() sempre que a tag <p> perder o focus ou sempre que eu clicar fora do paragrafo a função será executada.

O js

<script type=”text/javascript”> 
   function guardar(){
    var valor2 = $(“#valor2”).html();
    $.post(‘guardar.php’, {valor2:valor2});
   }
  </script>

Codigo super fácil, declarei a função guardar(), criei a variavel valor2 que vair receber os dados da tag <p id=”valor2″> com id valor2 e depois usei o metodo $.post() do jquery pra enviar os dados contidos na variavel valor2, sabendo que {valor2:valor2} o primeiro valor2 será passado na arquivo php e o segundo é a variavel que contem os dados da tag <p>.

No php

<?php  

//CONEXÃO COM A BD  

$server = mysql_connect(“localhost”, “root”, “”);  

$bd = mysql_select_db(“webvisao”, $server);

 //OBTENDO VALORES PELO METODO POST

 $valor2 = $_POST[‘valor2’];

 $guardar = mysql_query(“INSERT INTO ideias (texto) values(‘$valor2’)”);

?>

Isso é o habitual, conexão com o server e selecionar a bd, receber os valores pelo metodo post e inserir os dados na bd com o comando INSERT INTO (cake). Lembrando que o nome a minha bd é webvisao e a tabela é ideias (claro que vocês podem atribuir outros nomes #fun).

A bd

CREATE TABLE IF NOT EXISTS `ideias` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `texto` varchar(150) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=32 ;

**UPDATE – Retornar erros do PHP com ajax**

Muitas vezes ao usarmos a técnica ajax não conseguimos visualizar os erros do script php porque ele foi processado em segundo plano por causa da requisição em tempo real (o poder do ajax). Mas existe uma forma de obter o valor que o script php vai retornar, mesmo que forem erros ele será retornado.

O método post do jquery possui 4 parâmetros  $.post(‘url’, ‘data’, ‘sucess’, ‘dataType’); atenção que nem sempre é necessário utilizar todos os parâmetros, no minimo o ‘url’ e o ‘data’. Qual é a função destes parâmetros?

url: consiste no endereço na qual a requisição é enviada, ex: ../scripts/php/guardar.php

data: são os dados que serão enviados para o endereço definido no primeiro argumento.

sucess: é uma função que será executada sempre que a requisição é realizada com sucesso ou o callback.

dataType: depois da requisição é possível definir o tipo de dados esperado que o servidor retorne, como: text, html, scripts.

function guardar(){
    var valor2 = $(“#valor2”).html();
    $.post(‘guardar.php’, {valor2:valor2}, function(retorno){

    alert(retorno);

});

   }

No método post foi incrementado sucess na qual é uma função com o argumento retorno, e dentro desta função possui um alert pra mostrar o valor do retorno que é uma variável que armazena os dados retornados da requisição. Podendo ser erros do php até mesmo simples echo””;.

**FIM DO UPDATE**

Com um pouco de criatividade vocês poderão voar bem alto criando aplicações web sempre com as novas tendencias #HTML5 e #CSS3. tamos juntos…

Anúncios

3 thoughts on “#HTML5, Salvando texto na bd *ContentEditable*

  1. Ronaldo Hoch diz:

    Nossa cara, baita artigo!

    Agora eu posso fazer formulários diferentes!

    Tem informações no meu site que sempre mudam, mas são 3 coisinhas do mesmo texto, como data e umas listas…

    Vou fazer o formulário para atualizar esta página todo assim!

    Vlw! Abraço

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Google photo

Está a comentar usando a sua conta Google Terminar Sessão /  Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s

%d bloggers like this: