Table of Contents

Documentation Content Table

System Features Documentation

User Management

Edit Profile Documentation – Allows users to update their personal and business information
Change Password Documentation – Enables users to securely update their account password
Registered Users Documentation – Provides administration for managing all registered user accounts

System Configuration

Menu Builder Documentation – Drag-and-drop interface for creating and managing website navigation menus
Footer Settings Documentation – Allows customization of the website’s footer section
Advertisement Documentation – Integrates Google Adsense for monetization through display advertising
Payment Logs Documentation – Provides detailed tracking of all payment transactions
Add Language Documentation – Enables administrators to add new languages for multilingual support
Edit Keywords Documentation – Manages translation keywords for different language settings

Content Management

Custom Page Documentation – Allows creation and management of custom content pages
Contact Page Documentation – Configures the contact information and form displayed on the website
FAQ Management Documentation – Enables management of Frequently Asked Questions for user support

Business Features

Buy Plan Documentation – Displays available subscription plans and allows users to purchase them

This content table provides a comprehensive overview of all documentation sections created for the WEB.devad.io platform, organized by functional categories to help users easily navigate and understand the system’s capabilities.

Edit Profile Documentation

Overview

The Edit Profile page allows users to update their personal and business information within the WEB.devad.io platform. This section is accessible through the user profile dropdown menu in the top-right corner of the dashboard.

Accessing the Edit Profile Page

Click on the user profile icon in the top-right corner of the dashboard
Select “Edit Profile” from the dropdown menu
Alternatively, navigate directly through the sidebar menu (if configured) or by visiting the URL: https://web.devad.io/user/profile?language=en

Page Structure

The Edit Profile page consists of:

A breadcrumb navigation showing the current location
A title “Edit Profile”
A form with all profile information fields
A submit button to save changes

Form Fields

Profile Image (Optional)

Field Type: File upload
Description: Uploads a profile picture
Current Value: https://web.devad.io/assets/front/img/user/1769724065istockphoto-512287380-612x612.jpg
Validation:
Maximum file size: Not specified in code
Allowed file types: Not explicitly stated but likely image formats (jpg, png)
Display: Shows a preview of the current profile image

First Name (Required)

Field Type: Text input
Current Value: “mark”
Validation: Required field (marked with **)
Character Limit: Not specified

Last Name (Required)

Field Type: Text input
Current Value: “twain”
Validation: Required field (marked with **)
Character Limit: Not specified

Company Name (Required)

Field Type: Text input
Current Value: “ams for it”
Validation: Required field (marked with **)
Character Limit: Not specified

Username (Required)

Field Type: Text input
Current Value: “Dev1”
Validation: Required field (marked with **)
Character Limit: Not specified

Phone (Required)

Field Type: Text input
Current Value: “0987654332”
Validation: Required field (marked with **)
Character Limit: Not specified

Address

Field Type: Text area
Current Value: “home, syria”
Validation: Optional field
Character Limit: 5 rows

City

Field Type: Text input
Current Value: “home city”
Validation: Optional field
Character Limit: Not specified

State

Field Type: Text input
Current Value: “home state”
Validation: Optional field
Character Limit: Not specified

Country (Required)

Field Type: Text input
Current Value: “Syria”
Validation: Required field (marked with **)
Character Limit: Not specified

Form Submission

Submission Method: POST
Endpoint: https://web.devad.io/user/profile
CSRF Token: Included as a hidden field (_token)
Form Class: ajaxForm (indicates AJAX submission)
Error Handling: Individual error messages displayed below each field (errfirst_name, errlast_name, etc.)

User Experience

The form is displayed in a responsive card layout with all fields centered
Required fields are clearly marked with ** (asterisks)
Error messages appear below fields if validation fails
A success notification appears after successful submission:
“Updated successfully!”
“success” (type)
“fa fa-bell” (icon)
Displayed as a top-right notification

Technical Implementation

AJAX Form Submission: The form uses the ajaxForm class which likely triggers an AJAX request when submitted
Success Notification: A notification system is implemented using Bootstrap Notify
Form Validation: Client-side validation is supported but likely supplemented with server-side validation
Responsive Design: The form is designed to be responsive with a maximum width of 700px (based on Bootstrap column classes)

Security Considerations

CSRF Protection: A CSRF token is included in the form to prevent cross-site request forgery
File Upload Security: The profile image upload functionality should implement proper validation to prevent malicious file uploads

Notes for Developers

The form uses a token-based authentication mechanism for security
The form fields are mapped to specific database fields in the backend
The success notification has configurable parameters for title, message, and icon
The page supports multilingual content (language parameter language=en in URL)
The form uses the form-control class for consistent styling across form elements

This documentation provides a comprehensive overview of the Edit Profile page functionality and implementation, useful for developers, designers, and support teams working with the WEB.devad.io platform.

Menu Builder Documentation

Overview

The Menu Builder is a drag-and-drop interface that allows administrators to create, modify, and organize website navigation menus. It provides a visual way to construct the website’s navigation structure without requiring coding knowledge.

Accessing the Menu Builder

Log in to the WEB.devad.io dashboard
Click on the “Menu Builder” option in the left sidebar navigation (icon: fas fa-bars)
Alternatively, directly access via URL: https://web.devad.io/user/menu-builder?language=en

Page Structure

The Menu Builder page consists of three main sections arranged in a row:

1. Pre-built Menus (Left Column)

This section contains a list of common website menu items that can be added to the navigation:

Home (type: home)
Gallery (type: gallery)
Services (type: services)
Rooms (type: rooms)
Courses (type: courses)
Causes (type: causes)
Blog (type: blog)
Portfolios (type: portfolios)
Contact (type: contact)
Team (type: team)
Career (type: career)
FAQ (type: faq)
Shop (type: shop)
Cart (type: cart)
Checkout (type: checkout)
Custom Page (labeled as “mike”, type: 4)

Each item has an “Add to Menus” button that can be clicked to add the item to the website menu structure.

2. Add/Edit Menu (Middle Column)

This section contains a form for creating or editing menu items:

Form Fields:

Text: Display text for the menu item
URL: Destination URL for the menu item
Target: Where the link opens:
Self: Opens in the same window/tab
Blank: Opens in a new window/tab
Top: Opens in the top frame (for iframes)

Buttons:

Update: Updates the currently selected menu item (initially disabled)
Add: Adds a new menu item to the website menu

Behavior:

When a menu item is selected in the right panel, the form populates with its details
When editing, the “Update” button becomes enabled
When creating a new item, the “Add” button is used

3. Website Menus (Right Column)

This section displays the current website menu structure as a draggable list:

The menu items can be dragged and dropped to reorder them
Menu items can be nested to create dropdown menus
The structure is represented as a nested list
When an item is selected, it becomes highlighted

Adding Menu Items

From Pre-built Menus: Click the “Add to Menus” button next to the desired item
From Scratch:

Fill out the form in the middle column
Click “Add” to add the new item to the menu
You can then drag it to the desired position

Editing Menu Items

Click on a menu item in the right panel to select it
The form in the middle panel will populate with the item’s current details
Make the necessary changes to the text, URL, and target
Click the “Update” button to save changes

Saving the Menu Structure

After arranging and configuring all menu items:

Click the “Update Menu” button at the bottom of the page
The system will save the new menu structure to the database
A success notification will appear confirming the update

Technical Implementation

Frontend: Uses a custom JavaScript library (jquery-menu-editor.js) for the drag-and-drop functionality
API Endpoint: Menu updates are sent to https://web.devad.io/user/menu-builder/update via POST request
Data Structure: The menu structure is stored as JSON, similar to:

  [
    {
      "text": "Home",
      "href": "",
      "icon": "empty",
      "target": "_self",
      "title": "",
      "type": "home"
    },
    {
      "text": "About",
      "href": "",
      "icon": "empty",
      "target": "_self",
      "title": "",
      "type": "custom",
      "children": [
        {
          "text": "Team",
          "href": "",
          "icon": "empty",
          "target": "_self",
          "title": "",
          "type": "team"
        }
      ]
    }
  ]

Backend: Server-side processing validates the menu structure and saves it to the database

Best Practices

Menu Structure: Keep the main menu structure simple (3-5 top-level items)
Nested Menus: Use dropdown menus sparingly for subcategories
Consistency: Maintain consistent naming conventions
URL Structure: Ensure all links point to valid destinations
Mobile Responsiveness: Test the menu structure on mobile devices

Security Considerations

All menu updates require authentication
The system validates the structure before saving
The endpoint uses CSRF protection to prevent cross-site request forgery

This documentation provides comprehensive information for administrators to effectively manage the website’s navigation structure using the Menu Builder interface.

Registered Users Documentation

Overview

The Registered Users section allows administrators to manage all registered user accounts within the WEB.devad.io platform. This includes viewing user details, verifying email status, activating/deactivating accounts, changing passwords, and deleting users. It serves as the central hub for user account management in the system.

Accessing the Registered Users Page

Log in to the WEB.devad.io dashboard
Click on the “Registered Users” option in the left sidebar navigation (icon: fas fa-users)
Alternatively, directly access via URL: https://web.devad.io/user/register-user?language=en

Page Structure

1. Navigation Header

Title: “Registered Users”
Breadcrumbs: Shows hierarchical navigation path: Dashboard > Registered Users
Actions:
Search bar to filter users by username or email
Bulk delete button (appears when user(s) are selected)
Form for adding new users (via modal)

2. User Management Table

Displays all registered users in a table format with the following columns:

Column	Description
Checkbox	Select users for bulk actions
Username	User’s username
Email	User’s email address
Email Status	Status of email verification (Verified/Unverified)
Account	Account status (Active/Deactive)
Actions	User management options

3. Action Buttons

Each user row includes a dropdown menu with the following actions:

Details: View comprehensive user information
Change Password: Reset user’s password
Delete: Remove user account (confirmation required)
Secret Login: Generate a one-time login link for the user (for administrative access)

User Management Features

Email Verification Status

Control: Dropdown with “Verified” and “Unverified” options
Function: Toggle email verification status for users
Implementation: AJAX form submission on change
Endpoint: https://web.devad.io/user/register/customer/email

Account Status

Control: Dropdown with “Active” and “Deactive” options
Function: Toggle user account status
Implementation: AJAX form submission on change
Endpoint: https://web.devad.io/user/user/customer/ban

Adding New Users

Access: Click “Add User” button (opens modal)
Form Fields:
Username (required)
Email (required)
Password (required)
Confirm Password (required)
Package/Plan (required)
Payment Gateway (required)
Publicly Hidden (toggle for visibility)

Bulk Actions

Bulk Delete: Delete multiple selected users
Implementation: AJAX request when the “Delete” button is clicked
Endpoint: https://web.devad.io/user/register/customer/bulk-delete

Technical Implementation

Frontend

AJAX Forms: All status changes use AJAX to avoid page reloads
Modal System: Uses Bootstrap modal for adding new users
Validation: Client-side validation for form fields
CSRF Protection: Each form includes a CSRF token (_token)

Backend

API Endpoints:
User creation: https://web.devad.io/admin/register/user/store
User deletion: https://web.devad.io/user/register/customer/delete
User status update: https://web.devad.io/user/user/customer/ban
Email verification: https://web.devad.io/user/register/customer/email

Data Structure

User data is stored in a database with fields including:

ID
Username
Email
Email verification status
Account status
Password hash
Registration date
Last login
Package/Plan ID
Payment gateway

Security Considerations

CSRF Protection: All forms include a CSRF token
Role-Based Access: Only administrators can access this section
Password Handling: Passwords are never stored in plain text (hashed)
Secret Login: Generates temporary tokens for administrative access
Audit Trail: System logs actions for security monitoring

User Management Best Practices

Email Verification: Always ensure new users verify their email addresses
Account Status: Deactivate accounts instead of deleting them when possible
Password Policies: Enforce strong passwords with minimum length and complexity
Regular Audits: Periodically review user activity and account statuses
Bulk Actions: Use with caution to avoid accidental mass deletions
Security: Always use secret login for administrative access to user accounts

Error Handling

Validation Errors: Specific error messages displayed under form fields
Form Submission: Success notifications appear after changes
Bulk Operations: Confirmation dialog before deletion
Error Cases: System handles invalid inputs with appropriate feedback

This documentation provides comprehensive information for administrators to effectively manage registered users within the WEB.devad.io platform. The section offers a complete solution for user account management, from verification to deletion, while maintaining security best practices.

Footer Settings Documentation

Overview

The Footer Settings feature allows administrators to customize the footer section of the website, including the logo, background, company description, and copyright text. This section is part of the broader Footer management functionality within the WEB.devad.io platform.

Accessing Footer Settings

Log in to the WEB.devad.io dashboard
Click on “Footer” in the left sidebar navigation (icon:far fa-shoe-prints`)
Select “Footer Text” from the submenu
Alternatively, directly access via URL: https://web.devad.io/user/footer/text?language=en

Page Structure

1. Navigation Header

Title: “Footer Text”
Breadcrumbs: Shows hierarchical navigation path (Dashboard > Footer > Footer Text)
Language Selector: Allows switching between different languages for footer content
Default: English (value=”en”)
Option to add new languages
Changes URL to reflect the selected language

2. Update Footer Text Form

This form contains all the footer configuration options:

Form Fields:

Footer’s Logo * (Required)

Type: Image upload field
Purpose: Sets the logo displayed in the footer section
Preview: Current logo displayed above the upload field
Validation:
- Required field (marked with *)
- Image file type validation
- Size restrictions
Implementation: Uses Dropzone.js for upload functionality

Footer’s Background * (Required)

Type: Image upload field
Purpose: Sets the background image for the footer section
Preview: Current background image displayed above the upload field
Validation:
- Required field (marked with *)
- Image file type validation
- Size restrictions

About Company

Type: Text area
Purpose: Displays company description or information in the footer
Validation:
- Optional field
- No specific character limits

Copyright Text

Type: Summernote rich text editor
Purpose: Sets the copyright text displayed at the bottom of the footer
Features:
- Full text formatting capabilities (bold, italic, links, etc.)
- Configured with 80px height
Validation:
- Optional field
- Server-side sanitization for security

Technical Implementation

Frontend

AJAX Form Submission: Form data is submitted via AJAX to avoid page reloads
Image Uploads: Uses Dropzone.js for drag-and-drop image uploads
Rich Text Editor: Implements Summernote for the copyright text field
Client-Side Validation: All fields have validation with error messages
CSRF Protection: Form includes _token hidden field for security
Form Class: ajaxForm for AJAX functionality

Backend

Endpoint: https://web.devad.io/user/footer/update_footer_info/{language}
Method: POST
Validation:
Server-side validation for all form fields
Image size and type validation
Content sanitization to prevent XSS attacks
Data Storage:
Footer settings are stored in the database
Organized by language
Images are stored in the appropriate directory

Security Considerations

CSRF Protection: All forms include a CSRF token (_token)
File Upload Security:
Image file type validation
Size limitations
Proper sanitization of file names
Input Sanitization: All user inputs are sanitized before storage
Role-Based Access: Only administrators can access this section
Language-Specific Settings: Each language has its own separate footer configuration

Best Practices

Logo:

Use a high-quality image with transparent background
Recommended size: 150×150 pixels or smaller
Ensure logo is visible on different backgrounds

Background:

Choose a background that doesn’t interfere with footer text visibility
Consider using subtle patterns or gradients
Ensure image loads quickly for good user experience

Copyright Text:

Include proper copyright notice (e.g., “© 2026 WEB.devad.io. All Rights Reserved”)
Add legal information if required by law
Keep it concise but informative

Language Management:

Maintain consistent footer content across all supported languages
Ensure translations are accurate and up-to-date
Test all language versions for proper display

User Experience

The form is displayed in a responsive card layout with centered content
Required fields are clearly marked with asterisks (*)
Error messages appear below fields if validation fails
A success notification appears after successful submission:
“Updated successfully!”
“success” (type)
“fa fa-bell” (icon)
Displayed as a top-right notification

Quick Links: Accessible via the “Quick Links” menu item under Footer section
Footer Logo & Text: Another menu item under the Footer section for managing the main footer content
Language Management: Required for multilingual footer content

This documentation provides a comprehensive overview of the Footer Settings functionality and implementation, useful for developers, designers, and support teams working with the WEB.devad.io platform.

Advertisement Documentation

Overview

The Advertisement feature allows administrators to integrate Google Adsense into the WEB.devad.io platform to monetize the website through display advertising. This section provides a simple interface for entering the Google Adsense Publisher ID to enable ads on the website.

Accessing Advertisement Settings

Log in to the WEB.devad.io dashboard
Click on “Advertisement” in the left sidebar navigation (icon: fas fa-ad)
Alternatively, directly access via URL: https://web.devad.io/user/advertisement/settings?language=en

Page Structure

Settings Page

The advertisement settings page is a simple form containing:

Label: “Google Adsense Publisher ID”
Type: Text input field
Placeholder: “Enter Publisher ID”
Description:
“Click here to find the publisher ID in your Google Adsense account.”
Includes a link to Google Adsense documentation
Validation:
Required field (no explicit validation shown, but likely validated on submission)
Should contain the 15-character publisher ID format

2. Update Button

Label: “Update”
Type: Primary button (green)
Function: Saves the Google Adsense Publisher ID to the system

Technical Implementation

Frontend

Form Structure: Simple POST form with a single input field
CSRF Protection: Uses the _token field for security
UI Components:
Input field with placeholder
Help text with external link
Primary button for submission

Backend

Endpoint: https://web.devad.io/user/advertisement/settings/update
Method: POST
Request Data:
adsense_publisher_id (the Google Adsense Publisher ID)
_token (CSRF token)
Response:
Successful update: Form is submitted without page reload
Error handling: Not visible in the provided code, but likely includes validation errors

How It Works

Configuration: Admins enter their Google Adsense Publisher ID in the designated field
Integration: Once saved, the system uses this ID to load ads on the website
Display: Ads are automatically displayed on the website where the system’s ad placement code is integrated

Best Practices

Verification: Ensure the Publisher ID is correct before saving
Google Adsense Requirements:

The Google Adsense account should be properly set up and approved
The website should meet Google Adsense’s content and policy requirements

Ad Placement: Consider strategic placement of ads on high-traffic pages
Monitoring: Regularly check Google Adsense reports for performance metrics
Compliance: Ensure all ads comply with Google’s advertising policies

Security Considerations

CSRF Protection: Form includes _token field to prevent cross-site request forgery
Input Validation: While not explicitly shown in the code, server-side validation should occur
Access Control: Only administrators should have access to this section

Troubleshooting

Ads Not Showing:
Verify the Publisher ID is correct (15 characters)
Check Google Adsense account status
Ensure the website meets Google Adsense requirements
Check browser console for errors related to ads loading

This documentation provides administrators with the necessary information to configure advertisement settings and understand how Google Adsense integration works within the WEB.devad.io platform.

Change Password Documentation

Overview

The Change Password feature allows users to update their account password for improved security. This is an essential security feature that ensures users can maintain control over their account access and follow best practices for password management.

Accessing Change Password

Log in to the WEB.devad.io dashboard
Click on “Change Password” in the left sidebar navigation (icon: fas fa-key)
Alternatively, directly access via URL: https://web.devad.io/user/change-password?language=en

Page Structure

1. Navigation Header

Title: “Password”
Breadcrumbs:
Dashboard > Profile Settings > Password

2. Password Change Form

This form contains all necessary fields for changing the user’s password:

Form Fields:

Current Password * (Required)

Type: Password input field
Description: The user’s current password
Validation: Must match the current password on file
Error Message: “Your Current Password” when validation fails

New Password * (Required)

Type: Password input field
Description: The new password the user wants to set
Validation: Must meet password complexity requirements
Error Message: “New Password” when validation fails

New Password Again * (Required)

Type: Password input field
Description: Confirmation field to verify the new password entry
Validation: Must match the “New Password” field exactly
Error Message: “New Password Again” when validation fails

3. Form Submission

Submission Method: POST
Endpoint: https://web.devad.io/user/profile/updatePassword
CSRF Token: Included as a hidden field (_token)
Form Class: Standard form with a submit button
Submit Button: “Update” (appears after form completion)
Success Notification:
“Password updated successfully!”
“success” (type)
“fa fa-bell” (icon)
Displayed as a top-right notification

Technical Implementation

Frontend

Uses a standard HTML form with password input fields
Includes CSRF token for security
Validation is handled client-side with error messages
The form submits via standard POST request

Backend

Validates the current password against the stored hash
Verifies new password matches confirmation
Checks password complexity requirements
Hashes the new password before storing
Handles password update operation
Returns success or error response

User Experience

The user is directed to the password change page after clicking “Change Password” in the sidebar
All fields are marked with asterisks to indicate required fields
The user enters their current password, then the new password twice
After form submission, success or error messages appear
On successful update, the user is redirected to their profile or a confirmation message is shown
The user must then use the new password for future logins

Security Considerations

CSRF Protection: Uses a CSRF token (_token) to prevent cross-site request forgery
Password Hashing: Passwords are stored as hashed values (not plaintext)
Validation: Server-side validation ensures passwords meet security requirements
Password Complexity: System likely enforces minimum complexity requirements (not specified in code but common practice)
Session Management: Changing the password doesn’t automatically log out users (may require additional logic)

Best Practices

Regular Updates: Users should change passwords regularly for security
Strong Passwords: Encourage use of strong, complex passwords (mix of letters, numbers, and symbols)
No Reuse: Avoid using the same password across multiple sites
Confirmation: Always require the user to re-enter the new password for verification
Security Notifications: Inform users about successful password changes

Error Handling

Current Password Incorrect: “The current password you entered is incorrect”
New Password Mismatch: “The new password and confirmation do not match”
Password Complexity: “Password does not meet complexity requirements”
Server Errors: General “An error occurred” message with technical details logged

This documentation provides comprehensive information for users and developers about the Change Password functionality within the WEB.devad.io platform. It covers the user interface, technical implementation, security considerations, and best practices for maintaining account security.

Payment Logs Documentation

Overview

The Payment Logs section provides administrators with a detailed view of all payment transactions processed through the WEB.devad.io platform. It allows for tracking, auditing, and managing payment-related data, including transaction status, payment methods, and associated user information.

Accessing Payment Logs

Log in to the WEB.devad.io dashboard
Click on “Payment Logs” in the left sidebar navigation (icon: fas fa-list-ol)
Alternatively, directly access via URL: https://web.devad.io/user/payment-log?language=en

Page Structure

1. Search Functionality

Search Field: Allows searching by Transaction ID
Input Field: Text box with placeholder “Search by Transaction ID”
Functionality: Filters the payment logs based on the entered transaction ID

2. Payment Log Table

Displays all payment transactions in a structured format:

Column	Description
Transaction ID	Unique identifier for each payment
Amount	Total payment amount
Payment Status	Current status of the transaction (e.g., Success, Pending, Rejected)
Payment Method	Method used for payment (e.g., Stripe)
Receipt	Link to payment receipt image (if available)
Actions	Options for managing the transaction

Trigger: Clicking “Details” button in the Actions column
Content:
Owner Details: Name and email of the payment owner
Payment Details: Total amount, currency, and payment method
Package Details: Information about the purchased package (title, term, start/end dates)

Trigger: Clicking on the Receipt link (if available)
Content: Displays the payment receipt image as a modal

Features and Functionality

View Payment Details

Clicking the “Details” button opens a modal showing:
User information (name, email, phone)
Payment information (amount, currency, method)
Package information (title, term, dates)
This allows administrators to verify payment details and user information

View Receipts

Clicking on the “Receipt” link opens the receipt image in a modal
Useful for verifying payment documentation
Currently shows a placeholder image when no receipt is available

Filter Transactions

Users can search transactions by Transaction ID
The search field filters the table in real-time

Technical Implementation

Frontend

Search Functionality: Uses client-side filtering via a text input field
Modal System: Bootstrap modals for displaying payment details and receipts
Form Submission: No form submission on this page (read-only view)
AJAX: Not used for this page (simple static content)

Backend

Endpoint: https://web.devad.io/user/payment-log
Method: GET request
Data Format: JSON array of payment logs
Pagination: Not explicitly visible but likely implemented in the data source

Security Considerations

Access Control: Only administrators can access this section
Data Security: Payment information is displayed securely with appropriate access controls
Token Protection: Uses CSRF token (_token) for security
Information Disclosure: Sensitive information like phone numbers is masked in the interface

Best Practices

Regular Monitoring: Check payment logs regularly to ensure transactions are processed correctly
Transaction Verification: Use the Details modal to verify payment information before processing
Receipt Management: Store payment receipts securely for audit purposes
Error Handling: Verify payment status and follow up on failed transactions
Security: Always ensure the platform is updated to prevent security vulnerabilities

User Experience

Responsive Design: The page is designed to work on different screen sizes
Clear Information Hierarchy: Payment logs are displayed in an organized table format
Actionable Interface: Clear “Details” and “Receipt” options for each transaction
Success Notification: No specific notifications shown but system likely handles updates via standard notifications

Error Handling

No Receipt Available: Shows a dash (-) in the Receipt column when no receipt is available
Search Errors: Not explicitly shown in the code but likely handled by the system
404 Errors: Proper error handling would be needed for non-existent transactions

This documentation provides comprehensive information for administrators to effectively manage and monitor payment transactions within the WEB.devad.io platform. The Payment Logs section is a critical component for maintaining financial integrity and transparency of the platform.

Buy Plan Documentation

Overview

The Buy Plan feature allows users to view and purchase subscription plans for the WEB.devad.io platform. It provides a clear overview of available packages with their respective features and pricing, enabling users to upgrade their service level based on their needs.

Accessing Buy Plan

Log in to the WEB.devad.io dashboard
Click on “Buy Plan” in the left sidebar navigation (icon: fas fa-file-invoice-dollar)
Alternatively, directly access via URL: https://web.devad.io/user/package-list?language=en

Page Structure

1. Current Package Information

Displays the user’s current subscription status:

Current Package: Shows the active plan name (e.g., “Plutinum”)
Package Type: Indicates the duration (e.g., “lifetime”)
Expiration Date: Shows when the subscription ends (e.g., “lifetime” for lifetime plans)

2. Pricing Plans

The page displays three pricing options in card format:

Golden (Yearly)

Price: $996/yearly
Features Included:
Custom Domain
Subdomain
vCard
QR Builder
Follow/Unfollow
Request a Quote
Blog
Portfolio
Custom Page
Counter Information
Skill
Service
Testimonial
Career
Team
Plugins
Ecommerce
Hotel Booking
Course Management
Donation Management
Action Button: “Buy Now” (click to proceed to checkout)

Golden (Monthly)

Price: $349/monthly
Features Included: Same as Yearly Golden plan
Action Button: “Buy Now” (click to proceed to checkout)

Plutinum (Lifetime)

Price: $499/lifetime
Status: Marked as “Current” with badge
Features Included: Same as Golden plans
Action Button: None (user is already on this plan)

Technical Implementation

Frontend

Uses a responsive card layout with Bootstrap for styling
Each pricing card uses the custom class card-pricing2
Features are displayed in an unordered list (ul) with pricing-content class
“Buy Now” buttons link to the checkout process
The page includes a CSS file (buy_plan.css) for additional styling

Backend

Endpoint: https://web.devad.io/user/package-list
API response includes:
Package ID
Package name
Price
Payment frequency
Feature list
Status indicators
Checkout URL format: https://web.devad.io/user/package/checkout/{package_id}?language=en

User Experience

Clear display of current subscription status
Visual distinction between current and available plans
Easy-to-understand feature lists
Simple purchase flow through “Buy Now” buttons
Responsive design that works on all device sizes

Best Practices

Plan Selection: Choose the right plan based on your needs

Yearly plans typically offer better value
Lifetime plans are ideal for long-term users

Feature Comparison: Compare features across different plans
Upgrade Path: Consider upgrading to higher-tier plans for additional features
Payment Processing: Ensure secure payment processing through trusted gateways

Security Considerations

Payment information is handled through secure payment gateways
Session management ensures only authenticated users can access the page
Package IDs are validated on the server side
Payment processing follows PCI compliance standards

Support and Troubleshooting

If users encounter issues with payment processing:
Verify payment gateway configuration
Check payment gateway credentials
Review server logs for transaction errors
For issues with plan features:
Confirm the user’s active package
Verify package status in the database
Ensure proper feature activation logic

This documentation provides a comprehensive overview of the Buy Plan feature, helping administrators understand its purpose, implementation, and best practices for use within the WEB.devad.io platform.

Add Language Documentation

Overview

The Add Language feature allows administrators to add new languages to the WEB.devad.io platform, enabling multilingual support for the website. This is a critical component for creating a global user experience and supporting internationalization.

Accessing Add Language

Log in to the WEB.devad.io dashboard
Click on “Language Management” in the left sidebar navigation (icon: fas fa-language)
Click the “Add Language” button in the top-right corner of the page
Alternatively, directly access via URL: https://web.devad.io/user/language/create?language=en

Page Structure

1. Language Management Page

Title: “Languages”
Breadcrumbs: Shows hierarchical navigation path (Dashboard > Language Management)
Actions:
“Add Language” button (opens the modal)
Table displaying existing languages

This modal contains the form for adding a new language:

Form Fields:

**Name ** (Required)

Type: Text input
Description: The name of the language (e.g., “English”, “Spanish”)
Validation: Required field
Character limit: Not specified in code but typically 2-50 characters

**Code ** (Required)

Type: Text input
Description: ISO language code (e.g., “en”, “es”, “fr”)
Validation: Required field
Character limit: Typically 2-5 characters

Flag Image (Optional)

Type: Text input
Description: URL to flag image for the language
Validation: Not required
Example: https://example.com/images/flag-en.png

Status (Required)

Type: Dropdown selection
Options:
- “Active” (default)
- “Inactive”
Description: Determines if the language is available for use on the site

Default Language (Required)

Type: Dropdown selection
Options:
- “Yes” (default)
- “No”
Description: Sets the language that will be displayed by default to visitors

Form Submission

Submission Method: POST
Endpoint: https://web.devad.io/user/language/store
CSRF Token: Included as a hidden field (_token)
Form Class: ajaxForm (indicates AJAX submission)
Success Handling:
Form is submitted without page reload
Success notification appears
New language appears in the language list

User Experience

Clicking the “Add Language” button opens the modal
The form is displayed with clear labels for each field
Required fields are marked with asterisks (*)
User fills out the form and clicks “Save”
successful submission:

Modal closes
Language is added to the language table
Success notification appears

If validation fails:

Error messages appear below the relevant fields
Form remains open for correction

Technical Implementation

Frontend

Uses Bootstrap modal for the add language form
Includes client-side validation for required fields
Implements AJAX form submission (class ajaxForm)
Includes CSRF token for security protection
Form is responsive and mobile-friendly

Backend

Endpoint: https://web.devad.io/user/language/store
Method: POST
Request Data:
name (language name)
code (ISO language code)
flag (flag image URL)
status (active/inactive status)
is_default (default language setting)
_token (CSRF token)
Response:
Success: Returns new language data
Error: Returns validation errors

Security Considerations

CSRF Protection: Uses a CSRF token (_token) for form security
Input Validation: Server-side validation of all form inputs
Access Control: Only administrators can access this feature
Data Sanitization: Input values are sanitized to prevent XSS attacks
Validation: Checks for valid ISO language codes

Best Practices

Language Code Standards: Always use ISO 639-1 language codes (e.g., “en”, “fr”)
Default Language: Set only one language as the default
Flag Images: Use consistent size and format for flag images (e.g., 16x16px)
Naming Conventions: Use clear and recognizable language names
Testing: Test all added languages to ensure proper display on the frontend

Error Handling

Validation Errors: Specific error messages displayed below form fields
Server Errors: General “An error occurred” message with technical details logged
Duplicate Codes: System prevents duplicate language codes
Default Conflict: System prevents setting multiple languages as default

This documentation provides comprehensive information for administrators to effectively manage language settings within the WEB.devad.io platform. The Add Language feature is essential for creating a multilingual website that can serve users from different regions and countries.

Edit Keywords Documentation

Overview

The Edit Keywords feature allows administrators to manage translation keywords for different language settings in the WEB.devad.io platform. This functionality is crucial for maintaining multilingual content and ensuring proper translation of all system elements across different languages.

Accessing Edit Keywords

Navigate to “Language Management” in the left sidebar navigation (icon: fas fa-language)
Click on the “Edit Keyword” button for the specific language you want to modify (usually located next to the language name in the language list)
Alternatively, access directly via URL: https://web.devad.io/user/language/{language_id}/edit/keyword?language={lang_code} Page Structure

Language Selection

The page displays the current language name as a heading (e.g., “English”)
This is typically labeled as “in English language” as mentioned in the user description

Keyword Translation Interface

The main content area consists of multiple keyword sections:

Individual Keyword Fields

Each keyword appears as a section with:

A title label showing the keyword name (in the source language)
A text input field for entering the translation in the target language
Example structure:

Form Fields

Each field has a label showing the keyword in the source language
Input fields accept text translations for the target language
Fields include validation and error messaging
Each keyword field has a clear label (e.g., “Date”, “Home”, “Submit”, etc.)
The system stores and displays all keywords that need translation

Save Button

At the bottom of the page, there is a “Update” button to save changes
The button is typically styled as a primary button with the label “Update”
It’s positioned prominently to encourage users to save their changes
Example implementation:

Technical Implementation

Frontend

Uses a responsive grid layout (Bootstrap columns) for organizing translation fields
Each keyword field is wrapped in a form group with proper labeling
Input fields use form-control class for consistent styling
Validation messages are displayed below each field
Form uses AJAX submission for seamless updates

Backend

Endpoint: https://web.devad.io/user/language/{language_id}/update
Method: POST
Request Data:
All keyword translations (key-value pairs)
Language ID
CSRF token
Response:
Success: Returns updated language configuration
Error: Returns validation errors

User Experience

Clicking the “Edit Keyword” button opens the translation interface
The page displays all keywords needing translation for the selected language
Each keyword is displayed with its English name and a text field for translation
Users can type the translation directly into the text box
After entering all translations, users click the “Update” button
On successful submission:

A notification appears: “Keywords updated successfully!”
Changes are immediately applied to the system

Best Practices

Translation Consistency: Keep translations consistent with the platform’s terminology
Complete Translations: Ensure all keywords are translated for the target language
Character Limits: Be aware of character limits for certain elements (like menu items)
Regular Updates: Update translations when new keywords are added to the platform
Preview Functionality: Test the translated interface to ensure proper display

Security Considerations

CSRF Protection: Uses a CSRF token (_token) for form security
Input Validation: Validates all input fields before processing
Role-Based Access: Only administrators can access this feature
Data Sanitization: All inputs are sanitized to prevent XSS attacks
Language ID Validation: System validates that the language ID exists before processing

Error Handling

Missing Translations: Error messages prompt the user to complete all required fields
Validation Errors: Specific error messages appear below each field when invalid input is detected
Server Errors: General error message appears with technical details logged
Form Submission: Success notification appears on successful update

This documentation provides comprehensive information for administrators to effectively manage language keywords within the WEB.devad.io platform. The Edit Keywords feature is essential for maintaining a fully functional multilingual website that caters to users in different language preferences.

Custom Page Documentation

Overview

The Custom Page feature allows administrators to create and manage custom content pages within the WEB.devad.io platform. This functionality provides flexibility to add unique content beyond the standard system pages, enabling tailored content delivery for specific user needs or marketing purposes.

Accessing Custom Page

Log in to the WEB.devad.io dashboard
Click on the “Custom Page” option in the left sidebar navigation (icon: la flaticon-file)
The “Custom Page” section contains two main options:

Create Page: For adding new pages
Pages: For viewing and managing existing pages

Alternatively, directly access via URL: https://web.devad.io/user/pages?language=en

Page Structure

1. Navigation Sidebar

The “Custom Page” section appears as a navigation item with icon la flaticon-file
It contains a collapsible submenu with:
“Create Page” (for adding new pages)
“Pages” (for viewing existing pages)

2. Page Management Interface

When accessing the “Pages” section, the interface includes:

Header Section

Title: “Page Lists” displayed prominently
Language Selector: Dropdown to switch between languages (e.g., English)
Action Buttons:
Add Page: Primary button to create a new page
Bulk Delete: Secondary button for deleting multiple pages

Content Area

Responsive Table: Displays all custom pages with columns:
ID
Title
Language
URL
Actions (for managing individual pages)

Action Buttons

Edit: For editing page content
View: For previewing the page on the website
Delete: For removing the page

Creating a New Page

Click the “Add Page” button (or navigate to https://web.devad.io/user/page/create?language=en)
The page displays a form with the following fields:

Page Title: Required field for the page title
Language: Dropdown to select the language for the page
Page Content: Rich text editor for content creation
Meta Title: Optional field for SEO optimization
Meta Description: Optional field for SEO optimization
Slug: URL-friendly version of the page title
Status: Toggle between active/inactive states

Submit the form to save the new page

Managing Existing Pages

From the “Pages” listing:

Edit Page

Click the “Edit” button for a page
The form displays the current page details for editing
Make changes to title, content, meta information, etc.
Save changes to update the page

View Page

Click the “View” button to see how the page appears on the website
Useful for previewing content before publishing

Delete Page

Click the “Delete” button to remove a page
System prompts for confirmation before deletion
Option to delete a single page or use bulk delete

Bulk Actions

Select multiple pages using checkboxes
Use the “Bulk Delete” button to remove selected pages
Only visible when pages are selected

Technical Implementation

Frontend

Uses Bootstrap 4 for responsive layout
Implements a data table with the basic-datatables plugin
Rich text editor integrated for page content (likely Summernote)
AJAX functionality for form submissions
Language selector for multilingual content management

Backend

Endpoint: https://web.devad.io/user/page/create (for new pages)
Endpoint: https://web.devad.io/user/pages (for listing pages)
Endpoint: https://web.devad.io/user/page/update (for editing pages)
Endpoint: https://web.devad.io/user/page/delete (for deleting pages)
Endpoint: https://web.devad.io/user/page/bulk-delete (for bulk deletion)
Method: POST for creating/editing, DELETE for deletion
CSRF Protection: Uses a CSRF token for all form submissions

Security Considerations

CSRF Protection: All forms include a CSRF token (_token)
Role-Based Access: Only administrators can access this feature
Input Validation: Server-side validation of all page content
Content Sanitization: Prevents XSS attacks through content filtering
File Upload Restrictions: No file uploads allowed in page content

Best Practices

Content Strategy: Plan page purpose and structure before creation
SEO Optimization: Use proper meta titles and descriptions for search visibility
URL Structure: Keep URLs clean and descriptive (e.g., /about-us instead of /page123)
Regular Maintenance: Review and update pages periodically
Testing: Always preview pages before publishing to ensure proper display
Language Management: Create consistent translations for all languages

User Experience

Clean, intuitive interface for page management
Responsive design works on all device sizes
Clear visual hierarchy with actionable buttons
Quick preview functionality for content validation
Language-specific content management

Troubleshooting

Page Not Showing: Verify page status is “Active” and URL is correct
Formatting Issues: Check for corrupted HTML in rich text editor
Language Errors: Ensure page language matches website language settings
Missing Content: Confirm all required fields are populated

This documentation provides comprehensive information for administrators to effectively manage custom content pages within the WEB.devad.io platform, enabling tailored content delivery and improved user experience for website visitors.

Contact Page Documentation

Overview

The Contact Page feature allows administrators to configure the contact information and form displayed on the website. This page serves as the primary communication channel between website visitors and the site administrators. It is part of the Custom Page functionality in the WEB.devad.io platform, providing language-specific contact information management.

Accessing Contact Page

Log in to the WEB.devad.io dashboard
Click on “Custom Page” in the left sidebar navigation (icon: la flaticon-file)
Select “Contact Page” from the submenu
Alternatively, directly access via URL: https://web.devad.io/user/contact?language=en

Page Structure

1. Language Selection

Dropdown at the top to select the language for configuration
Current language shown as “English” (with “en” as the language code)
Changing the language updates the form to edit contact information for that language

2. Contact Configuration Form

The main section contains form fields for configuring the contact page:

Contact Form Image

Field Type: Image upload
Purpose: Sets the image displayed with the contact form
Preview: Shows current image (default: noimage.jpg)
Validation:
File upload field with preview
Only image files are accepted
Max file size not specified but likely reasonable

Form Title

Field Type: Text input
Purpose: Title for the contact form
Placeholder: “Enter title”
Validation: Required field

Form Subtitle

Field Type: Text input
Purpose: Subtitle for the contact form
Placeholder: “Enter Subtitle”
Validation: Optional field

Address

Field Type: Textarea
Purpose: Contact address information
Placeholder: “Enter Address”
Instructions: Use newline to separate multiple addresses
Validation: Optional field with rows=”3″

Phone

Field Type: Tag input (tagsinput)
Purpose: Contact phone numbers
Placeholder: “Enter phone”
Instructions: Use comma to separate multiple contact numbers
Validation: Optional field

Email

Field Type: Tag input (tagsinput)
Purpose: Contact email addresses
Placeholder: “Enter Email Address”
Instructions: Use comma to separate multiple email addresses
Validation: Optional field

Latitude

Field Type: Text input
Purpose: Google Maps latitude coordinate
Placeholder: “Enter latitude”
Validation: Required for map functionality

Longitude

Field Type: Text input
Purpose: Google Maps longitude coordinate
Placeholder: “Enter longitude”
Validation: Required for map functionality

Map Zoom

Field Type: Text input
Purpose: Google Maps zoom level
Default Value: “12”
Placeholder: “Enter map zoom value”
Validation: Optional field

3. Save Button

“Update” button at the bottom of the form
Form uses ID “contactSecForm” for submission
AJAX submission triggered on button click
Success notification appears after form submission

Technical Implementation

Frontend

Uses Bootstrap 4 for responsive layout
Form fields utilize standard input types with proper labeling
File upload functionality for contact form image
Tags input plugin for phone and email fields (with data-role="tagsinput")
Language-specific form configuration via URL parameter

Backend

Endpoint: https://web.devad.io/user/contact/update/{language}
Method: POST
Request Data:
Contact form image (file)
Form title and subtitle
Address, phone, email information
Latitude, longitude, and map zoom values
Language identifier (e.g., “en”)
CSRF token (_token)
Response:
Success notification: “Updated successfully!”
Error handling for validation failures

User Experience

Clear separation of configuration fields for easy management
Visual preview of contact form image
Helpful instructions for multi-value fields (e.g., “Use comma to separate multiple contact numbers”)
Language-specific configuration options
Immediate feedback after form submission

Best Practices

Accuracy: Ensure all contact information is accurate and up-to-date
Map Integration: Verify latitude and longitude coordinates for proper map display
Image Quality: Use high-resolution images for better user experience
Language Consistency: Maintain consistent contact information across all languages
Error Prevention: Validate contact information to prevent invalid entries

Security Considerations

CSRF Protection: Uses CSRF token (_token) for form submission
Input Validation: All fields are validated both client-side and server-side
File Upload Security: Contact form image upload includes file type validation
Access Control: Only administrators can access this section

Error Handling

Validation Errors: Specific error messages displayed below form fields
File Upload Errors: Notifications for invalid file types or upload failures
Server Errors: General error message with technical details logged

This documentation provides comprehensive information for administrators to effectively configure the Contact Page within the WEB.devad.io platform. The Contact Page feature is essential for maintaining proper communication channels with website visitors and supporting the site’s user engagement strategy.

FAQ Management Documentation

Overview

The FAQ Management feature allows administrators to create, edit, and manage Frequently Asked Questions (FAQs) for the WEB.devad.io platform. This functionality provides a structured way to maintain a knowledge base for users, improving self-service support and reducing the need for manual customer inquiries.

Accessing FAQ Management

Log in to the WEB.devad.io dashboard
Click on “FAQ Management” in the left sidebar navigation (icon: la flaticon-round)
Alternatively, directly access via URL: https://web.devad.io/user/faq_management?language=en

Page Structure

1. Page Header

Title: “FAQ Management”
Breadcrumbs:
Dashboard > FAQ Management
Language Selector:
Dropdown to switch between languages (e.g., English)
Allows for language-specific FAQ management

2. Main Actions

Add FAQ Button: Primary button to create a new FAQ entry
Bulk Delete: Secondary button for deleting multiple selected FAQs
Search Field: Search bar to filter FAQs by question text

3. FAQ List Table

Displays all FAQs in a structured format:

Column	Description
Question	The FAQ question (shown as truncated text)
Answer	The FAQ answer (shown as truncated text)
Actions	Edit and Delete options

4. Modals

The page includes two main modals:

Title: “Add FAQ”
Fields:
**Language ** (Required): Dropdown to select the language for this FAQ
**Question *** (Required): Text input for the FAQ question
**Answer *** (Required): Textarea for the FAQ answer
Action: “Submit” button to create the FAQ

Title: “Update FAQ”
Fields:
**Language ** (Required): Dropdown to select the language for this FAQ
**Question *** (Required): Text input for the FAQ question
**Answer *** (Required): Textarea for the FAQ answer
Hidden Field: faq_id (to identify which FAQ is being edited)
Action: “Update” button to save changes

Adding a New FAQ

Click the “Add FAQ” button
Fill out the modal form:

Select the appropriate language from the dropdown
Enter the question in the “Question” field
Enter the answer in the “Answer” field

Click “Submit” to save the new FAQ
The new FAQ will appear in the list immediately

Editing an Existing FAQ

Click the “Edit” button next to a FAQ in the list
The “Update FAQ” modal will open with the current FAQ details
Modify the question and answer as needed
Click “Update” to save changes
The updated FAQ will appear in the list

Deleting an FAQ

Click the “Delete” button next to a FAQ in the list
Confirm the deletion in the popup dialog
The FAQ will be removed from the list

Bulk Actions

Check the boxes next to multiple FAQs
Click the “Delete” button in the top bar
Confirm the bulk deletion in the popup dialog
Selected FAQs will be removed

Technical Implementation

Frontend

Form Submission: Uses AJAX form submission for seamless updates
Data Table: Utilizes basic-datatables for displaying FAQs
Modals: Bootstrap modals for FAQ management actions
Validation: Client-side validation for required fields
Language Support: Dynamic language selection with URL parameter

Backend

Endpoint: https://web.devad.io/user/faq_management/store_faq (for adding)
Endpoint: https://web.devad.io/user/faq_management/update_faq (for editing)
Endpoint: https://web.devad.io/user/faq_management/delete_faq (for deleting)
Method: POST for all actions
CSRF Protection: Uses a CSRF token (_token) for security

Security Considerations

CSRF Protection: All forms include a CSRF token (_token)
Input Validation: Server-side validation of all FAQ content
Role-Based Access: Only administrators can access this section
Content Sanitization: Prevents XSS attacks through proper content filtering

Best Practices

Question Clarity: Write clear, concise questions that match common user inquiries
Answer Completeness: Provide thorough, helpful answers that solve the problem
Language Consistency: Ensure translations are accurate and consistent across all languages
Categorization: Keep related FAQs together for better user experience
Regular Review: Periodically review FAQs to ensure they remain relevant and accurate
Search Optimization: Use keywords that users would search for in your FAQ questions

User Experience

Responsive Design: Works on all device sizes
Clear Feedback: Success notifications appear after actions
Intuitive Interface: Easy to navigate with straightforward controls
Language Support: Manage FAQs in multiple languages
Quick Actions: Fast access to create, edit, and delete operations

Troubleshooting

Missing FAQs: Verify that the language setting matches the language of the FAQ
Form Validation Errors: Ensure all required fields are filled correctly
No Changes Applied: Check browser console for JavaScript errors
Server Errors: Verify that the server is running properly

Categorized in:

WEB App, Setup & Basics,

Press ESC to close

Documentation Content Table

System Features Documentation

User Management

System Configuration

Content Management

Business Features

Edit Profile Documentation

Overview

Accessing the Edit Profile Page

Page Structure

Form Fields

Profile Image (Optional)

First Name (Required)

Last Name (Required)

Company Name (Required)

Username (Required)

Phone (Required)

Address

City

State

Country (Required)

Form Submission

User Experience

Technical Implementation

Security Considerations

Notes for Developers

Menu Builder Documentation

Overview

Accessing the Menu Builder

Page Structure

1. Pre-built Menus (Left Column)

2. Add/Edit Menu (Middle Column)

Form Fields:

Buttons:

Behavior:

3. Website Menus (Right Column)

Adding Menu Items

Editing Menu Items

Saving the Menu Structure

Technical Implementation

Best Practices

Security Considerations

Registered Users Documentation

Overview

Accessing the Registered Users Page

Page Structure

1. Navigation Header

2. User Management Table

3. Action Buttons

User Management Features

Email Verification Status

Account Status

Adding New Users

Bulk Actions

Technical Implementation

Frontend

Backend

Data Structure

Security Considerations

User Management Best Practices

Error Handling

Footer Settings Documentation

Overview

Accessing Footer Settings

Page Structure

1. Navigation Header

2. Update Footer Text Form

Form Fields:

Technical Implementation

Frontend

Backend

Security Considerations

Best Practices

User Experience

Related Features

Advertisement Documentation

Overview

Accessing Advertisement Settings

Page Structure