src\routes\register\+page.svelte
<script>
import { onMount } from 'svelte';
import { scale } from 'svelte/transition';
import Swal from 'sweetalert2';
export let form;
let errorMessage = '';
let isLoading = false;
let name = '';
let email = '';
let password = '';
let age = '';
onMount(() => {
if (form) {
//console.log('Form status:', form.status);
//console.log('Form data:', form);
if (form.status === 201) {
Swal.fire({
title: 'Success!',
text: form.message,
icon: 'success',
confirmButtonText: 'OK'
}).then(() => {
window.location.href = '/login';
});
} else if (form.status >= 400) {
errorMessage = form.error || 'Unknown error occurred';
// Retain form data
name = form.name || name;
email = form.email || email;
password = form.password || password;
age = form.age || age;
}
}
});
function handleSubmit(event) {
errorMessage = ""
isLoading = true
}
</script>
<section class="container">
<h3 class="text-center my-5 text-secondary">Registration</h3>
<div class="row justify-content-center">
<div class="col col-lg-5">
<form method="post" action="?/register" on:submit={handleSubmit}>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control form-control-sm" id="name" name="name" bind:value={name}>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control form-control-sm" id="email" name="email" bind:value={email}>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="text" class="form-control form-control-sm" id="password" name="password" bind:value={password}>
</div>
<div class="mb-4">
<label for="age" class="form-label">Age</label>
<input type="text" class="form-control form-control-sm" id="age" name="age" bind:value={age}>
</div>
<a class="btn btn-secondary btn-sm" href="/">Back</a>
<button type="submit" class="btn btn-primary btn-sm">Register</button>
</form>
{#if isLoading}
<div class="d-flex justify-content-center mt-3">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
{/if}
{#if errorMessage}
<p transition:scale class="text-danger text-center mt-3">{errorMessage}</p>
{/if}
</div>
</div>
</section>
src\routes\register\+page.server.js
import mysql from 'mysql2/promise';
const pool = mysql.createPool({
host: 'localhost',
user: 'root',
password: '',
database: 'db1',
});
export const actions = {
register: async ({ request }) => {
//FORM DATA
const formData = await request.formData();
const name = formData.get('name');
const email = formData.get('email');
const password = formData.get('password');
const age = formData.get('age');
console.log('Received data:', { name, email, password, age });
//VALIDATION
if (!name || !email || !password || !age) {
return {
status: 400,
success: false,
error: 'All fields are required',
name, email, password, age,
};
}
try {
const [result] = await pool.execute('INSERT INTO users (name, email, password, age) VALUES (?, ?, ?, ?)',
[name, email, password, age]
);
return {
status: 201,
success: true,
message: 'User registered successfully',
userId: result.insertId
};
} catch (error) {
console.error(error);
return {
status: 500,
success: false,
error: 'Database error',
name, email, password, age,
};
}
}
};
with setting cookies
src\routes\login\+page.svelte
<script>
export let form;
console.log(form)
let isLoading = false;
function handleSubmit() {
isLoading = true
form.message = ""
}
</script>
<section class="container">
<h3 class="text-center my-5 text-secondary">Login</h3>
<div class="row justify-content-center">
<div class="col col-lg-5">
<form method="post" action="?/login" on:submit={handleSubmit}>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control form-control-sm" id="email" name="email">
</div>
<a class="btn btn-outline-primary btn-sm" href="/">Back</a>
<button type="submit" class="btn btn-primary btn-sm">Submit</button>
</form>
</div>
</div>
</section>
{#if isLoading}
<div class="d-flex justify-content-center mt-3">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
{/if}
{#if form?.status > 200}
<p class="text-danger text-center mt-3"><i>{form.message}</i></p>
{/if}
src\routes\login\+page.server.js
import { redirect } from "@sveltejs/kit";
import mysql from 'mysql2/promise';
const pool = mysql.createPool({
host: 'localhost',
user: 'root',
password: '',
database: 'db1',
});
export const actions = {
login : async ({ request, cookies }) => {
const formData = await request.formData()
const email = formData.get("email")
//console.log(...formData)
//REDIRECT NOT WORKING IN TRY-CATCH
//WORK AROUND
let found = false
let user;
try {
const [rows] = await pool.execute('SELECT * FROM users WHERE email = ?', [email]);
//console.log(rows)
if (rows.length > 0) {
found = true;
user = rows[0];
}
} catch (error) {
console.error(error);
return {
status: 500,
success: false,
message: 'Database error',
email,
};
}
if(found){
cookies.set("Access",JSON.stringify(user), {path: "/", sameSite: "strict"});
throw redirect(302, '/crud6');
} else {
return {
success: false,
status: 400,
message: 'Email not found',
};
}
}
}
with authorization
src\routes\crud6\+page.svelte
<script>
export let data = {}
let {data: users, success, error, message} = data
</script>
<main class="bg-dark" style="min-height:100vh">
<section class="container">
<h2 class="text-center pt-5 mb-3 text-white">My SQL Database</h2>
<nav class="text-center mb-5">
<a class="text-white" href="/"><i>Back</i></a>
</nav>
</section>
<section class="container pb-5">
{#if error}
<div class="text-center text-warning">
<h1>Status: 500</h1>
<p>{message}</p>
</div>
{/if}
{#if success}
<h4 class="ms-3 mb-3 text-warning"> Method 2: +page.server.js</h4>
<ol>
{#each users as user, idx (user.id)}
<li class="text-white">
<!-- <button class="btn btn-link py-0 px-0 mb-1" on:click={()=>handleDelete(user)}>delete</button> -->
{user.name} - {user.email} - {user.password}
</li>
{/each}
</ol>
{/if}
</section>
</main>
src\routes\crud6\+page.server.js
import mysql from 'mysql2/promise';
import { redirect } from '@sveltejs/kit';
// CONNECT TO LOCAL DB
const pool = mysql.createPool({
host: 'localhost',
user: 'root',
password: '',
database: 'db1',
});
export async function load({cookies}) {
//AUTHORIZATION
const authCookie = cookies.get('Access');
if (!authCookie) {
throw redirect(302, '/');
}
//ACTION
try {
const [rows] = await pool.execute('SELECT * FROM users');
//console.log('Fetched data:', rows); // Debug
return {
success: true,
data: rows,
message: ""
};
} catch (error) {
//console.error('Error fetching data:', error);
return {
success: false,
data: [],
error: true,
message: 'Failed to fetch data from the database.'
};
}
}
Goto create page
CREATE action
Goto create page: src\routes\crud6\+page.svelte
<script>
import { goto } from '$app/navigation';
export let data = {}
let {data: users, success, error, message} = data
</script>
<main class="bg-dark" style="min-height:100vh">
<section class="container">
<h2 class="text-center pt-5 mb-3 text-white">My SQL Database</h2>
<nav class="text-center mb-5">
<a class="text-white" href="/"><i>Back</i></a>
<a class="text-white" href="/crud6/createUser"><i>Create</i></a>
</nav>
</section>
<section class="container pb-5">
</section>
</main>
src\routes\crud6\createUser\+page.svelte
<script>
import { onMount } from 'svelte';
import Swal from 'sweetalert2';
import { goto } from '$app/navigation';
let isLoading = false;
export let form = {}
console.log('Returned form:', form);
onMount(() => {
if (form) {
if (form.status === 201) {
Swal.fire({
text: form.message,
icon: 'success',
confirmButtonText: 'OK'
}).then(() => {
goto('/crud6')
});
}
}
});
function handleSubmit() {
if (form) { form.isError = ""} //reset if 2nd submit
isLoading = true
}
</script>
<main class="bg-dark" style="min-height:100vh">
<section class="container">
<h4 class="text-center pt-5 mb-5 text-info">Create New User</h4>
</section>
<section class="container">
<div class="row justify-content-center mb-5">
<div class="col col-lg-4">
<form method="POST" action="?/createUser" on:submit={handleSubmit}>
<div class="mb-3">
<label for="name" class="form-label text-white">Name</label>
<input type="text" class="form-control bg-secondary-subtle" id="name" name="name" value={form?.name ?? ''} >
</div>
<div class="mb-3">
<label for="email" class="form-label text-white">Email</label>
<input type="email" class="form-control bg-secondary-subtle" id="email" name="email" value={form?.email ?? ''}>
</div>
<div class="mb-3">
<label for="password" class="form-label text-white">Password</label>
<input type="text" class="form-control bg-secondary-subtle" id="password" name="password" value={form?.password ?? ''}>
</div>
<div class="mb-5">
<label for="age" class="form-label text-white">Age</label>
<input type="text" class="form-control bg-secondary-subtle" id="age" name="age" value={form?.age ?? ''}>
</div>
<a class="btn btn-secondary btn-sm" href="/crud6">Back</a>
<button type="submit" class="btn btn-info btn-sm">Create</button>
</form>
{#if isLoading}
<div class="d-flex justify-content-center mt-3">
<div class="spinner-border text-white" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
{/if}
{#if form?.isError}
<p class="text-warning text-center mt-3">{form.message}</p>
{/if}
</div>
</div>
</section>
</main>
src\routes\crud6\createUser\+page.server.js
import mysql from 'mysql2/promise';
import { redirect } from '@sveltejs/kit';
export async function load({ cookies }) {
//AUTHORIZATION
const authCookie = cookies.get('Access');
if (!authCookie) { throw redirect(302, '/')}
console.log('Auth cookie found');
}
//CONNECT TO DB
const pool = mysql.createPool({
host: 'localhost',
user: 'root',
password: '',
database: 'db1',
});
export const actions = {
createUser: async ({ cookies, request }) => {
//AUTHORIZATION
const authCookie = cookies.get('Access');
if (!authCookie) { throw redirect(302, '/')}
//FORM DATA
const formData = await request.formData();
const name = formData.get("name");
const email = formData.get("email");
const password = formData.get("password");
const age = formData.get('age');
console.log('Received data:', { name, email, password, age });
//VALIDATION
if (!name || !email || !password || !age) {
return {
status: 400,
isSuccess: false,
isError: true,
message: '❌Error - all fields are required !',
name, email, password, age,
};
}
//ACTION
try {
//CHECK EMAIL IS UNIQUE
const [emailExist] = await pool.execute('SELECT * FROM users WHERE email = ?',[email])
if (emailExist.length > 0) {
return {
status: 409,
isSuccess: false,
isError: true,
message: '❌Error - email already exists',
name, email, password, age,
};
}
//CREATE ACTION
const [rows] = await pool.execute(
'INSERT INTO users (name, email, password, age) VALUES (?, ?, ?, ?)',
[name, email, password, age]
);
if (rows.affectedRows > 0) {
return {
status: 201,
isSuccess: true,
isError: false,
message: 'User created successfully',
userId: rows.insertId
};
} else {
return {
status: 404,
isError: true,
message: '❌Error - user not created',
name, email, password, age,
};
}
} catch (error) {
console.error(error)
return {
status: 500,
isSuccess: false,
isError: true,
message: '❌Error - database error while creating the user',
name, email, password, age,
};
}
}
}
Create store.js
Write to store.js
Read from the store.js
UPDATE action
Create store: src\lib\stores\store.js
import { writable } from 'svelte/store';
export const store_updateUser = writable({});
Write to store: src\routes\crud6\+page.svelte
<script>
import { store_updateUser } from '$lib/stores/store.js';
import { goto } from '$app/navigation';
function handleUpdate(user){
$store_updateUser = user
goto('/crud6/updateUser')
console.log($store_updateUser)
}
</script>
<main class="bg-dark" style="min-height:100vh">
<section class="container">
</section>
<section class="container pb-5">
{#if error}
{/if}
{#if success}
<h4 class="ms-3 mb-3 text-warning"> Method 2: +page.server.js</h4>
<ol>
{#each users as user, idx (user.id)}
<li class="text-white">
<button class="btn btn-link text-warning py-0 px-0 mb-1" on:click={()=>handleUpdate(user)}><i>update</i></button>
{user.name} - {user.email} - {user.password}
</li>
{/each}
</ol>
{/if}
</section>
</main>
src\routes\crud6\updateUser\+page.svelte
<script>
import { onMount } from 'svelte';
import { store_updateUser } from '$lib/stores/store.js';
import { goto } from '$app/navigation';
import Swal from 'sweetalert2';
let isLoading = false;
export let form = {}
//SUBSCRIBE FROM STORE
$: ({id, name, email, password, age } = $store_updateUser);
console.log('Returned form:', form);
onMount(() => {
if (form) {
if (form.status === 201){
Swal.fire({
text: form.message,
icon: 'success',
confirmButtonText: 'OK'
}).then(() => {
goto('/crud6')
});
} else if (form.status >= 400){
//RETAIN USER VIA STORE
$store_updateUser = form
console.log('Updated store values:', $store_updateUser)
}
}
});
function handleSubmit() {
if (form) { form.isError = ""} //reset if 2nd submit
isLoading = true
}
</script>
<main class="bg-dark" style="min-height:100vh">
<section class="container">
<h4 class="text-center pt-5 mb-5 text-info">Update User</h4>
</section>
<section class="container">
<div class="row justify-content-center mb-5">
<div class="col col-lg-4">
<form method="post" action="?/updateUser" on:submit={handleSubmit}>
<input type="text" class="form-control bg-secondary-subtle" id="id" name="id" readonly hidden value={id}>
<div class="mb-3">
<label for="name" class="form-label text-white">Name</label>
<input type="text" class="form-control bg-secondary-subtle" id="name" name="name" value={name || ''}>
</div>
<div class="mb-3">
<label for="email" class="form-label text-white">Email</label>
<input type="email" class="form-control bg-secondary-subtle" id="email" name="email" readonly value={email || ''}>
</div>
<div class="mb-3">
<label for="password" class="form-label text-white">Password</label>
<input type="text" class="form-control bg-secondary-subtle" id="password" name="password" value={password || ''}>
</div>
<div class="mb-5">
<label for="age" class="form-label text-white">Age</label>
<input type="text" class="form-control bg-secondary-subtle" id="age" name="age" value={age || ''}>
</div>
<a class="btn btn-secondary btn-sm" href="/crud6">Back</a>
<button type="submit" class="btn btn-info btn-sm">Update</button>
</form>
{#if isLoading}
<div class="d-flex justify-content-center mt-3">
<div class="spinner-border text-white" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
{/if}
{#if form?.isError}
<p class="text-warning text-center mt-3">{form.message}</p>
{/if}
</div>
</div>
</section>
</main>
src\routes\crud6\updateUser\+page.server.js
import mysql from 'mysql2/promise';
import { redirect } from '@sveltejs/kit';
export async function load({ cookies }) {
//AUTHORIZATION
const authCookie = cookies.get('Access');
if (!authCookie) { throw redirect(302, '/')}
console.log('Auth cookie found');
}
//CONNECT TO LOCAL DB
const pool = mysql.createPool({
host: 'localhost',
user: 'root',
password: '',
database: 'db1',
});
export const actions = {
updateUser: async ({ cookies, request }) => {
//AUTHORIZATION
const authCookie = cookies.get('Access');
if (!authCookie) { throw redirect(302, '/')}
//FORM DATA
const formData = await request.formData();
const id = formData.get("id");
const name = formData.get("name");
const email = formData.get("email");
const password = formData.get("password");
const age = formData.get('age');
console.log('Received data:', { id, name, email, password, age });
//VALIDATION
if (!id || !name || !email || !password || !age) {
return {
status: 400,
isSuccess: false,
isError: true,
message: '❌Error - all fields are required !',
id, name, email, password, age,
};
}
//ACTION
try {
const [rows] = await pool.execute(
'UPDATE users SET name = ?, email = ?, password = ?, age = ? WHERE id = ?',
[name, email, password, age, id]
);
if (rows.affectedRows > 0) {
return {
status: 201,
isSuccess: true,
isError: false,
message: 'User updated successfully',
userId: id,
};
} else {
return {
status: 404,
isError: true,
message: '❌Error - user not updated',
id, name, email, password, age,
};
}
} catch (error) {
console.error(error)
return {
status: 500,
isSuccess: false,
isError: true,
message: '❌Error - database error while updating the user',
id,name, email, password, age,
};
}
}
}
Create store.js
Write to store.js
Read from the store.js
DELETE action
Create store: src\lib\stores\store.js
import { writable } from 'svelte/store';
export const store_deleteUser = writable({});
Write to store: src\routes\crud6\+page.svelte
<script>
import { store_updateUser, store_deleteUser } from '$lib/stores/store.js';
import { goto } from '$app/navigation';
function handleUpdate(user){
}
function handleDelete(user){
$store_deleteUser = user
goto('/crud6/deleteUser')
console.log($store_deleteUser)
}
</script>
<main class="bg-dark" style="min-height:100vh">
<section class="container">
</section>
<section class="container pb-5">
{#if error}
{/if}
{#if success}
<h4 class="ms-3 mb-3 text-warning"> Method 2: +page.server.js</h4>
<ol>
{#each users as user, idx (user.id)}
<li class="text-white">
<button class="btn btn-link py-0 px-0 mb-1 text-info" on:click={()=>handleDelete(user)}><i>delete</i></button>
<button class="btn btn-link text-warning py-0 px-0 mb-1" on:click={()=>handleUpdate(user)}><i>update</i></button>
{user.name} - {user.email} - {user.password}
</li>
{/each}
</ol>
{/if}
</section>
</main>
src\routes\crud6\deleteUser\+page.svelte
<script>
import { store_deleteUser } from '$lib/stores/store.js';
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import Swal from 'sweetalert2';
$: ({id, email, name, password, age,} = $store_deleteUser)
export let form = {}
console.log('Form data :', form)
let isLoading = false
onMount(() => {
if (form) {
if (form.status === 200) {
Swal.fire({
text: form.message,
icon: 'success',
confirmButtonText: 'OK'
}).then(() => {
goto('/crud6')
});
} else if (form.status >= 400) {
//RETAIN VALUES VIA STORE
$store_deleteUser = form
console.log('Updated store values:', $store_deleteUser)
}
}
});
function handleSubmit(){
if (form) { form.isError = ""} //reset if 2nd submit
isLoading = true
}
</script>
<main class="bg-dark" style="min-height:100vh">
<section class="container">
<div class="row justify-content-center">
<div class="col col-lg-4">
<h4 class="text-start pt-5 mb-3 text-white">Delete User</h4>
</div>
</div>
</section>
<section class="container">
<div class="row justify-content-center mb-5">
<div class="col col-lg-4">
<form method="POST" action="?/deleteUser" on:submit={handleSubmit}>
<input type="text" name="id" value={id} hidden>
<input type="text" name="name" value={name} hidden>
<input type="text" name="email" value={email} hidden>
<div class="mb-2">
<span class="form-label text-white mb-0">Name:</span>
<span class="form-label text-warning">{name || ''}</span>
</div>
<div class="mb-5">
<span class="form-label text-white mb-0">Email:</span>
<span class="form-label text-warning">{email || ''}</span>
</div>
<a class="btn btn-secondary btn-sm" href="/crud6">Back</a>
<button type="submit" class="btn btn-danger btn-sm">Confirm Delete</button>
</form>
{#if isLoading}
<div class="d-flex justify-content-center mt-3">
<div class="spinner-border text-white" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
{/if}
{#if form?.isError}
<p class="text-warning text-center mt-3">{form.message}</p>
{/if}
</div>
</div>
</section>
</main>
src\routes\crud6\deleteUser\+page.server.js
import mysql from 'mysql2/promise';
import { redirect } from '@sveltejs/kit';
//ON-LOAD
export async function load({ cookies }) {
//AUTHORIZATION
const authCookie = cookies.get('Access');
if (!authCookie) { throw redirect(302, '/')}
console.log('Auth cookie found');
}
//CONNECT TO DB
const pool = mysql.createPool({
host: 'localhost',
user: 'root',
password: '',
database: 'db1',
});
export const actions = {
deleteUser: async ({cookies, request}) => {
//AUTHORIZATION
const authCookie = cookies.get('Access');
if (!authCookie) { throw redirect(302, '/')}
//FORM DATA
const formData = await request.formData();
const id = formData.get("id");
const name = formData.get("name");
const email = formData.get("email");
console.log('Received data:', { id, name, email });
//ACTION
try {
const [rows] = await pool.execute('DELETE FROM users WHERE id = ?', [id]);
if (rows.affectedRows > 0) {
return {
status: 200,
isSuccess: true,
message: 'User deleted successfully',
id,
};
} else {
return {
status: 404,
isError: true,
message: '❌Error - user not found',
id, name, email,
};
}
} catch (error) {
console.error(error)
return {
status: 500,
isError: true,
message: '❌Error - database error while deleting the user',
id, name, email,
}
}
}
}