SvelteKit

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,

            };

        }

    }

};

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',

            };

        }

    }

}

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> &nbsp;

    </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:   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> &nbsp;

      <a class="text-white" href="/crud6/createUser"><i>Create</i></a> &nbsp;

    </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:   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:   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>&nbsp;

            <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> &nbsp;

                    <span class="form-label text-warning">{name || ''}</span>

                    </div>

                    <div class="mb-5">

                    <span class="form-label text-white mb-0">Email:</span> &nbsp;

                    <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,

            }

        }

    }

}