Postingan ini lanjutan dari postingan sebelumnya,
Membuat Aplikasi Catatan Perjalanan - Menggunakan PHP tanpa Database #00. Silakan baca dulu jika belum membacanya, trims.
Dalam langkah ini, kegiatan ngoding sudah dimulai. Dimohon untuk tidak pingsan, oke. Karena males milih warna, keknya aplikasi perjalanan ini bakal berwarna hitam putih :v. Gapapa, warna mah masalah sepele.
"Plis, hentikan basa-basinya. Langsung ngoding aja bang."
Membuat halaman login:
1. Buat folder projek di htdocs, beri nama "catatan-perjalanan"
2. Buat file login.php
3. Isi dengan kode html dasar:
1
2
3
4
5
6
7
8
9 | <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
|
4. Isi title dengan "Halaman Login"
5. Tambahkan link css dibawah title:
1 | <link rel="stylesheet" type="text/css" href="style.css">
|
6. Di dalam tag body tambahkan tag div dengan class "kotak-login"
7. Di dalam kotak-login tambahkan:
1 | <h3><center>Halaman Login</center></h3>
|
8. Dibawah tag h3 tambahkan element form dengan dua tag input yang ber-type text dengan name "nik" dan "nama", dan mempunyai placeholder "NIK" dan "Nama Lengkap", dengan nama class "inputan"
1
2
3
4
5
6 | <form>
<input type="text" name="nik" placeholder="NIK" class="inputan">
<br>
<input type="text" name="nama" placeholder="Nama Lengkap" class="inputan">
<br>
</form>
|
9. Kemudian, masih didalam tag form, tambahkan div dengan class "kasih-jarak". Isi dengan alamat ke halaman daftar dan tombol masuk.
1
2
3
4 | <div class="kasih-jarak">
<a href="register.php">Belum punya akun?</a>
<input type="submit" class="btn" value="Masuk">
</div>
|
10. Hasil kode:
11. Preview:
Hasil akhirnya masih sangat kaku. Saatnya menambah CSS. Ngoding lagi...
Menambah CSS:
1. Buat file style.css
2. Isikan kode berikut:
1
2
3
4
5 | * {
margin: 0; /*menghilangkan margin default*/
font-family: sans-serif; /* font menjadi sansserif semua */
box-sizing: border-box; /* lebih leluasa menggunakan padding */
}
|
3. Tambahkan style untuk class "kotak-login"
1
2
3
4
5
6
7
8 | .kotak-login {
background: #aaa; /*background berwarna abu-abu*/
width: 350px; /*lebar 320px*/
padding: 20px; /*kasih jarak pinggir*/
border-radius: 10px; /*buat sudut tidak kotak*/
margin: 200px auto; /*buat kotak ketengah*/
box-shadow: 0 20px 20px black; /*beri bayangan*/
}
|
4. Tambahkan style untuk kolom input
1
2
3
4
5
6 | .inputan {
margin: 10px 0; /*kasih jarak atas bawah*/
width: 100%; /*lebar penuh*/
border-radius: 7px; /*buat sudut tumpul*/
padding: 5px; /*jarak pinggir*/
}
|
5. Kasih jarak antara link ke halaman daftar dan tombol masuk
1
2
3
4
5 | .kasih-jarak {
display: flex; /*untuk membuat tampilan fleksibel*/
justify-content: space-between; /*memberi jarak antar elemen*/
margin-top: 20px; /*jarak dengan atas*/
}
|
6. Kasih sedikit style untuk tombol masuk
1
2
3
4 | .btn {
padding: 7px;
font-weight: bold;
}
|
7. Preview:
Membuat Halaman Register:
1. Buat file register.php
2. Copy isi dari login.php lalu tempel di register.php. Edit beberapa tulisan. Berikut setelah diedit:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 | <!DOCTYPE html>
<html>
<head>
<title>Halaman Daftar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="kotak-login">
<h3><center>Halaman Daftar</center></h3>
<form>
<input type="text" name="nik" placeholder="NIK" class="inputan">
<br>
<input type="text" name="nama" placeholder="Nama Lengkap" class="inputan">
<br>
<div class="kasih-jarak">
<a href="login.php">Sudah punya akun?</a>
<input type="submit" class="btn" value="Daftar">
</div>
</form>
</div>
</body>
</html>
|
Mudah kan? Sekarang jika diklik "Belum punya akun?" maka akan mengarah ke halaman daftar. Dan juga sebaliknya, jika diklik "Sudah punya akun?" akan diarahkan ke halaman masuk.
Merasa melewatkan sesuatu? Download aja.
Selanjutnya yaitu membuat halaman home.👋👋👋
Komentar
Posting Komentar
Saya sangat menghargai kesopanan Anda😊