Posts

Showing posts from February, 2021

Dashboard Users Component

Image
Loading.... Loading.... Loading.... GitHub: "https://github.com/Sokhavuth/gazette Heroku: https://khmerweb-gazette.herokuapp.com/

Dashboard CKEditor Component

Image
Loading.... Loading.... Loading.... GitHub: "https://github.com/Sokhavuth/gazette Heroku: https://khmerweb-gazette.herokuapp.com/

Logout Functionality

Image
Loading.... Loading.... Loading.... GitHub: "https://github.com/Sokhavuth/gazette Heroku: https://khmerweb-gazette.herokuapp.com/

Dashboard Index Component

Image
Loading.... Loading.... Loading.... Loading.... GitHub: "https://github.com/Sokhavuth/gazette Heroku: https://khmerweb-gazette.herokuapp.com/

Graphql Apollo Client & Login Functionality

Image
Loading.... Loading.... GitHub: "https://github.com/Sokhavuth/gazette Heroku: https://khmerweb-gazette.herokuapp.com/

Graphql Express Server

Image
Loading.... Loading.... Loading.... Loading.... Loading.... GitHub: "https://github.com/Sokhavuth/gazette Heroku: https://khmerweb-gazette.herokuapp.com/

Custom Express Server

Image
Loading.... GitHub: "https://github.com/Sokhavuth/gazette Heroku: https://khmerweb-gazette.herokuapp.com/

Creating User Collection

Image
Loading.... Loading.... Loading.... GitHub: "https://github.com/Sokhavuth/gazette Heroku: https://khmerweb-gazette.herokuapp.com/

Login Form Component

Image
Loading.... Loading.... Loading.... GitHub: "https://github.com/Sokhavuth/gazette Heroku: https://khmerweb-gazette.herokuapp.com/

Frontend Header Component

Image
Loading.... Loading.... GitHub: "https://github.com/Sokhavuth/gazette Heroku: https://khmerweb-gazette.herokuapp.com/

Boilerplate Code

Image
Loading.... Loading.... GitHub: "https://github.com/Sokhavuth/gazette Heroku: https://khmerweb-gazette.herokuapp.com/

«DELETE» Post Functionality

Image
Loading.... Loading.... GitHub: "https://github.com/Sokhavuth/emultimedia Heroku: https://khmerweb-emultimedia.herokuapp.com/

«UPDATE» Post Functionality

Image
Loading.... Loading.... GitHub: "https://github.com/Sokhavuth/emultimedia Heroku: https://khmerweb-emultimedia.herokuapp.com/

Paginantion Functionality

Image
Loading.... GitHub: "https://github.com/Sokhavuth/emultimedia Heroku: https://khmerweb-emultimedia.herokuapp.com/

«CREATE & READ» Post Functionality

Image
Loading.... GitHub: "https://github.com/Sokhavuth/emultimedia Heroku: https://khmerweb-emultimedia.herokuapp.com/

‌‌‌‌‌«DELETE» Category Functionality

Image
Loading.... Loading.... Loading.... GitHub: "https://github.com/Sokhavuth/emultimedia Heroku: https://khmerweb-emultimedia.herokuapp.com/

«UPDATE» Category Functionality

Image
Loading.... Loading.... GitHub: "https://github.com/Sokhavuth/emultimedia Heroku: https://khmerweb-emultimedia.herokuapp.com/

Pagination Functionality

Image
Loading.... Loading.... GitHub: "https://github.com/Sokhavuth/emultimedia Heroku: https://khmerweb-emultimedia.herokuapp.com/

Listing Component

Image
Loading.... Loading.... Loading.... GitHub: "https://github.com/Sokhavuth/emultimedia Heroku: https://khmerweb-emultimedia.herokuapp.com/

«READ» Category Functionality

Image
Loading.... Loading.... Loading.... GitHub: "https://github.com/Sokhavuth/emultimedia Heroku: https://khmerweb-emultimedia.herokuapp.com/

«CREATE» Category Functionality

Image
' Loading.... Loading.... Loading.... Loading.... GitHub: "https://github.com/Sokhavuth/emultimedia Heroku: https://khmerweb-emultimedia.herokuapp.com/

Dashboard Category Component

Image
import React from 'react'; import './dcategory.scss'; import CKEditor from '../dckeditor/dckeditor.js'; import tool from '../../tool.js'; class DCategory extends React.Component{ constructor(props){ super(props); this.state = {date: false, time: false}; this.getDateTime(); } getDateTime = async () => { const dateTime = await tool.fetchAPI('/admin/category/api'); this.setState({date: dateTime.date, time: dateTime.time}); } render(){ return( <div className="DCategory"> <CKEditor /> <form className='category-form' > <input type='submit' /> <input type='text' name='category-name' placeholder='category name' required='required' /> <input type='date' value={this.state.date} name='date' required='requ...

CKEditor Component

Image
import React from 'react'; import { CKEditor } from '@ckeditor/ckeditor5-react'; import Editor from 'ckeditor5-custom-build/ckeditor'; import './dckeditor.scss' class DCKEditor extends React.Component{ constructor(props){ super(props); let editorConfig = { toolbar: ['fontfamily', 'fontsize', 'fontcolor', 'bold', 'italic', 'bulletedList', 'indent', 'outdent', 'numberedList', 'link', 'blockQuote', 'code', 'codeblock', 'imageinsert', 'mediaembed', 'undo', 'redo' ] }; this.state = { config: editorConfig } } render(){ return( <div className="CKEditor"> <div className='ckeditor'> <CKEditor editor={ Editor } config={ this.state.config } ...

Dashboard Sidebar Component

Image
import React from 'react'; import './dsidebar.scss'; import {Link} from 'react-router-dom'; class DSidebar extends React.Component{ render(){ return( <div className="DSidebar region"> <div className="menu-item"> <Link to='/admin/post'><img alt="" src='/images/posting.png' /></Link> <Link to='/admin/post'>Post</Link> </div> <div className="menu-item"> <Link to='/admin/page'><img alt="" src='/images/paging.png' /></Link> <Link to='/admin/page'>Page</Link> </div> <div className="menu-item"> <Link to='/admin/category'><img alt="" src='/imag...

Logout Functionality

Image
import React from 'react'; import {Redirect} from 'react-router-dom'; import './dheader.scss'; import tool from '../../tool'; class DHeader extends React.Component{ constructor(props){ super(props); this.state = { dTitle: 'Dashboard', redirect: false } this.checkLogin(); } checkLogin = async () => { const result = await tool.checkLogin(); if(!result){ this.setState({ redirect: '/login' }) } } logOut = async (uri) => { const result = await tool.fetchAPI(uri); if(result.success){ this.setState({ redirect: '/' }) } } render(){ if(this.state.redirect) { return <Redirect to={this.state.redirect} /> } return( <div className="DHeader"> <section id="header"> <div id="header-outer"> ...

Dashboard Header Component

Image
import React from 'react'; import {Redirect} from 'react-router-dom'; import './dheader.scss'; import tool from '../../tool'; class DHeader extends React.Component{ constructor(props){ super(props); this.state = { dTitle: 'Dashboard', redirect: false } this.checkLogin(); } checkLogin = async () => { const result = await tool.checkLogin(); if(!result){ this.setState({ redirect: '/login' }) } } render(){ if(this.state.redirect) { return <Redirect to={this.state.redirect} /> } return( <div className="DHeader"> <section id="header"> <div id="header-outer"> <div className="header-inner region"> <h1>{this.state.dTitle}</h1> <form id="search" action=...

Checking Login Functionality

Image
import React from 'react'; import './login.scss'; import {Redirect} from 'react-router-dom'; import tool from '../tool.js'; import utility from '../header/headerjs'; class Login extends React.Component{ constructor(props){ super(props); this.state = { message: '', email: '', password: '', siteTitle: 'Dashboard', redirect: false }; this.checkLogin(); } checkLogin = async () => { const result = await tool.checkLogin(); if(result){ clearTimeout(utility.t); this.setState({ redirect: '/admin' }) } } onChangeHandler = (event) => { let nam = event.target.name; let val = event.target.value; this.setState({[nam]: val}); } onSubmitHandler = async (event) => { event.preventDefault(); const option = { email: this.state.email, password: this.state.password } const res...

Authenticating Functionality

Image
// routes/admin.js var express = require('express'); var router = express.Router(); router.post('/login', function(req, res, next) { const login = require('../controllers/login'); login.postLogin(req, res); }); module.exports = router; // controllers/login.js class Login{ constructor(){ this.deepcopy = require('deepcopy'); this.vdict = require('../config'); this.usersdb = require('../models/usersdb'); this.bcrypt = require('bcryptjs'); } postLogin(req, res){ const self = this; const data = this.deepcopy(this.vdict); delete data.databaseAccess; this.usersdb.checkUser(req, function(user){ if(user){ if(self.bcrypt.compareSync(req.body.password, user.password)){ req.session.user = user; data.success = true; res.json(data); }else{ data.message = 'The password is wrong.'; data.success = false; res...

Connecting to MongoDB Atlas

Image
var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); const session = require('express-session'); const MongoStore = require('connect-mongo')(session); const mongoose = require('mongoose'); const vdict = require('./config'); const databaseAccess = vdict.databaseAccess; mongoose.connect(databaseAccess, {useNewUrlParser: true, useUnifiedTopology: true}); global.__basedir = __dirname; process.env.TZ = "Asia/Phnom_Penh"; var indexRouter = require('./routes/index'); var adminRouter = require('./routes/admin'); var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false...

Login Form Component

Image
import React from 'react'; import './login.scss'; import tool from '../tool'; class Login extends React.Component{ constructor(props){ super(props); this.state = { message: '', email: '', password: '' }; } onChangeHandler = (event) => { let nam = event.target.name; let val = event.target.value; this.setState({[nam]: val}); } onSubmitHandler = async (event) => { event.preventDefault(); const data = await tool.fetchPostAPI('/admin/login', this.state); } render(){ return( <div className='Login region'> <form id="login" action="/admin/login" method="post" onSubmit={this.onSubmitHandler}> <span>Email:</span><input onChange={this.onChangeHandler} type="email" name="email" required /> <span...

Route Module

Image
import {Route} from "react-router-dom"; import Menu from '../header/menu.js'; import Header from '../header/header.js'; import Footer from '../footer/footer.js' import Channel from '../channel/channel.js'; import Login from '../login/login.js'; const indexRouter = [ <Route exact path="/"> <Header /> <Menu /> <Channel /> <Footer /> </Route>, <Route exact path="/news"> <Header /> <Menu /> <h1>News</h1> <Footer /> </Route>, <Route exact path="/contact"> <Header /> <Menu /> <h1>Contact</h1> <Footer /> </Route>, <Route exact path="/about"> <Header /> <Menu /> <h1>About</h1...

Menu Component

Image
import React from 'react'; import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom"; import Channel from '../channel/channel.js'; class Menu extends React.Component{ constructor(props){ super(props); this.state = {redirec:'/admin'}; } mobileMenu = () => { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } render(){ return( <Router> <div className="main-menu-outer"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link> <nav className='main-menu region'> <div className="topnav" id="myTopnav"> ...

Footer Component

Image
import React from 'react'; import './footer.scss'; class Footer extends React.Component{ render(){ return( <div className="Footer"> <p>&copy; Copyright 2021 by <a href="https://www.khmerweb.app/">Khmer Web</a></p> </div> ); } } export default Footer; .Footer{ margin: 30px 0; } GitHub: "https://github.com/Sokhavuth/emultimedia Heroku: https://khmerweb-emultimedia.herokuapp.com/

Channel Component

Image
import React from 'react'; import './channel.scss'; import channel from './channeljs' class Channel extends React.Component{ constructor(props){ super(props); this.state = {}; } componentDidMount(){ const script = document.createElement("script"); script.src = "https://apis.google.com/js/client.js"; script.onload = () => { window.gapi.load('client', () => { channel.getVidContent(); }); }; document.body.appendChild(script); } render(){ return( <div className="Channel"> <section className="panel region"> <div id="video-screen"></div> <div id="navigation"> <img alt='' onClick={()=>channel.getVidContent(channel.yt_prevPageToken)} src={'/images/left.png'} /> <img alt=...

Header Component

Image
import React from 'react'; import './header.scss'; import utility from '../utility'; class Header extends React.Component{ constructor(props){ super(props); this.state = {}; } async fetchAPI(){ let url = '/api'; try{ let res = await fetch(url); return await res.json(); }catch(error){ console.log(error); } } mobielMenu = () => { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } async componentDidMount(){ this.setState(await this.fetchAPI()); document.title = this.state.siteTitle; utility.clock(); const options = {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'}; document.getElementById('date').innerHTML = (new Date()).toLocaleDateStri...

Boilerplate Code

Image
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </...