Neste tutorial, irei criar um site de controle de Transporte Escolar, Onde as Unidades Escolares Cadastram seus alunos suas manutenções e acompanham o processo através da Internet, obtendo os dados de seu processo no decorrer do tempo.

Dados Iniciais para Desenvolvimento da página

  • O Cadastro pode serdas seguintes formas (em mãos através de requisições, On-line, por telefone, etc.)
  • Criação do Banco de Dados (Access)
  • Criação do fluxograma
  • Criação do organograma
  • Seleção do programa para desenvolvimento (no nosso caso Visual Web Developer 2008 Express), Não utilizarei o Expression Web, por não nos dar, todos os acessos necessários.
  • O desenvolvimento
  • Rodando no Servidor

O Banco de Dados

banco de dados

O Organograma

Organograma

Fluxograma

Será desenvolvido no final por tratar-se de testes que faremos no decorrer da criação.

O Desenvolvimento

Inicie uma nova aplicação e salve com o nome TransporteEscolar:

Desenvolvimento

Na tela que se abre clique com o direito em App_data e Inclua seu Banco de dados, já criado anteriormente.

controle de transporte escolar

Novamente clique com o direito, no nome do seu site e inclua uma paste de nome Imagens e como no banco de dados, acrescente algumas imagens.

controle de transporte escolar

Criando Nossa Master Page

Remova a página Default.aspx criada por padrão e inclua um novo item- Add New Item – Selecionando o Template Master Page com o nome Base.Master.

controle de transporte escolar

A partir do Menu Table, opção Insert Table, adicione 3 linha e 02 colunas, lembrando sempre que poderemos incluir ou alterar a tabela, simplesmente clicando com o direito e selecionando as opções desejadas para a nossa tabela.

Criando o Cabeçalho

controle de transporte escolar

Selecione a primeira linha da Tabela criada e mescle conforme figura acima. Faça o mesmo com a última linha. E arraste o ContentPlaceHolder1 para o Centro da Tabela conforme Figura, alterando em Properties a opção Valign =TOP de todos partes da Tabela.

controle de transporte escolar

Com nossa Master Page criada, vamos configurar seu Layout através do Cssstyles.

Criando Um Style para o nosso Site

Selecione o Form1 e em CSSproperties clique em BackGround-Color e adicione uma cor ao fundo #EBEAD1:

controle de transporte escolar

Altere o nosso formulário, conforme imagem abaixo:

controle de transporte escolar

Alterando o Cabeçalho

Na parte superior da nossa Master Page (Área da Tabela), vamos incluir um Panel da guia Toobox. e selecione em propriedades BackImageUrl a imagem: Base.jpg.

controle de transporte escolar

Inclua da guia Toolbox uma image, para criarmos o Logotipo:

controle de transporte escolar

Criando o Menu

Inclua um controle Label da Guia toolbox, na área do menu e configure-o conforme segue:

controle de transporte escolar

Selecione o item Edit Menu Itens... , para criar-mos o menu conforme figura:

controle de transporte escolar
controle de transporte escolar

Na opção Auto-Format, selecione o item Professional, e altere o fundo do Menu (BackGround-Color)para nossa cor padrão #EBEAD1 , Tamanho 12px e Font Verdana:

controle de transporte escolar

A ideia aqui é, Criar o menu com acesso a várias páginas, e o Roteiro Escolar com acesso ao Google-Maps indicando o Roteiro dos Ônibus, com quantidade de pessoas que transporta e os horários.

Criando a Área Restrita

No Cabeçalho, na parte clara, ande com o cursor e acrescente uma imagem Registration, acompanhado de 02 Hiperlinks da guia Toolbox, altere em Properties o item text para: Área Restrita e Intranet.

controle de transporte escolar

Aqui será dividido o site em duas partes:

  • A 1ª será a área para uso do servidor do Desenvolvedor, ou seja, quem vai receber as Informções. Este terá acesso as Consultas, Relatórios, Editar, Cancelar, etc.
  • A 2ª será a área do Cadastro/Escolas, aqui ele poderá verificar como anda o Cdastro de seus alunos. Poderá também emitir relatórios e Verificar apenas o Transportede sua Escola.

Criando o Rodapé

Aqui será bem simples, basta colocarmos um label e alterarmos os dados conforme figura:

controle de transporte escolar

Altere a propriedade BackGround-Color para #182C33, para darmos a mesma proporção de cor do cabeçalho. Dando sequência ao nosso tutorial, iremos desenvolver nossas páginas de Dados e de Login.

Então vamos lá. Inicie o Visual web Developer, e selecionando nosso site adicione um novo Form clicando em Add New item:

controle de transporte escolar

e dê o nome de OqueE.aspx

controle de transporte escolar

Selecionando nossa Master Pager, criada em nosso tutorial I.

controle de transporte escolar

Abaixo nossa página já criada:

controle de transporte escolar

As páginas objetivos e Roteiro Escolar deixo por conta de vocês.

Criando as páginas de Login

Do mesmo jeito que criamos nossas páginas, vamos criar às páginas de Login que darão acesso as páginas Administrativas do Site e a página que chamarei de intranet que será de acesso das Unidades escolares.

Inicie criando duas novas pastas , clicando com o direito no nome do site e de a elas o nome de Administrativo e Intranet:

controle de transporte escolar
controle de transporte escolar

Aqui para cada pasta iremos criar uma nova página de nome LogimAdm.aspx e LoginIntra.aspx. E cada uma por sua vez, abrirá uma nova página de nome Adm.aspx e intranet.aspx. Aqui, copie, cole e renomeie nossa Base. Master para cada pasta, criando assim duas novas Master-Page:

controle de transporte escolar

Poderíamos ter utilizado a nossa Master Page principal, mas o objetivo é demonstrar o uso de várias máster ao mesmo tempo. Note que fiz algumas alterações no Cabeçalho, deletando alguns itens.

controle de transporte escolar
controle de transporte escolar

Em seguida crie as nossas páginas Admin.aspx e Intranet.aspx. Tendo como referencia nossas Master-Page. Veja como anda nosso solution Explorer já com as páginas criadas:

controle de transporte escolar

Desenvolvendo o Login de Acesso

Abra o Banco de Dados e inclua alguns itens nas Tabelas Admin e Escolas.

Em seguida abra nosso AdminLogin.aspx,se já não estiver aberto e inclua uma tabela de 2colunas e 3 linhas.

Monte as mesmas conforme figura. Alterando a propriedade do TextBox Login, em Properties/TextMode, para Password.

Inclua ainda um Label, e de a ele o nome de lblmsg.

controle de transporte escolar

Clique-Duplo no botão Logar, para acessarmos a área de eventos. Em seguida digite:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) 
   Handles Button1.Click
 ‘Acesso ao Banco de Dados
         Dim strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source= " & 
          Server.MapPath("app_data/transporte.mdb")
 ‘Cria uma Nova Conexão
         Dim Conn As OleDbConnection = New OleDbConnection(strConn)
 ‘Cria Parametros
         Dim strConsulta As String = "SELECT login FROM admin 
           WHERE Login = @Login AND Senha = @Senha"
  
         Dim cmd As OleDbCommand = New OleDbCommand(strConsulta, Conn)
         Dim objDR As OleDbDataReader
 ‘Compara o Parametro com o que foi digitado nos TextBox
         With cmd.Parameters
             .Add(New OleDbParameter("@Login", txtLogin.Text))
             .Add(New OleDbParameter("@Senha", txtSenha.Text))
         End With
 ‘Se estiver Correto, abre a conexão
         Try
             Conn.Open()
             objDR = cmd.ExecuteReader(System.Data.CommandBehavior.CloseConnection)
  ‘Direciona para a página se estiver correto, senão retorna a página 
  ‘inicial e mostra uma mensagem de erro no label lblmsg
             If objDR.HasRows Then
                 Response.Redirect("Admin.aspx")
             Else
                 Response.Redirect("default.aspx")
             End If
  
         Catch ex As Exception
             Me.lblmsg.Text = "Erro de acesso aos dados, tente outra vez!!!!"
             Me.lblmsg.Visible = True
         End Try
     End Sub
 End Class

ERROS que podem acontecer

Declare o NameSpace Data.OleDB, bastando clicar na opção Import 'System.Data.OleDB':

controle de transporte escolar

Está pronta nossa página de Login, faça os testes e verifique que a mesma já acessa a área Administrativa de nosso Site.

Faça o mesmo para a pagina de loginIntra, não esquecendo que os dados virão da página de Escolas onde estará os dados Cadastrais e o Código de acesso (note os locais onde foram alterados alguns dados):

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) 
  Handles Button1.Click
 ‘Acesso ao Banco de Dados
         Dim strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source= " & 
           Server.MapPath("app_data/transporte.mdb")
 ‘Cria uma Nova Conexão
         Dim Conn As OleDbConnection = New OleDbConnection(strConn)
 ‘Cria Parametros
         Dim strConsulta As String = "SELECT Usuario 
          FROM Escolas  WHERE Usuario = @Login AND CodAcesso = @CodAcesso"
  
         Dim cmd As OleDbCommand = New OleDbCommand(strConsulta, Conn)
         Dim objDR As OleDbDataReader
 ‘Compara o Parametro com o que foi digitado nos TextBox
         With cmd.Parameters
             .Add(New OleDbParameter("@Usuario", txtLogin.Text))
             .Add(New OleDbParameter("@CodAcesso", txtSenha.Text))
         End With
 ‘Se estiver Correto, abre a conexão
         Try
             Conn.Open()
             objDR = cmd.ExecuteReader(System.Data.CommandBehavior.CloseConnection)
 ‘Direciona para a página se estiver correto, senão retorna a página inicial e mostra 
 ‘uma mensagem de erro no label lblmsg
             If objDR.HasRows Then
                 Response.Redirect("Intranet.aspx")
             Else
                 Response.Redirect("default.aspx")
             End If
  
         Catch ex As Exception
             Me.lblmsg.Text = "Erro de acesso aos dados, tente outra vez!!!!"
             Me.lblmsg.Visible = True
         End Try
     End Sub
 End Class

O próximo passo é conectar o Hiperlink da Master-Page (Base-Master), Área Restrita e Intranet a nossa página de Login:

controle de transporte escolar

Salve e teste seu Site.

Vamos desenvolver a página de Cadastro de Séries.

Abra o Visual Web Developer e adicione uma nova página add/new itens, utilizando como base nossa Base-Master e dêo nome de Serie.aspx:

controle de transporte escolar

Adicione nesta página uma Tabela contendo 4 linha e 2 Colunas e monte conforme figura abaixo:

controle de transporte escolar

Dê um Duplo clique no Botão Gravar, para abrir o editor de eventos e digite:

Protected Sub btnGravar_Click(ByVal sender As Object, ByVal e As System.EventArgs) 
   Handles btnGravar.Click
  
         If txtSerie.Text <> String.Empty Then
  
             'define a conexao com o banco de dados na pasta app data
             Dim strconn As String = "provider=microsoft.jet.oledb.4.0;data source =" & 
              Server.MapPath("~/app_data\Transporte.mdb") & ";"
             'monta a instrução sql que vai incluir os dados na tabela.
             Dim mysql As String = "insert into Series(Serie)values(@Serie)"
             Dim myconn As New OleDbConnection(strconn)
             Dim cmd As New OleDbCommand(mysql, myconn)
  
    'preenche os parametros obtidos no formulario
   cmd.Parameters.Add(New OleDbParameter("@Serie", txtSerie.Text))
  
             'abre a conexao e executa o comando
             Try                
                 myconn.Open()
                 cmd.ExecuteNonQuery()
  
                 lblmsg.Text = "Dados Gravados com Sucesso!!!"
                 Response.Redirect("series.aspx")
             Catch
                 lblmsg.Text = "Erro ao gravar os dados, consulte o administrador do site"
  
             Finally
          'fecha a tabela e a conexão se der erro
                 myconn.Close()
             End Try
         End If
     End Sub
 End Class

Obs.: Aqui vale uma ressalva:podemos criar a inserção de Dados através da Palheta Data/DetailsView:

controle de transporte escolar

E na opção Choose Data Source Selecione New datasource. Na próxima tela que se abre, selecione o tipo de Banco de dados e de a ele um nome sugestivo.

controle de transporte escolar

A próxima tela será, a que escolheremos nosso banco de dados (transporte.mdb).

controle de transporte escolar

A seguir selecione nossa Tabela (Séries) e clique em Advance:

controle de transporte escolar

Aqui selecione os dois itens e clique em Ok.

controle de transporte escolar

Clique em finish até retornar a tela inicial.Formate o DetailsView a seu gosto clicando em Auto-Format e clique também nas opções Inserting, Editing e Deleting.

controle de transporte escolar

Rode o programa e verifique que a opção New acusa um erro ao tentarmos incluir algum dado.

controle de transporte escolar
controle de transporte escolar

Pontos a Analisar

  • O problema não ocorre se for utilizado um Banco de Dados SQL;
  • Há uma grande dificuldade em encontrar uma hospedagem gratuita para SQL;
  • Não ocorre o problema se for utilizado outra plataforma, do tipo Microsoft Expression Web 2;
  • Utilizando outra plataforma (Expression Web) não temos acesso a área de eventos;
  • Utilizando o Banco de Dados Access, não há um acréscimo de Dados na tabela (autoIncremento);
  • É possível editar e excluir os dados normalmente, pois não há acréscimo, só alterações na tabela. Facilitando nosso trabalho;
  • A uma excessiva gama de hospedagem gratuita para Access e MySQL na Internet;
  • A migração de Access para Mysql é fácil de fazer (se for preciso);
  • Temos apenas o trabalho de criar a parte de Inclusão de Dados.
  • Não detectei a Solução do erro, criei apenas uma solução paliativa que funciona muito bem. Ou seja, Criamos a Inserção, e a edição, exclusão e as consultas fazemos pelo modo mais fácil.

Então, o que fazer?

  1. Criar uma página para Inclusão e outra para Edição e Alteração
  2. Fazer a Edição e Exclusão na mesma página, logo abaixo da tabela de Inserção através de um GridView.

Como a página de Inclusão já está feita, optei por criar uma nova página com o nome AlteraSerie.aspx e nela acrescentei da Guia DATA e Standard01 Label,01textBox, 01 Button ,01GridView. Criando assim uma caixa de busca trazendo o resultado no GridView.

controle de transporte escolar

Nomeie o Textbox para txtlocalizar e de um clique duplo no botão localizar (btnlocalizar) e digite na área de eventos:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
 ‘verifica se a cx de texto é diferente de zero ou vazia
         If (txtlocalizar.Text <> "") Then
 ‘localiza os dados digitados e o coloca na própria página (GridView)
  Response.Redirect("~/EditaSerie.aspx?Busca=" + txtlocalizar.Text)
         End If
     End Sub
 End Class

O GridView

Aqui, a diferença é que nosso Gridview apenas irá retornar o que foi digitado no Textbox, faça o mesmo procedimento anterior criando um Datasource e na área Advance selecione apenas o primeiro item.

controle de transporte escolar

Na mesma tela agora selecione a opção Where:

controle de transporte escolar

Aqui Vale uma ressalva:

  • Columm é o dado que queremos pesquisar, ou seja, o nome ou o código;
  • Operator utilizamos o LIKE (busca parcial por letras parecidas) se fosse o sinal de igual você terá que digitar como foi cadastrado o dado.
  • QueryString, Parâmetro de Busca;
  • QueryStringField, O mesmo que foi digitado no btnLocalizar
  • Response.Redirect("~/EditaSerie.aspx?Busca=" + txtlocalizar.Text)

Clique em Add, e em seguida Ok. Até retornar a tela inicial.

Formate o GridView a seu gosto e selecione os itens Editing,Deleting,Paging e Sorting, altere também em Properties a opção PageSize para 5.

controle de transporte escolar

Retorne a pagina de Cadastro de Séries e no botão Editar/Excluir altere a propriedade PostBackURL para abrir nossa página de Edição.

controle de transporte escolar

Teste e verifique se faz a Inclusão, edição e exclusão.

As páginas de Cadastro de Escolas, Horários, TipoTransporte,Transporte, deixo por conta de vocês.

Até o próximo Tutorial, onde abordaremos a área Administrativa, a área da Intranet e a criação de diversos tipos de Consultas. Até lá.