active-fox-2018 · rachmadza · Feb 18, 2019
diff --git a/client/components/articles.js b/client/components/articles.js
@@ -0,0 +1,36 @@
+Vue.component('article_page', {
+  data: () => {
+      return {
+      }
+  },
+
+  props: ['article','DeleteArticle'],
+  methods: {
+
+  },
+
+  template: `
+  <div class="card">
+    <div class="card-body">
+      <h5 class="card-title">{{article.title}}</h5>
+      <img src="" alt="">Ini image
+      <h6 class="card-subtitle mb-2 text-muted">{{article.author}}</h6>
+      <h6 class="card-subtitle mb-2 text-muted">{{article.created_at}}</h6>
+      <p class="card-text">{{article.content}}</p>
+      <div class="d-flex flex-nowrap bd-highlight">
+          <div class="order-1 p-2 bd-highlight">
+              <a href="#" class="card-link">
+                <i class="fas fa-edit"></i>
+              </a>
+          </div>
+          <div class="order-2 p-2 bd-highlight">
+              <a v-on:click.prevent="DeleteArticle(article._id)" class="card-link">
+                <i class="far fa-trash-alt"></i>
+              </a>
+              <a href="#" class="btn btn-default"> <span class="glyphicon glyphicon-trash"></span></a>
+          </div>
+      </div>
+    </div>
+  </div>
+  `
+})
diff --git a/client/components/login.js b/client/components/login.js
@@ -0,0 +1,14 @@
+Vue.component('login', {
+  data: function () {
+      return {
+      }
+  },
+
+  methods: {
+
+  },
+
+  template: `
+
+  `
+})
diff --git a/client/components/navbar.js b/client/components/navbar.js
@@ -0,0 +1,64 @@
+Vue.component('navbar', {
+  data: () => {
+    return {
+      article: {
+        title: "",
+        author: "",
+        content: "",
+        img: "",
+      },
+    }
+  },
+  components: {
+
+  },
+
+  props: ['user-logged-in','logout'],
+  methods: {
+
+  },
+  watch: {
+
+  },
+  mounted() {
+
+  },
+  template: `
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <a class="navbar-brand" href="#">Logo</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item active">
+          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Article</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Article2</a>
+          </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Dropdown
+          </a>
+          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <a class="dropdown-item" href="#">Action</a>
+            <a class="dropdown-item" href="#">Another action</a>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="#">Something else here</a>
+          </div>
+        </li>
+      </ul>
+      <form class="form-inline my-2 my-lg-0">
+        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+      </form>
+
+      <button v-if="userLoggedIn" @click='logout' class="btn btn-outline-light my-2 my-sm-0">Logout</button>
+    </div>
+  </nav>
+  `
+})
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+    <title>Mini Wordpress</title>
+  </head>
+
+  <body>
+    <div id="app">
+      <navbar :user-logged-in="userLoggedIn" :logout='logout'></navbar>
+
+      <!-- GUEST PRIVILAGES -->
+      <!-- login -->
+      <div v-if="!userLoggedIn">
+        <h2>Login Page</h2>
+        <form v-on:submit.prevent="login()">
+          <div class="form-group">
+            <label for="exampleInputEmail1">Email address</label>
+            <input v-model="user.email" type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+          </div>
+          <div class="form-group">
+            <label for="exampleInputPassword1">Password</label>
+            <input v-model="user.password" type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+          </div>
+          <div class="form-group form-check">
+            <input type="checkbox" class="form-check-input" id="exampleCheck1">
+            <label class="form-check-label" for="exampleCheck1">Check me out</label>
+          </div>
+          <button type="submit" class="btn btn-primary">Submit</button>
+        </form>
+      </div>
+      <!-- REGISTER -->
+
+
+
+      <!-- USER PRIVILAGES -->
+      <div class="row">
+        <!-- LIST ARTICLES -->
+        <div class="col-sm-7">
+          <article_page v-if="userLoggedIn" v-for="article in articles" :delete-article="deleteArticle" :key="article._id" v-bind:article='article'></article_page>
+        </div>
+        <!-- FORM CREATE NEW ARTICLE -->
+        <div class="col-sm-3">
+            <form v-if="userLoggedIn" v-on:submit.prevent="create()">
+              <div class="form-group">
+                <label for="">Title</label>
+                <input v-model="input.title" type="text" class="form-control" placeholder="Enter title">
+              </div>
+              <div class="form-group">
+                <label for="">Content</label>
+                <input v-model="input.content" type="text" class="form-control" placeholder="Enter content">
+              </div>
+              <div class="form-group">
+                <label for="">Author</label>
+                <input v-model="input.author" type="text" class="form-control" readonly>
+              </div>
+              <button type="submit" class="btn btn-primary">Submit</button>
+            </form>
+        </div>  
+      </div>
+      <!-- FORM UPDATE ARTICLE -->
+    </div>
+
+
+      <!-- Optional JavaScript -->
+      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
+      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
+      <script src="./components/navbar.js"></script>
+      <script src="./components/articles.js"></script>
+      <script src="./components/login.js"></script>
+      <script src="./scripts/script.js"></script>
+
+
+
+  </body>
+</html>
diff --git a/client/scripts/script.js b/client/scripts/script.js
@@ -0,0 +1,111 @@
+var app = new Vue({
+  el: '#app',
+  name: "mini_wp",
+  data: {
+    user: {
+      email: "",
+      password: "",
+    },
+    input: {
+      title: "",
+      content: "",
+      author: "Guest01",
+      image: ""
+    },
+    userLoggedIn: false,
+    articles: [],
+    showFormRegister: false,
+    showFormLogin: true,
+  },
+  created() {
+    this.checkUserLoggedIn();
+  },
+  mounted() {
+    this.get_article()
+  },
+  methods: {
+    checkUserLoggedIn() {
+      localStorage.token ? this.userLoggedIn = true : this.userLoggedIn = false;
+    },
+    get_article() {
+      axios({
+        method: "get",
+        url: "http://localhost:3000/article",
+        headers: {
+          token: localStorage.token
+        }
+      })
+        .then((result) => {
+          this.articles = result.data.Articles
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    login() {
+      axios({
+        method: "post",
+        url: "http://localhost:3000/login",
+        data: this.user
+      })
+        .then((result) => {
+          console.log(result, 'ini result dari login')
+          localStorage.setItem("token", result.data.token)
+          localStorage.setItem('name', result.data.name)
+          this.userLoggedIn = true
+          this.input.author = result.data.name || 'Guest01'
+        }).catch((err) => {
+          console.log(err);
+        });
+    },
+
+    create() {
+      axios({
+        method: "post",
+        url: "http://localhost:3000/article",
+        data: this.input,
+        headers: {
+          token: localStorage.token
+        }
+      })
+      .then((result) => {
+        console.log(result)
+        this.input.title = ""
+        this.input.content = ""
+        this.input.author = ""
+        this.input.image = ""
+        this.get_article()
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+    },
+
+    deleteArticle(id) {
+      // console.log('delete invoked', id)
+      axios({
+        method: "delete",
+        url: `http://localhost:3000/article/${id}`,
+        headers: {
+          token: localStorage.token
+        }
+      })
+      .then((result) => {
+        console.log('article deleted')
+
+        this.get_article();
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+    },
+
+    logout() {
+      console.log('logout invoked')
+      // this.isLogin = false
+      this.userLoggedIn = false
+      localStorage.clear()
+    }
+
+  },
+});
diff --git a/server/.env_template b/server/.env_template
diff --git a/server/.gitignore b/server/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+.env
diff --git a/server/app.js b/server/app.js
@@ -0,0 +1,36 @@
+const express = require('express')
+const mongoose = require('mongoose')
+const cors = require('cors')
+const app = express()
+const port = 3000
+
+require('dotenv').config()
+mongoose.connect('mongodb://localhost:27017/miniwordpress', { useNewUrlParser: true })
+
+const indexRoute = require('./routes/index')
+const articleRoute = require('./routes/route_article')
+
+app.use(cors())
+app.use(express.urlencoded({ extended: false }))
+app.use(express.json())
+
+app.use('/', indexRoute)
+app.use('/article', articleRoute)
+
+// app.get('/', (req, res) => {
+//   res.status(200).json({
+//     display: 'Masuk'
+//   })
+// })
+
+// app.post('/article', (req,res) => {
+//   res.status(201).json({
+//     article: req.body.data.article,
+//     description: req.body.data.description
+//   })
+//   console.log(req.body.data.article)
+// })
+
+app.listen(port, () => {
+  console.log('Listening on port ' + port)
+})