Panduan Lengkap Membuat Website Laravel E-Catalog di VirtualBox

Panduan Lengkap Membuat Website Laravel E-Catalog di VirtualBox Debian 12

Ditulis oleh : Fatih Athaillah Nugroho

https://radnet-digital.id/

Daftar Isi

  1. Pengenalan dan Overview
  2. Persiapan Lingkungan Development
  3. Instalasi dan Konfigurasi VirtualBox
  4. Setup Ubuntu Server di VirtualBox
  5. Konfigurasi Shared Folder
  6. Instalasi LEMP Stack
  7. Setup Project Laravel
  8. Pengembangan dengan VSCode
  9. Membuat Catalog Website
  10. Deployment dan Konfigurasi
  11. Keamanan dan Optimisasi
  12. Troubleshooting
  13. Best Practices
  14. Maintenance

1. Pengenalan dan Overview

1.1 Tujuan Panduan

Panduan ini akan membantu Anda membuat website catalog menggunakan Laravel di lingkungan virtual menggunakan VirtualBox. Website catalog yang akan dibuat memiliki fitur:

  • Manajemen produk
  • Kategori produk
  • Gambar produk
  • Search dan filter
  • Admin panel
  • API endpoints

1.2 Arsitektur Sistem

  • Host OS: Ubuntu Desktop
  • Guest OS: Ubuntu Server di VirtualBox
  • Web Server: Nginx
  • Database: MySQL
  • PHP Version: 8.1
  • Laravel Version: 10.x
  • Development Tool: VSCode

1.3 Kebutuhan Sistem

  • RAM minimal 8GB
  • Storage minimal 50GB
  • Processor dengan virtualization support
  • Koneksi internet stabil

2. Persiapan Lingkungan Development

2.1 Update Sistem Ubuntu Host

# Update package list dan upgrade sistem
sudo apt update
sudo apt upgrade -y

# Install essential tools
sudo apt install -y build-essential curl wget git unzip net-tools

2.2 Instalasi PHP dan Extensions

# Tambah repository PHP
sudo add-apt-repository ppa:ondrej/php
sudo apt update

# Install PHP dan extensions
sudo apt install -y php8.1 \
    php8.1-cli \
    php8.1-common \
    php8.1-curl \
    php8.1-dev \
    php8.1-gd \
    php8.1-imagick \
    php8.1-imap \
    php8.1-intl \
    php8.1-mbstring \
    php8.1-mysql \
    php8.1-opcache \
    php8.1-pgsql \
    php8.1-redis \
    php8.1-soap \
    php8.1-xml \
    php8.1-zip

# Verifikasi instalasi
php -v

2.3 Instalasi Composer

# Download installer
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === file_get_contents('https://composer.github.io/installer.sig')) { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

# Install Composer globally
sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer

# Cleanup
php -r "unlink('composer-setup.php');"

# Verifikasi instalasi
composer --version

2.4 Instalasi VSCode

# Install VSCode
sudo snap install code --classic

# Install extensions yang dibutuhkan
code --install-extension bmewburn.vscode-intelephense-client
code --install-extension onecentlin.laravel-blade
code --install-extension amiralizadeh9480.laravel-extra-intellisense
code --install-extension ryannaddy.laravel-artisan
code --install-extension shufo.vscode-blade-formatter
code --install-extension mikestead.dotenv
code --install-extension esbenp.prettier-vscode

3. Instalasi dan Konfigurasi VirtualBox

3.1 Instalasi VirtualBox

# Tambah repository VirtualBox
wget -q https://www.virtualbox.org/download/oracle_vbox_2016.asc -O- | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] http://download.virtualbox.org/virtualbox/debian $(lsb_release -cs) contrib"

# Install VirtualBox
sudo apt update
sudo apt install -y virtualbox-6.1

# Install Extension Pack
wget https://download.virtualbox.org/virtualbox/6.1.30/Oracle_VM_VirtualBox_Extension_Pack-6.1.30.vbox-extpack
sudo VBoxManage extpack install Oracle_VM_VirtualBox_Extension_Pack-6.1.30.vbox-extpack

3.2 Konfigurasi VirtualBox

  1. Buka VirtualBox dan buat VM baru:
    • Name: Laravel-Catalog
    • Type: Linux
    • Version: Ubuntu (64-bit)
    • Memory: 4096 MB
    • CPU: 2 cores
    • Hard disk: 40 GB (VDI, Dynamically allocated)
  2. Konfigurasi Network:
    • Adapter 1: NAT
    • Adapter 2: Host-only Adapter
    # Buat host-only network
VBoxManage hostonlyif create
VBoxManage hostonlyif ipconfig vboxnet0 --ip 192.168.56.1
  3. Konfigurasi Display:
    • Video Memory: 128 MB
    • Enable 3D Acceleration
  4. Konfigurasi Storage:
    • Controller: IDE
    • Add ISO: Ubuntu Server 22.04 LTS

4. Setup Ubuntu Server di VirtualBox

4.1 Instalasi Ubuntu Server

  1. Start VM dan boot dari ISO
  2. Pilih bahasa: English
  3. Keyboard configuration: Default
  4. Network connections:
    • eth0 (NAT): DHCP
    • eth1 (Host-only): Static IP 192.168.56.101
  5. Configure proxy: Skip
  6. Configure Ubuntu archive mirror: Default
  7. Guided storage configuration:
    • Use entire disk
    • Set up as LVM group
  8. Profile setup:
    Your name: Laravel Admin
Server name: laravel-catalog
Username: laravel
Password: [secure-password]
  9. SSH Setup:
    • Install OpenSSH server
    • Import SSH identity: No
  10. Featured Server Snaps: Skip

4.2 Post-Installation Setup

# Login ke server
ssh laravel@192.168.56.101

# Update sistem
sudo apt update && sudo apt upgrade -y

# Install essential tools
sudo apt install -y curl wget git unzip net-tools

# Configure timezone
sudo timedatectl set-timezone Asia/Jakarta

# Configure firewall
sudo ufw allow OpenSSH
sudo ufw allow 'Nginx Full'
sudo ufw enable

5. Konfigurasi Shared Folder

5.1 Instalasi Guest Additions

# Install build tools
sudo apt install -y build-essential dkms linux-headers-$(uname -r)

# Mount Guest Additions CD
sudo mount /dev/cdrom /mnt
cd /mnt
sudo ./VBoxLinuxAdditions.run
sudo reboot

5.2 Setup Shared Folder

  1. Di VirtualBox Manager:
    • Select VM > Settings > Shared Folders
    • Add new shared folder:
      • Folder Path: /home/[user]/projects/laravel-catalog
      • Folder Name: laravel-catalog
      • Auto-mount: Yes
      • Make Permanent: Yes
  2. Di VM:
# Buat mount point
sudo mkdir -p /mnt/laravel-catalog

# Add user ke vboxsf group
sudo usermod -aG vboxsf laravel

# Mount shared folder
sudo mount -t vboxsf laravel-catalog /mnt/laravel-catalog

# Set permissions
sudo chown -R laravel:laravel /mnt/laravel-catalog

5.3 Auto-mount pada Startup

# Edit fstab
sudo nano /etc/fstab

# Tambahkan line berikut
laravel-catalog /mnt/laravel-catalog vboxsf defaults,_netdev 0 0

6. Instalasi LEMP Stack

6.1 Nginx

# Install Nginx
sudo apt install -y nginx

# Start dan enable service
sudo systemctl start nginx
sudo systemctl enable nginx

# Verify installation
curl localhost

6.2 MySQL

# Install MySQL
sudo apt install -y mysql-server

# Secure installation
sudo mysql_secure_installation

# Create database dan user
sudo mysql -u root
CREATE DATABASE laravel_catalog;
CREATE USER 'laravel'@'localhost' IDENTIFIED BY 'secure_password';
GRANT ALL PRIVILEGES ON laravel_catalog.* TO 'laravel'@'localhost';
FLUSH PRIVILEGES;
EXIT;

6.3 PHP-FPM

# Install PHP-FPM dan extensions
sudo apt install -y php8.1-fpm \
    php8.1-cli \
    php8.1-common \
    php8.1-curl \
    php8.1-dev \
    php8.1-gd \
    php8.1-imagick \
    php8.1-imap \
    php8.1-intl \
    php8.1-mbstring \
    php8.1-mysql \
    php8.1-opcache \
    php8.1-pgsql \
    php8.1-redis \
    php8.1-soap \
    php8.1-xml \
    php8.1-zip

# Configure PHP
sudo nano /etc/php/8.1/fpm/php.ini

Konfigurasi PHP yang direkomendasikan:

memory_limit = 256M
upload_max_filesize = 64M
post_max_size = 64M
max_execution_time = 60
max_input_vars = 3000
display_errors = Off
error_reporting = E_ALL & ~E_DEPRECATED & ~E_STRICT
date.timezone = Asia/Jakarta
# Restart PHP-FPM
sudo systemctl restart php8.1-fpm

7. Setup Project Laravel

7.1 Install Composer di VM

# Download Composer
curl -sS https://getcomposer.org/installer | sudo php -- --install-dir=/usr/local/bin --filename=composer

# Verify installation
composer --version

7.2 Create Laravel Project

# Navigate to project directory
cd /mnt/laravel-catalog

# Create new Laravel project
composer create-project laravel/laravel .

# Set permissions
sudo chown -R laravel:www-data .
sudo chmod -R 775 storage bootstrap/cache

7.3 Configure Laravel

# Generate app key
php artisan key:generate

# Configure .env
nano .env
APP_NAME="Laravel Catalog"
APP_ENV=local
APP_DEBUG=true
APP_URL=http://laravel-catalog.local

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_catalog
DB_USERNAME=laravel
DB_PASSWORD=secure_password

FILESYSTEM_DISK=public
# Create storage link
php artisan storage:link

# Clear cache
php artisan config:clear
php artisan cache:clear

8. Pengembangan dengan VSCode

8.1 Setup Workspace

  1. Di Ubuntu host, buka VSCode
  2. File > Open Folder > /home/[user]/projects/laravel-catalog
  3. Install recommended extensions

8.2 Konfigurasi VSCode

// .vscode/settings.json
{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[php]": {
        "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
    },
    "[blade]": {
        "editor.defaultFormatter": "shufo.vscode-blade-formatter"
    },
    "php.suggest.basic": false,
    "php.validate.enable": false,
    "intelephense.environment.phpVersion": "8.1"
}

8.3 Git Setup

# Initialize Git
git init

# Create .gitignore
cat > .gitignore << EOL
/node_modules
/public/hot
/public/storage
/storage/*.key
/vendor
.env
.env.backup
.phpunit.result.cache
docker-compose.override.yml
Homestead.json
Homestead.yaml
npm-debug.log
yarn-error.log
/.idea
/.vscode
EOL

# Initial commit
git add .
git commit -m "Initial commit"

9. Membuat Catalog Website

9.1 Database Migration

# Create Product table
php artisan make:migration create_products_table

# Create Category table
php artisan make:migration create_categories_table

# Create ProductImage table
php artisan make:migration create_product_images_table

Example migration for products:

public function up()
{
    Schema::create('products', function (Blueprint $table) {
        $table->id();
        $table->foreignId('category_id')->constrained();
        $table->string('name');
        $table->string('slug')->unique();
        $table->text('description');
        $table->decimal('price', 10, 2);
        $table->integer('stock');
        $table->boolean('is_active')->default(true);
        $table->timestamps();
        $table->softDeletes();
    });
}

9.2 Models

# Create models
php artisan make:model Product
php artisan make:model Category
php artisan make:model ProductImage

Example Product model:

class Product extends Model

{
    use HasFactory, SoftDeletes;

    protected $fillable = [
        'category_id',
        'name',
        'slug',
        'description',
        'price',
        'stock',
        'is_active'
    ];

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

    public function category()
    {
        return $this->belongsTo(Category::class);
    }

    public function images()
    {
        return $this->hasMany(ProductImage::class);
    }
}

9.3 Controllers

# Create controllers
php artisan make:controller Admin/ProductController --resource
php artisan make:controller Admin/CategoryController --resource
php artisan make:controller CatalogController

9.4 Views

Create blade templates for:

  • Layouts
  • Product listing
  • Product detail
  • Admin dashboard
  • Forms

Example catalog view:

@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
        @foreach ($products as $product)
        <div class="card">
            <img src="{{ $product->images->first()->url }}" alt="{{ $product->name }}">
            <div class="card-body">
                <h3>{{ $product->name }}</h3>
                <p>{{ $product->

Comments

Post a Comment

Popular posts from this blog

Panduan Instalasi Portainer di Ubuntu Server

Image
Panduan Lengkap Instalasi Portainer di Ubuntu Server Ditulis oleh : Fatih Athaillah Nugroho https://radnet-digital.id/ Pendahuluan Docker adalah salah satu platform containerization paling populer yang mempermudah pengembangan, distribusi, dan pengelolaan aplikasi. Meskipun Docker sudah menyediakan CLI yang sangat berguna untuk mengelola container, bagi sebagian pengguna, pendekatan ini mungkin terasa kurang intuitif, terutama jika mereka lebih terbiasa dengan antarmuka grafis. Portainer hadir sebagai solusi untuk mempermudah pengelolaan Docker melalui antarmuka web yang user-friendly. Dengan Portainer, pengelolaan container, images, networks, dan volumes menjadi jauh lebih sederhana, terutama untuk pengguna yang tidak terbiasa dengan CLI. Artikel ini akan membahas langkah demi langkah bagaimana cara menginstal dan mengkonfigurasi Portainer di server Ubuntu.   Prasyarat Sebelum memulai instalasi Portainer, pastikan hal-hal berikut ini sudah tersedia: 1. Ubuntu Serve...
Read more

Rangkuman Webinar Solusi IoT dengan ESP - Teknologi Pintar untuk Kehidupan Sehari-hari

Image
Solusi IoT dengan ESP - Teknologi Pintar untuk Kehidupan Sehari-hari Ditulis oleh : Fatih Athaillah Nugroho https://radnet-digital.id/ Webinar ini membahas teknologi Internet of Things (IoT) menggunakan mikrokontroler ESP, termasuk perangkat keras dan perangkat lunak yang relevan. Materi meliputi pengenalan IoT, sensor, proyek IoT, hingga panduan langkah-langkah memulai proyek IoT. Kesimpulan Webinar ini menekankan bagaimana IoT dapat diterapkan untuk mempermudah kehidupan sehari-hari, seperti sistem rumah pintar dan irigasi cerdas. Mikrokontroler ESP dipilih karena fleksibilitasnya, harga terjangkau, dan kompatibilitas tinggi dengan platform populer seperti Arduino IDE. Contoh proyek yang dibahas adalah sistem atap jemuran otomatis dengan sensor dan aktuator, termasuk Rain Drop Sensor, DHT11, Motor Servo, dan LDR. Langkah memulai proyek mencakup instalasi perangkat lunak, penggunaan platform seperti Blynk, dan tips troubleshooting. Dengan teknologi ini, peserta dapat mengembangkan sol...
Read more

Automation With Ansible

Image
AUTOMATION WITH ANSIBLE "Automation with Ansible oleh Adinusa.id" Ditulis oleh : Fatih Athaillah Nugroho https://radnet-digital.id/ Didalam Kursus "Automation with Ansible" oleh Adinusa ini mendapatkan 6 modul, yaitu: Modul 1: Introduction Ansible - Course Introduction: Di bagian ini, peserta akan diperkenalkan pada tujuan dan struktur kursus. Anda akan mendapatkan gambaran umum tentang apa yang akan dipelajari dan bagaimana modul-modul akan diatur untuk memfasilitasi pemahaman yang lebih baik tentang Ansible. - Platform Discussion: Diskusi ini akan mencakup berbagai platform yang dapat digunakan dengan Ansible, termasuk sistem operasi yang didukung dan lingkungan yang paling umum digunakan dalam praktik otomasi. - What is Ansible?: Penjelasan mendalam tentang Ansible sebagai alat otomasi sumber terbuka. Anda akan mempelajari bagaimana Ansible berbeda dari alat otomasi lainnya dan fitur-fitur yang membuatnya efektif dalam mengelola infrastruktur. - Use Ca...
Read more