Você está na página 1de 3

Formulário ExtJS para armazenar dados no mysql usando PHP

2, julho, 2009 Deixar um comentário Ir para os comentários

Estava tentando aprender um pouco sobre o Google Web Toolkit, para uma aplicação que estou pensando
em fazer. Depois de ler alguns materiais sobre o GWT (Google Web Toolkit), vi que seria algo meio
trabalhoso. Ai que conheci o EXTJS. Ele é um framework para javascript, muito fácil de usar.

Então neste post, vou mostrar como fazer uma conexão com o banco de dados mysql, em PHP através do
EXTJS.

Considerações iniciais
Não sou nenhum expert no assunto (muito pelo contrário), então, me desulpem por algum termo
usado erroneamente ;
O que você vai ver aqui é meu primeiro contato com o EXTJS, então, poderão ter formas de serem
feitas diferentemente do que está aqui.

Vamos lá!
Esta aplicação irá cadastrar o Nome, Endereço, a Cidade e o Estado. Vejamos a aplicação propriamente dita:

Podemos ver o título do formulário (Cadastro de Usuário), os Labels (Nome:, Endereço:, etc…), os Campos
para inserir os dados e dois Botões (Enviar e Cancelar)

1 – Preparando a base de dados MySql

A primeira coisa a ser feita, é criar um banco de dados para nossa aplicação:

Vamos supor que você tenha criado um banco de dados em um servidor localhost (servidor local) com o
nome de exemplo e tenha o usuário root e a senha 1234.

Neste banco de dados, você criou também uma tabela chamada tb_dados e nessa tabela os itens: codigo,
nome, endereco, cidade e estado. Sendo que o item codigo é um INT com Auto-Incremento. Os demais
(nome, endereco, cidade e estado) podem ser VARCHAR[50].

Não vou me preocupar explicando como criar este banco de dados com essas propriedades, mas na internet
existem vários artigos sobre isso. Mas uma dica é: procure sobre a aplicação Wamp (é um servidor WEB e
também mysql).
2 – Criando a Base de nossa aplicação (o JavaScript)

Prepare uma pasta em seu computador dentro do seu servidor Wamp. Dentro dela, crie um arquivo com o
nome: myform.js e salve com o seguinte código:

Ext.onReady(function(){
Ext.QuickTips.init();
var simpleForm = new Ext.FormPanel ({
labelWidth: 75,
url:'save-form.php',
frame:true,
title: 'Cadastro de Usuário',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Nome',
name: 'nome',
allowBlank:false
},{
fieldLabel: 'Endereco',
name: 'endereco'
},{
fieldLabel: 'Cidade',
name: 'cidade'
},{
fieldLabel: 'Estado',
name: 'estado'
}],
buttons: [{
text: 'Enviar',
handler: function () {
simpleForm.getForm().submit({
waitMsg: 'Salvando...',
success: function () {
Ext.MessageBox.alert ('Message','Data has been saved');
simpleForm.getForm().reset();
},
failure: function () {
Ext.MessageBox.alert ('Message','Saving data failed');
}
});
}
},{
text: 'Cancelar',
handler: function () {
simpleForm.getForm().reset();
}
}]
});
simpleForm.render ('simple-form');
});

Desculpem a falta de identação do código! É o editor do blog que deu uma bagunçada nele.

3 – Copiando o EXTJS para nossa pasta

Faça o download do extjs clicando aqui. Crie uma pasta (dentro da pasta que você salvou o arquivo
myform.js) com o nome de ext, e nela descompacte o conteúdo do extjs que você acabou de baixar. Muita
atenção aqui. Deverá ser: a pasta ext e dentro dela já o conteúdo do EXTJS, ok? Dica: Dentro da pasta do
EXTJS chamada docs, tem toda a documentação dele.
4 – O arquivo PHP

Da mesma forma que você criou o arquivo myform.js, crie o arquivo save-form.php com o conteúdo
abaixo:

<?php
$conn = mysql_connect ("localhost", "root", "1234") or die (mysql_error ());
mysql_select_db ("exemplo") or die (mysql_error ());
$q=mysql_query ("INSERT INTO `exemplo`.`tb_dados` (`codigo` ,`nome` ,`endereco`
,`cidade` ,`estado`)
VALUES (NULL,
'".$_POST['nome']."',
'".$_POST['endereco']."',
'".$_POST['cidade']."',
'".$_POST['estado']."');") or die ('{"success":"false"}');
if ($q) {
echo '{"success":"true"}';
}
else {
echo '{"success":"false"}';
}
?>

Este é o arquivo que vai receber os dados do formulário javascript e efetuar a conexão com o banco de
dados, inserindo assim os itens.

5 – O arquivo final! O HTML

Agora, crie o arquivo HTML a seguir, com o nome de index.html (ou qualquer outro nome que quiser). É
nele que será carregado o myform.js e também os arquivos que estão na pasta do EXTJS que você fez
download.

<html>
<head>
<title>Exemplo</title>
<link rel="stylesheet" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="myform.js"></script>
</head>
<body>
<br />
<div align="center" id="simple-form">
</div>
</body>
</html>

IMPORTANTE: Certifique-se de que os arquivos estão com os caminhos corretos!!!

6 – Executando

Com os servidores WEB e MySQL rodando em seu localhost, abra o arquivo index.html em seu navegador.

Espero que tenham gostado!

Agora, faça alterações na nossa aplicação. Adicione novos campos para cadastro, etc… Abraços a todos!