Los últimos tutoriales de desarrollo web
 

AppML WebMatrix

❮ Anterior Siguiente Capítulo ❯

Si no tiene un servidor web, puede crear uno, usando WebMatrix.

WebMatrix

WebMatrix es una herramienta de desarrollo web gratuito que proporciona una manera fácil de crear sitios web.

WebMatrix contiene:

  • ejemplos y plantillas web
  • Soporte para diferentes lenguajes web (PHP, ASP.NET, Node.js)
  • Un servidor web
  • Servidores de bases de datos (mySQL and SQL Server Compact)

Con WebMatrix puede empezar con un sitio Web vacío, o construir en las plantillas existentes utilizando PHP, ASP, Umbraco, DotNetNuke, Drupal, Joomla, WordPress y más.

WebMatrix también tiene herramientas incorporadas para bases de datos, seguridad, optimización de motores de búsqueda, y la publicación web.

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

Crear un sitio PHP vacía

En WebMatrix, seleccione Galería de plantillas. Seleccionar PHP. Seleccione Sitio vacío.

Cambiar nombre del sitio a DemoAppml (or anything you like) , y haga clic en Siguiente.

crear página web

Como se puede ver en la ilustración, WebMatrix le permitirá crear muchos tipos diferentes de sitios web.

Crear una página HTML de prueba

En la ventana de WebMatrix, seleccione Nuevo. Seleccione Nuevo archivo. Seleccione el tipo de archivo HTML.

Cambiar el nombre del archivo para Clientes.htm (or anything you like) . Haga clic en OK.

Crear archivo HTML

Vuelva a colocar el código HTML en el nuevo archivo con esto:

Clientes.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>
Inténtalo tú mismo "

Para ejecutar la página de prueba: Haga clic en la página de WebMatrix, y seleccione Iniciar en el navegador.

Crear una base de datos

En la ventana de WebMatrix seleccionar bases de datos. Seleccione Nueva base de datos. Seleccione la base de datos MySQL.

Cambiar el nombre de la base de demodb (or anything you like) , y haga clic en OK.

crear la base de datos

En WebMatrix, seleccione Archivos, y abra el archivo web.config.

(Si no puede ver el archivo web.config, refrescar WebMatrix)

configuración web

Configurar AppML

Utilice la información, de la cadena de conexión en web.config, para crear un archivo de configuración para AppML.

Nombre del archivo 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"
}]
}

Archivo de configuración:

Propiedad Descripción
dateformat El formato de fecha que va a utilizar en sus modelos
connection El nombre de la conexión que utilizará en sus modelos
host La IP o nombre del servidor que se encuentra en =
dbname El nombre de la base de datos se encuentran en la base de datos =
username El nombre de usuario que se encuentra en = uid
password La contraseña que se encuentra en pwd =

copia AppML

Descargar el archivo: http://www.w3ii.com/appml/2.0.3/appml.php.txt .

Copiar el archivo a su sitio web. Cambiar el nombre a appml.php:

copiar appml.php

Crear una tabla de base de datos

Crear un modelo para la creación de una tabla de clientes en la base de datos.

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\")"
]
}}

Crear una página HTML para ejecutar el 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 ejecutar la página HTML: Haga clic en la página de WebMatrix, y seleccione Iniciar en el navegador.

Crear una aplicación

Crear un modelo para la aplicación del cliente. Guardarlo como customers.js:

Customers.js

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

Crear una página HTML para ejecutar la aplicación a los clientes:

Clientes.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>
Inténtalo tú mismo "

Para ejecutar la página HTML: Haga clic en la página de WebMatrix, y seleccione Iniciar en el navegador.


❮ Anterior Siguiente Capítulo ❯