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 indirin NodeJS'yi indirin buradan buradan 1. Adım: Postgres Veritabanını Kurun SQL komutlarını çalıştırmak için CLI olan 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 kullanacağız. psql psql Başlamak için açın ve kimlik bilgilerini girin. psql adında bir veritabanı oluşturun ve ona bağlanın! webapp (Projeniz için istediğiniz ismi kullanabilirsiniz!) CREATE database webapp; \c webapp Bu veritabanındaki tablonuzu komutu ile oluşturmaya başlayın. Komutlar konusunda size rehberlik etmesi için Postgres belgelerini kullanabilirsiniz. Bu gösterim için , ve saklayan bir veritabanı oluşturuyoruz. CREATE TABLE Name Year Branch student (İ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 tablosunu aşağıdaki komutla görüntüleyebiliriz. Student SELECT * FROM student; Şu ana kadar adımları izlediyseniz aşağıdaki tablosunu elde edeceksiniz! student 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> ... 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. students_list Adım 3: Express JS aracılığıyla HTML'yi Postgres'e bağlama Gerekli kütüphaneleri önce veya Terminalinize yükleyin. Command Prompt npm install express body-parser pg HTML ve PostgreSQL'i bağlamak için 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 script.js // Import required modules const express = require('express'); const { Pool } = require('pg'); const path = require('path'); const bodyParser = require('body-parser'); , HTML web uygulamasından gelen istekleri ayrıştırmak için bir arka uç hizmeti olarak çalışır , bağlantı oluşturmak için bir Postgres API'sidir, dizin yollarını yönetmek için yardımcı programlar sağlar POST isteklerinden veri çıkarmak için bir orta yazılımdır express pg path body-parser (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 nesnesinin bir örneğini oluşturarak Postgres'e bağlantı kurun. Postgres kurulumunuza uyacak gerekli değerleri ekleyin. Pool // 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ı ara yazılımı aracılığıyla kaydetmek için işlevler ekleyin. Statik dosyaların sunulacağı kök dizini belirtir express.static() 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! nihayet tamamlandı. Gerekli detayların görüntülenmesi için dosyasında gerekli değişiklikleri yapalım. 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> ... Web Sitesini Çalıştırın Terminal'i açın ve ve depolandığı dizine gidin ve aşağıdaki komutu çalıştırın: index.html script.js 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 adresine gitmeniz gerekiyor! http://localhost:3000/ İş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!
