*Updated by benblee January 24, 2009
*Updated by Max January 24, 2009 to upload images to the forums here
*next updater, please post username and date on this line
When you're done with this tutorial, see this post for how to add a search function to your form:
How to add a Search to a Connectivity form!
This is my tutorial on how I used ChronoForms and ChronoConnectivity to transfer data from a big Excel file into a viewable and editable database on Joomla. This includes using ChronoForms to create the database table, creating a downloadable CSV file link for the table, setting up ChronoConnectivity to retrieve and display the information, making all rows editable, and the ability to add new entries, all from the front end.
I'm using the latest ChronoForms 3.0 stable and ChronoConnectivity 1.2. The Joomla version is I'm working on is 1.5.9. Please also be aware of any minimum PHP or MYSQL system requirements recommended for any system or product you install...it may save some troubelshooting time later on down the road!
Joomla system requirements (please use Recommended if possible, minimum will work but may show issues)
Install ChronoForms
Install ChronoConnectivity
Please see the two attached files on the next post. These are patches and need to be applied to ChronoConnectivity. Simply download, unzip, then replace the files.
We are going to be using ChronoForms to create a table in the Joomla Database that will be used and editable later. I'm going to include code that I used to set up a database table that logs Skydiving Awards. The Awards are called the Star Crest Awards and have been going on since the Sixties. There's thousands upon thousands of entries that had to be loaded. This is how I did it.
The fields we will be using and what the form is set up for are as follows:
scrnum, lastname, firstname, middlei, city, state, date, time
Through Joomla Admin Backend, go to Components->Chrono Forms->Forms Management
Click on "New".
Now check the screenshot below for settings on the General tab:
[attachment=5]CF_tab_General.jpg[/attachment]
General Tab:
*Form Name: scr
*Email Results: Yes
*Form Method: Post
*Load Chronoforms CSS/JS Files?: Yes
Here's the Setup Emails tab showing the necessary settings. You want to click on the Envelope with the green arrow to start and then click and drag each part of the email you want over to the email area. Once you have the required minimum number of fields to send an email successfully, the border will turn green. Be sure to also check the Email Properties for each part and make sure things are set to "Yes" (Enabled).
[attachment=1]CF_tab_SetupEmails.jpg[/attachment]
[attachment=0]CF_tab_SetupEmails_EmailProperties.jpg[/attachment]
Setup Emails Tab:
At the minimum you need
*To:
*Subject:
*Fromname:
*FromEmail:
The Email Templates tab will then be filled in with a suggested layout once you hit "Apply" at the top.
Now visit the Form Code tab and click on the (+/-) next to "Form HTML:" line. This text box is where you enter in your form code.
[attachment=2]CF_tab_FormCode.jpg[/attachment]
For our example, we are going to enter the following:
<div class="form_item">
<div class="form_element cf_heading">
<h1 id="" class="cf_text">New Additions to SCR's</h1>
</div>
<div class="clear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">SCR Number</label>
<input class="cf_inputbox validate-number" maxlength="10" size="10" id="scrnum" name="scrnum" type="int(11)"><a onclick="return false;"
class="tooltiplink"><img src="components/com_chronocontact/css/images/tooltip.png" class="tooltipimg" border="0" width="16" height="16"></a>
<div class="tooltipdiv">SCR Number :: Numbers only please.</div>
</div><div class="clear"> </div></div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">Last Name</label>
<input class="cf_inputbox validate-alpha" maxlength="50" size="20" id="lastname" name="lastname" type="text"><a onclick="return false;"
class="tooltiplink"><img src="components/com_chronocontact/css/images/tooltip.png" class="tooltipimg" border="0" width="16" height="16"></a>
<div class="tooltipdiv">Last Name :: Letters only please.</div>
</div><div class="clear"> </div></div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">First Name</label>
<input class="cf_inputbox validate-alpha" maxlength="50" size="20" id="firstname" name="firstname" type="text"><a onclick="return false;"
class="tooltiplink"><img src="components/com_chronocontact/css/images/tooltip.png" class="tooltipimg" border="0" width="16" height="16"></a>
<div class="tooltipdiv">First Name :: Letters only please</div>
</div><div class="clear"> </div></div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">Middle Initial</label>
<input class="cf_inputbox" maxlength="2" size="2" id="middlei" name="middlei" type="text"><a onclick="return false;" class="tooltiplink"><img
src="components/com_chronocontact/css/images/tooltip.png" class="tooltipimg" border="0" width="16" height="16"></a>
<div class="tooltipdiv">Middle Initial :: Letter only please</div>
</div><div class="clear"> </div></div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">City</label>
<input class="cf_inputbox validate-alpha" maxlength="50" size="20" id="city" name="city" type="text"><a onclick="return false;" class="tooltiplink"><img
src="components/com_chronocontact/css/images/tooltip.png" class="tooltipimg" border="0" width="16" height="16"></a>
<div class="tooltipdiv">City :: Letters only please.</div>
</div><div class="clear"> </div></div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">State</label>
<input class="cf_inputbox validate-alpha" maxlength="50" size="20" id="state" name="state" type="text"><a onclick="return false;" class="tooltiplink"><img
src="components/com_chronocontact/css/images/tooltip.png" class="tooltipimg" border="0" width="16" height="16"></a>
<div class="tooltipdiv">State :: Letters only please.</div>
</div><div class="clear"> </div></div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">Date</label>
<input class="cf_inputbox" maxlength="10" size="10" id="date" name="date" type="varchar(255)"><a onclick="return false;" class="tooltiplink"><img
src="components/com_chronocontact/css/images/tooltip.png" class="tooltipimg" border="0" width="16" height="16"></a>
<div class="tooltipdiv">Date :: MM/DD/YYYY</div>
</div><div class="clear"> </div></div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">Time</label>
<input class="cf_inputbox" maxlength="8" size="8" id="time" name="time" type="varchar(255)"><a onclick="return false;" class="tooltiplink"><img
src="components/com_chronocontact/css/images/tooltip.png" class="tooltipimg" border="0" width="16" height="16"></a>
<div class="tooltipdiv">Time :: HH:MM AM/PM</div>
</div><div class="clear">
<div class="form_item">
<div class="form_element cf_button">
<input value="Submit" name="undefined" type="submit">
</div>
<div class="clear"> </div>
</div></div></div>
Now click "Save" at the top and you should be back at the "Forms Management" page. From here, check the box of the form you need to create a Database table for and then click on "Create Table" as shown below:
[attachment=4]<!-- ia4 -->CF_addDBtable_function.png<!-- ia4 -->[/attachment]
This reads in all the columns mentioned in your code, so if you're missing one, you may want to go back over your code and make sure everything is named right within it. Also, be aware that ChronoForms inserts several columns before the ones in your code and they are already checked. It's best to leave these checked and then check the rest of yours and hit "Save Table" at the bottom.
Now you have your table!
Go back into the form you are working on through the "Forms Manager".
Click on the DB Connection tab and choose "Yes" from the dropdown and then find your new table click it to highlight it.
Your table will have the prefix "jos_chronoforms_" and then followed by your form name. For us it looks like the image below:
[attachment=3]CF_tab_DB_Connetion.jpg[/attachment]
Now click "Save" at the top and the rest of the tabs will be taken care of...unless you have a more complicated form, but we won't be covering that here just yet.
This form can be left "unpublished" as we are going to be using ChronoConnectivity later to view and edit it.
Congratulations, you now have your form and database table set up.
You can run the next step if you want to fill up the table with sample data. If you're not familiar with phpMyAdmin, you don't have to worry about this step.
I've included a test csv file that has the same entry repeated 50 times just for testing purposes.
*Download it and unzip.
*Open up phpMyAdmin, click on your Joomla Database, then click on the database table we just created in the left column menu.
*Chose the "Import" tab and Browse for the included CSV file.
*Under: Format of imported file: chose the following,
-CSV[/i]
--Fields terminated by: , (this is just a comma, no spaces before or after)
--Fields enclosed by: (delete everything in this entry)
--Fields escaped by: , (this is just a comma, no spaces before or after)
Leave everything else and hit "Go" at the bottom right.
*Your table should now have some data in it and viewable if you click the "Browse" tab.
Now to create a version that is downloadable in CSV format.
From your "Forms Management" area, click "New" and go through the first steps above of naming your form, but you don't need to worry about email here. I usually try to choose a name that lets me know what forms are are downloads of others, so in this instance if my first form from above was named "form1" I would name this one "form1_download". It's generally a good idea to not leave spaces in name of anything if you can avoid it. The easiest way to make a space and not lose any functionality is by way of an underscore. I am also in the habit of marking "Load Chronoforms CSS/JS Files?" TO "Yes" as I've had better results when I'm displaying anything.
Under the "Form Code" tab, you want to pasted the code mentioned below:
This next part is taken from a post by Max found here:
How to make a form to export some table to CSV file
replace jos_tablename with your real table name!
and
edit this line of code to select whatever records if you don't want a full backup of the entire table (recommended to leave it as is):
$database->setQuery( "SELECT * FROM ".$tablename."" );
The code you need to edit and use is here:
<?php
global $mainframe;
$database =& JFactory::getDBO();
include_once JPATH_BASE.'/components/com_chronocontact/excelwriter/'."Writer.php";
//echo $_POST['formid'];
/*$formid = JRequest::getVar( 'formid', array(), 'post', 'array');
$database->setQuery( "SELECT name FROM #__chrono_contact WHERE id='".$formid[0]."'" );
$formname = $database->loadResult();*/
$tablename = 'jos_tablename';
$tables = array( $tablename );
$result = $database->getTableFields( $tables );
$table_fields = array_keys($result[$tablename]);
$database->setQuery( "SELECT * FROM ".$tablename."" );
$datarows = $database->loadObjectList();
$titcol = 0;
foreach($table_fields as $table_field){
if($titcol){$csvline .=",";}
$csvline .= $table_field;
$titcol++;
}
$csvline .="\n";
$datacol = 0;
$rowcount = 1;
foreach($datarows as $datarow){
foreach($table_fields as $table_field){
if($datacol){$csvline .=",";}
$csvline .= '"'.addslashes($datarow->$table_field).'"';
$datacol++;
}
$csvline .="\n";
$datacol = 0;
$rowcount++;
}
if (ereg('Opera(/| )([0-9].[0-9]{1,2})', $_SERVER['HTTP_USER_AGENT'])) {
$UserBrowser = "Opera";
}
elseif (ereg('MSIE ([0-9].[0-9]{1,2})', $_SERVER['HTTP_USER_AGENT'])) {
$UserBrowser = "IE";
} else {
$UserBrowser = '';
}
$mime_type = ($UserBrowser == 'IE' || $UserBrowser == 'Opera') ? 'application/octetstream' : 'application/octet-stream';
@ob_end_clean();
ob_start();
header('Content-Type: ' . $mime_type);
header('Expires: ' . gmdate('D, d M Y H:i:s') . ' GMT');
if ($UserBrowser == 'IE') {
header('Content-Disposition: inline; filename="' . "ChronoForms - ".$tablename." - ".date("j_n_Y").'.csv"');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Pragma: public');
}
else {
header('Content-Disposition: attachment; filename="' . "ChronoForms - ".$tablename." - ".date("j_n_Y").'.csv"');
header('Pragma: no-cache');
}
print $csvline;
exit();
?>
Now hit "Save" up top and then be sure the form is "Published".
When you view your "Forms Manager", look for the link listed to the right of the form name you just entered and this is what you want to use as the download link...whether it be a menu item or within an article. Give it a try...but remember that there isn't any data in there yet.
If you have Data that needs to be loaded from a CSV file into the database table, now is the time to do it. We will cover the basics of getting an Excel file into a database table in another tutorial. A quick note though is to remember that you have extra columns added by ChronoForms in the table so be sure to account for them in your Excel or CSV file.
Please always make full backups of not only these tables, but your full site and database.
Now it's time for the ChronoConnectivity part.
In the Joomla Admin Backend, visit Components->Chrono Connectivity
Choose "New", then look at the General tab.
You may want to try hitting "Apply" intermittently so your session doesn't time out on you for these next steps. You will need to have a minimum number of steps completed before it will let you do this, so don't panic if it doesn't let you the first time you try it...just keep plugging away!
You'll need to fill out the following:
General
*Name: SCR_awards
*TableName: jos_chronoforms_scr (note that this is the default name because the form name was "scr")
*Header:
The SCR Awards Recipient Database. We will be adding search functions soon.
<br />
{new_record}<br />
<table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td style="font-weight: bold; width: 10%;">SCR#</td>
<td style="font-weight: bold; width: 15%;">Last Name</td>
<td style="font-weight: bold; width: 15%;">First Name</td>
<td style="font-weight: bold; width: 5%;">M.I.</td>
<td style="font-weight: bold; width: 15%;">City</td>
<td style="font-weight: bold; width: 15%;">State</td>
<td style="font-weight: bold; width: 10%;">Date</td>
<td style="font-weight: bold; width: 15%;">Time</td>
</tr>
</tbody>
</table>
<div class="clr" style="border-bottom: 3px solid #222; padding: 3px; margin-bottom: 10px;"></div>
*Body:
<table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr<?php if ($i % 2) echo ' style="background-color: #EBEBEB;"';?>>
<td style="width: 10%;">{edit_record} {scrnum}</td>
<td style="width: 15%;">{lastname}</td>
<td style="width: 15%;">{firstname}</td>
<td style="width: 5%;">{middlei}</td>
<td style="width: 15%;">{city}</td>
<td style="width: 15%;">{state}</td>
<td style="width: 10%;">{date}</td>
<td style="width: 15%;">{time}</td>
</tr>
</tbody>
</table>
<?php $i++ ?>
*Footer:
<div class="clr" style="border-bottom: 3px solid #222; padding: 3px; margin-bottom: 10px;"></div>
<script type="text/javascript">
window.addEvent('domready', function() {
var limit_select = $('limit').options;
if ( !limit_select ) return;
for ( var i = 0; i < limit_select.length; i++ ) {
if ( limit_select[i].value == 0 ) {
limit_select[i].value = 250;
limit_select[i].innerHTML = '250';
}
}
});
</script>
<div align="center">{pagination}</div>
<br />
Note: In the code just above there is a rewrite for the last Pagination option to change it from "all" to "250". If you'd like to change that to a different number, just change it in both places above.
*Body Loop: Inside Body Loop
*Header Title: SCR Awards Recipients
*Edit Link Code: <u>Edit</u>
--(note that you can use html here so using an image the size of a favicon could work really well)
*New Link Code: <h4><u>Add New Entry</u></h4>
*List Limit: 25
--(this was included in one of the patches mentioned at the top so if you don't see it, it's because you didn't install the patch)
Front Permissions Tab
*Record Edit Template:
<h1>Add or Edit an entry in the SCR Awards</h1>
<br /><br />
<table>
<tr><td>SCR Number:</td><td><input type="text" name="scrnum" size="10" value=""></td></tr>
<tr><td>Last Name:</td><td><input type="text" name="lastname" size="30" value=""></td></tr>
<tr><td>First Name:</td><td><input type="text" name="firstname" size="30" value=""></td></tr>
<tr><td>M.I.:</td><td><input type="text" name="middlei" size="30" value=""></td></tr>
<tr><td>City:</td><td><input type="text" name="city" size="30" value=""></td></tr>
<tr><td>State:</td><td><input type="text" name="state" size="30" value=""></td></tr>
<tr><td>Date:</td><td><input type="text" name="date" size="30" value=""></td></tr>
<tr><td>Time:</td><td><input type="text" name="time" size="30" value=""></td></tr>
</table>
<input type="hidden" name="id" value="">
*"New Record" user Groups: highlight (using "control" click) all the user groups you want to have permission to add a new entry to the database table. If you highlight "Author" only, it does not automatically include all the user groups above author, you have to highlight each and every one you want to have permission to us this function.
*Editors user Groups: same as "New Record" directions
*"Delete Record" user Groups: Also same as "New Record" directions, however I chose not to allow it on my because I have a HUGE ordered list and I didn't want to lose data on a mouse click mistake.
Admin Config Tab
*Data View Fields Name: scrnum,lastname,firstname,middlei,city,state,date,time
*Data View Columns titles: SCR Number, Last Name, First Name, Middle I, City, State, Date, Time
*Record Edit Template:
<h1>Add an entry to the SCR Awards</h1>
<br /><br />
<table>
<tr><td>SCR Number:</td><td><input type="text" name="scrnum" size="10" value=""></td></tr>
<tr><td>Last Name:</td><td><input type="text" name="lastname" size="30" value=""></td></tr>
<tr><td>First Name:</td><td><input type="text" name="firstname" size="30" value=""></td></tr>
<tr><td>M.I.:</td><td><input type="text" name="middlei" size="10" value=""></td></tr>
<tr><td>City:</td><td><input type="text" name="city" size="10" value=""></td></tr>
<tr><td>State:</td><td><input type="text" name="state" size="10" value=""></td></tr>
<tr><td>Date:</td><td><input type="text" name="date" size="10" value=""></td></tr>
<tr><td>Time:</td><td><input type="text" name="time" size="10" value=""></td></tr>
</table>
<input type="hidden" name="id" value="">
*OnSaveJSCode:
if(0){
} else {
submitform( pressbutton );
}
Now...Finally...hit "Save" at the top!
Now for the fun part...
In the Chrono Connectivity->Forms Manager, use the link given to the right of the form name to view your form. This is also the link you will want to use for any menu items you set up. Remember what you set your permissions to and then login with an account of the same permissions to see the "Add New Entry" and "Edit" links.
Final notes: I made sure that the "scrnum" column was "INT(11)" so that I could order the database by the numbers in that column. This was a setting I double checked through phpMyAdmin.