Content Management System 2
Content Management System 2


Site Hosted by - One.com





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