ล่าสุดการพัฒนาเว็บบทเรียน
 

AppML WebMatrix

❮ก่อนหน้า ถัดไปบท❯

หากคุณไม่ได้มีเว็บเซิร์ฟเวอร์คุณสามารถสร้างได้โดยใช้ WebMatrix

WebMatrix

WebMatrix เป็นเครื่องมือในการพัฒนาเว็บฟรีที่มีวิธีที่ง่ายในการสร้างเว็บไซต์

WebMatrix ประกอบด้วย:

  • ตัวอย่างเว็บและแม่แบบ
  • การสนับสนุนสำหรับเว็บภาษาที่แตกต่างกัน (PHP, ASP.NET, Node.js)
  • เว็บเซิร์ฟเวอร์
  • เซิร์ฟเวอร์ฐานข้อมูล (mySQL and SQL Server Compact)

ด้วย WebMatrix คุณสามารถเริ่มต้นด้วยเว็บไซต์ที่ว่างเปล่าหรือสร้างแม่แบบที่มีอยู่โดยใช้ PHP, ASP, Umbraco, DotNetNuke, Drupal, Joomla, WordPress และอื่น ๆ อีกมากมาย

WebMatrix นอกจากนี้ยังมีเครื่องมือในตัวสำหรับฐานข้อมูล, การรักษาความปลอดภัย, การเพิ่มประสิทธิภาพของเครื่องมือค้นหาและเผยแพร่ทางเว็บ

การติดตั้ง WebMatrix ไปที่ลิงค์นี้: http://www.microsoft.com/web/webmatrix

สร้าง PHP เว็บไซต์ที่ว่างเปล่า

ใน WebMatrix เลือกแม่แบบแกลลอรี่ เลือก PHP เลือกเว็บไซต์ที่ว่างเปล่า

เปลี่ยนชื่อเว็บไซต์ไป DemoAppml (or anything you like) และคลิก Next

สร้างเว็บไซต์

ที่คุณสามารถดูจากภาพประกอบ, WebMatrix จะช่วยให้คุณสร้างชนิดที่แตกต่างกันหลายเว็บไซต์

สร้างการทดสอบเพจ HTML

ในหน้าต่าง WebMatrix เลือกใหม่ เลือกไฟล์ใหม่ เลือกประเภทไฟล์ HTML

เปลี่ยนชื่อไฟล์เพื่อ customers.htm (or anything you like) คลิกตกลง

สร้างไฟล์ HTML

แทนที่ HTML ในไฟล์ใหม่ที่มีนี้:

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>
ลองตัวเอง»

เมื่อต้องการเรียกใช้หน้าทดสอบ: คลิกขวาที่หน้าใน WebMatrix และเลือกเปิดในเบราว์เซอร์

สร้างฐานข้อมูล

ในหน้าต่าง WebMatrix เลือกฐานข้อมูล เลือกฐานข้อมูลใหม่ เลือกฐานข้อมูล MySQL

เปลี่ยนชื่อฐานข้อมูลเพื่อ DemoDB (or anything you like) และคลิก OK

สร้างฐานข้อมูล

ใน WebMatrix เลือกไฟล์และเปิดแฟ้ม web.config

(ถ้าคุณไม่สามารถดูแฟ้ม web.config รีเฟรช WebMatrix)

การกำหนดค่าเว็บ

กำหนดค่า AppML

ใช้ข้อมูลจากสตริงการเชื่อมต่อใน web.config เพื่อสร้างแฟ้มการกำหนดค่าสำหรับ AppML

ชื่อ 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"
}]
}

แฟ้มการกำหนดค่าอธิบาย:

คุณสมบัติ ลักษณะ
dateformat รูปแบบวันที่ที่คุณจะใช้ในรูปแบบของคุณ
connection ชื่อการเชื่อมต่อที่คุณจะใช้ในรูปแบบของคุณ
host ทรัพย์สินทางปัญญาหรือชื่อโฮสต์ที่พบในเซิร์ฟเวอร์ =
dbname ชื่อฐานข้อมูลที่พบในฐานข้อมูล =
username ชื่อผู้ใช้ที่พบใน uid =
password รหัสผ่านที่พบใน pwd =

คัดลอก AppML

ดาวน์โหลดไฟล์: http://www.w3ii.com/appml/2.0.3/appml.php.txt

คัดลอกไฟล์ไปยังเว็บไซต์ของคุณ เปลี่ยนชื่อเป็น appml.php:

คัดลอก appml.php

สร้างตารางฐานข้อมูล

สร้างแบบจำลองสำหรับการสร้างตารางลูกค้าในฐานข้อมูล

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

สร้างหน้า HTML สำหรับการทำงานรูปแบบ 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>

เมื่อต้องการเรียกใช้หน้า HTML: คลิกขวาที่หน้าใน WebMatrix และเลือกเปิดในเบราว์เซอร์

สร้างแอพลิเคชัน

สร้างรูปแบบสำหรับการใช้งานของลูกค้า บันทึกเป็น customers.js:

Customers.js

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

สร้างหน้า HTML สำหรับการเรียกใช้แอพลิเคชันของลูกค้า:

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>
ลองตัวเอง»

เมื่อต้องการเรียกใช้หน้า HTML: คลิกขวาที่หน้าใน WebMatrix และเลือกเปิดในเบราว์เซอร์


❮ก่อนหน้า ถัดไปบท❯