Introduction
Readykit is a user friendly admin template with some attractive Vue components. A lot of time can be saved by using the ready components. The template is built with HTML, CSS, Bootstrap 4, VueJS and Laravel 8. The template has almost every component required for designing and developing a web application.
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
-
You will get two folders.
- development
- documentation
- Go to the development folder, you will find all the development files.
- Copy all the content from .env.example and then paste it on .env file.
-
Open terminal on the development root folder and write
composer install
and press enter. -
After completing the composer installation write
php artisan key:generate
and press enter. It will generate APP_KEY -
Configure your database to provide database credentials.
-
Run
php artisan migrate
-
Run
php artisan db:seed
-
Or you can run
php artisan migrate:fresh --seed
which will run the previous both commands. -
After completing the database migration you should run
yarn install
ornpm install
and press enter. -
Then run
yarn watch
ornpm run watch
. -
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 likephp 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
-
Upload your zip on server and extract it. Like these
- Create a database on server.
- Make a database user.
- Add user to database with all privileges.
-
Configure your database to provide database credentials on
.env
file. -
Now you need to restructure something. Go to your
development/public
folder and select all withoutmix-manifest.json
. Make sure that you are showing all hidden files. -
Move all the selected files and folders to your root where your zip extract like
development
-
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 isdevelopment
. So we just change/../
to/development/
and save. Image given below. -
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 return1
. After that delete/install-demo-data
from your url bar and press enter. -
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
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
-
First you should use
app-table
component. -
Then we should send
cardView = true
in options of datatable component. -
And then send
componentName = 'YourComponentName'
in options which is your desire card. where you can inject your own design. -
please check the usages in
resources/js/app/components/views/Demo/tables/grid-view
-
List view
-
Grid view
Kanban View
- In this view you can manage staging and pipelines like task management.
- Add update delete tasks and can modified kanban view with your choice.
-
please check the usages in
resources/js/app/components/views/Demo/Pages/kanban-view
Calendar View
- In this view you can manage event, schedule, calendar (add, update, delete).
-
please check the usages in
resources/js/app/components/views/Demo/Pages/calendar-view
Report
- There is a demo example by how you can show reports.
-
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.
Users
-
Click on Invite User, It will open a modal which requires User Email and
Roles that will assigned
to that user. Invited user will get an confirmation email with a link. That link will redirect
to a page where user can set their basic information.
- In Users table you can search by user's 'first name', 'last name' and user's 'email'. And also can filtered by 'Active', 'Inactive', 'Invited'.
-
There are some options in users table action buttons. These options are 'Edit', 'Delete', 'De-activate',
'Active',
'Manage Role'. For invited users 'De-activate', 'Active', options will not be available.
-
Pressing on 'Edit' button a modal will come and here you can change user's first name nad last name.
-
You can manage roles of any user by clicking on 'Manage Role' of that specific
user from "Action" column.
Roles
-
Click on Add Role, It will open a modal which requires Role name and
permissions for that role
-
You can manage users of any role by clicking on 'Manage Users' of that specific
role from "Action" column.
- You can manage permissions of any role by clicking on 'Manage' of that specific role from "Permission" column also.
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
-
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
-
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.
-
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.
-
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
- 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.
-
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
- For app level, Go to "resources/views/application/views/" directory of the project. For brand level, Go to "resources/views/brands/" directory.
- Create a directory and name it similar to your feature.
-
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')
-
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: -
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-
- Now go to "resource/assets/js/app/Component/Views" directory. make a directory related to your feature.
-
Add a new .vue file. Like for example-
Write your desired HTML code inside the component.
-
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.
- Now hit your route in the browser and see the new page.
For any kind of help or support, feel free to contact by visiting our profile page.