1,749 পড়া

Postgres ডাটাবেস সংযোগ সহ একটি সাধারণ HTML ওয়েবসাইট তৈরি করুন

দ্বারা Abel Roy6m2024/05/05

অতিদীর্ঘ; পড়তে

এই টিউটোরিয়ালটি জাভাস্ক্রিপ্ট (নোড জেএস, এক্সপ্রেস জেএস) ব্যবহার করে পোস্টগ্রেস ডাটাবেসের সাথে সংযুক্ত একটি এইচটিএমএল ওয়েবসাইট তৈরি করার মাধ্যমে আপনাকে গাইড করে। এতে ডাটাবেস সেট আপ করা, এইচটিএমএল স্ট্রাকচার তৈরি করা, এক্সপ্রেস জেএস-এর সাথে সংযোগ করা এবং ওয়েবপেজে প্রদর্শনের জন্য পোস্টগ্রেস থেকে ডেটা আনা ইত্যাদি অন্তর্ভুক্ত রয়েছে।

featured image - Postgres ডাটাবেস সংযোগ সহ একটি সাধারণ HTML ওয়েবসাইট তৈরি করুন

প্রস্তুত হোন, ভবিষ্যত ওয়েব ডেভেলপার! আসুন একটি সাধারণ HTML ওয়েবসাইট তৈরি করি যা একটি Postgres ডেটাবেসের সাথে সংযোগ করে।

এই উদাহরণের জন্য, আমরা এর মিডলওয়্যার কার্যকারিতার জন্য জাভাস্ক্রিপ্ট (নোড জেএস, এবং এক্সপ্রেস জেএস) ব্যবহার করব। আপনি আপনার পোর্টফোলিও প্রদর্শন করতে চান, একটি ব্লগ চালাতে চান, বা ওয়েব ডেভেলপমেন্টের জন্য একটি মিনি প্রকল্প সম্পূর্ণ করতে চান না কেন, ওয়েব ডেভেলপমেন্ট একটি দক্ষতা যা এখনও চাহিদা রয়েছে।

সামনে শেখার পথ

আমরা স্ক্র্যাচ থেকে একটি সাধারণ HTML ওয়েবসাইট তৈরির প্রক্রিয়ার মধ্যে ডুব দেব। এপিআই অনুরোধগুলি পরিচালনা করতে মিডলওয়্যার হিসাবে জাভাস্ক্রিপ্ট ব্যবহার করে আমরা পোস্টগ্রেস ডাটাবেসকে কীভাবে সংহত করতে পারি তা অন্বেষণ করব। জিনিসগুলিকে মশলাদার করার জন্য, আমরা ওয়েবপেজ ডিজাইন করতে Bootstrap5 ব্যবহার করতে পারি! কিন্তু যে একটি ভিন্ন ব্লগে আচ্ছাদিত করা হবে.

ব্যবহৃত প্রযুক্তি:

HTML5
পোস্টগ্রেস (ডাটাবেস)
এক্সপ্রেস জেএস (ব্যাকএন্ড)

পূর্বশর্ত

নিশ্চিত করুন যে Postgres ডাউনলোড করা হয়েছে এবং ব্যবহারের জন্য প্রস্তুত। এছাড়াও, এক্সপ্রেস জেএস, বডি পার্সার এবং পোস্টগ্রেস এপিআই-এর মতো এনপিএম প্যাকেজ ইনস্টল করার জন্য নোড জেএস ডাউনলোড করুন। পোস্টগ্রেস ডাউনলোড করুন এখানে NodeJS ডাউনলোড করুন

ধাপ 1: পোস্টগ্রেস ডেটাবেস সেটআপ করুন

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 ওয়েবসাইট তৈরি করুন

নীচে একটি সাধারণ ওয়েবসাইটের জন্য বয়লারপ্লেট এইচটিএমএল কোড রয়েছে:

 <!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>

আমাদের প্রয়োজন অনুযায়ী কাস্টম ডিভ ব্লক যোগ করা শুরু করা যাক:

 ... <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: Express JS এর মাধ্যমে পোস্টগ্রেসে এইচটিএমএল সংযুক্ত করা

আপনার 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 একটি ব্যাকএন্ড পরিষেবা হিসাবে কাজ করে, এইচটিএমএল ওয়েবঅ্যাপ থেকে অনুরোধগুলি পার্স করার জন্য 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 সেটআপ মেলে প্রয়োজনীয় মান যোগ করুন।

 // 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('')));

এখন, আমাদের অ্যাপ থেকে পাঠানো এইচটিএমএল অনুরোধ পার্স করতে হবে। সহজ কথায়, এটি একটি মিডলওয়্যার যা ব্যবহারকারীদের কাছ থেকে ডেটা গ্রহণ করতে ব্যবহৃত হয়, যেমন ফর্ম বা আপলোড

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

(আপনি যদি ব্যবহারকারীদের কাছ থেকে ইনপুট নেওয়ার পরিকল্পনা না করেন তবে উপরের লাইনটি যোগ করবেন না। আমরা পরবর্তী ব্লগে একটি নিবন্ধন ফর্ম যোগ করব এবং সেজন্য আমাদের বডি-পার্সারের প্রয়োজন)

রুট ইউআরএল ('/') এর জন্য একটি রুট হ্যান্ডলার সেট আপ করুন। যাতে, যখন রুট ইউআরএলে একটি GET অনুরোধ করা হয়, সার্ভার একই ডিরেক্টরিতে অবস্থিত "index.html" ফাইলটি পাঠিয়ে প্রতিক্রিয়া জানায়।

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

এখন, মূল অংশ আসে! আমরা এখন HTTP GET পদ্ধতির সাথে '/students' URL-এর জন্য একটি রুট হ্যান্ডলার সেট আপ করব। এই হ্যান্ডলার পোস্টগ্রেস ডাটাবেস থেকে শিক্ষার্থীদের ডেটা (কোয়েরি থেকে) পুনরুদ্ধার করে।

 // 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 ওয়েবসাইট দেখতে পাবেন যা আপনার প্রবেশ করানো ডেটা প্রদর্শন করে!

ভয়লা ! এটাই!

এখন, এই ওয়েব বিকাশের ধারণাগুলি অন্বেষণ করতে এবং আরও আকর্ষণীয় ওয়েবসাইট তৈরি করতে আপনার সৃজনশীলতা এবং জ্ঞান ব্যবহার করুন!

আমি কীভাবে একটি নিবন্ধন ব্যবস্থা তৈরি করতে হয় এবং কীভাবে এটি ডিজাইন করতে হয় সে সম্পর্কে আরও একটি ব্লগ যুক্ত করব, যা শীঘ্রই আসছে। আরো জন্য অনুসরণ করুন এবং সাথে থাকুন!

ততক্ষণ পর্যন্ত কোডিং রাখুন!