Prototype v3 - accu-org/website-v3 GitHub Wiki

Grow a website prototype

We're fortunate, that Tim Pushman already had a Drupal 7 installation handy as the result of Hubert Matthews prototyping work done in 2011. It's now accessible under http://prototype.accu.org/.

This offers a great way to gain several insights into crafting a new website:

  • What do -possibly new- visitors face when they visit the website: the look and feel?
  • How is the information organised?
  • How can we configure Drupal to do want we want: the techniques?
  • more?

Being a prototype, we don't have to feel held back because "things must be right". We're here to gain insights.

There are many possible paths through the many subjects to work on, this just happens to be the one chosen.

Note: Administrative changes to the site configuration such as folder permissions are collected at the bottom.

Contents

Learn Drupal

Besides reading the Drupal online documentation, watching screencasts is a nice way to learn Drupal. BuildAModule Videos Library has many screencasts, some of which are free. Former Drupal instructor Johan Falk created the course Four weeks of Drupal. This page contains links to many more screencasts, such as Taming the Beast: Learn Views with NodeOne, a series of 27 free screencasts. To get some guidance on what modules to extend the core Drupal installation with, see Top Drupal 7 Modules: Summer 2012 Edition.

Change Theme

24 March 2013

I like to start by changing the theme to something that:

  • makes it easier to imagine we're visiting a real website,
  • lets us experience a responsive design.

Note that this does't have to be indicative for the website's eventual theme. That said, I think this (kind of) theme is well suited to present ACCU to new visitors.

The theme is Premium Responsive.

Home » Administration » Appearance: Install new theme

Install from a URL: http://ftp.drupal.org/files/projects/responsive-7.x-1.6.tar.gz

However this is not how we'll go about. Instead we'll use SSH access and drush to install modules on the site. To use drush, cd to the root folder of the website, where the file index.php resides.

Install Premium Responsive theme:

$ drush pm-download responsive
Project responsive (7.x-1.6) downloaded to                                               [success]
./sites/all/themes/responsive.

And make it the default:

$ drush pm-enable --yes responsive
The following extensions will be enabled: responsive
Do you really want to continue? (y/n): y
responsive was enabled successfully.                                                     [ok]

$ drush vset theme_default responsive
theme_default was set to "responsive".                                                   [success]

$ drush pm-disable --yes bartik
The following extensions will be disabled: bartik
Do you really want to continue? (y/n): y
bartik was disabled successfully.                                                        [ok]

Via the Appearance, Settings screen of the default theme, uncheck site slogan, uncheck Use the default logo and upload a rough version of the slightly changed ACCU logo. Enter https://twitter.com/accu2013 for Twitter social icon and ACCU info for LinkedIn, clear the other fields for social icons.

On Site structure

26 March 2013

The information on the site revolves around the conferences, the C Vu and Overload journals, book reviews, ACCU's community aspect (mailing lists, local groups and study groups) and the ACCU membership.

This subject appears in greater detail under site structure.

Via the Structure, Menus, main menu screen, add menu items Conferences, Journals, Book Reviews, Community, Membership and About. Initially let all refer to <frontpage>.

Via the Structure, Menus, main menu screen, add submenu items as found in site structure. Check Show as expanded on each main menu item that has children.

Via the Appearance, Settings screen of the theme, set Slide Descriptions to:

  1. Conferences
  2. Journals
  3. Mailing lists · Local groups · Study groups

Install Views and Ctools modules

8 April 2013

After a small spike on a book review content type and several vocabularies, it has become clear that the Views module is a natural candidate to for example create a page with a series of book reviews, similar to a Joomla Category Blog.

Download Views module:

$ drush pm-download views
Project views (7.x-3.6) downloaded to ./sites/all/modules/views.               [success]
Project views contains 2 modules: views_ui, views.

Download CTools module (dependency):

$ drush pm-download ctools
Project ctools (7.x-1.3) downloaded to ./sites/all/modules/ctools.             [success]
Project ctools contains 9 modules: ctools_custom_content, ctools_access_ruleset, ctools_plugin_example, views_content, page_manager, ctools_ajax_sample, bulk_export, stylizer, ctools.

On the Modules, Views section, select both Views and Views UI and press Save Configuration. Press Continue for the resulting message You must enable the Chaos tools module to install Views UI. Would you like to continue with the above?

The Views module suggests to install the Advanced help module.

$ drush pm-download advanced_help
Project advanced_help (7.x-1.0) downloaded to ./sites/all/modules/advanced_help.  [success]
Project advanced_help contains 2 modules: help_example, advanced_help.

On the Modules, Other section, select Advanced help and press Save Configuration.

Install Devel and Admin menu modules

9 April 2013

In the screencasts Taming the Beast: Learn Views with NodeOne, instructor Johan Falk uses the Admin menu, and Devel modules. Here we install those too.

$ drush pm-download devel
Project devel (7.x-1.3) downloaded to ./sites/all/modules/devel.             [success]
Project devel contains 3 modules: devel_generate, devel, devel_node_access.
$ drush pm-download admin_menu
Project admin_menu (7.x-3.0-rc4) downloaded to ./sites/all/modules/admin_menu. [success]
Project admin_menu contains 3 modules: admin_menu_toolbar, admin_devel, admin_menu.

On the Modules, Core section deselect Toolbar, On the Modules, Administration section enable Administration menu.

Then, via the new Admin menu, generate 5 new users and 50 new articles. To do so, select Configuration > Development > Generate users and Generate content.

Redirect HTML journal articles

26 April 2013

It will probably not be easy to properly load all HTML journal articles into the new website. To start using the new website without doing so, we can redirect access to HTML journal articles to the old website and thus keep existing external links to them working. For this, redirect links of the form journals/123 to the old website in the .htaccess file, e.g.:

RewriteRule ^index.php/journals/(.*)  http://accu.org/index.php/journals/$1  [R,L]

For example http://prototype.accu.org/index.php/journals/442 links to the article An introduction to C++ Traits. June 2001 by Thaddaeus Frogley on http://accu.org/.

Note that here the redirection is from prototype to current site (to be changed to e.g. old.accu.org).

For old articles that have been added to the new site a redirect such as the following must be added before the above wildcard redirect in the .htaccess file:

RewriteRule ^index.php/journals/123   /node/30   [L,R=301]

Thus the link http://prototype.accu.org/index.php/journals/123 (currently) accesses the article Cui Inhibeo Patria Typicus on the new wesite.

Enable search for everyone

11 May 2013

On the People, permissions section, enable Use search for anonymous user a for authenticated user.

Create about pages

12 May 2013

  • About
  • Contact Us

Create journal content types

12 May 2013

  • About journals page
  • CVu journal content type
  • Overload journal content type
  • CVu journal view
  • Overload journal view

Create book review content types

12 May 2013

  • Review a book page
  • Book Review content type
  • Books Review view
  • Books for Review view
  • Books in Review view

Create membership content type

12 May 2013

  • Membership content type
  • Membership (placeholder) pages
  • Membership view

Create local groups menu

12 May 2013

  • Local Groups page
  • Local Groups menu

Create sidebar menus

13 May 2013

  • Journals menu (Home, Journals Home, C Vu Journal, Overload Journal)
  • Book Reviews menu (Home, Book Reviews, Review a Book, Books for Review, Books in Review)
  • Community menu (Home, Community Home, ...)
  • Membership menu (Home, ...)
  • Local Groups menu
  • Study Groups menu
  • About menu

Install Redirect 403 to User Login module

13 May 2013

In preparation to control access to member-only content, install the Redirect 403 to User Login module.

Download r4032login module:

$ drush pm-download r4032login
Project r4032login (7.x-1.5) downloaded to ./sites/all/modules/r4032login.         [success]

On the Modules, Other section, select Advanced help and press Save Configuration.

Via Configure next to the module you can configure the 'access denied' message in the Error Pages section. The default message is: 'Access denied. You must login to view this page.'). Change it to: 'The requested page is for members only. Please login.'.

Hide User Login menu

14 May 2013

To reduce clutter, remove the User Login menu with log in fields (blocks). Log in is available from Membership menu and will be presented when required.

Install CKEditor

15 May 2013

Note: CKEditor is not free software.

For easy editing we install CKEditor. Download the full CKEditor package as .tar.gz and save it in a temporary location.

$ drush pm-download ckeditor
Project ckeditor (7.x-1.13) downloaded to ./sites/all/modules/ckeditor.          [success]

Via Modules, section User interface, select CKEditor and press Save Configuration. Then on Modules, section User interface, CKEditor, press Help and open the Readme for further instructions where to locate the CKEditor files from the full download above.

Place ckeditor_4.1.1_full.tar.gz in ./sites/all/modules/ckeditor and extract its contents.

$ cd ./sites/all/modules/ckeditor
$ tar xzvf ckeditor_4.1.1_full.tar.gz

See People, Permissions tab, CKEditor section for permissions to Administer CKEditor access and Customize CKEditor appearance.

Disable the line break converter for Filtered HTML and Full HTML via the Configuration, Content authoring, Text formats" section (recommended).

Now CKEditor is ready to use.

Install CKFinder

21 May 2013

Note: CKFinder is not free software.

See ./sites/all/modules/ckeditor/README.txt, section Installing CKFinder for installation instructions.

Download the CKFinder package as .tar.gz and save it in a temporary location. Place ckfinder_php_2.3.1.tar.gz in ./sites/all/modules/ckeditor and extract its contents.

$ cd ./sites/all/modules/ckeditor
$ tar xzvf ckfinder_php_2.3.1.tar.gz

Via People, Permissions, grant roles CKFinder accessand press Save Permissions.

In ckfinder/config.php) remove the CheckAuthentication() function and add require_once '../../../../includes/filemanager.config.php'; straight below the line with $baseDir = resolveUrl($baseUrl);.

In the Drupal settings file (sites/default/settings.php) uncomment the $base_url variable and set the base URL of your website (without the trailing slash) and uncomment the $cookie_domain variable and set the domain name of your website.

Via Configuration, Content authoring, CKEditor, change the Advanced and Full profiles to use CKFinder: File browser settings, enable CKFinder from the File browser type (Link dialog window) dropdown box.

I also experience the problem CKfinder doesn't see other folders and haven't found a solution yet.

Install elFinder

21 May 2013

The CKEDitor and its companion CKFinder are not free software. Alternatives to CKFinder are for example IMCE and elFinder file manager.

Let's (also) try elFinder.

$ drush pm-download elfinder
Project elfinder (7.x-0.8) downloaded to                             [success]
./sites/all/modules/elfinder.
Project elfinder contains 3 modules: elfinder_ffsel, elfinder_bueditor, elfinder.

See ./sites/all/modules/elfinder/README.txt.

Download elfinder-1.2.tar.gz from http://sourceforge.net/projects/elfinder/files/

$ md ./sites/all/libraries
$ # copy elfinder-1.2.tar.gz to ./sites/all/libraries
$ cd ./sites/all/libraries
$ tar xzvf elfinder-1.2.tar.gz
$ mv elfinder-1.2 elfinder

Via Modules, section User interface, select elFinder and press Save Configuration. Then on Modules, section User interface, CKEditor, press Help and open the Readme for further instructions where to locate the CKEditor files from the full download above.

Via Modules, section User interface, elFinder, click Permissions to add 'use file manager' permission to users who will be able to use elFinder.

Via Configuration, Content authoring, CKEditor, change the Advanced and Full profiles to use elFinder: File browser settings, enable elFinder from the File browser type (Link dialog window) dropdown box.

Note File Upload is via Content, Files.

Change Text Format order

18 May 2013

Via Configuration, Content Authoring, section Text formats, change text order format to Full HTML, Filtered HTML, Plain Text. (http://prototype.accu.org/admin/config/content/formats)

Create and Embed Google Calendar

21 May 2013

Signup for a Google account to connect to the webeditor email address and embed on the Calendar page.

Add calendars for local groups via Add by URL in the Other Calendars dropdown. Via Calendar Settings in the ACCU calendar dropdown, set the calendar name to ACCU and click the Customise the colour, size and other options link to create the code to paste into our website:

  • uncheck Title
  • select Agenda as Default View
  • make Width 100% (ignore pixels unit)
  • check all Calendars to Display

Copy the generated iframe HTML code into the Calendar webpage.

Search Engine Optimisation (SEO)

[NTS-To be continued]

On Security

[NTS-To be continued]

One of the items on Mick Brooks' note "ACCU Website. Notes on functionality for the accu-website" mentions that all usernames, passwords and subscription information (name + addresses etc.) are sent over HTTP in the clear. To protect personal information it is advisable to secure access to the website. An SSL certificate for transparent secure http access is circa £20-50 per year. Using a self-signed certificate instead may confuse a visitor when the browser shows a dialog with a message such as "This certificate is not trusted...".

Securing your site is a section of the Drupal documentation.

On Backup and restore

[NTS-To be continued]

Administrative changes

  • 24 March 2013 - Make folder sites/default/files writable; make file sites/default/settings.php non-writable.
  • 25 March 2013 - Got SSH access to the server, to use drush for configuring.
⚠️ **GitHub.com Fallback** ⚠️