Rapidly Deliver Web Applications on IBM i with WebSmart

Web applications can play a strategic role in any IBM i organisation because they provide several benefits:

• Improved workflow by extending your applications to employees, partners and customers. Giving these groups access to web applications that allow them to self-manage inventory, pricing and orders also improves customer service
• Increased revenue (B2B and B2C eCommerce) and improved decision-making by providing real-time information to the people who need it
• The familiar look and feel that web applications provide can reduce training costs for employees who are unfamiliar with green screens. They also increase user productivity with intuitive UIs that make use of drop-down boxes, menus, calendars, tabs and images and are utilised in users’ everyday lives
• Web applications give your IBM i a modern look to match its cutting-edge technology. This can go a long way in changing the perception that the IBM i is outdated
• Users with appropriate permissions can access web applications from anywhere on PCs, Macs, tablets and smartphones because they only need is a browser to do so
• Web applications require no interactive processor power on your IBM i, potentially saving you thousands of pounds in server hardware upgrade fees.

Solution overview

WebSmart is a multi-award winning rapid web application development tool for creating new desktop or mobile web applications. WebSmart is easy for IBM i and other programmers to understand, even if they don’t have web development experience. Its program templates provide immediate results and reduce the web development learning curve.

WebSmart comes in two editions (WebSmart Mobile is included in both editions):

• ILE, for creating IBM i-centric RPG web applications that access DB2, MS SQL and MySQL databases. The apps run on the free IBM HTTP Server (powered by Apache)
• PHP, for creating open-source PHP applications that run on multiple platforms – IBM i, Windows, Linux or Unix – and access databases such as DB2, MySQL and Oracle. WebSmart PHP applications run with Zend Server if hosting on IBM i.

You can use either edition to create order entry, invoicing, inquiries, B2B/B2C shopping carts, dashboards and other web applications. With WebSmart, you’re creating new applications that can leverage existing RPG code including validation and pricing routines. WebSmart supports all of the latest web technologies such as web services, Ajax and jQuery to build rich web applications.

Both WebSmart editions include templates that jumpstart your web application development by generating the initial business and client-side logic, as well as a full-featured IDE to rapidly build any type of desktop or mobile web application. The IDE includes a code editor, project and change management, and more. WebSmart also integrates with commercial change management solutions from other vendors.

How it works

WebSmart consists of three main components: one on the PC and two on the server. The core WebSmart component is a Windows-based IDE. WebSmart’s IDE includes intelligent program templates that prompt you for files and fields then generate the starting HTML, CSS, and RPG or PHP.

Although the templates produce fully-functioning web applications with no coding on your part, you can also customize them in the WebSmart IDE to create any type of web application. WebSmart ILE uses a language called PML, which is easy for RPG programmers to understand. If you are using WebSmart PHP, you can customise the open-source PHP code or plugin free PHP scripts. The WebSmart IDE also includes productivity features such as an HTML editor, code completion and a debugger.

WebSmart ILE creates an ILE RPG program object and WebSmart PHP creates a PHP file. The end result is a stateless web application that works in the same way as other web applications that users are familiar with. This means that the browser’s “back” and “refresh” functions work like any other web application. WebSmart web applications are also easily scalable.

In addition to the WebSmart IDE, there are two server components:

• A code generator that produces the server-side programs (WebSmart ILE only). With WebSmart PHP, PHP files are created on the PC then FTP’d to a server
• A Web Application Server (WAS) that facilitates running the generated WebSmart ILE programs. WebSmart PHP programs run with Zend Server if hosting on IBM i

The three WebSmart components work seamlessly together to help you code and produce web applications without having to first master all the complexities of coding web applications by hand.

WebSmart runtime archetacture

WebSmart web applications are delivered to the user by the following mechanisms:

• The user requests a URL on an IBM i server from a browser (PC)
• The free IBM HTTP Web Server (powered by Apache) accepts the request and processes it
• The WebSmart program is evoked by the web server
• The WAS is used with WebSmart ILE to provide all the supporting functions for the programs to interact with a browser, such as session information handling and library lists. For WebSmart PHP, Zend Server is involved in this process
• If the program is designed for database file access, it establishes a connection to the target database
• The WebSmart program reads input parameters from the user request (via the webserver)
• The WebSmart program constructs a web page by merging static pieces of HTML with live data from the target database and writes the page to the web server
• The web server sends the web page to the user via the browser.

WebSmart Mobile

WebSmart Mobile is included in WebSmart ILE and PHP and consists of mobile templates and IDE features that are designed to provide quick results even if you have no mobile development experience. Using WebSmart Mobile’s templates, you can create web and hybrid applications that have touch gestures and automatically resize when you access them from different sized screens or rotate your device. The templates use the jQuery Mobile framework, which is an easily-themeable, touch-optimised web framework for tablets and smartphones.

You can then customize your mobile web applications in the WebSmart IDE, which includes point-and-click code snippets so you can quickly insert new mobile UI widgets (inline buttons, checkboxes, radio buttons, search, sliders, toggle switches and navbars). The HTML5 snippet inserts mobile-optimised input fields, such as email address, telephone number or URL, that automatically bring up the correct keyboards, and date or colour inputs that bring up date-pickers or colour palettes.

WebSmart Mobile also provides the flexibility for you to integrate with other technologies like Phonegap to take advantage of the device’s hardware features. This can include accessing the camera to take photos or scan a barcode or using the GPS for geolocation.

Features

WebSmart has many features designed to boost your productivity as you write desktop or mobile applications.

Intelligent templates

WebSmart includes templates that guide you through creating a dynamic desktop or mobile web applications that access IBM i and multi-platform data. The templates generate the initial RPG or PHP, HTML, CSS and JavaScript so you start with a fully-functional desktop or mobile web application even if you have no prior web development experience. You can then use the WebSmart IDE to create web applications for your business needs.

You can choose from several different functional templates such as grids and record lists. WebSmart ILE templates use SQL or RLA. WebSmart PHP includes object-oriented and Zend Framework 2 (MVC) templates.

Customisable template themes

WebSmart’s four customisable template themes allow you to ‘skin’ a web application with your corporate identity, including logo, graphics and colors. The themes are based on jQuery UI , which makes them more extensible as you adapt them to your own design needs. You can also easily customise the look and feel of the new template themes using ThemeRoller.

Browser-based access

WebSmart-developed web applications are easy to deploy because users only need a browser to access them on PCs, Macs, tablets and smartphones. There is no need to install any additional software or deploy mobile applications from an App store.

Code editor

The WebSmart IDE includes many features that increase programming speed including a syntax checker, code completion, drag-and-drop fields and an interactive debugger. WebSmart ILE and PHP share the same design infrastructure and functionality. As a developer using WebSmart, you can move seamlessly between writing ILE and PHP applications.

Text-based and visual HTML design tools

WebSmart simplifies HTML coding and web page design with visual and text-based tools. The WebSmart IDE includes wizards to add UI elements, drag-and-drop fields and colour coding. It also integrates with third-party visual editors like Dreamweaver from Adobe.

Leverage RPG and your IBM i

WebSmart was built with RPG programmers in mind and helps them succeed in the world of web development. WebSmart ILE programs generate ILE RPG and take full advantage of RPG IV and ILE features, such as bound modules, service programs, sub-procedures and free-format RPG. The WebSmart IDE also includes wizards to call back-end RPG programs.

WebSmart PHP includes a SmartSnippet to call RPG or COBOL programs. It uses the new open-source PHP toolkit for IBM i, which requires less code to call a program.

Unique separation of client-side code from logic

In WebSmart, the client-side code (HTML, CSS, JavaScript) is separated from – instead of intermingled with – the logic (RPG or PHP). This approach has the following advantages:

• The code is easier to read and is similar to how RPG and DDS are separated
• It’s simpler for people with different skill sets (developers and designers) to work on the same program
• It’s easier to re-use RPG or PHP and HTML code snippets.

Central repository

WebSmart has a central repository where you can define business, database and presentation rules at the database level, effectively providing powerful data modelling capabilities. Once extensions are defined in the repository, the templates can exploit them.

Debugger

WebSmart includes an interactive debugger that is fully contained within the IDE. With WebSmart’s debugger, you can quickly troubleshoot your programs by setting breakpoints, stepping through your code and changing variable values on the fly.

5,000+ PHP functions integrated into the IDE

In WebSmart PHP, the 5000+ related PHP functions are organized into tabs and integrated into the WebSmart IDE development environment with real-time PHP syntax checking, prompting, colour-coding and formatting.

As you add your PHP functions, WebSmart PHP shows you a prototype of the function along with tooltips to explain any parameters used by the function. The IDE also supports context-sensitive help for any function. All of these features help reduce errors in your code, even before you start testing.

Strong integration with DB2

The WebSmart IDE displays DB2 file (and other supported database) attributes, field lists and file keys. This is a great help as you write your code and when you create joins. If you are creating applications to run on the IBM i, WebSmart has functions that help you use library lists at run-time.

SmartCharts

WebSmart includes SmartCharts so you can design and integrate real-time animated two and three-dimensional bar charts, pie charts, executive dashboards and more in your web applications.

Built-in FTP client

The WebSmart IDE comes with its own integrated FTP client that you can use to connect to multiple servers, IBM i or otherwise. You upload or download files through the folder tree interface, which makes it easy to manage development efforts across multiple servers, platforms, and databases.