Własna wtyczka WordPress zapisująca dane, wprowadzone przez odwiedzającego stronę, do bazy danych cz.2

Poprzednią część poradnika zakończyliśmy zapisem wprowadzonych danych do bazy danych. Teraz przyszedł czas, aby móc je odczytać w panelu administratora. W tym celu w panelu administracyjnym stworzymy osobne menu Event Participants List. Funkcją WordPressa, która służy do tworzenia nowego menu, jest add_menu_page(). W pliku event-list-plugin.php umieścimy ją wewnątrz funkcji, która po wywołaniu utworzy nowe menu.

<?php
/*
Plugin Name: Event List Plugin
Description: A custom form for event submission
Version: 1.0
Author: Your Name
*/

register_activation_hook(__FILE__, 'elp_activate');

function elp_activate()
{
    require_once plugin_dir_path(__FILE__) . 'includes/elp-database-setup.php';
    elp_create_table();
}

function elp_render_reservation_form()
{
    ob_start(); // Start output buffering

    // Include the form template
    include plugin_dir_path(__FILE__) . 'templates/sign-form1.php';

    return ob_get_clean(); // Return the form HTML
}

add_shortcode('sign_form_1', 'elp_render_reservation_form');

function elp_handle_reservation_submission()
{
    // Verify nonce for security
    if (! isset($_POST['elp_reservation_nonce']) || ! wp_verify_nonce($_POST['elp_reservation_nonce'], 'elp_submit_reservation_action')) {
        wp_die('Security check failed');
    }

    // Sanitize and validate form data
    $user_name = sanitize_text_field($_POST['user_name']);
    $user_email = sanitize_email($_POST['user_email']);

    // Save to database
    global $wpdb;
    $table_name = $wpdb->prefix . 'event_list';

    $wpdb->insert(
        $table_name,
        array(
            'user_name' => $user_name,
            'user_email' => $user_email,
        )
    );
    // Redirect user after submission
    wp_redirect(home_url('/thank-you-page/')); // Create a thank you page first
    exit;
}

add_action('admin_post_elp_submit_reservation', 'elp_handle_reservation_submission');

function enrolled_people_list()
{
    $page_title = 'Event_participants';
    $menu_title = 'Event_participants_list';
    $capability = 'manage_options';
    $menu_slug  = 'event-people-list';
    $function   = 'enrolled_people_list_page';
    $icon_url   = 'dashicons-businessman';
    $position   = 5;
    add_menu_page(
        $page_title,
        $menu_title,
        $capability,
        $menu_slug,
        $function,
        $icon_url,
        $position
    );
}

Dokumentację dotyczącą dodawania nowej zakładki menu w panelu WordPressa znajdziecie tutaj. Moglibyśmy oczywiście, zamiast zmiennych, użyć bezpośrednio wartości przekazywanych do funkcji, jednak na potrzeby tego poradnika uznałem, że zastosowanie zmiennych będzie bardziej czytelne. Zwróćmy uwagę na zmienną $function — wskazuje ona na funkcję, w której umieścimy szablon utworzonego przez nas menu.

Szablonu menu nie dodamy jednak bezpośrednio, lecz wykorzystamy utworzony przez nas katalog /templates. W tym katalogu tworzymy plik enrolled-people-list-page.php.

 <h1 class="my-heading-1">List of people signed to Event</h1>
 <?php
    global $wpdb;
    $table_name = $wpdb->prefix . "event_list";
    $user = $wpdb->get_results("SELECT * FROM $table_name");
    ?>
 <div class="page-container1">

     <table>
         <div class="naglowek-1">
             <tr>
                 <th>ID</th>
                 <th>NAME</th>
                 <th>EMAIL</th>
             </tr>
         </div>
         <?php foreach ($user as $row) { ?>
             <tr>
                 <td>
                     <div class="tabela-rzad"><?php echo $row->id ?></div>
                 </td>
                 <td>
                     <div class="tabela-rzad"><?php echo $row->user_name ?></div>
                 </td>
                 <td>
                     <div class="tabela-rzad"><?php echo $row->user_email ?></div>
                 </td>
             </tr>
         <?php } ?>
     </table>
 </div>

 <style>
     .my-heading-1 {
         text-align: center;
         margin-top: 50px;
         margin-bottom: 25px;
     }

     .page-container1 {
         padding: 20px;
     }

     .page-container1 table {
         width: 100%;
         border-collapse: collapse;
         font-size: 16px;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }

     th {
         text-align: left !important;
         padding-left: 15px;

     }

     .naglowek-1 tr th {
         background-color: #0073aa;
         color: white;
         padding: 12px;
         text-align: left !important;
         font-weight: bold;
     }

     .page-container1 table tr td {
         padding: 10px;
         border-bottom: 1px solid #ddd;
     }

     .page-container1 table tr:hover {
         background-color: #f5f5f5;
     }

     .tabela-rzad {
         padding: 5px;
         word-break: break-word;
     }

     .page-container1 table tr:last-child td {
         border-bottom: 2px solid #0073aa;
     }
 </style>

W naszym pliku wtyczki event-list-plugin.php dodajemy go wewntąrz wskazanej w add_menu_page() funkcji enrolled_people_list_page()

<?php
/*
Plugin Name: Event List Plugin
Description: A custom form for event submission
Version: 1.0
Author: Your Name
*/

register_activation_hook(__FILE__, 'elp_activate');

function elp_activate()
{
    require_once plugin_dir_path(__FILE__) . 'includes/elp-database-setup.php';
    elp_create_table();
}

function elp_render_reservation_form()
{
    ob_start(); // Start output buffering

    // Include the form template
    include plugin_dir_path(__FILE__) . 'templates/sign-form1.php';

    return ob_get_clean(); // Return the form HTML
}

add_shortcode('sign_form_1', 'elp_render_reservation_form');

function elp_handle_reservation_submission()
{
    // Verify nonce for security
    if (! isset($_POST['elp_reservation_nonce']) || ! wp_verify_nonce($_POST['elp_reservation_nonce'], 'elp_submit_reservation_action')) {
        wp_die('Security check failed');
    }

    // Sanitize and validate form data
    $user_name = sanitize_text_field($_POST['user_name']);
    $user_email = sanitize_email($_POST['user_email']);

    // Save to database
    global $wpdb;
    $table_name = $wpdb->prefix . 'event_list';

    $wpdb->insert(
        $table_name,
        array(
            'user_name' => $user_name,
            'user_email' => $user_email,
        )
    );
    // Redirect user after submission
    wp_redirect(home_url('/thank-you-page/')); // Create a thank you page first
    exit;
}

add_action('admin_post_elp_submit_reservation', 'elp_handle_reservation_submission');

function enrolled_people_list()
{
    $page_title = 'Event_participants';
    $menu_title = 'Event_participants_list';
    $capability = 'manage_options';
    $menu_slug  = 'event-people-list';
    $function   = 'enrolled_people_list_page';
    $icon_url   = 'dashicons-businessman';
    $position   = 5;
    add_menu_page(
        $page_title,
        $menu_title,
        $capability,
        $menu_slug,
        $function,
        $icon_url,
        $position
    );
}

function enrolled_people_list_page()
{
    include plugin_dir_path(__FILE__) . 'templates/enrolled-people-list-page.php';
}

Teraz wystarczy wywołać fuckję add_action() która doda naszą zakładkę menu do panelu admina WordPress.

<?php
/*
Plugin Name: Event List Plugin
Description: A custom form for event submission
Version: 1.0
Author: Your Name
*/

register_activation_hook(__FILE__, 'elp_activate');

function elp_activate()
{
    require_once plugin_dir_path(__FILE__) . 'includes/elp-database-setup.php';
    elp_create_table();
}

function elp_render_reservation_form()
{
    ob_start(); // Start output buffering

    // Include the form template
    include plugin_dir_path(__FILE__) . 'templates/sign-form1.php';

    return ob_get_clean(); // Return the form HTML
}

add_shortcode('sign_form_1', 'elp_render_reservation_form');

function elp_handle_reservation_submission()
{
    // Verify nonce for security
    if (! isset($_POST['elp_reservation_nonce']) || ! wp_verify_nonce($_POST['elp_reservation_nonce'], 'elp_submit_reservation_action')) {
        wp_die('Security check failed');
    }

    // Sanitize and validate form data
    $user_name = sanitize_text_field($_POST['user_name']);
    $user_email = sanitize_email($_POST['user_email']);

    // Save to database
    global $wpdb;
    $table_name = $wpdb->prefix . 'event_list';

    $wpdb->insert(
        $table_name,
        array(
            'user_name' => $user_name,
            'user_email' => $user_email,
        )
    );
    // Redirect user after submission
    wp_redirect(home_url('/thank-you-page/')); // Create a thank you page first
    exit;
}

add_action('admin_post_elp_submit_reservation', 'elp_handle_reservation_submission');

function enrolled_people_list()
{
    $page_title = 'Event_participants';
    $menu_title = 'Event_participants_list';
    $capability = 'manage_options';
    $menu_slug  = 'event-people-list';
    $function   = 'enrolled_people_list_page';
    $icon_url   = 'dashicons-businessman';
    $position   = 5;
    add_menu_page(
        $page_title,
        $menu_title,
        $capability,
        $menu_slug,
        $function,
        $icon_url,
        $position
    );
}

function enrolled_people_list_page()
{
    include plugin_dir_path(__FILE__) . 'templates/enrolled-people-list-page.php';
}

add_action('admin_menu', 'enrolled_people_list');

Zakładka Event Participants List powinna być już widoczna. Po kliknięciu w nią zobaczymy listę zapisanych użytkowników. Z pewnością zauważyliście jednak, że brakuje jeszcze jednego elementu. Zarówno utworzony formularz, jak i lista w menu administratora nie mają przypisanych stylów CSS, mimo że zawarte w nich elementy HTML posiadają nadane klasy.

Dodajmy więc plik ze stylami — style.css.

.mrp-reservation-form-container {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.mrp-form-group {
  margin-bottom: 15px;
}

.mrp-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.mrp-form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  /* Ensures padding doesn't affect width */
}

.mrp-submit-btn {
  background-color: #0073aa;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

.mrp-submit-btn:hover {
  background-color: #005177;
}

Dadajmy nasz plik css do Wordressa za pomocą funkcji wp_enqueue_style()

<?php
/*
Plugin Name: Event List Plugin
Description: A custom form for event submission
Version: 1.0
Author: Your Name
*/

register_activation_hook(__FILE__, 'elp_activate');

function elp_activate()
{
    require_once plugin_dir_path(__FILE__) . 'includes/elp-database-setup.php';
    elp_create_table();
}

function elp_render_reservation_form()
{
    ob_start(); // Start output buffering

    // Include the form template
    include plugin_dir_path(__FILE__) . 'templates/sign-form1.php';

    return ob_get_clean(); // Return the form HTML
}

add_shortcode('sign_form_1', 'elp_render_reservation_form');

function elp_handle_reservation_submission()
{
    // Verify nonce for security
    if (! isset($_POST['elp_reservation_nonce']) || ! wp_verify_nonce($_POST['elp_reservation_nonce'], 'elp_submit_reservation_action')) {
        wp_die('Security check failed');
    }

    // Sanitize and validate form data
    $user_name = sanitize_text_field($_POST['user_name']);
    $user_email = sanitize_email($_POST['user_email']);

    // Save to database
    global $wpdb;
    $table_name = $wpdb->prefix . 'event_list';

    $wpdb->insert(
        $table_name,
        array(
            'user_name' => $user_name,
            'user_email' => $user_email,
        )
    );
    // Redirect user after submission
    wp_redirect(home_url('/thank-you-page/')); // Create a thank you page first
    exit;
}

add_action('admin_post_elp_submit_reservation', 'elp_handle_reservation_submission');

function enrolled_people_list()
{
    $page_title = 'Event_participants';
    $menu_title = 'Event_participants_list';
    $capability = 'manage_options';
    $menu_slug  = 'event-people-list';
    $function   = 'enrolled_people_list_page';
    $icon_url   = 'dashicons-businessman';
    $position   = 5;
    add_menu_page(
        $page_title,
        $menu_title,
        $capability,
        $menu_slug,
        $function,
        $icon_url,
        $position
    );
}

function enrolled_people_list_page()
{
    include plugin_dir_path(__FILE__) . 'templates/enrolled-people-list-page.php';
}

add_action('admin_menu', 'enrolled_people_list');

wp_enqueue_style('enroll-style', plugin_dir_url(__FILE__) . 'templates/style.css', array(), '1.0');

Nasz plugin jest gotowy. Zauważmy, że pomimo jego prostoty, jest on doskonałym punktem wyjścia do praktycznie nieograniczonej rozbudowy. Wykorzystując użyte mechanizmy możemy tworzyć różnego rodzaju formularze i listy.