Deltasvr
Centipat
- Katılım
- 13 Nisan 2024
- Mesajlar
- 98
- Çözümler
- 5
Normalde sadece HTML ve CSS dosyaları üzerinde uğraşırım fakat bugün bir proje için araya JS'de girdi. Pek fazla bilgim olmadığı için yapay zekadan destek alarak yapmaya çalıştım fakat karakter.html dosyasına atadığım CSS dosyası sadece HTML'i açtığımda yükleniyor. Node.js üzerinden Node server.js yaparak bir localhost başlattığımda sadece karakter .html dosyası yükleniyor ve CSS dosyası yüklenmiyor.
Sorunu
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter Başvuru Formu</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<h1>Karakter Başvuru Formu</h1>
<form action="/submit" method="POST">
<div class="form-group">
<label for="name">Adınız:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="age">Yaşınız:</label>
<input type="number" id="age" name="age" required>
</div>
<div class="form-group">
<label for="description">Karakter Tanımı:</label>
<textarea id="description" name="description" rows="5" required></textarea>
</div>
<button type="submit">Başvuruyu Gönder</button>
</form>
</div>
</body>
</html>
JavaScript:
import express from 'express';
import path from 'path';
import bodyParser from 'body-parser';
import fetch from 'node-fetch'; // Import şeklinde yazılır.
import { fileURLToPath } from 'url';
// __dirname için ES Module'de alternatif çözüm.
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const app = express();
// Body-parser middleware.
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
// Statik dosyalar için public klasörünü kullanacağız.
app.use(express.static(path.join(__dirname, 'css')));
app.use(express.static(path.join(__dirname, 'fontawesome-5.5')));
app.use(express.static(path.join(__dirname, 'img')));
app.use(express.static(path.join(__dirname, 'js')));
app.use(express.static(path.join(__dirname, 'magnific-popup')));
app.use(express.static(path.join(__dirname, 'node_modules')));
app.use(express.static(path.join(__dirname, 'slick')));
// Anasayfa (Başvuru formu)
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'karakter.html'));
});
// Formdan gelen başvuruyu işle.
app.post('/submit', async (req, res) => {
const { name, age, description } = req.body;
// Başvuru verilerini konsola yazdır.
console.log('Başvuru Alındı:');
console.log(`Ad: ${name}`);
console.log(`Yaş: ${age}`);
console.log(`Tanım: ${description}`);
// Discord webhook URL'niz.
const webhookURL = 'YOUR_DISCORD_WEBHOOK_URL';
// Webhook mesajı.
const webhookData = {
content: `Yeni başvuru!\nAd: ${name}\nYaş: ${age}\nKarakter Tanımı: ${description}`
};
// Webhook'a veri gönder.
try {
await fetch(webhookURL, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(webhookData)
});
console.log('Webhook başarılı bir şekilde gönderildi!');
} catch (error) {
console.log('Webhook gönderilemedi:', error);
}
// Başvuru sonrası mesaj.
res.send('<h1>Başvurunuz başarıyla gönderildi!</h1>');
});
// Sunucu başlatma.
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Sunucu ${PORT} portunda çalışıyor...`);
});Sorunu
app.use(express.static(path.join(__dirname, 'slick'))); kodunu app.use('/css', express.static(path.join(__dirname, 'css'))); şeklinde düzenleyerek <link rel="stylesheet" href="css/styles.css"> kodunuda <link rel="stylesheet" href="/css/styles.css"> şeklinde düzenleyerek çözdüm.
Son düzenleme:
