CRAVE Website Users Guidex - Brenton Hartman

crateleftInternet and Web Development

Dec 4, 2013 (3 years and 8 months ago)

57 views

CRAVE Website

User’s Guide



December 4, 2013



Document: CRAVE
-
U
G










______________________







Latoya Mayes







CRAVE









____________________________________







Dr. Chlotia Garrison, Assistant Professor







CSCI 680


Winthrop University









_________________________________







Bryan Kuhn, Project Leader







CRAVE Web Development Project



_________________________________







Brenton Hartman, Project Analyst







CRAVE Web Development Project







1


Contents

1.

Introduction

................................
................................
................................
.............................

3

1.1.

Purpose

................................
................................
................................
.............................

3

2.

Using Joomla!

................................
................................
................................
.........................

3

2.1.

Worki
ng with the Joomla! Front End

................................
................................
...............

3

2.1.1.

What is the Front End?

................................
................................
.............................

3

2.1.2.

Logging In

................................
................................
................................
.................

4

2.1.3.

Using the Front End

................................
................................
................................
..

4

2.1.4.

Logging Out

................................
................................
................................
..............

5

2.2.

Worki
ng with the Joomla! Back End

................................
................................
...............

5

2.2.1.

What is the Back End?

................................
................................
..............................

5

2.2.2.

Logging In

................................
................................
................................
.................

6

2.2.3.

Using

the Back End

................................
................................
................................
..

8

2.2.4.

Logging Out

................................
................................
................................
............

10

2.3.

Working with the Website CPanel

................................
................................
.................

10

2.3.1.

What is the Website CPanel?

................................
................................
..................

10

2.3.2.

Logging In

................................
................................
................................
...............

10

2.3.3.

Logging Out

................................
................................
................................
............

12

3.

Joomla! Front End
................................
................................
................................
................

13

3.1.

Edit Pages with the Article Editor

................................
................................
..................

13

3.2.

Videos
................................
................................
................................
.............................

16

3.2.1.

Upload Video

................................
................................
................................
..........

16

3.2.2.

Embed Video

................................
................................
................................
..........

18

3.2.3.

Remove Video

................................
................................
................................
........

20

4.

Jooml
a! Back End

................................
................................
................................
.................

21

4.1.

Menu Editor
................................
................................
................................
....................

21

4.1.1.

Add Web Page Using the Menu Editor
................................
................................
...

21

4.1.2.

Delete Web Page Using the Menu Editor

................................
...............................

23

4.2.

Photos

................................
................................
................................
.............................

24

4.2.1.

Add a New Photo Album

................................
................................
........................

24

4.2.2.

Add Photos to Photo Album

................................
................................
...................

25

4.2.3.

Remove Photos from Photo Album

................................
................................
........

29

4.2.4.

Remove Entire Photo Album

................................
................................
..................

30

4.3.

Guestbook
................................
................................
................................
.......................

32

2


4.3.1.

Approve and Publish Guestbook Entries

................................
................................

32

4.3.2.

Edit Guestbook Entries

................................
................................
...........................

33

4.3.3.

Delete Guestbook Entries

................................
................................
.......................

34

4.4.

Events

................................
................................
................................
.............................

34

4.4.1.

Add Event

................................
................................
................................
...............

34

4.4.2.

Add Venue

................................
................................
................................
..............

36

4.4.3.

Edit
Event Information

................................
................................
...........................

37

4.4.4.

Delete Event

................................
................................
................................
............

38

4.5.

Manage User Accounts

................................
................................
................................
..

38

4.5.1.

Add New User Account

................................
................................
..........................

38

4.5.2.

Edit User Account

................................
................................
................................
...

39

4.5.3.

Delete User Account

................................
................................
...............................

40

5.

Website CPanel

................................
................................
................................
.....................

41

5.1.

Linking to a File

................................
................................
................................
.............

41

5.1.1.

Upload File
................................
................................
................................
..............

41

5.1.2.

Link to File

................................
................................
................................
..............

44

5.1.3.

Remove Link to File

................................
................................
...............................

46

5.1.4.

Delete File

................................
................................
................................
...............

47




3


1.

Introduction

1.1.

Purpose

CRAVE is a
charitable organization based out of Rock Hill, South Carolina. The
organization was founded by Latoya Mayes and provides fun and positive experiences for
young children and teenagers. CRAVE events are meant to teach the importance of
character, respect,

positive attitude, values, and education. The CRAVE website project is
intended to provide a way for the public to obtain information about the CRAVE
organization and upcoming CRAVE events. It will also include fun and interesting content
such as photos

and videos. This website will help to promote the CRAVE organization.
Finally, this user’s guide will aid anyone with the task of maintaining this website through
the Joomla! content management system.

Joomla! allows

the

user to update and edit
the
web
site without knowing web programming languages like HTML.


2.

Using Joomla!

2.1.

Working
w
ith the

Joomla!

Front End

2.1.1.

What is the Front End?

1.

Joomla! pages may be edited by logging into the Front End. Once logged in, an
administrator or super administrator will be allowed to change items on the page. For
the purposes of the CRAVE project the Front End will be used to
Edit the
information on t
he Home page, the About CRAVE page, the Curriculum page, and
the Forms page. The Front End interface will also be used to edit the Videos page.




4


2.1.2.

Logging In

1.

To login, c
lick the CRAVE L
OGIN

page on the menu bar at the top

of the CRAVE
site.


E
nter usernam
e and password and click
L
ogin
. You will be taken back to the
Home page of the CRAVE site.


2.1.3.

Using the Front End

1.

Once logged into the Front End, you will be able to edit certain items based on your
administrative privileges.
Additional i
cons will be disp
layed on
pages where editing
is permitted.


2.

The following icon will appear on the Home page, the About CRAVE page, the
Curriculum Page, and the Forms page.


Clicking this icon will allow the user to edit
these pages.


3.

The following icons will appear on
the Videos page. Clicking these icons will allow
the user to edit the Videos page.





5



2.1.4.

Logging Out

1.

To logout, click the CRAVE LOGIN page on the menu bar at the top of the CRAVE
site.

Click

the button in the center of the page which says Logout.

You will

be taken
back to the Home page of the CRAVE site.



2.2.


Working
w
ith the

Joomla!

Back End

2.2.1.

What is the Back End?

1.

Joomla! pages may be edited by logging into the Back End. Once logged in, an
administrator or super administrator will be allowed to change
items in the Joomla!
database. For the purposes of the CRAVE project the Back End will be used to Edit
Menus, the Photos page, the Guestbook page,

the Events page,

and User Accounts.



6


2.2.2.

Logging In

1.

Enter the URL:
www.craveinc.org/administrator

in your browser’s address bar and
you will see the Joomla! Administration Login page.


2.

Enter your username and password and click Login.




7


3.

When logged in you should see the Joomla! Control Panel.




8


2.2.3.

Using the
Back End

1.

The Joomla! Control Panel will be the starting page for the Joomla! Back End.

2.

The Menu along the top will allow you to access all the functions of the Joomla!
content management system.



2.1.

The Site
m
enu will be used to edit
User Accounts.


2.2.

The

Menus manager
will be used to

add a page to the website and edit any menus
on the site.


2.3.

The Content menu will be used to add new articles.


9


2.4.

The
C
omponents menu will be used to access the photo gallery

and events
.


3.

For Content such as articles, photos,

events, etc. to appear on the website, it must first
be published. Published content will appear on the designated pages, unpublished
content will not appear on the site. Published content will be indicated by a green
checkmark, unpublished content by a

red circle with a white X.


4.

To see the effect of the changes you make to the website, click the Preview button in
the top right corner of Joomla! Control Panel
. The CRAVE Home page will open in
a new window.


10


2.2.4.


Logging Out

1.

To logout, click the Logout
button in the top right corner of the Joomla! Control
Panel. You will be taken back to the Login page.


2.3.


Working
w
ith the

Website

CPanel

2.3.1.

What is the
Website
CPanel?

1.

The CPanel is not a part of Joomla!, rather it is run through the hosting service,
www.justhost.com
. It allows users to manage website settings and files. For the
CRAVE site, the CPanel will be used to upload files such as Word documents.

2.3.2.

Logging In

1.

Go to
www.justhost.com

and click the login button on the right.


2.

Enter username and password and click login.


11


3.

You will now see the CPanel.




12


2.3.3.

Logging Out

1.

To logout, click the Logout button in the top right corner of the CPanel. This will
take you to the

CPanel Login screen.





13


3.

Jo
o
mla!


Front End


3.1.


Edit Pages with the Article Editor

1.

To edit the content on the Home page, the About CRAVE page, the Curriculum page,
and the Forms page will require the article editor. After logging into the Front E
nd
,

an edit icon will appear at the top right hand corner of each article
. Click on the icon
to edit.


2.

This will bring up the article editor
.


3.

The options for formatting in the article editor are listed below:



The red arrow points to the articl
e title. Yo
u would change the title here.



T
he blue arrow points to the font controls, the controls from left to right are
:

14


o

bold

o

italics


o

underline


o

strikethrough


o

left align


o

center


o

right align

o

justified

o

styles

o

f
ormat

o

font




The yellow arrow points to the paragraph
controls, from left to right they are
:

o

b
ullets

o

n
umbering

o

decrease indent

o

increase indent

o

undo

o

redo

o

insert anchor

o

insert image

o

format painter

o

cleanup messy code

o

edit html

o

find

o

find

o

replace

o

insert date

o

insert time

o

insert emoticon

o

insert/edit embedded media

o

direction left to right

o

direction right to left

o

add layer

o

move forward

o

move backward

o

toggle absolute positioning

o

change font color



The green arrow points to the table controls and other miscellaneous controls
.
From left to right:

o

insert horizontal ruler

o

r
emove formatting

o

t
oggle guidelines/invisible elements

o

subscript, superscript

o

insert custom character

o

horizontal rule

o

insert new table

15


o

table row properties

o

table cell properties

o

insert row before

o

insert row after

o

delete row

o

insert column before

o

insert
column after

o

remove column

o

split merged table cells

o

merge table cells

o

toggle full screen mode

o

edit css style


16


4.

When finished look in the upper right hand corner of the article and click save to save
all changes and publish the article. Click cancel to le
ave without changing anything.



3.2.


Videos

3.2.1.

Upload Video

1.

Login to the Front End.

C
lick on the videos tab and click upload videos
.



17


2.

Click browse to find a video
.

S
elect the folder containing the video and click open to
upload
. Optional:

I
f you wish to

have a thumbnail with the video, click browse

to
find a file and upload, otherwise a generic thumbnail will be posted.

A thumbnail is a
small image that will show the visitor a scene from the video.

3.

When ready to upload
,

the filenames of the video and t
humbnail (if used)
will appear
in the text boxes. I
f no thumbnail
is to be uploaded
, place a check in the box that says
“I don’t have a thumbnail for my video,” then click upload
.



18


4.

Enter the
t
itle of the video,
leaving all other fields as they are
, th
en click save
.


5.

A new video will be added
.

3.2.2.

Embed Video

1.

Embedding a video allows you to take a video from a site such as YouTube.com, and
have a fully functional video appear on the site.

2.

Login to the Front End. Go to the videos page and click on add

videos.


19




3.

Find the
web address

of a video and enter it in the text box besi
de Input Link, then
click apply.

Note: T
he
web address

of a YouTube video is found to right of the
video
. A sample YouTube page is shown below.




2
0


4.

Enter the t
itle of the
video then

click yes by publish
status
.


L
eave all other fields as
they are,
then click save
.



3.2.3.

Remove Video

1.

Login to the Front End. Click on the video page and click delete below the video.
You will

be

asked to confirm, click ok.





21


4.

Joomla! Back End

4.1.


Menu Editor

4.1.1.

Add

Web Page Using the Menu Editor

1.

Log into the Back End. Go

to Menus, then click Main Men
u
.

2.

Click
the button which says
New

in the top right corner
.



22


3.

Select the type of page. In the example below

we selected articles

and then we
selected the

section blog layout
, this
page will be for

blog posts.


This is

the

format of
the Home page and
the About CRAVE page. This page will also allow you to create
pages using the extensions that have been installed
. The photo gallery

and videos
page are examples of the thousands of extensions available to download and install in
Joomla!.

23


4.

Type in title and select the section

from the drop down list, in the example we
selected News.

M
ake

sure

that you
have selected yes to publish, then

click
S
ave
.

4.1.2.

Delete
Web Page Using the Menu Editor

1.

To remove a page from the website login to the back end, select Main Menu. A list
of all pages should show up.

2.

To unpublish, click the green check that corresponds with the page you wish to
remove. A
message will appear at the top of the page confirming that the page has
been removed.

3.

To delete a page check the box next to the page you wish to delete, then click trash in
the top right corner.

24


4.2.


Photos

4.2.1.

Add a New Photo Album

1.

Login to the Back End. Sele
ct Phoca Gallery from the Components Menu then select
control panel. The Gallery Control Panel will load.

2.

Creating a new photo album and a new photo category are the same thing. Click on
Categories to load the Categories page.

25


3.

On the Categories page

click new in the upper right hand corner.

4.

Type in desired name for the album in the text box labeled Title then click Save

5.

The new Album will appear in the Categories list.


4.2.2.

Add Photos to Photo Album

26


1.

On the Phoca Gallery Control Panel click the

I
mages icon.
This will bring up the
Photo Gallery Images page.

2.

Click Multiple Add
.


3.

Recommended Step: Placing photo files in a folder helps organize the Photos page.
To create a folder, scroll to the bottom of the Photo Gallery Images page and in the
t
ext box beneath the word Folder type in the new album name and click Create
Folder. The folder name cannot include
spaces;

use the underscore key as a
substitute.
A message will appear at the top confirming that a new folder was
created.

27


4.

Select the
folde
r

where you wish

to

upload the photos
.


5.

Click browse to find the photo you wish to upload
.


28


6.

Find the folder where the photos are located
,

select the photo you wish to upload
,
then

click open (recommended: use only JPEG or .jpg files)
.


7.

The file
name an
d path will now appear in the
text box next to browse, click Start
U
pload
. A message will appear at the top confirming the upload.


29


8.

Repeat steps 5
-
7 to upload additional photos.

9.

When all photos are uploaded
,

check all photos you wish to publish, select
the desired
album in the
C
ategories
drop down
box,
then

click save
.


10.

The new album will appear on the photos page
.



4.2.3.

Remove

Photos from Photo Album

1.

Select the Images icon on the control panel.

2.

Find the Select Category drop box, select the album where
the photos are located.



30


3.

Check the photos you wish to remove. If you only wish to remove the photos but
keep them stored on the site
,

click Unpublish.

The will allow you to publish the
photos again.

If you wish to delete the photos permanent
ly from t
he site, click
Delete.

C
lick OK to confirm that you wish to delete the photos
.



4.2.4.

Remove

Entire Photo Album

1.

Select the Categories page.

2.

Check the album you wish to remove
.

C
lick Unpublish

to temporarily remove the
album, or

click Delete

to permanently r
emove the album. These actions will apply to
31


all the contents in a folder.


C
lick ok to confirm deletion
.





32


4.3.


Guestbook

4.3.1.

Approve and Publish Guestbook Entries

1.

Login to the Back End. Go to the components menu and select easy guestbook.

2.

Select Manage entries.



33


3.

On

the
M
anage
E
ntries page you will see all guestbook entries listed
.


To

publish an
entry click the red button to the right of the page under the published column, to
unpublish, click the green button
.


4.3.2.

Edit Guestbook Entrie
s

1.

On the Manage Entries page, check the item you wish to edit, then click edit.


2.

On the Edit

E
ntry page,
you may edit the text of an entry. When finished, click Save
to save changes and return to the Manage Entries page.




34


4.3.3.

Delete Guestbook Entries

1.

On
the Manage Entries page, check each item you wish to delete, then click delete.


4.4.


Events

4.4.1.

Add Event

1.

Login to the Back End.
On the Components menu, click on EventList.



2.

On the EventList Control Panel, click on Add Event.



35


3.

On the Add Event page, enter the Event Title, select the venue from a list (the list is
shown in the next step), enter the start and end dates on the details tab on right side of
the screen, enter a start and end time, select the category named “Events,” a
nd select
yes to publish. To enter more details about the event, type them in the space below.

4.

The select venue screen, click on the venue where the event occurs.



36


5.

For repeating events, click on the
R
epeating
E
vents tab on the right, select daily,
w
eekly, monthly, weekday (only on weekdays), and the event will show up multiple
times
.

O
nce the event is ready to publish, make sure yes has been clicked next to
Publish, then click Save in the top right
.


4.4.2.

Add Venue

1.

On the EventList C
ontrol Panel, click

on Add Venue
.

2.

On the Add Venue Page, enter the Venue name and Address. Make sure that you
have clicked No next to Add a Map Link and Yes next to Publish. Click Save to add
37


the venue.


4.4.3.

Edit Event Information

1.

On the EventList Control Panel, click Events
.


2.

Check the box next to the event you wish to edit. Click Edit to go back to the event
editor

from

Section

4.4.1 Step 3
.






38


4.4.4.

Delete Event

3.

On the EventList Control Panel, click Events.


4.

Check the box next to the event you wish to delete. Click Delete

to remove the event.




4.5.


Manage User Accounts

4.5.1.

Add New User Account

1.

Login to the Back End. On the site menu click User Manager.

39


2.

In the User Manager, c
lick on
N
ew to add a new user.



3.

Enter the user’s name, their login name (username), email, and pa
ssword, then select
their level of access. Click Apply then Save to return to the User Manager.



4.5.2.

Edit User Account

1.

In the User Manager, place a check by the User Account you wish to edit. Click the
Edit button to go back into the editor from

Section

4
.5.1 Step 3.




40


4.5.3.

Delete User Account

1.

In the User Manager, place a check by the User Account you wish to delete. Click
the Delete button to remove the account.




41


5.

Website CPanel

5.1.


Linking to a File

5.1.1.

Upload File

1.

Log in to website CPanel. Scroll down to Files and select File Manager.

42


2.

Click on public_html and double click on the curr folder.

3.

In the curr folder window, click upload.

43


4.

Browse for the file to upload. Once selected
click Open to upload.

5.

Allow
file to upload
.





44


5.1.2.

Link to File

1.

Login to the front end. To add a link to the file or document on an editing page, enter
the document editor using the instructions from Section 3.1.

2.

To link the file to text in an existing article, highlight the text,

t
hen click the
insert/edit link icon.



45


3.

A window will po
p up allowing you to add a link.

I
n the
L
ink URL

box,

type “curr/”
then type the name

of a file you previously uploaded. For example, for
CRAVE
Creed.doc you would type “curr/CRAVE Creed.doc” then type the title. Click
I
nsert
to
add the

link
.





46


5.1.3.

Remove Link to File

1.

To remove the link
,

open the article editor, then highlight the text and click the
remove link

icon

to remove the link
.






47


5.1.4.

Delete File

1.

Log in to website CPanel. Scroll down to Files and select File Manager.

2.

Click on public_html and double click on the curr folder.

48


3.

Place a check next to the file you wish to delete, then click Delete.


4.

Confirm deletion

by clicking delete file in the Pop
-
Up window
, then wait for the file
to be deleted
.