تطوير Form على الويب يحتاج الى بعض الدقة و العمل و المجهود كذلك، يوجد العديد من النقاط التي يجب أخذها بالحسبان مثل التأكد من ملأ كل البيانات و بالمعلومات المرغوبة، و التأكد من أن عملية التسجيل تقوم بالتحقق من كل شيئ بشكل عادي، و بظهور بعض المفاهيم مثل الـ UX، أصبح من الأفضل ان نوفر نحن للمستخدم كل البيانات و نجعله فقط يقوم بالإختيار، بالطبع ليس بالنسبة لكل الـ Fields، لكن بعضها يمكن ملأه بشكل تلقائي و جعل المستخدم فقط يختار الخيار الصحيح، لعل من بينها خيار البلد.
إلا انه من الصعب إدراج البلد بشكل يدوي فهذا تقريبا أمر شبه مستحيل، لذلك سنقوم بها بطريقة تلقائية.
- تهيئة الواجهة :
الهدف من هذا المقال هو شرح كيفية ملأ خيار البلد بشكل تلقائي، لذلك سنتغاضى عن تطوير الشكل بطريقة إحترافية، سنلجأ لإستخدام Form بسيط يحمل 3 خانات او مدخلات (Inputs)، الأول لإحتواء الإسم، و الثاني سيكون من أجل البلد ( و الذي سنقوم بملأه تلقائيا )، و الثالث من أجل خيار رقم الهاتف الخاص بالمستخدم، لاحظ معي اننا في هذا الشكل قمنا فقط بإستخدام input من نوع نص، لكن لاحقا سنستخدم الخيار الثاني على شكل Select و ليس text.
سنترك لكم رابط الـ Form على Github في آخر المقال، لكن بما أننا الآن قمنا بتضمين الواجهة، حان الوقت لجلب البلدان و تضمينها في هذا الـ Form الخاص بنا.
من أجل التعامل مع الـ HTTP Requests التي تعتمد على خيارات مثل الـ POST و الـ GET في الجافاسكربت، فلديك عدة طرق و مكتبات لتحقيق ذلك، لكننا سنتعامل فقط مع الـ Ajax في هذه الفقرة، الـ Ajax و هي إختصار لعبارة Asynchronous JavaScript and XML و ستساعدنا على التعامل مع الـ HTTP Request، يمكنك الإعتماد على الجافاسكربت Native عبر دالة Ajax لتنفيذ الأمر، او يمكنك إستخدام الـ jQuery، لأنني ادرجت مسبقا الـ jQuery في الصفحة، سأعتمد على الـ jQuery لإنجاز هذا الأمر، دعونا نقوم بتنفيذ الكود و إظهار النتائج أولا في الكونسول :
قمنا بإستخدام الـ API و جلب نتائجه عبر الـ Ajax، لأن النتائج كثيرة جدا و لكل دولة مجموعة من الخصائص قمنا بجلب العنصر الأول من القائمة، و لم نجلبه كاملا بل قمنا بجلب الإسم ( و هو ما نحتاجه في الوقت الراهن، سنحتاج الى قيم أخرى لاحقا )، الآن لنحاول جلب كل اسماء البلدان، سنحتاج الى بعض الـ Loops لتحقيق ذلك، دعونا نجرب الكود التالي و نرى نتائجه :
جميل جدا، قمنا بإستخدام $.each في الـ jQuery من اجل المرور على كل عناصر الـ Object الخاص بنا الذي يحمل القيم، ثم قمنا بإختيار فقط الـ name، و قد جلبنا كل أسماء البلدان، دعونا الآن نقوم بتغيير ذلك الـ input text و تحويله الى select، ثم ملأه بالنتيجة عن طريق الجيكويري مجددا، سنقوم بإستخدام الـ .append لإضافة كل Option من وسط الـ Select، دعونا نجرب الكود و نرى النتيجة :
جميل، إنها النتيجة المرغوبة، دعونا الآن نقوم ببعض التطويرات الخاصة برقم الهاتف مثل إضافة الـ Prefix او كود الدولة التي تم إختيارها في الـ Select و نقوم بإدراجها في خانة رقم الهاتف، دعونا نجرب الكود التالي و نرى النتيجة :
و بهذه الطريقة نكون قد حصلنا على النتيجة المرادة، سيقوم الآن المستخدم بإختيار البلد من قائمة البلدان المعروضة، ثم أثناء إختياره للبلد سيتم إضافة علم البلد في الجزء الأخير من المدخلات الى جانب كود الهاتف الخاص بالبلد، قمنا بجعله disabled حتى لا يتم التعديل عليه.
الـ API يوفر لنا كود هاتف البلد عن طريق callingCodes و خيار علم البلد عن طريق flag و بهذه الطريقة قمنا بإضافتهما مجددا بكود الجيكويري للقيم الخاصة بهما في الـ HTML، قد تلاحظ ان شكل الصفحة قد إختلف من أول تصميم لآخره و ذلك لأننا أضفنا بعض المميزات الأخرى، الهدف من الدرس ليس الشكل و إنما المحتوى، لا نستخدم اي إطار او اي شيئ لذلك يبدو الأمر طبيعيا جدا.
- جلب البلدان بشكل تلقائي بإستخدام الـ Ajax :
سنعتمد بشكل أساسي على API من منصة Restcountries، قمنا بإختيار هذا الـ API لأنها مجاني و لأنه يلبي كل رغباتنا في الوقت الراهن، كما يتوفر على مجموعة كبيرة من الخيارات الجيدة كذلك، سنقوم بالتوجه الى ملف الجافاسكربت و جلب المعلومات عبر الـ API.جلب البلدان بشكل تلقائي إستخدام إطارات معينة ( مثال الـ Vue js ) :
الـ Ajax قد لا يكون الحل الأمثل أحيانا، لكن طريقة جلب الكود لا تختلف كثيراً من بين مجموعة من اللغات، إن كنت تستخدم إطاراً محددا مثل الـ Vue js فيمكنك إستخدام Axios، و هي مكتبة تسمح لك بالتعامل مع الـ HTTP Requests بسهولة أكبر، اما بخصوص الـ Append للعناصر، فيمكنك جعلها على شكل متغيرات في الـ Data ثم تمريرها لاحقا، فقط إتبع نفس منهجية الترميز في الـ Ajax او بشكل أصح قم بتحويل الكود Ajax الى كود Vue js بإستخدام Axios.جلب البلدان بشكل تلقائي بإستخدام الـ Php :
قد تود الإستعانة بالـ Php لصناعة Form في الأصل، و قد لا تود إدراج أي كود جافاسكربت او JQuery يقوم بالعملية و تريد من الكود الخاص بك ان يكون كله Php، في هذه الحالة إستعن بالـ cURL في الـ Php من أجل التعامل مع الـ HTTPRequest، فور ارسال الطلب و الحصول على النتائج من خلال الـ GET، قم بجلب كل ما تريده من معلومات كما الحال في شرح الـ Ajax أعلاه.ستجد المشروع كاملا هنا على جيتهاب