Montebugnoli Programação: Asp.Net - Desenvolvendo um teclado numérico randômico

Este mês irei explorar um assunto que com certeza irá ser útil para programadores que necessitam incorporar autenticação via teclado numérico em seus sistemas. Para isto, desenvolverei um teclado numérico randômico, idêntico ao que possuímos em sites de bancos, portais específicos, ou seja, para tipos de aplicações que exigem um grau maior de segurança. Na primeira parte deste artigo explorarei apenas a interface gráfica, com todos os detalhes necessários. O exemplo será desenvolvido utilizando a tecnologia Asp.Net com a linguagem C# utilizando como ferramenta de desenvolvimento o Microsoft Visual Studio. Para realçar o visual do mesmo implementarei algumas classes do bootstrap em conjunto com o JQuery.

Bootstrap e JQuery

Não explorarei detalhes na instalação e configuração destas tecnologias, pois são assuntos que já foram citados em nossa revista. Para isto irei recomendar a leitura de dois artigos, sendo o primeiro denominado “Bootstrap - Pontapé inicial na utilização do Framework pelo Visual Studio” podendo ser encontrado no mês de Fevereiro de 2015 e ser acessado pelo link:

http://www.theclub.com.br/Restrito/Revistas/201502/boot1502.aspx

O segundo sobre JQuery entitulado como “Asp.Net – Trabalhando com JQuery 2.x” do mês de Julho de 2015, encontrado no link:

http://www.theclub.com.br/Restrito/Revistas/201507/aspn1507.aspx

(Importante lembrar que apesar deste último artigo estar explorando uma versão superior do JQuery, podemos facilmente seguir os mesmos passos descritos no artigo trocando pela versão 1.x.)

Após baixar estes arquivos, deveremos possuir uma pasta chamada “bootstrap” com o conteúdo idêntico ao da Figura 01.

Figura 01: Pasta Bootstrap.

E dentro da pasta “js” obrigatoriamente os arquivos de scripts necessários para o bom funcionamento do exemplo.

Ver Imagem 02.

Figura 02: Pasta “js”.

Criando o exemplo

Abra o Visual Studio e crie uma solução do tipo “Web Site ... “ com o nome que desejar. Esta Solution deverá conter por padrão o arquivo “Web.config”, um WebForm (onde irá conter o nosso teclado) e a pasta Bootstrap supracitada. Ver Imagem 03.

Figura 03: Solution.

Sugiro renomear o arquivo “aspx” para “FrmTeclado” e primeiramente adicionar o componente “ScriptManager” situado na Toolbox “AJAX Extensions”, componente de uso obrigatório e responsável por habilitar as funcionalidades do AJAX na página. Deveremos adicionar uma “Table” e dentro da mesma os botões numéricos, Limpar e OK, os TextBoxes CPF e Senha. O Layout deverá ficar idêntico ao da figura 04.

Figura 04: Layout proposto.

Abaixo a codificação comentada:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmTeclado.aspx.cs" Inherits="FrmTeclado" %>

<!DOCTYPE html>

</head>

Dentro da TAG Head deveremos adicionar o código necessário para o funcionamento das funções BootStrap.

<body>

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>
</div>

Deveremos adicionar na TAG Body os dois arquivos de scripts: JQuery e Bootstrap. Preferencialmente o componente “Scriptmanager” deverá estar contido dentro de uma DIV, conforme código acima.

<div>

<tr>

<asp:Button Class="btn btn-navbar" ID="btn01" runat="server" Text="0 - 1" OnClick="btn01_Click" Font-Bold="False" Font-Size="Medium" Height="30px" />

</td>

<asp:Button Class="btn" ID="btn02" runat="server" Text="2 - 3" OnClick="btn02_Click" Font-Size="Medium" Height="30px" />

</td>

</tr>

<tr>

<asp:Button Class="btn" ID="btn03" runat="server" Text="4 - 5" OnClick="btn03_Click" Font-Size="Medium" Height="30px" /></td>

<asp:Button Class="btn" ID="btn04" runat="server" Text="6 - 7" OnClick="btn04_Click" Font-Size="Medium" Height="30px" />

</td>

</tr>

<tr>

<asp:Button Class="btn" ID="btn05" runat="server" Text="8 - 9" OnClick="btn05_Click" Font-Size="Medium" Height="30px" />

</td>

<asp:Button Class="btn btn-danger" ID="btnLimpar" runat="server" Text="Limpar" OnClick="btnLimpar_Click" Height="30px" />

</td>

</tr>

</table>

</div>

</td>

A minha sugestão seria trabalhar com o conjunto de componentes, Div, Table e dentro das colunas deveremos adicionar os botões numéricos (0 ao 9) e o Limpar. Utilizei algumas classes do bootstrap para enfeitar os botões do teclado, como por exemplo a “btn”, “btn btn-danger”. Na “Table” principal utilizamos a classe “well” para um fundo bonito.

</tr>

<tr>

<td>

<asp:TextBox ID="txtCpf" runat="server"Width="200px"></asp:TextBox>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

<td align="right" width="25%">SENHA: </td>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<asp:TextBox ID="txtSenha" runat="server" MaxLength="6" BackColor="White" ReadOnly="True" Width="200px"></asp:TextBox>

</ContentTemplate>

</asp:UpdatePanel>

</td>

</tr>

</table>

</td>

</tr>

A autenticação será realizada pelo campo CPF e por um campo Senha. Nesta região faremos o uso de outra “table”. Importante ressaltar o componente “UpdatePanel”, utilizado para renderizar partes parciais de uma tela sem a necessidade de fazer um completo PostBack. Este comportamento será necessário para adicionar os valores numéricos randômicos ao textbox.

<asp:Button Class="btn btn-primary" ID="btnOk" runat="server" style="text-align: center" Text="Ok" Width="109px" OnClick="btnOk_Click" />

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Para finalizar teremos um botão “Ok”, o qual irá disparar o evento “btnOk_Click”, o qual fará o trabalho de comparar os valores escolhidos no teclado.

Ao executar nosso exemplo teremos uma aparência idêntica ao da Figura 05.

Figura 05: Executando o exemplo.

Conclusões

A primeira parte deste artigo explorei todos os detalhes necessários para criar uma interface de teclado numérico randômico. Utilizei algumas classes do Bootstrap junto com comandos básicos HTML quando trabalhamos com Web Forms. No mês que vem irei finalizá-lo com toda a codificação necessária para o funcionamento do exemplo proposto.

Um grande abraço

Montebugnoli Programação

Páginas

quinta-feira, 11 de abril de 2019

Asp.Net - Desenvolvendo um teclado numérico randômico – Parte 1

Nenhum comentário:

Postar um comentário