Part #1 Membangun Aplikasi Ecommerce - Memasang Template Admin Laravel

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.

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>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="Admin/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="Admin/bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="Admin/bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="Admin/dist/css/AdminLTE.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="Admin/plugins/iCheck/square/blue.css">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <!-- Google Font -->
  <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>
  <!-- /.login-logo -->
  <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>
        <!-- /.col -->
        <div class="col-xs-4">
          <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
        </div>
        <!-- /.col -->
      </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>
    <!-- /.social-auth-links -->
    <a href="#">I forgot my password</a><br>
    <a href="register.html" class="text-center">Register a new membership</a>
  </div>
  <!-- /.login-box-body -->
</div>
<!-- /.login-box -->
<!-- jQuery 3 -->
<script src="Admin/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="Admin/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- iCheck -->
<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 
By : Muhammad Rizal Supriadi

0 Response to "Part #1 Membangun Aplikasi Ecommerce - Memasang Template Admin Laravel"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel