شرح برمجة قواعد البيانات بتنسيق HTML باستخدام JavaScript للأطفال

This post is also available in: English (الإنجليزية)

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

ما هو الموقع التفاعلي؟

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

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

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

من أجل إنشاء موقع ويب تفاعلي ، يحتاج المرء إلى قاعدة بيانات متصلة بالموقع لتوفير المعلومات المطلوبة.

ما هي قاعدة البيانات؟

قاعدة البيانات هي مجموعة منظمة من المعلومات المهيكلة ، أو البيانات ، المخزنة عادةً إلكترونيًا في نظام الكمبيوتر. عادة ما يتم التحكم في قاعدة البيانات بواسطة نظام إدارة قواعد البيانات (DBMS). معًا ، يُشار إلى البيانات ونظام إدارة قواعد البيانات ، جنبًا إلى جنب مع التطبيقات المرتبطة بها ، على أنها نظام قاعدة بيانات ، وغالبًا ما يتم اختصارها إلى مجرد قاعدة بيانات.

برمجة قواعد البيانات بتنسيق HTML باستخدام JavaScript

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

ما هي قاعدة بيانات الويب؟

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

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

برمجة قواعد البيانات بتنسيق HTML باستخدام JavaScript

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

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

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

برمجة قواعد البيانات بتنسيق HTML باستخدام JavaScript

يمكن استخدام Node.js في تطبيقات قواعد البيانات. تعد MySQL واحدة من أكثر قواعد البيانات شيوعًا. لهذا ، يجب أن يكون لديك MySQL مثبتًا على جهاز الكمبيوتر الخاص بك. يمكنك تنزيل قاعدة بيانات MySQL مجانية على ttps: //www.mysql.com/downloads/.

بمجرد تشغيل MySQL على جهاز الكمبيوتر الخاص بك ، يمكنك الوصول إليه باستخدام Node.js.

للوصول إلى قاعدة بيانات MySQL باستخدام Node.js ، تحتاج إلى برنامج تشغيل MySQL. سيستخدم هذا البرنامج التعليمي وحدة “MySQL” التي تم تنزيلها من NPM.

لتنزيل وحدة “MySQL” وتثبيتها ، افتح Command Terminal وقم بتنفيذ ما يلي:

C:UsersYourNamenpm install mysql

الآن قمت بتنزيل وتثبيت برنامج تشغيل قاعدة بيانات mysql. يمكن لـ Node.js استخدام هذه الوحدة لمعالجة قاعدة بيانات MySQL:

var mysql = require(‘mysql’);

إنشاء اتصال

يتم استخدام الكود التالي للاتصال بقاعدة بيانات.

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!”);});

الآن ، احفظ الكود أعلاه في ملف يسمى “demo_db_connection.js” وقم بتشغيل الملف:

C:UsersYourNamenode demo_db_connection.js

يمكنك الآن البدء في الاستعلام عن قاعدة البيانات باستخدام عبارات SQL.

استعلام عن قاعدة بيانات

استخدم عبارات SQL للقراءة من (أو الكتابة إلى) قاعدة بيانات MySQL. وهذا ما يسمى أيضًا “للاستعلام” عن قاعدة البيانات. يحتوي كائن الاتصال الذي تم إنشاؤه في المثال أعلاه على طريقة للاستعلام عن قاعدة البيانات:

con.connect(function(err) { if (err) throw err; console.log(“Connected!”); con.query(sql, function (err, result) { if (err) throw err; console.log(“Result: ” + result); });});

أسلوب الاستعلام يأخذ عبارات SQL كمعامل ويعيد النتيجة.

إنشاء قاعدة بيانات

لإنشاء قاعدة بيانات في MySQL ، استخدم عبارة “CREATE DATABASE”:

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!”); con.query(“CREATE DATABASE mydb”, function (err, result) { if (err) throw err;console.log(“Database created”); });});

سيقوم الكود أعلاه بإنشاء قاعدة بيانات باسم mydb.

احفظ الكود أعلاه في ملف يسمى “demo_create_db.js” وقم بتشغيل الملف:

إنشاء جدول

لإنشاء جدول في MySQL ، استخدم عبارة “CREATE TABLE”. تأكد من تحديد اسم قاعدة البيانات عند إنشاء الاتصال:

var mysql = require(‘mysql’);var con = mysql.createConnection({ host: “localhost”, user: “yourusername”, password: “yourpassword”, database: “mydb”});con.connect(function(err) { if (err) throw err; console.log(“Connected!”); var sql = “CREATE TABLE customers (name VARCHAR(255), address VARCHAR(255))”; con.query(sql, function (err, result) { if (err) throw err;console.log(“Table created”); });});

يقوم الكود أعلاه بإنشاء جدول باسم العملاء.

احفظ الكود أعلاه في ملف يسمى “demo_create_table.js” وقم بتشغيل الملف:

C:UsersYourNamenode demo_create_table_db.js

إضافة البيانات إلى الجدول

لملء جدول في MySQL ، استخدم عبارة “INSERT INTO”.

var mysql = require(‘mysql’);var con = mysql.createConnection({ host: “localhost”, user: “yourusername”, password: “yourpassword”, database: “mydb”});con.connect(function(err) { if (err) throw err; console.log(“Connected!”); var sql = “INSERT INTO customers (name, address) VALUES (‘Company Inc’, ‘Highway 37’)”; con.query(sql, function (err, result) { if (err) throw err;console.log(“1 record inserted”); });});

احفظ الكود أعلاه في ملف يسمى “demo_db_insert.js” ، وقم بتشغيل الملف:

C:UsersYourNamenode demo_db_insert.js

استرجاع البيانات من جدول

لتحديد البيانات من جدول في MySQL ، استخدم عبارة “SELECT”.

var mysql = require(‘mysql’);var con = mysql.createConnection({ host: “localhost”, user: “yourusername”, password: “yourpassword”, database: “mydb”});con.connect(function(err) { if (err) throw err; con.query(“SELECT * FROM customers”, function (err, result, fields) { if (err) throw err;console.log(result); });});

احفظ الكود أعلاه في ملف يسمى “demo_db_select.js” وقم بتشغيل الملف:

C:UsersYourNamenode demo_db_select.js

تصفية السجلات في قاعدة البيانات

عند تحديد السجلات من جدول ، يمكنك تصفية التحديد باستخدام عبارة “WHERE”:

var mysql = require(‘mysql’);var con = mysql.createConnection({ host: “localhost”, user: “yourusername”, password: “yourpassword”, database: “mydb”});con.connect(function(err) { if (err) throw err; con.query(“SELECT * FROM customers WHERE address = ‘Park Lane 38′”, function (err, result) { if (err) throw err;console.log(result); });});

سيقوم الكود أعلاه بجلب السجل (السجلات) بالعنوان “Park Lane 38”.

احفظ الكود أعلاه في ملف يسمى “demo_db_where.js” وقم بتشغيل الملف:

C:UsersYourNamenode demo_db_where.js

يمكنك أيضًا تحديد السجلات التي تبدأ أو تتضمن أو تنتهي بحرف أو عبارة معينة. استخدم حرف البدل “٪” لتمثيل أحرف صفر أو حرف واحد أو عدة أحرف:

var mysql = require(‘mysql’);var con = mysql.createConnection({ host: “localhost”, user: “yourusername”, password: “yourpassword”, database: “mydb”});con.connect(function(err) { if (err) throw err; con.query(“SELECT * FROM customers WHERE address LIKE ‘S%'”, function (err, result) { if (err) throw err;console.log(result); });});

سيقوم الكود أعلاه بجلب السجل (السجلات) حيث يبدأ العنوان بالحرف “S”.

احفظ الكود أعلاه في ملف يسمى “demo_db_where_s.js” وقم بتشغيل الملف:

C:UsersYourNamenode demo_db_where_s.js

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

var adr = ‘Mountain 21’;var sql = ‘SELECT * FROM customers WHERE address = ‘ + mysql.escape(adr);con.query(sql, function (err, result) { if (err) throw err; console.log(result);});

يمكنك أيضا استخدام؟ كعنصر نائب للقيم التي تريد الهروب منها. في هذه الحالة ، يتم إرسال المتغير كمعامل ثاني في طريقة الاستعلام ():

var adr = ‘Mountain 21’;var sql = ‘SELECT * FROM customers WHERE address = ?’;con.query(sql, [adr], function (err, result) { if (err) throw err; console.log(result);});

إذا كان لديك العديد من العناصر النائبة ، فإن المصفوفة تحتوي على قيم متعددة ، بهذا الترتيب:

var name = ‘Amy’;var adr = ‘Mountain 21’;var sql = ‘SELECT * FROM customers WHERE name = ? OR address = ?’;con.query(sql, [name, adr], function (err, result) { if (err) throw err; console.log(result);});

فرز النتيجة

استخدم عبارة ORDER BY لفرز النتيجة بترتيب تصاعدي أو تنازلي. تقوم الكلمة الأساسية ORDER BY بفرز النتيجة تصاعديًا افتراضيًا. لفرز النتيجة بترتيب تنازلي ، استخدم الكلمة الأساسية DESC.

var mysql = require(‘mysql’);var con = mysql.createConnection({ host: “localhost”, user: “yourusername”, password: “yourpassword”, database: “mydb”});con.connect(function(err) { if (err) throw err; con.query(“SELECT * FROM customers ORDER BY name”, function (err, result) { if (err) throw err;console.log(result); });});

احفظ الكود أعلاه في ملف يسمى “demo_db_orderby.js” وقم بتشغيل الملف:

C:UsersYourNamenode demo_db_orderby.js

حذف سجل من جدول

يمكنك حذف سجلات من جدول موجود باستخدام عبارة “حذف من”:

var mysql = require(‘mysql’);var con = mysql.createConnection({ host: “localhost”, user: “yourusername”, password: “yourpassword”, database: “mydb”});con.connect(function(err) { if (err) throw err; var sql = “DELETE FROM customers WHERE address = ‘Mountain 21′”; con.query(sql, function (err, result) { if (err) throw err;console.log(“Number of records deleted: ” + result.affectedRows); });});

احفظ الكود أعلاه في ملف يسمى “demo_db_delete.js” وقم بتشغيل الملف:

C:UsersYourNamenode demo_db_delete.js

حذف جدول

يمكنك حذف جدول موجود باستخدام عبارة “DROP TABLE”:

var mysql = require(‘mysql’);var con = mysql.createConnection({ host: “localhost”, user: “yourusername”, password: “yourpassword”, database: “mydb”});con.connect(function(err) { if (err) throw err; var sql = “DROP TABLE customers”; con.query(sql, function (err, result) { if (err) throw err;console.log(“Table deleted”); });});

احفظ الكود أعلاه في ملف يسمى “demo_db_drop_table.js” وقم بتشغيل الملف:

C:UsersYourNamenode demo_db_drop_table.js

تحديث الجدول

يمكنك تحديث السجلات الموجودة في جدول باستخدام عبارة “UPDATE”:

var mysql = require(‘mysql’);var con = mysql.createConnection({ host: “localhost”, user: “yourusername”, password: “yourpassword”, database: “mydb”});con.connect(function(err) { if (err) throw err; var sql = “UPDATE customers SET address = ‘Canyon 123’ WHERE address = ‘Valley 345′”; con.query(sql, function (err, result) { if (err) throw err;console.log(result.affectedRows + ” record(s) updated”); });});

احفظ الكود أعلاه في ملف يسمى “demo_db_update.js” وقم بتشغيل الملف:

C:UsersYourNamenode demo_db_update.js

أضف تعليق