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 https://gamerz.cybercour.se/. If you have enough screen space, put it side-by-side with this window.

The data is the fake Latin stuff again.

Responsive

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:

Here it is on a tablet:

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

Here’s the 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. https://gamerz.cybercour.se/

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

Here it is on a small screen:

So:

• 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:

Nice!

Pages

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. (https://gamerz.cybercour.se/user/login) 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:

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

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.

People

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

Compare it with the member list that everyone can see:

Differences:

• 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:

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

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:

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:

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:

Once again, Drupal makes the edit form for us.

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

Events

Here’s the CP again:

The events report is like this:

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:

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.

Summary

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.