Align label and input vertically

On an html form we usually have the following layout:

[Label][Input_TextBox]

or

[Input_CheckBox][Label]

By default a label can be a bit higher than the text box. The solution is to apply this CSS to both the elements:

.inputOrLabel {

display:inline-block;

vertical-align:middle;

}

Vertical alignment of blocks is difficult in other cases. See this article for more details.

Contact database with web interface – EVPO Members

I am opening the source of a small project that I made for a charity organisation http://evpomembers.codeplex.com.

This is a web based contact database. The database stores information on individual members with their contact details, general information and how they are connected to each other. The list of features includes:

• Editable look-ups for most fields
• Multiple contacts per one address
• Convenient search for contact names and addresses
• Log-in support to prevent unauthorized access
• Customisable export to Excel compatible XML

Minimal Software requirements:

• Microsoft SQL 2005
• .NET Framework 3.5

Dependencies:

• AJAXControlToolkit

License:

EVPO Members Copyright © 2012 Evgeny Pokhilko
evpomail@gmail.com http://www.evpo.net

EVPO Members is free software: you can redistribute it and/or modify

it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
(at your option) any later version.

EVPO Members is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with EVPO Members. If not, see http://www.gnu.org/licenses.

Installation:

1. Download the source from the SVN repository.
2. Create ContactData database in SQL and restore empty.bak
3. Run apsnet_regsql from Visual Studio command line and install aspnetdb. Leave default settings mostly in the wizard.
4. Create a SQL log-in (ContactDataUser for example with password 1).
5. Grant access to the log-in to the ContactData and aspnetdb databases.
6. Download AjaxControlToolkit (http://ajaxcontroltoolkit.codeplex.com/,go to All Downloads and download the package for .NET 3.5 !!!) for .NET 3.5 and unzip it to the AjaxControlToolkit directory.
7. Open the solution and rebuild it.
8. Open UI\web.config
9. Update the two connection strings making them valid for the ContactData and aspnetdb databases respectively.
10. In Visual Studio go to Project/ASP.NET Configuration
11. On the opened web page go to Security/Create User
12. Specify any user name and password so you can log in to the web app
13. Ctrl+F5 in Visual Studio
14. You should see the home page of the web app in your browser

Screenshots:

1. Address

 

2. Contact Form

 

3. Export

 

4. Relationships

 

5. Summary

 

6. Lookups

 

EVPO DC project structure

The picture above is the solution in VS. The application contains three layers: Data Layer, Business Layer and UI.

Evpo.DocCirc.MySqlDL, Evpo.DocCirc.MySqlDL.Update

Data layer. All database access operations are in the MySqlDl project. The Update project contains the changes of the database schema have made from the first version. The MySqlDl project is only accessed by Evpo.DocCirc.Biz. According to the principles UI cannot access the data layer directly. The following picture shows the project files:

The Resources folder contains the scripts run during the installation. CreateDatabase creates a new database and all the schema objects. In addition it populates some tables. CreateUsers creates users needed for working with the database. It is run once at setup time as well.

The purpose of the files with Access suffix is to access the database and change its state or obtain business objects from it. In this application business objects are simple and their purpose is only to store data. They don’t do anything. Access suffixed classes work with them. They load and save them from the database. Besides, access objects run queries and change the database state. For example DocCardAccess loads and saves DocCardItem from the database. DocCardItem is the business object representing Document Card.

Evpo.DocCirc.Common

This is the project that all other projects reference. Mostly it contains data storage classes like buisiness objects, global settings and so on. Most classes do not do anything, just store data. The project have common classes that all the layers operate with. For example, DocCardItem class mentioned above is loaded from the database in the data layer and can be processed in the business layer. Then DocCardItem objects are displayed in the UI.

Evpo.DocCirc.Biz

The business layer. It contains all the business logic. It also serves as an intermediate layer between the Data Layer and UI because, as I said above, UI cannot access Data Layer directly. Classes with suffix Data are wrappers providing access to the data layer. An important class in this project is DocCardMovementController. It provides workflow control such as moves the document card to the next stage.

Evpo.DocCirc.UI

The classes in this project comprise the UI layer. Originaly the code in the classes was extracted from asp.net web pages for unit testing, but now I think it is a good idea to move as much as possible from the web pages because they must be as thin as possible and they are not covered by the unit tests.

Evpo.DocCirc.Messaging

As you see in the picture, it’s purpose is to compose and send notification messages such as Action Is Required or event notifications to the users. There are two ways of notification Email messages and instant messages. EmailMessanger and InstantMessanger are for those purposes accordingly. Note that InstantMessager doesn’t send notifications by itself. Instead, it accesses a web service specified in the configuration that sends the actual notification to the users. The web service is not included in this solution.

EDCWeb

It contains the web pages. The project references Common, Biz, UI and resources. “G” folder contains pictures that are used in the UI. The “Settings” folder stores configuration files e. g. evpodc.config.  The most important file in the project is AppCode\Global.asax.cs. Inside this file the action starts. It is worth starting from for developers who study the application.

Note that the web pages don’t contain language specific data. The words and sentences are stored in the satelite resource assemblies Evpo.DocCirc.Resources and Evpo.DocCirc.Resources.ru-RU. Their description follows.

Evpo.DocCirc.Resources, Evpo.DocCirc.Resources.RU-ru

Each web page file has a resource file in this project. There are two assemblies at the moment: english and russian. They are used depending on the culture of the project set in web.config. Other languages can be added.

Other projects

EvpoDCUTest – all the unit tests and mock objects live here

EvpoDocCircSetup – the project creating the setup package

EVPODC Getting Started Part 2 (Configuration)

When you first enter the application, you see the Queries menu (Figure 1). However it’s too early for making queries because we don’t have data yet.

Figure 1

For the working system we need to create users, folders and routes. Then we’ll be able to create documents.

To create users we click Administration, then Users. We see that there are three existing users. They are builtin users. Don’t delete them. Unfortunately, the system allows you to delete anyone. Although the application behavior is unpredictable if you do so.

Say this is a development company and we have a team containing 2 developers, a requirement writer, a tester and a team leader. Please, note that the only field required is Login. You also need to fill in the email address if you want to use notifications. I am going to use them for this sample. So I created 5 new users as you can see in the DropDown list. (figure 2)

Figure 2

Now we need to add the users to different security roles to restrict access because we don’t want all to see everything. We go to Administration / Roles. There are two builtin roles: Administrators and Users. All the new created users are included in the group Users by default. We can leave them as they are and add new roles. I want to create the following roles:

• Requirement Department: Bill Johnson (requirement writer)
• Quality Assurance: John Mayer (tester)
• Developers: Kevin Black (developer), Stephen Smith (developer)
• Managers: Dexter Brown (team leader)

See figure 3

Figure 3

You might be asking: where are the permissions? The answer is that it’s too early for permissions. You confugure them for each folder and document type and we haven’t created neither. That’s what we are going to do now.

Go to Administration / Document Folders

This interface is easy to understand. When you input Folder Name and click Create New Folder, a subfolder is added in the folder that is selected on the left. For our scenario I create a complex folder structure (see figure 4) for the purposes of our sample.

Figure 4

That’s how it looks like in the app (figure 5)

Figure 5

Now you see where permissions are. These are default permissions for Development Team folder. I assume I need to give you a clue about security settings in the app because it’s flexible but not clear at first sight. The security system is similar to the NTFS folder security and other known applications. Each security object, a folder in this case, has security settings for many security roles. In figure 5 we have settings for Administrators and Users because they are builtin roles. Each security role defined in the folder has a set of settings you can see under Users. I clicked href Users. That’s why we are viewing the settings for this role. As you can see Users have all permissions in new folders by default. Note that if a role is not in the role list, it doesn’t have access to the folders at all. So our new roles don’t have any permissions in the folder we look at but don’t forget that our users are members of the Users role. That’s why they can do eveyithing at the moment.

Let’s start from configuring the root folder Documents. For that you need to click the link at the very bottom of the page Root folder permissions…

In the root folder our team is going to store annual leave requests and equipment requests. These document types are useful for everybody. Therefore the rule is that everybody can create a document in this folder. People can also read documents of their collegues in the folder because we need them to plan vacations together. We don’t want to give access to equipment requests, but we’ll talk about that later because I am going to configure that in the document type permissions specifically for equipment requests. So the settings for the role Users in the Documents folder will be as in the figure 6.

Figure 6

According to the settings:

members of Users can:

• create new documents (Create checkbox)
• read other users’ documents (Read checkbox) including their own (Read own checkbox)
• update their own documents (Update own)
• see the folder on the list of folders (Browse). However, it is not applicable to the root folder because it’s never on the list of folders. You are always within in.

cannot:

• udate others’ document (Update)
• delete documents (Delete) including their own (Delete own).

The reason why we don’t allow the users to delete their own documents is because we want to guaranty that no annual leave request was deleted by a malicious employee.

It’s time to configure a role that is responsible for these documents and has more permissions. They are Managers. We add the role to the list and set the settings (see figure 7).

Figure 7

These settings say that Managers can do everything in the folder. In fact they update when they accept request or reject it. They might delete document if it’s no longer needed. You got the idea of the folder security configuration.

Next thing we have to do is to create the document types equipment requests and annual leave requests. We need to go to Folders/DocumentTypes and click Create document type. The first tab of the document type form for equipment requests you can see in Figure 8.

Figure 8

Note Prefix and Next number fields. Each document has a unique number. When you create the first document of this type, its number is going to be EQ00001. After that the next document of this type is going to be EQ00002 etc.

Next we fill in the route tab.

… the docs end here, I got bored of writing these and haven’t touched these since then. Let me know if you are interested in the continuation.

EVPO Document Circulation – getting started part 1 (installation)

EVPO Document Circulation (http://evpodc.codeplex.com) Installation

The installation is easy because the application comes with a lightweight web server. All you need is run the installer and find the “EVPO Document Circulation” shortcut in your Start/All Programs. You also need a running instance of MySql server. You can install it after this installer.

Prerequisites:

• MySql Server needs to be available in your network and you need its machine name and the port number (if not default).
• Windows machine with .NET Framework 2.0.

When you run the shortcut, the configuration wizard will start. When the configuration is finished, the same short cut will be opening the application normally (picture 1).

Picture 1

The system needs administrative access to the MySql database server to create its database and two accounts. The wizard doesn’t create or modify anything at this step yet. However, it checks the access to the database server.

In step 2 you will be asked the name of the database. If you install the application for the second time and already have the database, only enter its name and untick “Create new database”. If you don’t, your existing database will be lost as it says on the page.

Picture 2

In step 3 of the wizard two accounts will be created in MySql server. EVPO DC will use them to access the database. You don’t need to remember the passwords. They will be written to the application configuration files later (Warning: they will be in the config file in plain text).

Step 4 (see picture 3): The web application needs permissions to write in that directory. The ASP.NET account set by default cannot modify files in directories. This is not the case when you use the installer. The server is run in Utildev cassini web server. It uses the NT AUTHORITY\SYSTEM account that have all the necessary permissions. Click next. The directory will be created.

Picture 3.

In Step 5 the wizard needs to know SMTP server details to send email notifications to users. They will be also saved in the settings file (Warning: in plain text) (see Figure 2)

Picture 4.

Most accounts require SSL. Google Main is one of them.

In step 6 (Picture 5) the wizard will save everything you have entered to the specified configuration file (evpodc.config) (Warning: all entered information and passwords will be in the file in plain text).

Then the application will open. The default password for DocCircAdmin is 1