2,504 रीडिंग

Postgres डेटाबेस कनेक्टिविटी के साथ एक सरल HTML वेबसाइट बनाएं

द्वारा Abel Roy6m2024/05/05

बहुत लंबा; पढ़ने के लिए

यह ट्यूटोरियल आपको जावास्क्रिप्ट (नोड JS, एक्सप्रेस JS) का उपयोग करके Postgres डेटाबेस से जुड़ी एक HTML वेबसाइट बनाने के बारे में मार्गदर्शन करता है। इसमें डेटाबेस सेट करना, HTML संरचना बनाना, एक्सप्रेस JS से कनेक्ट करना और वेबपेज पर प्रदर्शित करने के लिए Postgres से डेटा प्राप्त करना शामिल है।

featured image - Postgres डेटाबेस कनेक्टिविटी के साथ एक सरल HTML वेबसाइट बनाएं

तैयार हो जाओ, भावी वेब डेवलपर्स! आइए एक सरल HTML वेबसाइट बनाएं जो Postgres डेटाबेस से कनेक्ट हो।

इस उदाहरण के लिए, हम इसके मिडलवेयर फंक्शनलिटी के लिए जावास्क्रिप्ट (नोड JS, और एक्सप्रेस JS) का उपयोग करेंगे। चाहे आप अपना पोर्टफोलियो दिखाना चाहते हों, ब्लॉग चलाना चाहते हों, या वेब डेवलपमेंट पर एक ड्यू मिनी प्रोजेक्ट पूरा करना चाहते हों, वेब डेवलपमेंट एक ऐसा कौशल है जिसकी अभी भी मांग है।

आगे सीखने का मार्ग

हम स्क्रैच से एक सरल HTML वेबसाइट बनाने की प्रक्रिया में गोता लगाएँगे। हम API अनुरोधों को संभालने के लिए मिडलवेयर के रूप में जावास्क्रिप्ट का उपयोग करके Postgres डेटाबेस को एकीकृत करने का तरीका जानेंगे। चीजों को और भी मजेदार बनाने के लिए, हम वेबपेज को डिज़ाइन करने के लिए बूटस्ट्रैप5 का भी उपयोग कर सकते हैं! लेकिन इस बारे में एक अलग ब्लॉग में बताया जाएगा।

प्रयुक्त प्रौद्योगिकियाँ:

एचटीएमएल 5
पोस्टग्रेज (डेटाबेस)
एक्सप्रेस जेएस (बैकएंड)

आवश्यक शर्तें

सुनिश्चित करें कि Postgres डाउनलोड हो चुका है और उपयोग के लिए तैयार है। साथ ही, Express JS, Body Parser और Postgres API जैसे npm पैकेज इंस्टॉल करने के लिए Node JS डाउनलोड करें। Postgres यहाँ से डाउनलोड करें NodeJS यहाँ से डाउनलोड करें

चरण 1: Postgres डेटाबेस सेटअप करें

psql का उपयोग करके एक नया Postgres डेटाबेस बनाएँ, जो SQL कमांड चलाने के लिए CLI है या pgAdmin (जो पहले से इंस्टॉल आता है) जैसे ग्राफ़िकल यूज़र इंटरफ़ेस का उपयोग करें। इस प्रदर्शन के लिए, हम डेटाबेस बनाने के लिए psql उपयोग करेंगे।

psql खोलें और आरंभ करने के लिए क्रेडेंशियल दर्ज करें।

webapp नामक एक डेटाबेस बनाएं और उससे कनेक्ट करें! (आप अपनी परियोजना के लिए कोई भी नाम इस्तेमाल कर सकते हैं!)

 CREATE database webapp;

 \c webapp

CREATE TABLE कमांड द्वारा इस डेटाबेस में अपनी टेबल बनाना शुरू करें। आप कमांड के साथ मार्गदर्शन के लिए Postgres दस्तावेज़ों का उपयोग कर सकते हैं। इस प्रदर्शन के लिए, हम एक student डेटाबेस बना रहे हैं जो Name , Year और Branch संग्रहीत करता है। (यदि आप चाहें तो और विशेषताएँ जोड़ें)

 CREATE TABLE student (name varchar(20), semester int, branch varchar(20));

 \d student

अब, हम INSERT कमांड के माध्यम से तालिका में कुछ डमी डेटा अपलोड करना शुरू कर सकते हैं

 INSERT INTO student VALUES ('Abel', 4, 'CE'), ('John', 6, 'ME'), ('Doe', 2, 'ETC');

एक बार जब हम डमी डेटा जोड़ लेते हैं, तो हम नीचे दिए गए कमांड के साथ Student टेबल देख सकते हैं

 SELECT * FROM student;

यदि आपने अब तक दिए गए चरणों का पालन किया है, तो आपको नीचे दी गई student तालिका मिल जाएगी!

चरण 2: एक सरल HTML वेबसाइट बनाएं

नीचे एक सरल वेबसाइट के लिए बॉयलरप्लेट HTML कोड दिया गया है:

 <!DOCTYPE html> <html lang='en'> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title> Student Management System </title> </head> <body> <h1> Student Management System </h1> </body> </html>

आइए अपनी आवश्यकताओं के अनुसार कस्टम div ब्लॉक जोड़ना शुरू करें:

 ... <body> <h1> Student Management System </h1> <p> Here, are the student details as below: </p> <div id='students_list'></div> ...

students_list div ब्लॉक डेटाबेस में पंजीकृत छात्रों की सूची दिखाने के लिए है। हम Postgres से डेटा लाने और उसे ब्लॉक में दिखाने के लिए Express JS का उपयोग करेंगे।

चरण 3: एक्सप्रेस JS के माध्यम से HTML को Postgres से जोड़ना

सबसे पहले अपने Command Prompt या टर्मिनल में आवश्यक लाइब्रेरीज़ स्थापित करें

 npm install express body-parser pg

आइए HTML और PostgreSQL को जोड़ने के लिए script.js फ़ाइल बनाना शुरू करें। सबसे पहले, हमें अनुरोधों को संभालने और कनेक्शन स्थापित करने के लिए आवश्यक लाइब्रेरीज़ को आयात करने की आवश्यकता है

 // Import required modules const express = require('express'); const { Pool } = require('pg'); const path = require('path'); const bodyParser = require('body-parser');

express एक बैकएंड सेवा के रूप में कार्य करता है, जो HTML वेब ऐप से अनुरोधों को पार्स करने के लिए है pg कनेक्शन path स्थापित करने के लिए एक पोस्टग्रेस एपीआई है, जो निर्देशिका पथों के प्रबंधन के लिए उपयोगिताएं प्रदान करता है body-parser POST अनुरोधों से डेटा निकालने के लिए एक मिडलवेयर है । (हम आगे बढ़ने के साथ-साथ उन्हें गहराई से समझेंगे)

आइए अब एक एक्सप्रेस एप्लिकेशन कनेक्शन बनाएं और साथ ही, वह पोर्ट भी निर्धारित करें जिस पर सर्वर सुनेगा।

 // Connect and Create an Express Application const app = express(); const port = 3000; // By default, its 3000, you can customize

Pool ऑब्जेक्ट का इंस्टेंस बनाकर Postgres से कनेक्शन स्थापित करें। अपने Postgres सेटअप से मेल खाने के लिए आवश्यक मान जोड़ें।

 // Create a Postgres Connection const pool = new Pool({ user: 'postgres', host: 'localhost', database: 'webapp', password: 'password', // Change to your password port: 5432, // Default Port });

express.static() मिडलवेयर के माध्यम से स्टेटिक फ़ाइलों को पंजीकृत करने के लिए कार्यक्षमताएँ जोड़ें। यह रूट निर्देशिका को निर्दिष्ट करता है जहाँ से स्टेटिक फ़ाइलों को सेवा दी जानी है

 app.use(express.static(path.join('')));

अब, हमें ऐप से भेजे गए HTML अनुरोधों को पार्स करना होगा। सरल शब्दों में, यह एक मिडलवेयर है जिसका उपयोग उपयोगकर्ताओं से डेटा प्राप्त करने के लिए किया जाता है, जैसे कि फ़ॉर्म या अपलोड

 app.use(bodyParser.urlencoded({ extended: false }));

(यदि आप उपयोगकर्ताओं से इनपुट लेने की योजना नहीं बना रहे हैं तो उपरोक्त पंक्ति न जोड़ें। हम अगले ब्लॉग में एक पंजीकरण फॉर्म जोड़ेंगे और इसीलिए हमें बॉडी-पार्सर की आवश्यकता है)

रूट URL ('/') के लिए रूट हैंडलर सेट करें। ताकि, जब रूट URL पर GET अनुरोध किया जाए, तो सर्वर उसी निर्देशिका में स्थित "index.html" फ़ाइल भेजकर प्रतिक्रिया दे

 // Setup Route handler app.get('/', (req, res) => { res.sendFile(path.join(__dirname, '', 'index.html')); });

अब, मुख्य भाग आता है! अब हम HTTP GET विधि के साथ '/students' URL के लिए रूट हैंडलर सेट अप करेंगे। यह हैंडलर Postgres डेटाबेस से छात्र डेटा (क्वेरी से) प्राप्त करता है।

 // Route handler for GET student data app.get('/students', (req, res) => { const query = 'SELECT * FROM student;'; pool.query(query, (error, result) => { if (error) { console.error('Error occurred:', error); res.status(500).send('An error occurred while retrieving data from the database.'); } else { const students = result.rows; res.json(students); } }); });

(सुनिश्चित करें कि कोष्ठक ठीक से बंद हों)

अब, आइए उस लाइन को निर्दिष्ट करें जो सर्वर को सुनती है और जब समय समाप्त होता है, तो यह अपने अनुरोधों के साथ प्रतिक्रिया देती है। जैसे ही नीचे दिया गया कमांड सुनता है, यह कंसोल पर एक संदेश लॉग करता है।

 // Listening to Requests app.listen(port, () => { console.log(`Server listening on port ${port}`); });

(डिबगिंग उद्देश्यों के लिए अच्छा)

हो गया! script.js आखिरकार पूरा हो गया है। चलिए आवश्यक विवरण दिखाने के लिए index.html फ़ाइल में बदलाव करते हैं।

 ... <div id='students_list'></div> <script> // Fetch data via requests fetch('/students') .then(response => response.json()) .then(data => { const studentList = data.map( student => `<li> About ${student.name} : ${student.branch} - ${student.semester}th Sem</li>` ).join(''); document.getElementById('students_list').innerHTML = `<ul>${studentList}</ul>`; }) .catch(error => console.error('Error occurred:', error)); </script> ...

वेबसाइट चलाएँ

टर्मिनल खोलें और उस निर्देशिका पर जाएं जहां index.html और script.js संग्रहीत है और निम्नलिखित कमांड चलाएं:

 node script.js

यदि सब कुछ ठीक काम करता है, तो यह "सर्वर पोर्ट 3000 पर सुन रहा है" सामग्री प्रदर्शित करेगा

अब, आपको http://localhost:3000/ पर जाना होगा, जहां आप एक सरल HTML वेबसाइट देख सकते हैं जिसमें आपके द्वारा दर्ज किया गया डेटा प्रदर्शित होगा!

बस! बस!

अब, इन वेब विकास अवधारणाओं का पता लगाने और अधिक दिलचस्प वेबसाइट बनाने के लिए अपनी रचनात्मकता और ज्ञान का उपयोग करें!

मैं जल्द ही एक और ब्लॉग भी जोड़ूंगा जिसमें बताया जाएगा कि रजिस्ट्रेशन सिस्टम कैसे बनाया जाए और इसे कैसे डिज़ाइन किया जाए। अधिक जानकारी के लिए फ़ॉलो करें और जुड़े रहें!

तब तक, कोडिंग करते रहें!