How to create a edit profile page for users?

This is a pretty big thing to ask but basically you go:

Add extra user fields using the code from this answer: Extra User Fields

Change them with a custom template for the user:

/* Get user info. */
global $current_user, $wp_roles;
get_currentuserinfo();

Now you have the logged in user data which you can then alter.
Create fields for the user to change and fill them with the current info
e.g.

<input name="first_name" type="text" id="first_name" value="<?php the_author_meta( 'first_name', $current_user->ID ); ?>" />

Then save your data: First check if empty and then overwrite the data.

 if ( ! empty( $_POST['first_name'] ) )
    update_user_meta( $current_user->ID, 'first_name', sanitize_text_field( $_POST['first_name'] ) );

Then redirect the user if saved:

 /* Redirect so the page will show updated info.*/
if ( count( $error ) == 0 ) {
    //action hook for plugins and extra fields saving
    do_action('edit_user_profile_update', $current_user->ID);
    $location = get_user_meta( $current_user->ID, 'user_location', true );
    wp_safe_redirect( get_bloginfo('url') . str_replace( ' ','-', $location ) );
    exit;
}

It works this way. I did it in the exact same way.