Pos ini merupakan dokumentasi pengerjaan tugas 6 pemrograman Web dalam pembuatan Form Login, Register, dan Contact Us.
Website yang dibuat berupa front yang dibuat menggunakan HTML dan library CSS (Bootsrap/Tailwind). Website ini berisi form Login, Register, dan Contact Us yang memiliki brand M.Co (Maroqi Company). Berikut adalah tampilan Website yang dibuat:
Berikut langkah-langkah pembuatan website diatas:
Menyiapkan Aset Website
Aset dari website ini menggunakan logo dari M.Co.
Menuliskan Kode HTML (index: Login dan Register)
<!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">
<link rel="stylesheet" href="./styles.css" type="text/css" />
<title>M.Co | Akun</title>
</head>
<body class="h-screen overflow-hidden flex items-center justify-center bg-gray-400" style="background: #edf2f7;">
<!-- Container -->
<div class="container mx-auto">
<div class="flex justify-center px-6 my-12">
<!-- Row -->
<div class="w-full xl:w-3/4 lg:w-11/12 flex shadow-md" x-data="{ page : 'daftar' }">
<!-- Col -->
<div class="w-full h-auto bg-gray-400 hidden lg:block lg:w-5/12
bg-cover rounded-l-lg" style="background-image: url('./assets/bg-main.png');"></div>
<!-- Daftar -->
<div class="w-full lg:w-7/12 bg-white p-5 rounded-lg lg:rounded-l-none" x-show="page == 'daftar'">
<h1 class="pt-4 text-3xl sm:text-3xl text-center text-gray-800 dark:text-white font-extrabold tracking-tight">
Daftar Akun
</h1>
<div class="h-0.5 bg-gray-200 mx-auto my-2" style="width: 150px;"></div>
<h3 class="text-sm text-center">Buat Akun Anda terlebih dahulu <br /> agar bisa menggunakan situs ini lebih
lanjut!</h3>
<form class="px-8 pt-12 pb-8 mb-4 bg-white rounded">
<div class="mb-0.5">
<label class="block mb-2 text-sm font-bold text-gray-700" for="nama">
Nama
</label>
<input class="w-full px-3 py-2 mb-3 text-sm leading-tight
text-gray-700 border rounded shadow appearance-none
focus:outline-none focus:shadow-outline" id="nama" type="nama" placeholder="Nama" />
</div>
<div class="mb-0.5">
<label class="block mb-2 text-sm font-bold text-gray-700" for="email">
Email
</label>
<input class="w-full px-3 py-2 mb-3 text-sm leading-tight
text-gray-700 border rounded shadow appearance-none
focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="Email" />
</div>
<div class="mb-4 md:flex md:justify-between">
<div class="mb-4 md:mr-2 md:mb-0">
<label class="block mb-2 text-sm font-bold text-gray-700" for="password">
Password
</label>
<input class="w-full px-3 py-2 mb-3 text-sm leading-tight
text-gray-700 border rounded shadow
appearance-none focus:outline-none focus:shadow-outline" id="password" type="password"
placeholder="******************" />
</div>
<div class="md:ml-2">
<label class="block mb-2 text-sm font-bold text-gray-700" for="c_password">
Konfirmasi Password
</label>
<input class="w-full px-3 py-2 mb-3 text-sm leading-tight
text-gray-700 border rounded shadow appearance-none
focus:outline-none focus:shadow-outline" id="c_password" type="password"
placeholder="******************" />
</div>
</div>
<div class="mb-6 text-center">
<button class="w-full px-4 py-2 font-bold text-white bg-blue-500
rounded-full hover:bg-blue-700 focus:outline-none
focus:shadow-outline" type="button">
Daftar Akun
</button>
</div>
<hr class="mb-6 border-t" />
<div class="text-center">
<a class="inline-block text-sm text-blue-500 align-baseline hover:text-blue-800"
@click="page = 'masuk'" style="cursor: pointer;">
Sudah punya akun? Masuk!
</a>
</div>
</form>
<div class="text-center">
<a class="inline-block text-sm text-blue-500 align-baseline
hover:text-blue-800" href="./connect.html">
Hubungi Kami
</a>
</div>
</div>
<!-- Masuk -->
<div class="w-full lg:w-7/12 bg-white p-5 rounded-lg lg:rounded-l-none" x-show="page == 'masuk'">
<h1 class="pt-4 text-3xl sm:text-3xl text-center text-gray-800 dark:text-white font-extrabold tracking-tight">
Masuk Akun
</h1>
<div class="h-0.5 bg-gray-200 mx-auto my-2" style="width: 150px;"></div>
<h3 class="text-sm text-center">Pastikan Anda memasukkan Email dan Password dengan benar <br /> agar bisa menggunakan situs ini lebih
lanjut!</h3>
<form class="px-8 pt-12 pb-8 mb-4 bg-white rounded">
<div class="mb-0.5">
<label class="block mb-2 text-sm font-bold text-gray-700" for="email">
Email
</label>
<input class="w-full px-3 py-2 mb-3 text-sm leading-tight
text-gray-700 border rounded shadow appearance-none
focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="Email" />
</div>
<div class="mb-0.5">
<label class="block mb-2 text-sm font-bold text-gray-700" for="password">
Password
</label>
<input class="w-full px-3 py-2 mb-3 text-sm leading-tight
text-gray-700 border rounded shadow
appearance-none focus:outline-none focus:shadow-outline" id="password" type="password"
placeholder="******************" />
</div>
<div class="mb-6 text-center">
<button class="w-full px-4 py-2 font-bold text-white bg-blue-500
rounded-full hover:bg-blue-700 focus:outline-none
focus:shadow-outline" type="button">
Masuk Akun
</button>
</div>
<hr class="mb-6 border-t" />
<div class="text-center">
<a class="inline-block text-sm text-blue-500 align-baseline
hover:text-blue-800" href="#">
Lupa password?
</a>
</div>
<div class="text-center">
<a class="inline-block text-sm text-blue-500 align-baseline hover:text-blue-800"
@click="page = 'daftar'" style="cursor: pointer;">
Belum punya akun? Daftar!
</a>
</div>
</form>
<div class="text-center">
<a class="inline-block text-sm text-blue-500 align-baseline
hover:text-blue-800" href="./connect.html">
Hubungi Kami
</a>
</div>
</div>
</div>
</div>
</div>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</body>
</html>
Menuliskan Kode HTML (connect: Contact Us)
<!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">
<link rel="stylesheet" href="./styles.css" type="text/css" />
<title>M.Co | Hubungi Kami</title>
</head>
<body class="h-screen overflow-hidden flex items-center justify-center bg-gray-400" style="background: #edf2f7;">
<!-- Container -->
<div class="container mx-auto">
<div class="flex flex-col w-full xl:w-3/4 lg:w-11/12 justify-center px-6 my-12 mx-auto">
<div class="h-16 bg-cover bg-center rounded-t-lg" style="background-image: url('./assets/bg-header.png');">
</div>
<div class="grid grid-cols-1 md:grid-cols-2 p-5 bg-white rounded-b-lg shadow-md">
<div class="p-6 mr-2 bg-gray-100 dark:bg-gray-800 sm:rounded-lg flex">
<div class="m-auto">
<h1 class="text-4xl sm:text-5xl text-gray-800 dark:text-white font-extrabold tracking-tight">
Hubungi Kami
</h1>
<p class="text-normal text-lg sm:text-2xl font-medium text-gray-600 dark:text-gray-400 mt-2">
Kirimkan pesan kepada kami
</p>
<div class="flex items-center mt-8 text-gray-600 dark:text-gray-400">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
viewBox="0 0 24 24" class="w-8 h-8 text-gray-500">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<div class="ml-4 text-md tracking-wide font-semibold w-60">
Jl. Moh. Hatta, Patianrowo, Nganjuk,
64391
</div>
</div>
<div class="flex items-center mt-4 text-gray-600 dark:text-gray-400">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
viewBox="0 0 24 24" class="w-8 h-8 text-gray-500">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
<div class="ml-4 text-md tracking-wide font-semibold w-40">
+62 812345678
</div>
</div>
<div class="flex items-center mt-2 text-gray-600 dark:text-gray-400">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
viewBox="0 0 24 24" class="w-8 h-8 text-gray-500">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
<div class="ml-4 text-md tracking-wide font-semibold w-40">
jalilpro31@gmail.com
</div>
</div>
</div>
</div>
<form class="px-8 pt-12 pb-8 mb-4 bg-white rounded">
<div class="mb-0.5">
<label class="block mb-2 text-sm font-bold text-gray-700" for="nama">
Nama
</label>
<input class="w-full px-3 py-2 mb-3 text-sm leading-tight
text-gray-700 border rounded shadow appearance-none
focus:outline-none focus:shadow-outline" id="nama" type="nama" placeholder="Nama" />
</div>
<div class="mb-0.5">
<label class="block mb-2 text-sm font-bold text-gray-700" for="email">
Email
</label>
<input class="w-full px-3 py-2 mb-3 text-sm leading-tight
text-gray-700 border rounded shadow
appearance-none focus:outline-none focus:shadow-outline" id="email" type="email"
placeholder="Email" />
</div>
<div class="mb-0.5">
<label class="block mb-2 text-sm font-bold text-gray-700" for="pesan">
Pesan
</label>
<textarea class="w-full px-3 py-2 mb-3 text-sm leading-tight
text-gray-700 border rounded shadow
appearance-none focus:outline-none focus:shadow-outline" id="pesan" type="pesan"
placeholder="Apa yang ingin Anda sampaikan?"></textarea>
</div>
<div class="mb-6 text-center">
<button class="w-full px-4 py-2 font-bold text-white bg-blue-500
rounded-full hover:bg-blue-700 focus:outline-none
focus:shadow-outline" type="button">
Kirim
</button>
</div>
</form>
</div>
</div>
</div>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</body>
</html>
Deploy Website ke Server
- Menambahkan subdomain baru pada DNS Management di domain maroqi.online.
- Masuk pada server melalui SSH (Saya menggunakan Visual Studio Code)
- Membuat virtual host dengan nama sesuai subdomain mco.maroqi.online
- Mengunggah source code dan asset website pada folder sesuai yang tertulis di virtual host (/var/www/mco.maroqi.online/public)
- Melakukan aktivasi situs menggunakan perintah pada apache2 kemudian melakukan restart apache2
- Sudah terunggah (mco.maroqi.online)
Maroqi Jalil Blog 