Gambas France BETA


Pas de compte ? Incription

Création de Site Web :

La Création de Site Web avec Gambas :



Des liens vers le chapitre concernant le Web sur le site Gambas-Buch :



Un exemple de la forge :



Commentaires d'Olivier :


Exemple de site Web fait avec Gambas, avec page de Login/Password.
Nécessite Gambas 3.18 ou version de DEV pour bien fonctionner.

- Vous devez changer le Chemin vers le fichier SQLite 'database.db' du projet dans 'Connections -> Connection1'
sinon l'application ne pourra pas trouver le fichier SQLite et vous ne pourrez pas vous connecter.
- Login/Password: demo/demo

Olivier

Un conseil personnel :



Il y a 2 façons de lancer une application Web (plus exactement utilisant le composant gb.web.gui)

1) Directement par l'IDE, en chargeant tout d'abord le projet, puis dans le Menu Débogage -> Configuration -> Débogueur -> Utiliser le Serveur HTTP embarqué

- Choisir dans le Menu Débogage -> Configuration -> Débogueur -> 'Navigateur de débogage' que l'on souhaite: Interne, Firefox, Chrome
- Ajouter une variable d'environement pour selectionner le Port HTTP souhaité dans le Menu Débogage -> Configuration -> Environnement -> GB_HTTPD_PORT ---> 8081
- Enfin, lancer l'application simplement et l'application Web apparaitra dans le Navigateur choisi.

Nota: le Navigateur Interne de Gambas est moins performant coté rendu visuel parfois par rapport à Firefox ou Chrome, mais bien plus rapide à lancer lors des tests.

2) En compilant le projet par l'IDE pour obtenir un exécutable 'webdemobootstrap.gambas'. Ensuite, il faut ouvrir un 'Terminal' et lancer l'application par la commande suivante:

cd <chemin de l'executable>
GB_HTTPD_PORT=8080 gbr3 -H webdemobootstrap.gambas

L'application va se lancer et démarrer le Serveur Web intégré à l'application sur le port 8080 (le choix du port est libre, mais doit être >1024)

Enfin, il faut ouvrir un Navigateur Web vers l'URL: http://localhost:8080

Pas plus difficile que cela

Voilà
Olivier


Le code principal :


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
' Gambas class file

EXPORT

PUBLIC SUB _new()

DIM Path AS STRING

'Me.AddHeader("<link rel=\"stylesheet\" href=\"style.css\">\n<link rel=\"stylesheet\" href=\"app.min.css\">\n<link rel=\"stylesheet\" href=\"components.css\">")

ME.AddHeader("<link rel=\"stylesheet\" href=\"style_bulma.css\">")

WebLabelVersion.Text = "v" & Application.Version & " - " & "09/2021-2023"

Path = Request.Path
IF Path = "/" THEN Path = ""

ModLogs.EcrireLogs("1-UserAgent= " & Request.UserAgent)
ModLogs.EcrireLogs("2-URL= " & Request.Query)
ModLogs.EcrireLogs("3-URL= " & Application.Request)
ModLogs.EcrireLogs("4-Path = " & Path)

WebForm.Debug = TRUE

DEBUG "Erreur dans _new()"

CATCH
DEBUG "Erreur dans _new()"
DEBUG "Erreur: " & Error.Text & " " & "Where: " & Error.Where

END

PUBLIC SUB WebForm_Open()

WebTextName.SetFocus()

DEBUG "Erreur dans _new()"

END

PUBLIC SUB WebButtonLogin_Click()

Login()

END

PUBLIC SUB WebTextName_Activate()

Login()

END

PUBLIC SUB WebTextPass_Activate()

Login()

END

PRIVATE SUB Login()

DIM sUsername AS STRING
DIM sPassword AS STRING

' Chargement du fichier *.ini si présent
'ModFonction.Charger_Fichier_Init()

sUsername = Trim(WebTextName.Text)
IF NOT sUsername THEN
WebNoticeText.Text = "Username is empty..."

WebInfo.show()

WebTimer1.Start()

WebTextName.SetFocus(TRUE)
RETURN
ENDIF

sPassword = Trim(WebTextPass.Text)
IF NOT sPassword THEN

WebNoticeText.Text = "Password is empty..."

WebInfo.show()

WebTimer1.Start()

WebTextPass.SetFocus(TRUE)
RETURN
ENDIF

IF WebDatabase.Login(sUsername, sPassword) THEN

' Creer une nouvelle Session
Session["username"] = sUsername
Session.Timeout = ModVar.SessionTimeout
Session.User = sUsername

ModVar.SessionStartTime = Timer

ModLogs.EcrireLogs("Goto to WebFormMain...")

WebForm.Goto(WebFormMain)

ELSE

WebNoticeText.Text = "Username or Password incorrect..."

WebInfo.show()

WebTimer1.Start()

WebTextName.SetFocus(TRUE)
ENDIF

CATCH
WebForm.Print("Erreur dans Login()")
WebForm.Print("Erreur: " & Error.Text & " " & "Where: " & Error.Where)

ModLogs.EcrireLogs("Erreur dans Login()")
ModLogs.EcrireLogs("Erreur: " & Error.Text & " " & "Where: " & Error.Where)

END

PUBLIC SUB WebTimer1_Timer()

WebTimer1.Stop()

WebInfo.Hide()

END


Voici les points intéressants pour ceux qui souhaiteraient découvrir et créer des petites applications Web avec Gambas:

- La Demo présente une page de 'Login/Password' classique de nos jours pour sécuriser, basée sur SQlite comme base de données, ce qui présente l'avantage de pouvoir, au besoin, de gérer des paramètres pour chaque utilisateur qui se connecte, comme des restrictions a certaines parties du Site, etc...

- Sur la page principale, vous trouverez un échantillon des principaux Widgets disponible pour la création de page Web, mais aussi comment les utiliser rapidement:
- Exemple: le Widget pour envoyer un fichier au Site Web (Bouton Upload)
- Exemple: le Widget pour dessiner 'WebDrawingArea', ainsi que l'utilisation de la souris pour dessiner dedans. N'hésitez pas à essayer.
- Enfin le design complet, l'arrondie des boutons, l'arrondie des cadres et même des Menu PopUp.
- Comment charger un ou plusieurs fichiers CSS pour une page (Je n'ai pas trouvé de manière globale de le faire, ce doit être fait pour chaque page)

- L'intérêt de ce genre d'application Web, c'est qu'on les développe presque aussi facilement qu'une application Desktop (j'ai bien dit presque...) et elle ne nécessite pas d'installer tout un Serveur Web en frontal comme Apache ou autres.
- Il est trés facile de changer le port d'écoute de l'application Web et ainsi lancer plusieurs instances d'une même application Web sur la même machine.
- Exemple: GB_HTTPD_PORT=8080 gbr3 -H WebDemoBootstrap.gambas


A ce jour, j'utilise régulièrement 2 applications Web utilisant ce même design, avec Login/Password pour la sécurité bien sur.

J'espère que cela vous aidera à découvrir un peu plus cette partie de Gambas que je trouve personnellement assez impressionnante, de part sa simplicité et sa puissance.

N'hésitez pas à demander plus d'information au besoin.

Olivier




Le lien vers Bulma : Documentation Bulma
Que vous pouvez traduire avec Traductor : Traduction auto

Un échange entre Sphéris et LinuxOS, des plus informatif :



Bonjour Spheris,

Je comprends ton point et pour avoir pratiqué les 4 manières de faire un site web en Gambas, il y a des avantages et des inconvénients dans les 4:

Au final, l'utilisateur choisira la méthode qui lui convient le mieux.


Méthodes:

1 - Script/programme Gambas se comportant comme un script CGI.
On entend par là qu'un utilisateur fera une requête pour avoir une page Web à un serveur Web (Apache, Ngnix, etc...) qui lui-même ira exécuter ledit Script CGI Gambas pour qu'il génère le contenu de ladite page Web (page statique ou dynamique). Une fois générée, cette page sera envoyé en réponse au serveur Web, pour ensuite la renvoyer à l'utilisateur dans son Navigateur.

Bien sûr, il est possible de transmettre des paramètres lors de l'exécution du Script CGI et c'est ici la seule interaction que l'on puisse, à peu près, avoir (en simplifiant les choses).

Donc, il faut développer un script Gambas, qui va construire une page HTML (ne parlons pas l'encapsulation, des encapsulations, etc..., assez lourdes), dans un contexte de dialogue avec un serveur Web (plus ou moins complexe).

2 - Programme Gambas, se comportant comme un script CGI, mais dont les pages sont générés par des WebPages Gambas (ressemblant très fortement a du ASP ou PHP, ou autres interpréteurs). Ici les choses sont un petit peu plus simple, car on pose directement du code HTML, sans avoir à encapsuler tout ça dans un String, avec la possibilité (comme dans PHP ou ASP) d'insérer des bouts de code ou d'appeler des fonctions Gambas au milieu du HTML.
Il est même possible de se servir de WebPages comme Modèles qui seront insérés dans d'autre WebPages ce qui économise du code. Par exemple; l'entête de page sera une Webpage, le bas de page sera une autre WebPage, ainsi chaque page du site Web pourra intégrer l'Entête et le Bas de page en faisant référence au WebPages correspondantes, se qui fait gagner en clarté lors de l'écriture et de la lecture du code.
Il n'en reste pas moins que l'on doit installer/configurer un serveur Web comme dans le point 1, comprendre le HTML.
Toujours comme dans le point 1, il est possible de transmettre des paramètres, mais cela reste limité.

3 - Sur le principe du point 1 et 2, donc un programme Gambas qui se comportera comme un Script CGI, mais cette fois-ci on utilisera le serveur Web intégrer à Gambas pour desservir les pages Web demandées par l'utilisateur.
Bien sûr, cela demandera un peu plus de travail coté script Gambas pour gérer les requêtes et les chemins Web, mais surtout cela offrira beaucoup plus de souplesse du point de vue des paramètres transmis.
Le script pourra même s'appeler lui-même pour se faire faire travailler (ni plus ni moins que ce que fait PHP)
Le désavantage de cette solution, c'est que le serveur Web intégré à Gambas (basé sur libhttpserver) n'est pas fait pour être mis en production et recevoir des milliers de requêtes, mais l'avantage c'est que pour un certain usage léger, ton application sera portable et se lancera juste comme une application Gambas.

Je te laisse lire ce petit compte rendu des tests fait par Christof Thalhofer qui est un utilisateur Gambas que l'on voit souvent dans la Mailing-list.
https://lists.gambas-basic.org/pipermail/user/2020-January/068432.html

4 - L'utilisation du composant gb.web.gui + serveur Web intégré a Gambas.
Cette dernière solution est ma préférée, car elle permet vraiment de construire un site Web interactif, presque comme une application Gambas de bureau.
A ce jour tous les widgets pour une application Bureau (GTK ou QT) ne sont pas présents (développés) dans gb.web.gui, mais on s'en approche.
Ici l'immense avantage est que l'on ne touche pratiquement pas du code HTML, Javascript, la majeure partie du temps, on fait du code Gambas, et c'est ça qui est réellement plaisant.

Je mettrai un bémol quant au fait de développer COMME une application Bureau, en fait, il faut penser son code Gambas de manière un peu différente, due au fait de la technologie Web.

Par exemple, si lors du clic de la souris, par l'utilisateur, sur le page Web dynamique desservie par ton application Web Gambas, cela déclenchera un message de la page Web vers ton Application lui indiquant qu'un clic souris, sur un bouton par exemple, a été effectué par l'utilisateur.
Maintenant, coté de ton application, si tu désires afficher un message sur la page Web avant de lancer un gros travail en tache de fond, en réponse au clic bouton de l'utilisateur, tu ne pourras pas juste 'Afficher un message' et lancer ton travail dans la fonction lié à l'événement de ton clic bouton, car tant que la fonction ne sera pas terminée, aucune communication retour ne pourra être envoyée à ta page Web dans ton Navigateur.
Pour cela, il faudra demander d'afficher ton message dans la page Web, puis démarrer un petit Timer (10 ou 100ms) à la fin de la fonction. Ainsi la fonction sera terminée, la demande d'affichage sera envoyée à ta page Web et juste apres (10 ou 100ms), le Timer se déclenchera dans ton application pour lancer ton gros travail en tache de fond.

Dernier point, cette dernière méthode de développer des applications avec serveur Web intégré (en utilisant gb.web.gui) est beaucoup plus facile à aborder par un débutant du fait de la simplicité de Gambas et de l'abstraction d'une partie des difficultés que sont HTML, CSS, serveur Web à paramétrer, et d'autre.

Voilà, je me suis un peu étendu sur le sujet, n'hésitez pas à commenter et à argumenter, cela n'en sera que bénéfique pour tous.

Olivier



Un ensemble de liens vers le Gambas Wiki :

Composant GB.Web

Composant GB.Web.Form

Composant GB.Util.Web

D'autres exemples, à chercher dans la logithèque Gambas en plaçant web dans les filtres comme celui-ci : SmallWiki

====================

Navigation :



<-- Liens du Wiki : <--
<-- Accueil du WIKI : <--

====================

Documentation :



==================