Skip to main content

EAS MPPL - Demo dan Dokumentasi EAS

 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
Post a Comment

Tugas 6 PWEB - Menggunakan Framework Bootstrap

Halaman Kontak

 

Halaman Kontak

Pada postingan ini, saya akan menjelaskan bagaimana membuat halaman Login dan Kontak menggunakan Framework Bootstrap.

Berikut adalah link live website yang saya buat link

Terdapat dua halaman yang bisa diakses yaitu, halaman Login dan halaman Kontak

Halaman Login

Dalam halaman ini saya menambahkan beberapa komponen yang disediakan oleh Bootstrap, diantaranya : 

  • Horizontal Image Card
  • Floating Label Input
  • Button

Selain itu saya juga menggunakan beberapa efek tambahan untuk mempercantik halaman.

Berikut adalah kode lengkap dari halaman Login

<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>Halaman Login Bootstrap</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body class="bg-light">
<section class="container p-4 flex-column min-vh-100 d-flex align-items-center justify-content-center">
<div class="card shadow align-center min-vw-75">
<div class="row g-0">
<div class="col-md-4">
<img class="img-fluid rounded-start h-100" src="./background.jpg" alt="background">
</div>
<div class="col-md-8 p-4">
<div class="card-body">
<img src="./logo.jpg" alt="Logo" width="100">
<h2 class="mb-4">Login with your account</h2>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<button class="btn text-white btn-lg mt-4 shadow border-0"
style="background-image: linear-gradient(to right, #CF1E2E, #F8AA2C); background-clip: padding-box;">Login</button>
</div>
</div>
</div>
</div>
<div class="mt-4">
<a class="btn" href="./contact-us.html">Contact Us</a>
</div>
</section>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>
view raw login.html hosted with ❤ by GitHub

Halaman Kontak

Dalam halaman ini juga saya menambahkan beberapa komponen yang ditambahkan pada halaman Login, hanya saja bedanya di sini saya menambahkan komponen Floating Label Textarea

Berikut adalah kode lengkap dari halaman Kontak

<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>Halaman Login Bootstrap</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body class="bg-light">
<section class="container p-4 flex-column min-vh-100 d-flex align-items-center justify-content-center">
<div class="card shadow align-center min-vw-75">
<div class="row g-0">
<div class="col-md-4">
<img class="img-fluid rounded-start h-100" src="./background.jpg" alt="background">
</div>
<div class="col-md-8 p-4">
<div class="card-body">
<img src="./logo.jpg" alt="Logo" width="100">
<h2 class="mb-4">Get in touch with us</h2>
<div class="row g-2">
<div class="col-md">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="floatingInputName"
placeholder="yourname">
<label for="floatingInputName">Your name</label>
</div>
</div>
<div class="col-md">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInputEmail"
placeholder="name@example.com">
<label for="floatingInputEmail">Email address</label>
</div>
</div>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a message here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">Messages</label>
</div>
<button class="btn text-white btn-lg mt-4 shadow border-0"
style="background-image: linear-gradient(to right, #CF1E2E, #F8AA2C); background-clip: padding-box;">Submit</button>
</div>
</div>
</div>
</div>
<div class="mt-4">
<a class="btn" href="login.html">Login</a>
</div>
</section>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>
view raw contact-us.html hosted with ❤ by GitHub

Sekian postingan kali ini, semoga bermanfaat.

Comments

Post a Comment

Popular posts from this blog

Tugas 1 PBKK - Portofolio Aplikasi Framework

Berikut beberapa aplikasi yang pernah dibuat menggunakan bantuan framework : Kulturan Link Website Kulturan merupakan aplikasi berbasis website yang dapat digunakan oleh pekerja seni, drama, dan tari untuk mempromosikan serta memperjualbelikan karyanya secara online. Pengguna dapat membeli hasil karya pekerja seni berupa hasil pementasan atau pertunjukkan seniman di Indonesia. Framework : ReactJS, ExpressJS, Node.js dan Material UI Screenshot tampilan :  Medify.id Link Website Medify.id merupakan salah satu aplikasi berbasis website yang merupakan website dari perusahaan Medify. Website ini menyediakan informasi-informasi penting serta fitur-fitur yang ditawarkan oleh Medify. Framework : Bootstrap, Laravel 8 Screenshot tampilan : Presto Link Website Presto merupakan aplikasi berbasis website yang berisi daftar restoran terdekat beserta detailnya. Dalam website ini, pengguna juga bisa berkomentar di masing-masing restoran, dan juga menambahkan restoran ke dalam daftar favoritnya. Fr...
Post a Comment
Read more

EAS PWEB - Pemrograman Web

  Pada postingan ini, saya akan menjelaskan hasil pengerjaan EAS yang telah saya kerjakan   Dan berikut adalah hasil desain rancangan prototipe dari aplikasi yang akan dibuat
Post a Comment
Read more

Tugas 9 PBKK - Laravel : Membuat Landing Page

Pada postingan kali ini, akan membahas membuat landing page menggunakan Laravel 8. Pada postingan ini saya akan mencoba membuat Landing Page dari Dicoding Indonesia ( dicoding.com ) dengan tampilan yang berbeda. Langsung saja ikuti langkah-langkah berikut: Pertama, buat sebuah view baru pada resources/views/ dengan nama homepage.blade.php lalu isi dengan kode berikut: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <!DOCTYPE html> <html lang= "{{ str_replace('_', '-', app()->getLocale()) }}" > <head> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <title> Dicoding - Bangun Karirmu sebagai Developer Profesional </title> <!-- Fonts --> <link href= "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" r...
Post a Comment
Read more