tutoriais mais recente desenvolvimento web
 

AppML WebMatrix

❮ Anterior Próxima Capítulo ❯

Se você não tem um servidor web, você pode criar um, usando WebMatrix.

WebMatrix

WebMatrix é uma ferramenta de desenvolvimento web gratuita que fornece uma maneira fácil de construir sites.

WebMatrix contém:

  • exemplos de Web e modelos
  • Suporte para diferentes linguagens web (PHP, ASP.NET, Node.js)
  • Um servidor web
  • Servidores de banco de dados (mySQL and SQL Server Compact)

Com WebMatrix você pode começar com um site vazio, ou construir em modelos existentes, utilizando PHP, ASP, Umbraco, DotNetNuke, Drupal, Joomla, WordPress e muito mais.

WebMatrix também tem built-in ferramentas para bancos de dados, segurança, otimização de motor de pesquisa e publicação na web.

Para instalar o WebMatrix, siga este link: http://www.microsoft.com/web/webmatrix

Criar um site PHP vazio

Em WebMatrix, selecione Galeria de modelos. Selecione PHP. Escolha site vazio.

Alterar nome do site para DemoAppml (or anything you like) , e clique em Avançar.

Criar site

Como você pode ver na ilustração, WebMatrix permite que você crie muitos tipos diferentes de sites.

Criar uma página de teste HTML

Na janela do WebMatrix, selecione Novo. Selecione Novo arquivo. Escolha um tipo de arquivo HTML.

Altere o nome do arquivo para Customers.htm (or anything you like) . Clique em OK.

Criar arquivo HTML

Substituir o HTML no novo arquivo com este:

Customers.htm

<!DOCTYPE html>
<html lang="en">
<title>Customers</title>
<link rel="stylesheet" href=
"http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://www.w3ii.com/appml/2.0.3/appml.js"></script>
<body>

<div class="container" appml-data="customers">
<h1>Customers</h1>
<table class="table table-striped table-bordered">
<tr>
  <th>Customer</th>
  <th>City</th>
  <th>Country</th>
</tr>
<tr appml-repeat="records">
  <td>{{CustomerName}}</td>
  <td>{{City}}    </td>
  <td>{{Country}} </td>
</tr>
</table>
</div>

<script>
var customers = {
"records":[
{"CustomerName":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"CustomerName":"Ana Trujillo Emparedados y helados","City":"Mexico D.F.","Country":"Mexico"},
{"CustomerName":"Antonio Moreno Taqueria","City":"Mexico D.F.","Country":"Mexico"},
{"CustomerName":"Around the Horn","City":"London","Country":"UK"},
{"CustomerName":"B's Beverages","City":"London","Country":"UK"},
{"CustomerName":"Berglunds snabbkop","City":"Lulea","Country":"Sweden"},
{"CustomerName":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
{"CustomerName":"Blondel pere et fils","City":"Strasbourg","Country":"France"},
{"CustomerName":"Bolido Comidas preparadas","City":"Madrid","Country":"Spain"},
{"CustomerName":"Bon app'","City":"Marseille","Country":"France"},
{"CustomerName":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
{"CustomerName":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
{"CustomerName":"Centro comercial Moctezuma","City":"Mexico D.F.","Country":"Mexico"},
{"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
{"CustomerName":"Comercio Mineiro","City":"Sao Paulo","Country":"Brazil"}
]};
 </script>

</body>
</html>
Tente você mesmo "

Para executar a página de teste: botão direito do mouse a página no WebMatrix, e selecione Iniciar no browser.

Criar um banco de dados

Na janela do WebMatrix selecionar bancos de dados. Selecione New Database. Selecione Banco de Dados MySQL.

Alterar o nome do banco de dados para DemoDB (or anything you like) , e clique em OK.

criar banco de dados

Em WebMatrix, selecione Arquivos, e abra o arquivo web.config.

(Se você não pode ver o arquivo web.config, atualizar WebMatrix)

Configuração web

Configurar AppML

Use as informações, a partir da seqüência de conexão no web.config, para criar um arquivo de configuração para AppML.

Nomeie o arquivo appml_config.php:

appml_config.php

<?php echo("Access Forbidden");exit();?>
{
"dateformat" : "yyyy-mm-dd",
"databases" : [{
    "connection" : "mydatabase",
    "host" : "localhost",
    "dbname" : "DemoDB",
    "username" : "DemoDBUkbn5",
    "password" : "l6|U6=V(*T+P"
}]
}

Arquivo de configuração explicou:

Propriedade Descrição
dateformat O formato da data que você vai usar em seus modelos
connection O nome da conexão que você vai usar em seus modelos
host O IP ou hostname encontrada no servidor =
dbname O nome do banco de dados encontrado no banco de dados =
username O nome de usuário encontrados em = uid
password A senha encontrada em pwd =

cópia AppML

Baixe o arquivo: http://www.w3ii.com/appml/2.0.3/appml.php.txt .

Copie o arquivo para o seu web site. Renomeá-lo para appml.php:

copie appml.php

Criar uma tabela de banco de dados

Criar um modelo para a criação de uma tabela de clientes no banco de dados.

Create_Customers.js

{
"database" : {
"connection" : "mydatabase",
"execute" : [
"DROP TABLE IF EXISTS Customers",
"CREATE TABLE IF NOT EXISTS Customers (CustomerID INT NOT NULL AUTO_INCREMENT,PRIMARY KEY (CustomerID),CustomerName NVARCHAR(255),ContactName NVARCHAR(255),Address NVARCHAR(255),City NVARCHAR(255),PostalCode NVARCHAR(255),Country NVARCHAR(255))",
"INSERT INTO Customers(CustomerName,ContactName,Address,City,PostalCode,Country)VALUES (\"Alfreds Futterkiste\",\"Maria Anders\",\"Obere Str. 57\",\"Berlin\",\"12209\",\"Germany\")",
"INSERT INTO Customers(CustomerName,ContactName,Address,City,PostalCode,Country)VALUES (\"Around the Horn\",\"Thomas Hardy\",\"120 Hanover Sq.\",\"London\",\"WA1 1DP\",\"UK\")",
"INSERT INTO Customers(CustomerName,ContactName,Address,City,PostalCode,Country)VALUES (\"Blauer See Delikatessen\",\"Hanna Moos\",\"Forsterstr. 57\",\"Mannheim\",\"68306\",\"Germany\")"
]
}}

Criar uma página HTML para executar o modelo Create_Customers:

Create_Customers.htm

<!DOCTYPE html>
<html lang="en-US">
<script src="http://www.w3ii.com/appml/2.0.3/appml.js"></script>
<body>

<div appml-data="appml.php?model=Create_Customers"></div>

</body>
</html>

Para executar a página HTML: botão direito do mouse a página no WebMatrix, e selecione Iniciar no browser.

Criar um aplicativo

Criar um modelo para a aplicação clientes. Salve-o como customers.js:

Customers.js

{
"rowsperpage" : 10,
"database" : {
    "connection" : "mydatabase",
    "sql" : "SELECT * FROM Customers",
    "orderby" : "CustomerName"
}
}

Criar uma página HTML para executar a aplicação clientes:

Customers.htm

<!DOCTYPE html>
<html lang="en">
<title>Customers</title>
<link rel="stylesheet" href= "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://www.w3ii.com/appml/2.0.3/appml.js"></script>
<body>

<div class="container" appml-data="appml.php?model=customers">
<h1>Customers</h1>
<table class="table table-striped table-bordered">
  <tr>
    <th>Customer</th>
    <th>City</th>
    <th>Country</th>
</tr>
  <tr appml-repeat="records">
    <td>{{CustomerName}}</td>
    <td>{{City}}</td>
    <td>{{Country}}</td>
</tr>
</table>
</div>

</body>
</html>
Tente você mesmo "

Para executar a página HTML: botão direito do mouse a página no WebMatrix, e selecione Iniciar no browser.


❮ Anterior Próxima Capítulo ❯