Membuat Aplikasi Catatan Perjalanan - Tampil dan Tambah Data #03

 Setelah membuat halaman home, selanjutnya membuat halaman tambah catatan perjalanan dan halaman tampil data yang sudah diinputkan.

Langkah ini akan lebih mudah dari langkah sebelumnya. Karena sudah tak perlu membuat header lagi. Easy kan?Karena melanjutkan langkah sebelumnya, Langkah ini juga memerlukan kode langkah sebelumnya, jika belum punya silakan download di sini.

Buka Text Editornya, dan ngoding lagi👊...

Membuat Halaman Tambah Data

1. Buat File isi.php

2. Copy semua kode di file index.php lalu paste-kan di file isi.php

3. Ganti class sambutan menjadi class "konten", dan hapus isi dari class konten. Kode dari isi.php menjadi seperti berikut:

<?php include 'header.php'; ?>
		<div class="konten">
			
		</div>
	</div>
</body>
</html>

4. Di dalam class konten tambahkan form, di dalam form tambah tag label yang nantinya digunakan untuk merapikan inputan.

<form>
	<table>
		
	</table>
</form>

5. Di dalam elemen table tambahkan inputan yang diperlukan, yakni: tanggal, waktu, lokasi, dan suhu.

<tr>
	<td>Tanggal</td>
	<td><input type="date" name="tgl"></td>
</tr>
<tr>
	<td>Waktu</td>
	<td><input type="time" name="waktu"></td>
</tr>
<tr>
	<td>Lokasi</td>
	<td><input type="text" name="lokasi"></td>
</tr>
<tr>
	<td>Suhu</td>
	<td><input type="number" step=".01" name="suhu"></td>
</tr>
<tr>
	<td> </td>
	<td><input type="submit" value="KIRIM"></td>
</tr>

 *pada input suhu terdapat step=".01" yang berguna supaya inputannya memperbolehkan bilangan desimal dengan dua angka dibelakang koma(lebih tepatnya di belakang titik).

6. Tambahkan css untuk class "konten"

.konten {
	width: 100%;
	margin-top: 100px;
	padding: 20px;
	background: #ddd;
}

7. Preview

 

Membuat Halaman Tampil Data

1. Buat file php baru dengan nama tampil.php

2. Copy semua kode di isi.php ke dalam tampil.php

3. Ganti semua kode di dalam elemen div dengan class konten dengan kode berikut:

<table border="1" style="width: 100%">
	<tr>
		<th>Tanggal</th>
		<th>Waktu</th>
		<th>Lokasi</th>
		<th>Suhu</th>
	</tr>
	<tr>
		<td>2022/02/22</td>
		<td>08:40</td>
		<td>Istana Negara</td>
		<td>36.8 C</td>
	</tr>
</table>

4. Preview

Sangat mudah kan? Jangan senang dulu, selanjutnya akan sedikit lebih... membutuhkan kesabaran.

Download kodenya di sini.

Selanjutnya yaitu membuat sistem daftar, sign in, dan sign out. Dah..