Membuat Website Dengan Laravel dan Hosting Heroku

Membuat Website Dengan Laravel dan Hosting Heroku

Pada kesempatan kali ini kita akan belajar mengenai membuat website dengan dengan framework laravel dan menggunakan hosting heroku, dimana kita akan belajar mulai dari installasi laravel sampai dengan mengupload project yang kita buat kedalam hosting heroku. Dalam implementasinya kita akan menggunakan Heroku CLI sebagai perantara untuk mempermudah kita dalam berkerja dengan menggunakan Heroku

Aplikasi yang kita bangun tentunya membutuhkan server untuk membuatnya terhubung dengan internet, tentunya server tersebut dapat memberikan domain untuk kita akses. Heroku ini merupakan suatu solusi untuk para developer untuk mencoba aplikasi yang dibuat dapat diakses pada jaringan internet, kita kita lihat heroku ini merupakan aplikasi cloud platform untuk membuat aplikasi kita menajadi  online.

Pada heroku ini tersedia beberapa layanan yang tertunya tersedia layanan gratis, serta untuk fitut langganannya kita dapat berlangganan untuk setiap bulannya. Tetapi untuk versi gratis sudah cukup untuk kita dapat menguji aplikasi yang kita buat secara online.

Pada heroku ini tentuya support beberapa Bahasa pemrograman seperti Node js, Ruby, Python, Java, PHP dan lain-lain. Dan pastikan teman-teman dapat mendaftarkan nya terlebih dahulu dengna mengunjungi website resmi dari heroku itu sendiri.

Heroku

Heroku ini merupakan heroku CLI yang dimana dapat mempermudah dalam mengupload project yang kita buat kedalam heroku. Mungkin kita akan melakukan login terlebih dahulu. Silahkan kalian masukan email dan password yang kalian gunakan.

Login Heroku

Setelah kita berhasil login maka kita akan diarahkan pada tampilan dashboard seperti berikut: Pada dashboard tersebut akan menampilkan list dari daftar aplikasi yang sudah kita buat sebelumnya dimana dalam heroku hendiri membatasi banyaknya app yang dibuat dan maksimal untuk fitur yang gratis tentunya hanya dapat menggunakan 5 aplikasi saja.

List aplikasi

Kita jika melihat saya sudah membuat beberpa aplikasi, dan pada bagian kanan atas terdapat menu untuk membuat aplikasi baru. Untuk dapat berintegrsi dengan menggunakan heroku dengan lebih mudah kita akan menggunakan Heroku CLI, silahkan kunjungi link berikut seperti yang terlihat pada gambar dibawah ini.

Heroku CLI

Teman-teman tinggal mengunjungi halaman berikut untuk dapat menggunakan herokut CLI, dan pada bagian bawah nya terdapat cara installasi ataupun mendownload software, jika teman-teman menggunkaan macOS atau Sistem operasi yang lainnya yang sesuai dengan teman-teman gunakan.

Download Heroku CLI

Untuk penggunakan windows teman-teman dapat mengunduh installernya, dan untuk pengguna linux ataupun debian dapat menggunakan perintah yang sudah disediakan oleh heroku. Oke selanjutnya kita akan menginstall project laravel kita, kita akan menginstall dengan menggunakan composer.

Pastikan teman-teman sudah menginstall composer untuk dapat menginstall framework laravel. Kita akan kunjungi dokumentasi dari laravel itu sendiri.

Dokumentasi Laravel

Silahkan teman-teman scroll kebawah dan cara install laravel dengan menggunakan composer. Atau kalian dapat mengikuti perintah dibawah ini:

composer create-project laravel/laravel MorrisIF

Silahkan jalankan perintah berikut pada command prompt dengan masuk pada direktori xampp/htdocs, tentunya banyak library yang akan diinstall ketika kita menginstall framework laravel ini, silahkan tunggu sampai proses installasi framwork laravel selesai.

Install Laravel

Jika proses installasi berjalan dengan baik maka akan tampil seperti gambar dibawah ini. Dan project laravel sudah dapat kita jalankan tentunya.

Selesai Install Laravel

Setelah kita berhasil menginstall framwork laravel maka selanjutnya kita akan mengecek terlebih dahulu apakah Heroku CLI sudah berhasil diinstall atau tidak, caranya dengan mengetikan perintah heroku lalu tekan enter. Untuk hasilnya seperti gambar berikut:

Cek Heroku

Dan teman-teman dapat melihat beberapa opsi yang dapat kita gunakan disana, salah satunya yaitu perintah heroku login karena kita akan mencoba login terlebih dahulu untuk dapat menghubungkan antara framework laravel dengan heroku

Heroku Login

Maka kita akan diarahkan pada halaman web login, lalu kita tekan tombol Log In untuk memulai authentication.

Heroku Login

Jika authentication berhasil maka akan berubah seperti berikut. Maka kita sudah siap untuk menggunakan heroku ini.

Login berhasil

Dan ketika kita mengecek kembali pada command prompt maka kan muncul, pemberitahuan login berhasil dimana akan memberikan keterangan siapa yang melakun login kedalam herokut tersebut. Untuk lebih jelasnya silahkan perhatikan gambar dibawah ini:

Heroku Login

Setelah berhasil login, langkah selanjutnya adalah kita akan membuka project laravel kita kedalam VS Code, setelah terbuka maka kita akan menambahkan satu file dengan nama Procfile tanpa menggunakan ektensi, dan kita akan menentukan service mana yang akan kita gunakan pada heroku ini, untuk perintah didalam file Procfile sendiri seperti berikut.

web: vendor/bin/heroku-php-apache2 public/
VS Code

Setelah kita membuat file untuk mengintegrasikan project kita dengan HEROKU maka selanjutnya kita akan meng integrasikan dengan GIT.

Kita akan menggunakan terminal yang sudah disediakan oleh VS Code selanjutnya kita akan mengetikan perintah git init yang digunakan untuk dapat mengintegrasikan project kita dengan git.

Selanjutnya kita akan membuat aplikasi baru didalam heroku yang nantinya akan dipakai sebagai domain untuk aplikasi yang kita buat. Karena admin akan membuat appnya dengan nama morrisif21

Maka admin akan mengetikan perintah heroku apps:create morrisif21

Create App

Kita sudah berhasil membuat apps pada heroku dan kita juga diberikan link yang akan mengarah pada halaman domain dari project kita dan kita juga tentunya terhubung dengan link repository kita didalam server heroku tersebut.

Dan selanjutnya kita akan mengetikan beberapa perintah untuk membuat project tersebut untuk kita build dengan cara mengetikan perintah berikut:

heroku buildpacks:set heroku/php

Jika berhasil maka selanjutnya kita dapat mengupload project kita kedalam git yang ada di heroku dengan mengetikan perintah:

Git add .

Dan kita juga harus melakukan (mencatat) proses dari perubahan file atau data lainnya. Kita dapat mengetikan perintah

Git commit –m “first commit”

Maka akan terlihat seperti berikut:

Git Commit

Semua file sudah kita masukan kedalam repository dan langsung saja kita upload kedalam git dari heroku ini dengan cara mengetikan perintah:

Git push heroku master

Silahkan tunggu sampai proses deploy selesai, jika berhasil maka akan terlihat seperi gambar dibawah ini:

Push ke heroku

Selanjutnya kita akan jalankan url tersebut pada web browser untuk mengeceknya, Pastinya pada langkah ini project yang kita deploy akan error karena kita belum melakukan konfigurasi pada file .env

Hasil Awal

Kita akan menambahkan beberapa variable, variabel tersebut digunakan untuk menentukan aplikasi yang mana yang akan kita gunakan dalam hosting herokut dengan cara masuk kedalam aplikasi heroku kita lalu kita pergi ke menu setting

Selanjutnya kita klik button Reveal Config Vars, lalu kita akan memasukan data-data dari file .env kedalam kolom tersebut.

Untuk APP_NAME nya sendiri kita dapat langsung inputkan dengan nama project yang kita buat sebagai contoh

Config Vars

Untuk value yang lainnya juga kita dapat menggunakan command line yaitu dengan cara mengetikan perintah heroku config:add selanjutnya di ikuti dengan key dan valuenya

Add variable

Pada bagian ketika kita memasukan APP_ENV valuenya diganti menjadi production (supaya dapat kita diakses secara online).

Terdapat satu error ketika admin menjalankan perintah heroku config:add APP_DEBUG=true , error tersebut disebabkan jaringan internet yang secara tiba-tiba terputus. Dan admin mengetikan kembali perintah yang sama.

Selanjutnya kita menambahkan perintah heroku config:add APP_LOG_LEVEL=log dan kita juga tentunya menambahkan satu baris pada file .ENV dengan script APP_LOG_LEVEL=debug

Langkah terakhir kita akan memasukan url kita kedalam konfigurasi variable dengan cara mengentikan perintah

heroku config:add APP_URL=https://morrisif21.herokuapp.com/

Untuk lebih jelasnya seperti gambar berikut ini:

APP_URL

Lalu kita akan mengecek pada heroku apakah konfigurasi yang kita inputkan sudah berhasil masuk atau tidak, silahkan teman-teman refresh pada halaman untuk menginputkan key dan value dari variable.

Hasil add Variable

Pada gambar diatas terlihat admin sudah berhasil menginputkan key dan value kedalam Config Vars dan kita akan mencoba melakukan refresh dari aplikasi yang sudah kita deploy maka hasilnya seperti gambar dibawah ini. Baik kita sudah berhasil melakukan konfigurasi dari project yang kita buat kedalam hosting heroku.

Hasil 2

Okey, kita sudah berhasil mengakses halaman project awal dari framework laravel yang artinya kita sudah berhasil mendeploy dan menjalankan aplikasi kita didalam hosting. Selanjutnya kita akan mengubah tampilan Default dari framework laravel tersebut dengan template. Silahkan teman-teman ikuti langkah-langkah dibawah ini.

Membuat Tampilan Company Profile

Pada bagian ini kita akan membuat tampilan company profile pada project yang kita buat, yaitu dengan cara menggunakan script yang sudah admin sediakan pada link berikut. Silahkan teman-teman download terlebih dahulu untuk codingannya. Dan kita akan menerapkannya pada project yang kita buat.

https://drive.google.com/file/d/19ftJNnJaMb3epAW9JrjMXkKLFZIa30H1/view?usp=sharing

Setelah teman-teman mendownload templatenya maka selanjutnya kita akan membuat folder baru dengan nama morris yang didalamnya terdapat satu file dengan nama index.blade.php dimana file index tersebut akan digunakan untuk memasukan script dari template yang sudah kita download tadi.

Silahkan teman-teman ekstrak terlebih dahulu, lalu buka file index.html dan masukan script tersebut kedalam file index.blade.php

Jika sudah memasukan script file index.html dan masukan script tersebut kedalam file index.blade.php Selanjutnya kita akan memasukan folder assets kedalam folder public dari laravel, untuk lebih jealasnya silahkan perhatikan gambar dibawah ini

Untuk setiap penganggilan dengan css dan js pada folder public, dapat mengubah pemanggilannya dengan script berikut: {!! asset(‘…..’) !!}. Untuk hasil dari penerannya kita mencoba dibawah local terlebih dahulu jika berhasil akan tampil seperti gambar berikut ini.

Hasil di local

Selanjutnya kita akan kembali melakukan deploy project kita kedalam heroku dengan mengetikan perintah

Git add .
Git commit –m “second commit”
Git push heroku master

Silahkan tunggu sampai proses deploy selesai

Deploy ke Heroku

Jika sudah silahkan refresh kembali url nya dan liat hasilnya.

Kesimpulan

Kita sudah belajar mengenai laravel dan juga cara untuk mendeploy menggunakan hosting yang gratis, dimana banyak langkah yang harus kita perhatikan dalam menginstall framework laravel dan juga dalam mengintegrasikan dengan heroku.

Terimakasih telah berkunjung dan membaca artikel ini mengenai Membuat Website Dengan Laravel dan Hosting Heroku, untuk menambahkan pemahaman bagi teman-teman silahkan kunjungi Tutorial Laravel8 Vue JS untuk menambah pengetahuan tentang bagaimana cara untuk menggunakan vue JS kedalam aplikasi framework laravel.

By : Muhammad Rizal Supriadi

Leave a Comment

Your email address will not be published. Required fields are marked *