laraveltailwindumkmtutorialweb-development

Membangun Website UMKM Modern dengan Laravel dan Tailwind CSS

•15 Januari 2025

Artikel ini sepenuhnya ditulis oleh teknologi AI ( Claude Sonnet 4 ) dan direview Oleh Muhammad Aji Sukma

Sebagai developer yang sering bekerja dengan klien UMKM, saya sering diminta untuk membangun website yang tidak hanya menarik secara visual, tetapi juga fungsional dan mudah dikelola. Dalam artikel ini, saya akan berbagi pengalaman dan tutorial lengkap untuk membangun website UMKM modern.

Mengapa Laravel + Tailwind CSS?

Laravel - Backend yang Powerful

Rapid Development: Laravel menyediakan banyak fitur out-of-the-box
Eloquent ORM: Memudahkan interaksi dengan database
Authentication: Sistem autentikasi yang sudah siap pakai
Blade Templates: Template engine yang powerful dan mudah

Tailwind CSS - Styling yang Efisien

Utility-First: Pendekatan yang memungkinkan styling cepat
Responsive: Built-in responsive design
Customizable: Mudah dikustomisasi sesuai brand
Small Bundle Size: Hanya CSS yang digunakan yang di-include

Fitur-Fitur Website UMKM

Website UMKM yang baik harus memiliki:

Halaman Beranda - Showcase produk/layanan utama
Katalog Produk - Display produk dengan kategori
Tentang Kami - Cerita dan profil UMKM
Kontak & Lokasi - Informasi kontak dan maps
Admin Panel - Untuk mengelola konten

Setup Project Laravel

# Install Laravel
composer create-project laravel/laravel umkm-website

# Masuk ke direktori project
cd umkm-website

# Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Konfigurasi Tailwind CSS

Edit file tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./resources/**/*.blade.php", "./resources/**/*.js", "./resources/**/*.vue"],
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#eff6ff",
          500: "#3b82f6",
          600: "#2563eb",
          700: "#1d4ed8",
        },
      },
    },
  },
  plugins: [],
};

Struktur Database

Mari buat model untuk produk:

// Migration: create_products_table.php
Schema::create('products', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->text('description');
    $table->decimal('price', 10, 2);
    $table->string('image')->nullable();
    $table->string('category');
    $table->boolean('is_featured')->default(false);
    $table->timestamps();
});

Model Product

<?php
// app/Models/Product.php
namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $fillable = [
        'name',
        'description',
        'price',
        'image',
        'category',
        'is_featured'
    ];

    protected $casts = [
        'price' => 'decimal:2',
        'is_featured' => 'boolean'
    ];
}

Controller untuk Homepage

<?php
// app/Http/Controllers/HomeController.php
namespace App\Http\Controllers;

use App\Models\Product;

class HomeController extends Controller
{
    public function index()
    {
        $featuredProducts = Product::where('is_featured', true)
                                  ->take(6)
                                  ->get();

        return view('home', compact('featuredProducts'));
    }
}

Template Blade dengan Tailwind

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@yield('title', 'UMKM Modern')</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
  </head>
  <body class="bg-gray-50">
    <!-- Navigation -->
    <nav class="bg-white shadow-lg fixed w-full z-50">
      <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between items-center py-4">
          <div class="font-bold text-xl text-primary-600">UMKM Modern</div>
          <div class="hidden md:flex space-x-8">
            <a href="/" class="text-gray-700 hover:text-primary-600">Beranda</a>
            <a href="/produk" class="text-gray-700 hover:text-primary-600">Produk</a>
            <a href="/tentang" class="text-gray-700 hover:text-primary-600">Tentang</a>
            <a href="/kontak" class="text-gray-700 hover:text-primary-600">Kontak</a>
          </div>
        </div>
      </div>
    </nav>

    <!-- Content -->
    <main class="pt-20">@yield('content')</main>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-12">
      <div class="max-w-7xl mx-auto px-4 text-center">
        <p>&copy; 2025 UMKM Modern. All rights reserved.</p>
      </div>
    </footer>
  </body>
</html>

Homepage Template

<!-- resources/views/home.blade.php -->
@extends('layouts.app') @section('title', 'UMKM Modern - Beranda') @section('content')
<!-- Hero Section -->
<section class="bg-gradient-to-r from-primary-600 to-primary-700 text-white py-20">
  <div class="max-w-7xl mx-auto px-4 text-center">
    <h1 class="text-4xl md:text-6xl font-bold mb-6">Produk Berkualitas untuk Kehidupan Modern</h1>
    <p class="text-xl mb-8 max-w-2xl mx-auto">
      Temukan koleksi produk terbaik kami yang dibuat dengan kualitas premium dan harga yang
      terjangkau
    </p>
    <a
      href="/produk"
      class="bg-white text-primary-600 px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition"
    >
      Lihat Produk
    </a>
  </div>
</section>

<!-- Featured Products -->
<section class="py-20">
  <div class="max-w-7xl mx-auto px-4">
    <div class="text-center mb-16">
      <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Produk Unggulan</h2>
      <p class="text-gray-600 max-w-2xl mx-auto">
        Pilihan terbaik dari koleksi kami yang paling diminati pelanggan
      </p>
    </div>

    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      @foreach($featuredProducts as $product)
      <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition">
        @if($product->image)
        <img
          src="{{ asset('storage/' . $product->image) }}"
          alt="{{ $product->name }}"
          class="w-full h-48 object-cover"
        />
        @endif
        <div class="p-6">
          <div class="text-sm text-primary-600 font-medium mb-2">
            {{ ucfirst($product->category) }}
          </div>
          <h3 class="text-xl font-semibold text-gray-800 mb-2">{{ $product->name }}</h3>
          <p class="text-gray-600 mb-4">{{ Str::limit($product->description, 100) }}</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-primary-600">
              Rp {{ number_format($product->price, 0, ',', '.') }}
            </span>
            <button
              class="bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700 transition"
            >
              Detail
            </button>
          </div>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>
@endsection

Tips untuk UMKM

SEO-Friendly: Pastikan website mudah ditemukan di Google
Mobile-First: Mayoritas pengunjung menggunakan HP
Loading Speed: Optimasi gambar dan performa
Social Media Integration: Mudah dibagikan di sosmed
WhatsApp Integration: Tombol kontak via WhatsApp

Deployment

Untuk deployment, saya merekomendasikan:

Shared Hosting: Untuk budget terbatas
VPS: Untuk kontrol lebih dan performa lebih baik
Cloud Hosting: AWS, DigitalOcean, atau Google Cloud

Kesimpulan

Kombinasi Laravel dan Tailwind CSS sangat powerful untuk membangun website UMKM yang modern, fungsional, dan mudah di-maintain. Website yang baik bisa membantu UMKM meningkatkan visibility dan penjualan.

Apakah Anda tertarik untuk membangun website untuk bisnis Anda? Jangan ragu untuk menghubungi saya!

Artikel selanjutnya: "Optimasi SEO untuk Website UMKM"

Pembuatan Website

Pengembangan Sistem Informasi

Manajemen Jaringan Perusahaan

Penyewaan Server VPS

Membangun Website UMKM Modern dengan Laravel dan Tailwind CSS

Artikel ini sepenuhnya ditulis oleh teknologi AI ( Claude Sonnet 4 ) dan direview Oleh Muhammad Aji Sukma

Mengapa Laravel + Tailwind CSS?

Laravel - Backend yang Powerful

Tailwind CSS - Styling yang Efisien

Fitur-Fitur Website UMKM

Setup Project Laravel

Konfigurasi Tailwind CSS

Struktur Database

Model Product

Controller untuk Homepage

Template Blade dengan Tailwind

Homepage Template

Tips untuk UMKM

Deployment

Kesimpulan

Bagikan Artikel

Artikel Terkait

Math Challenge Game - Game Matematika Interaktif dengan Sistem Waktu Dinamis

Kudus

TypeScript Mastery: Advanced Types dan Best Practices 2025

React.js Mastery: Hooks, Performance, dan Best Practices 2025

Python Data Science: Pandas, NumPy & Machine Learning Mastery 2025

Tentang Penulis

Muhammad Aji Sukma

Tags