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:
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)
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:)
Informaive article
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