Calendario condominiale

Rispondi
Avatar utente
Utente0 Verified
Site Admin
Messaggi: 54
Iscritto il: sabato 23 novembre 2024, 22:07

Calendario condominiale

Messaggio da Utente0 Verified »

Buongiorno a tutti, per necessità ho dovuto creare un calendario condominiale online, ho utilizzato il piano gratuito di netsons, che mi da tutto quello che al momento ho bisogno per fare questo. Ho iniziato a creare un dominio di terzo livello, si ha un database massimo, ma è sufficiente, ho creato un nome, user e pass per il database ed ho creato queste tabelle :

Codice: Seleziona tutto

CREATE TABLE events (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    start DATETIME NOT NULL,
    end DATETIME NULL
);
Ho creato i vari file da caricare nel webserver. Iniziamo con:
db.php

Codice: Seleziona tutto

<?php
$host = 'localhost';
$dbname = 'nome_db';
$username ='user_db';
$password = 'pass_db';
try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("Errore di connessione al database: " . $e->getMessage());
}
?>
index.php

Codice: Seleziona tutto

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendario Condominiale</title>
    <!-- Inclusione di Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Inclusione di FullCalendar CSS -->
    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css" rel="stylesheet">

    <style>
        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<div class="container mt-5">
    <h1 class="text-center">Calendario Condominiale</h1>

    <div id="calendar"></div>

    <!-- Modal per visualizzare l'evento e eliminarlo -->
    <div class="modal fade" id="eventModal" tabindex="-1" aria-labelledby="eventModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="eventModalLabel">Dettagli Evento</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p><strong>Evento:</strong> <span id="eventTitle"></span></p>
                    <p><strong>Inizio:</strong> <span id="eventStart"></span></p>
                    <p><strong>Fine:</strong> <span id="eventEnd"></span></p>
                    <button type="button" class="btn btn-danger" id="deleteEventBtn">Elimina Evento</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal per aggiungere eventi -->
    <div class="modal fade" id="addEventModal" tabindex="-1" aria-labelledby="addEventModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addEventModalLabel">Aggiungi Evento</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="eventForm">
                        <div class="mb-3">
                            <label for="title" class="form-label">Titolo</label>
                            <input type="text" class="form-control" id="title" required>
                        </div>
                        <div class="mb-3">
                            <label for="start" class="form-label">Data e Ora di Inizio</label>
                            <input type="datetime-local" class="form-control" id="start" required>
                        </div>
                        <div class="mb-3">
                            <label for="end" class="form-label">Data e Ora di Fine</label>
                            <input type="datetime-local" class="form-control" id="end" required>
                        </div>
                        <button type="submit" class="btn btn-primary">Salva Evento</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- Inclusione di jQuery, Bootstrap JS e FullCalendar JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js"></script>

<script>
    $(document).ready(function() {
        // Variabile globale per l'evento selezionato
        var selectedEvent = null;

        // Inizializzazione del calendario
        var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
            locale: 'it',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            initialView: 'dayGridMonth',
            events: function(fetchInfo, successCallback, failureCallback) {
                // Carica gli eventi dal server
                $.ajax({
                    url: 'load_events.php',
                    dataType: 'json',
                    success: function(data) {
                        successCallback(data);
                    },
                    error: function() {
                        failureCallback();
                    }
                });
            },
            eventContent: function(arg) {
                // Mostra solo l'ora dell'evento
                let timeText = document.createElement('div');
                timeText.textContent = arg.timeText; // Mostra solo l'ora

                return { domNodes: [timeText] };
            },
            dateClick: function(info) {
                // Apri il form per aggiungere un evento
                $('#title').val('');
                $('#start').val(info.dateStr);
                $('#end').val(info.dateStr);
                $('#addEventModal').modal('show');

                $('#eventForm').off('submit').on('submit', function(e) {
                    e.preventDefault();
                    var title = $('#title').val();
                    var start = $('#start').val();
                    var end = $('#end').val();

                    // Salva l'evento nel database
                    $.ajax({
                        url: 'add_event.php',
                        method: 'POST',
                        data: {
                            title: title,
                            start: start,
                            end: end
                        },
                        success: function(response) {
                            if (response.success) {
                                calendar.refetchEvents();  // Ricarica gli eventi
                                $('#addEventModal').modal('hide');
                            } else {
                                alert('Errore nel salvataggio dell\'evento.');
                            }
                        }
                    });
                });
            },
            eventClick: function(info) {
                // Visualizza il popup con i dettagli e il tasto elimina
                selectedEvent = info.event;  // Memorizza l'evento selezionato
                $('#eventTitle').text(info.event.title);
                $('#eventStart').text(info.event.start.toLocaleString());
                $('#eventEnd').text(info.event.end ? info.event.end.toLocaleString() : info.event.start.toLocaleString());
                $('#eventModal').modal('show');

                $('#deleteEventBtn').off('click').on('click', function() {
                    if (confirm('Sei sicuro di voler eliminare questo evento?')) {
                        $.ajax({
                            url: 'delete_event.php',
                            method: 'POST',
                            data: { id: selectedEvent.id },
                            success: function(response) {
                                if (response.success) {
                                    calendar.refetchEvents();
                                    $('#eventModal').modal('hide');
                                } else {
                                    alert('Errore nell\'eliminazione dell\'evento.');
                                }
                            }
                        });
                    }
                });
            }
        });

        calendar.render();
    });
</script>
  <!--  descrizione utilizzo -->
    <div class="container mt-4">
    <blockquote class="blockquote text-center">
        <p class="mb-4">
            <strong>Guida per l'utilizzo del calendario condominiale:</strong>
        </p>
        <p class="mb-3">
            <strong>1. Visualizzazione eventi:</strong><br>
            Sul calendario sono visualizzati gli orari degli eventi programmati. Per scoprire i dettagli completi di un evento, clicca sull’orario corrispondente.
        </p>
        <p class="mb-3">
            <strong>2. Aggiunta di un evento:</strong><br>
            - Clicca su un giorno del calendario.<br>
            - Si aprirà un modulo in cui inserire il titolo, l’orario di inizio e fine dell’evento.<br>
            - Compila i campi richiesti e clicca su <strong>"Salva Evento"</strong>. L'evento apparirà immediatamente nel calendario.
        </p>
        <p class="mb-3">
            <strong>3. Eliminazione di un evento:</strong><br>
            - Clicca sull'orario di un evento già esistente.<br>
            - Si aprirà un popup con i dettagli dell'evento.<br>
            - Clicca sul pulsante <strong>"Elimina Evento"</strong> per rimuoverlo definitivamente.
        </p>
        <p class="mb-3">
            <strong>4. Compatibilità mobile:</strong><br>
            Il calendario è ottimizzato per funzionare su smartphone, tablet e computer. Tuttavia, su dispositivi mobili il layout potrebbe risultare più compatto.
        </p>
        <footer class="blockquote-footer mt-3">
            Questo sistema permette a tutti i condomini di collaborare facilmente nella gestione delle attività comuni. Ciao a tutti vicini  ;) Lorenzo.
        </footer>
    </blockquote>
</div>
 <!-- Fine descrizione utilizzo -->
</body>
</html>
add_event.php

Codice: Seleziona tutto

<?php
header('Content-Type: application/json');

// Ottieni i dati dal form
$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end'];

// Connessione al database
$conn = new mysqli('localhost', 'crembnni_lollo', 'ResidencePiacentini!', 'crembnni_piacentini');

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Aggiungi l'evento al database
$query = "INSERT INTO events (title, start, end) VALUES ('$title', '$start', '$end')";
if ($conn->query($query) === TRUE) {
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false]);
}

$conn->close();
?>
delete_event.php

Codice: Seleziona tutto

<?php
header('Content-Type: application/json');

$id = $_POST['id'];

// Connessione al database
$conn = new mysqli('localhost', 'crembnni_lollo', 'ResidencePiacentini!', 'crembnni_piacentini');

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Eliminazione dell'evento dal database
$query = "DELETE FROM events WHERE id = '$id'";
if ($conn->query($query) === TRUE) {
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false]);
}

$conn->close();
?>
load_events.php

Codice: Seleziona tutto

<?php
header('Content-Type: application/json');

// Connessione al database
$conn = new mysqli('localhost', 'crembnni_lollo', 'ResidencePiacentini!', 'crembnni_piacentini');

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Ottieni tutti gli eventi dal database
$query = "SELECT id, title, start, end FROM events";
$result = $conn->query($query);

$events = [];
while ($row = $result->fetch_assoc()) {
    $events[] = [
        'id' => $row['id'],
        'title' => $row['title'],
        'start' => $row['start'],
        'end' => $row['end']
    ];
}

echo json_encode($events);

$conn->close();
?>
update_event.php

Codice: Seleziona tutto

<?php
require 'db.php';

$data = json_decode(file_get_contents('php://input'), true);

$id = $data['id'];
$title = $data['title'];
$start = $data['start'];
$end = $data['end'];

$sql = "UPDATE events SET title = :title, start = :start, end = :end WHERE id = :id";
$stmt = $pdo->prepare($sql);
$stmt->execute(['id' => $id, 'title' => $title, 'start' => $start, 'end' => $end]);

echo "Evento aggiornato con successo!";
?>
Guida per l'utilizzo del calendario condominiale:

1. Visualizzazione eventi:
Sul calendario sono visualizzati gli orari degli eventi programmati. Per scoprire i dettagli completi di un evento, clicca sull’orario corrispondente.

2. Aggiunta di un evento:
- Clicca su un giorno del calendario.
- Si aprirà un modulo in cui inserire il titolo, l’orario di inizio e fine dell’evento.
- Compila i campi richiesti e clicca su "Salva Evento". L'evento apparirà immediatamente nel calendario.

3. Eliminazione di un evento:
- Clicca sull'orario di un evento già esistente.
- Si aprirà un popup con i dettagli dell'evento.
- Clicca sul pulsante "Elimina Evento" per rimuoverlo definitivamente.

4. Compatibilità mobile:
Il calendario è ottimizzato per funzionare su smartphone, tablet e computer. Tuttavia, su dispositivi mobili il layout potrebbe risultare più compatto.

Questo sistema permette a tutti i condomini di collaborare facilmente nella gestione delle attività comuni.
Lorenzo|Utente0
Rispondi