Separar back-end do front-end com PHP e JS

Segue model:

<?php
namespace App\model;

use PDO;
use PDOStatement;

class User_model {
    private PDO $connection;
    function __construct(PDO $connection)
    {
        $this->connection = $connection;
    }

    function createUser(string $name, string $username, string $email, string $password): bool
    {
        $sqlQuery = "INSERT INTO users_login (nome, username, email, senha) VALUES (:name, :username, :email, :password);";
        $stmt = $this->connection->prepare($sqlQuery);
        $stmt->bindValue(':name', $name);
        $stmt->bindValue(':username', $username);
        $stmt->bindValue(':email', $email);
        $stmt->bindValue(':password', $password);

        return $stmt->execute();
    }

    function checkUsernameExists(string $username): bool 
    {
        $sqlQuery = 'SELECT username FROM users_login WHERE username = :username;';
        $stmt = $this->connection->prepare($sqlQuery);
        $stmt->bindValue(':username', $username);
        $stmt->execute();
        
        return $stmt->rowCount() < 1;
    }

    function getEmail(string $username): array
    {
        $sqlQuery = 'SELECT email FROM users_login WHERE username = :username;';
        $stmt = $this->connection->prepare($sqlQuery);
        $stmt->bindValue(':username', $username);
        $stmt->execute();

        return $stmt->fetchAll();
    }

    function getAllUsers(): array {
        $sqlQuery = 'SELECT * FROM users_login';
        $stmt = $this->connection->query($sqlQuery);

        return $this->hydrateUsersList($stmt);
    }

    private function hydrateUsersList (PDOStatement $stmt): array
    {
        $usersDataList = $stmt->fetchAll();
        $usersList = [];

        foreach($usersDataList as $userData) {
            $usersList[] = $userData;
        }
        return $usersList;
    }

    function getId($username): array
    {
        $sqlQuery = "SELECT id FROM users_login WHERE username = :username;";
        $stmt = $this->connection->prepare($sqlQuery);
        $stmt->bindValue(':username', $username);
        $stmt->execute();
        $result = $stmt->fetchAll();

        return $result;
    }

    function getPassword(string $username): array
    {
        $sqlQuery = "SELECT senha FROM users_login WHERE username = :username;";
        $stmt = $this->connection->prepare($sqlQuery);
        $stmt->bindValue(':username', $username);
        $stmt->execute();
        $result = $stmt->fetchAll();
        return $result;
    }

    function updatePassword($id, $new_passw): bool 
    {
        $sqlQuery = 'UPDATE users_login SET senha = :new_passw WHERE id = :id;';
        $stmt = $this->connection->prepare($sqlQuery);
        $stmt->bindValue(':new_passw', $new_passw);
        $stmt->bindValue(':id', $id);
        
        return $stmt->execute(); 
    }

    function deleteUser(string $username): bool {
        $sqlQuery = 'DELETE FROM users_login WHERE username = :username;';
        $stmt = $this->connection->prepare($sqlQuery);
        $stmt->bindValue(':username', $username);

        return $stmt->execute();
    }
}

Eu só preciso entender como eu chamo um desses métodos(enviando e recebendo valores) no meu JS com as condições que eu informei, ou se não tem como fazer isso dessa forma... Fico grato caso alguem possa me auxiliar.. Meu esquema de pastas está assim:

Olá, Elton! Tudo bem com você?

Peço desculpa pela demora em respondê-lo.

Uma opção para realizar essa separação é utilizar AJAX com JS puro. Com o AJAX, você pode enviar requisições assíncronas para o servidor e receber os dados de resposta sem precisar recarregar a página.

No seu caso, você pode criar um arquivo JavaScript separado, por exemplo, "script.js", e utilizar o AJAX para fazer as requisições para o back-end. No seu arquivo PHP, você pode criar rotas para receber essas requisições e retornar os dados desejados.

Aqui está um exemplo básico de como utilizar o AJAX com JS puro:

// script.js

function fazerRequisicao() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // Manipule a resposta do servidor aqui
      console.log(this.responseText);
    }
  };
  xhttp.open("GET", "rota.php", true);
  xhttp.send();
}

No exemplo acima, a função fazerRequisicao() cria uma instância do objeto XMLHttpRequest e define uma função para ser executada quando a resposta do servidor estiver pronta. No exemplo, a função apenas imprime a resposta no console.

No seu arquivo PHP, você pode criar a rota correspondente para receber essa requisição:

// rota.php

require __DIR__ . '/../../vendor/autoload.php';

// Aqui você pode incluir o arquivo com a definição da classe User

// Exemplo de uso da classe User
$userController = new App\controllers\User(new PDO(/* configurações do banco de dados */));

// Exemplo de chamada de método do controller
$userController->checkLogin();

No exemplo acima, é feito o require do autoload e a criação de uma instância do controller User. Em seguida, é chamado o método checkLogin() do controller.

Lembrando que esse é apenas um exemplo básico para ilustrar o uso do AJAX com JS puro. Você pode adaptar esse exemplo para suas necessidades específicas e criar as rotas e métodos no seu arquivo PHP conforme as funcionalidades que você deseja implementar.

Espero ter ajudado e bons estudos!