TUGAS

MATA KULIAH PEMROGRAMAN WEB LANJUT

Dosen Pembimbing : Gede Aditra Pradnyana,S.Kom.,M.Kom.

Oleh

Ni Komang Winda Damayanti (1815091003/ Sistem Informasi 4A)

Program Studi Sistem Informasi

Jurusan Teknik Informatika

Fakultas Teknik dan Kejuruan

Universitas Pendidikan Ganesha

Tahun 2020
Mata Kuliah : Pemrograman Web Lanjut

SKS : 3 SKS

Dosen Pembimbing : Gede Aditra Pradnyana,S.Kom.,M.Kom.

Tugas

1. Lakukan hal yang sama/buat website yang sama dengan mengikuti langkah-langkah
pada 3 video di atas.
2. Tambahkan fitur untuk melakukan hapus data dosen yang dipilih
3. Tambahkan fitur flash message untuk memberikan notifikasi data berhasil disimpan,
diedit, dihapus atau lainnya
4. Tugas dikumpulkan dalam bentuk makalah (*PDF) yang berisikan coding yang
dibuat, sertai penjelasan source codenya, bagaimana cara membuat, dan proses yang
terjadi saat dijalankan (tambahkan screenshot2 proses membuat dan hasil
eksekusinya).

DOKUMENTASI

1. MIGRATE DATA DOSEN

Langkah pertama yaitu menambahkan sebuah tabel baru pada database dengan
nama “dosen”. Untuk menambahkan tabel tersebut dapat digunakan dengan membuat
file Migrate dengan perintah :

php artisan make:migration create_dosen_table

Perintah tersebut digunakan agar nantinya function dibuat secara otomatis pada
saat proses pembuatan migration. Apabila saat membuat tabel migration tidak
menggunakan perintah php artisan make:migration create_dosen_table (ex. php
artisan make:migration dosen) maka pada file dosen tidak akan terdapat function
yang secara otomatis seharusnya sudah tersedia.
Apabila perintah yang digunakan berhasil maka akan muncul pesan
“2020_06_11_151629_create_dosen_table” seperti gambar berikut.

File migrate yang dikerjakan akan tersimpan pada folder

“app/database/migration”. File migration secara otomatis akan menyediakan dua file
migration bawaan laravel yaitu file user dan password, sedangkan tabel yang dibuat
dengan perintah “migration create_dosen_table” memiliki format nama
“2020_06_11_151629_create_dosen_table”.
 Dapat dilihat pada file migration dosen terdapat dua buah fungsi yaitu function
up() dan function down(). function up() menggunakan class schema dengan fungsi
create, kemudian tabel serta attribute akan dibuat secara otomatis pada fungsi
tersebut. function up() akan dijalankan pada saat kita melakukan migrate. Sementara
pada function down() terdapat fungsi drop yang digunakan untuk menghapus tabel
dosen secara otomatis. function down() akan dijalankan saat kita melakukan Roll
Back.

Selanjutnya kita akan mengecek apakah proses migrate yang dilakukan berhasil
atau tidak. Untuk menjalankan migration dapat menggunakan perintah “php artisan
migrate”
 Pada database secara otomatis akan terdapat beberapa tabel baru, dimana tabel
password diperoleh dari file migration
“2020_06_11_151629_create_password_resets_table”, tabel user diperoleh dari
“2020_06_11_151629_create_user _table”, serta tabel migrations secara otomatis
dibuat oleh laravel dimana tabel tersebut berfungsi untuk mencatat proses migration
yang terjadi.

Setelah berhasil melakukan migrate proses selanjutnya yaitu menambahkan

kolom pada tabel dosen. Dengan proses migrate yang dilakukan pada tabel dosen
terdapat tiga kolom yang secara otomatis telah dibuat oleh laravel yaitu, id,
create_date, dan update_date sehingga kita hanya perlu menambahkan dua kolom
baru yaitu prodi dan nama_dosen yang dibuat pada function up(). Berikut
merupakan perintah yang digunakan untuk menambahkan kolom pada tabel dosen.
 {
Schema::create('dosen', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('nama_dosen', 100);
$table->string('prodi', 100);
$table->timestamps();
});
}

Pada function up() ditambahkan dua syntax yaitu $table->string('nama_dosen',

100); dan $table->string('prodi', 100), dimana $table->string dapat digunakan untuk
membuat kolom yang bertipe data varchar. Angka 100 pada syntax tersebut
menunjukkan Panjang dari tipe data varchar. Serta nama_dosen dan prodi pada
syntax berfungsi untuk memberikan nama pada kolom yang dibuat pada tabel dosen.
Apabila syntax sudah ditambahkan maka jalankan kembali migrate dengan perintah
“php artisan serve migrate” untuk mengecek apakah kolom pada database berhasil
untuk ditambahkan.

Berdasarkan gambar diatas terlihat bahwa proses migrate yang dilakukan telah
berhasil, dimana terdapat penambahan kolom nama_dosen serta prodi pada tabel
dosen. Setelah proses migrate berhasil dibuat, selanjutnya yaitu menambahkan fitur
 CRUD (Create, Update, Delete) menggunakan model dan menambahkan Flash
Message.

2. CRUD DATA MENGGUNAKAN MODEL

1. Membuat Model
Untuk membuat sebuah model, kita dapat menggunakan perintah “php artisan
make:model dosen”. Sebuah model nantinya akan berinteraksi dengan database,
oleh sebab itu akan lebih baik apabila nama model sama dengan nama tabel yang
dituju pada database. Model yang dibuat akan berada pada folder “app” dimana
nama file akan sesuai dengan nama model yang telah dibuat. Apabila model
berhasil untuk dibuat maka akan muncul pesan “Model Created Successfully”.
 Model yang dibuat merupakan extends atau turunan dari class model yang
dimiliki oleh Laravel, sehingga untuk menggunakan model ada beberapa hal yang
sebelumnya harus diatur atau ditambahkan terlebih dahulu. Berikut merupakan
salah satu perintah atau syntax yang ditambahkan pada model.

class dosen extends Model

{
protected $table = 'dosen';
}

Perintah tersebut digunakan untuk memberikan infromasi kepada Model bahwa

tabel yang nantinya akan berinteraksi dengan model adalah tabel dengan nama
dosen. Setelah membuat Model selanjutnya yaitu membuat view, route, dan
controller.

Untuk tahap awal yaitu membuat Controller yang diberi nama dosenCont.
Controller dapat dibuat menggunakan perintah “php artisan make:controller
dosenCont” apabila perintah yang diberikan berhasil membuat controller maka
akan muncul pesan “Controller created successfully” dan secara otomatis akan
terdapat controller baru yang tersimpan pada folder “app/Http/Controller”.
 Setelah berhasil membuat controller selanjutnya yaitu membuat route.
Pembuatan route berfungsi untuk menangani request yang kita lakukan di Url
kemudian mengarahkan request tersebut pada aplikasi untuk memanggil halaman
atau resouce yang diinginkan. untuk membuat route kita bisa membuka file
web.php yang terletak pada folder “routes” dengan menambahkan syntax atau
perintah berikut

Route::get('/datadosen','dosenCont@show');

Pada perintah diatas digunakan method get yang artinya method tersebut
diizinkan untuk menjalankan fungsi pada route dimana nantinya method get akan
mengambil informasi yang dikirimkan. Pada bagian ‘/datadosen’ merupakan
alamat URI yang ingin diakses untuk menjalankan sebuah fungsi pada route,
sehingga untuk mengakses halaman view data dosen, maka user harus
mengakses alamat kebagian ‘/datadosen’. Bagian ‘dosenCont@show’ request
yang diberikan oleh user akan diteruskan kebagian dosenCont dan akan
dieksekusi pada function show.

File controller yang sudah dibuat sebelumnya diberikan perintah seperti

gambar berikut

Tahap selanjutnya yaitu membuat view dengan nama “dosen.blade.php”,

pada laravel view terletak pada folder “resource/view/beranda”. View yang
dibuat merupakan keturunan dari template.blade.php oleh karena itu pada
tampilan tersebut ditambahkan Extends untuk memanggil master template yang
dibuat sebelumnya.
 Proses selanjutnya yaitu memanggil seluruh data dosen yang terdapat pada
databse. Dengan menambahkan perintah pada controller. use App\dosen; yang
diletakkan sebelum class dari controller. Selanjutnya untuk memanggil seluruh
data dosen pada tabel databse digunakan perintah berikut $data_dosen =
dosen::all();

Pada syntax diatas ditambahkan var_dosen yang merupakan variable untuk

mengakses view dosen. Setelah data sudah dikirimkan ke view dosen, selanjutnya
menambahkan perulangan @foreach() untuk menampilkan seluruh data,
perulangan dibuat pada file view dosen, bagian tbody.
 Perintah diatas $var_dosen merupakan variable yang dikirimkan dari
controller dosenCont yang berisikan nilai dari data dosen yang didapatkan dari
tabel dosen pada database. Apabila perintah yang diberikan berhasil untuk
ditambahkan maka tampil halaman sebagai berikut

2. Insert Data Dosen

Selanjutnya kita akan menambahkan insert data, dimana sebelumnya kita

sudah menambahkan link pada tombol Tambah Data Dosen. Link tersebut
digunakan untuk menampilakn view Input Data Dosen. Agar nantinya user dapat
menambahkan data saat menekan tombol Tambah Data Dosen, maka dibuatkan
route terlebih dahulu. Route tersimpan pada file web.php pada folder routes.
Route::get('/inputdosen','dosenCont@showinput');

Route yang dibuat akan dikirimkan ke controller dosenCont. Karena pada

controller data tersebut dikirimkan pada function showInput, maka pada controller
dibuatkan function showInput() yang digunakan untuk menampilkan view
inputDosen. Berikut perintah yang digunakan pada controller

public function showinput(){

return view('inputdosen');
}

Selanjuntnya yaitu membuat view dengan nama “inputdosen.blade.php” yang

didalamnya berisikan form untuk melakukan input data dosen. Berikut
merupakan source code yang digunakan untuk membuat view form Tambah Data
Dosen.
 Pada view “inputdosen.blade.php” menggunakan master template yang
diambil dari template.blade.php. berikut tampilan view inputdosen apabila
source code yang digunakan berhasil.
 Dalam proses menambahkan data, pada form tambah data dosen terdapat
action yang dikirimkan atau dilink ke “/prosestambahdosen”. Agar form tersebut
berhasil untuk melakukan pengiriman data maka perlu dibuatkan routes dengan
syntax sebagai berikut

Route::post('/prosestambahdosen','dosenCont@prosestambahdosen');

Setelah berhasil menambahkan route, langkah selanjutnya yaitu membuat

function prosestambahdosen pada dosenCont. Untuk melakukan insert data pada
databse, dapat digunakan perintah sebagai berikut

public function prosestambahdosen(Request $req){

$dsn = new dosen();

$dsn->nama_dosen = $req["nama_dosen"];
$dsn->prodi = $req["prodi"];
$dsn->save();

return redirect('/datadosen');

}
 Pada controller untuk mengambil data digunakan variable bertipe request ari
form yang berfungsi untuk mengambil semua inputan yang dikirimkan form
Tambah Data Dosen. Pada function kita akan melakukan proses membuat sebuah
object dari sebuah kelas. Object yang dibuat diberi nama $dsn = new dosen yang
bisa mengakses atribut-atribut yang terdapat pada tabel yang diakses dari tabel
dosen. $dsn->nama_dosen = $req["nama_dosen"]; digunakan untuk melakukan
insert data nama_dosen yang didapatkan dari form kemudian tersimpan di tabel
dosen kolom nama_dosen. Sedangkan $dsn->prodi = $req["prodi"];
digunakan untuk melakukan insert data program studi/ prodi. Terakhir yaitu $dsn-
>save(); digunakan untuk menyimpan serta mengakhiri proses yang terjadi.
Berikut merupakan tampilan apabila perintah yang diberikan berhasil untuk
dilakukan
3. Update Data Dosen
Setelah berhasil melakukan migrasi, membuat model serta melakukan insert
data selanjutnya kita akan menambahkan fitur untuk melakukan edit data dosen
yang dapat dugunakan untuk mengubah informasi mengenai data dosen yang
tersimpan pada database. Untuk melakukan update tersebut kita akan
menambahkan tombol baru pada kolom aksi yaitu tombol “edit”.

Berikut merupakan syntax yang dapat digunakan untuk membuat tombol edit

<a href="/editdosen/{{$dsn->id}}"><button type="button" class="btn btn-

warning btn-sm">Edit</button></a>

Pada perintah tersebut ditambahkan $dsn->id yang artinya update data yang
dilakukan pada dosen berdasarkan ID dari dosen tersebut. Agar data yang dihapus
sesuai dengan ID kita dapat memanfaatkan URL seperti syntax tersebut
"/editdosen/{{$dsn->id}}". Data yang dikirimkan akan diterima oleh route dan
diteruskan pada controller.
Apabila syntax tersebut berhasil untuk ditambahkan maka akan muncul tampilan
seperti gambar berikut

Setelah berhasil menambahkan tombol edit pada view dosen.blade.php

selanjutnya kita akan menambahkan route yang menggunakan method get. Route
yang dibuat berfungsi agar nantinya request yang dikirimkan oleh user dapat
diambil dan diteruskan ke controller agar proses edit dapat terjadi. Route
ditambahkan pada file web.php dengan syntax sebagai berikut.

Route::get('/editdosen/{id}','dosenCont@showeditdosen');
Dari perintah tersebut, request yang dikirimkan akan diteruskan ke controller pada
dosenCont pada function showeditdosen(). Setelah menambahkam route
selanjutnya yaitu membuatkan controller dengan function showeditdosen().

}
public function showeditdosen($id){
$data_dosen = dosen::find($id);

return view('editdosen',["var_dosen"=>$data_dosen]);
}

Syntax diatas diartikan dimana function showeditdosen memiliki parameter

berupa id yang dikirimkan melalui routes. $data_dosen = dosen::find($id);
digunakan untuk mengambil data dosen berdasarkan ID. Perintah tersebut disimpan
pada variable $data_dosen yang kemudian dikirimkan ke view editdosen.
Selanjutnya yaitu membuat view baru dengan nama “editdosen.blade.php”.Berikut
source code yang dapat digunakan untuk membuat view editdosen.

Tampilan view edit apabila source code yang digunakan berhasil

Selanjutnya untuk melakukan edit data tentunya kita harus mengetahui secara
spesifik mengenai data yang akan diedit misalkan yaitu mengirimkan ID melalui
URL atau input hidden. Pada form yang dibuat proses pengubahan data baik yang
sudah maupun yang belum dirubah oleh user akan dikirimkan ke link
“/proseseditdosen” yang menggunakan method POST. Data yang dikirim
nantinya akan ditangkap oleh route dan kemudian dikirimkan ke controller.
Berikut merupakan syntax untuk mengirimkan proses edit melalui URL

<form action="{{ url('/proseseditdosen/'.$var_dosen->id)}}" method="POST"

class="needs-validation" novalidate>

Setelah itu membuat route agar data yang dikirimkan dapat ditangkap dan
diperoses. Perintah yang dapat digunakan yaitu sebagai berikut.

Route::post('/proseseditdosen/{id}','dosenCont@proseseditdosen');
Berdasarkan route yang dibuat, data yang ditangkap dan diproses akan
dikirimkan ke function proseseditdosen yang terdapat pada dataCont. Proses edit
data akan diproses berdasarkan id yang dimiliki oleh data dosen yang akan diedit.
Berikut merupakan syntax yang dapat digunakan untuk membuat controller.

public function proseseditdosen($id,Request $req){

$data_dosen = dosen::find($id);

$data_dosen->nama_dosen = $req["nama_dosen"];
$data_dosen->prodi = $req["prodi"];
$data_dosen->save();

return redirect('datadosen');
 $data_dosen = dosen::find($id); syntax tersebut digunakan untuk melakukan
pencarian id dosen berdasarkan data yang dikirimkan sebelumnya. $data_dosen-
>nama_dosen = $req["nama_dosen"]; dan $data_dosen->prodi =
$req["prodi"]; digunakan untuk melakukan update. Sedangkan $data_dosen-
>save(); digunakan untuk menyimpan data yang telah diproses. Berikut
merupakan tampilan apabila source code yang digunakan berhasil. (ex. Merubah
nama Zeyn menjadi Zeyn Malik).

4. Delete Data Dosen

Untuk melakukan delete data dosen yang sebelumnya telah diinputkan,
langkah pertama yaitu membuat tombol delete yang nantinya digunakan untuk
mengirim id data dosen yang akan dihapus. Berikut syntax yang digunakan untuk
melakukan proses delete.

<a href="/hapusdosen/{{$dsn->id}}"><button type="button" class="btn btn-

danger btn-sm">Delete</button></a>

Sama halnya dengan tombol edit, saat user menekan tombol edit maka user proses
tersebut akan diarahkan ke link /hapusdosen berdasarkan id dari data yang akan
dihapus. Berikut merupakan tampilan view dosen apabila syntax berhasil untuk
ditambahkan.

Apabila botton delete sudah berhasil untuk dibuat, selanjutnya yaitu membuat
controller yang digunakan untuk menerima request dari user yang ingin
melakukan delete data. Method yang digunakan pada route hapus data yaitu
method get. Berikut merupakan syntax yang dapat ditambahkan untuk melakukan
proses hapus data.

Route::get('/hapusdosen/{id}','dosenCont@showhapusdosen');

Setelah membuat route selanjutnya membuat controller dengan function

showhapusdosen() pada Controller dosenCont. Function yang dibuat berfungsi
untuk melakukan pencarian data berdasarkan ID yang dikirimkan, kemudian
melakukan proses hapus data. Berikut merupakan syntax yang digunakan untuk
membuat controller
public function showhapusdosen($id){
$hapus = dosen::find($id);
$hapus->delete();

session()->flash('berhasil', 'Data Anda Berhasil DIhapus!!');

return redirect('datadosen');
}

Function showhapusdosen memiliki parameter yang artinya proses

penghapusan yang dilakukan berdasarkan ID yang dikirimkan. Syntax $hapus =
dosen::find($id); tersebut digunakan untuk melakukan pencarian id dosen yang
akan dihapus berdasarkan data yang dikirimkan sebelumnya.

$hapus->delete(); syntax yang digunakan untuk menghapus data yang

diinginkan.

session()->flash('berhasil', 'Data Anda Berhasil Dihapus!!');

Perintah session()-> digunakan untuk memberikan pesan kepada laravel
bahwa session yang dibuat yaitu session flash. Session flas diinisialisasikan
dengan nama ‘berhasil’ dimana nama tersebut harus sama dengan pengkondisian
yang dibuat pada view datadosen.blade.php. Apabila data berhasil dihapuskan
maka user akan di redirect kehalaman data dosen. Berikut tampilan apabila proses
hapus data berhasil untuk dilakukan. (ex. Nama dosen Ayu Saraswati dihapus)
 Berdasarkan gambar tersebut proses hapus data berhasil untuk dilakukan,
selanjutnya yaitu menambahkan Flash Message yang berguna untuk
menampilkan pesan saat kita berhasil untuk melakukan proses hapus data. Berikut
merupakan syntax yang dapat digunakan untuk menambahkan Flash Message

@if(Session::has('berhasil'))
<div class="alert alert-info" role="alert">
<button type="button" class="close" data-dismiss="alert" arial-
label="Close">
<span aria-hidden="true">X</span></button>
<strong> Berhasil </strong>
{{ Session::get('berhasil') }}
 </div>
@endif

Pada perintah diatas dilakukan pengkendisian terhadap session, dimana saat

terdapat session dengan nama berhasil, maka akan muncul pesan alert yang
menampilkan informasi sesuai dengan proses yang dilakukan. Berikut beberapa
perintah yang dapat digunakan pada controller untuk menambahkan Flash
Message.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\dosen;
class dosenCont extends Controller
{
public function show() {
$data_dosen = dosen::all();

return view('dosen',["var_dosen" => $data_dosen]);

}

public function showinput(){

return view('inputdosen');
}

public function prosestambahdosen(Request $req){

$dsn = new dosen();

$dsn->nama_dosen = $req["nama_dosen"];
$dsn->prodi = $req["prodi"];
$dsn->save();
 session()->flash('berhasil', 'Data Anda Berhasil Diinput!!');
return redirect('/datadosen');

}
public function showeditdosen($id){
$data_dosen = dosen::find($id);

return view('editdosen',["var_dosen"=>$data_dosen]);
}
public function proseseditdosen($id,Request $req){
$data_dosen = dosen::find($id);

$data_dosen->nama_dosen = $req["nama_dosen"];
$data_dosen->prodi = $req["prodi"];
$data_dosen->save();

session()->flash('berhasil', 'Data Anda Berhasil Diubah!!');

return redirect('datadosen');
}
public function showhapusdosen($id){
$hapus = dosen::find($id);
$hapus->delete();

session()->flash('berhasil', 'Data Anda Berhasil Dihapus!!');

return redirect('datadosen');
}
}

Apabila source code yang digunakan sudah berhasil maka akan muncul tampilan
sebagai berikut
Input Data Dosen

Edit Data Dosen

Hapus Data Dosen