Skip to content

Instantly share code, notes, and snippets.

@sapito169

sapito169/index.html

Created November 2, 2022 00:24
Show Gist options
  • Save sapito169/a1e3ab21751df8aa53efd4e17a5b8fc0 to your computer and use it in GitHub Desktop.
Save sapito169/a1e3ab21751df8aa53efd4e17a5b8fc0 to your computer and use it in GitHub Desktop.
Download ZIP
alpine.js crud with backend
Raw
index.html
<!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://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<title>CRUD Application with Alpine.js</title>
</head>
<body x-data="studentCrud()" x-init="tasks = await (await fetch('http://localhost:3000/items')).json()">
<div class="container-fluid mt-5" >
<button @click.prevent="beginadd()"
class="btn btn-info" x-show="!individual">Add</button>
</div>
<div class="container-fluid mt-5" x-show="individual">
<div class="col-4">
<div class="card">
<div class="card-header text-light bg-dark">
<span x-show="addMode">Create Student</span>
<span x-show="!addMode">Edit Student</span>
</div>
<div class="card-body">
<form @submit.prevent="saveData" x-show="addMode">
<div class="form-group">
<label>title</label>
<input x-model="form.title" type="text" class="form-control" placeholder="Enter title">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" @click.prevent="cancelAdd">Cancel Add</button>
</div>
</form>
<form @submit.prevent="updateData" x-show="!addMode">
<div class="form-group">
<label>Id</label>
<input x-model="form.id" type="text" class="form-control" disabled >
</div>
<div class="form-group">
<label>title</label>
<input x-model="form.title" type="text" class="form-control" placeholder="Enter title">
</div>
<div class="form-group">
<label>Order</label>
<input x-model="form.order" type="text" class="form-control" placeholder="Enter Order">
</div>
<div class="form-group">
<label>completed</label>
<input x-model="form.completed" type="text" class="form-control" placeholder="Enter completed">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Update</button>
<button type="button" class="btn btn-danger" @click.prevent="cancelEdit">Cancel Edit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid mt-5" x-show="!individual">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-header text-light bg-dark">
Student Table
</div>
<div class="card-body">
<table class="table">
<thead class="thead">
<tr>
<th>id</th>
<th>title</th>
<th>order</th>
<th>created on</th>
<th>completed</th>
</tr>
</thead>
<tbody>
<template x-for="(task,index) in tasks" >
<tr>
<td x-text="task.id"></td>
<td x-text="task.title"></td>
<td x-text="task.order"></td>
<td x-text="task.createdOn"></td>
<td x-text="task.completed"></td>
<td>
<button @click.prevent="editData(task,task.id)"
class="btn btn-info">Edit</button>
<button @click.prevent="deleteData(task.id)"
class="btn btn-danger">Delete</button>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
function studentCrud() {
return {
addMode: true,
individual: false,
id: '',
form: {
id: '',
title: '',
order :'' ,
completed :''
},
tasks: [ ],
beginadd(){
this.individual=true
},
saveData() {
fetch("http://localhost:3000/items/",{
method:"POST",
headers:{
'Accept':'application/json',
'Content-Type':'application/json',
},
body:JSON.stringify({
title:this.form.title
})
}).then(p=>{
fetch('http://localhost:3000/items').then(p=>{
return p.json()
}).then(p=>{
this.tasks=p
})
})
this.resetForm()
this.individual=false
},
editData(student, index) {
this.addMode = false
this.individual=true
this.id = index
fetch(`http://localhost:3000/items/${index}`).then(p=>{
return p.json()
}).then(p=>{
this.form.id = p.id
this.form.title = p.title
this.form.order = p.order
this.form.completed = p.completed
})
},
updateData() {
fetch(`http://localhost:3000/items/${this.id}`,{
method:"PUT",
headers:{
'Accept':'application/json',
'Content-Type':'application/json',
},
body:JSON.stringify({
title : this.form.title ,
order : this.form.order ,
completed : this.form.completed
})
}).then(p=>{
fetch('http://localhost:3000/items').then(p=>{
return p.json()
}).then(p=>{
this.tasks=p
})
})
this.resetForm()
this.individual=false
},
deleteData(index) {
fetch(`http://localhost:3000/items/${index}`,{
method:"DELETE",
headers:{
'Accept':'application/json',
'Content-Type':'application/json',
}
} ).then(p=>{
fetch('http://localhost:3000/items').then(p=>{
return p.json()
}).then(p=>{
this.tasks=p
})
})
individual=false
},
cancelEdit(){
this.resetForm()
this.individual=false
},
cancelAdd(){
this.resetForm()
this.individual=false
},
resetForm() {
this.form.id = ''
this.form.title = ''
this.form.order = ''
this.form.completed = ''
this.addMode = true
}
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment