Categories
JavaScript

ReactJS Firebase Blogging Application

Advertisements

I have just released a dev branch of my first ReactJS application which utilises the Firebase database. If you are looking to build a ReactJS application, then I encourage you to clone my repo and create any PRs which you think will be helpful towards the project. You can also preview my ReactJS blogging app here and please let me know what you think of it.

You can contact me through comments on this blog post, or you can message me on GH with any questions/suggestions.

Categories
Laravel

Laravel 4: How To Use Jquery UI Sortable

Advertisements

Laravel 4: How To Use Jquery UI Sortable

Click and drag sorting

I needed a way to change the sort order of my data inside of an admin interface which I have created. After a little looking around, I found many tutorials which would show how to get this done with JQuery. But wouldn’t show the best way to handle this data (and in my case using Laravel to handle this data). I dug around for quite a bit, but I ended up finding this lovely little tutorial by dragonfire1119 which was called How To Use Jquery UI Sortable In Laravel 4.

The only trouble is, when you follow this tutorial, it could be tidied up a little, here is my version…

// Place this inside your View

@foreach($categories as $category)
    sort me
@endforeach

Here is the JQuery…

$(document).ready(function () {
    $('.sortable').sortable({ cursor: 'move', axis: 'y', update: function () {
        var order = $(this).sortable('toArray');
        $.post('{{ URL::route('Sliders::sort') }}', { order: order })
    }
    });
});

And then your Controller will look like this…

<?php
public function sort() {
    $input = Input::get('order');
    $i = 1;
    
    foreach($input as $value) {
        $banner = Banner::find($value);
    
        $banner->sort_by = $i;
        $banner->save();
        
        $i++;
    }
}

The JQuery and Controller could also look like this…

$(document).ready(function () {
    $('.sortable').sortable({ cursor: 'move', action (event, ui) {
        var data = $(this).sortable('serialize');
        
        $.ajax({ data: data, type: 'POST', url: '{{ URL::route('Sliders::sort') }}' });
    }
    });
});

Updated Controller…

<?php
public function sort() {
    $input = Input::get('item');
    $i = 0;
    foreach($input as $value) { $banner = Banner::find($value);
        $banner->sort_by = $i;
        $banner->save();
        $i++;
    }
}

I think that both work just as well and it is down to personal preference. If you would like to know where I got the second method from, you can take a look here.

As always, if you have any comments/suggestion the please feel free to let me know in the comments.

Categories
Laravel

Laravel AJAX Tutorial Using HTML5’s FormData

Advertisements

Laravel AJAX Tutorial Using HTML5’s FormData

For this tutorial, I will show you guys how I managed to create an image uploader for your profile image. This is very similar to how Facebook’s/Twitter’s functionality.

Routes

First of all, let’s create the routes, for this, we will need to create a get and post route…

<?php
Route::get('{username}', 'UsernameController@show');
Route::post('{username}/upload', 'UploadController@profileImage');

Controllers

Remember that you can name the controllers and methods anything you like, as long as you keep everything consistent. Now we need to create the controllers and methods which are as follows…

<?php
// User Controller, index mehod
public function show($username) {
    $user = User::where('username', $username)->first(); $userData = User::find($user->id)->UserDetail;

    return View::make('user', array( 'userData'=> $userData ))->with('user', $user);
}

We are trying to get the user’s information where it matches in the URI. As you can see, I have a one to one relationship with a user and a user’s information (called UserDetail). I believe the user array could be placed along with the user data array. However, I decided to place this inside the with a method.

Now we need to handle the image data which will upload the image to the background. Without anyone knowing it’s happening…

<?php
// UploadController, profileImage method
public function profileImage($username){
    $user = User::where('username', $username)->first();

    $temp = $_FILES['upload']['tmp_name']; $image = $_FILES['upload']['name'];
    $ext = pathinfo($image, PATHINFO_EXTENSION);
    
    $newFilename = uniqid($user->id);
    
    if(!is_dir("images/$username/")) { mkdir("images/$username", 0777); }
    
    $img = Image::make($temp);
    
    $img->fit(130, 130);
    
    $src = "images/$username/$newFilename.$ext";
    
    $img->save($src);
    
    $query = User::find($user->id)->profileImage; $query->src = $src;
    $query->alt = $username . '\'s Profile Image';
    $query->save();
}

Firstly, we need to match the username with the username in the URI, after this, we grab the image and process it. Please note that I am using the Intervention/Image package, which you can easily grab and install to implement it on your website. We check to see if the directory exists, if it doesn’t, then we create it with r/w permissions. I then use the image package to create an image which is 130px X 130px, the fit method will automatically crop the image so it doesn’t look stretched and horrible. We then give it a source which tells it where to save this image which then gets saved. Afterwards, we call the database and find the user to set the image src and alt rows.

Blade templates

Now that we have all the backend magic happening, we actually need to create a view which displays the form and automatically refreshes the image upon upload completion…

@extends('layout')

@section('content')

    <div class="row">
    
        <div id="profile-wrapper">
        
            <div class="large-2 columns pull-left">
                <img class="profile-thumb th" src="/{{ $user->profileImage->src }}"
                    alt="Profile Image" />
            </div>
            
            <h2>About</h2>
            
            @if(isset($loggedIn) && $loggedIn->username == $user->username)
                <a href="#" class="upload-link"> Upload a file </a>
                <div class="hidden-upload">
                    {{ Form::open(array(
                        'action' => array('User::upload',
                        $user->username),
                        'files' => 'true',
                        'id' => 'image-form')) }}
                        {{ Form::file('upload', array('class' => 'profile-upload')) }}
                    {{ Form::close() }}
                </div>
            @endif
        </div>
    
        {{ $userData->about }}
    </div>

@stop

Javascript (Ajax)

We only want to show this hidden form if the user is logged in and it’s the same logged in user which is seeing their own profile. As you can see, we are using Laravel’s blade syntax which makes this page look a lot cleaner and easier to see what is going on. Right, now we need the JQuery which will send the image to the post controller we recently created…

<script>
    if(isset(user)) {
        form.change(function() {
            var formData = new FormData($('form')[0]);
            
            jQuery.ajax({
                url: '{{ $user->username }}/upload'
                data: formData,
                processData: false,
                contentType: false,
                type: 'post',
                success: function(
                    window.location.reload(true);
                )
            })
        })
    }
</script>

I have created my own scripts.blade.php which gets placed into my layout.blade.PHP, you can do the same, or you can include this within the page itself. I then added an if statement to avoid any errors for when a user isn’t logged in. For our JQuery creates a new format function and passes in the form we created, we then call the ajax method and pass it some parameters.

  • URL: sets the URL to where the image needs to get passed to, this is the route we created above.
  • data: sets the data to formData.
  • processData and contentType are both set to false, this has to be set to avoid any future errors.
  • type: We set this to post as it is a post method.
  • success: On success, it will refresh the window to display the newly uploaded image.

Styles

There you guys have it, this is all we need to create our really awesome AJAX upload form. However, you guys might be wondering, how do we hide the form? We here are the optional steps so you can create a hidden form which gets shown upon mouse hover…

.upload-link {
    position: absolute;
    top: 100px;
    left: 35px;
    z-index: 0;
}

#profile-wrapper:hover .upload-link {
    display: inline; background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 2px;
}

.hidden-upload {
    position: absolute;
    top: 100px;
    left: 35px;
    z-index: 1;
}

.hidden-upload .profile-upload {
    opacity: 0;
}

Now, that is all there is (I promise). If you have any questions, comments or feedback, then please feel free to drop a comment down below. I always like to read what you guys have to say and love replying back to you. I hope you look forward to my next Blog post.