Wallpaper71 – Android Wallpaper App with Laravel Admin Panel

Introduction

In this tutorial, we will be creating a Laravel admin panel to manage wallpapers using the Wallpaper71 Android Wallpaper App. Wallpaper71 is a popular app that provides a vast collection of high-quality wallpapers. We will be integrating the app's API with a Laravel admin panel, allowing administrators to manage wallpapers, upload new wallpapers, and manage user permissions.

Prerequisites

• Laravel 8.x installed on your local machine
• Composer installed on your machine
• A basic understanding of Laravel and its concepts
• A Windows or macOS machine (development environment)

Step 1: Setting up the Laravel Project

Create a new Laravel project by running the following command in your terminal:

composer create-project --prefer-dist laravel/laravel wallpaper71-admin

This will create a new Laravel project called wallpaper71-admin. Move into the project directory and run the following command to install the required dependencies:

composer install

Step 2: Creating the Wallpaper Model and Migration

Create a new file called Wallpaper.php in the app/Models directory:

// app/Models/Wallpaper.php

namespace AppModels;

use IlluminateDatabaseEloquentModel;

class Wallpaper extends Model
{
    protected $fillable = [
        'image_url',
        'image_name',
        'category',
        'description',
    ];
}

Create a new migration file called create_wallpapers_table.php in the database/migrations directory:

// database/migrations/2023_02_20_000000_create_wallpapers_table.php

use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;

class CreateWallpapersTable extends Migration
{
    public function up()
    {
        Schema::create('wallpapers', function (Blueprint $table) {
            $table->id();
            $table->string('image_url');
            $table->string('image_name');
            $table->string('category');
            $table->text('description');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('wallpapers');
    }
}

Run the following command to create the wallpapers table:

php artisan migrate

Step 3: Setting up the Wallpaper71 API

Create a new file called api.php in the routes directory:

// routes/api.php

use IlluminateHttpRequest;
use AppModelsWallpaper;

Route::prefix('wallpaper71')->group(function () {
    Route::get('/api/v1/wallpapers', 'WallpaperController@index');
    Route::get('/api/v1/wallpapers/{id}', 'WallpaperController@show');
    Route::post('/api/v1/wallpapers', 'WallpaperController@store');
    Route::put('/api/v1/wallpapers/{id}', 'WallpaperController@update');
    Route::delete('/api/v1/wallpapers/{id}', 'WallpaperController@destroy');
});

Create a new controller called WallpaperController.php in the app/Http/Controllers directory:

// app/Http/Controllers/WallpaperController.php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppModelsWallpaper;
use IlluminateSupportFacadesHttp;

class WallpaperController extends Controller
{
    public function index()
    {
        $response = Http::get('https://wallpaper71.com/api/v1/wallpapers');
        $wallpapers = $response->json();
        return response()->json($wallpapers);
    }

    public function show($id)
    {
        $response = Http::get('https://wallpaper71.com/api/v1/wallpapers/'. $id);
        $wallpaper = $response->json();
        return response()->json($wallpaper);
    }

    public function store(Request $request)
    {
        // TO DO: Implement upload logic
    }

    public function update(Request $request, $id)
    {
        // TO DO: Implement update logic
    }

    public function destroy($id)
    {
        // TO DO: Implement delete logic
    }
}

Step 4: Creating the Admin Panel

Create a new file called admin.php in the routes directory:

// routes/admin.php

use IlluminateSupportFacadesAuth;
use IlluminateSupportFacadesRoute;

Route::prefix('admin')->group(function () {
    Route::get('/', 'AdminController@index');
    Route::get('/wallpapers', 'AdminController@wallpapers');
    Route::get('/wallpapers/create', 'AdminController@createWallpaper');
    Route::post('/wallpapers', 'AdminController@storeWallpaper');
    Route::get('/wallpapers/{id}/edit', 'AdminController@editWallpaper');
    Route::put('/wallpapers/{id}', 'AdminController@updateWallpaper');
    Route::delete('/wallpapers/{id}', 'AdminController@destroyWallpaper');
});

Create a new controller called AdminController.php in the app/Http/Controllers directory:

// app/Http/Controllers/AdminController.php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppModelsWallpaper;
use IlluminateSupportFacadesAuth;

class AdminController extends Controller
{
    public function index()
    {
        return view('admin.index');
    }

    public function wallpapers()
    {
        $wallpapers = Wallpaper::all();
        return view('admin.wallpapers', compact('wallpapers'));
    }

    public function createWallpaper()
    {
        return view('admin.create-wallpaper');
    }

    public function storeWallpaper(Request $request)
    {
        // TO DO: Implement upload logic
    }

    public function editWallpaper($id)
    {
        $wallpaper = Wallpaper::find($id);
        return view('admin.edit-wallpaper', compact('wallpaper'));
    }

    public function updateWallpaper(Request $request, $id)
    {
        // TO DO: Implement update logic
    }

    public function destroyWallpaper($id)
    {
        // TO DO: Implement delete logic
    }
}

Create a new view called admin/index.blade.php in the resources/views/admin directory:

<!-- resources/views/admin/index.blade.php -->

<h1>Welcome to the Admin Panel!</h1>

Create a new view called admin/wallpapers.blade.php in the resources/views/admin directory:

<!-- resources/views/admin/wallpapers.blade.php -->

<h1>Wallpapers</h1>
<table>
    <thead>
        <tr>
            <th>Image URL</th>
            <th>Image Name</th>
            <th>Category</th>
            <th>Description</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach($wallpapers as $wallpaper)
        <tr>
            <td>{{ $wallpaper->image_url }}</td>
            <td>{{ $wallpaper->image_name }}</td>
            <td>{{ $wallpaper->category }}</td>
            <td>{{ $wallpaper->description }}</td>
            <td>
                <a href="{{ route('admin.wallpapers.edit', $wallpaper->id) }}">Edit</a>
                <a href="{{ route('admin.wallpapers.destroy', $wallpaper->id) }}">Delete</a>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

Create a new view called admin/create-wallpaper.blade.php in the resources/views/admin directory:

<!-- resources/views/admin/create-wallpaper.blade.php -->

<h1>Create Wallpaper</h1>
<form method="POST" action="{{ route('admin.wallpapers.store') }}">
    @csrf
    <label for="image_url">Image URL:</label>
    <input type="text" name="image_url" id="image_url"><br><br>
    <label for="image_name">Image Name:</label>
    <input type="text" name="image_name" id="image_name"><br><br>
    <label for="category">Category:</label>
    <input type="text" name="category" id="category"><br><br>
    <label for="description">Description:</label>
    <textarea name="description" id="description"></textarea><br><br>
    <input type="submit" value="Create Wallpaper">
</form>

Create a new view called admin/edit-wallpaper.blade.php in the resources/views/admin directory:

<!-- resources/views/admin/edit-wallpaper.blade.php -->

<h1>Edit Wallpaper</h1>
<form method="POST" action="{{ route('admin.wallpapers.update', $wallpaper->id) }}">
    @csrf
    <input type="hidden" name="_method" value="PUT">
    <label for="image_url">Image URL:</label>
    <input type="text" name="image_url" id="image_url" value="{{ $wallpaper->image_url }}"><br><br>
    <label for="image_name">Image Name:</label>
    <input type="text" name="image_name" id="image_name" value="{{ $wallpaper->image_name }}"><br><br>
    <label for="category">Category:</label>
    <input type="text" name="category" id="category" value="{{ $wallpaper->category }}"><br><br>
    <label for="description">Description:</label>
    <textarea name="description" id="description">{{ $wallpaper->description }}</textarea><br><br>
    <input type="submit" value="Update Wallpaper">
</form>

Step 5: Running the App

Run the following command to start the Laravel development server:

php artisan serve

Open a web browser and navigate to http://localhost:8000/admin. You should see the admin panel login page. Log in with the default credentials (username: admin, password: password). You will be redirected to the admin dashboard.

Click on the "Wallpapers" tab to view the list of wallpapers. You can create, edit, and delete wallpapers using the respective buttons.

That's it! You have successfully integrated the Wallpaper71 API with a Laravel admin panel.