Many people think that web database applications are things like ecommerce or contact management or order entry. But in this demo you will see Jeff Cogswell has built a full AJAX powered database driven Blog that has similar functionality to Google's Blogging platform. He has chosen Alpha Five v10 with CodeLess AJAX (tm) as his development platform to do it much more rapidly vs doing it in PHP, JAVA, Ruby, Perl, Python or visual studio.net

1. Alpha Five Blogging Engine A complete blogging engine hosted and developed entirely within an Alpha Five web server. By Jeff Cogswell jeffcogs@gmail.com

2. Looks just like the current Alpha Five blog but uses Alpha Five itself! Note the .a5w extension.

3. CSS coded to look like the current blog. Grid showing single record. Uses free form layout Text displays full HTML but isn’t editable here since this page is for the people reading the blog.

4. Scroll down to see the AJAX-powered comment mechanism.

5. Click submit and comment instantly appears without a page refresh, thanks to AJAX.

6. There’s also a page for viewing the entries. This uses a grid as well. Each record in the grid shows up as a date, clickable title, excerpt, and “read more” link. This is one record in the table.

7. To add entries, you log in using the Alpha Five security system.

8. Once in, you can add and edit the entries, view the blog, or log out.

9. Editing an entry is easy thanks to the Rich Edit control of Alpha Five, along with some custom JavaScript to add a couple more buttons. Some custom JavaScript and HTML enhances the functionalityof the Rich Text editor, including a “View Source” for editing the HTML and an “Insert Image”.

10. Clicking Toggle HTML/Source lets you view and edit the actual HTML source in the Rich Text editor.

11. Clicking Insert Image lets you select an image URL.

12. If you view the blog list or entry while logged in, you have an additional toolbar that takes you to the Manage Entries screen or log out.

13. The toolbar appears on the page for viewing an entry as well – but again, only if you’re logged in. Server-side Xbasic code makes this possible.

14. A Few Tricks Behind the Scenes

15. The page for viewing an entry uses three grids – one master, and two linked grids. The master grid displays a single record. The first linked grid lists all of the comments for this entry. The second linked grid is only a form for adding an additional comment.

16. The only trick required here is updating the comments grid when a new comment is added. This meant saving the grid object into a variable, and then, in the afterGridSubmit function, calling the object’s refresh() method, which uses AJAX to automatically refresh the comments grid, all without leaving or reloading the page.

17. The entry list page displays either the Excerpt field (if the blogger filled it in) or the first 1000 characters of the Full Text field with the HTML stripped out (if the blogger didn’t provide an excerpt.) Making this work requires some server-side code.

18. Displaying either the excerpt of a computed excerpt requires some server-side code. The code tests whether the excerpt is present. If not, the code strips out the HTML using Alpha Five Xbasic’s regular expression engine, truncates the string to 1000 characters, and adds an ellipsis.

19. This, of course, requires using a control type of Custom, and putting the preceding code in the Custom Control Properties definition property.

20. But in order for the Excerpt custom control property’s function to be able to access the Text field, the Text field had to be present. Including the Text field in the field list but checking “Hide Row” didn’t allow the function to access the field’s data. The simple solution here, then, is to have the text field visible but display nothing.

21. The page for viewing the entry requires that full HTML be displayed. Using a label control doesn’t work because it doesn’t display HTML as it replaces < and > with the entities &lt; and &gt; respectively. Using a Rich Text Editor isn’t appropriate due to the editing nature. The solution is to simply display HTML. Making this happen required a custom control as shown in the next slide.

22. The text is sent to the browser verbatim without being HTMLized. Easy! One simple line of code.

23. In the page for editing an entry, which pops up the detail grid in its own window, adding a couple buttons above the Rich Edit control required some simple tricks as well.

24. The Freeform Template property contains the code to make this happen. This is some simple HTML that looks identical to the HTML used in the toolbar. In this case, two “buttons” are added, each calling some custom JavaScript.

25. This custom JavaScript for inserting the image is in the a5w page itself and simply calls the Rich Text Editor object’s insertHTML method. There are two such routines, one for the Text field and one for the Excerpt field. <script> function insertTextImage() { varimgurl = prompt('Image URL'); if (imgurl != null) { ENTRYMANAGEGRID_TEXT_RTEObj._rteObj._insertHTML( 'img','',{src:imgurl}) } } function insertExcerptImage() { varimgurl = prompt('Image URL'); if (imgurl != null) { ENTRYMANAGEGRID_EXCERPT_RTEObj._rteObj._insertHTML( 'img','',{src:imgurl}) } } </script>

26. The custom JavaScript for toggling the HTML/source is right in the control’s Custom Layout HTML itself: <ul class="GlassBlueNavSysTBSH" style="padding-bottom:3px;"> <li class="GlassBlueNavSysTBSHF" style="float:left"> <a class="GlassBlueNavSysTBSHButtonOn" href="#" onclick="ENTRYMANAGEGRID_TEXT_RTEObj.toggleDesignMode()"> Toggle HTML/Source </a> </li> <li class="GlassBlueNavSysTBSHL" style="float:clear"> <a class="GlassBlueNavSysTBSHButtonOn" href="#" onclick="insertTextImage()">Insert Image</a> </li> </ul> {Text}

28. A comment editor list that the blogger, when logged in, can access to edit and remove comments.

29. A comment approval mechanism. In this case, comments wouldn’t automatically appear, but would be flagged as needing attention by the blogger.

30. A mechanism that lets people commenting receive an email update when new comments are added.

31. Additional security so a blogger can only edit entries that he or she created, and can only choose his or her own name in the dropdown list for author name.

32. An RSS version that generates RSS. This would be a fascinating test of the grid – display all records, but with no HTML formatting, and with each field carefully coded to display itself in XML format.