Ring/Lessons/Web Development (CGI Library)

Web Development (CGI Library)
In this chapter we will learn about developing Web applications using a CGI Library written in the Ring language.

Ring CGI Hello World Program
The next program is the Hello World program

Hello World Program using the Web Library
We can use the web library to write CGI Web applications quickly

Example (1) :

Example (2) :

.. tip:: the difference between ex. 1 and ex. 2 is using WebPage function to return the page object instead of creating the object using new statement.

Web Library Features
The next features are provided by the Web library to quickly create web applications.


 * Generate HTML pages using functions
 * Generate HTML pages using objects
 * HTTP Get
 * HTTP Post
 * Files Upload
 * URL Encode
 * Templates
 * CRUD MVC Sample
 * Users Logic & Registration Sample

HTTP Get Example
The Page User Interface

Screen Shot:



The Response

Screen Shot:



HTTP POST Example
The Page User Interface

Screen Shot:



The Response

Screen Shot:



Upload Files
The Page User Interface

Screen Shot:



The Response

Screen Shot:



Cookies
The Page User Interface

Screen Shot:



The Response

Screen Shot:



URL Encode
The Page User Interface

Screen Shot:



Screen Shot:



Templates
Using Templates we can write Ring code inside HTML files

Syntax:

The HTML Code

The Ring Code

Screen Shot:



HTML Special Characters
The text function display HTML special characters.

If you want to write html code, use the html function.

Screen Shot:



Hash Functions
The Page User Interface

Screen Shot:



The Response

Screen Shot:



Random Image
Screen Shot:



HTML Lists
The next example print a list contains numbers from 1 to 10

Then print a list from Ring List.

Finally we have a list of buttons and when we press on a button we get a message contains the clicked button number.

To start the list we uses the ulstart function.

To end the list we uses the ulend function.

We uses listart and liend to determine the list item.

Screen Shot:



HTML Tables
In this example we will learn how to generate HTML tables using the tablestart, tableend, rowstart, rowend ,headerstart, headerend, cellstart and cellend functions.

Screen Shot:



Gradient
In this example we will learn how to use the StyleGradient function.

The function takes the style number as input (range from 1 to 60).

Screen Shot:



Generating Pages using Objects
Instead of using functions/methods to generate HTML pages, we can use an object for each element in the page.

This choice means more beautiful code but slower.

The fastest method is to print HTML code directly, then using functions then using templates then using objects (slower).

Screen Shot:





Using Bootstrap Library using Functions
The next example uses the Bootstrap JavaScript Library when generating the HTML page.

Screen Shot:



Using Bootstrap Library using Objects
The next example uses the Bootstrap JavaScript Library when generating the HTML page.

Instead of using functions to generate the HTML elements, we will use objects.

Screen Shot:



CRUD Example using MVC
The next example uses the weblib.ring & datalib.ring.

The datalib.ring contains classes for creating database applications using MVC pattern.

In this example we create an object from the SalaryController class then call the Routing method.

We define the website variable to contains the basic url of the page.

When we create the SalaryModel class from the ModelBase class, the salary table will be opened and the columns data will be defined as attributes in the model class.

The SalaryView class create an object from the SalaryLanguageEnglish class to be used for translation.

The method AddFuncScript is used to call the form for adding/modifying record data.

The method FormViewContent is used to determine the controls in the form when we add or modify a record.

Screen Shot:





Users registration and Login
We have the users classes (Model, View & Controller) to deal with the users data like username & email.

The next code is stored in ex25_users.ring

In the file ex25.ring we load ex25_users.ring then create an object from UsersController class.

Using the created object, we call the routing method.

Screen Shot:



See the next code for the registration page

Screen Shot:



The Registration response

See the next code for the Login page

Screen Shot:



The response page

The next code for checking if the user needs to login or not

Database, ModelBase & ControllerBase classes
In this section we will see some code from datalib.ring

The next code presents the Database, ModelBase & ControllerBase classes

WebLib API
In this section we will see the web library functions, classes and methods.

The Package System.Web contains the next classes

Application Class
The method DecodeString is used to get HTTP request parameters.

The methods Decode and GetFileName are used for uploading files.

The methods SetCookie, Cookie & GetCookies are used for adding and reading cookies.

The methods StartHTML, ScriptsLibs, Style & Print are used for page structure and JS/CSS support.

The method URLEncode is used to encode a URL to be used in HTML pages.

Page Class
RowStart          aPara             HTML RowEnd           None             HTML CellStart         aPara             HTML CellEnd          None             HTML HeaderStart        aPara             HTML HeaderEnd         None             HTML

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

aPara in the page methods is a list contains attributes and values. Using aPara we can set values for the next attributes

ScriptFunctions Class
This class contains methods for adding JavaScript code to the generated web page.

The class methods are merged to the Page class, so we can use the next methods with page objects directly.

StyleFunctions Class
This class contains methods for adding CSS to the generated web page.

Like ScriptFunctions Class, The StyleFunctions class methods are merged to the Page class, so we can use the next methods with page objects directly.