node js وsqlite

Ayman Alrawy · 25 فبراير 2023

كيف استطيع اخذ input من المستخدم من node js وارسله الى قاعدة البيانات sqlite

Mustafa Suleiman · 25 فبراير 2023

لإستقبال الـ input من المستخدم في Node.js وإرساله إلى قاعدة البيانات SQLite ، يمكنك إتباع الخطوات التالية:

1- تثبيت SQLite:

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

npm install sqlite3

2- فتح قاعدة البيانات:

يمكنك فتح قاعدة البيانات باستخدام دالة Database الموجودة في مكتبة SQLite. يمكنك استخدام الأمر التالي لفتح قاعدة البيانات:

const sqlite3 = require('sqlite3').verbose();
const db = new sqlite3.Database(':memory:'); // يمكن تعيين المسار واسم ملف قاعدة البيانات هنا بدلاً من ':memory:'

3- إنشاء جدول:

يمكنك إنشاء جدول باستخدام دالة run() المتاحة في مكتبة SQLite. يمكنك استخدام الأمر التالي لإنشاء جدول:

db.run('CREATE TABLE users (id INT, name TEXT, email TEXT)');

4- إدخال البيانات:

يمكن إدخال البيانات باستخدام دالة run() مرة أخرى. يمكنك استخدام الأمر التالي لإدخال بيانات مستخدم:

const id = 1;
const name = 'John Doe';
const email = 'john.doe@example.com';

db.run(`INSERT INTO users(id, name, email) VALUES(?, ?, ?)`, [id, name, email], function(err) {
  if (err) {
    return console.log(err.message);
  }
  console.log(`A row has been inserted with rowid ${this.lastID}`);
});

يمكن تغيير id و name و email إلى المدخلات المستلمة من المستخدم.

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

عبدالباسط ابراهيم · 25 فبراير 2023

كما في التعليق السابق وضح مصطفى طريقة إرسال بيانات إلى قاعدة البيانات SQLite ولكن row واحد

لذلك إذا اردت إرسال العديد من الصفوف يمكنك استخدام loop كما في المثال التالي

const sqlite3 = require('sqlite3').verbose();
let db = new sqlite3.Database('../db/sample.db');
let languages = ['C++', 'Python', 'Java', 'C#', 'Go'];

//? ونغير الفاصل بين العناصر ل placeholders نجهز مصفوفة 
let placeholders = languages.map((language) => '(?)').join(',');
let sql = 'INSERT INTO langs(name) VALUES ' + placeholders;

db.run(sql, languages, function(err) {
  if (err) {
    return console.error(err.message);
  }
  console.log(`Rows inserted ${this.changes}`);
});

db.close();

عمر قره محمد · 26 فبراير 2023

يمكنك فعل ذلك كالتالي :

قم بإنشاء مجلد جديد من اجل المشروع وليكن اسمه sqlite وقم بفتح المجلد باستخدام vs code.
بعد ذلك قم بكتابة الأمر :
```
git init -y
```
من اجل انشاء مشروع node جديد وبعد ذلك قم بتنزيل الحزم الضرورية :
```
npm install express body-parser sqlite3
```
نقوم بعد ذلك بإنشاء مجلد جديد داخل المجلد sqlite ونسيمه public وهو الذي سيحتوي على ملف الـ html الخاص بنا.

نقوم بإنشاء ملف index.js وهو الذي سيحتوي الكود الخاص بالخادم كالتالي :

// استدعاء ملفات الخادم
var express = require("express")
var app = express()
const path = require("path")

// منفذ الخادم
var HTTP_PORT = 3000
// تشغيل الخادم
app.listen(HTTP_PORT, () => {
  console.log("Server running on port %PORT%".replace("%PORT%", HTTP_PORT))
});

// متاحاً public اعداد الخادم لكي يجعل المجلد 
app.use(express.static(path.join(__dirname, 'public')))

// ****************************************
// الكود الخاص بقاعدة البيانات
// ****************************************

// استدعاء ملفات قاعدة البيانات
var sqlite3 = require('sqlite3').verbose()

// مسار قاعدة البيانات
const DB_SOURCE = "db.sqlite"
// انشاء قاعدة البيانات
let db = new sqlite3.Database(DB_SOURCE, (err) => {
  if (err) {
    // في حال فشلت العملية
    console.error(err.message)
    throw err
  } else {
    console.log('تم الاتصال بقاعدة البيانات بنجاح')
    db.run(`CREATE TABLE users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name text, 
email text UNIQUE, 
password text, 
CONSTRAINT email_unique UNIQUE (email)
)`,
           (err) => {
      if (err) {
        console.log("الحقل منشئ بالفعل");
      } else {
        console.log("تم انشاء الحقل بنجاح");
      }
    });
  }
});

// استدعاء ملفات مفسر الطلبات
var bodyParser = require('body-parser')
// application/x-www-form-urlencoded من اجل قبول الطلبات من النوع 
app.use(bodyParser.urlencoded({ extended: false }))
// application/json من اجل قبول الطلبات من النوع 
app.use(bodyParser.json())

// المسار الخاص بحفظ مستخدم جديد
app.post("/users", (req, res, next) => {
  // احضار البيانات من الطلب
  const { name, email, password } = req.body;
  // اضافة البيانات إلى قاعدة البيانات	
  db.run('INSERT INTO users (name, email, password) VALUES (?,?,?)', [name, email, password], (error, result) => {
    if (error) {
      res.send("مشكلة في حفظ البيانات على الخادم")
      console.log("مشكلة في حفظ البيانات على الخادم\nرسالة المشكلة :\n", error);
    } else res.send("تم حفظ المستخدم بنجاح")
  })

});

// المسار الخاص بإحضار البيانات
app.get("/users", (req, res, next) => {
  // متغير فارغ فلنسا بحاجة لإضافة خواص في هذا المثال
  var params = [];
  // احضار المستخدمين من قاعدة البيانات
  db.all("select * from users", params, (error, rows) => {
    if (error) {
      res.send("مشكلة في احضار البيانات من الخادم")
      console.log("مشكلة في احضار البيانات من الخادم\nرسالة المشكلة :\n", error);
    } else
      res.json(rows)
  });
});

// الاستجابة الافتراضية
app.use(function (req, res) {
  res.status(404);
});

ثم نقوم بإنشاء ملف index.html داخل مجلد الـ public ونكتب فيه الكود التالي :

<!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.0">
    <title>example</title>
  </head>

  <body>
    <form onsubmit="handleSubmit(event)">
      <div><label for="name">ادخل اسم المستخدم</label>
        <input type="text" id="name" placeholder="ادخل اسم المستخدم">
      </div>
      <div><label for="email">ادخل البريد الالكتروني</label>
        <input type="email" id="email" placeholder="ادخل البريد الالكتروني">
      </div>
      <div><label for="password">ادخل كلمة السر</label>
        <input type="password" id="password" placeholder="ادخل كلمة السر">
      </div>
      <button type="submit">تسجيل</button>
    </form>
    <!-- رابط المستخدمين المسجلين -->
    <a href="/users">الاطلاع على المستخدمين المسجلين</a>
    <script>
      // الوظيفة الخاصة بإرسال البيانات إلى الخادم
      function handleSubmit(e) {
        // احضار القيم الخاصة بالنموذج
        const name = document.getElementById("name").value;
        const email = document.getElementById("email").value;
        const password = document.getElementById("password").value;
        // الغاء التصرف الافتراضي للنموذج
        e.preventDefault()
        // إرسال الطلب إلى الخادم
        fetch("/users", {
          // نوع الطلب
          method: "POST",
          // اعداد نوع البيانات والذي يتم إرساله في رأس الطلب
          headers: {
            "Content-Type": "application/json",
            // 'Content-Type': 'application/x-www-form-urlencoded',
          },
          // حفن البيانات في جسم الطلب
          body: JSON.stringify({
            name,
            email,
            password
          }),
        }).then(result => console.log(result))// طباعة الاستجابة التي سنحصل عليها
          .catch(error => console.log(error)) // طباعة الاخطاء في حال ورودها
      }
    </script>
  </body>

</html>

ملفات المشروع بالكامل :

sqlLite.zip

Ayman Alrawy · 27 فبراير 2023

بتاريخ On 25‏/2‏/2023 at 17:28 قال Mustafa Suleiman:

بتاريخ On 26‏/2‏/2023 at 09:47 قال عمر قره محمد:

يمكنك فعل ذلك كالتالي :

قم بإنشاء مجلد جديد من اجل المشروع وليكن اسمه sqlite وقم بفتح المجلد باستخدام vs code.
بعد ذلك قم بكتابة الأمر :
```
git init -y
```
من اجل انشاء مشروع node جديد وبعد ذلك قم بتنزيل الحزم الضرورية :
```
npm install express body-parser sqlite3
```
نقوم بعد ذلك بإنشاء مجلد جديد داخل المجلد sqlite ونسيمه public وهو الذي سيحتوي على ملف الـ html الخاص بنا.

نقوم بإنشاء ملف index.js وهو الذي سيحتوي الكود الخاص بالخادم كالتالي :

// استدعاء ملفات الخادم
var express = require("express")
var app = express()
const path = require("path")

// منفذ الخادم
var HTTP_PORT = 3000
// تشغيل الخادم
app.listen(HTTP_PORT, () => {
  console.log("Server running on port %PORT%".replace("%PORT%", HTTP_PORT))
});

// متاحاً public اعداد الخادم لكي يجعل المجلد 
app.use(express.static(path.join(__dirname, 'public')))

// ****************************************
// الكود الخاص بقاعدة البيانات
// ****************************************

// استدعاء ملفات قاعدة البيانات
var sqlite3 = require('sqlite3').verbose()

// مسار قاعدة البيانات
const DB_SOURCE = "db.sqlite"
// انشاء قاعدة البيانات
let db = new sqlite3.Database(DB_SOURCE, (err) => {
  if (err) {
    // في حال فشلت العملية
    console.error(err.message)
    throw err
  } else {
    console.log('تم الاتصال بقاعدة البيانات بنجاح')
    db.run(`CREATE TABLE users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name text, 
email text UNIQUE, 
password text, 
CONSTRAINT email_unique UNIQUE (email)
)`,
           (err) => {
      if (err) {
        console.log("الحقل منشئ بالفعل");
      } else {
        console.log("تم انشاء الحقل بنجاح");
      }
    });
  }
});

// استدعاء ملفات مفسر الطلبات
var bodyParser = require('body-parser')
// application/x-www-form-urlencoded من اجل قبول الطلبات من النوع 
app.use(bodyParser.urlencoded({ extended: false }))
// application/json من اجل قبول الطلبات من النوع 
app.use(bodyParser.json())

// المسار الخاص بحفظ مستخدم جديد
app.post("/users", (req, res, next) => {
  // احضار البيانات من الطلب
  const { name, email, password } = req.body;
  // اضافة البيانات إلى قاعدة البيانات	
  db.run('INSERT INTO users (name, email, password) VALUES (?,?,?)', [name, email, password], (error, result) => {
    if (error) {
      res.send("مشكلة في حفظ البيانات على الخادم")
      console.log("مشكلة في حفظ البيانات على الخادم\nرسالة المشكلة :\n", error);
    } else res.send("تم حفظ المستخدم بنجاح")
  })

});

// المسار الخاص بإحضار البيانات
app.get("/users", (req, res, next) => {
  // متغير فارغ فلنسا بحاجة لإضافة خواص في هذا المثال
  var params = [];
  // احضار المستخدمين من قاعدة البيانات
  db.all("select * from users", params, (error, rows) => {
    if (error) {
      res.send("مشكلة في احضار البيانات من الخادم")
      console.log("مشكلة في احضار البيانات من الخادم\nرسالة المشكلة :\n", error);
    } else
      res.json(rows)
  });
});

// الاستجابة الافتراضية
app.use(function (req, res) {
  res.status(404);
});

ثم نقوم بإنشاء ملف index.html داخل مجلد الـ public ونكتب فيه الكود التالي :

<!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.0">
    <title>example</title>
  </head>

  <body>
    <form onsubmit="handleSubmit(event)">
      <div><label for="name">ادخل اسم المستخدم</label>
        <input type="text" id="name" placeholder="ادخل اسم المستخدم">
      </div>
      <div><label for="email">ادخل البريد الالكتروني</label>
        <input type="email" id="email" placeholder="ادخل البريد الالكتروني">
      </div>
      <div><label for="password">ادخل كلمة السر</label>
        <input type="password" id="password" placeholder="ادخل كلمة السر">
      </div>
      <button type="submit">تسجيل</button>
    </form>
    <!-- رابط المستخدمين المسجلين -->
    <a href="/users">الاطلاع على المستخدمين المسجلين</a>
    <script>
      // الوظيفة الخاصة بإرسال البيانات إلى الخادم
      function handleSubmit(e) {
        // احضار القيم الخاصة بالنموذج
        const name = document.getElementById("name").value;
        const email = document.getElementById("email").value;
        const password = document.getElementById("password").value;
        // الغاء التصرف الافتراضي للنموذج
        e.preventDefault()
        // إرسال الطلب إلى الخادم
        fetch("/users", {
          // نوع الطلب
          method: "POST",
          // اعداد نوع البيانات والذي يتم إرساله في رأس الطلب
          headers: {
            "Content-Type": "application/json",
            // 'Content-Type': 'application/x-www-form-urlencoded',
          },
          // حفن البيانات في جسم الطلب
          body: JSON.stringify({
            name,
            email,
            password
          }),
        }).then(result => console.log(result))// طباعة الاستجابة التي سنحصل عليها
          .catch(error => console.log(error)) // طباعة الاخطاء في حال ورودها
      }
    </script>
  </body>

</html>

ملفات المشروع بالكامل :

sqlLite.zip 6.6 MB · 0 تنزيلات

هل تعرف اي فيديو يشرح ذلك حتى لو بالانجليزية

Rayan Alsousou · 28 يناير

SQL 3.htmlSQL 3.htmlالسلام عليكم

أنا اريد أن اتحقق من البيانات و ليس اضافتها، سأرفق الملف الذي قمت بالعمل عليه على أمل أن تساعدوني في حل المشكلة

قمت بالعمل عليه في visual studio code*

Mustafa Suleiman · 29 يناير

بتاريخ 9 ساعة قال Rayan Alsousou:

SQL 3.htmlSQL 3.htmlالسلام عليكم

أنا اريد أن اتحقق من البيانات و ليس اضافتها، سأرفق الملف الذي قمت بالعمل عليه على أمل أن تساعدوني في حل المشكلة

قمت بالعمل عليه في visual studio code*

الجزء الخاص بعملية التحقق لديك هو الدالة validateLogin ونقوم أولاً بالتحقق من أن المستخدم قام بإدخال بيانات بالفعل وليس حقول فارغة ثم نرسل تلك البيانات للخادم للتحقق من وجود المستخدم وإن تم إيجاده يتم السماح له بتسجيل الدخول:

<script>
  const validateLogin = async () => {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    const messageElement = document.getElementById('message');

    if (username.trim() === '' || password.trim() === '') {
      messageElement.textContent = 'Please enter both username and password.';
      return;
    }

    try {
      const userExists = await checkLoginInfo(username);
      if (userExists) {
        messageElement.textContent = 'Login successful!';
      } else {
        messageElement.textContent = 'Invalid username or password.';
      }
    } catch (error) {
      console.error('An error occurred:', error.message);
      messageElement.textContent = error.message;
    }
  };

  const checkLoginInfo = async (username) => {
    const response = await fetch('localhost:3000/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ username }),
    });

    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    const data = await response.json();
    return data.userExists;
  };
</script>

بالطبع من جهة الخادم عليك معالجة الطلب الذي تم إرساله وإرجاع قيمة userExists سواء false أو true، أي في جهة الخادم نقوم بإنشاء مسار login ثم نقوم بمعالجة البيانات التي تم إرسالها وتفقد هل هي موجودة لدينا في قاعدة البيانات أم لا، ثم نرسل الرد بالإيجاب أو السلب.

Rayan Alsousou · 3 فبراير

عندما قمت باستعمال الكود المذكور بالأعلى لقد حصلت على نتيجة failed to fetch

و بمحاولة أخرى أضفت 'http://localhost:3000/login' لكن لم ينجح هذا الحل معي

فهل يوجد حل آخر للتخلص من المشكلة؟

node js وsqlite

السؤال

Ayman Alrawy

7 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

عبدالباسط ابراهيم

عمر قره محمد

Ayman Alrawy

Rayan Alsousou

Mustafa Suleiman

Rayan Alsousou

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية