Tutorial Membuat Toko Online Dari Awal Starter Kit

Daftar Isi

Instalasi Laravel

Karena kita akan memulai semuanya dari awal, maka kita akan memulai dengan membuat project laravel terlebih dahulu. Jadi mari kita mulai.

laravel new online-store

Instalasi Breeze

Jika sudah selesai, silakan langsung implementasikan laravel breeze sebagai starter kita.

composer require laravel/breeze --dev

Stack yang digunakan

Setelah itu, kita bisa langsung install laravel breeze nya.

php artisan breeze:install

Akan muncul beberapa pilihan tersedia, untuk jelas saja, saya akan menunjukkan langsung apa-apa saja yang kita pilih untuk project kita ini.

  Which stack would you like to install?
  blade ......................................... 0
  react ......................................... 1
  vue ........................................... 2
  api ........................................... 3
❯ react

  Would you like to install dark mode support? (yes/no) [no]
❯ no

  Would you like TypeScript support? (Experimental): (yes/no) [no]
❯ no

  Would you like to install Inertia SSR support? (yes/no) [no]
❯ yes

  Would you prefer Pest tests instead of PHPUnit? (yes/no) [no]
❯ yes

Tunggu sampai semua proses selesai, dan kita bisa langsung menjalankan project kita.

npm run dev

Ketika Anda sedang menggunakan Valet, maka Anda bisa langsung mengakses project Anda di browser dengan mengetikkan alamat berikut online-store.test, namun jika tidak. Silakan jalankan perintah:

php artisan serve

Instalasi Prettier

Untuk setup Laravel dan inertia js, harusnya sudah selesai. Dan adapun penambahan yang dilakukan ada menginstall package seperti clsx, prettier dan tailwind-prettier.

npm install clsx prettier prettier-plugin-tailwindcss --save-dev

Prettier Konfigurasi

Setelah itu, silakan buat 2 file di root direktori dengan nama .prettierignore dan .prettierrc.

.prettierrc
{
    "semi": true,
    "singleQuote": true,
    "printWidth": 120,
    "trailingComma": "es5",
    "arrowParens": "always",
    "tabWidth": 4,
    "useTabs": false,
    "quoteProps": "as-needed",
    "jsxSingleQuote": true,
    "bracketSpacing": true,
    "bracketSameLine": true
}

Abaikan File

Kemudian, kita perlu .prettierignore untuk mengabaikan file yang tidak perlu di format.

.prettierignore
**/vendor
**/public
**/bootstrap
**/.git
**/.svn
**/.hg
**/node_modules

Perintah Scripts

Sekarang buka file package.json dan tambahkan script berikut:

package.json
"scripts": {
    "format": "prettier --write resources",
    "dev": "vite",
    "build": "vite build && vite build --ssr"
},

Setelah itu, maka kita bisa mulai format dengan perintah:

npm run format

Done. Sekarang kita bisa lanjut ke langkah selanjutnya yaitu pembuatan database.

Konfigurasi Database

Jika teman-teman belum membuat database, silakan buat satu database dengan online_store, kemudian jika sudah silakan masukkan kredensial nya tepat pada file .env.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=online_store
DB_USERNAME=root
DB_PASSWORD=

Setelah itu, silakan jalankan perintah berikut untuk memasukkan tabel yang dibawa laravel by default.

php artisan migrate

Setelah itu. Maka kita bisa lanjut ke langkah selanjutnya.