Langsung ke konten utama

Belajar Web Ceria 5

Login & Contact us Form

Halo kisanak, kali ini aku akan berbagi ilmu tentang cara membuat login dan Contact us Form. Form ini dibuat dengan menggunakan bootstraps dan ada sedikit Javascript. Kalian bisa melihat secara lengkap repositorinya disini. Untuk login disini terdapat kolom input email dan password. Untuk Contact us form berisi Nama, email, nomor HP, dan pesan yang ingin disampaikan. Berikut tampilan dari webnya

Login


Contact Us



Untuk Source Codenya ada dibawah ini ya

index.html

<!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.0">
<title>latian form kontak</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
<!------ Include the above in your HEAD tag ---------->
</head>
<body>
<div class="container-fluid py-5 mx-auto px-5">
<div class="card border-0">
<div class="row d-flex">
<div class ="col-lg-6">
<div class="pb-5">
<div class="row">
<img class="logo" src="img/Olive.jpg" alt="logo">
</div>
<div class="row px-3 justify-content-center mt-4 mb-5 borderline">
<img class="image" src="img/ilustrasi.jpg" alt="ilustrasi">
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card2 card border-0 px-4 py-5">
<h1 class="row mb-4 px-3 text-center">Welcome to Olive Media Online</h1>
<div class="row px-3 mb-4">
<div class="line"></div>
</div>
<form action="index.html" onsubmit="return submitForm()">
<div class="row px-3">
<label for="email" class="mb-1">
<h6 class="mb-0 text-sm">Email Anda</h6>
</label>
<input type="email" name="email" id="email" class="mb-4" placeholder="Masukkan email anda!" required>
</div>
<div class="row px-3">
<label for="password" class="mb-1">
<h6 class="mb-0 text-sm">Password Anda</h6>
</label>
<input type="password" name="password" id="password" class="mb-4" placeholder="Masukkan password anda!" required>
</div>
<div class="row px-3 mb-4">
<a href="#" class="ml-auto mb-0 text-sm">Lupa Password</a>
</div>
<div class="row mb-3 px-3">
<button type="submit" class="btn btn-blue text-center" name="login" id="login" value="login">Login</button>
</div>
</form>
<div class="row mb-4 px-3">
<h6 class="font-weight-bold">Belum punya akun? <a href="#" class="text-danger"> Register sekarang!</a></h6>
</div>
</div>
</div>
</div>
<div class="mb-4">
<center>
<h5 class="font-weight-bold">Have a message for us? Please drop <a href="pesan.html" class="text-danger">here</a>.</h5></h5>
</center>
</div>
</div>
</div>
<div class="py-4">
<center>
<small class="ml-4 text-white">
Copyright &copy; Apotek Olive Medika 2021 All rights reserved.
</small>
</center>
</div>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

pesan.html

<!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.0">
<title>latian form kontak</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
<!------ Include the above in your HEAD tag ---------->
</head>
<body>
<div class="container-fluid py-5 mx-auto px-5">
<div class="card border-0">
<div class="row d-flex">
<div class ="col-lg-6">
<div class="pb-5">
<div class="row">
<img class="logo" src="img/Olive.jpg" alt="logo">
</div>
<div class="row px-3 justify-content-center mt-4 mb-5 borderline">
<img class="image" src="img/ilustrasi.jpg" alt="ilustrasi">
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card2 card border-0 px-4 py-5">
<h1 class="row mb-4 px-3 text-center">Message to Olive Media Online</h1>
<div class="row px-3 mb-4">
<div class="line"></div>
</div>
<form action="index.html" onsubmit="return submitForm()">
<div class="row px-3">
<label class="mb-1">
<h6 class="mb-0 text-sm">Email Anda</h6>
</label>
<input type="email" name="email" id="email" class="mb-4" placeholder="Masukkan email anda!" required>
</div>
<div class="row px-3">
<label class="mb-1">
<h6 class="mb-0 text-sm">Nama Anda</h6>
</label>
<input type="text" name="nama" id="nama" class="mb-4" placeholder="Masukkan nama anda!" required>
</div>
<div class="row px-3">
<label class="mb-1">
<h6 class="mb-0 text-sm">Nomor Smartphone Anda</h6>
</label>
<input type="text" name="phone" id="phone" class="mb-4" placeholder="Masukkan Smartphone anda!" required>
</div>
<div class="row px-3">
<label class="mb-1">
<h6 class="mb-0 text-sm">Pesan Anda</h6>
</label>
<textarea type="text" row="5" name="message" id="message" class="mb-4" placeholder="Masukkan Pesan anda!" required></textarea>
</div>
<div class="row mb-3 px-3">
<button type="submit" class="btn btn-blue text-center" name="login" id="login" value="login">Login</button>
</div>
</form>
</div>
</div>
</div>
<div class="mb-4">
<center>
<h5 class="font-weight-bold">Click <a href="index.html" class="text-danger">here</a> to login.</h5></h5>
</center>
</div>
</div>
</div>
<div class="py-4">
<center>
<small class="ml-4 text-white">
Copyright &copy; Apotek Olive Medika 2021 All rights reserved.
</small>
</center>
</div>
</body>
</html>
view raw pesan.html hosted with ❤ by GitHub

style.css

body{
color: black;
overflow-x: hidden;
font-family: sans-serif;
height: 100%;
background-repeat: no-repeat;
background: -webkit-linear-gradient(left, #0072ff, #00c6ff);
}
.logo{
width: 100px;
height: 100px;
margin-top: 20px;
margin-left: 90px;
}
.image {
width: 480px;
height: 360px;
}
.card2 {
margin: 0px 40px;
}
.or {
width: 10%;
font-weight: bold;
}
h1{
text-align: center;
}
.line {
height: 1px;
width: 100%;
background-color: #e0e0e0;
margin-top: 10px;
}
::placeholder {
color : #bdbdbd;
opacity: 1;
font-weight: 300;
}
:-ms-input-placeholder {
color: #bdbdbd;
font-weight: 300;
}
input, textarea {
padding: 10px 12px;
border: 1px solid #0072ff;
border-radius: 10px;
margin-bottom: 5px;
margin-top: 2px;
width: 100%;
/* box-sizing: border-box; */
/* color: royalblue; */
/* font-size: 14px; */
/* letter-spacing: 1px; */
resize: none;
}
input:focus, textarea:focus {
/* -moz-box-shadow: none !important; */
box-shadow: none !important;
/* outline-width: 0; */
}
/* .border-line{
border-right: 2px solid palevioletred;
} */
.btn-blue {
background-color: #0072ff;
width: 125px;
color: white;
border-radius: 10px;
}
.btn-blue:hover{
background-color: royalblue;
color: white;
cursor: pointer;
}
.text-sm{
font-size:14px !important;
}
a {
color: inherit;
cursor: pointer;
}
a:hover{
text-decoration: none;
}
view raw style.css hosted with ❤ by GitHub

main.js

function submitForm(){
alert("Login berhasil")
}
view raw main.js hosted with ❤ by GitHub

Label

Labels:

Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar Java Ceria 5

Game The world-of-zuul      Halo kisnak, kali ini aku akan membuat sebuah project kecil yang dibuat berdasarkan buku Object First With Java. Game ini sebenarnya bertipe adventure, tapi ya biasa aja dan membosankan. Akan tetapi, ini bisa menjadi implementasi untuk Designing Classes. Terdapat 5 kelas pada project ini, yaitu: ■ CommandWords - Kelas CommandWords mendefinisikan semua Command yang valid dalam permainan (go, help, quit). Ini dilakukan dengan menyimpan array objek String yang mewakili kata-kata perintah. ■ Parser  - Parser membaca baris input dari terminal dan mencoba menafsirkannya sebagai Command. Ini membuat objek dari Class Command yang mewakili perintah itu masuk. ■ Command  - Sebuah objek perintah mewakili perintah yang dimasukkan oleh pengguna. Ini memiliki metode yang memudahkan kita untuk memeriksa apakah ini adalah perintah yang valid dan untuk mendapatkan kata pertama dan kedua dari perintah tersebut sebagai string terpisah. ■ Room - Objek ...
Posting Komentar
Read more »

Belajar Java Ceria 4

Technical Support System Sederhana     Sebuah Technical Support System yang sesungguhnya pasti memakai bot didalamnya, dan itu perlu ilmu yang lebih tinggi karena merupakan salah satu contoh aplikasi kognitif dan penerapan AI. Tapi kali ini aku akan buat yang versi sederhana saja berdasarkan buku Objects First With Java bab 5 bagian 5.2. Jadi dibuku sudah dibuat program dasarnya,  yang betul-betul simpel banget dan biasa aja. Nah disini aku sedikit modifikasi agar sistem ini terlihat lebih "hidup". Jadi berikut ini Class dari programnya, dan sudah kubuat dokumentasi singkat didalamnya InputReader Responder supportSystem mainSupportSystem Ini akan jadi main program yang akan menjalankan seluruh Class di atas Dan berikut ini salah satu output yang dapat diberikan Kalian bisa kok menggunakan kode diatas dan membuat variasi yang lebih menarik dari ini. Mantap, Rispek!!✌
Posting Komentar
Read more »

Belajar Java Ceria 3

 Grouping Object      Kali ini aku akan mencoba implementasi sederhana tentang grouping object dengan Collection serta membuat Sistem lelang sangat sederhana  Java Collection Java Collection secara sederhana merupakan sebuah objek. Collectionadalah framework yang menyediakan tempat untuk menyimpan dan memanipulasi sekumpulan objek. framework ini dapat melakukan pencarian, pengurutan, memasukan data dan menghapus. Collection menyediakan berbagai interface seperti Set, List, Queue, Dequeue dan untuk class-nya antara lain, ArrayList, Vector, Linked List, dll.  ArrayList Contoh ArrayList ini memakai iterasi while Contoh ArrayList dengan For-Each Loop ini memakai iterasi for Contoh ArrayList dan Class Data Disini perlu dibuat dulu Class Mahasiswa, bisa seperti ini Dan Seperti ini Class dari ArrayListnya Contoh Memakai addAll di ArrayList Contoh Memakai RemoveAll di ArrayList Contoh Memakai RetainAll di ArrayList Demikian berbagai contoh pengunaan Arraylist. Lal...
3 komentar
Read more »