IS tour

So you know where we’re going, let’s take a look at the final IS. We’ll look at it from two perspectives:

  • What it looks like to regular members and the public.
  • What it looks like to managers.

Gamerz is run by three people: the president, secretary, and treasurer. The IS is key to helping them do their job. If there’s a new project, they put it on the IS. If there’s an event coming up, they put it on the IS. The IS is how members know what’s happening.

What regular members see

Check out the IS at If you have enough screen space, put it side-by-side with this window.

The data is the fake Latin stuff again.

From the devel module, again?
Yes. Having devel make fake content is a good way to save time.


Some people will look at the IS on a phone. Want to know what time tonight’s event starts? Makes sense to grab your phone, and check. So the site has to work on laptops, tablets, and phones.

The IS is responsive. That is, it adjusts the page layout depending on the screen size. Here’s the main menu on a laptop:

Menu on a laptop

Here it is on a tablet:

Menu on a tablet

(You can simulate that on a laptop by making the browser window narrower.)

Here’s the menu on a phone:

Menu on a phone

You can’t see all the menu items anymore. There isn’t space. They’re collapsed under the hamburger icon. Try it on your phone.

The page footer is responsive, too. Here’s the laptop and tablet version:

Footer on larger screens

Here it is on a small screen:

Footer on a small screen


  • The main menu adjusts to screen size.
  • The footer adjusts to screen size.

So does page content. Here’s the members page on a phone:


All the data fits in a narrow space.

The contact form fits on a phone as well:

Contact form



You’ve already seen most of the page hierarchy, in the main menu. Here’s the full thing:

  • Home page: welcome message
  • About us: description of Gamerz
    • Why join?
    • Who can join?
    • Working on projects
    • Org rules
  • Projects: list of projects
  • Events: list of events
  • Members: list of members
  • Contact: contact form

The first six are static pages. The next three are lists. For example:


What managers see

When managers look at the site, they see tools that help them keep the data up to date. Add events, remove members, change projects, whatevs.

You can try it. Go to the login page. ( Log in with the user name manager, and the password password. You won’t be able to change the data, but otherwise, you’ll see what managers see.

Control panel

The first thing you’ll notice is the Org Manager CP, short for “control panel.” On a large screen, the CP is to the left of the main content region:

CP on the left

On a smaller screen, the CP is above the main content region:

CP above

The management part of the site is designed to be used with a larger screen. While you can use a phone to update data, a larger device will be more comfortable.


The first item on the CP is Org people. It shows a report like this:

Org people

Compare it with the member list that everyone can see:



  • The People report shows more data about each person than Members.
  • The People report shows people who are not members, like the org’s faculty advisor. Members shows just members.
  • The People report has a link to edit the data.

Most of the columns should be obvious, except for:

  • Affiliation: the person’s role in the org: officer (president, secretary, treasurer), member, event speaker, advisor, and other. A person can have more than one affiliation. Someone could be the president, a member, and a speaker.
  • Dues paid is Yes or No.
  • Published means that the person will be shown on the site. Records that are not published are still in the database, but only managers can see them. So if people don’t pay their dues, a manager can mark the records as unpublished, and they won’t be listed on the site. When they pay up, a manager can publish the records, and they’ll show up again.

Now, look at the report, and click on the Edit links on the right. You’ll see an edit form:

Person form

The form is easy to use. Change Paid, with the dropdown. Check boxes to change affiliations. Neat, huh?

Aargh! Will we have to make a form like that? It looks hard!
It is hard, but don’t worry. You tell Drupal what data you want to store, and it will make the form for you. You don’t have to do it yourself.
How does this compare to making forms in Microsoft Access?
Drupal is easier. You don’t have to deal with visual formatting. Just let Drupal handle it.
Easy is good!

You got that right!
h2. Dues

Here’s the CP again:


The second report is unpaid dues:


Click on Phone, and your device will place a call, if it’s setup right. Same for email. Although, er, it sends an email.

Click on Edit, and you see the same form as before. It has this at the bottom:

Publish flag

Managers can unpublish person records.

The CP item Add person shows the same form, but it’s empty. Managers can fill it in, and save, to add a new person record.

Manage projects

Here’s the manage projects report:

Manage projects

It’s the same as the public events list. It even has the same URL. The only difference is that this one has an Edit link.

The project edit form is like this:

Project edit

Once again, Drupal makes the edit form for us.

The “Add project” link on the CP shows the project edit form, without any data.


Here’s the CP again:


The events report is like this:

Events report

Same as the public events list, but this one has Edit links.

The event form has some cool widgets on it, like this one for the date of the event:

Event form

Managers can type dates if they want, or they can select from the calendar widget.

“Add event” shows the same form, but empty, ready for new event data.

There’s one more link on the CP:


You can guess what the Logout link does.


We went through the IS that Gamerz uses to run the org. It has two modes. Members and the public can see data, but can’t change it. Managers can log in, and change data. They have a control panel (CP) they can use.