EAS MPPL 2021 Pada kesempatan ini kelompok kami akan menjelaskan salah satu produk perangkat lunak milik Zoho yaitu Zoho Marketing Automation yang dikerjakan secara berkelompok yang beranggotakan: Ricky Supriyanto 05111940000036 Arvel Gavrilla R 05111940000040 M Arif Faizin 05111940000060 Zulfiqar Fauzul Akbar 05111940000101 Raihan Alifianto 05111940000213 Dengan hasil sebagai berikut 1. Deskripsi Produk 2. Manajemen Ruang Lingkup 3. Manajemen Waktu 4. Manajemen Biaya 5. Manajemen Resiko 6. Video demo
Dalam postingan ini, saya akan menjelaskan pembuatan halaman web
menggunakan HTML5 sesuai dengan intruksi yang dijelaskan. Berikut link
live website yang telah saya buat :
Website Storse Online Store
Berikut adalah detail dari kode yang telah saya buat.
- index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="description" content="List of best restaurant for you"> <meta name="theme-color" content="#484bd7"> <link rel="manifest" href="manifest.json"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon" href="/icons/icon-192x192.png"> <link rel="preconnect" href="https://restaurant-api.dicoding.dev"> <link rel="preconnect" href="https://fonts.googleapis.com"> <title>Storse | Online Store App</title> <link href="main.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"> </head> <body cz-shortcut-listen="true"><a href="#main-content" class="skip-link">Skip to Content</a> <nav><a href="/" class="brand-logo brand-name">storse </a><button id="hamburgerButton" class="collapse-toggle" type="button" data-toggle="collapse" aria-controls="navbarDrawer" aria-expanded="false" aria-label="Toggle navigation"><span class="collapse-toggle-icon"></span></button> <ul id="navbarDrawer" class="collapse"> <li><a href="index.html">Beranda</a></li> <li><a href="produk.html">Produk</a></li> <li><a href="https://github.com/MuhammadArifFaizin">Tentang Kami</a></li> </ul> </nav> <main id="mainContent" class="sticky-offset margin-bottom-3" tabindex="0"> <section> <div class="jumbotron"> <div class="jumbotron-item"> <picture> <img class=" ls-is-cached lazyloaded" data-src="./images/jumbotron.jpg" alt="Hero" src="./images/jumbotron.jpg" width="640" height="480"> </picture> <div class="jumbotron-content"> <h1 class="brand-name text-light">storse</h1> <p class="brand-description text-light">Temukan Online Store paling lengkap!</p> </div> </div> </div> </section> <div class="container"> <section class="margin-top-3 d-grid grid-column-3"> <div id="banner_choose_resto" class="card"> <div class="card-body card-no-img"> <p class="card-title text-center">Pilih produk</p> <p class="text-description-2 text-center">Temukan produk yang kamu cari dengan mudah</p> </div> <div class="card-icon"> <p>1</p> </div> </div> <div id="banner_save_resto" class="card"> <div class="card-body card-no-img"> <p class="card-title text-center">Lihat promo menarik</p> <p class="text-description-2 text-center">Lihat detail produk pilihanmu</p> </div> <div class="card-icon"> <p>2</p> </div> </div> <div id="banner_review_resto" class="card"> <div class="card-body card-no-img"> <p class="card-title text-center">Simpan ke favorit</p> <p class="text-description-2 text-center">Simpan produk pilihan untuk dibeli nanti</p> </div> <div class="card-icon"> <p>3</p> </div> </div> </section> <section> <h2 class="text-center margin-bottom-0">Pilih Produk Sesuka Hati</h2> <p class="text-center margin-bottom-3">Temukan penawaran menarik dari berbagi produk menarik</p> <div id="restaurantsListContainer"> <restaurant-list class="d-grid grid-column-3"> <restaurant-item> <div id="rqdv5juczeskfw1e867" class="restaurant-item card h-100"> <div class="card-label bg-primary text-light">Rp65.000,-</div> <div class="card-image"> <img alt="Jeans Klasik" src="./images/item-01.jpg" width="320" height="240"> </div> <div class="card-body"> <div class="card-rating"><i class="fa fa-star"></i> 4.2</div> <a href="detailproduk.html" class="card-title">Jeans Klasik</a> <p class="text-description-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.</p> </div> </div> </restaurant-item> <restaurant-item> <div id="s1knt6za9kkfw1e867" class="restaurant-item card h-100"> <div class="card-label bg-primary text-light">Rp90.000,-</div> <div class="card-image"> <img alt="Tas Mini Cantik" src="./images/item-02.jpg" width="320" height="240"> </div> <div class="card-body"> <div class="card-rating"><i class="fa fa-star"></i> 4</div> <a href="detailproduk.html" class="card-title">Tas Mini Cantik</a> <p class="text-description-4">Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p> </div> </div> </restaurant-item> <restaurant-item> <div id="w9pga3s2tubkfw1e867" class="restaurant-item card h-100"> <div class="card-label bg-primary text-light">Rp140.000,-</div> <div class="card-image"> <img alt="Sepatu Keren" src="./images/item-03.jpg" width="320" height="240"> </div> <div class="card-body"> <div class="card-rating"><i class="fa fa-star"></i> 4.2</div> <a href="detailproduk.html" class="card-title">Sepatu Keren</a> <p class="text-description-4">Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p> </div> </div> </restaurant-item> </restaurant-list> </div> </section> </div> </main> <footer> <div class="footer"> <div class="footer-logo margin-bottom-2"> storse </div> <p class="text-center text-light">Copyright © 2021 - Storse</p> </div> </footer> </body> </html> - produk.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="description" content="List of best restaurant for you"> <meta name="theme-color" content="#484bd7"> <link rel="manifest" href="manifest.json"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon" href="/icons/icon-192x192.png"> <link rel="preconnect" href="https://restaurant-api.dicoding.dev"> <link rel="preconnect" href="https://fonts.googleapis.com"> <title>Storse | Online Store App</title> <link href="main.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"> </head> <body cz-shortcut-listen="true"><a href="#main-content" class="skip-link">Skip to Content</a> <nav><a href="/" class="brand-logo brand-name">storse </a><button id="hamburgerButton" class="collapse-toggle" type="button" data-toggle="collapse" aria-controls="navbarDrawer" aria-expanded="false" aria-label="Toggle navigation"><span class="collapse-toggle-icon"></span></button> <ul id="navbarDrawer" class="collapse"> <li><a href="index.html">Beranda</a></li> <li><a href="produk.html">Produk</a></li> <li><a href="https://github.com/MuhammadArifFaizin">Tentang Kami</a></li> </ul> </nav> <main id="mainContent" class="sticky-offset margin-top-4 margin-bottom-3" tabindex="0"> <div class="container"> <section style="margin-top: 8rem;"> <h2 class="text-center margin-bottom-0">Temukan Produk Terbaik Disini</h2> <p class="text-center margin-bottom-3">Jelajahi aneka macam produk menarik dari Storse!</p> <div id="restaurantsListContainer"> <restaurant-list class="d-grid grid-column-3"> <restaurant-item> <div id="rqdv5juczeskfw1e867" class="restaurant-item card h-100"> <div class="card-label bg-primary text-light">Rp65.000,-</div> <div class="card-image"> <img alt="Jeans Klasik" src="./images/item-01.jpg" width="320" height="240"> </div> <div class="card-body"> <div class="card-rating"><i class="fa fa-star"></i> 4.2</div> <a href="detailproduk.html" class="card-title">Jeans Klasik</a> <p class="text-description-4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.</p> </div> </div> </restaurant-item> <restaurant-item> <div id="s1knt6za9kkfw1e867" class="restaurant-item card h-100"> <div class="card-label bg-primary text-light">Rp90.000,-</div> <div class="card-image"> <img alt="Tas Mini Cantik" src="./images/item-02.jpg" width="320" height="240"> </div> <div class="card-body"> <div class="card-rating"><i class="fa fa-star"></i> 4</div> <a href="detailproduk.html" class="card-title">Tas Mini Cantik</a> <p class="text-description-4">Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p> </div> </div> </restaurant-item> <restaurant-item> <div id="w9pga3s2tubkfw1e867" class="restaurant-item card h-100"> <div class="card-label bg-primary text-light">Rp140.000,-</div> <div class="card-image"> <img alt="Sepatu Keren" src="./images/item-03.jpg" width="320" height="240"> </div> <div class="card-body"> <div class="card-rating"><i class="fa fa-star"></i> 4.2</div> <a href="detailproduk.html" class="card-title">Sepatu Keren</a> <p class="text-description-4">Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p> </div> </div> </restaurant-item> <restaurant-item> <div id="w9pga3s2tubkfw1e867" class="restaurant-item card h-100"> <div class="card-label bg-primary text-light">Rp50.000,-</div> <div class="card-image"> <img alt="Kemeja Rapih" src="./images/item-04.jpg" width="320" height="240"> </div> <div class="card-body"> <div class="card-rating"><i class="fa fa-star"></i> 4.1</div> <a href="detailproduk.html" class="card-title">Kemeja Rapih</a> <p class="text-description-4">Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p> </div> </div> </restaurant-item> <restaurant-item> <div id="w9pga3s2tubkfw1e867" class="restaurant-item card h-100"> <div class="card-label bg-primary text-light">Rp200.000,-</div> <div class="card-image"> <img alt="Tas Mahal" src="./images/item-05.jpg" width="320" height="240"> </div> <div class="card-body"> <div class="card-rating"><i class="fa fa-star"></i> 3.9</div> <a href="detailproduk.html" class="card-title">Tas Mahal</a> <p class="text-description-4">Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p> </div> </div> </restaurant-item> <restaurant-item> <div id="w9pga3s2tubkfw1e867" class="restaurant-item card h-100"> <div class="card-label bg-primary text-light">Rp210.000,-</div> <div class="card-image"> <img alt="Jam Tangan" src="./images/item-06.jpg" width="320" height="240"> </div> <div class="card-body"> <div class="card-rating"><i class="fa fa-star"></i> 4.2</div> <a href="detailproduk.html" class="card-title">Jam Tangan</a> <p class="text-description-4">Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p> </div> </div> </restaurant-item> </restaurant-list> </div> </section> </div> </main> <footer> <div class="footer"> <div class="footer-logo margin-bottom-2"> storse </div> <p class="text-center text-light">Copyright © 2021 - Storse</p> </div> </footer> </body> </html> - detailproduk.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="description" content="List of best restaurant for you"> <meta name="theme-color" content="#484bd7"> <link rel="manifest" href="manifest.json"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon" href="/icons/icon-192x192.png"> <link rel="preconnect" href="https://restaurant-api.dicoding.dev"> <link rel="preconnect" href="https://fonts.googleapis.com"> <title>Storse | Online Store App</title> <link href="main.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"> </head> <body cz-shortcut-listen="true"><a href="#main-content" class="skip-link">Skip to Content</a> <nav><a href="/" class="brand-logo brand-name">storse </a><button id="hamburgerButton" class="collapse-toggle" type="button" data-toggle="collapse" aria-controls="navbarDrawer" aria-expanded="false" aria-label="Toggle navigation"><span class="collapse-toggle-icon"></span></button> <ul id="navbarDrawer" class="collapse"> <li><a href="index.html">Beranda</a></li> <li><a href="produk.html">Produk</a></li> <li><a href="https://github.com/MuhammadArifFaizin">Tentang Kami</a></li> </ul> </nav> <main id="mainContent" class="sticky-offset margin-bottom-3" tabindex="0"> <div id="restaurant" class="container min-vh-80 d-flex margin-top-4"> <div id="content" class="margin-top-1"> <div id="restaurant-main-info" class="card card-full margin-bottom-1"> <div class="card-image"> <img alt="Kafe Kita" src="./images/item-01.jpg" width="320" height="240"> </div> <div class="card-body"> <h2 class="card-title margin-bottom-0">Jeans Klasik</h2> <div class="card-rating"><i class="fa fa-star"></i> 4</div> <p class="margin-top-0">Rp65.000,-</p> </div> </div> <div class="card card-full margin-bottom-1"> <div class="card-body"> <h3 class="card-title">Kategori</h3> <ul class="list-group list-pill"> <li class="list-item">Celana</li> <li class="list-item">Klasik</li> </ul> </div> </div> <div class="card card-full margin-bottom-1"> <div class="card-body"> <h3 class="card-title">Description</h3> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, </p> </div> </div> <div id="customerReview"> <div id="reviewPosted"> <div class="card card-full margin-bottom-1"> <div class="card-body"> <h3 class="card-title">Review</h3> <div class="list-group"> <div class="list-item"> <b class="overflow-wrap-anywhere">Ahmad</b> <small>13 November 2021</small> <p class="overflow-wrap-anywhere">Bagus banget, enak dipakai!</p> </div> <div class="list-item"> <b class="overflow-wrap-anywhere">Arif</b> <small>13 November 2021</small> <p class="overflow-wrap-anywhere">Awet juga ternyata</p> </div> <div class="list-item"> <b class="overflow-wrap-anywhere">Gilang</b> <small>14 Agustus 2021</small> <p class="overflow-wrap-anywhere">Agak sedikit mahal menurut saya</p> </div> </div> </div> </div> </div> <div id="reviewForm"> <div class="card"> <div class="card-body card-no-img"> <h3 class="card-title">Tambahkan Review</h3> <form id="formAddReview" method="POST"> <input type="hidden" name="id" value="s1knt6za9kkfw1e867"> <label for="name">Nama</label> <input class="input-control" type="text" name="name"> <label for="name">Review</label> <textarea class="input-control" type="text" name="review"></textarea> <input id="submitReview" class="button-primary" type="submit" value="Tambah Review"> </form> </div> </div> </div> </div> <favorite-button class="position-fixed bottom-1 right-1"> <button aria-label="remove from favorite" id="favoriteButton" class="button-primary btn-round bg-red"> <i class="fa fa-shopping-cart" aria-hidden="true"></i> </button> </favorite-button> </div> </div> <div id="addReviewFormContainer" class="container"></div> </main> <footer> <div class="footer"> <div class="footer-logo margin-bottom-2"> storse </div> <p class="text-center text-light">Copyright © 2021 - Storse</p> </div> </footer> </body> </html>
Berikut beberapa tampilan dari website tersebut
Terima kasih, sekian postingan kali ini.
Comments
Post a Comment