# แบบสอบถามของ อ.ป้อม
[กดลิงค์ ](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
### 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>
```
Sign in with Wallet
Connect another wallet