استرجاع وعرض بيانات PostgreSQL في HTML باستخدام AngularJS

في هذا السياق، يعد الأمر بالغ الأهمية للمطورين والمبرمجين الراغبين في استرجاع بيانات من قاعدة البيانات PostgreSQL وعرضها في صفحة HTML دون الحاجة إلى JSP وServlets. تحقيق هذه المهمة يتطلب فهمًا جيدًا للتقنيات المستخدمة والتفاعل بينها.

أولاً وقبل كل شيء، يتعين عليك فهم كيفية التفاعل بين الجزء الخاص بالخادم (Server-side) والجزء الخاص بالعميل (Client-side). يتيح AngularJS كمكتبة JavaScript للعميل التفاعل مع البيانات، في حين يتيح HTML5 و CSS3 تصميم صفحات الويب بشكل جذاب واستجابة.

الخطوة الأولى هي إعداد بيئة العمل، حيث يمكنك استخدام AngularJS للتفاعل مع البيانات من قاعدة البيانات PostgreSQL. يجب عليك استخدام خدمات RESTful للتفاعل بين الواجهة وخادم قاعدة البيانات.

يمكنك استخدام خدمة RESTful بلغة البرمجة التي تفضلها (مثل Node.js مع Express أو Python مع Flask) لإنشاء واجهة لاسترجاع البيانات من PostgreSQL. يمكن أن يكون هذا الاستعلام SQL SELECT.

على سبيل المثال، يمكن أن يكون لديك نهج مشابه للكود التالي (باستخدام Node.js و Express):

javascript
const express = require('express');
const { Pool } = require('pg');

const app = express();
const pool = new Pool({
  user: 'your_username',
  host: 'your_host',
  database: 'your_database',
  password: 'your_password',
  port: 5432,
});

app.get('/api/getData/:id', (req, res) => {
  const id = req.params.id;
  const query = 'SELECT * FROM your_table WHERE id = $1';
  
  pool.query(query, [id], (error, result) => {
    if (error) {
      console.error('Error executing query', error);
      res.status(500).json({ error: 'Internal Server Error' });
    } else {
      res.json(result.rows);
    }
  });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

في هذا المثال، يقوم الخادم بتحويل الاستعلام إلى قاعدة البيانات PostgreSQL باستخدام pg ويعيد البيانات كـ JSON.

ثم، في AngularJS، يمكنك استخدام خدمة $http للتفاعل مع الخدمة RESTful واسترجاع البيانات. يمكن أن يكون لديك خدمة مشابهة للكود التالي:

javascript
app.service('dataService', function($http) {
  this.getData = function(id) {
    return $http.get('/api/getData/' + id);
  }
});

وأخيرًا، في جانب الواجهة (AngularJS Controller)، يمكنك استخدام الخدمة لاسترجاع البيانات وعرضها في صفحة HTML:

javascript
app.controller('MainController', function($scope, dataService) {
  $scope.searchId = 1; // يمكن تعيين هذا من خلال واجهة المستخدم
  
  $scope.searchData = function() {
    dataService.getData($scope.searchId)
      .then(function(response) {
        $scope.resultData = response.data;
      })
      .catch(function(error) {
        console.error('Error fetching data', error);
      });
  };
});

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

المزيد من المعلومات

حل مشكلة ImportError: No module named flask في تطبيق Flask البسيط

تحويل بيانات الصفوف إلى أعمدة في R باستخدام tidyr::spread()