Thiết kế website giá rẻ

Question

I’m working with a team of 4 members (we’re students) on a school project and we’re told to make a web app for a phisioterapy clinic (sorry if english is bad). We had to choose the languages, and we’d only learned html & css so far, and we had little knowledge about databases. We chose PHP & JS along with html & css.

I’m pretty new to this, it’s just my 1st year on the course, so please, any corrections you have, advice, whatever, feel free to give, because all I really want is to learn.

We have a couple of things done already, but it’s basically front-end and the register/login part. Now in my part I’m trying to make the appointment part, but I’ve reached a point where I have filtered the services based on doctors and doctors based on services, and meanwhile we’re using a client dropdown since the register/login isn’t 100% ready, so I need it for tests purpose.

Now, I have this database scheme :

Most of the things are in portuguese, I don’t know if I should translate it or not, but if I do, please tell me and I’ll do it right away.

From there now, I’m trying to retrieve the info on tabhorarios_medicos, which contains the user id, the id of the day, and the id of the period, days being (1-6 as monday-friday) and periods (1-2 as morning-afternoon), and basically get to know in which days does every doctor work and as the first step, filter the calendar (disable the days that the doctor doesn’t work on) after selecting a doctor.

I’ve tried encoding it with JSON and also use my array with the days as a Session variable. Here’s what I have right now:

this is the php file I’m using to fetch the days by selected doctor ‘fetchDiasPorMedico.php’

<?php
session_start();
include 'connection.php';

if (isset($_POST["medico"])) {
    $idMedico = $_POST["medico"];

    // Array para guardar os horários de cada médico
    $horariosMedicos = array();
    //Array com todos os id's de dia 1-6 (segunda-sábado)
    $todosDias = array(1, 2, 3, 4, 5, 6);
    $diasIndisponiveis = array();

    $stmt = $pdo->prepare('SELECT id_utilizador FROM tabutilizador WHERE tipo = "medico"');
    $stmt->execute();
    $medicos = $stmt->fetchAll(PDO::FETCH_ASSOC);

    foreach ($medicos as $medico) {
        $idMedico = $medico['id_utilizador'];
        $stmt = $pdo->prepare('SELECT id_dia FROM tabhorarios_medicos WHERE id_medico = :idMedico');
        $stmt->bindParam(':idMedico', $idMedico);
        $stmt->execute();
        // Buscar e guardar os resultados para o médico atual no loop
        $horarioMedicoAtual = $stmt->fetchAll(PDO::FETCH_ASSOC);
        $horariosMedicos[$idMedico] = $horarioMedicoAtual;
    }

    //Obter tudo do array2 que não está no array1
    $diasIndisponiveis = array_diff($todosDias, $horariosMedicos); 
    $_SESSION['diasIndisponíveis'] = json_encode($diasIndisponiveis); //Transformar o array diasIndisponiveis numa variavel de sessão

    // Output JSON response
    echo json_encode($diasIndisponiveis);
}
?>

and this is my main file for the appointments ‘consulta.php’

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link rel="icon" type="image/x-icon" href="Imagens/logo.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<title>Marcação de Consultas</title>

<body>
    <section class="header">
        <?php
        include "nav.php";
        ?>
        <div class="form-container">
            <h1>Marcar Consulta</h1>
            <?php
            include 'connection.php';
            //Query para ir buscar todos os dados da tabela serviços e juntar aos da tabela consultas cujo id_servico de uma = ao da outra

            $stmt = $pdo->query('SELECT DISTINCT tabservicos.id_servico, tabservicos.nome FROM tabservicos LEFT JOIN tabconsultas ON tabservicos.id_servico = tabconsultas.id_servico');

            $servicos = $stmt->fetchAll(PDO::FETCH_ASSOC);

            echo '<form action="formhandler.inc.php" method="POST">';
            echo '<label for="servico">Serviço</label><br><br>';
            echo '<select name="servico" id="servico" required onchange="fetchMedicosPorServico(this.value)"><br><br>';
            echo '<option value="" disabled select selected>Escolha um Serviço</option>';

            foreach ($servicos as $servico) {
                echo '<option value="' . $servico['id_servico'] . '">' . $servico['nome'] . '</option>';
            }
            echo '</select><br><br>';

            //Mesmo tipo de query, porém para clientes
            $stmt = $pdo->query('SELECT tabutilizador.id_utilizador, tabutilizador.nome  FROM tabutilizador 
    LEFT JOIN tabconsultas ON tabutilizador.id_utilizador = tabconsultas.id_cliente WHERE tabutilizador.tipo = "cliente"');

            $clientes = $stmt->fetchAll(PDO::FETCH_ASSOC);

            echo '<label for="cliente">Cliente</label><br><br>';
            echo '<select name="cliente" id="cliente" required><br><br>';
            echo '<option value="" disabled select selected>Escolha um Cliente</option>';

            foreach ($clientes as $cliente) {
                echo '<option value="' . $cliente['id_utilizador'] . '">' . $cliente['nome'] . '</option>';
            }
            echo '</select><br><br>';
            //Mesmo tipo de query, porém para médicos
            $stmt = $pdo->query('SELECT DISTINCT tabutilizador.id_utilizador, tabutilizador.nome  
                        FROM tabutilizador
                        LEFT JOIN tabconsultas ON tabutilizador.id_utilizador = tabconsultas.id_medico 
                        WHERE tabutilizador.tipo = "medico"');

            $medicos = $stmt->fetchAll(PDO::FETCH_ASSOC);

            echo '<label for="medico">Médico</label><br><br>';
            echo '<select name="medico" id="medico" required onchange="fetchServicosPorMedico(this.value)"><br><br>';
            echo '<option value="" disabled select selected>Escolha um Médico</option>';

            foreach ($medicos as $medico) {
                echo '<option value="' . $medico['id_utilizador'] . '">' . $medico['nome'] . '</option>';
            }
            echo '</select><br><br>';
            //Label da data e datepicker para selecionar data
            echo '<label for="dia">Data da Consulta</label><br>';
            echo '<input type="text" id="datepicker" name="dia" placeholder="Selecione uma data" required><br><br>';
            //Label da hora e timepicker para selecionar hora
            echo '<label for="hora">Hora da Consulta</label><br>';
            echo '<input type="time" name="hora" id="hora" list="horasDisp" autocomplete="off" required><br><br>';

            echo '<datalist id="horasDisp">
            <option value="09:00:00">
            <option value="10:00:00">
            <option value="11:00:00">
            <option value="12:00:00">
            <option value="13:00:00">
            <option value="14:00:00">
            <option value="15:00:00">
            <option value="16:00:00">
            <option value="17:00:00">
            <option value="18:00:00">
            <option value="19:00:00">
            <option value="20:00:00">
        </datalist>';


            echo '<button class="more-btn" type="submit" name="button">Marcar Consulta</button>';
            echo '</form>';
            ?>
        </div>
    </section>
    <!-- Footer -->
    <section class="footer">
        <div class="icons">
            <i class="fa-brands fa-facebook"></i>
            <i class="fa-brands fa-twitter"></i>
            <i class="fa-brands fa-instagram"></i>
            <i class="fa-brands fa-linkedin"></i>
            <p class="cp">© Copyright 2024 Clínica Bem-Fica. All rights reserved.</p>
        </div>
    </section>
    </section>
    <button class="dropmobile"><a class="dropbtn"><i class="fa-solid fa-circle-user"></i></a></button>
    <div class="dropdown-content">
        <a href="">Perfil</a>
        <a href="">Definições</a>
        <a href="">Sair</a>
    </div>

    <!--Scripts-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>
    <script>
        $(function() {
            $("#datepicker").datepicker({
                dateFormat: 'yy-mm-dd',
                dayNames: ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado'],
                dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
                dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],
                monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
                monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
                nextText: 'Próximo',
                prevText: 'Anterior',
                beforeShowDay: function(date) {
                    var day = date.getDay();
                    // Disable Sundays (0)
                    return [day !== 0, ''];
                },
                minDate: 0
            });
        });
    </script>

    <!-- Script que vai procurar os medicos por serviço -->
    <script>
    function fetchMedicosPorServico(servico) {
        $.ajax({
            url: 'fetchMedicosPorServico.php',
            type: 'POST',
            data: { servico: servico },
            success: function(response) {
                $('#medico').html(response);

                // Verificar se só existe um médico
                var numMedicos = $('#medico option').length;
                if (numMedicos === 2) { // including the disabled placeholder option
                    // Selecionar o único médico disponível
                    $('#medico option:not(:disabled)').prop('selected', true);
            }
        }
        });
    }
</script>
<!-- Script que vai procurar os serviços por médico -->
<script>
    function fetchServicosPorMedico(medico) {
        $.ajax({
            url: 'fetchServicosPorMedico.php',
            type: 'POST',
            data: { medico: medico },
            success: function(response) {
                $('#servico').html(response);

                 // Verificar se só existe um serviço
                 var numServicos = $('#servico option').length;
                if (numServicos === 2) { // including the disabled placeholder option
                    // Selecionar o único serviço disponível
                    $('#servico option:not(:disabled)').prop('selected', true);
            }
            }
        });
    }
</script>
</body>

</html>

just in case it’s needed for something, here’s my connection file ‘connection.php’:

<?php 
    $dsn = 'mysql:host=localhost;dbname=dbbemfica';
    $dbusername = 'root';
    $dbpassword = '';

    try{
        $pdo = new PDO($dsn, $dbusername, $dbpassword);
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    }   catch(PDOException $e){
        echo "Connection Failed: " . $e->getMessage();
    }

Appointment:

The expected is this calendar to ‘deactivate’ or ‘block’ the days in which this selected doctor(medico) doesn’t work on.

Thanks in advance.

Thiết kế website giá rẻ

Danh mục

Trying to retrieve doctors schedule from database and filter calendar accordingly