Back to Roots

PHP was my first real programming language. And Laravel is built with PHP. I’ve always heard of Laravel, but never used it. I’ve watched many videos about how good it is, installed a sample application – and was sold.

I want to learn more – so I signed up for Laracasts. If you’re a web developer, suffering from JS Fatigue, and want to learn Laravel – Laracasts.com is like striking gold.

Top-notch tutorials and lessons. I, for one have signed up on many premium bootcamps and tutorial websites. So far, Laracasts is the best I’ve seen. Let me explain.

Talented Instructors – Jeffrey Way

Jeffrey Way, the main instructor, has a unique gift for making complex topics easy to understand. His explanations are clear and straightforward, making even the most daunting subjects feel manageable. He has a way of teaching – that reminds me of how elementary school was – but for a modern, experienced developer.

Plus, he presents everything in such an engaging way that you’re hooked from the first video. I especially like how he organizes his content – from inception to conception. Jeffrey Way is as good as it gets.

In addition, I’ve seen a couple of series on Inertia, React and APIs – and the instructors were also pretty good. Not the same style as Jeffrey – but good nonetheless.

Structured Learning Paths for Laravel and More

One of my favorite features is the structured learning paths. These pathways are like having a personal guide through the vast world of web development. They ensure you build a solid foundation before moving on to more advanced topics. This is incredibly helpful if you’re new to coding or trying to learn a new framework like Laravel.

There is also small bits of lessons called “Larabits“. These are quick how-to videos, that’s not necessarily tied to a learning path. Just fast paced watch and go type of tut.

Supportive Community

The community at Laracasts is fantastic. The forums are buzzing with activity and full of people ready to help out with any questions you might have about Laravel tutorials or other topics. It’s great to be part of a community where you can share knowledge and get support from fellow learners.

Plus, Jeffrey Way is actively involved, which adds a personal touch to the experience.

In addition, each video has a comments area – where you can post comments – and the community is also very responsive. This helps when you’re stuck in part of the video, commenting will get you “unstuck” real quick.

Diverse Range of Topics Beyond Laravel

While Laracasts is famous for its Laravel tutorials, it doesn’t stop there. The site offers in-depth tutorials on JavaScript, Vue, React, testing, and general web development practices. As mentioned above – the instructors and the way they teach the course is paramount. So the topics can vary – and you get the same high quality tutorial – which is a good deal.

So whether you’re looking to dive deep into a specific framework or broaden your overall skill set, Laracasts has you covered. I was even surprised to see GraphQL, CSS and Webpack in there – its not just backend stuff!

Final Thoughts

Laracasts.com is a must-have resource for anyone serious about web development, especially if you want to master Laravel tutorials. Its combination of excellent instructors that produce high-quality content. The strong community that you become part of – is truly indispensable. You get to learn everything about Laravel, but also other skills as well. In addition, the library is constantly updated, with new paths, technologies and lessons.

Whether you’re aiming to become a Laravel expert, improve your JavaScript skills, or just become a better developer overall, Laracasts is an investment you won’t regret.

The post Laracasts.com: a gold mine of content for Web Developers appeared first on Michael Soriano.

In HTML, this is easily achieved by the “Details” element. But of course, our users cannot write HTML. Similarly, a default block already exists in WordPress called “details“. The problem with this one is that our users do not find it intuitive. Also, they want to limit the formatting of the contents for each item.

You see how each item is contained within a big block. A button will add a title/content pair to the list – along with a checkbox that allows for the section to be expanded or collapsed by default.

Register the Block

This is the “housekeeping” part of the codebase. There is a PHP part of this process – and it really depends if you’re putting this in a plugin or a theme. But main function is below:

register_block_type(
    'namepsace/my-blocks-accordion',  // Block name with namespace
    [
        'style' => 'accordion-style',  
        'editor_style' => 'accordion-edit-style', 
        'editor_script' => 'accordion-js'  
    ]
);
...

Also, there are other parts of this such as enqueuing the styles and scripts for your blocks – which I’m not going to cover here. We’re mostly focusing on the “client” or JS side of things.

To read more about registering blocks in WordPress – see the codex.

For the JavaScript, create a file called index.js and start with the registerBlockType() function. If you’re not familiar with how to build blocks for WP – this is a good start Anatomy of a Block | Block Editor Handbook | WordPress Developer Resources.

registerBlockType(
    'namespace/accordion', {
      title: __('Accordion'),  
      icon: 'list-view',
      category: 'my-blocks', 
      attributes : {
        items : { 
         type: 'array',
         default : []
     }
    ...
}

Pay extra attention to the “attributes” object. This is the main “context” of our application. Notice that we want an array called “items” inside attributes – this is where we’ll manage our data.

The “Edit” Component

So in Gutenberg Blocks, the two major components that we have to worry about is the “Edit” and “Save”. Edit is what you see during the editing of Posts or Pages. Let’s look at how to build this first – particularly the JSX section:

const { RichText } = wp.editor;  
const { __ } = wp.i18n;

...

title: __('Accordion'),  
icon: 'list-view',
category: 'my-blocks', 
attributes : {
   items : { 
     type: 'array',
     default : []
   }
},
edit ( {className, attributes, setAttributes} ) {

... 

return (
<div>
{attributes.items && attributes.items.length > 0 ? attributes.items.map((item,i) => {
return (
<div>
    <div className={`${className}-item-title-wrap`}>
    <RichText   
        allowedFormats={[]}   
        tagName="div"     
        placeholder="Enter Title"               
        className={ `${className}-item-title` }
        value={ item.title }
        disableLineBreaks={ true }
        onChange={ val => updateItemTitle(val,i)}
    />
    <label>
    <input type="checkbox" data-index={i}
        checked={item.expand} 
        onChange={e=>updateItemExpand(e)} />
        Expanded
    </label>
    </div>
    <RichText  
        placeholder="Enter Content"  
        allowedFormats={ ['core/bold','core/italic','core/link'] }    
        multiline="p"
        tagName="div"                    
        className={ `${className}-item-content` }
        value={item.content}
        onChange={ val => updateItemContent(val,i)}
    />
</div>
)
}) : null}
<button 
    className={ `${className}-add-btn` } 
    onClick={addEmptyItem}>Add Accordion Item</button>
</div>
);

} //END EDIT

The HTML above is the UI for our editors. Notice that we’re going through out “items” and outputting it for action. We’re using the built-in RichText component for our editable sections (title and content). RichText is awesome – find out more about it. We’re also including a checkbox called expanded – that will allow our users to show the item expanded or collapsed.

Adding Items

When first using the block – all you see is a button that says “Add Accordion Item“. Clicking this button will execute below:

const addEmptyItem = () => {
    const items = [...attributes.items, {
      title : '', 
      content : '', 
      expand : true
    }];
   setAttributes({items})
}

This will add an empty object to our Attributes Items array, allowing our users to be able to edit our RichText components.

Click and Change Handlers

If you look in our JSX, we’ve mapped our inputs to event handlers. Add the code below”

const updateItemExpand= (e) => {
    const items = attributes.items.slice();
    const index = e.target.attributes.getNamedItem('data-index').value;
    items[index].expand = e.target.checked;
    setAttributes({items})
}
const updateItemTitle = (title,i) => {
    const items = attributes.items.slice();
    items[i].title = title;
    setAttributes({items})
}
const updateItemContent = (content,i) => {
    const items = attributes.items.slice();
    items[i].content = content;
    setAttributes({items})
}

The function names are pretty self explanatory. All we’re doing is manipulating the data in our Attributes. Also notice the setAttributes() function we’re using in each function. This is a “setter” that is very similar to React’s useState setters.

With all that in place, our Accordion block is ready for editing:

Typing “/accordion” will insert our block – ready for editing.

The “Save” Component

This is simply JSX that outputs our HTML for the public users. The code for this is quite simple – we’re simply using “details” and “summary“. This automatically has the expand and collapse functionality out of the box.

save( { attributes } ) {
    return (
        <div>
        {attributes.items && attributes.items.length > 0 ? (
            attributes.items.map(item => {
                return (
                    <details open={item.expand}>
                    <summary>{item.title}</summary>
                    <div dangerouslySetInnerHTML={
                       {__html: item.content}
                    } /> 
                    </details>
                )
            })
        ) : null}
        </div>
        )
    } 
}

Notice the use of dangerouslySetInnerHTML – because we’re outputting HTML content from WordPress. If this can be done in other ways leave a comment below.

Styling the output with some CSS:

.wp-block-my-blocks-accordion {
    margin-bottom: 25px;
}

.wp-block-my-blocks-accordion details > summary {
    background:url('/images/arrow-down.png') no-repeat;
    background-size: 13px;
    background-position-x: right;
    background-position-y: 10px;
    font-weight: 500;
    border-bottom:1px solid #ebebeb;
    margin-bottom: 10px;
    padding-bottom: 6px;
    cursor:pointer;
}
.wp-block-my-blocks-accordion details[open] > summary {
    background:url('images/arrow-up.png') no-repeat;
    background-size: 13px;
    background-position-x: right;
    background-position-y: 10px;
} 
.wp-block-my-blocks-accordion details > summary:hover {
    opacity: 0.6;
}  
.wp-block-my-blocks-accordion details > summary > * {
    display: inline;
}

We’re simply overriding the default look of the details component – specifically the arrows. I prefer to see them in the right instead of left. Also, adding a subtle border to make it look better.

And with that in place – it should look like below when the post is saved:

There you have it. We’ve just made our own custom Gutenberg block. This was pretty fun to build – and learning about the Block API is quite straightforward. It’s very much like classic React – but simpler.

Be sure to leave your thoughts below.

The post How to create an Accordion Block using React and WordPress’ Block API appeared first on Michael Soriano.

1. Using PHP

We’re using PHP’s multi cURL. This means that we are doing multiple REST calls, but doing them simultaneously. Meaning, the amount of time to do the requests – is not dependent on the number of calls you make (because they’re asynchronous).
So let’s begin. First in your functions.php, create a function:

function getAllRecordsFromRest(){
   //ADD ALL CODE IN HERE...
}

Inside your new function, is where we put the rest of our code.
Let’s figure out how many calls we need to make:

$totalItems = wp_count_posts()->publish;
$callsToMake = ceil($totalItems/100);

Let’s create an empty array and stuff it with the curl options:

$ch = array();
for($i=0;$i<$callsToMake;$i++){
    $page = $i + 1;
    $ch[$i] = curl_init(get_bloginfo('url').'/wp-json/wp/v2/posts?_embed&per_page=100&page='.$page);
    curl_setopt($ch[$i], CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch[$i], CURLOPT_SSL_VERIFYPEER,  0);
}

As you can see above, we’re simply looping through the $callsToMake variable, to add a $page as part of our querystring. Similar to a paging system. As part of our loop, we are passing the options for curl through curl_setopt().

Now for the calls:

$mh = curl_multi_init();
        for($i=0;$i<$callsToMake;$i++){
            curl_multi_add_handle($mh, $ch[$i]);
        }
        $running = null;
        do {
            curl_multi_exec($mh, $running);
        } while ($running);
        for($i=0;$i<$callsToMake;$i++){
             if (!curl_errno($ch[$i])) {
                 $info = curl_getinfo($ch[$i]);
                 //error_log(print_r($info,true));
             }
            curl_multi_remove_handle($mh, $ch[$i]);
        }
        curl_multi_close($mh);
        $responses = array(); //array
        for($x=0;$x<$callsToMake;$x++){
            $responses[$x] = json_decode(curl_multi_getcontent($ch[$x]));
        }

First we create a handle $mh – this is what curl uses to execute and initialize the class. We loop through our $callstoMake once more to add the handles to curl_multi_add_handle().
We do a do while, and execute curl. Now if if there is an error in any of the calls, we will get them in curl_getinfo().

Finally, we get all of the contents of our calls through curl_multi_getcontent(), and we stuff it in our newly created $responses array.

Now our $responses will look something like:

$responses[$response[0], $response[1], $response[2]]

So we need to loop through them to create a big array of responses (in order).

So we do a final loop and do an array_push().

$final = array();
for($i=0;$i<count($responses);$i++){
    for($x=0;$x<count($responses[$i]);$x++){
       array_push($final,$responses[$i][$x] );
     }
}
return json_encode($final);

Then, we return our array as a JSON string by doing json_encode($final).

Now all we have to do is call our PHP function “getAllRecordsFromRest()” and we should have all of our posts.

2. Using JavaScript

We also have the option of using JavaScript for our multiple calls. Let’s start by getting the number of calls in our functions.php file:

function getNumCalls(){
    $totalItems = wp_count_posts('posts')->publish;
    $callsToMake = ceil($totalItems/100);
    return $callsToMake;
}

Now, in our header.php – let’s create a JavaScript variable that stores the number of calls to make – from the function that we created above:

<script>
    var numOfCalls = "<?php echo getNumCalls(); ?>";
</script>

Now, let’s create an array, that houses all of the responses, from our AJAX calls.

 var requests = Array();
 for(var i=0; i<numOfCalls; i++){
     var request = $.get('/wp-json/wp/v2/posts?_embed&per_page=100&page='+(i+1));
     requests.push(request);
 }

We then to a “.when()” to fire our calls. And doing a console.log() on the arguments, we see the responses. This technique is described in my previous post Working with Promise and Deferred.

$.when.apply($,requests).done(function(){
   console.log(arguments);
})

Finally, let’s do a couple of for loops to merge the contents into one big array.

$.when.apply($,requests).done(function(){
    for(var i=0; i<arguments.length; i++){
       for(var x=0; x<arguments[i][0].length; x++){
            final.push(arguments[i][0][x]);
        }
    }
    console.log(final); //HERE ARE OUR RECORDS
}

And that should do it. Using either of these techniques should overcome the 100 record limitation of pulling records from WordPress REST api.
 

The post Get all posts from WordPress REST API appeared first on Michael Soriano.

The $wp_query Object

According to the codex, the WP_Query class “deals with the intricacies of a post’s (or page’s) request to a WordPress blog”. This means that WordPress has already done the heavy lifting when it comes to information needed when you query your posts. Information needed when building stuff like paging, queries, templates and meta data.
In our case, we need the meta data – of the posts returned. So first off, open the index.php file in your theme directory and just outside the loop, add the code below:

print_r($wp_query);exit;

What we’re doing is seeing what the $wp_query is holding. $wp_query is the object that is derived from the WP_Query class that we talked about above. You will see a long array of information that pertains to the current request. So say you’re in a certain category, this object will contain information about that category and the posts that it contains.
So somewhere in this object lies the information we need. Let’s grab “post_count” and “found_posts”.

Now that we know the property names, we can go ahead and remove the print_r that we have.

The Output

This is as simple as it gets. All we need is to check if “post_count” is more than 0 and we can echo out our sentence. We can hard code the “1” since we’re always going to be showing at least 1 record.

    Showing 1 through  out of  articles..

The code above should work anywhere in your theme. It’s especially useful in your archive templates – so users can tell how many articles are in a specific category etc. It’s a good addition to your paging in the footer as well.
To test it, try searching for something, or click on a category. The “found_posts” should depend on the current request, while the “post_count” depends on the limit that you have in your WordPress settings.
And that’s it. Hopefully you can find this snippet useful in your theme somewhere. Please leave your comments below.

The post Show number of posts out of total records in WordPress appeared first on Michael Soriano.

Update 9/5/2016: Updated flaw in token creation and token checking for better security. Thanks to comment by Mohammad and his findings.

Update 7/20/2016: Added index.php file to the views directory. This is the view that is being used once a successful login is processed.

View in Github

The Forgot your Password form

In our controller “Main.php”, let’s add a new action called “forgot”. The code is below and I’ll explain what is inside:

public function forgot()
        {
            $this->form_validation->set_rules('email', 'Email', 'required|valid_email');
            if($this->form_validation->run() == FALSE) {
                $this->load->view('header');
                $this->load->view('forgot');
                $this->load->view('footer');
            }else{
                $email = $this->input->post('email');
                $clean = $this->security->xss_clean($email);
                $userInfo = $this->user_model->getUserInfoByEmail($clean);
                if(!$userInfo){
                    $this->session->set_flashdata('flash_message', 'We cant find your email address');
                    redirect(site_url().'main/login');
                }
                if($userInfo->status != $this->status[1]){ //if status is not approved
                    $this->session->set_flashdata('flash_message', 'Your account is not in approved status');
                    redirect(site_url().'main/login');
                }
                //build token
                $token = $this->user_model->insertToken($userInfo->id);
                $qstring = $this->base64url_encode($token);
                $url = site_url() . 'main/reset_password/token/' . $qstring;
                $link = '' . $url . '';
                $message = '';
                $message .= 'A password reset has been requested for this email account
';
                $message .= 'Please click: ' . $link;
                echo $message; //send this through mail
                exit;
            }
        }

The action opens up the same way we have with our other forms. We have our validation rules for our “email” input field. In our form, all we’re really asking for our user is to enter their password. So we just need to run a couple of rules against this value: valid email and required. Once our validation passes, we also clean the data with our xss_clean() method which is loaded automatically.

To learn more about the Security Helper click here.

Now we check if the email submitted exists in our database through our Model method: getUserInfoByEmail(). So add the code below to our Model (User_Model.php). This method returns the record on success and false on fail.

public function getUserInfoByEmail($email)
    {
        $q = $this->db->get_where('users', array('email' => $email), 1);
        if($this->db->affected_rows() > 0){
            $row = $q->row();
            return $row;
        }else{
            error_log('no user found getUserInfo('.$email.')');
            return false;
        }
    }

We also need another method that checks grabs the user information. This method called “getUserInfo()” simply returns the row and false if none is found:

public function getUserInfo($id)
    {
        $q = $this->db->get_where('users', array('id' => $id), 1);
        if($this->db->affected_rows() > 0){
            $row = $q->row();
            return $row;
        }else{
            error_log('no user found getUserInfo('.$id.')');
            return false;
        }
    }

So back in our “forgot” action, we simply set a couple of error messages when we receive a false from our model, or proceed with the token creation “insertToken()” on success. Note that we are reusing this method from our previous action when creating a new user.

The code for our view is below. Just some messaging our form and input fields. Notice we’re using CodeIgniter’s Form class.

<div class="col-lg-4 col-lg-offset-4">
<h2>Forgot Password</h2>
<p>Please enter your email address and we'll send you instructions on how to reset your password<br>
<?php 
$fattr = array('class' =--> 'form-signin'); 
echo form_open(site_url().'main/forgot/', $fattr); ?>
</p>
<div class="form-group">
<?php echo form_input(array(
          'name'=-->'email', 'id'=&gt; 'email', 'placeholder'=&gt;'Email', 'class'=&gt;'form-control', 'value'=&gt; set_value('email'))); ?>
<?php echo form_error('email');?>
</div>
<p><?php echo form_submit(array('value'=-->'Submit', 'class'=&gt;'btn btn-lg btn-primary btn-block')); ?>
<?php echo form_close(); ?></p>
</div>

Now go ahead and try out your form. Try an email that doesn’t exist – and try one that does. With our unique token code in our action, we continue to construct the link and “echo” to the browser.

Remember that this is to be emailed to the user but we are simply echoing it out for demo purposes. The link should look like below:

The Reset Password Form

So now we have a unique link that we’ve sent to our forgetful user. Once they click on this link – they better have a page to land on, with a way to reset their password. So let’s build that now.
Let’s create another action in our controller, name it “reset_password()” and add the code below:

public function reset_password()
        {
            $token = $this->base64url_decode($this->uri->segment(4));
            $cleanToken = $this->security->xss_clean($token);
            $user_info = $this->user_model->isTokenValid($cleanToken); //either false or array();
            if(!$user_info){
                $this->session->set_flashdata('flash_message', 'Token is invalid or expired');
                redirect(site_url().'main/login');
            }
            $data = array(
                'firstName'=> $user_info->first_name,
                'email'=>$user_info->email,
                'token'=>base64_encode($token)
            );
            $this->form_validation->set_rules('password', 'Password', 'required|min_length[5]');
            $this->form_validation->set_rules('passconf', 'Password Confirmation', 'required|matches[password]');
            if ($this->form_validation->run() == FALSE) {
                $this->load->view('header');
                $this->load->view('reset_password', $data);
                $this->load->view('footer');
            }else{
                $this->load->library('password');
                $post = $this->input->post(NULL, TRUE);
                $cleanPost = $this->security->xss_clean($post);
                $hashed = $this->password->create_hash($cleanPost['password']);
                $cleanPost['password'] = $hashed;
                $cleanPost['user_id'] = $user_info->id;
                unset($cleanPost['passconf']);
                if(!$this->user_model->updatePassword($cleanPost)){
                    $this->session->set_flashdata('flash_message', 'There was a problem updating your password');
                }else{
                    $this->session->set_flashdata('flash_message', 'Your password has been updated. You may now login');
                }
                redirect(site_url().'main/login');
            }
        }

So our users will land in our page called “reset_password”, with a token in the url. First we need to process that and determine if its a good token. This is accomplished by our model’s isTokenValid() method. This method is the same method we had in our “complete” action when we are registering a new user – so this is nothing new.

And if you remember, this method returns user information on success – so we go on with our setup for the form. We pass this information using $data array straight to our view, reset_password.php:

<div class="col-lg-4 col-lg-offset-4">
<h2>Reset your password</h2>
<h5>Hello <?php echo $firstName; ?>, Please enter your password 2x below to reset</h5>
<p><?php
    $fattr = array('class' =--> 'form-signin'); echo form_open(site_url().'main/reset_password/token/'.$token, $fattr); ?></p>
<div class="form-group">
<?php echo form_password(array('name'=-->'password', 'id'=&gt; 'password', 'placeholder'=&gt;'Password', 'class'=&gt;'form-control', 'value' =&gt; set_value('password'))); ?&gt; <?php echo form_error('password') ?></div>
<div class="form-group">
<?php echo form_password(array('name'=-->'passconf', 'id'=&gt; 'passconf', 'placeholder'=&gt;'Confirm Password', 'class'=&gt;'form-control', 'value'=&gt; set_value('passconf'))); ?> <?php echo form_error('passconf') ?></div>
<p><?php echo form_hidden('user_id', $user_id);?>
<?php echo form_submit(array('value'=-->'Reset Password', 'class'=&gt;'btn btn-lg btn-primary btn-block')); ?>
<?php echo form_close(); ?></p>
</div>

Clicking the link with the token will run our view. And if you did it correctly, it should render like below:

Finally, we do some validation and sanitation on the passwords entered. Once passed, we continue to encrypt our user’s password through the create_hash() method. Remember this method is from our Password class that we’ve also used when creating new users. Then we update the user’s password on success.

Conclusion

So there you have our basic user registration system, explained in detail. Remember that this is mainly to get a grasp on what goes on behind the scenes of such a system as well as learning the ropes of MVC. It is also important to know that this is not production code. There are plenty of improvements to be made. But this should be enough to get you started.

The post Building a user registration system – Part 3: The Password Reset Form appeared first on Michael Soriano.

Update 9/5/2016: Updated flaw in token creation and token checking for better security. Thanks to comment by Mohammad and his findings.

Update 7/20/2016: Added index.php file to the views directory. This is the view that is being used once a successful login is processed.

View in GitHub

Once you fill out the fields, check your database for the new entries. The user table should look like below:

Note that we have the status set to “pending” as well as the role set to “subscriber”. We also have the password blank at the moment. Open the “tokens” table and you should see a new entry as well:

Notice our user ids match in both tables. You should also be seeing our message in the browser – which is the message we will be sending through email to our user:

Now we’re ready to code the 2nd part of the registration process.

The “Complete” your registration page

So our user gets an email to complete the registration. This email has a link with a “token” that ties the user id and the time created. So the code below is for our “complete” action. imply add to our Main controller:

public function complete()
        {
            $token = base64_decode($this->uri->segment(4));
            $cleanToken = $this->security->xss_clean($token);
            $user_info = $this->user_model->isTokenValid($cleanToken); //either false or array();
            if(!$user_info){
                $this->session->set_flashdata('flash_message', 'Token is invalid or expired');
                redirect(site_url().'main/login');
            }
            $data = array(
                'firstName'=> $user_info->first_name,
                'email'=>$user_info->email,
                'user_id'=>$user_info->id,
                'token'=>$this->base64url_encode($token)
            );
            $this->form_validation->set_rules('password', 'Password', 'required|min_length[5]');
            $this->form_validation->set_rules('passconf', 'Password Confirmation', 'required|matches[password]');
            if ($this->form_validation->run() == FALSE) {
                $this->load->view('header');
                $this->load->view('complete', $data);
                $this->load->view('footer');
            }else{
                $this->load->library('password');
                $post = $this->input->post(NULL, TRUE);
                $cleanPost = $this->security->xss_clean($post);
                $hashed = $this->password->create_hash($cleanPost['password']);
                $cleanPost['password'] = $hashed;
                unset($cleanPost['passconf']);
                $userInfo = $this->user_model->updateUserInfo($cleanPost);
                if(!$userInfo){
                    $this->session->set_flashdata('flash_message', 'There was a problem updating your record');
                    redirect(site_url().'main/login');
                }
                unset($userInfo->password);
                foreach($userInfo as $key=>$val){
                    $this->session->set_userdata($key, $val);
                }
                redirect(site_url().'main/');
            }
        }

First order of business is to validate the token. We grab it from the url with CI’s uri helper: “segment(4)”. The code below “isTokenValid()” resides in our model, which checks the validity of the token and returns the user information on success and false on no.

Note that I’m only using a weak time check – which compares to strings to be equal. You should implement your own mechanism which does a dateDiff or something like that.

public function isTokenValid($token)
    {
       $tkn = substr($token,0,30);
       $uid = substr($token,30);
        $q = $this->db->get_where('tokens', array(
            'tokens.token' => $tkn,
            'tokens.user_id' => $uid), 1);
        if($this->db->affected_rows() > 0){
            $row = $q->row();
            $created = $row->created;
            $createdTS = strtotime($created);
            $today = date('Y-m-d');
            $todayTS = strtotime($today);
            if($createdTS != $todayTS){
                return false;
            }
            $user_info = $this->getUserInfo($row->user_id);
            return $user_info;
        }else{
            return false;
        }
    }

Going back to our action, we simply create the “$data” array which we’ll need in our form. We’re also loading a “Password” class – which does the heavy lifting for our passwords. The class creates a dynamic salt appended to the password. The default hash is “sha256” and is fully configurable.

So token is good, validation passes – we then move on to updating our user information: “updateUserInfo()”. This goes in our model:

public function updateUserInfo($post)
    {
        $data = array(
               'password' => $post['password'],
               'last_login' => date('Y-m-d h:i:s A'),
               'status' => $this->status[1]
            );
        $this->db->where('id', $post['user_id']);
        $this->db->update('users', $data);
        $success = $this->db->affected_rows();
        if(!$success){
            error_log('Unable to updateUserInfo('.$post['user_id'].')');
            return false;
        }
        $user_info = $this->getUserInfo($post['user_id']);
        return $user_info;
    }

The above simply updates our table with the new password, login time and the status to “active”. We have enough to complete our registration process.

Our view called “complete” will contain our HTML:

<div class="col-lg-4 col-lg-offset-4">
<h2>Almost There!</h2>
<h5>Hello <?php echo $firstName; ?>. Your username is <?php echo $email;?></h5>
<small>Please enter a password to begin using the site.</small> <?php 
    $fattr = array('class' =&gt; 'form-signin');
    echo form_open(site_url().'main/complete/token/'.$token, $fattr); ?>
<div class="form-group">&nbsp;</div>
<div class="form-group">&nbsp;</div>
<?php echo form_submit(array('value'=&gt;'Complete', 'class'=&gt;'btn btn-lg btn-primary btn-block')); ?> 
<?php echo form_close(); ?></div>

Note that I’m using Bootstrap, so our form automatically looks nice. I’m also using CI’s form helper which makes our form building faster

Our form should look like below:

On success you will notice that we set the session with the user data that we’ve fetched from the back end “set_userdata()“. We’re also redirecting them to the homepage of our site. On failure, we user CI’s “set_flashdata()” to set an error message temporarily in session, and displaying it above our form.

The Login Form

With what we’ve done above – it’s now possible to create a login form. See, we’re using an encryption technology that only our application can process. So it is important that we create our registration system first, before we can create a login form.

This way – we can test it properly.

The code below is our controller logic for our login form:

public function login()
        {
            $this->form_validation->set_rules('email', 'Email', 'required|valid_email');
            $this->form_validation->set_rules('password', 'Password', 'required');
            if($this->form_validation->run() == FALSE) {
                $this->load->view('header');
                $this->load->view('login');
                $this->load->view('footer');
            }else{
                $post = $this->input->post();
                $clean = $this->security->xss_clean($post);
                $userInfo = $this->user_model->checkLogin($clean);
                if(!$userInfo){
                    $this->session->set_flashdata('flash_message', 'The login was unsucessful');
                    redirect(site_url().'main/login');
                }
                foreach($userInfo as $key=>$val){
                    $this->session->set_userdata($key, $val);
                }
                redirect(site_url().'main/');
            }
        }

Nothing new in the code above. Again, we’re setting validation rules for our 2 fields. We grab the post array and clean it via xss_clean(). Then we get to our model which has the checkLogin() method below:

public function checkLogin($post)
    {
        $this->load->library('password');
        $this->db->select('*');
        $this->db->where('email', $post['email']);
        $query = $this->db->get('users');
        $userInfo = $query->row();
        if(!$this->password->validate_password($post['password'], $userInfo->password)){
            error_log('Unsuccessful login attempt('.$post['email'].')');
            return false;
        }
        $this->updateLoginTime($userInfo->id);
        unset($userInfo->password);
        return $userInfo;
    }
    public function updateLoginTime($id)
    {
        $this->db->where('id', $id);
        $this->db->update('users', array('last_login' => date('Y-m-d h:i:s A')));
        return;
    }

The above selects all columns where the user id and password match. Note that we’re using the validate_password() method from our Password class. We then update the login time and return the user information back to our controller.

Our login form view contains the code below:

<div class="col-lg-4 col-lg-offset-4">
<h2>Please login</h2>
<?php $fattr = array('class' =&gt; 'form-signin');
         echo form_open(site_url().'main/login/', $fattr); ?>
<div class="form-group">&nbsp;</div>
<div class="form-group">&nbsp;</div>
<?php echo form_submit(array('value'=&gt;'Let me in!', 'class'=&gt;'btn btn-lg btn-primary btn-block')); ?>
<?php echo form_close(); ?>
<p>Don't have an account? Click to <a href="<?php echo site_url();?>main/register">Register</a></p>
<p>Click <a href="<?php echo site_url();?>main/forgot">here</a> if you forgot your password.</p>
</div>

Again, using CI’s form helper along with Bootstrap classes to make our form nice. We also have a link back to the “Register” page, which we covered in the first part of this tutorial. Finally, we have another link to the “Forgot” password link – which I’ll cover in Part 3.

Stay tuned.

The post Building a user registration system – Part 2: The Set Password and Login Forms appeared first on Michael Soriano.

One that will restrict users from accessing sections of the site. We will create a system that will allow them to create their own account, reset their password and even update their profile.

Update 8/13/2018: Added the entire CI application in the repo, allowing faster setup and debug. CI version is 3.0.2 The setup steps below might not be necessary for usage.

Update 9/5/2016: Updated flaw in token creation and token checking for better security. Thanks to comment by Mohammad and his findings.

Update 7/20/2016: Added index.php file to the views directory. This is the view that is being used once a successful login is processed.

View in Github

I’m going to assume that you are familiar with CodeIgniter, or other MVC frameworks. You don’t have to be an expert – just know enough that you will be able to follow along without me having to explain too much. We are also going to utilize Bootstrap – so our pages will look nice. Finally, the focus of this tutorial is learning how the process works. We’re not really here to look at design patterns, performance or database design.

So ready to get started? Roll up your sleeves and let’s start writing.

Get things setup

So obviously we’re going to need to store data – so we need a database. We will need a table that will house our users. Below is the SQL code to get you up and running. I’m calling the database “user-registration” – which is a stupid name actually. Name yours anything you want.

CREATE DATABASE IF NOT EXISTS `user-registration` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `user-registration`;

CREATE TABLE IF NOT EXISTS `ci_sessions` (
  `id` varchar(40) NOT NULL,
  `ip_address` varchar(45) NOT NULL,
  `timestamp` int(10) unsigned NOT NULL DEFAULT '0',
  `data` blob NOT NULL,
  PRIMARY KEY (`id`),
  KEY `ci_sessions_timestamp` (`timestamp`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE IF NOT EXISTS `tokens` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `token` varchar(255) NOT NULL,
  `user_id` int(10) NOT NULL,
  `created` date NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=26 ;

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `email` varchar(100) NOT NULL,
  `first_name` varchar(100) NOT NULL,
  `last_name` varchar(100) NOT NULL,
  `role` varchar(10) NOT NULL,
  `password` text NOT NULL,
  `last_login` varchar(100) NOT NULL,
  `status` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=42 ;

We’re going to use CodeIgniter 3.0.2. Download and install in your web server.
In config > config.php add the two lines below. I’ll explain these later.

$config['roles'] = array('subscriber', 'admin');
$config['status'] = array('pending', 'approved');

Open database.php, and add your database credentials. It would be something like:

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'user-registration',
	... //additional stuff here...
);

Create a new controller named Main.php and a model, name it User_model.php. In the next sections, we will tie these things together.

But first let’s look at the workflow of our system:

So our first step is the registration form. Users fill out this form which will only consist of their name and email. This will write a record to our database – but the account will only be in “pending” status. This will also trigger an email containing a token (which expires in a day), when clicked – will allow the user to finish the registration process. This form will have a password and password confirmation. This will update the record – and make the account “active”.

We will automatically login the user, but now that they have an account – they can actually utilize the login and reset password form.

It also makes sense for us to build the pages in this exact order. So we got: 1) register 2) complete 3) login 4) forgot password.

So inside our routes.php, add the default controller to ours:

$route['default_controller'] = 'main';

Also, let’s setup our autoload.php:

$autoload['helper'] = array('url');
$autoload['libraries'] = array('session');

Now we can move forward.

The Registration

So the very first thing we need is the HTML that contains our form. Let’s create a new file called “register.php” and put it in our “views” folder. Add the code below:

<div class="col-lg-4 col-lg-offset-4">
    <h2>Hello There</h2>
    <h5>Please enter the required information below.</h5>
<?php
    $fattr = array('class' => 'form-signin');
    echo form_open('/main/register', $fattr); ?>
    <div class="form-group">
      <?php echo form_input(array('name'=>'firstname', 'id'=> 'firstname', 'placeholder'=>'First Name', 'class'=>'form-control', 'value' => set_value('firstname'))); ?>
      <?php echo form_error('firstname');?>
    </div>
    <div class="form-group">
      <?php echo form_input(array('name'=>'lastname', 'id'=> 'lastname', 'placeholder'=>'Last Name', 'class'=>'form-control', 'value'=> set_value('lastname'))); ?>
      <?php echo form_error('lastname');?>
    </div>
    <div class="form-group">
      <?php echo form_input(array('name'=>'email', 'id'=> 'email', 'placeholder'=>'Email', 'class'=>'form-control', 'value'=> set_value('email'))); ?>
      <?php echo form_error('email');?>
    </div>
    <?php echo form_submit(array('value'=>'Sign up', 'class'=>'btn btn-lg btn-primary btn-block')); ?>
    <?php echo form_close(); ?>
</div>

Note that I’m not going to go through what goes in our header and footer template because it’s irrelevant to this tutorial. Just know that it’s basic HTML, along with a link to Bootstrap CSS. Our markup above is a mix of PHP and HTML. This is using CodeIgniter’s Form Class – which makes it real easy to do validation and data filter and sanitation.

So in our Main controller, let’s add a constructor and include the necessary components for our class. We’ll also set up our status and roles arrays inside this constructor:

class Main extends CI_Controller {
        public $status;
        public $roles;
        function __construct(){
            parent::__construct();
            $this->load->model('User_model', 'user_model', TRUE);
            $this->load->library('form_validation');
            $this->form_validation->set_error_delimiters('<div class="error">', '</div>');
            $this->status = $this->config->item('status');
            $this->roles = $this->config->item('roles');

So we’re loading our model “User_model” by default, the “form_validation” library and setting some HTML for our form errors. You’ll also notice the 2 properties (status and roles) – which grabs it from “$this->config”. Remember in our config file – we created 2 arrays? We’re simply outputting it here for easy access.

Now I know you’re saying this is better if these entries was in their own table in the database. Again, this is not a tutorial on database design. We’re simply doing it this way because it is not our focus. Let’s continue with our “register” method:

public function register()
        {
            $this->form_validation->set_rules('firstname', 'First Name', 'required');
            $this->form_validation->set_rules('lastname', 'Last Name', 'required');
            $this->form_validation->set_rules('email', 'Email', 'required|valid_email');
            if ($this->form_validation->run() == FALSE) {
                $this->load->view('header');
                $this->load->view('register');
                $this->load->view('footer');
            }else{
                if($this->user_model->isDuplicate($this->input->post('email'))){
                    $this->session->set_flashdata('flash_message', 'User email already exists');
                    redirect(site_url().'main/login');
                }else{
                    $clean = $this->security->xss_clean($this->input->post(NULL, TRUE));
                    $id = $this->user_model->insertUser($clean);
                    $token = $this->user_model->insertToken($id);
                    $qstring = $this->base64url_encode($token);
                    $url = site_url() . 'main/complete/token/' . $qstring;
                    $link = '' . $url . '';
                    $message = '';
                    $message .= 'You have signed up with our website
';
                    $message .= 'Please click: ' . $link;
                    echo $message; //send this in email
                    exit;
                };
            }
        }

Alright, plenty of going on up there. So the validation rules are setup initially. Our form contains 3 fields: Last name, First name and email. They’re all required fields, plus the email address must be in valid format.

You will notice in the block where our form is validated, we’re checking “isDuplicate()” from our model: $this->user_model. This is so that we won’t have duplicate records of the same email. Remember, we are using their email address as their username.

So if it’s a duplicate – we simply use CodeIgniter’s set_flashdata() and redirect them to the login page (which is not built yet).

If the email address is good, we continue by cleaning up the $_POST array. Notice that we have 2 methods right after the cleaning: insertUser() and insertToken(). So we write the record to our database, then we create a new token (let’s quickly run this SQL so we have this token table).

CREATE TABLE IF NOT EXISTS `tokens` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `token` varchar(255) NOT NULL,
  `user_id` int(10) NOT NULL,
  `created` date NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=26 ;

Another thing, you will also see that we’re using a local method called “base64url_encode()” – which is a way of outputting base64 code – that is in a web safe format. So in our controller, you can add these two methods in the bottom. Think of them as local “helper” methods.

public function base64url_encode($data) {
    return rtrim(strtr(base64_encode($data), '+/', '-_'), '=');
}
public function base64url_decode($data) {
    return base64_decode(str_pad(strtr($data, '-_', '+/'), strlen($data) % 4, '=', STR_PAD_RIGHT));
}

I am not putting them in a the “helpers” for CI – because these methods are only to be used in controllers – since they are “URL” related. And as you can see, we only have one controller. But as your application grows, and you have many controllers, it’s best to move this into a real CI Helper.
Finally, we create our final URL, to our “complete” action and echo it out. In production, this will be done through an email, in HTML format.

Some Back-end Stuff

Our model “User_model” is empty. Let’s go ahead and fill it up. We need 3 methods for our register to work remember? It’s 1) isDuplicate(), 2) insertUser() and insertToken(). First let’s create a constructor with our roles and status arrays:

public function insertUser($d)
    {
            $string = array(
                'first_name'=>$d['firstname'],
                'last_name'=>$d['lastname'],
                'email'=>$d['email'],
                'role'=>$this->roles[0],
                'status'=>$this->status[0]
            );
            $q = $this->db->insert_string('users',$string);
            $this->db->query($q);
            return $this->db->insert_id();
    }
    public function isDuplicate($email)
    {
        $this->db->get_where('users', array('email' => $email), 1);
        return $this->db->affected_rows() > 0 ? TRUE : FALSE;
    }
    public function insertToken($user_id)
    {
        $token = substr(sha1(rand()), 0, 30);
        $date = date('Y-m-d');
        $string = array(
                'token'=> $token,
                'user_id'=>$user_id,
                'created'=>$date
            );
        $query = $this->db->insert_string('tokens',$string);
        $this->db->query($query);
        return $token . $user_id;
    }

So judging from the method names – they’re pretty self explanatory correct? Also, if you’ve worked with CodeIgniter before, you’ll notice the syntax of interacting with the database. It used to be called “active record”, which is now the Query Builder class. Makes it real easy for non DBA’s like me to write queries.

The three methods all return either an array or a string on success, and “false” on failure. The return values are handled accordingly in our controller methods discussed previously. Pay token is simply a random number that we create and insert into the database. This token has an accompanying user id and a time stamp in the same row. This makes it possible for us to fetch the user, and find if it’s a valid request, in the appropriate time frame.

Let’s break it here for now. We have plenty more to come in the next part(s).

The post Building a user registration system – Part 1: The New User Form appeared first on Michael Soriano.

Create the basic Widget

In your functions.php file, write the following code:

class Realty_Widget extends WP_Widget{
function __construct() {
	parent::__construct(
		'realty_widget', // Base ID
		'Realty Widget', // Name
		array('description' => __( 'Displays your latest listings. Outputs the post thumbnail, title and date per listing'))
	   );
}
function update($new_instance, $old_instance) {
	$instance = $old_instance;
	$instance['title'] = strip_tags($new_instance['title']);
	$instance['numberOfListings'] = strip_tags($new_instance['numberOfListings']);
	return $instance;
}
} //end class Realty_Widget
register_widget('Realty_Widget');

The above code sets up our widget class. It’s extending an already built class – called WP_Widget, which have methods that we need to override. These methods are: update(), form() and widget(). Don’t worry if you don’t know what that means exactly. It’s just the rules of creating widgets.
Now, notice above that we have a method __construct() – which just register’s our widget id, a name and a description. We overrode another method update() – which just makes ensures that we’re passing the right values to our $instance array (also makes sure we’re using the correct calculated instance).
So all we need to create is 2 more methods: form() and widget(). Let’s take care of that next.

The form() method

The method form() builds the form that we have in the admin section. What we’re building is a very simple form with 2 fields: a text field for the Widget title, and a drop down list for the number of listings we want to show:

function form($instance) {
	if( $instance) {
		$title = esc_attr($instance['title']);
		$numberOfListings = esc_attr($instance['numberOfListings']);
	} else {
		$title = '';
		$numberOfListings = '';
	}

[code above has been truncated – due to syntax highlighting error]
We can now also save this widget – because we have an update() method. Notice that our title and selection saves on click. Now let’s move to the widget() method.

The widget() method

This is the method that actually outputs our widget. This method accepts a couple of arguments – one of them is our $instance array.

function widget($args, $instance) {
	extract( $args );
	$title = apply_filters('widget_title', $instance['title']);
	$numberOfListings = $instance['numberOfListings'];
	echo $before_widget;
	if ( $title ) {
		echo $before_title . $title . $after_title;
	}
	$this->getRealtyListings($numberOfListings);
	echo $after_widget;
}

One thing to note is the $before_widget and $after_widget variables. These are, markups that appear – you guessed it: before and after the widget. You will also see $this->getRealtyListings() – which we’ll cover next.

Pull our Custom Posts

This method will do a query of our custom posts. It will only return the number of posts that we’ve saved in our widget. Add this code to our class:

function getRealtyListings($numberOfListings) { //html
	global $post;
	add_image_size( 'realty_widget_size', 85, 45, false );
	$listings = new WP_Query();
	$listings->query('post_type=listings&posts_per_page=' . $numberOfListings );
	if($listings->found_posts > 0) {

[code above has been truncated – due to syntax highlighting error]

So we have the above code which takes 1 parameter: $numberOfListings. We do an add_image_size() so we can get a custom size for our thumbnails. Also note where we’re querying the post_type of “listings”, you can change this value to your own post type (or not even use it for default).
The code then continues building the HTML output of list items containing our post thumbnail, title and date added.

Add some CSS

Our CSS is pretty straightforward, just keeping the elements in the right place. You also might want to use your own styles, so I’ll just post the code that I used, without further explanation.

.noThumb{
  width:85px;
  height:45px;
  background-color:#000;
  float:left;
  margin:0 12px 0 0;
}
ul.realty_widget {
  margin-top:10px;
}
ul.realty_widget li {
  margin:0 0 15px 0;
  list-style:none;
  min-height:45px;
  line-height:19px;
}
ul.realty_widget li img{
  float:left;
  margin:0 12px 0 0;
}
ul.realty_widget li a {
  font-weight:bold;
}
ul.realty_widget li span {
  display:block;
  font-size:11px;
}

So with the above styling, our final output looks like below:

Conclusion

So there you have it. We have added a widget to our WordPress theme that pulls our custom post types. As mentioned, this technique will work with regular posts as well. I have updated the Realty theme files to include this code – so you can go ahead and download it if you like. Please let me know in the comments if this tutorial helped your development in any way.

The post Let’s make a WordPress Widget that displays our Custom Post Types appeared first on Michael Soriano.

These letters have to be submitted to the web server, check if the values match. If it does, then process the information… or else, you must be a bot.
As mentioned, CI has already done the leg work in creating the fuzzy image with the letters. This is called the Captcha helper. All you need to do is pass an array of options then voila! Your image is created. This tutorial will teach you how to wrap this functionality in our own class, so additional methods can be hooked up to it. This will make our wrapper encapsulated and reusable for as many forms as we need within our application.
Note that I’m assuming that you’ve worked with CI before, or have experience with MVC, or even just object oriented programming. Ready to get started? Let’s begin:
In our application/libraries folder, create a new file and name it Mycaptcha.php. Let’s create our class and name it Mycaptcha. Inside, let’s define a couple of variables for later use, add our constructor method which creates $CI. $CI is to ensure that we’re dealing with the same object we use from within our controllers.

class Mycaptcha {
    public $word = '';
    public $ci = '';
    public function __construct() {
        $CI = & get_instance();
        $CI->load->helper('captcha');
        $this->ci = $CI;
    }
}

Next, let’s create a method to create the random words in the image.

public function createWord(){
        $chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        $word = '';
        for ($a = 0; $a <= 5; $a++) {
            $b = rand(0, strlen($chars) - 1);
            $word .= $chars[$b];
        }
        $this->word = $word;
        return $this;
}

Now we have 2 properties accessible throughout our class (ci and word). Let’s go ahead and create the Captcha image using CI’s helper:

public function createCaptcha(){
        $cap = array(
            'word' => $this->word,
            'img_path' => './httpdocs/captcha/', //this is your directory
            'img_url' => base_url() . 'httpdocs/captcha/',
            'img_width' => '150',
            'img_height' => '30',
            'expiration' => '7200'
        );
        $captchaOutput = create_captcha($cap);
        $this->ci->session->set_userdata(array('word'=>$this->word, 'image' => $captchaOutput['time'].'.jpg')); //set data to session for compare
        return $captchaOutput['image'];
    }

Notice that we’re using the 2 properties that I mentioned. Also, make sure you have a folder with write permissions somewhere in your application. Above – I have it in ‘./httpdocs/captcha/’ – which goes outside of our application folder. This is where the images will be saved. Another thing to notice here – I’m saving the word and the jpg name in session using CI’s session class (line 13 above). This will make it easier for us to check the value for form submission and have the image name as well (for cleanup).
Our last method is to delete the image that we’ve created. The code is below:

public function deleteImage(){
        if(isset($this->ci->session->userdata['image'])){
            $lastImage = FCPATH . "httpdocs/captcha/" . $this->ci->session->userdata['image'];
            if(file_exists($lastImage)){
                unlink($lastImage);
            }
        }
        return $this;
    }

Adding Captcha to Form Validation

Now we have our class, we need a way to check the values against our form field. Let’s create a new file and call it MY_Form_validation.php and save it in libraries folder. Here, we are extending the form validation class in CI.

class MY_Form_validation extends CI_Form_validation {
public function validate_captcha($word)
    {
         $CI = & get_instance();
         if(empty($word) || $word != $CI->session->userdata['word']){
            $CI->form_validation->set_message('validate_captcha', 'The letters you entered do not match the image.');
            return FALSE;
         }else{
             return TRUE;
         }
    }
}

The method above simply checks the parameter ($word) against the value set in our session (from our class). It also set an error message so we can present it nicely. Finally, let’s get to our controller to make it all stick.

$this->form_validation
        ->set_rules('captcha', 'Captcha', 'required|validate_captcha');
        //above is our custom validation
$this->load->library('mycaptcha'); //this is our wrapper
if ($this->form_validation->run() == FALSE) {
            $data['captcha'] = $this->mycaptcha
                    ->deleteImage() //these are the 3 methods
                    ->createWord()
                    ->createCaptcha();
            $this->load->view('YOURVIEW.php', $data);
        } else {
            $this->mycaptcha->deleteImage(); //delete image again
            $this->session->set_flashdata(array('message' => 'Your message was sent successfully', 'type' => 'success'));
            redirect('YOURSUCCESSPAGE.php');
        }

As you see, we kept our controller straight to the point. We pass our ‘validate_captcha’ in CI’s set rules, along with the input field name (line 1). We load our wrapper, runs the validation and the 3 methods from our class. Notice deleteImage() runs in the else clause as well? That’s because we delete the image even if it’s successful to keep our directory clean.
All we have to do is call it in our form like so:

Enter the Letters Below:

Conclusion

Our wrapper can be now reused in all our forms. I especially like that in our controller, all we need to do is:
$this->mycaptcha->deleteImage()->createWord()->createCaptcha() – which will run all our methods fluently.
Questions? Please feel free to leave them below.

The post Let’s create a wrapper for the Captcha helper in Codeigniter appeared first on Michael Soriano.

1. Add The Form

Our form will be a simple one. All we need is to grab their email address, and a submit button. Add the code below to our existing opt in box:

Note that our form’s method is “Post”, while our action is “process.php”. This is the file that will handle our processing. Also, we added a hidden field to add our file link. If you recall in part 1 of the tutorial, we are prompting this form to people who want to download our files. This hidden field will contain the value of the link to our file.
Next up is to add some Javascript to validate our form. This will prevent the form from being submitted if the email is invalid or empty. Note that this only our client side check – we will validate the submission once again in the server side. Wrap the code below inside script tags:

Client Side Validation:

Remember from our first exercise, we have the jQuery library in our pages. So the selector $(‘input.submitbutton’) targets our submit button and it’s click event. The code checks the entry if its empty and if it looks like a good email address. This is achieved using regular expressions. The code returns false if the matches are met – meaning the submit button won’t work.

The Database

Let’s setup the database so we can store the email addresses that we will collect. I use MySql – which is free and comes with XAMPP. I’m using XAMPP to develop locally. You might want to create directly on your hosting – so you can use phpMyAdmin. The process is the same.
Create a database:

In your database, create a table named “email” with 2 columns: 1) id – make sure you this is the primary key, and check “auto-increment”, 2) email – this you can set as “VARCHAR” and with 255 length.

You can add extra columns such as name and date – but for the purpose of this tutorial, I’m keeping it to a minimum. Now for the next step – the processing page.

3. The Processing Page

This page will be the one that will store the submitted information to our database. It will also be the one that will send the user the link to the file that they’re downloading.
Create a file – name it “process.php” and store it in the same directory as your opt in form. First we use this brilliant function from Douglas Lovell, which will be our server side validation of the email address from our form.
But why do we need to validate the email again – when we’ve already done so using Javascript in our code above? That is simple – users can disable Javascript and submit all sorts of things in our form. They can also inspect our source code and see our form action and method. This allows them to go directly to our processing page with POST values of their own. This is a big no – no. So client and server side validation is necessary. Add the code below to our new page:

Server Side Validation:

Then we add the code below to continue our processing code:

Explanation: First we check if our POST data is set and is not empty and if it is a valid email (we pass our POST variable to the function “validEmail”. If everything looks good – we start our database code. We make sure the email is safe to enter in our database by using mysql_escape_string , and assigning it to a new variable “$cleanEmail”. Then we setup the database connection and credentials, we select the database and prepare our sql statement – appending the $cleanEmail variable. Finally, we execute the query.
Continue with the code below to process the email that goes out to our user:

Sending the Link to the Subscriber:

The above sets up a few more variables : $to is the user’s submitted email address, $link is the hidden field from our form – which contained $subject and $message comprise of our message. The mail function sends our mail and header sends our user to a new page. Notice the else statement – which contains another header function – but to a different page.

4. The Redirect Pages

This part is just a couple of static landing pages to capture the user when a) there’s a problem and b) if their submission is successful:
Create a page called “thank-you.php” and enter the HTML below with a success message. Also, a page called “problem.php” with a problematic message.

Conclusion

At this point you should have a working form, a processing page and a database table expecting some data. Test your form and enter a valid email address. If you’re developing locally, chances are you will run into this error: “mail() [function.mail]: Failed to connect to mailserver at “localhost“. Dont’ worry – this is due to your local server is not configured to send emails. Verify that your table has the email address you entered. Important – you also must test the validation code. Put in some bogus characters, and malformed email addresses to do this. It is important that you keep bad data from being injected into your db.
Finally, be aware that this code may not be optimal data wise. Things to keep in mind are ways to prevent spam, duplicate entries and maybe add cookies to prevent “re-popping up” to the same user. Please feel free to share your comments below.

The post How to create an Email Opt in Box for your Downloads – Part 2 appeared first on Michael Soriano.