May 30

অ্যাপ এম এল ওয়েবম্যাট্রিক্স (AppML WebMatrix)

রিদওয়ান বিন শামীম

 

কারো যদি ওয়েব সার্ভার না থাকে তবে অ্যাপ এম এল ওয়েবম্যাট্রিক্স ব্যবহার করে তৈরি করে নেয়া যায়।

 

ওয়েবম্যাট্রিক্স

ওয়েবম্যাট্রিক্স হল এক প্রকার ফ্রী ওয়েব ডেভেলাপমেন্ট টুল যেটি সহজে ওয়েবসাইট তৈরি করতে দেয়। এর উপাদানগুলো হল,

  • ওয়েবের উদাহরণ ও টেম্পলেট,
  • বিভিন্ন ওয়েব ল্যাঙ্গুয়েজের জন্য সাপোর্ট(যেমন পিএইচপি, এএসপি ডট নেট, নড জেএস ইত্যাদি),
  • একটি ওয়েব সার্ভার,
  • ডাটাবেস সার্ভার(মাইএসকিউএল, এসকিউএল সার্ভার কমপ্যাক)

ওয়েবম্যাট্রিক্স দিয়ে একদম ফাঁকা ওয়েব সাইট দিয়ে শুরু করে বা বিভিন্ন টেম্পলেট ব্যবহার করে সাইট তৈরি করা যায়।

ওয়েবম্যাট্রিক্সে কিছু বিল্ট ইন টুল আছে ডাটাবেস, নিরাপত্তা, সার্চ ইঞ্জিন অপটিমাইজেশন ও ওয়েব পাবলিশিং সংক্রান্ত। ওয়েবম্যাট্রিক্স ইন্সটল করার জন্য লিঙ্ক, http://www.microsoft.com/web/webmatrix

 

শূন্য পিএইচপি সাইট

ওয়েবম্যাট্রিক্স থেকে Template Gallery, সেখান থেকে PHP, তার ভেতর থেকে Empty Site সিলেক্ট করতে হয়। সেখান থেকে সাইট নেম চেঞ্জ করে DemoAppml বা অন্য কিছু দিতে হয়। এরপর Next বাটন চাপতে হয়।

new web

 

এইচটিএমএল টেস্ট পেজ তৈরি

ওয়েবম্যাট্রিক্সে New থেকে New File সেটি থেকে HTML টাইপ হিসেবে নির্ধারণ করতে হয়। ফাইল নেমকে customers.htm বা অন্য কোনও নামে চেঞ্জ করে দিতে হয়, এরপর OK বাটনে চাপতে হয়।

pic_matrix

নতুন ফাইলে এইচটিএমএল যেভাবে পরিবর্তিত হবে তা নিচের উদাহরণে দেখানো হল,

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.w3schools.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":"México D.F.","Country":"Mexico"},
 {"CustomerName":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},
 {"CustomerName":"Around the Horn","City":"London","Country":"UK"},
 {"CustomerName":"B's Beverages","City":"London","Country":"UK"},
 {"CustomerName":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},
 {"CustomerName":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
 {"CustomerName":"Blondel père et fils","City":"Strasbourg","Country":"France"},
 {"CustomerName":"Bólido 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":"México D.F.","Country":"Mexico"},
 {"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
 {"CustomerName":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
 ]};
 </script>
 
 </body>
</html>

 

 

টেস্টপেজ রান করানোর জন্য ওয়েবম্যাট্রিক্সে Right-click করে Launch in browser সিলেক্ট করতে হবে।

 

ডাটাবেস তৈরি করা

ওয়েবম্যাট্রিক্সে Databasesথেকে New Databaseসেখান থেকে MySQL Database নির্দিষ্ট করে দিতে হবে, ডাটাবেস নেম চেঞ্জ করে OK করে দিতে হবে।

 Web Mattix

ওয়েবম্যাট্রিক্সে Files সিলেক্ট করে web.config ফাইল ওপেন করতে হবে।

 

 

অ্যাপ এম এল কনফিগার করা

ফাইলনেম চেঞ্জ করে 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 ইউআইডিতে থাকা নাম
password আইডির পাসওয়ার্ড

 

 

অ্যাপ এম এল কপি করা

http://www.w3schools.com/appml/2.0.3/appml.php.txt. থেকে ডাউনলোড করে ওয়েবসাইটে কপি করে appml.php নামে রিনেম করতে হয়।

pic copy

ডাটাবেস টেবিল তৈরি করা

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

 

 

Create_Customers model রান করাতে এইচটিএমএল পেজ তৈরি করতে হয়,

Create_Customers.htm

<!DOCTYPE html>
 <html lang="en-US">
 <script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script>
 <body>
<div appml-data="appml.php?model=Create_Customers"></div>
</body>
 </html>

 

 

এইচটিএমএল পেজ রান করাতে ওয়েবম্যাট্রিক্সে Right-click করে Launch in browser সিলেক্ট করতে হবে।

 

এপ্লিকেশন তৈরি করা

কাস্টমার এপ্লিকেশন মডেল তৈরি করে customers.js নামে সংরক্ষণ করতে হয়।

Customers.js

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

 

 

কাস্টমার এপ্লিকেশন রান করাতে এইচটিএমএল পেজ তৈরি করতে হয়,

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.w3schools.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>

 

 

এইচটিএমএল পেজ রান করাতে ওয়েবম্যাট্রিক্সে Right-click করে Launch in browser সিলেক্ট করতে হবে।