Contest Vote System per Bricks Builder

Introduzione

Il progetto consiste nella creazione di un sistema di gestione per un foto contest utilizzando il Bricks Builder, un costruttore di pagine per WordPress. L'obiettivo è permettere agli utenti di partecipare al contest caricando immagini, compilando un form con dati personali e ricevendo feedback immediati. Il sistema deve anche gestire la validazione dei dati, l'upload delle immagini e l'integrazione con servizi esterni come Google reCaptcha per la protezione da spam.

Struttura del progetto

1. Custom Post Type (CPT) per il Foto Contest

Nome del CPT: foto_contest
Campi personalizzati:
- Nome
- Cognome
- Email
- Numero di telefono
- Città
- Nome del piatto
- Ricetta e preparazione
- Immagine del piatto (featured image)
- Nome della scuola (opzionale)
- Classe (opzionale)
- Liberatoria PDF (opzionale)

2. Form di partecipazione

Form Element di Bricks: Utilizzato per raccogliere i dati degli utenti e gestire l'upload delle immagini.
Azioni del Form:
- Creazione di un nuovo post nel CPT foto_contest.
- Aggiornamento dei meta campi con i dati del form.
- Upload dell'immagine e impostazione come featured image del post.
- Invio di email di conferma.

3. Validazione e sicurezza

Google reCaptcha V3: Integrato per proteggere il form da spam e abusi.
Validazione lato server: Verifica dei campi obbligatori e controllo del formato dei dati (es. email, telefono).
Validazione lato client: Feedback immediato per gli utenti in caso di errori di compilazione.

4. Debugging e logging

Log degli errori: Utilizzo di error_log per tracciare il flusso di esecuzione e identificare eventuali problemi.
Controllo degli upload: Verifica che i file vengano caricati correttamente e che siano impostati come featured image.

Implementazione tecnica

1. Creazione del Custom Post Type

if (!post_type_exists('foto_contest')) {
    add_action('init', 'create_foto_contest_cpt');
    
    function create_foto_contest_cpt() {
        register_post_type('foto_contest', array(
            'labels' => array(
                'name' => __('Foto Contest'),
                'singular_name' => __('Foto Contest Entry')
            ),
            'public' => true,
            'has_archive' => 'contest-gallery',
            'rewrite' => array('slug' => 'contest-gallery'),
            'supports' => array('title', 'editor', 'thumbnail'),
            'menu_icon' => 'dashicons-camera',
        ));
    }
}

2. Gestione del form con Bricks

add_action('bricks/form/custom_action', function($form) {
    error_log('Form submission started');

    $fields = $form->get_fields();
    error_log('Fields: ' . print_r($fields, true));

    $new_post = [
        'post_title'   => sanitize_text_field($fields['form-field-jrqzsv']),
        'post_content' => sanitize_textarea_field($fields['form-field-nmgbrj']),
        'post_status'  => 'pending',
        'post_type'    => 'foto_contest'
    ];

    error_log('New post data: ' . print_r($new_post, true));

    $post_id = wp_insert_post($new_post);
    error_log('Post ID: ' . $post_id);

    if ($post_id) {
        update_post_meta($post_id, '_foto_contest_nome', sanitize_text_field($fields['form-field-4e5ce6']));
        update_post_meta($post_id, '_foto_contest_cognome', sanitize_text_field($fields['form-field-ae42fe']));
        update_post_meta($post_id, '_foto_contest_email', sanitize_email($fields['form-field-qmwmiy']));
        update_post_meta($post_id, '_foto_contest_telefono', sanitize_text_field($fields['form-field-shptls']));
        update_post_meta($post_id, '_foto_contest_citta', sanitize_text_field($fields['form-field-oavdmv']));

        error_log('Post meta updated');

        if (isset($_FILES['form-field-tpigfh']) && $_FILES['form-field-tpigfh']['error'] === UPLOAD_ERR_OK) {
            error_log('File upload started');
            $attach_id = media_handle_upload('form-field-tpigfh', $post_id);
            if (is_wp_error($attach_id)) {
                error_log('Upload error: ' . $attach_id->get_error_message());
            } else {
                error_log('File uploaded successfully, attachment ID: ' . $attach_id);
                if (set_post_thumbnail($post_id, $attach_id)) {
                    error_log('Featured image set successfully');
                } else {
                    error_log('Failed to set featured image');
                }
            }
        } else {
            error_log('No file to upload or upload error: ' . $_FILES['form-field-tpigfh']['error']);
        }
    }
}, 10, 1);

3. Debugging e logging

Per monitorare il corretto funzionamento del form, è stato implementato un sistema di logging che registra ogni passo dell'elaborazione:

Log dei campi del form: Verifica che i dati siano correttamente ricevuti.
Log della creazione del post: Controlla che il post venga creato con successo.
Log dell'upload dell'immagine: Verifica che l'immagine venga caricata e impostata come featured image.

4. Validazione e sicurezza

add_filter('bricks/form/validate', function($errors, $form) {
    $form_settings = $form->get_settings();
    $form_fields   = $form->get_fields();
    $form_id       = $form_fields['formId'];
    
    // Esempio di validazione per l'email
    $email_address = $form->get_field_value('form-field-qmwmiy');
    if (!filter_var($email_address, FILTER_VALIDATE_EMAIL)) {
        $errors[] = esc_html__('Email non valida.', 'bricks');
    }
    
    return $errors;
}, 10, 2);

Conclusione

Il progetto dimostra come sia possibile utilizzare Bricks Builder per creare un sistema di gestione di un foto contest completo e personalizzabile. Attraverso l'uso di Custom Post Types, Form Element, e Custom Actions, è stato possibile implementare un flusso di lavoro completo senza plugin aggiuntivi che copre dalla raccolta dei dati alla gestione delle immagini, passando per la validazione e la sicurezza. Il sistema di debugging integrato permette di monitorare e risolvere eventuali problemi in modo efficiente, garantendo un'esperienza utente fluida e sicura.