ការកែប្រែទំព័រស្តាទិកក៏ត្រូវធ្វើឡើងជាពីរដំណាក់កាលដែរ ដំណាក់កាលទីមួយគឺត្រូវស្រង់យកទិន្នន័យនៃទំព័រស្តាទិកត្រូវកែប្រែមកដាក់បង្ហាញនៅលើគំរូទំព័រស្តាទិក។ ដំណាក់កាលទីពីរគឺការកែប្រែទិន្នន័យនៃទំព័រនេះ និងបញ្ជូនវាទៅរក្សាទុកនៅក្នុងមូលដ្ឋានទិន្នន័យ MongoDB ជំនួសអោយទិន្នន័យនៃទំព័រស្តាទិកចាស់។ ការស្រង់យកទិន្នន័យនៃទំព័រស្តាទិក អាចត្រូវធ្វើឡើងនៅក្នុងឯកសារ index.astro នៅក្នុងថត src/pages/admin/page ។
<!--src/pages/admin/page/index.astro-->
---
import Base from "../../../layouts/admin/Base.astro"
import Page from "../../../layouts/admin/Page.astro"
const { userAuth, prisma, setting } = Astro.locals
if(!userAuth?.userId){ return Astro.redirect('/login') }
import page from "../../../data/page.js"
const total = await page.count({prisma})
const numberPage = Math.ceil(total/setting.adminItems)
const currentPage = Astro.url.searchParams.get('page') || ''
const pagination = {total, numberPage, currentPage}
if(currentPage){
var items = await page.paginate({prisma, currentPage}, setting.adminItems)
}else{
var items = await page.getItems({prisma}, setting.adminItems)
}
const pages = items.map((page)=>{page.date = new Date(page.date).toLocaleDateString('it-IT')
return page })
---
<Base pageTitle="ទំព័រស្តាទិក" pagination={pagination} items={pages} type="page">
<Page/>
</Base>
<!--src/layouts/admin/Page.astro-->
---
const { item=0 } = Astro.props
---
<script is:inline src="/scripts/ckeditor/ckeditor.js"></script>
<section class="Page w-full">
{item ?
<form id="form" action={"/api/admin/page/update/"+item.id} method="post">
<input class="border w-full px-2 py-1 border-slate-300"
type="text" name="title" value={item.title} required placeholder="ចំណងជើង"
/>
<textarea class="" name="content" id="editor">{item.content}</textarea>
<div class="grid md:grid-cols-[auto_auto_15%] grid-cols-1">
<input class="border px-2 py-1 border-slate-300"
type="text" value={item.thumb} name="thumb" required placeholder="រូបតំណាង"
/>
<input class="border px-2 py-1 border-slate-300" value={item.date}
type="datetime-local" step="1" name="datetime" required
/>
<input class="border border-slate-300 px-2 py-1 hover:opacity-75 bg-slate-200 hover:cursor-pointer"
type="submit" value="ចុះផ្សាយ"
/>
</div>
</form>:
<form id="form" action="/api/admin/page/create" method="post">
<input class="border w-full px-2 py-1 border-slate-300"
type="text" name="title" required placeholder="ចំណងជើង"
/>
<textarea class="" name="content" id="editor"></textarea>
<div class="grid md:grid-cols-[auto_auto_15%] grid-cols-1">
<input class="border px-2 py-1 border-slate-300"
type="text" name="thumb" required placeholder="រូបតំណាង"
/>
<input class="border px-2 py-1 border-slate-300"
type="datetime-local" step="1" name="datetime" required
/>
<input class="border border-slate-300 px-2 py-1 hover:opacity-75
bg-slate-200 hover:cursor-pointer" type="submit" value="ចុះផ្សាយ"
/>
</div>
</form>
}
<script>
$('.Page input').on('change', () => {
window.onbeforeunload = save_data_check
})
ckeditor.model.document.on( 'change', () => {
window.onbeforeunload = save_data_check
} )
$('.Page #form').on('submit', () => {
window.onbeforeunload = null
})
function save_data_check(){
return "Your changes may not be saved."
}
</script>
</section>
<script is:inline src="/scripts/ckeditor/config.js"></script>
<style is:global>
.ck-editor__editable {
min-height: 270px;
}
</style>
ដូចគ្នាដែរ ការប្រែទិន្នន័យនៃទំព័រស្តាទិកណាមួយអាចត្រូវធ្វើឡើងបានតែចំពោះអ្នកនិពន្ធទាំងឡាយណាដែលមានតួនាទីជា Admin តែប៉ុណ្ណោះ អ្នកក្រៅពីនេះ នឹងមិនអាចកែប្រែទិន្នន័យប្រភេទនេះបានឡើយ។ មួយវិញទៀត ការកែប្រែទំព័រស្តាទិកត្រូវធ្វើឡើងនៅក្នុងក្បួនចុងផ្លូវឬ API Endpoint នៅក្នុងថត src/pages/api/admin/page/update នៅក្នុងឯកសារ [id].js ។ ប៉ារ៉ាម៉ែត id មានតួនាទីសំខាន់ណាស់ក្នុងការជំនួសទិន្នន័យចាស់ដែលមានអត្តសញ្ញាណដូចគ្នា ដោយទិន្នន័យកែប្រែថ្មីនៅក្នុងមូលដ្ឋានទិន្នន័យ MongoDB ។
// src/pages/api/admin/page/update/[id].js
import page from "../../../../../data/page.js"
export async function POST({ locals, redirect, params, request, url}){
const userAuth = locals.userAuth
const userAdmin = locals.userAdmin
const prisma = locals.prisma
let currentPage = url.searchParams.get('page') || ''
if(currentPage){
currentPage = "?page=" + currentPage
}
if(userAuth?.userId){
if(userAdmin){
const data = await request.formData()
const title = data.get('title')
const content = data.get('content')
const thumb = data.get('thumb')
const datetime = data.get('datetime')
if(title && thumb && datetime){
const body = { title, content, thumb, datetime }
await page.update({ prisma, body, params })
}
}
return redirect("/admin/page"+currentPage, 302)
}
return redirect('/login', 302)
}
Netlify: https://khmerweb-dynamic-blog.netlify.app/admin/page
