DEV Community: Sokhavuth TIN

The Sports Channel website template

Sokhavuth TIN — Mon, 26 Sep 2022 11:09:21 +0000

“The Sports Channel” is another website template that could be used to continuously broadcast all kinds of video 24 hours per day and seven days per week with no cost. Thanks to YouTube Player API (Application Programming Interface) that allow us to do such live broadcast.

Besides live broadcast, YouTube also allows us to write code to change video streaming. This fact make us to write code to switch between different videos sources at will in order to watch video streaming we like. By default, “The Sports Channel” template comes with five different videos streaming classified in five categories - Football, Volleyball, Basketball, Boxing, and Table Tennis. We could add more video sources if we like. And to switch between video sources, we just do “one click” without refreshing the web page.

“The Sports Channel” as well as all templates designed by Apsara Templates could be also used to run video and movies series website due to its ability to create unlimited playlist with videos from different platforms. For example, with “The Sports Channel” template we can create a playlist with videos from YouTube, Facebook, Vimeo… And those videos could be played smoothly without any problem.

If you want to use “The Sports Channel” template to create a sport website or to run a video and movie series website, you can call us at 096 388 9323, we will install this template for you to run on the European free web hosting service at https://www.deta.sh/ . You could pay us only for our time to create a website for you. In addition, as this template is written in Node.js, it could be installed on any web hosting service that includes Node.js as one of its programming language. To see more templates, go to our website at https://khmerweb.deta.dev/ .

The Food Recipes template

Sokhavuth TIN — Sun, 25 Sep 2022 06:52:02 +0000

“The Food Recipes” is an advanced website template that could be used to publish all kinds of food recipes from around the world. What is unique to this template is the two latest posts are published on the website's header and other 15 recent posts are displayed in a beautiful three dimensional rotating carousel.

Moreover, similar to all Apsara Templates, “The Food Recipes” templates could also be used to run videos and movie series website due to its ability to create unlimited playlists with videos from different platforms. For example, with Apsara Templates, we can create a playlist with videos from YouTube, Facebook, Vimeo… And those videos can be played smoothly without any problem.

Regarding space for advertisement, “The Food Recipes” template provides us plenty of spaces on the front page, sidebar, and in each post where we can display as much advertisements as we could.

“The Food Recipes” website template can be setup for you with free of charge to run on the European free web hosting https://www.deta.sh , you can just pay us for our time to build a free website for you using this template. For more detail, you could contact us at 096 388 9323 or visit our website to see more templates.

https://khmerweb.deta.dev/

The TV Channel website template

Sokhavuth TIN — Sun, 18 Sep 2022 06:29:39 +0000

Do you think that website does better job than TV station?

Yes, because what TV station does is broadcasting pre-recorded videos and/or live videos, and we can do the same thing on website by broadcasting those kind of videos.

For this purpose, with the website template "The TV Channel", we can broadcast unlimited all kind of videos 24 hours per day and 7 days per week with no cost at all. What we need to do is uploading videos to YouTube channel and publishing them on our website, The TV Channel template will do everything for us by pulling the latest videos from the database as much as we want to continuously broadcast on the website.

Moreover, unlike the regular tv station, The TV Channel website template also allow us to choose videos by category to watch. For example, we can choose to watch news, movies, entertainment... anything we like. Remember that with The TV Channel template, we can do anything that traditional tv station can do with no cost.

In addition, with The TV Channel template, our website has larger coverage than which of the regular tv station. The coverage of the website built with The TV Channel template is worldwide.

https://khmerweb.deta.dev/post/2ar0h0nneod8

Apsara Book website template

Sokhavuth TIN — Thu, 15 Sep 2022 08:16:52 +0000

The Apsara Book is the best website template that was built with an objective to write and publish unlimited E-books online. With this template, we can create rich e-book content including video, audio, text, and computer program code in many modern programming languages. In summary, this template includes all the latest technology in web development.

In addition, to help you make money, Apsara Book has reserved a large spot on the front page and two other spots in each page of the book for you to display a variety of advertisement pictures as much as you can.

What is unique to this template is the possibility for us to navigate through all books and articles in the database without any difficulty. As the result, readers will always find the book they like by navigating and/or searching the books. Moreover, at the bottom of the front page, readers could also search their favorite books by just clicking a button to do random search.

https://khmerweb.deta.dev/post/vruj8drwv08y

The Classic Newspaper Website template

Sokhavuth TIN — Sun, 11 Sep 2022 02:00:37 +0000

Khmer Web's upcoming website template is the "Classic Newspaper" inspired by the real newspaper The Washington Post with the ability to publish unnumbered videos and movies.

https://khmerweb.deta.dev/post/aw0gfxhvi6l6

Online Sale Products Website Template

Sokhavuth TIN — Thu, 08 Sep 2022 05:03:50 +0000

Online Sale Products (OSP) is an advanced website template allowing anybody to freely post unlimited advertisement to sale their products online. To register with this template in order to be able to publish ads, what users need to do is just one click and everything is done.

This template was written in Node.js using Express.js web framework, and MongoDB Atlas database. As the result, you can install this template on any web hosting service that includes Node.js as one of its programming languages.

Click the image below to see live demo of this website template.

"The Morning News" website template on Deta platform

Sokhavuth TIN — Wed, 07 Sep 2022 02:06:51 +0000

The Morning News (TMN) is a modern website template built for publishing breaking and intensive news on the Internet. Once you install this template on Deta or on a web hosting service with Node.js as a runtime, you can publish news with videos or text only around the world. So, you can use this template as a videos and movies website or as a breaking news website.

Moreover, this template offers you a possibility to create and edit video playlist with ease without the need to install any plugin. In addition, with the embedded Disqus comment system, you can share your articles or movies on Facebook or Twitter anytime.

To help you make money by displaying different advertisements on your website, this template has reserved a big spot on the front page and on each post page for your advertisements. Click the picture below to see the real demo website.

Link to Apsara Templates

Sokhavuth TIN — Sat, 03 Sep 2022 04:04:48 +0000

Click the image below to go to the Apsara Templates website.

TV Channel Website: Admin Post Page

Sokhavuth TIN — Fri, 26 Aug 2022 11:42:00 +0000

GitHub: https://github.com/Sokhavuth/TV-Channel
Vercel: https://khmerweb-tv-channel.vercel.app/login

In the dashboard, post page is a place where we can prepare to publish video(s) with or without text. So we need a rich text editor to write text content and to embed pictures into the text.

Among rich text editor, we can use CKEditor 5 for free. It is a very good text editor; we can build and download it at https://ckeditor.com/ckeditor-5/online-builder/

If we include CKEditor in a form with other input gadgets, the CKEDitor content will be automatically sent to the sever with other contents. And we can easily copy these contents to insert into our database.

However, we need to write some JavaScipt code to create video content or video playlist and to create a list of categories to be sent to the server.

<!--views/backend/index.tpl-->

<link rel="stylesheet" href="/static/styles/backend/index.css" />

<section class="Index">
    <header>
        <div class="inner region">
            <div class="page-title">{{ data["pageTitle"] }}</div>
            <form action="/admin/search" method="post">
                <select name="searchtype">
                    <option>Post</option>
                    <option>Category</option>
                    <option>User</option>
                </select>
                <input type="text" name="q" required />
                <input type="submit" value="Search" />
            </form>
            <div class="logout">
                {{ data["username"]}} | <a href="/">Home</a> | <a href="/login/logout">Logout</a>
            </div>
        </div>
    </header>

    <div class="main region">
        <div class="sidebar">
            <div class="inner">
                <a href="/admin/post"><img src="/static/images/movie.png" /></a>
                <a href="/admin/post">Post</a>

                <a href="/admin/category"><img src="/static/images/category.png" /></a>
                <a href="/admin/category">Category</a>

                <a href="/admin/upload"><img src="/static/images/upload.png" /></a>
                <a href="/admin/upload">Upload</a>

                <a href="/admin/user"><img src="/static/images/users.png" /></a>
                <a href="/admin/user">User</a>

                <a href="/admin/setting"><img src="/static/images/setting.png" /></a>
                <a href="/admin/setting">Settings</a>
            </div>
        </div>
        <div class="content">
            <%
            if("/post" in data["route"]):
                include("backend/post.tpl")
            end
            %>
        </div>
    </div>

    <div class="footer region">
        <div class="info">Total number of items:</div>
        <ul></ul>
        <div class="pagination">
            <img onclick="paginate(`{{ data['route'] }}`)" src="/static/images/load.png" />
        </div>

        <div class="credit">
            <a href="https://khmerweb.vercel.app/">&copy Khmer Web 2022</a>
        </div>
    </div>
</section>

<!--views/backend/post.tpl-->

<link rel="stylesheet" href="/static/styles/backend/post.css" />
<script src="/static/scripts/ckeditor/ckeditor.js"></script>
<script src="/static/scripts/video.js"></script>
<script src="/static/scripts/addCategory.js"></script>

<section class="Post">
    <form action="/admin/post" method="post" name="form" onSubmit="submitForm(event)">
        <input type="text" name="tilte" required placeholder="Post title" />
        <textarea name="content" id="editor"></textarea>
        <input type="text" name="categories" required placeholder="Categories" />
        <div class="wrapper">
            <select id="category" onChange="getCategory()">
                <option>Slect a category</option>
                <option>News</option>
                <option>Entertainment</option>
                <option>Movie</option>
            </select>
            <input type="text" name="thumb" required placeholder="Thumbnail" />
            <input type="datetime-local" name="datetime" required />
            <input type="submit" value="Publish" />
        </div>
        <input name='videos' value='' type='hidden' />
    </form>
    <div class="video-wrapper" >
        <select name="type">
          <option>YouTube</option>
          <option>YouTubePL</option>
          <option>Facebook</option>
          <option>OK</option>
        </select>
        <input type="text" name="videoid" required placeholder="Video id" />
        <select name="status">
          <option>End</option>
          <option>Continue</option>
          <option>~ End</option>
        </select>
        <input onclick="genJson()" type="submit" value="Insert video" />
    </div>

    <div class='viddata'>
        <div></div>
    </div>

</section>
<script src="/static/scripts/ckeditor/config.js"></script>

/* public/styles/backend/post.css */

.Post form .ck-editor__editable{
    min-height: 300px;
    color: black;
}

.Post input, .Post select{
    font: var(--body-font);
    padding: 2px 5px;
}

.Post input{
    width: 100%;
}

.Post form .wrapper, 
.Post .video-wrapper,
.Post .viddata div{
    display: grid;
    grid-template-columns: 20% 40% auto 15%;
}

.Post .viddata div{
    width: 100%;
}

.Post .viddata div p:hover{
    cursor: pointer;
    color: red;
}

.Post .viddata b,
.Post .viddata input,
.Post .viddata p{
    font: var(--body-font);
    padding: 3px 5px;
    background: rgb(208, 216, 228);
    border: 1px solid grey;
    text-align: center;
    color: black;
}

.Post .viddata input{
    background: white;
}

// static/scripts/video.js

let episode = 0

const genJson = () => {
    let json = $('input[name="videos"]').val()
    if((json !== '')&&(json !== '[]')){
        json = JSON.parse(json)
        episode = json.length
    }else{
        episode = 0
    }

    const type = $('select[name="type"').val()
    const id = $('input[name="videoid"').val()
    const status = $('select[name="status"').val()

    let video = {
        type: type,
        id: id,
        status: status,
    }

    let success = false

    for(let v in video){
        if(video[v] === ''){
            alert('You need to fill the required field '+v)
            success = false
            break
        }else{
            success = true
        }
    }

    if(success){
        let json = $('input[name="videos"]').val()
        video = {
            type: type,
            id: id,
            status: status,
        }
        if((json === '')){
            json = JSON.stringify([video])
            $('input[name="videos"]').val(json)
        }else{
            json = JSON.parse(json)
            json.push(video)
            json = JSON.stringify(json)
            $('input[name="videos"').val(json)
        }

        let html =``

        for(let v in video){
            html += `<input value="${video[v]}" required />`
        }

        html += `<p title="Delete" onClick="deleteRow(event)" class="episode">${++episode}</p>`
        html = `<div>${html}</div>`

        if($('.viddata div').html() === ''){
            $('.viddata div').append('<b>Type</b>')
            $('.viddata div').append('<b>Video id</b>')
            $('.viddata div').append('<b>Status</b>')
            $('.viddata div').append('<b>Part/Delete</b>')
        }

        $('.viddata div:eq(0)' ).after(html)
    }
}

function submitForm(e){
    e.preventDefault()

    const is_video = $('input[name="videos"').val()

    if((is_video !== '') && (is_video !== '[]')){
        episode = JSON.parse(is_video).length
        let videos = []
        let part = {}
        let key = {0:'type', 1:'id', 2:'status'}

        for(let v=1; v<=episode; v++){
            for(let j=0; j<3; j++){
                part[key[j]] = $(`.viddata div:eq(${v}) input:eq(${j})`).val()
            }

            videos.push({...part})
        }

        const json = JSON.stringify(videos)
        $('input[name="videos"').val(json)
    }

    document.forms["form"].submit()
}

function deleteRow(e) {
    e.target.parentElement.remove()

    let index = parseInt(e.target.innerHTML)
    index = index - 1
    let json = $('input[name="videos"]').val()
    json = JSON.parse(json)
    json.splice(index, 1)
    episode = json.length
    json = JSON.stringify(json)
    $('input[name="videos"').val(json)

    for(let v=episode; v>-1; v--){
        $('.episode').eq(v).html(episode-v)
    }
}

// static/scripts/addCategory.js 

function getCategory(){
    const category = $('#category option:selected').text()
    $('select').prop('selectedIndex',0)
    let categories = $('[name=categories]').val()
    if(categories === ''){
        categories += category
    }else{
        categories += (`, ${category}`)
    }

    $('[name=categories]').val(categories)
}

TV Channel Website: Logout Functionality

Sokhavuth TIN — Fri, 26 Aug 2022 08:13:00 +0000

GitHub: https://github.com/Sokhavuth/TV-Channel
Vercel: https://khmerweb-tv-channel.vercel.app/login

When a user logs out of the dashboard, we need to delete his/her user data encoded as a jwt stored in Redis database. We need also to delete the session id stored as a cookie in his/her browser. After deleting both jwt and cookie, we can send the user back to the login page.

# routes/frontend/login.py

from bottle import Bottle, get, post, redirect
from controllers.frontend.login import Login
import config

app = Bottle()
login = Login()

@app.get("/")
def getLogin():
    if(config.checkLogged()):
        return redirect("/admin/post")
    else:
        return login.getPage()


@app.post("/")
def postLogin():
    return login.postItem()


@app.get("/logout")
def logout():
    if(config.checkLogged()):
        return login.logOut()
    else:
       return redirect("/login")

# controllers/frontend/login.py

import config, copy, hashlib, jwt, uuid
from datetime import datetime, timezone, timedelta
from bottle import template, request, response, redirect
from models.user import User


class Login:
    def __init__(self):
        settings = copy.deepcopy(config.settings)
        self.setup = settings()
        self.redis = config.redis
        self.secret_key = config.secret_key
        self.user = User()


    def getPage(self):
        self.setup["pageTitle"] = "Log into Admin Page"
        self.setup["route"] = "/login"

        return template("base", data=self.setup)


    def postItem(self):
        password = request.forms.getunicode('password')
        email = request.forms.getunicode('email')

        user = self.user.checkUser(email)

        if user:
            passw = hashlib.sha512(password.encode("utf-8") + user["salt"]).hexdigest()
            if(passw == user["password"]):
                self.setup["pageTitle"] = 'Post Page'

                payload = {
                    "id": user["id"],
                    "role": user["role"],
                    "name": user["title"],
                }

                exp = datetime.now(timezone.utc) + timedelta(seconds=60*60*24*15)

                myjwt = jwt.encode({"user": payload, "exp": exp }, self.secret_key, algorithm="HS256")
                sessionid = uuid.uuid4().hex
                self.redis.set(sessionid, myjwt)
                self.redis.expire(sessionid, 60*60*24*15)
                response.set_cookie('sessionid', sessionid, path='/', secret=self.secret_key)

                return redirect('/admin/post')
            else:
                self.setup["pageTitle"] = 'Log into Admin Page'
                self.setup['message'] = 'Your password is wrong!'
                self.setup['route'] = '/login'
                return template("base", data=self.setup)
        else:
            self.setup["pageTitle"] = 'Log into Admin Page'
            self.setup['message'] = 'Your Email is wrong!'
            self.setup['route'] = '/login'
            return template("base", data=self.setup)


    def logOut(self):
        sessionid = request.get_cookie('sessionid', secret=self.secret_key)
        if(sessionid):
            self.redis.delete(sessionid)
            response.delete_cookie("sessionid", path="/", secret=self.secret_key)
            return redirect("/login")

TV Channel Website: Dashboard Index Page

Sokhavuth TIN — Fri, 26 Aug 2022 04:24:00 +0000

GitHub: https://github.com/Sokhavuth/TV-Channel
Vercel: https://khmerweb-tv-channel.vercel.app/login

After the route to the future dashboard was established, we can start to build the dashboard by creating the index page first. This page will be served as the basis of all pages.

# routes/backend/post.py

from bottle import Bottle, get, redirect
from controllers.backend.post import Post
import config


app = Bottle()
post = Post()

@app.get("/")
def getPage():
    if(config.checkLogged()):
        return post.getPage()
    else:
        redirect("/login")

# controllers/backend/post.py

import config, copy
from bottle import template, redirect, request

class Post:
    def __init__(self):
        self.setup = copy.deepcopy(config.settings())


    def getPage(self):
        self.setup["pageTitle"] = "POST PAGE"
        self.setup["route"] = "/admin/post"
        user = config.checkLogged()
        if("name" in user):
            self.setup["username"] = user["name"]

        return template("base", data=self.setup)

<!--views/backend/index.tpl-->

<link rel="stylesheet" href="/static/styles/backend/index.css" />

<section class="Index">
    <header>
        <div class="inner region">
            <div class="page-title">{{ data["pageTitle"] }}</div>
            <form action="/admin/search" method="post">
                <select name="searchtype">
                    <option>Post</option>
                    <option>Category</option>
                    <option>User</option>
                </select>
                <input type="text" name="q" required />
                <input type="submit" value="Search" />
            </form>
            <div class="logout">
                {{ data["username"]}} | <a href="/">Home</a> | <a href="/login/logout">Logout</a>
            </div>
        </div>
    </header>

    <div class="main region">
        <div class="sidebar">
            <div class="inner">
                <a href="/admin/post"><img src="/static/images/movie.png" /></a>
                <a href="/admin/post">Post</a>

                <a href="/admin/category"><img src="/static/images/category.png" /></a>
                <a href="/admin/category">Category</a>

                <a href="/admin/upload"><img src="/static/images/upload.png" /></a>
                <a href="/admin/upload">Upload</a>

                <a href="/admin/user"><img src="/static/images/users.png" /></a>
                <a href="/admin/user">User</a>

                <a href="/admin/setting"><img src="/static/images/setting.png" /></a>
                <a href="/admin/setting">Settings</a>
            </div>
        </div>
        <div class="content">Content</div>
    </div>

    <div class="footer region">
        <div class="info">Total number of items:</div>
        <ul></ul>
        <div class="pagination">
            <img onclick="paginate(`{{ data['route'] }}`)" src="/static/images/load.png" />
        </div>

        <div class="credit">
            <a href="https://khmerweb.vercel.app/">&copy: Khmer Web 2022</a>
        </div>
    </div>
</section>

/* public/styles/backend/index.css */

.Index header{
    background-color: var(--background);
    margin-bottom: 20px;
    border-bottom: 7px solid white;
}

.Index header .inner{
    display: grid;
    grid-template-columns: 25% auto 25%;
    align-items: center;
    padding: 10px 0;
}

.Index header .inner .page-title{
    font: 20px/1.5 Anton;
}

.Index header .inner form{
    display: grid;
    grid-template-columns: 20% auto 20%;
}

.Index header .inner form input,
.Index header .inner form select{
    font: var(--bordy-font);
    padding: 1px 5px;
}

.Index header .inner .logout{
    text-align: right;
}

.Index header .inner .logout a{
    color: white;
}

.Index .main{
    display: grid;
    grid-template-columns: auto 75%;
    grid-gap: 10px;
}

.Index .main .sidebar{
    background-color: var(--background);
    padding: 20px;
}

.Index .main .sidebar .inner{
    display: grid;
    grid-template-columns: 25% auto;
    grid-gap: 15px;
    align-items: center;
}

.Index .main .sidebar .inner img{
    width: 100%;
    float: left;
}

.Index .main .sidebar .inner a{
    font: 18px/1.5 Oswald;
    color: white;
}

.Index .footer{
    padding: 10px 0 30px;
}

.Index .footer .info{
    background-color: var(--background);
    text-align: center;
    padding: 5px 0;
}

.Index .footer ul{
    margin: 10px 0;
}

.Index .footer .pagination{
    background-color: var(--background);
    text-align: center;
}

.Index .footer .pagination img{
    padding-top: 5px;
}

.Index .footer .pagination img:hover{
    cursor: pointer;
    opacity: 0.7;
}

.Index .footer .credit{
    padding-top: 30px;
    text-align: center;
}

TV Channel Website: Route to Dashboard

Sokhavuth TIN — Thu, 25 Aug 2022 12:04:00 +0000

GitHub: https://github.com/Sokhavuth/TV-Channel
Vercel: https://khmerweb-tv-channel.vercel.app/login

To be able to build a dashboard, we need to define a route to that page first. This route will be linked to the Post class in the controllers section that in turn will be linked to the views section.

# index.py

from bottle import static_file, get
from routes.frontend import index
from routes.frontend import login
from routes.backend import admin


app = index.app
app.mount("/login", login.app)
app.mount("/admin", admin.app)

@app.get('/static/<filepath:path>')
def staticFile(filepath):
    return static_file(filepath, root="public")


###################################################################
import socket
host = socket.getfqdn()    
addr = socket.gethostbyname(host)
if(addr == '127.0.1.1'):
    app.run(host='localhost', port=8000, debug=True, reloader=True)

###################################################################

# routes/backend/admin.py

from bottle import Bottle


app = Bottle()

from . import post
app.mount("/post", post.app)

# routes/backend/post.py

from bottle import Bottle, get
from controllers.backend.post import Post


app = Bottle()
post = Post()

@app.get("/")
def getPage():
    return post.getPage()

# controllers/backend/post.py

import config, copy
from bottle import template, redirect, request

class Post:
    def __init__(self):
        self.setup = copy.deepcopy(config.settings())


    def getPage(self):
        self.setup["pageTitle"] = "Post Page"
        self.setup["route"] = "/admin/post"

        return template("base", data=self.setup)