كيفاش تصاوب تطبيق صرف عملات بإستخدام JSON


فهاد الدرس الجديد غادي نشوفو كيفاش نصوبو واحد التطبيق بسيط لي كيعرض سعر صرف العملات فمثلا المستخدم كيختار واحد العملة الدرهم المغربي مثلا والتطبيق كيعطيه المقابل ديالها بالأورو تطبيق بسيط للمبتدئين.

نظرة سريعة بالفيديو

- الملفات الأساسية

غادي تمشي لwamp و منبعد تمشي للمجلد www وتزيد مجلد جديد تسميه currency_converter من بعد غادي تزيد فيه 3 ديال المجلدات css و js و includes منبعد غادي تقوم بتحميل bootstrap وغادي تزيد الملف bootstrap.min.css ف css وتزيد ملف تسميه script.js ف js من بعد غادي تزيد ملف تسميه header.php فincludes الملف header.php الكود ديالو هو :

                                <html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Convertisseur de devises</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"></a>
    </div>
</nav>
                            

- الملف script.php

هاد الملف هو لي غادي يكون فيه الكود لي غادي يمكن من استرجاع القيم لي اختار المستخدم من بعد غادي يرسلها لواحد لAPI لي كتوفرها yahoo مجانا ديال تحويل العملات فمنبعد مغادي نستقبلو المعلومات على شكل JSON كنحولوها ل Javascript Object ومنبعد كنعرضوها فالمكان المخصص لعرض النتيجة لي تحصلنا عليها الكود ديال الملف هو :

                                function convertCurrency(){
    var from = document.getElementById('from').value;
    var to = document.getElementById('to').value;
    var xmlRequest = new XMLHttpRequest();
    var url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20("+'"'+from+to+'"'+")&a=12&format=json&env=store://datatables.org/alltableswithkeys";
    xmlRequest.open("GET",url,true);
    xmlRequest.send();
    xmlRequest.onreadystatechange = function(){
        if(xmlRequest.readyState == 4 && xmlRequest.status == 200){
            var result = xmlRequest.responseText;
            var jsResult = JSON.parse(result);
            document.getElementById("show").innerHTML = jsResult.query.results.rate.Rate;
        }
    }
}
                            

- الملف index.php

هادا الملف الرئيسي لي غادي يتم فيه عرض سعر الصرف ديال كل عملة ختارها المستخدم الكود ديالو هو :

                                <?php include('includes/header.php');?>
<body onload="convertCurrency();">
    <div class="container">
    	<div class="row">
			    <div class="col-md-6 col-md-offset-3">
					<div class="panel panel-default">
					<h2 class="text-center text-primary">Convertisseur de devises</h2>
					<div class="row">
						<div class="col-md-6 col-md-offset-3">
							<form  class="form-vertical">
								<div class="form-group">
									<label for="">1</label>
									<select name="" id="from" onchange="convertCurrency();" class="form-control">
										<option value="AUD">AUD Dollar australien</option>
										<option value="DKK">DKK Couronne danoise</option>
										<option value="AED">AED Dirham des émirats</option>
										<option value="EUR">EUR Euro</option>
										<option value="USD">USD Dollar américain</option>
										<option value="GBP">C Livre sterling britannique</option>
										<option value="KWD">KWD Dinar koweïtien</option>
										<option value="MAD" selected>MAD Dirham marocain</option>
										<option value="CHF">CHF Franc suisse</option>
										<option value="JPY">JPY Yen japonais</option>
									</select>
								</div>
								<div class="form-group">
									<label for="">=</label>
									<select name="" id="to" onchange="convertCurrency();" class="form-control">
										<option value="AUD">AUD Dollar australien</option>
										<option value="DKK">DKK Couronne danoise</option>
										<option value="AED">AED Dirham des émirats</option>
										<option value="EUR">EUR Euro</option>
										<option value="USD" selected>USD Dollar américain</option>
										<option value="GBP">C Livre sterling britannique</option>
										<option value="KWD">KWD Dinar koweïtien</option>
										<option value="MAD">MAD Dirham marocain</option>
										<option value="CHF">CHF Franc suisse</option>
										<option value="JPY">JPY Yen japonais</option>
									</select>
								</div>
							</form>
						</div>
					</div>
					<div class="row result">
					<div class="col-md-4 col-md-offset-5">
							<p class="label label-primary" id="show"></p>
						</div>
					</div>
				</div>
    		</div>
    	</div>
    </div>
</body>
</html>

                            

- الملف main.css

غادي نزيد ملف فالمجلد css غادي نسميه main.css لي غادي يكون فيه واحد الكود css لي غدي يضيف بعض التغييرات على الصفحة الرئيسية ديالنا الكود ديالو هو :

                                    body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
form,h2{
    padding:10px;
}
#show{
    padding: 10px;
}
div.result{
    margin: 20px;
}
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد