dtlive

DTLive

Movie - TV - OTT - Live Streaming, Flutter Android - iOS - Web Apps With Laravel Admin Panel
Updated on October 08, 2025

Documentation

Technical details cover both the backend architecture and client-side technology, ensuring secure and efficient access to content. The documentation includes guidelines for installation, user management, API access, and troubleshooting, along with updates on new features and maintenance.

Flutter

3.35.0

Dart

3.4.0

Java / OpenJDK

17.0.11

Android SDK

34.0.0

Xcode

26.0.1

VSCode

1.91.1+

Laravel

10.23.1

PHP

8.2

MySQL

8.0.39

Apache

2.4.52

phpMyAdmin

5.2.1

OS : Ubuntu Linux

22.04.1

Using the specified versions of the various technologies ensures that our project remains compatible, stable, and performant. Each version listed has been carefully chosen to leverage the latest features, security updates, and optimizations specific to that version.

Setup Admin Panel

This section will guide you through setting up the admin panel for your Backand application.

Pre Required Tool & Environment

Before setting up the Admin Panel, make sure you have the following tools and environment ready:

Server

  • VPS (Virtual Private Server)
  • Shared Hosting

I recommend using a VPS for better performance and control over your environment.

  • Linux OS (Recommended)
  • 50 GB Storage (Minimum)
  • 4 GB RAM (Minimum)
  • 100 GB SSD (Preferred)

Web Server

  • Apache

Make sure you have Apache web server Installed. If not, run the following Command in your terminal:

  1. Begin by updating the local package index to reflect the latest upstream changes: 
                                                    
                                                    sudo apt update
  2. Then, install the apache2 package: 
                                                    
                                                    sudo apt install apache2
  3. After confirming the installation, apt will install Apache and all required dependencies.
  4. At the end of the installation process, Ubuntu starts Apache. The web server will already be up and running. Make sure the service is active by running the command for the systemd init system: 
                                                    
                                                    sudo systemctl status apache2
    Expected output: 
                                                    
                                                    ● apache2.service - The Apache HTTP Server
                                                    Loaded: loaded (/lib/systemd/system/apache2.service; enabled; vendor prese)
                                                    Active: active (running) since Tue 2022-04-26 15:33:21 UTC; 43s ago
                                                        Docs: https://httpd.apache.org/docs/2.4/
                                                    Main PID: 5089 (apache2)
                                                        Tasks: 55 (limit: 1119)
                                                        Memory: 4.8M
                                                        CPU: 33ms
                                                    CGroup: /system.slice/apache2.service
                                                        ├─5089 /usr/sbin/apache2 -k start
                                                        ├─5091 /usr/sbin/apache2 -k start
                                                        └─5092 /usr/sbin/apache2 -k start
    As confirmed by this output, the service has Started Successfully. The best way to test this is to request a page from Apache.
  5. You can access the default Apache landing page to confirm that the software is running properly through your IP address. When you have your server’s IP address, enter it into your browser’s address bar: 
                                                    
                                                    http://your_server_ip
    You will see the default Ubuntu Apache web page as shown below:

Database

  • MySQL
  • phpMyAdmin

MySQL

MySQL is an open-source relational database management system. It is essential for managing the data for your application. Make sure you have MySQL installed on your server. You can install it using the following command:

  • Step 1 - Install MySQL

    Install MySQL on your server using the APT package repository:

    1. Update the package index: 
                                                              
                                                            sudo apt update
    2. Install the MySQL server package: 
                                                              
                                                            sudo apt install mysql-server
    3. Start the MySQL service: 
                                                              
                                                            sudo systemctl start mysql.service
  • Step 2 - Configuring MySQL

    Run the MySQL secure installation script:

    1. Open the MySQL prompt: 
                                                              
                                                            sudo mysql
    2. Change the root user’s authentication method: 
                                                              
                                                            ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';

      Replace 'password' with a strong password of your choice.

    3. Exit the MySQL prompt: 
                                                              
                                                            exit
    4. Run the security script: 
                                                              
                                                            sudo mysql_secure_installation
    5. Follow the prompts to secure your MySQL installation.
  • Step 3 - Testing MySQL

    Check MySQL status to ensure it is running:

                                                    
                                                    systemctl status mysql.service

    Expected output:

                                                    
                                                    ● mysql.service - MySQL Community Server
                                                      Loaded: loaded (/lib/systemd/system/mysql.service; enabled; vendor preset: enabled)
                                                      Active: active (running) since Mon 2022-04-11 16:04:39 UTC; 2h 36min ago
                                                     Process: 2593 ExecStartPre=/usr/share/mysql/mysql-systemd-start pre (code=exited, status=0/SUCCESS)
                                                    Main PID: 2601 (mysqld)
                                                      Status: "Server is operational"
                                                       Tasks: 38 (limit: 1119)
                                                      Memory: 354.3M
                                                         CPU: 19.944s
                                                      CGroup: /system.slice/mysql.service
                                                              └─2601 /usr/sbin/mysqld

    If MySQL isn't running, you can start it with the following command: 

                                                        
                                                        sudo systemctl start mysql
    This command will initiate the MySQL service on your system.

phpMyAdmin

Learn how to install and configure phpMyAdmin on your server, simplifying the management of your MySQL Databases with a user-friendly web interface.

  • Step 1 - Install phpMyAdmin
    1. Update the package index: 
                                                              
                                                            sudo apt update
    2. Download the phpMyAdmin Zip File to the server: 
                                                              
                                                            wget https://files.phpmyadmin.net/phpMyAdmin/5.2.0/phpMyAdmin-5.2.0-all-languages.zip
    3. Unzip the downloaded file: 
                                                              
                                                            unzip phpMyAdmin-5.2.0-all-languages.zip
    4. Move the extracted files to the appropriate location: 
                                                              
                                                            sudo mv phpMyAdmin-5.2.0-all-languages /usr/share/phpmyadmin
    5. Next, create tmp directory and set the proper permissions: 
                                                              
                                                            sudo mkdir /usr/share/phpmyadmin/tmp
                                                            sudo chown -R www-data:www-data /usr/share/phpmyadmin
                                                            sudo chmod 777 /usr/share/phpmyadmin/tmp
  • Step 2 - Configure phpMyAdmin
    1. Now, you need to configure the webserver to serve phpMyAdmin on the network. First, create an Apache configuration file for phpMyAdmin and edit it in a text editor: 
                                                              
                                                            sudo vim /etc/apache2/conf-available/phpmyadmin.conf
    2. Next, add the following content to the file: 
                                                              
                                                            Alias /phpmyadmin /usr/share/phpmyadmin
                                                            Alias /phpMyAdmin /usr/share/phpmyadmin

                                                            <Directory /usr/share/phpmyadmin/>
                                                                AddDefaultCharset UTF-8
                                                                <IfModule mod_authz_core.c>
                                                                    <RequireAny>
                                                                        Require all granted
                                                                    </RequireAny>
                                                                </IfModule>
                                                            </Directory>

                                                            <Directory /usr/share/phpmyadmin/setup/>
                                                                <IfModule mod_authz_core.c>
                                                                    <RequireAny>
                                                                        Require all granted
                                                                    </RequireAny>
                                                                </IfModule>
                                                            </Directory>

      Save your File. Press ESC key to switch to command mode. Then type :wq (colon + w + q) and hit Enter button.

    3. After making all the changes, make sure to start the Apache service to reload all settings: 
                                                              
                                                            sudo a2enconf phpmyadmin
                                                            sudo systemctl restart apache2
  • Step 3 - Configuring phpMyAdmin with Apache2
    1. Execute the following commands: 
                                                              
                                                            sudo a2dissite phpmyadmin
                                                            sudo a2enconf phpmyadmin
    2. Open the Apache configuration file: 
                                                              
                                                            sudo nano /etc/apache2/apache2.conf
    3. Modify the code as follows: 
                                                              
                                                            <Directory /var/www/>
                                                                Options Indexes FollowSymLinks
                                                                AllowOverride None 
                                                                Require all granted
                                                            </Directory>
      TO 
                                                              
                                                            <Directory /var/www/>
                                                                Options Indexes FollowSymLinks
                                                                AllowOverride All 
                                                                Require all granted
                                                            </Directory>
      Once done, close the file.
    4. After executing the command, restart Apache: 
                                                              
                                                            sudo apt-get install libapache2-mod-php
                                                            sudo service apache2 restart
  • Step 4 - Access phpMyAdmin
    1. Setup Complete! You've Successfully configured phpMyAdmin on your system. Now, to access phpMyAdmin, use the following URL: 
                                                              
                                                            http://your-server-ip-domain/phpmyadmin
      Replace "your-server-ip-domain" with either "localhost" for local machines or your system's IP address for remote machines. If you've updated your DNS and pointed it to your server's IP address, you can use the domain name instead.
    2. Sign in using the Username and Password you use to access MySQL via the command line:

Programming Language

  • PHP (Hypertext Preprocessor)
  • Laravel (The PHP Framework)

Ensure PHP is Installed on your server. If not, run the following Command in your terminal:

  1. Update the local package index to reflect the latest changes: 
                                                    
                                                    sudo apt update
  2. Install the PHP package: 
                                                    
                                                    sudo apt install php8.2 libapache2-mod-php8.2 php8.2-mysql
  3. Check the installed PHP version: 
                                                    
                                                    php -v
  4. After executing the command, restart Apache: 
                                                    
                                                    sudo service apache2 restart

Deploy Admin Panel & Build Database

Admin panel is built using Laravel Framework 10.0 so you need PHP version upto 8.1.0 or higher version installed on your server.

How to Deploy Admin Panel code on a server :

  • VPS (Virtual Private Server)
    1. Upload the Zip File to Your Server

      ■  Connect to your VPS using an FTP client or SSH.

      ■  Upload the zip file containing your Admin Panel code to the server.

    2. Move the File to the Appropriate Directory

      ■  Navigate to the directory where you uploaded the file.

      ■  Move the zip file to the /var/www/html/ directory using the command:

                                                              
                                                            mv your-file.zip /var/www/html/
    3. Unzip the File

      ■  Unzip the file using the following command:

                                                              
                                                            unzip your-file.zip
    4. Rename the Folder

      ■  Rename the unzipped folder to admin:

                                                              
                                                            mv your-unzipped-folder admin
    5. Visit Your Domain

      ■  Navigate to your domain URL. You should see the installation wizard. Follow the instructions to complete the setup.

  • Shared Hosting
    1. Log in to cPanel

      ■  Access your hosting account and log in to cPanel.

    2. Open the File Manager

      ■  Go to the File Manager in cPanel.

    3. Navigate to the public_html Directory

      ■  Navigate to the public_html directory where your web files are hosted.

    4. Upload the Zip File

      ■  Upload the zip file containing your Admin Panel code to the public_html directory.

    5. Extract the Zip File

      ■  Right-click the uploaded zip file and choose "Extract" to unzip the contents.

    6. Rename the Folder

      ■  Rename the extracted folder to admin.

    7. Visit Your Domain

      ■  Navigate to your domain URL. You should see the installation screen. Follow the instructions to complete the setup.

How to Build Database on server :

  • VPS (Virtual Private Server)
    1. Access phpMyAdmin

      ■  Once phpMyAdmin is installed and configured, access it by entering its URL in your web browser. Typically, you can access it using: 

                                                              
                                                            http://your_server_ip/phpmyadmin
    2. Login

      ■  You'll be prompted to log in to phpMyAdmin. Use the MySQL root Username and Password for authentication.

    3. Create a Database

      ■  Use the phpMyAdmin dashboard to create a new database. You can navigate to the "Database" section and click on the "New database" button. Then, provide a name for your new database and click on the "Create" button.

    4. Database Created

      ■  Now, Database is created Successfully.

  • Shared Hosting
    1. Access cPanel

      ■  Log in to your shared hosting account's cPanel dashboard.

    2. Locate MySQL Databases

      ■  In the cPanel dashboard, find and click on the "MySQL Databases" icon or link.

    3. Create Database

      ■  Under the "Create New Database" section, enter a name for your new database and click the "Create Database" button.

    4. Create Database User

      ■  Scroll down to the "MySQL Users" section, provide a Username and Password for your new MySQL user, and click the "Create User" button.

    5. Assign Privileges

      ■  On the following screen, select "All Privileges" and then click the "Make Changes" button.

    6. Confirmation

      ■  You should receive a confirmation message indicating that the user has been successfully added to the database with all privileges.

    7. Database Created

      ■  Now, Database & User are created Successfully.

Installation Steps

  1. Installation Screen

    ■  Follow the on-screen instructions to begin the installation process.

  2. Server Requirements & File Permissions

    ■  If the PHP version is Lower than 8.1 or any required extension is not installed, it will be highlighted in Red. Ensure that your server meets all these requirements and that the specified folders have Read & Write Permissions before proceeding with the installation.

  3. Purchase Code Validation

    ■  Here, you will need to insert the purchase code obtained from CodeCanyon to authenticate your purchase and authorize your server to access the services.

    ■  To find your Purchase code you can visit this link: Where is My Purchase code?

  4. Database Configuration

    ■  In this step, you need to provide the database connection details to configure your database properly.

    Enter the following information:

    ●  Database Host: The hostname of your database server (e.g., 'localhost').

    ●  Database Name: The name of your database.

    ●  Database User: The username for your database.

    ●  Database Password: The password associated with the database user.

    ■  Once all details are entered, click on the "Continue" button to verify the database connection.

  5. Import Database or Backup Existing Database

    ■  If you have an existing database, it’s recommended to back it up before proceeding. If this is a new installation, follow these steps to import the new database:

    ●  Backup Existing Database: Create a backup of your current database to ensure no data is lost.

    ●  Import New Database: For a new installation, click the "Import Database" button to load the required schema and data.

    ■  Ensure you have completed this step to set up the database correctly before moving forward.

  6. Admin Account Setup

    ■  To manage your application, you need to create an admin account. Enter the following details:

    ●  Admin Email: Provide a valid email address for the admin account.

    ●  Admin Password: Choose a secure password for the admin account.

    ■  Once you have entered these details, click "Continue" to proceed.

  7. Complete Admin Panel Installation

    ■  The installation process is now complete. You can access the admin panel using the credentials you created.

    ●  Completion Screen: You will see a confirmation screen indicating that the installation is successful.

    ●  Access Admin Panel: Click on the "Admin Panel" button or navigate to the admin panel URL in your browser.

    ■  Congratulations! Your application is now installed and ready for use.

  8. Admin Panel Login

    ■  The final step involves logging into the admin panel to start managing your application:

    ●  Admin Login Page: You will be presented with the admin login page (as shown below).

    ●  Enter Admin Credentials: Use the admin email and password you set up during the installation process to log in.

    ■  Once logged in, you can start configuring and managing your application from the admin panel.

Admin Panel Configuration

This section provides detailed instructions on configuring the admin panel for your Backand application.

How to Manage Types

The Type module allows you to create and manage content categories such as Movies, TV Shows, Live TV, Kids Content, and more. These Types are used across App, Web, and TV platforms.

Step 1 : Login Admin Panel

Step 2 : Go to Types in Sidebar

Step 3 : Add Type

  • Select Types (this is a main static type)
  • Add Name (this name is show on App, Web and TV)
  • Select Icon (only for TV App)
  • Save Type

Step 4 : This Type show in Sidebar on Content Section

Step 5 : Search & Filter Type

Step 6 : Edit Type

Step 7 : Delete Type

Step 8 : Hide-Show Status Manage

Step 9 : Type Short Order Mange

Step-by-Step Video Guide :

How to Configure Basic Items

The Basic Items module is used to manage essential master data such as Category, Language, Season, Avatar, and Channel. These items are required while adding and managing content across App, Web, and TV platforms.

Step 1 : Login Admin Panel

Step 2 : Go to Basic Items in Sidebar

Step 3 : Category Management

Categories are used while adding content such as Videos, Movies, TV Shows, and other media.

  • Add Category
  • Edit Category
  • Manage Show / Hide Status
  • Manage Sort Order
  • Delete Category

Step 4 : Language Management

Languages are used while adding content such as Videos, Movies, and TV Shows to define available audio or content language.

  • Add Language
  • Edit Language
  • Manage Show / Hide Status
  • Manage Sort Order
  • Delete Language

Step 5 : Season Management

Seasons are used while adding TV Show episodes to organize content season-wise.

  • Add Season
  • Edit Season
  • Manage Show / Hide Status
  • Manage Sort Order
  • Delete Season

Step 6 : Avatar Management

Avatars are used as profile images for users within the application.

  • Add Avatar
  • Edit Avatar
  • Manage Show / Hide Status
  • Manage Sort Order
  • Delete Avatar

Step 7 : Channel Management

Channels are used while adding content such as Videos, TV Shows, and Live TV.

  • Add Channel
  • Edit Channel
  • Manage Show / Hide Status
  • Manage Sort Order
  • Delete Channel

Step-by-Step Video Guide :

How to Add Producer

The Producer module is used to manage producers associated with Movies, TV Shows, and other content. Producers help identify content ownership and production details across the DTLive platform.

Step 1 : Login Admin Panel

Step 2 : Go to Producer in Sidebar

Step 3 : Add Producer

  • Add Producer Name
  • Upload Producer Image (if available)
  • Add Description or Details (optional)
  • Save Producer

Step 4 : Search & Filter Producer

Step 5 : Edit Producer

Step 6 : Delete Producer

Step 7 : Producer Content Detail

Step-by-Step Video Guide :

How to Add Cast

The Cast module is used to manage actors, actresses, and other cast members associated with Movies, TV Shows, and other content on the DTLive platform.

Step 1 : Login Admin Panel

Step 2 : Go to Cast in Sidebar

Step 3 : Add Cast

  • Add Cast Name
  • Upload Cast Image
  • Add Description or Biography (optional)
  • Save Cast

Step 4 : Search Cast

Step 5 : Edit Cast

Step 6 : Manage Hide / Show Status

Step 7 : Delete Cast

Step-by-Step Video Guide :

How to Add Movies

The Movies module allows you to add and manage movie content on the DTLive platform. You can upload videos from the server, use external sources, configure trailers, subtitles, and manage rent-based content.

Step 1 : Login Admin Panel

Step 2 : Go to Movies from Content Section in Sidebar

Step 3 : Add New Movie Content

  • Video Upload Type
    • Server Video (Upload File)
    • External URL (Enter External URL)
    • YouTube (YouTube Video URL)
    • Live Stream URL (file.m3u8)
    • VdoCipher ID (Secure Video ID)
  • Trailer Type
    • Server Video (Upload File)
    • External URL (Enter External URL)
    • YouTube (YouTube Video URL)
  • Subtitle Type
    • Server Video (Upload Subtitle File - .srt)
    • External URL (Subtitle URL - .srt)
  • Is Rent : Yes
    • Add Rent Price List and Select Price
    • Enter Rent Time Duration

Step 4 : Search Movie Content

Step 5 : Edit Movie Content

Step 6 : Manage Hide / Show Status

Step 7 : Delete Movie Content

Step-by-Step Video Guide :

How to Configure Live TV & Streaming URL

The Live TV module allows you to configure and manage live television channels using streaming URLs. Live TV content supports real-time streaming using .m3u8 format.

Step 1 : Login Admin Panel

Step 2 : Go to Live TV from Content Section in Sidebar

Step 3 : Add Live TV Content

  • Video Upload Type
    • Live Stream URL
      (Streaming URL must be in .m3u8 format)

Step 4 : Search Live TV Content

Step 5 : Edit Live TV Content

Step 6 : Manage Hide / Show Status

Step 7 : Delete Live TV Content

Step-by-Step Video Guide :

How to Configure Channel Content

The Channel Content module allows you to organize Movies and TV Shows under specific channels. This helps in creating channel-based content structures similar to TV networks.

Step 1 : Login Admin Panel

Step 2 : Add Type under Channel Content

Create or select a Type specifically for Channel Content to organize channel-based media.

Step 3 : Go to Channel from Content Section in Sidebar

Step 4 : Add Movies under Channel

  • Add Content
  • Search Content
  • Edit Content
  • Manage Hide / Show Status
  • Delete Content

Step 5 : Add TV Show under Channel

  • Add Content
  • Search Content
  • Edit Content
  • Manage Hide / Show Status
  • Delete Content
  • View Episode List
  • Add Episode
  • Search & Filter Episodes
  • Edit Episode
  • Delete Episode

Step-by-Step Video Guide :

How to Configure TV Show / Web Series

The TV Show / Web Series module allows you to manage episodic content by organizing seasons and episodes under a single show. This structure is ideal for series-based content.

Step 1 : Login Admin Panel

Step 2 : Go to TV Show / Web Series from Content Section in Sidebar

Step 3 : Add TV Show / Web Series Content

  • Add Content
  • Search Content
  • Edit Content
  • Manage Hide / Show Status
  • Delete Content

Step 4 : Episode Management

Episodes are used to manage individual parts of a TV Show or Web Series.

  • View Episode List
  • Add Episode
  • Search & Filter Episodes
  • Edit Episode
  • Delete Episode

Step-by-Step Video Guide :

How to Configure Upcoming Content

The Upcoming Content module is used to manage movies and TV shows that are not yet released. This helps in promoting upcoming content and later converting it into released content.

Step 1 : Login Admin Panel

Step 2 : Add Type under Upcoming Content

Create or select a Type specifically for Upcoming Content.

Step 3 : Go to Upcoming from Content Section in Sidebar

Step 4 : Add Upcoming Movies

  • Add Content
  • Search Content
  • Edit Content
  • Manage Hide / Show Status
  • Mark as Released Content
  • Delete Content

Step 5 : Add Upcoming TV Shows

  • Add Content
  • Search Content
  • Edit Content
  • Manage Hide / Show Status
  • Delete Content
  • View Episode List
  • Add Episode
  • Search & Filter Episodes
  • Edit Episode
  • Mark Episode as Released Content
  • Delete Episode

Step-by-Step Video Guide :

How to Configure Kids Content

The Kids Content module is used to manage child-friendly movies and TV shows. This section helps in organizing safe and age-appropriate content specifically for kids across App, Web, and TV platforms.

Step 1 : Login Admin Panel

Step 2 : Add Type under Kids Content

Create or select a Type specifically for Kids Content.

Step 3 : Go to Kids from Content Section in Sidebar

Step 4 : Add Kids Movies

  • Add Content
  • Search Content
  • Edit Content
  • Manage Hide / Show Status
  • Delete Content

Step 5 : Add Kids TV Shows

  • Add Content
  • Search Content
  • Edit Content
  • Manage Hide / Show Status
  • Delete Content
  • View Episode List
  • Add Episode
  • Search & Filter Episodes
  • Edit Episode
  • Delete Episode

Step-by-Step Video Guide :

How to Configure Short Films

The Short Films module is used to manage short-form video content. This includes short films and episodic short content optimized for quick viewing across App, Web, and TV platforms.

Step 1 : Login Admin Panel

Step 2 : Add Type under Shorts Content

Create or select a Type specifically for Short Films content.

Step 3 : Go to Shorts from Content Section in Sidebar

Step 4 : Add Short Films

  • Add Content
  • Search Content
  • Edit Content
  • Manage Hide / Show Status
  • Delete Content
  • View Episode List
  • Add Episode
  • Search & Filter Episodes
  • Edit Episode
  • Delete Episode

Step-by-Step Video Guide :

How to Setup Banner

The Banner module is used to manage promotional banners displayed on the Home page and specific content sections. Banners help highlight featured content and improve content visibility across the platform.

Step 1 : Login Admin Panel

Step 2 : Go to Banner from Configuration Section in Sidebar

Step 3 : Add Banner on Home Page

  • Select Home from the top section
  • Select which Type to add Banner
  • Select Sub Video Type (if applicable)
  • Select Video for Banner
  • Banner Added Successfully
  • View Banner List
  • Change Banner Sort Order
  • Delete Banner

Step 4 : Add Banner on Specific Type

  • Select Top Type to add Banner
  • Select Sub Video Type (if applicable)
  • Select Video for Banner
  • Banner Added Successfully
  • View Banner List
  • Change Banner Sort Order
  • Delete Banner

Step-by-Step Video Guide :

How to Setup Section

The Section module allows you to create dynamic or manual content sections on the Home page or specific content types. Sections control how content is grouped, displayed, and ordered inside the application.

Step 1 : Login Admin Panel

Step 2 : Go to Section from Configuration Section in Sidebar

Step 3 : Add Section

  • Select where the Section should be displayed:
    • If the Section should appear on the Home page, select Home as Top Type
    • If the Section should appear inside a specific Type, select that Type
  • Enter Section Title
  • Enter Short Title
  • Select Video Type (Type of data you want to display)
  • Choose Section Type:
    • Dynamic - Data is auto-generated based on filters
    • Manually - Data is manually selected

Step 4 : If Section Type is Dynamic

  • Select Type
  • Select Sub Type (if applicable)
  • Select Category (Category you do not want to display)
  • Select Language (Language you do not want to display)
  • Select Screen Layout (How data will be displayed)
  • Set Number of Content (Total items to show)
  • Order by Upload (Latest uploaded content)
  • Order by View (Based on total views)
  • Select Premium Video (Premium or Free content)
  • Enable View All (Show View All button in App)
  • Save Section

Step 5 : If Section Type is Manually

  • Select Type
  • Select Sub Type (if applicable)
  • Select Screen Layout
  • Select Content (Manually choose content)
  • Save Section

Step 6 : Section Management Options

  • Show / Hide Section Status
  • Edit Section
  • Manage Section Sort Order
  • Delete Section

Step-by-Step Video Guide :

How to Manage Notification

The Notification module allows you to manage push notifications and email alerts for your App, Web, and TV users. You can add new notifications, configure OneSignal keys, and manage email/notification permissions.

Step 1 : Add Notification

  • Login to Admin Panel
  • Go to Notification option in the sidebar
  • View all existing notifications. You can search through the list.
  • Click Add, fill the form with required data and images, then click Save
  • The newly added notification will appear in the list
  • You can delete any notification from the list if required

Step 2 : Set OneSignal Keys

  • Click Notification Setting option on top-right corner
  • Fill the form with correct OneSignal keys and save

Step 3 : Set Email and Notification Permissions

  • Go to Notification Configuration option
  • Here you will see all notifications with Email and Push Notification options
  • You can enable or disable all notifications using the main checkbox
  • You can enable or disable specific notifications using their relative checkboxes and save changes

Step-by-Step Video Guide :

How to Create Package & Coupon

The Package & Coupon module allows you to manage subscription plans and discount coupons for your App, Web, and TV users. Packages define subscription tiers, while Coupons provide promotional discounts.

Step 1 : Manage Package

  • Login to Admin Panel
  • Go to Subscription inside Package option in the sidebar
  • Add a new Package
  • View the list of existing Packages
  • Manage Hide / Show Status for any Package
  • Edit Package details
  • Delete Package if required

Step 2 : Manage Coupon

  • Go to Financial inside Coupon option in the sidebar
  • Add a new Coupon
  • View the list of existing Coupons
  • Manage Hide / Show Status for any Coupon
  • Edit Coupon details
  • Delete Coupon if required

Step-by-Step Video Guide :

Setup App

This section will guide you through setting up the App for your Backand application.

Change the AppName

Before setting up the Admin Panel, make sure you have the following tools and environment ready:

Step 1: Modify the Constant File

Make sure you have Apache web server Installed. If not, run the following Command in your terminal:

  1. Open the Constant.dart file in your project. 
                                                    
                                                    static String appName = "yourappname";
  2. Find the line where the app name is defined:
  3. Change 'yourappname' to your desired app name. For example: 
                                                    
                                                    static String appName = "MyNewAppName";

Step 2: Rename the App Using Flutter Command

  1. Open your terminal or command prompt.
  2. Run the following command to activate the rename package: 
                                                    
                                                    flutter pub global activate rename
  3. Use the rename command to set the new app name across iOS, Android, and web platforms. Replace "YourAppName" with your desired app name: 
                                                    
                                                    rename setAppName --targets ios,android,web --value "MyNewAppName"

Step-by-Step Video Guide :

Change the Package Name

Step 1: Modify the Constant File

  1. Open the Constant.dart file in your project. 
                                                    
                                                    static String appPackageName = "com.example.yourappname";
  2. Find the line where the package name is defined:
  3. Change 'com.example.yourappname' to your desired package name. For example: 
                                                    
                                                    static String appPackageName = "com.example.mynewappname";

Step 2: Rename the Package Using Flutter Command

  1. Open your terminal or command prompt.
  2. Use the rename command to set the new package name for both Android and iOS platforms. Replace "com.example.yourappname" with your desired package name: 
                                                    
                                                    rename setBundleId --targets android,ios --value "com.example.mynewappname"

Step-by-Step Video Guide :

Change the App Icon

Step 1: Place Your App Icon in the Project

  1. Ensure that your app icon is in PNG format and named 'appicon.png'.
  2. Place your 'appicon.png' file in the'assets/appicon' directory of your project.

Step 2: Update Your Project Configuration

  1. Open your terminal or command prompt.
  2. Run the following command to fetch the latest dependencies: 
                                                    
                                                    flutter pub get
  3. Run the command to set the new app icon: 
                                                    
                                                    flutter pub run flutter_launcher_icons

Troubleshooting

If you encounter any issues while changing the app icon, please feel free to create a support ticket at DivineTechs Support.

Step-by-Step Video Guide :

Change the App Color

Step 1: Modify the Color Constants

  1. Open file color.dart which located lib => utils => colors.dart
  2. Locate the color constants defined for your app's primary colors: 
                                                    
                                                    const colorPrimary = Color(0xFFyourhexa); 
                                                    const colorPrimaryDark = Color(0xFFyourhexa); 
                                                    const colorAccent = Color(0xFFyourhexa);
  3. Replace the placeholder hex color codes (0xFFyourhexa) with your desired hex color codes. For example: 
                                                    
                                                    const colorPrimary = Color(0xFF123456); 
                                                    const colorPrimaryDark = Color(0xFF654321); 
                                                    const colorAccent = Color(0xFFabcdef);

Step 2: Update Other Colors According to Your Branding

  1. Review the file to find and update any other color constants according to your app's branding.
  2. Replace the hex color codes for these additional colors as needed to match your design specifications.

Step-by-Step Video Guide :

Change the Base URL

Step 1: Copy Base URL from Admin Panel

  1. Log in to your admin panel.
  2. Navigate to the app settings section where the base URL is provided.
  3. Copy the base URL from the admin panel. Refer to the screenshot below for guidance.

Step 2: Paste the Base URL in App Constants

  1. Open the Constant.dart file in your project.
  2. Locate the line where the base URL is defined: 
                                                    
                                                    final String baseurl = " Add your Base URL here";
  3. Replace "https://example.com" with the base URL you copied from the admin panel. For example: 
                                                    
                                                    final String baseurl = "https://yourbaseurl.com";
  4. check screenshot below

Ensure that you have set up the admin panel correctly before proceeding with this step. If the admin panel is not set up, the app will not run and will be stuck on the splash screen. You can follow the admin panel documentation to learn how to set it up. Click here

Step-by-Step Video Guide :

Change the Splash Screen

Step 1: Prepare Your Splash Screen Design

  1. Ensure that your splash screen design is ready and saved as splash.png.
  2. Make sure the image dimensions and resolution are appropriate for your app's splash screen.

Step 2: Replace the Splash Screen Image

  1. Navigate to the assets/images folder in your project.
  2. Replace the existing 'splash.png' file with your new 'splash.png' file.

Ensure that the splash.png file is named correctly and placed in the assets/images directory.

Step-by-Step Video Guide :

Firebase Setup on App

This section will guide you through setting up the App for your Backand application.

Create a Firebase Project

Before setting up the Admin Panel, make sure you have the following tools and environment ready:

Step 1: Visit Firebase Console:

Step 2: Sign In/Create Account:

  • Sign in with your Google account or create a new one.
  • Click on "Get Started" to set up your first project.

Step 3: Create a New Project:

  • Click on the "Add project" button.
  • Enter a project name and choose a suitable project ID
  • Select your country/region and click "Create Project."

Example Screenshot

Step-by-Step Video Guide :

Firebase Configuration with App

Step 1: Go to Firebase Dashboard:

  • After creating your project, go to the Firebase Dashboard.
  • Click on the Flutter icon as shown in the screenshot below.

Note: Make sure to change the package name first.

Step 2: Login to Firebase on IDE (VSCode/Android Studio):

  1. Open your IDE and run the following command in the terminal to login to Firebase & this command will redirect you to a browser where you will need to allow permissions to access Firebase. 
                                                    
                                                    firebase login
  2. Activate FlutterFire CLI:

    Run the following command in the terminal to activate the FlutterFire CLI:

                                                    
                                                    dart pub global activate flutterfire_cli
  3. Copy command from your firebase as per below screenshot & Run in the terminal:
  4. If prompted with Generated FirebaseOptions file /lib/firebase_options.dart already exists, do you want to override it? (y/n), press y and hit enter to overwrite.
  5. You will be prompted to select the platforms your configuration should support. Use the arrow keys and space to select all platforms (android, ios, macos, web, windows) and press enter.
  6. After running the command, click on “Continue to console” as shown in the screenshot below.

Note: If you face any issues while installing the FlutterFire CLI tool or running Firebase commands, you may need to set up Firebase manually. Please note that manual setup of Firebase is not covered under our support. If the official SDKs do not work, we recommend referring to the official Firebase documentation for further assistance.

Step-by-Step Video Guide :

Add Firebase to Android App

Get SHA1 & SHA256 Keys

  1. Go to your project directory in VS Code & Open the terminal.
  2. Run cd android to navigate to the Android directory: 
                                                    
                                                    cd android
  3. Run ./gradlew signingReport to generate the signing report: 
                                                    
                                                    ./gradlew signingReport
  4. It will display the SHA1 and SHA256 keys similar to the screenshot below.
  5. Navigate to your Firebase project settings & Add the generated SHA1 and SHA256 keys to your Firebase project one by one.
  6. After adding the keys, download the google-services.json file from your Firebase project settings.
  7. Place the google-services.json file in the android/app directory of your Flutter project.If the file already exists, replace it with the new one.

Note: Ensure that you follow each step carefully to correctly configure Firebase for your Android app. Verify that the google-services.json file is placed in the correct directory and that the SHA keys are added to Firebase.

Step-by-Step Video Guide :

Add Firebase to iOS App

Download GoogleService-Info.plist

  1. Go to your project directory in VS Code & Open the terminal.In the Firebase Console, Select your project & Download the GoogleService-Info.plist file.
  2. Place the GoogleService-Info.plist file in the 'ios/Runner' directory of your Flutter project. 
                                                    
                                                    •   Open Xcode.
	                                                •	Right-click on the project name in the project navigator.
	                                                •	Select “Add Files to [your project name]”.
	                                                •	Select the GoogleService-Info.plist file you downloaded.
  3. Example Screenshot:

Note:

• Ensure that the GoogleService-Info.plist file is added correctly to your Xcode project.
• Verify that the file is placed in the correct directory (ios/Runner) in your Flutter project.

Note

You’ve successfully set up Firebase for your Apps. Now you can start integrating Firebase services such as Firestore, Authentication, and Analytics to enhance your app.

Step-by-Step Video Guide :

Enable Firebase Authentication ( Mobile - Gmail - Apple )

Overview

To enable login with OTP, Gmail, and Apple, you need to configure Firebase Authentication. If you skip this step, you will not be able to log into the app.

Step-by-Step Instructions

Step 1: Mobile Auth

  1. In the Firebase Console, go to the Authentication section. Turn on the Phone login by tapping on the switch button as shown in the image below.
  2. Add a Firebase testing number for testing purposes to avoid temporary blocks due to multiple logins with the same number or device.
  3. Example Screenshot:

Step 2: Gmail - Apple Auth

  1. Tap on the switch button to enable Gmail login as shown in the image below.
  2. Tap on the switch button to enable Apple login as shown in the image below.

Step 2: Configure Cloud Messaging API for Gmail & OTP Release App

  1. Go to Google Cloud Console using this the link: Google Cloud Console.
  2. Search for “Firebase Cloud Messaging” on Google Cloud Console and enable it as shown in the screenshot below.
  3. Search for “Google Play Integrity” on Google Cloud Console and enable it as shown in the screenshot below.

Note:
Make sure to add a Firebase testing number for testing purposes. If you login multiple times with the same number or device, Firebase may temporarily block you.

Step-by-Step Video Guide :

Push Notification Setup ( Android - iOS App )

Overview

Setting up push notifications is essential for engaging users with timely alerts and updates. This section provides detailed, step-by-step instructions to configure push notifications for both Android and iOS platforms using OneSignal and Firebase. By following these steps, you'll be able to send notifications that enhance user experience and engagement in your mobile app.

1) Android Setup

Step 1: Generate Firebase Service Account Key

  1. Open Firebase Console and navigate to Project Settings then Select the Service Accounts tab & Click on Generate new private key; a file will be downloaded. Save this file in a secure location.
  2. Create or log in to your OneSignal account at OneSignal Dashboard.
  3. Create a new app by entering the App Name and Organization Name (create an organization if it doesn’t exist) & Select Google Android (FCM) as the platform. Click on Next
  4. Upload the Firebase service account key file downloaded in Step 1. & Click Save & Continue.
  5. Choose Flutter as the platform and proceed to save the configuration.
  6. Your OneSignal Android setup is now complete.
2) iOS Setup
Requirements:
  1. An iOS mobile app
  2. A paid Apple Developer Account with Admin Role
  3. A OneSignal Account
  4. Mac computer with Xcode 12+
  5. Xcode project with Push Notification capability enabled

Step 1: Generate a .p8 Key for APNs Authentication

  1. Log in to your Apple Developer Account Apple Developer Account.
  2. Navigate to Certificates, Identifiers & Profiles > Keys and click the Blue + button.
  3. Select Apple Push Notifications service (APNs) and enter a name for the key.
  4. Click Continue and then Register.
  5. Download your new .p8 key and save it in a secure location.

Note:
You can only download the .p8 file once, so make sure to keep it in a safe place.

Step-by-Step Video Guide :

Step 2: Upload Your Push Key to OneSignal

  1. Team ID: Found in the top right of your Apple Developer account AND Key ID: Found in the Keys section of your Apple Developer account.
  2. App Bundle ID: Found in the Identifiers section of your Apple Developer account or within Xcode > Main App Target > Signing & Capabilities.
  3. In the OneSignal dashboard, navigate to Settings > Platforms > Apple iOS (APNs) Settings.
  4. In the OneSignal dashboard, navigate to Settings > Platforms > Apple iOS (APNs) Settings & Choose .p8 Auth Key (Recommended) for the APNs Authentication Type.
  5. Upload the .p8 file, fill in the Key ID, Team ID, and Bundle ID fields, and then click 'Save'.
  6. Choose Flutter as the platform and proceed to save the configuration.
  7. Your OneSignal iOS setup is now complete.

With these steps, you should have successfully configured push notifications for both Android and iOS using OneSignal. If you encounter any issues, ensure all steps are followed accurately.

Step-by-Step Video Guide :

Introduction:

This section covers all the remaining adjustments and settings for your app. Be sure to review these changes carefully to ensure everything is correctly configured.

1. Default Image Setup for Portrait and Landscape

  1. Ensure that your app displays appropriate default images for both portrait and landscape orientations by following these steps:
  2. Image Files: 
                                                    
                                                    Portrait Image: no_image_port.png
                                                    Landscape Image: no_image_land.png

    Recommended Image Ratios:

                                                    
                                                    Landscape Ratio: 16:9 (Examples: 1920×1080, 1280×720)
                                                    Portrait Ratio: 9:16  (Examples: 1080x1920, 720x1280)
  3. File Path: 
                                                    
                                                    Place the images in the following directory:
                                                    Assets => images
  4. Steps to Update: 
                                                    
                                                    •   Create or edit your default images according to the recommended ratios.
	                                                •	Save the portrait image as no_image_port.png.
	                                                •	Save the landscape image as no_image_land.png.
	                                                •	Place the images in the Assets => images directory in your project.

    By following these guidelines, your app will display well-proportioned images for different orientations, enhancing the user experience.

2. Notification Icon Change

This section explains how to update the OneSignal push notification icons in your app. Ensure that you create the icons with the correct sizes and use the specified names before replacing the existing files.

  1. 1. File Path

    Navigate to the following directories in your project to locate the current notification icons:

                                                    
                                                    Android > app > res > drawable-mdpi
                                                    Android > app > res > drawable-hdpi
                                                    Android > app > res > drawable-xhdpi
                                                    Android > app > res > drawable-xxhdpi
                                                    Android > app > res > drawable-xxxhdpi
  2. 2. Icon Sizes and Naming

    Create new icons with the following sizes and replace the existing icons with the exact names as mentioned:

                                                    
                                                    MDPI (drawable-mdpi):
                                                    Size: 24x24 pixels
                                                    Icon name: ic_stat_onesignal_default.png

                                                    HDPI (drawable-hdpi):
                                                    Size: 36x36 pixels
                                                    Icon name: ic_stat_onesignal_default.png

                                                    XHDPI (drawable-xhdpi):
                                                    Size: 48x48 pixels
                                                    Icon name: ic_stat_onesignal_default.png

                                                    XXHDPI (drawable-xxhdpi):
                                                    Size: 72x72 pixels
                                                    Icon name: ic_stat_onesignal_default.png

                                                    XXXHDPI (drawable-xxxhdpi):
                                                    Size: 96x96 pixels
                                                    Icon name: ic_stat_onesignal_default.png

                                                    Large Icon for Notifications (drawable-xxxhdpi):
                                                    Size: 256x256 pixels
                                                    Icon name: ic_onesignal_large_icon_default.png
  3. 3. Replace Existing Icons 
                                                    
                                                    •   Create or resize your notification icons to match the sizes listed above.
	                                                •	Replace the existing icons in each directory with your newly created icons, ensuring the names remain exactly as specified.

    Please refer to the provided screenshot for additional details on the icon replacement process.

Firebase Setup on App

This section will guide you through setting up the App for your Backand application.

Generate Release Build For Android

Step-by-Step Instructions to Generate the App

Create a keystore to securely sign your Android application.

1. Generate Keystore

  1. Create a keystore to securely sign your Android application.
  2. Mac/Linux: 
                                                    
                                                    keytool -genkey -v -keystore yourappname.jks -keyalg RSA -keysize 2048 -validity 10000 -alias yourappname
  3. Windows: 
                                                    
                                                    keytool -genkey -v -keystore yourappname.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias yourappname

    Follow the prompts to enter the required information, such as the keystore password, distinguished name fields, and alias password. Upon completion, the keystore file (e.g., 'upload-keystore.jks') will be saved in the 'android/app' directory.

2. Configure key.properties

Update the key.properties file in the android directory to store keystore-related information.

  1. Open the key.properties file in the android directory.
  2. Add the following lines to the file: 
                                                    
                                                    storePassword=your_keystore_password
                                                    keyPassword=your_alias_password
                                                    keyAlias=yourappname
                                                    storeFile=yourappname.jks
  3. Save the key.properties file.

3. Update build.gradle

  1. In the android/app/build.gradle file, change: 
                                                    
                                                    signingConfig signingConfigs.debug
  2. To: 
                                                    
                                                    signingConfig signingConfigs.release

4. Generate Release APK

Create a final version of the APK suitable for distribution to end-users.

  1. Open the terminal or command prompt & Navigate to your project directory. Run the following command to build the release APK: 
                                                    
                                                    flutter build apk --release

5.Generate App Bundle

Note:
Before generating the App Bundle, ensure you have completed the 'Update key.properties' step to configure your keystore information. Refer to steps 1 and 2 for details. Package the app as an Android App Bundle for efficient delivery and optimization on the Play Store.

  1. Open the terminal or command prompt & Navigate to your project directory. Run the following command to build the release APK: 
                                                    
                                                    flutter build appbundle

Step-by-Step Video Guide :

Generate Release Build For iOS

Step-by-Step Instructions to Generate the App

1. Finding the iOS Package Name (Bundle Identifier) in Flutter

2. Generating the Bundle ID and App Entry

3. Project Cleanup, Installation, and Archive

Step-by-Step Video Guide :

1. Web Version Splash Screen GIF Change

  1. File Path

    Navigate to the following directory in your project to locate the current splash screen GIF:

                                                    
                                                    Web > Assets > loading.gif

    Replace the GIF

                                                    
                                                    Create or select your new GIF file for the splash screen.
                                                    Name the file loading.gif.
                                                    Replace the existing loading.gif file in the Web > Assets directory with your new GIF.
  2. Rebuild the Web Version

    After replacing the GIF, ensure to rebuild the web version to apply the changes:

                                                    
                                                    Command: flutter build web --web-renderer auto --release

Step-by-Step Video Guide :

Setup VAP ID Key

  1. Open App’s firebase project
  2. Go to project settings >> Cloud Messaging Tab >> Web configuration(Scroll to bottom)
  3. Click on “Generate Key Pair”
  4. Copy this Key Pair and paste in your set-up Admin panel (App Settings >> Vapid Key(Scroll to bottom) and Save it)

Step-by-Step Video Guide :

Firebase Setup for Web Version

In this section, we will guide you through the process of setting up Firebase for the web version of your app. By following these steps, you will configure Firebase to handle authentication, connect with your web app, and authorize your domain for a seamless integration. This setup is crucial for ensuring that your app's web version is fully functional and secure.

Step-by-Step Instructions to Setup Firebase

1. Open Firebase Account:

  1. Log in to your Firebase account and navigate to the Project Settings. (See the screenshot below for reference.)
  2. Copy the Firebase configuration code provided in the Project Settings. (See the screenshot below for reference.)
  3. Paste it into the index.html file located in the web folder. (Refer to the screenshot below.)

2. Set Up Google Authentication:

  1. In Firebase, go to Authentication > Sign-in Method. Edit the Google sign-in method.
  2. Copy the Web Client ID as shown in the screenshot below.
  3. Paste the Web Client ID into the head section of the index.html file. (Refer to the screenshot below.)

3. Authorize Domain:

  1. In Firebase, navigate to Authentication > Settings > Authorized Domains.
  2. Add the main domain where you plan to upload your website. (Check the screenshot below.)

    3. Step-by-Step Video Guide :

4. Update Google Cloud Console:

  1. Open the Google Cloud Console & Go to APIs & Services > Credentials. Click here
  2. Find the Web client (auto-created by Google Service) and add your full domain name. (See the screenshot below for guidance.)

You've successfully set up Firebase for the web version of your app.

After completing all the above steps, follow these commands to build and deploy your web version:

1. Run Web on Chrome:

  1. If web support is not enabled, run the following command: 
                                                    
                                                    flutter config --enable-web
  2. Use the following command to run your app on Chrome: 
                                                    
                                                    flutter run -d chrome --web-renderer html

2. Build Web Version:

  1. Make a build of the web version using the command below: 
                                                    
                                                    flutter build web --web-renderer auto --release

3. Deploy the Web Version:

  1. Upload the contents of the build / web directory to your web hosting service.
  2. Test the deployed web version on multiple browsers and devices to ensure everything works as expected.

Step-by-Step Video Guide :

Support

We are delighted to serve and support you! Contact our support team on HelpDesk / Create Support Ticket

To assist our customers, we stay in constant touch to provide any needed assistance regarding our products. Our support is available from Monday to Friday, 10:00 AM to 6:00 PM IST (GMT +5:30) – We are a team located in India – Asia.

Typically, we reply to all customer questions and queries within 24 hours via comments, our support forum, or emails.

Your Feedback

Dear valuable customer,

Thank you very much for choosing our product. It's our pleasure to provide top-notch service to you. Please give us your honest feedback, which will help us make our product stronger and more reliable..

Click here to Rate Us.

Thank you very much.

Support is Online

Office Hours

Monday - Friday
10:00 AM - 06:00 PM
IST (GMT +5:30)

  • Office time

    00:00:00 AM

  • Your time

    00:00:0 AM