Tag Archives: JSON

AppML : Application Modeling Language

অ্যাপ এমএল স্থাপত্য (AppML Architecture)

Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

নাজমুল ইসলাম

আধুনিক ওয়েব স্থাপত্য

AppML সমসাময়িক কৌশল এবং আধুনিক ওয়েব ডেভেলপমেন্ট এর ধারনাকে একত্রিত করে।

AppML গতি, সরলতা, এবং কম খরচে উপর নজর দেয়:

  • সেবামূলক MVC আর্কিটেকচার
  • অত্যন্ত কম ব্যান্ডউইথ খরচ
  • ক্লাউড কম্পিউটিং জন্য অনুকূল
  • উপস্থাপনা বা প্রেজেন্টেশন থেকে কন্টেন্টসময়হ সম্পূর্ণ আলাদা করা
  • ইন্টেলিজেন্ট ঘোষণামূলক প্রোগ্রামিং
  • দ্রুত এবং তৎপর ওয়েব ডেভেলপমেন্ট
  • উচ্চ আকার পরিবর্তনযোগ্য এবং পরীক্ষাসক্ষম
  • কনফিগারেশন এবং পুনরায় কনফিগার করা সহজ
  • ব্যবহারকারীর অ্যাকাউন্ট এবং কর্মের জন্য নিপুণ সহায়তা

 

MVC আর্কিটেকচার

AppML এ MVC আর্কিটেকচার ব্যবহার

MVC বলতে বোঝায় মডেল, ভিউ, কন্ট্রোলার

  • মডেল আপনার অ্যাপ্লিকেশন সম্পর্কে বর্ণনা দেয়
  • ভিউ আপনার ডাটা প্রদশন করে
  • কন্ট্রোলার আপনার অ্যাপ্লিকেশনকে নিয়ন্ত্রণ করে

 

উইকিপিডিয়া: মডেল, ভিউ, কন্ট্রোলার

মডেল - কেবল JSON

মডেল অ্যাপ্লিকেশনকে বর্ণনা করে

মডেল বিভিন্ন হার্ডওয়্যার এবং সফটওয়্যার প্ল্যাটফর্ম এ পুনরায় ব্যবহার করা যায় (সার্ভার, পিসি, আইফোন, ট্যাবলেট, ইত্যাদি)

মডেল উপস্থাপনা বা ইউজার ইন্টারফেস (UI) এর সাথে সংশ্লিষ্ট নয়।

মডেল JSON এর মধ্যে লিখিত হয়:

Model

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

 

ভিউ - কেবল এইচটিএমএল

ভিউ হচ্ছে ডাটা (এবং ইনপুট) দেখানোর জন্য  ইউজার ইন্টারফেস (UI)

ভিউ  HTML এবং CSS এ লেখা হয়:

এইচটিএমএল ভিউ

<!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="local?model=model_customers">
 <h1>Customers</h1>
 <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>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>

 

 

নিয়ামক (কন্ট্রোলার) - ক্লায়েন্ট এবং / অথবা সার্ভার স্ক্রিপ্ট

একটি ক্লায়েন্ট স্ক্রিপ্ট হচ্ছে একটি ওয়েভ পেজ যা অ্যাপ্লিকেশনকে নিয়ন্ত্রণ করতে পারে।

  • অ্যাপ এমএল মেথড এ সঙ্গায়িত ডাটা প্রদর্শন করতে পারে
  • অ্যাপ এমএল এইচটিএমএল অ্যাট্রিবিউট এ সঙ্গায়িত ডাটা প্রদর্শন করতে পারে
  • অ্যাপ এমএল অ্যাপ্লিকেশন এইচটিএমএল এ কারো সহায়তা ছাড়াই চালু হতে পারে (লুকানো ভাবে)
  •  (ঐচ্ছিক) অ্যাপ এমএল ওয়েব সার্ভার থেকে মডেল ডাটার জন্য অনুরোধ করতে পারে (এসকিউএল সার্ভার)।
  • (ঐচ্ছিক) অ্যাপ এমএল ব্যবহারকারীরা ডাটা সম্পাদনা বা পরিবর্তন করতে পারে।
  • (ঐচ্ছিক) অ্যাপ এমএল ওয়েব সার্ভারে ডাটা প্রদান করতে পারে।

 

সার্ভার স্ক্রিপ্ট অ্যাপ্লিকেশনকে নিন্মক্তভাবে নিয়ন্ত্রণ করতে পারে :

  • গ্রাহকের (ব্রাউজার) কাছ থেকে অনুরোধ গ্রহণ করে
  • গ্রাহককে ডাটা ফেরত দিয়ে
  • গ্রাহকের কাছ থেকে ডাটা গ্রহণ করে
  • সার্ভার এর ডাটা আপডেট করে
  • অনুমোদন ও নিরাপত্তা তদারকী করে

 

প্রোগ্রামিং এর শিল্প

আবেদন আকার এবং কম জটিলতা রাখা, সকল প্রোগ্রামিং এর প্রধান সমস্যা।

কম্পিউটার অ্যাপ্লিকেশন এর জটিলতা নিয়ন্ত্রণ, প্রোগ্রামিং এর সঠিক কৌশল।

ঘোষণামূলক প্রোগ্রামিং

সফটওয়্যার উন্নয়ন প্রায়শই সময়সীমা এবং বাজেটের জন্য ক্ষতিগ্রস্থ হয়। সম্পন্ন সফটওয়্যার এ প্রায়ই প্রচুর কোডিং সমস্যা থাকে। এর কারণ হচ্ছে কোড উন্নয়ন, পরীক্ষা করা এবং পরিচালনা করা কঠিন।

কোডিং এর ক্ষেত্রে আপনাকে কিভাবে করতে হবে থেকে কি করতে হবে তা বর্ণনা করার উপর বেশি গুরুত্ব দিতে হবে।

অ্যাপ এমএল এ মডেল এবং ভিউ এ আপনার অ্যাপ্লিকেশন ঘোষণা করতে হবে।

অ্যাপ এমএল এ খুব কমই (অনেক সময় কিছুই নয়) কোডিং করতে হয়।

 

উইকিপিডিয়া: ঘোষণামূলক প্রোগ্রামিং

 

দ্রুত এবং তৎপর এপ্লিকেশন উন্নয়ন (ডেভেলপমেন্ট)

কম্পিউটার অ্যাপ্লিকেশন এর জটিলতা নিয়ন্ত্রণ, প্রোগ্রামিং এর সঠিক কৌশল।

আবেদন আকার এবং কম জটিলতা রাখা, সকল প্রোগ্রামিং এর প্রধান সমস্যা।

RAD হচ্ছে একটি সফটওয়্যার ডেভেলপমেন্ট মেথড যা দ্রুত প্রোটোটাইপিং এর উদ্দেশ্যে নুন্যতম পরিকল্পনা ব্যবহার করে।

অ্যাপ এমএল অতিদ্রুত প্রোটোটাইপিং সরবরাহ করে, ঐতিহ্যগত উন্নয়ন পদ্ধতির তুলনায় ১০০ গুণ দ্রুত।

অ্যাপ্লিকেশন প্রোটোটাইপ অ্যাপ্লিকেশন মডেল থেকে কোন কোডিং ছাড়াই সরাসরি চালু হতে পারে।

উইকিপিডিয়া: দ্রুত এপ্লিকেশন ডেভেলপমেন্ট

এজাইল সফটওয়্যার উন্নয়ন (Agile software development) হচ্ছে একটি ধাপে ধাপে উন্নয়নের একটি পদ্ধতি, যেখানে ব্যবহারকারী এবং ডেভেলপারদের প্রত্যেক্ষ সহযোগিতায় সমাধান তৈরি করা হয়।

অ্যাপ এমএল দিয়ে অ্যাপ্লিকেশন ধাপে ধাপে  অল্প বৃদ্ধি করে, প্রোটোটাইপ থেকে সম্পন্ন অ্যাপ্লিকেশন লেখা যেতে পারে।

উইকিপিডিয়া: তৎপর সফটওয়্যার ডেভেলপমেন্ট

 

চলবে (To be continue)

 

জেসন | JSON

জাভাস্ক্রিপ্ট অবজেক্ট নটেশন ভূমিকা (JSON – Introduction)

Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

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

 

জেএসওএন(JSON) জাভাস্ক্রিপ্ট অবজেক্টের মূল্যায়ন করে

জেএসওএন ফরম্যাট সিনট্যাক্সভাবে জাভাস্ক্রিপ্ট অবজেক্টের কোডের অনুরূপ। সাদৃশ্য থাকায় জেএসওএন ডাটাকে নেটিভ জাভাস্ক্রিপ্ট অবজেক্টে রূপ দিতে জাভাস্ক্রিপ্ট পারসার(এক্সএমএলের মত) ব্যবহার না করে আদর্শ জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করে থাকে।

 

নিচের কোডগুলো ব্যবহার করে এই উদাহরণটি পরীক্ষা করে দেখা যেতে পারে

জেএসওএন উদাহরণ, 

 <!DOCTYPE html>
 <html>
 <body>
 
 <h2>JSON Object Creation in JavaScript</h2>
 
 <p id="demo"></p>
 
 <script>
 var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}';
 
 var obj = JSON.parse(text);
 
 document.getElementById("demo").innerHTML =
 obj.name + "<br>" +
 obj.street + "<br>" +
 obj.phone;
 </script>
 
 </body>
 </html>

 

 

এটি অনেকটাই এক্সএমএলের মত কারণ

  • এক্সএমএল ও জেএসওএন উভয়ই আত্মবিবৃতি মূলক অর্থাৎ মানুষের দ্বারা পঠনযোগ্য।
  • এক্সএমএল ও জেএসওএন উভয়ই স্তরবিন্যাসগত (মানের ভেতর মান)।
  • এক্সএমএল ও জেএসওএন উভয়ের ক্ষেত্রেই পারসার ব্যবহার করা যায় এবং বিভিন্ন প্রোগ্রামিং ভাষায় ব্যবহৃত হতে পারে।
  • এক্সএমএল ও জেএসওএন উভয়ের ক্ষেত্রেই XMLHttpRequest প্রয়োগযোগ্য হতে পারে।

 

এটি অনেকক্ষেত্রে এক্সএমএলের মত নয় কারণ

 

  • জেএসওএন এন্ড ট্যাগ ব্যবহার করে না।
  • জেএসওএন একটু খাটো।
  • জেএসওএন দ্রুত লিখা ও পড়া যায়।
  • জেএসওএন অ্যারি(arrays) ব্যবহার করতে পারে।

সবচেয়ে বড় পার্থক্য হল, এক্সএমএলকে এক্সএমএল পারসার দ্বারা খণ্ডিত করতে হয় কিন্তু জেএসওএনকে আদর্শ জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করে খণ্ডিত করতে হয়।

 

 

 

জেএসওএন কেন?

 

এজাক্স এপ্লিকেশনে জেএসওএন ব্যবহার এক্সএমএল এরচেয়ে দ্রুত ও সহজ।

 

এক্সএমএল ব্যবহার করে

 

  • এক্সএমএল ডকুমেন্ট আনতে হয়,
  • পুরো ডকুমেন্টের লুপে এক্সএমএল ডোম (XML DOM) ব্যবহার করতে হয়,
  • মান নির্ণয় ও চলকে সংরক্ষণ করতে হয়,

 

জেএসওএন ব্যবহার করে,

  • একটি জেএসওএন স্ট্রিং বের করতে হয়,
  • জেএসওএন ব্যবহার করে সেই স্ট্রিংকে খণ্ডিত করতে হয়।

 

 

 

জেসন | JSON

জাভাস্ক্রিপ্ট অবজেক্ট নটেশন কর্মপ্রণালীঃ JSON How To

Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

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

জেএসওএন এর একটি গুরুত্বপূর্ণ ব্যবহার হল ওয়েব সার্ভার থেকে তথ্য বা ডাটা পড়া ও ওয়েব পেজে তা দেখানো। কাজ সহজ করার স্বার্থে ফাইলের পরিবর্তে কোন স্ট্রিংকে ইনপুট হিসেবে ব্যবহার করেও এটি করা যায়।

জেএসওএন উদাহরণঃ অবজেক্ট থেকে স্ট্রিং

জাভাস্ক্রিপ্ট স্ট্রিং তৈরি করা যাক যেটিতে জেএসওএন সিনট্যাক্স আছে,

var text = '{ "employees" : [' +
 '{ "firstName":"John" , "lastName":"Doe" },' +
 '{ "firstName":"Anna" , "lastName":"Smith" },' +
 '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

 

 

জেএসওএন সিনট্যাক্স, জাভাস্ক্রিপ্ট সিনট্যাক্সের একটি সাবসেট। JSON.parse(text) নামক জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করে জেএসওএন টেক্সটকে জাভাস্ক্রিপ্ট অবজেক্টে পরিনত করা যায়।

var obj = JSON.parse(text);

 

 

পেজে নতুন জাভাস্ক্রিপ্ট অবজেক্ট ব্যবহার করা যাক,

<p id="demo"></p>
<script>
 document.getElementById("demo").innerHTML =
 obj.employees[1].firstName + " " + obj.employees[1].lastName;
 </script>

 

eval() এর ব্যবহার

পূর্ববর্তী ব্রাউজার যাদের JSON.parse ব্যবহারের সুযোগ নেই তাদের জন্য জেএসওএন টেক্সটকে জাভাস্ক্রিপ্ট অবজেক্টে পরিনত করতে eval() ব্যবহার করা একটি উপায়।
উদাহরণ,

var obj = eval ("(" + text + ")");

 

এখানে বলা উচিৎ, eval() ফাংশন যেকোনো জাভাস্ক্রিপ্টকে কম্পাইল ও সম্পাদন করতে পারে, যেটি অনেক নিরাপত্তাজনিত সমস্যা সৃষ্টি করে, তাই একে এড়িয়ে চলাই ভাল।
জেএসওএন টেক্সটকে জাভাস্ক্রিপ্ট অবজেক্টে পরিনত করতে জেএসওএন পারসার ব্যবহার করা উচিৎ, জেএসওএন পারসার কেবল জেএসওএন টেক্সটকে বুঝতে পারে, স্ক্রিপ্টকে কম্পাইল করে না, ব্রাউজারে যা নেটিভ জেএসওএন সাপোর্ট দেয়, জেএসওএন পারসার অনেকটা দ্রুতও। প্রধান প্রধান যেসব ব্রাউজারে নেটিভ জেএসওএন সাপোর্ট সংযুক্ত, এবং সর্বাধুনিক ECMAScript (JavaScript) সম্পন্ন, সেগুলো হল,

Web Browsers Support

  • Firefox 3.5
  • Internet Explorer 8
  • Chrome
  • Opera 10
  • Safari 4

পূর্ববর্তী ব্রাউজারগুলোর জন্য একটি জাভাস্ক্রিপ্ট লাইব্রেরী এখানে আছে, https://github.com/douglascrockford/JSON-js

Douglas Crockford জেএসওএন ফরম্যাটকে গড়ে তুলেছেন।

জেসন | JSON

জাভাস্ক্রিপ্ট অবজেক্ট নটেশন উদাহরণ (JSON Example)

Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

এই উদাহরণটি পিএইচপি এবং মাইএসকউএল দ্বারা চালিত ওয়েব সার্ভার থেকে জেএসওএন ডাটা পড়ে।

<!DOCTYPE html>
 <html>
 <body>
 
 <h1>Customers</h1>
 <div id="id01"></div>
 
 <script>
 var xmlhttp = new XMLHttpRequest();
 var url = "http://www.w3schools.com/website/customers_mysql.php";
 
 xmlhttp.onreadystatechange=function() {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         myFunction(xmlhttp.responseText);
     }
 }
 xmlhttp.open("GET", url, true);
 xmlhttp.send();
 
 function myFunction(response) {
     var arr = JSON.parse(response);
     var i;
     var out = "<table>";
 
     for(i = 0; i < arr.length; i++) {
         out += "<tr><td>" +
         arr[i].Name +
         "</td><td>" +
         arr[i].City +
         "</td><td>" +
         arr[i].Country +
         "</td></tr>";
     }
     out += "</table>"
     document.getElementById("id01").innerHTML = out;
 }
 </script>
 
 </body>
 </html>

সার্ভার এ পিএইচপি কোড

সার্ভারে এই পিএইচপি কোড চালিত  হয়

<?php
 header("Access-Control-Allow-Origin: *");
 header("Content-Type: application/json; charset=UTF-8");
 
 $conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
 
 $result = $conn->query("SELECT CompanyName, City, Country FROM Customers");
 
 $outp = "[";
 while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
     if ($outp != "[") {$outp .= ",";}
     $outp .= '{"Name":"'  . $rs["CompanyName"] . '",';
     $outp .= '"City":"'   . $rs["City"]        . '",';
     $outp .= '"Country":"'. $rs["Country"]     . '"}'; 
 }
 $outp .="]";
 
 $conn->close();
 
 echo($outp);
 ?>

 

স্টাইল ভার্সন

Customers.html

<!DOCTYPE html>
 <html>
 
 <head>
 <style>
 h1 {
     border-bottom: 3px solid #cc9900;
     color: #996600;
     font-size: 30px;
 }
 table, th , td {
     border: 1px solid grey;
     border-collapse: collapse;
     padding: 5px;
 }
 table tr:nth-child(odd) {
     background-color: #f1f1f1;
 }
 table tr:nth-child(even) {
     background-color: #ffffff;
 }
 </style>
 </head>
 
 <body>
 
 <h1>Customers</h1>
 <div id="id01"></div>
 
 <script>
 var xmlhttp = new XMLHttpRequest();
 var url = "http://www.w3schools.com/website/customers_mysql.php";
 
 xmlhttp.onreadystatechange=function() {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         myFunction(xmlhttp.responseText);
     }
 }
 xmlhttp.open("GET", url, true);
 xmlhttp.send();
 
 function myFunction(response) {
     var arr = JSON.parse(response);
     var i;
     var out = "<table>";
 
     for(i = 0; i < arr.length; i++) {
         out += "<tr><td>" +
         arr[i].Name +
         "</td><td>" +
         arr[i].City +
         "</td><td>" +
         arr[i].Country +
         "</td></tr>";
     }
     out += "</table>"
     document.getElementById("id01").innerHTML = out;
 }
 </script>
 
 </body>
 </html>

 

 

AppML : Application Modeling Language

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

Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

এইচটিএমএল

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

<<!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" }
]
}

 

 

 

জেসন | JSON

জাভাস্ক্রিপ্ট অবজেক্ট নটেশন ফাংশন ফাইল (JSON Function Files)

Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেএসওএন ফাংশন ফাইল

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

জেএসওএন ফাংশন ফাইল (JSON Function Files)

জেএসওএনএর একটি সাধারণ প্রয়োগ হল ওয়েব সার্ভার থেকে ডাটা পড়া ও ওয়েব পেজে তা প্রদর্শন করা। এই অধ্যায়ে চারটি ছোট ছোট ধাপে দেখানো হবে কীভাবে ফাংশন ফাইল ব্যবহার করে জেএসওএন ডাটা পড়া হয়।

জেএসওএন উদাহরণঃ এই উদাহরণে myTutorials.js থেকে একটি মেনু পড়া হবে ও সেটিকে ওয়েবপেজে দেখানো হবে।

<div id="id01"></div>
<script>
function myFunction(arr) {
     var out = "";
     var i;
     for(i = 0; i<arr.length; i++) {
     out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>';
     }
     document.getElementById("id01").innerHTML = out;
}
</script>
<script src="myTutorials.js"></script>

 

 

উদাহরণের ব্যাখ্যা

প্রথমতঃ অবজেক্টের শ্রেণীবিন্যাস তৈরি করা হয়ঃ
অক্ষরভিত্তিক শ্রেণীবিন্যাস নির্ধারণ করে কোনো অবজেক্টের শ্রেণীবিন্যাস তৈরি করা হয়। প্রত্যেকটি অবজেক্টের দুটি বৈশিষ্ট্য নির্ধারণ করে দেয়া হয়, display এবং url । শ্রেণীবিন্যাসকে myArray নাম দেয়া হয়।
myArray

var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
]

 

দ্বিতীয়তঃ শ্রেণীবিন্যাস দেখানোর জন্য জাভাস্ক্রিপ্টের একটি ফাংশন তৈরি করা হয়ঃ myFunction() নামের ফাংশন তৈরি করা হয় যা থেকে অবজেক্টগুলো দৃশ্যমান হয় ও এইচটিএমএল লিঙ্ক জাতীয় উপাদান প্রদর্শন করে।

myFunction()

 

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
    out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}

 

 

myFunction() কে myArray এর সাথে আর্গুমেন্ট হিসেবে দেখা হয়। যথা,

myFunction(myArray);

 

 

তৃতীয়ত, কোন অক্ষরভিত্তিক শ্রেণীবিন্যাসকে আর্গুমেন্ট হিসেবে ব্যবহার করা(শ্রেণীবিন্যাস চলকের পরিবর্তে)ঃ
myFunction() কে array literal(অক্ষরভিত্তিক শ্রেণীবিন্যাস)এর সাথে আর্গুমেন্ট হিসেবে দেখা হয়,

Calling myFunction()

myFunction([
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
]);

 

 

চতুর্থতঃ ফাংশন কলকে এক্সটারনাল js fileএ রাখা হয়ঃ
myTutorials.js নামক এক্সটারনাল js fileএ ফাংশন কলকে রাখা হয়।

myTutorials.js

myFunction([
    {
    "display": "JavaScript Tutorial",
    "url": "http://www.w3schools.com/js/default.asp"
    },
    {
    "display": "HTML Tutorial",
    "url": "http://www.w3schools.com/html/default.asp"
    },
    {
    "display": "CSS Tutorial",
    "url": "http://www.w3schools.com/css/default.asp""
    }
 ]);

 

 

ফাংশন কলের পরিবর্তে পেজে এক্সটারনাল স্ক্রিপ্ট যোগ করা হয়,
Add External Script

<script src="myTutorials.js"></script>

 

 

 

জেসন | JSON

জাভাস্ক্রিপ্ট অবজেক্ট নটেশন এইচটিটিপি রিকুয়েস্ট (JSON Http Request)

Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেএসওএন এইচটিটিপি রিকুয়েস্ট

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

 

জেএসওএনএর একটি সাধারণ প্রয়োগ হল ওয়েব সার্ভার থেকে ডাটা পড়া ও ওয়েব পেজে তা প্রদর্শন করা।

এই অধ্যায়ে চারটি ছোট ছোট ধাপে দেখানো হবে কীভাবে XMLHttp ব্যবহার করে জেএসওএন ডাটা পড়া হয়।

জেএসওএন উদাহর

এই উদাহরণে myTutorials.txt, থেকে একটি মেনু পড়া হবে ও সেটিকে ওয়েবপেজে দেখানো হবে।

<div id="id01"></div>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    } 
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>

 

 

উদাহরণের ব্যাখ্যা

প্রথমতঃ অবজেক্টের শ্রেণীবিন্যাস (Array) তৈরি করা হয়ঃ
অক্ষরভিত্তিক শ্রেণীবিন্যাস (Array) নির্ধারণ করে কোনো অবজেক্টের শ্রেণীবিন্যাস (Array) তৈরি করা হয়। প্রত্যেকটি অবজেক্টের দুটি বৈশিষ্ট্য নির্ধারণ করে দেয়া হয়, display এবং url । শ্রেণীবিন্যাস (Array) কে myArray নাম দেয়া হয়।

var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
]

 

 

দ্বিতীয়তঃ শ্রেণীবিন্যাস দেখানোর জন্য জাভাস্ক্রিপ্টের একটি ফাংশন তৈরি করা হয়ঃ myFunction() নামের ফাংশন তৈরি করা হয় যা থেকে অবজেক্টগুলো দৃশ্যমান হয় ও এইচটিএমএল লিঙ্ক জাতীয় উপাদান প্রদর্শন করে।

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
    out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}

 

 

myFunction() কে myArray এর সাথে আর্গুমেন্ট হিসেবে দেখা হয়। যথা,

myFunction(myArray);

 

 

তৃতীয়তঃ টেক্সট ফাইল তৈরি করা হয়ঃ

myTutorials.txt: নামক ফাইলের মধ্যে অক্ষরভিত্তিক শ্রেণীবিন্যাসকে রাখা হয়।

[
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
]

 

চতুর্থতঃ XMLHttpRequest দ্বারা টেক্সট ফাইল পড়া হয়ঃ

XMLHttpRequest লেখা হয় টেক্সট ফাইল পড়ার জন্য, এবং শ্রেণীবিন্যাস দেখানোর জন্য myFunction() ব্যবহার করা হয়।

XMLHttpRequest

 

var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
   var myArr = JSON.parse(xmlhttp.responseText);
   myFunction(myArr);
   }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

 

 

জেসন | JSON

জাভাস্ক্রিপ্ট অবজেক্ট নটেশন সিনট্যাক্স (JSON Syntax)

Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেএসওএন সিনট্যাক্স

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

 

জেএসওএন সিনট্যাক্স, জাভাস্ক্রিপ্ট সিনট্যাক্সের একটি সাবসেট।

জেএসওএন সিনট্যাক্সের নিয়মাবলী

জেএসওএন সিনট্যাক্স, জাভাস্ক্রিপ্টের অবজেক্ট নোটেশন সিনট্যাক্স থেকে উদ্ভূত ।

  • ডাটা নাম ও মানের জোড়ায় থাকে
  • ডাটা কমা দ্বারা আলাদা করা থাকে
  • কুঁকড়ানো ব্র্যাকেট {} দ্বারা অবজেক্ট আবদ্ধ থাকে
  • স্কয়ার ব্র্যাকেট [ ] দ্বারা শ্রেণীবিন্যাস আবদ্ধ থাকে।

 

জেএসওএন ডাটা - একটি নাম ও একটি মান

জেএসওএন ডাটাকে নাম ও মানের জোড়ায় লেখা হয়ে থাকে। নাম ও মানের জোড়া ডাবল কোটে আবদ্ধ ফিল্ড নেম, একটি কোলন চিহ্ন ও একটি মান নিয়ে গঠিত হয়।

উদাহরণ,

"firstName":"John"

নোট : জেএসওএন নামে ডাবল কোটের দরকার হয়, জাভাস্ক্রিপ্টের নামের বেলায় দরকার হয় না।

 

জেএসওএন মান

জেএসওএন মান যেরকম হতে পারে

  • সংখ্যা (পূর্ণসংখ্যা বা ফ্লোটিং পয়েন্ট )
  • স্ট্রিং (ডাবল কোটে থাকবে )
  • Boolean (সত্য বা মিথ্যা)
  • শ্রেণীবিন্যাস (স্কয়ার ব্র্যাকেট দ্বারা আবদ্ধ)
  • অবজেক্ট (কুঁকড়ানো ব্র্যাকেট দ্বারা আবদ্ধ)

 

জেএসওএন অবজেক্ট

জেএসওএন অবজেক্ট কুঁকড়ানো ব্র্যাকেট দ্বারা আবদ্ধ থাকে। জাভাস্ক্রিপ্টের মত জেএসওএন অবজেক্ট মাল্টিপল নাম ও মানের জোড়া সংরক্ষণ করে,

উদাহরণ,

{"firstName":"John", "lastName":"Doe"}

 

 

জেএসওএন অ্যারে

স্কয়ার ব্র্যাকেট দ্বারা অ্যারে আবদ্ধ থাকে। জাভাস্ক্রিপ্টের মত জেএসওএন অ্যারে মাল্টিপল অবজেক্ট সংরক্ষণ করতে পারে।

উদাহরণ,

"employees":[
     {"firstName":"John", "lastName":"Doe"},
     {"firstName":"Anna", "lastName":"Smith"},
     {"firstName":"Peter","lastName":"Jones"}
]

 

উপরের উদাহরণে "employees" হল একটি শ্রেণীবিন্যাস যা তিনটি অবজেক্টকে ধরে রেখেছে, যাদের প্রত্যেকটি এক একজন ব্যক্তির নাম, (ফার্স্ট নেম ও লাস্ট নেম)।

 

জেএসওএন জাভাস্ক্রিপ্টের সিনট্যাক্স ব্যবহার করে

যেহেতু জেএসওএন সিনট্যাক্স, জাভাস্ক্রিপ্টের অবজেক্ট নোটেশন সিনট্যাক্স থেকে উদ্ভূত তাই জাভাস্ক্রিপ্টে জেএসওএন নিয়ে কাজ করলে খুব কম সংখ্যক অতিরিক্ত সফটওয়ার প্রয়োজন হয়। জাভাস্ক্রিপ্টের মাধ্যমে অবজেক্টের শ্রেণীবিন্যাস তৈরি করে তাতে ডাটা সন্নিবেশ করা যায়, যেমন,

var employees = [
      {"firstName":"John", "lastName":"Doe"},
      {"firstName":"Anna", "lastName":"Smith"},
      {"firstName":"Peter","lastName": "Jones"}
];

 

 

জাভাস্ক্রিপ্ট অবজেক্টের শ্রেণীবিন্যাসের প্রথম সত্ত্বাকে যেভাবে দেখানো যায়,

// returns John Doe
 employees[0].firstName + " " + employees[0].lastName;

 

 

এটিকে এভাবেও দেখানো যেতে পারে,

// returns John Doe
 employees[0]["firstName"] + " " + employees[0]["lastName"];

 

 

ডাটা এভাবে পরিবর্তিত হতে পারে,

employees[0].firstName = "Gilbert";

 

 

এটি এভাবেও পরিবর্তিত হতে পারে,

employees[0]["firstName"] = "Gilbert";

 

 

পরবর্তী অধ্যায়ে দেখানো হবে কীভাবে জেএসওএন টেক্সটকে জাভাস্ক্রিপ্ট অবজেক্টে পরিনত করা হয়।

 

জেএসওএন ফাইল

  • জেএসওএন ফাইলের ফাইল টাইপ হল ".json"
  • জেএসওএন টেক্সটের MIME টাইপ হল "application/json"
জেসন | JSON

জাভাস্ক্রিপ্ট অবজেক্ট নটেশন টিউটোরিয়াল (JSON Tutorial)

Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

JSON টিউটোরিয়াল

আদনান নাহিদ
সরকারি তিতুমির কলেজ

 

  • JSON: জাভাস্ক্রিপ্ট অবজেক্ট নটেশন (JavaScript Object Notation)।
  • JSON হল তথ্য সংরক্ষণ এবং তথ্য আদান প্রদানের জন্য একটি শব্দবিন্যাস ।
  • JSON XML এ ব্যবহারের একটি সহজতম বিকল্প ।

 

নিম্নলিখিত JSON উদাহরণটি কর্মচারীদের লক্ষ্য নির্ধারণ করে,, একটি অ্যারের সাথে ৩ জন কর্মচারীর রেকর্ড দেয়া হল :
JSON উদাহরণ

{"employees":[
      {"firstName":"John", "lastName":"Doe"},
      {"firstName":"Anna", "lastName":"Smith"},
      {"firstName":"Peter", "lastName":"Jones"}
]}

 

নিম্নলিখিত XML উদাহরণটিও 3 কর্মচারীর সাথে কর্মীদের লক্ষ্য রেকর্ড নির্ধারণ করে ।
এক্সএমএল উদাহরণ

<employees>
     <employee>
         <firstName>John</firstName> <lastName>Doe</lastName>
     </employee>
     <employee>
         <firstName>Anna</firstName> <lastName>Smith</lastName>
     </employee>
     <employee>
         <firstName>Peter</firstName> <lastName>Jones</lastName>
     </employee>
 </employees>

JSON কি?

• JSON জাভাস্ক্রিপ্ট অবজেক্ট নটেশনকে ভিত্তি করে গড়ে ওঠে ।
• JSON একটি লাইটওয়েট তথ্য-ইন্টারচেঞ্জ ফরম্যাট ।
• JSON একটি স্বাধীন ভাষা ।
• JSON একটি "স্ব-বর্ণনা" এবং বুঝতে সহজ ।
* JSON জাভাস্ক্রিপ্ট সিনট্যাক্স ব্যবহার করে, কিন্তু JSON বিন্যাস শুধু লিখিত, যেমন XML । প্রোগ্রামিং ভাষা দ্বারা এই লেখাগুলো পড়া যায় ডাটা ফরম্যাট হিসাবে ব্যবহার করা যাব ।