Este é o quarto artigo de uma série onde desenvolveremos um aplicativo Web em C# .NET usando banco de dados MySQL, nessa etapa iremos criar as páginas que cadastra e lista os produtos, e cadastra categoria para produto e listar estas categorias.
Página ListarProdutos
Abra o seu projeto Ecommerce, vá ao Solution Explorer procure o diretório Produto, adicione uma página Web Form com o nome ListarProdutos.
Ainda no Solution Explorer, clique com o botão direito na página ListarProdutos, e clique em Set as Start Page.
No Modo Design da página, vá ao ToolBox, adicione um componente GridView. Clique na seta do GridView, em Choose Data Source, clique em , conforme a figura a seguir:
Será exibida a janela Data Source Configuration Wizard, clique na primeira opção Database, o assistente irá mostrar um nome para o componente SqlDataSource, clique em OK. Veja a figura:
A janela Configure Data Source será exibida, na primeira etapa escolha a conexão e clique em next.
Na segunda etapa, marque a opção Specify a custom SQL statement or stored procedure, e clique em next.
Na terceira etapa, na guia SELECT, copie o código a seguir:
SELECT * FROM PRODUTO ORDER BY TITULO;
Clique em next. Na quarta etapa clique no botão Test Query, como o banco não possuí registros, será apenas exibida o nome das colunas, clique em Finish para encerrar o assistente.
O gridview ficará conforme a figura a seguir:
Depois clique no gridview, clique na seta a direita, no menu clique em Auto Format, na janela Auto Format, selecione o scheme Professional e clique em OK.
Vá ao ToolBox, adicione um Link Button. Clique no novo componente, altere a propriedade Text para Cadastrar e ID para lbCadastrar. Clique duas vezes sobre o Link Button, será criado o método Click, copie o código a seguir:
protected void lbCadastrar_Click(object sender, EventArgs e)
{
Response.Redirect("CadastrarProdutos.aspx");
}
Veja a figura a seguir como deve estar a sua página:
Vá ao Solution Explorer, clique com o botão direito em ListarProdutos.aspx, no menu clique em Set As Start Page. Execute a aplicação.
Página CadastrarProdutos
Vá ao Solution Explorer procure o diretório Produto, adicione uma página Web Form com o nome CadastrarProdutos.
No modo Design, vá ao ToolBox, adicione um componente Table, vá ao Painel Propriedades, procure por Rows, e clique no botão reticências conforme a figura a seguir:
Será exibida a janela TableRow Collection Editor, clique no botão Add para adicionar a TableRow 0. Do lado direito, procure por Cells, e clique no botão reticências, conforme a figura a seguir:
Será exibida a janela TableCell Collection Editor, clique no botão add para adicionar a TableCell 0, do lado direito procure pela propriedade Text e digite Cadastro de Produto, e clique em OK.
De volta a janela TableRow Collection Editor, clique no botão add para adciionar a TableRow 1, vá ao lado direito e procure por Cells, e clique no botão reticências.
Na janela TableCell Collection Editor, clique no botão add para adicionar a TableCell 0, do lado direito procure pela propriedade Text e digite Titulo.
Clique novamente no botão add para adicionar a TableCell 1, apenas adicione a linha e clique em OK.
Veja que a sua tabela tem duas linhas, a primeira é o cabeçalho Cadastro de Produto, a segunda linha tem duas colunas, a primeira está o campo Titulo e a segunda mostra três cerquilhas indicando que aquela célula ainda não tem conteúdo, nessas células terão outros componentes que serão adicionados depois de terminamos a edição da tablea.
Adicione a TableRow 2, vá ao lado direito e procure por Cells, e clique no botão reticências. Adicione duas TableCell, na primeira, vá ao lado direito e altere a propriedade Text para Descrição, na segunda nada será feito, e clique em OK.
Adicione a TableRow 3. Adicione duas TableCell, na primeira, vá ao lado direito e altere a propriedade Text para Preço, na segunda nada será feito, e clique em OK.
Adicione a TableRow 4. Adicione duas TableCell, na primeira, vá ao lado direito e altere a propriedade Text para Foto, na segunda nada será feito, e clique em OK.
Adicione a TableRow 5. Adicione uma TableCell, e clique em OK.
Adicione a TableRow 6. Adicione uma TableCell, e clique em OK.
Agora a sua tabela tem 7 linhas, clique no botão OK na janela TableRows Collection Editor para fechá-la. Veja a figura a seguir como deve estar a sua tabela:
Agora clique duas vezes na tabela, o código dela será exibido, veja a figura a seguir como está o código:
Precisamos adicionar os componentes TextBox, FileUpload e Button na tabela, observe a figura a seguir e altere as linhas 19, 23, 27, 31, 34 e 37:
Agora voltando ao Modo Design, sua tabela está conforme a figura a seguir:
Para prosseguir, precisamos criar uma Stored Procedure para inserção do produto no banco de dados.
Vá ao Menu View e clique em Server Exlorer, o painel será exibido no lado esquerdo, expanda Data Connections, abra a conexão referente ao ecommerce.
Clique com o botão direito em Stored Procedures, clique em Create Stored Procedure. Copie o código a seguir:
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 PRODUTO (TITULO, DESCRICAO, PRECO, FOTO)
VALUES (titulo, descricao, preco, foto);
SELECT LAST_INSERT_ID() INTO codigo;
END
Clique no salvar que o Visual Studio se encarregará de executar o comando. Feito isso a stored procedure será exibida conforme a figura a seguir:
Agora podemos prosseguir a implementação, vá ao Solution Explorer, abra o Web.config.
Procure a tag Configuration, e insira a tag App Settings, e suas duas keys, conforme a figura a seguir:
Observe dois pontos importantes, a porta da key URLSite precisa ser a mesma que aparece na barra de endereços quando a aplicação é executada e a key PathSite precisa ter o caminho da pasta WebSite que contém o seu projeto.
Agora vá a Página CadastrarProdutos.aspx, clique duas vezes em uma área em branco fora da tag Body. A classe CadastrarProdutos.aspx.cs será exibida mostrando o código.
Adicione a cláusulas Using System.IO e Using System.Configuration no topo da classe junto com as demais que foram adicionadas automaticamente.
Copie o código a seguir para adicionar o método VerificarExtensaoPermitida:
//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;
}
Copie o código a seguir para adicionar o método Upload:
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;
}
Copie o código a seguir para adicionar o método Cadastrar:
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());
}
}
Copie o código a seguir para o método click do botão Salvar:
protected void btnSalvar_Click(object sender, EventArgs e)
{
Cadastrar();
}
A página CadastrarProdutos.aspx está pronta, agora vamos fazer algumas alterações na página ListarProdutos.aspx, vá ao Solution Explorer e abra-a.
Exibindo fotos na página ListarProdutos
Com a página ListarProdutos.aspx sendo exibida no Modo Design, clique duas vezes em uma área em branco para exibir o código fonte.
Com o código sendo exibido, adicione as cláusulas Using System.IO e Using System.Configuration.
Copie o código a seguir referente ao método responsável em transformar 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;
}
Agora volte ao Modo Design, clique no GridView, vá ao Painel de Propriedades, acesse a guia Events, clique duas vezes em RowDataBound, conforme a figura a seguir:
Copie o código a seguir referente ao método RowDataBound do gridView:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
string foto = (Convert.ToString(DataBinder.Eval(e.Row.DataItem, "FOTO")));
if (foto != string.Empty)
{
if (File.Exists(foto))
{
string img = PathAbsolute2PathRelative(foto);
e.Row.Cells[3].Text = "<img src='" + img + "' width='80px'>";
}
}
}
}
Agora volte ao Modo Design, clique no Grid View, vá ao Modo Source, o código referente ao Grid View será exibido, remova a seguinte linha:
<asp:BoundField DataField="CODIGO" HeaderText="CODIGO" ReadOnly="True" SortExpression="CODIGO" />
Isso fará com que a coluna código não seja exibida no GridView, volte ao Modo Design, e ainda com o Grid selecionado, clique na seta e clique em Edit Columns, conforme a figura a seguir:
Será exibida a janela Fields, em Availabels Fields, clique em Preco, e em Selected Fields, clique em Preco, do lado direito será exibida as propriedades do campo Preco, procure por DataFormatString, e adicione "{0:c}", conforme a figura a seguir:
Clique em OK, a coluna preço do seu GridView exibirá valores monetários. Com o GridView selecionado, clique na seta, e marque Enable Sorting.
Pronto, agora a página ListarProdutos exibe fotos e os preços monetários dos produtos. Próximo passo é cadastrar as categorias dos Produtos. Até mais.