Node.js و Express بالدارجة: نعاودو CRUD و login ديال PHP

إلا كنتي كتعرف تدير CRUD و login بـ PHP، راك تقريبا كتعرف تديرهم بـ Node.js: الأفكار هي هي، غير اللغة اللي تبدلات. فدرس E14، خدينا CRUD الصغير و login ديال السلسلة ديال PHP، نفس table users فـ MySQL، وعاودناهم بـ Express، مرتبين بـ MVC. هاد المقال كيلخص الطريق، مع جدول ديال المقابلات بين PHP و Node.

شنو هو Node.js بالضبط؟#

فـ Chrome كاين moteur سميتو V8، هو اللي كيقرا JavaScript وكيخدمو. وفـ 2009، Ryan Dahl سول راسو: علاش ما نخرجوش هاد الموتور من le navigateur ونخدموه فالسيرفر؟ وهكا تزاد Node.js.

الفرق فالخدمة:

• فـ le navigateur، JavaScript كيتحكم فالصفحة (DOM، الكليكات، العرض)، ولكن ما يقدرش يقرا الفيشيات ديال السيرفر؛
• فـ Node.js، نفس اللغة تقدر تقرا الفيشيات، تتكلم مع la base، وتجاوب على les requêtes.

لغة وحدة للـ front وللـ back: هادي هي الفكرة ديال MERN. وExpress هو الـ framework الأكثر استعمالا فوق Node، باش تبني site ولا API بسهولة.

أول تجربة، بحال فالدرس: فيشي app.js فيه console.log، وكتلانسيه من الترمينال.

node app.js

كيفاش نبداو المشروع؟#

npm، هو Composer ديال Node#

npm هو gestionnaire de paquets ديال Node، بحال Composer فـ PHP. كيجيب ليك les librairies اللي كتبو ناس آخرين، بلا ما تعاود تكتبهم. كنبداو بـ npm init، اللي كيصاوب package.json، la carte d'identité ديال المشروع. ومن بعد كنثبتو les librairies، وكل وحدة عندها دور:

npm init
npm install express ejs mysql2 bcrypt express-session dotenv

كيتحطو فـ node_modules، وكيتسجلو فـ package.json.

نفس التنظيم ديال MVC#

المشروع مرتب بحال فدرس MVC: models/ فيها SQL، controllers/ فيها المنطق، views/ فيها صفحات EJS، و routes/ كتربط كل URL بـ controller.

الفيشي .env عمرو ما يطلع لـ GitHub#

.env فيه كلشي اللي سري: mot de passe ديال la base، secret ديال la session، و les clés API. زيدو فـ .gitignore، مع node_modules.

.env
node_modules

ونصيحة من الدرس: node --watch، ولا nodemon، كيعاودو يلانسيو السيرفر بوحدهم ملي كتبدل الكود.

علاش la base ديال MySQL ما تبدلاتش؟#

حيت MySQL ماشي PHP. MySQL هو SGBD: سيرفر بوحدو، يقدر يتكلم معاه PHP، Node، Python، ولا أي لغة. إذن خلينا نفس table users. فـ db.js، كنصاوبو pool بـ mysql2، وكنقراو المعلومات ديال الكونيكسيون من .env. وكل requête كترجع طابلو سميتو rows، فيه المستخدمين.

CRUD بـ Express#

الطريق ديال الطلب هو نفسو ديال MVC: la route كتعيط لـ méthode فـ controller، اللي كيسول model، ومن بعد كيعرض vue.

• فـ app.js، كنفعلو express.urlencoded باش نقراو الفورمات.
• فـ routes/users، GET /users كتمشي لـ la méthode index فـ controller.
• index كتسول model بـ await User.findAll()، ومن بعد res.render ديال الصفحة users/index.

هادا هو الكود اللي بان فالدرس، بـ CommonJS (require و exports):

// controllers/userController.js
const User = require('../models/userModel');

exports.index = async (req, res) => {
  const users = await User.findAll();
  res.render('users/index', { users });
};

// models/userModel.js
const pool = require('../db');

exports.findAll = async () => {
  const [rows] = await pool.execute('SELECT * FROM users');
  return rows;
};

علاش await؟#

حيت la base كتاخد شوية ديال الوقت، و await كيتسنى الجواب قبل ما يكمل. ومع Express 5، إلا وقع شي خطأ فـ fonction async، Express كيصيفطو بوحدو للـ middleware ديال الأخطاء.

نزيدو، نبدلو، نمسحو#

• الإضافة: POST /users. la méthode store كتقرا req.body (السمية و l'email)، و model كيدير INSERT بـ execute، ومن بعد res.redirect('/users')، بحال header Location.
• التعديل: /users/:id/edit. l'id كنقراوه بـ req.params.id. و model كيدير UPDATE users SET nom = ?, email = ? WHERE id = ?، والقيم فطابلو بنفس الترتيب ديال علامات الاستفهام.
• المسح: بـ POST ماشي GET، وديما مع WHERE. بلا WHERE، كتمسح كاع المستخدمين.

علامات الاستفهام كيخليو كل requête requête préparée، بحال prepare و execute فـ PDO. عمرك تلصق الفورم مباشرة فـ SQL: injection SQL.

وفـ vue ديال EJS، كنعرضو بـ <%= %>، اللي كتحمي من XSS بحال htmlspecialchars.

التجربة فالأخير: node app.js، ومن بعد localhost:3000/users. اللائحة كتبان، والفورم كيزيد مستخدم.

التسجيل و login بـ bcrypt#

القاعدة اللولة ما تبدلاتش: mot de passe عمرو ما يتخزن كيف ما هو. إلا تسرقات la base، كاع les mots de passe كيبانو، والناس كيستعملو نفس mot de passe فكلشي.

// controllers/authController.js
const bcrypt = require('bcrypt');
const User = require('../models/userModel');

exports.register = async (req, res) => {
  const { nom, email, password } = req.body;
  const hash = await bcrypt.hash(password, 10);
  await User.register(nom, email, hash);
  res.redirect('/login');
};

exports.login = async (req, res) => {
  const { email, password } = req.body;
  const user = await User.findByEmail(email);
  const ok = user && await bcrypt.compare(password, user.password);
  if (!ok) return res.render('login', {
    erreur: 'Email ou mot de passe incorrect' });
  // la session : chapitre suivant
};

• الرقم 10 هو le coût: شحال من مرة bcrypt كيعاود الحساب. كلما كبر، كلما ولا صعيب على الهاكر.
• الـ hash فيه sel، وما كيرجعش، بحال password_hash و password_verify فـ PHP.
• إلا كان غالط، رسالة وحدة: « Email ou mot de passe incorrect ». و user && كيمنع المقارنة إلا l'email ما كاينش. ما تقولش للهاكر شنو كاين فـ la base.
• l'email ديما UNIQUE فـ table، باش ما يتسجلوش جوج بنفس l'email.

la session و middleware requireAuth#

الدرس كيعاود يستعمل مثال البادج ديال الأوطيل: كتوري la carte مرة وحدة، وكيعطيوك بادج.

• express-session هي اللي كتعطي البادج، بحال session_start.
• البادج هو cookie سميتو connect.sid (فـ PHP كان سميتو PHPSESSID).
• secret ديال la session كيتحط فـ .env، حيت هو اللي كيوقع على البادج.
• ملي mot de passe صحيح: req.session.regenerate() باش نبدلو البادج (بحال session_regenerate_id)، ومن بعد req.session.userId (بحال $_SESSION['user_id']).
• و logout: req.session.destroy()، والبادج القديم ما بقا يحل حتى باب.

وللصفحات المحمية، middleware صغير:

// middleware/requireAuth.js
function requireAuth(req, res, next) {
  if (!req.session.userId) return res.redirect('/login');
  next();
}

هادي هي isset و header و exit ديال PHP، ولكن مكتوبة مرة وحدة لكاع les routes. التجربة: /dashboard بلا login كترجعك لـ login، ومن بعد ما تدخل، كتبان « Mer7ba, Sara ! ».

و les tokens ديال JWT؟#

إلا كان le front React ولا application mobile، غالبا كنستعملو token بحال JWT. الفرق مع la session: فـ la session، البادج كيبقى عند السيرفر؛ و JWT كارطة موقعة كيهزها الكليان معاه. فـ login، jwt.sign كيصاوب token بالـ secret ديال .env، وفكل requête كيتصيفط فـ header Authorization: Bearer. والـ middleware كيدير jwt.verify: إلا token صحيح، next()؛ وإلا لا، خطأ 401. فـ Laravel، نفس الفكرة سميتها Sanctum. والتفاصيل كاملة مع React كاينين فـ مقال React + API و login بـ JWT.

و le front؟#

اليوم EJS: السيرفر كيبني HTML وكيصيفط صفحة واجدة، بحال les views ديال PHP. وغدا React: السيرفر كيرجع غير JSON، و React هو اللي كيبني الصفحة فـ le navigateur. والـ API ديال Express هي اللي غادي يستعملها React.

أسئلة كيتعاودو#

شنو خاصك تحفظ#

PHP ولا Node: نفس الأفكار. اللي فهم الفكرة، كيبدل اللغة بلا خوف.

شوف الدرس#

الدرس كامل (تقريبا 8 دقايق و50 ثانية، بالدارجة) فالصفحة ديالو: Node.js و Express (E14).

• 0:00 المقدمة: JavaScript حتى فالسيرفر؟
• 0:28 JavaScript فكل بلاصة: V8 و Node.js و Express
• 1:30 المشروع: npm و MVC والفيشي .env
• 2:38 la base: MySQL، SGBD كيتكلم معاه أي لغة
• 3:09 CRUD بـ Express
• 5:12 التسجيل و login بـ bcrypt
• 5:57 la session: express-session و requireAuth
• 7:07 و les tokens؟ JWT (و Sanctum فـ Laravel)
• 7:46 و le front؟ EJS اليوم، React غدا
• 8:09 Récap PHP / Node والتحدي

زيد قدام#

• قبل: شنو هو MVC؟
• من بعد: أول مشروع React: السلة، ومن بعد React كيقرا API ديال Node: CRUD و login بـ JWT.
• علاش localhost:3000 ديالك ما كيبانش عند صاحبك: شنو كيوقع ملي كتكتب URL.
• المسار: تطوير الويب Full Stack.
• الأساسيات ديال الشبكات، من OSI حتى TCP/IP: شبكات الحاسوب بالدارجة.

المصادر#

• Documentation ديال Node.js
• Documentation ديال Express: routing
• OWASP: كيفاش نخزنو les mots de passe