SmartEdu Ortam Hazırlama

Hazır dosyaları temp içine aldık.

konsola:

npm init

npm i express

app.js içine:
express import:

const express = require('express'); 
const app = express();
                  

const port = 3000; 
app.listen(port, ()=>{ 
    console.log(`App started on port ${port}`)
})
                  

konsola:

npm i --save-dev nodemon

npm i -D nodemon

package.json da "scripts" alanında test silinir ve
"start": "nodemon app.js" ile nodemon üzerinden app.js start komutuna işlenir.

daha önceki projeden .prettierrc dosyası bu projeye kopyalanır. Bu sayede her sağ tıklayıp format document dediğimizde .js kod düzenlemesi daha düzenli görünür.

git reposite oluşturuldu ve github ile bağlandı.

HTTP Status Codes (HTTP Yanıt Durumu Kodları)

developer.mozilla.org/en-US/docs/Web/HTTP/Status

HTTP status code o an yapılan işlem hakkında bilgi verir.

Sık Kullanılan Durum Kodları

• 200 - OK
• 201 - Created
• 404 - Not found
• 500 - Internal Server Error
• 400 - Bad Request
• 401 - Unauthorized
• 403 - Forbidden
• 501 - Not Implemented

örnek html status gönderimi:

app.get('/', (req, res) => { 
    res.status(200).send('index sayfası'); 
});
                    

Template Engine

Konsola:

npm i ejs

app js Template Engine alanına:

app.set("view engine", "ejs");

app.use(express.static("public"));

kök dizine public klasörü oluşturulur ve tempin içindeki .html harici içine eklenir.

kök dizine views klasörü oluşturulur ve .html dosyalar içine alınır. uzantılar .ejs ye çevirilir.

views içine partials klasörü oluşturulur. Bu alanda tüm sayfalarda ortak olacak kısımlar tutulur.
_header.ejs
_navigation.ejs
_footer ejs gibi.
Bunların içine tüm templatelerde ortak olacaklar atanır. sonra buradan çekilir. Bunun için:

<%- include('partials/_header'); -%>

partials içindeki linkler düzenlenir.

Navbar üzerinden aktif olan sayfanın linkini farklı göstermek için active klası kullanılır. Bunu dinamik olarak yapmak için önce page_name bilgisi app.js içinden response içinde gönderilir. Sonra bu bilgi _navigation.ejs içinde yakalanır ve koşul true ise active olarak dönmesi sağlanır.

app.get('/', (req, res) => { 
    res.status(200).render('index', { 
        page_name: "index"
    });
});
                    

<li class="nav-item <%= page_name === 'index' && 'active' %>"><a class="nav-link" href="/">Home</a></li> 
<li class="nav-item <%= page_name === 'about' && 'active' %>"><a class="nav-link" href="/about">About Us</a></li>
                    

Routing

ileri okuma için tıklayınız.

controllers/pageController.js oluşturuldu.

app.js router alanında router fonksiyonların içindeki req-res fonksiyonlar pageController.js içine taşınır ve buradan export edilir.

routes/pageRouter.js içine pageController require edilir. Bu kısımda route işlemi yapılacağından express modülü de çağırılır.

pageController.js:

const express = require('express') 
const pageController = require('../controllers/pageController') // ile import işlemleri yapılır. 

const router = express.Router() // ile Router() fonksiyonu değişkene atanır. 

router.route('/').get(pageController.getIndexPage) 
router.route('/about').get(pageController.getAboutPage) // ile route işlemleri tanımlanır. 

module.exports = router 
                    

app.js içine router modülü çağırılır. router alanı aşağıdaki gibi düzenlenir:

app.use('/', pageRoute);

Kurs Modeli

DB Bağlantı

konsola:

npm i mongoose

app.js içine mongoose require edilir.

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/smartedu-db').then(() => console.log('DB Connected!'));

Modeller

Dinamik olmasını istediğimiz veriler için model oluşturulur.

Model adları genelde büyük yazılır.

models/Course.js oluşturuldu ve içine mongoose import edildi.

const mongoose = require('mongoose'); 
const Schema = mongoose.Schema;
        
    
const CourseSchema = new Schema({ 
    name: { 
        type: String, // veri tipi string. 
        unique: true, // eşsiz 
        required: true, // doldurulması zorunlu. 
    }, 
    description: { 
        type: String, 
        required: true, 
        trim: true, // Baştaki ve sondaki boşlukları görmezden gel. 
    }
    createdAt: { 
        type: Date, // veri tipi tarih. 
        default: Date.now(), // varsayılan değer olarak işlemin yapıldığı tarihi alır. 
    },
});
                    

const Course = mongoose.model('Course', CourseSchema); // ile model oluşturuldu 
module.exports = Course; // ile export edildi.
                    

Modeli Kullanmak

controllers/courseController.js dosyası oluşturuldu. İçine:

exports.createCourse = async (req, res) => { // ile asenkron createCourse fonksiyonu export edilir. 
    try{ // işlemde hata varsa yakalaması için tüm işlem try-catch yapısına taşınır. 
        const course = await Course.create(req.body); // ile yeni kurs yazılır. 
        res.status(201) // ile status code 201-created gönderilir. 
            .json({
                status: 'succest',
                course
            }) // diğer veriler hazır olmadığından şimdilik bu veri gönderilir. 
    } catch (error) { 
        res.status(400) // ile status code 400-bad request gönderilir. 
        .json({
            status: 'fail',
            error,
        });
    }
};
                    

routes/courseRoute.js oluşturuldu. içine:

const express = require('express') 
const courseController = require('../controllers/courseController') 

const router = express.Router() 

router.route('/').post(courseController.createCourse) // ile post request createCourse fonksiyonunu çalıştırır.

module.exports = router
                    

app.js içine courseRoute import edilir. routes alanına:

app.use('/courses', courseRoute);

Postman ve API

API

Application Program Interface

API'ler, iki yazılım bileşeninin belirli tanımlar ve protokoller aracılığıyla birbiriyle iletişim kurmasına olanak tanıyan mekanizmalardır. Örneğin, meteoroloji müdürlüğünün yazılım sistemi, günlük hava durumu verilerini içerir. Telefonunuzdaki hava durumu uygulaması, API'ler aracılığıyla bu sistemle "konuşur" ve telefonunuzda size günlük hava durumu güncellemelerini gösterir.

Postman

Frontend hazır değilken backend tarafını test etmek için kullanılır. requesti simüle eder ve gelen response u gösterir.

postman.com/downloads/ -> download ve setup

uygulama içinden + ile yeni untitled request oluşturulur.
ilgili request seçilir ve gönderilecek url girilir.
ilgili veriler body alanına json olarak yazılır.
send ile gönderilir.

Verinin alınması için gelen url req.body üzerinden middleware ile işlenmeli. Bunun için courseController içine middleware olarak:

app.use(express.json()) // for parsing application/json
app.use(express.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded
                    

gelen response uygulamada görülür.

Kursları Listelemek

courses.ejs template engine göre düzenlenir. courses linki _navigation.ejs içinde güncellenir.

courseRoute.js içine:

router.route('/').get(courseController.getAllCourses); 

courseController.js içine:

exports.getAllCourses = async (req, res) => { 
    try { 
        const courses = await Course.find(); // ile veritabanından tüm kurslar alınır. 

    res.status(200).render('courses', { 
        courses, 
        page_name: 'courses' 
    }); // courses.ejs, courses bilgisi ve page_name bilgisi gönderilir. 

    } catch (error) { 
        res.status(400).json({ 
            status: 'fail', 
            error,
        });
    }
}; 
                    

courses.ejs içindeki kusrların gösterildiği taslaklardan biri bırakıldı. Kalanlar silindi. Bırakılan taslak aşağıdaki for döngüsü içine alındı.

<% for(let i=0; i 
    ... 
    taslak 
    ... 
<% } %>
                    

<%= courses[i].name %>

<%= courses[i].description.substring(0, 100) + "..." %>

Tekil Kurs Sayfası ve Slugify

course-single.ejs adı course.ejs yapılır ve template engine'e uygun düzenlenir.

courses.ejs içindeki link:

/courses/<%= courses[i]._id %>

_navigation.ejs, _header.ejs ve _footer.ejs içindeki lokal linklerin başına / eklenir ki ulaşılabilinsin.

courseRoute.js içinde:

router.route('/:id').get(courseController.getCourse);

courseController.js içine:

exports.getCourse = async (req, res) => { 
    try { 
        const course = await Course.findById({_id: req.params.id}); // ile request olarak gelen id deki course bilgisi course değişkenine atanır. 

        res.status(200).render('course', { 
            course, 
            page_name: 'courses'
        }); // ile course.ejs render edilir ve course değişkenindeki bilgi gönderilir. 

    } catch (error) { 
        res.status(400).json({ 
            status: 'fail', 
            error,
        });
    }   
};
                    

course.ejs içinde uygun alanlara

<%= course.name %>

<%= course.description %>

Slugify

Tekil kurs sayfalarını _id parametersi ile çağırdığımızda bu ID url de 6095037e031db830c0a724ee benzer _id parametresinin görünmesine neden olur. Bunun yerinde daha anlamlı olan bir slug ifadesinin bulunmasını isteriz. Bunun için slugify paketinden faydalanacağız.

terminale:

npm i slugify

models/Course.js içine:

const slugify = require('slugify');

slug:{ 
    type: String, 
    unique: true 
}
                    

CourseSchema.pre('validate', function(next){
    this.slug = slugify(this.name, {
         // ile isim slug a çevirilir. Bu işlem için arrow fonksiyon kullanılmaz çünkü arrowda this alınmaz. 
        lower: true, // ile hepsi küçük harfe dönüştürülür. 
        strict: true // ile stirng olmayan karakterler atılır. 
    }); 
    next(); // ile fonksiyon bir sonrakine devam ettirilir. 
})
                    

Sayfayı slug üzerinden request etmek için courses.esj içindeki link:

/courses/<%= courses[i].slug %>

router.route('/:slug').get(courseController.getCourse);

exports.getCourse = async (req, res) => { 
    try { 
        const course = await Course.findOne({slug: req.params.slug}); 
        ....
    }
    ...
}
                    

Kategori Oluşturmak ve Listelemek

Kategori için model oluşturup, bu modeli course modeli ile bağlayacağız.

models/Category.js oluşturuldu. İçine: (Course.js model alındı.)

const mongoose = require('mongoose'); 
const slugify = require('slugify'); 
const Schema = mongoose.Schema; 

const CategorySchema = new Schema({ 
    name: { 
        type: String, 
        unique: true, 
        required: true, 
    },
    slug: {
        type: String, 
        unique: true, 
    },
}); 

CategorySchema.pre('validate', function (next) { 
    this.slug = slugify(this.name, { 
        lower: true, 
        strict: true, 
    }); 
    next(); 
}); 

const Category = mongoose.model('Category', CategorySchema); 

module.exports = Category;
                    

Course.js CourseSchema içine:

category: { 
    type:mongoose.Schema.Types.ObjectId, 
    ref:'Category' 
}
                    

controllers/categoryController.js oluşturuldu. içine:

const Category = require('../models/Category') 

exports.createCategory = async (req, res) => { 
    try { 
        const category = await Category.create(req.body); 

        res.status(201).json({ 
            status: 'succest', 
            category, 
        }); 
    } catch (error) { 
        res.status(400).json({ 
            status: 'fail', 
            error, 
        }); 
    }
};
                  

routes/courseRoute.js oluşturuldu. içine:

const express = require('express') 
const categoryController = require('../controllers/categoryController') 

const router = express.Router() 

router.route('/').post(categoryController.createCategory); 

module.exports = router
                    

app.js içine: categoryRoute import edildi. router alanına:

app.use('/categories', categoryRoute);

postman ile category verisi oluşturuldu. Sonra bu kategorilerle ilişkili course oluşturuldu.

Kategorileri courses sayfasında listelemek için courseController.js içine Category modeli import edilir. getAllCourses içine:

const categories = await Category.find();

courses.ejs içinde ilgili alan:

<h3 class="widget-title">Categories</h3> 
<ul> 
    <% for(let i=0; i<categories.length; i++){ %> 
    <li><a href="/courses?categories=<%= categories[i].slug %>"><%= categories[i].name %></a></li> 
    <% } %> 
</ul>
                    

courseController.js içinde getAllCourses fonksiyonuna aşağıdaki ekleme yapılır.

const categorySlug = req.query.categories; // ile gönderilen query yakalanır. 

const category = await Category.findOne({slug: categorySlug}) // ile databaseten ilgili Category bulunur. 

let filter = {} 

if(categorySlug){ 
    filter = {category:category._id}
}  // ile queryden veri gelme durumu sorgulanır. Gelmediyse filter değişkeni boş kalır. Değilse slug bilgisi ile databaseten çekilen verinin _id değeri category keyine value olarak atanır.

const courses = await Course.find(filter); // ifadesi güncellenir. if döngüsünden filter dolu çıkarsa buna göre göndereceği verileri filtreler.
                

            

Kayıt Sayfası ve Bcrypt Paketi

Kayıt Sayfası

İlk önce register sayfasını oluşturacağız. Buradaki tek amacımız sayfayı görebilmek olduğu için işlemleri pageController.js ve pageRoute.js ile yapacağız.

pageController.js içine:

exports.getRegisterPage = (req, res) => { 
    res.status(200).render('register', { 
        page_name: "register" 
    });
}
                    

pageRoute.js içine:

router.route('/register').get(pageController.getRegisterPage)

register.html register.ejs ye dönüştürülür ve template engine'e göre düzenlenir. _navigation.ejs'deki link düzenlenir:

<li><a class="hover-btn-new log <%= page_name === 'register' && 'orange' %>" href="/register"><span><i class="fa fa-user-plus" aria-hidden="true"></i></span></a></li>
                    

models/User.js dosyası oluşturulur. İçine:

const mongoose = require('mongoose'); 
const Schema = mongoose.Schema; 

const UserSchema = new Schema({ 
name: { 
    type: String, 
    required: true, 
}, 
email: { 
    type: String, 
    required: true, 
    unique: true, 
}, 
password: { 
    type: String, 
    required: true, 
} 
}); 

const User = mongoose.model('User', UserSchema); 

module.exports = User;
    
                    

controller/authControler.js dosyası oluşturulur. İçine:

const User = require('../models/User') 

exports.createUser = async (req, res) => { 
    try { 
        const user = await User.create(req.body); 

        res.status(201).json({ 
            status: 'succest', 
            user, 
        }); 
    } catch (error) { 
        res.status(400).json({ 
            status: 'fail', 
            error, 
        });
    }
};
                    

routes/userRoute.js oluşturulur. İçine:

const express = require('express') 
const authController = require('../controllers/authController') 

const router = express.Router() 

router.route('/singup').post(authController.createUser); 

module.exports = router
                    

app.js içine Routes alanına:

app.use('/users', userRoute);

register.ejs form alanı aşağıdaki gibi düzenlendi.
<form method="POST" action="users/singup">

Bcrypt

Database'e gönderilen password bilgisini şifrelenmesini sağlar.

terminale:

npm i bcrypt

models/User.ejs içine bcrypt import edilir. new Schema fonksiyonunu altına aşadaki middleware eklenir.

UserSchema.pre('save', function(next){ 
    const user = this; 
    bcrypt.hash(user.password, 10, (error, hash) => { 
        user.password = hash; 
        next(); 
    })
})
                    

Bu konuyla ilgili ileride karşılaşacağımız hata ve çözümü için tıklayın

Giriş Sayfası ve Giriş İşlemi

Giriş Sayfası

pageController.js içine:

exports.getLoginPage = (req, res) => { 
    res.status(200).render('login', { 
        page_name: "login" 
    });
}
                    

login.html, login.ejs ye dönüştürülür ve template engine'e göre düzenlenir.

_navigation.ejs içinde ilgili kısım:

<li><a class="hover-btn-new log <%= page_name === 'login' && 'orange' %> mr-2" href="/login"><span><i class="fa fa-sign-in" aria-hidden="true"></i></span></a></li>
                    

pageRoute.js içine:

router.route('/login').get(pageController.getLoginPage);

Giriş İşlemi

authController.js içine:

const bcrypt = require('bcrypt'); // ile bcrypt import edilir. 

exports.loginUser = async (req, res) => { 
    try { 
        const {email, password} = req.body; // ile formdan email ve password bilgisi alınır.      

        let user = await User.findOne({email: email}) // ile email bilgisi ile db üzerinde user olma durumu kontrol edilir. 

        if(user){ 
            bcrypt.compare(password, user.password, (err, same) =>{ // user var ise password bilgisinin eşleşmesi kontrol edilir. 
                if(same){ 
                    // USER SESSION 
                    res.status(200).send("you are logged in") // password bilgisi eşleşiyorsa "you are logged in" bilgisi sayfaya gönderilir. Daha sonra buraya başka işlem gelecek. 
                }
            })
        }
    } catch (error) { 
        res.status(400).json({ 
            status: 'fail', 
            error, 
        });
    }
};
                    

authController.js için bilgi göndermesi için login.ejs içindeki form ve userRoute.js düzenlenir.
login.ejs:

<form method="POST" action="users/login">

router.route('/login').post(authController.loginUser);

Session Nedir?

Session kavramı Türkçeye oturum olarak çevrilir ve kişiye özel içerik oluşturmak için kullanıcı bilgilerinin sunucu tarafında saklanmasını sağlayan araçlardır. Node.js tarafında express-session paketini kullanacağız.

session datası sunucuda saklanır. sadece session id cookie içinde saklanır.

terminale:

npm i express-session

app.js içine import edilir.

var session = require('express-session');

app.use(session({ 
    secret: 'keyboard_cat_rambo', 
    resave: false, 
    saveUninitialized: true, 
}))
                    

session bilgisini yakalamak için authController.js loginUser fonksiyonundaki //USER SESSION kısmına:

req.session.userID = user._id

res.status(200).redirect('/');

Bazı bilgilerin loginden sonra bazılarının da loginden önce görünmesini isteriz. Bunun için:

app.js içine // Global Variable alanı oluşturup (middleware alanının üstüne) içine:

global.userIN = null;

app.use('*', (req, res, next)=>{ 
    userIN = req.session.userID; 
    next();
})
                    

_navigation.ejs içinde login ve register butonlarının sadece userIN false iken çıkması için:

<% if(!userIN){ %> 
    <ul class="nav navbar-nav navbar-right"> 
        <li><a class="hover-btn-new log <%= page_name === 'login' && 'orange' %> mr-2" href="/login"><span><i class="fa fa-sign-in" aria-hidden="true"></i></span></a></li> 
        <li><a class="hover-btn-new log <%= page_name === 'register' && 'orange' %>" href="/register"><span><i class="fa fa-user-plus" aria-hidden="true"></i></span></a></li> 
    </ul> 
<% } %>
                    

userIN true iken (kullanıcı login yaptığında) logout butonunu görünmesi için:

<% if(userIN){ %> 
    <ul class="nav navbar-nav navbar-right"> 
        <li><a class="hover-btn-new log <%= page_name === 'login' && 'orange' %> mr-2" href="/login"><span><i class="fa fa-sign-out" aria-hidden="true"></i></span></a></li> 
    </ul> 
<% } %>
                    

Aynı durum dashboard linki için kullanıcı varsa gösterilecek şekilde uyarlanır:

<% if(userIN){ %> 
    <li class="nav-item"><a class="nav-link" href="dashboard.html">Dashboard</a></li> 
<% } %> 
                    

Çıkış İşlemi

authController.js içine:

exports.logoutUser = (req, res) => { 
    req.session.destroy(() => { 
        res.redirect('/'); 
    });
};
                    

router.route('/logout').get(authController.logoutUser)

<ul class="nav navbar-nav navbar-right">
    <li>
        <a class="hover-btn-new log mr-2" href="/users/logout">
            <span><i class="fa fa-sign-out" aria-hidden="true"></i></span>
        </a>
    </li>
</ul>
                    

Connect Mongo

Burada şöyle bir sorunumuz var, sunucuyu tekrar başlattığımızda ilgili session yani oturumu kaybediyoruz. Bunun engellemek için connect-mongo paketini indireceğiz. Bu sayede session bilgilerini mongoDB üzerinde saklayabilyoruz. Sonrasında ise bu session bilgisini kaydedeceğimiz veritabanı bağlantısını yazacağız.

terminale:

npm i connect-mongo

app.js içine import için:

const MongoStore = require('connect-mongo'); 

store: MongoStore.create({ mongoUrl: 'mongodb://localhost/smartedu-db' })

Bu işlemden sonra sunucu bağlantısı kopup yeniden de bağlansa kullanıcı login ise login kalır.

Kişiye Özel İçerik

dashboard.esj dosyası template engine'e göre düzenlenir.

işlem login işlemi ile yapılacağından işlemleri login işlemine uyumlu dosyalara yerleştirilecek.

authController.js içine:

exports.getDashboardPage = (req, res) => { 
    res.status(200).render('dashboard', { 
        page_name: "dashboard" 
    });
}
                    

_navigation içinden dashboard linki: "/users/dashboard" olarak güncellenir ve class active bilgisi için düzenleme yapılır.

<li class="nav-item <%= page_name === 'dashboard' && 'active' %>"><a class="nav-link" href="/users/dashboard">Dashboard</a></li>
                    

userRoute.js içine:

router.route('/dashboard').get(authController.getDashboardPage);

authController.js içindeki loginUser fonksiyonunun redirect adresi '/users/dashboard' olarak güncellendi.

dashboard sayfasına user bilgisini göndermek için authController.js içindeki getDashboardPage fonksiyonu aşağıdaki gibi güncellenir.

exports.getDashboardPage = async(req, res) => { 
    const user = await User.findOne({_id: req.session.userID}) 
    res.status(200).render('dashboard', { 
        page_name: "dashboard", 
        user: user 
    });
}
                    

dashboard.ejs içine ilgili yere

<%= user.name %>

Özel Middleware

login ve logout durumuna göre görünmesini istemediğimiz sayfaların linklerinin başka sayfaya redirect yapması için middleware yazacağız.

Logout durumunda kullanılmayacak linkler

/users/dashboard

middleware/authMiddleware.js dosyası oluşturulur. İçine:

const User = require('../models/User'); 
    
module.exports = (req, res, next) => { // ile tüm içerik export edilir. 
    User.findById(req.session.userID, (err, user) => { // ile user sorgulanır. 
        if (err || !user) return res.redirect('/login'); // user yoksa '/login' sayfasına yönledirilir. 
        next(); // ile if geçersizse sonraki fonksiyona geçilir.
    });
}; 
                    

userRoute.js içine authMiddleware import edilir.

const authMiddleware = require('../middlewares/authMiddleware');

userRoute.js dashboard route fonksiyonu aşağıdaki gibi güncellenir.

router.route('/dashboard').get(authMiddleware, authController.getDashboardPage);

Login durumunda kullanılmayacak linkler

/login
/register

middleware/redirectMiddleware.js dosyası oluşturulur. İçine:

module.exports = (req, res, next) => { 
    if (req.session.userID) return res.redirect('/'); 
    next();
};
                    

pageRoute.js içine redirectMiddleware import edilir.

const redirectMiddleware = require('../middlewares/redirectMiddleware');

pageRoute.js içinde güncelleme yapıldı.

router.route('/register').get(redirectMiddleware ,pageController.getRegisterPage); 
router.route('/login').get(redirectMiddleware ,pageController.getLoginPage);
                    

Kullanıcı Rolleri

Önce models/user.js içine role bilgisi eklenir.

role: { 
    type: String, 
    enum: ["student", "teacher", "admin"], 
    defult: "student", 
},
                    

Bilginin alınması için register.ejs form içine:

<div class="offset-1 col-lg-10 col-md-10 col-sm-10"> 
    <select class="form-control" name="role" id=""> 
        <option>student</option> 
        <option>teacher</option> 
    </select> 
</div>
                    

middlewares/roleMiddleware.js içine: br

module.exports = (roles) => { // fonksiyonun kullanıldığı yerde argüman olarak bu parametre (roles) array şeklinde kullanılacak. 
    return (req, res, next) => { 
        const userRole = req.body.role; 
        if(roles.includes(userRole)) { 
            next(); 
        } else { 
            return res.status(401).send('YOU CANT DO THIS');
        }
    }
}
                    

courseRoute createCourse yönlendirmesine admin veya teacher olma şartı konulur:

router.route('/').post(roleMiddleware(["teacher", "admin"]), courseController.createCourse);

register ekranında kayıt sonrası login sayfasına yönlendirmesi için, authController.js içinde createUser respose değeri aşağıdaki gibi güncellenir.

exports.createUser = async (req, res) => { 
    try { 
        const user = await User.create(req.body); 
    
        res.status(201).redirect('/login') 

    } catch (error) { 
        res.status(400).json({ 
            status: 'fail', 
            error, 
        });
    }
};
                    

user.role bilgisine göre /dashboard içinde içeriği ayarlamak için if(user.role === '') kalıbı kullanılabilir.

<% if (user.role === 'student'){ %> 
    <div class="all-title-box"> 
        <div class="container text-center"> 
            <h1><%= user.name %><span class="m_1">STUDENT</span></h1> 
        </div> 
    </div> 
<% } %>	 
<% if (user.role === 'teacher'){ %> 
    <div class="all-title-box"> 
        <div class="container text-center"> 
            <h1><%= user.name %><span class="m_1">Teacher</span></h1> 
        </div> 
    </div> 
<% } %>	
                    

Kurs Oluşturmak

dashboard.ejs if (user.role === 'student') iken görünecek kısmı yukarıda, if (user.role === 'teacher') iken görünecek kısmı aşağıda olacak şekilde tekrar düzenlenir.

dashboard.ejs teacher kısmına buton eklenir:

<div class="col-lg-12 text-center "> 
    <button class="btn btn-lg btn-warning rounded-0 text-white" href="#" data-toggle="modal" data-target="#addCourse"><span>CREATE NEW COURSE</span></button> 
</div>
                    

Modal içinde daha önceden oluşturduğumuz kategorileri görebilmek için authController.ejs içine Categories import edilir. dashboard içine göndermek için getDashboardPage fonksiyonuna tüm categories çağırılır ve render kısmına eklenerek gönderilir.

exports.getDashboardPage = async(req, res) => { 
    const user = await User.findOne({_id: req.session.userID}) 
    const categories = await Category.find()  
    res.status(200).render('dashboard', { 
        page_name: "dashboard", 
        user: user, 
        categories: categories
    });
}
                    

<select class="form-control" name="category"> 
    <u>
        <% for (let i=0; i< categories.length; i++) { %> 
        <option value="<%= categories[i]._id %>"><%= categories[i].name %></option> 
        <% } %> 
    </u>		
</select>
                    

formu post ederken form tagı içinde:

method="POST" action="/courses

createCourse route aşamasında (courseRoute.ejs içinde) user.role sorgular. Bunu da form içinde göndermemiz gerekir. bunun için form alanının içine:

<div class="form-group"> 
    <div class="col-sm-12"> 
        <input type="hidden" name="role" class="form-control"  value="<%= user.role %>"> 
    </div> 
</div>
                    

Kurs yaratıldığında courses sayfasına yönlendirmesi için ilgili redirect createCourse fonksiyonunda düzenlenir:

exports.createCourse = async (req, res) => { 
    try { 
        const course = await Course.create(req.body); 
        
        res.status(201).redirect('/courses');
    } catch (error) { 
        res.status(400).json({ 
            status: 'fail', 
            error, 
        });
    }
};
                

Oluşturulan kursların /courses sayfasında son oluşturulanın en üstte görünmesi için courseController.js içinde getAllCourses fonksiyonudaki const courses = await Course.find(filter) ibaresine ".sort('-createdAt');" eklenir.

const courses = await Course.find(filter).sort('-createdAt');

Kullanılan Modal

dashboard.ejs içinden görülebilir.

Kurs - Öğretmen İlişkisi

Course.js modeline

user: { 
    type:mongoose.Schema.Types.ObjectId, 
    ref:'User' 
}
                    

courseController.ejs içinde createCourse içinde mevcut user yakalanır:

const course = await Course.create({ 
    name: req.body.name, 
    description: req.body.description, 
    category: req.body.category, 
    user: req.session.userID 
});
                    

user bilgisine uygun olan coursesi dashboarda eklemek için authController.ejs getDashboardPage fonksiyonuna courses aktif kullanıcıya göre filtrelenerek tanımlanır:

const courses = await Course.find({user: req.session.userID})

res.status(200).render('dashboard', { 
    page_name: "dashboard", 
    user: user, 
    categories: categories, 
    courses: courses 
});
                    

dashboard.ejs içinde courses bilgisi for döngüsü ile yakalanır ve her course için name ve description ilgili alanlara konulur.

<% for(let i=0; i<courses.length; i++){ %> 
...
    <%= courses[i].name %>
...
    <%= courses[i].description %>
...
<% } %>
                    

Tekli kurs sayfasında course.user bilgisinden user.name alabilmek için courseController.ejs içinde getCourse fonksiyonunda aşağıdaki güncelleme yapılır:

const course = await Course.findOne({ slug: req.params.slug }).populate('user');

<%= course.user.name %>

Kurs - Öğrenci İlişkisi

Öğrencinin kurslara kayıt olası, kendi dashboard sayfasında katıldığı kursları görmesi ve yönetmesi işlemleri

User.js içinde UserSchema alanına aşağıdaki course bilgisi eklenir:

courses: [{ 
    type: mongoose.Schema.Types.ObjectId, 
    ref: 'Course' 
}]
                    

Enroll işlemi

course.ejs içine aşağıdaki form eklendi:

<form method="POST" action="/courses/enroll"> 
    <input type="hidden" name="course_id" value="<%= course._id %>"> 
    <button class="btn btn-large btn-warning text-white"><span>ENROLL</span></button> 
</form> 
                    

courseController.js içinde aşağıdaki fonksiyon yazıldı:

exports.enrollCourse = async (req, res) => { 
    try { 
        const user = await User.findById(req.session.userID);// ile şu an aktif olan user bilgisi alındı. 
        await user.courses.push({_id: req.body.course_id}); // ile tıklanılan sayfanın course_id bilgisi user.courses kısmına eklendi. 
        await user.save(); // ile user için yapılan değişiklik kaydedildi. 
        res.status(200).redirect('/users/dashboard');
    } catch (error) { 
        res.status(400).json({ 
            status: 'fail', 
            error, 
        });
    }
};
                    

courseRoute.j içine aşağıdaki kod eklenerek course.ejs ile ourseController.enrollCourse fonksiyonu bağlandı.

router.route('/enroll').post(courseController.enrollCourse);

user'a kayıtlı courses bilgisini almak için authController.js içindeki getDashboardPage fonksiyonunun ilgili kısmına .populate('courses'); eklenir.

exports.getDashboardPage = async(req, res) => { 
    const user = await User.findOne({_id: req.session.userID}).populate('courses'); 
    ...
                    

dashboard.ejs student kısmında aşağıdaki for döngüsü yazılır ve ilgili bilgiler ilgili kısımlara girilir.

<% for(let i=0; i 
    ... 
    ...<%= user.courses[i].name %>... 
    ...<%= user.courses[i].slug %>... 
    ...<%= user.courses[i].description %>... 
    ... 

<% } %>
                    

gelişim sürecinde modellerimiz üzerinde de değişiklik yaptık. Database üzerine eski tarihli gönderdiğimiz verilerde bu bilgiler eksik kaldı. Bu nedenle categories alanı hariç database i temizledik. Yenilerini oluşturduk.

Release

dashboard student kısmında description kısmının altına aşağıdaki buton eklenir:

<form method="POST" action="/courses/release"> 
    <input type="hidden" name="course_id" value="<%= user.courses[i]._id %>"> 
    <button class="btn btn-large btn-danger text-white"><span>RELEASE</span></button> 
</form>
                    

courseController.js içine releaseCourse fonksiyonu yazılır.

exports.releaseCourse = async (req, res) => { 
    try { 
        const user = await User.findById(req.session.userID); 
        await user.courses.pull({_id: req.body.course_id}); 
        await user.save(); 
        res.status(200).redirect('/users/dashboard'); 
    } catch (error) { 
        res.status(400).json({ 
            status: 'fail', 
            error, 
        });
    }
};                      
                    

courseRoute içinde aşağıdaki yönlendirme ile buton ile fonksiyon bağlanır.

router.route('/release').post(courseController.releaseCourse);

Alınan kursta enrol butonunun görünmemesi için:

courseController.js getCourse içinde user bilgisi göndermek için:

exports.getCourse = async (req, res) => { 
    try { 
        const user = await User.findById(req.session.userID); 
        ... 
                    

course.ejs içindeki enroll butonu if bloğuna alınır:

<% if(user && !user.courses.includes(course._id)) { %> 
    ...ENROLL... 
<% } %> 
                    

Search Alanı

courses.ejs search alanı aşağıdaki gibi düzenlenir:

<div class="widget-search"> 
    <div class="site-search-area"> 
        <form method="GET" id="site-searchform" action="/courses"> 
        <div> 
            <input class="input-text form-control" name="search" id="search-k" placeholder="Search..." type="text"> 
            <button id="searchsubmit" value="Search" type="submit"></button> 
        </div> 
        </form> 
    </div> 
</div>
                    

Buradan gelen bilgi courseRoute.js üzerinden courseController.getAllCourses fonksiyonuna aktarılır.

Bilginin filtrelemede kullanılması için fonksiyon aşağıdaki hale güncellenir.

exports.getAllCourses = async (req, res) => { 
    try { 
        const categorySlug = req.query.categories; 
        const query = req.query.search;  // ile search alanındaki bilgi alınır.         
        const category = await Category.findOne({slug: categorySlug}) 
        let filter = {} 
        if(categorySlug){ 
            filter = {category:category._id} 
        } 
        if(query) {  // query varsa 
            filter = {name:query} // filter.name olarak atanır. 
        } 
    
        if(!query && !categorySlug){
            filter.name = "" 
            filter.category = null 
        } 
    
        const courses = await Course.find({ 
            $or:[ // bu ifade mongodb için veya demek. 
                {name: {$regex: '.*' + filter.name + '.*', $options: 'i'}}, // ile name başı ve sonu farketmeksizin filter.name ifadesini içerenleri sorgular. 
                {category: filter.category} 
            ] 
        }).sort('-createdAt'); 
        
        const categories = await Category.find(); 
        
        res.status(200).render('courses', { 
            courses, 
            categories, 
            page_name: 'courses', 
        }); 
    } catch (error) { 
        res.status(400).json({ 
            status: 'fail', 
            error, 
        });
    }
    };
                    

courses.ejs içindeki search alanı aynı şekilde course.ejs için de kullanılır.

courses.ejs içindeki Categories alanı aynı şekilde course.ejs için de kullanılır. Çalışması için courseController.getCourse içinde

const categories = await Category.find();

courses sayfasında kursu oluşturan teacher kullanıcının adını görmek için courseController.getAllCourses fonksiyonundaki ilgili kısım aşağıdaki gibi güncellenir.

const courses = await Course.find({ 
    $or:[ 
        {name: {$regex: '.*' + filter.name + '.*', $options: 'i'}}, 
        {category: filter.category} 
    ] 
    }).sort('-createdAt').populate('user');
                        

.populate('user') ile courses ile gönderilen user bilgisini almak için courses.ejs içindeki ilgili alana:

<%= courses[i].user.name %> eklenir.

İletişim Sayfası ve Mail Göndermek

İletişim Sayfası

contact.html contact.ejs ye dönüştürülür.

contact.ejs template engine'e göre düzenlenir.

_navigation.ejs içinde ilgili linkler düzenlenir.

<li class="nav-item <%= page_name === 'contact' && 'active' %>"><a class="nav-link" href="/contact">Contact</a></li>
                    

pageRoute.js içinde ilgili yönlendirme yapıldı.

router.route('/contact').get(pageController.getContactPage);

pageController.js içinde getContactPage fonksiyonu yazılır.

exports.getContactPage = (req, res) => {
    res.status(200).render('contact', {
        page_name: "contact"
    });
}
                    

contact.ejs içindeki form isteğe göre düzenlenir. Bize name, email ve message yeterli. Form ayarlarını da aşağıdaki gibi düzenleriz:

<form id="contactform" action="/contact" method="POST"> 
    ..... 
    ..... 
</form>
                    

formdan gelen bilgiyi almak için (şimdilik konsola yazdıracağız) pageController.js içinde sendEmail fonksiyonu yazılır.

exports.sendEmail = (req, res) => { 
    console.log(req.body); 
}
                    

formdan gelen bilgi routeController.js içinden ilgili fonksiyona yönlendirilir.

router.route('/contact').post(pageController.sendEmail);

Mail Göndermek

Bunun için ücretli servisler var. Biz bu uygulamada gmailin ücretsiz hizmetinden faydalanacağız. Bunun için kendi mail adresimizi kullanacağız.

Mail göndermek için önce nodemailer adında bir node modülü kullanacağız.

terminale:

npm i nodemailer

modül pageController.js çine import edilir.

const nodemailer = require("nodemailer");

pageController.sendEmail fonksiyonu aşağıdaki gibi düzenlenir.

exports.sendEmail = async(req, res) => { 

    const outputMessage = ` 
    <h1>Mail Details</h1> 
    <ul> 
        <li>Name: ${req.body.name}</li> 
        <li>Email: ${req.body.email}</li> 
    </ul> 
    <h1>Message</h1> 
    <p>${req.body.message}</p> 
    `; //  bu kısım mailimizin gövdesi olacak. 

                    
    let transporter = nodemailer.createTransport({ 
        host: "smtp.gmail.com", //  gmaile yönlendiriyoruz. 
        port: 465, //  portu 465 e ayarlıyoruz. 
        secure: true, //  true for 465, false for other ports 
        auth: { 
            user: "drmuratgokduman@gmail.com", //  gmail accont: maili gönderecek olan adres 
            pass: "eqocuuyuqcrxxyhc" //  gmail password yerine google account içinde güvenlik kısmında uygulama şifrelerine girilir ve uygulama şifresi oluşturulur. uygulama: posta cihaz: windows bilgisayar 
        }, 
    }); 
    
    let info = await transporter.sendMail({ 
        from: '"Smart Edu Contact Form" <drmuratgokduman@gmail.com>',  //  gönderen adres 
        to: "drmuratgokduman@gmail.com", //  alan adres 
        subject: "Smart Edu Contact Form New Message ✔", //  konu 
        html: outputMessage, // mesajın gövdesi: yukarıda oluşturmuştuk 
    }); 
    
    console.log("Message sent: %s", info.messageId);           
    console.log("Preview URL: %s", nodemailer.getTestMessageUrl(info));         
    res.status(200).redirect('contact'); 
    }
                    

nodemailer anasayfasında konuyla ilgili başka mail opsiyonları da var (cc, bcc, dosya eki vs)

Flash Bildirimleri

Projemizde herhangi bir şekilde bir değişiklik yaptığımızda, yeni bir kurs oluşturduğumuzda veya mail gönderimi gibi işlemler sonucunda kullanıcıya geri bildirimde bulunmak için kullanılır.

Bu işlem için connect-flash modülü kullanılır.

terminale:

npm i connect-flash

app.js içine import edilir.

const flash = require('connect-flash');

app.js middleware alanına:

app.use(flash());

flash dan gelen mesajı lokalde bir değişkene kaydetmek için middleware alanına:

app.use((req, res, next)=>{ 
    res.locals.flashMessages = req.flash(); 
    next(); 
})
                    

Mail gönderimi sonrası bildirim göndermek:

pageController.sendMail fonksiyonunun içine en sondaki redirect komutundan önce:

req.flash("success", "We received your message succesfuly");

Başarısız işlemlerde hata mesajı yazdırabilmek için pageController.sendMail fonksiyonunun içeriği try catch bloğuna alınır. catch kısmına:

req.flash("error", "Something happened!"); 
res.status(200).redirect('contact');
                    

Mesajı contact.ejs içinde görmek için istenilen yere:

<% if(flashMessages){ %> 
    <% if(flashMessages.success){ %> 
        <div class="alert alert-success"> 
            <%= flashMessages.success %> 
        </div> 

    <% } else if(flashMessages.error){ %> 
        <div class="alert alert-danger"> 
            <%= flashMessages.error %> 
        </div> 
    <% } %> 
<% } %>
                    

Her şey normalken hata alıyorsan ağı kontrol et. şirket ağı bazı fonksiyonları kısıtlıyor.

Kurs oluşturduktan sonra bildirim almak:

courseController.courseCreate fonksiyonunda try bloğunun en altındaki redirect fonksiyonundan önce:

req.flash('success', `${course.name} Has Been Created Succesfuly`);

req.flash('error', `Something Happened!`); 
res.status(400).redirect('/courses');
                    

flash ile gelen bilgiyi yakalamak için courses.ejs içine mail gönderiminde eklediğimiz kodu kullanabiliriz. Bildirimi görmek istediğimiz yere ekleriz.

Kayıt ve Kullanıcı Doğrulama

Doldurulması zorunlu alanlar için html input kodlarına öz nitelik olarak required eklenebilir.

Biz bu çalışmada express-validator modülü ile form kontrolü yapacağız.

terminale:

npm i express-validator

Sing Up sayfasında form denetimi:

userRoute.js içine import edilir:

const { body } = require('express-validator');

userRoute.js içindeki singup post request routeu aşağıdaki gibi düzenlenir.

router.route('/singup').post( 
    [ 
        body('name').not().isEmpty().withMessage('Please Enter Your Name'), // bu kısımda formdan gelen name parametresi boş ise "Please Enter Your Name" mesajı gönderilir. 
    ], 
    authController.createUser
);
                    

Gönderilen hata mesajı authControler.createUser catch tarafında yakalanır. Bunun için önce express-validator import edilir.

const { validationResult } = require('express-validator');

const errors = validationResult(req); 
console.log(errors);
                    

console.log(errors.array()[0].msg);

Aldığımız hata mesajını bir önceki konudaki flash metodu ile ilgili template'e göndereceğiz
bunun için catch bloğunun en altına:

req.flash('error', errors.array()[0].msg); 
res.status(400).redirect('/register')   
                    

Gönderilen mesaj register.ejs içinde istenilen yere daha önceki kodun aynısı olarak girilir:

<% if(flashMessages){ %> 
    <% if(flashMessages.success){ %> 
        <div class="alert alert-success"> 
            <%= flashMessages.success %> 
        </div> 

    <% } else if(flashMessages.error){ %> 
        <div class="alert alert-danger"> 
            <%= flashMessages.error %> 
        </div> 
    <% } %> 
<% } %> 
                    

userRoute.js içine:

const User = require('../models/User');

userRoute.js içindeki singup post request routeu diğer inputlardan gelen veriyi de değerlendirmesi için aşağıdaki gibi güncellenir.

router.route('/singup').post( 
    [ 
        body('name').not().isEmpty().withMessage('Please Enter Your Name'), 
        body('email').isEmail().withMessage('Please Enter Valid Email') // bu kısım mail adresi değil ise mesaj gönder. 
        .custom((userEmail)=> { // bu kısımdaki sınamayı kendimiz yazdık. Mail adresinin databasete zaten olması durumunda hata mesajı gönderir. Sınamanın gerçekleşebilmesi için User modeli import edilir 
            return User.findOne({email: userEmail}).then(user => { 
                return Promise.reject('Email is already exist') 
            }) 
        }), 
        body('password').not().isEmpty().withMessage('Please Enter Your Password'), // password kısmı boş ise hata mesajı verir.

    ],  
    authController.createUser
); 
                    

Gelen birden fazla mesajın hepsinin yazılabilmesi için authController.createUser catch blogu içine for döngüsü yazılır.

} catch (error) {
    const errors = validationResult(req);

    for (let i=0; i<errors.array().length; i++){
        req.flash('error', errors.array()[i].msg); 
    }
    
    res.status(400).redirect('/register')
} 
                    

Login sayfasında form denetimi:

Bu kısımda emaile sahip user olma durumu ve password kontrol authController.loginUser fonksiyonunda zaten olduğu için userRoute içinde tekrar kontrol etmeye gerek yoktur.

if(user) bloğunun else bloğuna:

req.flash('error', 'User Is Not Exist'); 
res.status(200).redirect('/login'); 
                    

if(user) içindeki if(same) bloğunun else bloğu içine:

req.flash('error', 'Your Password Is Not Correct!!'); 
res.status(200).redirect('/login'); 
                    

login.esj içinde istenilen yerde bu mesajlar aşağıdaki kod ile yakalanır.

<% if(flashMessages){ %> 
    <% if(flashMessages.success){ %> 
        <div class="alert alert-success"> 
            <%= flashMessages.success %> 
        </div> 

    <% } else if(flashMessages.error){ %> 
        <div class="alert alert-danger"> 
            <%= flashMessages.error %> 
        </div> 
    <% } %> 
<% } %> 
                    

validation için detaylı okuma için github.com/validatorjs ve express-validator.github.io/docs

Bir hata ile karşılaştık

Kullanıcı bilgisi değiştiğinde password değişiyor.

student içine course enroll edildiğinde database üzerindeki password verisi değişiyor.

Bu durumu çözmek için google üzerinde arama yapıyoruz:
how to prevent refreshing password mongoose

Bulunan stackoverflow linki.

Linkteki cevabın referans verdiği doküman

stackoverflow da cevap olarak verilen kod null ifadesi silindikten ve userSchema UserSchema olarak kodumuzla uyumlu hale getirildiğinde işimizi görüyor.

UserSchema.pre('save', function(next) { 
    const user = this; 
    if (!user.isModified('password')) return next(); 

    bcrypt.genSalt(10, function(err, salt) { 
        if (err) return next(err); 
        bcrypt.hash(user.password, salt, function(err, hash) { 
            if (err) return next(err); 
            user.password = hash; 
            next(); 
        }); 
    }); 
}); 
                    

Benim çözümüm

Kendi kodumuzu incelediğimizde her save işleminden önce password bilgisinin tekrar hash edildiğini görüyoruz. Bunu engellemek için koda bir if koşulu eklememiz yeterli olacaktır.

UserSchema.pre('save', function (next) { 
    const user = this; 
    if(!user.isModified('password')) return next(); 
                          
    bcrypt.hash(user.password, 10, (error, hash) => { 
        user.password = hash; 
        next(); 
    }); 
}); 
                    

Kurs Silmek

delete ve update butonlarını eklemek için dashboard.ejs içinde teacher kısmındaki kurs kartlarına aşağıdaki kod eklenir:

<div class="clearfix"> 
    <ul style="list-style-type: none;"> 
        <li style="float: left;">
            <button class="btn btn-primary rounded-0 text-white"><span>UPDATE</span></button>
        </li> 
        <li style="float: right;">
            <button class="btn btn-danger rounded-0 text-white"><span>DELETE</span></button>
        </li> 
    </ul> 
</div> 
                    

delete ve update işlemleri için method-override paketi indirilir. Terminale:

npm i method-override

app.js içine method-override import edilir.

const methodOverride = require('method-override')

app.use( 
    methodOverride('_method', { 
        methods: ['POST', 'GET'], 
    }) 
); 
                    

dashboard.ejs delete butonu aşağıdaki gibi modifiye edilir:

<li style="float: right;"><a 
    href="/courses/<%= courses[i].slug %>?_method=DELETE" 
    onclick="return confirm('ARE YOU SURE?')" 
    class="btn btn-danger rounded-0 text-white"><span>DELETE</span></a></li>
                    

courseController.js içine

exports.deleteCourse = async (req, res) => { 
    try { 
        const course = await Course.findOneAndRemove({slug:req.params.slug}) 
        req.flash('error', `${course.name} Has Been Remote Succesfuly`); 
        res.status(200).redirect('/users/dashboard'); 
        
    } catch (error) { 
        res.status(400).json({ 
            status: 'fail', 
            error, 
        }); 
    }
};
                    

fonksiyon ile komutu bağlamak için courseRoute.js içinde

router.route('/:slug').delete(courseController.deleteCourse);

Gönderilen flash mesajı dashboard.ejs içinde istenilen yere eklenir.

Kurs Güncellemek

Bir önceki çalışmada method-override paketini kurmuştuk. Bunun üzerinden devam edeceğiz.

update butonuna tıkladığımızda bir modal açılacak ve içinde tıkladığımız kursun bilgileri yazacak.

CREATE NEW COURSE için kullandığımız ve sayfanın en altına yazdığımız modalı kopyalayıp kurs listelemek için kullandığımız for döngüsünün en altına yapıştırıyoruz. Bu sayede modal ilgili kursun bilgilerini alabiliyor.

dashboard.ejs içinde UPDATE butonu aşağıdaki gibi güncellenir:

<li style="float: left;">
    <button class="btn btn-primary rounded-0 text-white" 
    data-toggle="modal" data-target="#updateCourse<%= courses[i]._id %>" // bu kısım modal için gerekli. data-target ile modal id aynı olmalı. 
    >
        <span>UPDATE</span>
    </button>
</li>
                    

modal içindeki değişiklikler:

<div class="modal fade" id="updateCourse<%= courses[i]._id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
... 
    <form method="POST" action="/courses/<%= courses[i].slug %>?_method=PUT" class="form-horizontal"> 
        ... 
        <input type="text" name="name" value="<%= courses[i].name %>" class="form-control"  placeholder="Course Name">
        ... 
        <textarea rows="8" name="description" class="form-control" placeholder="Course Description" required><%= courses[i].description %></textarea> 
    ...
...
                    

courseController.js içine:

exports.updateCourse = async (req, res) => { 
    try {                     
        const course = await Course.findOne({slug:req.params.slug}) 
        course.name = req.body.name; 
        course.description = req.body.description; 
        course.category = req.body.category; 
        course.save(); 
                          
        req.flash('success', `${course.name} Has Been Update Succesfuly`); 
        res.status(200).redirect('/users/dashboard'); 
                              
    } catch (error) { 
        res.status(400).json({ 
            status: 'fail', 
            error, 
        }); 
    } 
};
                    

routeController.js içine:

router.route('/:slug').put(courseController.updateCourse);

Admin Alanı ve Kullanıcı Silmek

Bu çalışmada ayrı admin alanı oluşturmak yerine dashboard alanını kullanacağız.

Admin kullanıcısını student olarak yaratıp database üzerinden manuel admin yaptık.

dashboard.ejs student alanını kopyalayıp teacher alanının altına yapıştırdık. ve user.role === 'admin' olarak güncelledik.

for döngüsünü sildik ve yerine bu tamplate için kullanılan bootstrap yapısına uygun bir tablo örneği yapıştırdık.

Tüm user bilgisini dashboard.ejs de kullanabilmek için authController.getDashboardPage fonksiyonuna:

const users = await User.find()

users bilgisi tablo içinde yakalanır:

<table class="table"> 
    <thead> 
        <tr> 
            <th scope="col">ID#</th> 
            <th scope="col">Email</th> 
            <th scope="col">Role</th> 
            <th scope="col">Delete</th> 
        </tr> 
    </thead> 
    <tbody> 
        <% for(let i=0; i<users.length; i++){ %> 
            <tr> 
                <th scope="row"><%= users[i]._id %></th> 
                <td><%= users[i].email %></td> 
                <td><%= users[i].role %></td> 
                <td>DELETE</td> <!-- DELETE butonu daha sonra aktif hale getirilecek -->
            </tr> 
        <% } %> 
    </tbody> 
</table>
                    

DELETE butonu için:

<td>
    <a 
    href="/users/<%= users[i]._id %>?_method=DELETE" 
    onclick="return confirm('ARE YOU SURE?')" 
    class="btn btn-danger rounded-0 text-white">
        <span>DELETE</span>
    </a>
</td>
                    

authController.js içine:

exports.deleteUser = async (req, res) => { 
    try { 
        await User.findByIdAndRemove(req.params.id); 
        res.status(200).redirect('/users/dashboard'); 
    } catch (error) { 
        res.status(400).json({ 
            status: 'fail', 
            error, 
        }); 
    } 
};
                    

userRoute.js içine:

router.route('/:id').delete(authController.deleteUser);

role: teacher olan bir kullanıcıyı kaldırdığımızda, onun oluşturduğu kurslar kalmaya devam eder ve hata alırız. Bu nedenle teacher kaldırıldığında ona bağlı kurslar da kaldırılsın isteriz. Bu nedenle authController.deleteUser fonksiyonunu aşağıdaki gibi modifiye ederiz.

exports.deleteUser = async (req, res) => { 
    try { 
        await User.findByIdAndRemove(req.params.id); 
        await Course.deleteMany({ user: req.params.id }); 
        res.status(200).redirect('/users/dashboard'); 
    } catch (error) { 
        res.status(400).json({ 
            status: 'fail', 
            error, 
        }); 
    } 
}; 
                    

Kategori Eklemek ve Silmek

dashboard.ejs admin alanındaki tablonun altına kendi kopyasını oluşturup modifiye edip üzerinde çalışacağız.

<div class="row mt-5"> 
    <h2>Categories</h2> 
    <table class="table"> 
        <thead> 
            <tr> 
                <th scope="col">ID#</th> 
                <th scope="col">Categories</th> 
                <th scope="col">Add</th> 
                <th scope="col">Delete</th> 
            </tr> 
        </thead> 
        <tbody>   
            <% for(let i=0; i<categories.length; i++){ %> 
                <tr> 
                    <th scope="row"><%= categories[i]._id %></th> 
                    <td><%= categories[i].name %></td> 
                                            <td>ADD</td> <!-- add butonu daha sonra düzenlenecek  -->

                    <td>
                        <a  
                        href="/categories/<%= categories[i]._id %>?_method=DELETE" 
                        onclick="return confirm('ARE YOU SURE?')" 
                        class="btn btn-danger rounded-0 text-white">
                            <span>DELETE</span>
                        </a>
                    </td> 
                </tr> 
            <% } %> 
        </tbody> 
    </table> 
</div><!-- end row --> 

                    

Kategori silmek

categoryController içine:

exports.deleteCategory = async (req, res) => { 
    try { 
        await Category.findByIdAndRemove(req.params.id); 
        res.status(200).redirect('/users/dashboard'); 
    } catch (error) { 
        res.status(400).json({ 
            status: 'fail', 
            error, 
        }); 
    } 
};
                    

fonksiyon ile isteği bağdaştırmak için categoryRoute.js içine:

router.route('/:id').delete(categoryController.deleteCategory);

Kategori eklemek

add butonu:

<button class="btn btn-warning rounded-0 text-white" href="#" data-toggle="modal" data-target="#addCategory"><span>ADD</span></button>

categoryController.createCourse fonksiyonunu daha önce yazmıştık. Sadece

res.status(201).redirect('/users/dashboard');

ilgili route daha önce yazılmıştı.

Anasayfa düzeni

pageController.getIndexPage fonksiyonu içinde anasayfada kullanmak için bazı bilgiler göndereceğiz.

exports.getIndexPage = async (req, res) => { 

    const courses = await Course.find().sort('-createdAt').limit(2); // kursları oluşturulma sırasına göre tersten sıralıyoruz ve iki tanesini alıyoruz. 
    const totalCourses = await Course.find().countDocuments();  // toplam kurs sayısı 
    const totalStudents = await User.countDocuments({role: 'student'}); // toplam öğrenci sayısı 
    const totalTeachers = await User.countDocuments({role: 'teacher'}); // toplam öğretmen sayısı 

    res.status(200).render('index', { 
        page_name: 'index', 
        courses, 
        totalCourses, 
        totalStudents, 
        totalTeachers, 
    }); 
};
                    

Gönderilen veriler anasayfada yerleştirilerek kullanılır.

Deployment

daha önceki projenin aynısı.

Yeni database e bağlanırlen tüm veriler sıfırlanacağı için, index sayfasında courses verilerini if(courses[0]) benzeri koşullara alıyoruz.

connect için kullandığımız mongodb bağlantısını middleware içindeki kısmı update ederken kullanmayı unutma.
bağlantı için:

 
mongoose 
    .connect('mongodb+srv://arslan_ng:narniag7A.@cluster0.cqw1stg.mongodb.net/?retryWrites=true&w=majority') 
    .then(() => console.log('DB Connected!'));
                    

app.use( 
    session({ 
        secret: 'keyboard_cat_rambo', 
        resave: false, 
        saveUninitialized: true, 
        store: MongoStore.create({ mongoUrl: 'mongodb+srv://arslan_ng:narniag7A.@cluster0.cqw1stg.mongodb.net/?retryWrites=true&w=majority' }), 
    }) 
);