Implementasi MVC Lanjutan

Kamis, 17 Oktober 2019

Implementasi MVC Lanjutan

    Tidak ada komentar
Image

Dipostingan kali ini saya akan melanjutkan materi dari postingan sebelumnya karena postingan sebelumnya belum terdapat model pada laravelnya.
Disini saya menggunakan sistem operasi Windows, MySql sebagai database servernya yang ada pada aplikasi xampp, dan menggunakan editor Visual Studio Code.
Saya asumsikan kalian sudah paham mengenai script-script dalam struktur database

1.        Buat database dengan nama databasenya
hr

2.        Buat 3 tables, yaitu jobs, departments dan employees dengan struktur seperti berikut ini
Image
Image
Image
Image

3.        Create laravel baru, disini saya sudah menginstal laravel secara global maka saya cukup membuat preject laravel baru didalam file htdocsnya dengan cara menulis script di terminal seperti berikut ini:
c:\xampp\htdocs>laravel new laravel-hr
Image
Jika kalian belum install laravel secara global, cukup membuat script berikut ini
c:\xampp\htdocs> composer cereate-project –prefer-dist laravel/laravel namaprojekkalian
Image
dan tunggu sampai selesai

4.        Kemudian buka terminal nya lagi, kita akan membuat controller dan model untuk table departments dengan menulis script berikut ini berdasarkan direktori file laravel kita :
c:\xampp\htdocs\unpas\laravel-hr>php artisan make:controller DepartmentsController -r -m Department
5.        Kemudian buka terminal nya lagi, kita akan membuat controller dan model untuk table jobs dengan menulis script berikut ini berdasarkan direktori file laravel kita :
c:\xampp\htdocs\laravel-hr>php artisan make:controller JobsController -r -m Job
6.        Kemudian buka terminal nya lagi, kita akan membuat controller dan model untuk table employees dengan menulis script berikut ini berdasarkan direktori file laravel kita :
c:\xampp\htdocs\laravel-hr>php artisan make:controller EmployeesController -r -m Employee
7.        Kemudian buka editor kalian, selanjutnya kita akan lanjut ngoding file yg kita buat. Disini saya menggunakan Visual Studio Code
8.        Pada folder resources>views buat 2 folder baru, yang pertama itu nama foldernya
layout ->ini akan berisi template semua file yang akan di panggil
yang kedua itu nama foldernya
employees ->ini akan berisi halaman yang berhubungan dengan data-data employees
Image
9.        Pada folder layout tadi, buat file baru dengan nama filenya main.blade.php
Image
isi script berikut ini
<script src="https://gist.github.com/sigitprd23/ccc153e0bec9312997181eeee5f20b90.js"></script>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>@yield('title')</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">MyData</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="{{ url('/') }}">Home</a>
<a class="nav-item nav-link" href="{{ url('/about') }}">About</a>
<a class="nav-item nav-link" href="{{ url('/employees') }}">Employees</a>
<a class="nav-item nav-link" href="{{ url('/departments') }}">Departemens</a>
</div>
</div>
</div>
</nav>
@yield('container')
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
view raw sigit--layout--main.blade.php hosted with ❤ by GitHub


10.   Selanjutnya buat 2 file baru yaitu index.blade.php dan about.blade.php didalam folder resources>views
Image
11.   Pada index.blade.php tulis script berikut ini
<script src="https://gist.github.com/sigitprd23/f5c65767ff3b67cd05d7bae3f4e9a9c0.js"></script>
@extends('layout/main')
@section('title', 'Web Programming Laravel')
@section('container')
<div class="container">
<div class="row">
<div class="col-10">
<h1 class="mt-2">Hello, world!</h1>
</div>
</div>
</div>
@endsection
view raw sigit--views--index.blade.php hosted with ❤ by GitHub
12.   Pada about.blade.php tulis script berikut ini
<script src="https://gist.github.com/sigitprd23/a55a964abb30e9fb8eb8b91566ab222a.js"></script>
@extends('layout/main')
@section('title', 'About-Web Programming Laravel')
@section('container')
<div class="container">
<div class="row">
<div class="col-10">
<h1 class="mt-2">Hello, {{$nama}}!</h1>
</div>
</div>
</div>
@endsection
view raw sigit--views--about.blade.php hosted with ❤ by GitHub
13.   Selanjutnya buka terminal kalian, kita akan membuat controller baru untuk sebagai pengontrol halaman index.blade.php dan about.blade.php dengan mengetik script berikut ini diterminal kalian

c:\xampp\htdocslaravel-hr>php artisan make:controller PagesController

14.   Selanjutnya buka file PagesController yang berada didalam folder app>Http>Controllers>PagesController
Image

15.   Kemudian isi script berikut ini
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PagesController extends Controller
{
public function home()
{
return view('index');
}
public function about()
{
return view('about', ['nama' => 'Sigit Priadi']);
}
}
view raw sigit--PagesController hosted with ❤ by GitHub

<script src="https://gist.github.com/sigitprd23/6a7d1acdd724e6092fe97fff8897f3bf.js"></script>

16.   Selanjutnya buka file web.php yang berada di folder routes>web.php
Image
17.   Isi script berikut ini
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', 'PagesController@home');
Route::get('/about', 'PagesController@about');
view raw sigit--routes hosted with ❤ by GitHub

<script src="https://gist.github.com/sigitprd23/f8cbd89ab6ad838d551f52f247f7b676.js"></script>

18.   Kemudian buat tiga file baru didalam folder employees yaitu create.blade.php, index.blade.php, dan show.blade.php
Image
19.   Pada file resources>views>employees>index.blade.php 
Image
tulis script berikut ini
<script src="https://gist.github.com/sigitprd23/50b22aca95470f946e268d8a0ae202e9.js"></script>
@extends('layout/main')
@section('title', 'List Employees')
@section('container')
<div class="container">
<div class="row">
<div class="col-6">
<h1 class="mt-3 mb-2">List Employees</h1>
<a href="/employees/create" class="btn btn-primary my-3">Add Data</a>
<br>
@if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
<ul class="list-group">
@foreach( $employees as $kry )
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ $kry->first_name }} {{ $kry->last_name}}
<a href="/employees/{{$kry->employee_id}}" class="badge badge-info">Detail</a>
</li>
@endforeach
</ul>
</div>
</div>
</div>
@endsection
view raw employees--index.blade.php hosted with ❤ by GitHub

20.   Kemudian buka file EmployeesController yang berada di folder app>Http>Controllers>EmployeesController
Image
kemudian pada method index tuliskan script berikut ini
Image
21.   Pada file web.php yang berada di folder routes>web.php 
Image
tambahkan script berikut ini

Image
22.   Selanjutnya kita akan mengkoneksikan database kita di project laravel. Disini saya menggunakan database server MySql dari xampp
23.   Pada file .env
Image
pada baris ke 12, ganti DB_DATABASE dengan nama databsenya

Image
24.   Selanjutnya buka file create.blade.php yang berada di folder resources>views>employees>create.blade.php
Image
isikan script berikut ini
@extends('layout/main')
@section('title', 'Form Create Employee')
@section('container')
<div class="container">
<div class="row">
<div class="col-8">
<h1 class="mt-3 mb-4">Form Create Employee</h1>
<form method="post" action="/employees">
@csrf
<div class="form-group">
<label for="employee_id">Employe Id</label>
<input type="number" class="form-control @error('employee_id') is-invalid @enderror" id="employee_id" placeholder="" name="employee_id" value="{{$employees->max('employee_id')+1}}" readonly="false">
@error('employee_id')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="form-group">
<label for="first_name">First Name</label>
<input type="text" class="form-control @error('first_name') is-invalid @enderror" id="first_name" placeholder="" name="first_name">
@error('first_name')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="form-group">
<label for="last_name">Last Name</label>
<input type="text" class="form-control @error('last_name') is-invalid @enderror" id="last_name" placeholder="" name="last_name">
@error('last_name')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control @error('email') is-invalid @enderror" id="email" placeholder="" name="email">
@error('email')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="form-group">
<label for="phone_number">Phone Number</label>
<input type="text" class="form-control @error('phone_number') is-invalid @enderror" id="phone_number" placeholder="" name="phone_number">
@error('phone_number')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="form-group">
<label for="hire_date">Hire Date</label>
<input type="date" class="form-control @error('hire_date') is-invalid @enderror" id="hire_date" placeholder="" name="hire_date">
@error('hire_date')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="form-group">
<label for="job_id">Job Id</label>
<select class="form-control @error('job_id') is-invalid @enderror" id="job_id" name="job_id">
@foreach( $jobs as $job )
<option value="{{ $job->job_id }}">{{ $job->job_title }}</option>
@endforeach
</select>
@error('job_id')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="form-group">
<label for="salary">Salary</label>
<input type="number" class="form-control @error('salary') is-invalid @enderror" id="salary" placeholder="" name="salary">
@error('salary')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="form-group">
<label for="commission_pct">Commission Pct</label>
<input type="number" class="form-control" id="commission_pct" placeholder="" name="commission_pct">
</div>
<div class="form-group">
<label for="manager_id">Manager Id</label>
<select class="form-control @error('manager_id') is-invalid @enderror" id="manager_id" name="manager_id">
@foreach( $employees as $emp )
<option value="{{ $emp->employee_id }}">{{ $emp->employee_id }}</option>
@endforeach
</select>
@error('manager_id')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="form-group">
<label for="department_id">Department Id</label>
<select class="form-control @error('department_id') is-invalid @enderror" id="department_id" name="department_id">
@foreach( $departments as $dpt )
<option value="{{ $dpt->department_id }}">{{ $dpt->department_name }}</option>
@endforeach
</select>
@error('department_id')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<button type="submit" class="btn btn-primary">Add Data</button>
</form>
</div>
</div>
</div>
@endsection
view raw employees--create.blade.php hosted with ❤ by GitHub

<script src="https://gist.github.com/sigitprd23/4f67de6ae0c5fc9ce79e031c76cb3471.js"></script>

25.   Kemudian buka file EmployeesController yang berada di folder app>Http>Controllers>EmployeesController
Image
tambahkan script berikut ini pada method create dan store

Image
26.   Pada file web.php yang berada di folder routes>web.php 
Image
tambahkan script berikut ini

Image
27.   Selanjutnya buka model Employee yang berada di dalam folder app>Employee.php
Image
isikan script berikut ini

Image
28.   Selanjutnya buka file show.blade.php yang berada di folder resources>views>employees>show.blade.php
Image
isikan script berikut ini
@extends('layout/main')
@section('title', 'Daftar Karyawan')
@section('container')
<div class="container">
<div class="row">
<div class="col-6">
<h1 class="mt-3 mb-4">Detail Employees</h1>
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ $employee->first_name }} {{ $employee->last_name }}</h5>
<h6 class="card-subtitle mb-2 text-muted">Employee Id : {{ $employee->employee_id }}</h6>
<p class="card-text">Email : {{ $employee->email }}</p>
<p class="card-text">Phone Number : {{ $employee->phone_number }}</p>
<p class="card-text">Hire Date : {{ $employee->hire_date }}</p>
<p class="card-text">Job Id : {{ $employee->job_id }}</p>
<p class="card-text">Salary : {{ $employee->salary }}</p>
<p class="card-text">Commission Pct : {{ $employee->commission_pct }}</p>
<p class="card-text">Manager Id : {{ $employee->manager_id }}</p>
<p class="card-text">Department Id : {{ $employee->department_id }}</p>
<a href="/employees" class="card-link">Back</a>
</div>
</div>
</div>
</div>
</div>
@endsection
view raw employees--show.blade.php hosted with ❤ by GitHub

<script src="https://gist.github.com/sigitprd23/85e5fe36d838ab0942ddd96da663604a.js"></script>

29.   Kemudian buka file EmployeesController yang berada di folder app>Http>Controllers>EmployeesController
Image
tambahkan script berikut ini pada method show

Image
30.   Pada file web.php yang berada di folder routes>web.php 
Image
tambahkan script berikut ini
Image
31.   Selanjutnya save all
32.   Kemudian buka terminal kalian, jalankan

c:\xampp\htdocs\laravel-hr> php artisan serve

copy alamat servernya dan paste kan di browse kalian lalu jalankan
33.   Silahkan kalian mencoba mengiput data baru. Oh iya, pada tables departments dan jobs, kalian isi terlebih dahulu data-datanya, agar memudahkan menginout data employeesnya pada web kalian.
Cukup sekian dulu ya, postingan kali ini. 
Sampai jumpa di postingan selanjutnya and sayonaraaa.. ^_^

 **tambahan, jika ada yg tidak jelas atau script ada yg kosong, kemungkinan githubnya tidak muncul


Langganan: Posting Komentar ( Atom )