Website Development

This is my Bachelor graduation project. In this project, I learned from scratch how to do front-end development and connect the back-end database to the web pages. To be honest, these were not quite relevant to what I learned during my bachelor courses, but I made the choice to take this as my graduation project because I like to be engaged with something new and projects with free play. I encountered many problems in the process, sometimes very frustrating and under great pressure due to time limits, but I actively sought help and enjoyed the learning process and gained a sense of accomplishment from it. This is also the project which inspired me to turn my interest to human-technology interaction.

In this project, I designed and developed the a website of management system for combine harvesters. The target users are mainly two kinds of people: technicians in factory (i.e., admins) and farmers (i.e., users). They would have different needs for the website, thus I differentiated and diverted them at login, navigating them to the corresponding site frames. For example, admins had to have a holistic view of the products all over different regions, therefore, I arranged the Failures Summary module in the framework for admins and also allowed them to sort by failure types and regions. For users, it would be helpful if they could have the guidance or manual when their machines break down because in this way they could deal with the problem by their own. Hence, I set up a Troubleshooting module for the users and also have a page of Contact in case users could not solve the problem after their own try.

In this Project, I...

• Analyzed the functional needs of the website for different target groups

• Developed a website with a simple interface and the ability to communicate with the back-end database

• Separated these functions into small modules and designed the web layout

• Connected some parts of the front-end to the database via PHP file, and after searching and comparing data, leaded to different types of homepages (i.e., for admins or users) or displays the required information

• Used PHP Data Objects (PDO) to connect to the database and transfer the corresponding data by distinguishing the device name

• Used Echarts to visualize the data

• Tools: Wampserver (for configuration o f the environment), Dreamweaver (for programming), Navicat (for database management), ECharts (for visualization)