2,504 okumalar

Postgres Veritabanı Bağlantısı ile Basit Bir HTML Web Sitesi Oluşturun

ile Abel Roy6m2024/05/05

Çok uzun; Okumak

Bu eğitim, JavaScript (Node JS, Express JS) kullanarak Postgres veritabanına bağlı bir HTML web sitesi oluşturma konusunda size rehberlik eder. Veritabanının kurulmasını, HTML yapısının oluşturulmasını, Express JS ile bağlantı kurulmasını ve Web sayfasında görüntülenmek üzere Postgres'ten veri getirilmesini kapsar.

featured image - Postgres Veritabanı Bağlantısı ile Basit Bir HTML Web Sitesi Oluşturun

Hazır Olun, Geleceğin Web Geliştiricileri! Postgres Veritabanına bağlanan basit bir HTML web sitesi oluşturalım.

Bu örnekte, ara yazılım işlevleri için JavaScript (Node JS ve Express JS) kullanacağız. Portföyünüzü sergilemek, bir blog çalıştırmak veya web geliştirmeyle ilgili mini bir projeyi tamamlamak istiyorsanız, web geliştirme hala talep gören bir beceridir.

İlerideki Öğrenme Yolu

Sıfırdan basit bir HTML web sitesi oluşturma sürecine dalacağız. API isteklerini işlemek için ara yazılım olarak JavaScript kullanarak Postgres veritabanını nasıl entegre edeceğimizi keşfedeceğiz. İşleri biraz daha renklendirmek için web sayfasını tasarlamak için Bootstrap5'i de kullanabiliriz! Ama bu farklı bir blogda ele alınacak.

Kullanılan Teknolojiler:

HTML5
Postgres (Veritabanı)
Ekspres JS (Arka uç)

Önkoşullar

Postgres'in indirildiğinden ve kullanıma hazır olduğundan emin olun. Ayrıca Express JS, Body Parser ve Postgres API'leri gibi npm paketlerini yüklemek için Node JS'yi indirin. Postgres'i buradan indirin NodeJS'yi buradan indirin

1. Adım: Postgres Veritabanını Kurun

SQL komutlarını çalıştırmak için CLI olan psql veya pgAdmin (önceden yüklenmiş olarak gelir) gibi bir grafik kullanıcı arayüzünü kullanarak yeni bir Postgres Veritabanı oluşturun. Bu gösterimde veritabanını oluşturmak için psql kullanacağız.

Başlamak için psql açın ve kimlik bilgilerini girin.

webapp adında bir veritabanı oluşturun ve ona bağlanın! (Projeniz için istediğiniz ismi kullanabilirsiniz!)

 CREATE database webapp;

 \c webapp

Bu veritabanındaki tablonuzu CREATE TABLE komutu ile oluşturmaya başlayın. Komutlar konusunda size rehberlik etmesi için Postgres belgelerini kullanabilirsiniz. Bu gösterim için Name , Year ve Branch saklayan bir student veritabanı oluşturuyoruz. (İsterseniz daha fazla özellik ekleyin)

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

 \d student

Artık INSERT komutu ile bazı kukla verileri tabloya yüklemeye başlayabiliriz.

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

İşimiz bittiğinde, kukla verileri ekleyerek Student tablosunu aşağıdaki komutla görüntüleyebiliriz.

 SELECT * FROM student;

Şu ana kadar adımları izlediyseniz aşağıdaki student tablosunu elde edeceksiniz!

Adım 2: Basit bir HTML Web Sitesi oluşturun

Basit bir web sitesi için Genel HTML kodu aşağıda verilmiştir:

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

İhtiyaçlarımıza göre özel div bloklarını eklemeye başlayalım:

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

students_list div bloğu veritabanına kayıtlı öğrencilerin listesini göstermek içindir. Verileri Postgres'ten almak ve blokta sergilemek için Express JS'yi kullanacağız.

Adım 3: Express JS aracılığıyla HTML'yi Postgres'e bağlama

Gerekli kütüphaneleri önce Command Prompt veya Terminalinize yükleyin.

 npm install express body-parser pg

HTML ve PostgreSQL'i bağlamak için script.js dosyasını oluşturmaya başlayalım. Öncelikle istekleri işlemek ve bağlantı kurmak için gerekli kütüphaneleri içe aktarmamız gerekiyor

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

express , HTML web uygulamasından gelen istekleri ayrıştırmak için bir arka uç hizmeti olarak çalışır pg , bağlantı path oluşturmak için bir Postgres API'sidir, dizin yollarını yönetmek için yardımcı programlar sağlar body-parser POST isteklerinden veri çıkarmak için bir orta yazılımdır (Onları anlayacağız) ilerledikçe derinlemesine)

Şimdi ekspres uygulama bağlantısı oluşturalım ve ayrıca sunucunun dinleyeceği portu tanımlayalım.

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

Pool nesnesinin bir örneğini oluşturarak Postgres'e bağlantı kurun. Postgres kurulumunuza uyacak gerekli değerleri ekleyin.

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

Statik dosyaları express.static() ara yazılımı aracılığıyla kaydetmek için işlevler ekleyin. Statik dosyaların sunulacağı kök dizini belirtir

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

Şimdi uygulamadan gönderilen HTML isteklerini ayrıştırmamız gerekiyor. Basit bir ifadeyle kullanıcılardan formlar veya yüklemeler gibi verileri almak için kullanılan bir ara yazılımdır.

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

(Kullanıcılardan girdi almayı planlamıyorsanız yukarıdaki satırı eklemeyin. Bir sonraki bloga bir kayıt formu ekleyeceğiz ve bu nedenle gövde ayrıştırıcıya ihtiyacımız var)

Kök URL ('/') için bir Rota işleyicisi ayarlayın. Böylece kök URL'ye GET isteği yapıldığında sunucu aynı dizinde bulunan "index.html" dosyasını göndererek yanıt verir.

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

Şimdi asıl kısım geliyor! Şimdi '/students' URL'si için HTTP GET yöntemiyle bir rota işleyicisi ayarlayacağız. Bu işleyici, öğrenci verilerini (sorgudan) Postgres Veritabanından alır.

 // 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); } }); });

(Desteklerin düzgün kapatıldığından emin olun)

Şimdi sunucuyu dinleyen ve zamanı geldiğinde istekleriyle cevap verecek olan hattı belirtelim. Aşağıdaki komut dinledikçe konsola bir mesaj kaydeder.

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

(Hata ayıklama amaçları için iyidir)

Tamamlamak! script.js nihayet tamamlandı. Gerekli detayların görüntülenmesi için index.html dosyasında gerekli değişiklikleri yapalım.

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

Web Sitesini Çalıştırın

Terminal'i açın ve index.html ve script.js depolandığı dizine gidin ve aşağıdaki komutu çalıştırın:

 node script.js

Her şey yolunda giderse, "3000 numaralı bağlantı noktasında sunucu dinleniyor" içeriğini görüntülemelidir.

Şimdi, girdiğiniz verileri gösteren basit bir HTML web sitesini görebileceğiniz http://localhost:3000/ adresine gitmeniz gerekiyor!

İşte! Bu kadar!

Şimdi bu web geliştirme kavramlarını keşfetmek ve daha ilgi çekici web siteleri oluşturmak için yaratıcılığınızı ve bilginizi kullanın!

Kayıt sisteminin nasıl oluşturulacağı ve nasıl tasarlanacağı konusunda da yakında bir blog daha ekleyeceğim. Daha fazlası için takip edin ve takipte kalın!

O zamana kadar Kodlamaya Devam Edin!