---
# System prepended metadata

title: แบบสอบถามของ อ.ป้อม

---

 # แบบสอบถามของ อ.ป้อม
 [กดลิงค์ ](http://gg.gg/ghd7y)
 ## Link API
http://10.105.0.127:8080/swagger-ui.html
https://github.com/axios/axios
 
 ## File all Project 
* [ลิงค์ ดาวน์โหลดโปรเจค เบื่องต้น](https://drive.google.com/open?id=1MjJKiHa0Mst1Y7nCiG9ZMfvCLly9MHL9) 
* [ลิงค์ดูธีม Aminlte 3 ](https://adminlte.io/themes/dev/AdminLTE/index.html)
* [Document Aminlte 3 ](https://adminlte.io/docs/3.0/)

## โปรแกรมที่ใช้สำหรับ
* [ VSCODE](https://code.visualstudio.com/download)
* [Xampp](https://code.visualstudio.com/download)

## Plugin Extension ที่ใช้
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
https://marketplace.visualstudio.com/items?itemName=Zaczero.bootstrap-v4-snippets
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
https://marketplace.visualstudio.com/items?itemName=octref.vetur
https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

##  กด F1 เลือก setting.json เพิ่ม 
```json=
 "editor.formatOnSave": true
```



## index.html 
```htmlmixed=
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Workshop</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>

    <div id="app">
        <!-- <h1>{{ number }}</h1>
        input A<input v-model="inputA" type="text">
        <br>
        input B<input v-model="inputB" type="text">
        <br>
        <button v-on:click="calculation()">CALCULATION</button>
        <br>
        result <input v-bind:value="result" type="text">
        <br>
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>firstName</th>
                    <th>lastName</th>
                    <th>projectName</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,key) in dataRaw">
                    <td>{{key+1}}</td>
                    <td>{{ item.firstName }}</td>
                    <td>{{ item.lastName }}</td>
                    <td>{{ item.projectName }}</td>
                </tr>
            </tbody>
        </table>
        <br> -->
        <h1>List Supervisor All</h1>
        <table border='1'>
            <tr>
                <th>ID</th>
                <th>NAME</th>
                <th>EMAIL</th>
                <th>PHONE</th>
            </tr>
            <tr v-for='data in supervisorArray'>
                <td>{{data.id}}</td>
                <td>{{data.supName}}</td>
                <td>{{data.supEmail}}</td>
                <td>{{data.supPhone}}</td>
            </tr>
        </table>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="/asset/js/vue.js"></script>
    <script src="/asset/js/app.js"></script>


</body>

</html>
```
# app.js
```jsx=
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        show: true,
        number: 1.5 + 1.8,
        score: 79,
        inputA: null,
        inputB: null,
        result: null,
        dataRaw: [{
                firstName: 'prayut',
                lastName: 'junjung',
                projectName: 'projectA'
            },
            {
                firstName: 'pravit',
                lastName: 'junjung',
                projectName: 'projectB'
            },
            {
                firstName: 'preecha',
                lastName: 'junjung',
                projectName: 'projectC'
            }
        ],
        supervisorArray: []
    },
    created() {
        this.supervisorAll();
    },
    methods: {
        calculation: function () {

            this.result = parseFloat(this.inputA) + parseFloat(this.inputB);

        },
        supervisorAll: function () {
            var that = this;
            axios.get('http://10.105.0.127:8080/supervisor/findAllSupervisor').then(function (res) {
                console.log(res);
                that.supervisorArray = res;
            });
        }
    },
});
```

#link vue js
https://cdn.jsdelivr.net/npm/vue

# 2. เริ่มทำ WorkShop

![](https://i.imgur.com/Bqu5VoG.png)

### index.html
```htmlembedded=
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="./assets/css/adminlte.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./assets/plugins/fontawesome-free/css/all.css">

    <!-- SweetAlert2 -->
</head>

<body class="hold-transition sidebar-mini">
    <div class="wrapper" id="app">
        <router-view></router-view>
    </div>

    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
    <script src="./assets/plugins/jquery/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>

    <!-- Bootstrap 4 -->
    <script src="./assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="./assets/plugins/sweetalert2/sweetalert2.min.js"></script>
    <!-- AdminLTE App -->
    <script src="./assets/js/adminlte.min.js"></script>
    <!-- Vue cdn App -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
    <script src="./assets/js/axios.min.js"></script>
    <!--  App js -->
    <script type='module' src="./assets/js/frontend-app/app.js"></script>

</body>

</html>
```

### app.js
```javascript=
const student = httpVueLoader("./assets/js/frontend-app/component/student.vue");
const router = new VueRouter({
    routes: [
        // {
        //     path: '/',
        //     component: dashboard
        // },
        // {
        //     path: '/',
        //     component: student
        // },
        {
            path: '/student',
            component: student
        },
        // {
        //     path: '/project',
        //     component: project
        // },
        // {
        //     path: '/supervisor',
        //     component: supervisor
        // },
        {
            path: '*',
            redirect: '/'
        }
    ]
});

new Vue({
    router,
    el: '#app',
});
```

### student.vue
```javascript=
<template>
  <div>
    <div class="col-lg-3 col-6">
      <div class="info-box">
        <span class="info-box-icon bg-warning">
          <i class="far fa-arrow-alt-circle-up"></i>
        </span>

        <div class="info-box-content text-center">
          <span class="info-box-text">ข้อมูลนักศึกษา</span>
          <h3 class="info-box-number">{{dataStudent.length}}</h3>
        </div>
        <!-- /.info-box-content -->
      </div>
    </div>

    <div class="row">
      <div class="col-5">
        <div class="card">
          <div class="card-header">สร้างข้อมูลนักศึกษา</div>
          <div class="card-body">
            <form>
              <div class="form-group">
                <label>รหัสนักศึกษา</label>
                <input
                  type="text"
                  placeholder="กรอก รหัสนักศึกษา"
                  class="form-control"
                  v-model="studentObj.stuCode"
                />
              </div>
              <div class="form-group">
                <label>ชื่อนักศึกษา</label>
                <input
                  type="text"
                  placeholder="กรอก ชื่อนักศึกษา"
                  class="form-control"
                  v-model="studentObj.stuName"
                />
              </div>
              <div class="form-group">
                <label>อีเมล</label>
                <input
                  type="email"
                  placeholder="กรอก อีเมล"
                  class="form-control"
                  v-model="studentObj.stuEmail"
                />
              </div>
              <div class="form-group">
                <label>เบอร์โทรศัพท์</label>
                <input
                  type="text"
                  placeholder="กรอก เบอร์โทรศัพท์"
                  class="form-control"
                  v-model="studentObj.stuPhone"
                />
              </div>
              <button
                class="btn btn-success"
                v-on:click="saveStudent()"
                v-if="evenForm"
              >บันทึกข้อมูล</button>
              <button class="btn btn-warning" v-on:click="updateAll()" v-else>บันทึกแก้ไขข้อมูล</button>
            </form>
          </div>
        </div>
      </div>
      <div class="col-5">
        <div class="card">
          <div class="card-header">
            <h4>ข้อมูลนักศึกษา</h4>
          </div>
          <div class="card-body">
            <table class="table table-sm table-striped" wid="80">
              <thead>
                <tr>
                  <th>#</th>
                  <th width="20">StudentCode</th>
                  <th width="40">StudentName</th>
                  <th width="10">Phone</th>
                  <th width="10">Email</th>
                  <th></th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(stu,index) in dataStudent" :key="index">
                  <td scope="row">{{index+1}}</td>
                  <td>{{stu.stuCode}}</td>
                  <td>{{stu.stuName}}</td>
                  <td>{{stu.stuPhone}}</td>
                  <td>{{stu.stuEmail}}</td>
                  <td>
                    <button class="btn btn-sm btn-warning" v-on:click="updateStudent(stu)">
                      <i class="fas fa-pen-square"></i>
                    </button>
                  </td>
                  <td>
                    <button class="btn btn-sm btn-danger" v-on:click="deleteStudent(stu.stuId)">
                      <i class="fas fa-trash"></i>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const Toast = Swal.mixin({
  position: "center",
  showConfirmButton: false,
  timer: 3000
});
module.exports = {
  data: function() {
    return {
      studentObj: {
        stuId: 0,
        stuCode: "",
        stuName: "",
        stuEmail: "",
        stuPhone: null,
        stuProCode: null,
        supId: 0
      },
      evenForm: true,
      dataStudent: [],
      ip_serve: "http://10.105.0.127:8080"
    };
  },
  created() {
    this.showData();
  },
  methods: {
    showData: function() {
      let that = this;
      axios.get(`${this.ip_serve}/student/findAllStudent`).then(function(res) {
        that.dataStudent = res.data;
      });
    },
    saveStudent: function() {
      let that = this;
      axios
        .post(`${this.ip_serve}/student/insertStudent`, this.studentObj)
        .then(function(res) {
          if (res.status == 200) {
            that.resetFrom();
            that.showData();
            alert("save OK");
          }
        });
    },
    deleteStudent: function(stuId) {
      let that = this;
      let cont = confirm("คุณต้องการลบข้อมูลหรือไม่ ?");
      if (cont) {
        axios
          .get(`${this.ip_serve}/student/deleteStudent/${stuId}`)
          .then(function(res) {
            that.showData();
          });
      }
    },
    updateStudent: function(stu) {
      this.studentObj = stu;
      this.evenForm = false;
    },
    updateAll: function() {
      let that = this;
      return axios
        .post(`${this.ip_serve}/student/editStudent`, this.studentObj)
        .then(function(res) {
          that.showData();
          that.resetFrom();
          alert("update OK");
          that.evenForm = true;
        });
    },
    resetFrom: function() {
      this.studentObj = {
        stuId: 0,
        stuCode: "",
        stuName: "",
        stuEmail: "",
        stuPhone: null,
        stuProCode: null,
        supId: 0
      };
    }
  }
};
</script>


```