{"id":15285791,"url":"https://github.com/phpmv/phpmv-ui","last_synced_at":"2025-04-10T11:12:17.100Z","repository":{"id":50510043,"uuid":"61305465","full_name":"phpMv/phpMv-UI","owner":"phpMv","description":"Visual components  library (jQuery, Bootstrap, Semantic-UI) for php \u0026 php MVC Frameworks","archived":false,"fork":false,"pushed_at":"2024-09-19T23:32:12.000Z","size":1213,"stargazers_count":33,"open_issues_count":0,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-31T20:38:03.260Z","etag":null,"topics":["component-library","jquery","php","php-framework","php-library","php-mvc-framework","phpmv","semantic-ui","twitter-bootstrap","ui"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phpMv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-16T15:34:37.000Z","updated_at":"2024-09-29T11:31:48.000Z","dependencies_parsed_at":"2024-01-04T19:26:42.652Z","dependency_job_id":"1d85c29c-d361-4ac3-a074-854534a5dbe5","html_url":"https://github.com/phpMv/phpMv-UI","commit_stats":{"total_commits":564,"total_committers":1,"mean_commits":564.0,"dds":0.0,"last_synced_commit":"bfcee26f8d435541b45bcff9bf49ff07aa40af65"},"previous_names":[],"tags_count":73,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phpMv%2FphpMv-UI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phpMv%2FphpMv-UI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phpMv%2FphpMv-UI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phpMv%2FphpMv-UI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phpMv","download_url":"https://codeload.github.com/phpMv/phpMv-UI/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248208563,"owners_count":21065202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-library","jquery","php","php-framework","php-library","php-mvc-framework","phpmv","semantic-ui","twitter-bootstrap","ui"],"created_at":"2024-09-30T15:07:38.218Z","updated_at":"2025-04-10T11:12:17.081Z","avatar_url":"https://github.com/phpMv.png","language":"PHP","readme":"![php-mv-UI](http://angular.kobject.net/git/phalconist/php-mv-ui-.png \"phpMv-UI\")\n\n**Visual components library** (JQuery UI, Twitter Bootstrap, Semantic-UI) for php and php MVC frameworks\n\n[phpMv-UI website](https://phpmv-ui.kobject.net/)\n\n[![Build Status](https://scrutinizer-ci.com/g/phpMv/phpMv-UI/badges/build.png?b=master)](https://scrutinizer-ci.com/g/phpMv/phpMv-UI/build-status/master) [![Latest Stable Version](https://poser.pugx.org/phpmv/php-mv-ui/v/stable)](https://packagist.org/packages/phpmv/php-mv-ui) [![Total Downloads](https://poser.pugx.org/phpmv/php-mv-ui/downloads)](https://packagist.org/packages/phpmv/php-mv-ui) [![License](https://poser.pugx.org/phpmv/php-mv-ui/license)](https://packagist.org/packages/phpmv/php-mv-ui)\n[![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/phpMv/phpMv-UI/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/phpMv/phpMv-UI/?branch=master) \n[![Documentation](https://codedocs.xyz/phpMv/phpMv-UI.svg)](http://api.kobject.net/phpMv-UI/)\n\n\n## What's phpMv-UI ?\n\nphpMv-UI is a visual components library for php : a php wrapper for jQuery and UI components (jQuery, Twitter Bootstrap, Semantic-UI).\n\nUsing the dependency injection, the jQuery object can be injected into **php framework container**, allowing for the generation of jQuery scripts in controllers, respecting the MVC design pattern.\n\n## Requirements/Dependencies\n\n* PHP \u003e= 7.0\n* JQuery \u003e= 2.0.3\n* JQuery UI \u003e= 1.10 [optional]\n* Twitter Bootstrap \u003e= 3.3.2 [optional]\n* Semantic-UI \u003e= 2.2 or Fomantic-UI \u003e= 2.7 [optional]\n\n## Resources\n* [API](https://api.kobject.net/phpMv-UI/)\n* [Documentation/demo](https://phpmv-ui.kobject.net/)\n* [Semantic-ui](https://semantic-ui.com) [Fomantic-ui](https://fomantic-ui.com)\n\n## I - Installation\n\n### Installing via Composer\n\nInstall Composer in a common location or in your project:\n\n```bash\ncurl -s http://getcomposer.org/installer | php\n```\nCreate the composer.json file in the app directory as follows:\n\n```json\n{\n    \"require\": {\n        \"phpmv/php-mv-ui\": \"^2.3\"\n    }\n}\n```\nIn the app directory, run the composer installer :\n\n```bash\nphp composer.phar install\n```\n\n### Installing via Github\n\nJust clone the repository in a common location or inside your project:\n\n```\ngit clone https://github.com/phpMv/phpMv-UI.git\n```\n\n## II PHP frameworks configuration\n### Library loading\nphpMv-UI complies with [PSR-4 recommendations](http://www.php-fig.org/psr/psr-4/) for auto-loading classes.\nWhatever the php framework used, with \"composer\", it is enough to integrate the Composer autoload file.\n```php\nrequire_once(\"vendor/autoload.php\");\n```\n### \u003cimg src=\"http://angular.kobject.net/git/images/ubiquity.png\" width=\"30\"\u003e Ubiquity configuration\n\n#### Library loading\nThe library is already loaded by default in the config file **app/config/config.php** :\n\n```php\n\t\"di\"=\u003earray(\n\t\t\t\"@exec\"=\u003earray(\"jquery\"=\u003efunction ($controller){\n\t\t\t\t\t\treturn \\Ajax\\php\\ubiquity\\JsUtils::diSemantic($controller);\n\t\t\t\t\t})\n\t\t\t),\n```\n#### Use in controllers\nExample of creating a Semantic-UI button\n\n```php\n/**\n * @property \\Ajax\\php\\ubiquity\\JsUtils $jquery\n */\nclass ExempleController extends Controller{\n\tpublic function index(){\n\t\t$semantic=$this-\u003ejquery-\u003esemantic();\n\t\t$button=$semantic-\u003ehtmlButton(\"btTest\",\"Test Button\");\n\t\techo $button;\n\t}\n}\n```\n### \u003cimg src=\"http://angular.kobject.net/git/images/phalcon.png\" width=\"30\"\u003e Phalcon configuration\n\n#### Library loading\nWithout Composer, It is possible to load the library with the **app/config/loader.php** file :\n\n```php\n$loader = new \\Phalcon\\Loader();\n$loader-\u003eregisterNamespaces(array(\n\t\t'Ajax' =\u003e __DIR__ . '/../vendor/phpmv/php-mv-ui/Ajax/'\n))-\u003eregister();\n```\n\n#### Injection of the service\n\nIt is necessary to inject the JQuery service at application startup, in the service file **app/config/services.php**, and if necessary instantiate Semantic, Bootstrap or Jquery-ui :\n```php\n$di-\u003eset(\"jquery\",function(){\n    $jquery= new Ajax\\php\\phalcon\\JsUtils();\n    $jquery-\u003esemantic(new Ajax\\Semantic());//for Semantic UI\n    return $jquery;\n});\n```\n\n#### Use in controllers\nExample of creating a Semantic-UI button\n\n```php\nuse Phalcon\\Mvc\\Controller;\nuse Ajax\\php\\phalcon\\JsUtils;\n/**\n * @property JsUtils $jquery\n */\nclass ExempleController extends Controller{\n\tpublic function indexAction(){\n\t\t$semantic=$this-\u003ejquery-\u003esemantic();\n\t\t$button=$semantic-\u003ehtmlButton(\"btTest\",\"Test Button\");\n\t\techo $button;\n\t}\n}\n```\n\n### \u003cimg src=\"http://angular.kobject.net/git/images/ci.png\" width=\"30\"\u003e CodeIgniter configuration\n#### Library loading\nIf you want CodeIgniter to use a Composer auto-loader, just set `$config['composer_autoload']` to `TRUE` or a custom path in **application/config/config.php**.\n\nThen, it's necessary to create a library for the JsUtils class\n\n##### Library creation\nCreate the library **XsUtils** (the name is free) in the folder **application/libraries**\n\n```php\nuse Ajax\\php\\ci\\JsUtils;\nclass XsUtils extends Ajax\\php\\ci\\JsUtils{\n\tpublic function __construct(){\n\t\tparent::__construct([\"semantic\"=\u003etrue,\"debug\"=\u003efalse]);\n\t}\n}\n```\n#### Injection of the service\nAdd the loading of the **XsUtils** library in the file **application/config/autoload.php**\n\nThe jquery member will be accessible in the controllers\n```php\n$autoload['libraries'] = array('XsUtils' =\u003e 'jquery');\n```\nOnce loaded you can access your class in controllers using the **$jquery** member:\n```php\n$this-\u003ejquery-\u003esome_method();\n```\n\n### ![](http://angular.kobject.net/git/images/laravel.png) Laravel configuration\n\n#### Library loading\nIf you do not use the Composer autoloader file, you can also load phpMv-UI with composer.json :\n\n```json\n\"autoload\": {\n    \"classmap\": [\n        ...\n    ],\n    \"psr-4\": {\n        \"Ajax\\\\\": \"vendor/phpmv/php-mv-ui/Ajax\"\n    }\n},\n```\n#### Injection of the service\nRegister a Singleton in **bootstrap/app.php** file :\n\n```php\n$app-\u003esingleton(Ajax\\php\\laravel\\JsUtils::class, function($app){\n\t$result= new Ajax\\php\\laravel\\JsUtils();\n\t$result-\u003esemantic(new Ajax\\Semantic());\n\treturn $result;\n});\n```\n\nThen it is possible to inject the **JsUtils** class in the base class controllers constructor :\n\n```php\nuse Ajax\\php\\laravel\\JsUtils;\nclass Controller extends BaseController{\n    use AuthorizesRequests, AuthorizesResources, DispatchesJobs, ValidatesRequests;\n    protected $jquery;\n\n    public function __construct(JsUtils $js){\n    \t$this-\u003ejquery = $js;\n    }\n\n    public function getJquery() {\n    \treturn $this-\u003ejquery;\n    }\n}\n```\n### \u003cimg src=\"http://angular.kobject.net/git/images/yii.png\" width=\"30\"\u003e Yii configuration\n\n#### Library loading\nThe classes in the installed Composer packages can be autoloaded using the Composer autoloader. Make sure the entry script of your application contains the following lines to install the Composer autoloader:\n```php\nrequire(__DIR__ . '/../vendor/autoload.php');\nrequire(__DIR__ . '/../vendor/yiisoft/yii2/Yii.php');\n```\nIn the same file, register a new dependency :\n```php\n\\Yii::$container-\u003esetSingleton(\"Ajax\\php\\yii\\JsUtils\",[\"bootstrap\"=\u003enew Ajax\\Semantic()]);\n```\n#### Injection of the service\nThe **JsUtils** singleton can then be injected into controllers\n\n```php\nnamespace app\\controllers;\n\nuse yii\\web\\Controller;\nuse Ajax\\php\\yii\\JsUtils;\n\nclass SiteController extends Controller{\n\tprotected $jquery;\n\n\tpublic function __construct($id, $module,JsUtils $js){\n\t\tparent::__construct($id, $module);\n\t\t$this-\u003ejquery=$js;\n\t}\n}\n```\n\n### \u003cimg src=\"http://angular.kobject.net/git/images/symfony.png\" width=\"30\"\u003e Symfony configuration\n\n#### Library loading\nIf you do not use the Composer autoloader file, you can also load phpMv-UI with [Ps4ClassLoader](http://symfony.com/doc/current/components/class_loader/psr4_class_loader.html) :\n\n```php\nuse Symfony\\Component\\ClassLoader\\Psr4ClassLoader;\n\nrequire __DIR__.'/lib/ClassLoader/Psr4ClassLoader.php';\n\n$loader = new Psr4ClassLoader();\n$loader-\u003eaddPrefix('Ajax\\\\', __DIR__.'/lib/phpmv/php-mv-ui/Ajax');\n$loader-\u003eregister();\n```\n\n\n#### Symfony 4\n\nCreate a service inheriting from `JquerySemantic`\n```php\nnamespace App\\Services\\semantic;\n\nuse Ajax\\php\\symfony\\JquerySemantic;\n\nclass SemanticGui extends JquerySemantic{\n}\n```\nCheck that autowiring is activated in **config/services.yml**:\n```yml\nservices:\n    # default configuration for services in *this* file\n    _defaults:\n        autowire: true      # Automatically injects dependencies in your services.\n```\nYou can then use dependency injection on properties, constructors or setters:\n\n```php\nnamespace App\\Controller;\n\nuse Symfony\\Bundle\\FrameworkBundle\\Controller\\AbstractController;\nuse App\\Services\\semantic\\SemanticGui;\n\nBarController extends AbstractController{\n\t/**\n\t * @var SemanticGui\n\t */\n\tprotected $gui;\n\n    public function loadViewWithAjaxButtonAction(){\n    \t$bt=$this-\u003egui-\u003esemantic()-\u003ehtmlButton('button1','a button');\n    \t$bt-\u003egetOnClick(\"/url\",'#responseElement');\n    \treturn $this-\u003egui-\u003erenderView(\"barView.html.twig\");\n    }\n}\n```\n#### Symfony 3\n##### Injection of the service\nCreate 2 services in the **app/config/services.yml** file :\n  * The first for the JsUtils instance\n  * The second for the controller\n  \n```yml\nparameters:\n    jquery.params:\n        semantic: true\nservices:\n    jquery:\n        class: Ajax\\php\\symfony\\JsUtils \n        arguments: [%jquery.params%,'@router']\n        scope: request\n    app.default_controller:\n        class: AppBundle\\Controller\\DefaultController \n        arguments: ['@service_container','@jquery']\n```\nIt is then possible to inject the Symfony container and the JsUtils service in the controller constructor :\n\n```php\nnamespace AppBundle\\Controller;\n\nuse Sensio\\Bundle\\FrameworkExtraBundle\\Configuration\\Route;\nuse Symfony\\Bundle\\FrameworkBundle\\Controller\\Controller;\nuse Symfony\\Component\\DependencyInjection\\ContainerInterface;\nuse Ajax\\php\\symfony\\JsUtils;\nuse AppBundle\\AppBundle;\n\n/**\n * @Route(service=\"app.default_controller\")\n */\nclass DefaultController extends Controller{\n\t/**\n\t * @var Ajax\\php\\symfony\\JsUtils\n\t */\n\tprotected $jquery;\n\n\tpublic function __construct(ContainerInterface $container,JsUtils $js){\n\t\t$this-\u003econtainer=$container;\n\t\t$this-\u003ejquery= $js;\n\t}\n}\n```\n### \u003cimg src=\"http://angular.kobject.net/git/images/cakephp.png\" width=\"30\"\u003e CakePhp configuration\n\n#### Component creation\nCopy the file **JsUtilsComponent.php** located in **vendor/phpmv/php-mv-ui/Ajax/php/cakephp** to the **src/controller/component** folder of your project\n\n#### Component loading in controllers\nAdd the **JsUtils** component loading in the initialize method of the base controller **AppController**, located in **src/controller/appController.php**\n```php\n    public function initialize(){\n        parent::initialize();\n\n        $this-\u003eloadComponent('RequestHandler');\n        $this-\u003eloadComponent('Flash');\n        $this-\u003eloadComponent('JsUtils',[\"semantic\"=\u003etrue]);\n    }\n```\n#### Usage\n\nthe jquery object in controller will be accessible on\n`$this-\u003eJsUtils-\u003ejquery`\n\n## Code completion in IDE\n\nWith most IDEs (such as Eclipse or phpStorm), to get code completion on the `$jquery` instance, you must add the following property in the controller documentation:\n```php\n/**\n  * @property Ajax\\JsUtils $jquery\n  */\nclass MyController{\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphpmv%2Fphpmv-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphpmv%2Fphpmv-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphpmv%2Fphpmv-ui/lists"}