Introduction
In the
last part of the Poll application article, I showed you how to
create the Administration section of the Poll application using
CodeCharge Studio. In this article I will cover the creation of the
Poll module which will be used to handle the voting as well as
creation of the results page that will display the results of the
poll.
CodeCharge Studio Project
PollModule User Control
The PollModule User Control will be used to display the poll question
along with the list of the related answers. The user can select a
particular answer and vote. Since generally we do not create a
separate page for voting, instead we create a section within the
index/home page of the site that contains the Poll module, hence we
need to create this page as a User Control (Includable Page in CCS) so
that it can be included within other pages.
Open the PollApp project we created in the last part in CodeCharge
Studio and add select File menu -> New -> Page to start the
Add New
Page dialog. Enter the name of the blank page as PollModule and click
OK. This will create add a new page in the project and display it in
Design view.
Since we want to create this page as a User Control we do not need
the Header and Footer controls on this page, hence select the Header
and Footer controls from the Design view of the PollModule page and
delete them. To select a control in the Design view, click on the
image of the control, this will automatically select the full control.
The red rectangle in figure 1 shows the image for the Header control
that should be clicked to select the Header control.
Figure 1: Header User Control
Keeping the PollModule page selected in Design view move to the
Properties window and change the Includable property to
Yes. This will
instruct CodeCharge Studio to convert this page into a User Control
that can be included in other pages.
Figure 2: Includable property
Once our User Control has been setup, we move on to create a Record
form. Select Record Builder from Toolbox, Builders tab. In the first
step keep all the properties the same, since we will be using the same
database connection and click Next. Select the Data Source as
vote_details. Transfer the vote_name and vote_desc fields into the
Fields
for the Record listbox and click Next. (See figure 3 for all the
properties for this step)
Figure 3: Data source for the Record form
In the actions panel for the Define Record Options step uncheck all
the actions. This is done since we want to just display the poll
question but not allow anyone to change it. Hence removing all the
actions will result in just the selected fields being displayed as
labels. Click Next,
to come to the Theme step, select the Theme as InLine (as we have
chosen it for rest of the application earlier) and click Finish to
generate the record form. You might be presented with a warning dialog
(figure 4), this dialog just informs that the Header and Footer
controls were not found on the designer surface and would you like to
permanently delete reference to them for this page. Click Yes since we
do not want these controls anymore.
Figure 4: Synchronization warning
Once the page is generated it should look like figure 5. This would
currently not resemble a standard Poll module, so we need to modify
the HTML design a bit so that it looks appropriate.
Figure 5: PollModule page
Basically, I have merged to two columns, since it does not look
appropriate to show the Column headers for the record. To merge the
columns, select them in Design view, right-click and select Merge
Cells from the context menu. Also select the vote_name label in Design
view, and click the Bold button on the toolbar to make it bold as
shown in figure 6 below.
Figure 6: Modified Record form Record forms auto-generated by
CodeCharge Studio usually take the ID (Unique Identity Column)
field of the record in the query string of the page and display the
relevant details depending upon the Record ID. And that's exactly how the
current Record form is configured.
But in our Poll Module, we will not work with the Record ID, instead
we want to show that Poll which has been marked as Active by the
administrator. At any given time only 1 poll can be marked as active.
Hence we need to modify the SQL Query used to populate this Record
form so that it automatically displays the Active poll details.
In Project Explorer or Design view select the vote_details Record
form and move to the Properties window, Data tab. Select the
button from the Data Source property to start the SQL query designer.
We use the Data Source dialog to modify the SQL query used to populate
the Record form.
Figure 7 : Selecting the vote_details Record form in Project
Explorer
Figure 8: Selecting the Data Source property of the Record form
in Properties window
The Data Source dialog of CodeCharge Studio needs some explanation,
since its a very important dialog and very useful while you are
generating your custom queries. Figure 9 shows the various important
parts of the Data Source dialog, the parts are marked in Red by me.
Figure 9: Data Source dialog
1) Connection - Choose the connection for your form. If you have
multiple database connections in your project you can switch between
them. You can also click the
button to add/edit/remove the connection.
2) Data Source Type - Choose the source for your form. You can
choose between Table / Procedure / SQL. If you choose
Table, you can
design the SQL queries using the CodeCharge Studio SQL Designer. This
is the default option. Choose Procedure if you want your form to
interact with Stored Procedures written in the database. The last SQL
option allows you to enter your own custom SQL query directly. If your
SQL query returns any results you can see the results by clicking the
Review Data button, but remember if you SQL query takes parameters
then this button will be of no use since without the parameters no
data will be returned!
3) Table / View - This option changes depending upon the Data
Source Type you select. If the Table is select as the data source,
then you can select the table name for the form. Also clicking on the
Build Query button will start the SQL query designer.
4) Query Parameters - In case Table is selected as the
Data Source,
this listbox displays all the parameters for the SQL query, generally
these parameters are a part of the WHERE clause of the SQL query.
5) Add Parameter - Used to add new parameters for the query.
6) Remove Parameter - Used to remove existing parameters.
7) Parameter Properties - Used to configure the properties of an
parameter.
8) Order By- Used to set the sort order of the data returned from
the database.
Coming back to our example, select the first parameter in the Data
Source dialog and click the minus ( - ) button to remove this
parameter, since as explained above we do not want to use the default
criteria to view the record. Now click the Add Parameter ( + ) button
to setup a new Table Parameter.
The Table Parameter dialog is very useful while setting up parameters
for your SQL query (figure 10). There are two ways you can use
this dialog by changing the Condition Type, either in Parameter mode
and set things up using the given UI, or in Expression mode where you have full freedom to setup your own parameters.
Also a point worth mentioning is that you can define multiple source
for the Parameter source, like Expression / URL /
Session /
Application / Form and Cookie. CodeCharge studio will automatically
generate the necessary code to read values from the specified source.
So for example you want to read the value from the query string, set
the Parameter source Type to URL.
For our example setup the values as shown below can click OK and
then OK again to close the Data Source dialog.
Basically, we are setting the parameter such that the vote_active field should
equal to true. Hence only the active record will be displayed.
Figure 10: Table Parameter dialog
This finishes the setup for the Poll question, now we need to setup a
radiobuttonlist that will display all the relevant options and the
Vote button.
Keep your cursor in the {vote_desc } fields cell (Design view),
right-click and select Insert Row from the context-menu to insert a new row above the
current row. Again right-click and select Move Row Up to move the
current row above the new inserted row.
Go to the Toolbox -> Forms tab and drag a Radiobutton
into the newly inserted row, also drag a Button into the footer of the
Record form. Hence the modified Record form looks like figure 11.
Figure 11: Modified Record form
We need to setup the Radiobutton to display the appropriate options
for the current Poll. Select the Radio button in Design view and then
go to the Properties window -> Data tab and set up the properties as
shown in Figure 12. Setting these properties will bind the Radio
button to the vote_items table. The text for each Radiobutton will be
picked from the vote_item_name column and the value from the
vote_item_id columns. Also since the value of the Radiobuttons will
be of integer type, we need to setup the Data Type as Integer, please
don't forget this else you might get errors! Finally, validation is
set for the Radio buttons by setting the Required property to
Yes.
Figure 12: Radiobutton Properties
Also we need to setup the Radiobutton to show items of the current
poll only, hence we need to modify its SQL query. Click on the
button next to the List Data Source property to open the Data Source
dialog. in the Data Source dialog click the Build Query button to open
the Visual Query designer. Right-Click anywhere in the designer
surface and select Add Table from the context-menu. Select the
vote_details table from the List of Tables dialog and click
Add. You
will see that the Visual Designer automatically links the tables based
on their relation. Then check the appropriate fields from the tables
as shown in figure 13 and click OK to close the Visual Query designer.
Figure 13: Table Relations
The reason we have performed the above step is to JOIN the two tables based on
their relation. Now we add a parameter that will allow us to select
the appropriate vote items for only the currently active poll. Click
the Add Parameter ( + ) button in the Data Source dialog. Fill-up the
properties for the new Table Parameter similar to figure 10 and click
OK to
close the Table Parameter dialog and then click OK again to close the
Data Source dialog also. This finishes the setup of the Radiobutton.
Now we move on to configure the button which will submit the Poll.
If u go through the entire tutorial you will realize that we have not
even written a single line of C# code yet!! Still we have managed to
generate so many functional database driven pages! This is the reason
why CodeCharge Studio is so useful, since it automates a lot of your
monotonous tasks for designing database driven web pages.
Select the Button in Design view and from the Properties window ->
Format tab change the class property to InLineButton to set the css
style for the button and the Value property as Vote!. If you remember
I had mentioned in the overview of the Poll application that we will
monitor the IP address of the user voting to prevent multiple votes
from the same person. This calls for some custom code, rather than a
simple insert statement. Hence we will have to add Custom Code for the
Button's server-side OnClick event (Note: CodeCharge Studio's events
do not necessarily map to all the events exposed by the selected
control).
Shift to the Events tab in the Properties window and right-click the
Server -> On Click event, select Add Code from the context-menu
(figure 14).
Figure 14: Add custom code
The above action will change the Design view to the Code view and the
editor will navigate to the point you should insert your custom code
(figure 15). Also a comment is generated for you indicating the
location you should insert the code. So replace the line // Write your
own code here. with your actual code.
Why to use CodeCharge Studio Events?
I am sure this question might be brewing in minds of a lot of you as
to why do you need to use CodeCharge Studio event, when you can
directly switch to code view and start writing your code!!
If you see the Code view for any page, you will find that most of the
code is shown with a grey background, and if you insert any code the
background turns white. The reason for this is that CodeCharge studio
needs to be able to track the changes made to the code and lock/unlock
it appropriately. For example, say there is some auto-generated code
used to generate the Grid form and you go ahead and modify it in Code
view. Now you switch back to Design view and make some changes again
to the Grid, at this point CodeCharge Studio comes at a critical
cross-road. Should it overwrite the changes you have made manually in
Code view or should it not not allow any new changes? And another BIG
question remains How does CodeCharge Studio keep track changes made
by the user in the code? None of the two approaches are justified in all
scenarios so CodeCharge takes a different path.
All the code auto-generated by CodeCharge Studio is shown with a grey
background and the editor is free to modify it. As soon as you enter
any custom code, the background for that potion of the code turns
white, indicating custom code and the editor will not touch that code
at all!
Now in normal programming its common for you to enter your code
in-between CodeCharge Studio's methods, so CodeCharge Studio provides
Events (hooks) within its own generated methods where you can enter
your custom code. If you insert custom code within the CodeCharge
Studio generated event, only that portion of the method will remain
locked rest of the functional auto-generated code will still be
available for modification to the IDE internally.
In case you did not get my above point, just remember that if you
want to add Custom Code in CodeCharge Studio always use the Events
defined by CodeCharge Studio as we are doing now. Also in case you
want to enter new methods/page level variables then you can add them
in the white spaces between the auto-generated methods.
Figure 15: Code View - Custom Action
Finally, its time for us to see some C# code!! Copy the code from
the listing below and paste it into the CodeCharge Studio Code editor.
The code below uses the SqlCommand object which is a custom CodeCharge
Studio generated object. This object exposes a variety of methods that
can be used to interface the database, in the code below we use the
ExecuteScalar and ExecuteNonQuery methods of this object. This object
is very useful since it interfaces the database in a Managed Provider
neutral way, i.e. you use the same object to communicate with the
SqlClient / OleDb or Odbc managed provider. Also this object takes
care of opening and closing database connections. The constructor of
the SqlCommand class takes two parameters, the first is the SQL Query
to execute and the second is the DataAccessObject to use to interface
the database.
For each Connection you create in your project, a Static DataAccessObject property is generated in the
Settings class to access
that database.
All CodeCharge Studio's object use the DataAccessObject to interface
with the database.The code below is pretty trivial the first SQL
query selects the vote_id of the active record, this value is used in
our consequent queries. The second query gets the count of records
having the same IP address as the current user and the currently
active vote_id. If no rows are returned it means the user if voting
for the first time, so we store his vote in the third and fourth query.
//Select the vote_id for the active Poll
SqlCommand voteIdCmd = new SqlCommand( "SELECT vote_id FROM vote_details WHERE
vote_active=true",
Settings.VoteDBDataAccessObject );
string voteId = voteIdCmd.ExecuteScalar().ToString();
//Get the count of votes casted by the particular IP
//for the particular vote_id
SqlCommand ipCmd = new SqlCommand( "SELECT Count(*) FROM user_votes WHERE " +
" vote_id=" + voteId+
" AND user_ip='"+ Request.ServerVariables["REMOTE_ADDR"] +"'" ,
Settings.VoteDBDataAccessObject );
//Check if the user has already voted
if( ((int)ipCmd.ExecuteScalar()) == 0)
{
//Update the Results
SqlCommand updtResults = new SqlCommand("UPDATE vote_items SET vote_results
= (vote_results +1 ) WHERE vote_item_id=" +
item.RadioButton1.Value ,
Settings.VoteDBDataAccessObject );
updtResults.ExecuteNonQuery() ;
//Insert the users vote
SqlCommand userAdd = new SqlCommand( "INSERT INTO user_votes
(vote_id,vote_item_id,user_ip,vote_date) "+
" VALUES (" + voteId
+" , "+item.RadioButton1.Value + ", '"
+ Request.ServerVariables["REMOTE_ADDR"]+"' , #"
+ DateTime.Now.ToString() +"#)" ,
Settings.VoteDBDataAccessObject );
userAdd.ExecuteNonQuery() ;
} |
This virtually completes the implementation of our PollModule, only
one small tweak left is to set the Return Page property of the button
from the Property explorer -> Data tab. This property indicates the
page where the user should be redirected after he submits the button.
Ideally, this would be the PollResults page we will create in the next
step. You can either currently set the Return Page property after
selecting it from Design view to PollResults.ccp or you can do this
later, but just don't forget this step !!
PollResults - Results Page
The PollResults page is the last step in the implementation of the
Poll Application. Now, there are a lot of fancy ways you can display
the results, but I will be just creating a simple page that displays
PollResults.
Go to File menu -> New -> Page and add a blank page with the name
PollResults. Delete the Header and Footer controls that are created by
default, since they relate to Administrative option. Select the Record
builder from the Toolbox and build the first Record for similar to
what you have built for the PollModule, up to figure 10. Set all the
properties and make all the changes as displayed in the above steps so
that your form will be able to display the currently active Poll
details (see figure 16 and 17).
The only difference is that we delete the rows above and below the
Record form, since we do not need them.
Figure 16: Original Poll Results form
Figure 17: Modified Poll Results form
The above record form will display the Subject and the Question from
the Vote_Details table. We need to use another Grid form to display
the list of options for the active Poll and its results. In Design
view keep the cursor after the end of the Record form and select the
Grid Builder from the Toolbox -> Builders tab to start the
Grid
Builder. Click Next on the first screen since we are to use the same
database connection. On the next screen set the Data Source as
vote_items since we want to use the vote_items table and set up the
other properties as shown in figure 18 and click Next.
Figure 18: Grid Data Source
In the Search Options step click Next, since we do not want to setup a
search for our Grid form. On the Define Grid Options step select
No
Sorting and No Page Navigator options since the following
functionality are not needed and click Next. Select the InLine Theme
on this step and also check the Alternate Records checkbox so that
alternate records in the Grid have different colors. Finally, click Finish to complete the Grid form setup, the
generated grid should look
like figure 19 below:
Figure 19: Vote Items Grid
The Grid of Poll items has been setup, but we need to configure it so
that only the list of items from the currently active Poll are
displayed. Select the Grid in Design view and click on the
button from Properties window, Data tab -> Data Source property, to
open the Data Source dialog. In the Data Source dialog click on the
Build Query button (see figure 9) and then from the Visual Query
Builder link the vote_items and vote_details table as shown in figure
20 (steps to perform the link-up have already been explained earlier)
and then click OK.
Figure 20: Table Relations
Even though we do not select any fields from the vote_details table,
we need to perform the earlier step to create a join between the
tables. Now click on the Add Parameter button (see figure 9) and setup
the Table Parameter as shown in figure 10 and click OK to setup the
condition for our Grid to display only items for the active Poll.
Click OK again to close the Data Source dialog.
Default - PollModule hosting page
The above steps being a virtual end to our implementation of the
PollModule. But if you remember we have implemented the PollModule as
a user control, so in order to use this User Control you need to embed
it in a page. In practical implementation of the of the application,
it might be the Home page of your application, but for testing purpose
we will create a separate page.
Start the New Page dialog from File menu -> New -> Page and select the
Blank Page with the name Default and click OK to create a new page.
Select the Header and Footer controls added on the new page and delete
them from Design view.
Now go to the Toolbox, Forms tab and select Includable Page, in the
Include Page dialog set the Control name to PollModule and
Page to
include as PollModule.ccp. Always Remember you can only include pages
marked as Includable in CodeCharge Studio. Also *.ccp is the file
expansion used by CodeCharge Studio pages.
Click OK to close the dialog.
Figure 21: Include Page dialog
Testing the Application
The above steps complete the implementation of the Poll application.
We can Save and Publish the project so that the project is compiled
and stored on our web server. Now start the browser and point it
towards http://localhost/PollApp/admin.aspx i.e. the link to the Admin
login page. Enter admin/admin as the credentials (these were created
in the last part) and login. The select the Poll Details link and add
fill up the record form on the vote_detai_list.aspx page. Make sure
the Vote Active field is checked, to make the newly added Poll active.
Once the Poll is added click the Vote Items link in the header to move
to the vote_items_list.aspx page. Here enter the relevant options for
our Poll Items. Keep the Vote Id field as 1 (this is the vote_id
column from the Vote Details table) and let the Vote Results field be
zero (in further article we'll change this so that zero is
automatically set). Once appropriate poll items have been setup, its
time to test the Poll.
Point the browser to http://localhost/PollApp/Default.aspx page and
you should be presented with the currently active poll with the
appropriate options. Select an option and click the Vote!
button, your poll should be recorded and you will be transferred to
the PollResults page. Also remember, we are restricting the user from
voting multiple times, so if you try to vote again from the same IP
address then your vote will not be recorded!!Conclusion
In this 2 part's series of building a Poll Application using
CodeCharge Studio, we have touched upon many important aspects of
using CodeCharge Studio. Also we have clearly seen some of the advance
features of CodeCharge Studio like Visual Query Designer, User
Controls as well as
the CodeCharge Studio Events used to enter custom code. I have taken
care to touch upon detailed aspects of creating database driven
application in CodeCharge Studio. In future parts I might look as some
customization options. |
