Synopsis of Java based content management system by Jaspreet Singh

WebBean Project Report P a g e | 1

CSE Department, Guru Nanak Dev University, Regional Campus, Gurdaspur.

Training Details

About Real Infotech :

Real Infotech was established to provide "Quality Software & web Solutions" and

"Professional IT trainings". The tremendous progress made by the organization and

the reputation it commands today is an ample testimony of its commitment to

quality.

Real Infotech offers various training programs for IT professionals. The objective of

their training programs is to bridge the gap between the practical knowledge level of IT professionals and requirement of the IT industry. Keeping this in mind, they

have prepared some extensive training programs which makes their students technically sound enough for the IT industry. Real Infotech offers three types of training programs:

1. Specialized Training Programs . 2. Six Month Training Programs for Eng. Graduates / MCAs . 3. Two Month Training Programs for Engineering Graduates .

Industrial Training (6 Months ) in Java:

Pre - requisite : Candidates must have good knowledge of C/C++ and OOPS

During this extensive training, student is trained in Core Java and Advanced Java

for first three months and during rest of the training period, a project work is developed by the student.

Core Java

Intro to Java , OOPS, Interfaces, Exception Handling, Multithreading, Packages,

Networking, File & I/O Streams, Collections

Advanced Java: Module I

Applets, AWT, Swing, JDBC, Java Beans

Advanced Java: Module II

HTML/DHTML, JavaScript, Java Servlets, JSP, JDBC, Java Beans, MVC Arch., JMS, File Uploading

Java Enterprise Edition (J2EE)

XML, RMI, Enterprise Java Beans, Struts, JNDI, AJAX



Why Java?

There are many reasons for why I have opted Java Web Technology for six month

training. Reason behind the increasing Java Popularity is its portability and easy to

understand English like syntax.

Android app s development making it an impor tant progr amming language in the

modern times. Many job options are open to you if you learn Java, you can develop

core Java based server side application, J2EE web and enterprise applications, and

opt for Android based mobile application development.

Apart from the reasons cited above, here are 10 more reasons for learning Java -

1) Java is ready to learn As stated on javarevisited.blogspot.in, Java comprises

of fluent English like syntax with minimal magic characters like

Generics angle brackets. It makes it ea sy to read Java program and learn quickly.

Once one becomes familiar with initial hurdles with installing JDK and setting up

2) Java is an Object Oriented Programming Language (OO PS ) - Developing

OOPS application is much simpler and it assist in keeping system modular, flexible

and extensible. After acquiring knowledge in key OOPS concept including

Abstraction, Encapsulation, Polymorphism and Inheritance, all these can be used

usin g Java as it encompasses several best practices and design pattern in it's

library.

3) Java has rich API The language has a rich API and visibility that comes with

Java installation. In the initial days of Java programming, Applets were used

proving gre at animation capability. Java offers API for I/O, networking, utilities, xml

parsing, database connection, and everything. Anything remaining is covered by

open source libraries like Apache Commons, Google Guava and others.

4) Powerful development tools e .g. Eclipse , Netbeans - Eclipse and Netbeans

have played a vital role in making Java one of the best programming language. It is

a pleasure to code in IDE once you have coded in DOS Editor or Notepad. It not

only assist in code completion but also offers strong debugging capability that are

essential for real world development.

5) Good collection of open source libraries - Open source libraries help in

ensuring that Java is utilized everywhere. There has been contribution by a host of

libraries from organ izations like Apache, Google, etc making Java development

easy, faster and cost effective. With framework such as Spring, Struts, Maven

ensuring that Java development follows best practices of software craftsmanship,

propagates using of design patterns and assisted Java developers in getting the



work done.

6) Great community support - Community is the greatest strength of Java

programming language and platform. Java has many active forums like

Stackoverflow which is an open source organizations and many Ja va user group for

assisting with everything. Java has a community to assist beginners, advanced and

even expert Java programmers.

7) Java is FREE As Java is free language you can save money for creating

anything using the Java application. It has also a ssisted Java in gaining popularity

in the midst of individual programmers, and large organizations.

8) Very Good documentation support Javadocs Javadoc is an amazing piece

of documentation telling you all there is to know about Java API. It is one of the

major reasons for Java being the best programming language. It has made learning

easy, and providing great reference at the time of coding in Java.

9) Java is platform independent

great way to attract a host of new development in Java. It is the prime reason for

Java being the best pro gramming language, as most of Java applications are

developed in Windows environment and run in the UNIX platform.

10) Java is everywhere Java runs on desktop, on mobile , on card, and nearly

everywhere and so do Java programmers. The wide availability of Java

programmers is another reason for organizations opting to choose Java for new

development than any other programming language.



Project Description and Technologies Used

Project Name:

WebBean (A Java CMS)

Project Description:

WebBean is a Java Based Content Management System with Mobile responsive

attractive user interface . Using WebBean, you can develop any kind of web project

like a blog website, or commercial w ebsite, or a web portal for universities and

hospital, etc. WebBean take care of data management in dbms and uses highly

secure methods to fetch that data. Using WebBean, you can customize themes of

your website, can add new components or banners, can add or delete articles and

their categories, manage users of website, add custom footer and title of website.

WebBean also manage sessions, user details, total visitors, online user, and many

things at backend.

It is my innovative idea which came from other ex isting Content Management

some support other technologies like ASP.NET, PERL, RUBY, and PYTHON.

But there are very less number of CMS which support Java. And those which

suppo rt like openCMS and Apache Roller are very complex and can only be used for

high scale projects.

So I am designing Webbean as a solution to this problem. Webbean is very simple

to use CMS but is highly flexible and efficient. Webbean take care of authentic ation

problems and sql injections attacks.

Languages used :

Programming Logic:

Core Java, Java Servlets, JSP and XML.

User Interface:

Html 5, CSS 3, Javascript, Jquery, Less, and Twitter Bootstrap framework.

Database Tier:

Structure Query Language (SQL) in Mysql database system.



Technologies Used



User View Analysis

There are two interfaces with which user will interact. So there are two different

points of view which we need to consider for analysis purpose.

And these are:

1. Public view which admin wants to create.

2. Admin view with which admin will interact and will work with.

Public View

WebBean is a tool to create websites and to manage content on them. So the final

output which admin want to get is a public interface (which can be web site, college

bulletin board, campus portal, a blog, a discussion forum, etc).

As WebBean is supposed to generate this public view automatically, we need to

design this interface also. So I have de signed one default html layout with all

required CSS. In addition I have designed 5 other CSS design (themes) for this

default layout. Admin can change look and feel of website by just selecting from a

list of all 5 different themes.

What public view should include?

o This is the first question which came in my mind. So to answer it, I

had gone through many web sites, and Google bloggers, and forum

sites.

o After doing complete analysis on this, I got the following answer.

o Public view should include:

Titl e of Website

Subtitle along with Title (though subtitle can be optional )

Menu Section Which will link to main pages of site like

about, contact, etc?

Article Section almost all websites have number of articles

or (sometime called as posts).

Category Section Articles are categories into categories.

And list of these categories must be shown on web site. I have

also added count of articles in each category.

Footer Section Footer Section is used to display some

copyright content or sometime owner details of website.

Though Admin is free to add anything in this footer, I have

added copyright details by default.

Components This is new feature added in WebBean. I had

added many different positions (about 12 positions) which can

be easily used by admin to add his custom content, like add



banners, social plug - ins, external links, custom html,

jumbotron, etc.

Below is the screen shot of default layout of public view with all

different content sections:



What should be the default design of publi c view?

o

features in public page because this is the page which admin will

create using WebBean. So it all depends on him how he will design it. o But to provide default design, I have used white background with

simple link colors and paragraph colors. I have used Bootstrap default

css styles to provide various css properties to element in this public

page. o In additional themes which are provided in WebBean, I have only

changes values of those css properties. o Here are the other themes of default public page:



Admin View

Admin view is the main interface with which admin or other users (assigned by

admin) will interact or will work.

Admin will open this interface by opening its link in browser and will use it to

manage content on the site.

What an admin should be able to do on this interface (which is

actually called as WebBean CMS)?

o First he should be able to change site configurations like:

Title

Subtitle

Theme

Description (this may include meta tags, and SEO tags )

And footer.

o Now admin should be able to add more users to take care of his

project site.

o Menus:

Menus are dynamic.

page.

Demo c

Admin can create as many menus he wants.

Each menu has some content also.

o Article and Categories:

I have added these two modules in different positions.

But both are related to each other.

When you ad d new article you have to choose one category

from existing list.

If you want new category, you need to first create it.

Article has further many modules to add title, heading, body,

author, date, etc.

o Components:

In this module admin can add new component in any position of

default page.

In Component, name is used to refer the component only and is

not displayed anywhere.

Content inside component can be any standard html code with

iframe or javascript code also.

Two or more component can be added at same p osition, and in

this case recent component will be displayed on top.



What other features must be present in CMS?

o Mobile Responsive

As admin will need to add new article using his mobile, design

of CMS should be mobile responsive. I have used bootstrap

framework which make use of jquery and media queries to

make your design mobile responsive.

o WYSIWYG editor

that admin has no knowledge of html. But to write good looking

articles and compon ents, we need some css and html.

Fortunately, I have used tinymce editor which is WYSIWYG

editor, which format your article text automatically in back end.

You just need to write and use buttons available to format your

text.

o Help Menu

Though admin inte rface is very easy to use, still admin

sometime need help to understand any particular feature.

For that I have added help menu button in which user can

search on any topic.

Help page also highlights all positions available and also help in

adding new posi tions.

Help page will be modified in future to add more features.

o Security and Authorization

Well, admin link is complete separated from public pages. By

area of WebBean. But you can easily

anything.

By changing this link, public users will never know how to go to

admin page.

Second WebBean each page is well authorized using session

technique of Java Servlets. When user login, first its details are

checked in database and then new session is created which will

invalidate automatically after 30 minutes.

o Search button

Search button is always must in any kind of project. WebBean

is provided with search facility which helps in searching

database or any feature present in WebBean. Results of search

button will be organized into categories like menu, article,

component, user, features, database, etc .

Note: Interface of admin area is designed in later phase and its screenshots are shown in next coming pages.



Modal View Controller Architecture (MVC)

WebBean CMS is based on MVC architecture. Here is how MVC based application

works:

Here is how WebBean works:



Development Environment

Project development starts with this phase. First of all environment is set. All tools

like compilers, editors, designer tools, etc are collected.

Tools collected for WebBean development:

Eclipse (Integrated Development Environment): Eclipse is the best

light -weight and open source IDE for development of java, c/c++, php, etc

projects.

Tomcat 8 (Integrated with Eclipse): This helps in testing our

application while we are developing it in debugging mode.

JDK and JRE Version 1.8.0_40 : This is core java runtime. Though

Servlets and jsp files run in tomcat container, but tomcat itself run in jvm. So

java runtime and compiler tools are required.

MySql Database Server: This is backend database management

system used in my application. Though we can use Oracle easily.

WebBean work well with both with oracle and mysql.

XAMPP Stack: Xampp is a package produced by Apache supported by

Bitnami. Xampp consiste of many packages like Apache server,

PhpMyAdmin, MySql Server, etc.

We will use two of its packages namely MySql and PhpMyAdmin.

Laughing Bird Logo Creator and Adobe Photoshop: WebBean Logo

and many other Icons are designed by me using these two applications.

I have also use font -awesome - icons and glyph - icons in project which are

provided by Bootstrap web framework.

Prepros and Sublime Text Editor: These two applications are used

to design WebBean Layout and editing Bootstrap default CSS files to

produce new CSS themes.

Stages in Development phase:

1. User Interface Design

2. Database Design

3. Modal Classes

4. Controller Classes

5. View JSP files to implement design



Project Directory Setup

Before going to development stages, first we should setup directory hierarchy for

various files in project. The following setup is done in eclipse.



a. User Interface Design

Interface is designed using Bootstrap framework. Bootstrap provide precompiled

css files with jquery and some other javascript plug - ins. It also provide font -

awesome - icons and glyph - icons which I have used for home button, and other such

menus or buttons.

I have compiled the default bootstrap theme again after making changes in it. As

bootstrap source code is written in LESS language. So I have used Prepros Compiler

to compile bootstrap source code to css and js files. Less language is very easy

language to edit new custom designs and their properties.

After doing above process(s), I got the following designs for various modules of

WebBean:

1. Login page



2. Home page

3. Global Settings



4. Article Title

5. Article other details like author name, date, category, etc.



6. Article Body editor ( with all Word Processor features)

7. Article Manager ( used to edit, delete, or add new article)



Similar to previous screenshots there are number of other modules

like, category manager, menus, users, components editors, help,

system info, search page, etc.

To view all modules we need to check in working application in

tomcat.



b. Database Design

Database design is the root base of every project. It should be simple, clear,

robust, highly optimized and documented. I have designed my database using

MySql Workbench tools.

Following tables are designed in webbean_db schema.

Users it hold curr ent user details and keep the session active.

Setting it is used to store title, subtitle, theme, footer, and other global

information

Category it hold list of categories and article count in each category.

Article it is used to store articles and th eir meta information like, title,

body, author, date, category, etc.

Menu it store menu names and their content.

Component it store component name, content and its position on page.

Test this table is only used while testing and developing. In actual

deployment it is removed.

Synopsis of Java based content management system by Jaspreet Singh

Documents

Transcript of Synopsis of Java based content management system by Jaspreet Singh