Memulai Kelas

Selamat datang di dokumentasi BWAStore. Terima kasih telah membeli kelas BWAStore dari BelajarKoding dan BuildWith Angga. Support kalian untuk kami para creator sangat kami apresiasi. Karena tanpa support dari kalian, kami tetap bisa untuk membuat konten tutorial yang terbaik untuk kalian 😄

Pastikan kalian membeli kelas ini langsung dari creatornya ya 😉. Kami sangat sedih jika kalian membeli dari pihak yang tidak bertanggung jawab. Jika kalian mendapatkannya selain dari BelajarKoding dan BuildWith Angga, kalian bisa lapor langsung ke kami ya!

Sebelum memulai belajar, ada beberapa informasi yang akan kami akan update secara berkala di halaman ini, dan kalian bisa cek berkala. Di halaman ini pula kami akan mendokumentasikan tutorial yang memang membutuhkan catatan seperti pemasangan tools dan deployment server

People with the spirit of learning, lets start! 😉

Source Code

Berkas Source Code pada video tutorial ini dapat kalian akses di GitHub @belajarkoding yang dapat kalian akses di https://github.com/belajarkoding dengan nama repository store-*.

Kalian dapat menggunakan dan memakai source code tersebut, dengan mengikuti lisensi MIT (selengkapnya baca bagian Lisensi dibawah). Source code ini HANYA DAPAT DIGUNAKAN untuk member kelas BWAStore dan tidak diizinkan untuk disebarkan kepada pihak selain member kelas BWAStore.

Jika anda mendapatkan konten video dan dokumentasi ini dari pihak selain BelajarKoding atau BuildWith Angga, dan bukan dari bagian member BWAStore, anda tidak diperkenankan untuk menggunakan source code ini.

Desain

Berkas Desain pada video tutorial ini dapat kalian akses di Figma di tautan berikut 👍

https://www.figma.com/file/sqVstjTB5j8eWR5c24wEkS/Store

Kalian dapat menggunakan dan memakai desain tersebut, dengan mengikuti lisensi MIT (selengkapnya baca bagian Lisensi dibawah). Desain ini HANYA DAPAT DIGUNAKAN untuk member kelas BWAStore dan tidak diizinkan untuk disebarkan kepada pihak selain member kelas BWAStore.

Jika anda mendapatkan konten video dan dokumentasi ini dari pihak selain BelajarKoding atau BuildWith Angga, dan bukan dari bagian member BWAStore, anda tidak diperkenankan untuk menggunakan desain ini.

Visual Studio Code

Sebelum kalian memulai membuat aplikasi, salah satu yang harus kalian siapkan adalah Code Editor. Disini saya merekomendasikan Visual Studio Code sebagai code editor. Selain gratis, kalian bisa memasang ekstensi yang membuat code editor kalian semakin powerful

Berkas instalasi bisa kalian unduh di https://code.visualstudio.com. Untuk cara install dapat langsung mengikuti aplikasi yang disediakan sesuai dengan sistem operasi yang digunakan

Ekstensi

Untuk membuat pengalaman coding kalian lebih baik,saya rekomendasikan untuk memasang semua plugin dibawah ini.

Ekstensi PHP & Laravel

Laravel Blade Snippets
Laravel Blade Spacer
Laravel Model Snippet
Laravel Snippets
Laravel Extra Intellisense
Laravel goto view
laravel-goto-controller
PHP Docblocker
PHP Intelephense
PHP Namespace Resolver
PHP Awesome Snippets
PHPDoc Generator
DotENV

Ekstensi Lainnya

Auto Complete Tag
Auto Close Tag
Auto Rename Tag
Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets
Better Align
Bracket Pair Colorizer 2
Icon Fonts
Prettier
GitLens
Version Lens
Error Lens
Live SASS Compiler
Live Server
SonarLint
IntelliSense for CSS class names in HTML
Vetur

Tema & Font

Tema

Absolute Black
Monokai Pro

Font

Operator Mono
JetBrains Mono

Menjalankan Live Server

Pada tutorial ini, saya menggunakan ekstensi Live Server dan Live SASS Compiler. Sebelum memulai slicing, pastikan kalian klik GO Live dan Watch SASS terlebih dahulu, dan pastikan bahwa file SASS kalian ter compile dengan cara mengecek file .css yang ada bersamaan dengan file .scss

Pastikan kalian selalu mengubah file .scss nya dan bukan .css nya, karena file .scss akan dicompile secara otomatis menjadi dan .css dan jika kalian menulis di file .css, maka perubahan kalian akan tertimpa.

Instalasi Tools Untuk Laravel

Sebelum kamu dapat melanjutkan tahap Laravel, kamu dapat memasang tools di bawah ini sesuai dengan sistem operasi yang kamu gunakan

Windows

Untuk sistem operasi Windows, tools yang direkomendasikan untuk membuat aplikasi PHP dan Laravel adalah Laragon. Pada laragon, kamu juga dapat memasang aplikasi tanpa harus melakukan instalasi lewat command line

Masuk ke website laragon.org lalu klik Download
Pilih Laragon - Full
Ikuti instalasi yang ada dari installernya
Jalankan Laragon
Klik Start All
Klik “Menu”
Pilih Quick App -> Laravel
Masukkan nama project. Isi nama sesuai keinginan kalian
Proses instalasi laravel akan dijalankan oleh laragon. Untuk URL nya akan bisa diakses setelah proses instalasi selesai.
Untuk mengakses URLnya, kalian bisa membuka URL sesuai dengan nama project.
Jika kalian membuat nama projectnya bwastore, maka kalian akses http://bwastore.test
Kalian bisa langsung akses situs laravelnya.
Kalian pun bisa akses lewat aplikasi laragonnya.
Untuk membuka composer dan terminal, kalian bisa klik tombol Terminal yang ada di dalam aplikasi Laragon

macOS

Untuk macOS, saya merekomendasikan untuk memakai Laravel Valet yang proses instalasinya dapat dibuka disini : https://laravel.com/docs/6.x/valet

Jika tidak ingin menggunakan Laravel Valet, kalian bisa menggunakan MAMP untuk instalasi Tools nya yang dapat diunduh di https://www.mamp.info/en/downloads/

Jika memakai MAMP, untuk composer nya harus dipasang terpisah dengan cara: https://gist.github.com/kkirsche/5710272

Linux

Untuk Linux, saya merekomendasikan untuk memakai Laravel Valet for Linux yang proses instalasinya dapat dibuka disini : https://cpriego.github.io/valet-linux/

Jika tidak ingin menggunakan Laravel Valet, kalian bisa menggunakan XAMPP For Linux (LAMPP) untuk instalasi Tools nya yang dapat diunduh di https://www.apachefriends.org/download.html

Sebagai alternatif, kamu bisa juga mengikuti tutorial di bawah ini jika ingin memasang secara manual: https://www.linuxbabe.com/ubuntu/install-lemp-stack-nginx-mariadb-php7-2-ubuntu-18-04-lts

Adminer

Adminer adalah tools untuk mengatur database MySQL di server kita. Saya merekomendasikan menggunakan Adminer karena ringan dan mudah untuk digunakan

Untuk adminer, saya merekomendasikan untuk menggunakan versi dari @pematon di GitHub, yang bisa kalian akses di https://github.com/pematon/adminer-custom

Proses instalasinya, cukup kalian download zip / clone dan kalian taruh di folder www (jika menggunakan Laragon)

Database

Analisis Database

Kategori

Kategori
Nama Kategori
Slug (bwastore.id/kategori/gadgets)

Produk

Nama Produk
Relasi ke Pemilik Produk
Harga Produk
Deskripsi
Kategori Produk

Galeri Produk

Fotonya
Relasi ke Produk

Cart

Relasi ke Produk
Relasi ke User

User

Nama
Email
Password
Alamat 1
Alamat 2
Provinsi https://github.com/azishapidin/indoregion
Kota https://github.com/azishapidin/indoregion
Kode Pos
Negara
Nomor Handphone
Nama Toko
Kategori Toko
Status Toko

Transaksi

Relasi ke User
Jumlah Asuransi
Ongkir
Total
Status Transaksi (UNPAID/PENDING/SHIPPING/SUCCESS/FAILED)
Nomor Resi

Transaksi Detail

Relasi ke Transaksi
Relasi ke Produknya
Harga Barang

Entity Relationship Diagram

Deployment

Membuat Droplet

Persiapan
1. Buat Akun DigitalOcean
2. Masukkan Paypal atau Kartu Kredit / Debit (Bisa pakai Jenius)
3. Beli domain untuk Droplet DigitalOcean (Bisa dari provider mana saja, nanti tinggal di set saja nameserver dan A record nya)
Buat Droplet Baru, Cari "LEMP" di Marketplace DigitalOcean
Login ke Server menggunakan SSH via Terminal / Command Line
Untuk Windows dapat menggunakan https://docs.microsoft.com/en-us/windows-server/administration/openssh/openssh_install_firstuse atau bisa pakai PuTTY
Ganti password root (akan disuruh untuk ganti saat pertama kali masuk server)

Memasang Composer

Pasang composer apt install composer
Cek composer composer -v
Buka link ini sebagai referensi : https://www.digitalocean.com/community/tutorials/how-to-install-and-configure-laravel-with-lemp-on-ubuntu-18-04 dan lanjut ke poin selanjutnya.

Memasang Ekstensi PHP

Pasang mbstring, xml dan bcmath (kebutuhan laravel dan composer)
1. sudo apt update
2. sudo apt install php-mbstring php-xml php-bcmath zip php-cli unzip

Mengatur Database

Buat database
1. sudo mysql
2. CREATE DATABASE bwastore;
3. GRANT ALL ON bwastore.* TO 'bwastore'@'localhost' IDENTIFIED BY 'passwordnya' WITH GRANT OPTION;
4. exit
Masuk ke database baru
1. mysql -u bwastore -p
2. Masukin passwordnya
3. SHOW DATABASES;

Mengatur Laravel

Masuk ke folder cd /var/www
Pull project kalian dari github git clone URL_GITHUB_KALIAN NAMA_DOMAIN_KALIAN
ls lalu cd NAMA_DOMAIN_KALIAN
composer install
nano .env
Copas konfigurasi kalian dari local, ganti bagian database
Ganti bagian APP_DEBUG=false dan APP_ENV=production biar kalau error ga muncul (mengamankan coding
php artisan storage:link

Mengatur Nginx

sudo chown -R www-data.www-data /var/www/NAMA_DOMAIN_KALIAN/storage
sudo chown -R www-data.www-data /var/www/NAMA_DOMAIN_KALIAN/bootstrap/cache
sudo nano /etc/nginx/sites-available/NAMA_DOMAIN_KALIAN
Copy dan Paste teks ini :

server {
    listen 80;
    server_name NAMA_DOMAIN_KALIAN;
    root /var/www/NAMA_DOMAIN_KALIAN/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

Ganti bagian server_name jadi NAMA_DOMAIN_KALIAN
Ganti bagian root jadi /var/www/NAMA_DOMAIN_KALIAN/public;
Save filenya
sudo ln -s /etc/nginx/sites-available/NAMA_DOMAIN_KALIAN/etc/nginx/sites-enabled/
sudo nginx -t
Harus muncul kayak gini:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

sudo systemctl reload nginx

Mengatur Domain

Setting domain kalian
1. Masuk ke panel hosting kalian (contoh disini pakai IDCloudHost)
2. Masuk manage DNS
3. Tambah Add Record
4. Namenya isi NAMA_DOMAIN_KALIAN. Depannya pakai titik
5. Type nya ganti A
6. Isi selanjutnya (RDATA / IP Address) masukin nama IP digitalocean kalian (bisa dicek di dashboard DO nya)
7. Add Record / Save
Buka website kalian sesuai NAMA_DOMAIN_KALIAN
Belum muncul? Sabar tunggu dulu mungkin belum propagasi. Tinggalin minum kopi dulu

Menjalankan Migration

cd /var/www/NAMA_DOMAIN_KALIAN/
php artisan migrate

Memasang PHPMyAdmin

Referensi dari sini https://linuxize.com/post/how-to-install-phpmyadmin-with-nginx-on-ubuntu-18-04/
sudo apt install phpmyadmin
Skip dua pilihan, pilih OK (pakai TAB terus ENTER)
Pilih yes
Masukin password phpmyadmin
sudo mysql
CREATE USER 'padmin'@'localhost' IDENTIFIED BY 'PASSWORD_SQL_PHPMYADMINYA';
GRANT ALL PRIVILEGES ON *.* TO 'padmin'@'localhost' WITH GRANT OPTION;
exit
sudo nano /etc/nginx/snippets/phpmyadmin.conf
Copas ini :

location /phpmyadmin {
    root /usr/share/;
    index index.php index.html index.htm;
    location ~ ^/phpmyadmin/(.+\.php)$ {
        try_files $uri =404;
        root /usr/share/;
        fastcgi_pass unix:/run/php/php7.2-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include /etc/nginx/fastcgi_params;
    }

    location ~* ^/phpmyadmin/(.+\.(jpg|jpeg|gif|css|png|js|ico|html|xml|txt))$ {
        root /usr/share/;
    }
}

nano /etc/nginx/sites-available/NAMADOMAINKALIAN
Masukkan include snippets/phpmyadmin.conf; didalam block server{}
sudo nginx -t
sudo systemctl reload nginx
Masuk ke http://NAMA_DOMAIN_KALIAN/phpmyadmin/
Kalau nemu error, jalanin ini : sudo sed -i "s/|\s*$(count(\$analyzed_sql_results\['select_expr'\]$/| (\1)/g" /usr/share/phpmyadmin/libraries/sql.lib.php

Lisensi dan Penggunaan

Source Code, Dokumentasi, dan Video Tutorial dilindungi oleh lisensi yang berbeda.

Video Tutorial

UU Nomor 28 Tahun 2014 tentang Hak Cipta

Source Code & Dokumentasi

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Source code ini HANYA DAPAT DIGUNAKAN untuk member kelas BWAStore dan tidak diizinkan untuk disebarkan kepada pihak selain member kelas BWAStore.