Creating a Poll Application - Creating the Admin Pages - Part 1

By: Saurabh Nandu - Friday, July 26, 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-part1.zip">pollapp-part1.zip</a> (105kb)</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=82&&TopicID=16">last article</a> I gave you a brief overview of CodeCharge Studio (CCS). In this article I will straight dive into the depths of this tool and we will build a Simple Poll Application using this tool. This tutorial will highlight how easily you can build a fairly complex database driven application. I will split this tutorial in to parts so that its easier for you to read ( and me to write ;) ). Application Summary Let's first summarize the functionality we are looking out for before we start creating the application. The application will be divided into two logical parts the first part will be the Poll User Control (Includable Page in CCS). This user control can be placed on any other page where you want to display the poll hence you reuse the user control code. The second section contains of the administration section where only the administrator is allowed access. Through the admin section the administrator can easily add, update delete the poll items. The Poll application will be created in such a way that there can be multiple choices per poll. Also a user can only vote once per poll. And at a given time only one poll can be active. In this article I will only cover the creating of the administration section. In the further parts I'll complete the next part. Database Design Before you start creating any application in CodeCharge Studio you need to first design the database. In this example I will be using MS Access database, you can actually use any database you like. The descriptions of the 4 tables are given below for our vote.mdb file : 1) Members - This table is used to keep the username and password of the administrators who will be allowed to access the admin section of the application. <table cellpadding="1" cellspacing="2" width="100%" class="outline"> <tr> <td width="25%" class="outline">Field Name</td> <td width="25%" class="outline">Data Type</td> <td width="50%" class="outline">Description</td> </tr> <tr> <td width="25%" class="outline">member_id</td> <td width="25%" class="outline">AutoNumber</td> <td width="50%" class="outline">Primary key field for the table.</td> </tr> <tr> <td width="25%" class="outline">member_name</td> <td width="25%" class="outline">Text</td> <td width="50%" class="outline">Username of the member that will be used while authentication.</td> </tr> <tr> <td width="25%" class="outline">member_pass</td> <td width="25%" class="outline">Text</td> <td width="50%" class="outline">Password of the member that will be used while authentication.</td> </tr> </table> 2) Vote_Details - This table stores the details of each poll. Also there it sets the active poll. <table cellpadding="1" cellspacing="2" width="100%" class="outline"> <tr> <td width="25%" class="outline">Field Name</td> <td width="25%" class="outline">Data Type</td> <td width="50%" class="outline">Description</td> </tr> <tr> <td width="25%" class="outline">vote_id</td> <td width="25%" class="outline">AutoNumber</td> <td width="50%" class="outline">Primary key field for the table.</td> </tr> <tr> <td width="25%" class="outline">vote_name</td> <td width="25%" class="outline">Text</td> <td width="50%" class="outline">Title of the poll.</td> </tr> <tr> <td width="25%" class="outline">vote_desc</td> <td width="25%" class="outline">Memo</td> <td width="50%" class="outline">Description of the poll. Usually this field will hold the question for the poll.</td> </tr> <tr> <td width="25%" class="outline">vote_active</td> <td width="25%" class="outline">Yes/No</td> <td width="50%" class="outline">Indicates which poll is active. </td> </tr> </table> 3) Vote_Items - This table stores the choices related to each poll. As I mentioned before each poll will support multiple choices, hence this table is used to store the choices for the poll. <table cellpadding="1" cellspacing="2" width="100%" class="outline"> <tr> <td width="25%" class="outline">Field Name</td> <td width="25%" class="outline">Data Type</td> <td width="50%" class="outline">Description</td> </tr> <tr> <td width="25%" class="outline">vote_item_id</td> <td width="25%" class="outline">AutoNumber</td> <td width="50%" class="outline">Primary key field for the table.</td> </tr> <tr> <td width="25%" class="outline">vote_id</td> <td width="25%" class="outline">Number</td> <td width="50%" class="outline">The vote_id from the vote_details table to which this item is related.</td> </tr> <tr> <td width="25%" class="outline">vote_item_name</td> <td width="25%" class="outline">Text</td> <td width="50%" class="outline">The description of the choice item.</td> </tr> <tr> <td width="25%" class="outline">vote_results</td> <td width="25%" class="outline">Number</td> <td width="50%" class="outline">The number of times this item has been voted.</td> </tr> </table> 4) User_Votes - This table stores the details of each users vote. Since we want a user to only vote once per poll we store his IP Address every time he votes. <table cellpadding="1" cellspacing="2" width="100%" class="outline"> <tr> <td width="25%" class="outline">Field Name</td> <td width="25%" class="outline">Data Type</td> <td width="50%" class="outline">Description</td> </tr> <tr> <td width="25%" class="outline">user_id</td> <td width="25%" class="outline">AutoNumber</td> <td width="50%" class="outline">Primary key field for this table.</td> </tr> <tr> <td width="25%" class="outline">vote_item_id</td> <td width="25%" class="outline">Number</td> <td width="50%" class="outline">The vote_item_id from the vote_items table, that the user has selected.</td> </tr> <tr> <td width="25%" class="outline">vote_id</td> <td width="25%" class="outline">Number</td> <td width="50%" class="outline">The vote_id from the vote_details table. </td> </tr> <tr> <td width="25%" class="outline">user_ip</td> <td width="25%" class="outline">Text</td> <td width="50%" class="outline">The IP Address of the user.</td> </tr> <tr> <td width="25%" class="outline">vote_date</td> <td width="25%" class="outline">DateTime</td> <td width="50%" class="outline">The DateTime when the user voted.</td> </tr> </table> This completes the database design, the relationships between the tables is shown in figure 1 below. <img border="0" src="../../img/simplepoll01.gif" width="365" height="208"> Figure 1: Tables Relationships Code Charge Studio ProjectCreating a New Project Once the database is ready its time to start you designing your application in CodeCharge Studio. Start up CCS and you will be shown the Project Dialog (see figure 2). Select New Project and click OK to start with a new CCS project. <img border="0" src="../../img/simplepoll02.gif" width="381" height="392"> Figure 2: Project Dialog Using the Application Builder The Add New Project dialog (figure 3) is displayed now, enter PollApp as the Name of the application and change the Language to ASP.NET 1.0 C#. At this point you have two choices, either you can start a blank project and then manually add each page to your project or you can use the Application Builder which rapidly builds the entire application with just a few clicks. To lessen our work, I choose Application Builder and click OK to start the Application Builder.  <img border="0" src="../../img/simplepoll03.gif" width="497" height="400"> Figure 3: Create new ProjectIn the first General project properties page, don't change any properties and click Next to come to the database setup page. Here click on the Create button to create a new connection to our vote.mdb database. The Add New Connection dialog is shown, set the Connection Name as VoteDB and Database as MS Access. Its very important to set up the database, since Code Charge Studio uses this information to construct SQL queries appropriately for the database. Also in case you want to use another database connection on the production server or you want to use specific Managed Providers like SqlClient Managed Provider or the ODBC Managed Provider, switch to the Server tab in the Add New Connection dialog and setup the properties there. For this example click the Build button and link to your vote.mdb database file. Once done click OK to add a connection to the project. <img border="0" src="../../img/simplepoll04.gif" width="428" height="451"> Figure 4: Add New Connection Once you finish building the database connection click Next to come to the Builder Options screen. Here let the default properties of Enable smart naming, which helps to name the different pages and Autoincremented primary keys be checked. Proceed forward by clicking the Next button, now you are presented with a Access Authentication page. Set the setting the appropriate properties the page looks like below (figure 5). The User Table Field contains the table name in the database which stores the user details, the User ID Field contains the primary key field of the table, the Login Field contains the username field and the Password Field contains the password file from the table. The last Level/Group Field is set when you have Roles defined for your users. The Panel next to is also concerned with Roles. Since in this basic application we do not have any roles we leave them to their default values. <img border="0" src="../../img/simplepoll05.gif" width="288" height="149"> Figure 5: Authentication Settings Once you finish the above settings click Next to move to the next page where you are given a list of tables from the database. Add all the tables to the Selected tables collection. This page helps you select the tables for which you want the builder to auto-generate the pages. Since in my case, I want to create a page to administer all the tables I select all of them. Click Next to arrive to the pages configuration step. <img border="0" src="../../img/simplepoll06.gif" width="552" height="152"> Figure 6: Page Configuration This step is a very important step, and it gives you one place access to configure all your pages. Play around with this step as much as you can to better configure your pages. I will be outlining very few customization options, you will have to find others yourself ;). First click on the All link since we want to update the properties for all the pages. Select both properties on this dialog (figure 7), the Search, Grid & Record on One Page option allows easy configuration and viewing of all the relevant options on one page. Remember the Grid form is used to list the contents of a table, the search form is used to search the table and show relevant records in the Grid form and the Record form is used to insert, update or delete a entry. To collate all the forms on one page is good when you know the amount of data is less. The second option of Include in Menu allows the pages to be listed in a Menu , which is added on all pages for easy navigation. Click OK to close the dialog. <img border="0" src="../../img/simplepoll07.gif" width="215" height="90"> Figure 7: All Page details Now, we will start configuring individual pages. Set the CheckBoxes to as shown below (figure 8). Basically I have removed Search option for all pages, since the data will be less. Also I have removed the Record and Updatable checkboxes for the user_votes page, since usually we don't rig poll's, do we ?? :) Hence you will just be able to browse the list of users polling, but not directly add or update their details. <img border="0" src="../../img/simplepoll08.gif" width="552" height="152"> Figure 8: Updated page properties Click the members link now to configure the properties for the members page. Switch directly to the Records tab and select the member_id field. Change the Control Type to Hidden (as shown in figure 9). We take this step since we do not want the admin to change the member_id field since its a primary key field. Repeat the same steps for the vote_id field on the vote_details page and the vote_item_id on the vote_items field to convert them into Hidden controls on the Record form. <img border="0" src="../../img/simplepoll09.gif" width="284" height="278"> Figure 9: members Record form propertiesOnce you finish configuring the pages, click Next to come to the Select Page Layout section. Keep the default options and select Next to move to the Theme selection step. In this step you can select any of the Theme you want to apply throughout your application. I have selected InLine Theme (figure 10), you can select any theme you like and click Next. The final page in the Application Builder is shown, it summarizes the steps to be performed. This would be your last chance to go back and change any settings you might have left. If everything has been correctly setup click on Finish to generate the project. <img border="0" src="../../img/simplepoll10.gif" width="598" height="374"> Figure 10: Select Theme Once the Application Builder completes CodeCharge Studio will automatically generate 7 pages for you depending upon the properties you have selected. 2 are User Controls used for the Header and Footer respectively while 1 handles the login, rest 4 pages are specific to your tables. You can view these pages from the Project Explorer window. I am sure you might have not seen a faster way of creating customized ASP.NET data-bound pages which can be created so easily! I mean if you switch to the Code View for each page, you will find that so much of code as been written for you, without you actually writing a single line of code by your hand!!Publishing the Project Now that you have come so far, you would be definitely waiting to check out how the code works, well we no further delay we publish our project so that the pages are uploaded to the server, and the code is compiled. Press F9 or select Project menu -> Publish Project to bring up the Project Settings dialog. If you have a local server use the default options, else select FTP from the Location dropdownlist and provide the appropriate credentials for your server. Click OK to compile and publish the project. If the project publishing directory does not exist on the local server you are prompted to create it. Creating a Virtual Directory All ASP.NET applications live within a Virtual Directory, so just publishing to a new directory is not enough, you need to convert this directory into a Virtual Directory. Use the IIS Manager from Administrative Tools to create a new Virtual Directory out of your publishing directory. You can also refer to the 2nd point of below linked article to learn to create a Virtual Directory. [ <a class="wbox" target="_blank" href="http://www.mastercsharp.com/article.aspx?ArticleID=60&&TopicID=2"> www.mastercsharp.com/article.aspx?ArticleID=60&&TopicID=2</a> ] Please do not skip this step or your application will give errors!! Testing the pages Once you have published your project, and created a Virtual Directory you are ready to test you pages. Navigate to the URL http://localhost/PollApp/members_list.aspx in your browser. Also add a new member with the Name admin and Pass admin. Some of you might be slightly worried at this point that the password textbox shows the password in clear text, well Code Charge Studio has no way of knowing from the database schema that you require a password textbox. So you can open the members_list page in CCS and change the Format->type property of the textbox to password. There will be room for more such small adjustments, most of them can be fixed by adjusting the appropriate properties in CCS. Live Page Once you have published the project, you can shift to using Live Page tab for each page. This helps to have a quick look at the actual page that you have coded. When you shift to Live Page, CCS generates the current page and the necessary common files and compiles them. In order for the Live Page to show faster CCS does not generate all the pages, hence if you navigate (redirect) to another page from Live Page it will give an error!! Adding a Index Page Let's add a simple page that will contain a link to all the Admin pages, so its easier to navigate to them. Choose New -> Page from the File menu, in the New Page dialog choose Blank Page and set its name as admin and click OK. Open the admin page in CCS Design view, and from the Toolbox window switch to the HTML controls. Select the Add HyperLink control and add the links to all the Admin pages (figure 11). Once you add the links to all pages, save the project. <img border="0" src="../../img/simplepoll11.gif" width="562" height="276"> Figure 11: Add Hyperlinks Restricting Access to Pages You might have noticed that even though the login page has been generated, you can freely access all the pages. But the admin pages should be restricted right ?? Well you have to manually set a property of the Pages in CCS you want only only authorized users to access. Select the members_list page in the Project Explorer and then from the Properties window set the Restricted property to Yes. Similarly set the other 4 pages admin, vote_detai_list, vote_items_list and user_votes_list Restricted property to Yes. Once done, save and publish your files. Now when you test your applications you will have to first enter your credentials ( admin/admin - remember we created this earlier) only then you will be able to access the pages. CodeCharge Studio relies on Session based security, so once authenticated the user remains logged into the system for 20 minutes after which the session timeout occurs (default ASP.NET setting). You can although increase this timeout lime in the web.config file. <img border="0" src="../../img/simplepoll12.gif" width="151" height="140"> Figure 12: Restricted Property Conclusion In this part of the article we learnt how to create a quick admin section using CodeCharge Studio for our Poll application. You might have also noticed that we have accomplished all this in very little time and with virtually Zero lines of code. Also since all the code is auto-generated by CodeCharge Studio you don't have to sit and debug the application, it just works!! Hopefully my rants in the previous article do seem true to you, we'll have lot to see further going. As an exercise go through the pages in CodeCharge Studio and rename all the column headers appropriately and arrange record forms appropriately, remember in most cases all you need to do is select the item in Design Editor and change its properties from the Properties explorer.

Creating a Poll Application - Creating the Admin Pages - Part 1

Comments