ANWBH

Members
  • عدد منشوراتي

    22
  • تاريخ الإنضمام

  • تاريخ اخر زياره

السمعه بالموقع

11 Good

عن العضو ANWBH

  • الرتبه
    مبدع مثابر
  • تاريخ الميلاد 01/24/91

معلومات عامة

  • الجنس
    ذكر
  • السكن
    Bahrain
  • هواياتي
    404

اخر الزوار

1270 زياره للملف الشخصي
  1. السلام عليكم ورحمة الله وبركاته .. من بعد المقدمة حول قاعدة بيانات الـMongoDB حيث تم التعرف على: ما نوع قاعدة البيانات. كيفية تخزين البيانات فيها. العمليات البسيطة منها الـfind. الفروقات السطيحة مابين الـMongoDB و قواعد البيانات الأخرى من نوع RDBMS. لماذا انصح بالتحول إلى هذا النوع من قواعد البيانات. إذا , اصبح هناك نظرة شاملة حول هذا النوع من قواعد البيانات و في هذا الدرس سنبدأ بأول العمليات المهمة والاساسية التي تسمى بـCRUD اختصارا إلى: Create Read Update Delete نبدأ بسمه تعالى, افتح الـCMD او الـTerminal و اكتب الكوماند التالي لتفعيل خدمة الـMongoDB في جهازك بعد ذلك افتح CMD آخر واكتب الكوماند التالي للدخول على MongoDB Shell بعد الدخول على الـMongoDB Shell لمعلومات اكثر اكتب help لندا بتصفح قواعد البيانات الموجوده مسبقا في بكتابه show dbs ستظهر قاعدة بيانات واحده اسمها local تحتوي على collection بإسم startup_log وهنا ننوه مره اخرى بأن: اسم الـTable في الـMongoDB هو Collection اسم الـRow في الـMongoDB هو Document قم بإنشاء قاعدة بيانات جديدة و اختارها من خلال كوماند واحد و DATABASE_NAME تعني اسم قاعدة البيانات التي تريد عملها ولنفترض abdullashop بعد انشاء قاعدة البيانات واختيارها نبدأ الآن بعمل collection بإسم مثلا customers db.createCollection("customers") //results /* { "ok" : 1 } */ أولا: Create الأن نأتي لموضوع الإضافه بداخل الكولكشن .. للإضافه هناك ثلاث خيارات ممكن استخدامها: db.collection.insert() - old db.collection.insertOne() New in version 3.2 db.collection.insertMany() New in version 3.2 و في هذا الدرس سنستخدم insertMany لإضافة اكثر من document في collection بإستخدام كوماند واحد Syntax db.collection.insertMany( { [ <document 1> , <document 2>, ... ] }, { writeConcern: <document>, ordered: <boolean> } ) ماسنضيفه بداخل الكولكشن هو ( اعمل نسخ ومن ثم لصق في الـCMD) db.customers.insertMany([ { cus_name: "Abdulla Jassim", payment: 10, branch: "Hamad Town" }, { cus_name: "Mohammed Yousif", payment: 12, branch: "Saar" }, { cus_name: "Yassir Khalaf", payment: 4.5, branch: "Isa Town" }, { cus_name: "omar khalid", payment: 7.2, branch: "Manama" }, { cus_name: "Reem Ali", payment: 34, branch: "Riffa" }, { cus_name: "Fatima Talal", payment: 9.6, branch: "Manama" } ]) // results // /* { "acknowledged" : true, "insertedIds" : [ ObjectId("5803b8ccf9f236bb5591f181"), ObjectId("5803b8ccf9f236bb5591f182"), ObjectId("5803b8ccf9f236bb5591f183"), ObjectId("5803b8ccf9f236bb5591f184"), ObjectId("5803b8ccf9f236bb5591f185"), ObjectId("5803b8ccf9f236bb5591f186") ] } */ ثانيا: Read بعد عمل قاعدة البيانات , كولكشن و إضافه دوكيومنتس تأتي العمليه الثانية في الـCRUD وهي Read او Find في مصطلحات الـMongoDB وللبحث \ لقراءة جميع المدخلات التي في جدول customers تكون بالكماند التالي ( ملاحظة pretty() function فقط لعرض الناتج بشكل اوضح ) Syntax db.collection.find() db.cunstomers.find({}).pretty() // results // /* { "_id" : ObjectId("5803b8ccf9f236bb5591f181"), "cus_name" : "Abdulla Jassim", "payment" : 10, "branch" : "Hamad Town" } { "_id" : ObjectId("5803b8ccf9f236bb5591f182"), "cus_name" : "Mohammed Yousif", "payment" : 12, "branch" : "Saar" } { "_id" : ObjectId("5803b8ccf9f236bb5591f183"), "cus_name" : "Yassir Khalaf", "payment" : 4.5, "branch" : "Isa Town" } { "_id" : ObjectId("5803b8ccf9f236bb5591f184"), "cus_name" : "omar khalid", "payment" : 7.2, "branch" : "Manama" } { "_id" : ObjectId("5803b8ccf9f236bb5591f185"), "cus_name" : "Reem Ali", "payment" : 34, "branch" : "Riffa" } { "_id" : ObjectId("5803b8ccf9f236bb5591f186"), "cus_name" : "Fatima Talal", "payment" : 9.6, "branch" : "Manama" } */ تطبيقات حول db.collection.find استخرج اسماء جميع الأشخاص الذين دفعوا اكثر من 10 دنانير .. سيكون الكوماند db.customers.find( { payment:{$gt: 10} }, { payment: 0, branch: 0 , _id: 0 } ) /* { payment:{$gt: 10} } = the condition where payment $gt greater than 10 { payment: 0, branch: 0 , _id: 0 } = exclude these fields/cols from results Resutls: { "cus_name" : "Mohammed Yousif" } { "cus_name" : "Reem Ali" } */ استخرج جميع من يحتوي اسمه على المقطع al db.customers.find({cus_name: /al/}).pretty() // Results // /* { "_id" : ObjectId("5803b8ccf9f236bb5591f183"), "cus_name" : "Yassir Khalaf", "payment" : 4.5, "branch" : "Isa Town" } { "_id" : ObjectId("5803b8ccf9f236bb5591f184"), "cus_name" : "omar khalid", "payment" : 7.2, "branch" : "Manama" } { "_id" : ObjectId("5803b8ccf9f236bb5591f186"), "cus_name" : "Fatima Talal", "payment" : 9.6, "branch" : "Manama" } */ ثالثا: Update لتحديث دوكيومنت معين او عدد من الدوكيومنتس يعتمد على الحاله التي تواجهها: db.collection.update() - old db.collection.updateOne() New in version 3.2 db.collection.updateMany() New in version 3.2 db.collection.replaceOne() New in version 3.2 ولكن لنبدأ بابسط الاوامر Syntax db.collection.updateOne(filter, update, options) وأمثلة على ذلك , تحديث مدفوعات من اسمه Abdulla إلى 14 db.customers.updateOne({"cus_name": "Abdulla Jassim"}, {$set: {"payment": 14} }) /* set payment = 14 where cus_name= 'Abdulla Jassim' Resutls If Match { "acknowledged" : true, "matchedCount" : 1, "modifiedCount" : 1 } Results If No Match { "acknowledged" : true, "matchedCount" : 0, "modifiedCount" : 0 } */ وبنفس الطريقة تستطيع تعديل اكثر من document دفعة واحده بإستخدام db.collection.updateMany رابعا: Delete في الحقيقة لا يوجد الكثير للحديث عنه في عملية الحذف لان الاتجاه والنتيجه واحده في كل الحالات حيث انه سيتم حذف الدوكيومنت التي تحدده db.collection.remove() - old db.collection.deleteOne() New in version 3.2 db.collection.deleteMany() New in version 3.2 و ساينتكس الحذف سيكون Syntax db.collection.deleteOne() مثال على حذف احد الدوكيومنتس في Collection الـcustomers db.customers.deleteOne({_id: ObjectId("5803b8ccf9f236bb5591f186") }) /* Resutls If match { "acknowledged" : true, "deletedCount" : 1 } Resutls If !match { "acknowledged" : true, "deletedCount" : 0 */ مثال آخر على حذف اكثر من document دفعة واحده db.customers.deleteMany({"payment": {$not: {$eq: 0 } } }) /* Delete all document from customers where paymanet != 0 {$not: {$eq: 0 } } means != 0 Results If match { "acknowledged" : true, "deletedCount" : 5 } Results If !match (the statment is right but no such documents found) { "acknowledged" : true, "deletedCount" : 0 } */
  2. البدأ بعمليات الـCRUD في قاعدة بيانات الـMongoDB السلام عليكم ورحمة الله وبركاته .. من بعد المقدمة حول قاعدة بيانات الـMongoDB حيث تم التعرف على: ما نوع قاعدة البيانات. كيفية تخزين البيانات فيها. العمليات البسيطة منها الـfind. الفروقات السطيحة مابين الـMongoDB و قواعد البيانات الأخرى من نوع RDBMS. لماذا انصح بالتحول إلى هذا النوع من قواعد البيانات. إذا , اصبح هناك نظرة شاملة حول هذا النوع من قواعد البيانات و في هذا الدرس سنبدأ بأول العمليات المهمة والاساسية التي تسمى بـCRUD اختصارا إلى: Create Read Update Delete نبدأ بسمه تعالى, افتح الـCMD او الـTerminal و اكتب الكوماند التالي لتفعيل خدمة الـMongoDB في جهازك بعد ذلك افتح CMD آخر واكتب الكوماند التالي للدخول على MongoDB Shell بعد الدخول على الـMongoDB Shell لمعلومات اكثر اكتب help لندا بتصفح قواعد البيانات الموجوده مسبقا في بكتابه show dbs ستظهر قاعدة بيانات واحده اسمها local تحتوي على collection بإسم startup_log وهنا ننوه مره اخرى بأن: اسم الـTable في الـMongoDB هو Collection اسم الـRow في الـMongoDB هو Document قم بإنشاء قاعدة بيانات جديدة و اختارها من خلال كوماند واحد و DATABASE_NAME تعني اسم قاعدة البيانات التي تريد عملها ولنفترض abdullashop بعد انشاء قاعدة البيانات واختيارها نبدأ الآن بعمل collection بإسم مثلا customers db.createCollection("customers") //results /* { "ok" : 1 } */ أولا: Create الأن نأتي لموضوع الإضافه بداخل الكولكشن .. للإضافه هناك ثلاث خيارات ممكن استخدامها: db.collection.insert() - old db.collection.insertOne() New in version 3.2 db.collection.insertMany() New in version 3.2 و في هذا الدرس سنستخدم insertMany لإضافة اكثر من document في collection بإستخدام كوماند واحد Syntax db.collection.insertMany( { [ <document 1> , <document 2>, ... ] }, { writeConcern: <document>, ordered: <boolean> } ) ماسنضيفه بداخل الكولكشن هو ( اعمل نسخ ومن ثم لصق في الـCMD) db.customers.insertMany([ { cus_name: "Abdulla Jassim", payment: 10, branch: "Hamad Town" }, { cus_name: "Mohammed Yousif", payment: 12, branch: "Saar" }, { cus_name: "Yassir Khalaf", payment: 4.5, branch: "Isa Town" }, { cus_name: "omar khalid", payment: 7.2, branch: "Manama" }, { cus_name: "Reem Ali", payment: 34, branch: "Riffa" }, { cus_name: "Fatima Talal", payment: 9.6, branch: "Manama" } ]) // results // /* { "acknowledged" : true, "insertedIds" : [ ObjectId("5803b8ccf9f236bb5591f181"), ObjectId("5803b8ccf9f236bb5591f182"), ObjectId("5803b8ccf9f236bb5591f183"), ObjectId("5803b8ccf9f236bb5591f184"), ObjectId("5803b8ccf9f236bb5591f185"), ObjectId("5803b8ccf9f236bb5591f186") ] } */ ثانيا: Read بعد عمل قاعدة البيانات , كولكشن و إضافه دوكيومنتس تأتي العمليه الثانية في الـCRUD وهي Read او Find في مصطلحات الـMongoDB وللبحث \ لقراءة جميع المدخلات التي في جدول customers تكون بالكماند التالي ( ملاحظة pretty() function فقط لعرض الناتج بشكل اوضح ) Syntax db.collection.find() db.cunstomers.find({}).pretty() // results // /* { "_id" : ObjectId("5803b8ccf9f236bb5591f181"), "cus_name" : "Abdulla Jassim", "payment" : 10, "branch" : "Hamad Town" } { "_id" : ObjectId("5803b8ccf9f236bb5591f182"), "cus_name" : "Mohammed Yousif", "payment" : 12, "branch" : "Saar" } { "_id" : ObjectId("5803b8ccf9f236bb5591f183"), "cus_name" : "Yassir Khalaf", "payment" : 4.5, "branch" : "Isa Town" } { "_id" : ObjectId("5803b8ccf9f236bb5591f184"), "cus_name" : "omar khalid", "payment" : 7.2, "branch" : "Manama" } { "_id" : ObjectId("5803b8ccf9f236bb5591f185"), "cus_name" : "Reem Ali", "payment" : 34, "branch" : "Riffa" } { "_id" : ObjectId("5803b8ccf9f236bb5591f186"), "cus_name" : "Fatima Talal", "payment" : 9.6, "branch" : "Manama" } */ تطبيقات حول db.collection.find استخرج اسماء جميع الأشخاص الذين دفعوا اكثر من 10 دنانير .. سيكون الكوماند db.customers.find( { payment:{$gt: 10} }, { payment: 0, branch: 0 , _id: 0 } ) /* { payment:{$gt: 10} } = the condition where payment $gt greater than 10 { payment: 0, branch: 0 , _id: 0 } = exclude these fields/cols from results Resutls: { "cus_name" : "Mohammed Yousif" } { "cus_name" : "Reem Ali" } */ استخرج جميع من يحتوي اسمه على المقطع al db.customers.find({cus_name: /al/}).pretty() // Results // /* { "_id" : ObjectId("5803b8ccf9f236bb5591f183"), "cus_name" : "Yassir Khalaf", "payment" : 4.5, "branch" : "Isa Town" } { "_id" : ObjectId("5803b8ccf9f236bb5591f184"), "cus_name" : "omar khalid", "payment" : 7.2, "branch" : "Manama" } { "_id" : ObjectId("5803b8ccf9f236bb5591f186"), "cus_name" : "Fatima Talal", "payment" : 9.6, "branch" : "Manama" } */ ثالثا: Update لتحديث دوكيومنت معين او عدد من الدوكيومنتس يعتمد على الحاله التي تواجهها: db.collection.update() - old db.collection.updateOne() New in version 3.2 db.collection.updateMany() New in version 3.2 db.collection.replaceOne() New in version 3.2 ولكن لنبدأ بابسط الاوامر Syntax db.collection.updateOne(filter, update, options) وأمثلة على ذلك , تحديث مدفوعات من اسمه Abdulla إلى 14 db.customers.updateOne({"cus_name": "Abdulla Jassim"}, {$set: {"payment": 14} }) /* set payment = 14 where cus_name= 'Abdulla Jassim' Resutls If Match { "acknowledged" : true, "matchedCount" : 1, "modifiedCount" : 1 } Results If No Match { "acknowledged" : true, "matchedCount" : 0, "modifiedCount" : 0 } */ وبنفس الطريقة تستطيع تعديل اكثر من document دفعة واحده بإستخدام db.collection.updateMany رابعا: Delete في الحقيقة لا يوجد الكثير للحديث عنه في عملية الحذف لان الاتجاه والنتيجه واحده في كل الحالات حيث انه سيتم حذف الدوكيومنت التي تحدده db.collection.remove() - old db.collection.deleteOne() New in version 3.2 db.collection.deleteMany() New in version 3.2 و ساينتكس الحذف سيكون Syntax db.collection.deleteOne() مثال على حذف احد الدوكيومنتس في Collection الـcustomers db.customers.deleteOne({_id: ObjectId("5803b8ccf9f236bb5591f186") }) /* Resutls If match { "acknowledged" : true, "deletedCount" : 1 } Resutls If !match { "acknowledged" : true, "deletedCount" : 0 */ مثال آخر على حذف اكثر من document دفعة واحده db.customers.deleteMany({"payment": {$not: {$eq: 0 } } }) /* Delete all document from customers where paymanet != 0 {$not: {$eq: 0 } } means != 0 Results If match { "acknowledged" : true, "deletedCount" : 5 } Results If !match (the statment is right but no such documents found) { "acknowledged" : true, "deletedCount" : 0 } */ تم ترقية هذا الطرح المميز الى صفحة المقالات
  3. ماهي قاعدة بيانات الـMongoDB؟ في السابق كان الحديث حول قواعدة البيانات المعروفه و المتوارد بين اقطاب المبرمجين من مختلف الأصعدة ابتدا من web developers إلى الـsoftware developers على مختلف المنصات windows, OSX, Linux و جل الحديث كان يدور حول نوع واحد فقط وهو RDBMS Relational database management system مثل MS SQL Server, IBM DB2, Oracle, MySQL, and Microsoft Access التي تعتمد في حفظ البيانات داخل جداول ولكن في الآونة الأخيرة و بعد صدور عدد من JS Frameworks و ارتفاع عدد مستخدمي لغة الجافاسكربت بدأت شركة 10GEN في العمل على قاعدة بيانات من نوع مختلف تماما عما سبق ذكرة وهي NoSQL تحت اسم MongoDB اي قاعدة بيانات لا توجد بها علاقة بين الجداول وتعتمد في حفظ البيانات كمستندات BOSN ويعد هذا النوع الأشهر بين عائلة الـNoSQL وهنا ننوه بأن جميع ما تعرفه عن الـSQL Databases قد يتغير فبالتاكيد لن يكون هناك كوريز بالطريقة التي اعتدت العمل عليها. 1- أمثله وبما ان الكثير من المبرمجين لديه خلفية في الـMySQL سأقوم بمقارنة سريعة حول الأختلافات السطحية بين المونجو والـMySQL: اسم الـTable في الـMongoDB هو Collection اسم الـRow في الـMongoDB هو Document تعتمد قواعد بيانات الـRDBMS على الجداول كالنحو التالي: بينما قاعدة بيانات الـMongoDB تعتمد على BSON وهذا يعني Binary Encoding Of JSON Objects وتكون كالنحو التالي: { "_id" : ObjectId("57fe832b13e6a51130a23d2a"), "ID" : 1, "username" : "abdulla", "email" : "abdulla@gmail.com" } { "_id" : ObjectId("57fe832b13e6a51130a23d2b"), "ID" : 2, "username" : "omar", "email" : "omar.g@gmail.com" } { "_id" : ObjectId("57fe832b13e6a51130a23d2c"), "ID" : 3, "username" : "mohammed", "email" : "mohd@hotmail.com" } امثلة حول الفروقات في عمليات الـQueries مابين الـMongoDB و الـMySQL OR RDBMS ولنفترض بأن لدينا جدول و كولكشن يحتويان على عدد من الصفوف والدوكيومنتس فيهم معلومات حول مستخدمين عرض جميع المستخدمين من هم دون السن الـ24 SELECT * FROM users WHERE age < 24 db.users.find({"age": { $lt: 24 }}) // $lt = less than عرض جميع المستخدمين الذين اعمارهم مابين الـ20 والـ30 SELECT * FROM `users` WHERE `age` BETWEEN 20 AND 30 db.users.find({ age: { $gt: 20, $lt: 30 }}) // $gt = greater than عرض المستخدمين الذين اسمائهم تحتوي على حرف A في الاول او الاخير او المنتصف لايهم SELECT * FROM `users` WHERE username LIKE %A% db.users.find({username: /A/}) و في حالة الإضافة INSERT INTO `users` (username,age,status) VALUES ('abdulla',25,'active') db.users.insertOne({username: "abdulla", age: 25, status: "active"}) ولكن هناك فارق كبير في هذه الكويري و بما ان قاعدة بيانات الـMongoDB ليست Relational بالتالي ليس هناك Schema محدده عند الإضافه فتستطيع مثلا إضافة document بمتغير col,field ليس موجود في الـdocument السابق او التالي في نفس الـCollection وبهذا يقال للـMongoDB بأن اهم مميزات هذا النوع من قواعد البيانات بأنه Flexible او Dynamic Schema ومثال على ذلك: db.users.insert([ { username: { fname: "abdulla", lname: "bahraini" }, age: 25, status: "active" }, { username: "mohammed", age: 19, status: "not active" } ]) 2- لماذا التحول الى MongoDB ( وجهة نظر ) كما اسلفنا سابقا ومع صدور عدد من js frameworks وبالاخص Meanjs المعني ب expressjs , angularjs & nodejs بالاضافه الmongodb و توسع هذه الفريموركس بشكل ضخم و رهيب جدا ومنها النود التي اصبحت خطر داهم على لغة الphp مقارنة بالسرعة, الاداء الرهيب وتناغم المونجو مع هذه الفريموركس بشكل افضل سبب في توجه الكثير من المطورين الى المونجو. ليس عند هذا الحد وحسب بل نظرا الى سرعة المونجو حسب الاحصائيات تبين اهمه الانتقال من قواعد البيانات الاعتيادية الى المونجو. تجربة اضافه 10000 صف و دوكيومنت في MySQL و MongoDB .. نلاحظ الفرق في سرعة الاداء احتاج المونجو الى ثانتين لتنفيذ المهمه بينما الMySQL احتاج الى 3 دقائق تقريبا. 3-التثبيت لتثبيت الـMongoDB قم بالدخول على الرابط واختر ما يناسب نظام جهازك بعد التثبيت إن كنت من متسخدمي الوندوز انشأ مجلد في داخل الـC (في حال تم تثبيت المونجو في السي) أضف المتغير التالي في PATH Environment وتجده في المسار التالي this pc >> proprieties >> Advanced System Settings >> Advanced tab >> Environment Variables >> in System Variables find PATH then Click Edit افتح الـCMD واكتب الكوماند التالي لتفعيل خدمه الـMongoDB في جهازك وستعمل على بورت 27017 بشكل افتراضي ثم افتح CMD أخر واكتب الكوماند التالي للدخول على MongoDB SHELL بالتالي ستكون داخل الـMongoDB SHELL وتستطيع التعامل معه من خلال الاوامر المباشرة وللإطلاع اكثر اكتب help
  4. ماهي قاعدة بيانات الـMongoDB؟ في السابق كان الحديث حول قواعدة البيانات المعروفه و المتوارد بين اقطاب المبرمجين من مختلف الأصعدة ابتدا من web developers إلى الـsoftware developers على مختلف المنصات windows, OSX, Linux و جل الحديث كان يدور حول نوع واحد فقط وهو RDBMS Relational database management system مثل MS SQL Server, IBM DB2, Oracle, MySQL, and Microsoft Access التي تعتمد في حفظ البيانات داخل جداول ولكن في الآونة الأخيرة و بعد صدور عدد من JS Frameworks و ارتفاع عدد مستخدمي لغة الجافاسكربت بدأت شركة 10GEN في العمل على قاعدة بيانات من نوع مختلف تماما عما سبق ذكرة وهي NoSQL تحت اسم MongoDB اي قاعدة بيانات لا توجد بها علاقة بين الجداول وتعتمد في حفظ البيانات كمستندات BOSN ويعد هذا النوع الأشهر بين عائلة الـNoSQL وهنا ننوه بأن جميع ما تعرفه عن الـSQL Databases قد يتغير فبالتاكيد لن يكون هناك كوريز بالطريقة التي اعتدت العمل عليها. 1- أمثله وبما ان الكثير من المبرمجين لديه خلفية في الـMySQL سأقوم بمقارنة سريعة حول الأختلافات السطحية بين المونجو والـMySQL: اسم الـTable في الـMongoDB هو Collection اسم الـRow في الـMongoDB هو Document تعتمد قواعد بيانات الـRDBMS على الجداول كالنحو التالي: بينما قاعدة بيانات الـMongoDB تعتمد على BSON وهذا يعني Binary Encoding Of JSON Objects وتكون كالنحو التالي: { "_id" : ObjectId("57fe832b13e6a51130a23d2a"), "ID" : 1, "username" : "abdulla", "email" : "abdulla@gmail.com" } { "_id" : ObjectId("57fe832b13e6a51130a23d2b"), "ID" : 2, "username" : "omar", "email" : "omar.g@gmail.com" } { "_id" : ObjectId("57fe832b13e6a51130a23d2c"), "ID" : 3, "username" : "mohammed", "email" : "mohd@hotmail.com" } امثلة حول الفروقات في عمليات الـQueries مابين الـMongoDB و الـMySQL OR RDBMS ولنفترض بأن لدينا جدول و كولكشن يحتويان على عدد من الصفوف والدوكيومنتس فيهم معلومات حول مستخدمين عرض جميع المستخدمين من هم دون السن الـ24 SELECT * FROM users WHERE age < 24 db.users.find({"age": { $lt: 24 }}) // $lt = less than عرض جميع المستخدمين الذين اعمارهم مابين الـ20 والـ30 SELECT * FROM `users` WHERE `age` BETWEEN 20 AND 30 db.users.find({ age: { $gt: 20, $lt: 30 }}) // $gt = greater than عرض المستخدمين الذين اسمائهم تحتوي على حرف A في الاول او الاخير او المنتصف لايهم SELECT * FROM `users` WHERE username LIKE %A% db.users.find({username: /A/}) و في حالة الإضافة INSERT INTO `users` (username,age,status) VALUES ('abdulla',25,'active') db.users.insertOne({username: "abdulla", age: 25, status: "active"}) ولكن هناك فارق كبير في هذه الكويري و بما ان قاعدة بيانات الـMongoDB ليست Relational بالتالي ليس هناك Schema محدده عند الإضافه فتستطيع مثلا إضافة document بمتغير col,field ليس موجود في الـdocument السابق او التالي في نفس الـCollection وبهذا يقال للـMongoDB بأن اهم مميزات هذا النوع من قواعد البيانات بأنه Flexible او Dynamic Schema ومثال على ذلك: db.users.insert([ { username: { fname: "abdulla", lname: "bahraini" }, age: 25, status: "active" }, { username: "mohammed", age: 19, status: "not active" } ]) 2- لماذا التحول الى MongoDB ( وجهة نظر ) كما اسلفنا سابقا ومع صدور عدد من js frameworks وبالاخص Meanjs المعني ب expressjs , angularjs & nodejs بالاضافه الmongodb و توسع هذه الفريموركس بشكل ضخم و رهيب جدا ومنها النود التي اصبحت خطر داهم على لغة الphp مقارنة بالسرعة, الاداء الرهيب وتناغم المونجو مع هذه الفريموركس بشكل افضل سبب في توجه الكثير من المطورين الى المونجو. ليس عند هذا الحد وحسب بل نظرا الى سرعة المونجو حسب الاحصائيات تبين اهمه الانتقال من قواعد البيانات الاعتيادية الى المونجو. تجربة اضافه 10000 صف و دوكيومنت في MySQL و MongoDB .. نلاحظ الفرق في سرعة الاداء احتاج المونجو الى ثانتين لتنفيذ المهمه بينما الMySQL احتاج الى 3 دقائق تقريبا. 3-التثبيت لتثبيت الـMongoDB قم بالدخول على الرابط واختر ما يناسب نظام جهازك بعد التثبيت إن كنت من متسخدمي الوندوز انشأ مجلد في داخل الـC (في حال تم تثبيت المونجو في السي) أضف المتغير التالي في PATH Environment وتجده في المسار التالي this pc >> proprieties >> Advanced System Settings >> Advanced tab >> Environment Variables >> in System Variables find PATH then Click Edit افتح الـCMD واكتب الكوماند التالي لتفعيل خدمه الـMongoDB في جهازك وستعمل على بورت 27017 بشكل افتراضي ثم افتح CMD أخر واكتب الكوماند التالي للدخول على MongoDB SHELL بالتالي ستكون داخل الـMongoDB SHELL وتستطيع التعامل معه من خلال الاوامر المباشرة وللإطلاع اكثر اكتب help تم ترقية هذا الطرح المميز الى صفحة المقالات
  5. السلام عليكم ورحمة الله وبركاته من خلال الدرسين السابقين والملاحظات: ماهو الNode.js؟ الدرس الأول في الNode.js عمل تسجيل دخول ملاحظات في الـJQuery مع الـNode.js تم التعرف على الفرق بين الـNode.js والـPHP , ماهو سبب تفوق سرعة النود وماهو النود جي اس مجملا , كما تم طرح الدرس الأول عن كيفية عمل خاصية تسجيل الدخول و حفظ الكوكيز في المتصفح ومنها يكون: عمل كونكشن مع الداتا بيس ارسال البيانات من فورم , طريقة استقبال المعلومات المرسلة , وبشكل خاص في الـNode.js , التعامل مع الـCookies بعد تسجيل الدخول ,كيفية التعامل مع البيانات من ومطابقتها مع قاعدة البيانات. في هذا الدرس الثاني سيتم عمل خاصية البحث بالطريقة الاعتيادية اولا ومن ثم سيكون هناك درس آخر لتبيان التغييرات لعمل البحث بشكل حي Live. إذا, لنبدأ هذا الدرس حيث سأفترض اولا بأنك اتممت قراءة الدرس الأول وتطبيق الدرس الأول و فهم ملاحظات الـJQuery مع الـNode.js , سنبدأ بعمل ملف الـبحث ومثلا يكون كالتالي: <!DOCTYPE html> <html lang="en"> <head id="head"> </head> <script src='js/jquery.js'></script> <script src="js/head.layout.js"></script> <script src="js/search.js"></script> <body> <!--/.nav-start --> <!-- Navigation Goes Here --> <nav class="navbar navbar-default"> <script src="js/nav.js"></script> </nav> <!--/.nav-end --> <div class="container"> <div class="col-md-12"> <div class="col-md-3"> <form class="form-horizontal" action="/api/search" method="GET" id='searhform'> <div class="form-group"> <label for="search"><h4><i class="fa fa-search" id="spinning_animation"></i> Search Key</h4></label> <input name='search' id='search' class="form-control" class="form-control" /> </div> <div class="form-group"> <button type="submit" class="btn btn-primary"> Search</button> </div> </form> </div> </div> <div class="col-md-12"> <!-- Search Results --> <div id="search_results"></div> </div> </div> </body> </html> والملف الآخر في مجلد js يحتوي على ajax لإرسال قيمة الـinput#search $(document).ready(function() { //Ajax Search $(document).on("submit","#searhform",function(e){ $("#search_results").empty(); $("#spinning_animation").removeClass("fa fa-search"); $("#spinning_animation").addClass("fa fa-circle-o-notch fa-spin"); var search = $("#search").val(); $.ajax({ type: "GET", url: "api/search", async:true, timeout: 500, data: {search:search}, success: function(response){ // $(".img-responsive").hide(); $("#spinning_animation").removeClass("fa fa-circle-o-notch fa-spin"); $("#spinning_animation").addClass("fa fa-search"); $.each( response, function( key, val ) { if(val.ID != null){ $("#search_results").append( "<div class='col-md-3 text-center'>"+ "<div class='box'>"+ "<h3>"+val.car_name+"</h3>"+ "<p>Brand: "+val.car_brand+"<p>"+ "<p>Model: "+val.car_model+"<p>"+ "</div>"+ "</div>" ); } else{ $("#spinning_animation").removeClass("fa fa-circle-o-notch fa-spin"); $("#spinning_animation").addClass("fa fa-search"); $("#search_results").html("<p style='color:red;'>No Results</p>"); } }); }, error: function(){ $("#spinning_animation").removeClass("fa fa-circle-o-notch fa-spin"); $("#spinning_animation").addClass("fa fa-search"); $("#search_results").html("<p style='color:red;'>Error In Request</p>"); } }); e.preventDefault(); }); }); البحث سيكون في قاعدة البيانات التي سبق وعملتها وللتأكد , هذه هي القاعدة والجدول الذي سنبحث فيه حيث يحتوي على car_name, car_model, car_brand, ID (Primary) SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; -- -- Table structure for table `cars` -- CREATE TABLE `cars` ( `ID` int(11) NOT NULL, `car_name` text NOT NULL, `car_brand` text NOT NULL, `car_model` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `cars` -- INSERT INTO `cars` (`ID`, `car_name`, `car_brand`, `car_model`) VALUES (1, 'Nissan Patrol', 'Nissan', 2016), (2, 'Camaro SS', 'Chevy', 2010), (3, 'Mustang', 'Ford', 2013), (4, 'S500', 'Mercedes', 2009), (5, '330i', 'BMW', 2014); -- ------------------------------------ -- -- Indexes for dumped tables -- -- -- Indexes for table `cars` -- ALTER TABLE `cars` ADD PRIMARY KEY (`ID`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `cars` -- ALTER TABLE `cars` MODIFY `ID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6; وبهذا تم الانتهاء من اعداد قاعدة البيانات, ملف الـsearch.html وكذلك Ajax لارسال قيمة البحث إلى الـserver.js , لننتقل إلى ملف الـserver.js ونضيف الـroute المسؤول عن استقبال قيمة متغير البحث, عمل اللازم و ارجاع الناتج بعد ذلك .. حيث سيكون كالتالي: var http = require('http'); var express = require("express"); var mysql = require('mysql'); var app = express(); app.use('/bootstrap', express.static(__dirname + '/bootstrap')); app.use('/css', express.static(__dirname + '/css')); app.use('/js', express.static(__dirname + '/js')); app.use('/images', express.static(__dirname + '/images')); app.use('/faawesome', express.static(__dirname + '/faawesome')); var mysql = require('mysql'); var connection = mysql.createConnection({ host : 'localhost', user : 'root', password : '', database : 'cars' }); app.get('/api/search', function (req, res) { var searchkey = req.query.search; console.log(JSON.stringify(searchkey, null, 4)); if(searchkey != ""){ connection.query('SELECT * FROM cars WHERE `car_name` LIKE ?',"%"+searchkey+"%", function(err, rows, fields) { if (err){ throw err; } else { if(rows.length > 0){ res.writeHead(200, {'Content-Type': 'application/json'}); console.log(JSON.stringify(rows, null, 4)); res.end(JSON.stringify(rows ,null, 4)); } } }); } else { res.send("Nothing"); } }); app.get('/',function(req,res){ res.redirect("/home"); }); app.get('/home',function(req,res){ res.sendFile(__dirname + "/home.html"); }); app.get('/search',function(req,res){ res.sendFile(__dirname + "/search.html"); }); app.listen(3000,function(){ console.log("Working on port 3000"); }); شرح: هنا نلاحظ الـRoute المسؤول عن استقبال قيمة متغير البحث app.get('/api/search', function (req, res) { var searchkey = req.query.search; console.log(JSON.stringify(searchkey, null, 4)); if(searchkey != ""){ connection.query('SELECT * FROM cars WHERE `car_name` LIKE ?',"%"+searchkey+"%", function(err, rows, fields) { if (err){ throw err; } else { if(rows.length > 0){ res.writeHead(200, {'Content-Type': 'application/json'}); console.log(JSON.stringify(rows, null, 4)); res.end(JSON.stringify(rows ,null, 4)); } } }); } else { res.send("Nothing"); } }); خطوة اخيرا , قم بتشغيل التطبيق من خلال الأمر node server.js افتح المتصفح على الصفحة 127.0.0.1:3000/search الملفات المرفقة js/nav.js $(".navbar.navbar-default").append( "<div class='container'>"+ "<div class='navbar-header'>"+ "<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar' aria-expanded='false' aria-controls='navbar'>"+ "<span class='sr-only'>Toggle navigation</span>"+ "<span class='icon-bar'></span>"+ "<span class='icon-bar'></span>"+ "<span class='icon-bar'></span>"+ "</button>"+ "<a class='navbar-brand home' href='home'>"+ "<img src='images/nodejs-logo.png' style='max-width:52px;height:auto;' class='hidden-xs'>"+ "<img src='images/nodejs-logo-small.png' class='visible-xs'><span class='sr-only'></span>"+ "</a>"+ "</div>"+ "<div id='navbar' class='collapse navbar-collapse'>"+ "<ul class='nav navbar-nav navbar-left' id='uls'>"+ "<li class='active'><a style='color: #FFF;'><i class='fa fa-home'></i> Home</a></li>"+ "<li><a href='about'><i class='fa fa-folder-open'></i> About</a></li>"+ "<li><a href='contact'><i class='fa fa-phone'></i> Contact</a></li>"+ "</ul>"+ "</div>"+ "</div>" ); js/head.layout.js // $(document).ready(function() { $("#head").append( "<meta charset='utf-8'>"+ "<meta http-equiv='X-UA-Compatible' content='IE=edge'>"+ "<meta name='viewport' content='width=device-width, initial-scale=1'>"+ "<title>Search / NodeJS Bootstrap 101</title>"+ "<link rel='stylesheet' href='bootstrap/css/bootstrap.css'>"+ "<link href='css/style.blue.css' rel='stylesheet' id='theme-stylesheet'>"+ "<link rel='stylesheet' href='faawesome/css/font-awesome.css' media='screen' title='Font Awesome'>"+ "<script src='js/jquery.form.js'></script>"+ "<script src='bootstrap/js/bootstrap.js'></script>" ); // });
  6. السلام عليكم ورحمة الله وبركاته من خلال الدرسين السابقين والملاحظات: ماهو الNode.js؟ الدرس الأول في الNode.js عمل تسجيل دخول ملاحظات في الـJQuery مع الـNode.js تم التعرف على الفرق بين الـNode.js والـPHP , ماهو سبب تفوق سرعة النود وماهو النود جي اس مجملا , كما تم طرح الدرس الأول عن كيفية عمل خاصية تسجيل الدخول و حفظ الكوكيز في المتصفح ومنها يكون: عمل كونكشن مع الداتا بيس ارسال البيانات من فورم , طريقة استقبال المعلومات المرسلة , وبشكل خاص في الـNode.js , التعامل مع الـCookies بعد تسجيل الدخول ,كيفية التعامل مع البيانات من ومطابقتها مع قاعدة البيانات. في هذا الدرس الثاني سيتم عمل خاصية البحث بالطريقة الاعتيادية اولا ومن ثم سيكون هناك درس آخر لتبيان التغييرات لعمل البحث بشكل حي Live. إذا, لنبدأ هذا الدرس حيث سأفترض اولا بأنك اتممت قراءة الدرس الأول وتطبيق الدرس الأول و فهم ملاحظات الـJQuery مع الـNode.js , سنبدأ بعمل ملف الـبحث ومثلا يكون كالتالي: <!DOCTYPE html> <html lang="en"> <head id="head"> </head> <script src='js/jquery.js'></script> <script src="js/head.layout.js"></script> <script src="js/search.js"></script> <body> <!--/.nav-start --> <!-- Navigation Goes Here --> <nav class="navbar navbar-default"> <script src="js/nav.js"></script> </nav> <!--/.nav-end --> <div class="container"> <div class="col-md-12"> <div class="col-md-3"> <form class="form-horizontal" action="/api/search" method="GET" id='searhform'> <div class="form-group"> <label for="search"><h4><i class="fa fa-search" id="spinning_animation"></i> Search Key</h4></label> <input name='search' id='search' class="form-control" class="form-control" /> </div> <div class="form-group"> <button type="submit" class="btn btn-primary"> Search</button> </div> </form> </div> </div> <div class="col-md-12"> <!-- Search Results --> <div id="search_results"></div> </div> </div> </body> </html> والملف الآخر في مجلد js يحتوي على ajax لإرسال قيمة الـinput#search $(document).ready(function() { //Ajax Search $(document).on("submit","#searhform",function(e){ $("#search_results").empty(); $("#spinning_animation").removeClass("fa fa-search"); $("#spinning_animation").addClass("fa fa-circle-o-notch fa-spin"); var search = $("#search").val(); $.ajax({ type: "GET", url: "api/search", async:true, timeout: 500, data: {search:search}, success: function(response){ // $(".img-responsive").hide(); $("#spinning_animation").removeClass("fa fa-circle-o-notch fa-spin"); $("#spinning_animation").addClass("fa fa-search"); $.each( response, function( key, val ) { if(val.ID != null){ $("#search_results").append( "<div class='col-md-3 text-center'>"+ "<div class='box'>"+ "<h3>"+val.car_name+"</h3>"+ "<p>Brand: "+val.car_brand+"<p>"+ "<p>Model: "+val.car_model+"<p>"+ "</div>"+ "</div>" ); } else{ $("#spinning_animation").removeClass("fa fa-circle-o-notch fa-spin"); $("#spinning_animation").addClass("fa fa-search"); $("#search_results").html("<p style='color:red;'>No Results</p>"); } }); }, error: function(){ $("#spinning_animation").removeClass("fa fa-circle-o-notch fa-spin"); $("#spinning_animation").addClass("fa fa-search"); $("#search_results").html("<p style='color:red;'>Error In Request</p>"); } }); e.preventDefault(); }); }); البحث سيكون في قاعدة البيانات التي سبق وعملتها وللتأكد , هذه هي القاعدة والجدول الذي سنبحث فيه حيث يحتوي على car_name, car_model, car_brand, ID (Primary) SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; -- -- Table structure for table `cars` -- CREATE TABLE `cars` ( `ID` int(11) NOT NULL, `car_name` text NOT NULL, `car_brand` text NOT NULL, `car_model` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `cars` -- INSERT INTO `cars` (`ID`, `car_name`, `car_brand`, `car_model`) VALUES (1, 'Nissan Patrol', 'Nissan', 2016), (2, 'Camaro SS', 'Chevy', 2010), (3, 'Mustang', 'Ford', 2013), (4, 'S500', 'Mercedes', 2009), (5, '330i', 'BMW', 2014); -- ------------------------------------ -- -- Indexes for dumped tables -- -- -- Indexes for table `cars` -- ALTER TABLE `cars` ADD PRIMARY KEY (`ID`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `cars` -- ALTER TABLE `cars` MODIFY `ID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6; وبهذا تم الانتهاء من اعداد قاعدة البيانات, ملف الـsearch.html وكذلك Ajax لارسال قيمة البحث إلى الـserver.js , لننتقل إلى ملف الـserver.js ونضيف الـroute المسؤول عن استقبال قيمة متغير البحث, عمل اللازم و ارجاع الناتج بعد ذلك .. حيث سيكون كالتالي: var http = require('http'); var express = require("express"); var mysql = require('mysql'); var app = express(); app.use('/bootstrap', express.static(__dirname + '/bootstrap')); app.use('/css', express.static(__dirname + '/css')); app.use('/js', express.static(__dirname + '/js')); app.use('/images', express.static(__dirname + '/images')); app.use('/faawesome', express.static(__dirname + '/faawesome')); var mysql = require('mysql'); var connection = mysql.createConnection({ host : 'localhost', user : 'root', password : '', database : 'cars' }); app.get('/api/search', function (req, res) { var searchkey = req.query.search; console.log(JSON.stringify(searchkey, null, 4)); if(searchkey != ""){ connection.query('SELECT * FROM cars WHERE `car_name` LIKE ?',"%"+searchkey+"%", function(err, rows, fields) { if (err){ throw err; } else { if(rows.length > 0){ res.writeHead(200, {'Content-Type': 'application/json'}); console.log(JSON.stringify(rows, null, 4)); res.end(JSON.stringify(rows ,null, 4)); } } }); } else { res.send("Nothing"); } }); app.get('/',function(req,res){ res.redirect("/home"); }); app.get('/home',function(req,res){ res.sendFile(__dirname + "/home.html"); }); app.get('/search',function(req,res){ res.sendFile(__dirname + "/search.html"); }); app.listen(3000,function(){ console.log("Working on port 3000"); }); شرح: هنا نلاحظ الـRoute المسؤول عن استقبال قيمة متغير البحث app.get('/api/search', function (req, res) { var searchkey = req.query.search; console.log(JSON.stringify(searchkey, null, 4)); if(searchkey != ""){ connection.query('SELECT * FROM cars WHERE `car_name` LIKE ?',"%"+searchkey+"%", function(err, rows, fields) { if (err){ throw err; } else { if(rows.length > 0){ res.writeHead(200, {'Content-Type': 'application/json'}); console.log(JSON.stringify(rows, null, 4)); res.end(JSON.stringify(rows ,null, 4)); } } }); } else { res.send("Nothing"); } }); خطوة اخيرا , قم بتشغيل التطبيق من خلال الأمر node server.js افتح المتصفح على الصفحة 127.0.0.1:3000/search الملفات المرفقة js/nav.js $(".navbar.navbar-default").append( "<div class='container'>"+ "<div class='navbar-header'>"+ "<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar' aria-expanded='false' aria-controls='navbar'>"+ "<span class='sr-only'>Toggle navigation</span>"+ "<span class='icon-bar'></span>"+ "<span class='icon-bar'></span>"+ "<span class='icon-bar'></span>"+ "</button>"+ "<a class='navbar-brand home' href='home'>"+ "<img src='images/nodejs-logo.png' style='max-width:52px;height:auto;' class='hidden-xs'>"+ "<img src='images/nodejs-logo-small.png' class='visible-xs'><span class='sr-only'></span>"+ "</a>"+ "</div>"+ "<div id='navbar' class='collapse navbar-collapse'>"+ "<ul class='nav navbar-nav navbar-left' id='uls'>"+ "<li class='active'><a style='color: #FFF;'><i class='fa fa-home'></i> Home</a></li>"+ "<li><a href='about'><i class='fa fa-folder-open'></i> About</a></li>"+ "<li><a href='contact'><i class='fa fa-phone'></i> Contact</a></li>"+ "</ul>"+ "</div>"+ "</div>" ); js/head.layout.js // $(document).ready(function() { $("#head").append( "<meta charset='utf-8'>"+ "<meta http-equiv='X-UA-Compatible' content='IE=edge'>"+ "<meta name='viewport' content='width=device-width, initial-scale=1'>"+ "<title>Search / NodeJS Bootstrap 101</title>"+ "<link rel='stylesheet' href='bootstrap/css/bootstrap.css'>"+ "<link href='css/style.blue.css' rel='stylesheet' id='theme-stylesheet'>"+ "<link rel='stylesheet' href='faawesome/css/font-awesome.css' media='screen' title='Font Awesome'>"+ "<script src='js/jquery.form.js'></script>"+ "<script src='bootstrap/js/bootstrap.js'></script>" ); // }); تم ترقية هذا الطرح المميز الى صفحة المقالات
  7. هذه مجرد فقط البداية والسكيورتي سيكون عبارة عن ملاحظات لا اكثر خصوصا مع هذا البكج، حيث يعمل escape للvalues بشكل اوتوماتيكي رغم ذلك، سيتم شرح الpool و الconnection.escape لاحقا هناك تكمله لهذا الدرس كما تلاحظ بوجود جدول السيارات
  8. شخصيا لا احبذ عمل رقولار اكسبرشن للايميلات لاسباب كثيرة اهمها عدم امكانية حصر الدومين اكستنشن دوت كوم ام دوت نت ام دوت اورق ليس بالامر الكافي لهذا الامر .. الحل الوحيد الممكن عمله هو عملية الvalidation بعد التسجيل لتفعيل الحساب مثلا.
  9. ..... بعد المقدمة عن باترن الـNode.js في المقال السابق سأقوم بشرح اهم الدروس التي لطالما كانت اولى الخطوات المتبعه في جميع اللغات لمعرفة كيفية التعامل مع: قواعد البيانات. طريقة ارسال المعلومات من Form. طريقة استقبال المعلومات المرسلة. وبشكل خاص في الـNode.js , كيفية التعامل مع البيانات من ومطابقتها مع قاعدة البيانات. التعامل مع الـCookies بعد تسجيل الدخول. في بداية هذا الدرس, سأفترض امرين الأول هو مسبقا بأنك قمت بتثبيت الـ Dependencies وهم: npm install mysql npm install express npm install cookie-parser والثاني هو ان تكون لديك معرفة متوسطة مسبقة بلغة الـ javascript و jquery وبعد التأكد من التثبيت, اعمل قاعدة بيانات سواء كانت خارجية ام داخليةوستكون كالتالي مثلا: -- phpMyAdmin SQL Dump -- version 4.5.1 -- http://www.phpmyadmin.net -- -- Host: 127.0.0.1 -- Generation Time: Sep 09, 2016 at 11:50 PM -- Server version: 10.1.16-MariaDB -- PHP Version: 5.6.24 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `cars` -- -- -------------------------------------------------------- -- -- Table structure for table `cars` -- CREATE TABLE `cars` ( `ID` int(11) NOT NULL, `car_name` text NOT NULL, `car_brand` text NOT NULL, `car_model` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `cars` -- INSERT INTO `cars` (`ID`, `car_name`, `car_brand`, `car_model`) VALUES (1, 'Nissan Patrol', 'Nissan', 2016), (2, 'Camaro SS', 'Chevy', 2010), (3, 'Mustang', 'Ford', 2013), (4, 'S500', 'Mercedes', 2009), (5, '330i', 'BMW', 2014); -- -------------------------------------------------------- -- -- Table structure for table `users` -- CREATE TABLE `users` ( `ID` int(11) NOT NULL, `username` text NOT NULL, `password` text NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `users` -- INSERT INTO `users` (`ID`, `username`, `password`) VALUES (1, 'androidworldbh', '123123'), (2, 'user2', 'bahrain'), (3, 'user3', '4567'); -- -- Indexes for dumped tables -- -- -- Indexes for table `cars` -- ALTER TABLE `cars` ADD PRIMARY KEY (`ID`); -- -- Indexes for table `users` -- ALTER TABLE `users` ADD PRIMARY KEY (`ID`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `cars` -- ALTER TABLE `cars` MODIFY `ID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6; -- -- AUTO_INCREMENT for table `users` -- ALTER TABLE `users` MODIFY `ID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; اسم قاعدة البيانات هو cars تحتوي على جدولين users,cars وكل جدول يحتوي على بيانات كما هو موضح في الكود السابق. بعد ذلك قم بعمل ملف اسمه ولنفترض server.js يحتوي على التالي وبالتفصيل سأقوم بعرض الملف .. في البداية نستدعي مانريد من Packages var http = require('http'); var express = require("express"); var cookieParser = require('cookie-parser'); var mysql = require('mysql'); var app = express(); نقوم بعمل الـRouting لنحدد للتطبيق المعني بالمتغير app كيفية استجابة طلب المتصفح ( العميل ) والـSyntax هو app.METHOD(PATH, HANDLER); في ملف server.js ستقوم بإضافة app.use(cookieParser()); app.use('/bootstrap', express.static(__dirname + '/bootstrap')); app.use('/css', express.static(__dirname + '/css')); app.use('/js', express.static(__dirname + '/js')); app.use('/images', express.static(__dirname + '/images')); app.use('/faawesome', express.static(__dirname + '/faawesome')); لتستطيع استخدام الملفات الـCSS & JS وكذلك الصور , ولنستهل ربط قاعدة البيانات بالتطبيق من خلال الكود التالي: var connection = mysql.createConnection({ host : 'localhost', user : 'root', password : '', database : 'cars' }); ملاحظة: تستطيع استدعاء المتغيرات السابقة من ملف خارجي وبالغالب يتم تسميته بـconfig.js يحتوي على جميع المتغيرات الثابته constants مثل متغيرات ربط قواعد البيانات او ماشابه ذلك ولكن في هذا المثال سنستعمل الطريقة الإعتيادية والمباشرة. وبهذا تم اعداد وربط قاعدة البيانات مع التطبيق, وبما ان هذا الدرس عبارة عن كيفية عمل تسجيل دخول سنقوم بكتابة كود الفورم داخل ملف login.html ( وسأفترض مسبقا بأنك تعرف ذلك ): <div class="container"> <div class="card card-container"> <img id="profile-img" class="profile-img-card" src="images/nodejs-logo.png" /> <p id="profile-name" class="profile-name-card"></p> <form class="form-signin" action="/api/login" method="get" id="loginForm"> <span id="reauth-email" class="reauth-email"></span> <input type="text" id="username" class="form-control" placeholder="Username" name="username" required autofocus> <input type="password" id="password" class="form-control" placeholder="Password" name="password" required> <div id="remember" class="checkbox"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Sign in</button> </form> <a href="#" class="forgot-password" id="status"> Forgot the password? </a> </div> </div> سكربت ارسال بيانات فورم تسجيل الدخول في ملف الـhtml سيكون: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <script> $(document).ready(function() { $('#loginForm').submit(function() { $("#status").empty().text("loging in..."); $(this).ajaxSubmit({ error: function(xhr) { status('Error: ' + xhr.status); }, success: function(response) { console.log(response) if(response == 401){ $("#status").html("Error In Provided Info"); } else { window.location.href = '/home/'+response; } } }); return false; }); }); </script> نعود مرة اخرى لملف server.js ونضيف routing الفورم الذي بدوره يستقبل بيانات الدخول وهم اسم المستخدم username والباسسورد password ويطابق ما تم ارساله من قبل المستخدم مع ماهو موجود في جدول Users في قاعدة البيانات app.get('/api/login', function (req, res) { var user_credentials = { username: req.query.username, password: req.query.password } connection.query('SELECT * FROM users WHERE `username` = ?',user_credentials.username, function(err, rows, fields) { if (err) throw err; if(rows.length > 0){ var userpass = rows[0].password; if(userpass == user_credentials.password){ console.log(JSON.stringify(user_credentials, null, 4)); res.send(user_credentials.username); } else { return res.json(401); console.log("password aint right"); } } }); }); هنا نلاحظ عدة امور اولها الميثود المستخدم في هذا الـrouting او الـcontroller كما يستميه البعض وهي GET , ذلك يعني انه يجب على ميثود الفورم الذي عملته ان يكون GET ليستقبل البيانات app.get الملاحظة الثانية هي المتغيرين الأثنين وهم اسم المستخدم والباسسورد , تستطيع استخدامهم في الكود بشكل مباشر بهذه الطريقة var username = req.query.username var pssword = req.query.password ولكن لسهولة التعامل قمنا بإضافتهم إلى متغير user_credentials بهذه الطريقة var user_credentials = { username: req.query.username, password: req.query.password } ولأستدعاء اسم المستخدم مثلا: user_credentials.username ولمعلومات طرق عمل الـqueries الرجاء زيارة الرابط التالي: https://www.npmjs.com/package/mysql الملاحظة الثالثة وهي rows.length , عند execute الكويري, البكج المستخدم بشكل مباشر يقوم بإرجاع عدة بيانات تستطيع الإطلاع عليها في الـconsole وإحدى هذه الأمور هي عدد الصفوف التي هي متطابقة مع الكويري connection.query('SELECT * FROM users WHERE `username` = ?',user_credentials.username, function(err, rows, fields) ... وستكون بالعادة صف واحد, لذلك نضع شرط إذا كان عدد الصفوف المعنية بالكويري اكثر من صفر rows.length > 0 ذلك يعني بأن اسم المستخدم موجود في قاعدة البيانات ونطابق الـpassword كالتالي: if(rows.length > 0){ var userpass = rows[0].password; // الباسسورد الذي تم استخراجه من الصف المرجع من الكويري if(userpass == user_credentials.password){ console.log(JSON.stringify(user_credentials, null, 4)); res.send(user_credentials.username); } else { return res.json(401); console.log("password aint right"); } } إذا كان كلمة المرور متطابقة, سنقوم بإرسال اسم المستخدم مرة اخرى لصفحة login.html لنرسلها إلى صفحة اخرى المعنية بحفظ الـcookies res.send(user_credentials.username); او اذا كانت كلمة المرور غير متطابقة سنرسل json عبارة عن return res.json(401); وفي ajax صفحة الـlogin.html success: function(response) { console.log(response) if(response == 401){ $("#status").html("Error In Provided Info"); // إذا كان الكود المسترجع هو 401 ذلك يعني بأن كلمة السر غير متطابقة } else { window.location.href = '/home/'+response; // خلاف ذلك, سنرسل اسم المستخدم إلى روتنج معني بحفظ اسم المستخدم في كوكيز } } إذا كانت كلمات السر متطابقة, ميثود الـAjax ستقوم بتحويل المستخدم إلى Routing لحفظ اسم المستخدم في كوكيز , وكود الـRounting هو: app.get('/home/:user',function(req,res){ res.cookie('name', req.params.user).redirect('/home'); }); الذي بدوره يحفظ اسم المستخدم في كوكيز بعنوان name وبعد ذلك يحوله إلى صفحة الـhome.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Node.js Bootstrap 101</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="/bootstrap/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <script type="text/javascript"> $.ajax({ type: "GET", url: '/api/cookies', success: function(response) { if(response != "undefined"){ $("#uls").append("<li><a href='logout'><i class='fa fa-lock'></i> Logout</a></li>"); $("#navbar").append("<ul class='nav navbar-nav navbar-right'><li><a href='#'><i class='fa fa-user'></i> Welcome Back. "+response+"</a></li></ul>") } else { window.location.href = '/login'; } }, error: function(){ window.location.href = '/login'; } }); </script> </head> <body> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Node.js</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav" id="uls"> <li class="active"><a href="#">Home</a></li> <li><a href="about">About</a></li> <li><a href="contact">Contact</a></li> </ul> </div> <!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="col-md-12"> <h1>Home Page</h1> <h3>Bootstrap & NodeJS</h3> </div> </div> </body> </html> و لا تنسى كتابة routing صفحتي الlogin and home و كذلك اللسنر في ملف server.js app.get('/',function(req,res){ res.redirect("/home"); }); app.get('/home',function(req,res){ res.cookie('name', req.cookies.name).sendFile(__dirname + "/home.html"); }); app.get('/login',function(req,res){ res.sendFile(__dirname + "/login.html"); }); app.listen(3000,function(){ console.log("Working on port 3000"); }); وللتاكد بأنه تم حفظ اسم المستخدم سنعمل routing اخر وهو: app.get('/api/cookies', function (req, res) { if(res.cookie('name', req.cookies.name) != null){ res.send(req.cookies.name); } else { res.cookie('name', "undefined") return res.json(401); } }); او من خلال console متصفح chrome بكتابة وبهذا, تستطيع تشغيل التطبيق الآن من خلال كوماند: node server.js و في المتصفح 127.0.0.1:3000/home
  10. السلام عليكم ورحمة الله وبركاته .. استكمالا لدروس الـNode.js , سيكون هذا الموضوع عبارة عن ملاحظات سيتم استخدمها مستقبلا في الدروس القادمة و الملاحظة الأولى هي: ليكن الكود اكثر احترافية , اكثر وضوح وبعيدا عن الـتكرار و الـ redundancy يستخدم مبرمجي لغة الـPHP دالات عدة و طرق متنوعة منها include, include_one, require, require_one ليستدعي جزء من ملف يتكرر في جميع صفحات التطبيق او الموقع ولهذا عدة فوائد على المبرمج اولا ليكن عدد الاسطر اقل في الفايل الذي يعمل عليه بالتالي تكون الامور واضحه و الثاني كما سبق وهو الابتعاد عن تكرار الكود to avoid hard codded في الـNode.js لا يسعك استخدام هذه الـFunctions ولكن تستطيع فعل ذلك من خلال عدة طرق اهمها: من خلال JQuery من خلال EJS Layout و شخصيا افضل طريقة الـJQuery لسهولة التعامل و الفهم. مثال: كل الصفحات تحتوي على ـhead موحد , فهو يعد عامل مشترك بينهم جميعا ولكي لا تكرر المحتوى في كل فايل وتكون عدد الاسطر كثيرة قم بعمل فايل ولنفترض اسمه head.layout.js في مجلد js ومحتواه: $("#head").append( "<meta charset='utf-8'>"+ "<meta http-equiv='X-UA-Compatible' content='IE=edge'>"+ "<meta name='viewport' content='width=device-width, initial-scale=1'>"+ "<title>NodeJS Bootstrap 101</title>"+ "<link rel='stylesheet' href='bootstrap/css/bootstrap.css'>"+ "<link rel='stylesheet' href='css/custom.login.css'>"+ "<link href='css/style.blue.css' rel='stylesheet' id='theme-stylesheet'>"+ "<link rel='stylesheet' href='faawesome/css/font-awesome.css' media='screen' title='Font Awesome'>"+ "<script src='js/jquery.form.js'></script>"+ "<script src='bootstrap/js/bootstrap.js'></script>"+ "<script src='js/home.js'></script>" ); ملاحظة: المحتوى يختلف بإختلاف ما تستخدمه انت في الـhead الآن قم بإنشاء الملفات الاخرى بالطريقة الاعتيادية ولكن التغيير الذي سيتم هو انك ستضيف id للـhead ليستدعي محتوى ملف head.layout.js بداخله <head id="head"></head> و في الأخير تقوم بالاستدعاء <script src="js/home.page.head.js"></script> رسالة: قد لا تكون هذه الطريقة المثلى للبعض لاسباب عديدة , ولكن بالسبة لي هي اسهل الطرق لتبسيط الكود.
  11. ..... بعد المقدمة عن باترن الـNode.js في المقال السابق سأقوم بشرح اهم الدروس التي لطالما كانت اولى الخطوات المتبعه في جميع اللغات لمعرفة كيفية التعامل مع: قواعد البيانات. طريقة ارسال المعلومات من Form. طريقة استقبال المعلومات المرسلة. وبشكل خاص في الـNode.js , كيفية التعامل مع البيانات من ومطابقتها مع قاعدة البيانات. التعامل مع الـCookies بعد تسجيل الدخول. في بداية هذا الدرس, سأفترض امرين الأول هو مسبقا بأنك قمت بتثبيت الـ Dependencies وهم: npm install mysql npm install express npm install cookie-parser والثاني هو ان تكون لديك معرفة متوسطة مسبقة بلغة الـ javascript و jquery وبعد التأكد من التثبيت, اعمل قاعدة بيانات سواء كانت خارجية ام داخليةوستكون كالتالي مثلا: -- phpMyAdmin SQL Dump -- version 4.5.1 -- http://www.phpmyadmin.net -- -- Host: 127.0.0.1 -- Generation Time: Sep 09, 2016 at 11:50 PM -- Server version: 10.1.16-MariaDB -- PHP Version: 5.6.24 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `cars` -- -- -------------------------------------------------------- -- -- Table structure for table `cars` -- CREATE TABLE `cars` ( `ID` int(11) NOT NULL, `car_name` text NOT NULL, `car_brand` text NOT NULL, `car_model` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `cars` -- INSERT INTO `cars` (`ID`, `car_name`, `car_brand`, `car_model`) VALUES (1, 'Nissan Patrol', 'Nissan', 2016), (2, 'Camaro SS', 'Chevy', 2010), (3, 'Mustang', 'Ford', 2013), (4, 'S500', 'Mercedes', 2009), (5, '330i', 'BMW', 2014); -- -------------------------------------------------------- -- -- Table structure for table `users` -- CREATE TABLE `users` ( `ID` int(11) NOT NULL, `username` text NOT NULL, `password` text NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `users` -- INSERT INTO `users` (`ID`, `username`, `password`) VALUES (1, 'androidworldbh', '123123'), (2, 'user2', 'bahrain'), (3, 'user3', '4567'); -- -- Indexes for dumped tables -- -- -- Indexes for table `cars` -- ALTER TABLE `cars` ADD PRIMARY KEY (`ID`); -- -- Indexes for table `users` -- ALTER TABLE `users` ADD PRIMARY KEY (`ID`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `cars` -- ALTER TABLE `cars` MODIFY `ID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6; -- -- AUTO_INCREMENT for table `users` -- ALTER TABLE `users` MODIFY `ID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; اسم قاعدة البيانات هو cars تحتوي على جدولين users,cars وكل جدول يحتوي على بيانات كما هو موضح في الكود السابق. بعد ذلك قم بعمل ملف اسمه ولنفترض server.js يحتوي على التالي وبالتفصيل سأقوم بعرض الملف .. في البداية نستدعي مانريد من Packages var http = require('http'); var express = require("express"); var cookieParser = require('cookie-parser'); var mysql = require('mysql'); var app = express(); نقوم بعمل الـRouting لنحدد للتطبيق المعني بالمتغير app كيفية استجابة طلب المتصفح ( العميل ) والـSyntax هو app.METHOD(PATH, HANDLER); في ملف server.js ستقوم بإضافة app.use(cookieParser()); app.use('/bootstrap', express.static(__dirname + '/bootstrap')); app.use('/css', express.static(__dirname + '/css')); app.use('/js', express.static(__dirname + '/js')); app.use('/images', express.static(__dirname + '/images')); app.use('/faawesome', express.static(__dirname + '/faawesome')); لتستطيع استخدام الملفات الـCSS & JS وكذلك الصور , ولنستهل ربط قاعدة البيانات بالتطبيق من خلال الكود التالي: var connection = mysql.createConnection({ host : 'localhost', user : 'root', password : '', database : 'cars' }); ملاحظة: تستطيع استدعاء المتغيرات السابقة من ملف خارجي وبالغالب يتم تسميته بـconfig.js يحتوي على جميع المتغيرات الثابته constants مثل متغيرات ربط قواعد البيانات او ماشابه ذلك ولكن في هذا المثال سنستعمل الطريقة الإعتيادية والمباشرة. وبهذا تم اعداد وربط قاعدة البيانات مع التطبيق, وبما ان هذا الدرس عبارة عن كيفية عمل تسجيل دخول سنقوم بكتابة كود الفورم داخل ملف login.html ( وسأفترض مسبقا بأنك تعرف ذلك ): <div class="container"> <div class="card card-container"> <img id="profile-img" class="profile-img-card" src="images/nodejs-logo.png" /> <p id="profile-name" class="profile-name-card"></p> <form class="form-signin" action="/api/login" method="get" id="loginForm"> <span id="reauth-email" class="reauth-email"></span> <input type="text" id="username" class="form-control" placeholder="Username" name="username" required autofocus> <input type="password" id="password" class="form-control" placeholder="Password" name="password" required> <div id="remember" class="checkbox"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Sign in</button> </form> <a href="#" class="forgot-password" id="status"> Forgot the password? </a> </div> </div> سكربت ارسال بيانات فورم تسجيل الدخول في ملف الـhtml سيكون: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <script> $(document).ready(function() { $('#loginForm').submit(function() { $("#status").empty().text("loging in..."); $(this).ajaxSubmit({ error: function(xhr) { status('Error: ' + xhr.status); }, success: function(response) { console.log(response) if(response == 401){ $("#status").html("Error In Provided Info"); } else { window.location.href = '/home/'+response; } } }); return false; }); }); </script> نعود مرة اخرى لملف server.js ونضيف routing الفورم الذي بدوره يستقبل بيانات الدخول وهم اسم المستخدم username والباسسورد password ويطابق ما تم ارساله من قبل المستخدم مع ماهو موجود في جدول Users في قاعدة البيانات app.get('/api/login', function (req, res) { var user_credentials = { username: req.query.username, password: req.query.password } connection.query('SELECT * FROM users WHERE `username` = ?',user_credentials.username, function(err, rows, fields) { if (err) throw err; if(rows.length > 0){ var userpass = rows[0].password; if(userpass == user_credentials.password){ console.log(JSON.stringify(user_credentials, null, 4)); res.send(user_credentials.username); } else { return res.json(401); console.log("password aint right"); } } }); }); هنا نلاحظ عدة امور اولها الميثود المستخدم في هذا الـrouting او الـcontroller كما يستميه البعض وهي GET , ذلك يعني انه يجب على ميثود الفورم الذي عملته ان يكون GET ليستقبل البيانات app.get الملاحظة الثانية هي المتغيرين الأثنين وهم اسم المستخدم والباسسورد , تستطيع استخدامهم في الكود بشكل مباشر بهذه الطريقة var username = req.query.username var pssword = req.query.password ولكن لسهولة التعامل قمنا بإضافتهم إلى متغير user_credentials بهذه الطريقة var user_credentials = { username: req.query.username, password: req.query.password } ولأستدعاء اسم المستخدم مثلا: user_credentials.username ولمعلومات طرق عمل الـqueries الرجاء زيارة الرابط التالي: https://www.npmjs.com/package/mysql الملاحظة الثالثة وهي rows.length , عند execute الكويري, البكج المستخدم بشكل مباشر يقوم بإرجاع عدة بيانات تستطيع الإطلاع عليها في الـconsole وإحدى هذه الأمور هي عدد الصفوف التي هي متطابقة مع الكويري connection.query('SELECT * FROM users WHERE `username` = ?',user_credentials.username, function(err, rows, fields) ... وستكون بالعادة صف واحد, لذلك نضع شرط إذا كان عدد الصفوف المعنية بالكويري اكثر من صفر rows.length > 0 ذلك يعني بأن اسم المستخدم موجود في قاعدة البيانات ونطابق الـpassword كالتالي: if(rows.length > 0){ var userpass = rows[0].password; // الباسسورد الذي تم استخراجه من الصف المرجع من الكويري if(userpass == user_credentials.password){ console.log(JSON.stringify(user_credentials, null, 4)); res.send(user_credentials.username); } else { return res.json(401); console.log("password aint right"); } } إذا كان كلمة المرور متطابقة, سنقوم بإرسال اسم المستخدم مرة اخرى لصفحة login.html لنرسلها إلى صفحة اخرى المعنية بحفظ الـcookies res.send(user_credentials.username); او اذا كانت كلمة المرور غير متطابقة سنرسل json عبارة عن return res.json(401); وفي ajax صفحة الـlogin.html success: function(response) { console.log(response) if(response == 401){ $("#status").html("Error In Provided Info"); // إذا كان الكود المسترجع هو 401 ذلك يعني بأن كلمة السر غير متطابقة } else { window.location.href = '/home/'+response; // خلاف ذلك, سنرسل اسم المستخدم إلى روتنج معني بحفظ اسم المستخدم في كوكيز } } إذا كانت كلمات السر متطابقة, ميثود الـAjax ستقوم بتحويل المستخدم إلى Routing لحفظ اسم المستخدم في كوكيز , وكود الـRounting هو: app.get('/home/:user',function(req,res){ res.cookie('name', req.params.user).redirect('/home'); }); الذي بدوره يحفظ اسم المستخدم في كوكيز بعنوان name وبعد ذلك يحوله إلى صفحة الـhome.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Node.js Bootstrap 101</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="/bootstrap/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <script type="text/javascript"> $.ajax({ type: "GET", url: '/api/cookies', success: function(response) { if(response != "undefined"){ $("#uls").append("<li><a href='logout'><i class='fa fa-lock'></i> Logout</a></li>"); $("#navbar").append("<ul class='nav navbar-nav navbar-right'><li><a href='#'><i class='fa fa-user'></i> Welcome Back. "+response+"</a></li></ul>") } else { window.location.href = '/login'; } }, error: function(){ window.location.href = '/login'; } }); </script> </head> <body> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Node.js</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav" id="uls"> <li class="active"><a href="#">Home</a></li> <li><a href="about">About</a></li> <li><a href="contact">Contact</a></li> </ul> </div> <!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="col-md-12"> <h1>Home Page</h1> <h3>Bootstrap & NodeJS</h3> </div> </div> </body> </html> و لا تنسى كتابة routing صفحتي الlogin and home و كذلك اللسنر في ملف server.js app.get('/',function(req,res){ res.redirect("/home"); }); app.get('/home',function(req,res){ res.cookie('name', req.cookies.name).sendFile(__dirname + "/home.html"); }); app.get('/login',function(req,res){ res.sendFile(__dirname + "/login.html"); }); app.listen(3000,function(){ console.log("Working on port 3000"); }); وللتاكد بأنه تم حفظ اسم المستخدم سنعمل routing اخر وهو: app.get('/api/cookies', function (req, res) { if(res.cookie('name', req.cookies.name) != null){ res.send(req.cookies.name); } else { res.cookie('name', "undefined") return res.json(401); } }); او من خلال console متصفح chrome بكتابة وبهذا, تستطيع تشغيل التطبيق الآن من خلال كوماند: node server.js و في المتصفح 127.0.0.1:3000/home تم ترقية هذا الطرح المميز الى صفحة المقالات
  12. ماهو الNode.js؟ كثير ماسمع المطورين بهذا الإطار في الفتره الاخيره حيث حصد هذا الاطار على اهتمام الكثير من المبرمجين في مجال تطوير الويب لما يقدمه من امور خرافيه نوعا ما و مستوى جديد كليا في هذا العالم. ال Node.js هو اطار عمل برمج العديد من وحداته Modules الأساسية بلغه الJavaScript تم تطويره من قبل مبرمج امريكي يعيش في المانيا يدعى ريان دال و السوبر فايز جوينت، و كان اول إطلاق لهذا الباترن في عام 2009. من المعروف بأن لغة الجافا سكربت هي لغة الClient Side، بمعنى ذلك انها لغة تعمل بجانب المستخدم وليس في السيرفر ولكن بعد تطوير ريان دال لهذا الباترن (النود جي اس) الذي يعمل بمحرك قوقل V8 والعديد من الlibraries الاخرى اصبح الامر اكثر تعقيدا من ذي قبل و تحول هذا الإطار بالعمل في السيرفر كمثل الPHP، بمعنى اخر، الNode.js اصبح إطار عمل Functionality حركية و ديناميكية بشكل تام بإمكانك التعامل مع قواعد البيانات وما الى ذلك من خلاله بكل سهوله. يستخدم إطار الNode.js لبرمجة تطبيقات الويب بالتحديد و المواقع بشكل عام، يعتمد في عمله على الevents او باللغة العربية تدعى ( المناسبات ) لذلك اي شي يحصل على السيرفر يقوم بإطلاق non-blocking event كل كونكشن جديد => fires event ، معلومات مرسله من فورم => fires event ، طلب بيانات من قاعدة البيانات من قبل المستخدم => fires event. عمليا، هذا يعني ان الموقع او التطبيق لا يمكن ان يتاخر بتنفيذ مناسبة event حتى لو دخله او استخدمه آلاف المستخدمين في نفس الوقت لان إطار ال Node.js برمج ليكون Non-Blocking بذلك الأوامر يتم تنفيذها بالتوازي بخلاف الPHP التي هي لغة block until completion اي ان الاوامر لايتم تنفيذها الا بتنفيذ ما سبق من اوامر وهذا هو الفرق الاكبر مابين PHP & Node.js وهذا هو سبب تميز إطار عمل النود وسبب السرعه الرهيبه في تنفيذ الاوامر. لتثبيت الإطار، قم بزيارة الموقع ادناه، يدعم الانظمة جميعها Windows, OSX & Linux https://nodejs.org/en/download/ امثلة: بعد التحميل والتثبيت، في هذا القسم سيتم وضع عدة امثلة لطريقة بدائية Hello World ومن ابسط الامثلة هو 1- انشأ ملف بإسم hello.js و اكتب فيه التالي var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World!'); }).listen(3000, '127.0.0.1'); 2- افتح الterminal او cmd على الوندوز واكتب node hello.js بذلك، اصبح التطبيق يعمل على port 3000 كما هو محدد. 3- افتح اي متصفح تستخدمه وادخل على الرابط http://127.0.0.1:3000 مثال آخر على كيفية التعامل مع Bootstrap & Node.js صفحة الHTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Node.js Bootstrap 101</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Node.js</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="about">About</a></li> <li><a href="contact">Contact</a></li> </ul> </div> <!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="col-md-12"> <h1>Home Page</h1> <h3>Bootstrap & NodeJS</h3> </div> </div> </body> </html> صفحة الAbout <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Node.js Bootstrap 101</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Node.js</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="home">Home</a></li> <li class="active"><a href="#">About</a></li> <li><a href="contact">Contact</a></li> </ul> </div> <!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="col-md-12"> <h1>ِAbout Page</h1> <h3>Bootstrap & NodeJS</h3> </div> </div> </body> </html> صفحة الContact <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Node.js Bootstrap 101</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Node.js</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="home">Home</a></li> <li><a href="about">About</a></li> <li class="active"><a href="#">Contact</a></li> </ul> </div> <!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="col-md-12"> <h1>Contact Page</h1> <h3>Bootstrap & NodeJS</h3> </div> </div> </body> </html> قم بتثبيت Dependency Express npm install express --save ملف الserver.js var express = require("express"); var app = express(); app.use('/bootstrap', express.static(__dirname + '/bootstrap')); app.get('/',function(req,res){ res.sendFile(__dirname + "/home.html"); }); app.get('/home',function(req,res){ res.sendFile(__dirname + "/home.html"); }); app.get('/about',function(req,res){ res.sendFile(__dirname + "/about.html"); }); app.get('/contact',function(req,res){ res.sendFile(__dirname + "/contact.html"); }); app.listen(3000,function(){ console.log("Working On Port 3000"); }); تأكد من وضعك ملفات الBootstrap في المسار التالي ( في مجلد اسمه bootstrap بجانب ملف السيرفر) <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css"> <script src="/bootstrap/js/bootstrap.min.js"></script> خطوة اخير, قم بتشغيل السيرفر من خلال الأمر node server.js افتح المتصفح على الرابط التالي http://127.0.0.1:3000 وهذا هي اولى الدروس في الNode.js ولاستخدامات اكثر، قم بزيارة رابط Github ادناه للحصول على tools مفتوحه المصدر. https://github.com/developerbh إسأل ماشئت وسأحاول الأجابة ان شاء الله.
  13. ماهو الNode.js؟ كثير ماسمع المطورين بهذا الإطار في الفتره الاخيره حيث حصد هذا الاطار على اهتمام الكثير من المبرمجين في مجال تطوير الويب لما يقدمه من امور خرافيه نوعا ما و مستوى جديد كليا في هذا العالم. ال Node.js هو اطار عمل برمج العديد من وحداته Modules الأساسية بلغه الJavaScript تم تطويره من قبل مبرمج امريكي يعيش في المانيا يدعى ريان دال و السوبر فايز جوينت، و كان اول إطلاق لهذا الباترن في عام 2009. من المعروف بأن لغة الجافا سكربت هي لغة الClient Side، بمعنى ذلك انها لغة تعمل بجانب المستخدم وليس في السيرفر ولكن بعد تطوير ريان دال لهذا الباترن (النود جي اس) الذي يعمل بمحرك قوقل V8 والعديد من الlibraries الاخرى اصبح الامر اكثر تعقيدا من ذي قبل و تحول هذا الإطار بالعمل في السيرفر كمثل الPHP، بمعنى اخر، الNode.js اصبح إطار عمل Functionality حركية و ديناميكية بشكل تام بإمكانك التعامل مع قواعد البيانات وما الى ذلك من خلاله بكل سهوله. يستخدم إطار الNode.js لبرمجة تطبيقات الويب بالتحديد و المواقع بشكل عام، يعتمد في عمله على الevents او باللغة العربية تدعى ( المناسبات ) لذلك اي شي يحصل على السيرفر يقوم بإطلاق non-blocking event كل كونكشن جديد => fires event ، معلومات مرسله من فورم => fires event ، طلب بيانات من قاعدة البيانات من قبل المستخدم => fires event. عمليا، هذا يعني ان الموقع او التطبيق لا يمكن ان يتاخر بتنفيذ مناسبة event حتى لو دخله او استخدمه آلاف المستخدمين في نفس الوقت لان إطار ال Node.js برمج ليكون Non-Blocking بذلك الأوامر يتم تنفيذها بالتوازي بخلاف الPHP التي هي لغة block until completion اي ان الاوامر لايتم تنفيذها الا بتنفيذ ما سبق من اوامر وهذا هو الفرق الاكبر مابين PHP & Node.js وهذا هو سبب تميز إطار عمل النود وسبب السرعه الرهيبه في تنفيذ الاوامر. لتثبيت الإطار، قم بزيارة الموقع ادناه، يدعم الانظمة جميعها Windows, OSX & Linux https://nodejs.org/en/download/ امثلة: بعد التحميل والتثبيت، في هذا القسم سيتم وضع عدة امثلة لطريقة بدائية Hello World ومن ابسط الامثلة هو 1- انشأ ملف بإسم hello.js و اكتب فيه التالي var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World!'); }).listen(3000, '127.0.0.1'); 2- افتح الterminal او cmd على الوندوز واكتب node hello.js بذلك، اصبح التطبيق يعمل على port 3000 كما هو محدد. 3- افتح اي متصفح تستخدمه وادخل على الرابط http://127.0.0.1:3000 مثال آخر على كيفية التعامل مع Bootstrap & Node.js صفحة الHTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Node.js Bootstrap 101</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Node.js</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="about">About</a></li> <li><a href="contact">Contact</a></li> </ul> </div> <!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="col-md-12"> <h1>Home Page</h1> <h3>Bootstrap & NodeJS</h3> </div> </div> </body> </html> صفحة الAbout <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Node.js Bootstrap 101</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Node.js</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="home">Home</a></li> <li class="active"><a href="#">About</a></li> <li><a href="contact">Contact</a></li> </ul> </div> <!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="col-md-12"> <h1>ِAbout Page</h1> <h3>Bootstrap & NodeJS</h3> </div> </div> </body> </html> صفحة الContact <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Node.js Bootstrap 101</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Node.js</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="home">Home</a></li> <li><a href="about">About</a></li> <li class="active"><a href="#">Contact</a></li> </ul> </div> <!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="col-md-12"> <h1>Contact Page</h1> <h3>Bootstrap & NodeJS</h3> </div> </div> </body> </html> قم بتثبيت Dependency Express npm install express --save ملف الserver.js var express = require("express"); var app = express(); app.use('/bootstrap', express.static(__dirname + '/bootstrap')); app.get('/',function(req,res){ res.sendFile(__dirname + "/home.html"); }); app.get('/home',function(req,res){ res.sendFile(__dirname + "/home.html"); }); app.get('/about',function(req,res){ res.sendFile(__dirname + "/about.html"); }); app.get('/contact',function(req,res){ res.sendFile(__dirname + "/contact.html"); }); app.listen(3000,function(){ console.log("Working On Port 3000"); }); تأكد من وضعك ملفات الBootstrap في المسار التالي ( في مجلد اسمه bootstrap بجانب ملف السيرفر) <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css"> <script src="/bootstrap/js/bootstrap.min.js"></script> خطوة اخير, قم بتشغيل السيرفر من خلال الأمر node server.js افتح المتصفح على الرابط التالي http://127.0.0.1:3000 وهذا هي اولى الدروس في الNode.js ولاستخدامات اكثر، قم بزيارة رابط Github ادناه للحصول على tools مفتوحه المصدر. https://github.com/developerbh إسأل ماشئت وسأحاول الأجابة ان شاء الله. تم ترقية هذا الطرح المميز الى صفحة المقالات
  14. نزلت مشاركتي قبل الكل و عندي مشاركة اخرى .. بس نخليها لوقت ثاني افضل
  15. IM' IN .. جميييييل جدا

عالم البرمجة

عالم البرمجة مقالات برمجة و دورات مجانية لإحتراف البرمجة هدفنا تبسيط البرمجة ونشرها بيد الكل بشكل ممتع ومتطور ومحدث بإستمرار لمواكبة جديد تطورات البرمجة الحديثة و المتقدمة بدون مقابل