Bu Node.js Hikmeti Nasıl Çözülecek? - Sayfa 2

27-04-2024, 14:08:49

#10

BilWeb

kazimolmez adlı üyeden alıntı: mesajı görüntüle

Hocam nodejs'nin bi client side olanı bir de server side olanı var. Server side olanında dediğiniz gibi backend kodları görünmez ama onu her sunucuda çalıştıramazsınız. Vercel gibi firmalar var bu işi yapan inceleyebilirsin.

Sunucuda CWP kurulu ve Nodejs desteği var.

DarknessHero adlı üyeden alıntı: mesajı görüntüle

Evet doğrudur hocam. Linkini verdiğim örneği çalıştırdığınız kullanıcı Hello World yazısından başka hiçbir şey göremez başka hiçbir kod kullanıca iletilmez. Extra olarak react, vue gibi frameworkleri de inceleyebilirsiniz. Js frameworkleri arasında bu olay server side rendering olarak geçer yani istekler ve kullanıcının göreceği html kodları sunucu tarafında işlenir aynı phpde olduğu gibi. Alternatif react, vue gibi js kütüphanelerinde hem server side rendering hem client side rendering yani js dosyalarının kullanıcıya iletildiği js kodlarının kullanıcı tarayıcısında çalıştığı senaryolar da vardır. İlerleyen zamanda onları da inceleyebilirsiniz. Yayın bir kullanım örneği olarak backend kısmının yani veritabanıyla iletişim kısmının php ya da express.js ile api olarak, frontend kısmının react, vue gibi kütüphanerle client side olarak yapılmasıdır. Bunların hepsini görüp deneyimledikten sonra php çok sıkıcı hale gelmeye başlıyor.

Googleda ufak bir "made with nodejs", "made with react" gibi aramalar yaptığınızda global ölçekte php den vazgeçildiğini en azından frontend kısmında vazgeçildiğini backend kısmında ise çok daha performanslı genelde javascript ve python tabanlı uygulamalar geliştirildiğini görebilirsiniz. Çoğu örnekte tüm stack yapısı veritabanı için ayrı, backend için, frontend için hangi kütüphane ve diller kullandığı yazıyor. Yenilikçi kalmak, global ölçekte rekabet edebilmek için doğru yoldasınız onu söyleyebilirim.

Çok teşekkür ederim, bugün tekrar denemeler yapacağım. JS'yi sunucu taraflı kullanabileceksem elbette PHP ile yollarım ayrılır. Sizden son ricam olarak bir soru daha sorayım.

Bir projemde index'te script.js dosyasını çekiyorum script src= şeklinde. Node.js ile bu tür işlemleri nasıl yapabiliriz?
27-04-2024, 23:10:49

#11

DarknessHero

BilWeb adlı üyeden alıntı: mesajı görüntüle

Sunucuda CWP kurulu ve Nodejs desteği var.

Çok teşekkür ederim, bugün tekrar denemeler yapacağım. JS'yi sunucu taraflı kullanabileceksem elbette PHP ile yollarım ayrılır. Sizden son ricam olarak bir soru daha sorayım.

Bir projemde index'te script.js dosyasını çekiyorum script src= şeklinde. Node.js ile bu tür işlemleri nasıl yapabiliriz?

Kullandığınız yapıya bağlı bu hocam. Kullanım senaryosu verirseniz net anlatabilirim. Ama bir projeye script src ile nodejs uygulamasını dahil etmekten bahsediyorsanız o şekilde çalışmıyor.

28-04-2024, 01:55:55

#12

DarknessHero adlı üyeden alıntı: mesajı görüntüle

Kullandığınız yapıya bağlı bu hocam. Kullanım senaryosu verirseniz net anlatabilirim. Ama bir projeye script src ile nodejs uygulamasını dahil etmekten bahsediyorsanız o şekilde çalışmıyor.

Mesela şu sayfayı node.js ile nasıl çalıştırabiliriz?

<!DOCTYPE html>
<html>
<head>
    <title>Hesap Makinesi</title>
</head>
<body>
    <h1>Hesap Makinesi</h1>
    <label for="sayi1">Sayı 1:</label>
    <input type="text" id="sayi1"><br><br>

    <label for="operator">İşlem:</label>
    <select id="operator">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select><br><br>

    <label for="sayi2">Sayı 2:</label>
    <input type="text" id="sayi2"><br><br>

    <button onclick="hesapla()">Hesapla</button><br><br>

    <div id="sonuc"></div>

</body>
</html>

<script>
// Hesaplama fonksiyonu
function hesapla() {
    let sayi1 = parseFloat(document.getElementById('sayi1').value);
    let sayi2 = parseFloat(document.getElementById('sayi2').value);
    let operator = document.getElementById('operator').value;
    let sonuc;

    if (operator === '+') {
        sonuc = sayi1 + sayi2;
    } else if (operator === '-') {
        sonuc = sayi1 - sayi2;
    } else if (operator === '*') {
        sonuc = sayi1 * sayi2;
    } else if (operator === '/') {
        sonuc = sayi1 / sayi2;
    }

    document.getElementById('sonuc').innerHTML = 'Sonuç: ' + sonuc;
}

// HTML'de button click event'i ile çağrılacak

</script>

28-04-2024, 02:19:01

#13

DarknessHero

BilWeb adlı üyeden alıntı: mesajı görüntüle

Mesela şu sayfayı node.js ile nasıl çalıştırabiliriz?

<!DOCTYPE html>
<html>
<head>
    <title>Hesap Makinesi</title>
</head>
<body>
    <h1>Hesap Makinesi</h1>
    <label for="sayi1">Sayı 1:</label>
    <input type="text" id="sayi1"><br><br>

    <label for="operator">İşlem:</label>
    <select id="operator">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select><br><br>

    <label for="sayi2">Sayı 2:</label>
    <input type="text" id="sayi2"><br><br>

    <button onclick="hesapla()">Hesapla</button><br><br>

    <div id="sonuc"></div>

</body>
</html>

<script>
// Hesaplama fonksiyonu
function hesapla() {
    let sayi1 = parseFloat(document.getElementById('sayi1').value);
    let sayi2 = parseFloat(document.getElementById('sayi2').value);
    let operator = document.getElementById('operator').value;
    let sonuc;

    if (operator === '+') {
        sonuc = sayi1 + sayi2;
    } else if (operator === '-') {
        sonuc = sayi1 - sayi2;
    } else if (operator === '*') {
        sonuc = sayi1 * sayi2;
    } else if (operator === '/') {
        sonuc = sayi1 / sayi2;
    }

    document.getElementById('sonuc').innerHTML = 'Sonuç: ' + sonuc;
}

// HTML'de button click event'i ile çağrılacak

</script>

Verdiğiniz örnek için nodejs kullanmaya gerek yok tabi ama mantığı anlamanız açısından
index.html dosyası ana klasörde public içinde olması lazım

<!DOCTYPE html>
<html>
<head>
<title>Hesap Makinesi</title>
</head>
<body>
<h1>Hesap Makinesi</h1>
<label for="sayi1">Sayı 1:</label>
<input type="text" id="sayi1"><br><br>

<label for="operator">İşlem:</label>
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select><br><br>

<label for="sayi2">Sayı 2:</label>
<input type="text" id="sayi2"><br><br>

<button onclick="hesapla()">Hesapla</button><br><br>

<div id="sonuc"></div>

</body>
</html>

<script>
async function hesapla() {
try {
let sayi1 = parseFloat(document.getElementById('sayi1').value);
let sayi2 = parseFloat(document.getElementById('sayi2').value);
let operator = document.getElementById('operator').value;
const response = await fetch('/hesapla', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
sayi1: sayi1,
sayi2: sayi2,
operator:operator
})
});

const data = await response.json();
document.getElementById('sonuc').innerHTML = 'Sonuç: ' + JSON.stringify(data.sonuc);
} catch (error) {
console.error('Hata:', error);
}
}


</script>

hesap.js

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');

const app = express();

app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

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

app.post('/hesapla', (req, res) => {
let sayi1 = parseFloat(req.body.sayi1);
let sayi2 = parseFloat(req.body.sayi2);
let operator = req.body.operator;
let sonuc;

if (operator === '+') {
sonuc = sayi1 + sayi2;
} else if (operator === '-') {
sonuc = sayi1 - sayi2;
} else if (operator === '*') {
sonuc = sayi1 * sayi2;
} else if (operator === '/') {
sonuc = sayi1 / sayi2;
}

res.json({"sonuc":sonuc});
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Sunucu ${PORT} portunda çalışıyor...`));

Klasör yapısı bu şekilde olmalı

express,path,body-parser kütüphanelerini yüklemeniz gerekli.
localhost:3000 üzerinden erişebilirsiniz.
index.html dosya olarak okunup
app.get('/'...) kısmında kullanıcıya döndürülüyor.
Javascript fonksiyonu post isteği atıyor bu hesap.js içindeki app.post('/hesapla' ...) kısmında hesaplanıp kullanıcıya sonuç döndürülüyor hesaplama fonksiyonu kullanıcıya gösterilmiyor sadece sonuç dönüyor.

28-04-2024, 12:15:09

#14

BilWeb

DarknessHero adlı üyeden alıntı: mesajı görüntüle

Verdiğiniz örnek için nodejs kullanmaya gerek yok tabi ama mantığı anlamanız açısından
index.html dosyası ana klasörde public içinde olması lazım

<!DOCTYPE html>
<html>
<head>
<title>Hesap Makinesi</title>
</head>
<body>
<h1>Hesap Makinesi</h1>
<label for="sayi1">Sayı 1:</label>
<input type="text" id="sayi1"><br><br>

<label for="operator">İşlem:</label>
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select><br><br>

<label for="sayi2">Sayı 2:</label>
<input type="text" id="sayi2"><br><br>

<button onclick="hesapla()">Hesapla</button><br><br>

<div id="sonuc"></div>

</body>
</html>

<script>
async function hesapla() {
try {
let sayi1 = parseFloat(document.getElementById('sayi1').value);
let sayi2 = parseFloat(document.getElementById('sayi2').value);
let operator = document.getElementById('operator').value;
const response = await fetch('/hesapla', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
sayi1: sayi1,
sayi2: sayi2,
operator:operator
})
});

const data = await response.json();
document.getElementById('sonuc').innerHTML = 'Sonuç: ' + JSON.stringify(data.sonuc);
} catch (error) {
console.error('Hata:', error);
}
}


</script>

hesap.js

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');

const app = express();

app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

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

app.post('/hesapla', (req, res) => {
let sayi1 = parseFloat(req.body.sayi1);
let sayi2 = parseFloat(req.body.sayi2);
let operator = req.body.operator;
let sonuc;

if (operator === '+') {
sonuc = sayi1 + sayi2;
} else if (operator === '-') {
sonuc = sayi1 - sayi2;
} else if (operator === '*') {
sonuc = sayi1 * sayi2;
} else if (operator === '/') {
sonuc = sayi1 / sayi2;
}

res.json({"sonuc":sonuc});
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Sunucu ${PORT} portunda çalışıyor...`));

Klasör yapısı bu şekilde olmalı

Çok teşekkür ederim değerli katkılarınız için. Evet yapmak istediğim şeyi çok iyi anladınız. "Hassas kodları" dışarı göstermemek. Buradaki basit bir hesap makinesi. Velev ki hesap makinesi değil de çok hassas bir fonksiyon farz ederek örneği vermek istedim.

Aşama aşama yaptıklarımı anlatayım. Node.js kurdum ve uygulama oluşturdum.

Ardından express eklentisini kurdum Node.js'nin kendi NPM aracıyla.

Dosya ve klasör yapısını oluşturdum. index'imi public klasörüne koydum.

public/index.html dosyasını açtım. Nginx + Apache 503 hatası verdi. Sadece apache olarak değiştirdim sayfa açıldı... Açıldı ama ...

Hesapla butonu hiçbir sonuç döndürmedi.

Sukutu hayale uğradım. Bu kadar zor öğrenebileceğim aklıma gelmezdi