كيفاش تعرض الرمز البريدي ديالك بإستعمال Html 5 géolocalisation


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

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

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

غادي تمشي لwamp و منبعد تمشي للمجلد www وتزيد مجلد جديد تسميه CodePostalApp من بعد غادي تزيد فيه 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>Code Postal Finder</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="#">Code Postal 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é&libraries=places"></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 فاولا كنتحقق من أن المتصفح ديالي كيدعم geolocation لي يلا كان كيدعمها كتنفد لfonction onSuccess لي كنسترجع فيها العنوان لي دخل المستخدم منبعد كنخدم geocoder class لي كتمكني من إسترجاع المعلومات الخاصة بالعنوان لي دخل المستخدم منبعد كنتحقق واش العنوان كيتضمن رمز بريدي كنسترجعو ونعرضو الكود ديال الملف هو :

                                function getPostalCode(){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(onSuccess,onError,{
            maximumAge : 60*1000,
            timeout : 5*60*1000,
            enableHighAccuracy:true
        }); 
    }else{  
        alert("Votre navigateur ne supporte pas HTML 5 géolocalisation");
    }
}
function onSuccess(position){
    var adress = document.getElementById("adress").value.replace(" ","+");
    var geoCoder = new google.maps.Geocoder();
    geoCoder.geocode({'address':adress},function(results,status){
        if(status == google.maps.GeocoderStatus.OK){
            for(var i=0;i<results[0].address_components.length;i++)
            {
                if (results[0].address_components[i].types == "postal_code") {
                    document.getElementById("result").innerHTML = "<b>Votre code postal est :" + results[0].address_components[i].long_name + "</b>";
                    return true;
                }
            }
        }
    });
}
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;
    }
}
                            

- الملف index.php

هادا الملف الرئيسي ديالنا لي غادي يتم فيه عرض الرمز البريدي ديال العنوان لي دخل المستخدم الكود ديالو هو :

                                    <?php include("includes/header.php");?>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-3">
                <fieldset style="width:500px;">
                    <legend class="text-primary"><b>Trouves moi mon code postal</b></legend>
                    <div class="gorm-group">
                         <label for="adress">Entrer une adresse</label>
                         <input type="text" name="adress" id="adress" class="form-control"><br>
                    </div>
                    <div class="gorm-group">
                        <button name="submit" onclick="getPostalCode()" class="btn tbn-default">Recherche</button><br>
                    </div>
                    <p class="lead text-danger" id="result"></p>
                </fieldset>
            </div>
        </div>
    </div>
<?php include("includes/footer.php");?>
                                


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

بحث في الموقع


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