Sayfada Sonradan EJS Yazma

Womenes

NodeJS ile EJS kullanarak bir website yaptım. Bu websitede belirli butonlar var.

Not kaydetme, not düzenleme, not silme gibi. Bunları ekrana pop-up olarak getirmek istiyorum. Pop-up tasarımlarını hazırladım ama jQuery ile nasıl yapacağımı bilemedim.Aklımdakini örnek verecek olursak;

Not kaydetme

Ekrana bir kutu içinde textarea ve kaydet butonu kesin olarak gelmeli. Bu tarz bir pop-up'u ekrana nasıl yazdırabilirim? En basiti bu olsa gerek.

Not silme

Not silme de ise şöyle bir şey yapmak istiyorum. "Merhaba {İSİM - SOYİSİM}, bu notu silmek istediğinizden emin misin? Bu işlemin geri dönüşü olmayacaaktır." metni olacak ve iki tane buton olacak. Biri onay, diğeri ise reddetme/kapama butonu. Bunda EJS ile veri göndermem ve almam gerekli. Bu ise en zoru.

Not düzenleme de bunların orta hâli diyebiliriz. En zorunu çözersem, diğerlerini de yapabilirim diye düşünüyorum.
Nasıl yapacağımı bilemedim. Daha önce tecrübesi olan veya önerisi, öneri kaynağı olan var mı? EJS bir şekilde yazdırılır bunu biliyorum load fonksiyonu var ama yapmak istediğim yalnızca bu değil. Veri göndermeliyim ve return'dan dönüş alır gibi dönüş almalıyım veya benzer bir durumla bunu halletmeliyim. Pek çok yöntem denedim, kafamda bayaha karıştı.

By_Surmeneli

Womenes

Aşağıdaki örneği inceleyiniz.

NodeJS ve EJS kullanarak belirttiğiniz pop-up işlevlerini gerçekleştirmek için jQuery ile birlikte çalışmanız gerekiyor. Pop-up'ların ekrana yazdırılması, veri gönderilmesi ve alınması gibi işlemleri adım adım açıklayacağım.

Adım 1: HTML ve EJS Şablonları Hazırlama

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Not Yönetimi</title>
    <link rel="stylesheet" href="/styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Not Yönetimi</h1>
    <button id="addNoteBtn">Not Ekle</button>
    <div id="notes">
        <% notes.forEach(function(note) { %>
            <div class="note">
                <h2><%= note.title %></h2>
                <p><%= note.content %></p>
                <button class="editNoteBtn" data-id="<%= note.id %>">Düzenle</button>
                <button class="deleteNoteBtn" data-id="<%= note.id %>" data-name="<%= note.name %>">Sil</button>
            </div>
        <% }); %>
    </div>

    <!-- Not Ekle Pop-up -->
    <div id="addNotePopup" class="popup">
        <textarea id="noteContent"></textarea>
        <button id="saveNoteBtn">Kaydet</button>
        <button class="closePopup">Kapat</button>
    </div>

    <!-- Not Silme Onayı Pop-up -->
    <div id="deleteNotePopup" class="popup">
        <p id="deleteNoteMessage"></p>
        <button id="confirmDeleteBtn">Onayla</button>
        <button class="closePopup">Reddet</button>
    </div>

    <script src="/scripts.js"></script>
</body>
</html>

Adım 2: CSS ile Pop-up Stilleri Ayarlama

styles.css

.popup {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    z-index: 1000;
}

.popup textarea {
    width: 100%;
    height: 100px;
}

.closePopup {
    background-color: red;
    color: white;
    padding: 10px;
    margin-top: 10px;
}

Adım 3: jQuery ile Pop-up'ları Açma ve Kapatma

scripts.js

$(document).ready(function() {
    // Not Ekleme Pop-up'ını Aç
    $('#addNoteBtn').on('click', function() {
        $('#addNotePopup').show();
    });

    // Pop-up'ı Kapat
    $('.closePopup').on('click', function() {
        $(this).parent('.popup').hide();
    });

    // Not Kaydetme
    $('#saveNoteBtn').on('click', function() {
        var noteContent = $('#noteContent').val();
        $.post('/add-note', { content: noteContent }, function(response) {
            // Yeni notu ekrana ekle veya sayfayı yeniden yükle
            location.reload();
        });
    });

    // Not Silme Pop-up'ını Aç
    $('.deleteNoteBtn').on('click', function() {
        var noteId = $(this).data('id');
        var noteName = $(this).data('name');
        $('#deleteNoteMessage').text('Merhaba ' + noteName + ', bu notu silmek istediğinizden emin misiniz? Bu işlemin geri dönüşü olmayacaktır.');
        $('#confirmDeleteBtn').data('id', noteId);
        $('#deleteNotePopup').show();
    });

    // Not Silme Onayı
    $('#confirmDeleteBtn').on('click', function() {
        var noteId = $(this).data('id');
        $.post('/delete-note', { id: noteId }, function(response) {
            // Notu ekrandan kaldır veya sayfayı yeniden yükle
            location.reload();
        });
    });
});

Adım 4: NodeJS Sunucu Yapılandırması

server.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const notes = []; // Basit bir not listesi, gerçekte veritabanı kullanılmalı

app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));

app.get('/', (req, res) => {
    res.render('index', { notes: notes });
});

app.post('/add-note', (req, res) => {
    const note = {
        id: Date.now().toString(),
        content: req.body.content,
        name: 'User' // Sabit isim, gerçekte kullanıcı oturumundan alınmalı
    };
    notes.push(note);
    res.redirect('/');
});

app.post('/delete-note', (req, res) => {
    const noteId = req.body.id;
    const noteIndex = notes.findIndex(note => note.id === noteId);
    if (noteIndex !== -1) {
        notes.splice(noteIndex, 1);
    }
    res.redirect('/');
});

app.listen(3000, () => {
    console.log('Sunucu 3000 portunda çalışıyor');
});

Bu yapılandırma, belirtilen işlevleri gerçekleştirmenizi sağlar. Pop-up'ları ekrana yazdırmak, veri göndermek ve almak için jQuery kullanarak işlevleri sağlamış olduk. EJS ile sunucudan gelen verileri kullanarak dinamik içerikler oluşturduk. Bu temel yapılandırmayı daha karmaşık gereksinimlere göre özelleştirebilirsiniz.

Womenes

By_Surmeneli

Cevap için teşekkürler.

Abi bu aşağıdaki kısım yerine 'popups' diye bir EJS oluştursam. Bunun içine EJS ile if else kullanarak popup yazdırsam.

Popups.ejs'i sayfadan çağırırken data'yı ve hangi popup olduğu hakkında bilgi göndersem. Daha iyi olmaz mı?
Böylece birden fazla popup tek sayfada birleşir. Ve class-id isimlendirmesinde güçlükte çekmem. Sizce olur mu?

<!-- Not Ekle Pop-up -->
    <div id="addNotePopup" class="popup">
        <textarea id="noteContent"></textarea>
        <button id="saveNoteBtn">Kaydet</button>
        <button class="closePopup">Kapat</button>
    </div>
    <!-- Not Silme Onayı Pop-up -->
    <div id="deleteNotePopup" class="popup">
        <p id="deleteNoteMessage"></p>
        <button id="confirmDeleteBtn">Onayla</button>
        <button class="closePopup">Reddet</button>
    </div>

KerimCETINBAS

Womenes bunu htmx ile çok kolay yapabilirsin, modal.ejs yi serverdan response olarak gonderirsin, html de istedigin yere yerlestirebilirsin

https://htmx.org/

By_Surmeneli

Womenes

Evet, popups.ejs dosyasını oluşturarak farklı pop-up'ları tek bir EJS dosyasında toplamak ve bu sayede kod tekrarını azaltır ve yönetilebilirliği artırırsınız. İşte bunu nasıl yapabileceğinizin adım adım açıklaması:

Adım 1: `popups.ejs` Dosyasını Oluşturma

views/popups.ejs dosyasını oluşturun ve aşağıdaki içeriği ekleyin:

<% if (popupType === 'addNote') { %>
    <div id="addNotePopup" class="popup">
        <textarea id="noteContent"></textarea>
        <button id="saveNoteBtn">Kaydet</button>
        <button class="closePopup">Kapat</button>
    </div>
<% } else if (popupType === 'deleteNote') { %>
    <div id="deleteNotePopup" class="popup">
        <p id="deleteNoteMessage"><%= message %></p>
        <button id="confirmDeleteBtn">Onayla</button>
        <button class="closePopup">Reddet</button>
    </div>
<% } %>

Adım 2: `index.ejs` Dosyasını Güncelleme

index.ejs dosyanızda pop-up'ları include komutu ile çağırın. Bu sayede hangi pop-up'ın yükleneceğini dinamik olarak belirleyebilirsiniz. Örneğin:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Not Yönetimi</title>
    <link rel="stylesheet" href="/styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Not Yönetimi</h1>
    <button id="addNoteBtn">Not Ekle</button>
    <div id="notes">
        <% notes.forEach(function(note) { %>
            <div class="note">
                <h2><%= note.title %></h2>
                <p><%= note.content %></p>
                <button class="editNoteBtn" data-id="<%= note.id %>">Düzenle</button>
                <button class="deleteNoteBtn" data-id="<%= note.id %>" data-name="<%= note.name %>">Sil</button>
            </div>
        <% }); %>
    </div>

    <!-- Pop-up'ları Burada Dahil Et -->
    <% include popups %>

    <script src="/scripts.js"></script>
</body>
</html>

Adım 3: Sunucu Tarafını Güncelleme

Sunucu tarafında hangi pop-up'ın gösterileceğini belirlemek için res.render işlevine popupType ve diğer gerekli bilgileri gönderin:

app.get('/', (req, res) => {
    res.render('index', { notes: notes, popupType: null, message: null });
});

app.post('/add-note', (req, res) => {
    const note = {
        id: Date.now().toString(),
        content: req.body.content,
        name: 'User' // Sabit isim, gerçekte kullanıcı oturumundan alınmalı
    };
    notes.push(note);
    res.redirect('/');
});

app.post('/delete-note', (req, res) => {
    const noteId = req.body.id;
    const noteIndex = notes.findIndex(note => note.id === noteId);
    if (noteIndex !== -1) {
        notes.splice(noteIndex, 1);
    }
    res.redirect('/');
});

Adım 4: jQuery Kodunu Güncelleme

jQuery kodunu pop-up'ların gösterilmesi için güncelleyin. Örneğin, data-popup-type ile hangi pop-up'ın gösterileceğini belirleyin:

$(document).ready(function() {
    // Not Ekleme Pop-up'ını Aç
    $('#addNoteBtn').on('click', function() {
        $.get('/get-popup', { popupType: 'addNote' }, function(response) {
            $('body').append(response);
            $('#addNotePopup').show();
        });
    });

    // Pop-up'ı Kapat
    $('body').on('click', '.closePopup', function() {
        $(this).parent('.popup').hide().remove();
    });

    // Not Kaydetme
    $('body').on('click', '#saveNoteBtn', function() {
        var noteContent = $('#noteContent').val();
        $.post('/add-note', { content: noteContent }, function(response) {
            // Yeni notu ekrana ekle veya sayfayı yeniden yükle
            location.reload();
        });
    });

    // Not Silme Pop-up'ını Aç
    $('body').on('click', '.deleteNoteBtn', function() {
        var noteId = $(this).data('id');
        var noteName = $(this).data('name');
        $.get('/get-popup', { popupType: 'deleteNote', message: 'Merhaba ' + noteName + ', bu notu silmek istediğinizden emin misiniz? Bu işlemin geri dönüşü olmayacaktır.' }, function(response) {
            $('body').append(response);
            $('#deleteNotePopup').show();
            $('#confirmDeleteBtn').data('id', noteId);
        });
    });

    // Not Silme Onayı
    $('body').on('click', '#confirmDeleteBtn', function() {
        var noteId = $(this).data('id');
        $.post('/delete-note', { id: noteId }, function(response) {
            // Notu ekrandan kaldır veya sayfayı yeniden yükle
            location.reload();
        });
    });
});

Adım 5: Yeni Bir GET Endpoint Oluşturma

Pop-up'ları dinamik olarak çekmek için yeni bir GET endpoint oluşturun:

app.get('/get-popup', (req, res) => {
    const { popupType, message } = req.query;
    res.render('popups', { popupType: popupType, message: message });
});

Bu yapılandırma ile pop-up'ları dinamik olarak yükleyebilir ve yönetebilirsiniz. Tek bir EJS dosyasında farklı pop-up'ları tanımlayarak, kod tekrarını azaltır ve bakımını kolaylaştırmış olursunuz.