<p>
The application described here was tested in Debian on Apache2.  This application can be found here <a href="http://demo.kahimyang.info/cgi-

cpp/cpp/index.cgi" class="news_link" title="Demo" target="_blank">http://demo.kahimyang.info/cgi-cpp/cpp/index.cgi</a>.   See the "related" article 

near the bottom of this page for help in setting up Apache2 virtual host in Debian Linux for use with cgi.  It is also an introduction to cgicc.
</p>

<p>
To enable a page to use jQuery and jQuery UI,  the add the following snippet to the head section of your page.
</p>

<p>
<pre class="brush: xml;highlight:[4,9]">
&lt;head>
    &lt;title>Sample&lt;/title>
    &lt;link rel="stylesheet" 
        href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    &lt;script src="http://code.jquery.com/jquery-1.8.3.js">&lt;/script>
    &lt;script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js">&lt;/script>
    &lt;link rel="stylesheet" href="/resources/demos/style.css" />
    &lt;script>
    $(function() {
        $("#tabs").tabs();
    });
    &lt;/script>
</head>
</pre>
</p>

<p>
All files referenced in the above code (line 4) can be downloaded to your own server and change those lines reflecting the location of the download 

files. Line 4 is the UI base/default theme.  Change this theme to the desired theme only make sure you have downloaded or pointed to that theme css 

file as in line 4.  Line 9 above is the tab view handler.  It will look for a &lt;div /> in the page with an id of <i>tabs</i> (#tabs).  To use a 

&lt;div /> using its class use <i>.tabs</i> (or any other name desired) instead.  The dot (.) that preceeds the name signifies that the name is a 

class name.
</p>

<p>
jQuery, UI, and themes and its documentation can be found here <a href="http://jqueryui.com/download/" target="_blank" class="news_link" 

title="jQuery download">http://jqueryui.com/download/</a>.  See the documentation for additional options for creating widgets.
</p>
<p>
Documentation for cgicc can be found here <a href="http://www.gnu.org/software/cgicc/doc/index.html" target="_blank" class="news_link" title="cgicc 

download">http://www.gnu.org/software/cgicc/doc/index.html</a>. 
</p>

<p>
Below is our cgicc page enabled with jQuery UI with <i>start</i> theme.  Lines beginning in line 41 corresponds to line starting at line 4 above.  

Lines from 55 corresponds to line 9 above.  
</p>

<p>
Line 77 show how a tab view is defined.  Notice the id attribute <i>tabs</i>, this corresponds to line 53 in the handler code.
</p>

<p>
The same principle applies to other jQuery UI widgets.  You define a <i>handler</i>  code and a <i>selector</i> which is either an <i>id</i> 

(preceeded with a #) or a <i>class</i> (preceeded with a dot (.) in the head section,  and then create a div in the body with that id or class. 
</p>

<p>
<pre class="brush: cpp; highlight:[21,41,42,43,44,45,46,47,48,52,53,54,55,60,66,77,98,100,121,143,144,145]">

#include &lt;iostream>
#include &lt;string>

#include "cgicc/CgiDefs.h"
#include "cgicc/Cgicc.h"
#include "cgicc/HTTPHTMLHeader.h"
#include "cgicc/HTMLClasses.h"

#include &lt;glog/logging.h>

//#include &lt;stdio.h>
//#include &lt;stdlib.h>

using namespace std;
using namespace cgicc;

int main(int argc, char **argv) {

    google::InitGoogleLogging("app-index");

    Cgicc cgi;
    const_cookie_iterator cookies;
    const CgiEnvironment& env = cgi.getEnvironment();

    string logged = "new";
    // Check if user is currently logged
    for (cookies = env.getCookieList().begin();
            cookies != env.getCookieList().end(); ++cookies) {
        string c = cookies->getName();
        if (c == "Logged") {
            logged = cookies->getValue();
            break;
        }
    }

    cout << HTTPHTMLHeader();

    // Includes for jQuery and Jquery UI
    cout << html().set("xmlns", "http://www.w3.org/1999/xhtml");
    cout << head() << title("Test");
    cout << cgicc::link().set("rel", "stylesheet").
            set("href", "./jquery/themes/start/jquery-ui.css");
    cout << script().set("type", "text/javascript").
            set("src", "./jquery/jquery-1.8.3.js");
    cout << script();
    cout << script().set("type", "text/javascript").
            set("src", "./jquery/jquery-ui.js");
    cout << script();

    // Tab view widget
    cout << script();
    cout << "$(function() {";
    cout << "$(\"#tabs\").tabs();";
    cout << "});";
    cout << script();

    // Dialog widget
    cout << script();
    cout << "$(function() {" ;
    cout << "$(\"#loginDialog\").dialog({autoOpen:false,modal:true});";
    cout << "});";
    cout << script();

    // Button
    cout << script();
    cout << "$(function() {";
    cout << "$(\".buttons\").button({icons:{primary:"ui-icon-check"}});" ;
    cout << "});" ;
    cout << script();
    cout << head(); // end head section

    // Body
    cout << body().set("style", "font-size:12px;");
    cout << h2() << "CGICC and jQuery Demonstration" << h2();

    // Tab view
    cout << "<div id=\"tabs\">";
    cout << ul();
    cout << li();
    cout << a().set("href", "#welcome");
    cout << "Welcome";
    cout << a();
    cout << li();
    cout << li();
    cout << a().set("href", "#products");
    cout << "Products";
    cout << a();
    cout << li();
    cout << ul();

    // First tab
    cout << cgicc::div().set("id", "welcome");
    cout << p();
    cout << "Welcome!";
    cout << p();

    // Login button, hide if user is already logged
    if (logged == "new" || logged == "false") {
        cout << p();
        cout << a().set("href", "#").set("class", "buttons").
                set("onclick", 
                "$('#loginDialog').dialog('open');return false;");
        cout << "Login" << a();
        cout << p();
    }

    cout << cgicc::div();  // end first tab

    // Second tab
    cout << cgicc::div().set("id", "products");
    cout << p();
    cout << "Products";
    cout << p();
    cout << cgicc::div();  // end second tab
    cout << "</div>";   // end tab view

    // Dialog
    cout << "&lt;div id=\"loginDialog\" title=\"Login\">";

    // form
    cout << form().set("action", "login.cgi").
            set("method", "post");
    cout << cgicc::div().set("style", "display:block");
    cout << "<b>Enter credentials</b>" << cgicc::div()
            << br();
    cout << fieldset();
    cout << label().set("for", "userid") << "User ID" << label();
    cout << input().set("type", "text").
            set("style", "display:block").
            set("name", "userid").
            set("class", "ui-widget-content ui-corner-all").
            set("id", "userid");
    cout << label().set("for", "password") << "Password" << label();
    cout << input().set("type", "password").
            set("name", "password").
            set("id", "password").
            set("style", "display:block").
            set("class", "ui-widget-content ui-corner-all");
    cout << fieldset();
    cout << br();

    // Submit button
    cout << input().set("type", "submit").
            set("value", "Submit").
            set("class", "buttons");

    cout << form(); // end form

    cout << "&lt;/div>"; // end dialog

    cout << body();
    cout << html() << endl;

    return 0;
}

</pre>
</p>

<p>
In line 143 above, we created a submit type button (inside our dialog widget) that submits our form (line 121) to <i>login.cgi</i>, the page below.  

Our dialog is lunched by a button in line 100.  The visibility of this button is controlled as to whether the user is logged in or not by a cookie 

retrieved in line 21 above.
</p>


<p>
<pre class="brush: cpp;highlight:[25,26,101,102,107,125,126]">
#include &lt;iostream>
#include &lt;string>
#include &lt;vector>
#include &lt;iterator>	

#include "cgicc/CgiDefs.h"
#include "cgicc/Cgicc.h"
#include "cgicc/HTTPHTMLHeader.h"
#include "cgicc/HTMLClasses.h"

#include &lt;glog/logging.h>

//#include &lt;stdio.h>
//#include &lt;stdlib.h>

using namespace std;
using namespace cgicc;

void writeOK() {
    // Set cookie.  Max-age is 60 seconds, after that
    // time our cookie is deleted.  You may want to add
    // more cookies depending on your requirements.  In
    // the example below, our cookie name is Logged.

    cout << "Set-Cookie:Logged=true;Max-age=60;\r\n";
    cout << "Content-type:text/html\r\n\r\n";

    cout << html().set("xmlns", "http://www.w3.org/1999/xhtml") << endl;
    cout << head().set("title", "Members Area");

    // jQuery and Jquery UI includes
    cout << head() << title("Test");
    cout << cgicc::link().set("rel", "stylesheet").
            set("href", "./jquery/themes/start/jquery-ui.css");
    cout << script().set("type", "text/javascript").
            set("src", "./jquery/jquery-1.8.3.js");
    cout << script();
    cout << script().set("type", "text/javascript").
            set("src", "./jquery/jquery-ui.js");
    cout << script();

    // Accordion
    cout << script();
    cout << "$(function() {";
    cout << "$("#accordion").accordion();";
    cout << "});";
    cout << script();

    // Button
    cout << script();
    cout << "$(function() {";
    cout << "$(\".buttons\").button({icons:{primary:"ui-icon-home"}});";
    cout << "});";
    cout << script();

    cout << head();
    cout << body();
    cout << h2() << "Members area" ;
    cout << h2();

    // Accordion 
    cout << "&lt;div id="accordion" style="font-size:12px;">";
    cout << h3() << "My account" << h3() ;
    cout << cgicc::div();
    cout << p();
    cout << "My account";
    cout << p();
    cout << cgicc::div();
    cout << h3() << "Recent purchases" << h3();
    cout << cgicc::div();
    cout << p();
    cout << "My recent purchases";
    cout << p();
    cout << cgicc::div();

    cout << h3() << "Wish list" << h3();
    cout << cgicc::div();
    cout << p();
    cout << "My wish list";
    cout << p();
    cout << cgicc::div();

    cout << "&lt;/div>"; // end accordion

    // Home button
    cout << p();
    cout << a().set("href", "index.cgi").set("class", "buttons");
    cout << "Home" << a();
    cout << p();

    cout << body();
    cout << html() << endl;
}

// Write nothing but JavaScript redirection 
// to home page
void writeError() {

    // Send cookie to the browser.  Max-age=0 deletes
    // our cookie.
    cout << "Set-Cookie:Logged=false;Max-age=0;\r\n";
    cout << "Content-type:text/html\r\n\r\n;";

    cout << html().set("xmlns", "http://www.w3.org/1999/xhtml");
    cout << head().set("title", "Failed login");
    cout << script();
    cout << "function redirect () {";
    cout << "window.location.replace('index.cgi');";
    cout << "}";
    cout << script();
    cout << head();
    cout << body().set("onload", "redirect()");
    cout << body() ;
    cout << html() << endl;
}

int main(int argc, char **argv) {

    google::InitGoogleLogging("app-login");

    try {
        // Get form data submitted.  This is the most simple
        // form of getting form data
        Cgicc cgi;
        string userid = cgi("userid");
        string password = cgi("password");

        // Validate data.  May use database records for
        // validation
        if (userid == "userid0" && password == "password0") {
            // Success
            writeOK();
            return 0;
        } else {
            // Invalid user
            writeError();
        }
    } catch (exception& e) {
        // An error occurred
        LOG(ERROR) << e.what() << endl;
        writeError();
    }

    return 0;
}

</pre>
</p>

<p>
Our <i>login.cgi</i> page above, demonstrates how to set a cookie and retrieve data submitted from a form (see line 125 and 126).  For other methods 

of retrieving form data please see the cgicc documentation.  Our cookie are set in line 25 and 26 upon successful login and deleted in line 101 and 

102 if error occurred or login failed.
</p>

<p>
Please note that cookies must be set before the <i>"Content-type"</i> line of a request.
</p>

<p>
In the form example above userid and password are userid0 and password0 repectively.
</p>

<p>
That's it Good Luck.
</p>


Using jQuery UI in CGI C++ Web application