Content Management System 2
Home Page
Blog Post Creation and Blog Post Viewing available without login
Creating a Blog Post
View Created Blog Posts
Add Comment to Blog Post
Comment Confirmed via Status Message
Edit Blog Post
Edit Blog Post Confirmed via Status Message
Change Blog Status to Closed
Blog Post Status change to Closed Confirmed via Status Message
View all Blog Posts showing Blog Post 3 Status Closed
Delete Blog Post
Delete Blog Post Confirmed via Status Message
Register New User
Drop Down Menu from Left Click on Login Button
If Logging in there is an option to have Login with Ajax and Login without
Ajax this was done as a backup in case there is a problem with Ajax
Register Page
For the purposes of demonstration we are registering
Clara from Canada
CMS 2 Menu Bar Expands on Successful Register or Login
A menu appears under the Home Page image with options
This allows uploading of photos via Laravel to the
galleries of the user who has currently logged in
Members Menu Bar Option
Clara just registered has the default two shade blue avatar
Left Clicking the Clara default two shade blue Avatar Image
This brings up instructions that particular user has not yet uploaded
their own Avatar and explains how to do it
this is done to encourage user participation
All other users who have uploaded Avatar's can be accessed at this point
Profile Menu Bar Option
Still logged in as Clara choosing her profile option displays her details
passing cursor over the avatar image displays a Toggle Avatar Form button
Left Clicking Toggle Avatar Form button displays upload options
Choosing an image we upload Clara a new Avatar
In the instructions a scale of 800px by 800px is recommended
The application will accept other dimensions but will crop them
to fit which may give results that where not desired
Photo Gallery Option
Left Clicking the Photo Gallery Option on the Profile Page shows Clara
has no photos and there is an option to upload photos here that is a
backup option using Classic PHP code and MySQL statements
and although not as quick or efficient as Laravel it is here
to provide an alternative should for whatever
reason Laravel encounter difficulties
Upload Photo from Home Page
This upload option is using PHP 5 Laravel to upload photos to the current
logged in user which in this example is Clara and the gallery "Myself"
is chosen from a drop down menu with eight optional galleries which
are created by the application for that user as they are chosen
and finally a typed description "My City" is added
Image Upload confirmed with Status Message
On clicking the Profile Menu Bar Option we can see Carla's Showcase has
started displaying and it will cycle randomly through all
pictures each time it refreshes
Showcase Icon
Left clicking the Showcase Icon on the profile page takes you to the photo
galleries for that user even if it is a different user logged in
Choose Gallery
Left clicking on any gallery takes you to that galleries photos
Choosing Individual Image from Gallery
Left clicking any image in a gallery will display it at 800px by 600px
Deleting an Image
If you are the user who owns the photos then when you choose an
individual image there will be an option to delete it beneath however
if you do not own the photos then this option will not be present
in this case Clara is logged in so we can delete if we wish
With Clara still logged in if we go to the member page and choose my own
profile then choose my showcase we can see my profile galleries
even though we are still logged in as Clara
With an Individual Image chosen there is no option to delete
Search Bar
The Search Bar is present on many screens
In this example we access it from the Members Menu Bar Option and type
"cla" then left click the "Go" button
The Search Option locates "Clara" and redirects you to the Members Page
Another Search entering "can"
This locates all users from Canada
Clara is at the end of the list and all found users if
left clicked will take you to that users profile page
Vote Up Menu Bar Option
This is a fun page in the Tumblr style
allowing users to vote images up or down
Adding more Vote Up images has been disabled due to there not being
present the professional oversight of a modern social media network to
monitor content however there are examples that can be voted on to
show what a production version with oversight would have
Add Up Vote
In this example still logged in as Clara we will choose to Up Vote the
second image in the Vote Up series by left clicking the "Up" button or
pressing by finger on a cell phone
Create New Up Vote
Left clicking or pressing the "Up" button displays a form already filled in
with the Vote Up choice leaving the user with the simple need to press
the "Submit" button to confirm their wish to add an Up Vote
Up Vote Confirmed via Status Message
We can see that the votes for Up have change
from 2 a to 3 on the Vote Up second choice
An Attempt to make a second Up Vote for the Vote Up second option
re-directs the user to the Vote Up page with an alert that
"You have already added an up vote for this one"
The system logs the the email of user making the Up Vote against that Up
Vote choice in the votes table in the database so only one up vote and one
down vote can ever be made on any Vote Up option by one user
Add Down Vote
In this example still logged in as Clara we will choose to Down Vote the
third image in the Vote Up series by left clicking the "Down" button or
pressing by finger on a cell phone
Create New Down Vote
Left clicking or pressing the "Down" button displays a form already filled in
with the Vote Up choice leaving the user with the simple need to press
the "Submit" button to confirm their wish to add a Down Vote
Down Vote Confirmed via Status Message
We can see that the votes for Down have change
from 1 to 2 on the Vote Up third choice
Another attempted Down Vote on the same Vote Up option is declined by
the system via Status Message the user re-directed to the Vote Up page
as Carla already has an Down Vote entry with her email in the database
Cropper Menu Bar Option
This is a feature to allow the easy cropping
of an image and saving to a selected user gallery
Choose Image but Don't Crop
If a user in this case Carla chooses an image, selects a gallery, adds a
description but then for whatever reason decides not to crop the image
then the image will be saved unaltered to that gallery
Image Saved Confirmed by Sweet Alert Message
The application uses Sweet Alert messages to confirm the unaltered image
was saved to Clara's Nights Out Gallery
Opening Clara's galleries through her Profile Option on the Menu Bar you
can see she now has a second gallery displaying the image just uploaded
Opening New Gallery
Clara's new image is shown unaltered
after being uploaded from the Cropper Menu Bar Option
Cropper Menu Bar Option
Still logged in as Carla we choose the same file and this time crop it
The Cropper can be used by scrolling under the original image and placing
the cursor over a secondary double image display and then by rotating the
mouse wheel or pinching your fingers on a cell phone you can
zoom in or out on an image to get the desired adjustment
The Cropper is very sensitive and only two mouse
rotations forward gives the effect shown below
Once the desired effect is achieved the user can scroll back up and press
the "Crop Image" button in which case the first image changes to the view
the user's crop while displaying the original image beneath it in full to allow
for comparison before the user decides to confirm the crop by pressing
"Upload"
Image Save Confirmed by Sweet Alert Message
image was saved to Clara's Other Stuff Gallery
Opening Clara's galleries through her Profile Option on the Menu Bar you
can see she now has a third gallery "Other Stuff" displaying
the cropped image just uploaded
The Cropped Image that has just been uploaded
displayed fully after being clicked in the gallery
Finally back to the Home Page
User Journey Complete Thank You for watching
