Sun May 11 2025
9 : 01 : 52 PM

Khmer Web

Gateway to web application
Creating Dashboard
ថ្ងៃ សៅរ៍ ទី ១៧ តុលា ២០២០
Edit
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--views/dashboard/home.tpl-->
%include('./dashboard/partials/header.tpl')
 
<style>
  #content{
    min-height: 350px;
    background: lavender;
    padding: 10px;
    box-sizing: border-box;
  }
</style>
 
<div id="main" class="main region">
 
  %include('./dashboard/partials/sidebar.tpl')
 
  <section id="content" class="content">
    content
  </section><!--content-->
</div><!--main-->
 
%include('./dashboard/partials/footer.tpl')
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!--views/daishboard/home.tpl-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>{{data['blogTitle']}}</title>
    <script src="/static/scripts/jQuery.js"></script>
    <script src="/static/scripts/main.js"></script>
    <link href="/static/styles/main.css" rel="stylesheet"></link>
    <link href="/static/images/site_logo.png" rel="icon" ></link>
    <link href="/static/fonts/setup.css" rel="stylesheet"></link>
  </head>
  <body>
    <div id="site">
      <header id="blog-header">
        <div class="region">
          <a href="/login"><img src="/static/images/site_logo.png"/></a>
          <a id="blog-title" href="/login">{{data['blogTitle']}}</a>
          <style>
            #top-menu li{
              list-style-type: none;
              display: inline-block;
              font: 16px/1.5 Bayon;
              margin: 0 10px;
            }
          </style>
          <ul id="top-menu">
            <li><a href="#">ការផ្សាយ</a></li>
            <li><a href="#">​ជំពូក</a></li>
            <li><a href="#">ទំព័រ</a></li>
            <li><a href="#">​ឯកសារ</a></li>
            <li><a href="#">​សមាជិក</a></li>
          </ul>
          <a id="log-in" href="/">ចេញ​ក្រៅ</a>
        </div><!--region-->
      </header>
      <div id="header-border"></div>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style>
  #sidebar{
    min-height: 350px;
    background: lavender;
    padding: 10px 0;
    box-sizing: border-box;
  }
  #sidebar-menu li{
    list-style-type: none;
    font: 16px/1.75 Koulen;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 15% calc(85% - 10px);
    grid-gap: 10px;
    align-items: center;
  }
  #sidebar-menu li img{
    width: 100%;
  }
  #sidebar-menu li a{
    display: inline-block;
  }
</style>
 
<section id="sidebar" class="sidebar">
  <nav>
    <ul id="sidebar-menu">
      <li><img src="/static/images/posting.png"><a href="#">ចុះ​ផ្សាយ</a></li>
      <li><img src="/static/images/categorizing.png"><a href="#">បង្កើត​ជំពូក</a></li>
      <li><img src="/static/images/paging.png"><a href="#">បង្កើត​ទំព័រ</a></li>
      <li><img src="/static/images/multimedia.png"><a href="#">ចំលង​ឯកសារ</a></li>
      <li><img src="/static/images/user.png"><a href="#">បន្ថែម​​សមាជិក</a></li>
    </ul>
  </nav>
</section><!--sidebar-->

GitHub: https://github.com/Sokhavuth/kwblog
Heroku: https://khmerweb-kwblog.herokuapp.com/