A

Final Year Internship Report

On
Front End Web Development
At
" Yati Books Stores "

In Partial Fulfillment of the Requirement for Degree of Bachelor of Science in

Computer Science and Information Technology (Bsc.CSIT) Awarded by Tribhuvan
University

Submitted By

Nabin Acharya (Roll Number / Batch)

Submitted To

Department of Computer Science and Information Technology

Mount Annapurna Campus

Pokhara-11, Phoolbari

February, 2019
 CERTIFICATE OF APPROVAL

The undersigned certified that they have read and recommended to the Department of Computer
Science and Information Technology for acceptance, internship in Yati Books Stores. The
internship report entitled "PuranoBooks" submitted by Nabin Acharya in partial fulfillment for the
Degree of Bachelor of Science in Computer Science and Information Technology.

……………………………………….
Mr. Surya Bd. Gc
Campus Chief

…………………………………………
Mr. Bhesh Bahadur Thapa
Campus Co-ordinator

……………………………………..
Mr. Bhesh Bahadur Thapa
College Supervisor

………………………………………..
(External Examiner)

i
 ACKNOWLEDGEMENT

The main purpose of internship is to enhance a student’s academic, career and personal
development. Internship focuses on providing practical approach to the students about how the
jobs are performed in real world. Internship binds us for learning and working environment with
the professional employees. In this period we mostly learn, How the works are performed
professional way?

I would like to express my gratitude to Mr. Bhesh Bahadur Thapa for providing proper guidance
as well as encouraging and advising during my internship days. I would also like to thanks and
forfeit my respect to Mr. Kabi Kc (CEO/Mentor) under whom I did my internship and I was able
to learn how to handle works done in company. I was able to gain variant skills and handle critical
situations which happens inside company.

I am also grateful to those people (Bibek Chalise, Anurag Shrestha, Anish Upreti, Chandra Mohan
Banjade) who are currently involved in Yati Books Stores and helped me solve different critical
situations like project model design, Client handling, Website handling as well as System design.

I would also like to thanks mine friends who helped me to prepare this report by cross checking,
providing new ideas and supporting in different phases of internship. Finally, I am grateful to my
college, Mount Annapurna Campus for providing pathway and helping for providing various field
opportunity.

Without help and support of all above mentioned people, I may not be able to fulfill my internship
and learn different things. I would like to thanks all those people for their valuable contribution
and proper guidance throughout mine internship period.

ii
 ABSTRACT

This report is the part of my internship project, required by Tribhuvan University in partial
fulfillment for the requirement of Bsc.CSIT (8th semester) program. This report is crafted as a
front end developer internee at Yati Books Stores. I worked with the team to design a project called
Puranobooks through which people will be able to buy and sell used books. This project was
developed to fulfill the gap which was present in Nepal’s used book market. Working with this
team, we made an ecosystem for utilization of used books in which author learned about building
UI or Frontend for Users which helps to increase traffic in website.

iii
 LIST OF FIGURES

Fig 1 : Hierarchy of Yati Books Stores ........................................................................................... 4

Fig 2 : Architectural Design ......................................................................................................... 12
Fig 3 : Use Case Diagram ............................................................................................................. 13
Fig 4 : ER Diagram ....................................................................................................................... 14
Fig 5 : Layout of Theme Design ................................................................................................... 15
Fig 6 : Mobile View ...................................................................................................................... 22
Fig 7 : Tablet View ....................................................................................................................... 23
Fig 8 : Desktop View .................................................................................................................... 24

iv
 ABBREVIATIONS

UI - User Interface
HTML - Hyper Text Markup Language
CSS - Cascading Style Sheet
WP - WordPress
PB - PuranoBooks

v
 TABLE OF CONTENTS

CERTIFICATE OF APPROVAL ----------------------------------------------------------------------------------------------------- i

ACKNOWLEDGEMENT ------------------------------------------------------------------------------------------------------------ii
ABSTRACT -------------------------------------------------------------------------------------------------------------------------- iii
LIST OF FIGURES ------------------------------------------------------------------------------------------------------------------ iv
ABBREVIATIONS ------------------------------------------------------------------------------------------------------------------- v
TABLE OF CONTENTS ------------------------------------------------------------------------------------------------------------ vi
CHAPTER 1 : INTRODUCTION -------------------------------------------------------------------------------------------------- 1
1.1 Introduction to Internship --------------------------------------------------------------------------------------------- 1
1.2 Background ---------------------------------------------------------------------------------------------------------------- 1
1.3 Internship Program Objective ----------------------------------------------------------------------------------------- 2
1.4 Internship Project Objective ------------------------------------------------------------------------------------------- 2
1.5 Brief Introduction of Industry ----------------------------------------------------------------------------------------- 2
1.5.1 About Organization ------------------------------------------------------------------------------------------------ 3
1.5.2 Organizational Rationale, Mission and Vision --------------------------------------------------------------- 3
1.5.3 Organization Hierarchy-------------------------------------------------------------------------------------------- 4
1.5.4 Employee of Organization ---------------------------------------------------------------------------------------- 4
1.5.5 Contact Information ----------------------------------------------------------------------------------------------- 5
1.5.6 Duration of Internship --------------------------------------------------------------------------------------------- 5
1.5.7 Roles and Responsibility ------------------------------------------------------------------------------------------ 5
1.6 Statement of the Problem --------------------------------------------------------------------------------------------- 6
1.7 Objective ------------------------------------------------------------------------------------------------------------------- 6
1.8 Motivation ----------------------------------------------------------------------------------------------------------------- 6
1.8.1 Motivation for choosing Yati Books Stores ------------------------------------------------------------------- 7
1.8.2 Motivation for choosing front end development----------------------------------------------------------- 7
1.9 Scope of the Report ----------------------------------------------------------------------------------------------------- 8
1.10 Report Organization --------------------------------------------------------------------------------------------------- 8
CHAPTER 2 : SYSTEM ANALYSIS ----------------------------------------------------------------------------------------------- 9
2.1 Requirement Collection ------------------------------------------------------------------------------------------------ 9
2.2 System Requirements --------------------------------------------------------------------------------------------------- 9

vi
 2.2.1 Functional Requirements ----------------------------------------------------------------------------------------- 9
2.2.2 Non-Functional Requirements ---------------------------------------------------------------------------------- 9
2.3 Feasibility Analysis ------------------------------------------------------------------------------------------------------- 9
2.3.1 Economic Feasibility ---------------------------------------------------------------------------------------------- 10
2.3.2 Operational Feasibility ------------------------------------------------------------------------------------------- 10
2.3.3 Technical Feasibility ----------------------------------------------------------------------------------------------- 10
2.3.4 Schedule Feasibility ----------------------------------------------------------------------------------------------- 11
CHAPTER 3 : SYSTEM DESIGN------------------------------------------------------------------------------------------------- 12
3.1 Architectural Design ---------------------------------------------------------------------------------------------------- 12
3.1.1 Use Case Diagram ------------------------------------------------------------------------------------------------- 12
3.1.2 Entity Relationship Diagram ------------------------------------------------------------------------------------ 13
3.2 Theme Design Layout -------------------------------------------------------------------------------------------------- 14
CHAPTER 4 : IMPLEMENTATION --------------------------------------------------------------------------------------------- 18
4.1 Implementation Tools-------------------------------------------------------------------------------------------------- 18
4.1.1 Front End Tools ---------------------------------------------------------------------------------------------------- 18
4.2 Other Tools --------------------------------------------------------------------------------------------------------------- 19
CHAPTER 5 : TESTING ----------------------------------------------------------------------------------------------------------- 20
5.1 Browser Compatibility Testing --------------------------------------------------------------------------------------- 20
5.2 Functionality Testing --------------------------------------------------------------------------------------------------- 20
5.3 Responsive Testing------------------------------------------------------------------------------------------------------ 21
5.4 Unit Testing --------------------------------------------------------------------------------------------------------------- 24
CHAPTER 6 : LIMITATIONS AND CONCLUSIONS-------------------------------------------------------------------------- 27
6.1 Conclusions --------------------------------------------------------------------------------------------------------------- 27
6.2 Limitations ---------------------------------------------------------------------------------------------------------------- 27
BIBLIOGRAPHY ------------------------------------------------------------------------------------------------------------------- 28
APPENDIX A ----------------------------------------------------------------------------------------------------------------------- 29

vii
 CHAPTER 1 : INTRODUCTION

1.1 Introduction to Internship

An internship is a structured work experience related to a student’s major and/or career goal.
It is an experience that should enhance a student’s academic, career, and personal development.
It is an involvement, closely aligned with the student’s major and arranged with an employer
who believes it is desirable to aid in the training and education of the student. It is of a short
duration, typically three to four months, through direct personal contact hours or through a
training program, and to aid the intern in developing a summary report of his/her experience.
This internship program is designed by Tribhuvan University for the partial fulfillment of the
degree of Bachelor in Computer Science and Information Technology. The intern is honored
by the internship program under this curriculum. This program has enhanced the skill and
enthusiasms of the students as they get knowledge of the company environments and to learn
different aspects of working mechanism that prevail in the organizations.

Every subject learned during the Bsc.CSIT course including Data Structure and Algorithm,
Design Analysis and Algorithm, Database Management System, Data Mining and Data
Warehouse, Web Technology, Distributed Database and others have been well
implemented during this internship program. During this internship period student were
introduced to the organizational structure, professional world.

1.2 Background
As a part of the course, the author had an opportunity to do an internship at Yati Books Stores,
which is located at Newroad, Pokhara. It is a newly established company which focuses more
on creating a platform for used books. Yati Books Stores is currently working on a project
called Puranobooks. Puranobooks is web based online platform which is dedicated on buying
and selling used books from intended audience. As an intern, the author was given the task of
designing the User Interface currently on trend and that build the good User Experience for
Puranobooks Online Visitors.

1
The base of this study was to review the different procedure about the Puranobooks. This study
helps internee to analyze the current trend of design and their User Experience with that design
and contents. It shows the major differences in traffic of daily visitors in Website.

1.3 Internship Program Objective

The major objectives of internship are:
 To expose students to a particular job and a profession or industry.
 To provide students with opportunity to develop skills in the field of interest.
 To assist students in gaining vital work-related experience and building strong resume
for bright career.
 To help students in developing business contacts i.e. creating network contacts.
 To help students potentially land permanent or contractual jobs from host company.

1.4 Internship Project Objective

With the development of this project, we aim to meet the following objectives:
 To facilitate commitment and productivity, removing obstacles, and motivating site
visitors.
 To make sure whether the front end part and overall system will meet the project
requirements.
 To align projects to business goals, managing stakeholders, and communicating project
status, milestones, and unexpected difficulties effectively.
 To identify targeted audience group and reach them out through marketing ideas.
 To define the project, building its comprehensive work plan, and managing to the
budget.
 To ensure website will work fine, get updated daily, and used by visitors.

1.5 Brief Introduction of Industry

Every year students buy a lot of books which matches their course structure. When their course
gets completed they give those books to someone or they sell their books to scrap dealers at
low value. In present world everything has some value, used books is a million dollar industry.
Used books also has good value and there is the presence of positive potential audience.
Amazon is one of the good example for used books business. In context of Nepal, used books

2
business is performed offline. In Kathmandu, used books business are found in roadside areas
and touristial areas like Thamel. Those books has good value but people didn't have a system
which will help to find potential audience for their used books.

1.5.1 About Organization

Yati Books Stores was established in 2018. Yeti books is currently working on creating
ecosystem for used books industry of Nepal and small library concept. With a new perspective
Yati Books Stores has an ecommerce platform called Puranobooks (Puranobooks.com). This
kind of business has not been practiced till now in context of Nepal. Puranobooks web
application is developed in such a way that people can easily buy and sell used books in a
hassle free manner.

This organization is a new startup. Currently yati books focuses two branches, buying and
selling used books through its web application and providing small library for cafe, restaurants
and hotels.

Services provided by this organization are as follows:

 Buying and Selling used books through Web Application.

 Small library for cafe, restaurants and hotels.
 Donation of books to schools in rural areas.

1.5.2 Organizational Rationale, Mission and Vision

Rationale of Yati Books Store is:

Helping people to sell their used books at good value.
Helping people to buy used books at low price.
Creating reading culture in Nepal.

Mission of Yati Books Store is:

Mission of Yati Books store is to create an ecosystem for used books as well as proper
utilization of used books.

Vision of Yati Books Store is:

Vision of Yati Books store is to develop or create a proper and affordable reading culture in
Nepal.

3
1.5.3 Organization Hierarchy
The organization structure or form of an organization has evolved in order to perform the
various roles of the organization and also to provide the services efficiently and effectively.
Organizations are usually organized according to the functions they perform to the extent
possible so that the company can run smoothly.

Yati Books Stores also has a functional organization structure. The structure facilitates all the
functions carried out by the whole organization. The company has departments to facilitate the
business process which also has good coordination amongst each other. The organization has
a line of authority that flows from the top to the bottom of the organizational hierarchy however
the flow of information in organization is as follow:

Fig 1 : Hierarchy of Yati Books Stores

1.5.4 Employee of Organization

Yati Books Stores is a 5 member team who are assigned to their respective roles. Author
worked as web designer in the product / service PuranoBooks under the supervision of Mr.
Kabi Kc.

4
1.5.5 Contact Information

Location Newroad, Pokhara

Opening Hours 10 Am – 5 Pm (Sun – Fri)

Contact Number 9611101010, 9611055595

Email info@puranobooks.com

Website www.puranobooks.com
Table 1

1.5.6 Duration of Internship

As per the requirement of Institute of Science and Technology, Tribhuvan University, this
internship was done for 45 days dated from 5th December, 2018 and it ended at 20th January,
2019.

Start Date 5th December 2018

End Date 20th January 2019

Total Duration 45 days

Position Asst. Front End Web Developer

Working Days 6 days a week

Mentor Kabi Kc

Office Hour 11am to 5pm

Table 2

1.5.7 Roles and Responsibility

The main task assigned to is to designing the layout of theme. Currently Author has worked
on front end designing module. Mainly, this work have been done in “PuranoBooks”
WordPress theme. With the help of the senior, learning more about plugins and other themes
too becomes fruitful for my career. They supervised not only about making theme but also to
customize the theme using the language such as PHP, HTML/CSS, and that is used while
developing the theme. Author has learned more about plugins, SEO, and many more. The main

5
responsibility was to customize the WordPress theme in time with better efficiency. The role
assigned for author as an intern can be summarized as follows:

 Study of existing theme made by senior as well as other’s theme.

 Building theme by maintaining WordPress theme hierarchy.
 Proper use of slugs, functions, tags, custom and built-in functions whenever needed.

1.6 Statement of the Problem

As there was no previous system in Nepal to perform ecommerce operation in used books
author has to design and develop a system which will provide an easy access to a wide range
of used books categories. From books upload to book selling to the audience. Used books
business was only performed in offline basis, but this system is trying to changed through an
online medium. On the basis of these considerations, following points are enlisted as the
problems.

 Lack of mechanism to handle used books online

 Lack of user friendly system for visitors

1.7 Objective
The major objective of this project is to design and customize the responsive WordPress
themes and plugins, and customizing them. Some of the key objectives are as follows:
 To build the simple UI for visitors to increase purchase
 To provide alternative templates and clear process to use all functions.

1.8 Motivation
We are already familiar about the WordPress, that is application of CMS, and it is the only one
which is highly used CMS around 70% all over the world. Main theme of the WordPress is
“The freedom to build, the freedom to change, the freedom to share”. It is fully a free and open
source content management system based on PHP and MYSQL. It is most associated with
blogging but supports other types of web content including more traditional mailing lists and
forums, media galleries, and online stores.
And WordPress uses at least one theme to make site more dynamic and customizable. It is easy
to use and understand, and has thousands of built in functions, maintained hierarchy of the

6
content. There are many companies who are making commercial themes, plugins etc. and
making huge amount of money by selling them globally.

1.8.1 Motivation for choosing Yati Books Stores

Yati Books Stores has a startup product Puranobooks which is very unique business in the
context of nepal digitally. It is a new company with bright future so, being part of such products
helps to learn something new. At Yati Books Store, first interview was done at 20th November
and got a chance to introduce myself and then they fixed the date. Author explained all
qualifications, trainings taken, and projects done in the college etc. After the interview, they
explained about their company profile, goals, working areas, TOR (Terms of Regulation) etc.
And after all author realized that this is the best choice. That’s why author choose this
company.

1.8.2 Motivation for choosing front end development

World wide web is everywhere or everyone is on world wide web. Web designing is the work
involved in designing a website for the WWW. Web designing can range from designing a
simple single static page of plain text to complex web-based internet applications, electronic
businesses, and social network services. Internet users are growing every day in the numbers,
nowadays web designing & development is very necessary. Because there are lot of business
running through websites which needs web developers and designers. And the WordPress is,
by far, the most popular open source content management system, used by approximately 75
million websites. The best part about it, it is flexible enough to make different types of websites
and easy to customize with themes and plugins. It helps to make the website more advance by
adding different features. Though it is easy to make, it is even more safe and secure. WordPress
is not just limited to writing text but it comes with a built-in media up loader to handle images,
audio, and video files. It can even use in different ways from simple websites to ecommerce
marketplaces and anything in between. Since WordPress is SEO friendly it takes all the SEO
responsibilities that CMS is supposed to fulfill. We can customize the website either through
panel or via codes. It is even used by the developer and customize the theme by editing its
codes. So, author prefered to choose front end development on WordPress.

7
1.9 Scope of the Report
This report is based on the internship period that author have done at Yati Books Stores. This
report focuses on the project or project part that author have completed during internship period
including the detailed description of the tasks. This report also includes detailed description
about author role as a front end developer and collaboration with this organization.

1.10 Report Organization

The report organized in forms of chapters as follows:
 First chapter is about the introduction of the whole report. It includes short introduction
of the organization, introduction of the system, objectives, problem statement and
motivation for choosing the organization and front end development.
 Second chapter includes the system analysis. The topics of this chapter includes: system
requirements, feasibility analysis and data model.
 Third chapter is about the system design. It contains interface design.
 The fourth chapter is about the implementation. It contains the detail about the tools
that are required to design the system.
 The fifth chapter contains testing which includes different testing processes.
 The sixth chapter includes conclusion of the whole project. It also provides information
about what further can be achieved from this project.

8
 CHAPTER 2 : SYSTEM ANALYSIS

2.1 Requirement Collection

Front End Development requirements are a list of necessary functions, capabilities or
characteristics related to WordPress theme and plans for creating it.
The process that was held while collecting the requirements of the system are as follows:

 Team Discussion
Team discussion is the process of discussing how the project should be implemented
by the professionals.
 Understanding the focused group
Theme should have the aim of what the audience want to see in the theme.

2.2 System Requirements

2.2.1 Functional Requirements
Functional requirement of the system describes what the system does. The main functional
requirements of this system are as follows:

 User should be able to view all the necessary information and specification about this

project.

 Browser compatibility.
 Responsive to all devices.
 Administrator (Theme Developer) can modify theme under GPL license.[1]

2.2.2 Non-Functional Requirements

A non-functional requirement describes how the system performs a certain function.
Non-functional requirements generally specify the system’s quality attributes or
characteristics. Puranobooks follows properties such as reliability, usability, storage
occupancy, performance, and response time.

2.3 Feasibility Analysis

A feasibility study is an analysis of how successfully a project can be completed, accounting

9
for factors that affect it such as economic, technological, legal, and scheduling factors.
Project manager use feasibility studies to determine potential positive and negative outcomes
of a project investing a considerable amount of time and money into it.
Feasibility studies allow companies to determine and organize all of the necessary details to
make business work. A feasibility study helps to identify logistical problems, and nearly all
business-related problems, along with the solutions to alleviate them.
Feasibility studies can also lead to the development of marketing strategies that convince
investors or a bank that investing in the business is a wise choice.
2.3.1 Economic Feasibility
Economically, the theme PuranoBooks is bound to do well. There is little cost associated for
using the system. Hence, the system is economically feasible. If owner needs any supports on
this theme then they will be available upon Email Request.

2.3.2 Operational Feasibility

Operational feasibility asks if the system will work when developed and installed. The
system is user friendly so the user can use this system more enthusiastically. The following
points were taken into account for operational feasibility of the system:

 The system causes no harm.

 The theme is affordable and has low operational cost.

2.3.3 Technical Feasibility

The website must be evaluated from the technical aspect first. The valuation of this feasibility
must be based on an outline design of the website requirement having identified an outline
system, the investigation must go on to suggest the type of equipment, required method
developing the system, of running the system once it has been designed. Technical issues raised
during the investigation are:

 Does the necessary technology exist to do what is suggested/assigned?

 Can the system be upgraded if developed?

The theme was designed and developed such that the necessary functions and performances
can be achieved using customization. Therefore, the project is feasible and may still be used
even with the newer version of same software supporting older versions.

10
2.3.4 Schedule Feasibility
Schedule feasibility is a measure of how reasonable the project timetable is. So, feasible
schedule had been managed through proper time schedule.

S.N Task Name Duration

1 Study and Analysis 6 days

2 Theme Design (Layout) 8 days

3 Image Manipulation 5 days

4 Data Entry 4 days

5 Customize section 8 days

6 Testing 4 days

7 Documentation 10 days

Table 3

11
 CHAPTER 3 : SYSTEM DESIGN

3.1 Architectural Design

Architectural design involves identifying major system components and their communications.

Fig 2 : Architectural Design [5]

It shows the association of users to the system. Architectural design is very helpful in short
description of what system does.

Like shown in the above diagram WordPress theme is the system where user views books, get
more information about books and if needed order the book using cart system.

Similarly, admin / shopkeeper publishes books and it's information to their site and also can
manage the stock conveniently.

3.1.1 Use Case Diagram

A use case diagram [7] is a graphic depiction of the interactions among the elements of a system.
A use case is a methodology used in system analysis to identify, clarify, and organize system
requirements. In this context, the term "system" refers to something being developed or
operated, such as a mail-order product sales and service Web site.

12
 Fig 3 : Use Case Diagram
3.1.2 Entity Relationship Diagram
[6]
Entity Relationship Diagram , also known as ERD, ER Diagram or ER model, is a type of
structural diagram for use in database design. An ERD contains different symbols and connectors
that visualize two important information: The major entities within the system scope, and the inter-
relationships among these entities.

13
 Fig 4 : ER Diagram

3.2 Theme Design Layout

PuranoBooks theme used for PuranoBooks is trending theme which have good layout format.
Theme itself is a complete layout of WordPress site so it contains all the features that a site
requires.[2]

14
 Fig 5 : Layout of Theme Design
Navigation Bar

Navigation bar is the place where users can go through all the items that are selected from
website back-end. Actually, it is a page type of the site. We can create menus in WordPress
dashboard by visiting Appearance » Menus section. This will bring to the edit menus screen
which is divided into two columns. The column on our left has our pages, categories, and
custom links tab. The column on the right is where we can add and adjust menu items.

Slider

Slider is the part of website that contains image that continuously changes. In this theme, Slider
Revolution plugin is used to define slider with proper front-end and back-end tools. Sliders
can run slideshows automatically without user input by moving slides on pre-defined time
interval. Sliders can also respond to user interaction like click or swipe to view next or previous

15
slides. Additionally, sliders can also have buttons or thumbnails which users can click to view
a particular slide in the slider. The built-in function for navigation bar is WP_nav_menu().

Sidebar

Sidebar is the section where recently viewed products, search filter etc. are placed as a shortcut
for the content of the site especially for product shop pages. A sidebar in WordPress is referred
to a widget-ready area used by WordPress themes to display information that is not a part of
the main content. It is not always a vertical column on the side. It can be a horizontal rectangle
below or above the content area, footer, header, or anywhere in the theme. Get_sidebar(), and
dyanamic_sidebar() are functions used for calling sidebars.

Posts

A WordPress post is what makes up the blog aspect of your site.

 These are generally news or informational updates about a certain topic or talking point.
 Posts are listed in reverse chronological order and can be tagged, categorized and even
archived on your site.
 WordPress posts are what make up the RSS content of your WordPress blog. So, when
someone subscribes to your RSS feed, your posts will be the content that’s delivered to
them.
 Think of the posts at the news portion of your site. They’re dynamic and constantly
changing the content your end users sees.

The_post() to check whether there exist a posts or not. The_title(), and the_content() retrieves
the title and content of posts. Posts are defined on single.php file.
Pages

WordPress Pages are similar to posts in that they have a title and body text, but they are
different because:

 They are generally reserved for static content or information.

 Examples of this would be an About Me or Contact Us page.
 Pages are not listed by date and can’t be categorized or tagged like WordPress posts.

16
  Pages can have a hierarchy, which means you can nest pages under other pages by
making one the “Parent” of the other, thus creating a group of pages.
 Due to their static nature, pages aren’t included in RSS feeds and won’t have date or
time publishing, Page is defined on separate php file i.e. page.php.

Widgets

WordPress Widget is a small block that performs a specific function. You can add these
widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets
were originally created to provide a simple and easy-to-use way of giving design and structure
control of the WordPress theme to the user. Widgets can be easily dragged and dropped into a
specific widget area. You can find the list of available widgets and widget areas by going to
the Appearance » Widgets section in your WordPress dashboard. Widgets are initialized into
the customizer by using ‘widgets_init’ keyword.[2]

Products

The products shortcode is one of our most robust shortcodes, which can replace various other
strings used in earlier versions of WooCommerce. The [products] shortcode allows you to
display products by post ID, SKU, categories, attributes, with support for pagination, random
sorting and product tags, replacing the need for multiples shortcodes.

Footer

In WordPress theme designing, the footer area of a website is usually defined in the template
file footer.php. In some themes, the area may also contain a widgetized area with multiple
columns that you can use to add WordPress widgets.

17
 CHAPTER 4 : IMPLEMENTATION

4.1 Implementation Tools

Implementation is an activity that is contained throughout the development phase. It is the
process of bringing designed system into operational use. The system is tested first and then
turned into working system. Every task identified in the design specification are carried out in
this phase.

For the implementation, following tools were used:

4.1.1 Front End Tools

HTML5

HTML5 known as Hyper Text Markup Language version 5, the authoring language used to
create documents on the World Wide Web. HTML defines the structure and layout of a Web
document by using a variety of tags and attributes.

Theme or plugin does exactly what you need it to do, and looks almost exactly how you need
it to look. But still, you wish it would look slightly different. For this reason, HTML was used.
HTML tags were used in posts, pages, sidebar text widgets to code a hyperlink by hand, or
adjust the header sizes.

CSS3

CSS3 stands for Cascading Style Sheets version 3. It describes how HTML elements are to be
displayed on screen or in other media. In this project, additional CSS was used when further
customization on the site was required. Sometimes, the theme does not works as per the
requirement of the user so to meet the requirement of the user additional CSS was used. To
add in the icons, to scale the logo properly, change the font size of the specified content, to add
a specific callout box, or style just a section of a post differently CSS was used. The theme
option does provide certain features but to add the features according to the client’s
requirement additional CSS was applied.

18
JAVASCRIPT

JavaScript (sometimes abbreviated JS) is a prototype-based scripting language that is dynamic,

weakly typed. JavaScript is a client-side scripting language meaning that JavaScript code is
written into an HTML page. When a user requests an HTML page with JavaScript in it, the
script is sent to the browser and it's up to the browser to do something with it. It is used to
make webpage more interactive, check or modify the contents of forms, change images, open
new windows and write dynamic page content.[3]

4.2 Other Tools

WORDPRESS PLUGINS

WordPress plugin helps to modify, customize, and enhance a WordPress site. Instead of
changing the core program code of WordPress, we can add functionality with WordPress
Plugins.

In this theme, Contact Form plugin has been used. This plugin is very popular in the market.
It is very helpful for creating various forms like contact forms, booking forms with reservation
procedure, etc.

SNIPPETS

WordPress have lots of built-in features. Just we need to know to use them properly. Snippets
helps to edit the codes that we want to customize. We add all codes there and customize both
layout and pages elements. We can do same using Additional Css section where we need to
put code in right manner but only for css.

PHOTOSHOP(Graphics)

For creating banner, background images, thumbnails and watermarks, we need to use
photoshop as tool and with the help of this we can give clean content to the project which
directly effects to visitors of the website. First, we check the design using mockup of site and
it's products and after approval of mentors, we check temporarily and apply when it is final.

19
 CHAPTER 5 : TESTING

5.1 Browser Compatibility Testing

Browser compatibility test is the test done to ensure that site runs on all browsers i.e. chrome,
safari etc. these browsers run on different platforms so it is very important ensure that the theme
is all platform friendly.

S.N Test Case Test Browser Expected Result Actual Result Remarks

1 C1 Google Chrome Successful Successful Pass

2 C2 Opera Mini Successful Successful Pass

3 C3 Safari Successful Successful Pass

4 C4 Mozilla Firefox Successful Successful Pass

Table 4

5.2 Functionality Testing

Functionality testing involves checking links, pages, widgets, buttons, forms etc. This type of
testing can be performed by client also. Functionality testing is firstly done by developer and then
after client does it. Client first sees if all the requirement that they proposed meets or not and then
feedbacks the developer.

S.N Test Case Test Description Input Test Data Expected Result Actual Result Remarks

1 T-01 Visit View available Display Display Pass

Puranobooks books available books available
website books

2 T-02 Select book and Order book Checkout Checkout Pass

visit different
Get Display Display Pass
page
information information information

20
 3 T-03 Contact to Fill up contact Get notified Get notified Pass
Puranobooks data from from
puranobooks puranobooks

4 T-04 Login to Fill and Click Get Registered Get Pass

Puranobooks Button Registered

Table 5

5.3 Responsive Testing

Responsive testing is very important because theme should give majority of the users as they open
the site throughout the various devices like laptop, mobiles, tablets etc. In most of the cases,
WordPress is also responsive by default.

21
Fig 6 : Mobile View

22
Fig 7 : Tablet View

23
 Fig 8 : Desktop View
This responsive test was done in responsinator and as shown in figure above, this theme is
responsive on all platforms. First figure shows that it is responsive in Mobile devices. Second
figure shows that it is responsive in tablets like devices. Third figure shows that it is responsive in
Laptop devices.

5.4 Unit Testing

In unit testing, several modules and functions are individually tested. Some of unit testing
performed in testing of the themes are:

24
Test Case 1 (Top Header Section)

Test Successful

Test Case 2 (Top Right Menu)

Test Successful

25
Test Case 3 (Sidebar Section)

Test Successful

Test Case 4 (Footer Section)

Test Successful
All tests successfully completed.

26
 CHAPTER 6 : LIMITATIONS AND CONCLUSIONS

6.1 Conclusions
I have learned various types of technologies required for theme, product and layout design. My
main focus had been on front-end designing of theme development. With the help of this internship
I have gained significant amount of knowledge I hope it will be helpful for my future carrier.

Making this project was sometime difficult but solving those difficulties gave very valuable
knowledge. The team of Puranobooks had always helped me to sharpen my knowledge and to
acquire new skills.

Throughout my time of internship, I have acquired lots of new experiences. I got chances to use
different development tools, research on them and use them. Overall in this period of internship
all my theoretical knowledge gained from college had gained a practical experience.

6.2 Limitations
Some limitations of this themes are:

 Theme should follow WordPress Theme Standards.

 Puranobooks theme is design specific and pretty much difficult to change for other
purpose.
 There are lacks of functions that are needed for a book management system which
makes everything to build from scratch.

27
 BIBLIOGRAPHY

[1] Jesse Friedman. WordPress. (Dec 20)

https://www.WordPress.org
[2] Jesse Friedman. WordPress. (Dec 05 – Jan 10)
https://codex.WordPress.org/Blog_Design_and_Layout
[3] Jesse Friedman. WordPress. (Dec 05 – Jan 10)
https://en.support.WordPress.com/video-tutorials/
[4] Syed Balkhi Wp beginner. (Dec 24)
http://www.wpbeginner.com/category/wp-tutorials
[5] 1000 Source Codes Design (Dec 27)
http://www.1000sourcecodes.com/2012/05/software-enginering-transform-maping.html
[6] A.P.G. Brown, "Modelling a Real-World System and Designing a Schema to Represent It", in Douque
and Nijssen (eds.) (Jan 5)
https://technet.microsoft.com/en-us/library/cc505839.aspx
[7] Margaret Rouse (Jan 11)
https://whatis.techtarget.com/definition/use-case-diagram

28
 APPENDIX A

1) Customization Page

2) Footer

29
3) Dashboard

4) HomePage

30