Laravel Framework

A. Pengertian
Anda mungkin sedang bertanya: “Apa itu Framework?” Nah, framework adalah sebuah kerangka
program yang digunakan untuk membantu developer untuk mengembangkan kode secara
konsisten. Dengan adanya framework developer bisa mengurangi jumlah bug pada website atau aplikasi
yang dibuat. Karena, fungsi dan variabel yang sudah tersedia di dalam komponen framework.

Framework adalah kerangka kerja yang digunakan untuk mengembangkan aplikasi berbasis desktop
atau aplikasi berbasis website. Dengan menggunakan framework Anda akan lebih mudah untuk
membuat aplikasi atau website.

Framework memiliki fungsi utama untuk mempermudah para developer mengembangkan aplikasi dan
website terkait struktur MVC (Model View Controller) yang digunakan. Jadi, tiga fungsi framework
adalah sebagai berikut:

• Program Menjadi lebih tersetruktur dan tersusun

Menerapkan konsep MVC (Model View Controller) yang akan memudahkan developer untuk
memisahkan antara logika dan view.

• Praktis untuk developer

Framework sudah menyediakan kode berupa function dan class jadi proses pembuatan software
atau aplikasi akan menjadi lebih cepat. Anda cukup memanggil function atau class tersebut ke
dalam kode program Anda.

• Memiliki keamanan yang lebih unggul

keamanan untuk aplikasi dan website telah menjadi perhatian utama bagi developer. Beberapa
dari developer telah menggunakan segala cara untuk mengamankan aplikasi dan website yang
telah mereka buat.

B. Jenis-Jenis Framework untuk Web Development

• Framework Java Script (Vue.Js, React.js, Angular.js, Ember.js, Backbone.js, Node.js).
• Framework CSS (Bootstrap, Foundation, Bulma, Semantic UI, UIKit, Materialize CSS, Miligram,
PureCSS, Skeleton, Tailwind).
• Framework PHP (Laravel, CodeIgniter, Symfony, Yii, Zend, CakePHP, Phalcon, FuelPHP, Fat Free,
Aura).
C. Persiapan Laravel Tutorial

1. Apa yang Perlu Anda Pahami Sebelum Belajar Laravel?

• Penggunaan HTML/CSS
• Dasar Penggunaan PHP
• Dasar Framework MVC
 Model merupakan representasi dari database, table, ikon, dan file lainnya.
Fungsinya untuk mengelola data, logika, dan pengaturan aplikasi;
 View, bertugas menyajikan tampilan yang bisa dipahami manusia sesuai
perintah controller;
 Controller, berperan menghubungkan model dengan view. Controller akan
menerima input dari view, mengolah komputasi dan data, kemudian
memberikan respons untuk ditampilkan oleh view.

2. Menyiapkan kebutuhan Server

• Browser
• Xampp
• MySQL
• Composer
• Teks editor

3. Cara Instal Compeser

• Download Composer
Link = https://getcomposer.org/download/
• Instalall composer
• Tentukan lokasi file

• Pilih penggunaan proxy

• Riview lokasi instalasi

• Riview perubahan instalasi

• Instalasi selesai
 • Cek instalasi composer di cmd

4. Membuat projek/folder baru di laravel

• Kemudian buat foder bebas
• Bukan cmd

• Jalankan webserser(xampp)
• Lalu ketik (composer create-project laravel/laravel nama_projek) internet aktif
• Kemudian masuk kedalam folder projek

• Lalu ketik http di browser

• Kemudian buka visual studio, file-openfolder,pilihprojek

D. Struktur Folder Laravel
Selesai menginstal Laravel, kita mencoba membuat web app pertama. Namun, sesaat kemudian
Anda menemukan app folder berisi berbagai folder dan file yang namanya asing.

Struktur dalam folder Laravel, sebagai berikut:

• App = pada folder App. Folder ini berisi kode inti yang terdiri dari lima folder, yaitu:
 Console, folder ini berisi semua perintah Artisan yang dibuat dengan make:command.
 Exception, folder ini berisi semua handler pengecualian dan folder ini bagus untuk
menambahkan class yang sudah disesuaikan sendiri untuk menangani pengecualian
yang diberikan aplikasi.
 Http, folder ini berisi fungsi controllers, middleware dan requests.
 Models, ini adalah direktori baru yang ditambahkan sejak Laravel 8. Fungsinya untuk
menyimpan file Model.
 Providers, folder ini berisi semua penyedia layanan (service provider) untuk aplikasi.
Penyedia layanan (service provider) merupakan tempat utama untuk bootstrap Laravel
atau bisa diartikan sebagai bagian utama untuk mengkonfigurasi aplikasi.

• Boostrap = Folder ini berisi semua framework bootstrap begitu juga dengan file konfigurasi.
Folder ini juga memuat direktori Cache yang berisi file cache yang dihasilkan oleh framework.

• Config = Folder ini berisi semua file konfigurasi aplikasi.

• Database = Folder ini berisi semua database migrasi dan seeds.

• Public = Folder ini berisi semua assets seperti gambar, file javascript, dan CSS.
• Resources = Folder ini berisi assets mentah seperti file LESS & Sass, pengaturan waktu, dan
bahasa.

• Routes = Folder ini berisi semua rute yang didefinisikan pada aplikasi.

• Storage = Folder ini berisi penyimpanan App, seperti unggahan file, cache, dan log.

• Test = Folder ini berisi semua file percobaan.

• Vendor = Folder ini berisi semua file dependency.

• Konfigurasi Envirotment = Environment perlu diatur karena setiap developer memerlukan

konfigurasi yang berbeda sesuai dengan kebutuhan aplikasi. Misalnya seperti penentuan
database, email server, dan lain-lain.
 Migration laravel
Migration adalah sebuah fitur yang ada pada laravel, migration merupakan control version
system untuk database, dengan menggunakan migration laravel, memungkinkan kita untuk
mengelola database dengan lebih mudah.
Dengan menggunakan migration, kita bisa membuat table data dengan lebih mudah dan cepat.
Migration akan membuat atau meng-generate file-file migration sebagai control system. File –
file inilah yang bisa dikirim oleh progremer antara satu sama lainya saat sedang membuat
aplikasi.
Langkah – langkah :
1. Buatlah database dengan nama penggajian localhost.

2. Buka teks editor (vcode) lalu cari .env, lalu masukan data base Klik envirotment .env. ganti
dengan database sudah di buat (penggajian)
3. Buka terminal -> buat table menggunakan migration
Ketik :
“php artisan make:migration create_jabatan_table”
“php artisan make:migration create_karyawan_table”
“php artisan make:migration create_gaji_table”
4. Buka folder database -> folder migrations -> buka file create_users_table -> edit seperti
gambar dibawah ini
5. Buka folder database -> folder migrations -> buka file create_jabatan_table -> edit seperti
gambar dibawah ini

6. Buka folder database -> folder migrations -> buka file create_karyawan_table -> edit seperti
gambar dibawah ini

7. Buka folder database -> folder migrations -> buka file create_gaji_table -> edit seperti
gambar dibawah ini

Commented [H1]: Jika kalian sudah migrate dan ternyata

ada kesalahan pada table kalian. Silahkan edit terlebih
8. Buka terminal -> ketik “php artisan migrate” dahulu file migrationsnya setelah itu gunakan perintah :
1. “php artisan migrate:rollback” artinya kalian mengUNDO
migrasi yang telah dilakukan lalu kalian ketikkan kembali
“php artisan migrate” ATAU
2. “php artisan migrate:fresh” artinya kalian menghapus
migrasi yang telah dibuat sekaligus membuat kembali
migrasi
 TEMPLATING MENGGUNAKAN BOOTSTRAP

1. Cari folder views -> buat folder dengan nama “Layout” -> didalam folder “Layout” buat file
“main.blade.php”
Cari folder views -> buat file “dashboard.blade.php”
Seperti gambar dibawah ini

2. Buka link dibawah ini

https://getbootstrap.com/docs/5.2/getting-started/introduction/

3. Pada menu introduction, copy script dibawah ini dan paste di file “main.blade.php”
Commented [H1]: Sebenarnya tidak perlu copy dari
bootsrap pun tidak apa - apa. Buat saja kerangka HTML
seperti biasa namun tambahkan link untuk merujuk file CSS
dan tambahkan tag script untuk merujuk file JS

4. Pada menu download -> klik download seperti pada gambar dibawah ini
Commented [H2]: Mengapa download bootsrap ? Karena
pada project ini kita akan menggunakan bootsrap secara
offline
5. Extract hasil download bootstrap -> buka folder css -> copy file “bootstrap.min.css” -> buka
project Laravel anda -> ke folder public-> buat folder “css” -> paste di dalam folder “css”
6. buka folder js -> copy file “bootstrap.min.js” -> buka project Laravel anda -> ke folder public-
> buat folder “js” -> paste di dalam folder ”js”
7. Design file “main.blade.php” sesuka kalian atau boleh mengikuti script dibawah ini
8. <!DOCTYPE html>
9. <html lang="en">
10. <head>
11. <meta charset="UTF-8">
12. <meta name="viewport" content="width=device-width, initial-scale=1.0">
13. <meta http-equiv="X-UA-Compatible" content="ie=edge">
14. <title>Document</title>
15. <link rel="stylesheet" href="{{ asset("css/bootstrap.min.css") }}">
16. </head>
17. <body class="bg-warning-70">
18. {{----------------- NAVBAR -----------------}}
19. <nav class="navbar navbar-expand-lg bg-dark">
20. <div class="container">
21. <a class="navbar-brand text-light" href="/Home">
22. <img src="{{ asset("images/logo/RP.png") }}" alt="Logo"
width="40" height="40" class="me-2">
23. <strong>PT. GROW UP</strong>
24. </a>
25. <button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
26. <span class="navbar-toggler-icon"></span>
27. </button>
28. <div class="collapse navbar-collapse" id="navbarNav">
29. <ul class="navbar-nav ms-auto">
30. <li class="nav-item">
31. <a class="nav-link active text-light fs-5" aria-
current="page" href="/Home">Home</a>
32. </li>
33. <li class="nav-item">
34. <a class="nav-link text-light fs-5"
href="/jabatan/index">Jabatan</a>
35. </li>
36. <li class="nav-item">
37. <a class="nav-link text-light fs-5"
href="/Karyawan">Karyawan</a>
38. </li>
39. <li class="nav-item">
40. <a class="nav-link text-light fs-5" href="/Gaji">Gaji</a>
 41. </li>
42. <li class="nav-item">
43. <a class="nav-link text-light fs-5"
href="/Laporan">Laporan</a>
44. </li>
45. </ul>
46. </div>
47. </div>
48. </nav>
49.
50. {{---------------- CONTENT ----------------}}
51. <div class="div container">
52. <div class="row m-4">
53. <div class="col">
54. @yield('content')
55. </div>
56. </div>
57. </div>
58.
59. {{---------------- JAVASCRIPT ----------------}}
60. <script src="js/bootstrap.min.js"></script>
61. </body>
62. </html>

8. Edit file “dashboard.blade.php” sesuka kalian atau boleh mengikuti script dibawah ini
9. @extends('Layout.main')
10.
11. @section('content')
12. <div class="div ps-5">
13. <h1>Home</h1>
14. </div>
15. @endsection
16.

9. Buka terminal -> ketik “php artisan make:controller IndexController” -> edit seperti dibawah
ini
9. <?php
10.
11. namespace App\Http\Controllers;
12.
13. use Illuminate\Http\Request;
14.
15. class IndexController extends Controller
16. {
 17. /**
18. * Display a listing of the resource.
19. *
20. * @return \Illuminate\Http\Response
21. */
22. public function index()
23. {
24. return view('dashboard');
25. }
26. }
27.

10. Buka folder routes -> buka file “web.php”

11. <?php
12.
13. use App\Http\Controllers\IndexController;
14. use Illuminate\Support\Facades\Route;
15.
16. Route::get('/Home,[IndexController::class,'index']);

17. Route::get('/', function () {

18. return view('welcome');
19. });
 JABATAN

1. Buka folder “views”pada project kalian -> Buat folder “Jabatan” -> Buat file
“index.blade.php” , “create.blade.php” , “edit.blade.php”
2. Buka file “index.blade.php” -> Buat tampilan untuk menampilkan data, seperti gambar
dibawah ini
3. @extends('Layout.main')
4.
5. @section('content')
6. <div class="col-12 ps-4">
7. <h4>>> Data Jabatan</h4>
8. <a href="/jabatan/create" class="btn btn-info btn-md p-2 mb-3">Tambah Data</a>
9. </div>
10. <div class="col-12 ps-4">
11. <div class="table-responsive-md">
12. <table class="table table-striped-responsive text-start">
13. <thead>
14. <tr>
15. <th scope="col">No.</th>
16. <th scope="col">Nama Jabatan</th>
17. <th scope="col">Gaji Pokok</th>
18. <th scope="col">Upah Lembur</th>
19. <th scope="col">Action</th>
20. </tr>
21. </thead>
22. <tbody>
23. @foreach ($jabatans as $jabatan)
24. <tr>
25. <th scope="row">{{ $loop->iteration }}</th>
26. <td>{{ $jabatan->nama_jabatan}}</td>
27. <td>{{ $jabatan->jumlah_gaji_pokok}}</td>
28. <td>{{ $jabatan->upah_lembur}}</td>
29. <td>
30. <a href="/jabatan/edit/{{ $jabatan->id }}" class="btn btn-
warning btn-sm">Edit</a>
31. <a href="#" class="btn btn-danger btn-sm" onclick="return
confirm('Sure ?')">Delete</a>
32. </td>
33. </tr>
34. @endforeach
35. </tbody>
36. </table>
37. </div>
 38. @endsection

3. Buka file “create.blade.php” -> Buat tampilan untuk memasukkan data, seperti gambar
dibawah ini
4. @extends('Layout.main')
5.
6. @section('content')
7. <div class="col-12 ps-4">
8. <h4>>> Tambah Data Jabatan</h4>
9. <a href="/jabatan/index" class="btn btn-info btn-md p-2 mb-3">Kembali</a>
10. </div>
11. <div class="col-12 ps-4">
12. <div class="col-12 bg-light p-2 rounded-3 shadow-sm">
13. <form action="/jabatan/store" method="POST">
14. @csrf
15. <div class="mb-3 row">
16. <label for="inputPassword" class="col-sm-2 col-form-label">Nama
Jabatan</label>
17. <div class="col-sm-10">
18. <input type="text" class="form-control" name="nama_jabatan">
19. </div>
20. </div>
21. <div class="mb-3 row">
22. <label for="inputPassword" class="col-sm-2 col-form-label">Gaji
Pokok</label>
23. <div class="col-sm-10">
24. <input type="text" class="form-control" name="jumlah_gaji_pokok">
25. </div>
26. </div>
27. <div class="mb-3 row">
28. <label for="inputPassword" class="col-sm-2 col-form-label">Upah
Lembur</label>
29. <div class="col-sm-10">
30. <input type="text" class="form-control" name="upah_lembur">
31. </div>
32. </div>
33. <div class="d-grid text-end">
34. <div class="col-sm-12">
35. <button class="btn btn-primary btn-sm"
type="submit">CREATE</button>
36. </div>
37. </div>
38. </form>
39. </div>
40. </div>
 41. @endsection

4. Buka file “edit.blade.php” -> Buat tampilan untuk mengubah data, seperti gambar dibawah
ini
5. @extends('Layout.main')
6.
7. @section('content')
8. <div class="col-12 ps-4">
9. <h4>>> Edit Data Jabatan</h4>
10. <a href="/jabatan/index" class="btn btn-info btn-md p-2 mb-3">Kembali</a>
11. </div>
12. <div class="col-12 ps-4">
13. <div class="col-12 bg-light p-2 rounded-3 shadow-sm">
14. <form action="/jabatan/update/{{ $jabatan->id }}" method="POST">
15. @csrf
16. <div class="mb-3 row">
17. <label for="inputPassword" class="col-sm-2 col-form-label">Nama
Jabatan</label>
18. <div class="col-sm-10">
19. <input type="text" class="form-control" name="nama_jabatan"
value="{{ $jabatan->nama_jabatan }}">
20. </div>
21. </div>
22. <div class="mb-3 row">
23. <label for="inputPassword" class="col-sm-2 col-form-label">Gaji
Pokok</label>
24. <div class="col-sm-10">
25. <input type="text" class="form-control" name="jumlah_gaji_pokok"
value="{{ $jabatan->jumlah_gaji_pokok }}">
26. </div>
27. </div>
28. <div class="mb-3 row">
29. <label for="inputPassword" class="col-sm-2 col-form-label">Upah
Lembur</label>
30. <div class="col-sm-10">
31. <input type="text" class="form-control" name="upah_lembur"
value="{{ $jabatan->upah_lembur }}">
32. </div>
33. </div>
34. <div class="d-grid text-end">
35. <div class="col-sm-12">
36. <button class="btn btn-primary btn-sm"
type="submit">UPDATE</button>
37. </div>
38. </div>
39. </form>
40. </div>
41. </div>
42. @endsection
 Karyawan

1. Buka folder “views”pada project kalian -> Buat folder “Karyawan” -> Buat file
“index.blade.php” , “create.blade.php” , “edit.blade.php”
2. Buka file “index.blade.php” -> Buat tampilan untuk menampilkan data, seperti gambar
dibawah ini
3. @extends('Layout.main')
4.
5. @section('content')
6. <div class="col-12 ps-4">
7. <h4>>> Data Karyawan</h4>
8. <a href="/karyawan/create" class="btn btn-info btn-md p-2 mb-3">Tambah
Data</a>
9. </div>
10. <div class="col-12 ps-4">
11. <div class="table-responsive-md">
12. <table class="table table-striped-responsive text-start">
13. <thead>
14. <tr>
15. <th scope="col">No.</th>
16. <th scope="col">Nama Karyawan</th>
17. <th scope="col">Jabatan</th>
18. <th scope="col">Alamat</th>
19. <th scope="col">No HP</th>
20. <th scope="col">Tempat Lahir</th>
21. <th scope="col">Tanggal Lahir</th>
22. <th scope="col">Jenis Kelamin</th>
23. <th scope="col">Status</th>
24. <th scope="col">Jumlah Anak</th>
25. <th scope="col">Action</th>
26. </tr>
27. </thead>
28. <tbody>
29. @foreach ($karyawan as $karyawan)
30. <tr>
31. <th scope="row">{{ $loop->iteration }}</th>
32. <td>{{ $karyawan->nama_karyawan}}</td>
33. <td>{{ $karyawan->jabatan->nama_jabatan}}</td>
34. <td>{{ $karyawan->alamat}}</td>
35. <td>{{ $karyawan->no_hp}}</td>
36. <td>{{ $karyawan->tempat_lahir}}</td>
37. <td>{{ $karyawan->tanggal_lahir}}</td>
38. <td>{{ $karyawan->jk}}</td>
 39. <td>{{ $karyawan->status}}</td>
40. <td>{{ $karyawan->jumlah_anak}}</td>
41. <td>
42. <a href="" class="btn btn-warning btn-sm">Edit</a>
43. <a href="" class="btn btn-danger btn-sm"
onclick="return confirm('Sure ?')">Delete</a>
44. </td>
45. </tr>
46. @endforeach
47. </tbody>
48. </table>
49. </div>
50. @endsection

3. Buka file “create.blade.php” -> Buat tampilan untuk memasukkan data, seperti gambar
dibawah ini
4. @extends('Layout.main')
5.
6. @section('content')
7. <div class="col-12 ps-4">
8. <h4>>> Tambah Data Karyawan</h4>
9. <a href="/karyawan/index" class="btn btn-info btn-md p-2 mb-
3">Kembali</a>
10. </div>
11. <div class="col-12 ps-4">
12. <div class="col-12 bg-light p-2 rounded-3 shadow-sm">
13. <form action="/karyawan/store" method="POST">
14. @csrf
15. <div class="mb-3 row">
16. <label class="col-sm-2 col-form-label">Nama
Karyawan</label>
17. <div class="col-sm-10">
18. <input type="text" class="form-control"
name="nama_karyawan">
19. </div>
20. </div>
21. <div class="mb-3 row">
22. <label class="col-sm-2 col-form-label">Jabatan</label>
23. <div class="col-sm-10">
24. <select name="jabatan_id" class="form-select">
25. <option></option>
26. @foreach ($jabatan as $item)
27. <option value="{{ $item->id }}">{{ $item-
>nama_jabatan }}</option>
28. @endforeach
29. </select>
30. </div>
31. </div>
32. <div class="mb-3 row">
33. <label class="col-sm-2 col-form-label">Alamat</label>
34. <div class="col-sm-10">
35. <textarea class="form-control" name="alamat"
rows="3"></textarea>
36. </div>
37. </div>
38. <div class="mb-3 row">
39. <label class="col-sm-2 col-form-label">No HP</label>
40. <div class="col-sm-10">
41. <input type="text" class="form-control" name="no_hp">
42. </div>
43. </div>
44. <div class="mb-3 row">
45. <label class="col-sm-2 col-form-label">Tempat
Lahir</label>
46. <div class="col-sm-10">
47. <input type="text" class="form-control"
name="tempat_lahir">
48. </div>
49. </div>
50. <div class="mb-3 row">
51. <label class="col-sm-2 col-form-label">Tanggal
Lahir</label>
52. <div class="col-sm-10">
53. <input type="date" class="form-control"
name="tanggal_lahir">
54. </div>
55. </div>
56. <div class="mb-3 row">
57. <label class="col-sm-2 col-form-label">Jenis
Kelamin</label>
58. <div class="col-sm-10">
59. <div class="col-sm-10">
60. <input class="form-check-input" type="radio"
value="Wanita" name="jk">
61. <label class="form-check-label">
62. Wanita
63. </label>
64.
65. <input class="form-check-input" type="radio"
value="Pria" name="jk">
 66. <label class="form-check-label">
67. Pria
68. </label>
69. </div>
70. </div>
71. </div>
72. <div class="mb-3 row">
73. <label class="col-sm-2 col-form-label">Status</label>
74. <div class="col-sm-10">
75. <input type="text" class="form-control" name="status">
76. </div>
77. </div>
78. <div class="mb-3 row">
79. <label class="col-sm-2 col-form-label">Jumlah Anak</label>
80. <div class="col-sm-10">
81. <select name="jumlah_anak"class="form-select">
82. <option></option>
83. <option value="Belum Menikah">Belum Menikah</option>
84. <option value="Menikah">Menikah</option>
85. <option value="Bercerai">Bercerai</option>
86. <option value="Ditinggal Meninggal">Ditinggal
Meninggal</option>
87. </select>
88. </div>
89. </div>
90. <div class="d-grid text-end">
91. <div class="col-sm-12">
92. <button class="btn btn-primary btn-sm"
type="submit">CREATE</button>
93. </div>
94. </div>
95. </form>
96. </div>
97. </div>
98. @endsection

4. Buka file “edit.blade.php” -> Buat tampilan untuk mengubah data, seperti gambar dibawah
ini
5. @extends('Layout.main')
6.
7. @section('content')
8. <div class="col-12 ps-4">
9. <h4>>> Edit Data Karyawan</h4>
10. <a href="/karyawan/index" class="btn btn-info btn-md p-2 mb-
3">Kembali</a>
11. </div>
12. <div class="col-12 ps-4">
13. <div class="col-12 bg-light p-2 rounded-3 shadow-sm">
14. <form action="/karyawan/store" method="POST">
15. @csrf
16. <div class="mb-3 row">
17. <label class="col-sm-2 col-form-label">Nama
Karyawan</label>
18. <div class="col-sm-10">
19. <input type="text" class="form-control"
name="nama_karyawan" value="{{ }}">
20. </div>
21. </div>
22. <div class="mb-3 row">
23. <label class="col-sm-2 col-form-label">Jabatan</label>
24. <div class="col-sm-10">
25. <select name="jabatan_id" class="form-select">
26. <option></option>
27. @foreach ($jabatan as $item)
28. <option value="{{ $item->id }}">{{ $item-
>nama_jabatan }}</option>
29. @endforeach
30. </select>
31. </div>
32. </div>
33. <div class="mb-3 row">
34. <label class="col-sm-2 col-form-label">Alamat</label>
35. <div class="col-sm-10">
36. <textarea class="form-control" name="alamat"
rows="3"></textarea>
37. </div>
38. </div>
39. <div class="mb-3 row">
40. <label class="col-sm-2 col-form-label">No HP</label>
41. <div class="col-sm-10">
42. <input type="text" class="form-control" name="no_hp">
43. </div>
44. </div>
45. <div class="mb-3 row">
46. <label class="col-sm-2 col-form-label">Tempat
Lahir</label>
47. <div class="col-sm-10">
48. <input type="text" class="form-control"
name="tempat_lahir">
49. </div>
50. </div>
51. <div class="mb-3 row">
52. <label class="col-sm-2 col-form-label">Tanggal
Lahir</label>
53. <div class="col-sm-10">
54. <input type="date" class="form-control"
name="tanggal_lahir">
55. </div>
56. </div>
57. <div class="mb-3 row">
58. <label class="col-sm-2 col-form-label">Jenis
Kelamin</label>
59. <div class="col-sm-10">
60. <div class="col-sm-10">
61. <input class="form-check-input" type="radio"
value="Wanita" name="jk">
62. <label class="form-check-label">
63. Wanita
64. </label>
65.
66. <input class="form-check-input" type="radio"
value="Pria" name="jk">
67. <label class="form-check-label">
68. Pria
69. </label>
70. </div>
71. </div>
72. </div>
73. <div class="mb-3 row">
74. <label class="col-sm-2 col-form-label">Status</label>
75. <div class="col-sm-10">
76. <input type="text" class="form-control" name="status">
77. </div>
78. </div>
79. <div class="mb-3 row">
80. <label class="col-sm-2 col-form-label">Jumlah
Anak</label>
81. <div class="col-sm-10">
82. <select name="jumlah_anak"class="form-select">
83. <option></option>
84. <option value="Belum Menikah">Belum Menikah</option>
85. <option value="Menikah">Menikah</option>
86. <option value="Bercerai">Bercerai</option>
87. <option value="Ditinggal Meninggal">Ditinggal
Meninggal</option>
 88. </select>
89. </div>
90. </div>
91. <div class="d-grid text-end">
92. <div class="col-sm-12">
93. <button class="btn btn-primary btn-sm"
type="submit">UPDATE</button>
94. </div>
95. </div>
96. </form>
97. </div>
98. </div>
99. @endsection

5. Buat file controllers dengan perintah “php artisan make:controller (nama_controller) -r”
-> lalu buka folder App/http/controller lalu buka file controller yang sudah kalian buat edit
file seperti gambar dibawah ini!

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class KaryawanController extends Controller

{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('karyawan.index');
}

/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('karyawan.create');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
//
}

/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show()
{
return view('karyawan.edit');
}

/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//
}

/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
}
 /**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
}
}

6. Buka folder routes lalu buka file “web.php” -> edit file “web.php” seperti gambar
dibawah!

<?php

use App\Http\Controllers\IndexController;
use App\Http\Controllers\KaryawanController;
use Illuminate\Support\Facades\Route;

Route::get('/Home',[IndexController::class,'index']);
Route::get('/karyawan/index',[KaryawanController::class,'index']);
Route::get('/karyawan/create',[KaryawanController::class,'create']);
Route::get('/karyawan/edit',[KaryawanController::class,'show']);
 Gaji

1. Buka folder “views”pada project kalian -> Buat folder “Gaji” -> Buat file “index.blade.php” ,
“create.blade.php” , “edit.blade.php”
2. Buka file “index.blade.php” -> Buat tampilan untuk menampilkan data, seperti gambar
dibawah ini
3. @extends('layout.main')
4.
5. @section('content')
6. <div>
7. <h4>>>Data Gaji</h4>
8. <a href="/Gaji/create" class="btn btn-info btn-md p-2 mb-3">Tambah
data</a>
9. </div>
10. <div class="col-12 ps-1">
11. <table class="table table-bordered border-dark ">
12. <thead>
13. <tr>
14. <th scope="col">Id</th>
15. <th scope="col">Karyawan</th>
16. <th scope="col">Bulan</th>
17. <th scope="col">Sakit</th>
18. <th scope="col">Izin</th>
19. <th scope="col">Alpha</th>
20. <th scope="col">Total Tunjangan</th>
21. <th scope="col">Gaji Kotor</th>
22. <th scope="col">Pajak</th>
23. <th scope="col">Gaji Bersih</th>
24. <th scope="col">Action</th>
25. </tr>
26. </thead>
27. <tbody>
28.
29. <tr>
30. <th scope="row">01</th>
31. <td></td>
32. <td></td>
33. <td></td>
34. <td></td>
35. <td></td>
36. <td></td>
37. <td></td>
38. <td></td>
 39. <td></td>
40. <td>
41. <a href="/Gaji/edit" class="btn btn-warning btn-
sm">Edit</a>
42. <a href="#" class="btn btn-danger btn-sm"
onclick="return confirm('Sure?')">Delete</a>
43. </td>
44. </tr>
45.
46. </tbody>
47. </table>
48. </div>
49. </div>
50. @endsection

3. Buka file “create.blade.php” -> Buat tampilan untuk memasukkan data, seperti gambar
dibawah ini
4. @extends('Layout.main')
5.
6. @section('content')
7. <div class="col-12 ps-4">
8. <h4>>> Tambah Data Gaji</h4>
9. <a href="/Gaji/index" class="btn btn-info btn-md p-2 mb-
3">Kembali</a>
10. </div>
11. <div class="col-12 ps-4">
12. <div class="col-12 bg-light p-2 rounded-3 shadow-sm">
13. <form action="/Gaji/store" method="POST">
14. @csrf
15. <div class="mb-3 row">
16. <label for="inputPassword" class="col-sm-2 col-form-
label">Karyawan</label>
17. <div class="col-sm-10">
18. <select class="form-control">
19. <option>Karyawan</option>
20. <option></option>
21. <option></option>
22. </select>
23. </div>
24. </div>
25. <div class="mb-3 row">
26. <label for="inputPassword" class="col-sm-2 col-form-
label">Bulan</label>
27. <div class="col-sm-10">
28. <select class="form-control">
29. <option>Januari</option>
30. <option>Februari</option>
31. <option>Maret</option>
32. <option>April</option>
33. <option>Mei</option>
34. <option>Juni</option>
35. <option>Juli</option>
36. <option>Agustus</option>
37. <option>September</option>
38. <option>Oktober</option>
39. <option>November</option>
40. <option>Desember</option>
41. </select>
42. </div>
43. </div>
44. <div class="mb-3 row">
45. <label for="inputPassword" class="col-sm-2 col-form-
label">Sakit</label>
46. <div class="col-sm-10">
47. <input type="text" class="form-control"
name="upah_lembur">
48. </div>
49. </div>
50. <div class="mb-3 row">
51. <label for="inputPassword" class="col-sm-2 col-form-
label">Izin</label>
52. <div class="col-sm-10">
53. <input type="text" class="form-control"
name="upah_lembur">
54. </div>
55. </div>
56. <div class="mb-3 row">
57. <label for="inputPassword" class="col-sm-2 col-form-
label">Alpha</label>
58. <div class="col-sm-10">
59. <input type="text" class="form-control"
name="upah_lembur">
60. </div>
61. </div>
62. <div class="mb-3 row">
63. <label for="inputPassword" class="col-sm-2 col-form-
label">Total Tunjangan</label>
64. <div class="col-sm-10">
65. <input type="text" class="form-control"
name="upah_lembur">
 66. </div>
67. </div>
68. <div class="mb-3 row">
69. <label for="inputPassword" class="col-sm-2 col-form-
label">Gaji Kotor</label>
70. <div class="col-sm-10">
71. <input type="text" class="form-control"
name="upah_lembur">
72. </div>
73. </div>
74. <div class="mb-3 row">
75. <label for="inputPassword" class="col-sm-2 col-form-
label">Pajak</label>
76. <div class="col-sm-10">
77. <input type="text" class="form-control"
name="upah_lembur">
78. </div>
79. </div>
80. <div class="mb-3 row">
81. <label for="inputPassword" class="col-sm-2 col-form-
label">Gaji Bersih</label>
82. <div class="col-sm-10">
83. <input type="text" class="form-control"
name="upah_lembur">
84. </div>
85. </div>
86. <div class="d-grid text-end">
87. <div class="col-sm-12">
88. <button class="btn btn-primary btn-
sm"type="submit">CREATE</button>
89. </div>
90. </div>
91. </form>
92. </div>
93. </div>
94. @endsection

4. Buka file “edit.blade.php” -> Buat tampilan untuk mengubah data, seperti gambar dibawah
ini
5. @extends('Layout.main')
6.
7. @section('content')
8. <div class="col-12 ps-4">
9. <h4>>> Edit Data Gaji</h4>
10. <a href="/Gaji/index" class="btn btn-info btn-md p-2 mb-
3">Kembali</a>
11. </div>
12. <div class="col-12 ps-4">
13. <div class="col-12 bg-light p-2 rounded-3 shadow-sm">
14. <form action="/Gaji/store" method="POST">
15. @csrf
16. <div class="mb-3 row">
17. <label for="inputPassword" class="col-sm-2 col-form-
label">Karyawan</label>
18. <div class="col-sm-10">
19. <select class="form-control">
20. <option>Karyawan</option>
21. <option></option>
22. <option></option>
23. </select>
24. </div>
25. </div>
26. <div class="mb-3 row">
27. <label for="inputPassword" class="col-sm-2 col-form-
label">Bulan</label>
28. <div class="col-sm-10">
29. <select class="form-control">
30. <option>Januari</option>
31. <option>Februari</option>
32. <option>Maret</option>
33. <option>April</option>
34. <option>Mei</option>
35. <option>Juni</option>
36. <option>Juli</option>
37. <option>Agustus</option>
38. <option>September</option>
39. <option>Oktober</option>
40. <option>November</option>
41. <option>Desember</option>
42. </select>
43. </div>
44. </div>
45. <div class="mb-3 row">
46. <label for="inputPassword" class="col-sm-2 col-form-
label">Sakit</label>
47. <div class="col-sm-10">
48. <input type="text" class="form-control"
name="upah_lembur">
49. </div>
50. </div>
51. <div class="mb-3 row">
52. <label for="inputPassword" class="col-sm-2 col-form-
label">Izin</label>
53. <div class="col-sm-10">
54. <input type="text" class="form-control"
name="upah_lembur">
55. </div>
56. </div>
57. <div class="mb-3 row">
58. <label for="inputPassword" class="col-sm-2 col-form-
label">Alpha</label>
59. <div class="col-sm-10">
60. <input type="text" class="form-control"
name="upah_lembur">
61. </div>
62. </div>
63. <div class="mb-3 row">
64. <label for="inputPassword" class="col-sm-2 col-form-
label">Total Tunjangan</label>
65. <div class="col-sm-10">
66. <input type="text" class="form-control"
name="upah_lembur">
67. </div>
68. </div>
69. <div class="mb-3 row">
70. <label for="inputPassword" class="col-sm-2 col-form-
label">Gaji Kotor</label>
71. <div class="col-sm-10">
72. <input type="text" class="form-control"
name="upah_lembur">
73. </div>
74. </div>
75. <div class="mb-3 row">
76. <label for="inputPassword" class="col-sm-2 col-form-
label">Pajak</label>
77. <div class="col-sm-10">
78. <input type="text" class="form-control"
name="upah_lembur">
79. </div>
80. </div>
81. <div class="mb-3 row">
82. <label for="inputPassword" class="col-sm-2 col-form-
label">Gaji Bersih</label>
83. <div class="col-sm-10">
84. <input type="text" class="form-control"
name="upah_lembur">
85. </div>
86. </div>
87. <div class="d-grid text-end">
88. <div class="col-sm-12">
89. <button class="btn btn-primary btn-
sm"type="submit">CREATE</button>
90. </div>
91. </div>
92. </form>
93. </div>
94. </div>
95. @endsection