5.1WebDev: المواقع وتطبيقات الويب
الأساسي في 30 ثانية
- WEBDEV يشارك WLangage والتحليل والمحررات مع WinDev: يعيد ياسين استخدام نموذج العملاء/المقالات/الطلبات لبوابة ويب، دون البدء من الصفر.
- المتصفح يعرض والخادم يعالج: كود الخادم يصل إلى HFSQL ويحمل الأمان؛ كود المتصفح مرئي وقابل للتعديل، لذا ليس حماية أبدًا.
- الويب يضيف مفاهيم خاصة به: الجلسات، التصميم المتجاوب، استضافة HTTPS والتعرض العام — الألفة مع الصياغة لا تعفي من تعلّم نموذج الويب.
حالة مصغّرة متسلسلة — ياسين يفتح بوابة ويب لعملاء الشركة
يطوّر ياسين تطبيق إدارة شركة صغيرة لتجارة المعدات الكهربائية في وهران: العملاء، المقالات، الطلبات، الفواتير والمخزون. يريد التجاريون الاطلاع على المخزون وإدخال طلب من المتصفح، حتى عند العميل. يفتح ياسين مشروع WEBDEV ويشارك التحليل الموجود: ملفات العميل والمقال والطلب هي نفسها كما في WinDev. يضع التحقق من المخزون والسعر والحقوق في جانب الخادم، لأن المتصفح يجب ألا يقرر سعرًا أبدًا. يضيف صفحة متجاوبة للهاتف واللوحة، وجلسة لتحديد هوية التجاري، ويتوقع استضافة بشهادة HTTPS. ثم يتحقق من أن طلبًا مُصاغًا يدويًا لا يمكنه تعديل سعر ولا طلب مقال خارج المخزون.
حالة مستقلة لهذا القسم: تعود في الدرس والمخطط والكود وتحدي 48 ساعة للقسم 5.1.
1. إعادة الاستخدام دون النسخ
WEBDEV هو عضو مجموعة PC SOFT المخصص للويب: المواقع والشبكات الداخلية وتطبيقات الويب. ميزته الكبرى هي إعادة استخدام المكتسبات: نفس WLangage، نفس التحليل، نفس المحررات ونفس منطق المشروع. يشارك ياسين تحليل تطبيق إدارته مع بوابة الويب: ملفات العميل والمقال والطلب والمخزون لا تُنسخ، بل تكون مشتركة. كما تُعاد الاستفادة من الإجراءات المهنية وبعض المكونات. لذا فمطوّر WinDev ليس مبتدئًا في الويب: يكتشف منصة جديدة مع احتفاظه بنموذج بياناته ولغته.
2. الخادم والمتصفح
يعمل الويب بمنطق العميل/الخادم بطبيعته: المتصفح يعرض والخادم يعالج. يميّز WEBDEV بين الكود المنفّذ على الخادم (محمي، مع وصول إلى بيانات HFSQL) والكود المنفّذ في المتصفح (سريع، لكنه مرئي وقابل للتعديل من المستخدم). النتيجة المطلقة: أي تحقق من السعر أو المخزون أو الحق يوضع في المتصفح فقط يمكن تجاوزه. بل يمكن للمستخدم إرسال طلب مباشرة إلى الخادم دون المرور بصفحات ياسين. كل تحقق مهم يُعاد على الخادم. كود المتصفح للراحة فقط، وليس للأمان أبدًا.
3. الجلسات والتصميم المتجاوب والاستضافة
الويب بلا حالة: يجب إدارة جلسة للتعرّف على التجاري من صفحة إلى أخرى. التصميم المتجاوب يُستبق من مرحلة التصميم (التخطيطات والتقسيم) ليتلاءم مع الحاسوب واللوحة والهاتف. الاستضافة تتطلب خادم تطبيق WEBDEV واسم نطاق وشهادة HTTPS. أخيرًا، الموقع العام مكشوف: الحقن وانتحال الجلسة والهجمات الآلية تجعل الأمان أكثر حرجًا من الداخل. لذلك يختبر ياسين البوابة على عدة شاشات ويتحقق من الحقوق على الخادم قبل أي نشر.
🔎 مثال ملموس — 🔎 مثال عملي — التحقق من طلب على الخادم
يرفض ياسين سطر طلب مُصاغًا من المتصفح:
// Code SERVEUR — contrôle d'une ligne de commande WebDev
PROCEDURE ValiderLigneCommande(Ligne est une LigneCommande) : booléen
SI Ligne.Quantite <= 0 ALORS
Erreur("Quantité invalide")
RENVOYER Faux
FIN
SI Ligne.PrixUnitaireHT < PrixCatalogue(Ligne.CodeArticle) ALORS
Erreur("Prix inférieur au catalogue")
RENVOYER Faux
FIN
SI StockDisponible(Ligne.CodeArticle) < Ligne.Quantite ALORS
Erreur("Stock insuffisant")
RENVOYER Faux
FIN
RENVOYER Vraiالنتيجة: طلب مُصاغ يدويًا يرفضه الخادم، حتى لو عُدّلت الصفحة.
المنعكس: كل تحقق مهم يُعاد على الخادم، وليس في المتصفح وحده أبدًا.
مفردات القسم
- WEBDEV
- عضو في مجموعة PC SOFT مخصص للويب (مواقع، شبكات داخلية، تطبيقات ويب)، يشارك WLangage والتحليل مع WinDev.
مثال بسيط: يفتح ياسين مشروع WEBDEV لبوابة عملاء شركته.
ما ليس كذلك: الاعتقاد بأنه يجب تعلّم لغة أخرى.
رد فعل: WEBDEV = نفس WLangage، منصة أخرى.
- إعادة استخدام المكتسبات
- إعادة استخدام مكتسبات WinDev (التحليل، WLangage، الإجراءات، المكونات) في مشروع WEBDEV.
مثال بسيط: يشارك ياسين تحليل العميل/المقال/الطلب مع البوابة.
ما ليس كذلك: إنشاء قاعدة ثانية للويب.
رد فعل: إعادة الاستخدام = نموذج بيانات واحد.
- كود الخادم
- كود يُنفّذ على خادم الويب، محمي، مع وصول إلى البيانات والتحققات المهنية.
مثال بسيط: يتحقق فيه ياسين من سعر الكتالوج والمخزون المتاح.
ما ليس كذلك: تسليم التحقق إلى الصفحة المعروضة.
رد فعل: الخادم = القرار والأمان.
- كود المتصفح
- كود يُنفّذ في متصفح المستخدم: مرئي، قابل للتعديل، مفيد للراحة فقط.
مثال بسيط: يعرض فيه ياسين رسالة إدخال غير صالح.
ما ليس كذلك: وضع تحقق سعر أو حق فيه.
رد فعل: المتصفح = عرض، لا حماية أبدًا.
- جلسة الويب
- سياق محفوظ على الخادم للتعرّف على مستخدم من صفحة إلى أخرى.
مثال بسيط: يحتفظ ياسين بالتجاري المتصل طوال طلبه.
ما ليس كذلك: الاعتقاد بأن الويب يحفظ السياق تلقائيًا.
رد فعل: الجلسة = هوية وسياق مضبوطان.
في التطبيق — عمليًا — فتح بوابة ويب باستخدام WEBDEV
- حدّد ما تعيد استخدامه (التحليل، WLangage، الإجراءات، المكونات) وما هو جديد (نموذج الويب، الجلسات، التصميم المتجاوب).
- أنشئ مشروع WEBDEV بمشاركة تحليل WinDev، ثم صمّم صفحات الاطلاع على المخزون وإدخال الطلب.
- ضع دائمًا تحققات السعر والمخزون والحقوق في كود الخادم؛ واحتفظ بالمتصفح للعرض والراحة.
- توقّع التصميم المتجاوب واستضافة HTTPS وجلسة تجارية، ثم اختبر طلبًا مُصاغًا يدويًا.
سكربت خطوة بخطوة — تأمين اتصال العميل (10 دقائق)
ينشئ ياسين جلسة التجاري قبل عرض لوحة المتابعة.
تُنشأ الجلسة على الخادم؛ لا يتلقى المتصفح سوى معرّف جلسة، ولا يتلقى كلمة المرور أبدًا.
نموذج للنسخ واللصق — بوابتي WEBDEV
// Projet WEBDEV — portail de gestion Yacine
// Analyse partagée : Client, Article, Commande, Facture, Stock
// Pages : PAGE_Connexion, PAGE_Stock, PAGE_Commande
// Contrôles SERVEUR : prix catalogue, stock, droits du commercial
// Session : gsCommercialConnecte (côté serveur)
// Responsive : dispositions téléphone / tablette
// Hébergement : serveur WEBDEV + domaine + HTTPSبوابة العميل
يتيح ياسين لعملائه الاطلاع على المخزون وحالة طلباتهم من المتصفح.
شبكة داخلية تجارية
يقصر ياسين إدخال الطلب على التجاريين المعرّفين بجلسة.
الطلب عبر الويب المحمول
يجعل ياسين الصفحات متجاوبة للطلب من هاتف عند العميل.
تحليل مشترك
يحتفظ ياسين بتحليل واحد بين تطبيق WinDev وبوابة WEBDEV.
✓ ممارسات جيدة
- إعادة الاستخدام من التحليل وWLangage بدل النسخ.
- وضع كل تحقق حرج على الخادم.
- التفكير في الجلسة والتصميم المتجاوب وHTTPS من التصميم.
✗ أخطاء شائعة
- وضع تحقق سعر أو حق في المتصفح.
- الاعتقاد بأن الويب يحفظ السياق دون جلسة.
- معالجة الاستضافة والأمان بعد النشر.
النقاط الأساسية
- WEBDEV يشارك WLangage والتحليل والمحررات مع WinDev.
- المتصفح يعرض والخادم يعالج: الأمان على الخادم.
- الويب يفرض الجلسات والتصميم المتجاوب واستضافة HTTPS.
- الموقع العام مكشوف: الألفة مع الصياغة لا تعفي من نموذج الويب.
تحدي 48 ساعة — طبّقه غدًا
مثل ياسين، افتح مشروع WEBDEV صغيرًا بمشاركة تحليل موجود (عملاء، مقالات، طلبات). أنشئ صفحة اطلاع وصفحة إدخال، ثم ضع تحققًا للسعر والمخزون على الخادم. اختبر طلبًا مُصاغًا يدويًا وتحقق من رفضه. دوّن ما أعدت استخدامه وما كان جديدًا فعلًا.
- أستطيع شرح ما يعيد WEBDEV استخدامه من WinDev.
- أعرف التمييز بين كود الخادم وكود المتصفح.
- أعرف لماذا وكيف أتحقق من طلب على الخادم.
أسئلة شائعة
هل يستطيع مطوّر WinDev الانتقال بسهولة إلى WEBDEV؟
الانتقال يسهّله نفس WLangage ونفس التحليل ونفس المحررات، لكنه ليس فوريًا: يجب تعلّم نموذج الويب. ما ينتقل مباشرة: اللغة، نموذج البيانات، دوال HFSQL وSQL، الإجراءات، المكونات والمفاهيم. وما يجب تعلّمه: بنية الخادم/المتصفح، الأمان على الخادم، الجلسات، التصميم المتجاوب، الاستضافة (خادم، نطاق، HTTPS)، الأداء والتحسين لمحركات البحث. يعيد ياسين استخدام تحليل إدارته لكنه يعيد التفكير في طريقة تحميل الصفحات والتحقق من الحقوق.
لماذا يجب ألا يكون هناك تحقق أمني في المتصفح أبدًا؟
لأن كل ما يُنفّذ في المتصفح تحت سيطرة المستخدم: يمكنه قراءة الكود وتعديله وتعطيله أو إرسال طلب مباشرة إلى الخادم دون المرور بالصفحات. لذا فتحقق المتصفح راحة استخدام وليس حماية أبدًا. إذا تحقق ياسين من سعر في الصفحة فقط، يمكن للمستخدم إرسال سعر أقل من الكتالوج. القاعدة المطلقة: كل تحقق مهم (السعر، المخزون، الحقوق، المبالغ، المعرّفات) يُعاد على الخادم، دون استثناء.
أين نتحقق من المخزون قبل تسجيل طلب WEBDEV؟