ASP .NET - Simplesmente YouTube I

Creio que todos conhecem o YouTube, pelo menos os que vivem no planeta Terra. Então responda rápido: Quais as funcionalidades principais do YouTube ?

Postar e visualizar vídeos ! Certo ???

Pois neste artigo eu vou mostrar como você pode criar um site com as mesmas funcionalidades, ao estilo YouTube.

Não, não vou usar nenhuma ferramenta ou recursos avançados, vou criar um site ao estilo YouTube, usando apenas o Visual Web Developer 2008 Express Edition e o SQL Server 2005 Express Edition.

Ninguém vai precisar ser especialista para acompanhar o artigo. Vou mostrar que usando as funcionalidades básicas podemos criar projetos interessantes, funcionais e com agilidade.

Você duvida ???  Quer pagar para ver ????

Então acompanhe o artigo.... (As vídeo aulas deste artigo estão no Super DVD Vídeo Aulas)

Definindo as tarefas básicas do nosso site ao estilo YouTube

Vamos definir as tarefas que teremos que realizar para ver o nosso YouTube funcionando:

Nada muito complicado, não é mesmo !!!  Então vamos começar...

Criando um web site para o nosso YouTube

Abra o Visual Web Developer 2008 Express Edition e no menu File opção New web Site selecione o template ASP .NET Web Site, usando a linguagem Visual Basic e a localização FIle System com o nome : YouTube;

Antes de prosseguir exclua a página Default.aspx que foi criada por padrão pois mais a frente iremos recriá-la usando uma Master Page.

Vamos agora criar o banco de dados que será usado no web site. Clique com o botão direito sobre o nome do projeto e selecione a opção Add New Item;

A seguir selecione o template SQL Server DataBase e informe o nome YouTube.mdf e clique em Add;

Será solicita a confirmação para salvar o arquivo na pasta App_Data, confirme.

Na janela DataBase Explorer selecione o banco de dados criado e expanda os objetos. A seguir clique com o botão direito sobre o objeto Table e selecione a opção Add New Table e defina uma tabela com o nome Videos com a estrutura conforme exibida na imagem abaixo.

Note que o campo id é uma chave primária do tipo Identity.

Uma chave primária (Primary Key) em um banco de dados relacional é uma coluna ou combinação de colunas que sempre contém valores únicos. O conhecimento do valor da chave primária permite que você localize uma linha (registro) no banco de dados de forma rápida e segura.

Os bancos de dados relacionais como o  SQL Server , Microsoft Access, Oracle, etc. suportam a criação de colunas com incremento automático (colunas do tipo auto incremental); esses valores são gerados automaticamente pelo servidor de banco de dados quando uma nova linha (registro) for incluída na tabela.

Para ativar este recurso no SQL Server você define a propriedade identity para a coluna; (no Microsoft Access você selecione a coluna como do tipo AutoNumber(Auto-Numeração).)

Observe também o campo video que é do tipo varbinary(MAX) e que irá armazenar os vídeos postados pelos usuários. O tipo varbinary(MAX)  é equivalante ao tipo IMAGE usado nas versões anteriores do SQL Server. Ele existe ainda por uma questão de compatibilidade mas não aconselho que seja usado por isso usamos o novo tipo varbinary(MAX).

Os novos tipos  de dados VARCHAR(MAX), NVARCHAR(MAX) e VARBINARY(MAX) substituem respectivamens os tipos TEXT, NTEXT and IMAGE que serão removidos em verões futuras. Por isso prefira usar VARBINARY(MAX) em seus projetos para armazenar dados binários.

Existem vantagens e desvantagens em armazenar os vídeos no banco de dados. A principal vantagem é a facilidade de manutenção e tratamento uma desvantagem é o espaço que será usado no banco de dados.

Também foi criado um campo mimetype, que irá armazenar o tipo do arquivo armazenado no Banco de Dados, uma vez que o usuário poderá fazer upload de arquivos .AVI e .WMV.

MIME significa Multi-Purpose Internet Mail Extensions e tipos MIME, são uma forma padrão de classificação dos tipos de arquivo na Internet. Programas de Internet, tais como servidores Web e navegadores têm uma lista dos tipos MIME, de modo que eles podem transferir arquivos do mesmo tipo na mesma maneira, não importa qual sistema operacional que estão usando.

Um tipo MIME tem duas partes: um tipo e um subtipo. Eles estão separados por uma barra (/). Por exemplo, o tipo de MIME para arquivos do Microsoft Word é a aplicação e o subtipo é MSWord. Juntos, o tipo de MIME completo é application / msword.

Veja também estas referências:

Criando um DataSet Tipado

Como já temos o banco de dados e a tabela criados vamos agora criar um dataset tipado que irá permitir gerenciar os dados efetuando consulta e atualizações.

Clique com o botão direito sobre a solução ou no menu WebSite selecione Add New Item e a seguir selecione o template DataSet informando o nome Videos.xsd e clicando no botão Add;

Abra a janela DataBase Explorer e expanda a tabela Videos. Agora arraste a tabela para o descritor dataset de forma a criar o DataTable e TableAdapter para a tabela Videos.

Se você selecionar o método GetData() do TableAdapter, clicar com o botão direito do mouse e selecionar Configure. Irá visualizar a consulta SQL usada para retornar os registros da tabela Videos:

Clicando no botão Advanced Options veremos as configurações definidas para gerar os comandos para inserir, atualizar e excluir informações.

Pronto, já temos o nosso dataset tipado criado e com uma consulta que retorna todos os registros da tabela Videos

Definindo a identidade visual do site: Master Pages

Usando Master Pages é possível criar uma página padrão que poderá ser utilizada por você em todo o seu site na web. Usando herança visual podemos definir um página, a Master Pages, como modelo , e, as demais páginas criadas podem herdar a aparência visual da Master Page.

Pode parecer simples mas facilita muito o trabalho de desenvolvimento e manutenção pois qualquer alteração feita na Master Pages se reflete nas demais páginas que herdaram seu comportamento.

Para criar uma Master Page você pode usar o Visual Studio , o Visual Web Developer 2008 (VWD) ou mesmo fazer a declaração na diretiva da página via código. Pode também fazer a definição no arquivo Web.config de forma que todas as páginas já tenham uma Master Page definida.

Cclique com o botão direito na solução e selecione a opção Add New Item. Na janela Add New Item selecione o template Master Page , informe o nome Mestre.master clique em Add.

Agora que temos uma master page vamos definir um leiaute básico relacionado ao nosso tema que é postar e exibir vídeos. Eu achei na web um leiaute de página gratuito muito simples e adequado ao nosso caso e resolvi adotá-lo como leiaute do nosso YouTube mas você pode alterar o leiaute ao seu gosto. Veja abaixo como ficará a nossa Master Page Mestre.master :

Agora vamos definir as demais funcionalidade onde a partir de agora todas as páginas que usarmos irão herdar dessa master page.

Implementando a página para autenticação do usuário : Login

Agora vamos definir a página Default.aspx como sendo a nossa página principal e que apresentará a tela de login para identificação e autenticação do usuário. Dessa somente usuários cadastrados poderão postar e assistir vídeos.

Clique com o botão direito na solução e escolha a opção Add New Item. Inclua um novo Web Form no seu projeto com o nome Default.aspx, e,  marcando a opção Select Master Page;

Com a página selecionada ative a guia Design. Arraste agora o controle Login da caixa de ferramentas para a página no interior do ContentPlaceHolder. O controle irá criar um formulário solicitando o nome e senha do usuário, conforme figura abaixo. Clique em Auto Format... e defina as cores do controle para a tonalidade vermelha. Com isto alteramos o visual do formulário de login.

Selecione o componente de Login e na janela de propriedades altere os textos das mensagens para Português e defina as seguintes propriedades:

DestinationPageUrl = ~/Videos.aspx

Se o login for bem sucedido iremos para a página Video.aspx

FailureAction = Refresh

Se o login falhar a página sofrerá um refresh

CreateUserUrl= ~/NovoUsuario.aspx

Se o usuário clicar no link Novo Usuário será direcionado para página NovoUsuário.aspx

Vamos criar as páginas Video.aspx e NovoUsuario.aspx. Clique na solução com o botão direito do mouse e selecione a opção Add New Item;

Na janela template selecione Web Form e informe o nome NovoUsuario.aspx. Marque a opção Select Master Page clique em Add e na página seguinte selecione a nossa Master Page Mestre.master e clique em OK;

A partir da ToolBox selecione a guia Login e arraste e solte o controle CreateUserWizard na página NovoUsuario.aspx conforme a figura abaixo:

Selecione o controle inserido na página e na janela de propriedade altere os textos das mensagens para português e define as seguintes propriedades:

CancelDestinationPageUrl = ~/Default.aspx

Se houver um cancelamento o usuário voltará a página de Login , Default.aspx

 

ContinueDestinationPageUrl = ~/Videos.aspx

Para o cadastramento sendo efeito com sucesso o usuário irá para a página Videos.aspx onde poderá postar vídeos.

 

Repita o processo para a página Videos.aspx. Para esta página iremos definir o leiaute conforme abaixo:

Nesta página devemos incluir os seguintes controles:

O controle UpdatePanel do ASP.NET AJAX permite que você crie aplicações web com uma interface mais interativa e amigável com o usuário. Usando este controle você pode atualizar partes selecionadas de uma página ao invés de atualizar toda a página web usando um postback.(efetuar uma atualização parcial da página - partial-page update).

Este processo é coordenado pelo controle de servidor ScriptManager e pela classe PageRequestManager no lado do cliente. Quando uma atualização parcial esta ativa, os controles podem enviar posts de forma assíncrona para o servidor.

A seguir inclua um controle Panel e no seu interior inclua uma tabela a partir do menu Table->Insert Table com 5 linhas e duas colunas.

Inclua também os controles Label, TextBox,  FileUpload, Hyperlink e Button conforme o leiaute acima para permitir que o usuário poste o seu vídeo.

Como um vídeo possui um tamanho maior que 4 MB devemos efetuar uma alteração para permitir o envio de arquivos de até 40 MB. No arquivo web.config na seção <system.web> inclua a linha de código conforme abaixo:
 
......
<system.web>
<httpRuntime maxRequestLength="42000"/>
......
......

Com isso não estamos mais limitados a enviar  4 MB (4096) que é o valor padrão para upload usando o controle FileUpload.(O limite é definido para prevenir o ataque Denial of service (DOS))

Na continuação deste artigo  eu vou mostrar como a definição do código para postar vídeos o qual irá permitir ao usuário a partir da página Videos.aspx selecionar um vídeo e enviá-lo ao servidor onde o mesmo será salvo no banco de dados SQL Server.

Acompanhe em : ASP .NET - Simplesmente YouTube II

Eu sei é apenas .NET , mas eu gosto...

Referências:

José Carlos Macoratti