Questions about creating a Web App.
lazarus / 38-Networking and Web Programming

----------------------------------------------------------------------
Oscar82 · 2020-04-30 09:38

First of all, hi, everybody, I'm Oscar, new to Lazarus.

Well, until now I was a web designer but because of the virus problem,
I had to move to other markets like everyone else...

My idea is to create a front end (vuejs+bootstrap) and a backend
(Lazarus), which works as follows:

1) localhost:8080 => index html
2) localhost:8080/section/id => other html sections by id
2) localhost:8080/rest/services/id => api json by id (consumed by
vuejs)

I've been looking at fpweb but I need a form to be opened when the
program is run with an "Open Dashboard" button.

These days I've been trying several forms that I've seen in the forum,
but I had several problems, when creating the routers I got an error
in the home page for not having "/" (not found), etc...

I hope I explained myself well, my English is not good... I have seen
RadServer from delphi but I don't like being tied to a payment program
with limitations.

Greetings and thank you very much.

----------------------------------------------------------------------
john horst · 2020-04-30 11:47

Bootstrap works like bootstrap no matter what. What do you mean show a
form? A bootstrap Modal dialog?

Post some code. Nobody can read your mind on why root is not found...

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i  
HTTPRouter.RegisterRoute('/', @IndexRoute); 
HTTPRouter.RegisterRoute('/section/:id', @LookupIdRoute); 
HTTPRouter.RegisterRoute('/rest/services/:id', @MyServiceRoute);

----------------------------------------------------------------------
Oscar82 · 2020-04-30 12:46

Quote from: john horst on April 30, 2020, 01:47:44 pmBootstrap works
like bootstrap no matter what. What do you mean show a form? A
bootstrap Modal dialog?

Post some code. Nobody can read your mind on why root is not found...

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i  
HTTPRouter.RegisterRoute('/', @IndexRoute); 
HTTPRouter.RegisterRoute('/section/:id', @LookupIdRoute); 
HTTPRouter.RegisterRoute('/rest/services/:id', @MyServiceRoute); 
Code:
As you put that code, errors appear when loading localhost:8080
without "/" => router no fount.

Form:
On the form, picture attached, sorry about my English.

----------------------------------------------------------------------
john horst · 2020-04-30 13:13

Are you building a frontend app with vuejs and bootstrap? With an
backend in Pascal? Doesn't look like that to me in the image. That
looks like a  frontend in Lazarus.

That said it looks like you are copy and pasting...

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i program
root; uses  {$ifdef unix} cMem, cThreads, {$endif}  fpHTTPApp,
HTTPDefs, HTTPRoute; procedure WebRoot(ARequest: TRequest; AResponse:
TResponse);begin  AResponse.Content := 'Learn dont just copy and
paste';end; begin   // http://localhost:8080/ 
HTTPRouter.RegisterRoute('*', @WebRoot); // SHOW YOUR CODE this will
respond...  //HTTPRouter.RegisterRoute('/', @WebRoot); // <--
correct   Application.Port := 8080;  Application.Threaded := True; 
Application.Initialize;  Application.Run;end.

----------------------------------------------------------------------
Oscar82 · 2020-04-30 13:32

Quote from: john horst on April 30, 2020, 03:13:49 pmAre you building
a frontend app with vuejs and bootstrap? With an backend in Pascal?
Doesn't look like that to me in the image. That looks like a  frontend
in Lazarus.

That said it looks like you are copy and pasting...

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i program
root; uses  {$ifdef unix} cMem, cThreads, {$endif}  fpHTTPApp,
HTTPDefs, HTTPRoute; procedure WebRoot(ARequest: TRequest; AResponse:
TResponse);begin  AResponse.Content := 'Learn dont just copy and
paste';end; begin   // http://localhost:8080/ 
HTTPRouter.RegisterRoute('*', @WebRoot); // SHOW YOUR CODE this will
respond...  //HTTPRouter.RegisterRoute('/', @WebRoot); // <--
correct   Application.Port := 8080;  Application.Threaded := True; 
Application.Initialize;  Application.Run;end. 
I think you didn't understand me, I need to make an executable with
lazarus that opens a graphic window with the buttons you see, the user
clicks on Open Dashboard and when doing it, the web browser with
localhost:8080 opens and the utilities dashboard opens.

From there, all the functions are done with vuejs and the rest api,
create users, tasks, etc... and the executable performs them.

For example, the user runs the exe and it opens a graphic window with
the buttons and access to the dashboard, not a command window and he
has to write the url in the browser.

It would be easier for me to go to java+vertx but I want the programs
to work on any computer without installing anything.

----------------------------------------------------------------------
john horst · 2020-04-30 13:47

You should post your code. Its not like its top secret. You are
building an app in lazarus and pascal is your issue. Code would have
provided that info.

Your button
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i
OpenURL('http://localhost:8080');

----------------------------------------------------------------------
Oscar82 · 2020-04-30 14:27

Quote from: john horst on April 30, 2020, 03:47:26 pmYou should post
your code. Its not like its top secret. You are building an app in
lazarus and pascal is your issue. Code would have provided that info.

Your button
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i
OpenURL('http://localhost:8080');
I don't want code, I want to know what library to use comparable to
RadServer in delphi.

I program in golang, java, c# and php, I give you an example in
golang.

Code: [Select]func main() {
        // routers...
        r := mux.NewRouter()
        r.HandleFunc("/", indexHTML)
        r.HandleFunc("/post/", postHTML)
        r.HandleFunc("/extra/", extraHTML)
        r.HandleFunc("/load/{id}/", loadDATA)
        // server...
        http.ListenAndServe(":8080", r)
}
In this example, it doesn't matter if you put localhost:8080 or
localhost:8080/, it loads the template without problems, not like in
FPWeb, it gives an error if you don't attribute exact url.

Golang doesn't have a graphical interface (well it does, but it
doesn't fit what I need) with which I can do license checks in windows
before loading the dashboard, hence the need to come to lazarus.

----------------------------------------------------------------------
devEric69 · 2020-04-30 15:01

AFAIK (I have no vuejs skills), to publish an application written in
Object Pascal (where wysiwyg FORMS are created with an EDI, and
published on the web) as close as possible to the browser, (even with
an automatic conversion, of a part of the Pascal code to Javascript),
there is Intraweb which is a commercial application
(https://www.atozed.com/IntraWeb/).

Its open-source equivalent is (I don't know if it enable as much in
the wysiwyg FORM publication) mORMot
(https://synopse.info/fossil/wiki?name=SQLite3+Framework).

----------------------------------------------------------------------
Oscar82 · 2020-04-30 15:35

Quote from: devEric69 on April 30, 2020, 05:01:44 pmAFAIK (I have no
vuejs skills), to publish an application written in Object Pascal
(where wysiwyg FORMS are created with an EDI, and published on the
web) as close as possible to the browser, (even with an automatic
conversion, of a part of the Pascal code to Javascript), there is
Intraweb which is a commercial application
(https://www.atozed.com/IntraWeb/).

Its open-source equivalent is (I don't know if it enable as much in
the wysiwyg FORM publication) mORMot
(https://synopse.info/fossil/wiki?name=SQLite3+Framework).

Thank you very much, I have looked intraweb but it is not worth it, I
also took a look at mORMot since on YouTube I found a video about
websockets.

I thought that FPWeb would be like the default Golang library, but I
get exceptions or even warnings for not using the requests when
loading only html.

The biggest problem that I see when entering lazarus is that there are
no libraries where everything is explained, but knowing the libraries
is the most complicated, since there is no information as in other
languages.

I want to stay in pascal, but there is almost no information.

Thanks and best regards.

----------------------------------------------------------------------
john horst · 2020-04-30 19:17

Quote from: Oscar82 on April 30, 2020, 04:27:02 pmQuote from: john
horst on April 30, 2020, 03:47:26 pmYou should post your code. Its not
like its top secret. You are building an app in lazarus and pascal is
your issue. Code would have provided that info.

Your button
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i
OpenURL('http://localhost:8080');
I don't want code, I want to know what library to use comparable to
RadServer in delphi.

I program in golang, java, c# and php, I give you an example in
golang.

Code: [Select]func main() {
        // routers...
        r := mux.NewRouter()
        r.HandleFunc("/", indexHTML)
        r.HandleFunc("/post/", postHTML)
        r.HandleFunc("/extra/", extraHTML)
        r.HandleFunc("/load/{id}/", loadDATA)
        // server...
        http.ListenAndServe(":8080", r)
}
In this example, it doesn't matter if you put localhost:8080 or
localhost:8080/, it loads the template without problems, not like in
FPWeb, it gives an error if you don't attribute exact url.

Golang doesn't have a graphical interface (well it does, but it
doesn't fit what I need) with which I can do license checks in windows
before loading the dashboard, hence the need to come to lazarus.

FPWEB works the same way. If you are having an issue its your issue.
Because you wont post the code thats not working for you, or your
platform or anything that is actually relevant to your issue... im
done trying to help you.

Second Im a senior Go dev and have been before it was 1.x. That is not
the default Golang router, that is the gorilla mux router.

Third if you are that well versed in Go just use the WALK (windows) /
GTK bindings (Linux, BSD etc) lmao... Do you think Lazarus is magic?

The way you write the route is the way it will answer the request.

/hello/ != /hello

Goodluck and post code if you want help.

----------------------------------------------------------------------
Oscar82 · 2020-05-01 16:01

Quote from: john horst on April 30, 2020, 09:17:21 pm
FPWEB works the same way. If you are having an issue its your issue.
Because you wont post the code thats not working for you, or your
platform or anything that is actually relevant to your issue... im
done trying to help you.

Second Im a senior Go dev and have been before it was 1.x. That is not
the default Golang router, that is the gorilla mux router.

Third if you are that well versed in Go just use the WALK (windows) /
GTK bindings (Linux, BSD etc) lmao... Do you think Lazarus is magic?

The way you write the route is the way it will answer the request.

/hello/ != /hello

Goodluck and post code if you want help.

Don't get mad, I don't understand English very well, sorry, look, I'll
give you a test:

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i unit
formulario; {$mode objfpc}{$H+} interface uses  Classes, SysUtils,
Forms, Controls, Graphics, Dialogs, StdCtrls,  fphttpapp, httpdefs,
lclintf, httproute, fpjson, jsonparser, fpwebfile; type   { TForm1 }  
TForm1 = class(TForm)    Button1: TButton;    Button2: TButton;   
procedure Button1Click(Sender: TObject);    procedure
Button2Click(Sender: TObject);    procedure FormCreate(Sender:
TObject);  private   public   end;   runnin = class(TThread)   
protected      procedure Execute; override;  end;  var  Form1:
TForm1;  run : runnin; implementation {$R *.lfm} { TForm1 } procedure
TForm1.Button1Click(Sender: TObject);begin 
OpenURL('http://localhost:8080');end; procedure
TForm1.Button2Click(Sender: TObject);begin  Form1.Close;end; procedure
html_home(req: TRequest; res: TResponse);begin  if req.Method = 'GET'
then  begin    res.Contents.LoadFromFile('web/index.html');   
res.Code:=200;    res.ContentType:='text/html;charset=utf-8';   
res.SendContent;  end;end; procedure html_info(req: TRequest; res:
TResponse);var  json : TJSONObject;  id : string;begin  id :=
req.RouteParams['id'];  json := TJSONObject.Create;  try   
json.Strings['id'] := id;    json.Strings['info'] := 'asdfasdfa';   
res.Content := json.AsJSON;    res.Code := 200;    res.ContentType :=
'application/json';    res.ContentLength := length(res.Content);   
res.SendContent;  finally    json.Free;  end;end; procedure
html_404(req: TRequest; res: TResponse);begin  if req.Method = 'GET'
then  begin    res.Content:='No localizado';  end;end; procedure
TForm1.FormCreate(Sender: TObject);begin 
RegisterFileLocation('assets', Application.Location + 'web\assets'); 
MimeTypesFile := Application.Location + 'mime.txt'; 
HTTPRouter.RegisterRoute('/', @html_home, true); 
HTTPRouter.RegisterRoute('/info/:id', @html_info); 
HTTPRouter.RegisterRoute('*', @html_404);  run :=
runnin.Create(true);  run.Start;end; { Runnin } procedure
runnin.Execute;var  Server : THttpApplication;begin  Server :=
THttpApplication.Create(nil);  try    Server.Title:='SERVER THREAD'; 
 Server.Port:=8080;    Server.Initialize;    Server.Run;  finally   
Server.Free;  end;end; end. 
If I refresh the browser several times, it skips "Missing HTPP
protocol version in request", and other times, "write stream error",
if I change to embedded html code, the latter is removed.

Possibly, it's all wrong, but little by little I'm getting into
pascal.

----------------------------------------------------------------------
mr-highball · 2020-05-01 17:08

An alternative to vanilla fpweb is fano,
https://fanoframework.github.io/

Haven't used it but it looks like documentation is pretty good and has
a cli to generate stuff for you

Edit: read the documentation some more and right now it I saw
something under deployment targets linux is only supported (still not
very sure)

----------------------------------------------------------------------
tuyen · 2020-05-04 14:14

Quote from: Oscar82 on April 30, 2020, 11:38:05 amFirst of all, hi,
everybody, I'm Oscar, new to Lazarus.

Well, until now I was a web designer but because of the virus problem,
I had to move to other markets like everyone else...

My idea is to create a front end (vuejs+bootstrap) and a backend
(Lazarus), which works as follows:

1) localhost:8080 => index html
2) localhost:8080/section/id => other html sections by id
2) localhost:8080/rest/services/id => api json by id (consumed by
vuejs)

I've been looking at fpweb but I need a form to be opened when the
program is run with an "Open Dashboard" button.

These days I've been trying several forms that I've seen in the forum,
but I had several problems, when creating the routers I got an error
in the home page for not having "/" (not found), etc...

I hope I explained myself well, my English is not good... I have seen
RadServer from delphi but I don't like being tied to a payment program
with limitations.

Greetings and thank you very much.

If you want to do any kind of web development in Pascal, your first
choice should be TMS Web Core.  No, it's not free, but believe me when
I tell you that it's well worth the cost.  Go to the TMS web site and
look at their online demos.

Other web frameworks are not even close.  TMS Web is light years ahead
of everything else.  I've been using it since version 1.0 which was
released sometime in the summer of 2018, if I remember correctly. 
I've used it to create 100% identical web versions of different
Windows desktop applications.

----------------------------------------------------------------------
mr-highball · 2020-05-04 14:20

@tuyen is right, TMS is far ahead of the game. I've been working on a
framework too (which is open source) but it's very very early in
development,
https://forum.lazarus.freepascal.org/index.php/topic,49572.msg360179.h
tml#msg360179

----------------------------------------------------------------------
tuyen · 2020-05-04 15:13

Quote from: mr-highball on May 04, 2020, 04:20:19 pm@tuyen is right,
TMS is far ahead of the game. I've been working on a framework too
(which is open source) but it's very very early in development,
https://forum.lazarus.freepascal.org/index.php/topic,49572.msg360179.h
tml#msg360179

That's going to be a tremendous amount of work for one person to
accomplish.  Especially if you're doing it only in your spare time,
and for no money.  But I wish you lots of success.

----------------------------------------------------------------------
mr-highball · 2020-05-04 15:27

Quote from: tuyen on May 04, 2020, 05:13:01 pmQuote from: mr-highball
on May 04, 2020, 04:20:19 pm@tuyen is right, TMS is far ahead of the
game. I've been working on a framework too (which is open source) but
it's very very early in development,
https://forum.lazarus.freepascal.org/index.php/topic,49572.msg360179.h
tml#msg360179

That's going to be a tremendous amount of work for one person to
accomplish.  Especially if you're doing it only in your spare time,
and for no money.  But I wish you lots of success.

Thanks, I move pretty quick (when I have the time). The great thing
about open source are contributors, so once I get further along
perhaps some will throw some PR's my way