What can web designers do with Ragic?

Forget about PHP, JSP, or ASP pages, or any other database skills. You can create dynamic web pages using just plain old HTML pages.

Just create your HTML/CSS/Javascript web pages, include our script, and mark where each data field goes to in the webpage...voila! You turned your webpage dynamic.

Step by step sample

In this sample we create a very common application, which shows the latest news of a company on its corporate webpage.

Using Ragic, art designers without any knowledge of programming, can create HTML pages as corporate website, and have corporate users manage its latest news, press releases on Ragic, and the latest news shown on the web pages.

Create your web pages normally

Here's a simple corporate homepage, designed to show the latest news and press releases. The design and layout for both the homepage and news detail page are complete, but there's no actual news data on it.

For the links between the main page and the news detail page, you can simple link all of your news page to the same HTML page you created. Ragic will figure out which news article to load later when users access the page.

We can take a look on the source code of the web pages, it's all in plain HTML and CSS.
Sample Website Design Prototype

The HTML source for displaying news are plain simple, looks something like this:

<a href="detail.html">News headline goes here</a><br/> <h2>Posting department goes here</h2> <h3>Posting date goes here</h3>

Create Ragic forms to maintain the data

Now we would like to create a place for our corporate users to update their latest news articles, so we create a very simple form on Ragic as below.
Corporate News Ragic Form
It's very simple, just like creating an Excel or other spreadsheet form. If you would like more details on creating forms, go to our homepage and follow the tutorial.

Add Ragic script to your pages

Now we can add the following script to the end of body tag of each HTML pages, and put down your Ragic account name as the _ragic_apname, to replace gallery. And the _ragic_reverse=1 means that it will show the latest news items first:

<script type="text/javascript"> var _ragic_apname='gallery',_ragic_reverse=1; </script> <script type="text/javascript" src="http://www.ragic.com/dev/jsq.js"></script>

Mark the data fields

Now for the most important part, we mark the places where our Ragic script fills in the dynamic data that our users maintained in the Ragic database.

All we need to do is to give a special id in each of the elements that we would like Ragic to fill in the data. And the special id will tell Ragic which data fields that it should be looking for.

To find the special id, you can go to the Form Design mode of your form, and focus on the field that you would like to know the id of, and you should see its id at the properties table on the right hand side as below.

Now just set the id as the element id, and change ? to the number of times that this field is encountered on this form. In this example, the page shows 3 news articles, then the elements containing the headlines should be numbered as 1,2,3, as below.

<a id="_ragic_1000001_1" href="detail.html"></a><br/> <h2 id="_ragic_1000003_1"></h2> <h3 id="_ragic_1000002_1"></h3>

See how it works

Our sample website

OK! If the ids have been set correctly, we can open the page with your browser, and see the data loaded on the pages. We can also see a floating Ragic Control Bar at the bottom for the user to change pages.