Jekyll2017-01-06T00:29:59+00:00//Kim L. Fraser PortfolioWrite an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
Laravel and Vuejs Pagination2017-01-03T00:00:00+00:002017-01-03T00:00:00+00:00/laravel,vuejs/2017/01/03/Laravel-and-VueJS-Pagination<p>After playing around with Vuejs and Laravel I decided to write about creating Pagination with Laravel as the backend and VueJS as the frontend.</p>
<h2 id="tools-used">Tools Used:</h2>
<p><a href="https://laravel.com" title="Laravel">Laravel</a>
<a href="vuejs.org" title="VueJS">VueJS</a>
<a href="https://github.com/fraserk/vuejspagination" title="Source">Get the code on Github</a></p>
<h3 id="the-set-up">The Set up.</h3>
<p>Going to first use laravel to create some fake data and set-up the routes. I will assume you know how to set-up a new Laravel site.</p>
<p>Lets create a model factory to get some test data in the database. This is going to be really simple.
All we going to use for the data is the contact name.
~~~
$factory->define(App\Contact::class, function (Faker\Generator $faker) {
return [
‘name’ => $faker->name
];
});
~~~</p>
<h3 id="create-the-seeder-file">Create the seeder file.</h3>
<div class="highlighter-rouge"><pre class="highlight"><code>php artisan make:seeder ContactSeeder
</code></pre>
</div>
<p><em>That will create a ContactSeeder.php file in database/seeds</em></p>
<h3 id="now-lets-create-the-model-and-migration">Now lets create the model and migration</h3>
<p>Run the following Laravel Artisan Command.</p>
<div class="highlighter-rouge"><pre class="highlight"><code>php artisan make:model Contact -m
</code></pre>
</div>
<p><em>That will create a Contact model and migration file.</em></p>
<p>Edit the migration file</p>
<p>Just add a name field as a string
~~~
public function up()
{
Schema::create(‘contacts’, function (Blueprint $table) {
$table->increments(‘id’);
$table->string(‘name’);
$table->timestamps();
});
}
~~~</p>
<h4 id="make-sure-youre-connected-to-a-database--edit-the-env-file-with-you-database-info">Make sure you’re connected to a database. Edit the .env file with you database info.</h4>
<p>Run the migration file
~~~
php artisan migrate
~~~</p>
<h3 id="now-we-just-have-to-edit-out-seed-file-and-run-it">Now we just have to edit out seed file and run it.</h3>
<p>Open database/seed/ContactSeeder.php</p>
<p>Add the following to the run function</p>
<div class="highlighter-rouge"><pre class="highlight"><code>public function run()
{
factory(App\Contact::class, 50)->create();
}
</code></pre>
</div>
<p><em>That will create 50 fake names in the database we can use.</em></p>
<p>One last step for the database part.</p>
<p>Open database/seeds/DatabaseSeeder.php</p>
<p>Add a call to the ContactSeeder we created earlier.
~~~
$this->call(ContactSeeder::class);
~~~
Then Run the Laravel Artisan Command
~~~
php artisan db:seed
~~~
<strong>The database should now have 50 records of names in it.</strong></p>
<h2 id="now-lets-create-the-routes-and-controller">Now lets create the routes and controller</h2>
<p>Create 2 simple routes to access the data.
~~~
Route::get(‘/api/contacts’, ‘ContactController@show’);
~~~
This route will be use to get the data in VueJS.</p>
<p>In the ContactControllerController show method, let just retrieve all the data and paginate it.
Laravel will automatically return the data as json.</p>
<p>Create the following method.</p>
<div class="highlighter-rouge"><pre class="highlight"><code>public function show()
{
return Contact::paginate(10);
}
</code></pre>
</div>
<p>If you navigate to localhost/api/contacts in the browser, you should see you data from the database.</p>
<p><img src="/assets/images/jsondata.png" alt="Laravel Json Pagination" /></p>
<h2 id="vuejs-time">VueJS time</h2>
<p><em>Im going to assume you know how to setup VueJS with laravel.</em></p>
<p>We are going to use the Example.vue component that come with Laravel.
in recources/assets/js/components</p>
<p>For the sake of keeping this simple we are just going to use the welcome view that comes with laravel. Edit it like the following.
<em>Now edit the examle.vue file.</em></p>
<div class="highlighter-rouge"><pre class="highlight"><code>@extends('layouts.app')
@section('content')
<example>
</example>
@endsection
</code></pre>
</div>
<p>Here is what the table in the template looks like.</p>
<div class="highlighter-rouge"><pre class="highlight"><code><template>
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>NAME</td>
<td>Created At</td>
</tr>
</thead>
<tbody>
<tr v-for="contact in contacts.data">
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="5">
<nav araia-label="Page navigation">
<ul class="pagination">
<li v-show="contacts['prev_page_url']">
<a href="#" @click.prevent="getPreviousPage">
<span>
<span aria-hidden="true">&laquo;</span>
</span>
</a>
</li>
<li v-for="n in contacts['last_page']">
<a href="#" @click.prevent="getPage(n)">
<span >
</span>
</a>
</li>
<li v-show="contacts['next_page_url']">
<a href="#" @click.prevent="getNextPage">
<span>
<span aria-hidden="true">&raquo;</span>
</span>
</a>
</li>
</ul>
</nav>
</td>
</tr>
</tbody>
</table>
</template>
</code></pre>
</div>
<p>Here is the vue methods looks like, with the ajax calls to to laravel.</p>
<div class="highlighter-rouge"><pre class="highlight"><code><script>
export default {
data(){
return {
contacts: {}
}
},
mounted() {
this.getContactList();
},
methods: {
getContactList(){
this.$http.get('/api/contacts').then((response)=>{
this.$set(this.$data, 'contacts',response.data);
}, (response)=>{
console.log(response.data)
});
},
getPage(page){
this.$http.get('/api/contacts?page='+page).then((response)=>{
this.$set(this.$data, 'contacts',response.data);
},(response)=>{
});
},
getPreviousPage(){
this.$http.get(this.contacts['prev_page_url']).then((response)=>{
this.$set(this.$data, 'contacts',response.data);
},(response)=>{
});
},
getNextPage(){
this.$http.get(this.contacts['next_page_url']).then((response)=>{
this.$set(this.$data, 'contacts',response.data);
},(response)=>{
});
},
}
}
</script>
</code></pre>
</div>
<p>Here’s a quick demo.</p>
<p><img src="/assets/images/pagination-demo.gif" alt="Pagination demo" /></p>After playing around with Vuejs and Laravel I decided to write about creating Pagination with Laravel as the backend and VueJS as the frontend.First Blog Post Of 20172017-01-03T00:00:00+00:002017-01-03T00:00:00+00:00/general/2017/01/03/First-Blog-Post-Of_2017<p>I decided to clean up and finally put this site to use. I will be putting some all of the <a href="/projects" title="Kim L. Fraser Side projects">Side Project</a> side projects I’ve been working. I also plan on writing a blog post everyday about any thing new I have learned about programming. I will be writing mostly about Laravel and Vuejs. I also plan on recording some video’s, I think that will help get better with laravel and vuejs.</p>I decided to clean up and finally put this site to use. I will be putting some all of the Side Project side projects I’ve been working. I also plan on writing a blog post everyday about any thing new I have learned about programming. I will be writing mostly about Laravel and Vuejs. I also plan on recording some video’s, I think that will help get better with laravel and vuejs.