Tag Archives: case

AppML কেস স্টাডি – কর্মকর্তা-কর্মচারী (AppML Case Study – Employees)

Huge Sell on Popular Electronics

এইচটিএমএল

এইচটিএমএল সোর্স:


<!DOCTYPE html>
 <html lang="en-US">
 <title>Employees</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">
 <h1>Employees</h1>
 
 <div id="Form01" class="jumbotron" style="display:none" appml-data="local?model=model_employeesform" 
                                                                 appml-controller="myFormController">
   <div appml-include-html="inc_formcommands.htm"></div>
   <div class="form-group">
     <label>Last Name:</label>
     <input id="LastName" class="form-control">
   </div>
   <div class="form-group">
     <label>First Name:</label>
     <input id="FirstName" class="form-control">
   </div>
   <div class="form-group">
     <label>Date of Birth:</label>
     <input id="BirthDate" class="form-control">
   </div>
   <div class="form-group">
     <label>Photo:</label>
     <input id="Photo" class="form-control">
   </div>
   <div class="form-group">
     <label>Notes:</label>
     <input id="Notes" class="form-control">
   </div>
 </div>
 
 <div appml-data="local?model=model_employeeslist">
   <div appml-include-html="inc_listcommands.htm"></div>
   <div appml-include-html="inc_filter.htm"></div>
   <table class="table table-striped table-bordered">
   <tr>
     <th></th>
     <th>Last Name</th>
     <th>First Name</th>
     <th>Date of Birth</th>
   </tr>
   <tr appml-repeat="records">
     <td style="cursor:pointer"
     onclick="appml('Form01').run({{EmployeeID}})">
     <span class="glyphicon glyphicon-edit"></span>
     </td>
     <td>{{LastName}}</td>
     <td>{{FirstName}}</td>
     <td>{{BirthDate}}</td>
   </tr>
   </table>
 </div>
 
 </div>
 
 <script>
 function myFormController($appml) {
     if ($appml.message == "ready") {return -1;}
     if ($appml.message == "loaded") {
         document.getElementById("Form01").style.display = "";
     }
 }
 </script>
 
 </body>
 </html>

 

 

মডেল

এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল

লিস্ট মডেল


 

{
 "database" : {
 "connection" : "localmysql",
 "sql" : "SELECT * FROM Employees",
 "orderby" : "LastName"
 },
 "filteritems" : [
 {"item" : "LastName"},
 {"item" : "FirstName"}
 ],
 "sortitems" : [
 {"item" : "LastName"},
 {"item" : "FirstName"}
 ]
 }

 

 

ফরম মডেল


 {
 "database" : {
 "connection" : "localmysql",
 "sql" : "SELECT * FROM Employees",
 "maintable" : "Employees",
 "keyfield" : "EmployeeID"
 },
 "updateItems" : [
 {"item" : "LastName"},
 {"item" : "FirstName"},
 {"item" : "BirthDate"},
 {"item" : "Photo"},
 {"item" : "Notes"}
 ]
 }

 

AppML কেস স্টাডি – শ্রেণীবিভাগ সমূহ (AppML Case Study – Categories)

Huge Sell on Popular Electronics

এইচটিএমএল

এইচটিএমএল সোর্স:


<!DOCTYPE html>
 <html lang="en-US">
 <title>Categories</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">
 <h1>Categories</h1>
 
 <div id="Form01" class="jumbotron" style="display:none" appml-data="local?model=model_categoriesform" 
                                                                 appml-controller="myFormController">
   <div appml-include-html="inc_formcommands.htm"></div>
   <div class="form-group">
     <label>CategoryName:</label>
     <input id="CategoryName" class="form-control">
   </div>
   <div class="form-group">
     <label>Description:</label>
     <input id="Description" class="form-control">
   </div>
 </div>
 
 <div appml-data="local?model=model_categorieslist">
   <div appml-include-html="inc_listcommands_nofilter.htm"></div>
   <table class="table table-striped table-bordered">
   <tr>
     <th></th>
     <th>Category</th>
     <th>Description</th>
   </tr>
   <tr appml-repeat="records">
     <td style="cursor:pointer"
     onclick="appml('Form01').run({{CategoryID}})">
     <span class="glyphicon glyphicon-edit"></span>
     </td>
     <td>{{CategoryName}}</td>
     <td>{{Description}}</td>
     </tr>
   </table>
 </div>
 
 </div>
 
 <script>
 function myFormController($appml) {
     if ($appml.message == "ready") {return -1;}
     if ($appml.message == "loaded") {
         document.getElementById("Form01").style.display = "";
     }
 }
 </script>
 
 </body>
 </html>

 

 

মডেল

এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল

লিস্ট মডেল


 {
 "database" : {
 "connection" : "localmysql",
 "sql" : "SELECT * FROM Categories"
 }
 }

 

 

ফরম মডেল


 {
 "database" : {
 "connection" : "localmysql",
 "sql" : "SELECT * FROM Categories",
 "maintable" : "Categories",
 "keyfield" : "CategoryID"
 },
 "updateItems" : [
 {"item" : "CategoryName"},
 {"item" : "Description"}
 ]
 }

 

AppML কেস স্টাডি – কোনো পরিবহনে মাল লেনদেনকারী (AppML Case Study – Shippers)

Huge Sell on Popular Electronics

এইচটিএমএল

এইচটিএমএল সোর্স:


<!DOCTYPE html>
 <html lang="en-US">
 <title>Shippers</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">
 <h1>Shippers</h1>
 
 <div id="Form01" class="jumbotron" style="display:none" appml-data="local?model=model_shippersform" 
                                                                appml-controller="myFormController">
 <div appml-include-html="inc_formcommands.htm"></div>
 <div class="form-group">
 <label>ShipperName:</label>
 <input id="ShipperName" class="form-control">
 </div>
 <div class="form-group">
 <label>Phone:</label>
 <input id="Phone" class="form-control">
 </div>
 </div>
 
 <div appml-data="local?model=model_shipperslist">
   <div appml-include-html="inc_listcommands_nofilter.htm"></div>
   <table class="table table-striped table-bordered">
   <tr>
     <th></th>
     <th>Shipper</th>
     <th>Phone</th>
   </tr>
   <tr appml-repeat="records">
     <td style="cursor:pointer"
     onclick="appml('Form01').run({{ShipperID}})">
     <span class="glyphicon glyphicon-edit"></span>
     </td>
     <td>{{ShipperName}}</td>
     <td>{{Phone}}</td>
   </tr>
   </table>
 </div>
 
 </div>
 
 <script>
 function myFormController($appml) {
     if ($appml.message == "ready") {return -1;}
     if ($appml.message == "loaded") {
         document.getElementById("Form01").style.display = "";
     }
 }
 </script>
 
 </body>
 </html>

 

 

মডেল

এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল

লিস্ট মডেল


 

 {
 "database" : {
 "connection" : "localmysql",
 "sql" : "SELECT * FROM Shippers"
 }
 }

 

 

ফরম মডেল


 {
 "database" : {
 "connection" : "localmysql",
 "sql" : "SELECT * FROM Shippers",
 "maintable" : "Shippers",
 "keyfield" : "ShipperID"
 },
 "updateItems" : [
 {"item" : "ShipperName"},
 {"item" : "Phone"}
 ]
 }

 

 

 

AppML কেস স্টাডি – সরবরাহকারী পাইকার পরিবেশক (AppML Case Study – Suppliers)

Huge Sell on Popular Electronics

এইচটিএমএল

এইচটিএমএল সোর্স:


<!DOCTYPE html>
 <html lang="en-US">
 <title>Suppliers</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">
 <h1>Suppliers</h1>
 
 <div id="Form01" class="jumbotron" style="display:none" appml-data="local?model=model_suppliersform"
                                                                  appml-controller="myFormController">
   <div appml-include-html="inc_formcommands.htm"></div>
   <div class="form-group">
     <label>SupplierID:</label>
     <input id="SupplierID" class="form-control">
   </div>
   <div class="form-group">
     <label>SupplierName:</label>
     <input id="SupplierName" class="form-control">
   </div>
   <div class="form-group">
     <label>ContactName:</label>
     <input id="ContactName" class="form-control">
   </div>
   <div class="form-group">
     <label>Address:</label>
     <input id="Address" class="form-control">
   </div>
   <div class="form-group">
     <label>PostalCode:</label>
     <input id="PostalCode" class="form-control">
   </div>
   <div class="form-group">
     <label>City:</label>
     <input id="City" class="form-control">
   </div>
   <div class="form-group">
     <label>Country:</label>
     <input id="Country" class="form-control">
   </div>
   <div class="form-group">
     <label>Adress:</label>
     <input id="Phone" class="form-control">
   </div>
 </div>
 
 <div appml-data="local?model=model_supplierslist">
   <div appml-include-html="inc_listcommands.htm"></div>
   <div appml-include-html="inc_filter.htm"></div>
   <table class="table table-striped table-bordered">
   <tr>
     <th></th>
     <th>Supplier</th>
     <th>City</th>
     <th>Country</th>
     <th></th>
   </tr>
   <tr appml-repeat="records">
     <td style="cursor:pointer"
       onclick="appml('Form01').run({{SupplierID}})">
       <span class="glyphicon glyphicon-edit"></span>
     </td>
     <td>{{SupplierName}}</td>
     <td>{{City}}</td>
     <td>{{Country}}</td>
     <td><a href='' onclick="openProducts({{SupplierID}});return false;">Products</a></td>
   </tr>
   </table>
 </div>
 
 <div id="ProductsSection" class="jumbotron" style="display:none" appml-data="local?model=model_productslist" appml-controller="myProductsController">
 <button onclick="document.getElementById('ProductsSection').style.display='none';" type="button" class="close"><span>&times;</span></button>
 <h2>{{records[0]['SupplierName']}}</h2>
 <table class="table table-striped table-bordered">
 <tr>
   <th>Product</th>
   <th>Category</th>
   <th>Supplier</th>
 </tr>
 <tr appml-repeat="records">
   <td>{{ProductName}}</td>
   <td>{{CategoryName}}</td>
   <td>{{SupplierName}}</td>
 </tr>
 </table>
 </div>
 </div>
 
 <script>
 function openProducts(id) {
     appml("ProductsSection").clearQuery();
     appml("ProductsSection").setQuery("Products.SupplierID", id); 
     appml("ProductsSection").run();
 }
 function myFormController($appml) {
     if ($appml.message == "ready") {return -1;}
     if ($appml.message == "loaded") {
         document.getElementById("Form01").style.display = "";
     }
 }
 function myProductsController($appml) {
     if ($appml.message == "ready") {return -1;}
     if ($appml.message == "loaded") {
         document.getElementById("ProductsSection").style.display = "";
     }
 }
 </script>
 
 </body>
 </html>

 

 

মডেল

এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল

লিস্ট মডেল


{
 "database" : {
 "connection" : "localmysql",
 "sql" : "SELECT * FROM Suppliers",
 "orderby" : "SupplierName"
 },
 "filteritems" : [
 {"item" : "SupplierName"},
 {"item" : "City"},
 {"item" : "Country"}
 ],
 "sortitems" : [
 {"item" : "SupplierName"},
 {"item" : "City"},
 {"item" : "Country"}
 ],
 "rowsperpage" : 10
 }

 

 

ফরম মডেল


 

{
 "database" : {
 "connection" : "localmysql",
 "maintable" : "Customers",
 "keyfield" : "CustomerID",
 "sql" : "SELECT * FROM Customers"
 },
 "updateItems" : [
 {"item" : "CustomerName"},
 {"item" : "Address"},
 {"item" : "PostalCode"},
 {"item" : "City"},
 {"item" : "Country"}
 ]
 }

 

 

 

AppML কেস স্টাডি – পণ্য (AppML Case Study – Products)

Huge Sell on Popular Electronics

এইচটিএমএল

এইচটিএমএল সোর্স:


<!DOCTYPE html>
 <html lang="en-US">
 <title>Products</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">
 <h1>Products</h1>
 
 <div id="Form01" class="jumbotron" style="display:none" appml-controller="myFormController">
   <div appml-include-html="inc_formcommands.htm"></div>
   <div class="form-group">
     <label>ProductName:</label>
     <input id="ProductName" class="form-control">
   </div>
   <div class="form-group">
     <label>Supplier:</label>
     <div appml-data="local?model=model_dropdown_suppliers">
       <select id="SupplierID" class="form-control">
       <option appml-repeat="records" value="{{SupplierID}}">{{SupplierName}}</option>
       </select>
     </div>
   </div>
   <div class="form-group">
     <label>Category:</label>
     <div appml-data="local?model=model_dropdown_categories">
       <select id="CategoryID" class="form-control">
       <option appml-repeat="records" value="{{CategoryID}}">{{CategoryName}}</option>
     </select>
   </div>
   </div>
   <div class="form-group">
     <label>Unit:</label>
     <input id="Unit" class="form-control">
   </div>
   <div class="form-group">
     <label>Price:</label>
     <input id="Price" onchange="myValidator(this)" class="form-control">
   </div>
 </div>
  
 <div appml-data="local?model=model_productslist" appml-controller="myListController">
 <div appml-include-html="inc_listcommands.htm"></div>
 <div appml-include-html="inc_productsquery_local.htm"></div>
 <table class="table table-striped table-bordered">
 <tr>
   <th></th>
   <th>Product Name</th>
   <th>Category</th>
   <th>Supplier</th>
   <th>Price</th> 
 </tr>
 <tr appml-repeat="records">
   <td style="cursor:pointer"
     onclick="appml('Form01').run({{ProductID}})">
     <span class="glyphicon glyphicon-edit"></span>
   </td>
   <td>{{ProductName}}</td>
   <td>{{CategoryName}}</td>
   <td>{{SupplierName}}</td>
   <td>{{Price}}</td> 
 </tr>
 </table>
 </div>
 <h3 id="sumprice"></h3>
 
 </div>
 
 <script>
 function myValidator(item) {
     var obj = appml("Form01");
     obj.message = "validate";
     obj.validate = {};
     obj.validate.item = item.id;
     obj.validate.value = item.value;
     myFormController(obj);
 }
 function myListController($appml) {
     if ($appml.message == "done") {
         var i, x, tot = 0;
         x = $appml.data.records;
         for (i = 0; i < x.length; i++) {
             tot += Number(x[i].Price);
         }
         document.getElementById("sumprice").innerHTML =
         x.length + " products. Total price " + tot; 
     }
     if ($appml.message == "display") {
         if ($appml.display.name == "ProductName") {
             $appml.display.value = $appml.display.value.toUpperCase();
         }
     }
 }
 function myFormController($appml) {
     if ($appml.message == "ready") {
         $appml.dataSource = "local?model=model_productsform";
         return -1;
     }
     if ($appml.message == "loaded") {
         document.getElementById("Form01").style.display = "";
     }
     if ($appml.message == "validate") {
         if ($appml.validate.item == "Price") { 
             if (isNaN($appml.validate.value)) { 
                 $appml.setError(15, "Price must be a number");
                 return; 
             }
         }
     }
 }
 </script>
 
 </body>
 </html>

 

 

মডেল

এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল

লিস্ট মডেল


{
 "database" : {
 "connection" : "localmysql",
 "sql" : "SELECT ProductID,ProductName,CategoryName,SupplierName,Price FROM ((Products LEFT JOIN Suppliers ON Products.SupplierID=Suppliers.SupplierID) LEFT JOIN Categories ON Products.CategoryID=Categories.CategoryID)",
 "orderby" : "ProductName"
 },
 "filteritems" : [
 {"item" : "ProductName", "label" : "Name"},
 {"item" : "Products.SupplierID", "type" : "number", "hidden" : "true"},
 {"item" : "Suppliers.SupplierID", "label" : "Supplier"}, 
 {"item" : "Categories.CategoryID", "label" : "Category"}
 ],
 "sortitems" : [
 {"item" : "ProductName"}
 ]

 

 

ফরম মডেল


 

 {
 "database" : {
 "connection" : "localmysql",
 "sql" : "SELECT * FROM Products",
 "maintable" : "Products",
 "keyfield" : "ProductID"
 },
 "updateItems" : [
 {"item" : "ProductName"},
 {"item" : "SupplierID"},
 {"item" : "CategoryID"},
 {"item" : "Unit"},
 {"item" : "Price"}
 ]
 }

 

 

 

AppML কেস স্টাডি – গ্রাহকরা (AppML Case Study – Customers)

Huge Sell on Popular Electronics

এইচটিএমএল

এইচটিএমএল সোর্স:


 

<!DOCTYPE html>
 <html lang="en-US">
 <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">
 <h1>Customers</h1>
 
 <div id="Form01" class="jumbotron" style="display:none" appml-data="local?model=model_customersform"
                                                                 appml-controller="myFormController">
   <div appml-include-html="inc_formcommands.htm"></div>
   <div class="form-group">
     <label for="customername">CustomerName:</label>
     <input id="customername" class="form-control">
   </div>
   <div class="form-group">
     <label for="contactname">ContactName:</label>
     <input id="contactname" class="form-control">
   </div>
   <div class="form-group">
     <label for="address">Address:</label>
     <input id="address" class="form-control">
   </div>
     <div class="form-group">
     <label for="city">City:</label>
   <input id="city" class="form-control">
   </div>
   <div class="form-group">
     <label for="postalcode">PostalCode:</label>
     <input id="postalcode" class="form-control">
   </div>
   <div class="form-group">
     <label for="country">Country:</label>
   <  input id="country" class="form-control">
   </div>
 </div>
 
 <div appml-data="local?model=model_customerslist">
   <div appml-include-html="inc_listcommands.htm"></div>
   <div appml-include-html="inc_filter.htm"></div>
   <table class="table table-striped table-bordered">
   <tr>
     <th></th>
     <th>Customer</th>
     <th>City</th>
     <th>Country</th>
   </tr>
   <tr appml-repeat="records">
     <td style="cursor:pointer;width:34px;"
       onclick="appml('Form01').run({{CustomerID}});">
       <span class="glyphicon glyphicon-edit"></span>
     </td>
     <td>{{CustomerName}}</td>
     <td>{{City}}</td>
     <td>{{Country}}</td>
   </tr>
   </table>
 </div>
 
 </div>
 
 <script>
 function myFormController($appml) {
     if ($appml.message == "ready") {return -1; }
     if ($appml.message == "loaded") {
         document.getElementById("Form01").style.display = "";
     }
 }
 </script>
 
 </body>
 </html>

 

মডেল

এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল

লিস্ট মডেল


 

{
 "rowsperpage" : 10,
 "database" : {
 "connection" : "localmysql",
 "sql" : "SELECT * FROM Customers",
 "orderby" : "CustomerName"
 },
 "filteritems" : [
 {"item" : "CustomerName", "label" : "Customer"},
 {"item" : "City"},
 {"item" : "Country"}
 ],
 "sortitems" : [
 {"item" : "CustomerName", "label" : "Customer"},
 {"item" : "City"},
 {"item" : "Country"}
 ]
 }

 

ফরম মডেল


{
 "database" : {
 "connection" : "localmysql",
 "maintable" : "Customers",
 "keyfield" : "CustomerID",
 "sql" : "SELECT * FROM Customers"
 },
 "updateItems" : [
 {"item" : "CustomerName"},
 {"item" : "Address"},
 {"item" : "PostalCode"},
 {"item" : "City"},
 {"item" : "Country"}
 ]
 }

 

 

 

AppML কেস স্টাডি – JSON ফাইল (AppML Case Study – JSON Files)

Huge Sell on Popular Electronics

এইচটিএমএল

এইচটিএমএল সোর্স:


<<!DOCTYPE html>
<html lang="en-US">
<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=model_cd_from_json">
<h1>CD Collection</h1>
<h3>Extracted from an XML file</h3>
<div appml-include-html="inc_listcommands_nofilter.htm"></div>
<table class="table table-striped table-bordered">
<tr>
    <th>Title</th>
    <th>Artist</th>
    <th>Country</th>
</tr>
<tr appml-repeat="records">
    <td>{{Title}}</td>
    <td>{{Artist}}</td>
    <td>{{Country}}</td>
</tr>
</table>
</div>
</body>
</html>

 

 

মডেল

এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল


 

{
 "rowsperpage" : 7,
 "data" : {
    "type" : "jsonfile",
    "filename" : "cd_catalog.js",
    "record" : "cd",
    "items" : [
        {"name" : "Title", "nodename" : "title"},
        {"name" : "Artist", "nodename" : "artist"},
        {"name" : "Price", "nodename" : "price"}
    ]
  }
}

 

ফাইল

কমা দিয়ে পৃথক করা টেক্সট ফাইল:


{
"cd" : [
{ "title" : "Empire Burlesque", "artist" : "Bob Dylan", "price" : "10.90" },
{ "title" : "Hide your heart", "artist" : "Bonnie Tyler", "price" : "9.90" },
{ "title" : "Greatest Hits", "artist" : "Dolly Parton", "price" : "9.90" },
{ "title" : "Still got the blues", "artist" : "Bob Dylan", "price" : "10.20" },
{ "title" : "Eros", "artist" : "Eros Ramazzotti", "price" : "9.90" },
{ "title" : "One night only", "artist" : "Bee Gees", "price" : "10.90" },
{ "title" : "Sylvias Mother", "artist" : "Dr.Hook", "price" : "8.10" },
{ "title" : "Maggie May", "artist" : "Rod Stewart", "price" : "8.50" },
{ "title" : "Empire Burlesque", "artist" : "Bob Dylan", "price" : "10.90" },
{ "title" : "Hide your heart", "artist" : "Bonnie Tyler", "price" : "9.90" },
{ "title" : "Greatest Hits", "artist" : "Dolly Parton", "price" : "9.90" },
{ "title" : "Still got the blues", "artist" : "Bob Dylan", "price" : "10.20" },
{ "title" : "Eros", "artist" : "Eros Ramazzotti", "price" : "9.90" },
{ "title" : "One night only", "artist" : "Bee Gees", "price" : "10.90" },
{ "title" : "Sylvias Mother", "artist" : "Dr.Hook", "price" : "8.10" },
{ "title" : "Maggie May", "artist" : "Rod Stewart", "price" : "8.50" },
{ "title" : "Empire Burlesque", "artist" : "Bob Dylan", "price" : "10.90" },
{ "title" : "Hide your heart", "artist" : "Bonnie Tyler", "price" : "9.90" },
{ "title" : "Greatest Hits", "artist" : "Dolly Parton", "price" : "9.90" },
{ "title" : "Still got the blues", "artist" : "Bob Dylan", "price" : "10.20" },
{ "title" : "Eros", "artist" : "Eros Ramazzotti", "price" : "9.90" },
{ "title" : "One night only", "artist" : "Bee Gees", "price" : "10.90" },
{ "title" : "Sylvias Mother", "artist" : "Dr.Hook", "price" : "8.10" },
{ "title" : "Maggie May", "artist" : "Rod Stewart", "price" : "8.50" },
{ "title" : "Empire Burlesque", "artist" : "Bob Dylan", "price" : "10.90" },
{ "title" : "Hide your heart", "artist" : "Bonnie Tyler", "price" : "9.90" },
{ "title" : "Greatest Hits", "artist" : "Dolly Parton", "price" : "9.90" },
{ "title" : "Still got the blues", "artist" : "Bob Dylan", "price" : "10.20" },
{ "title" : "Eros", "artist" : "Eros Ramazzotti", "price" : "9.90" },
{ "title" : "One night only", "artist" : "Bee Gees", "price" : "10.90" },
{ "title" : "Sylvias Mother", "artist" : "Dr.Hook", "price" : "8.10" },
{ "title" : "Maggie May", "artist" : "Rod Stewart", "price" : "8.50" },
{ "title" : "Empire Burlesque", "artist" : "Bob Dylan", "price" : "10.90" },
{ "title" : "Hide your heart", "artist" : "Bonnie Tyler", "price" : "9.90" },
{ "title" : "Greatest Hits", "artist" : "Dolly Parton", "price" : "9.90" },
{ "title" : "Still got the blues", "artist" : "Bob Dylan", "price" : "10.20" },
{ "title" : "Eros", "artist" : "Eros Ramazzotti", "price" : "9.90" },
{ "title" : "One night only", "artist" : "Bee Gees", "price" : "10.90" },
{ "title" : "Sylvias Mother", "artist" : "Dr.Hook", "price" : "8.10" },
{ "title" : "Maggie May", "artist" : "Rod Stewart", "price" : "8.50" }
]
}

 

 

 

AppML কেস স্টাডি – এক্সএমএল ফাইল (AppML Case Study – XML Files)

Huge Sell on Popular Electronics

এইচটিএমএল

এইচটিএমএল সোর্স:


<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<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>
</head>
<body>
<div class="container" appml-data="appml.php?model=model_cd_from_xml">
<h1>CD Collection</h1>
<h3>Extracted from an XML file</h3>
<div appml-include-html="inc_listcommands_nofilter.htm"></div>
<table class="table table-striped table-bordered">
<tr>
<th>Title</th>
<th>Artist</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{Title}}</td>
<td>{{Artist}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
</body>
</html>

 

 

মডেল

এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল


{
 "rowsperpage" : 7,
 "data" : {
    "type" : "xmlfile",
    "filename" : "cd_catalog.xml",
    "record" : "CD",
    "items" : [
       {"name" : "Artist", "nodename" : "ARTIST"},
       {"name" : "Title", "nodename" : "TITLE"},
       {"name" : "Country", "nodename" : "COUNTRY"}
    ]
 }
}

 

 

ফাইল

কমা দিয়ে পৃথক করা টেক্সট ফাইল:


<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<PUBLISHED>1985</PUBLISHED>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<PUBLISHED>1988</PUBLISHED>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<PUBLISHED>1982</PUBLISHED>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<PUBLISHED>1990</PUBLISHED>
</CD>
<CD>
<TITLE>Eros</TITLE>
<ARTIST>Eros Ramazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<PUBLISHED>1997</PUBLISHED>
</CD>
<CD>
<TITLE>One night only</TITLE>
<ARTIST>Bee Gees</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.90</PRICE>
<PUBLISHED>1998</PUBLISHED>
</CD>
<CD>
<TITLE>Sylvias Mother</TITLE>
<ARTIST>Dr.Hook</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS</COMPANY>
<PRICE>8.10</PRICE>
<PUBLISHED>1973</PUBLISHED>
</CD>
<CD>
<TITLE>Maggie May</TITLE>
<ARTIST>Rod Stewart</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Pickwick</COMPANY>
<PRICE>8.50</PRICE>
<PUBLISHED>1990</PUBLISHED>
</CD>
<CD>
<TITLE>Romanza</TITLE>
<ARTIST>Andrea Bocelli</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.80</PRICE>
<PUBLISHED>1996</PUBLISHED>
</CD>
<CD>
<TITLE>When a man loves a woman</TITLE>
<ARTIST>Percy Sledge</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>8.70</PRICE>
<PUBLISHED>1987</PUBLISHED>
</CD>
<CD>
<TITLE>Black angel</TITLE>
<ARTIST>Savage Rose</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Mega</COMPANY>
<PRICE>10.90</PRICE>
<PUBLISHED>1995</PUBLISHED>
</CD>
<CD>
<TITLE>1999 Grammy Nominees</TITLE>
<ARTIST>Many</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Grammy</COMPANY>
<PRICE>10.20</PRICE>
<PUBLISHED>1999</PUBLISHED>
</CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<PUBLISHED>1995</PUBLISHED>
</CD>
<CD>
<TITLE>Big Willie style</TITLE>
<ARTIST>Will Smith</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<PUBLISHED>1997</PUBLISHED>
</CD>
<CD>
<TITLE>Tupelo Honey</TITLE>
<ARTIST>Van Morrison</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>8.20</PRICE>
<PUBLISHED>1971</PUBLISHED>
</CD>
<CD>
<TITLE>Soulsville</TITLE>
<ARTIST>Jorn Hoel</ARTIST>
<COUNTRY>Norway</COUNTRY>
<COMPANY>WEA</COMPANY>
<PRICE>7.90</PRICE>
<PUBLISHED>1996</PUBLISHED>
</CD>
<CD>
<TITLE>The very best of</TITLE>
<ARTIST>Cat Stevens</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Island</COMPANY>
<PRICE>8.90</PRICE>
<PUBLISHED>1990</PUBLISHED>
</CD>
<CD>
<TITLE>Stop</TITLE>
<ARTIST>Sam Brown</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>A and M</COMPANY>
<PRICE>8.90</PRICE>
<PUBLISHED>1988</PUBLISHED>
</CD>
<CD>
<TITLE>Bridge of Spies</TITLE>
<ARTIST>T'Pau</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Siren</COMPANY>
<PRICE>7.90</PRICE>
<PUBLISHED>1987</PUBLISHED>
</CD>
<CD>
<TITLE>Private Dancer</TITLE>
<ARTIST>Tina Turner</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Capitol</COMPANY>
<PRICE>8.90</PRICE>
<PUBLISHED>1983</PUBLISHED>
</CD>
<CD>
<TITLE>Midt om natten</TITLE>
<ARTIST>Kim Larsen</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Medley</COMPANY>
<PRICE>7.80</PRICE>
<PUBLISHED>1983</PUBLISHED>
</CD>
<CD>
<TITLE>Pavarotti Gala Concert</TITLE>
<ARTIST>Luciano Pavarotti</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>DECCA</COMPANY>
<PRICE>9.90</PRICE>
<PUBLISHED>1991</PUBLISHED>
</CD>
<CD>
<TITLE>The dock of the bay</TITLE>
<ARTIST>Otis Redding</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>7.90</PRICE>
<PUBLISHED>1987</PUBLISHED>
</CD>
<CD>
<TITLE>Picture book</TITLE>
<ARTIST>Simply Red</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Elektra</COMPANY>
<PRICE>7.20</PRICE>
<PUBLISHED>1985</PUBLISHED>
</CD>
<CD>
<TITLE>Red</TITLE>
<ARTIST>The Communards</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>London</COMPANY>
<PRICE>7.80</PRICE>
<PUBLISHED>1987</PUBLISHED>
</CD>
<CD>
<TITLE>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<PUBLISHED>1987</PUBLISHED>
</CD>
</CATALOG>

 

AppML কেস স্টাডি – টেক্সট ফাইল (AppML Case Study – Text Files)

Huge Sell on Popular Electronics

এইচটিএমএল

এইচটিএমএল সোর্স:


<!DOCTYPE html>
 <html lang="en-US">
 <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=model_cd_from_txt">
 <h1>CD Collection</h1>
 <h3>Extracted from an XML file</h3>
<div appml-include-html="inc_listcommands_nofilter.htm"></div>
 <table class="table table-striped table-bordered">
 <tr>
    <th>Title</th>
    <th>Artist</th>
    <th>Country</th>
 </tr>
 <tr appml-repeat="records">
    <td>{{Title}}</td>
    <td>{{Artist}}</td>
    <td>{{Country}}</td>
 </tr>
 </table>
 </div>
</body>
 </html>

 

মডেল

এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল


{
 "rowsperpage" : 7,
 "data" : {
    "type" : "csvfile",
    "filename" : "cd_catalog.txt",
    "items" : [
       {"name" : "Title", "index" : 1},
       {"name" : "Artist", "index" : 2},
       {"name" : "Price", "index" : 5}
    ]
 }
}

ফাইল

কমা দিয়ে পৃথক করা টেক্সট ফাইল:


Empire Burlesque,Bob Dylan,USA,Columbia,10.90,1985
Hide your heart,Bonnie Tyler,UK,CBS Records,9.90,1988
Greatest Hits,Dolly Parton,USA,RCA,9.90,1982
Still got the blues,Gary Moore,UK,Virgin records,10.20,1990
Eros,Eros Ramazzotti,EU,BMG,9.90,1997
One night only,Bee Gees,UK,Polydor,10.90,1998
Sylvias Mother,Dr.Hook,UK,CBS,8.10,1973
Maggie May,Rod Stewart,UK,Pickwick,8.50,1990
Empire Burlesque,Bob Dylan,USA,Columbia,10.90,1985
Hide your heart,Bonnie Tyler,UK,CBS Records,9.90,1988
Greatest Hits,Dolly Parton,USA,RCA,9.90,1982
Still got the blues,Gary Moore,UK,Virgin records,10.20,1990
Eros,Eros Ramazzotti,EU,BMG,9.90,1997
One night only,Bee Gees,UK,Polydor,10.90,1998
Sylvias Mother,Dr.Hook,UK,CBS,8.10,1973
Maggie May,Rod Stewart,UK,Pickwick,8.50,1990
Empire Burlesque,Bob Dylan,USA,Columbia,10.90,1985
Hide your heart,Bonnie Tyler,UK,CBS Records,9.90,1988
Greatest Hits,Dolly Parton,USA,RCA,9.90,1982
Still got the blues,Gary Moore,UK,Virgin records,10.20,1990
Eros,Eros Ramazzotti,EU,BMG,9.90,1997
One night only,Bee Gees,UK,Polydor,10.90,1998
Sylvias Mother,Dr.Hook,UK,CBS,8.10,1973
Maggie May,Rod Stewart,UK,Pickwick,8.50,1990
Empire Burlesque,Bob Dylan,USA,Columbia,10.90,1985
Hide your heart,Bonnie Tyler,UK,CBS Records,9.90,1988
Greatest Hits,Dolly Parton,USA,RCA,9.90,1982
Still got the blues,Gary Moore,UK,Virgin records,10.20,1990
Eros,Eros Ramazzotti,EU,BMG,9.90,1997
One night only,Bee Gees,UK,Polydor,10.90,1998
Sylvias Mother,Dr.Hook,UK,CBS,8.10,1973
Maggie May,Rod Stewart,UK,Pickwick,8.50,1990

 

 

Bootstrap Case: নেভিগেশান বার যোগ করা (Adding a Navigation Bar)

Huge Sell on Popular Electronics

শেখ মাহফুজুর রহমান

 

নেভিগেশান বার একটি নেভিগেশান বার হলো একটি নেভিগেশান হেডার যা পেজের উপরের দিকে যোগ করা হয়। বুটস্ট্র্যাপের মাধ্যমে একটি নেভিগেশান বারকে স্ক্রিনের সাইজ অনুযায়ী এক্সট্যান্ড অথবা কলাপ্স করা যায়। অর্থাৎ ডিভাইসের ধরণ অনুসারে সুবিধামতো নেভিগেশান বারকে সেটাপ করা যায়। <nav class="navbar navbar-default"> এর সাহাজ্যে একটি সাধারণ নেভিগেশান বার তৈরি করা যায়। নিচের উদাহরণে কিভাবে পেজের টপে নেভিগেশান বার যোগ করতে হয় তা দেখানো হয়েছেঃ


<body>
 <nav class="navbar navbar-default">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div>
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li> 
         <li><a href="#">Page 3</a></li> 
       </ul>
     </div>
   </div>
 </nav>
 <body>

 

নোটঃ এই টিউটোরিয়ালটির সবগুলো উদাহরণই একটি নেভিগেশান বার তৈরি করবে যা ছোট স্ক্রিনে অনেক বেশি জায়গা দখল করে (যাহোক, বড় স্ক্রিনে নেভিগেশান বারটি শুধু এক লাইনের হিসেবে দেখাবে - কারণ বুটস্ট্র্যাপ রেসপন্সিভ হয়ে থাকে)। ছোট স্ক্রিনের এই সমস্যাটি এই চ্যাপ্টারের সর্বশেষ উদাহরণে সমধান করা হবে। ইনভার্টেড নেভিগেশান বার আপনি যদি ডিফল্ট নেভিগেশান বারের স্টাইল পছন্দ না করেন, বুটস্ট্র্যাপে এজন্য একটি অল্টারনেটিভ রয়েছে। শুধু .navbar-inverse এর মধ্যে .navbar-default ক্লাসটি পরিবর্তন করে দিনঃ


<nav class="navbar navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div>
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li>
         <li><a href="#">Page 3</a></li>
       </ul>
     </div>
   </div>
 </nav>

 

ফিক্সড নেভিগেশান বার নেভিগেশান বারটি পেজের উপরে বা নিচে ফিক্সড হতে পারে। ফিক্সড নেভিগেশান বার পেজ স্ক্রল করা হলেও একটি জায়গায় ফিক্সড বা স্থির থাকে। .navbar-fixed-top ক্লাসটি নেভিগেশান বারকে পেজের উপরে ফিক্সড করে রাখেঃ


<nav class="navbar navbar-inverse navbar-fixed-top">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div>
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li>
         <li><a href="#">Page 3</a></li>
       </ul>
     </div>
   </div>
 </nav>

 

.navbar-fixed-bottom ক্লাসটি নেভিগেশান বারকে পেজের নিচের দিকে ফিক্সড করে দেয়ঃ


<nav class="navbar navbar-inverse navbar-fixed-bottom">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div>
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li>
         <li><a href="#">Page 3</a></li>
       </ul>
     </div>
   </div>

 

ড্রপডাউনসহ নেভিগেশান বার নেভিগেশান বার ড্রপডাউন মেন্যুকেও ধারণ করতে পারে। নিচের উদাহরণটি "Page 1" বাটনের জন্য একটি ড্রপডাউন মেন্যু যোগ করেঃ


<nav class="navbar navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div>
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li class="dropdown">
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
           <span class="caret"></span></a>
           <ul class="dropdown-menu">
             <li><a href="#">Page 1-1</a></li>
             <li><a href="#">Page 1-2</a></li>
             <li><a href="#">Page 1-3</a></li>
           </ul>
         </li>
         <li><a href="#">Page 2</a></li>
         <li><a href="#">Page 3</a></li>
       </ul>
     </div>
   </div>
 </nav>

 

রাইট-অ্যালাইন্ড নেভিগেশান বার .navbar-right ক্লাসটি নেভিগেশান বার বাটনগুলোকে পেজের ডানদিকে অ্যালাইন করতে ব্যবহৃত হয়। নিচের উদাহরণে আমরা নেভিগেশান বারের ডান দিকে একটি "Sign Up" এবং একটি "Login" বাটন যোগ করি। প্রত্যেকটি নতুন বাটনে আমরা একটি গ্লাইফিকোনও যোগ করিঃ


<nav class="navbar navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div>
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li>
         <li><a href="#">Page 3</a></li>
       </ul>
       <ul class="nav navbar-nav navbar-right">
         <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
         <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
       </ul>
     </div>
   </div>
 </nav>

 

নেভিগেশান বারকে কলাপস করা নেভিগেশান বার একটি ছোট স্ক্রিনে( যেমন মোবাইল) অনেক বেশি জায়গা নিয়ে নেয়। আমদের উচিত নেভিগেশান বারটিকে কলাপস বা হাইড করে রাখা এবং যখন দরকার তখন দেখানো। নিচের উদাহরণে নেভিগেশান বারটি উপরের ডান দিকের একটি বাটন দ্বারা প্রতিস্থাপিত হয়েছে। যখন বাটনটিতে ক্লিক করা হয় তখনই নেভিগেশান বারটি দেখা যায়ঃ


<nav class="navbar navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" 
       data-target="#myNavbar">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span> 
       </button>
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div class="collapse navbar-collapse" id="myNavbar">
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li> 
         <li><a href="#">Page 3</a></li> 
       </ul>
       <ul class="nav navbar-nav navbar-right">
         <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
         <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
       </ul>
     </div>
   </div>
 </nav>

Bootstrap Case: একটি মেনু যোগ করার পদ্ধতি (Adding a Menu)

Huge Sell on Popular Electronics

মেনু

অধিকাংশ ওয়েব পেইজ এর ই কিছু Menu রয়েছে।

Html এ, একটি মেনু প্রায়ই একটি unordered তালিকা <ul> এর মধ্যে সংজ্ঞায়িত করা হয়।

উদাহরনণঃ


<ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Menu 1</a></li>
   <li><a href="#">Menu 2</a></li>
   <li><a href="#">Menu 3</a></li>
 </ul>

 

Bootstrap উপরের Menu প্রদর্শনের জন্য দুইটি উপায় অবলম্বন করে, যেমনঃ tabs and pills.

Tabs

Tabs নির্মিত হয় <ul class="nav nav-tabs"> নিয়ে।

বিঃদ্রঃ এ ছাড়াও বর্তমান পেইজেও <li class="active"> চিহ্নিত ।

নীচের উদাহরণ গুলো navigation tabs তৈরি করেঃ

উদাহরনঃ


<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
 </ul>

Tabs With Dropdown

ট্যাব গুলোতে dropdown Menu রাখা যায়।

নিম্নলিখিত উদাহরণে "মেনু 1" এ একটি ড্রপডাউন মেনু যোগ করা হয়েছে।
উদাহরনঃ


<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li><a href="#">Submenu 1-1</a></li>
    <li><a href="#">Submenu 1-2</a></li>
    <li><a href="#">Submenu 1-3</a></li>
    </ul>
    </li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
 </ul>

Pills

Pills নির্মিত হয় <ul class="nav nav-pills"> দ্বারা । এ ছাড়াও <li class="active"> বর্তমান page এ চিহ্নিত ।
উদাহরনঃ


<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
 </ul>

Vertical Pills

Pills লম্বালম্বি ভাবেও প্রদর্শিত হতে পারে। এই ক্ষেত্রে শুধু “.nav-stacked” class টি ব্যবহার করতে হবে।

নিম্নলিখিত উদাহরণে উলম্ব Pill Menu টিকে শেষ কলামের মধ্যে রাখা হয়েছে। তাই বড় পর্দায় মেনুটি ডান পাশে প্রদর্শিত হবে। কিন্তু একটি ছোট পর্দায়, বিষয়বস্তু স্বয়ংক্রিয়ভাবে একটি একক কলামের বিন্যাস মধ্যে নিজেই সমন্বয় করে নিবে।

উদাহরনঃ


 <div class="col-md-3">
     <ul class="nav nav-pills nav-stacked">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Menu 1</a></li>
         <li><a href="#">Menu 2</a></li>
         <li><a href="#">Menu 3</a></li>
     </ul>
 </div>

 

 

Pills With Dropdown Menu

Pills এর মধ্যেও Dropdown রাখা যায়।

নিম্নলিখিত উদাহরণে "মেনু 1" এ একটি ড্রপডাউন মেনু যোগ করা হয়েছে।

উদাহরনঃ


 <ul class="nav nav-pills nav-stacked">

 <li class="active"><a href="#">Home</a></li>
     <li class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
     <span class="caret"></span></a>
   <ul class="dropdown-menu">
     <li><a href="#">Submenu 1-1</a></li>
     <li><a href="#">Submenu 1-2</a></li>
     <li><a href="#">Submenu 1-3</a></li>
   </ul>
 </li>

     <li><a href="#">Menu 2</a></li>
     <li><a href="#">Menu 3</a></li>

 </ul>

 

Bootstrap Case: একাধিক কলাম এর বিন্যাস (Multicolumn Layout)

Huge Sell on Popular Electronics

একাধিক কলাম এর বিন্যাস

Bootstrap ব্যবহার করে সহজেই multicolumn layout তৈরি করা যায় ।

Bootstrap একটি প্রতিক্রিয়াশীল এবং mobile-first 12-column grid system দিয়ে থাকে।

বিভিন্ন স্ক্রীন সাইজে কলাম গুলো নিজেদের মধ্যে পুনরায় সজ্জিত হয়।

Grid এর লিছু নিয়মাবলিঃ

  • একটি ধারক দিয়ে শুরু করুন ।
  • <div class="row"> দ্বারা এর মধ্যে সারি তৈরি করুন।
  • দ্রুত Grid column তৈরির জন্য কিছু পূর্বনির্ধারিত ক্লাস যেমন .col-md-4, .col-md-6 ইত্যাদি ব্যবহার করুন।
  • আপনার ইচ্ছা অনুযায়ী যেকোনো ১২ টি কলাম জুড়ে Grid কলাম তৈরি হয়।যেমনঃ তিনটি সমান কলামে তিনটি .col-MD-4 কলাম ব্যবহার করতে হবে
  • .col - *- * ক্লাস এর মধ্যের সংখ্যা গুলো সবসময় প্রতিটি সারির 12 পর্যন্ত যোগ করা উচিত।
  • বিষয়বস্তু Grid কলাম এর ভিতরে স্থাপন করা হয়।

উদাহরনঃ


 <div class="row">

      <div class="col-md-3">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod              
           tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>

      <div class="col-md-3">
           <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
           ut aliquip ex ea commodo consequat.</p>
      </div>

      <div class="col-md-3">
           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
           accusantium doloremque laudantium, totam rem aperiam.</p>
      </div>

      <div class="col-md-3">
           <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae 
           vitae dicta sunt explicabo.</p>
      </div>

 </div>

ভিন্ন প্রশস্ততা বিশিষ্ট কলাম

এখন আমরা ভিন্ন ভিন্ন প্রশস্ততা বিশিষ্ট কলাম তৈরি করতে চাই।

নিম্নলিখিত উদাহরণটি একটি তিন কলাম বিশিষ্ট কাঠামো তৈরি করে যেখানে মাঝখানের কলামটি প্রথম ও দ্বিতীয় কলাম থেকে বেশি প্রশস্থ।

উদাহরনঃ


<div class="row">

     <div class="col-md-3">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
          tempor incididunt ut labore et dolore magna aliqua.</p>
     </div>

     <div class="col-md-6">
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
          ut aliquip ex ea commodo consequat.</p>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
          accusantium doloremque laudantium, totam rem aperiam.</p>
     </div>

     <div class="col-md-3">
          <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
          dicta sunt explicabo.</p>
     </div>

 </div>

 

Bootstrap Case: বাটন ও আইকন যোগ করা (Adding Button and Icon)

Huge Sell on Popular Electronics

বাটন যুক্ত করা

বাটন ক্লাস গুলোতে <a>, <button>, or <input> এই উপাদান সমুহে ব্যবহৃত হতে পারে।

নিম্নলিখিত উদাহরণে Jumbotron এর মধ্যে একটি বড় এবং হালকা নীল "Search" বাটন দেওয়া হল। এই effect টি পেতে হলে আমাদের .btn-lg এবং .btn-info ক্লাস গুলো ব্যবহার করতে হবে।
উদাহরনঃ


 <div class="jumbotron">
     <h1>My first Bootstrap website!</h1>
     <p>This page will grow as we add more and more components from Bootstrap...</p>
     <a href="#" class="btn btn-info btn-lg">Search</a>
 </div

বিঃদ্রঃ কেন আমরা লিঙ্কের href attribute এর মধ্যে একটি # রাখলাম?

খালি পেজ অথবা "404" বার্তা না পেতে চাইলে আমরা লিঙ্ক হিসেবে # ব্যবহার করব। বাস্তবে অবশ্যই আমরা "Search” পেজ এ আসল লিঙ্ক ব্যবহার করব।

 

আইকন যুক্ত করা

Bootstrap ২০০ Glyphicons দিয়ে থাকে।

Glyphicons প্রদর্শন করতে লিখুনঃ


<span class="glyphicon glyphicon-print"></span>

কোড লাইন উপরে একটি মুদ্রণ আইকন প্রদর্শন করবে।

নিম্নলিখিত উদাহরণে "Search" বাটনে একটি সার্চ আইকন যুক্ত করা হয়েছেঃ


 <div class="jumbotron">
      <h1>My first Bootstrap website!</h1>
      <p>This page will grow as we add more and more components from Bootstrap...</p>
      <a href="#" class="btn btn-info btn-lg">
      <span class="glyphicon glyphicon-search"></span> Search
      </a>
 </div>

 

Bootstrap Case: আমার প্রথম বুটস্ট্র্যাপ ওয়েবসাইট (My First Bootstrap Website)

Huge Sell on Popular Electronics

অনুবাদ করেছেন Abu Jubair Mahin

 

স্ক্র্যাচ থেকে একটি বুটস্ট্র্যাপ ওয়েব পৃষ্ঠা তৈরি করুন

নিচের পৃষ্ঠায় Scratch (স্ক্র্যাচ) থেকে একটি বুটস্ট্র্যাপ ওয়েবসাইট কিভাবে নির্মাণ করা হয় সেটা প্রদর্শন করা হবে

আমরা একটি সহজ HTML পৃষ্ঠা দিয়ে শুরু করব, এবং পরে আমরা অনেক বেশি বেশি components সেখানে যোগ করব,
যতক্ষণ না আমরা একটি সম্পূর্ণরূপে কার্যকরী এবং প্রতিক্রিয়াশীল ওয়েবসাইট পাব ।

আমরা নিম্নলিখিত HTML পৃষ্ঠা দিয়ে শুরু করব:


 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Bootstrap Case</title>
 <meta charset="utf-8">
 </head>
<body>
     <h1>My first Bootstrap website!</h1>
     <p>This page will grow as we add more and more components from Bootstrap...</p>
     <p>This is a paragraph.</p>
     <p>This is another paragraph.</p>
     <p>This is a paragraph.</p>
     <p>This is another paragraph.</p>
 </body>
 </html>

 

 

Bootstrap CDN যোগ এবং Containers এর ভিতরে বিভিন্ন উপাদান যুক্ত করা

আমাদের প্রথম কাজ হল Bootstrap CDN যুক্ত করা এবং jQuery তে একটি লিঙ্ক যুক্ত করা

পরবর্তীতে আমরা <body> এর ভিতর সকল HTML উপাদানগুলো যোগ করব এবং এর ভিতরে <div class="container"> ও থাকবেঃ

উদাহরনঃ


 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Bootstrap Case</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </head>
 <body>
 <div class="container">
      <h1>My first Bootstrap website!</h1>
      <p>This page will grow as we add more and more components from Bootstrap...</p>
      <p>This is another paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
 </div>
 </body>
 </html>

 

 

টিপস: সম্পূর্ণ স্কিনটা পেইজ দিয়ে Fill করতে চাইলে .container কে পরিবর্তন করে .container-fluid লিখুনঃ

উদাহরনঃ


 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Bootstrap Case</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </head>
 <body>
<div class="container-fluid">
     <h1>My first Bootstrap website!</h1>
     <p>This page will grow as we add more and more components from Bootstrap...</p>
     <p>This is another paragraph.</p>
     <p>This is a paragraph.</p>
     <p>This is another paragraph.</p>
 </div>
 </body>
 </html>

 

ধন্যবাদ , আশা করি বুঝতে পেরেছেন।