Part #1 Membangun Aplikasi Ecommerce - Memasang Template Admin Laravel

Februari 08, 2020 Posting Komentar

Assalamualaikum wr.wb

Apa itu Ecommerce

Secara umum ecommerce dapat diartikan sebagai transaksi jual beli dengan menggunakan larayan internet, Selain itu Ecommerce juga dapat dijadikan sebagai bisnis, baik bisnis rintisan sendiri maupun bisnis bersama.
Pada Aplikasi Ecommerce memberikan kemudahan - kemudahan yang didapatkan pada sisi penggunanya maupun penjualnya.

Pada tutorial kali ini kita akan membangun aplikasi Ecommerce menggunakan framework laravel, dimulai dengan pemasangan template admin serta aturan pada routing yang terdapat pada file web.php.

Untuk sesi kali saya asumsikan teman-teman sudah mengenal dasar-dasar dari framework yang satu ini. Karena memahami dasar - dasar sangat penting untuk keberhasilan membangun aplikasi Ecommerce dengan laravel ini.

Pada tutorial pertama ini saya memulai dengan menggunakan framework laravel versi 5.8 dan mungkin untuk selanjutnya versinya akan diupdate saat proses pembuatannya nanti.

Disini kita mempunyai kewajiban untuk mengamalkan ilmu karena jika ilmu tidak diamalkan seperti halnya pohon yang tidak berbuah atau dapat dikatakan ilmu itu akan sia-sia.

Langkah - Langkah

Point penting pada tutorial pertama ini mengenai pembuatan aplikasi Ecommerce adalah memasang template admin.

Untuk memulai silahkan teman - teman install framework laravel menggunakan CMD.

Jika teman-teman belum tau cara instalasinya silahkan kunjungi halaman berikut Instalasi Laravel

dan ikuti langkah - langkahnya sampai berhasil :v

Kita asumsikan teman-teman sudah berhasil menginstal framework laravel 5.8 ataupun versi yang lainnya.

Sekarang kita akan mencari template admin yang gratis untuk kita gunakan pada pembangunan aplikasi Ecommerce ini. Untuk template adminnya sendiri teman-teman bebas memilih yang teman-teman sukai, disini saya menggunakan Template Admin LTE untuk tampilan adminnya.

Setelah berhasil mendownload templatenya maka akan terlihat banyak file yang digunakan sebaik frontend dari halaman admin nantinya.

Silahkan kunjungi halaman loginnya dan halaman lainnya semuanya terlihat begitu bagus dan rapih :)

Selanjutnya kita akan belajar bagaimana memasukan kode HTML dari admin template kedalam Project framework Laravel kita.

Tahapan Memasang Template Admin

Kita akan mengcopy Template Admin LTE kedalam project kita. Kita akan copy file CSS, Javascript, Images, dan Fonts dari tempalte Admin LTE ke Laravel, file yang terstruktur membuat sesuatu apapun akan bekerja dengan baik ketika memulai pengimplementasiannya.

1). Pertama, Kita buat folder baru dengan nama Admin didalam folder public, selanjutnya silahkan teman - teman copy dan pastekan folder dist dan bower_components bagi yang menggunakan template Admin LTE , untuk yang menggunakan template lainnya silahkan copy file CSS dan Javascript serta imagesnya pada folder Public.

2) Semua file CSS, Javascript, Image sudah dapat dijalankan untuk membuat header. footer, login, ataupun halaman website lainnya.

3. Selanjutnya kita akan membuat HTML untuk login yang digunakan oleh admin dengan memasukan CSS, JS dan image.

Kita akan membuat Controller, View dan Route untuk Login.

Baca Juga

1). Membuat file AdminController untuk login dan dapat juga digunakan nanti untuk halaman Admin Lainnya.

Kita dapat Membuat AdminController file dengan menggunakan Command Prompt dengan menggunakan perintah

php artisan make:controller AdminController

Setelah file AdminController berhasil dibuat.

2). Langkah Selanjutnya, Kita akan membuka file tersebut dan membuat function login.

untuk membukanya silahkan ke directori App\Http\Controllers\AdminController.php .

Didalam function tersebut kita hanya menjalankan untuk halaman view , kita akan membuatnya didalm folder admin yang berada didalam folder views. untuk scriptnya seperti dibawah ini:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class AdminController extends Controller
{
public function login(){
return view('Admin.admin_login');
}
}

3). Jadi buatlah folder Admin didalam folder views file yang dibuat sebagai berikut admin_login.blade.php untuk tampilannya sendiri teman - teman bisa menggunakan template yang teman - teman inginkan.

Maka strukturnya akan terlihat seperti diatas.

4). Silahkan Copy dan pastekan script HTML kedalam filde admin_login.blade.php.
Pada tutorial ini saya menggunakan tampilan login bawaan dari Template Admin LTE, untuk scriptnya sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Log in</title>

<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

<link rel="stylesheet" href="Admin/bower_components/bootstrap/dist/css/bootstrap.min.css">

<link rel="stylesheet" href="Admin/bower_components/font-awesome/css/font-awesome.min.css">

<link rel="stylesheet" href="Admin/bower_components/Ionicons/css/ionicons.min.css">

<link rel="stylesheet" href="Admin/dist/css/AdminLTE.min.css">

<link rel="stylesheet" href="Admin/plugins/iCheck/square/blue.css">




<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href="Admin/index2.html"><b>Admin</b>-Ecommerce</a>
</div>

<div class="login-box-body">
<p class="login-box-msg">Sign in to start your session</p>
<form action="Admin/index2.html" method="post">
<div class="form-group has-feedback">
<input type="email" class="form-control" placeholder="Email">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
<div class="checkbox icheck">
<label>
<input type="checkbox"> Remember Me
</label>
</div>
</div>

<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
</div>

</div>
</form>
<div class="social-auth-links text-center">
<p>- OR -</p>
<a href="#" class="btn btn-block btn-social btn-facebook btn-flat"><i class="fa fa-facebook"></i> Sign in using
Facebook</a>
<a href="#" class="btn btn-block btn-social btn-google btn-flat"><i class="fa fa-google-plus"></i> Sign in using
Google+</a>
</div>

<a href="#">I forgot my password</a><br>
<a href="register.html" class="text-center">Register a new membership</a>
</div>

</div>


<script src="Admin/bower_components/jquery/dist/jquery.min.js"></script>

<script src="Admin/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<script src="Admin/plugins/iCheck/icheck.min.js"></script>
<script>
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
});
</script>
</body>
</html>

5). Selanjutnya membuat Route untuk admin Login dengan script sebagai berikut

Route::get ('/admin-ecommerce','AdminController@login');

Script diatas disimpan difile routes/web.php, untuk menjalankan websitenya silahkan ketika perintah php artisan serve pada Command Prompt.

Selanjutnya pada url ketikan maka akan tampil seperti gambar dibawah ini.

Saya menggunakan template bawaan dari Admin LTE untuk tampilan loginnya.

Membuat Fungsi Login

Setelah teman - teman berhasil pada tahap diatas selanjutnya kita akan membuat fungsi dari loginnya tersebut, lebih tepatnya mengkonfigurasi proses login default laravel dengan menggunakan Laravel Migration

Laravel Migration mempermudah kita dalam mekanisme untuk membuat serta memodifikasi table database.

Jadi Langkah pertama kita akan membuat database terlebih dahulu, kemudia buat table users bersama migrations dan kemudian login/register dengan table tersebut. Dalam prosesnya nanti kita akan menggunakan login dari Admin LTE.

1). Buat Database :- Kita akan membuat database dengan nama 'ecommerce'. silahkan buka phpmyadmin lalu buat database baru dan ketikan ecommerce.

2). Update file .env untuk konfigurasi supaya project dapat terkoneksi dengan databasenya.

lebih tepatnya seperti gambar dibawah ini:

3).Membuat table users ; - sekarang kita akan menjalankan Command Prompt untuk membuat table users dalam database dan kemudian kita akan membuat halaman login/register selalu bersama hak akses auth.

ketikan perintah php artisan migrate pada command prompt.

Jika muncul seperti gambar diatas, itu artinya tabel user berhasil dibuat.

Silahkan teman-teman refresh halaman phpmyadmin nya ... maka secara otomatis akan terdapat 3 table di dalam database ecommerce tersebut.

Selanjutnya teman-teman ketikan perintah php artisan make:auth untuk membuat hak akses login bawaan dari laravelnya.

Jika berhasil maka akan mucul tulisan login dan register pada halaman websitenya, serta terdapat halaman login dan registernya.

Untuk mengecek apakah berhasil atau tidaknya, silahka teman-teman pergi ke register dan buatlah satu akun. Jika berhasil maka teman-teman akan diarahkan ke halaman home.

Di tutorial selanjutnya kita akan membahas mengenai penerapan system login dengan menggunakan design dari Admin LTE serta menggunakan table users untuk penerapannya.

Jadi teman-teman tunggu untuk Next Tutorialnya :)

Terimakasih telah berkunjung , semoga bermanfaat -- Salam Success

Part #1 Membangun Aplikasi Ecommerce - Memasang Template Admin Laravel

By : Muhammad Rizal Supriadi