Langsung ke konten utama

TUGAS 3 PEMROGRAMAN WEB (D) - Warung Tegal


Tugas kali ini membuat website Warung Makan Tegal. Dalam proses pengerjaannya, menggunakan HTML, CSS, dan JavaScript serta VSCode sebagai text editor. Di website ini, saya mengaplikasikan penggunaan embed video dari Youtube dan image carousel atau slideshow. Laman website-nya dapat diakses pada link berikut. Untuk hosting web sendiri memakai Netlify.

Konten dari website:
  1. Main page, berisi daftar makanan, masakan populer, kontak dari warung tegal, serta menu apa saja yang tersedia di dalam website.

Tampilan Website

  1. Main page

Source Code

  • index.html
    • <!DOCTYPE html>
    <html>
    <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">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Web Warung Tegal</title>
    </head>
    <body>
    <div class="wrapper">
    <header>
    <h1>Warung Tegal</h1>
    <nav>
    <ul>
    <li><a href="" class="current">Beranda</a></li>
    <li><a href="">Daftar Masakan</a></li>
    <li><a href="">Katering</a></li>
    <li><a href="">Galeri</a></li>
    <li><a href="">Tentang</a></li>
    <li><a href="">Kontak</a></li>
    </ul>
    </nav>
    </header>
    <div class="slideshow-container">
    <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="https://img.inews.co.id/media/822/files/inews_new/2021/02/03/IMG_03022021_142500__822_x_430_piksel_.jpg" style="height: 350px;">
    <div class="text">Soto</div>
    </div>
    <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="https://www.unileverfoodsolutions.co.id/dam/global-ufs/mcos/SEA/calcmenu/recipes/ID-recipes/chicken-&-other-poultry-dishes/pecel-madiun/main-header.jpg" style="height: 350px;">
    <div class="text">Pecel</div>
    </div>
    <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="https://yentit.com/wp-content/uploads/2020/02/1.jpg" style="height: 350px;">
    <div class="text">Sayur Sop</div>
    </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <section class="courses">
    <article>
    <h2 style="margin: 20px 0px 0px 20px; color: #de6581;">Masakan</h2>
    <figure>
    <img src="img/soto.jpg" alt="soto" />
    <figcaption>Soto Indonesia</figcaption>
    </figure>
    <hgroup>
    <h2>Soto Ayam</h2>
    <h3>Makanan Berkuah</h3>
    </hgroup>
    <p>Soto ayam adalah makanan khas Indonesia yang berupa sejenis sup ayam dengan kuah yang berwarna kekuningan.</p>
    </article>
    <article>
    <figure>
    <img src="img/pecel.jpg" alt="pecel" />
    <figcaption>Pecel Indonesia</figcaption>
    </figure>
    <hgroup>
    <h2>Masakan Pecel</h2>
    <h3>Makanan dengan Bumbu Kacang</h3>
    </hgroup>
    <p>Pecel adalah makanan yang menggunakan bumbu sambal kacang sebagai bahan utamanya yang dicampur dengan aneka jenis sayuran.</p>
    </article>
    <article>
    <figure>
    <img src="img/sop.jpg" alt="sop" />
    <figcaption>Sop Indonesia</figcaption>
    </figure>
    <hgroup>
    <h2>Masakan Sayur Sop</h2>
    <h3>Makanan Berkuah</h3>
    </hgroup>
    <p>Sayur sop adalah sup sayuran Indonesia yang terbuat dari sayuran dalam kaldu ayam atau sapi. Makanan ini biasanya disajikan sebagai sarapan atau makan siang.</p>
    </article>
    </section>
    <aside>
    <section class="popular-recipes">
    <h2>Masakan Populer</h2>
    <iframe width="225" height="150" src="https://www.youtube.com/embed/fJfGNOvJbV0"></iframe>
    <a href="">Sayur Sop</a>
    <a href="">Sayur Asem</a>
    <a href="">Sayur Lodeh</a>
    <a href="">Sayur Bayam</a>
    </section>
    <section class="contact-details">
    <h2>Kontak</h2>
    <p>Warung Tegal<br />di seluruh Indonesia</p>
    </section>
    </aside>
    <footer>
    &copy; 2015 Warung Tegal
    </footer>
    </div>
    <script>
    var slideIndex = 1;
    showSlides(slideIndex);
    function plusSlides(n) {
    showSlides(slideIndex += n);
    }
    function currentSlide(n) {
    showSlides(slideIndex = n);
    }
    function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
    slideIndex = 1
    }
    if (n < 1) {
    slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
    }
    </script>
    </body>
    </html>
    view raw index.html hosted with ❤ by GitHub
  • style.css
    • header, section, footer, aside, nav, article, figure, figcaption {
    display: block;
    }
    body {
    color: #666666;
    background-color: #f9f8f6;
    background-image: url("img/pink-wall.jpg");
    background-position: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.4em;
    margin: 0px;
    }
    .wrapper {
    width: 940px;
    margin: 20px auto 20px auto;
    border: 2px solid #985d6a;
    background-color: #ffffff;
    box-shadow: 10px 10px 8px #888888;
    }
    header {
    height: 160px;
    background-image: url("img/header.png");
    }
    h1 {
    text-indent: -9999px;
    width: 940px;
    height: 130px;
    margin: 0px;
    }
    nav, footer {
    clear: both;
    color: #ffffff;
    background-color: #de6581;
    height: 30px;
    }
    nav ul {
    margin: 0px;
    padding: 5px 0px 5px 30px;
    }
    nav li {
    display: inline;
    margin-right: 40px;
    }
    nav li a {
    color: #ffffff;
    }
    nav li a:hover, nav li a.current {
    color: #000000;
    }
    section.courses {
    float: left;
    width: 659px;
    border-right: 1px solid #eeeeee;
    }
    article {
    clear: both;
    overflow: auto;
    width: 100%;
    }
    hgroup {
    margin-top: 40px;
    }
    figure {
    float: left;
    width: 290px;
    height: 220px;
    padding: 5px;
    margin: 20px;
    border: 1px solid #eeeeee;
    }
    figcaption {
    font-size: 90%;
    text-align: center;
    font-weight: 500;
    color: #985d6a;
    }
    aside {
    width: 230px;
    float: left;
    padding: 0px 0px 0px 20px;
    }
    aside section a {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #eeeeee;
    }
    aside section a:hover {
    color: #985d6a;
    background-color: #efefef;
    }
    a {
    color: #de6581;
    text-decoration: none;
    font-weight: 500;
    }
    h1, h2 {
    font-weight: 600;
    }
    h2 {
    margin: 10px 0px 5px 0px;
    padding: 0px;
    }
    h3 {
    margin: 0px 0px 10px 0px;
    color: #de6581;
    font-weight: normal;
    }
    aside h2 {
    padding: 30px 0px 10px 0px;
    color: #de6581;
    }
    footer {
    font-size: 100%;
    padding: 7px 0px 0px 20px;
    }
    img {
    width: 100%;
    vertical-align: middle;
    }
    * {
    box-sizing: border-box;
    }
    /* Slideshow components */
    .slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
    }
    .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    }
    .next {
    right: 0;
    border-radius: 3px 0 0 3px;
    }
    .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
    }
    .text {
    color: #f2f2f2;
    font-size: 20px;
    font-weight: 600px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
    }
    .numbertext {
    color: #f2f2f2;
    font-size: 14px;
    font-weight: 600px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    }
    .dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    }
    .active, .dot:hover {
    background-color: #717171;
    }
    .mySlides {
    display: none;
    }
    /* Fading animation */
    .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
    }
    @-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
    }
    @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
    }
    view raw style.css hosted with ❤ by GitHub

Komentar

Posting Komentar

Postingan populer dari blog ini

ETS PEMROGRAMAN BERORIENTASI OBJEK (B) - Mesin ATM

1. Tuliskan skenario fungsionalitas aplikasi berdasarkan tayangan tersebut! Pada video yang ada, ditampilkan proses setor tunai pada mesin ATM. Jadi, awalnya nasabah memasukkan kartu ATM ke dalam mesin. Lalu, memasukkan nomor pin sebanyak 6 digit sesuai yang telah didaftarkan. Jika pin salah, maka mesin akan meminta mengulangi agar memasukkan pin yang benar. Nah, di mesin ATM ini sendiri ada beberapa fitur yaitu setor tunai, penarikan tunai, dan transaksi lainnya (seperti transfer, pembayaran listrik, dll.). Dalam video, nasabah ingin melakukan proses setor tunai. Perlu diketahui di beberapa mesin, setor tunai ada yang menerima pecahan uang Rp100.000,00 saja, ada juga yang juga menerima Rp50.000,00, di video sepertinya hanya menerima Rp100.000,00. Lalu, juga ada batas maksimal berapa nominal atau jumlah uang yang dimasukkan, di video batasnya adalah 50 lembar. Jika lebih, maka kelebihannya akan dikembalikan oleh mesin. Setelah memasukkan uang ke dalam mesin, mesin akan memproses dan ke...
Posting Komentar
Baca selengkapnya

TUGAS 3 REKAYASA KEBUTUHAN (A) - Elisitasi Kebutuhan SI Evaluasi Kegiatan Sekretariat ITS

Tugas kali ini melakukan elisitasi kebutuhan dari salah satu  Spesifikasi Kebutuhan Perangkat Lunak  (SPKL) dari aplikasi  SI Evaluasi Kegiatan Sekretariat ITS (SIETS)   yang dibuat oleh Insitut Teknologi Sepuluh Nopember (ITS) Surabaya . Sistem Informasi ini merupakan sistem yang diwacanakan untuk memenuhi kebutuhan ITS akan penerimaan masukan dari berbagai kegiatan ITS yang bersifat daring akibat pandemi COVID-19 agar nantinya semasa transisi dari luring ke daring sistem dapat berjalan dengan lancar. Untuk SKPL-nya sendiri dapat dilihat di bawah ini: Elisitasi Elisitasi adalah teknik untuk memperoleh informasi melalui percakapan dengan sesorang dimana orang tersebut tidak sadar sedang digali informasi yang dimiliki. Proses elisitasi digunakan untuk menentukan kebutuhan suatu sistem dengan cara berkomunikasi dengan pengguna tentang perkembangan kebutuhan sistem yang akan dibangun. Ada beberapa hal yang dapat dianalisis sebagai tahap penjajakan dalam memban...
Posting Komentar
Baca selengkapnya