victory-fox-2018 · agusrr93 · Sep 17, 2018 · Sep 18, 2018 · Sep 18, 2018
diff --git a/client/README.md b/client/README.md
@@ -0,0 +1,21 @@
+# rama
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
diff --git a/client/babel.config.js b/client/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "rama",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "vue": "^2.5.17",
+    "vue-router": "^3.0.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.0.3",
+    "@vue/cli-plugin-eslint": "^3.0.3",
+    "@vue/cli-service": "^3.0.3",
+    "@vue/eslint-config-standard": "^3.0.3",
+    "vue-template-compiler": "^2.5.17"
+  }
+}
diff --git a/client/postcss.config.js b/client/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/public/index.html b/client/public/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <script src="vendor/jquery/jquery.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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">   
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">   
+<title>Blog</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but rama doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -0,0 +1,204 @@
+<template>
+  <div id="app">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+      <div class="container">
+        <a class="navbar-brand" href="#">Blogger Overflow</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarResponsive">
+          <ul class="navbar-nav ml-auto">
+            <li class="nav-item">
+              <a class="nav-link" href="#">Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" data-toggle="modal" href="#loginmodal" v-if="!token">Login</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" data-toggle="modal" href="#registermodal" v-if="!token">Register</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" data-toggle="modal" href="#registermodal" v-if="token" v-on:click=logout>Logout</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>   
+
+   <div class="modal fade" id="loginmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header text-center">
+                <h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body mx-3">
+                <div class="md-form mb-5">
+                    <i class="fa fa-envelope prefix grey-text"></i>
+                    <input type="email" id="defaultForm-email" class="form-control validate" v-model="email">
+                    <label data-error="wrong" data-success="right" for="defaultForm-email">Your email</label>
+                </div>
+
+                <div class="md-form mb-4">
+                    <i class="fa fa-lock prefix grey-text"></i>
+                    <input type="password" id="defaultForm-pass" class="form-control validate" v-model="password">
+                    <label data-error="wrong" data-success="right" for="defaultForm-pass">Your password</label>
+                </div>
+
+                </div>
+                <div class="modal-footer d-flex justify-content-center">
+                    <button class="btn btn-default" v-on:click="login">Login</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal fade" id="registermodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header text-center">
+                    <h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body mx-3">
+                    <div class="md-form mb-5">
+                        <i class="fa fa-user prefix grey-text"></i>
+                        <input type="text" id="orangeForm-name" class="form-control validate" v-model="name">
+                        <label data-error="wrong" data-success="right" for="orangeForm-name">Your name</label>
+                    </div>
+                    <div class="md-form mb-5">
+                        <i class="fa fa-envelope prefix grey-text"></i>
+                        <input type="email" id="orangeForm-email" class="form-control validate" v-model="email">
+                        <label data-error="wrong" data-success="right" for="orangeForm-email">Your email</label>
+                    </div>
+
+                    <div class="md-form mb-4">
+                        <i class="fa fa-lock prefix grey-text"></i>
+                        <input type="password" id="orangeForm-pass" class="form-control validate" v-model="password">
+                        <label data-error="wrong" data-success="right" for="orangeForm-pass">Your password</label>
+                    </div>
+
+                </div>
+                <div class="modal-footer d-flex justify-content-center">
+                    <button class="btn btn-deep-orange" v-on:click="register">Sign up</button>
+                </div>
+            </div>
+        </div>
+  </div>
+    <div id="nav">
+      <router-link to="/">Home</router-link> 
+    </div>
+    <router-view/>
+  </div>
+</template>
+
+<style>
+    #app {
+      font-family: 'Avenir', Helvetica, Arial, sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      text-align: center;
+      color: #2c3e50;
+    }
+    #nav {
+      padding: 30px;
+    }
+    #nav a {
+      font-weight: bold;
+      color: #2c3e50;
+    }
+    #nav a.router-link-exact-active {
+      color: #42b983;
+    }
+</style>
+
+<script>
+    import axios from 'axios'
+
+    const data=[]
+    const dataLocal = JSON.parse(localStorage.getItem('data'))
+    const Token = dataLocal ? dataLocal[0].token : ''
+    const userId = dataLocal ? dataLocal[0].userId : ''
+
+    export default {
+        name: 'app',
+        data:function(){
+           return{
+             token:Token,
+             name:'',
+             email:'',
+             password:'',
+           }
+        },
+        methods:{
+          register: function() {
+              let self = this
+              axios({
+                method: 'POST',
+                url: `http://localhost:3000/users`,
+                data: {
+                  name: this.name,
+                  email: this.email,
+                  password: this.password
+                }
+              })
+                .then(() => {
+                  alert('Register berhasil!')
+                  this.login()
+                })
+                .catch(error => {
+                  if (error.response) {
+                      alert(error.response.data.error)
+                      self.error = ''
+                      self.error = error.response.data.error
+                  } else if (error.request) {
+                      console.log(error.request);
+                  } else {
+                      console.log('Error', error.message);
+                  }
+                })
+            },
+          login: function() {
+            let self = this
+            axios({
+              method: 'POST',
+              url: `http://localhost:3000/users/login`,
+              data: {
+                email: this.email,
+                password: this.password
+              }
+            })
+            .then(response => {
+                let obj = {
+                  token: response.data.token,
+                  userId: response.data.userId,
+                  cart: [],
+                  totalPrice: 0
+                }
+                data.push(obj)
+                localStorage.setItem('data', JSON.stringify(data))
+                location.reload()
+              })
+              .catch(error => {
+                if (error.response) {
+                    alert('Login gagal!')
+                    self.error = ''
+                    self.error = 'Login gagal!'
+                } else if (error.request){ 
+                    console.log(error.request)
+                } else {   
+                    console.log('Error', error.message)
+                }
+              })
+          },
+          logout: function() {
+              localStorage.removeItem('data')
+              location.reload()
+          }
+      }
+    }
+</script>
diff --git a/client/src/assets/logo.png b/client/src/assets/logo.png
diff --git a/client/src/components/content-cart.vue b/client/src/components/content-cart.vue
@@ -0,0 +1,63 @@
+<template>
+    <div>
+       <div class="card mb-4" v-for="(article, index) in dataartikel" v-bind:key="index">
+            <div class="card-body">
+            <h2 class="card-title">{{article.title}}</h2>
+            <p class="card-text">{{article.content}}</p>
+            <a href="#" class="btn btn-primary">Read More &rarr;</a>
+            </div>
+               <div class="card-footer text-muted">
+                    Posted on January 1, 2017 by
+               <a href="#">{{article.userId.name}}</a>
+            </div>    
+        </div>
+    </div>
+</template>
+<script>
+    import axios from 'axios'
+
+    const dataLocal = JSON.parse(localStorage.getItem('data'))
+    const Token = dataLocal ? dataLocal[0].token : ''
+    const users = dataLocal ? dataLocal[0].userId : ''
+
+    export default {
+        name: 'app',
+        data:function(){
+           return{
+             title:'',
+             content:'',
+             token:Token,
+             dataartikel:[]
+           }
+        },
+        methods:{
+          getArticle: function() {
+              let self = this
+              axios({
+                method: 'GET',
+                url: `http://localhost:3000/articles/author`,
+              })
+              .then((article) => {
+                  var dataparse=article.data
+                  this.dataartikel=[]
+                  this.dataartikel=dataparse
+              })
+              .catch(error => {
+                  if (error.response) {
+                      alert(error.response.data.error)
+                      self.error = ''
+                      self.error = error.response.data.error
+                  } else if (error.request) {
+                      console.log(error.request);
+                  } else {
+                      console.log('Error', error.message);
+                  }
+                })
+          }},
+          created :function(){
+            this.getArticle()
+          }
+
+     }
+
+</script>