13.07.2023
399
Bu bölümdə biz xəbər lentinin və istifadəçi hesablarının idarə edilməsinə diqqət yetirəcəyik. Bu bölümdə əhatə edəcəyimiz əsas mövzular bunlardır:
Əsas səhifənin dizaynı - Bootstrap istifadə edərək təməl dizaynı dəyişdirmək. Əsas səhifə üçün xəbərlərin siyahılanması.
İstifadəçi Hesabları və Giriş İdarəetmə - İstifadəçilərin qeydiyyatdan keçməsi və daxil olması üçün səhifələrin dizaynı. İstifadəçinin vebsayta daxil olması və çıxış etməsi.
Xəbər Paylaşma və Detalları - İstifadəçilərin xəbər paylaşma səhifəsinin dizaynı. Hər xəbərin detallarını göstərən səhifənin dizaynı.
Bəyənmə və Şərh Etmə Əməliyyatları - Hər hansı bir xəbərin bəyənilməsi və ya bəyənilməməsi üçün dizayn hazırlanması. Xəbərlərə şərh yazma hissəsinin dizaynı.
Əvvəlcə layihənizə Bootstrap kitabxanasını əlavə etməyi unutmayın. Bunun üçün əvvəlcə views/index.ejs və views/partials.ejs fayllarının dizaynını aşağıdakı kimi yeniləyək:
views/partials.ejs
<header class="header">
<h1 class="display-4 text-center">Xəbər oxuma platforması</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light px-2">
<div class="d-flex justify-content-between align-items-center container">
<a class="navbar-brand" href="/">Əsas səhifə</a>
<div>
<button class="btn bg-secondary">
<a class="text-decoration-none text-white" href="/user/login">Login</a>
</button>
<button class="btn bg-light border">
<a class="text-decoration-none text-black" href="/user/sign-up">Sign Up</a>
</button>
</div>
</div>
</nav>
</header>
views/index.ejs
<!DOCTYPE html>
<html lang="az">
<head>
<!-- Digər meta etiketləri -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Xəbər oxuma platforması</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"/>
</head>
<body>
<%- include('partials/header') %>
<div class="container">
<div class="row mt-4">
<div class="col-md-8">
<h2>Xoş gəldiniz</h2>
<p>Bu, xəbər oxuma platformasının ana səhifəsidir.</p>
<div class="row">
<!-- Xəbərlərin listi buraya gələcək -->
</div>
</div>
<div class="col-md-4">
<h4>Populyar Xəbərlər</h4>
<!-- Populyar xəbərlər listi buraya gələcək -->
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
İstifadəçilərin vebsayta daxil ola bilməsi və ya qeydiyyatdan keçməsi üçün front-end hissəsinin dizayn edək. Qeydiyyat səhifəsi üçün views/sign-up.ejs, giriş səhifəsi üçün views/login.ejs və istifadəçi profil səhifəsi üçün views/profile.ejs fayllarını yaradaq.
views/sign-up.ejs
<!DOCTYPE html>
<html lang="az">
<head>
<!-- Digər meta etiketləri -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
</head>
<body>
<%- include('partials/header') %>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3 my-5">
<h2 class="text-center">Qeydiyyat</h2>
<form action="/user/sign-up" method="POST">
<div class="form-group mb-3">
<label for="username">İstifadəçi adı</label>
<input type="text" class="form-control" id="username" name="username" required/>
</div>
<div class="form-group mb-3">
<label for="email">Email Adresi</label>
<input type="email" class="form-control" id="email" name="email" required/>
</div>
<div class="form-group mb-3">
<label for="password">Şifrə</label>
<input type="password" class="form-control" id="password" name="password" required />
</div>
<button type="submit" class="btn btn-primary">
Qeydiyyatdan keç
</button>
</form>
</div>
</div>
</div>
</body>
</html>
views/login.ejs
<!-- Giriş səhifəsi -->
<!DOCTYPE html>
<html lang="az">
<head>
<!-- Digər meta etiketləri -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
</head>
<body>
<%- include('partials/header') %>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3 my-5">
<h2 class="text-center">Daxil ol</h2>
<form action="/user/login" method="POST">
<div class="form-group mb-3">
<label for="username">İstifadəçi adı</label>
<input type="text" class="form-control" id="username" name="username" required/>
</div>
<div class="form-group mb-3">
<label for="password">Şifrə</label>
<input type="password" class="form-control" id="password" name="password" required/>
</div>
<button type="submit" class="btn btn-primary">Daxil ol</button>
</form>
</div>
</div>
</div>
</body>
</html>
views/profile.ejs
<!-- İstifadəçi profili səhifəsi -->
<!DOCTYPE html>
<html lang="az">
<head>
<!-- Digər meta etiketləri -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
</head>
<body>
<%- include('partials/header') %>
<div class="container">
<div class="row">
<div class="col-md-6 py-3">
<h2>İstifadəçi Profili</h2>
<!-- İstifadəçi profili məlumatları buraya gelecek -->
</div>
</div>
</div>
</body>
</html>
Bu səhifələrin dizaynını yaratdıqdan sonra siz istifadəçinin giriş və çıxışını idarə edə və istifadəçi profili səhifəsini yeniləyə bilərsiniz. Növbəti addımda xəbər paylaşma səhifəsini (views/create-news.ejs) və hər xəbərin detallarını göstərən səhifəni (views/single-news.ejs) Bootstrap istifadə edərək dizaynı hazırlayacağıq.
views/create-news.ejs
<!-- Xəbər yaratma səhifəsi -->
<!DOCTYPE html>
<html lang="az">
<head>
<!-- Digər meta etiketləri -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
</head>
<body>
<%- include('partials/header') %>
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2 mt-4">
<h2 class="text-center">Xəbər Paylaş</h2>
<form action="/user/create-news" method="POST">
<div class="form-group mb-3">
<label for="title">Xəbər Başlığı</label>
<input type="text" class="form-control" id="title" name="title" required/>
</div>
<div class="form-group">
<label for="description">Xəbərin Kontenti</label>
<textarea class="form-control" id="description" name="description" rows="5" required></textarea>
</div>
<button type="submit" class="btn btn-primary mt-4">Xəbəri Paylaş</button>
</form>
</div>
</div>
</div>
</body>
</html>
views/single-news.ejs
<!-- Hər bir xəbərin detallarını göstərən səhifə -->
<!DOCTYPE html>
<html lang="az">
<head>
<!-- Digər meta etiketləri -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
</head>
<body>
<%- include('partials/header') %>
<div class="container">
<div class="row">
<div class="col-md-8">
<h2>Xəbər başlığı</h2>
<!-- Xəbər detalları buraya gələcək -->
</div>
</div>
</div>
</body>
</html>
Ümumi xəbərlərin olacağı səhifə üçün Bootstrap istifadə edərək bir xəbərin dizaynı hazırlamağa başlayaq. Bunun üçün `views/index.ejs` faylına daxil olaraq bəzi əlavələrimizi edək. Ancaq əvvəlcə Bootstrap iconlarından istifadə etmək üçün uyğun linki `views/index.ejs` faylının `head` hissəsinə əlavə edilməlidir.
<head>
<!-- Digər meta və link etiketləri -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css"
integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
Kontent hissəsinə isə aşağıdakı kod əlavə edilməlidir.
<!-- Hər bir xəbərin list olaraq göstərildiyi hissədə (views/index.ejs içində) -->
<div class="col-md-6 col-12 mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title"><a href="/single-news/123" class="text-decoration-none text-secondary">Xəbər Başlığı</a></h5>
<p class="card-text">Xəbərin kontenti buraya gələcək.</p>
<button class="btn border-info">
<i class="bi bi-heart"></i>
</button>
<button class="btn border-success-subtle">
<i class="bi bi-chat"></i>
</button>
</div>
</div>
</div>
Bundan sonra controllers adlı bir qovluq yaradırıq və bu qovluqda user.js adlı bir fayl əlavə edirik. Bu faylda istifadəçilərin daxil olması, qeydiyyatdan keçməsi, xəbər paylaşma və digər əməliyyatları icra edəcək funksiyaları əlavə edirik. Sonra user.js faylını açaraq, içərisinə aşağıdakı kimi funksiyaları əlavə edirik:
// İstifadəçi qeydiyyatı səhifəsini göstərir
export const getRegisterPage = (req, res) => {
res.render("sign-up");
};
// İstifadəçi qeydiyyatını həyata keçirir
export const registerHandler = (req, res, next) => {
// Burada qeydiyyat əməliyyatları həyata keçirilir
// Məsələn, req.body məlumatlarından istifadə edərək yeni istifadəçi yarada bilərsiniz
};
// İstifadəçinin giriş səhifəsini göstərir
export const getLoginPage = (req, res) => {
res.render("login");
};
// İstifadəçi girişini həyata keçirir
export const loginHandler = (req, res, next) => {
// Burada giriş əməliyyatları yerinə yetirilir
// Məsələn, req.body saytından istifadəçi adı və şifrə ilə daxil ola bilərsiniz
};
// İstifadəçi profilinin səhifəsini göstərir
export const getUserProfile = (req, res) => {
res.render("profile");
};
Sonra routes qovluğunda user.js adlı bir fayl əlavə edirik. Bu faylda istifadəçilərin daxil olması, qeydiyyatdan keçməsi və digər əməliyyatları icra etmək üçün marşrutları route təyin edirik və user.js faylını açaraq, içərisinə aşağıdakı kimi kodları əlavə edirik:
import { Router } from "express";
import {
getLoginPage,
getRegisterPage,
getUserProfile,
loginHandler,
registerHandler,
} from "../controllers/user.js";
const router = Router();
router.get("/login", getLoginPage);
router.post("/login", loginHandler);
router.get("/sign-up", getRegisterPage);
router.post("/sign-up", registerHandler);
router.get("/profile", getUserProfile);
export default router;
Son olaraq, index.js faylına keçirik və routes/user.js faylını import edib istifadə edirik:
// Ana səhifənin marşrutları(route)
app.use("/", newsRoute);
app.use("/user", userRouter);
Bu bölümdə layihəmizə yep-yeni səhifələr əlavə olunmuşdur! Təbii ki, tətbiq etdiyimiz yeniliklər istifadəçilərimizin təcrübəsini daha da zənginləşdirəcəkdir və indi tətbiqimiz daha gözəl görünür.
3-cü bölüm isə layihəmizin mövcud strukturasına verilənlər bazasını əlavə etməyi və onun funksionallığını təyin etməyi nəzərdə tutur. Verilənlər bazası ilə yeni məlumatların əlavə olunması, mövcud məlumatların oxunması dəyişdirilməsi kimi funksionallıqlar əlavə olunacaq.
Gələcək bölümlərdə, layihəmizin əsas strukturasını daha da gücləndirəcəyik və bu, istifadəçilərimizin platformamızda daha çox funksionallıqdan istifadə etməsinə imkan yaradacaq.
Görüşənə qədər, yaradıcı proqramlaşdırma yolunda müvəffəqiyyət və əyləncəli təcrübələr səninlə olsun!
Məqaləni hazırlad: Şamil Vasiyev
Təsdiqlədi: Əlinemət İsiyev
