Building a campus marketplace using Laravel and Cloudinary

Victor Yunusa — Tue, 18 Dec 2018 15:12:39 +0000

On December 1, I participated in the HACK-API hackathon, sponsored by Cloudinary, in Accra, Ghana. The aim of the hackathon was to make the Cloudinary API known to the Ghanaian technology ecosystem. For our hackathon project, my team and I built a marketplace app for college campuses. Our purpose was twofold: to raise the awareness for the small businesses that operate within the campus and to make it easy for people to find certain products and services.

At the outset, our first priority was to locate a package that would facilitate the storage of the app’s images and videos on Cloudinary. Gratifyingly, after a thorough search on Github, I found Laravel, a framework of the PHP programming language, which fit the bill and with which we then developed the app’s back end. It was a smooth sail.

Read on for a step-by-step rundown of the development process.

Step 1: Install Laravel

To install Laravel, follow the procedure on its site. After installation, set up your .env variables, go to the installation folder, and follow the steps below:

Run this command to create an authentication scaffolding, for example, the login and registration pages:

php artisan make:auth

Run this command:

php artisan serve

The following output is then displayed, which shows that the server is currently running:

Laravel development server started: http://127.0.0.1:8000

Go to the URL on your browser.

The home page is then displayed:

Click LOGIN in the upper right corner for the Login page:

Step 2: Create Models and Migration for the Marketplace App

The marketplace app needs the following tables in the database:

User table (already created at the beginning)
Product table
Category table
Comments table

To create migration files for the products, category, and comments tables, run these three commands in the order listed:

php artisan make:migration create_products_table
php artisan make:migration create_categories_table
php artisan make:migration create_comments_table

Afterwards, go to the database/migrations folder for the migration files, You will see a list of the files you just created and the ones that were automatically created by Laravel.
Open the products migration file in a text editor and copy and paste the following code for the up function as the file content:

public function up() { Schema::create('products', function (Blueprint $table) { $table->increments('id'); $table->integer('user_id'); $table->string('product_name'); $table->integer('category'); $table->string('price'); $table->text('description')->nullable(); $table->text('image'); $table->timestamps(); }); }

Do the same for the categories and comment migration files:

public function up() { Schema::create('categories', function (Blueprint $table) { $table->increments('id'); $table->string('category'); $table->timestamps(); }); }

public function up() { Schema::create('comments', function (Blueprint $table) { $table->increments('id'); $table->integer('user_id'); $table->integer('product_id'); $table->string('comment'); $table->timestamps(); }); }

Step 3: Install the Laravel Package for Cloudinary

As reference, see the documentation for the Laravel package on Github.

Do the following:

Run this command to install the dependencies required by Cloudinary:

composer require jrm2k6/cloudder

Edit your .env file to add the following information from Cloudinary:

Required
CLOUDINARY_API_KEY=012345679890123 CLOUDINARY_API_SECRET=foobarfoobarfoob-arfoobarfo CLOUDINARY_CLOUD_NAME=foobarcorp
Optional
CLOUDINARY_BASE_URL CLOUDINARY_SECURE_URL CLOUDINARY_API_BASE_URL
Because Laravel 5.5+ features Package Auto-Discovery, you need not manually add the service provider (ServiceProvider). To bypass auto-discovery, add the following code to the config/app.php file:

'providers' => array( JD\Cloudder\CloudderServiceProvider::class, );

'aliases' => array( 'Cloudder' => JD\Cloudder\Facades\Cloudder::class, );

Finally, run this command:
php artisan vendor:publish --provider="JD\Cloudder\CloudderServiceProvider"

Step 4: Create Controllers

Laravel offers a unique way of generating fast and simple controllers. Just run the following command:
Php artisan make:controller ProductsController
Note: Be sure to initial-capitalize the name of the controller: Php.
Repeat the same command for categories and comments.
Next, go to the app/Http/Controllers folder for your controller files. Add the following code to the ProductsController.php file:

<?php

    namespace App\Http\Controllers;
    use Illuminate\Http\Request;
    use App\User;
    use Hash;
    use Session;
    use Validator;
    use Illuminate\Support\Facades\Input;
    use DB;
    use Auth;
    use Cloudder;

    class ProductsController extends Controller
    {

     //This function handles the add listing page.

        public function Index(){

            return view('add');
        }
     // This function saves the form data to the database.

     public function save(Request $request)
         {

            $pic = $request->file('file');
            $name = trim($request['name']);
            $price = trim($request['price']);
            $category = trim($request['category']);
            $description = trim($request['description']);

            $upload = Cloudder::upload($pic);

            if($upload){

                $picId = Cloudder::getPublicId();

                DB::table('products')->insert([ 
                    'item_name'  => $name,
                    'description'=> $description,
                    'price'      => $price,
                    'category'   => $category,
                    'user_id'    => Auth::user()->id,
                    'image'      => $picId,
                 ]);

            }

            return redirect()->intended("add-listing");

        }

            //This function displays the items on the product-listing page.

        public function listings(){

            $data['products'] = DB::table('products')->get();
            return view('listings', $data);
        }

            //This function displays a single item in detail.

        public function details($id){

           $data['products'] = DB::table('products')->where('id', "=", $id)->first();
            return view('details', $data);
        }

}

Step Five: Create Views

Laravel is a Model View Controller (MVC) framework. We touched on models and controllers earlier and will now show you how to create views by means of Laravel’s amazing templating engine, called Blade.

Go to the resources/views folder and create a new file called add.blade.php with the following code:

    @extends('layouts.app')

    @section('content')
    <div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Add new product</div>

                <div class="card-body">
                    <form method="POST" action="{{ url('save-item') }}" enctype="multipart/form-data">
                        @csrf

                        <div class="form-group row">
                       <label for="name" class="col-md-4 col-form-label text-md-right">Product Name</label>

                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="name" value="{{ old('name') }}" required autofocus>

                                @if ($errors->has('name'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('name') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="email" class="col-md-4 col-form-label text-md-right">Category</label>

                            <div class="col-md-6">
                                <select class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email"  required>
                                  <option></option>

                                </select>

                                @if ($errors->has('email'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="password" class="col-md-4 col-form-label text-md-right">Price</label>

                            <div class="col-md-6">
                                <input id="password" type="text" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="price" required>

                                @if ($errors->has('password'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">Description</label>

                            <div class="col-md-6">
                                <textarea id="password-confirm" type="text" class="form-control" name="description" required></textarea>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">Image</label>

                            <div class="col-md-6">
                                <input id="password-confirm" type="file" class="form-control" name="image" required>
                            </div>
                        </div>

                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Register') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

This is what the page looks like: