Browsed by
Category: Development problems

How I broke WordPress site

How I broke WordPress site

broke wordpress

For the last two months, I was taking a little break with writing a blog. I wanted to finish writing my book and close some other projects. I succeeded. I also have an idea to use this time to work a bit on my blog. I decided to move it to another hosting server. That my adventures begins. I installed it on the new server and migrate all the content. The deciding moment was changing in the domain configuration. The only things that I needed to do are: change DNS addresses and WordPress address in its configuration.

What can goes wrong in this scenario?

I found it out very soon. I made a mistake in WordPress address.

wordpress_address

Then I try to move to some other configuration option and the page fails to load. It appears, that every link on my site direct to nonexistent address.

wordpress_blog_link

“Oh no”, I thought, “all the work for nothing and I have to start from the beginning”. However, after some search, I find out that I can still fix it. Generally, I have 2 options to do it. I also found how I should do this migration to not worry about mistakes.

Edit wp-config.php

These two variables can be defined directly in your wp-config.php file. It contains all local configuration of your WordPress and can have also these variables.

define('WP_HOME','http://example.com');
define('WP_SITEURL','http://example.com');

However, at the beginning, it doesn’t contain these variables defined at all and you have to add them to file.

Edit in database

The other method to fix this problem can be done from the database level.

Table wp-options contains the same configuration variables that can be defined in file wp-config.php. We should change the values of rows with the name: siteurl and home. You can see that is is the same names as for PHP file.

How I should do this

At the end, I discover how we can enable a special mode to migrate your WordPress site. It has a name: relocate mode.

Setting a parameter

define('RELOCATE',true);

into wp-config.php file let us enter the relocate mode. It ensures that siteurl variable won’t be taken into consideration during page generation. Address that led us to the main page will allow us to operate within the administration panel. This option is limited only to the administration panel. The regular blog will not work if we made a mistake, but we will be able to correct it from WordPress configuration.

We should remember to disable this relocate mode after our maintenance work.

That is an easy way to break a blog, stress a bit and finally fix it.

[mc4wp_form id=”510″]

Photo source

Angular – KendoUI Grid – How to integrate it properly

Angular – KendoUI Grid – How to integrate it properly

If you want to use both Angular and Kendo UI components sooner or later you will need to integrate this two libraries.
The majority of this task is quite easy and well documented (http://demos.telerik.com/kendo-ui/grid/angular), but the tricky part is in integration with Angular $http service (or in Angular factories in general). You can use standard Kendo Grid functionality like:

dataSource: {
	type: "aspnetmvc-ajax",
	transport: {
		read: {
			url: "user/registered"),
			type: "GET",
			beforeSend: function (req, options) {
				var authorizationToken = '...';
				req.setRequestHeader('Authorization', authorizationToken);
			},
			complete: function (e) {
				vm.loaded = true;
			}
		}
	}
	...
}

As you can see, you should add some data to each request and also there is custom behaviour when this request successed. But this solution uses jQuery ajax module, not Angular factories. If you want to keep modularity of your code you should use Angular data access methods instead.

In the internet you can find some information about it (1, 2 below), but that is not all. Let’s assume that we have userService factory with method getRegisteredUsers(parameters). We want use it to load data from server.

dataSource: {
	transport: {
		read: function (optionsData) {
			this.options = { prefix: "" };
			var data = kendo.data.transports["aspnetmvc-ajax"].prototype.options.parameterMap.call(this, optionsData.data, "read", false);
			
			var resource = userService.getRegisteredUsers(data).then(
				function success(data) {
					optionsData.success(data);

					vm.loaded = true;
				},
				function failure(data) {
					optionsData.error(data);
				});
		}
	}
	...
}

There are few worth attention elements here. In the first example an object was passed to transport.read property, but in that case we pass function with our custom implementation. On line 7 we use userService factory to obtain data from server, but we need parameters with information about filtering, sorting, etc. We have them in optionsData parameter, but we want have them in other format. To convert them we can use standard Kendo function parameterMap. We need to get these parameters straight from kendo.data.transports (line 5). Then we can pass them in correct format to our factory method and use result to fill dataSource structures (using optionsData.success(data)).
Also we could add our custom behaviour when data will be successfully loaded.

You might wonder, where we lost Authorization code. Because adding authorization header is global behavior, we can move this code to Angular interceptor. That let us implement it in just one place and use it in whole application.

You may read more about parameters conversions in (3, 4)

1 http://blog.falafel.com/using-angularjs-http-service-inside-kendo-ui-datasource/
2 http://blog.falafel.com/using-angularjs-http-service-inside-kendo-ui-datasource-part-2/
3 http://www.telerik.com/forums/parametermap
4 http://www.telerik.com/forums/datasource-transport-function-mode-read-and-wrong-request-parameters

Visual Studio – TypeScript version problem

Visual Studio – TypeScript version problem

TypeScript project with Angular in Visual Studio – beginner problem
When you start writing your first project in TypeScript in Visual Studio you can notice some annoying behaviour. At first, you probably have installed TypeScript and configured project. Then you have started reading some tutorials. In my case, I started with tutorial: http://chsakell.com/2015/09/19/typescript-angularjs-gulp-and-bower-in-visual-studio-2015/
When I have started following this lessons, I noticed that hundreds of errors appears. Surprisingly, they were not in my code, but in Angular TypeScript definition file – angular.d.ts. I saw that it is a common problem, so I decided to describe my way to fix it.
typescript_errors
Solution for this problem is quite simple. The reason of errors is version’s differencies between  TypeScript compiler installed and definition files. To solve this, try to follow the steps listed below:
  1. Check on the typescript website http://www.typescriptlang.org/ number of the lastest version.
  2. Check version of TypeScript you have installed in Windows.
    It is usual located in C:Program Files (x86)Microsoft SDKsTypeScript. There could be many directories with version numbers. If you don’t have a current version installed, you should do this now.
  3. Check that PATH variable point this current version directory.
    You can also check that it works correctly in console using command

    tsc -v
  4. Then you should check the version of Typescript which is referenced in your project configuration (*.csproj) file. Open it in text editor and verify following line
    <TypeScriptToolsVersion>1.6</TypeScriptToolsVersion>
  5. The last step is to ensure, that you are using proper definition files. To do this, update all typings via NuGet package manager
    or
    you can do it in console (depend on the way, you setup them earlier)

    tsd update --save --overwrite