Symfony Powerful Dashboard & Admin. Developed with Symfony framework.
No changes were made to the symfony structure, the current directory structure is used. A custom namespace for Admin has been created. This field is used for all administrator operations.
The interface is designed to be responsive using Twitter Bootstrap and limenius/react-bundle for integrate react in Twig template . The least possible dependency was tried to be used.
you can use React and Symfony together ,In Addition you can use command line for Convert Entity to API and make React Grid for manage Database Tabel .
MajPanel Generate crud (Create, read, update and delete ) DataBase Operation automatically trough Rest API and also create React Tabel in order to Manage your DataBase Tabel . you can generate automatically React Grid and API For your Entity .
Some Packages that were used in MajPanel :
- Symfony Authentication
- Symfony Validation
- Symfony React Sandbox
- React Grid
- React Hook Form
- React material-ui
- Installation
- How to add new Entity
- How to reinstall Entity
- How to delete Entity
- API PATH
- Config Entity
- Config Symfony Validation
- Config React Validation
- How To add React Component in Twig
Requirements: you need a recent version of node, and Webpack installed (you can install it with npm install -g webpack webpack-dev-server).
1- Download Package
2- install Package symfony & React
composer install & npm install
3- Configure your database editing .env and setting your database name, user and password. Then, create the schema .
- php bin/console doctrine:database:create
- php bin/console make:migration
- php bin/console d:mig:mig
4- load fixtures:
- php bin/console doctrine:fixtures:load
5- prepering register component react
npm run webpack-serverside
6- run symfony server and webpack as same Time in 2 Command Prompt.
- symfony server:start
- npm run webpack-dev
After this, visit http://127.0.0.1:8000.
7- Admin Panel : username : admin@example.com password : 123456
make (React Grid Tabel + API + Config file + Twig Template )
php bin/console majpanel EntityName install
Note : remove EntityName.yaml and regenerate all files again
php bin/console majpanel EntityName reinstall
php bin/console majpanel EntityName delete
- admin/majpanel/api/EntityName/getid/{type}/{id}/ //GET
- admin/majpanel/api/EntityName/search/{field}/{value} //GET
- admin/majpanel/api/EntityName/del/ //DEL
- admin/majpanel/api/EntityName/update/ //PUT
- admin/majpanel/api/EntityName/insert/ //POST
- admin/majpanel/api/city/getfiles/{id} //GET
- admin/majpanel/api/city/delfile/ //POST
These actions act as an API and will be used by the client-side React code to retrieve data as needed when navigating to other pages without reloading the pages.
Note : after change config you should run install command in order to configure new files . Configure Entity : config/MajPanel/EntityName.yaml
- ColumnsGrid : Config React Grid
- SetFiledDetail : Config which property You Want to Show in Detail Dialog Box
- SetFiledEdit : Config which property You Want to Show in Edit Dialog Box
- src/Form/MajPanel/EntityName/EditFormValidateCity.php
- src/Form/MajPanel/EntityName/InsertFormValidateCity.php
- assets/js/MajPanel/Grid/EntityName/Config/ConfigEditForm.jsx
- assets/js/MajPanel/Grid/EntityName/Config/ConfigInsertForm.jsx
Configure your Validation custom ConfigEditForm.jsx & ConfigInsertForm.jsx
export const ValidateFields={
"email" :
{
required: "Enter your e-mail",
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
message: "Enter a valid e-mail address",
},
} ,
"postcode" :
{
required: "Postcode required" ,
pattern: {
value: /[0-9]{10}/,
message: "Enter number Postcode ",
},
}
};
Take a look at the assets/js/entryPoint.js file:
First of all you should register your Component :
{{ react_component('RouterAdminBlog', {'props': props}) }}
- assets/js/MajPanel/Config/init.jsx
yarn encore production
this future an example for manage a blog