Bab9 - 195150207111041 - Moch Daffa Zakwan

LATIHAN PRAKTIKUM PEMROGRAMAN WEB
BAB : Framework Laravel (2)

NAMA : MOCH DAFFA ZAKWAN
NIM : 195150207111041
ASISTEN : 1. IRVAN RIZKI NUGRAHA
2. RAHMANDHANI LUCKY ADIATMA
TGL PRAKTIKUM : 27 APRIL 2021
LATIHAN 1
A. Soal
1. Buatlah sebuah proyek baru Laravel dengan perintah sbb:
1 laravel new praktikumLaravel2
2. Pada folder resources/views, buatlah direktori baru dengan nama praktikum2.

Kemudian pada direktori tersebut buatlah sebuah file Blade dengan nama
index.blade.php dan isi dengan kode sbb:
1 <!doctype html>
2 <html>
3 <head>
4 <title>Praktikum Laravel Ke-2</title>
5 </head>
6 <body>
7 <h1>Praktikum Laravel Ke-2</h1>
8 </body>
9 </html>
3. Pada file web.php dalam folder routes, tambahkan rute sbb:

1 Route::get('/praktikum-laravel', function () {
2 return view('praktikum2.index');
3 });
4. Apakah URL untuk mengakses halaman tersebut?

5. Mengapa pada method view menggunakan parameter 'praktikum2.index'?
6. Jalankan halaman tersebut, tempelkan screenshot-nya pada tempat yang telah
disediakan di bawah ini.
B. Screenshoot
C. Syntax
Index.blade.php
1. <!doctype html>
2 <html>
3. <head>
4. <title>Praktikum Laravel ke-2</title>
5. </head>
6. <body>
7. <h1>Praktikum Laravel ke-2</h1>
8. </body>
9. </html>
web.php
1. Route::get('/praktikum-laravel',function() {
2 return view('praktikum2.index');
3. });
D. Penjelasan
4.Pada bagian siytax web.php terlihat router “/praktikum-laravel” sehingga untuk
mengakses halaman tersebut menggunakan URL http://127.0.0.7::8000/praktikum-
laravel.
5. Method view menggunakan parameter 'praktikum2.index' karena pada view tersebut
terdapat direktori praktikum2 yang berisikan file 'index.blade.php'.
6. tampilan URL dapat dilihat pada sreenshoot diatas.
LATIHAN 2
A. Soal
1. Ubahlah isi file index.blade.php menjadi sbb:
1 <!doctype html>
2 <html>
3 <head>
4 <title>Praktikum Laravel Ke-2</title>
5 </head>
6 <body>
7 <ul>
8 <li>Ini adalah urutan ke-1</li>
13 </ul>
14 </body>
</html>
2. Kemudian ubahlah lagi menggunakan loop dengan sintaks Blade. Tempelkan
kode yang saudara buat pada tempat yang telah disediakan di bawah ini:
B. Sreenshoot
C. Sytax
1. <!doctype html>
2 <html>
3. <head>
4. <title>Praktikum Laravel Ke-2</title>
5. </head>
6. <body>
7. <ul>
8. <?php
9. $i = 1;
10. while($i <=5) {
11. echo "<li>Ini adalah urutan ke-$i</li>";
12. $i++;
13. }
14. ?>
15. </ul>
16. </body>
17. </html>
D. Penjelasan
Pada sytax diatas saya mengubah list tersebut menggunakan luping while dengan batas
list 5.
LATIHAN 3
A. Soal
1. Buatlah sebuah controller baru dengan perintah sbb:
1 php artisan make:controller EventsController
2. Buka file controller yang baru saja di-generate pada folder app\Http\Controllers
dan tambahkan sebuah method pada class controller tersebut seperti kode berikut:
1 public function show($location, $name)
2 {
3 return view('events.show')
4 ->with('location', $location)
5 ->with('name', $name);
6 }
3. Tambahkan rute berikut:
1 Route::get('events/{location}/{name}', [App\Http\Controllers\EventsController::class,
2 'show']);
4. Apakah nama file view (Blade) yang harus dibuat?
5. Pada direktori apakah file view tersebut harus diletakkan?
6. Tuliskan sebuah contoh URL untuk mengakses halaman tersebut.
7. Buatlah file view (Blade) tersebut sehingga dapat menampilkan nilai variabel
location dan name. Tempel kode yang dihasilkan pada tempat yang telah
disediakan di bawah ini:
B. Sreenshoot
C. Syntax
EventsController.php
1. <?php
2
3. namespace App\Http\Controllers;
4.
5. use Illuminate\Http\Request;
6.
7. class EventsController extends Controller
8. {
9. //
10. public function show($location, $name)
11. {
12. return view('events.show')
13. ->with('location', $location)
14. ->with('name', $name);
15. }
web.php
1. <?php
2
3. Route::get('/', function () {
4. return view('welcome');
5. });
6.
7. Route::get('/praktikum-laravel', function () {
8. return view('praktikum2.index');
9. });
10. Route::get('events/{location}/{name}',
[App\Http\Controllers\EventsController::class, 'show']);
show.blade.php
1. <h1>{{$location}}</h1>
2 <h1>{{$name}}</h1>
D. Penjelasan
4.nama file view(blade) yang harus dibuat adalah show.blade.php.
5.file view tersebut harus diletakkan pada direktori events.
6.URL untuk mengakses halaman tersebut adalah
http://127.0.0.7::8000/events/malang/rumah.
7. isi dari file show.blade.php adalah inputan pada URL setelah “/events”,/pertama
adalah location,/kedua untuk Namanya.
LATIHAN 4
A. Soal
1. Jalankan MySQL dan buatlah database baru dengan nama “praktikumlaravel2”. (Bila
saudara menggunakan XAMPP, jalankan Apache dan MySQL kemudian klik tombol
Admin pada baris MySQL untuk membuka aplikasi phpMyAdmin. Melalui
phpMyAdmin, saudara bisa membuat database baru tersebut).
2. Pada file .env yang berada pada direktori root proyek Laravel, ubahlah nama database
MySQL sesuai nama yang tadi telah dibuat (jika namanya berbeda). Bila diperlukan,
atur pula username, password atau konfigurasi lainnya untuk mengakses MySQL.
3. Buatlah model dengan menjalankan perintah sbb:
1 php artisan make:model Event --migration
4. Buka file migration yang di-generate oleh Artisan pada direktori

“/database/migration” pilih file yang sesuai dengan model yang baru saja dibuat
(nama file berakhiran ...._create_events_table). Kemudian ubah method up() menjadi
sbb:
1 public function up()
2 {
3 Schema::create('events', function (Blueprint $table) {
4 $table->increments('id');
5 $table->string('location');
6 $table->string('name');
7 });
8 }
5. Lakukan migrasi dengan menjalankan perintah sbb:

1 php artisan migrate
6. Buka halaman tersebut pada web browser dan tempelkan screenshot-nya pada tempat
yang disediakan di bawah ini:
7. Isi tabel events dengan data sebagai berikut (Saudara bisa menggunakan aplikasi
phpMyAdmin atau sejenisnya):
id location name
1 Malang Kerja Bakti
2 Banjarmasin Lomba Melukis
3 Medan Rapat Tahunan
8. Pada class EventsController, tambahkan method index() sbb:

9.
1 public function index()
2 {
3 $events = Event::all();
4 return view('events.index')->with('events', $events);
5 }
10. Pada kode EventsController.php, tambahkan pula pernyataan untuk import sbb:
1 use App\Models\Event;
11. Kemudian buatlah view dengan lokasi dan nama sesuai pada method index() di atas,
isi dengan kode sbb:
1 <!doctype html>
2 <html>
3 <head>
4 <title>Events - Praktikum Laravel Ke-2</title>
5 </head>
6 <body>
7 <h1>Events</h1>
8 <ul>
9 @forelse($events as $event)
10 <li>{{ $event->location }} - {{ $event->name }}</li>
11 @empty
12 <li>Belum ada event.</li>
13 @endforelse
14 </ul>
15 </body>
16 </html>
1 Route::get('events', [App\Http\Controllers\EventsController::class, 'index']);
13. Buka halaman tersebut pada web browser dan tempelkan screenshot-nya pada tempat
yang disediakan di bawah ini:
B. Sreenshoot
C. Syntax
2021_05_03_052030_create_events_table.php
1. <?php
2
3. use Illuminate\Database\Migrations\Migration;
4. use Illuminate\Database\Schema\Blueprint;
5. use Illuminate\Support\Facades\Schema;
6.
7. class CreateEventsTable extends Migration
8. {
9. /**
10. * Run the migrations.
11. *
12. * @return void
13. */
14. public function up()
15. {
16. Schema::create('events', function (Blueprint $table) {
17. $table->increments('id');
18. $table->string('location');
19. $table->string('name');
20. });
21. }
22.
23. /**
24. * Reverse the migrations.
25. *
26. * @return void
27. */
28. public function down()
29. {
30. Schema::dropIfExists('events');
31. }
32. }
1. <?php
2
4.
6. use App\Models\Event;
7.
9. {
10. //
12. {
16. }
17.
18. public function index()
19. {
20. $events = Event::all();
21. return view('events.index')->with('events', $events);
22. }
index.blade.php
1. <!doctype html>
2 <html>
3. <head>
4. <title>Events - Praktikum Laravel Ke-2</title>
5. </head>
6. <body>
7. <h1>Events</h1>
8. <ul>
9. @forelse($events as $event)
10. <li>{{ $event->location }} - {{ $event->name }}</li>
11. @empty
12. <li>Belum ada event.</li>
13. @endforelse
14. </ul>
15. </body>
16. </html>
web.php
1. <?php
2
3. use Illuminate\Support\Facades\Route;
4.
7. });
8.
11. });
12.
14.
15. Route::get('events', [App\Http\Controllers\EventsController::class, 'index']);
D. Penjelasan
6. Pada gambar diatas adalah bukti cmd
12. pada tampilan web dengan URL http://127.0.0.7::8000/events . Pada Syntax diatas
yang bernama 2021_05_03_052030_create_events_table.php digunakan untuk
melakukan inisasi pada tabel di database.
LATIHAN 5
A. Soal
1 Route::get('events/validate',[App\Http\Controllers\EventsController::class,
2 'showValidateForm'])->name('validateform.event');
3
4 Route::post('events/validate',[App\Http\Controllers\EventsController::class,
5 'validateForm'])->name('validate.event');
2. Pada folder view, buatlah file baru bernama “flash-message.blade.php”, kemudian isi
dengan kode sbb:
1 @if ($message = Session::get('success'))
2 <strong>{{ $message }}</strong>
3 @endif
4
5 @if ($errors->any())
6 <strong>Data tidak valid</strong>
7 @endif
3. Pada class EventsController, tambahkan dua method sebagai berikut:

1 public function showValidateForm()
2 {
3 return view('events.validate');
4 }
5
6 public function validateForm(Request $request)
7 {
8 $request->validate([
9 'location' => 'required|alpha|min:3|max:50',
10 'name' => 'required|string|min:3|max:50'
11 ]);
12
13 return back()->with('success','Data valid');
14 }
4. Jelaskan validasi apa saja yang dilakukan pada data location dan name.
5. Sesuai isi method showValidateForm yang baru saja ditambahkan, buatlah file Blade
dengan isi sbb:
1 <!doctype html>
2 <html>
3 <head>
4 <title>Event Validation</title>
5 </head>
6 <body>
7 @include('flash-message')
8 <form action="{{ route('validate.event') }}" method="post">
9 @csrf
10 Location: <input type="text" name="location"><br>
11 Name: <input type="text" name="name"><br>
12 <input type="submit" value="Validate">
13 </form>
14 </body>
15 </html>
6. Pada formulir di atas, apakah fungsi @csrf? Apa yang terjadi jika baris tersebut (@csrf)
dihapus?
7. Jalankan aplikasi, tempelkan tiga buah screenshot, yaitu: screenshot formulir validasi,
screenshot ketika data tidak valid, dan screenshot ketika data valid.
B. Sreenshoot
C. Syntax
web.php
1. <?php
2
4.
7. });
8.
11. });
12.
14.
16.
17. Route::get('events/validate',[App\Http\Controllers\EventsController::class,
'showValidateForm'])->name('validateform.event');
18.
19. Route::post('events/validate',[App\Http\Controllers\EventsController::class,
'validateForm'])->name('validate.event');
flash-message.blade.php
1. @if ($message = Session::get('success'))
2 <strong>{{ $message }}</strong>
3. @endif
4.
5. @if ($errors->any())
6. <strong>Data tidak valid</strong>
7. @endif
1. <?php
2
4.
6. use App\Models\Event;
7.
9. {
10. //
12. {
16. }
17.
18. public function index()
19. {
20. $events = Event::all();
21. return view('events.index')->with('events', $events);
22. }
23.
24. public function showValidateForm()
25. {
26. return view('events.validate');
27. }
28.
29. public function validateForm(Request $request)
30. {
31. $request->validate([
32. 'location' => 'required|alpha|min:3|max:50',
33. 'name' => 'required|string|min:3|max:50'
34. ]);
35.
36. return back()->with('success','Data valid');
37. }
38. }
validate.blade.php
1. <!doctype html>
2 <html>
3. <head>
4. <title>Event Validation</title>
5. </head>
6. <body>
7. @include('flash-message')
8. <form action="{{ route('validate.event') }}" method="post">
9. @csrf
10. Location: <input type="text" name="location"><br>
11. Name: <input type="text" name="name"><br>
12. <input type="submit" value="Validate">
13. </form>
14. </body>
15. </html>
D. Penjelasan
4. validasi yang dilakukan adalah pada location adalah required, alpa, min:3, max:50.
Sedangkan validasi pada name adalah required,alpa,min:3,max:50.
6. Fungsi dari @csrf pada formular di atas adalah sebagai pelindung sebuah serangan
yang dilakukan oleh pengguna yang tidak terautentikasi untuk mengakses formulir
yang ada pada halaman web tersebut. Jika baris @crsf dihapus maka yang terjadi adalah
akan muncul pemberitahuan bahwa page expired padat dilihat pada gambar pertama.
7.Gambar pada halama valida adalah gambar 2,3,4.
LATIHAN 6
A. Soal
1. Pastikan MySQL Server dalam keadaan berjalan.
2. Buatlah salinan file rute (web.php) untuk mengantisipasi hilangnya rute-rute yang
telah didefinisikan sebelumnya.
3. Buka CMD/Terminal dan jalankan perintah-perintah berikut secara berurutan

pada project root directory:
1 composer require laravel/breeze –-dev
2 php artisan breeze:install
3 npm install
4 npm run dev
5 php artisan migrate
4. Buka file web.php pada folder routes, periksa apakah rute-rute yang sebelumnya
dibuat telah hilang atau masih ada. Bila hilang, maka tambahkan kembali rute-
rute yang hilang tersebut.
5. Jalankan aplikasi, lakukan registrasi pengguna baru melalui path /register.
6. Tempelkan screenshot halaman Dashboard yang tampil setelah proses registrasi
berhasil.
7. Lakukan proses logout melalui menu yang ada pada halaman Dashboard tersebut.
8. Selanjutnya kita akan melindungi halaman validasi yang sebelumnya telah kita buat
(validateform.event dan validate.event) sehingga hanya bisa diakses oleh
pengguna yang sedang logged in. Sisipkan kode yang bertanda khusus berikut ini pada
rute:
1 Route::get('events/validate',[App\Http\Controllers\EventsController::class,
2 'showValidateForm'])->middleware(['auth'])->name('validateform.event');
3 Route::post('events/validate',[App\Http\Controllers\EventsController::class, 'validateForm'])-
4 >middleware(['auth'])->name('validate.event');
9. Dalam posisi tidak logged in, akses halaman formulir validasi. Apa yang terjadi?
B. Sreenshoot
C. Syntax
web.php
1. <?php
2
4.
5. /*
6. |--------------------------------------------------------------------------
7. | Web Routes
8. |--------------------------------------------------------------------------
9. |
10. | Here is where you can register web routes for your application. These
11. | routes are loaded by the RouteServiceProvider within a group which
12. | contains the "web" middleware group. Now create something great!
13. |
14. */
15.
18. });
19.
20. Route::get('/dashboard', function () {
21. return view('dashboard');
22. })->middleware(['auth'])->name('dashboard');
23.
24. require __DIR__.'/auth.php';
25.
28. });
30.
32.
'showValidateForm'])->name('validateform.event');
34.
'validateForm'])->name('validate.event');
36.
'showValidateForm'])->middleware(['auth'])->name('validateform.event');
'validateForm'])->middleware(['auth'])->name('validate.event');
D. Penjelasan
Pada no 3 merupakan proses pembuatan projek yang kita gunakan menggunakan breeze
dalam halaman login dan dashboard.
Pada no 6 gambar pertama merupakan hasil dari inputan pada no5 yang berguna untuk
melakukan register.
Pada no 9 gambar ketiga adalah hasil setelah kita logout kemudian kita ingin mengakses
pada halaman validasi sistem akan menampilkan halaman login. Kemudian apabilla
kita telah login dan ke halaman validasi kemudian kita refrest maka sistem tetap
menampilkan halaman validasi.

Bab9 - 195150207111041 - Moch Daffa Zakwan

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Bab9 - 195150207111041 - Moch Daffa Zakwan

Diunggah oleh

Hak Cipta:

Format Tersedia

LATIHAN PRAKTIKUM PEMROGRAMAN WEB

BAB : Framework Laravel (2)

2. Pada folder resources/views, buatlah direktori baru dengan nama praktikum2.

3. Pada file web.php dalam folder routes, tambahkan rute sbb:

4. Apakah URL untuk mengakses halaman tersebut?

4. Buka file migration yang di-generate oleh Artisan pada direktori

5. Lakukan migrasi dengan menjalankan perintah sbb:

1 Malang Kerja Bakti

2 Banjarmasin Lomba Melukis

3 Medan Rapat Tahunan

8. Pada class EventsController, tambahkan method index() sbb:

3. Pada class EventsController, tambahkan dua method sebagai berikut:

3. Buka CMD/Terminal dan jalankan perintah-perintah berikut secara berurutan

Anda mungkin juga menyukai