اذهب إلى المحتوى
  • 0

node js وsqlite

Ayman Alrawy

السؤال

Recommended Posts

  • 0

لإستقبال الـ 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. يمكنك استخدام هذه الأمثلة كنقطة انطلاق وتعديلها وفقًا لاحتياجاتك.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

كما في التعليق السابق وضح مصطفى طريقة إرسال بيانات إلى  قاعدة البيانات 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();

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

  1. قم بإنشاء مجلد جديد من اجل المشروع وليكن اسمه sqlite وقم بفتح المجلد باستخدام vs code.
  2. بعد ذلك قم بكتابة الأمر :
    git init -y

    من اجل انشاء مشروع node جديد وبعد ذلك قم بتنزيل الحزم الضرورية :

    npm install express body-parser sqlite3
  3. نقوم بعد ذلك بإنشاء مجلد جديد داخل المجلد sqlite ونسيمه public وهو الذي سيحتوي على ملف الـ html الخاص بنا.

  4. نقوم بإنشاء ملف 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);
    });


     

  5. ثم نقوم بإنشاء ملف 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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

 

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

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

  1. قم بإنشاء مجلد جديد من اجل المشروع وليكن اسمه sqlite وقم بفتح المجلد باستخدام vs code.
  2. بعد ذلك قم بكتابة الأمر :
    git init -y
     

    من اجل انشاء مشروع node جديد وبعد ذلك قم بتنزيل الحزم الضرورية :

    npm install express body-parser sqlite3
     
  3. نقوم بعد ذلك بإنشاء مجلد جديد داخل المجلد sqlite ونسيمه public وهو الذي سيحتوي على ملف الـ html الخاص بنا.

  4. نقوم بإنشاء ملف 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);
    });
     


     

  5. ثم نقوم بإنشاء ملف 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 تنزيلات

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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 ثم نقوم بمعالجة البيانات التي تم إرسالها وتفقد هل هي موجودة لدينا في قاعدة البيانات أم لا، ثم نرسل الرد بالإيجاب أو السلب.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...