Sidebar
k24:k24.6:k24.6.2:k24.6.2.2:start
Table of Contents
24.6.2.2 Project 2
In contrast to the 'webapp1' project in section 24.6.2.1, you can remove the complete functionality, in this case the display of environment variables and their values, from the source code in the HTML file Main.webpage and outsource it to the class Main.class.
- Save the project webapp1 under the project name webapp2.
- Change the source code in the Main.webpage file to the following content:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Umgebungsvariablen</title> <style> body {font-family: Arial; font-size: 1rem; color: black;} table, td, th {border: 0.1rem solid red; border-collapse: collapse;} td, th {padding: 5px 20px 5px 20px;} <!-- Top Right Bottom Left --> </style> </head> <body> <h1>Gambas Web-Applikation</h1> <!-- The function value of the Gambas function `InsertEnvTable()` is inserted (Print) --> <% Print InsertEnvTable(); %> </body> </html>
The source text in the webpage Main.webpage now looks pleasingly clear, even if three (inline) CSS instructions have been inserted in the style tag.
Wrap the creation of the table with the two columns `Environment variable` and `Value` in the Gambas function `InsertEnvTable()` in the automatically created class file Main.class and include this function in the Main.webpage file with the syntax <% Print InsertEnvTable(); %>.
24.6.2.2.1 Source code Main.class
This is the content of the class file Main.class:
' Gambas class file Public Function InsertEnvTable() As String Dim sEnv, sHTML As String sHTML &= "<table>" sHTML &= "<tr>" sHTML &= "<th>Environment variable</th>" sHTML &= "<th>Value</th>" sHTML &= "</tr>" For Each sEnv In Env sHTML &= "<tr>" sHTML &= "<td>" & sEnv & "</td>" sHTML &= "<td>" & Env[sEnv] & "</td>" sHTML &= "</tr>" Next sHTML &= "</table>" sHTML &= gb.Lf '-- Output of the complete HTML source text as an HTML block Return sHTML Catch Return Error.Text End
24.6.2.2.2 Display of the generated website
Alternatively, the embedded HTTP server is used in the 'webapp2' project to view the HTML web pages output by the HTTP server with the table in the (debug) browser of the IDE.
Hints
- First you must activate the HTTP server with 'Use embedded HTTP server' in the 'Debug' menu in the debugger configuration in the IDE.
- Then you must select the web browser. The default selection 'Debug browser (internal)' can be used here, as no JavaScript scripts are used.
- Attention: This activation only applies to the current project - not in general!
- After starting the programme with F5, you will then see environment variables and their values in a table in the web browser of your choice, but now from the embedded web server, as shown by the value of the variable 'SERVER_SOFTWARE':
Figure 24.6.2.2.1: Table with environment variables of the embedded web server
The design of the HTML page generated with F5 in the IDE, delivered by the embedded web server and displayed in the web browser is created with the 3 added (inline) CSS instructions in the Gambas class Main.class.
24.6.2.2.3 Validating web pages
Consider the validation of the web pages you create as part of the development of web pages. All web pages presented to you follow the HTML5 standard. You can obtain the source code by selecting the 'Show page source code' tag in the context menu of the web page, which you call up with the right mouse button, and copying the HTML source code displayed. Validation is simple and intuitive with the tool on the website https://validator.w3.org/#validate_by_input. You can paste the generated HTML source text of the website directly into the multi-line text field and have it checked. A meaningful analysis helps you to recognise and correct errors. Or you receive the following message: Document checking completed. No errors or warnings to show.
Download
k24/k24.6/k24.6.2/k24.6.2.2/start.txt · Last modified: 07.04.2024 by emma
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial 3.0 Unported
