Migrating the website from XAMPP localhost to the Web

Once the full website is all done, the next step is to migrate the site from localhost to the web server.

First step is to back up database and all files just in case something goes wrong.
Turn on XAMPP and go to phpMyAdmin –
1

2

Log in to the server and create a new file where all files will be stored –
1

2

Once the folder is created, open the folder and click on ‘Upload’. There is only one file possible to select therefore, go to the actual folder and zip all files (not full folder just files!). This is because if full folder was zipped, ending of the URL address would be ‘wp_client_wp’ and this is not correct. So if only files are zipped, ending of the URL address will be ‘wp_client’ as it is required.

Once the files are zipped, upload it to the server –
4

Click ‘Go Back’ and there is the zip file –
3

Extract the zip file –
6

7

Once the file is extracted, delete the zip file to avoid hacking into the site –
9

Next step is to create database on the server in phpMyAdmin –

Log in to My cPanel and click on ‘MySQL Databases’
Untitled

Step 1 – Setting up a database

After clicking on ‘MySQL Databases’ option, this window will appear –
1

Choose name of database and click ‘Create Database’. Confirmation window will appear saying that database was created –
2

Click ‘Back’ and the main screen will appear.

Once database is created, username and password needs to be created for database.
5

Always use ‘Password Generator’ for safeness, it is hard to hack! Make sure that generated password is copied and saved somewhere safe.
4

After creating username and password for the database, user needs to be added to the database.
7

After clicking ‘add’, the window with privileges will appear (what user can and cannot do in database). By clicking them all, user has full control of database.
9

Final stage screen looks like this –
10

Once the database is created, go back to ‘File Manager’, find ‘wp-config.php file’ and click ‘Code Editor’ –
10

Add password, username and database name for the new created database and save changes –

12

Then go to phpMyAdmin in localhost and export database again but with different settings. Click on ‘Custom export method’ –
15

Scroll down and tick ‘View output as text’, then click ‘Go’ –
16

This option will output the full database in text so select it all and copy –

17

Then go to phpMyAdmin on the server and find new database that just been created. Click on the title and then ‘SQL’. Paste all the text in there and click ‘Go’ –
18

This way, the full database from localhost just has been imported to the database on the server. Click on ‘Structure’ and check if all tables and content are there –
19

What is needed to do now is to change and update WordPress URLs in new database as at the moment, all URL are set up to localhost which is not needed anymore. This is an example of the code that is needed to rewite URLs –
4

(Source: http://wpbeaches.com/updating-wordpress-mysql-database-after-moving-to-a-new-url/)

Copy and paste the code into text editor and change URLs. Where it sayshttp://www.oldurl’ – replace that with http://localhost/WP’ and where it sayshttp://www.newurl’ – replace is with http://www.veronikalesnakova.co.uk/wp_client’ –
20

Once the URLs are all changed, copy the code and paste it into ‘SQL’ and click ‘Go’ –
21

22

Now it is all done and migrated.

Type the URL of the website into the browser and see the result –
23

There is and error that means that sections of the site are not loading in right order therefore, this line of code needs to be added into ‘functions.php’ –
5

(Source: http://php.net/manual/en/function.ob-start.php)

Open ‘functions.php’ file on the server and add ‘ob_start();’ at the top of the code –

24

This way all sections of the website i.e. header, footer etc. will load in right order.

NOTE: This is not the right way of adding code into the file! It should be never done on the server but in files and then uploaded to the server. However, for saving time, this time the code was changed on the server.

Refresh the website and it is all done and working!

However, after clicking on the navigation, another pages are not visible and it says  that the files are not there. To fix that, go to the Admin section of the website > Settings > Permalinks > Save Changes.
All pages are now loaded and saved and the full website is functioning perfectly fine.

(Source: https://premium.wpmudev.org/blog/migrate-wordpress-xampp-localhost-web/?utm_campaign=Roost&utm_source=Roost&utm_medium=push)

The final evaluation

The project has been a challenge in many ways starting from find a client, arranging clients meetings, time management, designs, working with a client and customising the designs according to needs of a client and finally using two different frameworks together to create the final product. All of that has been extremely challenging but as the project proved, everything was well managed and the client is happy with the product which is the most important thing.

Choosing WordPress and Foundation to create fully dynamic website for the client was a good decision as it allowed learning in wide area. These two frameworks are completely different the way layout and files are structured and learning how it is all managed and how it works together had to be done. WordPress is complex and powerful content management system and this project showed that it can be used for more than blogging. There are many different ways of using WordPress and for this project, creating own theme had to be done. Foundation is front end framework that has mobile first approach which allowed better understanding of how responsive websites are done. Pinegrow web editor was used to build static version of the website which then got converted into dynamic WordPress site.

Involvement with community of practice was done throughout the full project as these two frameworks were never used before and there were a lot of problems along the way. However, involvement in communities of practice allowed to expand on methods of independent problem solving which will be useful for future.

This project allowed to get a feel of what it is like to be a freelancer and deal with clients on one to one basis. Also it provided valuable experiences in trying to explain technical matter to people that know nothing about this subject.

Overall, the project was success in every aspect and a lot of learning took the place. The client is happy with the final product and it will go live in next two weeks.

 

Reflection on the last client meeting

Purpose of the last client meeting was to show the final design of the website to the client and also go through functionality of back-end. One to one tutorial on how to manage the content of the website has been explained thoroughly and all questions followed have been answered so the client has no concerns for the future.

The client is happy with the design of the website but also with content management system and thinks that it is simply to use and straight forward, which was one of the requirements for this project. This was important because the client’s technical abilities are not at high level.

The client’s concerns were how to log in to CMS which was thoroughly explained and agreed to create a document with all URL links and information needed to log in to admin of CMS. Another concern was hosting and domain side of the project which has been tried to sort out for quite a long time because the club already has hosting and domain but it is managed by private person and contacting will need to be done. The client was assured that hosting and domain side of the project will be dealt with and sorted. Also, explanation of how hosting and domain providers work was provided.
Advice not to use mobile phones to take photos for the club’s website was suggested and explained why to the client, but instead of mobile phones use professional camera for better quality photos. However, the client will continue taking photos with mobile phones as all members of staff take photos and then upload them to Facebook fan page. All that can be done is to suggest better way of doing things to the client and it is up to the client if it will put it in practice.

Overall, the client is happy with the full website both back-end and front-end and it has been agreed to go live within next two weeks.

SEO – Google Webmaster Tools

Google webmaster tools is a tool that helps to find out if the website is easy to find in Google search, check errors in the website for easier fix to make the website appears in Google search results in high place.

Google account is needed in order to access this tool.

Webmaster tools helps to check if users link to pages of the website and how often the website appears in Google search results. This way it is possible to find out what pages of website are mostly visited by users and focus on most visited ones. Good feature of Webmaster tools is that if there is any issue with website, it will automatically send an e-mail to make the admin aware of existing problems.

Untitled

Click here to visit the site.

Setting up an account

As mentioned above, Google account is needed to sign in. After logging in, add website that requires to be tracked and it will ask for verification. Simple press on ‘Verify now’.

2

Another page will provide all information needed to verification of the website. Recommended method is safer way to go. Follow instructions and click ‘Verify’

404

After clicking ‘Verify’, successful verification of ownership.

4

This is working screen –

5

At the moment, dashboard is empty as it just been created. The admin automatically received e-mail providing more information on what to do next –

6

The next step is to add site map for easier orientation of Google in the website witch helps with SEO.

SEO – accessibility test

Accessibility is important part of designing process. This is because every website must be accessible for people with different disabilities i.e. colour blindness

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability.
Source: https://www.w3.org/standards/webdesign/accessibility

There are rules of accessibility that should be kept in mid while designing any website and they can be find on W3C.

There are also different accessibility check tools that can be find on the web. For this test, http://www.etre.com/tools/accessibilitycheck/ has been used –
395

Result – 

396

Reflection

Accessibility test showed that there is only one problem and it is with font size that is used on the website. The font size should be bigger so users with sight problems can see the text.

SEO – JavaScript, HTML and CSS Minifier

PageSpeed Insights test has suggested to minify HTML, CSS and JavaScript to improve loading time of the website.

This is done by minifier online program – https://javascript-minifier.com/

Simply paste JavaScript code and click ‘Minify’ –
394

In other window there is minified version of pasted JavaScript which is available to download as File or just simply copy the code and save it in new file i.e. mini.app.js

This is the same process for HTML and CSS –
http://cssminifier.com/

https://kangax.github.io/html-minifier/

SEO – PageSpeed Insights test

As part of SEO, PageSpeed Insights test has been done to find out loading time of the website on mobile and desktop. User experience were also provided.
Here is the link for PageSpeed Insights test – https://developers.google.com/speed/pagespeed/insights/

This is the result for mobile –

389390

This is the result for desktop –391

Reflection on the results

Loading time of the website for both mobile and desktop is little bit slow and this test suggested ways of improving it by minifying JavaScript, CSS and HTML, reducing server response time and optimising images. This is however not possible to do in time scale, but will be considered for the future improvements.

Positive result is user experience on mobile devices which was 95 out of 100. This is crucial result as most of the fans of the club use mobile devices to stay in contact with the club.