Pronto, para começar crie uma pasta dentro da tua pasta de projecto com o nome jtable, e crie uma base de dados no mysql com pelo menos uma tabela com pelo menos 2 atributos. Para o exemplo vamos criar a base de dados exemplo com a tabela ESTUDANTE (id, nome, idade).
A seguir descompacte o arquivo jquery_ui… que baixou e copie as pastas “css” e “js” para a pasta jtable que criou antes, descompacte também o arquivo jtable… e copie as pastas ”themes” e “external” e o arquivo “jquery. jtable.js” para a pasta jtable. Tudo pronto? Mãos a obra…
Crie uma pagina html (pagina que ira mostrar os dados da tabela ESTUDANTE) dentro da tua pasta de projecto, com o nome ver_estudante.html. entre as tags head adicione as seguintes linhas:
As linhas acima sao links para os arquivos css e javascript que baixamos, a 1a é o css do ajax, a 2ª é o css do jtable, a 3a é o jquery (versão actual a data desta publicacao), a 4ª é ajax interface, e por fim o script jtable que nos ajudara a criar o CRUD.
Ainda no head da página, adicione o seguinte script:
$(document).ready(function () {
$('#languageTableContainer').jtable({
title: 'Lista de Estudantes', // titulo da tabela na visualizacao
actions: {
listAction: 'estudante.php?action=list',
createAction: 'estudante.php?action=create',
updateAction: 'estudante.php?action=update',
deleteAction: 'estudante.php?action=delete'
},
fields: {
id: {
key: true,
create: false,
edit: false,
list: true,
width: '10%',
title: 'ID'
},
nome: {
title: 'Nome do estudante',
width: '60%'
},
idade: {
title: 'Idade do estudante',
width: '30%'
}
}
});
$('#languageTableContainer').jtable('load');
});
Explicando o código acima:
#languagetableconteiner - é a class do elemento html que será responsável por exibir a tabela.
Title – é o titulo que ira aparecer na tabela
Actions – indicamos o ficheiro com o código para as funcoes do crud, exemplo: updateAction deve indicar o ficheiro com o código para update (para o nosso caso usamos mesmo arquivo com todas funções do CRUD, e passamos a acção atravez do parâmetro action).
Fieds – devem ser indicados todos campos da tabela (no nosso caso ESTUDANTE), os nomes dos campos devem ser escritos exactamente como aparecem na tabela na base de dados. Cada field ou campo pode ter atributo como: key – para dizer se é chave ou não (valores true ou false); create – para dizer se o campo é editável (ao criar novo) ou não; edit – para dizer se o campo pode ser actualizado; list- para dizer se deve aparecer na view; title – o titulo no cabeçalho da view; width – a largura do campo na view.
Por fim a linha $('#languageTableContainer').jtable('load') carrega a nossa tabela.
A seguir dentro do body da página adicione uma div:
Repare que a div possui o id usado no script acima “languageTableContainer'”, pois será exibida aqui a nossa tabela.
Crie um ficheiro com o nome conection.php (que será responsável pela conexão e consulta a base de dados) e adicione o seguinte código:
function conecta ($sql, $database){
$conexao = mysql_connect("localhost","root","root");
if (!$conexao)
{
die('Nao foi possivel Conectar ao banco de dados: '.mysql_error());
}
else{
}
mysql_select_db($database, $conexao);
$resultado= mysql_query($sql,$conexao);
if (!$resultado)
{
die('Erro ao executar a query: ');
}
return ($resultado);
}
A funcao conecta recebe dois parâmetros $sql e $database que são a query sql e a devida base de dados.
Na segunda linha “localhost” – é a maquina onde esta a base de dados, “root” – nome do utilizador da bd e “root” – a password da bd, então certifique se de mudar para as credenciais do teu servidor mysql.
Feito isso crie um ficheiro php com o nome estudante (tal como indicado nos actions) e adicione o seguinte código:
include 'conection.php';
try
{
$database = exemplo;
if($_GET["action"] == "list")
{
$result = conecta("select * from estudante", $database);
$rows = array();
while($row = mysql_fetch_array($result))
{
$rows[] = $row;
}
$jTableResult = array();
$jTableResult['Result'] = "OK";
$jTableResult['Records'] = $rows;
print json_encode($jTableResult);
}
else if($_GET["action"] == "create")
{
$query="INSERT INTO estudante(nome, idade) VALUES('" . $_POST["nome"] . "', '" . $_POST["idade"] . "')";
$result = conecta($query, $database);
$result = conecta("SELECT * FROM estudante WHERE id = LAST_INSERT_ID();", $database);
$row = mysql_fetch_array($result);
$jTableResult = array();
$jTableResult['Result'] = "OK";
$jTableResult['Record'] = $row;
print json_encode($jTableResult);
}
else if($_GET["action"] == "update")
{
$query="UPDATE estudante SET nome = '" . $_POST["nome"] . "', idade = '" . $_POST["idade"] . "' WHERE id = '" . $_POST["id"] . "'";
$result = conecta($query, $database);
//Return result to jTable
$jTableResult = array();
$jTableResult['Result'] = "OK";
print json_encode($jTableResult);
}
else if($_GET["action"] == "delete")
{
$result = conecta("DELETE FROM estudante WHERE id = " . $_POST["id"] . "",$database);
$jTableResult = array();
$jTableResult['Result'] = "OK";
print json_encode($jTableResult);
}
}
catch(Exception $ex)
{
//Return error message
$jTableResult = array();
$jTableResult['Result'] = "ERROR";
$jTableResult['Message'] = $ex->getMessage();
print json_encode($jTableResult);
}
Atenção: nos $_post os nomes dos campos devem ser os indicados na secção fields no ficheiro ver_estudante.html.
Em caso de dúvida deixe um comentário que irei responder prontamente.
0 comentários:
Enviar um comentário