Introduction to CMS:
This front end of the given CMS is completely dynamic in nature. The given front end basically displays and provides interface for registered users for categories/subcategories/items views and postings as well as Articles/Items views and Posting. Along with that it displays contents that the owner of the site intends to present to user. All contents are managed from admin/front end through provided interfaces.
Leaving out the stylesheet and Layout this nothing is predetermined while loading; I mean those two are the things that have been you can say hard coded into the HTML page। We will see the feature of each section of the front end in detail one after another feature. Lets begin from top to bottom and in that from left to right.
Top Navigation:
In the top navigation these is two parts one is user login info panel along with related actions he can take and the second part consists of normal navigation menu which the owner wants to display to all the users। Lets take each of them one by one.
User Login Panel:
We have implemented a user and related roles based navigation system in the whole of the application। In brief it restricts action to specific users having specific roles. As soon as it loads an site the application assigns its a username and role as a guest by help of which it can do few actions like he can browse the whole site and also can post comments to the article being browsed. Also along in the panel as we can see there is login option through which he can login as an registered user for full fleged use of functionalities of application and if he is not an registered user he can signup for the same with the help of signup link as we can see in figure down there.
If an registered user is logged in then he don't have an option of login (as can be seen in figure) but can logout and again login as new user। The logout action is provided in the panel as shown.
Now we can have a look at login screen and related result as well as signup screen and related action one by one.
[GUEST LOGGED IN SCREEN]Login:
This is a simple login screen as is present in most of the application and have both JavaScript as well as RoR server side validation for all the fields. The look and feel of login screen is still not decided and our team still working on it as a priority. For the time being we have a concept to implement it through greybox functionality as is shown in shot below. On successful login the given user is redirected to home page of the application.
[LOGIN SCREEN]Signup:
This also includes all the basic fields needed for fast signup and browsing of site. All validations of JavaScript and server side are done. A very creative and attractive JavaScript validation is used in the same. You can have a feel of it from the two shots given below one with simple signup screen and other with errors during signup, the errors are prompted once we can fields and not the time consuming on submission. This signup is also in priority task as along with login its look and feel needs to be deiced but as for now it has been done through greybox implementation. This is being done to have a cutting edge look and to make browsing enjoyable.
[SIGN-UP SCREEN]Logout:
This is just an action specific link, which logs out the logged in user and redirects to home page with default login of guest
[USER LOGGED IN SCREEN / LOGOUT OPTION]Admin:
This is an action specific link, which takes the user to admin panel for ADMIN work. This link appears once when the logged in user has role defined as admin only. There is no other way to go to admin panel except this link and has been ensured so. A shot with admin link appearing is being shown below.
[ADMIN LOGGED IN SCREEN / ADMIN LINK]Top Navigation Panel:
The links appearing in this panel is dynamically managed through admin interface and the contents of all the links are also managed through admin interface only। A basic view of Top Navigation panel is shown below with a sample contents for a single link.
[TOP NAVIGATION TAB/ CONTENTS OF SINGLE SELECTED TAB]
Left Menu:
The Left panel as we say here but it can be right panel as well as we can dynamically changes the orientation from ADMIN panel। The left menu has been kept user friendly and has been made quite simple. As is seen in the shot below the left menu comprises of categories that have been active over the application. Creation of and activating and de-activating of categories is done by admin panel only. On clicking on the link on categories the categories details are rendered along with count of subcategories under it and number of item under it. The same has been shown below.
On clicking the '+' by the side of categories listing first level subcategories gets listed over there and on clicking on the link over them take the same course as has been mentioned over for categories.
The Left panel as we say here but it can be right panel as well as we can dynamically changes the orientation from ADMIN panel। The left menu has been kept user friendly and has been made quite simple. As is seen in the shot below the left menu comprises of categories that have been active over the application. Creation of and activating and de-activating of categories is done by admin panel only. On clicking on the link on categories the categories details are rendered along with count of subcategories under it and number of item under it. The same has been shown below.
On clicking the '+' by the side of categories listing first level subcategories gets listed over there and on clicking on the link over them take the same course as has been mentioned over for categories.
For browsing multiple levels of category/sub-category it can be done only though main page and not the left navigation menu. Also in the front end user can only post/create articles and comments and rest categories/subcategories are created and maintained by ADMIN panel only. If any level of category/sub-category don't have further levels of sub-category and/or Items then a heading with Zero count is not shown instead no such information is renderer case shot has been shown below.
[LEFT MENU (category display)]
[RIGHT MENU (category / subcategory in menu)]Contents page:
Home page:
[HOME PAGE ALONG WITH FEATURED]
Featured:
Articles:
[LISTING OF ARTICLES]
[ARTICLE ADD SECTION]
[ARTICLE DISPLAY WITH COMMENTS]
[EDIT COMMENTS]
[ADD COMENT]
[CATEGORY WITH DEPPER CONTENTS]
Introduction:
General layout:
[GENERAL LAYOUT]
[NAVIGATION MENU]
Home page:
As can be seen from the screen shot below of home page home page has the same contents as has been assigned to it through the admin Panel but it also has an section called featured article which we discuss below.
[HOME PAGE ALONG WITH FEATURED]Featured:
This is a quite interesting and useful technique। Articles/categories/ subcategories/items could be made as featured from ADMIN side and all such contents will get displayed over here as shown above. The usefulness of this technique is that we could reflect the latest articles as featured or latest offers from the company or any such logic whatever I sliked by ADMIN panel.
Articles:
This is a basic link in top navigation panel but with an identity of itself। This link renders all the articles that we have in our application and a brief details regarding the same। And on selecting a particular article we can get the full details and contents for the chosen article along with the comments posted over them. In this page we also get two links 'post new article' (which can be done by registered user only) and 'Post comment' (Which can be done by guest as well). The screen shots of the same have been provided below.
[LISTING OF ARTICLES][ARTICLE ADD SECTION][EDIT COMMENTS][ADD COMENT]Categories/subcategories/items pages:
This is the basic rendering and displaying section of all the huge amount of contents we have in database of course in a well sorted out and attracting manner। As has been seen before a particular level of category/subcategory selected will display its details along with the brief details of the next level (includes all lower levels) subcategory and item if any along with the count of such contents to give the user a brief idea of the amount of contents we have for a particular content। A shot have been provided for the same.
[CATEGORY WITH DEPPER CONTENTS] [CATEGORY WITH DEPPER CONTENTS]
Admin Site
Introduction:
This panel is being provided to the administrator for managing the site। Administrator is having a complete control over this site for inserting and deleting the data. Even he can manage the front side layout from admin site.
There are different forms and functionality being provided in admin site and they are as follows
There are different forms and functionality being provided in admin site and they are as follows
General layout:
[GENERAL LAYOUT]This is the general layout, which appears in each n every form of admin site। At the top of the screen, name of administrator who logged in the system is being displayed on left side.
Next to it is logout link.
On the right side there are two other links Home for redirecting user to User site and other is change password for changing the password for changing the Password of admin side user.
Next to it is logout link.
On the right side there are two other links Home for redirecting user to User site and other is change password for changing the password for changing the Password of admin side user.
There is also Navigation menu in the middle of the layout। This menu highlights and provides links for browsing different modules of the admin site.
Home :
[HOME PAGE]
User :
[LIST USER]
[HOME PAGE]This is the first form that comes over the screen when user arrives in the site after login। This interface provides details regarding number of Categories, number of subcategories, number of items and number of articles that are presently being used in the site.This is the first form that comes over the screen when user arrives in the site after login. This interface provides details regarding number of Categories, number of subcategories, number of items and number of articles that are presently being used in the site.
User :
[LIST USER]This layout shows information regarding different User of the sites along with their names and email address. There is also a facility for editing user details and deleting User. When u click On
Image another form gets open whose layout is being showed below। Through that form administrator can change the details as required.
[EDIT USER]
There is another image next to edit image for deleting User.
By clicking this image confirmation message is flashed and allow user to delete user information is one Button at the bottom of the form Create user which on clicking will redirect to another form where User can enter details for creating new User.
Role :
[LIST ROLES]
[CREATE ROLE]
[EDIT ROLE]
Image another form gets open whose layout is being showed below। Through that form administrator can change the details as required.[EDIT USER]There is another image next to edit image for deleting User.
By clicking this image confirmation message is flashed and allow user to delete user information is one Button at the bottom of the form Create user which on clicking will redirect to another form where User can enter details for creating new User. [CREATE USER]
Role :
[LIST ROLES]This layout shows table contains different roles। There are different roles that are being assigned to user for role management. User will allowed to manipulate only that portion of the site which is being assigned to him rest of the portin can be only be viewed by him. There is also functionality for Edit and Delete roles. There is one button at the bottom of the form named Add role, which can be used to redirect user to add role form for adding new role.
[CREATE ROLE][EDIT ROLE]Content:
[CONTENT LIST]
[EDIT CONTENT]
[CONTENT LIST]This form consists of Content that is being displayed over the Front site as a Navigation menu. All this navigation menu item at front side will be handled dynamically buy maintaining their value over at admin side in this form. There is also functionality of Edit and Delete in this form using which user can modify and delete the Content value according to his requirements.
[ADD CONTENT]
[EDIT CONTENT]Category :
[2nd PANEL OF CATEGORY WITH SUBCATEGORY]
[3rd PANEL OF SUBCATEGORY WITH ITEM]
[ADD CATEGORY]
[EDIT CATEGORY]
Article:
[CHANGE PASSWORD]
This page is used for changing the Admin site user password.
[1st PANEL OF CATEGORY]
At the top of this form there are two radio button with label Left and Right। This facility is being put for selecting the position of the category menu on Front site. Based on this radio button selection Front site layout will changed.
[2nd PANEL OF CATEGORY WITH SUBCATEGORY][3rd PANEL OF SUBCATEGORY WITH ITEM]
This layout provides facilities for adding, editing, deleting and loading respective subcategories of the selected category. This form functionality is completely developed using AJAX technology. User can browse up to N-Level subcategories and even their respective items. There are 3 portion of this form. In the 1st portion user can select the Category for editing and deleting or for loading respective subcategories. Even he can add new category. In the 2nd portion there is subcategory panel where user can add new subcategory of select category or can Edit or Delete selected subcategory. Even User can Load the respective Items of the selected subcategory or he can load subcategories of the select subcategory in recursive way up to any depth.
[ADD CATEGORY][EDIT CATEGORY]Article:
[ARTICLE SEARCH PAGE]
[SEARCH RESULT USING AJAX]
[ARTICLE’S LONG DESCRIPTION DISPLAYED USING VISUAL EFFECT]
[COMMENT]
[EDITCOMMENT]
This form provides functionality for Searching article। There is one Text Box where user can enter the details for which he needs to search Article and then press SearchAJAX। So independent of number of records, result इस being displayed in quick succession, which saves browsing time। button. Advance search is being provided in this module. Based on the value entered by the user in the Text Box, system will provide the search result. This Search result will be displayed AJAX technology. So independent of number of records, result is being displayed in quick succession, which saves browsing time.
[SEARCH RESULT USING AJAX][ARTICLE’S LONG DESCRIPTION DISPLAYED USING VISUAL EFFECT]Visual Effects functionality is being used to display the Long Description of article। It will be displayed below article details whose article name is selected or clicked. A panel will be opened that will contain long description of the articles. A hide link is provided at the end of the opened panel, which is used to hide that panel.
Comments:
[COMMENT]This form highlights the comment section, which are being posted by the front side user for the respective articles। User can click over the “Comment Image “ shown in the article detail table and can view all the comments posted related to that article। There is also facility of Edit & Delete functionality for modifying or removing comments respectively. Along with comments the form also displays the article for which comments have being posted along with the name of person who posted the article and created date. Below are the list of comments along with the name of the person who posted it and date on which it is posted. There is also an option for “Add comments” which will provide user the interface for adding new comments for respective article.
[EDITCOMMENT]Featured Information :
[FEATURED INFORMATION]
[FEATURED INFORMATION]This form will display all the Active categories and Subcategories along with their long description। User can also edit the description of the data directly through this form. For editing the value he need to click the Content name field in the table. That will redirect user to edit form where he can updated the details.
Change Password:
Change Password:
[CHANGE PASSWORD]This page is used for changing the Admin site user password.
