Aprenda como fazer: Formulários Web Dinâmico

Neste artigo, demonstraremos na prática como desenvolver um formulário web dinâmico, desde seu projeto até exemplos de código. No final, deste artigo, estará disponível o link de acesso ao protótipo desenvolvido.

O desenvolvimento de software é considerado uma arte. Depende, exclusivamente, da criatividade do desenvolvedor, alinhado com seus conhecimentos técnicos em programação.

Para desenvolver, utilizaremos as ferramentas SQL Server 2012 e o Visual Studio Community 2015. E codificaremos na linguagem C#.

Será necessário ter conhecimentos em HTML, Modelagem de banco de dados, SQL e Desenvolvimento Web.

Definição do Problema

Primeiramente, temos que definir o escopo do problema a ser resolvido e entender o processo de dinamização.

O desenvolvimento de formulários é algo trivial e manual, requer somente habilidade no manuseio do mouse e teclado com auxilio de um Integrated Development Environment  (IDE). Existem no mercado diversas IDEs para desenvolvimento em várias linguagens de programação, tais como: Eclipse, NetBeans, Visual Studio, Sublime, NotePad++ e entre outras.

Pouco importa a linguagem de programação e a IDE que irá utilizar. Os conhecimentos aqui aplicados poderão ser replicados em qualquer linguagem.

O princípio da dinamização de formulários vem da Engenharia de Software, mais específico da reutilização. O Reuso é um conceito básico da orientação a objetos. Podemos reutilizar tudo que conseguirmos abstrair do mundo real. O conceito de abstração é fundamental no entendimento de reutilização.

Para tornar um formulário dinâmico será necessário compreender que cada campo do seu formulário é um objeto e que ele poderá ser reutilizado conforme as suas necessidades. Essas necessidades, podem ser representada por uma tabela de parametrizações, onde ficará os parâmetros dos objetos necessários para montar o seu formulário. Também terá que ter em mente que somente existirá um formulário padrão que será base (PAI) de todos os outros formulários, sendo assim, será necessário uma tabela de formulários que servirá para armazenar as informações de cada formulário.

Ficou curioso e animado para saber como desenvolver um formulário web dinâmico, então, vamos para a próxima etapa, que é a modelagem do banco de dados.

Modelagem do Banco de Dados

Como vimos na definição do problema, temos a princípio as tabelas: Configurações e Formulários. O nosso modelo físico do banco de dados é o visualizado na Figura 01.

Modelo do banco de dados

Figura 01 – Modelo do banco de dados para formulários web dinâmicos

Pronto, agora que temos o modelo do banco de dados, então, podemos montar a aplicação. Ops! E os tipos dos dados. Vamos tentar ao máximo tornar genérico o desenvolvimento. No caso, vamos visualizar tipos dos dados no diagrama de classes, conforme a Figura 02.

 

Diagrama de Classes

Figura 02 – Diagrama de Classes

Agora temos todos os artefatos para desenvolver o protótipo. A simplicidade que fará a diferença, elaboraremos um protótipo com poucos recursos visuais no layout. A proposta é demonstrar o que é possível fazer em um formulário dinâmico web, então, vamos para o que interessa.

Prototipação dos Formulários

No caso, precisaremos dos formulários “Cadastro de Formulários” (Código 01), “Cadastro de Campos por Formulário” (Código 02) e “Formulário Padrão” (Código 03).

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Cadastro de Formulários</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        Cadastro de Formulários<br />
        <br />
        ID: <asp:TextBox ID="txtID" runat="server"></asp:TextBox>
        <br />
        Título: <asp:TextBox ID="txtTitulo" runat="server"></asp:TextBox>
        <br />
        Data Criação:
        <asp:TextBox ID="txtDataCriacao" runat="server"></asp:TextBox>
        <br />
        Permissão:
        <asp:TextBox ID="txtPermissao" runat="server"></asp:TextBox>
        <br />
        <asp:Button ID="btnGravar" runat="server" Text="Gravar" />
    
    </div>
    </form>
</body>
</html>

 Código 01 – Tela do Cadastro do Formulários

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        Cadastro de Campos por Formulário<br />
        <br />
        Formulário: <asp:DropDownList ID="cboFormularios" runat="server">
        </asp:DropDownList>
        <br />
        Label do campo:
        <asp:TextBox ID="txtLabelCampo" runat="server"></asp:TextBox>
        <br />
        campo Obrigatório?
        <asp:RadioButton ID="rdbObrigatorioSim" runat="server" Text="Sim" />
        <asp:RadioButton ID="rdbObrigatorioNao" runat="server" Text="Não" />
        <br />
        Tamanho do campo: <asp:TextBox ID="txtTamanho" runat="server"></asp:TextBox>
        <br />
        Capacidade Máxima do campo:
        <asp:TextBox ID="txtCapacidade" runat="server"></asp:TextBox>
        <br />
        Tipo do campo:
        <asp:DropDownList ID="DropDownList1" runat="server">
            <asp:ListItem>Selecione</asp:ListItem>
            <asp:ListItem>Button</asp:ListItem>
            <asp:ListItem>DropDownList</asp:ListItem>
            <asp:ListItem>TextBox</asp:ListItem>
        </asp:DropDownList>
        <br />
        Formato do campo:
        <asp:DropDownList ID="DropDownList2" runat="server">
        </asp:DropDownList>
        <br />
        campo Vísivel?
        <asp:RadioButton ID="rdbVisivelSim" runat="server" Text="Não" />
        <asp:RadioButton ID="rdbVisivelNao" runat="server" Text="Não" />
        <br />
        <br />
        <asp:Button ID="btnAdicionar" runat="server" Text="Adicionar Campo" />
        <br />
        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
        <br />
        <asp:Button ID="btnSalvar" runat="server" Text="Salvar Configurações" />
    
    </div>
    </form>
</body>
</html>

Código 02 – Tela do Cadastro de Campos por Formulário

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

Código 03 – Tela do Formulário Padrão

A lógica principal é utilizar o Formulário Padrão (Código 03) como base de todos os outros formulários. Para isso, teremos que adicionar de forma dinâmica os campos cadastrados para o formulário ao carregar a página. A chamada da página será pelo ID do formulário cadastrado. Ex.: http://localhost/frmFormularioPadro.aspx?id=1.

Com essas dicas anteriores, você poderá implementar a ideia em qualquer linguagem de programação e banco de dados.

Desenvolvendo o Protótipo

Agora que temos todos os artefatos, vamos implementa-los e ver como funciona a lógica para essa forma de desenvolvimento Web dinâmico no Microsoft Visual Studio Community 2013 com a linguagem C# e banco de dados SQL Server 2012.

Para visualizar, o código produzido, <Clique Aqui>, e acesse o GitHub. Fique a vontade para fazer o clone no seu Visual Studio e veja a lógica implementada.

Espero ter ajudado a melhorar seus conhecimentos em programação. Utilize os comentários para dúvidas e sugestões.

Até o próximo artigo!

Prof. Norton Guimarães
@nortoncg

 

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *