كيفاش تعرض حالة الطقس بإستعمال Html5 géolocalisation


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

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

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

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

                                <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Météo App</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</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="#">Météo App</a>
     <ul class="nav navbar-nav">
      <li class="active"><a href="index.php">Accueil <span class="sr-only"></span></a></li>
     </ul>
    </div>
</nav>
                            

- الملف footer.php

هاد الملف غادي يكون هو الأساس ديال كل الصفحات الخاصة بجهة الزوار ولي غادي يربط ملفات js بالملفات ديالنا.

                                <script src="https://maps.googleapis.com/maps/api/js?key=Votre clé"></script>
<script src="js/script.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
                            

- الملف script.php

في حالة مكانش عندك ل clé أول حاجة غادي تمشي https://developers.google.com/maps/documentation/javascript/get-api-key باش تسجل وتاخد واحد clé خاصة بك بها باش غادي تمكن من إستخدام خرائط google وداك ل clé غادي تزيدها فالملف footer.php فالرابط ديال الملف script.js وأيضا غادي تحتاج clé خور حيت غادي نخدمو بواحد api كيوفرها هاد الموقع http://openweathermap.org/appid منبعد ماتسجل وتاخد لclé ديالك غادي تزيدها فالرابط لي غادي نخدمو به فالملف script.js لي كيتضمن الكود لي كيمكن من عرض حالة الطقس ديالك فاولا كنتحقق من أن المتصفح ديالي كيدعم geolocation لي يلا كان كيدعمها كتنفد لfonction onSuccess لي كنسترجع فيها الإحداثيات ديالي منبعد كتزاد فرابط الموقع لي كيرجعلي المعلومات على شكل JSON منبعد مكانسترجع جميع المعلومات لي كانحتاج كنعرضها و لfonction findWeather كتعرض حالة مدينة دخلها المستخدم بنفس الطريقة الكود ديال الملف هو :

                                window.onload = function(){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(onSuccess,onError,{
            maximumAge : 60*1000,
            timeout : 5*60*1000,
            enableHighAccuracy:true
        });
    }else{
        document.getElementById("weather").innerHTML = "Votre navigateur ne supporte pas HTML5 géolocalisation";
    }
}
function onSuccess(position){
    var currentLat = position.coords.latitude;
    var currentLon = position.coords.longitude;
    //xml http request object
    var xmlHttpWeatherRequest = new XMLHttpRequest();
    var url = "http://api.openweathermap.org/data/2.5/weather?lat="+currentLat+"&lon="+currentLon+"&APPID=fb13672168c8ba255329baf41eac5896&lang=fr"
    //type de request
    xmlHttpWeatherRequest.open("GET",url,false);
    xmlHttpWeatherRequest.send();
    if(xmlHttpWeatherRequest.readyState == 4 && xmlHttpWeatherRequest.status == 200){
        var jsonResponse = xmlHttpWeatherRequest.responseText;
        var weatherInfo = eval("("+jsonResponse+")");
        var location = weatherInfo.name;
        var description = weatherInfo.weather[0].description;
        var temperature = weatherInfo.main.temp;
        var pressure = weatherInfo.main.pressure;
        var humidity = weatherInfo.main.humidity;
        var windSpeed = weatherInfo.wind.speed;
        var output = "<p><b class='text-primary'> Prévisions pour "+ location +"</b></p>"
            output+= "<table><tr><th class='text-info'>Temps :</th><td class='text-danger'>"+ description +"</td></tr>";
            output+= "<tr><th class='text-info'>Température :</th><td class='text-danger'>"+ Math.round((temperature -273.15)*100)/100 +'o'.sup()+"C</td></tr>";
            output+= "<tr><th class='text-info'>Pression :</th><td class='text-danger'>"+ pressure +" hpa</td></tr>";
            output+= "<tr><th class='text-info'>Humidité :</th><td class='text-danger'>"+ humidity +" %</td></tr>";      
            output+= "<tr><th class='text-info'>Vent :</th><td class='text-danger'>"+ windSpeed +" Km</td></tr></table>";                                          
        document.getElementById("weather").innerHTML = output;
    }
}
function onError(error){
    switch(error.code){
        case PERMISSION_DENIED :
            alert("Accés refusé pour l'utilisateur");
        break;
        case TIMEOUT :
            alert("Temps d'attente terminé");
        break;
        case POSITION_UNAVAILABLE :
            alert("Info de géolocalisation est Non-Disponible");
        break;
        default:
            alert("Erreur inconnu");
        break;
    }
}
function findWeather(){
    var ville = document.getElementById("ville").value.replace(" ","+");
    //xml http request object
    var xmlHttpWeatherRequest = new XMLHttpRequest();
    var url = "http://api.openweathermap.org/data/2.5/find?q="+ville+"&appid=fb13672168c8ba255329baf41eac5896&lang=fr";
    //type de request
    xmlHttpWeatherRequest.open("GET",url,false);
    xmlHttpWeatherRequest.send();
    if(xmlHttpWeatherRequest.readyState == 4 && xmlHttpWeatherRequest.status == 200){
        var jsonResponse = xmlHttpWeatherRequest.responseText;
        var weatherInfo = eval("("+jsonResponse+")");
        var location = weatherInfo.list[0].name;
        var description = weatherInfo.list[0].weather[0].description;
        var temperature = weatherInfo.list[0].main.temp;
        var pressure = weatherInfo.list[0].main.pressure;
        var humidity = weatherInfo.list[0].main.humidity;
        var windSpeed = weatherInfo.list[0].wind.speed;
        var output = "<p><b class='text-primary'> Prévisions pour "+ location +"</b></p>"
            output+= "<table><tr><th class='text-info'>Temps :</th><td class='text-danger'>"+ description +"</td></tr>";
            output+= "<tr><th class='text-info'>Température :</th><td class='text-danger'>"+ Math.round((temperature -273.15)*100)/100 +'o'.sup()+"C</td></tr>";
            output+= "<tr><th class='text-info'>Pression :</th><td class='text-danger'>"+ pressure +" hpa</td></tr>";
            output+= "<tr><th class='text-info'>Humidité :</th><td class='text-danger'>"+ humidity +" %</td></tr>";      
            output+= "<tr><th class='text-info'>Vent :</th><td class='text-danger'>"+ windSpeed +" Km</td></tr></table>";                                          
        document.getElementById("weather").innerHTML = output;
    }
}
                            

- الملف index.php

هادا الملف الرئيسي ديالنا لي غادي يتم فيه عرض حالة الطقس ديال المستخدم الكود ديالو هو :

                                    <?php include("includes/header.php");?>
<div class="container">
<div class="row" style="padding:20px;">
    <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-6">
                        <div id="weather"></div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="Ville">Entrer une ville :</label>
                            <input type="text" name= "ville" id="ville" class="form-control">
                        </div>
                        <div class="form-group">
                            <button name="find" id="find" class="btn btn-default" onclick="findWeather();">Valider</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<?php include("includes/footer.php");?>
                                


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

بحث في الموقع


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