Mohamad Shafiee Jaddini

يمكنك القيام بذلك من خلال لغة الـ backend التي تستعملها أو من خلال لغة JS او أحد اطر عملها في الـ frontend . المثال التالي يوضح كيف يمكنك القيام بذلك باستخدام لغة php: <?php // تحديد جميع المستخدمين $q = "SELECT * FROM users WHERE 1"; $users = array(); if ($result = $conn->query($q)){ while ($row= $result->fetch_assoc()){ array_push($users, $row) ; } $result->free(); } $list = '' foreach ($users as $user){ if($user['id'] % 2 == 0){ // نطبع الاسم غامقا اذا كان المعرف زوجي echo '<span><b>'.$user['name'].'</b></span>'; } else{ // اذا كان فرديا نطبعه بشكل عادي echo '<span>'.$user['name'].'</span>'; } } أو يمكنك القيام باستعلامين منفصلين أحدهما للسطور ذات المعرفات الفردية و الأخرى لذات المعرفات الزوجية كالتالي: <?php // تحديد السطور ذات المعرفات الزوجية $even_q = "SELECT * FROM users WHERE id % 2 = 0"; // تحديد السطور ذات المعرفات الفردية $odd_q = "SELECT * FROM users WHERE id % 2 = 1"; // تنفيذ الاستعلامات كالكود السابق .. و يوجد العديد من الطرق الأخرى و يبقى أفضلها حسب حالتك و موقعك الذي تقوم ببنائه.

هل يمكنك مشاركة الكود لنتمكن من مساعدتك؟ الخطأ query on null يشير إلى أن الاستعلام يتم تنفيذه على اتصال غير موجود ضمن النطاق الحالي أو غير معرف، هذا مثال على كلا الحالتين: الحالة الأولى: متغير الاتصال في غير نطاق scope <?php $db = new mysqli('127.0.0.1', 'root', '', 'db_name'); function getData($user_id){ $result = $db->query("SELECT * FROM chatpp WHERE id = '$user_id'"); //.... } نلاحظ هنا أننا قمنا بتعريف متغير الاتصال db خارج نطاق التابع getData و عند استخدامه داخل التابع لتتنفيذ الاستعلام سيعطي الخطأ: query() on null ولحل هذا الخطأ نقوم بتعريف متغير الاتصال كـ global variable كالتالي: <?php global $db = new mysqli('127.0.0.1', 'root', '', 'db_name'); function getData($user_id){ $result = $db->query("SELECT * FROM chatpp WHERE id = '$user_id'"); //.... } الحالة الثانية: هي وجود خطأ في تسمية متغير الاتصال (بسبب السرعة أو نسخ و لصق الاكواد الجاهزة من الانترنت دون تنقيحها) كالتالي: <?php $db = new mysqli('127.0.0.1', 'root', '', 'db_name'); $result = $conn->query("SELECT * FROM chatpp WHERE id = '$user_id'"); حيث في الكود السابق تم تعريف متغير اتصال اسمه db و استخدام متغير اتصال اخر اسمه conn لاستدعاء تابع الاستعلام. هذه هي الاخطاء الأكثر شيوعا لهذا النوع من الأخطاء، في حال لم تحل المشكلة بتطبيق الحلول السابقة قم برفع الكود كي نتمكن من مساعدتك.

مرحباً يخبرك الخطأ بالتالي: Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. لديك في أحد ملفات العناصر (الكائنات component) عنصرا فيه أكثر من عنصر داخل وسم ال template لذلك قم بالتاكد من وجود عنصر ابن واحد فقط داخل وسم ال template ، ثم ضع بقية العناصر التي تريدها بداخل هذا الابن مهما كان عددها. مثلا هذا الكود سيعطيك خطأ: <template> <div class=""> </div> <div class=""> </div> </template> ولتصحيحه قم بوضع عنصر ابن واحد داخل template كالتالي: <template> <div class=""> <div class=""> </div> <div class=""> </div> </div> </template>

للدخول في مجال علم الروبوتيك تحتاج لأن تعلم أنه مجال مبني على عدة علوم أساسية و تقدمك في تعلم هذا المجال رهنٌ لإتقانك تلك العلوم، و هي كالتالي: أولا الميكانيك و التصميم الميكانيكي: يجب أن تعرف بعض الاساسيات في علم الميكانيك كقوانين الحركة و التحريك و المسننات و البكرات و الدوران و العزوم .. ثانياً أساسيات الكهرباء و الالكترونيات: يجب أيضا ان تتعلم بعض الاساسيات في قوانين الكهرباء و الالكترونيات لأنك لاحقا ستضطر لتصميم داراتك الخاصة لتنفذ مهمة معينة، و ستلزمك بكل تأكيد في حال تقدمك في هذا المجال عند تصميم و بناء روبوتات مصممة بشكل شخصي. ثالثاً البرمجة و الخوارزميات: إن المهارة الاساسية المطلوبة في بناء الروبوتات هي البرمجة و مهارة حل المشاكل لذلك يعد اتقانك لهاتين المهارتين عاملا اساسيا لتعلمك الروبوتيك. أما بالنسبة لخطوات عملية للبدأ بهذا المجال فأنصحك بالخطوات التالية: تعلم سكراتش لاتقان اساسيات الخوارزميات و طرق حل المشاكل. تعلم LEGO robotics kits للتعرف على أساسيات الميكانيك و البرمجة. تعلم و تطبيق مشاريع روبوتية باستخدام متحكم أردوينو. الانتقال لمتحكمات صغيرة أقوى و ذات خصائص تحكمية أكبر و تعلم أساسيات النظم المضمنة embedded systems. أخيرا عند اتقانك لجميع ما سبق و تقدمك في البرمجة يمكنك البدأ بتعلم اساسيات الذكاء الصنعي AI و محاولة تطبيق بعض خوارزمياته في مشاريعك.

مرحباً، يمكنك تسجيل الدخول عن طريق أحد الحلقين المذكورين ( البريد الالكتروني او اسم المستخدم) من خلال تنفيذ الخطوات التالية: بالبداية بكل تأكيد يجب أن تكون قد أنشأت ملفات المصادقة auth scaffolding ، من خلال عدة خيارات متاحة أثناء بناء تطبيقك، مثلاً: php artisan ui bootstrap --auth بعدها تأكد من اضافة حقل username في جدول المستخدمين الخاص بك لتكون كالتالي: <?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateUsersTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('users', function (Blueprint $table) { $table->bigIncrements('id'); $table->string('name'); $table->string('email'); $table->string('username')->nullable(); $table->timestamp('email_verified_at')->nullable(); $table->boolean('is_admin')->nullable(); $table->string('password'); $table->rememberToken(); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('users'); } } ولا تنسى القيام بـ migrate في حال قمت بالتعديل على الملف السابق ليتم بناء قاعدة البيانات من جديد في ملف واجهة تسجيل الدخول login blade قم بحذف حقل البريد الالكتروني email و إضافة حقل اسم المستخدم username كي يكون بديلا عنه (سنقوم بجعله يقبل الاثنين في الخطوة القادمة) عبر الكود التالي: <div class="form-group row"> <label for="username" class="col-md-4 col-form-label text-md-right">Username Or Email</label> <div class="col-md-6"> <input id="username" type="username" class="form-control @error('username') is-invalid @enderror" name="username" value="{{ old('username') }}" required autofocus> @error('username') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror </div> </div> الان سنقوم بتعديل تابع تسجيل الدخول login في ملف LoginController كي يحقق الوظيفة المطلوبة كالتالي: <?php namespace App\Http\Controllers\Auth; use App\Http\Controllers\Controller; use Illuminate\Foundation\Auth\AuthenticatesUsers; use Illuminate\Http\Request; class LoginController extends Controller { use AuthenticatesUsers; protected $redirectTo = '/home'; /** * Create a new controller instance. * * @return void */ public function __construct() { $this->middleware('guest')->except('logout'); } /** * Create a new controller instance. * * @return void */ public function login(Request $request) { $input = $request->all(); $this->validate($request, [ 'username' => 'required', 'password' => 'required', ]); $fieldType = filter_var($request->username, FILTER_VALIDATE_EMAIL) ? 'email' : 'username'; if(auth()->attempt(array($fieldType => $input['username'], 'password' => $input['password']))) { return redirect()->route('home'); }else{ return redirect()->route('login') ->with('error','Email-Address And Password Are Wrong.'); } } } يقوم التعديل السابق بفحص البيانات المدخلة في حقل username فإذا كانت بصيغة email فإنه سيقوم بمقارنتها بعمود البريد الالكتروني في قاعدة البيانات و الا فإنها اسم مستخدم و سيقارنها بحقل username بقاعدة البيانات.

مرحبا، يخبرك الخطأ انه لم يتعرف على العنصر React في السطر السابع، لذلك قم باستدعاء عنصر React لتتمكن عناصر الصفحة من التعرف عليه و استدعائه عبر تعديل السطر الثالث ليصبح كما يلي: import React, { createElement } from 'react'; وبذلك يفترض أن يعمل الكود لديك بالتوفيق

مرحباً صديقي @Ali Ali19 لا أنصحك باتباع هذه الطريقة في الحصول على إجابات الأسئلة و الإختبارات، بل الأفضل أن تحاول حلها بنفسك و تعرض إجاباتك و محاولاتك هنا و نحن سنقوم بمساعدتك و تصويب الأخطاء إن وجدت. بشكل عام، يمكنك الاستفادة من الشرح التالي في أداء هذه المهمة: إن شكل (صيغة) تعريف دالة يعتمد على لغة البرمجة التي تستخدمها، فمثلاً في لغات PHP, JS يعرف التابع على الشكل التالي (اذا كنت تريد تطبيقها في جافا عليك باستخدام الـ synatax الخاص بجافا طبعا، هنا ساستخدم PHP): // PHP تعريف تابع في // fun_name تشير لاسم التابع المراد تعريفه // $var هو اسم المتغير الذي نقوم بتمريره للتابع و يمكنك تمرير أكثر من متغير و الفصل بينهما بفاصلة // لاحظ ان المتغيرات في PHP تكون مسبوقة بالرمز $ function fun_name($var){ // تعليمات جسم التابع } يمكنك المرور على عناصر مصفوفة من خلال استخدام حلقات for, while مثلا هنا في هذا المثال سأقوم بالمرور على مصفوفة و أفحص عناصرها وأضع آخر عنصر زوجي (يقبل القسمة على 2 بدون باقي) ضمن متحول اسمه num: $arr = array(2,5,6,9,8,66,4,7); $num; // عرفنا متغير لنضع فيه قيمة الرقم الذي يقبل القسمة على 2 for ($i=0; $i< count($arr); $i++){ if( $arr[$i] % 2 == 0) // نفحص اذا كان العدد زوجي $num = $arr[$i]; // نضعه في المتحول num } echo $num; // نطبع قيمة المتحول التي ستكون آخر عنصر زوجي في المصفوفة يمكنك الاستفادة من المنهجية السابقة (طريقة التفكير لحل المشكلة) و تطبيقها على مثالك مع بعض التعديلات لكي تلائم المهمة المطلوبة. تحياتي.

مرحباً @منى عاطف إن كنت تقصدين وضع روابط تأخذهم عند الضغط عليها لصفحة معينة على وسائل التواصل الاجتماعي (معلومات التواصل) فقط، عندها لا حاجة لأن يكون الموقع ديناميكياً و يمكنكِ تحقيق هذه الوظيفة عبر موقع استاتيكي. تحياتي.

مرحبا @منى عاطف كما ذكرت سابقاً، لجعل موقعك يتفاعل مع المستخدمين أو مع المواقع الأخرى ( مواقع التواصل الإجتماعي) فستحتاجين لكي يكون ديناميكياً و ستقوم اللغة التي تعمل في الـ backend بهذه الوظائف. بالنسبة لدورة الـ php فهي دورة backend ، إن كنت توديدن الإطلاع على دورة الـ frontend فإن اسمها هو: "دورة تطوير واجهات المستخدم" يمكنك زيارتها من الصفحة الرئيسية لموقع حسوب، كما هو موضح بالصورة: تحياتي.

مرحباً @منى عاطف في حال اشتراكك في إحدى دورات حسوب ستتمكنين من مشاهدة فيديوهات المقدمة للدورات الأخرى، ولكي تشاهدي كامل محتوى دورة php يتوجب الإشتراك بهذه الدورة. بالنسبة لعملية بناء أي تطبيق برمجي فإنها تمر بما يدعى دورة حياة التطبيق البرمجي (Software Application Lifecycle) و هي عدة مراحل يجب أن يمر بها التطبيق لضمان سير عملية التطوير بشكل سليم، وهي كالتالي: مرحلة التحليل: و هي المرحلة التي يتم فيها جمع المتطلبات الرئيسية لهذا التطبيق و ما الغاية منه و ما هي تفاصيل عمله و تتم بالتعاون مع مستخدمي التطبيق حيث سيقومون بتوفير المعلومات للمحلل لكي يصيغها بأشكال و صيغ يسهل على المبرمجين فهمها و يسهل عليهم تحويلها لاحقاً إلى تطبيق برمجي. مرحلة التصميم: يتم تصميم قاعدة البيانات و عدة مخططات توضح سير مرحلة البناء (مخططات ERP - Class Diagram - Use Case Diagram ..الخ) بناءً على متطلبات الزبون التي تم جمعها مسبقا في مرحلة التحليل. مرحلة البناء: يتم فيها برمجة و بناء التطبيق (بناء الكود). مرحلة الاختبار: حيث تجرى عدة اختبارات لمختلف السيناريوهات المحتملة على التطبيق و في حال تجاوز هذه الاختبارات فإن التطبيق يصبح جاهزاً لمرحلة الإطلاق. قد يختلف عدد المراحل السابقة من مرجع إلى آخر، ولكن كلها تشترك بالإتفاق على أهمية عملية التحليل، حيث أن الخطأ الذي يحدث في عملية التحليل سواء كان معلومة خاطئة من العميل أو تعبير عنها بشكل خاطئ من المحلل سيكون له تبعات غير محمودة مع تقدم عملية تطوير التطبيق، إذ انه سيكون من المكلف جدا في مراحل متأخرة إصلاح أخطاء وجدت بسبب تحليل خاطئ، لذلك يجب توضيح هذا الأمر لعميلك/صديقتك كي تتمكني من تطوير التطبيق بشكل جيد. بالتوفيق.

مرحباً أحمد، هل يمكنك إخباري ما الزر الذي تحاول ضغطه كي تظهر لك هذه القائمة؟

مرحباً @عبد الواحد الحدادي بالطبع هذه التقنيات تعتمد على لغة JavaScript بشكل أساسي (باستثناء angular التي تعتمد على لغة typeScript ثم تترجمها للغة javaScript) يمكن لمطور الواجهات الامامية frontend developer تعلم هذه المنصات (Frameworks) حالما يتقن أساسيات لغة JavaScript إذ أنه سيضطر بشكل أو بآخر لاستخدامها بشكلها الأساسي (JavaScript Pure) خلال تصميم و برمجة المواقع. من فوائد هذه التقنيات أنها: تنظم معمارية تطبيقك، تقسم صفحاتك و عناصرها بطريقة Modular تختصر عليك كتابة الكثير من الأكواد من خلال استخدام توابعها الجاهزة تؤتمت العديد من المهام التي كنت ستقوم بها بشكل يدوي لو أنك تستخدم JavaScript pure تحياتي.

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

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

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

مرحبا عبد الله, إن استلام ملفات الشيفرة البرمجية او الـ Source Code يكون بالطريقة المتفق عليها بين صاحب المشروع و المطور (المبرمج) و بالتالي لكل مشروع حالته الخاصة، لكن بالمجمل يفضل أن تكون أنت و العميل تستخدمان أداة أو منصة لأدارة المشروع و رؤية تفاصيل عملية التقدم، والتي تدعى : TFS اختصارا لـ Team Foundation Server أو أداة أبسط من ذلك كـ VCS اختصارا لـ Version Control System حيث يقوم المبرمج برفع عمله بشكل دوري على المنصات السابقة باستخدام تقنية git و يمكنك الاطلاع على عمل المبرمج و سحب الكود متى أردت ذلك. بالنسبة لنظافة الشيفرة البرمجية فهي تعتمد على عدة عوامل يطول ذكرها و شرحها لكن أهمها هو أن يكون الكود يؤدي الوظيفة المطلوبة منه بدون أي أخطاء و بأفضل خوارزمية و معمارية ممكنة و بأسرع زمن تنفيذ و أقل استهلاك لسعة التخزين و سرعة التحميل. تحياتي.

أهلاً @منى عاطف إن بناء و تصميم المواقع هو علم واسع جداً وله العديد من الفروع و التشعبات، لكي نقوم ببناء موقع يجب أولاً معرفة أن المواقع التي نتصفحها مقسومة لجزيئين أساسيين: backend: و هو الجزء الذي ينفذ على السيرفر و يتصل بقاعدة البيانات. frontend: و هو الجزء الذي ينفذ على المتصفح الخاص بالمستخدم (فايرفوكس - كروم ..) و يضم الواجهات التي نتفاعل معها. بما أنك ذكرت في سؤالك أنك تريدين موقع تعريف بالفكرة فربما تودين أن يكون الموقع static أي فقط عبارة عن واجهات frontend تعرض معلومات تعريفية عن هذه الفكرة، ولكن إن كنتم تريدون عرض أنشطتكم و إضافة محتويات أو تعديلها بشكل مستمر، عدها يجب أن يكون الموقع Dynamic أي له قسم Backend بالاضافة لقسم الـ frontend . و سأقوم باعطاء نبذة تعريفية عن المجالين الاساسيين لتصميم و بناء المواقع (Frontend - Backend): - الواجهات الأمامية Frontend : أولا تعلم HTML اختصارا لـ: hypertext markup language و هي لغة وصفية (ليست برمجية) مهمتها وصف هيكلية صفحة الويب التي نقوم بتصميمها، (مثل البناء الذي تم تعميره للتو دون أي إكساء للمظهر الخارجي). أي في هذا الجزء من الصفحة لدي نص و في الجزء الآخر لدي صورة و في الجزء الذي يليه لدي حقل ادخال نصي ثم زر وهكذا.. . ثانياً تعلم CSS اختصاراً لـ: Cascading Style Sheets وهي المسؤولة عن تخصيص المظهر الخارجي أي تخصيص: الألوان - التموضع - الازاحة - الانحياز - الابعاد .. وغيرها من خصائص مظاهر الخارجي. ثالثاً تعلم لغة JavaScript و هي لغة برمجية تنفذ ضمن المتصفح بعد طلب و تحميل الصفحة، تمكننا من القيام بالعديد من المهام و الوظائف لعل أبرزها: الوصول إلى عناصر الصفحة التي بنيناها سابقا باستخدام HTML و تغييرها و التلاعب بها تغيير خصائص مظهرها الخارجي كتغيير قيم CSS بالإضافة للقيام بالاتصال بقسم الـ backend من الموقع الاكتروني و إحضار البيانات منه و عرضها ضمن الصفحة دون الحاجة لإعادة تحميل الصفحة (عمل refresh). ثم بعد الانتهاء من الأساسيات السابقة يمكنك الانتقال إلى تعلم المكاتب و أطر العمل كالتالي: مكاتب frontend-design مثل bootstrap لتسهيل و تسريع عملية بناء و تصميم الواجهات بشكل جذاب و متوافق مع أغلب المتصفحات و الأجهزة. مكتبة JQuery المبنية من لغة JavaScript أيضاً بديل لتسهيل و تسريع استخدام لغة JavaScript. أطر عمل frameworks لبرمجة الـ frontend مثل: (Angular - React - VueJs) - برمجة المواقع Backend: أولاً تعلم لغة برمجية خاصة بالـ backend تقوم بالتنفيذ على السيرفر، مثل (php - ruby- nodejs - java - python ) ثانياً تعلم أساسيات إدارة قواعد البيانات المناسبة للمشروع (ٍَSQL - NOSQL) حيث تقوم لغة البرمجة التي تنفذ على السيرفر (php مثلا) بالاتصال بقاعدة البيانات و إحضار البيانات الخاصة بموقعكم و معالجتها و إرسالها الى الـ frontend ، و بالعكس استقبال البيانات المدخلة من واجهات الـ frontend و معالجتها و تخزينها في قاعدة البيانات أو تعديل البيانات الموجودة ضمن قاعدة البيانات. وبهذا نكون قد علمنا نبذة بسيطة عن آلية برمجة و كيفية إنشاء الأقسام البرمجية المختلفة للمواقع الالكترونية. أيضاً أريد التنويه إلى أنه بالإمكان استخدام أنظمة ادارة المحتوى content management system مثل Wordpress و هي مكونة بشكل أساسي من themes مبرمجة و جاهز للأستخدام و يمكن التعديل عليها بسهولة عبر إضافة plugins أيضاً تقوم بتسريع عملية بناء الموقع بدلاً من بنائه من الصفر. بالتوفيق

مرحباً @امل سليمان هارون إن بناء و تصميم المواقع هو علم واسع جداً وله العديد من الفروع و التشعبات، لكي نقوم ببناء موقع يجب أولاً معرفة أن المواقع التي نتصفحها مقسومة لجزيئين أساسيين: backend: و هو الجزء الذي ينفذ على السيرفر و يتصل بقاعدة البيانات. frontend: و هو الجزء الذي ينفذ على المتصفح الخاص بالمستخدم (فايرفوكس - كروم ..) و يضم الواجهات التي نتفاعل معها. بما أن سؤالك موجه لتصميم المواقع فقد حددنا هنا الجزء الثاني وهو الـ frontend لتصميم وبرمجة الواجهات. لكي نبدأ بتعلم تصميم وبرمجة الواجهات الأمامية للمواقع يجب علينا: أولا تعلم HTML اختصارا لـ: hypertext markup language و هي لغة وصفية (ليست برمجية) مهمتها وصف هيكلية صفحة الويب التي نقوم بتصميمها، (مثل البناء الذي تم تعميره للتو دون أي إكساء للمظهر الخارجي). أي في هذا الجزء من الصفحة لدي نص و في الجزء الآخر لدي صورة و في الجزء الذي يليه لدي حقل ادخال نصي ثم زر وهكذا.. . ثانياً تعلم CSS اختصاراً لـ: Cascading Style Sheets وهي المسؤولة عن تخصيص المظهر الخارجي أي تخصيص: الألوان - التموضع - الازاحة - الانحياز - الابعاد .. وغيرها من خصائص مظاهر الخارجي. ثالثاً تعلم لغة JavaScript و هي لغة برمجية تنفذ ضمن المتصفح بعد طلب و تحميل الصفحة، تمكننا من القيام بالعديد من المهام و الوظائف لعل أبرزها: الوصول إلى عناصر الصفحة التي بنيناها سابقا باستخدام HTML و تغييرها و التلاعب بها تغيير خصائص مظهرها الخارجي كتغيير قيم CSS بالإضافة للقيام بالاتصال بقسم الـ backend من الموقع الاكتروني و إحضار البيانات منه و عرضها ضمن الصفحة دون الحاجة لإعادة تحميل الصفحة (عمل refresh). ثم بعد الانتهاء من الأساسيات السابقة يمكنك الانتقال إلى تعلم المكاتب و أطر العمل كالتالي: مكاتب frontend-design مثل bootstrap لتسهيل و تسريع عملية بناء و تصميم الواجهات بشكل جذاب و متوافق مع أغلب المتصفحات و الأجهزة. مكتبة JQuery المبنية من لغة JavaScript أيضاً بديل لتسهيل و تسريع استخدام لغة JavaScript. أطر عمل frameworks لبرمجة الـ frontend مثل: (Angular - React - VueJs) أيضاً أريد التنويه إلى أنه بالإمكان استخدام أنظمة ادارة المحتوى content management system مثل Wordpress و هي مكونة بشكل أساسي من themes مبرمجة و جاهز للأستخدام و يمكن التعديل عليها بسهولة عبر إضافة plugins أيضاً تقوم بتسريع عملية بناء الموقع بدلاً من بنائه من الصفر. بالتوفيق

مرحباً صديقي، إن المتغيرات بكل بساطة هي عبارة عن مكان لتخزين البيانات في ذاكرة الحاسوب أثناء القيام ببرمجة برنامج معين بغض النظر عن اللغة المستخدمة في البرمجة (نحن نتكلم هنا عن مفهوم البرمجة بشكل عام) أما التوابع فهي عمليات أو أفعال نقوم بها و نستخدمها في البرنامج لتحقيق غاية معينة، لنعيد ما سبق بلغة أبسط: أنت لديك حقيبة مدرسية لتخزين الكتب، يمكنك تشبيه الحقيبة بالمتغيرات، إذ يمكنك وضع البيانات المناسبة للمتغير ضمن هذا المتغير، فتقوم مثلاً بوضع الكتب في الحقيبة المدرسية (تقوم بتخزين الكتب في الحقيبة). ولكن لا يمكنك على سبيل المثال وضع أواني المطبخ في الحقيبة المدرسية، لأنها بكل بساطة ليست مخصصة لذلك، بل تقوم بوضع الاواني في مكانها المخصص ضمن المطبخ. نفس الوضع ينطبق على المتغيرات البرمجية في بعض اللغات. مثلاً (متغيرات خاصة لتخزين السلاسل المحرفية و النصوص و أخرى مخصصة لتخزين الارقام و أخرى لتخزين الكائنات). ربما يجب أن لا تقلق من هذا الأمر فهو ليس ضروريا جداً في لغة JavaScript . الأهم هو أن المتغيرات هي أماكن لتخزين المعلومات. نأتي للتوابع، التوابع قلنا هي الأفعال التي نقوم بالقيام بها سواءً كانت افعال بسيطة أم مركبة، فبالعودة للمثال السابق: وضع الكتب داخل الحقيبة هو فعل ( يمكن التعبير عنه بتابع) و إغلاقك للسحاب هو فعل أيضاً و حملك للحقيبة هو فعل و إفراغك لمحتويات الحقيبة هو فعل كذلك، و يمكن التعبير عن جميع الافعال السابقة بتوابع. سنقوم بتطبيق مثال برمجي: سنعرف متحولين لتخزين الرقمين 1 و 2، و سنسمي هذين المتحولين x و y كالتالي: var x = 1; var y = 2; لاحظ اننا قمنا الآن بتعريف المتغيرات، الآن سننتقل للتوابع، التوابع قلنا أنها أفعال، سنقوم بتعريف تابع لجمع أي رقمين و سنسميه sum: function sum(a,b){ return a+b; } يقوم التابع السابق بارجاع مجموع الرقمين الذين سيمرران اليه، الان سنقوم بتنفيذه على المتغيرين x و y : sum(x,y); الان سيقوم التابع sum باخذ قيم الارقام المخزنة ضمن المتحولين x و y واللذان هما 1 و 2 و جمعهما و ارجاع الناتج و هو 3. تحياتي،

مرحباً @Hafsa Aly من أجل حل التمرين 2 يجب علينا استذكار أننا يجب علينا استخدام تابع تتبع حدث الكتابة ضمن حقل الادخال الذي تعلمناه في المقال، وهو (اسميناه في حالتنا: (keyIsUp): v-on:keyup='keyIsUp' وسنقوم بتعريفه في اقسم الـ methods ، و كما تعلمنا أيضا في المقال، كالتالي: keyIsUp: function(event) { } و الان سنقوم باستخدام تابع للبحث ضمن مصفوفة اسماء البلدان التي طلب منا البحث فيها. لكي نقوم بهذه الخطوة يجب علينا معرفة آلية الحل التي تلخص بالتالي: يجب علينا المرور على جميع عناصر المصفوفة countries و سنقوم بمقارنة ما أدخله المستخدم في مربع البحث مع هذا العنصر، ولكن يجب الانتباه إلى أننا لن نقارن العنصر المدخل مع عنصر المصفوفة ككل ، بل يجب أن يحتوي عنصر المصفوفة على العنصر المدخل أو جزء منه. للقيام بعملية المرور على جميع عناصر المصفوفة لدينا العديد من التوابع في javascript ولكن يمكنك استخدام الأشهر وهو التابع filter حيث يقوم بالمرور على جميع عناصر مصفوفة ما. وللتأكد أن عنصراً ما من المصفوفة يحوي النص المدخل أو جزءا منه يمكننا استعمال التابع includes : String.includes("substring"); و في حال التأكد أن هذا العنصر من المصفوفة يحوي النص المدخل نقوم بادخال عنصر المصفوفة ضمن مصفوفة أخرى تكون فارغة في البداية. وبعد إتمام المرور على جميع عناصر المصفوفة countries سنذهب للمصفوفة الجديدة التي أنشأناها و وضعنا فيها العناصر المتطابقة مع النص المدخل و سنقوم بعرض محتوياتها على شكل قائمة مقترحات كما هو مطلوب في نص التمرين. هل يمكنك المحاولة مجدداً باستخدام التوابع المذكورة؟

و عليكم السلام يمكنك تحميل صورة الى الخادم في لغة php من خلال التابع move_uploaded_file حيث نقوم بتمرير متغيرين لهذا التابع كالتالي: move_uploaded_file( $_FILES["image"]["tmp_name"],// هنا نمرر المسار المؤقت لمكان وجود/رفع الصورة "path/to/the/images/folder" //هنا نمرر مسار حفظ الصورة ); و بالطبع يمكنك التطوير على طريقة استخدام التابع السابق، كوضعه ضمن try - catch للحصول على رسائل تحذيرية في حال حصول أخطاء. بالنسبة للـ password hashing فلديك العديد من الخيارات على حسب طريقة ال hashing التي تريدين استخدامها، ولكن غالبا في php لعمل hash لكلمة المرور نقوم باستخدام التابع: MD5 كالتالي: $password= md5("pass123"); // كلمة السر المخزنة مثلا في الداتابيس if (isset($_POST['password']) && !empty($_POST['password'])) { $new_password=$_POST['password']; // كلمة السر المدخلة من المستخدم ضمن الفورم if(md5($new_password)==$password) { echo "<br> Correct password "; } else{ echo "<br> Incorrect password "; } } حيث تخزن عادة كلمات السر ضمن قاعدة البيانات و هي مشفرة.

أهلا @hanan fahad11 تماماً، يمكنك استخدام قواعد البيانات العلائقية Relational databases مثل MySQL مع node.js كالتالي: في البداية نقوم بتنصيب المكتبة اللازمة للاتصال باستخدام محرر الاوامر كالتالي: C:\Users\Your Name>npm install mysql الان أصبح بالامكان استخدام هذا المودل لإنشاء اتصال بقاعدة بيانات من نوع SQL: var mysql = require('mysql'); الان سنقوم بانشاء ملف لنضع فيه تعليمات الاتصال بقاعدة البيانات اسمه demo_db_connection.js، نضع فيه التعليمات التالية: // اوبجكت انشاء الاتصال var mysql = require('mysql'); // تحديد اسم قاعدة البيانات و اسم المستخدم و كلمة المرور var con = mysql.createConnection({ host: "localhost", user: "yourusername", password: "yourpassword" }); // التاكد من نجاح الاتصال con.connect(function(err) { if (err) throw err; console.log("Connected!"); }); نقوم بتشغيل الملف السابق في محرر الاوامر: C:\Users\Your Name>node demo_db_connection.js والان في حال نجاح الاتصال سيطبع لنا العبارة التالية: Connected! يمكن أيضاً عمل استعلام ما لقاعدة البيانات من خلال التابع query كالتالي: con.connect(function(err) { if (err) throw err; con.query("SELECT * FROM customers", function (err, result, fields) { if (err) throw err; console.log(result); }); }); وعند تشغيل الملف مرة أخرى سيطبع نتيجة الاستعلام.

أيضاً أود الإضافة على جوابي السابق، أنه في حال كان المقصد من السؤال عدم استخدام أي framework في الـ frontend فبالطبع يمكنك بناء برمجة الـ frontend من خلال استخدام لغة جافاسكربت فقط (pure JavaScript) أو أحد مكاتبها كالـ jQuery . فالجافاسكربت هي الأساس في بناء جميع أطر العمل المذكورة سابقاً. ويمكنها بكل تأكيد استحضار البيانات من الـ backend (عن طريق استخدام API) ثم استخدام و عرض البيانات ضمن واجهات المستخدم.

يمكنك استخدام node.js كـ backend بدلاً من الـ php للتعامل مع قاعدة البيانات الخاصة بتطبيقك و استحضار البيانات منها و ارسالها إلى الـ frontend وبالمقابل سيتوجب استخدام إطار عمل مخصص للـ frontend مثل (VueJs - Angular - React) ليقوم بالاتصال بالـ backend و جلب الداتا منها و عرضها على الواجهة الأمامية للمستخدم.

مرحباً @hanan fahad إن node.js هي بيئة تعمل كـ backend على السيرفر وليست إطار عمل للـ frontend . إن التعليمة التي تحاولين استخدامها document.getelementbyid هي تعليمة بلغة جافا سكريبت لتحديد عنصر element ضمن صفحة ال html باستخدام المعرف id الخاص به. ولكن بما أنك تعملين على السيرفر ضمن ال backend فإن الكائن/الأوبجكت document لن يعمل بالأساس لانه لا يوجد صفحة html وعناصرها ضمن بيئة node.js من أجل الطلب الذي تفضلتي به، يجب استخدام فريمورك للـ frontend مثل: (VueJs - Angular - React) تقوم بيئات العمل هذه بالتفاعل مع عناصر صفحة html من جهة (DOM) و بالاتصال (ارسال/استقبال البيانات) للـ backend الموجودة على السيرفر مثل (node.js) من جهة أخرى.