B Achelor Thesis
Total Page:16
File Type:pdf, Size:1020Kb
Bachelor report, IDE 1214, June 2012 Computer Science and Engineering Migrating the New Horizon website to WordPress Information Science, Computer and Electrical Engineering Electrical and Computer Science, Information chool of choolof Yuanwen Zhu & Jia Wang Bachelor thesis S Migrating the New Horizon Website to WordPress Bachelor’s Thesis in Computer Systems Engineering 2012 June Author: Yuanwen Zhu & Jia Wang Supervisor: Wagner Ourique de Morais Examiner: Kenneth Nilsson School of Information Science, Computer and Electrical Engineering Halmstad University PO Box 823, SE-301 18 HALMSTAD, Sweden © Copyright Yuanwen Zhu & Jia Wang, 2012. All rights reserved. Bachelor Thesis Report, IDE1214 School of Information Science, Computer and Electrical Engineering Halmstad University Description of cover page picture: Migrate the New Horizon website to WordPress I Preface First of all, we would like to express our sincere appreciation to our supervisor Wagner Ourique de Morais for his support and feedback during the thesis work. Furthermore, we are grateful to the company Lypson for giving us the chance to do this project, especially Michal Lysek and Tobias Persson who gave us valuable suggestions and technical support. Finally, we want to thank Halmstad University for offering us the opportunity to do this project. It was a good chance for us to learn more. Yuanwen Zhu & Jia Wang Halmstad University, June 2012 II III Abstract There are different problems associated with a static website, such as management and content update. To address these problems, one alternative is to use Content Management System (CMS), such as WordPress. This project describes the process of migrating a static website to WordPress and adding six additional functionalities according to requirements from a company. In the meantime, theme is used to customize the website based on company’s requirements; specific WordPress plugins and widgets are used to implement additional requirements, including submenus, user registration and login, content update, Facebook and Twitter integration, and RSS support for the new content. Besides, solutions are given to resolve problems, such as the conflict with Internet Explorer (IE) and WordPress security issues. The outcome of this work allows the company to use WordPress to manage the website, to publish automatically new content into online social networking services, to provide customized information to registered users as well as to allow web syndication. Key words: Content Management System, Solution Stack, Static and dynamic website, WordPress IV V Contents 1 Introduction ................................................................................................. 1 1.1 Objectives .......................................................................................... 1 1.2 Outline ............................................................................................... 3 2 Background ................................................................................................. 5 2.1 Dynamic Websites ............................................................................... 5 2.1.1 Solution Stack ..................................................................... 5 2.2 Content Management System............................................................... 7 2.2.1 Advantages and Disadvantages of a CMS............................... 8 2.3 WordPress .......................................................................................... 9 2.3.1 Advantages and Disadvantages of WordPress ...................... 10 3 Methods .................................................................................................... 12 3.1 Development Environment ................................................................. 12 3.1.1 XAMPP as Solution Stack .................................................... 12 3.1.2 Environment Establishment ................................................ 12 3.2 WordPress Adaptation ....................................................................... 13 4 Implementation and Results ........................................................................ 17 4.1 Submenu.......................................................................................... 17 4.1.1 Implementation ................................................................. 18 4.1.2 Resulting GUI .................................................................... 19 4.1.3 Manual ............................................................................. 20 4.1.4 Tests ................................................................................ 20 4.2 User Registration and Login ............................................................... 20 4.2.1 Implementation ................................................................. 21 4.2.2 Resulting GUI .................................................................... 22 4.2.3 Manual ............................................................................. 24 4.2.4 Tests ................................................................................ 24 4.3 Content Update using WordPress ....................................................... 24 VI 4.3.1 Implementation ................................................................. 27 4.3.2 Resulting GUI .................................................................... 29 4.3.3 Manual ............................................................................. 33 4.3.4 Tests ................................................................................ 34 4.4 Facebook Integration ........................................................................ 34 4.4.1 Implementation ................................................................. 35 4.4.2 Resulting GUI .................................................................... 36 4.4.3 Manual ............................................................................. 36 4.4.4 Tests ................................................................................ 37 4.5 Twitter Integration ............................................................................ 37 4.5.1 Implementation ................................................................. 37 4.5.2 Resulting GUI .................................................................... 38 4.5.3 Manual ............................................................................. 39 4.5.4 Tests ................................................................................ 39 4.6 RSS Support for New Content ............................................................ 39 4.6.1 Implementation .......................................................................4 0 4.6.2 Resulting GUI .........................................................................4 0 4.6.3 Manual....................................................................................4 0 4.6.4 Tests ......................................................................................4 0 5 WordPress Deployment ............................................................................... 43 6 Discussion and Conclusion ........................................................................... 45 Reference ........................................................................................................ 49 Appendix A - Submenu ...................................................................................... 53 Appendix B - User Registration and Login ........................................................... 56 Appendix C - Content Update using WordPress ................................................... 58 Appendix D - RSS Support for New Content ........................................................ 62 VII List of Figures Figure 1. Client-server architecture for the server-side scripting technology ............. 6 Figure 2. WordPress theme interface .................................................................. 15 Figure 3. Page Attributes in the Races page ........................................................ 19 Figure 4. The submenu is delimited by the orange rectangle in the Figure ............. 20 Figure 5. Submenu is displayed when users are not logged in .............................. 23 Figure 6. User registration and login page ........................................................... 23 Figure 7. Races Page ........................................................................................ 23 Figure 8. Add New Post ..................................................................................... 30 Figure 9. Add the image to the left of the content ............................................... 30 Figure 10. Choose the category ......................................................................... 30 Figure 11. View the post ................................................................................... 31 Figure 12. Show the comment area .................................................................... 31 Figure 13. Administrators can upgrade a standard user to an administrator or a publisher ................................................................................................... 32 Figure 14. Remind the user to login .................................................................... 32 Figure 15. Login interface .................................................................................. 33 Figure 16. Display the post on the Facebook wall ................................................ 36 Figure 17. The new post is