Basic Report

Today I will be showing you how to do a basic report.
In order to do this correct you need to set up the path alias properly. In one of the previous posts I have done that. Please follow that post and establish the path alias before constructing the report.

Since this is done with MySQL back end, the report will be based on SQL Data source.  Select the connection string and the table then design the report as usual.  Drag and drop the fields necessary. And once done preview the report and if all is satisfactory save the report with a name you can recall. That's it. You are done.

Now place the report in the tabbedui_main and publish you will be able to see via a browser interface.

take a look at the screencast:

http://screencast.com/t/caenE36BLM 

Today I will be showing various steps to show your web site over the Internet and sending email from the website.
In order to reach your website from somewhere using a browser you will need to few steps.
First go to the computer where you will hosting the server and cmd window and type the command: ipconfig and copy the ip address of the computer.
Then go to Google and find out the ip address of your site by typing what is my ip in the search box.
Then go to the base of you router, usually it is either 192.168.0.1 or 192.168.1.1 then login and go to the advanced tab and forward your alpha port to that local ip address.
if you need to adjust the firewall then allow the alphawas to be a permitted program.
Then test it you should be able to reach your website from outside.

Sending email from your website:

First setup the email in Project properties, then setup Email in the view, setting, email.  Test to see the test email shows success.  If succeeded then you can create a dialog and send the email from your web site.

Please see all of the following screencasts showing the above.

Port Forwarding:
http://screencast.com/t/cU5nUuuZc
Path Alias:
http://screencast.com/t/AuJnBUyeRi6
Reaching from outside:
http://screencast.com/t/13X1mOBgvh6
Sending Email Part1, setting up profile and account settings:
http://screencast.com/t/UC8TWAYFs
Dialog and sending the email:
http://screencast.com/t/ack8hhLbIc
Sending Email from website:
http://screencast.com/t/8rTrYeUTw0v

Few More Standard Grids With Search

Okay

Now I have built few more standard grids with search part and detail part which I have uploaded to the tabbedui_main page.
Since these are simple and similar I am gong to show only one and rest are all the same.

Here are the videos.

http://screencast.com/t/c3rogbBtNeZ

http://screencast.com/t/YglUf6ypB

Next week or so I will show how to create reports and send emails.

September 24th 2013:

Last time we saw how to do a tabbed ui interface.  Today I am going to add few features to it to make it look pretty and as well as add picture to the home tab.

Here are the videos:
http://screencast.com/t/mEZAYnoGGWP

http://screencast.com/t/XPIoFLxQpn

http://screencast.com/t/Ozw5cIfbNY

Next week I will be showing you how to create a component that has a search part with many fields to select from.  I have many other grids with simple search part as we did earlier, so I am just going to create them and add them to the tabbed ui interface.

see you next time.

TabbedUI interface:

Today I will be building a tabbedui interface to place all the components and display via a browser.
The components can be placed in an a5w page and displayed or in a tabbedui interface (alpha builds the a5w page automatically) and then show that via a browser.  These are two different approaches and whichever you like you can follow.  I will be showing tabbedui for now.
Just like any other component you start off with the building of the component and place the controls in the tabbedui component and when you save alpha automatically created a tabbedui page and when you publish that page can be viewed via a browser.

Here are the videos to start off. I will continue to work with this components till it is finalized.

Building tabbedui_main component:
http://screencast.com/t/O6XMlYiG

The tabbedui_main.a5w page by alpha:
http://screencast.com/t/HYSLb0ub6h

Grid with Search and Detail view parts:

Today I will be building a grid with search and detail view parts.  For this I am using a table in my MySQL backend named Vendor.

The fields are
id integer primary key auto increment
name varchar 30
address1 varchar 30
address2 varchar 30
city varchar 30
state char 2
zipcode char 5
phone varchar 20
contact varchar 30
contact_phone varchar 20
contact_email varchar 50
contact_sms varchar 30
purchase_today decimal 9,2
purchase_ptd decimal 9,2
purchase_ytd decimal 9,2
purchase_total decimal 9,2
account_number varchar 20

the connection string is the same we used earlier.  You can refer back to connection string post to refresh your memory.
The grid is built to show main information.
The search is built to search on name only.
The detail view is built to show all the fields in two columns.

The items I do not like are removed but it is not necessary for the function of the grid.
Here are the videos showing the construction of the grid.

Finished grid & the table information in MySql
http://screencast.com/t/LruHacH14Z

Building the grid and search part
http://screencast.com/t/th7qWZiv

Building and customizing detail view
 - Part1
http://screencast.com/t/1vaK0ZU4Pgl2

 - Part2
http://screencast.com/t/vEjEKsYgTb

 - Part3 the finished product
http://screencast.com/t/VACWnyRWnY



 

Simple grid and simple a5w page to display the content:

Today we will be building a simple grid and place it on a a5w page which is shown in a browser window.
Component:
To build a component I have selected a simple table, TYPE from MySQL database.  Start your alphafive and go to the workspace and select web components in the left menu. And then click new on the top.  When the next dialog comes you can use that dialog or skip it.  Today I will be using that dialog to select updatable grid with sql back end.  Once done select the connection string and select the table.  Then move all the fields you want to display.

There are few items I do not like so I will be removing them.  You don't have to. Like number of records per page, deleting records etc.,  Once done take a look at the preview and if you like save with an appropriate name.  I gave type as it is on the type table.

Once this is done, the next step will be to insert into an a5w page.  That can be viewed via a browser interface.

Next select a5w pages, click new on the top.  When the page loads up select the WYSIWYG tab at the bottom ( for now at least ) then save the page with a reasonable name like type.  Now click insert component and select the recently built type component. And save it again.  Then you can check by clicking the lightning rod and if all goes well the page will be displayed in your default browser.  Then you can publish right there by clicking the publish button or close the page and publish in the main window.

Then start your browser and type in the address of the page.  You will see your nice handiwork in full glory.

Here are the videos showing the same.
Building basic Type grid:
http://screencast.com/t/q7Fjo8ZLt
Inserting into an alpha page and viewing via a browser:
http://screencast.com/t/bMiZUEplxD
Updated Video:
Nov 19th 2017:
http://www.youtube.com/watch?v=tVjQX3uqAik

http://www.youtube.com/watch?v=eQ5LwMtqLzs

Dialogs,  Grids:  What are they?

AlphaFive web interface is with grids and dialogs.  Here is a short introduction before I build the first grid.

Imagine your information is located in a central place managed by a supervisor and underneath the supervisor there are plenty of messengers.  That's what you have.  A database backend, web application server and unlimited licenses to access the application server.

Whenever you request information from the central place ( database ) to the supervisor (web application server ) thru a messenger ( via a browser using your unlimited licenses ) the supervisor process the request and sends back the information thru the messenger.

The grid is nothing but a representation of the information in a readable table format.

When the requested information is just for reading only, it is sent over as read only and the messenger from the application server returns back to the supervisor.
An example would be looking at some schedule, a list of assignments or googling for information etc., you can look but not change the information.
When a requested information is for modification, then it is sent over with a messenger from the supervisor and was told to wait for sometime for the modifications to be done and bring the modified information back to the central place to be updated.  If the information is modified within the specified time then the modified information is taken back and the central place is updated.  But if the waiting time elapses before the changes are made and be ready to send back the messenger leaves the scene, so you get an error stating that there is no connection or no active grid etc.,
A grid can run into many pages.

The dialog on the other hand, you say knock knock to the supervisor and you get back a form to fill out and the messenger leaves behind instructions to send that back.  When the form is filled out you return to the supervisor as instructed and the request is processed.  This could be insertion or update of information. The supervisor will then process the information. Time is not essential here.
A dialog is usually single page.

So as you can see the grids depend on connection to the server available all the time and the dialog does not. So there is an advantage and disadvantage to both.  Careful use of either one will improve the function of your website.

So tomorrow we will build our first simple grid.

Connection Strings:

Good Morning.

The next step in building a website with AlphaFive is to build connection strings.  The connection strings are the method with which AlphaFive connects to the backend database source and builds the grids and dialogs etc.,

Basically, Alpha can connect to many popular SQL databases.  But I am using MySQL for my purpose. So I am going to show you the connection string for MySQL. Also I have included the connection strings for Access and Microsoft SQL Express 2012.

You can build the connection strings by clicking on the "Tools" on the main menu or when you create a component then you can define the new connection string or edit the one you have already created.

Click Tools and ten click on AlphaDAO connection strings.
On the next dialog click New to create a new Connection string.
On the next dialog, you can give some name that you can relate to easily.
Then click on the button that says "Build"
On the next dialog fill in the information needed and click on the test connection button. If the connection succeeded, then click "Refresh" to fresh the database schema. Then select the proper database.
Again test the connection. If successful, save it.

For my project I have the connection string named as "AlphaWeb" and the databse backend is MySQL.

Here is the screencast of the connection strings:

http://screencast.com/t/X9ieiJ6xHg
Updated Video:
Nov 19th 2017
http://www.youtube.com/watch?v=X8arEVAUtr0

Hello everyone

Good Morning.

My name is Govindan Gandhi.  I am a retired surgeon.  About a year and half ago I started learning web programming using AlphaFive.  Now I have fully functional website that I use for our intranet application.  It serves our purpose.  It may not have all the bells and whistles of a commercial program but it gets the work done.

Here I am showing what I have done in the past year and a half to get to where I am at the moment.

This and the following articles assume that you have purchased a copy of AlphaFive and installed it in your computer.  I am using version 11 for this project.

To speak of web programming, the first thing to do in AlphaFive is to configure the web application server.
To do that, when you start your AlphaFive and create an empty new workspace and name it something you want.  For this project mine is named alphaweb and is placed in a folder called alphaweb in the documents folder.
Once you have created the workspace and when you open it, the first thing to do is to check if the web application server is configured and functioning correctly.  So click on the web on the top menu and select application server.  Set the port and the server names and restart the server.
Once this is done you will be creating the index file to check if the server is working properly.

Here is a screencast of the things I did to check if web application server is workimg properly.

http://screencast.com/t/Dynfxm1rwV

Here is the finished product.

http://screencast.com/t/btJTSTck
Date: Nov 19th 2017
Here is the updated video:
http://www.youtube.com/watch?v=vqgn3Sh00rE