Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Laravel 10</title>
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
- </head>
- <body>
- <nav class="navbar navbar-expand-lg bg-body-tertiary">
- <div class="container-fluid">
- <a class="navbar-brand" href=".">Home</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
- <li class="nav-item">
- <a class="nav-link" href="#">Profile</a>
- </li>
- </ul>
- <form id="search" class="d-flex" role="search">
- <input class="form-control me-2" v-model="search" ref="search" type="search" placeholder="Search" aria-label="Search">
- <button class="btn btn-outline-success" @click="searchData" type="button">Search</button>
- </form>
- </div>
- </div>
- </nav>
- <br>
- <div class="container" id="app">
- <div class="card">
- <div class="card-body">
- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal_add">Add</button>
- <div class="table-responsive">
- <table class="table table-striped">
- <thead>
- <tr>
- <th scope="col">#</th>
- <th scope="col">Name</th>
- <th scope="col">Cover</th>
- <th scope="col">Price</th>
- <th scope="col">Action</th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="(book,i) in books">
- <th scope="row">@{{ i=i+1 }}</th>
- <td>@{{book.name}}</td>
- <td>
- <img :src="loadImage(book.cover)" width="50" height="50" alt="">
- </td>
- <td>@{{book.price}}</td>
- <td>
- <button type="button" @click="updateData(book)" data-bs-toggle="modal" data-bs-target="#modal_edit" class="btn btn-warning btn-sm">Update</button>
- <button type="button" @click="deleteData(book.id)" class="btn btn-danger btn-sm">x</button>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- </div>
- <!-- Modal -->
- <div class="modal fade" id="modal_add" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
- </div>
- <div class="modal-body">
- <div class="input-group mb-3">
- <span class="input-group-text" id="basic-addon1">Name</span>
- <input type="text" class="form-control" v-model="name" placeholder="Name" ref="name" aria-label="Name"
- aria-describedby="basic-addon1">
- </div>
- <div class="input-group mb-3">
- <span class="input-group-text" id="basic-addon1">Cover</span>
- <input type="text" class="form-control" v-model="cover" placeholder="Cover" ref="cover" aria-label="Name"
- aria-describedby="basic-addon1">
- </div>
- <div class="input-group mb-3">
- <span class="input-group-text" id="basic-addon1">Price</span>
- <input type="number" class="form-control" v-model="price" placeholder="Price" ref="price" aria-label="Name"
- aria-describedby="basic-addon1">
- </div>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary" @click="addData">Save</button>
- </div>
- </div>
- </div>
- </div>
- <!-- Modal -->
- <div class="modal fade" id="modal_edit" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
- </div>
- <div class="modal-body">
- <div class="input-group mb-3">
- <span class="input-group-text" id="basic-addon1">Name</span>
- <input type="text" class="form-control" v-model="name" placeholder="Name" ref="name" aria-label="Name" aria-describedby="basic-addon1">
- </div>
- <div class="input-group mb-3">
- <span class="input-group-text" id="basic-addon1">Cover</span>
- <input type="text" class="form-control" v-model="cover" placeholder="Cover" ref="cover" aria-label="Name" aria-describedby="basic-addon1">
- </div>
- <div class="input-group mb-3">
- <span class="input-group-text" id="basic-addon1">Price</span>
- <input type="number" class="form-control" v-model="price" placeholder="Price" ref="price" aria-label="Name" aria-describedby="basic-addon1">
- </div>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary" @click="updateData">Save</button>
- </div>
- </div>
- </div>
- </div>
- <script>
- const _TOKEN_ = "<?= csrf_token() ?>";
- var app= new Vue({
- el : "#app",
- data : {
- books: null
- },
- methods: {
- loadImage: function(image){
- return 'storage/'+image
- },
- updateData : function(data){
- edit.name = data.name;
- edit.cover = data.cover;
- edit.price = data.price;
- edit.id = data.id;
- },
- loadData: async function(){
- try {
- const response = await axios.get('/books');
- this.books = response.data;
- } catch (error) {
- console.error(error);
- }
- },
- deleteData: function(id){
- axios.post('/book-delete', {
- id: id,
- _token : _TOKEN_
- })
- .then(function (response) {
- alert("success delete data")
- window.location.href="."
- })
- .catch(function (error) {
- console.log(error);
- });
- }
- },
- mounted() {
- this.loadData();
- },
- })
- new Vue({
- el : "#modal_add",
- data: {
- name: null,
- cover: null,
- price: null
- },
- methods: {
- addData: function(){
- if (this.name==null){
- this.$refs.name.focus();
- return;
- }
- if (this.cover==null){
- this.$refs.cover.focus();
- return;
- }
- if (this.price==null){
- this.$refs.price.focus();
- return;
- }
- axios.post('/book-add', {
- name: this.name,
- cover:this.cover,
- price:this.price,
- _token : _TOKEN_
- })
- .then(function (response) {
- alert("success add data")
- app.loadData();
- })
- .catch(function (error) {
- console.log(error);
- });
- }
- },
- })
- new Vue({
- el : "#search",
- data : {
- search :null
- },
- methods: {
- searchData: function(){
- if (this.search==null){
- this.$refs.search.focus();
- return;
- }
- axios.post('/book-search', {
- search: this.search,
- _token : _TOKEN_
- })
- .then(function (response) {
- var obj = response.data;
- app.books = obj;
- })
- .catch(function (error) {
- console.log(error);
- });
- }
- },
- })
- var edit= new Vue({
- el : "#modal_edit",
- data : {
- name: null,
- cover : null,
- price : null,
- id: null
- },
- methods: {
- updateData: function(){
- if (this.name==null){
- this.$refs.name.focus();
- return;
- }
- if (this.cover==null){
- this.$refs.cover.focus();
- return;
- }
- if (this.price==null){
- this.$refs.price.focus();
- return;
- }
- axios.post('/book-update', {
- id:this.id,
- name: this.name,
- cover:this.cover,
- price:this.price,
- _token : _TOKEN_
- })
- .then(function (response) {
- alert("success update data")
- app.loadData();
- })
- .catch(function (error) {
- console.log(error);
- });
- }
- },
- })
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement