[TUTORIAL] PB-CGI und PHP-Desktop für HTML/CSS/JS GUI

Hier kannst du häufig gestellte Fragen/Antworten und Tutorials lesen und schreiben.
Benutzeravatar
TroaX
Beiträge: 660
Registriert: 08.03.2013 14:27
Computerausstattung: PC: Ryzen 9 3950X, 96 GB RAM, RX6800XT, 2.5 TB SSD, 21:9 Display, Pop_OS! | Lappi: Ryzen 7 5800H, 16 GB RAM, 1 TB SSD, Pop_OS!
Wohnort: NRW
Kontaktdaten:

[TUTORIAL] PB-CGI und PHP-Desktop für HTML/CSS/JS GUI

Beitrag von TroaX »

Ich habe es ja angekündigt und nun will ich zumindest mit den First-Steps um die Ecke kommen. Electron, NodeWebkit und andere Projekte forcieren seit einiger Zeit das entwickeln von Desktop-Anwendungen mit Web-Technologien. Der Grund dafür sind vor allem die mächtigen technischen, aber auch optisch modernen Javascript und CSS Bibliotheken, mit denen sich Anwendungen viel freundlicher und moderner umsetzen lassen. Viele Entwickler möchten einfach nicht mehr die veralteten, starren Oberflächen und vor allem mehr Gestaltungsmöglichkeiten. Doch das Webgadget in Purebasic leidet dabei an massiven Problemen. Zum einen fehlt auf MacOSX und Linix Funktionalität (Navigation-Callback, blockieren des Kontext-Menü's etc.). Zum anderen muss man einen aktuellen Rendermode unter Windows forcieren.

Das größte Problem besteht aber darin, Daten in und aus dem Gadget zu bekommen. Man müsste einen leichtgewichtigen Webserver schreiben und integrieren, mit dem das Webgadget interaggieren kann. Und das ist leider nicht ganz so trivial, wie man sich nun denken könnte. Der Atomic Webserver kann zwar statische Daten ausliefern. Bei dynamischen Daten allerdings muss ein Header-Parser geschrieben werden, welcher durchaus heftiger Natur sein kann.

Aus diesem Grund sucht man natürlich nach ausweichenden Möglichkeiten. Eine wäre, die CGI-Fähigkeiten von Purebasic zu nutzen und einen externen Browser zu verwenden. PHP-Desktop war eigentlich dazu gedacht, mit PHP, einem embeddable Mongoose-Server und dem Chromium-Framework Anwendungen mit Webtechnologien zu schreiben. Das klappt auch hervorragend. Wer aber kein PHP beherrscht und lieber auf etwas bewährtem setzen möchte, kann in dem Projekt auch andere CGI-fähige Sprachen und Technologien verwenden. Python, Perl, Ruby und alle anderen, die CGI beherrschen können verwendet werden. So auch Purebasic.

Zur Zeit ist PHP-Desktop nur für Windows verfügbar. Aber es existieren viele Hiweise darauf, das MacOSX und Linux folgen sollen.

Download und Installation:
PHP Desktop kann hier heruntergeladen werden: https://github.com/cztomczak/phpdesktop ... e-v57.0-rc
Nach dem Download ist keine weitere Installation nötig. Einfach entpacken und starten. Jetzt kann man bereits die PHP-Beispiele testen und schauen, wie das System arbeitet.

PHP-Desktop auf die Arbeit mit PB-CGI vorbereiten
Da wir aber kein PHP verwenden möchten, sondern Purebasic nutzen wollen, müssen wir ein paar kleine Anpassungen vornehmen. Wenn wir in den PHP-Desktop Ordner wechseln, sehen wir den Ordner PHP. Diesen löschen wir. Außerdem finden wir dort den Ordner www. Dabei handelt es sich um das Root-Directory vom Mongoose-Server. Diesen können wir umbenennen und müssen den Inhalt löschen. Ich habe ihn frontend genannt. Für unsere CGI-Anwendung erstellen wir einen neuen Ordner. Ich nenne ihn backend.

Nun müssen wir noch PHP-Desktop konfigurieren. Dazu öffnen wir im Hauptverzeichnis die Datei settings.json. In diesem JSON-Baum sind in Kategorien die wichtigsten Einstellungen von PHP-Desktop vorhanden. Das wichtigste für den Anfang ist der Teil web_server. Wichtig ist vorab zu verstehen, wie das ganze arbeitet. Die CGI-Implementierung ist dazu gedacht, einen CGI-Interpreter mit der Datei des Scripts zu versorgen. Folglich kann PHP-Desktop nur eine CGI-Anwendung verwenden. Um nun auf unterschiedliche Routinen innerhalb unserer CGI zu zugreifen, benötigen wir einen Entry-Point, der als Datei vorliegen muss. Ich habe mich für INI-Datein entschieden. So sieht eine Konfiguration aus:

Code: Alles auswählen

    "web_server": {
        "listen_on": ["127.0.0.1", 0],
        "www_directory": "frontend",
        "index_files": ["index.html,cgi.ini"],
        "cgi_interpreter": "backend/run.exe",
        "cgi_extensions": ["ini"],
        "cgi_temp_dir": "",
        "404_handler": "",
        "hide_files": []
    },
Listen_on wird nicht geändert. Das www_directory ändern wir und den Ordner, wo wir unsere HTML, CSS, JS und INI-Files ablegen. Bei index_files tragen wir die Start-Dateien ein, auf die der Server reagieren soll. Unter cgi_interpreter geben wir unsere PB-CGI an. cgi_extension ist wichtig, damit wir einen Trigger für unser CGI haben. INI eignet sich deswegen gut, weil PB von Haus aus damit umgehen kann und wir dort Konfigurationen oder sogar unsere Prozedur-Weiche darüber realisieren können. Die letzten 3 Optionen können einfach geleert werden.

Der erste Test
Für den ersten Test legen wir im Ordner Frontend die Datei cgi.ini an und lassen diese erstmal leer. Dann nehmen wir uns das CGI-Example von Purebasic %PureBasic%\Examples\Sources\CGI.pb, kompilieren diese als run.exe in den Backend-Ordner von PHP-Desktop. Wenn ihr nun PHPDesktop über phpdesktop-chrome.exe startet, dann öffnet sich zuerst die Debug-Konsole und nach einem kurzen Moment ploppt ein Fenster auf, indem dann folgender Inhalt zu sehen ist:

Code: Alles auswählen

AUTH_TYPE: 
CONTENT_LENGTH: 
Content-type: 
DOCUMENT_ROOT: D:\TempTools\phpdesktop-chrome-57.0-rc-php-7.1.3\frontend
GATEWAY_INTERFACE: CGI/1.1
PATH_INFO: 
PATH_TRANSLATED: D:\TempTools\phpdesktop-chrome-57.0-rc-php-7.1.3\frontend\cgi.ini
QUERY_STRING: 
REMOTE_ADDR: 127.0.0.1
REMOTE_HOST: 
REMOTE_IDENT: 
REMOTE_PORT: 52367
REMOTE_USER: 
REQUEST_URI: /
REQUEST_METHOD: GET
SCRIPT_NAME: /cgi.ini
SCRIPT_FILENAME: D:\TempTools\phpdesktop-chrome-57.0-rc-php-7.1.3\frontend\cgi.ini
SERVER_ADMIN: 
SERVER_NAME: 127.0.0.1
SERVER_PORT: 52366
SERVER_PROTOCOL: HTTP/1.1
SERVER_SIGNATURE: 
SERVER_SOFTWARE: Mongoose/3.9c
HTTP_ACCEPT: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
HTTP_ACCEPT_ENCODING: gzip, deflate
HTTP_ACCEPT_LANGUAGE: en-US,en;q=0.8
HTTP_COOKIE: 
HTTP_FORWARDED: 
HTTP_HOST: 127.0.0.1:52366
HTTP_PRAGMA: 
HTTP_REFERER: 
HTTP_USER_AGENT: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Safari/537.36
Wenn ihr dies seht, ist PHP-Desktop Ready für eure PB-CGI Anwendung.

HINWEIS: Der erste Start dauert immer etwas länger, weil PHP-Desktop die Caches noch anlegt. Jeder weitere Start geht deutlich schneller !!!

Nachwort
Ich versuche weitere Tutorials zu schreiben. Vielleicht komme ich auch heute noch dazu, eines zu schreiben. Aber der Anfang ist schonmal gemacht. Ihr könnt ja schon einmal ein bisschen rumprobieren. :wink:

Folgetutorials:
Routing: http://www.purebasic.fr/german/viewtopi ... =9&t=30555
Zuletzt geändert von TroaX am 20.01.2018 22:43, insgesamt 1-mal geändert.
PC: Ryzen 9 3950X | 96 GB RAM | RX6800XT | 2,5 TB NVMe | Pop_OS!
Notebook: 16" 3:2 | Ryzen 7 5800H | 16 GB RAM | Radeon Vega | 1TB NVMe | Pop_OS!
NAS: Fritz.Box :lol:
Coding: Purebasic 6.04 | PHP | HTML | CSS | Javascript
Benutzeravatar
Kiffi
Beiträge: 10621
Registriert: 08.09.2004 08:21
Wohnort: Amphibios 9

Re: [TUTORIAL] PB-CGI und PHP-Desktop für HTML/CSS/JS GUI

Beitrag von Kiffi »

:allright: Erstmal vielen Dank für das umfangreiche und leicht verständliche Tutorial! Sofort ausprobiert und klappt auf Anhieb. :D

Jetzt verstehe ich auch Deinen Ansatz zur Realisierung einer Desktop(Web)App. Meiner ist ja vorerst ein wenig anders (Kommunikation zwischen Client und Server via Websocket).

Danke & Grüße ... Peter
Hygge
Benutzeravatar
TroaX
Beiträge: 660
Registriert: 08.03.2013 14:27
Computerausstattung: PC: Ryzen 9 3950X, 96 GB RAM, RX6800XT, 2.5 TB SSD, 21:9 Display, Pop_OS! | Lappi: Ryzen 7 5800H, 16 GB RAM, 1 TB SSD, Pop_OS!
Wohnort: NRW
Kontaktdaten:

Re: [TUTORIAL] PB-CGI und PHP-Desktop für HTML/CSS/JS GUI

Beitrag von TroaX »

Wäre ja auch ein Ansatz. Ist auch über das Webgadget einfacher zu realisieren. Du musst nur daran denken, ins HTML auch immer schön den

Code: Alles auswählen

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
einzubetten (also nichts mit Registry. Das ist Blödsinn!). Das sollte ab Windows 7 immer mindestens IE 9 forcieren. Mein Ansatz war sogar, einen Atomic einzubetten, der den X-UA-Compatible selbst mitliefert und so jedes HTML direkt in der neuesten IE-Version forcieren kann. Dann müsste man zwar API-Hacks verwenden, um das Kontektmenü unter Linux und Mac zu blockieren. Aber möglich wäre es. ^^

Man darf nicht vergessen, das Websocket nur ein einfacher Layer zur Echtzeitkommunikation darstellt, womit sich sowas zwar realisieren lassen kann, aber diese Realisierung am Ende keinem Standard angehört (es sei denn du nutzt einen etablierten). Beim HTTP-Protokoll ist das natürlich etwas vollkommen anderes. HTTP ist extrem ausführlich dokumentiert und standartarisiert. Dadurch kannst du Routinen aus dem Backend z.B. in PHP nachbilden oder in FastCGI umbauen und kannst es auch mit einem Webserver einsetzen, ohne das Frontend anpacken zu müssen ;)

Bisher haben die meisten JS Libs unter IE9 aufwärts funktioniert und hatten keine Meldungen ausgeworfen (z.B. TinyMCE, MetroUI, JQuery, JQuery-UI, JQuery-Mobile, MaterialDesign Light).

Für das nächste Tutorial
Ich werde Konzepte erarbeiten, die sich mit dem Routing innerhalb der CGI-Anwendung beschäftigen und wie man sie aus dem Frontend heraus aufruft.
PC: Ryzen 9 3950X | 96 GB RAM | RX6800XT | 2,5 TB NVMe | Pop_OS!
Notebook: 16" 3:2 | Ryzen 7 5800H | 16 GB RAM | Radeon Vega | 1TB NVMe | Pop_OS!
NAS: Fritz.Box :lol:
Coding: Purebasic 6.04 | PHP | HTML | CSS | Javascript
Benutzeravatar
Kiffi
Beiträge: 10621
Registriert: 08.09.2004 08:21
Wohnort: Amphibios 9

Re: [TUTORIAL] PB-CGI und PHP-Desktop für HTML/CSS/JS GUI

Beitrag von Kiffi »

TroaX hat geschrieben:(also nichts mit Registry. Das ist Blödsinn!).
ich habe da andere Erfahrungen gemacht.

Aber egal: Das WebGadget kommt unter Windows definitiv nicht mit dem SpiderBasic-ListIconGadget und -ListView zurecht (Dojo/dGrid).
Und das allein ist schon Ausschlusskriterium genug. Musste deswegen kurz vor Inbetriebsetzung eines Projektes auf .Net/CefSharp wechseln.

Grüße ... Peter
Hygge
Benutzeravatar
TroaX
Beiträge: 660
Registriert: 08.03.2013 14:27
Computerausstattung: PC: Ryzen 9 3950X, 96 GB RAM, RX6800XT, 2.5 TB SSD, 21:9 Display, Pop_OS! | Lappi: Ryzen 7 5800H, 16 GB RAM, 1 TB SSD, Pop_OS!
Wohnort: NRW
Kontaktdaten:

Re: [TUTORIAL] PB-CGI und PHP-Desktop für HTML/CSS/JS GUI

Beitrag von TroaX »

Aber CEF bekommste nicht so ohne weiteres in PB rein. Auch Sciter ist ein Mamut-Projekt, um es in PB zu integrieren. Man müsste erstmal alle Header durchgehen, um überhaupt erstmal ein Include für PB zu schreiben. Und dann ist fraglich, ob auch alles funktioniert. Denn obwohl es angeblich über eine C-API verfügen soll, wird in nahezu jeder Umsetzung über eine statische Klasse zugegriffen. Dadurch lassen sich zwar Methoden wie Funktionen verwenden. Aber ob PB damit klarkommt, ist eher zu bezweifeln.

PB benötigt einfach nur das Webkit-Control auch für Windows. Dann wäre das alles kein Thema mehr. Aber naja. Lassen wir das. Bis das soweit ist, kann mein übernächstes Haustier sprechen!

Wenn Spiderbasic Dojo verwendet (was ich bisher nicht getestet habe), dann ist das natürlich ärgerlich. Bei den Libs, die ich getestet hatte, passiert das nicht. Spiderbasic ist und war aber auch nie eine Option für mich. Wenn es aber daran hakt, dann sollte PHP-Desktop eigentlich die beste Ausweichmöglichkeit sein.
PC: Ryzen 9 3950X | 96 GB RAM | RX6800XT | 2,5 TB NVMe | Pop_OS!
Notebook: 16" 3:2 | Ryzen 7 5800H | 16 GB RAM | Radeon Vega | 1TB NVMe | Pop_OS!
NAS: Fritz.Box :lol:
Coding: Purebasic 6.04 | PHP | HTML | CSS | Javascript
Antworten