PhoneGap WordPress Tutorial – Part 2

Build Mobile Apps with WordPress using PhoneGap

In the last article, I have explained how to read the latest post from the WordPress blog. In this tutorial, I’m going to explain how to do user registration and user login using WordPress backend. This uses WordPress – JSON API User Plugin

Create & Edit register.html

    <span class="hljs-meta"><!DOCTYPE html></span>
    <span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>

    <span class="hljs-tag"><<span class="hljs-name">head</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"ie=edge"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Wordpress<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/jquery.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="javascript">
            $(<span class="hljs-built_in">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{
                $(<span class="hljs-string">"#register"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{
                    <span class="hljs-keyword">var</span> display_name = $(<span class="hljs-string">"#display_name"</span>).val();
                    <span class="hljs-keyword">var</span> email = $(<span class="hljs-string">"#email"</span>).val();
                    <span class="hljs-keyword">var</span> username = $(<span class="hljs-string">"#username"</span>).val();
                    <span class="hljs-keyword">var</span> password = $(<span class="hljs-string">"#password"</span>).val();
                    $.ajax({
                        <span class="hljs-attr">type</span>: <span class="hljs-string">"POST"</span>,
                        <span class="hljs-attr">url</span>: <span class="hljs-string">"http://yoursite.com/api/get_nonce/?controller=user&method=register"</span>,
                        <span class="hljs-attr">crossDomain</span>: <span class="hljs-literal">true</span>,
                        <span class="hljs-attr">cache</span>: <span class="hljs-literal">false</span>,
                        <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>) </span>{
                            <span class="hljs-keyword">var</span> nonce = data.nonce;
                            <span class="hljs-keyword">var</span> dataString = <span class="hljs-string">"display_name="</span> + display_name + <span class="hljs-string">"&email="</span> + email + <span class="hljs-string">"&username="</span> + username + <span class="hljs-string">"&password="</span> + password + <span class="hljs-string">"&nonce="</span> + nonce + <span class="hljs-string">"&insecure=cool"</span>;
                            $.ajax({
                                <span class="hljs-attr">type</span>: <span class="hljs-string">"POST"</span>,
                                <span class="hljs-attr">url</span>: <span class="hljs-string">"http://yoursite.com/api/user/register"</span>,
                                <span class="hljs-attr">data</span>: dataString,
                                <span class="hljs-attr">crossDomain</span>: <span class="hljs-literal">true</span>,
                                <span class="hljs-attr">cache</span>: <span class="hljs-literal">false</span>,
                                <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>) </span>{
                                    alert(<span class="hljs-built_in">JSON</span>.stringify(data));
                                }
                            });
                        }
                    });
                });
            });
        </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">head</span>></span>

    <span class="hljs-tag"><<span class="hljs-name">body</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"display_name"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Display Name"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Email Address"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"username"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Username"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Password"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"register"</span>></span>Login<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">body</span>></span>

    <span class="hljs-tag"></<span class="hljs-name">html</span>></span>

Create & Edit Login.html

    <span class="hljs-meta"><!DOCTYPE html></span>
    <span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>

    <span class="hljs-tag"><<span class="hljs-name">head</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"ie=edge"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Wordpress<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"js/jquery.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="javascript">
            $(<span class="hljs-built_in">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{
                $(<span class="hljs-string">"#login"</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span>() </span>{
                    <span class="hljs-keyword">var</span> username = $(<span class="hljs-string">"#username"</span>).val();
                    <span class="hljs-keyword">var</span> password = $(<span class="hljs-string">"#password"</span>).val();
                    <span class="hljs-keyword">var</span> dataString = <span class="hljs-string">"username="</span> + username + <span class="hljs-string">"&password="</span> + password + <span class="hljs-string">"&insecure=cool"</span>;
                    $.ajax({
                        <span class="hljs-attr">type</span>: <span class="hljs-string">"POST"</span>,
                        <span class="hljs-attr">url</span>: <span class="hljs-string">"http://yoursite.com/api/user/generate_auth_cookie/?"</span>,
                        <span class="hljs-attr">data</span>: dataString,
                        <span class="hljs-attr">crossDomain</span>: <span class="hljs-literal">true</span>,
                        <span class="hljs-attr">cache</span>: <span class="hljs-literal">false</span>,
                        <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>) </span>{
                            alert(<span class="hljs-built_in">JSON</span>.stringify(data));
                        }
                    });
                });
            });
        </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">head</span>></span>

    <span class="hljs-tag"><<span class="hljs-name">body</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"username"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"password"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"login"</span>></span>Login<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">body</span>></span>

    <span class="hljs-tag"></<span class="hljs-name">html</span>></span>