CURD OPERATION USING SVELTE
Curd Operation using svelte
Setup Api in xampp
- extract file /phpapifiles/apidemo.zip
- create database with name `apidemo`
- if you have another name then you must change the file inside apidemo/app/conf/appconf.php
- copy `apidemo` folder into htdocs folder
- browser and check it working fine or not links is following:
- http://localhost/apidemo/
Work on Project
Create Layout
- routes/__layout.svelte file code
<slot></slot>
- routes/index.svelte file code
<script>
<script>
import {
Col,
Container,
Row,
FormGroup,
Input,
Alert,
Label,
Button,
} from "sveltestrap";
let succmsg = "";
let errmsg = "";
const handleSubmit = async (e) => {
let stname = document.getElementById("stname").value;
let stemail = document.getElementById("stemail").value;
let stmobile = document.getElementById("stmobile").value;
let ststate = document.getElementById("ststate").value;
let stcity = document.getElementById("stcity").value;
let stfile = document.getElementById("photo").files[0];
const data = new FormData();
data.append("uname", stname);
data.append("email", stemail);
data.append("mobileno", stmobile);
data.append("state", ststate);
data.append("city", stcity);
data.append("propic", stfile);
data.append("token", "anythings");
const upload = fetch("http://localhost/apidemo/v1/create/", {
method: "POST",
body: data,
})
.then((response) => response.json())
.then((result) => {
console.log("Success:", result);
if (result.status == 1) {
succmsg = result.data.msg;
document.querySelector('form').reset();
} else {
if (result.error.hasOwnProperty("uname")) {
if (errmsg != "") errmsg += "<br>";
errmsg += result.error.uname;
}
if (result.error.hasOwnProperty("mobileno")) {
if (errmsg != "") errmsg += "<br>";
errmsg += result.error.mobileno;
}
if (result.error.hasOwnProperty("email")) {
if (errmsg != "") errmsg += "<br>";
errmsg += result.error.email;
}
if (result.error.hasOwnProperty("propic")) {
if (errmsg != "") errmsg += "<br>";
errmsg += result.error.propic;
}
if (result.error.hasOwnProperty("msg")) {
if (errmsg != "") errmsg += "<br>";
errmsg += result.error.msg;
}
}
})
.catch((error) => {
console.error("Error:", error);
errmsg = error;
});
};
</script>
<form
on:submit|preventDefault={handleSubmit}
method="post"
enctype="multipart/form-data"
>
<Container class="mt-5">
<Row>
<Col>
<h1>Add Student</h1>
</Col>
</Row>
<Row>
<Col>
{#if succmsg != ""}
<Alert color="success" dismissible>
{succmsg}
</Alert>
{/if}
{#if errmsg != ""}
<Alert color="danger" dismissible>
{errmsg}
</Alert>
{/if}
</Col>
</Row>
<Row cols={2}>
<Col>
<FormGroup>
<Label for="stname">Name</Label>
<Input
type="text"
name="stname"
id="stname"
placeholder="Name"
maxlength="20"
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="stemail">E-Mail Address</Label>
<Input
type="text"
name="stemail"
id="stemail"
placeholder="E-Mail Address"
maxlength="250"
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="stmobile">Mobile No.</Label>
<Input
type="number"
name="stmobile"
id="stmobile"
placeholder="Mobile No."
maxlength="10"
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="ststate">State</Label>
<Input
type="text"
name="ststate"
placeholder="State"
id="ststate"
maxlength="50"
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="stcity">City</Label>
<Input
type="text"
name="stcity"
placeholder="City"
id="stcity"
maxlength="50"
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="photo">Photo</Label>
<Input type="file" name="photo" id="photo" accept="image/*" />
</FormGroup>
</Col>
</Row>
<Row
><Col class="text-center">
<Button type="submit" color="primary">Submit</Button>
<Button type="button" color="dark"><a href="/view">View Data</a></Button>
</Col></Row
>
</Container>
</form>
<style>
a {
text-decoration: none;
color: #fff;
}
</style>
- routes/view.svelte
<script context="module">
import { Col, Container, Row, Button, Alert } from "sveltestrap";
import jQuery from "jquery";
import { onMount, tick } from "svelte";
import initDt from "datatables.net-dt";
initDt();
</script>
<script>
const loaddc = async () => {
const data = new FormData();
data.append("token", "anything");
const response = await fetch("http://localhost/apidemo/v1/list/", {
method: "POST",
body: data,
});
const result = await response.json();
let tdata = result.data.map((v) => {
return {
sname: v.sname,
email: v.email,
mobile: v.mobileno,
state: v.state,
city: v.city,
propic: v.propic,
sid: v.sid,
};
});
return tdata;
};
let el; // table element
let table; // table object (API)
const dataPromise = loaddc();
let tabdata = [];
onMount( async () => {
tabdata = await dataPromise;
dataPromise.then(tick).then(() => {
table = jQuery(el).DataTable();
console.log(table);
console.log(el);
});
});
let succmsg = "";
let errmsg = "";
const handledelete = (e) => {
const data = new FormData();
data.append("ref", e);
data.append("token", "anythings");
const upload = fetch("http://localhost/apidemo/v1/delete/", {
method: "POST",
body: data,
})
.then((response) => response.json())
.then(async (result) => {
if (result.status == 1) {
console.log(result);
succmsg = result.data.msg;
document.getElementById(e).remove();
} else {
if (result.error.hasOwnProperty("error")) {
if (errmsg != "") errmsg += "<br>";
errmsg += result.error.error;
}
}
})
.catch((error) => {
errmsg = error;
});
};
</script>
<svelte:head>
<link
rel="stylesheet"
href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"
/>
</svelte:head>
<Container class="mt-5">
<Row>
<Col>
<h1>List Of Student</h1>
<hr>
<br>
</Col>
</Row>
<Row>
<Col>
{#if succmsg != ""}
<Alert color="success" dismissible>
{succmsg}
</Alert>
{/if}
{#if errmsg != ""}
<Alert color="danger" dismissible>
{errmsg}
</Alert>
{/if}
</Col>
</Row>
<Row class="mb-5">
<Col>
<table bind:this={el} class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>E-Mail Address</th>
<th>Mobile No.</th>
<th>State</th>
<th>City</th>
<th>Profile Pic</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{#each tabdata as row}
<tr id="{row.sid}">
{#each [row.sname, row.email, row.mobile, row.state, row.city, row.propic, row.sid] as cell, i}
{#if i == 5}
<td
><img
src="http://localhost/apidemo/public/{cell}"
width="50px"
/></td
>
{:else if i == 6}
<td
><Button
color="danger"
on:click={() => handledelete(cell)}>Delete</Button
></td
>
{:else}
<td>{cell}</td>
{/if}
{/each}
</tr>
{/each}
</tbody>
</table>
</Col>
</Row>
</Container>
How to run Project
- First, Clone the repo.
- install required file for following:
- npm install
- run command
- npm run dev
- Goto Browser and type http://localhost:5000
