Introduction

Configuration

Server requirements

• PHP >= 7.4
• OpenSSL PHP Extension
• PDO PHP Extension
• Mbstring PHP Extension
• Tokenizer PHP Extension
• XML PHP Extension
• Ctype PHP Extension
• JSON PHP Extension
• ZIP PHP Extension
• BCMath PHP Extension

Development Requirements

• Node.js 10+
• npm 6+

How to Configure Locally

1. You will get two folders.
   • development
   • documentation
2. Go to the development folder, you will find all the development files.
3. Copy all the content from .env.example and then paste it on .env file.
4. Open terminal on the development root folder and write composer install and press enter.
5. After completing the composer installation write php artisan key:generate and press enter. It will generate APP_KEY
6. Configure your database to provide database credentials.
7. Run php artisan migrate
8. Run php artisan db:seed
9. Or you can run php artisan migrate:fresh --seed which will run the previous both commands.
10. After completing the database migration you should run yarn install or npm install and press enter.
11. Then run yarn watch or npm run watch .
12. Serving Laravel: If you want to use PHP's buit-in development server, you may use the php artisan serve . By default the HTTP-server will listen to port 8000. You can also change the port by adding
    --port argument like php artisan serve --port=8080 .

How to Configure on Server

You can see that we are not giving you the vendor & node_modules folder. When you install laravel via composer you will find the vendor folder. That's why we are giving you this composer install command. Using this command you will get all the laravel dependencies. Another command is npm install or yarn install which will give you node_modules. These are the package dependencies manager.

When you want to upload readykit development folder you need to follow all the "How to configure locally" steps. Then make a zip file and upload it on your server. Please folow the the instructions which is given bellow

1. Upload your zip on server and extract it. Like these
2. Create a database on server.
3. Make a database user.
4. Add user to database with all privileges.
5. Configure your database to provide database credentials on .env file.
6. Now you need to restructure something. Go to your development/public folder and select all without mix-manifest.json. Make sure that you are showing all hidden files.
7. Move all the selected files and folders to your root where your zip extract like development
8. Now you need to edit your index.php file. When you open it you will see something like these.
   We just redirect our require path. Here our require path is development. So we just change /../ to /development/ and save. Image given below.
9. Now open your browser new tab and browse your url. Then you will find a migration error because your database are not migrate yet. In your url bar write /install-demo-data it will migrate and seed all the data. And also clear all the cache, config, view etc. Image given bellow.
   It will return 1. After that delete /install-demo-data from your url bar and press enter.
10. Final step we need to make symlink with storage folder. Just write /symlink in url bar.

Layout overview

The dashboard is mostly designed by Bootstrap. You can find the documentation here getbootstrap.com
In our ReadyKit app we use app-navbar and sidebar component For layout view. Here the developer guideline for working with sidebar and navbar resources/js/core/components/layouts/readme.md

Components overview

To design a complete application almost all of the necessary components are built here. You can use your custom design components also for your application. All the components are built with VueJS.

Avatars

To use the component you have to call app-avatar. There many types of image avatar design available. See the full documentation of this component in the directory resources/js/core/components/avatars/readme.md. You can also find groups of avatars documentation here resources/js/core/components/avatars-group/readme.md

Badges & Notes

There are numbers of badges & notes available here. To use the badge component you have to call app-badge and note component call app-note See the full documentation of badge and note component in resources/js/core/components/badge/readme.md

Buttons

To use the button component you have to call app-button. See the full documentation of button component in resources/js/core/components/buttons/readme.md

Breadcrumb

To use the component you have to call app-breadcrumb. See the full documentation of this component in the directory resources/js/core/components/breadcrumb/readme.md

Icons

We used "Feather Icon" in our application. You can see all their icons here feathericons.com. We built a app-icon component to use icon anywhere. You just have to pass the icon name. See details documentation of icon component resources/js/core/components/icon/readme.md

Media Object

To use the component you have to call app-media-object. Contains image title and subtitle. Full uses documentation here resources/js/core/components/media-object/readme.md.

Modals

For anything confirmation like yes or no with modal. You may call app-confirmation-modal. See documentation on modal from resources/js/core/components/confirmation-modal/readme.md

Confirmation Modals

We provide different designed modal for webpage. Using app-modal component you can add modal to any page. See documentation on modal from resources/js/core/components/modal/readme.md

Form Input

By calling app-input you can add different kind of inputs in a web page. See details documentation of input here resources/js/core/components/input/readme.md

Charts

There we have different type of charts for viewing statistically. we build app-chart component for this. There have different type of chart available here. Find the detail documentation on chart from resources/js/core/components/charts/readme.md

Datatable

Datatable is one of the premium component of our dashboard. With a lot of filters type you can easily display and manipulate your data in a table. Find the detail documentation on datatable from resources/js/core/components/datatable/readme.md

Tabs

We provide both horizontal and vertical tab design for application. See full app-tab component documentation from resources/js/core/components/tabs/readme.md

Form wizard

We provide form wizard design for application. It will help you to give permission to others tabs. See full app-form-wizard component documentation from resources/js/core/components/form-wizard/readme.md

Advanced view

Gridview Datatable

1. First you should use app-table component.
2. Then we should send cardView = true in options of datatable component.
3. And then send componentName = 'YourComponentName' in options which is your desire card. where you can inject your own design.
4. please check the usages in resources/js/app/components/views/Demo/tables/grid-view
5. List view
6. Grid view

Kanban View

1. In this view you can manage staging and pipelines like task management.
2. Add update delete tasks and can modified kanban view with your choice.
3. please check the usages in resources/js/app/components/views/Demo/Pages/kanban-view

Calendar View

1. In this view you can manage event, schedule, calendar (add, update, delete).
2. please check the usages in resources/js/app/components/views/Demo/Pages/calendar-view

Report

1. There is a demo example by how you can show reports.
2. please check the usages in resources/js/app/components/views/Demo/Pages/Report.vue

User & Roles

Users and Roles management is an important feature for any application. You may need different types of Roles for Users. For that you have to create roles as you required and gives them permission to access.

Settings

We provide some basic settings in our application which will faster your development

General Settings

Go to "Settings" > "General Setting"

• In this setting you can set your company name.
• You can upload company logo, icon and banner.
• Change suitable Language for application.
• Set Date and Time format and Timezone the way you want to see date/time in your application .
• Decimal separator, Thousand separator, Number of decimal also can be set.

Email Settings

Go to "Settings" > "Email Setting"

From this setting you can set your email delivery for your application

We provide 6 supported mail services for set email

1. Amazon SES

   Amazon SES needed Api Region, Access Key, Secret Access key, Host name, From name and From email to set up.

   

   Follow this link to know how you can verify the email address

2. Mailgun

   To set up Mailgun you will need a Domain name (Here is how you can add domain in mailgun), API key, From name, and From email.

   

3. SMTP

   

   To set SMTP mail service provider you need to set smtp host, Port, Password to access from the email sent and a encryption type, N.B: Don't forget to enable less secure app permission in the email which you sent from.

4. Sendmail

   

   Sendmail needs a host name, port, username and password to access to the mail.

SMS Settings

Go to "Settings" > "SMS Setting"

This setting will help you to send SMS to your application user

We use Nexmo for sending SMS. See Nexmo documentation from here

ReCAPTCHA Settings

Go to "Settings" > "ReCAPTCHA Setting"

To enable reCaptcha in authentication you have to enter your site key and secret key from google

See documentation from here here

Notification Settings

Go to "Settings" > "Notification Setting"

You can update settings from here and Also can update the template of notification. You have the following option in notification setting:

• You can set channels where the notification will send.
• You can set choose users who will be notified on selected event.
• You can set choose roles to set these audiences under that roles to get notified.
• You can set up the template for the notification.

Development Guide

Environment configuration

1. Open your project on an editor. Open terminal and run "npm i". Make sure that Nodejs is installed on your PC. If Nodejs is not installed on your PC Click here to download and install Nodejs.
2. After successfully installed node_modules, To change something in vue component you need to go through the following steps -
   Steps : Go to resource/assets/js/component (You will find all the component here with specific folder) > Change something in vue component > run "npm run watch" command from terminal (You must have Nodejs install first) > Refresh browser to see the change

Add a new page

1. For app level, Go to "resources/views/application/views/" directory of the project. For brand level, Go to "resources/views/brands/" directory.
2. Create a directory and name it similar to your feature.
3. Add a new blade file with the following code. Make sure to change "default .preferred_title_of_this_page" to your page title which is added in default.php of your language file and change the "app-component-name" to your component name related to feature. (component create process described below) for app level use @extends('layout.app'), for brand level use @extends('layout.brand')
   
   
4. Go to "app/Http/Controllers/" make a directory similar to your feature name. Create a controller class like "YourFeatureNameController", which is extends "App\Http\Controllers\Controller". create a function that returns view of the page you created before.
   Like for example:
5. Go to "routes/" directory, check route files and subdirectories. You can create a .php file or you also can add in existing file which is similar to your feature. and create a route for your page like that-
6. Now go to "resource/assets/js/app/Component/Views" directory. make a directory related to your feature.
7. Add a new .vue file. Like for example- Write your desired HTML code inside the component.
8. Go to "resource/assets/js/app/appComponent.js" file and register your vue component Save your changes. Make sure that your component is compiling successfully.
9. Now hit your route in the browser and see the new page.