Tugas Personal Ke-1 Week 2: Web Programming

Tugas Personal ke-
1 Week 2
Jawablah soal berikut dengan benar!
A. Soal Essay
1. Jelaskan apa yang dimaksud dengan server-side scripting dan client-
side scripting, berikan contoh dan gambarkan konsepnya?
2. Apakah perbedaan antara MVC, MVVM dan MVP serta berikan
contoh penerapannya?
3. Jelaskan perbedaan penggunaan composer dan routing pada Laravel
serta berikan contoh penerapannya?
4. Apa yang dimaksud dengan routing dan jelaskan jenis – jenisnya
beserta contoh penggunaannya.
5. Dalam Laravel kita mengenal blade, apa itu blade dan mengapa
diperlukan blade dalam pengembangan aplikasi tidak dengan konsep
lainnya, apa yang membedakannya?
B. Soal Case.
Sebuah perusahaan pembelajaran stir mobil ingin membuat website untuk
company profile yang dimiliki akan tetapi mereka tidak mempunyai
bayangan bagaimana bentuk websitenya, akan tetapi terdapat beberapa
hal yang ingin ada dalam website tersebut, antara lain:
a. Jadwal belajar stir mobil
b. Paket jasa yang ditawarkan
c. Nama – nama trainer stir mobil dan pengurus
d. Kendaraan yang disediakan baik manual dan matic (jumlahnya
ditentukan oleh rekan – rekan untuk banyak mobil yang dimiliki).
e. Lokasi dan kontak perusahaan.
Buatlah se atraktif mungkin untuk website yang diminta sehingga
perusahaan stri mobil menjadi menarik untuk dikunjungi.
Web Programming
Jawaban :
A. SOAL ESSAY
1. Client-side Scripting adalah bahasa pemrograman web yang

pengolahan datanya dilakukan oleh komputer pengguna/pengunjung.
Jadi, ketika seseorang berkunjung ke sebuah web, komputernya akan
mendownload data/script yang bersifat client-side di web tersebut.
Client-side script mempengaruhi berat-tidaknya loading sebuah website yang

tergantung pada kecepatan loading & spesifikasi komputer serta koneksi
internet penggunanya.
Client-side script meliputi kode-kode yang ditampilkan ketika anda mengklik

kanan pada sebuah halaman web dan melihat sumber halaman (View Page
Source). Contoh dari Client-side Script adalah HTML, CSS, JavaScript dan
XML.
Server-side Scripting adalah bahasa pemrograman web yang pengolahan

datanya dilakukan oleh komputer server/penyedia. Jadi, setiap kali sebuah
web dikunjungi, server akan mengirimkan data-data yang diminta dari
database yang kemudian akan ditampilkan di web.
Server-side Script biasanya hanya ada pada web dinamis saja. Server-side
Script memengaruhi berat-tidaknya loading sebuah website bergantung pada
kecepatan & spesifikasi komputer server.
Kode-kode Server-side tidak bisa kita lihat karena sifatnya yang rahasia
untuk Client. Contoh dari Server-side Script adalah PHP, ASP, ASP.Net, Java,
dan masih banyak lagi.
2 | 21
2. Perbedaan antara MVC, MVVM dan MVP :
• MVC
MVC atau yang biasa disebut Model View Controller adalah suatu model
yang seringkali digunakan oleh para pengembang software. Komponen-
komponen di dalam arsiteuktur ini yaitu sebagai berikut.
Model
Di dalam komponen ini berisi tentang logika bisnis dan status data yang ada
di dalam aplikasi. Kompnen ini bertugas untuk mendapatkan dan
memanipulasi data, berkomunikasi dengan controller, berinteraksi dengan
database, terkadang memperbarui tampilan dari aplikasi yang dikembangkan.
View
Komponen ini berhubungan dengan antarmuka pengguna yang terdiri dari
HTML/CSS.XML. Komponen ini berkomunikasi dengan pengontrol dan
terkadang berinteraksi dengan model. View berkerja sama dengan controller
untuk menciptakan tampilan dinamis pada aplikasi yang dikembangkan.
Selain bertugas untuk menangani antarmuka dan interaksi pengguna,
komponen view juga memiliki tugas untuk menyajikan data yang sesuai
untuk pengguna.
Controller
Controller adalah suatu aktivitas/fragmen yang berfungsi sebagai
komunikator antara view dan model. Komponen ini membutuhkan suatu
3 | 21
input pengguna dari layanan view/REST. Lalu Permintaan “Get Data”
diproses dari model dan diteruskan ke view untuk ditampilkan ke pengguna.
• MVP
MVP atau biasa disebut Model View Presenter adalah turunan dari pola
desain arsitektur MVC dan berfokus pada peningkatan logika presentasi.
Awal mula MVC terbentuk yaitu pada awal tahun 1990 dimana perusahaan
bernama Taligent mengerjakan model untuk lingkungan C++ CommonPoint.
Pada saat waktu pengembangan, para pengembang harus dapat membagi
arsitektur menjadi beberapa lapisan untuk mematahkan ketergantungan antar
komponen yang dilihat pada komponen view.
➢ Model
Model mewakili sekumpulan kelas yang mendeskripsikan logika bisnis dan
data. Hal tersebut juga mendeskripsikan aturan bisnis untuk data seperti
mengambil dan memanipulasi data, serta berinteraksi dengan database.
Model digunakan untuk berkomunikasi dengan presenter, akan tetapi model
tidak berinteraksi dengan view.
➢ View
View digunakan untuk membuat interaksi dengan pengguna seperti XML
(UI), aktivias, dan fragmen serta berinteraksi dengan Presenter. Hal-hal
tersebut tidak berhubungan dengan logika yang akan diimplementasikan
dalam proses tersebut.
➢ Presenter
Presenter menyajikan data dari model dan mengontrol semua perilaku yang
ingin ditampilkan dari aplikasi yang mendorong dan memberitahu View apa
yang harus dilakukan. Interaksi yang dilakukan antara model dan view
ditangani oleh presenter. Tidak hanya itu presenter juga bertugas untuk
menyimpan data kembali ke Model.
4 | 21
• MVVM
MVVM atau Model View ViewModel yang merupakan gabungan dari MVC
dan MVP. MVVM awalnya digunakan di dalam Windows Presentation
Foundation (WPF) dan Silverlight, yang secara resmi diumumkan pada tahun
2005 oleh John Grossman dalam sebuah posting blog tentang Avalon. Pola
yang digunakan berdasarkan gabungan dari MVC dan MVP mencoba untuk
lebih jelas dalam memisahkan pengembangan UI dari logika bisnis dan
perilaku dalam aplikasi.
➢ Model
Model yang digunakan untuk MVVM mirip dengan model yang digunakan
MVC, dimana model tersebut terdiri dari data dasar yang digunakan untuk
menjalankan perangkat lunak.
➢ View
View digunakan sebagai antarmuka grafis antara pengguna dan pola desain,
serta menampilkan output dari data yang telah diproses. View yang
digunakan MVVM mirip dengan View yang digunakan dalam MVC.
➢ ViewModel
ViewModel di satu sisi adalah abstraksi dari View, lalu di sisi yang lain,
sebagai penyedia pembungkus data model untuk ditautkan. ViewModel
terdiri dair Model yang diubah menjadi View, dan berisi perintah yang dapat
digunakan oleh View untuk mempengaruhi Model.
5 | 21
3. Perbedaan penggunaan composer dan routing pada Laravel :
➢ Routing adalah salah satu konsep penting dalam Laravel. Routing di

Laravel memungkinkan Anda untuk merutekan semua permintaan
aplikasi Anda ke controller yang sesuai.
Rute utama dan utama di Laravel mengakui dan menerima URI
(Uniform Resource Identifier) bersama dengan penutupan, mengingat
bahwa itu harus menjadi cara routing yang sederhana dan ekspresif.
a. Membuat Route di Laravel

Semua rute di Laravel didefinisikan dalam file rute yang dapat Anda
temukan di sub-direktori rute. File rute aplikasi akan ditentukan dalam file
app / Http / routes.php. Perutean umum di Laravel untuk setiap permintaan
yang mungkin terlihat seperti ini:
Route:: get ('/', function ()

{ return 'Welcome to
index';
});
Route:: post('user/dashboard', function () {

return 'Welcome to dashboard';
});
Route:: put('user/add', function () {

//
});
6 | 21
Route:: delete('post/example', function () {
//
});
➢ Composer adalah manajer dependensi untuk bahasa pemrograman PHP

yang mengelola dependensi perangkat lunak PHP dan pustaka yang
diperlukan. Composer berjalan melalui baris perintah. Tujuan utama
Composer adalah untuk menginstal dependensi atau pustaka untuk suatu
aplikasi. Anda akan membutuhkan Composer untuk menginstal Laravel,
memperbarui Laravel, dan membawa dependensi eksternal. Berikut ini
adalah beberapa perintah penting yang digunakan dalam Komposer:
a) Require Perintah yang diperlukan digunakan untuk menambahkan

pustaka atau paket sebagai parameter ke file composer.json, dan
kemudian menginstalnya. Misalkan saya ingin menambahkan facebook
SDK php dalam file composer.json. Yang diberikan di bawah ini
adalah sintaks dari perintah yang diperlukan:
{ b) Install
Perintah instal digunakan untuk menginstal semua pustaka atau paket
"require":
dari file composer.json. Perintah ini digunakan untuk mengunduh
{ semua repositori dependensi PHP dari file composer.json.
c) Update
"facebook/php-sdk": "3.2.*",
Perintah pembaruan digunakan untuk memperbarui semua perpustakaan
} atau paket dari file composer.json berdasarkan versi yang disebutkan
} dalam file composer.json. Kita dapat mengatakan bahwa perintah
pembaruan memperbarui dependensi ke versi terbaru.
d) Remove
Perintah hapus digunakan untuk menghapus pustaka atau paket dan
menghapusnya dari file composer.json.
7 | 21
4. Routing adalah proses pengiriman data atau informasi dengan meneruskan
paket data yang dikirim dari satu jaringan ke jaringan lainnya. Router
adalah perangkat yang digunakan untuk menjalankan fungsi routing
tersebut. Beberapa contoh dari routing adalah mengirim pesan dari satu
komputer ke komputer lain, telepon melalui jaringan internet, atau
mengirim data ke jaringan komputer.
• Fungsi Routing
1) Membaca alamat logika/IP address source and destination
untuk menentukan routing dari LAN ke LAN lain.
2) Menyimpan routing table guna menentukan rute terbaik antara LAN ke
WAN.
3) Menjadi perangkat jaringan yang beroperasi di layar 3 OSI Layer.
Router bisa berupa box atau OS yang mengoperasikan daemon routing.
• Cara Kerja Routing.
Di dalam sebuah jaringan komputer, ada yang namanya TCP/IP
(Transmission Control Protocol/Internet Protocol). TCP atau IP berfungsi
sebagai alamat pengiriman paket data agar bisa sampai ke alamat yang
dituju (host tujuan). Tugas TCP/IP dibagi mulai dari mengirim paket data
hingga menerima paket data dalam sistem. Dengan begini, jika terjadi
masalah saat mengirim paket data akan bisa dipecahkan dengan baik.
• Jenis-Jenis Routing,
1) Static Routing
Static routing merupakan jenis routing yang rutenya ditambahkan secara
manual ke dalam tabel routing. Keuntungan dari jenis routing ini hanyalah
administrator yang dapat mengizinkan routing ke jaringan tertentu saja.
Jaringan yang lebih besar merupakan tugas berat bagi administrator untuk
menambahkan setiap rute pada jaringan di tabel routing dan setiap router
secara manual.
Sehingga, administrator tersebut harus memiliki pengetahuan yang sangat baik
mengenai routing topologi.
2) Default Routing
Jenis router ini dikonfigurasikan untuk mengirim semua paket ke satu router.
Sehingga, tidak masalah apabila keberadaan paket tersebut di dalam jaringan
mana saja. Hal itu diteruskan ke router yang dikonfigurasi untuk perutean
default. Kemudian, paket tersebut diteruskan ke router yang dikonfigurasi
untuk perutean default.
8 | 21
3) Dynamic Routing
Dynamic routing merupakan perutean dinamis yang membuat penyesuaian
otomatis berdasarkan situasi dan kondisi jalur di tabel routing. Jenis routing
ini menggunakan protokol untuk menemukan tujuan jaringan dan rute untuk
mencapainya.
Keuntungan dari jenis routing ini adalah memberikan kemudahan
konfigurasinya karena otomatis. Selain itu, pemilihan jalur atau rute menjadi
lebih efektif.
Jenis routing ini membutuhkan bandwidth yang lebih besar. Untuk
masalah keamanannya juga lebih rendah dibanding static routing.
5. Blade adalah salah satu fitur dalam laravel yang digunakan untuk
menampilkan output pada view. Fitur blade ini bisa dibilang sangat
canggih, karena kita dapat membuat coding tanpa perlu tag PHP (<?php
?
>). Selain menampilkan output, blade juga digunakan untuk membuat
layout website. Atau bisa juga Blade adalah fitur yang disediakan Laravel
untuk proses templating sederhana namun sangat bermanfaat dalam proses
pengembangan tampilan halaman web. Tidak seperti fitur templating PHP
populer lainnya, Blade tidak membatasi pemrogram untuk menggunakan
kode PHP biasa dalam membuat kode untuk tampilan.
Untuk membuat coding PHP menggunakan Blade, diawali dengan karakter

'@keywordphp'. misalnya:
Nama file php wajib disertakan [dot]blade. Contoh: index.blade.php,

contact.blade.php.
9 | 21
B. SOAL CASE
<!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">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">

<title>Badru Rent Car</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">

<link rel="stylesheet" href="css/bootstrap.min.css">

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="css/responsive.css">

<link rel="icon" href="images/fevicon.png" type="image/gif" />

<link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-
awesome.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css"
media="screen">

10 |
</head>

<body class="main-layout">

<div class="loader_bg">
<div class="loader"><img src="images/loading.gif" alt="#" /></div>
</div>


<header>

<div class="header">
<div class="container">
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col logo_section">
<div class="full">
<div class="center-desk">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="#" /></a>
</div>
</div>
</div>
</div>
<div class="col-xl-9 col-lg-9 col-md-9 col-sm-9">
<nav class="navigation navbar navbar-expand-md navbar-dark ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample04">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html"> Home </a>
11 |
</li>
<a class="nav-link" href="#">About</a>
</li>
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
<div class="sign_btn"><a href="#">Sign in</a></div>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>



<section class="banner_main">
<div class="row d_flex">
<div class="col-md-12">
<div class="text-bg">
<h1>Badru Sewa Mobil</h1>
<strong>Temukan Mobil untuk kegiatan anda</strong>
<span>Page 2022</span>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since theLorem Ipsum is simply
dummy text of the printing
<head></head>
</p>
<a href="#">Read More</a>
12 |
</div>
</div>
</div>
</div>
</section>
</div>


<div class="car">
<div class="row">
<div class="titlepage">
<h2>VARIETY OF CARS </h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 padding_leri">
<div class="car_box">
<figure><img src="images/car_img1.png" alt="#"/></figure>
<h3>Hundai</h3>
</div>
</div>
<h3>Audi</h3>
</div>
</div>
13 |
<h3>Bmw x5</h3>
</div>
</div>
</div>
</div>
</div>


<div id="contact" class="bestCar">
<div class="row">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-md-6 offset-md-6">
<form class="main_form">
<h2>Find A Best Car For Rent</h2>
</div>
<div class="row">
<div class="col-md-12 ">
<select>
<option value="0">Choose car Make</option>
<option value="1">1</option>
</select>
</div>
<select>
14 |
<option value="0">Choose Car Type </option>
</select>
</div>
<input class="contactus" placeholder="Search" type="Search"
name="Search">
</div>
<select>
<option value="0">Price of Rent</option>
</select>
</div>
<div class="col-sm-12">
<button class="find_btn">Find Now</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>


<div class="choose ">
<div class="row">
15 |
<h2>Why Choose Us</h2>
<span>It is a long established fact that a reader will be distracted by the readable
content of a page when<br> looking at its layout. The point of using </span>
</div>
</div>
</div>
<div class="row">
<div class="choose_box">
<span>01</span>
<p>It is a long established fact that a reader will be distracted by the readable content
of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less
normal distribution of letters, as opposed to using 'Content here, content here', making </p>
</div>
</div>
<span>02</span>
</div>
</div>
<span>03</span>
</div>
</div>
</div>
</div>
</div>
16 |


<div class="cutomer">
<div class="row">
<h2>What is says our cutomer</h2>
</div>
</div>
</div>
<div class="row">
<div id="myCarousel" class="carousel slide cutomer_Carousel " data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-caption ">
<div class="cross_img">
<figure><img src="images/cross_img.png" alt="#"/></figure>
</div>
<div class="our cross_layout">
<div class="test_box">
<h4>Due markes</h4>
<span>Rental</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit ess</p>
17 |
<i><img src="images/te1.png" alt="#"/></i>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-caption">
</div>
<h4>Due markes</h4>
<span>Rental</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-caption">
</div>
18 |
<h4>Due markes</h4>
<span>Rental</span>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-
slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-
slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>


<footer>
<div class="footer">
<div class="row">
19 |
<div class="cont_call">
<h3> <strong class="multi color_chang"> Call Now</strong><br>
(+1) 12345667890
</h3>
</div>
<div class="cont">
<h3> <strong class="multi"> Free Multipurpose</strong>
Responsive Landing Page 2022
</h3>
</div>
</div>
</div>
</div>
<div class="copyright">
<div class="row">
<p>© 2019 All Rights Reserved. Design by <a href="https://html.design/">
Free Html Templates</a></p>
</div>
</div>
</div>
</div>
</div>
</footer>


<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/plugin.js"></script>

<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
20 |
<script src="js/custom.js"></script>
<script src="https:cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></
script>
</body>
</html>
21 |

Tugas Personal Ke-1 Week 2: Web Programming

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

Tugas Personal Ke-1 Week 2: Web Programming

Diunggah oleh

Hak Cipta:

Format Tersedia

Tugas Personal ke-

Jawablah soal berikut dengan benar!

1. Client-side Scripting adalah bahasa pemrograman web yang

Client-side script mempengaruhi berat-tidaknya loading sebuah website yang

Client-side script meliputi kode-kode yang ditampilkan ketika anda mengklik

Server-side Scripting adalah bahasa pemrograman web yang pengolahan

➢ Routing adalah salah satu konsep penting dalam Laravel. Routing di

a. Membuat Route di Laravel

Route:: get ('/', function ()

Route:: post('user/dashboard', function () {

Route:: put('user/add', function () {

➢ Composer adalah manajer dependensi untuk bahasa pemrograman PHP

a) Require Perintah yang diperlukan digunakan untuk menambahkan

Untuk membuat coding PHP menggunakan Blade, diawali dengan karakter

Nama file php wajib disertakan [dot]blade. Contoh: index.blade.php,

Anda mungkin juga menyukai