minicurso desenvolvimento de aplicação web usando c# e mysql

FATEC Guaratinguetá XVII Semana de Tecnologia

(19 de Nov de 2012 a 23 de Nov de 2012)

Minicurso Desenvolvimento de

aplicação web usando C# e MySQL (20 de Nov de 2012 a 22 de Nov de 2012)

Luiz Eduardo Guarino de Vasconcelos

Minicurso: Desenvolvimento de aplicação web usando C# e MySQL. Luiz Eduardo Guarino de Vasconcelos du dot guarino arroba gmail dot com

Conteúdo O minicurso .................................................................................................................. 3

Tema ............................................................................................................................ 5

Objetivos ....................................................................................................................... 5

Requisitos ..................................................................................................................... 5

Assuntos Abordados ..................................................................................................... 5

O protótipo .................................................................................................................... 6

Diagrama de Caso de Uso ............................................................................................ 6

Não serão contemplados .............................................................................................. 6

Modelo Entidade Relacionamento ................................................................................ 7

Detalhamento das Entidades ........................................................................................ 7

Criação do Banco de Dados ....................................................................................... 10

Criação do Protótipo Web ........................................................................................... 12

Criação da conexão com o Banco de Dados .............................................................. 14

Desenvolvimento da Aplicação - Listar e Cadastrar Categorias (Lista.aspx) ............... 16

Desenvolvimento da Aplicação - Listar Produtos (Lista.aspx) ..................................... 24

Desenvolvimento da Aplicação - Cadastrar Produtos (Cadastro.aspx) ....................... 25

Desenvolvimento da Aplicação - Cadastrar Categorias para o Produtos (Cadastro.aspx) .......................................................................................................... 29

Desenvolvimento da Aplicação - Listar Categorias do Produto (Lista.aspx) ................ 33

Desenvolvimento da Aplicação – Menu (Menu.ascx) .................................................. 35

Desenvolvimento da Aplicação – Visualizar Produtos (Principal.aspx) ....................... 36

Desenvolvimento da Aplicação – Login (Login.aspx) .................................................. 39

Desenvolvimento da Aplicação – Cadastro de Usuário (Cadastro.aspx) ..................... 41

Desenvolvimento da Aplicação – Visualizar Produtos (Principal.aspx) ....................... 43

Desenvolvimento da Aplicação – Carrinho de Produtos (Carrinho.aspx) .................... 44

Desenvolvimento da Aplicação – Finalizar a Compra (Boleto.aspx) ............................ 49

Desenvolvimento da Aplicação – Sair (Principal.aspx) ................................................ 54

Agradecimento............................................................................................................ 55

Contato ....................................................................................................................... 55


O minicurso

A plataforma .NET é a plataforma desenvolvida pela Microsoft para o desenvolvimento de aplicações, inclusive dos seus próprios produtos. Esta plataforma foi lançada em 2002 com a versão do .NET Framework 1.0, totalmente orientado a objetos. O objetivo da empresa era ganhar espaço na comunidade de desenvolvimento de software. Naquela época, o Visual Studio, que é a ferramenta de desenvolvimento (IDE) oficial, era proprietário o que dificultou a absorção da plataforma pela comunidade. Em 2003, foi lançada uma nova versão do Visual Studio e o .NET Framework 1.1.

Somente em 2005 a Microsoft lançou versões gratuitas da sua IDE, a denominada versão Express Edition. Neste mesmo ano, foi lançado o .NET Framework 2.0 que é base para os frameworks atuais (e.g. 3.0, 3.5, 4.0 e 4.5) e o SQL Server Express Edition (gratuito mas com restrições no uso de hardware).

Atualmente, a IDE encontra-se na versão 2012 e .NET Framework 4.5. Para este minicurso, será adotado o Visual Studio 2008 Express Edition usando o modelo de desenvolvimento Web Forms.

Atualmente existem mais de 25 linguagens suportadas pelo .NET Framework, já que todas fazem uso da Base Class Library (BCL) que é um conjunto de interfaces, bibliotecas e funções. Ao usar a BCL como base, a linguagem passa a ser interoperável com as demais. Neste minicurso, será utilizada a principal linguagem da plataforma .NET que é o C#. O C# é server-side, case sensitive e permite o desenvolvimento de todos os tipos de aplicações citadas anteriormente.

A plataforma .NET permite o desenvolvimento dos mais diversos tipos de aplicações, tais como: Windows Forms, Web Forms, Mobile, Embedded, XBOX (XNA), Cloud Computing, entre outras.

Neste minicurso, será desenvolvido um protótipo web, já que como a própria Microsoft afirma, a tendência é criar aplicações que sejam disponíveis anytime, anywhere. Além disso, aplicações web tem as vantagens de manutenabilidade, escalabilidade, facilidade de operação pelos usuários (i.e. não precisam instalar nada, além do browser), entre outras. Para executar as aplicações web é necessário um Servidor Web. Em ambiente de produção, deve ser usado o Internet Information Services (IIS), que é o Servidor web da Microsoft. Para o desenvolvimento de aplicações (local), pode ser utilizado um servidor web integrado ao Visual Studio (i.e. Whidbey).

Em aplicações web, geralmente, as páginas terão uma parte interpretada pelo browser (e.g. HTML, CSS, Javascript), denominada client-side e outra parte compilada/interpretada pelo compilador/interpretador da linguagem no servidor (e.g. C#), denominada server-side.

As aplicações web, em geral, necessitam persistir dados de forma permanente e para isso são usados, em geral, sistemas gerenciadores de banco de dados (SGBDs). Existem diversos SGBD disponíveis no mercado. Para este minicurso, será


utilizado o SGBD MySQL da Oracle que tem como características principais a portabilidade, ser gratuito (e pago), dar suporte a transação, ser leve e robusto.

Para este cenário, é necessário ter as seguintes ferramentas/tecnologias instaladas:

Server-side

• .NET Framework • IIS • MySQL e drivers de conexão

Client-side

• Browser

Desenvolvedor

• .NET Framework • Visual Studio (Whidbey) • MySQL e drivers de conexão • Browser

Espero que você tenha um bom minicurso e que esse seja apenas o pontapé inicial para sua carreira na área de desenvolvimento.

“Se eu soubesse o que estava fazendo, não seria chamada pesquisa”

Albert Einstein


Tema Desenvolvimento de aplicação web usando C# e MySQL.

Objetivos • Conhecer a plataforma de desenvolvimento .NET usando a linguagem C#. • Conhecer o SGBD MySQL. • Desenvolver um protótipo em ambiente web (e-commerce).

Requisitos Microsoft Windows XP ou superior .NET Framework 3.5 Visual Studio 2008 (Professional ou Express Edition) ou superior Disponível em http://www.microsoft.com/visualstudio/ptb/downloads#d-2010-express MySQL Server 5.0 ou superior Disponível em http://dev.mysql.com/tech-resources/articles/mysql-installer-for-windows.html MySQL Query Browser Disponível em http://downloads.mysql.com/archives.php MySQL Administrator Disponível em http://downloads.mysql.com/archives.php DLL de comunicação do .NET com o MySQL Disponível em http://www.4learn.pro.br/guarino/tabd/MySql.Data.dll DLL para geração de boleto Disponível em http://www.devmedia.com.br/gerando-boletos-em-seu-site-asp-net-c/17820 Conector .NET MySQL (versão utilizada 6.6.4)

Disponível em http://www.4learn.pro.br/guarino/tabd/mysql-connector-net-6.6.4.msi

Assuntos Abordados • Banco de Dados (Conceitos, SQL, DML, DDL, MER) • Stored Procedures e Cursor • Orientação a Objetos (Conceitos) • UML (Diagrama de Caso de Uso) • Conceitos de Internet, WWW e Arquitetura de Aplicações para Web. • Linguagens (HTML, CSS e C#) • Session • Componentes (Label, TextBox, Button, LinkButton, Image, Hyperlink,

DropDownList, CheckBoxList, GridView, Repeater, SqlDataSource, FileUpload, Panel)

• Web Form e Web User Control


O protótipo

Desenvolvimento de um e-commerce com gerenciamento de produtos, categorias e usuários, permitindo a elaboração de um Carrinho de Compras e pagamento via boleto.

Diagrama de Caso de Uso

Na Figura 1 pode ser visualizado o Diagrama de Caso de Uso para o desenvolvimento das funcionalidades do minicurso.

Figura 1 – Diagrama de Caso de Uso do MiniCurso

Não serão contemplados • Implementações sobre Segurança de Sites

o Controle de Autorização nas Páginas o Criptografia o Ataques web o Auditoria (log)

• Desenvolvimento em Classes (Classes de Definição e de Manipulação) • Alterações e Exclusões em Geral • Controle da Quantidade de Itens dos Produtos • Filtro dos Produtos por Categorias • Detalhamento dos Componentes do Visual Studio • Princípios de Usabilidade • Redimensionamento das Imagens (Thumbnails) • Compra sem usuário estar logado • Funcionalidade de Esqueci Senha • Tratamento de exceções

Minicurso: Desenvolvimento de aplicação web usando C# e MySQL.

Modelo Entidade Relacionamento Na Figura 2, pode ser visualizada a estrutura do banco de dados utilizado no minicurso.

Figura 2 – Modelo Entidade Relacionamento utilizado no Minicu

Detalhamento das Entidades TB_CARRINHO – Armazena o Carrinho de Compras do Usuário logado.

TB_CATEGORIA – Armazena as categorias do e

Minicurso: Desenvolvimento de aplicação web usando C# e MySQL.Luiz Eduardo Guarino de Vasconcelos du dot guarino arroba gmail dot com

Modelo Entidade Relacionamento

Na Figura 2, pode ser visualizada a estrutura do banco de dados utilizado no

Modelo Entidade Relacionamento utilizado no Minicu

Detalhamento das Entidades

Armazena o Carrinho de Compras do Usuário logado.

Armazena as categorias do e-commerce


Na Figura 2, pode ser visualizada a estrutura do banco de dados utilizado no

Modelo Entidade Relacionamento utilizado no Minicurso

Armazena o Carrinho de Compras do Usuário logado.


TB_PRODUTO – Armazena as informações dos produtos do e

TB_CATEGORIAPRODUTO

TB_PESSOA – Armazena as informações dos usuários do e


Armazena as informações dos produtos do e-commerce

TB_CATEGORIAPRODUTO – Define as categorias dos produtos

Armazena as informações dos usuários do e-commerce


commerce

commerce


TB_COMPRA – Armazena as informações relacionadas as compras dos usuários.

TB_COMPRAITEM – Armazena as informações dos produtos comprados pelos usuários. Essas informações são originadas do Carrinho de Compras.

TB_ESTADO – Armazena os estados brasileiros.


Armazena as informações relacionadas as compras dos usuários.

Armazena as informações dos produtos comprados pelos . Essas informações são originadas do Carrinho de Compras.

Armazena os estados brasileiros.


Armazena as informações relacionadas as compras dos usuários.

Armazena as informações dos produtos comprados pelos


Criação do Banco de Dados

1) Abra o MySQL Query Browsera. Server Host: localhostb. UserName: rootc. Password: senha do banco de dadosd. Port: 3306 (verif

2) Como o Default Schema

dados foi selecionado. Clique em Ignore.

3) Criar um novo banco de dados. Selecione a opção Create New

a. Nome do schema:


Criação do Banco de Dados

Abra o MySQL Query Browser Server Host: localhost UserName: root Password: senha do banco de dados Port: 3306 (verifique a porta que o MySQL foi instalado)

Default Schema não foi preenchido no item 1, nenhum banco de dados foi selecionado. Clique em Ignore.

Criar um novo banco de dados. Clique com o botão direito na área indicada. Create New Schema.

Nome do schema: minicurso


não foi preenchido no item 1, nenhum banco de

na área indicada.


4) Após criar o banco de dados, podem ser criadas as tabelas conforme o item Detalhamento das Entidades, citado anteriormente. Para criar cada tabela, clique com o botão direito sobre o schema minicurso e selecione a opção Create New Table.

5) Repita o procedimento do item 4 para todas as Entidades (Tabelas) do banco

de dados. 6) Importe o banco de dados com as tabelas usando o arquivo

minicursoTabelas.sql usando o MySQL Administrator.


Criação do Protótipo Web

1) Abra o Visual Studio

2) Selecione a opção File > New Web Site

3) Defina as informações do protótipo

a. Selecione a aplicação do tipo ASP.NET Web Site b. Selecione o .NET Framework 3.5 c. Defina a Linguagem da aplicação Language C#

d. Defina o nome da aplicação MiniCurso


4) Na Solution Explorer, a. O arquivo web.config

aplicação (e.g. string de conexão do banco de dados, session timeout, formas de autenticação, páginas de erros, globalization).

5) Crie a seguinte estrutura a. Mapped.cs b. Boleto.Net.dll

c. MySql.Data.dll

d. Para incluir os arquivos na pasta, clique na pasta desejada e depois na opção em Add Existing Item


xplorer, exclua a página Default.aspx web.config possui muitas opções de configuração da

aplicação (e.g. string de conexão do banco de dados, session timeout, formas de autenticação, páginas de erros, globalization).

Crie a seguinte estrutura de pastas e inclua os arquivos:

na pasta App_Code Boleto.Net.dll na pasta Bin MySql.Data.dll na pasta Bin Para incluir os arquivos na pasta, clique na pasta desejada e depois na

Add Existing Item.


possui muitas opções de configuração da aplicação (e.g. string de conexão do banco de dados, session timeout, formas de autenticação, páginas de erros, globalization).

Para incluir os arquivos na pasta, clique na pasta desejada e depois na


Criação da conexão com o Banco de D

1) Na Server Explorer, clique em

2) Selecione o Data Source

3) Preencha as informações de conexão ao banco de dadosa. Server name

b. User name: rootc. Password: senha do banco de dadosd. Marque a opção e. Selecione o databasef. Clique em Test Connection


Criação da conexão com o Banco de Dados

Na Server Explorer, clique em Add Connection

Selecione o Data Source MySQL DataBase e clique em Continue

Preencha as informações de conexão ao banco de dados Server name: localhost

: root : senha do banco de dados

Marque a opção Save my Password

Selecione o database minicurso

Test Connection e verifique se a conexão foi bem sucedida.


Continue

e verifique se a conexão foi bem sucedida.


4) Após isso, é possível ter acesso a diversas funcionalidades Stored Procedures)

Esta será a conexão utilizada


Após isso, é possível ter acesso a diversas funcionalidades (e.g. Tables, Stored Procedures) do banco de dados MySQL integrado ao Visua

a conexão utilizada no desenvolvimento da aplicação.


(e.g. Tables, do banco de dados MySQL integrado ao Visual Studio.


Desenvolvimento da Aplicação

(Lista.aspx)

1) Criar uma nova página (Web Form). Na > Categoria, clique com o bo

2) Selecione Web Form

marcada a opção Place Code in separate file


Desenvolvimento da Aplicação - Listar e Cadastrar Categorias

Criar uma nova página (Web Form). Na Solution Explorer, na pasta , clique com o botão direito e selecione Add New Item.

Web Form. Defina o nome da página como Lista.aspx

Place Code in separate file.


Listar e Cadastrar Categorias

, na pasta Paginas

Add New Item.

Lista.aspx. Deixe


3) Defina esta página como a primeira a ser executada (

4) Execute a aplicação (informando se deseja habilitar a opção de Debug. clique em OK.

5) Feche o browser e verifique se a aplicação está parada.

aplicação parada é que deve ser feita qualquer mod

aplicação.


Defina esta página como a primeira a ser executada (Set As Start Page

Execute a aplicação (pressione a tecla F5). Uma mensagem será aberta informando se deseja habilitar a opção de Debug. Marque a primeira opção

Feche o browser e verifique se a aplicação está parada. Somente com a

aplicação parada é que deve ser feita qualquer modificação no código da


Set As Start Page).

). Uma mensagem será aberta Marque a primeira opção e

Somente com a

ificação no código da


6) Com a aplicação parada. DESIGN (no canto inferior esquerdo

7) Na Toolbox, selecione a opção

8) Siga os passos: a. Clique na opção b. Selecione a conexãoc. Clique em NEXT

d. Clique em NEXT

e. Marque a primeira opção (Specify a custom SQL statement...)f. Na aba SELECT


Com a aplicação parada. Vamos começar o Codigão. Selecione o canto inferior esquerdo da figura).

, selecione a opção SqlDataSource e arraste para a tela.

Clique na opção Configure Data Source Selecione a conexão

NEXT NEXT

Marque a primeira opção (Specify a custom SQL statement...)SELECT coloque:


. Selecione o MODO

e arraste para a tela.

Marque a primeira opção (Specify a custom SQL statement...)


i. SELECT TB_CATEGORIACODIGO, TB_CATEGORIADESCRICAO, TB_CATEGORIAPAI FROM TB_CATEGORIA

g. Na aba DELETE

i. DELETE FROM TB_CATEGORIA WHERE TB_CATEGORIACODIGO=?TB_CATEGORIACODIGO

h. Clique em NEXT

i. Clique em Test Query

j. Clique em FINISH

9) Na Toolbox, arraste um a. Choose Data Sourceb. Selecione o Sqc. Marque a opção Enable Deletingd. Marque a opção Enable Selection

10) Na Toolbox, arraste outro a. Clique na opção Configure Data Sourceb. Selecione a conexãoc. Clique em NEXTd. Marque a segunda opção (Specify columns from a tae. Selecione a tabela TB_CATEGORIAf. Marque a coluna (*)g. Clique no botão Advanced...h. Marque a opção Generate INSERT, UPDATE and DELETEi. Clique em OKj. Clique em NEXTk. Clique em FINISH

11) No Modo Source, aperte CTRL+H para fazer duas substituições.a. Primeira substituição

i. Find what “[” ii. Replace With “” (em branco)iii. Clique em Replace All


SELECT TB_CATEGORIACODIGO, TB_CATEGORIADESCRICAO, TB_CATEGORIAPAI FROM TB_CATEGORIA ORDER BY TB_CATEGORIADESCRICAODELETE, coloque: DELETE FROM TB_CATEGORIA WHERE TB_CATEGORIACODIGO=?TB_CATEGORIACODIGO

NEXT Test Query

FINISH Na Toolbox, arraste um GridView para a tela e siga os passos:

Choose Data Source Selecione o SqlDataSource1 Marque a opção Enable Deleting Marque a opção Enable Selection

Na Toolbox, arraste outro SqlDataSource e siga os passos: Clique na opção Configure Data Source Selecione a conexão Clique em NEXT Marque a segunda opção (Specify columns from a table or view)Selecione a tabela TB_CATEGORIA Marque a coluna (*) Clique no botão Advanced... Marque a opção Generate INSERT, UPDATE and DELETEClique em OK Clique em NEXT Clique em FINISH

No Modo Source, aperte CTRL+H para fazer duas substituições.a substituição Find what “[” Replace With “” (em branco) Clique em Replace All


TB_CATEGORIADESCRICAO, TB_CATEGORIAPAI FROM RIADESCRICAO

TB_CATEGORIACODIGO=?TB_CATEGORIACODIGO

ble or view)

Marque a opção Generate INSERT, UPDATE and DELETE

No Modo Source, aperte CTRL+H para fazer duas substituições.


b. Segunda substituiçãoi. Find what “ii. Replace With “” (em branco)iii. Clique em Replace All

c. Isto é necessário porque o Visual Studio gera os campos da SQL com [] que é o padrã

12) Além disso, ainda em Modo Source, adicione o bloco em destaque na figura dentro do SqlDataSource2

13) No Modo Design, na toolbox, arraste um FormView para a tela e siga os

passos: a. Choose Data Sourceb. Selecione SqlDataSource2c. Clique em Refresh Schema


Segunda substituição Find what “]” Replace With “” (em branco) Clique em Replace All

Isto é necessário porque o Visual Studio gera os campos da SQL com [] é o padrão para o SQL Server, porém, para MySQL não funciona.

Além disso, ainda em Modo Source, adicione o bloco em destaque na figura dentro do SqlDataSource2

No Modo Design, na toolbox, arraste um FormView para a tela e siga os

Choose Data Source ione SqlDataSource2

Clique em Refresh Schema


Isto é necessário porque o Visual Studio gera os campos da SQL com [] o para o SQL Server, porém, para MySQL não funciona.

Além disso, ainda em Modo Source, adicione o bloco em destaque na figura

No Modo Design, na toolbox, arraste um FormView para a tela e siga os


14) Adicione o evento para vincular o GridView ao FormView. Para adicionar um evento, selecione o componente desejado, vá nas Propriedades e depois em Eventos.

protected void GridView1_SelectedIndexChanged(…)

{ SqlDataSource2.SelectParameters["TB_CATEGORIACODIGO"].DefaultValue =

GridView1.SelectedValue.ToString(); //na mesma linha FormView1.ChangeMode(FormViewMode.Edit);

FormView1.Visible = true; }

15) Adicione os eventos para atualizar o GridView após uma interação no FormView

protected void FormView1_ItemInserted(…) { GridView1.DataBind(); FormView1.Visible = false; } protected void FormView1_ItemDeleted(…) { GridView1.DataBind(); FormView1.Visible = false; } protected void FormView1_ItemUpdated(…) { GridView1.DataBind(); FormView1.Visible = false; }


16) Adicione um LinkButton a. Text = Cadastrar b. ID = lbCadastrar c. Evento Click

protected void lbCadastrar_Click(…) { FormView1.ChangeMode(FormViewMode.Insert); FormView1.Visible = true; }

17) EXECUTAR A APLICAÇÃO a. É possível Cadastrar Várias Categorias b. É preciso preencher a Descrição e o Código da Categoria Pai ("0") c. É possível Editar apenas a primeira Categoria d. As demais categorias não poderão ser editadas, pois ainda é

necessária uma alteração no SqlDataSource2

18) Pare a aplicação. Selecione o SqlDataSource2. a. Configure Data Source b. Clique em NEXT c. Clique em NEXT d. Na Aba SELECT altere para

i. SELECT * FROM tb_categoria WHERE TB_CATEGORIACODIGO=?

e. Clique em NEXT f. Clique em FINISH

19) EXECUTAR A APLICAÇÃO a. Agora é possível Gerenciar todas as Categorias b. Se der erro "Parameter index is out of range"é porque está faltando um

Parameter no SqlDataSource2 c. Adicione novamente (semelhante ao passo 12)

<SelectParameters> <asp:Parameter Name="TB_CATEGORIACODIGO" Type="Int32"/> </SelectParameters>

20) Formatando o GridView. Pare a aplicação. a. Selecione o GridView b. Selecione Auto Format. c. Selecione um estilo (e.g. Professional) d. Edit Columns

i. Remova a coluna do Código ii. Altere o HeaderText das colunas iii. Altere o texto dos botões (CommandField)

21) EXECUTAR A APLICAÇÃO


22) Formatando o FormView

a. Selecione o Form View b. Selecione Auto Format (e.g. Professional) c. Edit Templates

i. Selecione InsertItemTemplate ii. Remova a TB_CATEGORIACODIGO iii. Altere os demais textos iv. End Templates


24) Paginação e Ordenação no GridView

a. Selecione o GridView b. Marque a opção Enable Paging c. Altere a propriedade PageSize d. Marque a opção Enable Sorting


26) Colocando mensagem de confirmação antes de excluir

a. Selecione o GridView b. Adicione o evento RowDataBound

if (e.Row.RowType == DataControlRowType.DataRow) { // varre linhas foreach (DataControlFieldCell cell in e.Row.Cells) { // verifica controles da linha foreach (Control control in cell.Controls) { if (control.ToString() == "System.Web.UI.WebControls.DataControlLinkButton") { LinkButton button = control as LinkButton; string texto = button.Text; if (texto == "Excluir") // adiciona mensagem button.Attributes.Add("onclick", "return confirm ('Deseja excluir?')"); } } } }



Desenvolvimento da Aplicação - Listar Produtos (Lista.aspx)

1) Criar uma nova página (Web Form) na pasta Paginas > Produto, denominada Lista.aspx

2) Definir esta página como Set As Start Page. 3) No Modo Design, arrastar um GridView e seguir os passos:

a. Choose Data Source b. New Data Source c. Selecionar Database d. Clique em OK e. Selecionar a conexão f. Clique em NEXT g. Marque a primeira opção (Specify a custom SQL...) h. Na aba SELECT

i. SELECT * FROM TB_PRODUTO ORDER BY TB_PRODUTOTITULO;

i. Clique em NEXT j. Clique em Test Query k. Clique em FINISH

4) Formate o GridView usando Auto Format 5) Adicione um LinkButton na tela

a. Text = Cadastrar b. ID = lbCadastrar c. Evento Click

i. Response.Redirect(“Cadastro.aspx”); 6) EXECUTAR A APLICAÇÃO


Desenvolvimento da Aplicação - Cadastrar Produtos

(Cadastro.aspx)

1) Criar uma nova página (Web Form) na pasta Paginas > Produto, denominada Cadastro.aspx

2) No modo Design, insira uma Tabela com 7 Rows e 2 Columns 3) Crie a seguinte tela

a. 6 Labels b. 3 TextBox c. 1 FileUpload d. 1 Button

4) Na pasta Paginas > Produto > Foto serão armazenadas as fotos selecionadas

no componente fileFoto. 5) Crie uma StoredProcedure (SP) para inserir o produto

a. Na Server Explorer, botão direito em Stored Procedures, Create Stored Procedure

b. Código da SP. A SP recebe as informações do Produto nos parâmetros

(IN) e retorna o código do Produto inserido no parâmetro (OUT). CREATE PROCEDURE sp_InsereProduto(IN titulo Varchar(100), IN descricao TEXT, IN preco Decimal(10,2), IN foto Varchar(255), OUT codigo INT) BEGIN INSERT INTO TB_PRODUTO

(TB_PRODUTOTITULO, TB_PRODUTODESCRICAO, TB_PRODUTOPRECO, TB_PRODUTOFOTO)

VALUES (titulo, descricao, preco, foto);

SELECT LAST_INSERT_ID() INTO codigo; END


6) Abra o arquivo appsettings.txt e copie as variáveis URLSite e PathSite para o web.config dentro das tags AppSettings

<appSettings> <add key="URLSite" value="http://localhost:1986/MiniCursoo/"/> <add key="PathSite" value="C:\Documents\Visual Studio 2008\WebSites\MiniCursoo\"/> </appSettings>

7) Na página, dê dois cliques para acessar o código (Cadastro.aspx.cs) e insira dois namespaces no topo do código.

using System.IO; using MiniCurso;

8) Crie o método para Verificar as extensões permitidas no upload da foto.

//Método que verifica uma extensão private bool VerificarExtensaoPermitida(string extensaoArquivo) { //Array com as extensões permitidas string[] extensoesPermitidas = { ".gif", ".png", ".jpeg", ".jpg" }; //Linq que verifica a extensão do arquivo com as permitidas return extensoesPermitidas.Where(extensaoArquivo.EndsWith).FirstOrDefault() != null; }

9) Crie o método que fará o Upload da Foto.

private string Upload() { string retorno = string.Empty; if (fileFoto.FileName != "") { //Verifica o tamanho do arquivo em bytes. Nesse caso faço Upload de até 500KB if (fileFoto.PostedFile.ContentLength < 512000) { if (VerificarExtensaoPermitida(fileFoto.FileName.ToLower())) { //Caminho do diretório onde vamos salvar os Uploads String caminho =

ConfigurationManager.AppSettings["PathSite"] + "Paginas\\Produto\\Foto\\"; string nomeFile = DateTime.Now.Year.ToString() +

DateTime.Now.Month.ToString() + DateTime.Now.Day.ToString() + DateTime.Now.Hour.ToString() + DateTime.Now.Minute.ToString() + DateTime.Now.Second.ToString() + DateTime.Now.Millisecond.ToString() + Path.GetExtension(fileFoto.PostedFile.FileName);

fileFoto.PostedFile.SaveAs(caminho + nomeFile);

lblMensagem.Text = "Upload realizado com sucesso!"; retorno = caminho+nomeFile; } else { lblMensagem.Text = "Extensão de arquivo não permitida.

O arquivo deve ser uma imagem (png, jpg, gif ou jpeg)!"; } } else { lblMensagem.Text = "A foto deve ter no máximo 500 KB."; } } else { lblMensagem.Text = "Não existe arquivo selecionado para Upload."; } return retorno; }


10) Crie o método que fará o Cadastro do Produto. private void Cadastrar() { //FAZ UPLOAD DA FOTO string foto = Upload(); if (foto != string.Empty) { System.Data.IDbConnection conexao; System.Data.IDbCommand comando; //ABRE A CONEXAO COM O BD conexao = Mapped.Connection(Mapped.conexao.ServerExplorer); //COMANDO A SER EXECUTADO string storedprocedure = "sp_InsereProduto"; comando = Mapped.Command(storedprocedure, conexao); comando.CommandType = CommandType.StoredProcedure; //PARAMETROS DE ENTRADA (IN) comando.Parameters.Add(Mapped.Parameter

("titulo", txtTitulo.Text, DbType.String, ParameterDirection.Input)); comando.Parameters.Add(Mapped.Parameter

("descricao", txtDescricao.Text, DbType.String, ParameterDirection.Input)); comando.Parameters.Add(Mapped.Parameter

("preco", txtPreco.Text, DbType.Decimal, ParameterDirection.Input)); comando.Parameters.Add(Mapped.Parameter

("foto", foto, DbType.String, ParameterDirection.Input)); //PARÂMETRO DE SAÍDA (OUT) comando.Parameters.Add(Mapped.Parameter

("codigo", "", DbType.Int32, ParameterDirection.Output)); //COMANDO EXECUTADO comando.ExecuteNonQuery(); int codigo = 0; //varre todos os parametros do comando na busca do OUT foreach (var item in comando.Parameters) { IDbDataParameter p = (IDbDataParameter)item; if (p.Direction == ParameterDirection.Output) if (p.ParameterName == "codigo") codigo = Convert.ToInt32(p.Value); } //FECHA CONEXAO conexao.Close(); //MOSTRA O PARAMETRO OUT Response.Write("codigo" + codigo.ToString()); } }

11) Dois clique no botão Salvar para acessar o evento btnSalvar_CLICK. Insira a

chamada no método Cadastrar(). Cadastrar();

12) EXECUTAR A APLICAÇÃO a. Cadastre um Produto b. Acesse a Página Lista.aspx


13) Exibindo a foto na Lista. Pare a aplicação. Acesse a Lista.aspx novamente.

14) Crie o método que transforma o caminho físico no caminho relativo da imagem.

private string PathAbsolute2PathRelative(string nomeImagem) { string caminhoHTTP = ConfigurationManager.AppSettings["URLSite"] + "Paginas/Produto/Foto/"; int final = nomeImagem.LastIndexOf("\\"); string novonomeImagem = caminhoHTTP + nomeImagem.Substring(final + 1); return novonomeImagem; }

15) Importe o namespace para manipulação de arquivos

using System.IO;

16) Acesse o evento GridView_RowDataBound. Esse evento permitirá manipular as colunas do GridView em tempo de execução.

if (e.Row.RowType == DataControlRowType.DataRow) { string foto = (Convert.ToString(DataBinder.Eval(e.Row.DataItem, "TB_PRODUTOFOTO"))); if (foto!=string.Empty) { if (File.Exists(foto)) { string img = PathAbsolute2PathRelative(foto); e.Row.Cells[4].Text = "<img src='" + img + "' width='80px'>"; } } }


a. Na lista já aparece a foto do produto.

18) Formatando o GridView a. Remova a coluna de Código (deverá alterar o número da coluna

(e.Row.Cells[XXX].Text) no código do evento GridView1_RowDataBound

b. Altere o HeaderText das colunas c. Formate a coluna do preço (DataFormatString = {0:c}) d. Enable Sorting



Desenvolvimento da Aplicação - Cadastrar Categorias para o

Produtos (Cadastro.aspx)

1) Criar uma nova página (Web Form) na pasta Paginas > CategoriaProduto, denominada Cadastro.aspx

2) Defina esta página como Set As Start Page. 3) No modo Design, crie a seguinte tela

a. 3 Labels b. 1 DropDownList c. 1 CheckBoxList d. 1 Button

4) Crie a Stored Procedure (SP) para Inserir uma Categoria ao Produto

(sp_InsereProdutoCategoria)

CREATE PROCEDURE sp_InsereProdutoCategoria (IN categoria INT, IN produto INT)

BEGIN INSERT INTO TB_CATEGORIAPRODUTO

(TB_CATEGORIACODIGO, TB_PRODUTOCODIGO) VALUES (categoria, produto); END

5) Crie a Stored Procedure (SP) para Deletar Categoria do Produto

(sp_DeleteProdutoCategoria) CREATE PROCEDURE sp_DeleteProdutoCategoria(IN produto INT) BEGIN DELETE FROM TB_CATEGORIAPRODUTO WHERE TB_PRODUTOCODIGO=produto; END

6) Importe o namespace MiniCurso using MiniCurso;

7) Carregar DropDownList com a lista de produtos. Arraste um SqlDataSource, selecione a opção para especificar a SQL e configure na aba SELECT.

a. SELECT TB_PRODUTOCODIGO, TB_PRODUTOTITULO FROM TB_PRODUTO ORDER BY TB_PRODUTOTITULO;

8) Associe o DropDownList ao SqlDataSource1. a. Selecione o ddlProduto b. Choose Data Source c. Configure conforme a imagem a seguir


9) Carregar o CheckBoxList com a lista de Categorias. Arraste mais um SqlDataSource, selecione a opção para especificar a SQL e configure na aba SELECT.

a. SELECT TB_CATEGORIACODIGO, TB_CATEGORIADESCRICAO FROM TB_CATEGORIA ORDER BY TB_CATEGORIADESCRICAO;

10) Associe o cblCategorias ao SqlDataSource2. a. Selecione o cblCategorias b. Choose Data Source c. Configure conforme a imagem a seguir


11) EXECUTAR A APLICAÇÃO a. Lista de Produtos é carregada b. Lista de Categorias é carregada

12) Colocando mais um item no ddlProduto. No evento ddlProduto_DataBound,

insira a linha de código. ddlProduto.Items.Insert(0, "Selecione");

13) EXECUTE A APLICAÇÃO

14) Crie o método para Cadastrar a Categoria ao Produto private void Cadastrar(int categoria, int produto) { System.Data.IDbConnection conexao; System.Data.IDbCommand comando; //ABRE A CONEXAO conexao = Mapped.Connection(Mapped.conexao.ServerExplorer); //COMANDO A SER EXECUTADO string storedprocedure = "sp_InsereProdutoCategoria"; comando = Mapped.Command(storedprocedure, conexao); comando.CommandType = CommandType.StoredProcedure; //PARÂMETROS DE ENTRADA comando.Parameters.Add(Mapped.Parameter

("categoria", categoria, DbType.Int32, ParameterDirection.Input)); comando.Parameters.Add(Mapped.Parameter

("produto", produto, DbType.Int32, ParameterDirection.Input)); //EXECUTA O COMANDO comando.ExecuteNonQuery(); //FECHA A CONEXAO conexao.Close(); }

15) Crie o método para Deletar a Categoria do Produto

private void Deletar(int produto) { System.Data.IDbConnection conexao; System.Data.IDbCommand comando; conexao = Mapped.Connection(Mapped.conexao.ServerExplorer); string storedprocedure = "sp_DeleteProdutoCategoria"; comando = Mapped.Command(storedprocedure, conexao); comando.CommandType = CommandType.StoredProcedure; comando.Parameters.Add(Mapped.Parameter

("produto", produto, DbType.Int32, ParameterDirection.Input)); comando.ExecuteNonQuery(); conexao.Close(); }


16) Dois cliques no botão SALVAR (evento CLICK) //CODIGO DO PRODUTO int produto = Convert.ToInt32(ddlProduto.SelectedItem.Value); //DELETA TODAS AS CATEGORIAS DO PRODUTO Deletar(produto); //VARRE TODOS OS ITENS DO CBLCATEGORIAS for (int i = 0; i < cblCategorias.Items.Count; i++) { //VERIFICA QUAL ITEM ESTÁ SELECIONADO if (cblCategorias.Items[i].Selected) { //CODIGO DA CATEGORIA int categoria = Convert.ToInt32(cblCategorias.Items[i].Value); //CADASTRA CATEGORIA AO PRODUTO Cadastrar(categoria, produto); } } //lblMensagem.Text = "Cadastro realizado com sucesso"; Response.Redirect("Lista.aspx");



Desenvolvimento da Aplicação - Listar Categorias do Produto

(Lista.aspx)

1) Criar uma nova página (Web Form) na pasta Paginas > CategoriaProduto, denominada Lista.aspx

2) Defina esta página como Set As Start Page. 3) No modo Design, crie a seguinte tela:

a. 1 Hyperlink i. Text = Cadastrar ii. NavigateUrl = Cadastro.aspx

b. 2 Labels c. 1 DropDownList d. 1 GridView

4) Carregar DropDownList com a lista de produtos. Arraste um SqlDataSource,

selecione a opção para especificar a SQL e configure na aba SELECT. a. SELECT TB_PRODUTOCODIGO, TB_PRODUTOTITULO FROM

TB_PRODUTO ORDER BY TB_PRODUTOTITULO; 5) Associe o DropDownList ao SqlDataSource1.

a. Selecione o ddlProduto b. Choose Data Source e configure da seguinte forma

a. Data Source = SqlDataSource1 b. Data Field to display = TB_PRODUTOTITULO c. Data Field for the value = TB_PRODUTOCODIGO

c. Enable AutoPostBack


6) Carregar GridView com a lista de categorias, porém, do produto selecionado. Será necessário fazer um INNER JOIN entre as tabelas TB_CATEGORIAPRODUTO E TB_CATEGORIA. Arraste um SqlDataSource, selecione a opção para especificar a SQL e configure na aba SELECT.

a. SELECT tb_categoria.TB_CATEGORIACODIGO, tb_categoria.TB_CATEGORIADESCRICAO, tb_categoria.TB_CATEGORIAPAI, tb_categoriaproduto.TB_PRODUTOCODIGO FROM tb_categoria INNER JOIN tb_categoriaproduto ON tb_categoria.TB_CATEGORIACODIGO = tb_categoriaproduto.TB_CATEGORIACODIGO WHERE (tb_categoriaproduto.TB_PRODUTOCODIGO = ?produto);

7) No Modo Source, defina um parâmetro para o SqlDataSource2, conforme a figura e o código a seguir.

<SelectParameters> <asp:ControlParameter ControlID="ddlProduto" PropertyName="SelectedValue" Name="produto" Type="Int32" />

</SelectParameters>

8) Associe o GridView1 ao SqlDataSource2. a. Selecione o GridView b. Choose Data Source e selecione SqlDataSource2



Desenvolvimento da Aplicação – Menu (Menu.ascx)

1) Criar um novo componente (Web User Control) na pasta Complemento > Controles, denominado Menu.ascx

2) No modo Design, insira uma tabela com 2 Rows e 3 Columns. 3) Insira 6 Hyperlinks e configure-os para chamar as páginas:

a. Paginas > Categoria > Lista.aspx (Cadastro de Categoria) b. Paginas > Categoria > Lista.aspx (Lista de Categoria) c. Paginas > Produto > Cadastro.aspx (Cadastro de Produto) d. Paginas > Produto > Lista.aspx (Lista de Produto) e. Paginas > CategoriaProduto > Cadastro.aspx (Cadastro de Categorias

ao Produto) f. Paginas > CategoriaProduto > Lista.aspx (Lista de Categorias do

Produto)

4) Arraste o WebUserControl Menu.ascx nessas páginas.

a. Abra a página desejada. b. Na Solution Explorer, selecione o Menu.ascx c. Arraste na posição desejada na página aberta d. Repita o procedimento para as 5 páginas.



Desenvolvimento da Aplicação – Visualizar Produtos

(Principal.aspx)

1) Criar uma nova página (Web Form) na pasta Paginas, denominada Principal.aspx

2) Defina esta página como Set As Start Page. 3) Visualização dos Produtos dentro de um Repeater. No modo Source, dentro da

tag <FORM> coloque o código a seguir.

<div style="width:100%"> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Paginas/Carrinho.aspx">Meu Carrinho</asp:HyperLink> <br/> <asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate> </HeaderTemplate> <ItemTemplate> <div id="blocoBase" runat="server"

style="float:left; padding:5px 5px 5px 5px; color:#3D3D3D; width:23%;"> <div style="border:1pt gray solid; background-color:#f2f2f2; text-align:center; padding: 5px 5px 5px 5px; "> <div> <asp:Image ID="foto" runat="server" Width="80" /> </div> <div> <b><%# DataBinder.Eval(Container.DataItem, "TB_PRODUTOTITULO") %></b> </div> <div> <%# DataBinder.Eval(Container.DataItem, "TB_PRODUTODESCRICAO") %> </div> <div> R$ <%# DataBinder.Eval(Container.DataItem, "TB_PRODUTOPRECO") %> </div> <a id="detalhes"

href="<%# "Carrinho.aspx?ID=" + DataBinder.Eval(Container.DataItem, "TB_PRODUTOCODIGO") %>" style="font-family:Verdana; font-size:medium; font-weight:700"> Comprar</a>

</div> </div> </ItemTemplate> <FooterTemplate> </FooterTemplate> </asp:Repeater> </div>

4) Crie a StoredProcedure sp_VisualizaProdutos para Listar Todos os Produtos

cadastrados.

CREATE PROCEDURE sp_VisualizaProdutos() BEGIN SELECT * FROM TB_PRODUTO ORDER BY TB_PRODUTOTITULO; END


5) Importe o namespace MiniCurso. using MiniCurso;

6) Crie o método para Visualizar os Produtos private void GetProdutos() { System.Data.IDbConnection conexao; System.Data.IDbCommand comando; System.Data.IDataAdapter adapter; DataSet ds = new DataSet(); //ABRE A CONEXAO conexao = Mapped.Connection(Mapped.conexao.ServerExplorer); //COMANDO A SER EXECUTADO string storedprocedure = "sp_VisualizaProdutos"; comando = Mapped.Command(storedprocedure, conexao); comando.CommandType = CommandType.StoredProcedure; adapter = Mapped.Adapter(comando); //PREENCHE O DATASET COM AS INFORMACOES DO BD adapter.Fill(ds); //ASSOCIA REPEATER AO DATASET Repeater1.DataSource = ds.Tables[0].DefaultView; Repeater1.DataBind(); //FECHA A CONEXAO conexao.Close();

}

7) Dentro do Page_Load, chame o método GetProdutos()

if (!Page.IsPostBack) { GetProdutos();

}


9) Visualizar as fotos corretamente. Crie o método para Transformar o caminho físico da foto no caminho relativo.



10) Importe o namespace para manipulação de arquivos using System.IO;

11) Os arquivos devem ser manipulados dentro do evento Repeater1_ItemDataBound

if (e.Item.ItemType == ListItemType.Item ||

e.Item.ItemType == ListItemType.AlternatingItem) { Image img = e.Item.FindControl("foto") as Image; DataRowView drv = e.Item.DataItem as DataRowView; string foto = drv.Row["TB_PRODUTOFOTO"].ToString(); if (foto != string.Empty) { if (File.Exists(foto)) { string caminho = PathAbsolute2PathRelative(foto); img.ImageUrl=caminho; } } }



Desenvolvimento da Aplicação – Login (Login.aspx)

1) Criar uma nova página (Web Form) na pasta Paginas, denominada Login.aspx 2) Defina esta página como Set As Start Page. 3) No Modo Design, crie a tela conforme a imagem a seguir.

a. Table com 5 Rows e 2 Columns b. 4 Labels c. 1 Button d. 2 TextBox e. 1 Hyperlink

i. Text = Cadastrar ii. NavigateUrl = Página de Cadastro do Usuário (ainda será

criada)

4) Importe o namespace MiniCurso using MiniCurso;

5) Crie a StoredProcedure para autenticação sp_Autenticacao

CREATE PROCEDURE sp_Autenticacao (IN email VARCHAR(100), IN senha VARCHAR(50), OUT codigo INT)

BEGIN IF ((email != '') && (senha != '')) THEN SET codigo =

(SELECT TB_PESSOACODIGO FROM TB_PESSOA WHERE TB_PESSOAEMAIL=email AND TB_PESSOASENHA=senha);

ELSE SET codigo = 0; END IF; END


6) Crie o método para Logar na aplicação private void Logar() { System.Data.IDbConnection conexao; System.Data.IDbCommand comando; //ABRE A CONEXAO conexao = Mapped.Connection(Mapped.conexao.ServerExplorer); //COMANDO A SER EXECUTADO string storedprocedure = "sp_Autenticacao"; comando = Mapped.Command(storedprocedure, conexao); comando.CommandType = CommandType.StoredProcedure; //DEFINE PARAMETROS DE ENTRADA DA SP comando.Parameters.Add(Mapped.Parameter

("email", txtEmail.Text, DbType.String, ParameterDirection.Input)); comando.Parameters.Add(Mapped.Parameter

("senha", txtSenha.Text, DbType.String, ParameterDirection.Input)); //DEFINE PARAMETRO DE SAIDA DA SP comando.Parameters.Add(Mapped.Parameter

("codigo", "", DbType.Int32, ParameterDirection.Output)); //EXECUTA O COMANDO comando.ExecuteNonQuery(); int codigo = 0; //VARRE TODOS OS PARAMETROS DO COMANDO foreach (var item in comando.Parameters) { //VERIFICA QUAL É O PARAMETRO DE SAIDA IDbDataParameter p = (IDbDataParameter)item; if (p.Direction == ParameterDirection.Output) if (p.ParameterName == "codigo") codigo = Convert.ToInt32(p.Value); } //FECHA CONEXAO conexao.Close(); //DEFINE CODIGO DO USUARIO EM VARIAVEL DE SESSION Session["Codigo"] = codigo; Response.Redirect("Principal.aspx"); }

7) No botão Entrar (evento CLICK), chame o método Logar()

Logar();

8) EXECUTE A APLICAÇÃO a. Ainda falta cadastrar um usuário.


Desenvolvimento da Aplicação – Cadastro de Usuário

(Cadastro.aspx)

1) Criar uma nova página (Web Form) na pasta Paginas > Usuario, denominada Cadastro.aspx

2) Arraste um Label (ID = lblMensagem) 3) Arraste um Hyperlink

a. Text = Página Principal b. NavigateUrl = Login.aspx

4) Na Toolbox, arraste um SqlDataSource e siga os passos: a. Clique na opção Configure Data Source b. Selecione a conexão c. Clique em NEXT d. Marque a segunda opção (Specify columns from a table or view) e. Selecione a tabela TB_PESSOA f. Marque a coluna (*) g. Clique no botão Advanced... h. Marque a opção Generate INSERT, UPDATE and DELETE i. Clique em OK j. Clique em NEXT k. Clique em FINISH

5) No Modo Source, aperte CTRL+H para fazer duas substituições. a. Primeira substituição

i. Find what “[”

ii. Replace With “” (em branco) iii. Clique em Replace All

b. Segunda substituição i. Find what “]” ii. Replace With “” (em branco) iii. Clique em Replace All

6) Arraste um FormView 7) Associe o FormView1 ao SqlDataSource1

a. Choose Data Source b. Selecione SqlDataSource1 c. Refresh Schema d. Edit Template

i. InsertItemTemplate 1. Delete o campo Código 2. Delete o campo Data de Cadastro

ii. End Template Editing 8) No Page_Load, altere o FormView para começar em modo de Cadastro

if (!Page.IsPostBack) { FormView1.ChangeMode(FormViewMode.Insert); }


9) Edite o evento FormView1_ItemInserting para preencher a Data de Cadastro, já que ela foi excluída do formulário

e.Values["TB_PESSOADATACADASTRO"] = DateTime.Now;

10) Edite o evento FormView1_ItemInserted para finalizar o Cadastro

if (e.Exception != null) { e.ExceptionHandled = true; e.KeepInInsertMode = true; lblMensagem.Text = "Cadastro não completado"; } else { FormView1.Visible = false; lblMensagem.Text = "Cadastro realizado com sucesso"; }


a. Cadastre um usuário b. Faça o login com o usuário


Desenvolvimento da Aplicação – Visualizar Produtos

(Principal.aspx)

1) Voltar na página Principal.aspx para mostrar o nome do usuário logado. 2) Crie a StoredProcedure sp_GetUsuario

CREATE PROCEDURE sp_GetUsuario(IN codigo INT) BEGIN SELECT * FROM TB_PESSOA WHERE TB_PESSOACODIGO = codigo; END

3) Acrescente um Label na página (ID = lblNome) 4) Crie o método para mostrar o nome do usuário

private bool GetUsuario(int codigo) { bool retorno = false; System.Data.IDbConnection conexao; System.Data.IDbCommand comando; System.Data.IDataReader reader; //ABRE A CONEXAO conexao = Mapped.Connection(Mapped.conexao.ServerExplorer); //COMANDO A SER EXECUTADO string storedprocedure = "sp_GetUsuario"; comando = Mapped.Command(storedprocedure, conexao); comando.CommandType = CommandType.StoredProcedure; //INPUT comando.Parameters.Add(Mapped.Parameter

("codigo", codigo, DbType.Int32, ParameterDirection.Input)); //EXECUTA O COMANDO reader = comando.ExecuteReader(); //LE REGISTRO DO BD while (reader.Read()) { lblNome.Text = Convert.ToString(reader["TB_PESSOANOME"]); retorno = true; } //FECHA CONEXAO reader.Close(); conexao.Close(); return retorno; }

5) Acrescentar o código para a chamada do método dentro do PAGE LOAD if (Session["Codigo"] != null) { if (Session["Codigo"].ToString().Trim() != string.Empty) { int codigo = Convert.ToInt32(Session["Codigo"]); GetUsuario(codigo); } }



Desenvolvimento da Aplicação – Carrinho de Produtos

(Carrinho.aspx)

1) Criar uma nova página (Web Form) na pasta Paginas, denominada Carrinho.aspx

2) Importar o namespace MiniCurso. using MiniCurso;

3) Crie a StoredProcedure para Inserir o produto no Carrinho CREATE PROCEDURE sp_InsereCarrinho (IN produto INT, IN pessoa INT, OUT codigo INT) BEGIN DECLARE qtde INT; SET qtde = (SELECT COUNT(*) FROM TB_CARRINHO

WHERE TB_PRODUTOCODIGO=produto AND TB_PESSOACODIGO=pessoa); IF qtde = 0 THEN INSERT INTO TB_CARRINHO (TB_PRODUTOCODIGO, TB_PESSOACODIGO)

VALUES (produto, pessoa);

SET codigo = LAST_INSERT_ID(); ELSE SET codigo = 0; END IF; END

4) Crie o método para Inserir o Produto no carrinho private int InsereCarrinho(int produto, int pessoa)

{ System.Data.IDbConnection conexao; System.Data.IDbCommand comando; //ABRE A CONEXAO conexao = Mapped.Connection(Mapped.conexao.ServerExplorer); //COMANDO A SER EXECUTADO string storedprocedure = "sp_InsereCarrinho"; comando = Mapped.Command(storedprocedure, conexao); comando.CommandType = CommandType.StoredProcedure; //PARAMETROS DE ENTRADA comando.Parameters.Add(Mapped.Parameter

("produto", produto, DbType.Int32, ParameterDirection.Input)); comando.Parameters.Add(Mapped.Parameter

("pessoa", pessoa, DbType.Int32, ParameterDirection.Input)); //PARAMETRO DE SAIDA comando.Parameters.Add(Mapped.Parameter

("codigo", "", DbType.Int32, ParameterDirection.Output)); //EXECUTA O COMANDO comando.ExecuteNonQuery(); int codigo = 0; //RECUPERA CODIGO DO CARRINHO INSERIDO foreach (var item in comando.Parameters) { IDbDataParameter p = (IDbDataParameter)item; if (p.Direction == ParameterDirection.Output) if (p.ParameterName == "codigo") codigo = Convert.ToInt32(p.Value); } //FECHA CONEXAO conexao.Close(); return codigo; }


5) Chamar o método no Page_Load if (!Page.IsPostBack) { int produto = Convert.ToInt32(Request.QueryString["ID"]); int pessoa = Convert.ToInt32(Session["Codigo"]); switch (InsereCarrinho(produto, pessoa)) { case 0: Response.Write("Produto já cadastrado"); break; default: Response.Write("Produto cadastrado com sucesso"); break; }

}

6) EXECUTAR A APLICAÇÃO a. Logar na aplicação b. Escolher um Produto c. Comprar o produto (irá para o Carrinho)

i. Tente comprar o produto duas vezes.

7) Visualizar o Carrinho de Produtos. Crie a StoredProcedure sp_VisualizaCarrinho

CREATE PROCEDURE sp_VisualizaCarrinho(IN pessoa INT) BEGIN SELECT * FROM TB_CARRINHO

INNER JOIN TB_PRODUTO ON TB_PRODUTO.TB_PRODUTOCODIGO = TB_CARRINHO.TB_PRODUTOCODIGO WHERE TB_CARRINHO.TB_PESSOACODIGO=pessoa;

END

8) Criar um SqlDataSource chamando a StoredProcedure. Arraste o SqlDataSource e configure-o seguindo os passos:

a. Configure Data Source b. Selecione a conexão c. Clique em NEXT d. Marque a primeira opção (Specify a custom SQL...) e. Marque a opção Stored Procedure f. Selecione a sp_VisualizaCarrinho g. Clique em NEXT h. Adicione um Parâmetro

i. Parameter Source = Session ii. Session Field = Codigo

i. Clique em NEXT j. Clique em Test Query k. Clique em FINISH

9) Arraste um GridView e associe-o ao SqlDataSource1 a. Edite as colunas e deixe apenas as do Título, Descrição,Preço e Foto.


10) Importe o namespace para manipulação de arquivo. using System.IO;

11) Crie o método que transforma o caminho físico no caminho relativo


12) Edite o evento GridView_RowDataBound para mostrar a foto adequadamente.

if (e.Row.RowType == DataControlRowType.DataRow) { string foto = (Convert.ToString

(DataBinder.Eval(e.Row.DataItem, "TB_PRODUTOFOTO"))); if (foto != string.Empty) { if (File.Exists(foto)) { string img = PathAbsolute2PathRelative(foto); e.Row.Cells[3].Text =

"<img src='" + img + "' width='80px'>"; } } }

13) Acrescente um Hyperlink

a. Text = Continuar Comprando b. NavigateURL = Principal.aspx


15) Excluir um Item do Carrinho. Crie a StoredProcedure sp_DeleteItemCarrinho

CREATE PROCEDURE sp_DeleteItemCarrinho(IN carrinho INT) BEGIN DELETE FROM TB_CARRINHO WHERE TB_CARRINHOCODIGO=carrinho; END

16) No Modo Source, adicionar uma coluna do tipo Item Template no GridView (dentro das tags <Columns></Columns>

<asp:TemplateField> <ItemTemplate>

<asp:LinkButton CommandName="Deletar" CommandArgument='<%# Bind("TB_CARRINHOCODIGO") %>' ID="lbExcluir" runat="server">Excluir </asp:LinkButton>

</ItemTemplate> </asp:TemplateField>


17) Crie o método que Deleta o Item do Carrinho private bool DeletaItemCarrinho(int carrinho) { System.Data.IDbConnection conexao; System.Data.IDbCommand comando; //ABRE A CONEXAO conexao = Mapped.Connection(Mapped.conexao.ServerExplorer); //COMANDO A SER EXECUTADO string storedprocedure = "sp_DeleteItemCarrinho"; comando = Mapped.Command(storedprocedure, conexao); comando.CommandType = CommandType.StoredProcedure; //PARAMETRO DE ENTRADA comando.Parameters.Add(Mapped.Parameter

("carrinho", carrinho, DbType.Int32, ParameterDirection.Input)); //EXECUTA O COMANDO comando.ExecuteNonQuery(); //FECHA CONEXAO conexao.Close(); return true;

}

18) O método deverá ser chamado a partir do GridView. Para isso, edite o evento GridView_RowCommand.

if (e.CommandName == "Deletar") { int codigo = Convert.ToInt32(e.CommandArgument); DeletaItemCarrinho(codigo); GridView1.DataBind();

}


20) Limpar o carrinho. Crie a StoredProcedure sp_DeleteCarrinho CREATE PROCEDURE sp_DeleteCarrinho(IN pessoa INT) BEGIN DELETE FROM TB_CARRINHO WHERE TB_PESSOACODIGO=pessoa; END


21) Crie o método para Deletar o Carrinho private bool DeletaCarrinho(int pessoa) { System.Data.IDbConnection conexao; System.Data.IDbCommand comando; //ABRE A CONEXAO conexao = Mapped.Connection(Mapped.conexao.ServerExplorer); //COMANDO A SER EXECUTADO string storedprocedure = "sp_DeleteCarrinho"; comando = Mapped.Command(storedprocedure, conexao); comando.CommandType = CommandType.StoredProcedure; //PARAMETRO DE ENTRADA comando.Parameters.Add(Mapped.Parameter

("pessoa", pessoa, DbType.Int32, ParameterDirection.Input)); //COMANDO EXECUTADO comando.ExecuteNonQuery(); //FECHA CONEXAO conexao.Close(); return true;

}

22) Arraste um LinkButton (Text = Limpar Carrinho; ID = lbLimparCarrinho) e adicione o código a seguir.

int pessoa = Convert.ToInt32(Session["Codigo"]); DeletaCarrinho(pessoa); GridView1.DataBind();


24) Acrescentar Hyperlink a. Text = Finalizar a Compra b. NavigateUrl = Boleto.aspx (ainda não foi criada)


Desenvolvimento da Aplicação – Finalizar a Compra

(Boleto.aspx)

1) Criar uma nova página (Web Form) na pasta Paginas, denominada Boleto.aspx

2) Importar os namespaces using BoletoNet; using MiniCurso;

3) Criar PANEL com Labels dentro da tag <FORM></FORM> <asp:Panel ID="pnlDados" runat="server"> <asp:Label ID="lblNome" runat="server"></asp:Label> <br /> <asp:Label ID="lblEndereco" runat="server"></asp:Label> <br /> <asp:Label ID="lblBairro" runat="server"></asp:Label> <br /> <asp:Label ID="lblCidade" runat="server"></asp:Label> <br /> <asp:Label ID="lblEstado" runat="server"></asp:Label> <br /> <asp:Label ID="lblComplemento" runat="server"></asp:Label> <br /> <asp:Label ID="lblNumero" runat="server"></asp:Label> <br /> <asp:Label ID="lblCEP" runat="server"></asp:Label> <br /> <asp:Button ID="btnGerar" runat="server" Text="Gerar Boleto" /> </asp:Panel>


4) Crie o método para Mostrar as Informações do Usuário private bool GetUsuario(int codigo) { bool retorno = false; System.Data.IDbConnection conexao; System.Data.IDbCommand comando; System.Data.IDataReader reader; //ABRE A CONEXAO conexao = Mapped.Connection(Mapped.conexao.ServerExplorer); //COMANDO A SER EXECUTADO string storedprocedure = "sp_GetUsuario"; comando = Mapped.Command(storedprocedure, conexao); comando.CommandType = CommandType.StoredProcedure; //INPUT comando.Parameters.Add(Mapped.Parameter

("codigo", codigo, DbType.Int32, ParameterDirection.Input)); //EXECUTA O COMANDO reader = comando.ExecuteReader(); while (reader.Read()) { lblNome.Text = Convert.ToString(reader["TB_PESSOANOME"]); lblEndereco.Text = Convert.ToString(reader["TB_PESSOAENDERECO"]); lblNumero.Text = Convert.ToString(reader["TB_PESSOANUMERO"]); lblBairro.Text = Convert.ToString(reader["TB_PESSOABAIRRO"]); lblCidade.Text = Convert.ToString(reader["TB_PESSOACIDADE"]); lblCEP.Text = ""; lblEstado.Text = Convert.ToString(reader["TB_PESSOAESTADO"]); lblComplemento.Text =

Convert.ToString(reader["TB_PESSOACOMPLEMENTO"]); retorno = true; } //FECHA CONEXAO reader.Close(); conexao.Close(); return retorno; }

5) Chamar o método ao carregar a página

if (!Page.IsPostBack) { if (Session["Codigo"] != null) { if (Session["Codigo"].ToString().Trim() != string.Empty) { GetUsuario(Convert.ToInt32(Session["Codigo"])); } } }



7) No Modo Source, acrescentar mais um PANEL dentro da tag <FORM></FORM>

<asp:Panel ID="panelBoleto" runat="server"> </asp:Panel>

8) Criar StoredProcedure para Somar Valor do Carrinho CREATE PROCEDURE sp_SomaCarrinho(IN pessoa INT) BEGIN SELECT SUM(TB_PRODUTO.TB_PRODUTOPRECO) AS TOTAL

FROM TB_CARRINHO INNER JOIN TB_PRODUTO ON TB_PRODUTO.TB_PRODUTOCODIGO = TB_CARRINHO.TB_PRODUTOCODIGO WHERE TB_CARRINHO.TB_PESSOACODIGO=pessoa;

END

9) Cria o método para Recuperar o Total da Compra que será utilizado na impressão do Boleto.

private double GetTotal(int codigo) { System.Data.IDbConnection conexao; System.Data.IDbCommand comando; System.Data.IDataReader reader; //ABRE A CONEXAO conexao = Mapped.Connection(Mapped.conexao.ServerExplorer); //COMANDO A SER EXECUTADO string storedprocedure = "sp_SomaCarrinho"; comando = Mapped.Command(storedprocedure, conexao); comando.CommandType = CommandType.StoredProcedure; //INPUT comando.Parameters.Add(Mapped.Parameter

("pessoa", codigo, DbType.Int32, ParameterDirection.Input)); //EXECUTA O COMANDO double total = 0; reader = comando.ExecuteReader(); //RECUPERA O TOTAL while (reader.Read()) { total = Convert.ToDouble(reader["TOTAL"]); } //FECHA CONEXAO reader.Close(); conexao.Close(); return total; }


10) Criar StoredProcedure para Finalizar a Compra

CREATE PROCEDURE sp_FinalizaCompra(IN codigo INT) BEGIN DECLARE ID_PRODUTO INT; DECLARE ID_COMPRA INT; DECLARE TOTAL DECIMAL(10,2); DECLARE NUMLINHAS INT; DECLARE CONT INT; DECLARE cc cursor for SELECT (TB_CARRINHO.TB_PRODUTOCODIGO) AS ID_PRODUTO

FROM TB_CARRINHO WHERE TB_CARRINHO.TB_PESSOACODIGO=codigo;

DECLARE tt cursor for SELECT SUM(TB_PRODUTO.TB_PRODUTOPRECO) AS TOTAL

FROM TB_CARRINHO INNER JOIN TB_PRODUTO ON TB_PRODUTO.TB_PRODUTOCODIGO = TB_CARRINHO.TB_PRODUTOCODIGO WHERE TB_CARRINHO.TB_PESSOACODIGO=codigo;

OPEN tt; FETCH tt into TOTAL; CLOSE tt; INSERT INTO TB_COMPRA

(TB_COMPRADATACADASTRO, TB_PESSOACODIGO, TB_COMPRAVALORTOTAL, TB_COMPRAFORMAPAGAMENTO)

VALUES (NOW(), codigo, TOTAL, 1); SET ID_COMPRA = LAST_INSERT_ID(); SET CONT = 1; OPEN cc; SELECT FOUND_ROWS() into NUMLINHAS; REPEAT FETCH cc INTO ID_PRODUTO; INSERT INTO TB_COMPRAITEM (TB_COMPRACODIGO, TB_PRODUTOCODIGO) VALUES(ID_COMPRA, ID_PRODUTO); SET CONT = CONT +1; UNTIL CONT > NUMLINHAS END REPEAT; CLOSE cc; DELETE FROM TB_CARRINHO WHERE TB_PESSOACODIGO=codigo; END

11) Criar método que Finaliza a Compra

private void Finaliza(int codigo) { System.Data.IDbConnection conexao; System.Data.IDbCommand comando; conexao = Mapped.Connection(Mapped.conexao.ServerExplorer); string storedprocedure = "sp_FinalizaCompra"; comando = Mapped.Command(storedprocedure, conexao); comando.CommandType = CommandType.StoredProcedure; comando.Parameters.Add(Mapped.Parameter

("codigo", codigo, DbType.Int32, ParameterDirection.Input)); comando.ExecuteNonQuery(); conexao.Close(); }


12) Criar método que Gera o Boleto

private void GerarBoleto (double valor, string nome, string end, string bairro, string cep, string estado, string cidade)

{ //Informa os dados do cedente string cpfcnpj = "59.323.998/0001-08"; string cedente = "FATEC GUARATINGUETÁ"; string agencia = "1250"; string agenciadigito = "5"; string conta = "26398"; string contadigito = "2"; //Dependendo da carteira, precisa do código do cedente (o banco que fornece) Cedente c = new Cedente

(cpfcnpj, cedente, agencia, agenciadigito, conta, contadigito); c.Codigo = 0806498; DateTime vencimento = DateTime.Now.AddDays(10); string carteira = "18"; string numeroboleto = "0000033320071"; Boleto b = new Boleto(vencimento, valor, carteira, numeroboleto, c); b.Carteira = "1"; b.NumeroDocumento = "B20005446"; b.ValorBoleto = valor; //Informa os dados do sacado b.Sacado = new Sacado("", nome); b.Sacado.Endereco.End = end; b.Sacado.Endereco.Bairro = bairro; b.Sacado.Endereco.Cidade = cidade; b.Sacado.Endereco.CEP = cep; b.Sacado.Endereco.UF = estado; string banco = "237"; Instrucao_Bradesco i5 = new Instrucao_Bradesco(Convert.ToInt32(banco)); i5.Descricao = "Não Receber após o vencimento"; b.Instrucoes.Add(i5); b.EspecieDocumento = new EspecieDocumento(237); BoletoBancario bb = new BoletoBancario(); bb.CodigoBanco = Convert.ToInt16(banco); bb.Boleto = b; bb.MostrarComprovanteEntrega = false; pnlDados.Visible=false; panelBoleto.Controls.Clear(); if (panelBoleto.Controls.Count == 0) { panelBoleto.Controls.Add(bb); } }

13) Edite o evento CLICK do Botão Gerar Boleto

int pessoa = Convert.ToInt32(Session["Codigo"]); GerarBoleto(GetTotal(pessoa),lblNome.Text,lblEndereco.Text + " " + lblNumero.Text + " " + lblComplemento.Text, lblBairro.Text, lblCEP.Text, lblEstado.Text, lblCidade.Text); Finaliza(pessoa);

14) EXECUTE A APLICAÇÃO


Desenvolvimento da Aplicação – Sair (Principal.aspx)

1) Voltar na página Principal.aspx para criar a opção de Sair da Aplicação. 2) Arraste um LinkButton

a. Text = Sair b. ID = lbSair c. Evento CLICK

Session.Abandon(); Session.Clear(); Session.RemoveAll();

Response.Redirect("Login.aspx");



Agradecimento

À FATEC de Guaratinguetá, agradeço pela oportunidade de ministrar este minicurso que visa complementar a formação dos alunos desta unidade de ensino.

Aos alunos, espero que tenham gostado e aproveitado o minicurso. Aproveito para dizer que o conteúdo aqui abordado não é nada diante da capacidade de desenvolvimento da plataforma .NET. Busquem a formação contínua. “EDUCATION is most powerful weapon which you can use to CHANGE THE WORLD.”

Nelson Mandela

Contato Luiz Eduardo Guarino de Vasconcelos E-mail: du dot guarino arroba gmail dot com Facebook: luizeduardo dot guarino Twitter: guarinaum