Creating a Poll Application - Creating the Poll module - Part 2

By: Saurabh Nandu - Tuesday, August 13, 2002 Add Comment

<div align="center"> <table width="75%" class="outline"> <tr> <td width="40%" class="outline">Download</td> <td width="25%" class="outline">SDK</td> <td class="outline">Code Charge Studio</td> </tr> <tr> <td width="40%" class="outline"> <a class="wbox" href="../../file/pollapp-part2.zip">pollapp-part2.zip</a> (123kb)</td> <td width="25%" class="outline">v1.0.3705</td> <td class="outline">v1.0.7</td> </tr> </table> </div> Introduction In the <a class="wbox" target="_blank" href="http://www.mastercsharp.com/article.aspx?ArticleID=83&&TopicID=16">last part</a> 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. <img border="0" src="../../img/simplepollpart201.gif" width="117" height="28"> 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. <img border="0" src="../../img/simplepollpart202.gif" width="145" height="136"> 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) <img border="0" src="../../img/simplepollpart203.gif" width="460" height="364"> 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. <img border="0" src="../../img/simplepollpart204.gif" width="386" height="327"> 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. <img border="0" src="../../img/simplepollpart205.gif" width="217" height="225"> 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. <img border="0" src="../../img/simplepollpart206.gif" width="201" height="191"> Figure 6: Modified Record formRecord 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 <img border="0" src="../../img/simplepollpart2-button.gif" width="18" height="18"> 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. <img border="0" src="../../img/simplepollpart207.gif" width="160" height="311">     <img border="0" src="../../img/simplepollpart208.gif" width="148" height="158"> 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. <img border="0" src="../../img/simplepollpart209.gif" width="566" height="435"> 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 <img border="0" src="../../img/simplepollpart2-button.gif" width="18" height="18"> 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. <img border="0" src="../../img/simplepollpart210.gif" width="574" height="272"> 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. <img border="0" src="../../img/simplepollpart211.gif" width="159" height="257">  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. <img border="0" src="../../img/simplepollpart212.gif" width="188" height="250"> 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 <img border="0" src="img/simplepollpart2-button.gif" width="18" height="18"> 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. <img border="0" src="../../img/simplepollpart213.gif" width="288" height="223"> 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). <img border="0" src="../../img/simplepollpart214.gif" width="188" height="175"> 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. <img border="0" src="../../img/simplepollpart215.gif" width="484" height="318"> 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.   <table cellpadding="1" cellspacing="2" width="100%" class="code"> <tr> <td width="100%"><pre>//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() ; }</pre></td> </tr> </table> 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. <img border="0" src="../../img/simplepollpart216.gif" width="216" height="228">  <img border="0" src="../../img/simplepollpart217.gif" width="152" height="180"> 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. <img border="0" src="../../img/simplepollpart218.gif" width="460" height="364">  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: <img border="0" src="../../img/simplepollpart219.gif" width="336" height="141"> 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 <img border="0" src="img/simplepollpart2-button.gif" width="18" height="18"> 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.  <img border="0" src="../../img/simplepollpart220.gif" width="271" height="187"> 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. <img border="0" src="../../img/simplepollpart221.gif" width="456" height="147"> 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.

Creating a Poll Application - Creating the Poll module - Part 2

Comments