#LyX 1.4.4 created this file. For more info see http://www.lyx.org/ \lyxformat 245 \begin_document \begin_header \textclass article \language english \inputencoding auto \fontscheme default \graphics default \paperfontsize default \spacing single \papersize a4paper \use_geometry false \use_amsmath 0 \cite_engine basic \use_bibtopic false \paperorientation portrait \secnumdepth 3 \tocdepth 3 \paragraph_separation indent \defskip medskip \quotes_language english \papercolumns 1 \papersides 1 \paperpagestyle default \tracking_changes false \output_changes true \end_header \begin_body \begin_layout Title JiNN FAQ Database Administration \end_layout \begin_layout Date 27 December 2006 \end_layout \begin_layout Author Pim Snel \end_layout \begin_layout Abstract This tutorial learns to create a small admin interface for an external F.A.Q. database using JiNN. \end_layout \begin_layout Section Introduction \end_layout \begin_layout Standard In this tutorial we're going to create an administration back-end using JiNN. The front-end of the F.A.Q. Application can not be created with JiNN. This should be written from scratch or using other tools. JiNN's purpose is to quickly give normal user access to a database without the need of writing code. Creating a complete full featured F.A.Q. application is outside the scope of this tutorial. \end_layout \begin_layout Standard The intended audience are web-developers who make extensive use of databases. Basic knowledge of eGroupWare and MySQL is required. You need administrator access to an eGroupWare environment with JiNN installed. \end_layout \begin_layout Section Words you need to understand \end_layout \begin_layout Standard You need to understand two important words used in JiNN. \end_layout \begin_layout Enumerate \emph on JiNN-sites \emph default or just \emph on sites \emph default do NOT mean website but. A JiNN-site contains database connection information and it contains JiNN-objec ts. A JiNN-site can be seen as a single application in a framework containing more applications, or as a single database next to other databases. \end_layout \begin_layout Enumerate \emph on JiNN-objects \emph default are assigned to table. A JiNN object automatically contains a \emph on form view \emph default and a \emph on list view \emph default . JiNN-objects can be seen as sections in an application or as tables in a database. \end_layout \begin_layout Section Setup the database \end_layout \begin_layout Standard Before we can create a JiNN-site a database with tables must exist. We create a database for the F.A.Q. application in MySQL using the following schema: \end_layout \begin_layout LyX-Code CREATE TABLE `category` ( \end_layout \begin_layout LyX-Code `id_cat` int(4) NOT NULL auto_increment, \end_layout \begin_layout LyX-Code `cat_name` varchar(30) NOT NULL default '', \end_layout \begin_layout LyX-Code PRIMARY KEY (`id_cat`) \end_layout \begin_layout LyX-Code ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; \end_layout \begin_layout LyX-Code \end_layout \begin_layout LyX-Code CREATE TABLE `questions_answers` ( \end_layout \begin_layout LyX-Code `id` int(4) NOT NULL auto_increment, \end_layout \begin_layout LyX-Code `cat_id` int(4) NOT NULL default '0', \end_layout \begin_layout LyX-Code `question` varchar(250) NOT NULL default '', \end_layout \begin_layout LyX-Code `answer` longtext NOT NULL, \end_layout \begin_layout LyX-Code PRIMARY KEY (`id`) \end_layout \begin_layout LyX-Code ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; \end_layout \begin_layout Standard As you can see the question can be put into categories using a foreign key. \end_layout \begin_layout Section Creating the JiNN-Site \end_layout \begin_layout Standard Log into your eGroupWare environment and open JiNN. Make sure your are administrator. You may have to give yourself permission to use JiNN in the eGroupWare Admin Application. Because you are an administrator you have an extra \emph on admin site box menu \emph default in JiNN's sidebox. \end_layout \begin_layout Standard \begin_inset Float figure placement h wide false sideways false status collapsed \begin_layout Standard \align center \begin_inset Graphics filename images/Afbeelding1.png scale 50 rotateOrigin center \end_inset \end_layout \begin_layout Caption JiNN Sidebox menu with Administration box \end_layout \end_inset \end_layout \begin_layout Standard Click on the link \emph on Add Site \emph default from the sidebox menu. You must now define the database connection and the name of your JiNN-site. Do at as in the image below. \end_layout \begin_layout Standard \begin_inset Float figure placement h wide false sideways false status collapsed \begin_layout Standard \align center \begin_inset Graphics filename images/Afbeelding2.png width 100text% keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption JiNN-Site settings containing database connection information \end_layout \end_inset \end_layout \begin_layout Standard Before saving you can test your connection by clicking on the button test database and paths. In our example the database connection must succeed but the path and URL will give errors. This is nothing to worry about for this tutorial. When database connection was successful you can save the site, else check the database connection settings. \end_layout \begin_layout Standard \begin_inset Float figure placement h wide false sideways false status collapsed \begin_layout Standard \align center \begin_inset Graphics filename images/Afbeelding3.png width 100text% rotateOrigin center \end_inset \end_layout \begin_layout Caption Testing the database connection \end_layout \end_inset \end_layout \begin_layout Section Adding Objects \end_layout \begin_layout Standard When the JiNN-site is saved, the database connection is working and there are tables in the database, we can setup the JiNN-objects. After saving a new site the Site Settings Page is still opened. At the bottom of this page the site objects are displayed. We haven't made any yet, so lets add an object: click the button \emph on New Object \emph default . \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeelding4.png scale 50 keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption JiNN-objects listed at the bottom of the Site Settings Page \end_layout \end_inset \end_layout \begin_layout Standard The object properties window will open. You must give this object a name and assign a database table from the dropdown list. We will name the first object `Categories' and assign this to the categories table. Repeat this steps for the object `Questions & Answers'. \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeelding5.png width 100text% keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption Creating a JiNN-object \end_layout \end_inset \end_layout \begin_layout Section Adding the first content \end_layout \begin_layout Standard Though we're not finished yet we can already use these objects for maintaining content. Lets have a look at the categories first. Before we can access our object we open our JiNN-site. Select the Site in the JiNN Nagivation in the Sidebox. \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeelding6.png scale 50 keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption Opening a JiNN-site \end_layout \end_inset \end_layout \begin_layout Standard When the site is opened the active objects are listed in the JiNN Navigator. We will now select the object `Categories'. \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeelding7.png scale 50 keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption Selecting an object \end_layout \end_inset \end_layout \begin_layout Standard JiNN will now open the categories in the Listview showing no records. Lets create a new record by clicking on Add new record. \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeelding8.png width 100text% keepAspectRatio \end_inset \end_layout \begin_layout Caption List View of the newly create object Categories \end_layout \end_inset \end_layout \begin_layout Standard Add a category and click on save. \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeelding9.png scale 50 keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption Adding new record \end_layout \end_inset \end_layout \begin_layout Standard After the record is saved we will return in the last added record and on top of the page the message 'Record was succesfully saved' is displayed. Lets add another by clicking on new record(s) from sidebox menu. \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status open \begin_layout Standard \begin_inset Graphics filename images/Afbeelding10.png scale 50 keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption Record saved successfully \end_layout \end_inset \end_layout \begin_layout Standard When you're done click on Save and finish. You will now return to the list view which will show your records. Every record can be viewed, edited, copied or deleted by using these small icons. \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeelding12.png scale 50 keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption icons to maintain records \end_layout \end_inset \end_layout \begin_layout Section Adding relations and changing labels \end_layout \begin_layout Standard We now want to create the relation between \emph on category.id_cat \emph default and \emph on questions_answers.cat_id \emph default . After we have create this relation we can assign a category to a \emph on Question and Answer \emph default using a dropdown list. \end_layout \begin_layout Standard Click on the object \emph on Questions and Answers \emph default from the JiNN Navigation and then click on \emph on Edit Object Form View \emph default from the administration sidebox menu \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeeldin13.png scale 50 rotateOrigin center \end_inset \end_layout \begin_layout Caption open design form \end_layout \end_inset \end_layout \begin_layout Standard You will now see the developers mode of the form view which is one of JiNN's most important and powerfull screens. On top of the form you see a horizontal bar with configuration buttons for concerning the complete object. On the left side you'll see buttons and icons per field to configure every field. \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeelding14.png width 100text% rotateOrigin center \end_inset \end_layout \begin_layout Caption developer toolbar \end_layout \end_inset \end_layout \begin_layout Standard Click on the button Relation Widgets. The relation editor will be openen in a plugin. You can create different relation types, displayed in the tabs. We're going to create a \emph on One-to-many relation \emph default widget in this form which is the first tab. Click on the the button \emph on Create new relation \emph default . \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeelding15.png scale 50 keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption create new relation \end_layout \end_inset \end_layout \begin_layout Standard Then select keys, tables and fields like in the example below. \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeelding16.png width 100text% keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption relation editor \end_layout \end_inset \end_layout \begin_layout Standard Click on save when your finished. The new relation is displayed as in the image below: \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeelding17.png width 100text% keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption save relation in relation editor \end_layout \end_inset \end_layout \begin_layout Standard If this seems good click on close to close the popup. You will now see that the field cat id has a dropdown list containing our category names. \end_layout \begin_layout Standard To finish our work we will edit the default label into Category. Click on the edit field symbol left from the cat id field. \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeelding22.png scale 50 keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption edit field button \end_layout \end_inset \end_layout \begin_layout Standard Change label into Category in the popup form and save and close the form when your finished. \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeelding18.png scale 50 keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption change field properties \end_layout \end_inset \end_layout \begin_layout Standard Click on the button Back to normal mode on top of the screen to see the form with the new created relation and try to enter and new record. \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeelding19.png scale 50 keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption form with one-to-many dropdown list \end_layout \end_inset \end_layout \begin_layout Section Assign field plugin \end_layout \begin_layout Standard One more thing configuration before our interface is ready. We will now assign a WSYIWYG-editor to the answer field of Questions and Answers. Click again on Edit Object Form View and then click on the edit field icon to get the field configuration popup again. Now select the plugins tab and then select TinyMCE from the dropdownlist \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeelding21.png width 100text% keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption edit field properties \end_layout \end_inset \newpage \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeelding23.png scale 50 keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption select field plugin \end_layout \end_inset \end_layout \begin_layout Standard You'll will now get a lot of configuration options. Just leaving these as they are will give you result, but of course you are encouraged to play with them. Save the form clicking on save at the bottom of the page and close the popup. \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeelding24.png scale 50 keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption configure field plugin \end_layout \end_inset \end_layout \begin_layout Standard You're form will now look as this example below. \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeelding25.png scale 50 keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption the TinyMCE plugin shown in design form view \end_layout \end_inset \end_layout \begin_layout Standard And it will look below like this when you click on \emph on Back to normal \emph default . \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status collapsed \begin_layout Standard \begin_inset Graphics filename images/Afbeelding26.png scale 50 keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption the TinyMCE plugin shown in the normal form \end_layout \end_inset \end_layout \begin_layout Standard That's all for this tutorial. You now have a simple administration interface for your FAQ database. When you assign access to you're normal users they can maintain data using these navigation buttons. \end_layout \begin_layout Standard \begin_inset Float figure wide false sideways false status open \begin_layout Standard \begin_inset Graphics filename images/Afbeelding27.png scale 50 keepAspectRatio rotateOrigin center \end_inset \end_layout \begin_layout Caption the moderators navigation menu \end_layout \end_inset \end_layout \end_body \end_document