Create Your First Custom Button Using PHPRunner

In web application development, adding custom functionality is often necessary to provide users with a smooth and efficient experience. One way to enhance your application is by creating custom buttons that trigger specific actions—whether it’s exporting data, sending email notifications, or navigating to specific pages. PHPRunner, with its intuitive visual interface, makes it easy to add custom buttons without writing a lot of code.

In this guide, we’ll walk through the process of creating a custom button that exports a list of selected records to a CSV file. By the end, you’ll have a fully functional custom button integrated into your PHPRunner app, which can be customized for any action you need.

Step 1: Set Up Your Database

Before diving into the button creation, let's ensure you have a sample database set up. In this example, we’ll use a student_list table that stores basic student information. This will serve as the data source for the custom button that will export selected student records.

You can use MySQL to set up the database with the following structure:

sql

CREATE DATABASE school_app; USE school_app; CREATE TABLE student_list ( id INT AUTO_INCREMENT PRIMARY KEY, student_name VARCHAR(255), student_email VARCHAR(255), enrollment_date DATE );

This table stores each student's name, email, and enrollment date.

Step 2: Create a New Project in PHPRunner

Once your database is ready, the next step is to create a new PHPRunner project.

1. Connect to Your Database: Open PHPRunner, click "New Project," and select MySQL as your database type. Enter your connection details to link the school_app database.

2. Select the Tables: From the list of available tables, select the student_list table for your project. PHPRunner will automatically generate the necessary pages (list, add, edit, view, and search) for managing the student records.

3. Generate Pages: PHPRunner will generate a list of student records, detail views, and forms for adding and editing student data. The next step is to customize the list view and add the custom button.

Step 3: Add the Custom Button

Now, let's add a custom button to export selected student records to a CSV file.

1. Navigate to the List Page Editor:

   • Click on the "Pages" section in PHPRunner and select the "List Page" for the student_list table.

2. Add a Custom Button:

   • In the List Page editor, you will find an option labeled "Buttons." Click on it and then choose “Add button.”

   • This will open a dialog box where you can configure the button’s properties.

3. Configure Button Properties:

   • Button Text: Set the button label to “Export to CSV.”

   • Position: Choose where you want the button to appear. You can place it on the grid toolbar (for global actions) or in each row (for record-specific actions). In this case, we’ll add it to the toolbar.

   • Button Code: Here, you’ll write the PHP or JavaScript that executes when the button is clicked. To export the selected records, we’ll write some simple PHP.

Step 4: Add PHP Code for Exporting Data

Now it’s time to define the functionality of your button. You’ll use PHP to export the selected records to a CSV file.

1. Write the Export Code:

   • In the button code section, you can add PHP to perform the export. Use the following script:

php

if (count($selectedRecords) > 0) { // Open output stream header('Content-Type: text/csv'); header('Content-Disposition: attachment; filename="students.csv"'); $output = fopen('php://output', 'w'); // Write CSV header fputcsv($output, array('ID', 'Student Name', 'Student Email', 'Enrollment Date')); // Write student data to CSV foreach ($selectedRecords as $record) { $row = array( $record["id"], $record["student_name"], $record["student_email"], $record["enrollment_date"] ); fputcsv($output, $row); } fclose($output); exit; } else { echo "No records selected!"; }

1. Explanation:

   • The script checks if any records are selected. If records are selected, it creates a CSV file, writes the headers (ID, Student Name, Student Email, Enrollment Date), and then exports the selected student data. If no records are selected, it outputs a simple message.

Step 5: Test the Custom Button

Once the custom button is configured, it’s time to test it.

1. Build the Application: Click the "Build" button in PHPRunner to generate your app and test it in the browser.

2. Test the Export:

   • Go to the List Page where your student data is displayed.

   • Select one or more students using the checkboxes next to each record.

   • Click the "Export to CSV" button. You should be prompted to download a CSV file containing the selected student information.

If everything works as expected, your custom button is functioning!

Step 6: Deploy Your Application

Now that your custom button is working, it’s time to deploy your app.

1. Generate the Final Build: In PHPRunner, generate the final version of your app.

2. Upload Files: Use an FTP client like FileZilla to upload the generated files to your hosting provider (e.g., WHM/cPanel, Amazon Lightsail, or another service).

3. Test Live: Once deployed, test the custom button again to ensure everything works correctly in a live environment.

Step 7: Advanced Customizations (Optional)

PHPRunner allows for a variety of customizations that can enhance your button’s functionality. Here are a few advanced ideas you can try:

• Email Notifications: Add code that sends an email notification after the export is completed.

• Conditional Actions: Customize the button to perform different actions based on user roles or specific conditions.

• UI Customization: Use JavaScript to add tooltips or confirmation dialogs before the export action is triggered.

Conclusion

Adding custom buttons in PHPRunner is a simple yet powerful way to extend the functionality of your web applications. Whether you want to export data, perform batch operations, or trigger custom workflows, PHPRunner’s visual interface makes it easy to create buttons without diving deep into code.

With the example provided, you’ve seen how to create a button that exports student records to a CSV file, but you can customize this for any action you need. PHPRunner offers the flexibility to manage both front-end and back-end logic seamlessly.

If you’re looking for more custom solutions, training, or help with your PHPRunner project, reach out to PHP Code School. We’re here to help you bring your ideas to life!