MAGAZINE

ECODE10

Edio 01/2011

ECODE10
12 de maro de 2011

MAGAZINE

Edio 01 Uma revista criada para te ajudar a desenvolver aplicativos, software e sites em geral.

Uma revista para cdigos nota 10 Magazine Web

URL Dinmica Trabalhando com ENUM Mtodo SHA1 Montando Detectando acesso Visual Studio 2010 Theme e Plugins Dicas para auto-completar

Estrutura MVC Parte 1

ECODE 10 MAGAZINE 12 de maro de 2011

Palavra do Editor
Caros leitores, com grande prazer que criamos a revista ECODE10 Magazine gratuita e com o objetivo de ajudar a desenvolver software, aplicativo, site e arquitetura de uma melhor forma. Essa a nossa primeira edio de muitas que viro daqui pra frente. Estamos com a idia de gerar uma revista nova a cada 30 dias, mas isso tudo depende de voc leitor e escritor. Precisamos de uma ajuda na publicao de artigos para a revista neste primeiro momento gratuitamente, e no futuro prximo pagaremos ao escritor por cada publicao. Porque criar uma revista? No vejo outra resposta que no seja ajudar e dar oportunidade aos desenvolvedores do mercado na publicao de artigos, vdeos, podcasts tendo o mesmo objetivo de ajudar a uma comunidade crescente de analistas e desenvolvedores no conhecer a linguagem, cdigo, metodologia e informaes. Essa revista ser destinada a todos que desejam publicar a sua tecnologia sem qualquer restrio de O endereo oficial da revista ser www.ecode10.com/magazine e com grandes possibilidades de parceria em divulgao da sua empresa, site, servio ou loja.

linguagem ou plataforma. Se voc A revista ser publicada apenas uma dessas pessoas com desejo de online neste primeiro momento e publicar, entre em contato conosco diretamente no site pelo e-mail contato@ecode10.com www.ecode10.com em parceria com o colocando no assunto o seguinte site da comunidade www.aspneti.com ttulo: Publicar artigo - Magazine.

Mauricio Junior, 28 anos, autor de 7 livros publicados na editora Cincia Moderna (Rio de Janeiro), certificado Microsoft (MCP, MCAD, MVP), autor de podcasts, vdeos, artigos em vrios sites. Site pessoal www.mauriciojunior.org e blog.mauriciojunior.org.
ECODE 10 Magazine

ECODE10 MAGAZINE 12 de maro de 2011

URL Dinmica Criando URL dinmica facilmente para indexao

Requisitos: Ferramenta de Desenvolvimento: Visual Studio.NET 2008 SP 1 Framework: .NET 3.5 Tipo de Aplicativo: Web Site Nvel de Conhecimento: Avanado Objetivo: O meu objetivo mostrar a voc leitor, como desenvolver um site com uma url mais amigvel, facilidade de indexao em site de busca, melhor maneira de o usurio entrar diretamente no site e isso tudo dinamicamente. Por exemplo: uma url de notcia do meu site www.meusite.com.br/noticia.aspx?id=12 car da seguinte maneira; www.meusite.com.br/noticia/12/titulo-danoticia.aspx Exemplo: O exemplo mostrado no texto real e simples de entender, basta ter um pouco de conhecimento na ferramenta de desenvolvimento e programao. Para voc que est comeando agora, o desao para entender e fazer o exemplo. As imagens so reais, tente seguir passo a passo. Desenvolvimento Efetivo Referncia: 1.2

Referncia: 1.1 O primeiro passo foi criar um projeto na ferramenta Visual Studio.NET 2008 do tipo Web Site. Adicionei um novo item, uma pgina chamada Noticia.aspx, adicionei tambm um outro item essencial Global.asax. (Referncia 1.2)

O primeiro passo depois de adicionar os itens (clicando com o boto direito em cima do projeto e escolhendo Add New Item...), devo customizar e denir o arquivo Noticia.aspx, depois acrescentarei um novo mtodo dentro do arquivo Global.asax. O primeiro passo depois de adicionar os itens (clicando com o boto direito em cima do projeto e escolhendo Add New Item...), devo customizar e denir o arquivo Noticia.aspx, depois acrescentarei um novo mtodo dentro do arquivo Global.asax. Customizando a Pgina Noticia.aspx Cliquei duas vezes em cima da pgina Noticia.aspx que, abriu o arquivo Noticia.aspx.cs, dentro do mtodo Page_Load. Acrescentei duas linhas de cdigo. (Table 1.1) protected void Page_Load(object sender, EventArgs e) { string id = Request["id"].ToString(); Response.Write(id); } Table 1.1 Note que declarei uma varivel chamada id do tipo string. O comando Request[id].ToString() pega o valor passado via request para a pgina. O passo seguinte foi escrever a minha varivel na tela (Response.Write(id)).

ECODE 10 MAGAZINE

Todo esse passo foi apenas para pegar o id passado pela notcia. Customizando Global.asax O primeiro passo que z junto ao arquivo Global foi criar outro mtodo chamado Application_BeginRequest (Object sender, EventArgs e). (Referncia 1.3)

Referncia: 1.3 Ignorei os passos e os casos, pois podem ter urls que no usam esse tipo de expresso. Verico se existe alguma url com esse formato para poder pegar os prximos dados. O comando incoming redireciona para a pgina correta passando o id para pegar o dado / chave da notcia.

Referncia: 1.4 Executando o projeto, coloquei o /noticia/2/titulonoticia.aspx, note que automaticamente apareceu o nmero da notcia, a chave para buscar no banco de dados e preencher algum objeto de tela como: datagrid, datalist ou mesmo um label. Dessa maneira, mais fcil sites de buscar indexarem as urls. Caso coloque outra url como /teste.aspx, no passar pela validao, o mesmo buscar a prpria pgina teste.aspx. Bom, co por aqui. Qualquer dvida, favor entrar em contato. Poderei ajudar.

ECODE 10 MAGAZINE 12 de maro de 2011

Trabalhando ENUM
Ol pessoal, hoje eu gostaria de falar um pouco sobre ENUM mostrando a maneira de us-lo no projeto. No artigo anterior eu falei sobre a padronizao de status e situao onde a utilizao foi de constantes com string. O ENUM funciona quase da mesma forma, s que declarado de maneira diferente. O cdigo simples e tranqilo de fazer, isso porque o CSharp e a ferramenta Visual Studio.NET nos ajuda de maneira surpreendente. O cdigo 1.1 pode ser feito em qualquer verso da ferramenta. public enum Situacao { Disponivel, EmProcessamento } Code 1.1 Note que, foi declarado um public enum com o nome Situacao com duas opes: Disponivel e EmProcessamento separados por vrgula. Essa declarao foi feita logo depois do namespace, ou seja, antes de declarar a classe criada. namespace WebApplication1 { public enum Situacao { Disponivel, EmProcessamento } ... Code 1.2 Para fazer a vericao, basta declarar uma varivel e criar uma condio especial. Veja no Code 1.3 Situacao segunad = Situacao.Disponivel; if (segunad == Situacao.Disponivel) Response.Write("teste ok"); else Response.Write("teste noOk"); Code 1.3 Lgico que este exemplo simples, porm uma maneira de te mostrar como funciona com o termo condicional (if). Outro exemplo importante como utilizar o Enum com nmeros. Veja o Code 1.4. public enum Days { Segunda = 1, Terca = 2, Quarta=3, Quinta=4, Sexta=5, Sabado=6, Domingo=7 } Code 1.4 Note que foi colocado um valor do tipo numrico na frente de cada dia. Esse valor precisa ser vericado. Veja no Code 1.5. int dia = (int)Days.Domingo; if (dia == 8) Response.Write(Days.Domingo); else Response.Write(Days.Segunda); Code 1.5 Primeiro de tudo, criei uma varivel chamada dia fazendo um cast para o tipo (int). Por isso existe o (int) Days.Domingo. Veriquei se aquele dia igual a 8 (podendo ser uma outra varivel vinda do banco de dados por exemplo). O exemplo tambm simples, mas mostra como trabalhar com ENUM do tipo numrico. Espero ter ajudado a todos, e qualquer dvida pode entrar em contato pelo site. Abraos.

ECODE 10 MAGAZINE 12 de maro de 2011

Mtodo SHA 1
Caro Leitor, gostaria de falar hoje sobre a melhor forma de trabalhar com SHA1. O SHA1 outra maneira de criptografar dados, usada numa grande variedade de aplicaes e protocolos de segurana, incluindo TLS, SSL, PGP, SSH e outros. Referncia: Ferramenta: Visual Studio .NET Linguagem: C#.NET Plataforma: Qualquer tipo de plataforma pode ser usado o que ser escrito no artigo. Importe necessrio fazer dois importes na classe antes de codicar o mtodo responsvel. So os famosos using dentro da classe .cs. Code 1.1 using System.Security.Cryptography; using System.Text; Referncia: Code 1.1 O segundo passo criar um mtodo responsvel pela criptograa. Lembrando que, use toda vez que puder dados criptografados no banco de dados. A vericao dos dados a comparao entre o que est no banco com o que o usurio digitou na tela. Nunca coloque no select a vericao. Explicando melhor, primeiro busque os dados do usurio do banco de dados, criptografa a senha que ele digitou na tela e compare se os dados so iguais. private static string GetSHA1(string strPlain) { UnicodeEncoding UE = new UnicodeEncoding(); byte[] HashValue, MessageBytes = UE.GetBytes(strPlain); SHA1Managed SHhash = new SHA1Managed(); string strHex = ""; HashValue = SHhash.ComputeHash (MessageBytes); foreach (byte b in HashValue) { strHex += String.Format("{0:x2}", b); } return strHex; } Code 1.2 O mtodo pblico, esttico, retorna uma string e recebe uma string de valor. Depois utilizo o Unicode, transformo os dados em array de bytes, utilizo o SHA1Magaged e fao o for com os dados. No nal retorno a string criptografada. No nada difcil ter seus dados criptografados, mantendo mais segurana em seu aplicativo.

ECODE 10 MAGAZINE 12 de maro de 2011

Montando estrutura de um site MVC 2 com Visual Studio .NET 2010

Hoje vou falar de como montar e entender o seu primeiro ambiente utilizando o novo Visual Studio .NET 2010 com MVC. O ambiente WEB funciona muito bem e s precisa prestar ateno em alguns detalhes. Referncia: Ferramenta: Visual Studio .NET 2010 Linguagem: C#.NET Plataforma: Web Arquitetura: MVC Framework: 4.0 Todo artigo foi testado e a cada exemplo uma gura mostrada para melhor entendimento e visualizao. O primeiro passo criar um projeto do tipo MVC 2, como mostrado na gura de referncia. (Figura 1)

Referncia: Figura 2 Como falado anteriormente, a estrutura foi montada automaticamente pela ferramenta, com as pastas e o estilo. Note que existe a pasta View, Model, Controller e outras. As mais importantes para fazer o seu aplicativo funcionar so: View, Model e Controller tirando os arquivos de congurao. A pasta Content responsvel pelo estilo do site, imagens e outros arquivos sobre layout. Lgico que a pasta Theme pode ser criada como na ferramenta anterior, Visual Studio .NET 2008 por exemplo. A pasta Script possui todos os scripts utilizados na aplicao web, estes scripts geralmente so utilizados para jquery ou funes javascript da tela. Web.Congs Existentes No posso deixar de falar sobre os arquivos de congurao destinados para desenvolvimento e produo. Pelo menos este o nome que dou para o debug e o release que vem na ferramenta. Agora cou mais fcil colocar uma string de desenvolvimento e outra do banco de dados de produo. Eu expliquei isso em um dos vdeos postados no site da comunidade ECODE10.COM. (www.ecode10.com/ videos+0,5.aspx). Qualquer dvida, pode recorrer ao link anterior. Views Dentro da pasta View se encontra as pginas .aspx como as antigas usando a ferramenta Visual Studio .NET 2008. Figura 3.

Referncia: Figura 1 Note que a gura 1 mostra a seleo em amarelo para o projeto ASP.NET MVC 2 Web Application. D um nome para o projeto e clique no boto OK. Toda estrutura montada automaticamente pela ferramenta, facilitando a sua vida como desenvolvedor WEB. Gostaria de lembrar que, a linguagem uma opo importante, C#.NET, VB.NET, F# e C++; qualquer uma dessas opes podem ser escolhidas pois agora no importa a linguagem que vai programar, o importante a soluo criada. As linguagens e projetos podem se comunicar sem qualquer problema. Estrutura montada

ECODE 10 MAGAZINE 12 de maro de 2011

Deixei selecionado a master page e coloquei o nome no campo (View name) de Contato. Apenas Contato, automaticamente a extenso do arquivo colocada, ou seja, o .aspx. Pronto, a pgina Contato.aspx foi criada com sucesso. Agora eu preciso ir aba Controller e adicionar um ActionResult da pgina. Como falado anteriormente, adicionei a View (entenda como pgina) dentro da pasta Home. Dessa forma, o arquivo HomeController.cs precisa ser adicionado um mtodo que chama a View de contato. (Figura 6)

Referncia: Figura 3 Dentro de cada pasta, a View o caminho do seu projeto. Por exemplo: http://seu_site.com.br/artigo ou http://seu_site.com.br/home busca diretamente dentro da pasta View e em seguida procura o arquivo dentro da outra pasta. Como exemplo, eu quero colocar uma pgina de contato dentro da pasta Home do meu site. Dessa forma, caria assim: http://meu_site.com.br/home/contato automaticamente a pgina iria abrir sem qualquer extenso. Vou mostrar como montar esta pgina na prtica. Na Prtica adicionando View O primeiro passo foi clicar com o boto direito em cima da pasta Home, escolher Add e depois View. Pois agora o meu trabalho com MVC 2 sempre com View. Figura 4.

Referncia: Figura 6 Note que o ltimo mtodo do arquivo HomeController.cs est escrito. public ActionResult Contato() { return View(); } Referncia: Code 1.

Referncia: Figura 4 Apareceu outra tela para adicionar o nome e escolher o tipo. Figura 5.

retornado apenas uma View() e o nome dela o mesmo nome da pgina criada dentro da pasta View, lembra? Esse public ActionResult Contato() e esse contato o nome da pgina / view criada. At agora tudo bem, vou coloc-la para ser clicada no menu e visualizada. Acessei a pasta Views, depois Shared e depois a pgina Site.Master. Code 2.

Referncia: Figura 5

ECODE 10 MAGAZINE 12 de maro de 2011

<div id="menucontainer"> <ul id="menu"> <li><%: Html.ActionLink("Home", "Index", "Home")%></li> <li><%: Html.ActionLink("Contato", "Contato", "Home")%></li> <li><%: Html.ActionLink("About", "About", "Home")%></li> <li><%: Html.ActionLink("Artigo", "Index", "Artigo")%></li> </ul> </div> Referncia: Code 2 Adicionei no segundo <li> um ActionLink para a pgina contato. O primeiro parmetro Contato o text que vai aparecer na tela. O segundo o ActionName que no meu caso coloquei Contato. Para nalizar, o terceiro parmetro o RouterValues; ou seja, o nome da pasta que a pgina est localizada. Como falado anteriormente, dentro da pasta Views / Home / Contato.aspx. Home a pasta! O passo seguinte foi descrever qualquer coisa dentro da View Contato.aspx e clicar em F5 para iniciar o projeto. Figura 7.

Referncia: Figura 7 Veja como cou o endereo em cima do link da pgina. No aparece extenso alguma. E o ActionLink apareceu na parte de menu depois do link Home. O prximo passo criar um formulrio que manda e-mail dentro da View Contato.aspx. S que para no car muito extenso, farei no outro artigo que publico ainda esta semana. Abrao a todos e qualquer dvida, pode entrar em contato.

ECODE 10 MAGAZINE 12 de maro de 2011

Aplicativo Mvel - Pases

Conhea um pouco mais sobre os pases do mundo usando esse aplicativo. Pode ser baixado gratuitamente na Apple Store dentro do iTunes. Saiba a moeda, lngua e capital de forma fcil e brincando! http://itunes.apple.com/br/app/paises/id408259518?mt=8

ECODE 10 MAGAZINE 12 de maro de 2011

Detectando Browser Mobile

Depois coloquei no Page_Load outro cdigo responsvel pela deteco. (Code 1.2) protected void Page_Load(object sender, EventArgs e) { HttpBrowserCapabilities hbc = Request.Browser; if (((HttpCapabilitiesBase)hbc).IsMobileDevice) { Response.Write("O acesso est sendo via mobile"); } else { Response.Write("O acesso no mobile"); } } Code 1.2 A primeira linha de cdigo pegar dados do browser com Request.Browser. Depois veriquei com o if se a capacidade dele mobile com o IsMobileDevice. Se for ele exibe a mensagem falando que o acesso via mobile, seno o acesso no mobile. Espero ter ajudado e qualquer dvida pode entrar em contato.

Caro Leitor, o mundo mobile vem crescendo todo o dia, novos aparelhos, novos recursos e novos sistemas. Quero mostrar algumas linhas de cdigo que detectam se o dispositivo que est acessando o seu sistema mobile ou no. O site ter capacidade de detectar de forma automtica e alterar o estilo para adaptao mobile. O que usei: Linguagem C#.NET Framework 4.0 Plataforma: ASP.NET Como sempre, o cdigo simples e fcil. No vou mostrar como criar um projeto do tipo web, nem mesmo mostrar como criar uma pgina. Deixo isso para outros artigos j publicados no site. Depois de ter criado a pgina default.aspx e tendo como cdigo fonte o arquivo default.aspx.cs, cliquei duas vezes e coloquei o seguinte using.

using System; using System.Web; using System.Web.Conguration; Code 1.1

ECODE 10 MAGAZINE 12 de maro de 2011

Visual Studio .NET 2010 com Temas e Plugins

Ol pessoal, gostaria de mostrar hoje como mudar o tema da ferramenta de desenvolvimento Visual Studio.NET 2010. A nova ferramenta possui plugins para serem instalados e um deles o Theme que muda a cor ou todo tema azul existente na tela da ferramenta. necessrio: -Visual Studio .NET 2010 - Acesso a internet - Extensions Imagem 1.2 Ao clicar na opo, aparece uma tela automaticamente listando todas os plugins disponveis ou instalados. Do lado esquerdo, existem as opes para esolha, dividido em itens. (Imagem 1.3)

Imagem 1.3 Na opo Installed Extensions, mostra todas instaladas na mquina. A imagem 1.4 mostra o que tem instalado. Imagem 1.1 Tela mostrada ao abrir a ferramenta de desenvolvimento. No menu Tools, existe uma opo chamada Extensions Manager, novo na ferramenta e na verso 2008 no existe esta opo. (Imagem 1.2)

Imagem 1.4 Depois de escolher um plugin, o boto install aparece e em poucos segundos a mensagem para reininciar o aplicativo mostrada. Depois de reininciar, dependendo do plugin escolhido j aparece na barra de ferramentas. Foi escolhido o Theme que pode mudar cores e opes. (Imagem 1.5)

ECODE 10 MAGAZINE 12 de maro de 2011

Imagem 1.5 Ao selecionar qualquer opo da imagem 1.5, automaticamente aparece novas cores e temas da ferramenta. Navegando dentre os plugins, percebi que alguns fazem download dentro da prpria ferramenta e outros redirecionam para sites. Tive a preferncia daqueles que no redirecionam, me pareceu meio complicado fazer a instalao. Existem muitos plugins disponveis e gratuitos para download dentro da ferramenta. Fico por aqui e espero que tenha gostado, qualquer dvida pode entrar em contato

ECODE 10 MAGAZINE 12 de maro de 2011

Dica para Auto Completar Cdigo

Ol pessoal, hoje gostaria mostrar algumas dicas especiais para escrever cdigo de desenvolvimento mais rpido. Cdigo feito na ferramenta Visual Studio .NET, alguns podem ser feitos na verso 2008 e outras na verso 2010. Essas dicas so importantes porque te ajuda no desenvolvimento de cada aplicativo. Na prtica Primeira Dica Para gerar propriedades get e set, basta escrever prop e clicar tab tab. Duas vezes a tecla tab. Depois basta colocar o tipo da varivel (int, string e outros). Para dar o nome, basta clicar mais uma vez tab e digitar o nome da varivel (Author, Nome, Descricao ou outros).

Quarta Dica Qualquer campo que quiser colocar, que seja do tipo .NET, cou simples tambm. Basta digitar o nome do componente e clicar tab. Por exemplo: ao digitar textbox e clicar tab uma vez, o campo j montado automaticamente.

<asp:TextBox runat="server" /> public int MyProperty { get; set; } Cdigo 1 Segunda Dica Para colocar o try e catch, basta digitar a palavra try e clicar tab tab. Da mesma forma que o anterior, ou seja, clicar a tecla tab duas vezes. Automaticamente ser gerado o bloco. try { } catch (Exception) { throw; } Cdigo 2 Terceira Dica Na parte HTML do Visual Studio .NET 2010 existe tambm o auto-complete, mesmo que seja somente HTML. Por exemplo: Se voc digita a palavra input e clicar tab tab, duas vezes a tecla tab ele j cria o campo automaticamente. Depois basta clicar outro tab para informar o tipo e outro para informar o nome. <input type="type" name="name" value=" " /> Cdigo 3 Cdigo 4 Se eu digitar checkboxlist a ferramenta j monta pra mim toda a lista com duas opes.

<asp:TextBox runat="server" /> Cdigo 4 Se eu digitar checkboxlist a ferramenta j monta pra mim toda a lista com duas opes.

<asp:CheckBoxList runat="server"> <asp:ListItem Text="text1" /> <asp:ListItem Text="text2" /> </asp:CheckBoxList> Cdigo 5 O listbox funciona da mesma forma. <asp:ListBox runat="server"> <asp:ListItem Text="text1" /> <asp:ListItem Text="text2" /> </asp:ListBox> Cdigo 6 Para o validation funciona da mesma maneira. Espero que tenha gostado.

Quer escrever artigo? Quer ser um patrocinador? Ento entre em contato pelo e-mail. No futuro breve esta revista ser vista dentro dos Tablets como: Galax S e iPad.