{"id":21028747,"url":"https://github.com/jgmdev/puente","last_synced_at":"2025-07-16T02:39:51.316Z","repository":{"id":56998682,"uuid":"192815694","full_name":"jgmdev/puente","owner":"jgmdev","description":"PHP + jQuery :heart: = Puente, a library that serves as a bridge/proxy between both :revolving_hearts:.","archived":false,"fork":false,"pushed_at":"2025-03-23T20:40:08.000Z","size":51,"stargazers_count":37,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-15T11:33:31.059Z","etag":null,"topics":["ajax","bridge","jquery","library","php","proxy"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jgmdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2019-06-19T23:10:11.000Z","updated_at":"2025-03-23T20:40:11.000Z","dependencies_parsed_at":"2024-11-19T12:07:21.457Z","dependency_job_id":"6413140c-89b9-4c35-b8d1-a05fb7edb16c","html_url":"https://github.com/jgmdev/puente","commit_stats":{"total_commits":30,"total_committers":1,"mean_commits":30.0,"dds":0.0,"last_synced_commit":"766318c6dc3af426492be8c1261b45190c7250ac"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jgmdev/puente","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgmdev%2Fpuente","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgmdev%2Fpuente/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgmdev%2Fpuente/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgmdev%2Fpuente/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jgmdev","download_url":"https://codeload.github.com/jgmdev/puente/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgmdev%2Fpuente/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264320978,"owners_count":23590563,"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":["ajax","bridge","jquery","library","php","proxy"],"created_at":"2024-11-19T11:58:52.442Z","updated_at":"2025-07-08T18:06:43.206Z","avatar_url":"https://github.com/jgmdev.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Puente :bridge_at_night:\n\n**Puente** which is the spanish word for \"*bridge*\" (you can hear the\npronunciation [here](https://www.howtopronounce.com/spanish/puente/)), is a\nPHP library that facilitates the communication between your php code and\njQuery/JavaScript code. It serves as a jQuery wrapper that generates working\nJavaScript code. It uses ajax functionality to send all registered browser\nevents back to php for server side processing, then it returns more JavaScript\ncode to the client browser.\n\n## Why?\n\nToday's web development process can be tedious. You can achieve the same goal\nin 1000 different ways, many JavaScript libraries exist that facilitate the\ncommunication between your frontend and backend. Examples of these libraries\nare:\n\n* Angular\n* Aurelia\n* Backbone.js\n* Ember.js\n* Meteor\n* Mithril\n* React\n* Vue.js\n* Polymer\n* (insert more frameworks here... :trollface:)\n\nMany stuff exists and keeps proliferating, making a web developer life harder.\nKnowledge doesn't comes for free and you will have to invest time learning these\nJavaScript frameworks. While this is yet another project that helps you achieve\nthe same goal, it is based on the solid jQuery library that has been around for\nmany years now. jQuery is easy to learn and almost every web developer has\nworked with it.\n\nWhat this project does is ease the communication between the user browser\nand your backend. This project is not intended to remove the need of writing\nJavaScript code, but to make it easier to interact with the frontend from the\nbackend without needing to implement a Web API for every basic stuff you have\nto do.\n\nFor a better idea of what this project has to offer keep reading below.\n\n## Usage\n\nFirst you will need to include the jQuery library in your html code:\n\n```html\n\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js\"\u003e\u003c/script\u003e\n```\n\nThen you will have to initialize a Puente instance:\n\n```php\n$puente = new \\Puente\\Puente();\n```\n\nTo manipulate a DOM element you will use the **jq()** method which will return\na JQuery object instance that mimics the jQuery functionality:\n\n```php\n$puente-\u003ejq(\"#message\")-\u003ehtml(\"Hello World!\");\n```\n\nYou can register events as you would do with jQuery, with the **difference** that\nyou will be able to register a **PHP callback!**:\n\n```php\n$puente-\u003ejq(\".element\")-\u003eclick(function($puente, $data){\n    $puente-\u003ejq(\"js:this\")-\u003etext(\"Hello World!\");\n});\n```\n\nYou can access other DOM objects like **window**, **console**, **location**,\n**localStorage** and **sessionStorage**, the possibilities for more are\nendless:\n\n```php\n$puente-\u003ejq(\".element\")-\u003eclick(function($puente, $data){\n    $puente-\u003ewindow()-\u003ealert(\"Hello World!\");\n});\n```\n\nAlso, when calling JavaScript functions you may want to give it a JavaScript\nobject instead of a string, which you can achieve by using the **js:** prefix:\n\n```php\n$puente-\u003ejq(\".element\")-\u003eclick(function($puente, $data){\n    // This will actually show the value of window.innerWidth instead\n    // of literally showing the string.\n    $puente-\u003ewindow()-\u003ealert(\"js:window.innerWidth\");\n});\n```\n\nWhen registering an event you can tell it to fetch data from user browser by\ngiving a valid JSON string to the **$data** parameter:\n\n```php\n$puente-\u003ejq(\".element\")-\u003eclick(\n    function($puente, $data){\n        $puente-\u003ewindow()-\u003ealert($data[\"width\"]);\n    },\n    \"{width: window.innerWidth}\" //You can also feed it php arrays and objects.\n);\n```\n\nThis will send the client browser window width back to the php callback.\n\n### Listening the registered events\n\nAll events like click, dblclick, etc... will now need to be listened by your\nphp script, for this all you need to do is call the following method:\n\n```php\n$puente-\u003elistenRequest();\n```\n\nThis will be in charge of checking if a request to the same page that holds\nthe Puente code comes from the user browser and respond to it.\n\n### Generating the code\n\nAfter writing your Puente logic you will have to tell it to generate the\nJavaScript code:\n\n```php\n$puente-\u003eexecuteCode(); //This actually prints the generated code to the document\n```\n\nIf you dont want to directly print the code you can call\n**getExecuteCode()** instead:\n\n```php\n$code = $puente-\u003egetExecuteCode(); //Now you can decide what to do with it\n```\n\n## Examples\n\nTo test the examples you will need PHP CLI to be installed and available on\nyour system path, then open a terminal and inside the **puente** project folder\ndo the following:\n\n```sh\ncd examples\n./run.sh\n```\n\nAfter running the **run.sh** script open your web browser and point\nit to the returned address on your terminal which by default is:\n\n\u003e http://localhost:8383\n\n## Showcase\n\n[BlueControl](https://github.com/jgmdev/bluecontrol) - php application that\ncontrols blue light on display and uses Puente to handle the configuration\nGUI dynamic events.\n\n## Status\n\nThe library is still **under development** but it is already proving to be\nuseful. Many stuff could still be added.\n\n## TODO\n\nAdd more examples and use the index.php file as the main starting\npoint that list all the available examples.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgmdev%2Fpuente","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjgmdev%2Fpuente","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgmdev%2Fpuente/lists"}