Created
November 2, 2022 00:24
-
-
Save sapito169/a1e3ab21751df8aa53efd4e17a5b8fc0 to your computer and use it in GitHub Desktop.
alpine.js crud with backend
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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