DOCSEARCHbyAlgolia
Submit Docs

JoshAdmin Documentation

website·Indexed 31 days ago

https://docs.joshadmin.com/

Documentation for JoshAdmin, a Laravel-based admin panel. Includes installation guides for Laravel versions 5.2 through 12.x, a GUI-based CRUD builder, and integration guides for UI components such as Bootstrap 5 Alerts, Toast Notifications, FullCalendar, and various icon sets including Font Awesome and Material Icons.

Tokens
14.5K
Snippets
105
Records
153
Agent score
47%

What's inside JoshAdmin

  1. Overview of the Josh Starter Kit

    The Josh Starter Kit (seeder kit) is a minimized version of the full Josh package designed to reduce the time spent removing unwanted pages. It includes only the essential admin panel components: authentication and authorization features (users and groups), a CRUD generator, and an empty dashboard. It does not include a frontend.

  2. UI Framework and Dependency Updates (v1.5)

    The system has been updated to use Bootstrap 5.3 (upgraded from 4.6). JavaScript execution now uses strict mode for better error handling. CSS and JS have been decoupled into separate files, and inline/internal styles and scripts have been removed to reduce bloat.

  3. Josh Admin V2 Development Principles

    v2

    Josh Admin V2 is rebuilt using modern standards to improve performance and organization. Key development principles include:

    JavaScript Standards:

    • Prefer vanilla JS plugins over jQuery plugins and avoid jQuery where possible.
    • Use ES6 syntax.
    • Use only one plugin per functional type (e.g., one for date pickers, one for dropdowns), except for charts.
    • Prioritize plugins in active development to ensure faster page loading.

    CSS Standards:

    • Use Sass/SCSS for all styles, following the 7-1 modular pattern.
    • Implement proper Bootstrap overriding.
    • Use npm packages for vendor prefixing.
    • Minify and compress all output CSS files.

  4. Understand the Josh Laravel starter template philosophy

    Josh is designed as a starter template for Laravel applications. Its core philosophy is to maintain a lightweight footprint by using a minimum number of Composer packages, despite the availability of many third-party options, to ensure the project remains a clean starting point for further development.

  5. Understand the Josh download folder structure

    When downloading Josh, the package is organized into the following directories:

    • Documentation: Contains a link to the live documentation website.
    • Livicons: Contains documentation and examples for the included Livicons library.
    • V1: Contains the original version of Josh (Full and Starter versions).
    • V2: Contains the V2 flavor of Josh as seen in the demo.
    ├── Documentation
├── Livicons
├── V1
│   ├── laravel-x.y.z.zip
│   ├── starter-x.y.z.zip
├── V2
│   ├── v2-x.y.z.zip

  6. Compile frontend assets

    Install frontend dependencies and compile assets to make the website functional. Once completed, the site is accessible via /public (or the root if using virtual hosts), and the admin panel is located at /public/admin.
    yarn install
npm run dev

  7. Install JoshAdmin composer dependencies for existing projects

    Depending on your project state, use one of the following methods to install the required composer packages:

    1. If your project already has custom packages: Manually copy the required packages from the JoshAdmin composer.json into your own.
    2. If your project has no additional packages: Copy the composer.json and composer.lock files from JoshAdmin into your project root and run composer install.
    composer install

  8. Initialize JOSH database and default users

    Run the migration and seed command to create the necessary tables and default accounts. The default credentials provided by the seeder are:

    To add dummy data for datatables examples, run the specific DatatablesSeeder.

    # Standard migration and seeding
php artisan migrate --seed

# Optional: Seed dummy data for datatables
php artisan db:seed --class=DatatablesSeeder

  9. Set up default admin users for JOSH

    Run the migration with the --seed flag to create the necessary database tables and insert default administrative and user accounts.

    Default Credentials:

    • Admin: admin@example.com / admin (Role: admin)
    • User: user@example.com / user (Role: user)

    To add dummy data for datatables examples, run the specific DatatablesSeeder.

    # Create tables and default users
php artisan migrate --seed

# Optional: Add dummy data for datatables
php artisan db:seed --class=DatatablesSeeder

  10. Integrate Ionicons icon font into a page

    To use Ionicons, include the Ionicons CSS stylesheet within the @section('header_styles') block of your page. Then, use the <i> tag with the ion class and the specific icon class (e.g., ion-md-airplane) to render the icon.
    <!-- Step 1: Include CSS in @section('header_styles') -->
<link rel="stylesheet" href="{{ asset('vendors/ionicons/css/ionicons.min.css') }}"/>

<!-- Step 2: HTML Markup Example -->
<li class="list-inline-item clr m-4" data-toggle="tooltip" data-original-title="ion-md-airplane">
     <div class="m-3 d-flex justify-content-center">
           <i class=".align-self-center fa-2x ion ion-md-airplane"></i>
      </div>
</li>

  11. Configure database and seed admin user for Laravel 5.4

    Configure the database connection by editing the .env file. Once configured, run the migrations to create the database schema and execute the AdminSeeder to create the initial administrator account.
    # Run database migrations
php artisan migrate

# Seed the admin user
php artisan db:seed --class=AdminSeeder

  12. Install and initialize SweetAlert2 in JoshAdmin

    SweetAlert2 is used as a replacement for standard JavaScript alerts. To implement it, include the required CSS in the header, the JS library in the footer, and initialize the alert using the Swal.fire() method.

    <!-- Step 1: Add to @section('header_styles') --> <link href="{{ asset('vendors/sweetalert/css/sweetalert2.css') }}" rel="stylesheet" type="text/css" />

    <!-- Step 2: Add to @section('footer_scripts') --> <script src="{{ asset('vendors/sweetalert/js/sweetalert2.js') }}" type="text/javascript"></script>

    <!-- Step 3: HTML Markup --> <button type="button" class="btn btn-outline-info" id="btn1"> Simple Alert </button>

    <!-- Step 4: Initialization (Place after the plugin JS file) --> <script> $('#btn1').on('click', function() { Swal.fire('Here's your text message in the sweet alert!'); }); </script>