POST TEST

Modul 9,10
Doen pengammpu: Siti Maesyraoh, M.kom

Nama: M Yusup Supriadi

Nim: 20230810040
Kelas: TINFC-2023-02

Fakultas Ilmu Komputer

Teknik Informatika
Universitas Kuningan
2023
 POST TEST MODUL 9

1.Install team viewer pilot pada smartphone anda, jalankan dan jelaskan fungsi dan kegunaan team viewer
pilot.

Setelah saya install team viewer pilot di smartphone, tampilan awalnya itu sama seperti teamviewer
sebelumnya dengan cara memasukkan ID teamviewer smartphone di teamviewer PC. Tampilan
selanjutnya untuk meminta izin connect itu akan muncul seperti tampilan mengangkat telepon dari PC
kemudian pilih connect.

Fungsi :
▪ Dukungan Jarak Jauh: TeamViewer Pilot memungkinkan orang untuk memberikan bantuan teknis
atau panduan visual dari jarak jauh. Seorang ahli atau dukungan teknis dapat melihat apa yang terjadi
pada layar perangkat Anda dan memberikan arahan secara langsung.
▪ Pelatihan Jarak Jauh: TeamViewer Pilot dapat digunakan untuk melatih atau membimbing
seseorang dari lokasi yang berbeda. Panduan visual dapat disampaikan dengan lebih efektif daripada
hanya mengandalkan instruksi tertulis atau verbal.
▪ Panduan Instalasi atau Konfigurasi: Ketika Anda menghadapi masalah dengan instalasi atau
konfigurasi suatu perangkat atau perangkat lunak, seseorang dari tim dukungan dapat menggunakan
TeamViewer Pilot untuk memberikan panduan langsung.
▪ Pengujian dan Inspeksi Jarak Jauh: TeamViewer Pilot juga dapat digunakan untuk pemeriksaan
dan inspeksi jarak jauh. Ini berguna, misalnya, dalam situasi di mana seorang ahli perlu melihat kondisi
fisik suatu perangkat atau lingkungan.

POST TEST MODUL 10

1. Jelaskan perbedaan antara website dengan blogger.

Perbedaan antara website dan Blogger (yang merupakan platform penyedia layanan blog) dapat
dicerminkan dalam beberapa aspek, termasuk kepemilikan, kegunaan, dan fleksibilitas. Berikut adalah
beberapa perbedaan utama antara website dan Blogger:

1. Kepemilikan dan Kendali:

• Website: Pemilik situs web memiliki kendali penuh atas desain, konten, dan fungsionalitas situs.
Mereka dapat memilih platform, mengelola server, dan mengubah situs sesuai keinginan mereka.
• Blogger: Blogger adalah platform yang disediakan oleh Google untuk membuat dan mengelola
blog. Meskipun pengguna memiliki kendali atas konten blog, mereka dibatasi oleh aturan dan fitur yang
ditentukan oleh Blogger

2. Desain dan Kustomisasi:

• Website: Pemilik situs web memiliki kebebasan untuk merancang situs sesuai keinginan mereka.
Mereka dapat menggunakan bahasa pemrograman, seperti HTML, CSS, dan JavaScript, untuk membuat
desain unik dan kustom.
• Blogger: Meskipun Blogger menyediakan beberapa opsi kustomisasi, seperti pemilihan template
dan warna, pilihan ini lebih terbatas dibandingkan dengan membuat situs web dari awal
.
3. Fleksibilitas dan Fungsionalitas:

• Website: Fleksibilitas situs web bergantung pada platform dan teknologi yang digunakan.
Pengguna dapat menambahkan fungsionalitas tambahan melalui plug-in, skrip, atau pengembangan
kustom.
• Blogger: Blogger lebih terfokus pada blogging dan mungkin memiliki batasan dalam hal
fungsionalitas tambahan. Meskipun beberapa fitur dapat ditambahkan, ketersediaannya tidak seluas situs
web.

4. Tujuan dan Fokus:

• Website: Situs web dapat dibuat untuk berbagai tujuan, termasuk bisnis, portfolio, ecommerce,
dan banyak lagi. Fokusnya bisa lebih luas dan bervariasi.
• Blogger: Blogger lebih fokus pada pembuatan dan pengelolaan blog. Ini dirancang khusus untuk
menulis dan mempublikasikan konten secara berkala.

5. Pemeliharaan dan Hosting:

• Website: Pemilik situs web bertanggung jawab untuk memilih penyedia hosting, mengelola
pembaruan keamanan, dan memastikan keberlanjutan situs.
• Blogger: Google menyediakan hosting untuk blog yang dibuat di Blogger. Pemeliharaan server
dan pembaruan keamanan diurus oleh Google.
• Penting untuk dicatat bahwa pemilihan antara website dan Blogger tergantung pada kebutuhan
dan tujuan individu atau bisnis. Situs web memberikan lebih banyak kontrol dan fleksibilitas, sementara
Blogger dapat lebih mudah digunakan untuk mereka yang fokus pada pembuatan konten blog tanpa
khawatir tentang aspek teknis

2. Buatlah halaman web menggunakan pemrograman HTML yang terdiri dari header, content, dan footer!

HTML:

<link
href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,
600,600i,700,700i" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css?family=Caveat:400,700&subset=cyrillic"
rel="stylesheet">
<script src="https://kit.fontawesome.com/4326f6cda5.js"></script>
<link rel="stylesheet" href="style.css">
<title>CSS - Final Project</title>

<!----------- HEADER start ----------->

<header>
<nav>
<img
src="https://mobirise.com/extensions/organicamp/assets/images/logo1.jpg"
id="logo" alt="Main logo">
<div>
<ul id="top-menu">
<li id="drop-menu" class="menu-item">
<a href="#">Menu<i class="fas fa-caret-down"></i></a>
<ul id="dropdown-menu">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 1</a></li>
</ul>
</li>

<li class="menu-item"><a href="#">Tentang Kami</a></li>

<li class="menu-item"><a href="#">Kontak<i class="fas fa-
caret-down"></i></a></li>
<li><a href="#">Beli Sekarang</a></li>
 </ul>
</div>
</nav>
<div id="header-desc">
<h1>Buah dan Sayur Segar Yusup</h1>
<p>Buah dan Sayur segar yang ditanam dengan sepenuh cinta dibawah
kaki gunung ciremai oleh petani petani berkualitas </p>
</div>
</header>
<!----------- HEADER end ----------->

<!----------- MAIN section start ----------->

<main>

<!----------- STEPS section start ----------->

<section id="steps">
<article style="background-color: #5acda6;">
<figure>
<i class="fa fa-cut"></i>
<figcaption>
<h3>Langkah pertama</h3>
<p>Sayuran merupakan bagian integral dari makanan
manusia. Mereka sangat bermanfaat karena tingginya kandungan karbohidrat,
berbagai asam, vitamin dan unsur aktif dalam bentuk yang mudah dicerna.</p>
</figcaption>
</figure>
</article>
<article style="background-color: #91ac41;">
<figure>
<i class="fa fa-paint-brush"></i>
<figcaption>
<h3>langkah Kedua</h3>
<p>Tomat segar ideal untuk menggantikan mineral yang
hilang. Sayuran ini mengandung banyak asam yang dibutuhkan tubuh kita untuk
berfungsi penuh.</p>
</figcaption>
</figure>
</article>
<article style="background-color: #e4b476;">
<figure>
<i class="fa fa-shopping-bag"></i>
<figcaption>
<h3>Langkah Ketiga.</h3>
 <p>Dalam kandungan vitamin C, paprika manis lebih unggul
dari lemon bahkan blackcurrant! Jumlah vitamin terbesar terdapat di sekitar
batang, yaitu pada bagian produk yang biasanya dipotong saat dibersihkan.</p>
</figcaption>
</figure>
</article>
<article style="background-color: #f69dad;">
<figure>
<i class="far fa-smile"></i>
<figcaption>
<h3>Langkah Keempat</h3>
<p>Jika sesekali makan cabai pedas, ini akan membantu
menormalkan sirkulasi otak, meringankan kondisi asma bronkial, batuk, sakit
tenggorokan, flu..</p>
</figcaption>
</figure>
</article>
</section>
<!----------- COMMENTS section end ----------->

<!----------- STORE section start ----------->

<section id="store">
<p class="italic-par">Buah dan Sayur Segar</p>
<h2>Toko Buah dan Sayur Segar Kami!</h2>
<p id="gray-desc"></p>

<div id="store-items">
<article>
<div>
<i class="fa fa-camera"></i>
</div>
<h3>Buah Sayur Segar</h3>
<p>Cocok Untuk Sehari-hari</p>
</article>
<article>
<div>
<i class="fa-rocket fa"></i>
</div>
<h3>High Quality</h3>
<p>Kualitas yang bagus</p>
</article>
<article>
<div>
<i class="fab fa-twitter"></i>
</div>
 <h3>Jangka Waktu</h3>
<p>Tahan Lama</p>
</article>
<article>
<div>
<i class="fab fa-weixin"></i>
</div>
<h3>Harga Yang Bagus</h3>
<p>Dengan harga yang merakyat
</article>
</div>

</section>
<!----------- STORE section end ----------->

</section>
<!----------- COMMENTS section end ----------->

<!----------- FOLLOW section start ----------->

<section id="follow">
<div id="left-bar">
<img
src="https://mobirise.com/extensions/organicamp/assets/images/19.jpg"
alt="Strawberries">
</div>
<div id="right-bar">
<h2>Ikuti Kami</h2>
<p></p>
<form>
<div>
<input type="email" name="email" placeholder="Your Email"
id="email">
</div>
<div>
<input type="submit" name="submit" value="SUBSCRIBE"
id="submit-btn">
</div>
</form>
</div>
</section>
<!----------- FOLLOW section end ----------->

<!----------- Stats section start ----------->

<section id="rates">
<div id="rates-wrap">
<div class="rates-block">
<h3>7</h3>
<p>Year of experiences</p>
</div>
<div class="rates-block">
<h3>123k</h3>
<p>Happy Customers</p>
</div>
<div class="rates-block">
<h3>72k</h3>
<p>100% Satisfaction</p>
</div>
<div class="rates-block">
<h3>13k</h3>
<p>Detox Smoothies</p>
</div>
</div>
</section>
<!----------- STATS section end ----------->

<section id="contacts">
<div id="contacts-wrap">
<div class="left-block">
<p class="italic-par">Contact Us</p>
<h2>Informasi Lokasi</h2>
<p class="contacts-desc">untuk memudahkan Pembelian.</p>
<h4>Talaga Store</h4>
<p class="contacts-break">
Depan alun alun Talaga<br>
Samping alfamart<br>
Senin - Jumat : 9.00 to 17.00<br>
yusupp.mail.com
</p>
<h4>Cikijing</h4>
<p class="contacts-break">

</p>
</div>

<div class="right-block">
<p class="italic-par">Meet Our Team</p>
 <h2></h2>
<p class="contacts-desc">Masih ada pertanyaa? Cantumin aja ya
broo!!1.</p>
<form>
<div>
<input class="input-item" type="text" name="name"
placeholder="Name">
</div>
<div>
<input class="input-item" type="tel" name="phone"
placeholder="Phone">
</div>
<div>
<input class="input-item" type="text" name="subject"
placeholder="Subject">
</div>
<div>
<input class="input-item" type="email" name="email"
placeholder="Email">
</div>
<div>
<textarea class="input-item"
placeholder="Message"></textarea>
</div>
<div>
<input id="btn-submit" type="submit" name="submit"
value="Submit Now">
</div>
</form>
</div>
</div>
</section>
</main>
<!----------- MAIN section end ----------->

<!----------- FOOTER start ----------->

<footer>
<p>© Copyright 2023 M Yusup Supriadi - All Rights Reserved</p>
</footer>
<!----------- FOOTER end ----------->

Menggunakan CSS
body {
margin: 0;
font-family: 'Poppins', sans-serif;
}

header {
width: 100%;
height: 100vh;
position: relative;
}

header::after {
content: " ";
background-image: url('https://i.imgur.com/5xAkZg9.jpg');
background-position: left;
background-size: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
opacity: 0.7;
}

nav {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
width: 100%;
height: 77px;
z-index: 100;
padding: 0 28px;
box-sizing: border-box;
}

#logo {
width: 40px;
}

a {
text-decoration: none;
}
ul {
list-style-type: none;
}

nav {
background-color: #fff;
}

#top-menu>li{
display: inline-block;
margin-right: 24px;
}

#top-menu li a {
color: #000;
font-weight: 600;
font-size: 14px;
}

#top-menu i {
padding-left: 4px;
}

#top-menu>li:last-of-type a {
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
color: white;
background-color: rgb(170, 210, 54);
padding: 7.5px 34px;
border: 0;
border-radius: 4px;
margin-right: 16px;
}

#top-menu>li:last-of-type {
margin: 0;
}

#drop-menu {
position: relative;
}

#dropdown-menu {
 display: none;
box-shadow: 0 2px 5px #ccc;
border-top: 2px solid rgb(170, 210, 54);
position: absolute;
padding: 20px;
right: 0;
width: 150px;
background-color: #fff;
}

#drop-menu:hover #dropdown-menu {
display: block;
}

#dropdown-menu li {
border-bottom: 1px solid #ccc;
padding: 4px;
}

#dropdown-menu li a {
font-size: 1.1em;
font-weight: 100;
}

#header-desc {
width: 80%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

h1, h2 {
font-size: 44px;
}

h1 {
font-weight: 600;
letter-spacing: 8.8px;
line-height: 1.2;
text-align: center;
}

#header-desc p {
font-size: 14px;
 letter-spacing: 0.5px;
font-weight: 400;
color: #8b8b99;
padding-top: 32px;
text-align: center;
}

#steps {
display: grid;
grid-template-columns: auto auto auto auto;
}

#steps article {
text-align: center;
padding: 112px 7px;
color: #fff;
}

#steps i {
font-size: 96px;
transition: all 0.2s;
}

#steps h3{
font-weight: 600;
font-size: 1.5em;
margin: 20px 0;
}

#steps p {
font-size: 14px;
letter-spacing: 0.5px;
line-height: 1.6;
}

#steps article:hover i{
transform: scale(1.1, 1.1);
}

#store {
width: 100%;
background-color: #f7eee2;
padding: 75px 0;
text-align: center;
}
.italic-par {
color: #91ac41;
font-size: 24px;
font-family: 'Caveat', cursive;
margin: 0;
margin-top: 35px;
}

#store h2, #comments h2 {

font-weight: 600;
margin: 0;
margin-bottom: 8px;
}

#gray-desc {
font-size: 16px;
font-weight: 500;
margin: 0;
margin-bottom: 0px;
color: #8b8b99;
letter-spacing: 0.5px;
margin-bottom: 55px;
}

#store-items {
width: 100%;
max-width: 1140px;
display: grid;
grid-template-columns: auto auto auto auto;
margin: 0 auto;
}

#store-items article {
text-align: center;
padding: 24px;
}

#store-items div{
display: inline-block;
background-color: #e3b375;
border-radius: 50%;
padding: 40px;
transition: all 0.3s;
}
#store-items i {
background-color: #e3b375;
color: #fff;
font-size: 60px;
}

#store-items article:hover div {

transform: scale(1.1, 1.1);
}

#store-items h3 {
font-size: 24px;
font-weight: 600;
}

#store-items p {
font-size: 16px;
letter-spacing: 0.5px;
font-weight: 500;
color: #8b8b99;
}

#comments {
text-align: center;
width: 100%;
padding: 75px 0;
}

#comments-items {
width: 100%;
max-width: 1140px;
margin: 0 auto;
display: grid;
grid-template-columns: auto auto auto;
}

#comments article {
text-align: center;
background-color: #f5f6fb;
padding: 40px 30px;
margin: 16px;
border-top-left-radius: 45px;
border-bottom-left-radius: 45px;
border-bottom-right-radius: 45px;
 transition: box-shadow 0.3s;
}

#comments article:hover {
box-shadow: 0 12px 16px 0 rgba(39,39,47,0.06);
}

#comments img {
width: 80px;
border-radius: 50%;
}

#comments article p:first-of-type {

font-size: 14px;
color: #8b8b99;
letter-spacing: 0.5px;
font-style: italic;
margin: 0;
}

#comments article p:last-of-type {

color: #8b8b99;
font-size: 12px;
font-style: italic;
letter-spacing: 0.5px;
margin: 0;
}

#comments h3 {
text-transform: uppercase;
font-size: 16px;
font-weight: 600;
margin-top: 24px;
margin-bottom: 0px;
}

#follow {
display: flex;
justify-content: space-between;
}

#follow #left-bar {
width: 68%;
}
#follow #right-bar {
width: 33.33%;
text-align: left;
padding: 115px;
position: relative;
box-sizing: border-box;
}

#follow #right-bar::after {
content: " ";
background-image: url('https://i.imgur.com/1m096Jy.jpg');
background-position: left;
background-size: cover;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
opacity: 0.7;
z-index: -1;
}

#follow img {
width: 100%;
}

#follow p {
color: #8b8b99;
font-size: 16px;
letter-spacing: 0.5;
line-height: 1.6;
margin: 0;
}

#follow h2 {
font-weight: 600;
margin: 0 0 8px;
}

#email {
width: 100%;
box-sizing: border-box;
border: 0;
border-radius: 4px;
font-weight: 500;
 background-color: white;
padding: 12px;
color: #8b8b99;
font-size: 16px;
margin-top: 60px;
}

#submit-btn {
background-color: #f69dad;
padding: 16px 42px;
border-radius: 4px;
cursor: pointer;
color: white;
border: 0;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
margin-top: 16px;
border: 1px solid transparent;
}

#submit-btn:hover {
color: #f69dad;
border: 1px solid #f69dad;
background-color: #fff;
}

#rates {
width: 100%;
background-color: #f6fcfa;
}

#rates-wrap {
width: 100%;
margin: 0 auto;
max-width: 1140px;
padding: 100px 0;
display: flex;
}

#rates .rates-block {
width: 25%;
padding: 0 64px;
text-align: center;
}
#rates h3 {
margin: 0;
font-size: 44px;
font-weight: 600;
}

#rates p {
margin: 0;
color: #57e3b5;
font-size: 14px;
letter-spacing: 0.5px;
font-style: italic;
}

#vimeo h2 {
text-align: center;
color: #8b8b99;
font-weight: 400;
position: relative;
padding-bottom: 36px;
}

#vimeo h2::after {
content: " ";
width: 96px;
height: 1px;
background-color: #e4b476;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 0);
}

#vimeo div {
width: 100%;
max-width: 1140px;
margin: 0 auto;
text-align: center;
}

iframe {
width: 100%;
height: 425px;
border: 0;
}

#contacts {
width: 100%;
}

#contacts-wrap {
width: 100%;
margin: 0 auto;
max-width: 1140px;
display: flex;
justify-content: space-between;
padding: 100px 0;
}

#contacts .left-block {
width: 50%;
}

#contacts .right-block {
width: 40%;
}

#contacts h2 {
margin: 0;
}

.contacts-desc {
font-size: 16px;
font-weight: 400;
color: #8b8b99;
letter-spacing: 0.5px;
}

.contacts-break {
font-size: 16px;
font-weight: 400;
color: #8b8b99;
letter-spacing: 0.5px;
line-height: 2;
margin: 0;
}

input, textarea {
font-family: 'Poppins', sans-serif;
 outline: none;
}

#contacts .input-item {
width: 100%;
padding: 16px;
font-size: 16px;
color: #8b8b99;
border-radius: 6px;
border: 1px solid #e5e6ec;
margin-bottom: 16px;
box-sizing: border-box;
}

#contacts #btn-submit {
font-weight: 600;
color: white;
background-color: rgb(170, 210, 54);
padding: 9px 34px;
text-transform: uppercase;
border: 0;
border-radius: 4px;
margin-right: 16px;
cursor: pointer;
font-size: 16px;
}

footer {
padding: 30px 0;
text-align: center;
color: #fff;
background-color: #232323;
font-size: 14px;
letter-spacing: 0.5px ;
}

footer p {
margin: 0;
}

@media screen and (min-width:1200px) and (max-width:1314px) {

#follow #right-bar {
padding: 50px;
}
}

@media screen and (min-width:900px) and (max-width:1199px) {

#follow #left-bar {
width: 60%;
}

#follow #right-bar {
width: 40%;
padding: 0 30px;
}

#email {
margin-top: 30px;
}

#contacts {
padding: 20px;
box-sizing: border-box;
}

h2 {
font-size: 36px;
}
}

@media screen and (max-width:900px) {

#top-menu>li:last-of-type a {
margin-right: 0;
}

h1 {
font-size: 28px;
}

#header-desc {
width: 90%;
}

#header-desc p {
padding: 16px;
}

#steps, #store-items {
grid-template-columns: auto auto;
}

#store, #comments {
padding: 20px 0;
}

#comments-items {
grid-template-columns: auto;
}

#follow {
flex-direction: column;
}

#follow #right-bar, #follow #left-bar {

width: 100%;
}

#follow #right-bar {
padding: 20px;
}

#rates-wrap {
flex-wrap: wrap;
padding: 40px 0;
}

#rates .rates-block {
width: 50%;
padding: 0;
}

#contacts {
box-sizing: border-box;
padding: 20px;
}

#contacts-wrap {
flex-direction: column;
padding: 0;
}
 #contacts .right-block, #contacts .left-block {
width: 100%;
}

h2 {
font-size: 30px;
}

@media only screen and (max-width:600px) {

#top-menu .menu-item {
display: none;
}

#steps, #store-items {
grid-template-columns: auto;
}

#vimeo h2::after {
bottom: 25%;
}

iframe {
height: 360px;
}

@media only screen and (max-width:400px) {

#top-menu .menu-item {
display: none;
}

h2 {
font-size: 26px;
}

#rates .rates-block {
width: 100%;
}

}
Hasil Output: