PROJETO INTEGRADO MULTIDISCIPLINAR VIII

Prévia do material em texto

PROJETO INTEGRADO MULTIDISCIPLINAR VIII 
ANÁLISE E DESENVOLVIMENTO DE SISTEMAS 
 
 
 
 
 
 
 
 
 
PROTÓTIPOS DE INTERFACE GRÁFICA ASP .NET E ANDROID 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
SUA CIDADE – SP 
2020 
PROJETO INTEGRADO MULTIDISCIPLINAR VIII 
ANÁLISE E DESENVOLVIMENTO DE SISTEMAS 
 
 
 
 
 
 
 
 
 
PROTÓTIPOS DE INTERFACE GRÁFICA ASP .NET E ANDROID 
 
 
 
 
 
 
Nome: SEU NOME 
RA: 0000000 
Curso: Análise e Desenvolvimentos de Sistemas 
Série: 0 Período: 0° Semestre: 2020 
 
 
 
 
 
 
 
 
 
 
SUA CIDADE – SP 
2020 
Resumo 
Foi desenvolvido um protótipo de interface gráfica oferecendo ao usuário as 
funcionalidades CRUD em ASP .Net e Android, que permite que o usuário interaja 
com os dados modelados por esse trecho do banco de dados, nesta interface foram 
criados campos de texto, botões de interação, e um design agradável para o 
usuário. 
O mecanismo de acesso ao banco de dados em linguagem C# para ambos, 
esse mecanismo será o responsável por oferecer acesso a um trecho do banco de 
dados por parte do resto do sistema. O modelo do trecho do banco de dados foi 
representado por Diagrama Entidade-Relacionamento (DER), também foi incluído no 
trabalho capturas de tela de suas interfaces gráficas, que foram obtidas direto do 
editor do Visual Studio e também a partir de um navegador de internet, no Android 
foi capturado de um celular Android por espelhamento, estão inclusos todos os 
códigos aspx do layout dos formulários que foi criado para o protótipo. 
 
Palavras-chave: Resumo. CRUD. ASP. Android. interface. 
 
Abstract 
A prototype of a graphical interface was developed offering the user the 
CRUD functionalities in ASP .Net and Android, which allows the user to interact with 
the data modeled by this section of the database, in this interface, text fields, 
interaction buttons, and a user-friendly design. 
The mechanism for accessing the database in C # language for both, this 
mechanism will be responsible for providing access to a portion of the database by 
the rest of the system. The model of the database section was represented by Entity-
Relationship Diagram (DER), screen captures of its graphical interfaces were also 
included in the work, which were obtained directly from the Visual Studio editor and 
also from an internet browser. Android was captured from an Android phone by 
mirroring, all the aspx codes of the forms layout that were created for the prototype 
are included. 
Keyword: Abstract. CRUD. ASP. Android. interface. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Sumário 
Introdução ................................................................................................................... 6 
1 – Protótipo de interface gráfica ASP .Net ................................................................ 7 
1.1 – Código aspx do layout .................................................................................... 9 
1.1.1 – Script Login .............................................................................................. 9 
1.1.2 – Script Cadastro ....................................................................................... 10 
1.1.3 - Script Editar, Excluir ................................................................................ 12 
1.2 – Código CSS folhas de estilo ......................................................................... 15 
1.2.1 - Login ....................................................................................................... 15 
1.2.2 - Cadastro.................................................................................................. 16 
1.2.3 – Editar, Excluir ......................................................................................... 17 
2 – Protótipo de interface gráfica Android ................................................................. 20 
2.1 – Código XML do layout .................................................................................. 21 
3 – Banco de dados .................................................................................................. 24 
3.1 – Script Conectar ao Banco ............................................................................. 25 
Conclusão ................................................................................................................. 26 
Referências ............................................................................................................... 27 
 
6 
 
Introdução 
O nosso grupo de desenvolvimento foi escolhido para criar um sistema 
interface gráfica deve oferecer ao usuário as funcionalidades CRUD para os dados 
relacionados no trecho de banco de dados, foi criar ao menos um formulário para 
tanto, O mecanismo de acesso ao banco de dados em linguagem C#. Esse 
mecanismo será o responsável por oferecer acesso a um trecho do banco de dados 
por parte do resto do sistema. 
Sempre que um trecho do sistema precisar acessar esse trecho do banco de 
dados, deverá fazê-lo por meio desse mecanismo desenvolvido por foi criado um 
protótipo de interface gráfica com o usuário em ASP .Net que permita que o usuário 
interaja com os dados modelados por esse trecho do banco de dados. 
Também foi desenvolvido um protótipo de interface gráfica com o usuário em 
Android que permite que o usuário interaja com os dados modelados por esse trecho 
do banco de dados. O modelo do trecho do banco de dados foi representado por 
Diagrama Entidade-Relacionamento (DER), O mecanismo de acesso ao banco de 
dados que a equipe foi apresenta, conta com quatro entidades: Pessoa, Endereço, 
Telefone e TipoTelefone que mapeiam as principais tabelas do banco de dados, 
exceto a tabela associativa PESSOA_TELEFONE, a qual é uma tabela associativa e 
não é relevante para o sistema, apenas para o mecanismo de persistência do banco 
de dados. Também foi incluído no trabalho capturas de tela de suas interfaces 
gráficas, que foram obtidas direto do editor do Visual Studio e também a partir de um 
navegador de internet, incluindo todos os códigos aspx do layout dos formulários 
que foi criado para o protótipo. 
 
7 
 
1 – Protótipo de interface gráfica ASP .Net 
Criamos um protótipo de interface gráfica oferecendo ao usuário as 
funcionalidades CRUD em ASP .Net, que permite que o usuário interaja com os 
dados modelados por esse trecho do banco de dados, nesta interface foram criados 
campos de texto, botões de interação, e um design agradável para o usuário. No 
design colocamos algumas restrições: 
 
● O campo nome, endereço, bairro, cidade e estado somente texto. 
● O campo cpf, cep e número de endereço somente números. 
● O campo selecionar, somente selecionar uma opção. 
● O botão buscar, faz uma conexão com os correios para buscar o cep. 
● O botão novo, cria um novo cadastro em branco. 
● O botão editar, modificar um cadastro 
● O botão deletar, excluir um cadastro 
● O botão cancelar, para todos as ações feita 
● O botão salvar, salva todos os campos modificados no cadastro. 
 
Temos três (3) telas para o cadastro e o login para aqueles que já estão 
cadastrados, a primeira tela de login e só para exibição. O que precisamos mesmo é 
o botão cadastrar, ao clicar é levado até a segunda tela do cadastro em si, 
preenchendo todos os dados só clicar no botão salvar para que salve todos os 
dados no banco de dados (ler mais sobre Capítulo 3). Temos por último a pesquisa 
do nome que é feita por nome ou CPF do usuário, nessa parte temos como editar, 
deletar ou sair. 
 
8 
 
Figura 1 – Login ASP .NET 
 
Fonte: Autor, 2020 
Figura 2 – Cadastro ASP .NET 
 
Fonte: Autor, 2020 
Figura 3 – Editar, Deletar ASP .NET 
 
Fonte: Autor, 2020 
9 
 
1.1 – Código aspx do layout 
1.1.1 – Script Login 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" 
Inherits="CRUD.script.login" %> 
 
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 <title>Be Welcome</title> 
 <link href="css/home.css" rel="Stylesheet" type="text/css"/> 
</head> 
 <body> 
 <form class="form-login" runat="server" id="formLogin" > 
 <table class="tab-main"> 
 <tr> 
 <td class="td-left">&nbsp;</td> 
 <td class="td-center"> 
 <asp:Panel CssClass="style-panel-login" runat="server" 
HorizontalAlign="Center"> 
 <br /> 
 <br /> 
 <asp:TextBox CssClass="style-input" placeholder="E-Mail" 
runat="server" MaxLength="150" TabIndex="1" ValidateRequestMode="Enabled" 
ID="input_login"></asp:TextBox> 
 <br /> 
 <br /> 
 <asp:TextBox CssClass="style-input" placeholder="Senha" 
runat="server" MaxLength="8" TabIndex="2" TextMode="Password" 
ID="input_password"></asp:TextBox> 
 <br /> 
 <asp:Label ID="error" runat="server" 
ForeColor="#CC3300"></asp:Label> 
 <br /> 
 <asp:Button CssClass="style-bt-login" runat="server" 
Text="Entrar" TabIndex="3" ID="bt_enter" OnClick="bt_enter_Click" Font-
Bold="True" Font-Overline="False" Font-Size="Medium" Font-Strikeout="False" Font-
Underline="False" /> 
 <br /> 
 <asp:LinkButton ID="link_remember" runat="server" 
CssClass="style-txt-remember" PostBackUrl="~/script/password-remember.aspx" 
TabIndex="5">Esqueceu a senha ?</asp:LinkButton> 
 <br /> 
 <br /> 
 <asp:Button CssClass="style-bt-register" runat="server" 
TabIndex="4" Text="Cadastrar" ID="bt_register" Font-Bold="True" Font-
Size="Medium" PostBackUrl="~/script/register.aspx" /> 
 <br /> 
 <br /> 
 </asp:Panel> 
 </td> 
 <td class="td-right"></td> 
 </tr> 
 </table> 
 </form> 
 </body> 
</html> 
 
 
 
10 
 
1.1.2 – Script Cadastro 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="register.aspx.cs" 
Inherits="CRUD.script.register" %> 
 
<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 <title></title> 
 <link href="css/register.css" rel="Stylesheet" type="text/css"/> 
</head> 
<body> 
 <form class="form-register" runat="server" id="formRgister"> 
 <div class="div-main"> 
 <table class="tab-main"> 
 <tr> 
 <td class="td-left"></td> 
 <td class="td-center"> 
 <asp:Panel ID="panel_one" runat="server" CssClass="style-
panel-one"> 
 <br /> 
 <asp:TextBox CssClass="style-txt-name" 
placeholder="Nome Completo" runat="server" TabIndex="1" MaxLength="250" 
ID="input_name"></asp:TextBox> 
 <br /> 
 <br /> 
 <asp:TextBox CssClass="style-txt-cpf" 
placeholder="CPF" runat="server" TabIndex="2" MaxLength="11" 
ID="input_cpf"></asp:TextBox> 
 <asp:TextBox CssClass="style-txt-ddd" 
placeholder="DDD" runat="server" MaxLength="2" TabIndex="3" 
ID="input_ddd"></asp:TextBox> 
 <asp:TextBox CssClass="style-txt-phone" 
placeholder="Telefone" runat="server" MaxLength="9" TabIndex="4" 
ID="input_phone"></asp:TextBox> 
 <asp:DropDownList CssClass="style-phone-type" 
runat="server" ClientIDMode="AutoID" TabIndex="5" ID="input_phone_type"> 
 <asp:ListItem></asp:ListItem> 
 <asp:ListItem 
Value="1">Residencial</asp:ListItem> 
 <asp:ListItem Value="2">Celular</asp:ListItem> 
 <asp:ListItem Value="3">Outros</asp:ListItem> 
 </asp:DropDownList> 
 <br /> 
 <br /> 
 </asp:Panel> 
 <asp:Panel ID="panel_two" runat="server" CssClass="style-
panel-two"> 
 <br /> 
 <asp:TextBox CssClass="style-txt-zip" 
placeholder="CEP" runat="server" MaxLength="8" TabIndex="10" 
ID="input_zip"></asp:TextBox> 
 <asp:Button CssClass="style-bt-search" runat="server" 
TabIndex="11" Text="Buscar" ID="bt_search" OnClick="bt_search_Click" Font-
Bold="True" Font-Size="Medium" /> 
 <asp:HyperLink CssClass="style-link-search" 
runat="server" 
NavigateUrl="http://www.buscacep.correios.com.br/sistemas/buscacep/buscaCepEndere
co.cfm" TabIndex="12" Target="_blank" ID="link_cep">Não Sabe o CEP 
?</asp:HyperLink> 
 <br /> 
11 
 
 <asp:TextBox CssClass="style-txt-address" 
placeholder="Endereço" runat="server" MaxLength="250" TabIndex="13" 
ID="input_address"></asp:TextBox> 
 <asp:TextBox CssClass="style-txt-address-number" 
placeholder="Número" runat="server" MaxLength="6" TabIndex="14" 
ID="input_address_number"></asp:TextBox> 
 <asp:TextBox CssClass="style-txt-neighborhood" 
placeholder="Bairro" runat="server" MaxLength="250" TabIndex="15" 
ID="input_neighborhood"></asp:TextBox> 
 <asp:TextBox CssClass="style-txt-city" 
placeholder="Cidade" runat="server" MaxLength="250" TabIndex="16" 
ID="input_city"></asp:TextBox> 
 <asp:TextBox CssClass="style-txt-state" 
placeholder="Estado" runat="server" MaxLength="2" TabIndex="17" 
ID="input_state"></asp:TextBox> 
 </asp:Panel> 
 <asp:Panel CssClass="style-panel-three" runat="server" 
HorizontalAlign="Center" ID="panel_three"> 
 <br /> 
 <asp:TextBox CssClass="style-txt-email" 
placeholder="E-Mail" runat="server" MaxLength="250" TabIndex="6" ID="input_email" 
TextMode="Email"></asp:TextBox> 
 <asp:TextBox CssClass="style-txt-password" 
placeholder="Senha" runat="server" MaxLength="6" TabIndex="8" ID="input_password" 
TextMode="Password" ValidateRequestMode="Enabled"></asp:TextBox> 
 <br /> 
 <asp:TextBox CssClass="style-txt-email" 
placeholder="Confirmar E-Mail" runat="server" MaxLength="250" TabIndex="7" 
ID="input_email_confirm" TextMode="Email"></asp:TextBox> 
 <asp:TextBox CssClass="style-txt-password" 
placeholder="Confirmar Senha" runat="server" MaxLength="6" TabIndex="9" 
ID="input_password_confirm" TextMode="Password" 
ValidateRequestMode="Enabled"></asp:TextBox> 
 <asp:Button ID="bt_cancel" runat="server" 
CssClass="style-bt-cancel" Font-Bold="True" Font-Size="Medium" 
placeholder="Bairro" PostBackUrl="~/script/login.aspx" TabIndex="18" 
Text="Cancelar"/> 
 <asp:Button ID="bt_save" runat="server" 
CssClass="style-bt-save" Font-Bold="True" Font-Size="Medium" 
OnClick="bt_save_Click" placeholder="Bairro" TabIndex="19" Text="Salvar" /> 
 <br /> 
 </asp:Panel> 
 <asp:Panel CssClass="style-panel-four" runat="server" 
ID="panel_four" BorderStyle="None"> 
 <asp:Label ID="error" runat="server" 
ForeColor="Red"></asp:Label> 
 </asp:Panel> 
 </td> 
 <td class="td-right"></td> 
 </tr> 
 </table></div> 
 </form> 
</body> 
</html> 
 
 
 
12 
 
1.1.3 - Script Editar, Excluir 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="panel-user.aspx.cs" 
Inherits="CRUD.script.panel_user" %> 
 
<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 <title>Painel - Usuario</title> 
 <link href="css/panel-user.css" rel="Stylesheet" type="text/css"/> 
 <link href="css/grindview.css" rel="Stylesheet" type="text/css"/> 
</head> 
<body> 
 <form id="form_panel_user" runat="server"> 
 <div class="div-main"> 
 <table class="tab-main"> 
 <tr> 
 <td class="tb-left">&nbsp;</td> 
 <td class="tb-center"> 
 <asp:Panel CssClass="style-panel-user-edit" runat="server" 
Enabled="False" ID="panel_user_edit"> 
 <br /> 
 <asp:TextBox CssClass="style-txt-name" placeholder="Nome 
Completo" runat="server" TabIndex="1" MaxLength="250" 
ID="input_name"></asp:TextBox> 
 <br /> 
 <br /> 
 <asp:TextBox CssClass="style-txt-cpf" placeholder="CPF" 
runat="server" TabIndex="2" MaxLength="11" ID="input_cpf" Enabled="False" 
ReadOnly="True"></asp:TextBox> 
 <asp:TextBox CssClass="style-txt-ddd" placeholder="DDD" 
runat="server" MaxLength="2" TabIndex="3" ID="input_ddd"></asp:TextBox> 
 <asp:TextBox CssClass="style-txt-phone" 
placeholder="Telefone" runat="server" MaxLength="9" TabIndex="4" 
ID="input_phone"></asp:TextBox> 
 <asp:DropDownList CssClass="style-phone-type" 
runat="server" ClientIDMode="AutoID" TabIndex="5" ID="input_phone_type"> 
 <asp:ListItem></asp:ListItem> 
 <asp:ListItem Value="1">Residencial</asp:ListItem> 
 <asp:ListItem Value="2">Celular</asp:ListItem> 
 <asp:ListItem Value="3">Outros</asp:ListItem> 
 </asp:DropDownList> 
 <br /> 
 <br /> 
 <asp:TextBox CssClass="style-txt-zip" runat="server" 
MaxLength="8" placeholder="CEP" TabIndex="10" ID="input_zip"></asp:TextBox> 
 <asp:Button CssClass="style-bt-zip" runat="server" Font-
Bold="True" Font-Size="Medium" TabIndex="11" Text="Buscar" OnClick="bt_zip_Click" 
ID="bt_zip" Enabled="False" /> 
 <br /> 
 <asp:TextBox CssClass="style-txt-address" runat="server" 
MaxLength="250" placeholder="Endereço" TabIndex="13" 
ID="input_address"></asp:TextBox> 
 <asp:TextBox CssClass="style-txt-address-number" 
runat="server" MaxLength="6" placeholder="Número" TabIndex="14" 
ID="input_address_number"></asp:TextBox> 
 <br /> 
 <asp:TextBox CssClass="style-txt-neighborhood" 
runat="server" MaxLength="250" placeholder="Bairro" TabIndex="15" 
ID="input_neighborhood"></asp:TextBox> 
 <asp:TextBox CssClass="style-txt-city" runat="server" 
MaxLength="250" placeholder="Cidade" TabIndex="16" ID="input_city"></asp:TextBox> 
13 
 
 <asp:TextBox CssClass="style-txt-state" runat="server" 
MaxLength="2" placeholder="Estado" TabIndex="17" ID="input_state"></asp:TextBox> 
 <br /> 
 <br /> 
 <asp:TextBox CssClass="style-txt-email" runat="server" 
MaxLength="250" placeholder="E-Mail" TabIndex="6" TextMode="Email" 
ID="input_email"></asp:TextBox> 
 <asp:TextBox CssClass="style-txt-password" runat="server" 
MaxLength="6" placeholder="Nova Senha" TabIndex="8" ID="input_password" 
></asp:TextBox> 
 <br /> 
 <asp:TextBox CssClass="style-txt-email" runat="server" 
MaxLength="250" placeholder="Confirmar E-Mail" TabIndex="7" TextMode="Email" 
ID="input_email_confirm"></asp:TextBox> 
 <asp:TextBox CssClass="style-txt-password" runat="server" 
MaxLength="6" placeholder="Confirmar Senha" TabIndex="9" TextMode="Password" 
ID="input_password_confirm"></asp:TextBox> 
 <br /> 
 </asp:Panel> 
 <asp:Panel CssClass="style-bt-user" runat="server" 
ID="bt_user_edit"> 
 <asp:Button CssClass="style-bt-save" runat="server" Font-
Bold="True" Font-Size="Medium" Text="Salvar" OnClick="bt_save_Click" 
Enabled="False" ID="bt_save" /> 
 <asp:Button CssClass="style-bt-edit" runat="server" 
Font-Bold="True" Font-Size="Medium" Text="Editar" OnClick="bt_edit_Click" 
ID="bt_edit" Enabled="False" /> 
 <asp:Button CssClass="style-bt-delete" runat="server" 
Font-Bold="True" Font-Size="Medium" Text="Excluir" OnClick="bt_delete_Click" 
Enabled="False" ID="bt_delete" /> 
 <asp:Button CssClass="style-bt-cancel" runat="server" 
Font-Bold="True" Font-Size="Medium" Text="Cancelar" OnClick="bt_cancel_Click" 
Enabled="False" ID="bt_cancel"/> 
 </asp:Panel> 
 <asp:Panel CssClass="style-panel-search" runat="server" 
ID="panel_search"> 
 <br /> 
 <asp:TextBox CssClass="style-txt-search" 
placeholder="Digite um Nome" runat="server" TabIndex="1" MaxLength="250" 
ID="input_search" ></asp:TextBox> 
 <asp:Button CssClass="style-bt-search" 
placeholder="Digite CPF para buscar" runat="server" Text="Buscar" TabIndex="2" 
ID="bt_search" OnClick="bt_search_Click" Font-Bold="True" Font-Size="Medium" /> 
 <br /> 
 <br /> 
 <br /> 
 </asp:Panel> 
 <asp:Panel CssClass="style-panel-tab" runat="server" 
ID="panel_tab"> 
 <br /> 
 <asp:GridView CssClass="style-gridview1" runat="server" 
AutoGenerateColumns="False" CellPadding="4" DataKeyNames="id" ForeColor="#333333" 
GridLines="None" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" 
AllowCustomPaging="True" ShowFooter="True" ID="GridView1" Font-Bold="False"> 
 <AlternatingRowStyle BackColor="White" /> 
 <Columns> 
 <asp:BoundField DataField="id" HeaderText="ID" 
ReadOnly="True" /> 
 <asp:BoundField DataField="nome" 
HeaderText="Nome" /> 
 <asp:BoundField DataField="cpf" HeaderText="CPF" 
/> 
14 
 
 <asp:CommandField ControlStyle-CssClass="style-
gridview-bt" ButtonType="Button" ShowSelectButton="True" Visible="True" /> 
 </Columns> 
 <EditRowStyle CssClass="style-gridview-edit-row" /> 
 <FooterStyle CssClass="style-gridview-footer" /> 
 <HeaderStyle CssClass="style-gridview-header" /> 
 <PagerStyle CssClass="style-gridview-page" /> 
 <RowStyle CssClass="style-gridview-row" /> 
 <SelectedRowStyle CssClass="style-gridview-select-
row" /> 
 <SortedAscendingCellStyle CssClass="style-gridview-
ascending-cell" /> 
 <SortedAscendingHeaderStyle CssClass="style-gridview-
ascending-header" /> 
 <SortedDescendingCellStyle CssClass="style-gridview-
descending-cell" /> 
 <SortedDescendingHeaderStyle CssClass="style-
gridview-descending-header" /> 
 </asp:GridView> 
 <br /></asp:Panel> 
 <asp:Panel CssClass="style-panel-bt" runat="server" 
BorderStyle="None" ID="panel_bt"> 
 <asp:Button CssClass="style-bt-exit" runat="server" 
Text="Sair" TabIndex="3" PostBackUrl="~/script/login.aspx" Font-Bold="True" Font-
Size="Medium" ID="bt_exit"/> 
 </asp:Panel> 
 <asp:Panel CssClass="style-panel-error" runat="server" 
BorderStyle="None" ID="panel_error"> 
 <asp:Label runat="server" ForeColor="Red" 
ID="error"></asp:Label> 
 </asp:Panel> 
 </td> 
 <td class="tb-right">&nbsp;</td> 
 </tr> 
 </table> 
 </div> 
 </form> 
</body> 
</html> 
 
15 
 
1.2 – Código CSS folhas de estilo 
Assim como o (Joseph R) o CSS é essencial para qualquer site criado, o CSS 
utilizado para deixar o visual mais agradável para o usuário, está abaixo: 
1.2.1 - Login 
body { 
 font-family: Arial, sans-serif; 
 background-color: #ffffff; 
 height: 782px; 
} 
 
.td-left { 
 Width: 600px; 
} 
 
.td-right { 
 Width: 400px; 
} 
 
.style-panel-login { 
 Width: 250px; 
 background-color: #ecffde; 
 box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1); 
} 
 
.style-txt-login { 
 margin-left: -100px; 
 color: #000000; 
} 
 
.style-input { 
 margin-left: 2px; 
 font-size: 17px; 
 Width: 180px; 
 padding: 5px 6px; 
} 
 
.style-bt-login { 
 background-color: #0094ff; 
 color: white; 
 padding: 14px 20px; 
 margin: 8px 0; 
 border: none; 
 cursor: pointer; 
 width: 80%; 
} 
 
.style-bt-register { 
 background-color: #4CAF50; 
 color: white; 
 padding: 14px 20px; 
 margin: 8px 0; 
 border: none; 
 cursor: pointer; 
 width: 80%; 
} 
 
.style-txt-remember { 
 margin: 8px 0; 
 font-size: 12px; 
} 
 
 
 
 
16 
 
1.2.2 - Cadastro 
.td-left { 
 Width: 400px; 
} 
 
.td-center { 
 Width: inherit; 
} 
 
.td-right { 
 Width: 400px; 
} 
 
/* panel one */ 
.style-panel-one { 
 Width: 600px; 
 Height: 100px; 
 background-color: #daecff; 
} 
 
.style-txt-name { 
 Width: 570px; 
 margin-left: 10px; 
 margin-right: 8px; 
} 
 
.style-txt-cpf { 
 Width: 108px; 
 margin-left: 8px; 
 margin-right: 8px; 
} 
 
.style-txt-ddd { 
 Width: 30px; 
 margin-left: 8px; 
} 
 
.style-txt-phone { 
 margin-left: 8px; 
 margin-right: 8px; 
} 
 
.style-phone-type { 
 margin-left: 8px; 
} 
 
/* panel two */ 
.style-panel-two { 
 Width: 600px; 
 Height: 130px; 
 margin-top: 4px; 
 background-color: #c8e5fe; 
} 
 
.style-txt-zip { 
 Width: 108px; 
 margin-bottom: 8px; 
 margin-left: 8px; 
} 
 
.style-txt-address { 
 Width: 481px; 
 margin-bottom: 8px; 
17 
 
 
1.2.3 – Editar, Excluir 
.tb-left { 
 Width: 400px; 
} 
 
.tb-center { 
 Width: inherit; 
} 
 
.tb-right { 
 Width: 400px; 
} 
 
/* Panel one */ 
.style-panel-user-edit { 
 Width: 600px; 
 height: 265px; 
 background-color: #daecff; 
} 
 
.style-txt-name { 
 Width: 570px; 
 margin-left: 10px; 
 margin-right: 8px; 
} 
 
.style-txt-cpf { 
 Width: 108px; 
 margin-left: 8px; 
 margin-right: 8px; 
} 
 
.style-txt-ddd { 
 Width: 30px; 
 margin-left: 8px; 
} 
 
.style-txt-phone { 
 margin-left: 8px; 
 margin-right: 8px; 
} 
 
.style-phone-type { 
 margin-left: 8px; 
} 
 
.style-txt-zip { 
 Width: 108px; 
 margin-bottom: 8px; 
 margin-left: 8px; 
} 
 
.style-bt-zip { 
 margin-left: 8px; 
 margin-right: 8px; 
 margin-bottom: 8px; 
 background-color: #5bbe5d; 
 color: white; 
 padding: 2px 1px; 
18 
 
 border: none; 
 cursor: pointer; 
 width: 80px; 
} 
 
.style-bt-zip-off { 
 margin-left: 8px; 
 margin-right: 8px; 
 margin-bottom: 8px; 
 background-color: #c8e5fe; 
 color: white; 
 padding: 2px 1px; 
 border: none; 
 cursor: pointer; 
 width: 80px; 
} 
 
.style-txt-address { 
 Width: 481px; 
 margin-bottom: 8px; 
 margin-left: 8px; 
 margin-right: 8px; 
} 
 
.style-txt-address-number { 
 Width: 63px; 
 margin-bottom: 8px; 
 margin-left: 10px; 
} 
 
.style-txt-neighborhood { 
 Width: 237px; 
 margin-left: 8px; 
} 
 
.style-txt-city { 
 Width: 210px; 
 margin-left: 23px; 
 margin-right: 8px; 
} 
 
.style-txt-state { 
 Width: 63px; 
 margin-left: 10px; 
 margin-right: 8px; 
} 
 
.style-bt-search { 
 margin-left: 8px; 
 margin-right: 8px; 
 margin-bottom: 8px; 
 background-color: #5bbe5d; 
 color: white; 
 padding: 2px 1px; 
 border: none; 
 cursor: pointer; 
 width: 80px; 
} 
 
.style-txt-email, .style-txt-password { 
 Width: 200px; 
 margin-bottom: 8px; 
19 
 
 margin-left: 8px; 
} 
 
/* button edit save delete cancel*/ 
.style-bt-user { 
 height: 40px; 
 background-color: #daecff; 
} 
 
.style-bt-save { 
 background-color: #5bbe5d; 
 margin-left: 8px; 
 margin-bottom: 1px; 
 color: white; 
 padding: 2px 2px; 
 border: none; 
 cursor: pointer; 
 width: 80px; 
} 
 
.style-bt-save-off { 
 background-color: #c8e5fe; 
 margin-left: 8px; 
 margin-bottom: 1px; 
 color: white; 
 padding: 2px 2px; 
 border: none; 
 cursor: pointer; 
 width: 80px; 
} 
 
.style-bt-edit { 
 background-color: #5bbe5d; 
 margin-left: 8px; 
 margin-bottom: 1px; 
 color: white; 
 padding: 2px 2px; 
 border: none; 
 cursor: pointer; 
 width: 80px; 
} 
 
.style-bt-edit-off { 
 background-color: #c8e5fe; 
 margin-left: 8px; 
 margin-bottom: 1px; 
 color: white; 
 padding: 2px 2px; 
 border: none; 
 cursor: pointer; 
 width: 80px; 
} 
 
.style-bt-delete { 
 background-color: #5bbe5d; 
 margin-left: 8px; 
 margin-bottom: 1px; 
 color: white; 
 padding: 2px 2px; 
 border: none; 
 cursor: pointer; 
 width: 80px; 
20 
 
2 – Protótipo de interface gráfica Android 
(SMYTH, N) Criamos um protótipo de interface gráfica Android, oferecer ao 
usuário as funcionalidades CRUD, que permita que o usuário interaja com os dados 
modelados por esse trecho do banco de dados, nessa interface foi criado campos de 
texto, botões de interação, e um design agradável para o usuário. No design 
colocamos algumas restrições: 
 
● O campo nome, endereço, bairro, cidade e estado somente texto. 
● O campo cpf, cep e número de endereço somente números. 
● O campo selecionar, somente selecionar uma opção. 
● O botão novo, cria um novo cadastro em branco. 
● O botão editar, modifica um cadastro. 
● O botão deletar, exclui um cadastro. 
● O botão salvar, salva todos os campos modificados no cadastro. 
 
Figura 2 – Cadastro Android 
 
Fonte: Autor, 2020 
 
21 
 
2.1 – Código XML do layout 
<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:app="http://schemas.android.com/apk/res-auto" 
 xmlns:tools="http://schemas.android.com/tools" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:orientation="vertical"> 
 
 <EditText 
 android:id="@+id/editNome" 
 android:hint="Nome" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" /> 
 
 <EditText 
 android:id="@+id/editCPF" 
 android:hint="CPF" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" /> 
 
 <LinearLayout 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content"> 
 
 <EditText 
 android:id="@+id/editTelefoneDDD" 
 android:hint="DDD" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" /> 
 
 <EditText 
 android:id="@+id/editTelefone" 
 android:hint="Telefone"android:layout_width="match_parent" 
 android:layout_height="wrap_content" /> 
 </LinearLayout> 
 
 <EditText 
 android:id="@+id/editCEP" 
 android:hint="CEP" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" /> 
 
 <LinearLayout 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content"> 
 
 
 
22 
 
 <EditText 
 android:id="@+id/editEndereco" 
 android:layout_width="330dp" 
 android:layout_height="wrap_content" 
 android:hint="Endereço" /> 
 
 <EditText 
 android:id="@+id/editEnderecoNumero" 
 android:layout_width="73dp" 
 android:layout_height="wrap_content" 
 android:hint="N" /> 
</LinearLayout> 
 
<EditText 
 android:id="@+id/editBairro" 
 android:hint="Bairro" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" /> 
 
<LinearLayout 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content"> 
 
 <EditText 
 android:id="@+id/editCidade" 
 android:layout_width="334dp" 
 android:layout_height="wrap_content" 
 android:hint="Cidade" /> 
 
 <EditText 
 android:id="@+id/editEstado" 
 android:layout_width="79dp" 
 android:layout_height="wrap_content" 
 android:hint="Estado" /> 
 
</LinearLayout> 
 
 
<LinearLayout 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content"> 
 
 <Button 
 android:id="@+id/btnNovo" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:text="NOVO" /> 
 
 
 
23 
 
 <Button 
 android:id="@+id/btnEditar" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:text="Editar" /> 
 
 <Button 
 android:id="@+id/btnDeletar" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:text="Deletar" /> 
 
 <Button 
 android:id="@+id/btnSalvar" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:text="Salvar" /> 
 </LinearLayout> 
</LinearLayout> 
 
 
 
24 
 
3 – Banco de dados 
(MySQL AB) Foi desenvolvida o mecanismo de acesso ao banco de dados 
em linguagem C#. Esse mecanismo será o responsável por oferecer acesso a um 
trecho do banco de dados por parte do resto do sistema. Sempre que um trecho do 
sistema precisar acessar esse trecho do banco de dados, deverá fazê-lo por meio 
desse mecanismo desenvolvido por nossa equipe. 
No Banco de Dados foi desenvolvido um Diagrama Entidade-Relacionamento 
DER, para uma organização dos dados cadastrados, criamos cinco tabelas, pessoa, 
endereço, pessoa telefone, telefone, telefone tipo. Utilizamos o programa MySQL 
workbench para o desenvolvimento do banco de dados. 
 
Figura 3 – Diagrama de Cadastro 
 
Fonte: Autor, 2020 
 
 
 
25 
 
3.1 – Script Conectar ao Banco 
Para conectar ao banco e salvar os dados preenchidos foi utilizado o seguinte 
script, esse script está no botão salvar. 
 
 // LINHA DE COMMANDO QUE LOGA NO BANCO DE DADOS 
 MySqlConnection objcon = new 
MySqlConnection("server=localhost;user 
id=root;database=cad;password=%$&YhggFdS@!98"); 
 objcon.Open(); 
 
 // Linha de comando do INSERT INTO ENDEREÇO 
 MySqlCommand objCmdEndereco = new MySqlCommand("insert into 
endereco (id, logradouro, numero, cep, bairro, cidade, estado) value(null, ?, ?, 
?, ?, ?, ?)", objcon); 
 
 // LINHA DE COMANDO QUE ADD CADA UM DOS CAMPOS DO CADASTRO 
 objCmdEndereco.Parameters.Add("@logradouro", MySqlDbType.VarChar, 
256).Value = BoxEndereco.Text; 
 objCmdEndereco.Parameters.Add("@numero", MySqlDbType.Int32).Value 
= BoxNumero.Text; 
 objCmdEndereco.Parameters.Add("@cep", MySqlDbType.Int32).Value = 
BoxCEP.Text; 
 objCmdEndereco.Parameters.Add("@bairro", MySqlDbType.VarChar, 
50).Value = BoxBairro.Text; 
 objCmdEndereco.Parameters.Add("@cidade", MySqlDbType.VarChar, 
30).Value = BoxCidade.Text; 
 objCmdEndereco.Parameters.Add("@estado", MySqlDbType.VarChar, 
20).Value = BoxEstado.Text; 
 
 // LINHA DE COMANDO QUE EXECUTAR NO BANCO DE DADOS 
 objCmdEndereco.ExecuteNonQuery(); 
 
 // LINHA DE COMANDO QUE PEGA O ID DA TABELA ENDERECO PARA ADD NA 
TABELA PESSOA NO CAMPO ENDERECO 
 long idEndereco = objCmdEndereco.LastInsertedId; 
 
Foram utilizados parâmetros para conectar e atribuir aos objetos texto, 
também foi utilizado o LastInsertID para pegar o ultimo id e atribuir as classes FK. 
Todo o script seguiu esse formato para salvar os dados. 
 
 
 
 
 
 
 
26 
 
Conclusão 
O aprendizado obtido na conclusão do trabalho de desenvolvimento em ASP 
.net foi gratificante e muito bom para obter mais conhecimento, o problema que foi 
encontrado ao andamento do desenvolvimento foi a linguagem C# com é uma 
linguagem muito utilizada no back-end, foi difícil não querer desenvolver mais coisa 
do front-end, ao criar um sistema interface gráfica CRUD, para ter um visual melhor 
ao o usuário foi criado folhas de estilos CSS, essencial para um bom trabalho feito. 
O mecanismo de acesso ao banco de dados em linguagem C#, foi 
responsável por oferecer acesso a um trecho do banco de dados por parte do resto 
do sistema. Foi criado um banco de dados igual ao passado pela equipe de 
modelagem, para o desenvolvimento foi escolhido o MySQL workbench, não tinha 
um conhecimento profundo com o aplicativo, mas foi simples o entendimento e logo 
em seguida já estava funcionando para os testes. 
Também foi desenvolvido um protótipo de interface gráfica com o usuário em 
Android, que permite que o usuário interaja com os dados modelados por esse 
trecho do banco de dados. Para isso foi criado com o Android Studio esse programa 
é muito pesado e exigia muito do computador, mesmo tendo um PC de qualidade de 
alto desempenho o Android Studio pesava e ocorria alguns bugs, mas com muita 
paciência foi realizado o desenvolvimento CRUD. O modelo do trecho do banco de 
dados foi representado por Diagrama Entidade-Relacionamento (DER), passado 
pela equipe de modelagem e aplicado com sucesso ao sistema. 
O mecanismo de acesso ao banco de dados que a equipe foi apresentada, 
conta com quatro entidades: Pessoa, Endereço, Telefone e TipoTelefone que 
mapeiam as principais tabelas do banco de dados, exceto a tabela associativa 
PESSOA_TELEFONE. O protótipo Web e o Android foram executados com sucesso 
e em particular eu gostei, mas do Web do que Android. 
 
 
27 
 
Referências 
CSS Avançado. Joseph R. Lewis e Meitar Moscovitz Disponível em< 
https://s3.novatec.com.br/capitulos/capitulo-9788575222201.pdf >. Acesso 
em 01 Novembro de 2020. 
 
PRATICAS do SCRUM. 2017. Disponível em 
<http://www.mindmaster.com.br/scrum/>. Acesso em 20 Outubro de 2020. 
SMYTH, N. Android Studio 2.3 Development Essentials - Android 7 Edition:. 
CreateSpace Independent Publishing Platform, 2017. ISBN 
9781544275437. Disponívelem: 
<https://books.google.com.br/books?id=SuxcDgAAQBAJ>. Acesso em 20 
Outubro de 2020. 
MySQL AB, MySQL Reference Manual. Disponível em< 
http://www.smeduquedecaxias.rj.gov.br/nead/Biblioteca/Forma%C3%A7%
C3%A3o%20Continuada/Tecnologia/cursos/bancos%20de%20dados/mysq
l/manual-a4.pdf> Acessado em: 20 Outubro 2020.