responsive website, dynamic CMS
Tristan Griffin 2015
Church websites act as a first point of contact for many people, so need to be welcoming and
informative. It’s scary visiting a church for the first time. You don’t know what to expect. The
website needs to explain the type of church, what they believe, when and where the services are
held, who is on staff, and how the children’s ministry works and enable Listening and watching of
sermons. And for those who attend regularly, what events are on and how to connect with others.
Most of all they want to feel welcomed and invited to visit. And for the purpose of the internal
teams the website needs to be able to be update content easily with minimal risk of damaging the
website.
Studio Interactive Project : “
students are provided with a
design brief for an interactive website/app, which they must then
follow the brief, use all of the skills they learned in and outside
of class to build the work. “ My intention is to create the
website for this assessment. And I intend on collaborating with
photography student Megan Boyl to assist in the creation of the
website image assets, and liasing with Emmett Goddard(music director
c3) and senior pastors of c3 kingscliff, Steve and Kristy Godfrey.
After initial contact with the senior
pastors of C3 Kingscliff to assess their needs, sitting down with
them and creating a design brief.(found here) The intention was to
create a responsive website that is structured (themed and core
content set) but can have restricted content added and modified by
someone with essentially no technical skills (If they are capable of
using social media (facebook) then they will be able to update the
website.) Content for example:sermons, new events coming up ( posted
as a single image which is animated on a css3 slideshow on the main
page and is intergrated to all of the churches social media
automatically).
The aim of the website is to proved
members/visitors with an inviting point of contact via the
internet/social media and provide staff with an easy to use tool to
assist in their areas of ministry.
Once the public layout of the website had been constructed the website was made available to C3
administration and a and follow up meeting was made with C3 senior pastor Steve Godfrey. During
this meeting the layout was discussed and minor changes were made, and a mudmap of how the
content editor would function was presented and approved. I was also given the C3 movement style
guide documents which included color guides and logo styling and placement
Brief description of how the project was executed
In keeping with the design brief and needs of the c3 church, ive created a website which addressess
all areas of the default c3 corporate church outline. These areas being: Home page, conferences,
services, ministries, groups, projects,colunteer, media , music and shop. And extended to include a
volunteer, contact, connect groups and calender page.
The public webpage is responsive ( mobile/tablet device friendly ) with accordian frames to
minimise page scrolling and uses a dynamically generated menu and content system for all pages. It
intergrates the churches social networks which can be found at the top right hand of the menu
system ( desktop mode) and the churches google calender can be found on the calender page.
External links from the website include the media library, ( which uses a content library and player
from libsync.com), the c3 shop and music center . Also as part of this website is the connect groups
page, which contains the details of all c3 Kingscliff connect group leaders ( previously
unavailable ). Additionally the website includes an extensive CMS. This enables the editing of key
content, with a simplistic text and image editor.
Note : the front end of this website is ready to go live, the admin editor needs further testing before
being commecially ready. The estimated time line is july for the front end being live after content
has been gathered and entered. The estimated launch is august for the admin console to be publicly
accessible.
Rationale and research
Importance of church websites
A church website is the front door of a church for many, many people. If you’d put a greeter at the
front door of a physical church, and line up ushers in the sanctuary, and set up a hospitality center in
the lobby, and make sure all the signs are attractive and pointing in the right direction, then you
need to take the same care with your church’s website.
People will form opinions about your church from the first image that pulls up on their screen.
They want to know the type of church, what you believe, who is on staff, and how your children’s
ministry works. They even want to listen and watch sermons so they can check it out before they
come. Most of all they want to feel welcomed and invited to visit. It’s scary visiting a church for
the first time. You don’t know what to expect.
other CMS available for churches
I researched the recommended CMS for churches to make sure that I wont be reinventing the wheel.
LightCMS, wordpress, pagelime, halogy, expression engine, ekklesia 360 and squarespace are the
most popular for small church website development. Ekklesia 360 is currently the only CMS that
was build specifically for churches but cost starts at $500 for use of a template. Most services didnt
not offer true responsive web designs and for a novice were quite complicated to use
A brief history of CMS and where this CMS fits in the timeline
CMSs have been available since the 1990s, and has seen three clear phases of development. 90s -
2000 marked by the DotCom crash, 2000 - 2013, 2013 to present. Early CMS applications written
by web design agencies rather than software companies and every agency had their own platform.
An example of this is 'Roxen' released in 1994 by swedish developers Roxen Internet Software.
The second wave of CMS platforms were developed by specialist software houses such as RedDot,
DotNetNuke and Mambo(now Joomla). Key features which were built in included WYSIWYG text
editing, search engine optimisation, improved HTML and graphical user interfaces that allowed
web development with minimal coding and what is now the standards for content
(image,file,page,database and text) management.
The latest CMS plaforms are either focused at top end and are feature laden OR feature what had
previously had to be done by a programmer server-side with back-end code can now be achieved
entirely with front end client side applications.
The CMS created for this project is the later, everything is done entirely through a client side
application and requires next to no code from the user, with the exception of adding web links to
input fields where required.
Visit http://interactivemediacmsgroupproject.weebly.com/history-of-cms.html for more
information.
How a CMS functions
Most modern websites use some form of content management system (CMS ). Typically, a CMS
consists of two elements: the content management application (CMA) and the content delivery
application (CDA).
The CMA element allows the content manager or author, who may not know Hypertext Markup
Language (HTML), to manage the creation, modification, and removal of content from a Web site
without needing the expertise of a Webmaster.
The CDA element uses and compiles that information to update the Web site via a database,
commonly SQL. The features of a CMS system vary, but most include Web-based publishing,
format management, revision control, and indexing, search, and retrieval. The CMS for this project
uses the same structure of CMA and CDA, with the exception that the CDA does not create a new
HTML/PHP file when saving datablocks, instead it saves the content of the HTML/PHP file and
retains the original files.
Technical
as part of the interactive media group project a detailed/interactive description of how this CMS
applications database functions can be found at http://artworkprocess.blogspot.com.au/p/how-towcms-
web-content-management.html
How the website works
The website consists of two levels of access, public access and administrative access. Meaning that
each publicly accessable page has a corresponding administrative page which enables priveledged
users to edit the content of publicly accessible pages. Typically a CMS would rewrite the entire
webpage every time content is altered. For this project I chose to have the content dynamically
updated using a mqsqlite database and image database. Use of this type of database and technique
means that if an error occurs in the database, only that part of the content is effected, instead of the
entire page. Also this database type enables simple installation, this being the simple copying to the
server, and the website and database works ( NOTE: the destination server needs PDO and mysqlite
installed, which should be on all contemporary/uptodate web hosting services )
Admin console
Once the admin console has been accessed it will check to see if the administrative account session
has been logged in. If not the page will redirect to the adminLogin.php file. If the session exists the
page will proceed with being loaded. The admin console is then loaded and the default page for
editing is loaded into the consoles IFRAME. The admin console allows editing of public page
access and menu content, selection of IFRAME content for editing, account management and the
previewing of the website in mobile and desktop modes.
Admin console
Once the admin console has been accessed it will check to see if the administrative account session
has been logged in. If not the page will redirect to the adminLogin.php file. If the session exists the
page will proceed with being loaded. The admin console is then loaded and the default page for
editing is loaded into the consoles IFRAME. The admin console allows editing of public page
access and menu content, selection of IFRAME content for editing, account management and the
previewing of the website in mobile and desktop modes.
Admin login
This is a PDO login script that accesses the mysqlite database with a simplistic interface , once the
password has been accepted a server 'session' is created and the user is then redirected to the admin
console
Admin pages
The admin pages act in the same way as public pages on initial loading, they access the database,
load the content into a buffer variable then override the pages default content. Each of the admin
pages allows the editing of its content through a simple text editor and image uploader. Once the
content is added and the 'save' button is pressed the new content is added to the server. This inturn
updates the public website.
NOTE: currently after editing content, for it to be displayed on the current page, the page needs to
be manually refreshed, also the text editor does not currently show the content that was in the
datafield that is to be edited. This will be updated in the release version of the software.
Public pages
Every time the public pages are loaded they access the database, load the content into a buffer
variable then override the pages default content. The only common content that is overridden on all
the pages is the menu list, this is so the administrator can enable or disable a page entirely. It is
important to not that only webpages that are located in the 'MORE' tab can be disabled, key pages
such as C3 home, about, services and contact page are locked/essential content pages. While the
public pages can access the database, they cannot write data to the database. To access the database
a user “session” needs to be created on the server and the admin interface files must be accessed.
Design and layout of the pages
When considering how to implement the design brief, I had to consider how it would look on
mobile devices as well as desktops ( including tablets and various sized phones as well as Iphone
and Android ). Additionally I had to consider how each of the pages would be edited, keeping in
mind that they had to be minimal and simplistic in design.
The most difficult pages for me to design to edit were the accordian pages as the content is
dynamically added and removed from the frame. I had initially intended on having all the content
viewable for editing simultainiously, which would have been an easier solution. But I instead
decided to allow the content to be added within the frames. So that the person editing could see how
the content looked once edited without needing to view the public site. To achieve this method of
editing a global page selector variable is created when opening the frame and this is used as an
identifier for the text and image database save function.
The image below shows the accordian frame content editing buttons.
The following is a visual comparative table of the public and corresponding administrative pages of
the website in desktop mode. Also find notes in this table about specific features unique to those
pages
Public pages Admin pages
About page
All content ,titles , descriptive content and images can be editing including the contents of each of
the accordian frames
Calender
This page places google calender into an iframe, or essentially any other calender system the user
wishes, for this example I am using my own google calender. The content of the iframe can be
altered by clicking the edit button to the top left in the admin console.
Conferences
All content ,titles, discriptive content and images can be editing including the contents of each of
the accordian frames
Connect groups
The admin panel displays all available frames to be edited, currently the rows are limited to 20,
which equates to 20 different groups. More rows can be added dynamically due to the nature of the
PDO database. The public page only displays the rows that are filled with content.
Contact
The content on this page can be edited, the email address for the 'contact' form is currently set to
'tristan.griffin@hotmail.com'. This can be changed in the editor (currently disabled).
Home/index page
The slide show has been limited to 6 image as requested by C3 senior pastors, each of the images
can be replaced in the editor, once replaced the new image is shared on social networks
automatically as described previously ( share feature disabled for marking purposes )
Media
This page contains a live feed from Libsync.com as well as external links to the download links to
past sermons, iphone app, andriod app and the podcast which is updated weekly. In the editor all
of these links can be replaced ( the media player link, which is an iframe is locked in size due to
the player itself not being responsive )
Ministries
All content ,titles, discriptive content and images can be editing including the contents of each of
the accordian frames
Services
All content ,titles, discriptive content and images can be editing including the contents of each of
the accordian frames
Training / c3 college EXTERNAL LINK
Music EXTERNAL LINK
Shop EXTERNAL LINK
Social networking
Social networking has been intergrated into two sections of the website, one being in the social
networking bar which is readily visible. The second being when a new image is uploaded into the
front page of the website (NOTE: this feature has been disabled for marking purposes).
The social networking bar is a simple page redirect
For the second application when the image is uploaded a call is made as follows.
function socialShare(imagePath)
{
window.location.(“http://www.facebook.com/sharer.php?u=http://c3kingscliff.org.au/images/” +
imagePath );
javascript:void((function()%7Bvar
%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset'
,'UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?
r='+Math.random()*99999999);document.body.appendChild(e)%7D)());
}
This is called from the image upload function and then shares the new uploaded image with social
media platforms (note the user will need to be logged in to each network and will be prompted to
login with each service ). In this example it shares with facebook and pintrest.
Problems faced and updates needed before final release
Admin console
A huge problem that I faced initially was the intergration of a WYSISYG text editor into the
interface. The accordian menu which is updated using jquery does not allow for raw HTML to be
added into the frames. Ie any syntax with a ' & or “ would cause a crash, which was problematic as
generally white space is written as or %20. So heavy modification of the output from the
text editors and word filtering/conversion had to be made. This means that bullet points, font
changes, justification, divs etc cannot be added into the text field through HTML code. The syntax
is limited to <p> , <h1 – 6> , <b> , <br> , <strong> . Which is written under the displayed text
area. Also the original WYSIWYG editor through up a major error as seen in the image below
This text editor had worked offline and I had intergrated it into every page, but failed online. I had
to replace the editor with a java html text area editor. Which works effectively.
Currently after editing content the page needs to be manually refreshed, also the text editor does
not currently show the content that was in the data field that is to be edited. The problem is begin
caused due to the method used to save to the database , for secure writing to the server the GET
function has to be called to the server, which results in a page call function being used, while this
works, it does not allow for automatic updating of the page content. To fix this problem a page
refresh will need to be done (in code) from the server side after the data has been updated OR a
jquery/ajax update needs to be made after writing to the database, the same goes for when an image
has been updated. This change will need to be made to all admin pages.
Creation of the database application
In the early stages of creating the CMS I was getting a PDOException error of "could not find
driver". I was using godaddy.com as the host. I was able to create the mysqli database and write to
the database But unable to UPDATE ($sql = "UPDATE data SET page_text=text WHERE
page_id=1";) or DELETE ( "DELETE FROM data WHERE page_id='1'"; ).
On recommendation from Skye I sent an email forr advice, to ash guy (QCA staff member) for
advice regarding the error but thankfully I was able to resolve the database issue before receiving a
response ( which I never received, the email probably got shoved into junk due to the file
attachment and html link ). I since have found out that web hosting services do not allow images to
be stored in databases, it is not considered a breach of contact as they believe that it causes server
delays. My solution was to save the file path into the server and store the images regularly on the
server.
