{"id":1954,"date":"2025-06-11T17:15:33","date_gmt":"2025-06-11T17:15:33","guid":{"rendered":"https:\/\/galid.infokand23.my.id\/laprakpweb\/?p=1954"},"modified":"2025-06-13T17:01:03","modified_gmt":"2025-06-13T17:01:03","slug":"laporan-praktikum-pemrograman-web-pekan-9","status":"publish","type":"post","link":"https:\/\/galid.infokand23.my.id\/laprakpweb\/laporan-praktikum-pemrograman-web-pekan-9\/","title":{"rendered":"Laporan Praktikum Pekan 9 Pemrograman Web – 2311532008"},"content":{"rendered":"\n

Muhammad Galid Avero – 2311532008<\/p>\n\n\n\n

Laravel AUTH Lanjutan<\/h2>\n\n\n\n

Selanjutnya, kita akan membuat fitur manajemen user dengan menggunakan fungsi CRUD secara keseluruhan. Untuk melakukan ini, buka terminal di code editor dan ketikkan perintah berikut:<\/p>\n\n\n\n

php artisan make:controller UserController \u2013resource<\/code><\/pre>\n\n\n\n
Lalu tambahkan kode ini di route web<\/p>\n\n\n\n
use App\\Http\\Controllers\\UserController; \nRoute::resource('users', UserController::class); <\/code><\/pre>\n\n\n\n
lalu kita akan melihat isi dari route kita dengan menggunakan perintah:<\/p>\n\n\n\n
php artisan route:list<\/code><\/pre>\n\n\n\n
akan terlihat seperti ini apabila sudah dijalankan<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Selanjutnya adalah membuat file UserController dengan kode ini<\/p>\n\n\n\n
<?php\n\nnamespace App\\Http\\Controllers;\n\nuse Illuminate\\Http\\Request;\n\nclass UserController extends Controller\n{\n    \/**\n     * Display a listing of the resource.\n     * \n     * @return \\Illuminate\\Http\\Response\n     *\/\n    public function index()\n    {\n        \/\/\n    }\n\n    \/**\n     * Show the form for creating a new resource.\n     * \n     * @return \\Illuminate\\Http\\Response\n     *\/\n    public function create()\n    {\n        \n    }\n\n    \/**\n     * Store a newly created resource in storage.\n     * \n     * @param \\Illuminate\\Http\\Request $request\n     * @return \\Illuminate\\Http\\Response\n     *\/\n    public function store(Request $request)\n    {\n        \/\/\n    }\n\n    \/**\n     * Display the specified resource.\n     *\/\n    public function show($id)\n    {\n        \/\/\n    }\n\n    \/**\n     * Show the form for editing the specified resource.\n     *\/\n    public function edit($id)\n    {\n        \/\/\n    }\n\n    \/**\n     * Update the specified resource in storage.\n     *\/\n    public function update(Request $request, $id)\n    {\n        \/\/\n    }\n\n    \/**\n     * Remove the specified resource from storage.\n     *\/\n    public function destroy($id)\n    {\n        \/\/\n    }\n}<\/code><\/pre>\n\n\n\n
Selanjutnya pada bagian kode ini, cari fungsi create dan buat menjadi kodenya seperti ini<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
kode di atar artinya perintah untuk menampilkan view create pada folder user<\/p>\n\n\n\n
selanjutnya buat folder user dalam folder view, tambahkan file create.blade.php dan isikan dengan kode program berikut ini.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Selanjutnya tambahkan file css dan javascript select2 ini kedalam layout main.blade.php<\/p>\n\n\n\n
<link href=https:\/\/cdn.jsdelivr.net\/npm\/select2@4.1.0-rc.0\/dist\/css\/select2.min.css rel=\"stylesheet\" \/> \n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/select2@4.1.0-rc.0\/dist\/js\/select2.min.js\"><\/script>   <\/code><\/pre>\n\n\n\n
next adalah membuat tampilan view create sederhana untuk menampilkan tambah user . Masukkan pada file user\/create.blade.php dengan kode seperti berikut:<\/p>\n\n\n\n
@extends('layouts.main')\n@section(\"Judul\")\nCreate User\n@endsection\n@section('konten')\n<div class=\"card shadow mb-4\">\n    <div class=\"card-header py-3\"><\/div>\n    <div class=\"card-body\">\n        <div class=\"row\">\n            <div class=\"col-lg-9\">\n                <form action=\"POST\" action=\"{{ route('users.store') }}\">\n                    @csrf\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-3 col-form-label text-center\">Nama<\/label>\n                        <div class=\"col-sm-9\">\n                            <input type=\"text\" class=\"form-control\" id=\"nama\" name=\"nama\">\n                        <\/div>\n                    <\/div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-3 col-form-label text-center\">Email<\/label>\n                        <div class=\"col-sm-9\">\n                            <input type=\"email\" class=\"form-control\" id=\"email\" name=\"email\">\n                        <\/div>\n                    <\/div>\n                   <div class=\"form-group row\">\n                        <label class=\"col-sm-3 col-form-label text-center\">Username<\/label>\n                        <div class=\"col-sm-9\">\n                            <input type=\"text\" class=\"form-control\" id=\"username\" name=\"username\">\n                        <\/div>\n                    <\/div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-3 col-form-label text-center\">Password<\/label>\n                        <div class=\"col-sm-9\">\n                            <input type=\"password\" class=\"form-control\" id=\"password\" name=\"password\">\n                        <\/div>\n                    <\/div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-3 col-form-label text-center\">Level<\/label>\n                        <div class=\"col-sm-4 mr-2\">\n                            <select class=\"form-control select2-multiple\" name=\"level[]\" multiple=\"multiple\">\n                                <option value=\"ADMIN\">ADMIN<\/option>\n                                <option value=\"GURU\">GURU<\/option>\n                                <option value=\"STAFF\">STAFF<\/option>\n                            <\/select>\n                        <\/div>\n                    <\/div>\n                    <div class=\"form-group row\">\n                        <label class=\"col-sm-10 text-center\"><\/label>\n                        <div class=\"col-sm-9\">\n                            <button type=\"reset\" class=\"btn btn-warning btn-sm\">Batal<\/button>\n                            <button type=\"submit\" class=\"btn btn-primary btn-sm\">Simpan<\/button>\n                        <\/div>\n                    <\/div>\n                <\/form>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n@endsection<\/code><\/pre>\n\n\n\n
Jika berhasil maka akan menampilkan laman seperti ini<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Selanjutnya, tambahkan kode berikut di UserController pada function store:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Form create user menggunakan method POST yang akan dikirimkan ke action store dengan route users.store, selanjutnya pada action store akan ditangkap isi form create user dengan cara $request->get(\u2018nama input\u2019) kemudian disimpan pada table user dengan cara instance model User dengan cara $user = new \\App\\Models\\User setelah itu assign sesuai dengan nama field. Untuk menyimpan kedalam database User menggunakan perintah $user->save, jika data berhasil disimpan akan di redirect ke route users.index dengan mebawa session status.<\/p>\n\n\n\n
Selanjutnya, kita akan membuat menampilkan data user. Untuk menampilkan data user kita akan menggunakan method GET yaiitu http:\/\/localhost\/users yang mana route ini merupakan action index pada UserController, buka action index kemudian edit menjadi seperti kode program berikut.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Kemudian kita membuat file view bernama index.blade.php pada folder views\/user dengan kode berikut:<\/p>\n\n\n\n
@extends('layouts.main')\n@section(\"judul\") Users @endsection\n@section('konten')\n@if(session('status'))\n    <div class=\"alert alert-success\">\n        {{ session('status') }}\n    <\/div>\n@endif\n\n<div class=\"card shadow mb-4\">\n      <div class=\"card-header py-3\">\n        <p> \n          <a href=\"{{ route('users.create') }}\" class=\"btn btn-primary btn-sm\">Tambah User<\/a> \n        <\/p>     \n      <\/div>\n    <div class=\"card-body\">\n        <div class=\"table-responsive\">\n            <table class=\"table table-bordered\" id=\"dataTable\" width=\"100%\" cellspacing=\"0\">\n                <thead>\n                    <tr>\n                        <th><b>Name<\/b><\/th>\n                        <th><b>Username<\/b><\/th>\n                        <th><b>Email<\/b><\/th>\n                        <th><b>Action<\/b><\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    @foreach($users as $user)\n                        <tr>\n                            <td>{{ $user->name }}<\/td>\n                            <td>{{ $user->username }}<\/td>\n                            <td>{{ $user->email }}<\/td>\n                            <td>\n                                <a href=\"{{ route('users.edit', $user->id) }}\" class=\"btn btn-sm btn-success\">Edit<\/a>\n                                <form\n                                    onsubmit=\"return confirm('Hapus data user ?')\"\n                                    class=\"d-inline\"\n                                    action=\"{{ route('users.destroy', [$user->id]) }}\"\n                                    method=\"POST\">\n                                    @csrf\n                                    <input type=\"hidden\" name=\"_method\" value=\"DELETE\">\n                                    <button type=\"submit\" class=\"btn btn-danger btn-sm\">Hapus<\/button>\n                                <\/form>\n                            <\/td>\n                        <\/tr>\n                    @endforeach\n                <\/tbody>\n            <\/table>\n        <\/div>\n    <\/div>\n<\/div>\n@endsection\n<\/code><\/pre>\n\n\n\n
Karena menggunakan datatables tambahkan file css datatable pada bagian head main.blade.php dan file js datatables pada bagian bawah main.blade.php.<\/p>\n\n\n\n
<link href=\"{{ asset('sbadmin\/vendor\/datatables\/dataTables.bootstrap4.min.css') }}\" rel=\"stylesheet\"> \n<script src=\"{{ asset('sbadmin\/vendor\/datatables\/jquery.dataTables.min.js') }}\"><\/script> \n<script src=\"{{ asset('sbadmin\/vendor\/datatables\/dataTables.bootstrap4.min.js') }}\"><\/script> \n<script src=\"{{ asset('sbadmin\/js\/demo\/datatables-demo.js ') }}\"><\/script> <\/code><\/pre>\n\n\n\n
Selanjutnya menambahkan button untuk membuka form tambah user seperti kode program berikut pada file index.blade.php<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
jika berhasil maka laman akan terlihat seperti ini<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Selanjutnya untuk melakukan proses update data user terlebih dahulu kita buatkan tombol action yang mengarahkan pada route users\/edit\/{user}\/edit atau action edit pada UserController untuk menamilkan form dan menggunakan route users\/edit\/{user} untuk method PUT. Pertama-tama kita akan membuat tombol edit pada tampilan list user, silahkan buka file user\/index.blade.php pada kolom [action] ganti dengan kode berikut ini.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Kode diatas akan mengambil data user berdasarkan id user yang diidapatkan dan ditampung pada variable $user dan dikrimkan ke view user.edit, silahkan buat view didalam folder user\/edit.blade.php dan isikan dengan kode program berikut.<\/p>\n\n\n\n
@extends('layouts.main') \n@section(\"judul\") Edit User @endsection \n@section('konten') \n<div class=\"card shadow mb-4\"> \n    <div class=\"card-header py-3\"> \n    <\/div> \n    <div class=\"card-body\">    \n        <div class=\"row\"> \n            <div class=\"col-lg-9\"> \n                <form method=\"POST\" action=\"{{ route('users.update', [$user->id]) }}\"> \n                    <input type=\"hidden\" name=\"_method\" value=\"PUT\"> \n                  @csrf \n                    <div class=\"form-group row\"> \n                        <label class=\"col-sm-3 col-form-label text-center\">Nama<\/label> \n                        <div class=\"col-sm-9\"> \n                          <input type=\"text\" class=\"form-control\" id=\"nama\" name=\"nama\" value=\"{{ $user->name }}\"> \n                        <\/div> \n                      <\/div> \n                    <div class=\"form-group row\"> \n                      <label class=\"col-sm-3 col-form-label text-center\">Email<\/label> \n                      <div class=\"col-sm-9\"> \n                        <input type=\"email\" class=\"form-control\" id=\"email\" name=\"email\" value=\"{{ $user->email }}\"> \n                      <\/div> \n                    <\/div> \n                    <div class=\"form-group row\"> \n                        <label class=\"col-sm-3 col-form-label text-center\">Username<\/label> \n                        <div class=\"col-sm-9\"> \n                          <input type=\"text\" class=\"form-control\" id=\"username\" name=\"username\" value=\"{{ $user>username}}\" \n                          > \n                        <\/div> \n                      <\/div> \n \n                      <div class=\"form-group row\"> \n                        <label class=\"col-sm-3 col-form-label text-center\">Level<\/label> \n                        <div class=\"col-sm-4 mr-2\"> \n                          <select  class=\"form-control select2-multiple\" name=\"level[]\" multiple=\"multiple\"> \n                            <option value=\"ADMIN\"  {{in_array(\"ADMIN\",  json_decode($user->level)) ? \"selected\" : \"\"}>ADMIN<\/option> \n                            <option value=\"GURU\"  {{in_array(\"GURU\", json_decode($user->level)) ? \"selected\" : \"\"}>GURU<\/option> \n                            <option value=\"STAFF\"  {{in_array(\"STAFF\", json_decode($user->level)) ? \"selected\" : \"\"}>STAFF<\/option> \n                          <\/select> \n                        <\/div> \n                      <\/div> \n                    <div class=\"form-group row\"> \n                      <div class=\"col-sm-10 text-center\"> \n                        <a href=\"{{ route('users.index') }}\"  class=\"btn btn-warning btn-sm\">Batal<\/a> \n                        <button type=\"submit\" class=\"btn btn-primary btn-sm\">Simpan<\/button> \n                      <\/div> \n                    <\/div> \n                  <\/form> \n            <\/div>             \n        <\/div> \n    <\/div> \n<\/div> \n@endsection <\/code><\/pre>\n\n\n\n
Sehingga tampilan form edit user menjadi seperti gambar berikut ini.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Selanjutnya buka action update pada UserController kemudian isikan dengan kode program berikut ini<\/p>\n\n\n\n
public function update(Request $request, $id)\n    {\n        $user = \\App\\Models\\User::findOrFail($id); \n        $user->name = $request->get('nama'); \n        $user->level = json_encode($request->get('level')); \n        $user->save(); \n        return redirect()->route('users.index', [$id])->with('status', 'User berhasil diubah');\n    }<\/code><\/pre>\n\n\n\n
Kemudian kita akan mencoba untuk mengubah nama dari salah satu user yang terdaftar di sistem. Kita akan mencoba nama Vero menjadi Galid. Hasilnya adalah seperti berikut:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Selanjutnya. kita akan membuat tombol delete pada kolom action. Tambahkan tombol atau link pada list user, silahkan buka view user\/index.blade.php dan tambahkan kode program berikut dibawah link edit.<\/p>\n\n\n\n
<form \n    onsubmit=\"return confirm('Hapus Data User?')\" \n    class=\"d-inline\" \n    action=\"{{ route('users.destroy', [$users->id]) }}\" \n    method=\"POST\"\n>\n    @csrf\n    @method('DELETE')\n    \n    <input \n        type=\"submit\" \n        value=\"Hapus\" \n        class=\"btn btn-danger btn-sm\"\n    >\n<\/form>\n<\/code><\/pre>\n\n\n\n
Kemudian buka action destroy pada UserController dan isikan dengan kode program berikut ini.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Tampilan delete akan seperti berikut:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Jika kita klik tombol hapus, akan muncul pop up seperti berikut:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
apabila di OK kan maka akan menampilkan hasil ini<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Terakhir, kita akan menambahkan menu users di sidebar. buka view Layouts\/sidebar.blade.php kemudian tambahkan kode program berikut.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
jika telah selesai semua, maka apabila di run akan menghasilkan tampilan seperti ini<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Muhammad Galid Avero – 2311532008 Laravel AUTH Lanjutan Selanjutnya, kita akan membuat fitur manajemen user dengan menggunakan fungsi CRUD secara keseluruhan. Untuk melakukan ini, buka terminal di code editor dan ketikkan perintah berikut: Lalu tambahkan kode ini di route web lalu kita akan melihat isi dari route kita dengan menggunakan perintah: akan terlihat seperti ini […]<\/p>\n","protected":false},"author":1,"featured_media":1983,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1954","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"rttpg_featured_image_url":{"full":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/06\/Screenshot-181-1.png",1920,1080,false],"landscape":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/06\/Screenshot-181-1.png",1920,1080,false],"portraits":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/06\/Screenshot-181-1.png",1920,1080,false],"thumbnail":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/06\/Screenshot-181-1-150x150.png",150,150,true],"medium":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/06\/Screenshot-181-1-300x169.png",300,169,true],"large":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/06\/Screenshot-181-1-1024x576.png",1024,576,true],"1536x1536":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/06\/Screenshot-181-1-1536x864.png",1536,864,true],"2048x2048":["https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-content\/uploads\/2025\/06\/Screenshot-181-1.png",1920,1080,false]},"rttpg_author":{"display_name":"MGalidA","author_link":"https:\/\/galid.infokand23.my.id\/laprakpweb\/author\/mgalida\/"},"rttpg_comment":0,"rttpg_category":"Blog<\/a>","rttpg_excerpt":"Muhammad Galid Avero – 2311532008 Laravel AUTH Lanjutan Selanjutnya, kita akan membuat fitur manajemen user dengan menggunakan fungsi CRUD secara keseluruhan. Untuk melakukan ini, buka terminal di code editor dan ketikkan perintah berikut: Lalu tambahkan kode ini di route web lalu kita akan melihat isi dari route kita dengan menggunakan perintah: akan terlihat seperti ini…","_links":{"self":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts\/1954","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/comments?post=1954"}],"version-history":[{"count":13,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts\/1954\/revisions"}],"predecessor-version":[{"id":1989,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/posts\/1954\/revisions\/1989"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/media\/1983"}],"wp:attachment":[{"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/media?parent=1954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/categories?post=1954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/galid.infokand23.my.id\/laprakpweb\/wp-json\/wp\/v2\/tags?post=1954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}