Desenvolvendo uma agenda telefônica simples no Kylix

Nesse artigo mostrarei o quanto é simples trabalhar com o kylix e mysql. Estou usando o Kylix2 Open edition devidamente configurado como na dica anterior e o mysql 3.23.51.

Nossa agenda será simples, guardará apenas nome e número de telefone. Porém com a base que vou passar com um pouco mais de trabalho você poderá programar coisas muito mais complexas.

Criando o banco de dados:

Logue-se ao seu mysql:

$mysql -u usuario -p
mysql>

Crie o banco de dados. Vamos usar o nome 'agendakylix':

mysql>create database agendakylix;
Query OK, 1 row affected
mysql>

Selecione seu novo database:

mysql>use agendakylix;
Database changed

Crie uma tabela de nome telefones com 3 campos: agenda_id, agenda_nome e agenda_tel, sendo o agenda_id como 'autoincrement', agenda_nome como varchar(30) e agenta_tel como varchar(12):

mysql> create table telefones(
-> agenda_id int auto_increment primary key,
-> agenda_nome varchar(30),
-> agenda_tel varchar(13));
Query OK, 0 rows affected (0.03 sec)

Confira se a tabela está realmente criada:

mysql> show tables;

Confira se os campos estão corretos:

mysql> show columns from telefones;

Agora vamos ao kylix :)

Crie um novo projeto: File > New Application

No Object Inpector (que daqui pra frente chamarei de OI) altere as configurações do Form1 com os dados a seguir:

Caption - Agenda Kylix
Height - 200
Name - fPrincipal
Width - 500

Clique no botão Save All, e salve o fPrincipal como uPrincipal, e o projeto como AgendaKylix.dpr.

Criando a interface gráfica:

Insira no fPrincipal três TPanels, e faça o seguinte no OI:

No Panel1:

• Align - alBotton
• Caption - (em branco)

No Panel2:

• Align - alLeft
• Caption - (em branco)

No Panel3:

• Align - alClient
• Caption - (em branco)

Agora, insira os seguintes componentes no Panel1:

TButton, TSQLConnection, TSQLQuery, TDataSource e um TDBNavigator

Vamos alterar as configurações no OI para o Button1:

Caption - Fechar
Name - butFechar

Vamos alterar as configurações no OI para o SQLConnection1:

ConnectionName - MySQLConnection
LogimPrompt - False
Name - Conn
Params - clique duas vezes e edite o texto:
DriverName=MYSQL
BlobSize=-1
Database=agendakylix
ErrorResourceFile=./DbxMySqlErr.msg
HostName=IP_DO_SERVER
LocaleCode=0x0000
Password=SUASENHA
User_Name=SEULOGIN

Vamos alterar as configurações no OI para o SQLQuery1:

SQL - use agendakylix
SQLConnection - conn
Name - sql

Vamos alterar as configurações no OI para o DataSource1:

DataSet - sql
Name - source

Vamos alterar as configurações no OI para o DbNavigator1:

DataSource - source
Name - dbnav
Visible - false

Agora, no Panel3 coloque um TStringGrid e no OI altere as configuraçôes:

Align - alClient
ColCount - 2
FixedCols - 0
Name - GridVer
RowsCount - 2
ScrollBars - AutoBoth

E pra finalizar, no Panel3 coloque os componentes:

Um TGroupBox, dois TLabel, dois TMaskEdit e um TButton

Vamos as configurações no OI:

No GroupBox:

• Caption - Novo telefone:

No Label1:

• Caption - Nome:

No Label2:

• Caption - Telefone:

No MaskEdit1:

• MaxLenght - 30
• Name - edtNome
• Text - (em branco)

No MaskEdit2:

• EditMask - !(99)0000-0000;1;_
• MaxLenght - 12
• Name - edtTel
• Text - (em branco)

No Button1:

• Caption - Inserir
• Name - butIns

Veja como ficou o meu form no kylix:

Em execução:

Iniciando no código fonte:

A primeira coisa a fazer, é verificar se tudo está bem no MySQL. Selecione o componente conn, e no OI marque a opção Connected como True. O Kylix agora vai tentar se conectar ao servidor MySQL e caso tenha sucesso ele só vai manter a opção como True. Caso contrário, informará um erro e você terá que verificar o MySQL para saber o que há de errado. Siga a minha dica da url http://www.hardware.com.br/dicas/apache-php-mysql-slackware-sem-compilar-nada.html e tente novamente.

MySQL ok? vamos fazer um evento para fechar o programa:

Clique duas vezes no botão butFechar, e no fonte digite o seguinte:

procedure TfPrincipal.butFecharClick(Sender: TObject);
begin
if messagedlg('Deseja realmente fechar esse programa?',mtConfirmation,[mbYes,mbNo],0)=mrYes then
begin
Application.Terminate;
end;
end;

Tecle F9 e teste o evento.

Inserindo dados no MySQL:

Vamos criar o evento do botão butIns, inserindo no MySQL os dados digitados nos componentes edtNome e edtTel.

O que temos que pensar? Que vamos capturar o valor digitado nos edits, jogar numa string MySQL e executar a mesma no servidor MySQL. É bem simples, veja o fonte abaixo:

procedure TfPrincipal.butInsClick(Sender: TObject);
var nome, tel: string; //Aqui eu declaro as variaveis que vou usar para os dados
erro: integer; //Essa variável vou usar como controle de erros
begin
//Capturando os valores e jogando nas variaveis
nome:= trim(edtNome.Text);
tel:= trim(edtTel.Text);
erro:= 0;

//verificando se a variavel nome está vazia ou não:
//se estiver vazia, dou valor 1 para o erro, uma mensagem é exibida e o programa não acessa o mysql.
if (nome='') then
begin
ShowMessage('Voce precisa digitar um nome!');
erro:= 1;
end;

//verificando se a variavel tel está vazia ou não:
//se estiver vazia, dou valor 1 para o erro, uma mensagem é exibida e o programa não acessa o mysql.
if (tel='( ) -') then
begin
ShowMessage('Voce precisa digitar um telefone!');
erro:= 1;
end;

//verificando se houve erro na validação. Se houve não faz nada
//Se não houve erro, prossegue com o mysql.
if (erro=0) then
begin
//criando a string MySQL. é necessário o uso da função quotedstr() para inserir as aspas simples nos valores.
sql.SQL.Text:= 'INSERT INTO telefones(agenda_id,agenda_nome,agenda_tel) VALUES(0,'+quotedstr(nome)+','+quotedstr(tel)+')';
//executando a string:
sql.ExecSQL(True);
//limpando os edits:
edtNome.Text:= '';
edtTel.Text:= '';
//informando o sucesso da operação:
showmessage('Cadastrado com sucesso!');
end;
end;

Criando a visualização

Para ver os telefones, vamos usar o GridVer. Para isso, vou criar uma procedure nova para ele, veja o código:

procedure TfPrincipal.verdados(a:integer);
var gridlarg,gridcol,registros,id,c:integer;
begin
//atribuindo os valoes para acertar o grid:
gridlarg:= gridver.Width;
gridver.DefaultColWidth:= trunc(gridlarg/2) - 5;

//contando o numero de regisros do mysql:
sql.SQL.Text:= 'select * from telefones';
sql.Open;
registros:= sql.RecordCount;

//inserindo as linhas necessarias no gridver:
gridver.RowCount:= registros + 1;

//inserindo os valores no gridver
gridver.Cells[0,0]:= 'Nomes:';
gridver.Cells[1,0]:= 'Telefones:';
id:= 0;
c:= 1;
sql.SQL.Text:= 'select * from telefones';
sql.Open;
while (id <= registros) do
begin
gridver.Cells[0,c]:= sql.Fields.Fields[1].AsString;
gridver.Cells[1,c]:= sql.Fields.Fields[2].AsString;
id:= id + 1;
c:= c + 1;
dbnav.BtnClick(nbNext);
end;
end;

Declare a nova procedure na área type do código. Observe o meu como está:

type
TfPrincipal = class(TForm)
Panel1: TPanel;
Panel2: TPanel;
Panel3: TPanel;
butFechar: TButton;
conn: TSQLConnection;
sql: TSQLQuery;
source: TDataSource;
dbnav: TDBNavigator;
GridVer: TStringGrid;
GroupBox1: TGroupBox;
Label1: TLabel;
Label2: TLabel;
butIns: TButton;
edtNome: TMaskEdit;
edtTel: TMaskEdit;
procedure butFecharClick(Sender: TObject);
procedure butInsClick(Sender: TObject);
procedure verdados(a:integer);

Agora que já temos nossa procedure de visualização, vamos coloca-la no evento onShow do fPrincipal. Para isso vá ao OI e clique duas vezes no evento onShow. Veja a figura abaixo:

E no fonte, insira o verdados(1). Veja abaixo:

procedure TfPrincipal.FormShow(Sender: TObject);
begin
verdados(1);
end;

No evento butInsClick, coloque também o verdados(1) no final, pois assim a cada novo telefone inserido o grid será atualizado. Coloque-o dentro deste IF:

if (erro=0) then
begin
//criando a string MySQL:
sql.SQL.Text:= 'INSERT INTO telefones(agenda_id,agenda_nome,agenda_tel) VALUES(0,'+quotedstr(nome)+','+quotedstr(tel)+')';
//executando a string:
sql.ExecSQL(True);
//limpando os edits:
edtNome.Text:= '';
edtTel.Text:= '';
//informando o sucesso da operação:
showmessage('Cadastrado com sucesso!');
verdados(1); //<--- AQUI
end;

Deletando os registros:

Insira mais um componente em seu form: o TPopupMenu, e dê um duplo clique nele. Uma janela se abrirá, selecione-a, e no OI na opção Caption digite 'Editar' (sem as aspas). No espaço que será criado logo abaixo, selecione-o e digite 'Deletar' (sem as aspas). Veja a figura abaixo:

Selecione o GridVer, e no OI insira o valor PopupMenu1 na opção PopupMenu.

Clique duas vezes no 'Deletar' do PopupMenu1, e insira o código:

procedure TfPrincipal.Deletar1Click(Sender: TObject);
var deletar:string;
begin
//captura o numero do telefone a ser deletado
deletar:= gridver.Cells[1,gridver.Row];

//confirma se deseja deletar ou não:
if messagedlg('Deseja realmente remover o telefone ' + deletar,mtConfirmation,[mbYes,mbNo],0)=mrYes then
begin
sql.SQL.Text:= 'delete from telefones where agenda_tel = ' + quotedstr(deletar);
//sql.Open;
sql.ExecSQL(True);
verdados(1);
end;
end;

Editando os registros:

Vamos precisar de mais um TForm. Clique no botão NewForm, selecione o novo form e no OI edite as seguintes opções:

Caption - Editar
Height - 160
Name - fEdita
Width - 185

Clique em Save, e salve como uEdita.pas

Agora, vamos ganhar tempo: Selecione no fPrincipal o objeto GroupBox1, e dê um CTRL C para copiar. Logo em seguida selecione o fEdita, e dê um CTRL V. Observe abaixo como ficou:

Modifique essse dados no OI para o fEditar / GroupBox1:

Caption - Editar

Modifique essse dados no OI para o fEditar / butIns:

Caption - Editar

Para chamar esse form, clique duas vezes no componente Popup1 do fPrincipal, clique duas vezes na palavra Editar.

No código, coloque assim:

procedure TfPrincipal.Editar1Click(Sender: TObject);
begin
fEdita.ShowModal;
end;

Precisamos preencher esses edits do fEdita com os valores selecionados no fPrincipal. Faremos o seguinte:

No mesmo evento acima, vamos já preencher esses dados. Observe o código abaixo:

procedure TfPrincipal.Editar1Click(Sender: TObject);
begin
//preenche os edits
fEdita.edtNome.Text:= gridver.Cells[0,gridver.Row];
fEdita.edtTel.Text:= gridver.Cells[1,gridver.Row];
fEdita.ShowModal;
end;

E no fEdita precisamos guardar o número antigo do telefone para poder fazer o update no mysql. Criarei uma variável global. Observe:

var
fEdita: TfEdita;
deletar: string; //telefone antigo

implementation

{$R *.xfm}

Selecione o fEdita, vá no OI e em events clique duas vezes na opção onShow. Observe:

Dessa forma, assim que o form é aberto o valor do telefone selecionado é inserido na variável deletar, de forma global.

Editando:

Clique duas vezes no botão Editar (butIns do fEditar). Digite o código:

procedure TfEdita.butInsClick(Sender: TObject);begin
//confirma se deseja editar ou não:
if messagedlg('Deseja realmente editar o telefone ' + deletar,mtConfirmation,[mbYes,mbNo],0)=mrYes then
begin
fPrincipal.sql.SQL.Text:= 'update telefones set agenda_nome = ' + quotedstr(trim(edtNome.Text)) +
' , agenda_tel = ' + quotedstr(trim(edtTel.Text)) +
' where agenda_tel = ' + quotedstr(deletar);
fPrincipal.sql.ExecSQL(True);
self.Close;
fPrincipal.verdados(1);
end;
end;

E acabamos, compile e distribua para seus amigos :).

Como podem ter notado, criei a procedure verdados() com um parâmetro integer, deforma que fica mais fácil para inserir mais funções. Basta trocar o 1 por outro número qualquer e editar no fonte para executar o que você quiser de acordo com o número que foi escolhido.

Esse exemplo que criei te dará base para criar infinitas coisas mais complexas, use sua imaginação :).

Vida longa ao software livre.

Downloads: Fonte | Binário