0% found this document useful (0 votes)

6 views11 pages

Laprak Modul 11

The document outlines the development of a web application using Laravel, detailing steps such as generating a Laravel project, installing Bootstrap, and implementing various routing practices. It includes code snippets for creating routes, views, and controllers, as well as instructions for using Vite for asset management. Additionally, it provides a challenge section for troubleshooting and a task to create a specific web page with a route for it.

Uploaded by

Ahmadnunu

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

6 views11 pages

Laprak Modul 11

Uploaded by

Ahmadnunu

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 11

PENGEMBANGAN APLIKASI WEBSITE

LEMBAR KERJA MAHASISWA

Modul 11

oleh:
Ahmad Nunu Gustama (IS-06-02 – 1204230051)

PROGRAM STUDI SISTEM

INFORMASI FAKULTAS REKAYASA
INDUSTRI TELKOM UNIVERSITY

SURABAYA
2024
 Generate Laravel Project dan Laravel UI
Buat project baru Via composer

Masuk ke terminal project laravel yang dibuat lalu install laravel pacakage

Generate scaffolding untuk project laravel berbasis css framwork boostrap

Untuk scafolding boostrap

Jalankan script dibawah untuk menjalankan server laravel di browser

 Bunding Asset dengan vite

Download dan install NodeJs terbaru

Periksa hasil instalasi

Install semua dependencies yang dibutuhkan

Terapkan Fitur Refreshing on Save pada vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({

plugins: [
laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
],
});
Terapkan fitur “Processing Static Assets With Vite” dengan buka file /resources/js/app.js
import "./bootstrap";
import.meta.glob(["../images/**"]);
Buat folder pada /resources dengan nama images

Buka file View bernama welcome.blade.php. Hapus seluruh kode program yang ada.
Kemudian, letakkan dan arahkan file css dan javascript yang telah didefinisikan di bawah
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title> @vite('resources/sass/app.scss')
</head>

<body>
<div class="container m-5"> {{-- Contoh cara mereferensikan gambar di
dalam file blade dengan menggunakan pendekatan
Vite --}} <img class="img-thumbnail" src="{{
Vite::asset('resources/images/main.svg') }}" alt="image"> </div>
@vite('resources/js/app.js')
</body>

</html>
Jalankan Vite

Pastikan vite connected di console

 Install Bootstrap dan Bootstrap Icons Terbaru pada Project Laravel

Jalankan berikut untuk menginstal boostrap

buka file resources\sass\app.scss dan tambahkan

Hapus atau Comment kode import Font & import Variables

// Fonts
//@import url('https://fonts.bunny.net/css?family=Nunito');

// Variables
//@import 'variables';

// Bootstrap
@import "bootstrap/scss/bootstrap";
@import "bootstrap-icons/font/bootstrap-icons.css";
 Praktik Laravel Routing
Buka file routes/web.php dan tambahkan kode berikut
Route::get('/routing', function () {
return view('routing'); });
Buat file di recourses/views/ dengan nama routing.blade.php
<!DOCTYPE html>
<html lang="en">

<body>
<div class="container m-5">
<h1>Belajar Laravel Routing</h1>
<div class="list-group list-group-numbered mt-4"> {{-- Kode anda
selanjutnya letakkan di sini --}} </div> {{--
Khusus kode program untuk Route Groups di sini --}}
</div> @vite('resources/js/app.js')
</body>

</html>

 Praktik Basic Routing

Buka file routes/web.php
Route::get('/basic_routing', function () {
return 'Hello World'; });
Buka file routing.blade.php
<a href="{{ url('/basic_routing') }}" class="list-group-item list-group-item-
action"> Basic Routing (No View, No
Controller) </a>

 Praktik View Route

Buka file routes/web.php
Route::view('/view_route', 'view_route');
Route::view('/view_route', 'view_route', ['name' => 'Purnama']);
Buka file view.blade.php
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>View Route</title> @vite('resources/sass/app.scss')
</head>
<body>
<div class="container m-5">
<h1>This is from View Route</h1>
<p>Hello, My name is {{ $name }}</p>
</div> @vite('resources/js/app.js')
</body>

</html>

Buka file routing.blade.php

<a href="{{ url('/view_route') }}" class="list-group-item list-group-item-
action"> View Route </a>

 Praktik Controller Route

Generate file controller

php artisan make:controller RouteController

Tambahakn index di route controller

public function index()
{
return "This is from Controller";
}
Buka file routes/web.php
Route::get('/controller_route', [RouteController::class, 'index']);
Pastikan Routecontroller ter import
use App\Http\Controllers\RouteController;
use Illuminate\Support\Facades\Route;
Buka file routing.blade.php
<a href="{{ url('/controller_route') }}" class="list-group-item list-group-
item-action"> Controller Route </a>

 Praktik Redirect Route

Buka routes/web/php
Route::redirect('/', '/routing');
Buka file routing.blade.php
<a href="{{ url('/') }}" class="list-group-item list-group-item-action">
Redirect Route </a>

 Praktik Route Parameter (Required Parameter)

Buka file routes/web.php
Route::get('/user/{id}', function ($id) {
return "User Id: " . $id; });
Route::get('/posts/{post}/comments/{comment}', function ($postId, $commentId)
{
return "Post Id: " . $postId . ", Comment Id: " . $commentId; });
Buka file routing.blade.php
<a href="{{ url('/user/12345') }}" class="list-group-item list-group-item-
action"> Route Parameter (Required Parameter)
- 1 </a> <a href="{{ url('/posts/01/comments/20') }}" class="list-group-
item list-
group-item-action"> Route Parameter (Required Parameter) - 2 </a>

 Praktik Route Parameter (Optional Parameter)

Buka file routes/web.php
Route::get('username/{name?}', function ($name = null) {
return 'Username: ' . $name; });
Buka file routing.blade.php
<a href="{{ url('/username') }}" class="list-group-item list-group-item-
action"> Route Parameter (Optional Parameter)
</a>

 Praktik Route With Regular Expression Constraints

Buka file ruotes/web.php
Route::get('/title/{title}', function ($title) {
return "Title: " . $title; })->where('title', '[A-Za-z]+');
Buka File routing.blade.php
<a href="{{ url('/title/this-is-my-title') }}" class="list-group-item list-
group-item-action"> Route With Regular
Expression Constraints </a>

 Praktik Named Route

Routes/web.php
Route::get('/profile/{profileId}', [RouteController::class, 'profile'])-
>name('profileRouteName');

Buka file routecontroller

public function profile($profileId) { return "This is Profile from Controller,
profile id: ".$profileId; }
Buka File routing.blade.php
<a href="{{ route('profileRouteName', ['profileId' => '123']) }}" class="list-
group-item list-group-item-action"> Named
Route </a>

 Praktik Route Priority

Buka file routes/web.php
Route::get('/route_priority/{rpId}', function ($rpId) {
return "This is Route One"; });
Route::get('/route_priority/user', function () {
return "This is Route 1"; });
Route::get('/route_priority/user', function () {
return "This is Route 2"; });

Comment Route yang pertama di atas, seperti kode program di bawah ini
//Route::get('/route_priority/{rpId}', function ($rpId) {
// return "This is Route One";
//});
Route::get('/route_priority/user', function () {
return "This is Route 1";
});
Route::get('/route_priority/user', function () {
return "This is Route 2";
});
Buka routing.blade.php
<a href="{{ url('/route_priority/user') }}" class="list-group-item list-group-
item-action"> Route

 Praktik Fallback Routes

Buka routes/web.php
Route::fallback(function () {
return 'This is Fallback Route'; });
Buka file routing.blade.php
<a href="{{ url('/asdqwezxc') }}" class="list-group-item list-group-item-
action"> Fallback Routes </a>

 Praktik Route Groups (Route Prefixes & Route Name Prefixes)

Buka file routes/web.php
Route::prefix('admin')->name('admin.')->group(function () {
Route::get('/dashboard', function () {
return "This is admin dashboard"; })->name('dashboard');
Route::get('/users', function () {
return "This is user data on admin page"; })->name('users');
Route::get('/items', function () {
return "This is item data on admin page"; })->name('items'); });
Buka file routing.web.php
<h6 class="mt-4">Route Groups (Route Prefixes & Route Name Prefixes)</h6>
<div class="list-group list-group-numbered mt-4"> <a href="{{
route('admin.dashboard') }}"
class="list-group-item list-group-item-action"> Admin Dashboard </a>
<a href="{{ route('admin.users') }}"
class="list-group-item list-group-item-action"> Admin Users </a> <a
href="{{ route('admin.items') }}"
class="list-group-item list-group-item-action"> Admin Items </a>
</div>

 Praktik View Route List

Ketikan di cmd : php artisan route:list
 Praktik Route Caching

Ketikkan pada cmd / terminal script artisan berikut ini untuk menerapkan Route
Caching: php artisan route:cache

Ketikkan pada cmd / terminal script artisan berikut ini untuk menghapus Route
Cache: php artisan route:clear
 Challenge
Jika anda test di browser akan muncul halaman warning 404 Not Found. Analisa dan
jelaskan kenapa terjadi demikian!
Alasan utama jika terjadi 404 Not Found :
URL salah, URL yang dimasukan mungkin memiliki kesalahan ketikan, Alamat website
atau path yang dituju tidak benar, Pengaturan routing server tidak tepat, Kesalahan
dalam struktur direktori website.

Test pada browser dengan mengetikkan localhost:8000/route_priority/user. Analisa

prioritas route yang terjadi sebelum dan sesudah comment Route yang pertama di atas!

 Hasil

 Tugas

Buat file nuba.blade.php

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nuba Interior</title>

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
.hero {
position: relative;
height: 600px;
overflow: hidden;
color: white;
}

.hero img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}

.hero .hero-content {
position: relative;
z-index: 2;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>

<body>

<section class="hero">
<img src="{{ Vite::asset('resources/images/hero.jpg') }}" alt="Hero">
<div class="hero-content">
<h1 class="display-4 fw-bold">Nuba Interior</h1>
<p class="lead">Transform Your Space with Elegance and Style</p>
</div>
</section>

<section class="py-5">
<div class="container text-center">
<h2 class="fw-bold">About Us</h2>
<p class="mt-3">At Nuba Interior, we specialize in creating
personalized and functional interior designs
that
match your taste and lifestyle.</p>
</div>
</section>

<section class="gallery py-5 bg-light">
<div class="container">
<h2 class="fw-bold text-center mb-4">Our Projects</h2>
<div class="row g-3">
<div class="col-md-4">
<img src="{{ Vite::asset('resources/images/gambar1.jpg') }}"
alt="Gambar 1">
</div>
<div class="col-md-4">
<img src="{{ Vite::asset('resources/images/gambar2.jpg') }}"
alt="Gambar 2">
</div>
<div class="col-md-4">
<img src="{{ Vite::asset('resources/images/gambar3.jpg') }}"
alt="Gambar 3">
</div>
<div class="col-md-4">
<img src="{{ Vite::asset('resources/images/gambar4.jpg') }}"
alt="Gambar 4">
</div>
<div class="col-md-4">
<img src="{{ Vite::asset('resources/images/gambar5.jpg') }}"
alt="Gambar 5">
</div>
<div class="col-md-4">
<img src="{{ Vite::asset('resources/images/gambar6.jpg') }}"
alt="Gambar 6">
</div>
</div>
</div>
</section>