DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Victor Yunusa
Victor Yunusa

Posted on

Building a campus marketplace using Laravel and Cloudinary

alt text

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

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

alt text

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

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!

Top comments (3)

Collapse
 
spl3s profile image
Info Comment hidden by post author - thread only accessible via permalink
SPL3S

If writing post like this to promote other product, at least take a few more minutes to go through the code and structure you are posting.
For someone who is trying to learn basics, would stumble upon missing routes and then question why his setup doesn't work.

Also, your labels are carelessly copied & pasted from somewhere else:
label for="email" class="col-md-4 col-form-label text-md-right">Category</label

Category has label for="email" ?

Cmon you have 6 years of experience, it should be wired into your brain to not leave these things like that:)

Collapse
 
musebe profile image
eugene musebe

Informaive article

Collapse
 
philip profile image
Philip Kumah Jr

its 2022 and this is so informative. Thanks Victor. Had a couple of friends from MEST though.

Some comments have been hidden by the post's author - find out more

Tired of sifting through your feed?

You can change your feed and see more relevant posts by adding a rating to different tags on DEV. Head here to adjust your weights.