Building a campus marketplace using Laravel and Cloudinary
Published: 2018-12-18 15:12:39

---
title: Building a campus marketplace using Laravel and Cloudinary
published: True
description: 
tags: 
---

![alt text](https://thepracticaldev.s3.amazonaws.com/i/dst2ry3yfoaayu121bjy.PNG "Logo Title Text 1")

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:


![alt text](https://thepracticaldev.s3.amazonaws.com/i/fn9tlo9sfk0vnhpmu9by.PNG "Login Page")


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


![alt text](https://thepracticaldev.s3.amazonaws.com/i/s4gi73tktkcjy18zpzsm.PNG "Login Page")

 
## Step 2: Create Models and Migration for the Marketplace App

The marketplace app needs the following tables in the database:
1. User table (already created at the beginning)
2. Product table
3. Category table
4. 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:

![alt text](https://thepracticaldev.s3.amazonaws.com/i/wtwv2hfoobbr7h0bsv3u.PNG "Logo Title Text 1")


Conclusion
I hope this article has familiarized you with the Laravel framework and a few of Cloudinary’s robust capabilities and that you’re impressed by them. Do apply what you’ve learned to build other useful apps. Enjoy the fun!