Índice
Além de desenvolver web em Windows temos o Visual Studio .Net e o servidor IIS, no Linux podemos usar o Monodevelop e o servidor Apache com o módulo XSP.
ASP.NET com Apache
O módulo mod_mono Apache usado para executar aplicativos ASP.NET no servidor da web Apache.
O módulo mod_mono é executado dentro de um processo Apache e passa todas as solicitações de aplicativos ASP.NET para um processo Mono externo que hospeda aplicativos ASP.NET.
Vamos instalar o Monodevelop no Linux
sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF echo "deb http://download.mono-project.com/repo/debian wheezy main" | sudo tee /etc/apt/sources.list.d/mono-xamarin.list sudo apt-get update
Vamos instalar o servidor para testar o XSP 4 no Linux
sudo apt-get install mono-xsp4-baseO que é XPS?O XSP é um servidor para uso em testes de desenvolvimento, se queremos ter um servidor ou aplicação web rodando profissionalmente, é melhor usar Apache e mod_mono, assim conseguiremos a escalabilidade e segurança que o Apache oferece.
Então nós abrimos MonoDevelop e nós selecionamos Novo projeto (Na página de boas-vindas ou no menu Arquivo), para abrir a caixa de diálogo Nova solução. Na lista de tipos de projeto à esquerda, expanda a categoria C # e selecione a opção ASP.NET.
Atribuímos um nome ao projeto de exemplo Aspnet e selecionamos um diretório onde salvar o projeto.
Quando começarmos veremos que os arquivos padrão são gerados nos projetos, são eles:
- Default.aspx que será a página inicial.
- Global.asax que será o arquivo com as configurações globais do código c # para a funcionalidade do site.
- Web.config É o arquivo xml com as configurações do próprio site.
Estrutura da web
Vamos definir a estrutura de um site onde teremos a necessidade de repetir algumas partes de uma página do site como o cabeçalho, o menu e para não repetir esse código em todas as páginas o que podemos fazer é criar uma Master Page e referenciá-lo nas outras páginas.
As páginas mestras em ASP.net têm a extensão de arquivo .mestre e nos setores onde queremos que a web seja dinâmica ou altere o conteúdo usamos um objeto chamado ContentPlaceHolder, na estrutura das páginas podemos usar html ou html5, css e js.
Vamos criar a página mestra ou página mestra, para isso vamos Arquivo> ASP.NET Webforms> página mestra com Codebihind, vamos chamá-la home.master
Dentro de home.master, escrevemos a estrutura html da web
My Web ASP.netMy Web ASP.net DemoAgora vamos criar o arquivo css que se chamará styles.css e o colocaremos na mesma pasta do projeto.
body {background: # f8f8f8; margem: 0; preenchimento: 0; tamanho da fonte: 11px; altura da linha: 16px; font-family: Arial, Tahoma;} a {color: # 333333;} a: hover {text-decoration: none;} #head {background: # 258dc8 repeat-x; box-shadow: 0 0 20px # f2f2f2 inserido; altura: 100px; } #logo {largura: 780px; margem: 0; preenchimento: 8px; } #logo a {color: #FFFFFF; decoração de texto: nenhum; intensidade da fonte: Negrito; altura: 12px; tamanho da fonte: 20px; text-transform: uppercase;} #logo a: hover {} #menu {background: # 666666; width: 1000px; margin-top: 33px; padding: 0px; display: inline-block;} #menu ul {background: blue; largura: 780px; margem: 0 automático; margin-top: 3px; estilo de lista: nenhum; preenchimento: 0; alinhamento de texto: esquerdo;} #menu ul li {display: inline} #menu ul a {display: block; flutuar: esquerda; intensidade da fonte: Negrito; tamanho da fonte: 13px; decoração de texto: nenhum; cor: #fff; preenchimento: 8px 10px; largura: 118px; alinhamento de texto: centro; text-transform: uppercase;} #menu ul a: hover {color: # 232323;} #menu ul a.active {color: # 232323;} #menu ul a.active: hover {color: # 232323;} #container {largura: 1000px; margem: 0 auto;} #body {largura: 100%; margem: 0px; float: left;} # imagem grande {height: 150px; no-repeat # fe5d00; preenchimento: 30px 0 30px 50px; altura da linha: 24px;} #content {float: left; plano de fundo: #ffffff repeat-x; margem: 0px; largura: 750px; cor: # 6f6e6e; preenchimento: 10px; } #column {float: left; cor de fundo: #cccccc; borda: 1px sólido # e3e3e3; raio da borda: 4px; box-shadow: 0 0 20px # f2f2f2 inserido; repeat-x; margem: 0px; largura: 200px; cor: # 6f6e6e; preenchimento: 10px; } #pie {background: # 333333; repeat-x; altura: 40px; margem superior: 20px; limpar: ambos;} Em seguida, no arquivo home.master, adicionaremos o menu ASP.NETEste controle de Menu nos permite atribuir diferentes propriedades, como orientação, tamanho, cor de fundo, pode ser projetado visualmente no Visual Studio.net no Monodevelop, é conveniente para nós manipulá-lo a partir de CSS. Devemos também definir as áreas de conteúdo ou blocos para a coluna e o conteúdo da web com o controle ContentPlaceHolder
Para a coluna, o código será o seguinte: Para o conteúdo, o código será o seguinte: Para o pé, definiremos o bloco do pé e o código será o seguinte: A seguir devemos indicar qual será a web inicial a mostrar que será vinculada à página mestra, no arquivo Default.aspx Excluímos o conteúdo padrão e escrevemos o seguinte código:
Aqui indicamos qual é a página master qual é o arquivo onde está o código da página que vamos mostrar e qual é a página neste caso Default.
Também referenciamos as zonas dinâmicas para adicionar conteúdo a elas. A coluna ID pode ser qualquer nome para identificar esse conteúdo específico:
Seções
- Vendas
- Novos carros
- Carros usados
Devemos também indicar qual é a página inicial através do evento load no arquivo Default.aspx.cs, escrevemos o evento load
classe pública parcial Padrão: System.Web.UI.Page {protected void Page_Load (objeto remetente, EventArgs e) {}}Vamos ver como fica a web em Monodevelop fon F5 ou no menu Executar
Nós adicionamos a página de serviços, vamos Arquivos> Novo arquivo> Formulários da Web ASP.Net e selecionamos a opção Formulário de conteúdo com Codebihind e ele nos mostrará uma caixa de diálogo para selecionar a página mestra para a qual ele se vinculará neste caso Home.master
Abra o arquivo Services.aspx e adicionamos o seguinte código:
Serviços
- Acessórios automotivos
- Motores e direção
- Chapa metálica e tinta
- Eletrônica automotiva
Somos uma empresa que se dedica à reparação e manutenção de climatização automotiva, e prestamos um amplo leque de serviços para o seu veículo
Executamos novamente para compilar as alterações e veremos que ao pressionar o menu Serviços altera o conteúdo da coluna e do bloco de conteúdo:Por fim, definimos a estrutura da página de contato. Nós adicionamos a página de contato, nós iremos Arquivos> Novo arquivo> Formulários da Web ASP.Net e nós selecionamos a opção Formulário de conteúdo com Codebihind e ele nos mostrará uma caixa de diálogo para selecionar a página mestra para a qual ele se vinculará neste caso Home.master
Abrimos o arquivo Contact.aspx e adicionamos o seguinte código:
Contato
Telefone | XXXXXXXX |
---|---|
Atenção ao público | Segunda a Sexta 09:00 às 17:00 |
[email protected] |
Nome: | |
E-mail: | |
Mensagem: | |
Assim, vemos como as colunas dinâmicas mudaram o conteúdo, mas o menu e o cabeçalho nunca mudaram e sempre os reutilizamos sem reescrevê-los. Até agora nós vimos como criar uma página-mestre com c # e MonodevelopTambém podemos criar uma web com dados dinâmicos com Mysql ou SqlServer, para testar a web em um servidor real, precisamos de um servidor que suporte asp.net, existem vários gratuitos, carregue a web via ftp e carregue todos os arquivos do projeto.