كيفية برمجة موقع على شبكة الإنترنت من الصفر! 5 خطوات بسيطة

ما هي الأنواع المختلفة للغات البرمجة؟

تنقسم لغات البرمجة لمواقع الويب إلى فئتين رئيسيتين، وهما الواجهة الأمامية والواجهة الخلفية. اللغة المستخدمة لبرنامج صفحة الويب للواجهة الأمامية هي HTML وCSS وJavaScript.

تتضمن لغات الواجهة الأمامية

  • لغة ترميز النص التشعبي (HTML) – تستخدم هذه اللغة لتنسيق صفحات الويب وتنظيم العناصر على صفحة الويب. وهي مكونة من علامات فتح وإغلاق ولكل منها مهمة محددة. على سبيل المثال، يتم استخدام علامة العنوان لكتابة عنوان صفحة الويب في شريط العناوين.
  • أوراق الأنماط المتتالية (CSS) - كما يوحي الاسم، يتم استخدام CSS لتصميم صفحات الويب. على سبيل المثال، يمكنك استخدام CSS لتحديد خط الموقعوحجم الخط والألوان وما إلى ذلك. يمكن كتابة CSS في ملف واحد وإعادة استخدامه مرارًا وتكرارًا على العديد من العناصر على صفحة الويب.
  • جافا سكريبت (JS) – يتم استخدام JavaScript لجعل مواقع الويب أكثر تفاعلية. لنفترض أنك قمت بإنشاء زر، وتريد أن يعرض رسالة عند النقر فوقه. يمكنك استخدام JavaScript لكتابة هذه الوظيفة.

اللغات الخلفية

يمكن ترميز الواجهة الخلفية بأي لغة تدعم تطوير الويب. يمكنك استخدام JavaScript على جانب الخادم باستخدام NodeJS أو Python أو Ruby أو PHP. أحد البرامج الأكثر استخدامًا لتطوير مواقع الويب هو PHP. في هذا الدليل، سنركز على لغة PHP باعتبارها لغة البرمجة النصية.

PHP:

PHP تعني المعالج المسبق للنص التشعبي. على عكس تقنيات الواجهة الأمامية التي يتم تنفيذها في متصفح الويب، يتم تنفيذ PHP على خادم الويب. يتم استخدامه بشكل شائع لتنفيذ أنشطة مثل تسجيل المستخدمين ومصادقة المستخدمين وإرسال البريد الإلكترونيmailالصورة، الخ

كيفية ترميز موقع ويب – دليل المبتدئين الكامل

في هذا الدليل الشامل، سنعلمك كيفية إنشاء موقع ويب من الصفر وكتابة كل الأكواد البرمجية بنفسك، أو يمكنك استخدام منصة موجودة مثل WordPress أو Joomla وما إلى ذلك.

سوف نقوم بتغطية فولوwing المواضيع في هذا الدليل الكامل.

  • الخلق من الصفر مقابل. باستخدام نظام إدارة المحتوى
  • إنشاء موقع ويب من الصفر باستخدام إطار عمل (PHP MVC Framework)
  • إنشاء موقع إلكتروني باستخدام نظام إدارة المحتوى (WordPress)

المفهوم الأساسي للغة HTML

مستند HTML هو ملف نصي يحتوي على علامات HTML وعناصر وينتهي عادةً بامتداد ملف .html.

يمكن أيضًا تضمين HTML في ملحقات ملفات لغة البرمجة النصية الأخرى مثل *.php أو *.jsp أو *.asp.

تقوم متصفحات الويب بتحليل مستندات HTML لعرض صفحات الويب. يمكنك عرض HTML الذي يتكون من صفحة الويب في متصفح الويب.

فيما يلي خطوات تساعدك في إنشاء موقع ويب:

الخطوة 1) انقر بزر الماوس الأيمن على صفحة الويب لعرض القائمة المنبثقة.

المفهوم الأساسي للغة HTML

الخطوة 2) حدد عرض مصدر الصفحة.

المفهوم الأساسي للغة HTML

الخطوة 3) سيتم عرض كود HTML بنص عادي، ويمكنك رؤية علامات HTML والعناصر التي تشكل الصفحة.

قد ترى أيضًا أن بعض ملفات CSS وJavaScript إما مضمنة أو مضمنة كملفات خارجية منفصلة.

المفهوم الأساسي للغة HTML

تتمثل وظيفة متصفح الويب في ترجمة مستند HTML إلى تنسيق يمكن قراءته بواسطة الإنسان. يقوم المتصفح أيضًا بمعالجة JavaScript المضمنة في صفحة الويب.

فهم بنية مستند HTML

لنفترض أنك قمت بإنشاء مستند Word من قبل. في هذه الحالة، سيكون فهم بنية مستند HTML أمرًا سهلاً للغاية بالنسبة لك. في مستند Word، سيكون لديك عنوان المستند وجدول المحتويات القابل للنقر عليه وأقسام المحتوى المنسقة بشكل مختلف والتذييل. إن بنية مستند HTML تشبه إلى حد ما مستند الكلمة الذي وصفناه للتو.

يتم تضمين جميع مستندات HTML في علامة HTML. ضمن علامة HTML، سيكون لديك علامات أخرى مثل الرأس والجسم. تحتوي علامة الرأس على علامات أخرى، مثل العنوان لعرض عنوان الصفحة. ويتضمن أيضًا روابط لملفات خارجية لأنماط CSS وJavaScript والبيانات الوصفية. تحتوي علامة الجسم على العناصر التي تشكل صفحة الويب. يمكن أن تكون العناصر الموجودة داخل علامة الجسم عبارة عن div أو جداول أو قوائم وما إلى ذلك.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>How to create a website for beginners</title>
    <meta name="description" content="My First Webpage created using HTML, CSS, JavaScript, and PHP">
    <meta name="author" content="Guru99">
    <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
    <h3>Welcome to my first webpage</h3>
</body>
</html>

التفسير:

  • يحدد نوع المستند وهو HTML
  • … يحدد علامة HTML بسمة اللغة التي تحدد لغة موقع الويب.
  • في هذا المثال البسيط، لغة الموقع هي الإنجليزية. ضمن علامة HTML المفتوحة والختامية، سيكون لدينا علامات مثل الرأس والنص، والتي بدورها تتضمن علامات وعناصر أخرى.
  • … يحدد علامة الرأس التي تحتوي على البيانات الوصفية بداخلها.
  • … يحدد الجسم الذي يحتوي على محتوى الموقع.

تعرف على محددات CSS

تحدد محددات CSS العناصر الموجودة على صفحة الويب التي تريد تنسيقها بناءً على قواعد CSS المحددة.

يتم تصنيف محددات CSS إلى خمس فئات رئيسية، وهي:

  • محددات بسيطة: تُستخدم هذه المحددات لتحديد العناصر بناءً على سمات مثل المعرف أو الاسم أو الفئة.
  • الموحد CSS: تمامًا كما يوحي الاسم، يختار هذا النوع من المحددات عنصرًا بناءً على مجموعة من العناصر المرتبطة. على سبيل المثال، يمكنك استخدام هذه الطريقة لتحديد عناصر الفقرة الموجودة ضمن عناصر div فقط.
  • فئات CSS الزائفة: تعمل هذه المحددات بناءً على حالة العنصر. على سبيل المثال، قم بالتمرير فوق ارتباط تشعبي. يمكنك تغيير لون خلفيته ليُظهر للمستخدم المكان الذي يشير إليه حاليًا. ولذلك عندما يقوم المستخدم بتحريك الماوس بعيدًا عن الارتباط التشعبي، تتم إزالة التنسيق تلقائيًا.
  • عناصر CSS الزائفة: يستخدم هذا المحدد لتحديد أجزاء معينة من عنصر ما. على سبيل المثال، يمكنك استخدام محدد العناصر الزائفة لتكبير الحرف الأول من الكلمة الأولى في كل فقرة وترك الحروف الأخرى دون تغيير.
  • سمة CSS: يعمل هذا المحدد بناءً على السمات المطبقة على العناصر أو قيم السمات المحددة. على سبيل المثال، يمكنك استخدام محدد سمات CSS لتنسيق جميع أزرار HTML على لون الخلفية الخضراء التي تحتوي على قيمة السمة "إرسال". سيؤدي هذا إلى تطبيق لون الخلفية الخضراء للأزرار التي تم تعيين قيمة السمة لإرسالها.

قم بتجميع ورقة أنماط CSS

سيقوم هذا القسم بإنشاء مستند بسيط بنمط CSS يقوم بتنفيذ تصميم بسيط من خلال تحديد المتابعةwing قواعد التصميم.

  • توسيط النص بناءً على مركز الفصل: ستقوم هذه القاعدة بتوسيط النص وتغيير لون النص إلى اللون الأحمر.
  • تنسيق النص بناءً على معرف العنصر: سنقوم بإنشاء قاعدة تصميم لعنوان المعرف والتي من شأنها تغيير اللون إلى اللون البرتقالي، وجعل حجم الخط غامقًا وتغيير حالة النص إلى أحرف كبيرة.
  • تنسيق النص بناءً على عنصر العنوان رقم 2: ستقوم هذه القاعدة بتعيين لون نص العنوان إلى اللون الأزرق وتعيين حجم الخط على 60 بكسل.

التاليwing يحدد الكود مستند CSS بالقواعد المذكورة أعلاه.

.center {
    text-align: center;
    color: red;
}
#title {
    color: orange;
    text-transform: uppercase;
    font-weight: bold;
}
h2 {
    font-size: 60px;
    color: blue;
}

يشرح:

  • .center {...} - يحدد مركز قاعدة الفصل الذي يقوم بمحاذاة النص في المنتصف ويغير لون الخط.
  • #title {...} - يحدد قاعدة العنوان التي تغير لون الخط، وتحول جميع الأحرف إلى أحرف كبيرة، وتغير حجم الخط إلى غامق.
  • h2 {...} - يحدد القواعد التي سيتم تطبيقها على جميع عناصر h3. سيتم ضبط حجم الخط على 60 بكسل، وسيتم تحديث لون الخط إلى اللون الأزرق.

تنزيل/تثبيت Bootstrap

Bootstrap هو إطار عمل CSS يأتي مع عدد لا بأس به من الأنماط التي يمكنك البدء في استخدامها على الفور. أنه يحتوي على أنماط للتخطيطات وعناصر التنسيق.

يمكنك كتابة أنماط CSS الخاصة بك والتي تقوم بتخصيص الإعدادات الافتراضية لإطار عمل bootstrap CSS. للقيام بذلك، يمكنك إما تنزيل Bootstrap مباشرة من الموقع الرسمي، أو يمكنك تضمينه في مستند HTML الخاص بك من شبكة توصيل المحتوى (CDN).

وبدلاً من ذلك، يمكنك استخدام أداة إدارة الحزم مثل Node Package Manager (NPM) لتثبيت Bootstrap، ولكن هذا مخصص لمطوري الويب المتقدمين. لتنزيل Bootstrap، يمكنك النقر فوق هذا الرابط هنا واستخدمه في مشروعك تمامًا مثل أي ملف CSS وJavaScript آخر.

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

دور HTML وCSS

يتمثل دور HTML في توفير البنية لصفحات الويب. تستخدم متصفحات الويب هذه البنية لعرض محتوى قابل للتقديم للمستخدمين. ثانيًا، تستخدم عناكب محركات البحث بنية HTML للتنقل في صفحة الويب وفهرستها.

يتمثل دور CSS في توفير التصميم للمحتوى بحيث يكون جذابًا بصريًا للمستخدمين.

فهم مصطلحات HTML الشائعة

دعونا الآن نلقي نظرة على بعض مصطلحات HTML الشائعة التي يجب أن تكون على دراية بها كمطور ويب.

S / N مصطلح الوصف
1 العنصر العناصر هي كلمات رئيسية تُستخدم لتحديد هياكل ومحتوى محدد لصفحة الويب. على سبيل المثال، يتم استخدام العنصر H3 لتحديد بنية العنوان. تتضمن الأمثلة الأخرى للعناصر الفقرات (p)، والمثبتات (a)، والحاويات (div)، وما إلى ذلك.
2 بطاقة العلامات هي علامات تحدد بداية ونهاية العنصر. تتضمن العلامات الكلمات الرئيسية للعنصر في الزاوية brackets. على سبيل المثال، فقرة هي علامة الفقرة حيث هي علامة الافتتاح و هي علامة الإغلاق.
3 السمة السمات هي خصائص العناصر التي توفر معلومات تكميلية. على سبيل المثال، يمكننا استخدام سمة المعرف لإعطاء اسم فريد لعنصر ما. يمكن استخدام المعرف في CSS أو JavaScript.
4 الارتباط التشعبي الارتباط التشعبي هو ارتباط قابل للنقر عليه ويفتح صفحة ويب جديدة. يمكنك إنشائه باستخدام عنصر الربط.
5 رئيس تحتوي علامة الرأس على معلومات مخفية عن المستخدم ولكنها مفيدة لمتصفح الويب ومحركات البحث.
6 الجسم تحتوي علامة الجسم على معلومات مرئية للمستخدم في متصفح الويب.
7 تذييل تحتوي علامة التذييل على المعلومات التي يتم عرضها في قسم التذييل بصفحة الويب.
8 الرسالة تُستخدم التعليقات لتوثيق كود HTML وشرحه، ويتم تجاهلها بواسطة المتصفح عند تحليل مستند HTML.
9 DIV Div هو عنصر حاوية يُستخدم لإنشاء التخطيطات.
10 عنوان يتم استخدام علامة العنوان لإنشاء عناوين HTML.
11 الخط مقطوع يتم استخدام هذا العنصر لإنشاء فاصل أسطر جديد.
12 روابط تُستخدم الروابط لتضمين ملفات أخرى مثل ملفات CSS الخارجية في مستندات HTML.
13 البيانات الوصفية توفر علامة البيانات التعريفية معلومات تكميلية حول صفحة الويب الأكثر فائدة لروبوتات محرك البحث.
14 قائمة يتم استخدام علامة القائمة لإنشاء قائمة. يمكن أن تكون القائمة مرتبة أو غير مرتبة.
15 فقرة يتم استخدام عنصر الفقرة لعرض البيانات النصية بتنسيق الفقرة
16 طاولة يستخدم هذا العنصر لإنشاء جدول
17 عنوان الاعلان وكما يوحي العنوان، يتم استخدامه لتعيين عنوان صفحة الويب.
18 شكل تُستخدم علامة النموذج لإنشاء نماذج يمكننا استخدامها للحصول على مدخلات من المستخدمين.
19 سيناريو ترتبط علامة البرنامج النصي بكود JavaScript خارجي أو كود JavaScript مضمن داخل مستند HTML.
20 AJAX AJAX يعني Asyncجافا سكريبت وXML. إنها تقنية تستخدم لتحديث أجزاء معينة من صفحة الويب دون إعادة تحميل الصفحة بأكملها.

فهم مصطلحات CSS الشائعة

التاليwing هي بعض مصطلحات CSS الشائعة التي يجب أن تكون على دراية بها.

S / N مصطلح الوصف
1 منتقى يشير هذا إلى CSS المسؤول عن اختيار عناصر مستند HTML التي نرغب في تنسيقها.
2 عقارات تشير الخصائص إلى سمة العنصر الذي نرغب في تعيين قيمة له.
3 القيم تمامًا كما يوحي الاسم، نقوم بتعيين القيمة للخاصية لأغراض التصميم.
4 الرسالة تُستخدم التعليقات لتوثيق وشرح كود CSS
5 مجموعة القواعد يشير إلى قسم كامل من كود CSS يتكون من المحدد وقوس الإعلان والخصائص والقيم المعنية.
6 إعلان يشير هذا إلى سطر واحد من التعليمات البرمجية داخل مستند CSS
7 كتلة الإعلان يشير هذا إلى قسم CSS الذي يحدد قواعد التصميم. وهو محاط بين مجعد brackets.
8 البحث عن كلمة هذه كلمة محجوزة لها معنى خاص في CSS. على سبيل المثال، كلمة auto لها معنى خاص، وبالتالي فهي كلمة رئيسية
9 محدد السمات يقوم المحدد بتحديد عنصر بناءً على قيمة السمة.
10 محدد عالمي يُستخدم هذا المحدد لمطابقة أي عناصر ضمن السياق المحدد. يتم تطبيق السياق عادةً على عنصر أصل مثل القائمة بحيث يمكن لجميع العناصر الموجودة في القائمة أن ترث النمط من العنصر الأصلي
11 محدد الهوية يقوم هذا المحدد بإجراء تحديد بناءً على معرف العنصر.
12 محدد الفئة يقوم هذا المحدد بإجراء تحديد بناءً على قيمة أو قيم سمة الفئة.
13 محدد نوع العنصر يعتمد هذا المحدد على نوع العنصر المستخدم في مستند HTML.

محرري HTML

محرر HTML هو برنامج يستخدم لكتابة وتحرير تعليمات HTML البرمجية. يمكنك استخدام أي محرر نصوص لكتابة كود HTML، لكن محررات HTML تأتي مع العديد من الميزات المضمنة التي تسهل كتابة التعليمات البرمجية.

دعونا نلقي نظرة على بعض الخيارات الشعبية:

Visual Studio Code

Visual Studio Code هو محرر أكواد برمجية متعدد المنصات تم تطويره بواسطة Microsoft. يمكنك استخدام Visual Studio Code لتحرير التعليمات البرمجية للعديد من اللغات، بما في ذلك HTML وCSS وJavaScript وPHP. Visual Studio Code مجاني ويعمل على Windowsو Mac و Linux.

Sublime Text

Sublime Text هو محرر أكواد برمجية متعدد المنصات يمكن استخدامه أيضًا لكتابة وتحرير أكواد HTML وCSS وJavaScript وPHP. إنه منتج تجاري، وتحتاج إلى شرائه. يمكنك أيضًا استخدامه مجانًا في الوضع غير المسجل.

Notepad++

Notepad++ هو محرر أكواد خفيف الوزن يدعم العديد من اللغات أيضًا. على عكس Visual Studio Code و Sublime Text, Notepad++ ليس عبر منصة. إنه يعمل فقط على Microsoft Windows .

بيئة تطوير متكاملة نيتبيانز

NetBeans عبارة عن بيئة تطوير متكاملة (IDE) توفر ميزات أكثر من محرر التعليمات البرمجية العادي. NetBeans مجاني ومتعدد المنصات.

بناء صفحة الويب الأولى الخاصة بك

دعونا الآن نقوم بإنشاء صفحة ويب بسيطة. قمنا هنا بإنشاء مستند HTML بسيط وتطبيق بعض التصميمات باستخدام Bootstrap CSS. سيكون لدينا أيضًا زر قابل للنقر يعرض رسالة بسيطة باستخدام JavaScript.

فيما يلي خطوات تساعدك على تعلم كيفية إنشاء موقع ويب من الصفر:

الخطوة 1) افتح محرر النصوص المفضل لديك.

هنا، نفتح المفكرة.

الخطوة 2) قم بإنشاء ملف جديد.

اسمه Index.html.

بناء صفحة الويب الأولى الخاصة بك

الخطوة 3) أضف المتابعةwing الرمز،

في ملف Index.html.

بناء صفحة الويب الأولى الخاصة بك

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>My First Web Page</title>
    <script>
    function displayMessage() {
        document.getElementById("message").innerHTML = "Greetings from JavaScript!";
    }
    </script>
</head>
<body>
    <div class="container">
        <h1>My Web App!</h1>
        <p id="message">Your message will appear here.</p>
        <button type="button" class="btn btn-primary" onclick="displayMessage()">Click Me!</button>
    </div>
</body>

</html>

التفسير:

  • يحدد نوع الوثيقة.
  • … يحدد علامة الرأس التي تحتوي على البيانات التعريفية غير المرئية للمستخدمين.
  • يحتوي الرأس أيضًا على علامة برنامج نصي تحتوي على كود JavaScript الذي يعرض رسالة ترحيب.
  • نقوم أيضًا بتحميل Bootstrap CSS من شبكة CDN.
  • … يحدد محتوى صفحتنا: عنوان وفقرة وزر يطبق بعض التصميم من Bootstrap CSS.

الخلق من الصفر مقابل. باستخدام نظام إدارة المحتوى

يتطلب إنشاء موقع ويب من الصفر مهارات ومعرفة مناسبة. كما يستغرق وقتًا أطول ويمكن أن يكلف أيضًا الكثير من المال.

من ناحية أخرى، لا تحتاج إلى أن تكون مبرمجًا ماهرًا لإنشاء موقع الويب الخاص بك باستخدام نظام إدارة المحتوى مثل WordPress. تشبه أنظمة إدارة المحتوى تطبيقات مثل Microsoft كلمة.

باستخدام نظام إدارة المحتوى، يمكنك التركيز على إنشاء الصفحات وكتابة المحتوى ونشر المحتوى، تمامًا مثل إنشاء المستندات بالكلمات وطباعتها على الطابعة.

التاليwing شركات الجدولares الطريقتان الشائعتان لإنشاء مواقع الويب.

S / N برو/كون الخلق من الصفر استخدام نظام إدارة المحتوى
1 الوقت: يتطلب الكثير من الوقت. يستغرق القليل من الوقت. يمكن إنشائه في أقل من 24 ساعة.
2 التكلفة قد يكون استئجار مبرمج ماهر مكلفًا. يمكنك القيام بذلك بنفسك أو استئجار شخص لإنشائه لك.
4 مهاراتي يتطلب مبرمج ماهر وذو خبرة يتطلب مهارات أقل. يجب أن تكون على دراية بالكمبيوتر للقيام بذلك.
5 حماية لا يستطيع المتسللون العثور بسهولة على نقاط الضعف في الكود لاستغلالها. يمكن للمتسللين العثور بسهولة على نقاط الضعف في الكود واستغلالها. التحديثات المنتظمة مهمة لأسباب أمنية.
6 سرعة تميل إلى أن تكون أسرع لأنه يتم تحميل الميزات المطلوبة فقط في وقت التشغيل. تميل إلى أن تكون أبطأ لأن نظام إدارة المحتوى يأتي كحل للأغراض العامة قد يقوم بتحميل ميزات لا تحتاج إليها بالضرورة.
7 الصيانة سهولة الصيانة لأن التحديثات تتم فقط عند الحاجة إليها تتطلب المزيد من العمل حيث يتعين عليك إجراء تحديثات منتظمة لنظام إدارة المحتوى (CMS) لأسباب أمنية.
8 تحسين محركات البحث (SEO) يتطلب المزيد من العمل، ويحتاج المبرمج إلى التذكير لأن معظم المبرمجين ليسوا خبراء في تحسين محركات البحث تأتي معظم أنظمة إدارة المحتوى مزودة بأدوات تحسين محركات البحث (SEO). box. يمكن إضافة ميزات إضافية بسهولة باستخدام المكونات الإضافية.

استخدام إطار عمل (PHP MVC Framework)

في هذا القسم، سننظر في كيفية إنشاء موقعنا الإلكتروني من الصفر. يجب أن يستخدم كل موقع ويب تقنيات الواجهة الأمامية مثل لغة توصيف النص التشعبي (HTML) وجافا سكريبت وأوراق الأنماط المتتالية (CSS).

تحتوي الواجهة الخلفية على المزيد من الخيارات للغات البرمجة. يمكنك استخدام PHP، وPython، وRuby، وJavaScript، وما إلى ذلك. PHP هي واحدة من أكثرها شيوعًا. سنتحدث عن تقنيات PHP في هذا القسم.

يمكنك استخدام PHP لأنها عملية بطيئة، لذلك حتى المبرمجين الذين يقومون بإنشاء مواقع الويب من الصفر يحتاجون إلى استخدام إطار عمل للتطوير. الأكثر شيوعًا هو إطار عمل Model-View-Controller (MVC). تتضمن أمثلة أطر عمل PHP MVC Laravel وCodeIgniter وCake PHP وSymfony وما إلى ذلك.

توفر أطر عمل MVC المتابعةwing الميزات:

  • اتصال قاعدة البيانات المضمنة مع المكتبات: وهذا يوفر عليك الوقت لكتابة التعليمات البرمجية للاتصال بقاعدة البيانات بشكل آمن لكتابة البيانات واستردادها.
  • وحدات المصادقة المضمنة: وهذا يوفر عليك الوقت لكتابة الكود الذي سيتطلب من المستخدمين تسجيل الدخول والخروج من الموقع إذا لزم الأمر.
  • الكود المنظم: يفصل نمط تصميم MVC منطق العمل عن العرض التقديمي. وهذا يجعل من السهل أن يكون لديك مبرمج يمكنه العمل على الواجهة الخلفية ومصمم ويب يعمل على تطوير الواجهة الأمامية.
  • الطُرُود: هذه مجموعات من المكتبات التي تؤدي مهامًا محددة للغاية. على سبيل المثال، يمكنك استخدام أو تنزيل حزمة لإضافة ميزات مثل؛
    • إضافة خاصية التعليق Disqus لموقعك
    • استدعاء API
    • دمج بوابة الدفع.

يمكنك استخدام أطر عمل MVC لتسريع وقت التطوير. يمكنك أيضًا استخدام قوالب HTML لتسريع تطوير الواجهة الأمامية باستخدام قوالب HTML مفتوحة المصدر. يمكنك أيضًا شراء قالب HTML تجاري ثم تخصيصه وفقًا لمتطلباتك. يقوم بعض صانعي قوالب HTML بإنشاء قوالب HTML محددة لإطار عمل MVC.

على سبيل المثال، يمكنك شراء قالب HTML يستخدم قالبًا نصليًا، وهو محرك قالب مدمج في إطار عمل Laravel MVC.

إنشاء موقع إلكتروني باستخدام نظام إدارة المحتوى (WordPress)

في هذا القسم، سننظر في كيفية إنشاء موقع ويب باستخدام WordPress:

تحميل ووردبريس

يمكنك تنزيل WordPress من الموقع الرسمي وتشغيله على جهاز الكمبيوتر المحلي الخاص بك إذا كان لديك خادم ويب مثبت عليه PHP. ومع ذلك، إذا كان لديك بالفعل حساب استضافة، فيمكنك تثبيت WordPress مباشرة من لوحة التحكم الخاصة بك.

الشروع في العمل مع وورد

بمجرد تثبيت WordPress، يمكنك البدء في إنشاء موقع الويب الخاص بك.

استضافة الموقع:

قبل أن تبدأ، يجب أن يكون لديك اسم المجال واستضافة المواقع حساب. يجب أن يكون حساب استضافة الويب مثبتًا عليه PHP وأن يكون MySQL هو محرك قاعدة البيانات. يمكنك الاستعانة بخدمة Bluehost أو Godaddy أو يمكنك الاستضافة باستخدام WP Engine المتخصص في توفير استضافة WordPress المُدارة.

تركيب:

لدى معظم موفري خدمات استضافة الويب نصوص برمجية خاصة في اللوحة الإدارية تسمح لك بتثبيت WordPress. إذا كان مزود الاستضافة الخاص بك يستخدم cPanel، فمن المفترض أن تكون قادرًا على تثبيت WordPress من خلال النقر على أيقونة WordPress كما هو موضح في الصورة أدناه:

الشروع في العمل مع وورد

بمجرد تحديد الخيار أعلاه، سيتم تقديمك مع نافذة النافذةwing لإكمال التثبيت.

الشروع في العمل مع وورد

الإعدادات:

يتيح لك قسم الإعدادات تكوين أشياء مثل اسم الموقع، وروابط URL الدائمة، والمنطقة الزمنية، وما إذا كان بإمكان أي شخص التسجيل على موقعك، وما إلى ذلك.

قالب:

تسمح لنا القوالب برؤية كيف يبدو موقعنا. يأتي WordPress مزودًا بقوالب مدمجة مجانية يمكنك استخدامها على الفور. يمكنك أيضًا تنزيل القوالب التي أنشأها الآخرون. بصرف النظر عن القوالب المجانية، يمكنك أيضًا شراء قوالب متميزة من الأسواق مثل ThemeForest.

المكونات الإضافية:

تتيح لك المكونات الإضافية توسيع وظائف WordPress. على سبيل المثال، يمكنك استخدام مكون إضافي لتمكين عملائك من الدفع لك عبر PayPal من موقع الويب الخاص بك. يمكنك أيضًا استخدام المكونات الإضافية لإجبار المستخدمين على استخدام الاتصالات الآمنة (HTTPS) أو إنشاء خرائط الموقع.

بناة الموقع:

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

دعونا نلقي نظرة على بعض منشئي الويب الأكثر شعبية:

ASTRA

بناة الموقع أسترا

Astra هي سمة WordPress سريعة وخفيفة الوزن وقابلة للتخصيص بدرجة كبيرة. يأتي مزودًا بقوالب بداية يمكنك استخدامها لإنشاء مواقعك بسرعة. يحتوي على قوالب بداية مجانية ومميزة.

العنصر:

عنصر منشئي مواقع الويب

Elementor هو منشئ مواقع الويب بالسحب والإسقاط لـ WordPress الذي يستخدمه أكثر من 5 ملايين مستخدم. يقدم Elementor ميزات مجانية ومتميزة.

بيفر بيلدر:

منشئ موقع الويب سمور منشئ

Beaver Builder هو منشئ مواقع الويب سهل الاستخدام بالسحب والإفلات لـ WordPress والذي يسمح لك بإنشاء مواقع ويب ذات مظهر احترافي بسرعة.

بدائل وورد

WordPress ليس نظام إدارة المحتوى الوحيد الذي يمكنك استخدامه لإنشاء موقع الويب الخاص بك. يمكنك أيضًا البحث عن بدائل مثل

  • جملة: Joomla هو نظام إدارة محتوى مفتوح المصدر يمكن استخدامه لنشر المحتوى ومنتديات المناقشة وتطبيقات التجارة الإلكترونية وما إلى ذلك. ويستخدم PHP كلغة برمجة وMySQL كمحرك قاعدة البيانات.
  • دروبال: إنه نظام لإدارة محتوى الويب يمكنه إنشاء مدونات شخصية أو مواقع ويب للشركات أو إدارة المعرفة للتعاون التجاري. دروبال مكتوب بلغة PHP وجافا سكريبت.
  • مودكس: إنه نظام إدارة محتوى مفتوح المصدر مكتوب بلغة PHP. ويستخدم MySQL كمحرك قاعدة البيانات. ويمكن استخدامه على شبكة الإنترنت وكذلك الإنترانت.
  • الاتصال المستمر: هذه أداة إنشاء مواقع ويب توفر ميزات السحب والإفلات. يمكن استخدامه لإنشاء مواقع الويب الأساسية ومتاجر التجارة الإلكترونية.

نبذة عامة

  • يتم إنشاء مواقع الويب باستخدام كود الكمبيوتر.
  • رمز الكمبيوتر عبارة عن تعليمات يمكن قراءتها بواسطة الإنسان والتي تخبر الكمبيوتر بأداء مهمة محددة.
  • يمكن إنشاء مواقع الويب إما من الصفر أو باستخدام منصة موجودة مثل WordPress.
  • يستغرق إنشاء موقع ويب من البداية وقتًا أطول مقارنةً بالإنشاء باستخدام النظام الأساسي.
  • يعد إنشاء موقع ويب من البداية أكثر مرونة مقارنة باستخدام النظام الأساسي الحالي.
  • لغات البرمجة المستخدمة لإنشاء مواقع الويب هي HTML وCSS وJavaScript ولغات البرمجة النصية للواجهة الخلفية، مثل PHP وPython وRuby وما إلى ذلك.
  • WordPress هو نظام لإدارة المحتوى يمكن استخدامه لإنشاء مواقع الويب بسرعة كبيرة.
  • يدعم WordPress المكونات الإضافية مثل Astra أو Elementor أو Beaver Builder وما إلى ذلك، لتوفير ميزات تصميم موقع الويب بالسحب والإفلات.
  • يمكن استخدام أطر عمل MVC مثل Laravel أو CodeIgniter لتسريع تطوير مواقع الويب من البداية.