គំរូ​ក្បាល​ទំព័រ​នៅ​ក្នុង​ផ្នែក​គ្រប់គ្រង មិន​ចាំបាច់​មាន​ម៉ឺនុយ​នោះ​ទេ សំខាន់គឺ​ត្រូវ​មាន​របារ​ស្វែង​រក​មួយ​សំរាប់​ស្វែង​រក​ទិន្នន័យ​ផ្សេង​ៗ​ដែល​ត្រូវ​បាន​រក្សាទុក​នៅ​ក្នុង​មូលដ្ឋាន​ទិន្នន័យ MongoDB ។ មួយវិញទៀត ផ្នែក​គ្រប់គ្រង​នឹង​មាន​ទំព័រ​ជា​ច្រើន​ទៀត ប្រើ​សំរាប់​បង្កើត​ទិន្នន័យ​ខុស​ៗ​គ្នា ហើយ​ផ្នែក​នេះ​ជា​កន្លែង​សំរាប់​តែ​អ្នក​និពន្ធ​អត្ថបទ​តែ​ប៉ុណ្ណោះ ដូចនេះ​ការចូល​មក​ក្នុង​ទំព័រ​​គ្រប់គ្រង ត្រូវ​មាន​ការត្រួតពិនិត្យ​ថា​តើ​អ្នក​ដែល​ចុះ​ឈ្មោះ​ចូល​មក​នោះ ពិត​ជា​អ្នកនិពន្ធ​ដែល​មាន​ឈ្មោះ​ក្នុង​មូលដ្ឋាន​ទិន្នន័យ MongoDB ដែរ​ឬ​ទេ។

 

<!--src/layouts/admin/Header.astro-->
---
const { pageTitle="ក្បាល​ទំព័រ" } = Astro.props
const { userAuth } = Astro.locals
---

<section class="bg-teal-600 text-white md:px-0 px-2">
    <div class="max-w-5xl mx-auto py-1 flex flex-col md:flex-row items-center">
        <div class="flex flex-col md:flex-row items-center gap-2 md:w-1/4 w-full">
            <a class="hover:opacity-75" href="/admin">
                <img class="w-12" src="/images/siteLogo.png" />
            </a>
            <span class="font-title text-2xl md:pt-2 pt-0 md:py-0 py-2">
                {pageTitle}
            </span>
        </div>
        <form class="flex flex-row md:w-1/2 w-full text-gray-800" action="/api/admin/search" method="post">
            <select name="type" class="pl-2">
                <option>ការផ្សាយ</option>
                <option>ទំព័រស្តាទិក</option>
                <option>ជំពូក</option>
                <option>អ្នកនិពន្ធ</option>
            </select>
            <input class="grow px-2" name="q" type="text" required placeholder="Search..." />
            <input class="bg-gray-200 hover:opacity-75  px-2 py-1" 
                type="submit" value="ស្វែងរក" />
        </form>
        <div class="md:w-1/4 w-full md:text-right text-center md:py-0 py-2">
            <span class="">{userAuth?.userName}</span> | 
            <a class="hover:opacity-75" href="/">ទំព័រ​មុខ</a> | 
            <a class="hover:opacity-75" href="/api/logout">ចេញ​ក្រៅ</a>
        </div>
    </div>
</section>

 

<!--src/layouts/admin/Base.astro-->
---
const { pageTitle="ទំព័រ​គ្រឹះ" } = Astro.props
import Footer from "../Footer.astro"
import Header from "./Header.astro"
---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle}</title>
        <link rel="icon" href="/images/siteLogo.png" />
        <link href="/fonts/setup.css" rel="stylesheet" />
        <script is:inline src="/scripts/jquery.js"></script>
    </head>
    <body class="text-sm leading-normal">
        <Header pageTitle={pageTitle}/>
        <slot/>
        <Footer/>
    </body>
</html>

 

Netlify: https://khmerweb-dynamic-blog.netlify.app/login

GitHub: https://github.com/Sokhavuth/dynamic-blog