Site Loader

1

Building Web Application
By
Sreelekha Paturi

An Internship Report submitted to
University at Albany
in partial fulfillment of the requirements
for the degree of
MASTER OF SCIENCE
in
Computer Science and Engineering

Dr. Pradeep K. Atrey
Professor name

05/07/20118
Date

2

AUTHORIZATION FOR REPRODUCTION
OF PROJECT

I grant permission for the reproduction of this project in its entirety, without
further authorization from me, on the condition that the person or agency
requesting reproduction, absorb the cost and provide proper
acknowledgment of authorship.

05/07/2018
Sreelekha Paturi
1400 Washington Avenue
Albany, NY-12222

3

ACKNOWLEDGEMENT

This report has been prepared for the internship that has been done in the
Rockefeller Institute of Government, Albany, NY with the purpose of
fulfilling the requirements of the course CSI 698.
I am using this opportunity to express my deepest gratitude and special
thanks to my supervisor Mr. Kyle Adams in Rockefeller Institute who
guided me and supported me throughout my internship period.
I am thankful to Prof. Pradeep Atrey for providing me an opportunity to take
up CSI698 internship course under his guidance.
Lastly, I would like to thank all my colleagues in Rockefeller Institute for
their support throughout the internship period.
The internship I had with Rockefeller Institute of Government was a great
opportunity for learning and also for my career growth. I will strive to use
gained technical skills and knowledge in the best possible way.

4

ABSTRACT

This report describes the internship I did at Rockefeller Institute of
Government in Albany, New York. The Rockefeller Institute conducts
nonpartisan, data-driven research and analysis on state and local government
and finance, American federalism, public management, and New York State
issues. The website plays a major role in the organization as Researchers in
the Institute relies on the Rockefeller website for the data needed for their
research. Therefore, website building is the foremost important task and I am
taking pride in saying that I have played a key role in creating a new website
for the Rockefeller Institute.
My role included providing support in building the website, migrating the
site from old site to new website and handling issues in the development of
the website. A solution has been proposed for customization of web
application in general. I have contributed my part in finding a solution for
creating database search index using PHP & MySQL database connectivity.
I have also extended my support in automating the manual tasks by using
technical skills like Java & Python. This report is a description of my 15-
week internship carried out as a compulsory component of the course at
University at Albany, SUNY.

5

TABLE OF CONTENTS
1 Introduction ………………………………………………………………………………………………………..7
1.1 Overview of the organization ……………………………………………………………………. 7
1.2 Vision and Mission of the organization ……………………………………………………… 8
1.2.1 Vision ……………………………………………………………………………………………… 8
1.3 Context of Internship ……………………………………………………………………………….. 9
1.4 Challenges and Goals ………………………………………………………………………………. 9
1.5 Limitations of the report …………………………………………………………………………. 10
2 Technical aspect ………………………………………………………………………………………………..11
2.1 WordPress ……………………………………………………………………………………………… 11
2.1.1 Overview of WordPress: …………………………………………………………………… 11
2.1.2 Website Development using WordPress: ……………………………………………. 12
2.4 WordPress Database management using MySQL and PHP MYADMIN ……….. 13
2.4.1 Managing WordPress Database using phpMyAdmin ……………………………. 14
2.4.2 Creating a WordPress backup using a plugin and optimizing the database 14
2.5 Writing the automation scripts using python and Java …………………………….. 15
2.5.1 Python ……………………………………………………………………………………………… 15
2.5.2 Java ………………………………………………………………………………………………… 15
3 Archiving folders ………………………………………………………………………………………………16
3.1 Selenium web driver ……………………………………………………………………………… 16
3.2 Locating UI Elements (Web Elements) ……………………………………………………. 16
4 Creating database search index ……………………………………………………………………………20
5 Tableau …………………………………………………………………………………………………………….21

6

6 How internship paved my career path ………………………………………………………………….22
6.1 Relatedness of the university’s coursework to the internship……………………21
6.2 Benefits derived from internship ………………………………………………………………. 22
7 Conclusion ……………………………………………………………………………………………………….23
8 References ………………………………………………………………………………………………………..24
TABLE OF FIGURES
Figure 1– Screenshot of the Rockefeller Institute new website ………………. 25
Figure 2– Screenshot of the pages added to the website ………………………… 26
Figure 3– Screenshot of the data files uploaded into website …………………. 26
Figure 4– Screenshot of the wordpress admin page ………………………………. 27
Figure 5– Screenshot of the HTML ; CSS code in the website ……………… 27
Figure 6– Screenshot of the plugins added to the website ……………………… 28
Figure 7– Screenshot of the Rockefeller Institute new website ………………. 29

7

1 INTRODUCTION

As a full-time student at the University of Albany, SUNY I have enrolled for
CSI698 Internship course. I have done my Internship in Rockefeller Institute
of Government, Albany, New York. The degree towards I am currently
studying is a Master of Science in Computer Science. Since I find myself
more interested in web development and design, I was happy to be assigned
the position of a trainee in web development in a Rockefeller Institute. I am
going to explain all the challenges and goals I have faced in my 15-week
internship and the solutions I have found.

1.1 OVERVIEW OF THE ORGANIZATION
The Nelson A. Rockefeller Institute of Government is a public policy think
tank founded in 1981 that conducts cutting-edge research and analysis to
inform lasting solutions to the problems facing New York State and the
nation.
As the public policy research arm of the State University of New York, the
Rockefeller Institute of Government promotes better policy by conducting
deep research and analysis on the challenges facing communities across the
country, and we connect that research with the public and the decision
makers who can make a difference.
The Institute’s mission is to improve the capacities of communities, state ad
local governments, and the federal system to work toward genuine,
evidence-based solutions. Through rigorous, objective and accessible

8

analysis and outreach, we give citizens and governments reliable facts and
tools to understand public problems and inform public decisions.
1.2 VISION AND MISSION OF THE ORGANIZATION
The mission of the Nelson A. Rockefeller Institute of the Government of
SUNY is to improve the capacities of communities, state and local
governments, and the federal system to work toward genuine solutions to
the nation’s problems. Through rigorous, objective, and accessible
analysis and outreach, the Institute will give citizens and governments
facts and tools relevant to public decisions. It will also research and
promote changes aimed at improving how public institutions operate,
such as how they work across Institutional divisions to solve common
problems. The institute embodies the belief that universities and colleges
can improve governance through research, expert advice, training for
public service, and public dissemination and engagement.
1.2.1 Vision
The Institute’s mission is broad and can be adapted to future, yet-
unknown public problems. In the next decade, however, the institute
expects to address the following challenges, among others:
1. Generating and using knowledge for public actions, including
the evaluation of their impacts.
2. Improving fiscal capacity and management in state and local
governments.
3. Engaging young people and communities in state and local
governance.

9

1.3 CONTEXT OF INTERNSHIP
I have been assigned the task to provide technical support in building the
new website for the Organization Rockefeller Institute of Government. I
have given my ideas and opinions on improving the old website and
customizing the new website for a better user experience. Based on the
discussed ideas and proposals of all the team members, we went ahead and
created the map of the website and started working in the development of the
website.
1.4 CHALLENGES AND GOALS
When migrating the old website to new website, the first and most important
thing to do is creating a backup of the old website. There is a lot of manual
work included in creating back up files by archiving folders from old
website into a new website, extracting the text content from PDF files. The
goals set were:
1. Creating development environment like Eclipse, PyCharm, &
XAMPP for the development work expected to be done while
migrating the site and creating the new website.
2. To automate the task of creating archive folders using selenium web
driver and java code.
3. To write the script for extracting the text from PDF files
4. Exploring the different new websites and noting down the ideas for
customizing the new website to make it user-friendly.
5. Creating database search index for finding data in the reports
according to the Geographical area and name of the issues.
6. Creating new pages on the website and styling them using WordPress,
HTML&CSS.

10

1.5 LIMITATIONS OF THE REPORT
There are some limitations of the report as the Institute data is confidential.
However, despite the limitations, I have tried my best to prepare a report
with all the information I could gather it. The limitations of the report are
mentioned below:
1. There are some restrictions in disclosing some information as the
Institute’s research data is confidential.
2. As I didn’t work for a longer period, I couldn’t participate in the
development of website fully.

11

2 TECHNICAL ASPECT

Website development has many different phases. Among them, Creation of
web layout design, writing code, maintaining company websites and
managing site content are important phases and I have successfully
completed these with the help of my supervisor. WordPress is the mainly
used application for creating the website and adding new pages to the
website. For the completion of the given tasks, the following languages and
scripts have been used; HTML;CSS for the construction and design of the
layout. PHP for dynamic functioning. MySQL database is used for creating,
storing and updating the data. Tableau tool is used for analyzing the data. I
have also used Python and java scripts for automation. Selenium Web-
Driver was used mainly for automating the manual task of archiving the
folders.
2.1 WordPress
WordPress is web software that can be used to create a highly functional
website. WordPress is chosen as a general-purpose framework used for
creating a website. This is the best way of keeping the code up to date and
viable commercially, while still using the Open source model. There are
several freely available, high-quality themes and plugins that allow us to
customize the look and functionality of the site.
2.1.1 Overview of WordPress:
The core code contains all the default functionality that makes up the
WordPress content management system. The core code includes everything
which is necessary for admin backend functions like scheduling posts,

12

creating users and passwords. The core code takes care of the entire
responsibility for the backend of a website. Themes are responsible for the
front-end and website’s appearance. We can buy themes based on our
interest and which is suitable for the website. We have used the WordPress
admin with URL www.rockinst.org/wp-admin to create posts, pages, and the
other site content. Plugins are used to provide the additional functionality to
WordPress like controlling and modifying the aspects of WordPress system.
2.1.2 Website Development using WordPress:
The following are the steps to be followed in developing the website using
WordPress:
1. Finding a domain name and host
2. WordPress can be downloaded and installed from WordPress.org and
setting up in the system.
3. Choosing a Theme/Template for the site.
4. Log into the WordPress admin site using the credentials and open
WordPress dashboard
5. Creating a home page, adding new pages and adding widgets if
required.
6. Install other required plugins

2.2 HTML
Hypertext Markup Language(HTML) is the standard markup language for
creating web pages and web applications. HTML is responsible for giving
websites structure. HTML elements are the building blocks of HTML
pages.

13

In WordPress, a text editor is provided already where HTML markup can be
seen for each the pages and posts. By switching to the editor, we can do
some additional editing.
I had written a small script of HTML file and done small changes to already
existing HTML content to create web pages and modify the pages.
Images in HTML:
Image tags are used to embed images. I have inserted the images to the posts
using Media Library and also HTML. Here is an example of embedding an
image using the tag.

2.3 CSS
CSS is used for applying styles to HTML structure. Cascading Style
Sheets(CSS) is a style sheet language used for describing the presentation of
a document written in a markup language, primarily HTML. CSS allows us
to store style presentation information separate from our HTML structure.
WordPress themes use a combination of template files, template tags, and
CSS files to generate WordPress site’s look.
2.4 WordPress Database management using MySQL and PHP
MYADMIN
WordPress database management can be done using PHP as its scripting
language and MySQL as its database management system. We used
WordPress for managing database using phpMyAdmin which includes
creating database backups and optimizing the WordPress database.
WordPress uses PHP programming language for storing and retrieving data

14

from the database. The information stored in a WordPress database include
posts, pages, comments, categories, tags, customer fields, users, and other
site options such as site URLs etc. Database name, host, username, and
password was given while installing WordPress which was stored in the
configuration file(wp-config-php). This information was used to create the
tables. After the installation, WordPress runs queries to this database to
dynamically generate HTML pages for the website.
2.4.1 Managing WordPress Database using phpMyAdmin
phpMyAdmin is an open source software that provides a web-based
graphical user interface to manage the MySQL database. I have performed
various tasks from phpMyAdmin such as find or replace a certain word in
the post, add the admin users and change passwords etc.
2.4.2 Creating a WordPress backup using a plugin and optimizing the
database
WordPress backup is very important for WordPress security. We have many
plugins to serve this purpose of WordPress backup, but we have chosen
BackupWPup plugin for the backup solution for WordPress. We also have
had the option of optimizing the database using phpMyAdmin where we can
optimize the WordPress tables by defragmenting tables. It will make the
WordPress queries to run little faster and reduce the size of the database.

15

2.5 Writing the automation scripts using python and Java
2.5.1 Python
Python is a high-level, interpreted, interactive and object-oriented scripting
language. While migrating a site from old website to new website, the major
task was to archive the PDF files for backup. I have found a simple solution
for extracting the text from PDF files. I have written simple Python script
(by taking reference from an already existed script) for this solution which
extracted all the text form PDF files.
2.5.2 Java
Java is a general-purpose computer-programming language that is class-
oriented and object-oriented. Since we have huge data, it would be difficult
to go into each folder and see whether there is data inside it or not.
Therefore, I have used Java language to write a code to list down the file
structure. After the successful execution, the output of the file shows which
folder is empty and which is file and it will also display the filename.

16

3 ARCHIVING FOLDERS

Another major task in the internship period was creating archive
folders for back up of the website. This has been very tiring and boring
manual work since a huge number of files are there. So, I have found the
solution by using selenium web driver and java. I have written the script
with the help of java and Selenium Web-driver for automating the task.
3.1 Selenium web driver
Selenium-WebDriver makes direct calls to the browser using each
browser’s native support for automation. Selenium WebDriver accepts
commands sent in Selenese, or via a Client API and sends them to a
browser. This is implemented through a browser-specific browser driver,
which sends commands to a browser, and retrieves results. Most browser
drivers launch and access a browser application such as Fire fox, chrome and
internet explorer.
In selenium web driver, locating elements is the first and major task.
There are many ways for locating UI elements, but I have located elements
using ID, class name and Xpath. The following sections will explain in brief
how locating elements can be done.
3.2 Locating UI Elements (Web Elements)
Locating elements in WebDriver can be done on the WebDriver instance
itself or on a Web Element. Each of the language bindings exposes a “Find
Element” and “Find Elements” method. The former returns a Web Element
object matching the query and throws an exception if such an element
cannot be found. The latter returns a list of Web Elements, possibly empty if

17

no DOM elements match the query. WebDriver software testing tool which
is also known as Selenium has different ways of locating an element. But, I
have implemented three strategies for finding elements named By ID, By
Class name, By name and by XPath.
Locating UI element by ID:
This is the most efficient and preferred way to locate an element when you
know ID attribute of an element. Below is an example for finding an element
by ID.
Eg: driver.find_element_by_id(‘ ‘)
Locating element by Class Name:
“Class” in this case refers to the attribute on the DOM element. Often in
practical use there are many DOM elements with the same class name, thus
finding multiple elements becomes the more practical option over finding
the first element.
Eg: driver.find_element_by_class_name(‘yourname ‘)
Locating element By Xpath:
At a high level, WebDriver uses a browser’s native XPath capabilities
wherever possible. On those browsers that don’t have native XPath support,
we have provided our own implementation. This can lead to some
unexpected behavior unless you are aware of the differences in the various
XPath engines.
Eg: driver.find_element_by_xpath(‘ yourxpath’)
After automation script is executed, the following steps happen:

18

1. For each selenium command, a HTTP request is created and sent to
the browser driver.
2. The browser driver uses a HTTP server for getting the HTTP requests.
3. The HTTP server determines the steps needed for implementing the
selenium command.
4. The implementation steps are executed in the browser.
5. The execution status is sent back to the HTTP server.
6. The HTTP server sends the status back to the automation script.

The following is the sample java code of automation work done using
selenium web-driver.

public class selenium2 {

public static void main(String args){

System.setProperty(“webdriver.chrome.driver”, “C:\Selenium
driver\chromedriver.exe”);
WebDriver driver = new ChromeDriver();
driver.get(“http://rockinst.org/wp-admin/”);
System.out.println(driver.getTitle());
//WebDriverWait wait = new WebDriverWait(driver, 40);
driver.findElement(By.id(“user_login”)).clear();
driver.findElement(By.id(“user_login”)).sendKeys(“rigadmin”);
driver.findElement(By.id(“user_pass”)).clear();

19

driver.findElement(By.id(“user_pass”)).sendKeys(“W#rLtxdNMJSOme0qq
9”);
driver.findElement(By.id(“wp-submit”)).click();
WebDriverWait wait = new WebDriverWait(driver, 20);

driver.findElement(By.xpath(“//*@id=’toplevel_page_nestedpages’/a/div3
“)).click();

driver.findElement(By.xpath(“//*@id=’toplevel_page_nestedpages’/ul/li2
/a”)).click();

driver.findElement(By.xpath(“//*@id=’menuItem_4294’/div/div2/a1/sp
an1”)).click();
WebDriverWait wait1 = new WebDriverWait(driver, 20);

WebDriverWait wait1 = new WebDriverWait(driver, 30);

}
}

20

4 CREATING DATABASE SEARCH INDEX

Searching for the required information among the tons of data is very
difficult task. Therefore, we came up with the solution called database
search index. I have been part of the task creating database search index
which retrieves the data based on the SQL query and displays the data based
on Geographical area, issue areas and research field.
WordPress uses PHP to store and retrieve data from MySQL databases using
SQL queries within the PHP markup. MySQL uses a storage engine to store,
handle and retrieve information from a table. Plugins and themes use
database to store data, such as options and then use SQL within the PHP
markup to query the database and output content dynamically.
Using custom database tables:
We used dBDelta to handle the table creation as well as table schema
updates. To create a custom table initially on plugin install, we need to hook
our function to the register_activation_hook function. And then we will
create a table with the data we have using plugin. We also can update the
table using pugin_loaded action.

21

5 TABLEAU
In Rockefeller organization, analyzing data has been given more
importance as it would be very helpful in Research analysis. Analyzing tons
of data for every state manually is time consuming process and we can’t
make it pleasant in visualizing manner even with graphs and charts. So here
comes Tableau software by which analyzing data has become much easier
and data analysis is shown very accurately. Tableau is a business
intelligence tool for visually analyzing the data. Users can create and
distribute an interactive and shareable dashboard, which depicts the trends,
variations, and density of data in the form of graphs and charts. The purpose
of Tableau in our organization is mainly used by researchers for visual data
analysis.

22

6 HOW INTERNSHIP PAVED MY CAREER PATH
6.1 Relatedness of the university’s coursework to the internship
I have completed all my core subjects by the time I got the internship
opportunity. The knowledge gained from the core subjects like CSI 508-
Database systems and CSI 518-Software Engineering has been very useful
for me throughout my internship period. I have created web application
along with my other team members in Software Engineering class to fulfill
the requirements of the course. This knowledge has helped me in my
internship period while creating the new website using HTML&CSS and
PHP.
6.2 Benefits derived from internship
The 15-week internship period was most valuable and earning experience in
my life. The Internship helped me understand work ethics, employment
demands, responsibilities and opportunities. The work I have learnt here
provided career direction and I have gained confidence in my abilities and
my technical skills. It enhanced my CV and thus would be helpful for my
career development.

23

7 CONCLUSION

In a Rockefeller Institute, this internship has been an excellent and
rewarding experience. I can conclude that there have been a lot I’ve learnt
from my work at the organization. The work culture in the organization is
very peaceful and the place always has offered me the space to explore more
and more. I must admit that the technical aspects of the work I have done are
not flawless and could be improved provided enough time. In my 15- week
internship, I didn’t get enough time to do more tasks like participating in the
website development till last and my work in creating database search index
has been limited. I believe my time spent in developing the website has
given me chance to discover new things. I have contributed to finding an
acceptable solution to an important aspect of web design and development.
Among the several things that I’ve learned, two main things are time
management and working independently.

24

8 REFERENCES
1. http://rockinst.org/about-us/
2. https://en.wikipedia.org/wiki/Cascading_Style_Sheets
3. https://premium.wpmudev.org/blog/wordpress-development-
beginners-getting-started/
4. https://www.seleniumhq.org/docs/03_webdriver.jsp
5. https://www.tutorialspoint.com/tableau/index.htm
6. http://www.wpbeginner.com/beginners-guide/beginners-guide-to-
wordpress-database-management-with-phpmyadmin/
7. https://www.quora.com/How-does-the-Selenium-WebDriver-work
8. https://www.htmlgoodies.com/beyond/webmaster/projects/article.php/
3870531/WordPress-A-Web-Developers-Tutorial.htm
9. https://www.sitepoint.com/working-with-databases-in-wordpress/

25

9 LIST OF FIGURES

Figure 1
Screenshot of the Rockefeller Institute new website

26

Figure-2
Screenshot of the pages added in the Website

Figure- 3
Screenshot of the Data files uploaded into website using WordPress

27

Figure-4
Screenshot of the WordPress Admin page

28

Figure-5
Screenshot of the HTML;CSS code in the webpage

Figure-6
Screenshot of the plugins used in the WordPress

29

Post Author: admin