The data model of the job category could be defined by its title, thumbnail, and date. The most important is its title that will be used to categorize the type of job. This data model could be mapped with the form below:

 

<!--view/admin/category.ejs-->
<link rel="stylesheet" href="/styles/admin/category.css" />

<section class="Category">
    <div class='content'>
        <% if('item' in data){ %>
        <form action='/admin/category/edit/<%= data.item.id %>' method='post' >
            <a>ឈ្មោះជំពូកៈ</a><input type='text' value="<%= data.item.title %>" name='title' required />
            <a>រូបសញ្ញាៈ</a><input type='text' value="<%= data.item.thumb %>" name='thumb' required />
            <a>ពេល​បង្កើតៈ</a><input type='datetime-local' value='<%= data.item.date %>' name="datetime" required />
            <a></a><input type='submit' value='បញ្ជូនទិន្នន័យ' />
        </form>
        <% delete data.item %>
        <% }else{ %>
        <form action='/admin/category' method='post' >
            <a>ឈ្មោះជំពូកៈ</a><input type='text' name='title' required />
            <a>រូបសញ្ញាៈ</a><input type='text' name='thumb' required />
            <a>ពេល​បង្កើតៈ</a><input type='datetime-local' value='' name="datetime" required />
            <a></a><input type='submit' value='បញ្ជូនទិន្នន័យ' />
        </form>
        <% } %>
    </div>
</section>

 

/* public/styles/admin/category.css */
.Category .content form{
    width: 60%;
    display: grid;
    grid-template-columns: 20% 80%;
    grid-gap: 5px;
    align-items: center;
}
 
.Category .content form input[type=submit],
.Category .content form input{
    font: var(--body-font);
    padding: 5px 10px;
}
 
.Category .content form a{
    text-align: right;
    color: white;
}

 

 

GitHub: https://github.com/Sokhavuth/khmerweb-job

Heroku: https://khmerweb-job.herokuapp.com