Pada tahap ini membahas halaman index untuk pendaftaran online tahap dimana kita akan memecahkan atau membagi-bagi template html yang sebelumnya telah kita buat, karena yang sebelumnya itu masih menggunakan html kali ini kita akan menggunakan php, perbedaannya adalah halaman dengan php ini akan tercipta sebagai halaman dinamis bukan satu-persatu kita membangunnya seperti dari awal tag html sampai penutup tag html, namun ini akan kita pecah dengan pusat utamanya ada di file index.
Seperti awal pembahasan bahwa telah ada hierarki folder pada proyek belajar kita, dimana terdapat folder content, nah folder content tersebut digunakan untuk menyimpan file-file yang telah pecah nantinya. Karena isi dari folder content tersebut ada pada tutorial selanjutnya maka kita akan membuat file index terlebih dahulu.
Membuat File Index Untuk Pendaftaran Online
Pertama-tama anda harus menyalin file style.css ke root folder didalam proyek anda. Setelah itu siapkan sebuah file bernama index.php lalu salin file index.html yang ada di folder template yang telah kita buat sebelumnya, tetapi dengan memperhatikan cara pembuatan file index.php dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Pendaftaran Online</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Pendaftaran Online</h1>
</div>
<div class="main">
<span style="color: #ff0000;"><a href="" class="btn">Tambah</a>
<div class="content">
<table class="table" width="100%" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="1%" align="left">No</th>
<th width="15%">Nama</th>
<th width="10%">Alamat</th>
<th width="10%">No. Hp</th>
<th width="10%">Email</th>
<th width="13%">Aksi</th>
</tr>
</thead>
<tbody>
<tr>
<td>No</td>
<td>Nama</td>
<td>Alamat</td>
<td align="center">No. Hp</td>
<td>Email</td>
<td align="center"><a href="">Lihat</a> | <a href="">Edit</a> | <a href="">Hapus</a></td>
</tr>
</tbody>
</table>
</div></span>
</div>
</div>
</body>
</html>Code language: HTML, XML (xml)Perhatikan kode yang berwarna merah diatas, salin kode merah tersebut dengan cara di potong atau di cut sehingga bagian tengah index.php itu kosong, lalu simpan blok kode berwarna merah dengan nama file home.php di folder content, jika belum ada maka buat folder tersebut (pembahasan hierarki folder telah ada pada bagian pengenalan tutorial).
Nah karna bagian tengah file index.php yang kosong itu akan kita include kan file home.php ke file index.php seperti kode dibawah ini.
<span style="color: #ff0000;"><?php include('config/koneksi.php'); ?></span>
<!DOCTYPE html>
<html>
<head>
<title>Pendaftaran Online</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Pendaftaran Online</h1>
</div>
<div class="main">
<span style="color: #ff0000;"><?php include('content/home.php'); ?></span>
</div>
</div>
</body>
</html>Code language: HTML, XML (xml)Jika sudah silahkan ketikan url dibawah ini pada browser anda jika telah mengikuti tutorial ini dari awal maka struktur urlnya akan seperti ini.
http://localhost/tutorial/php-mysql/pendaftaran/
Folder web adalah folder root pada proyek belajar php mysql ini, sehingga proyek belajar ini akan dapat diakses seperti link diatas, namun anda dapat membuat struktur sendiri. Jika link tersebut sudah bisa diakses maka tampilan utama pendaftaran online akan menjadi berantakan atau tidak rapih, seperti gambar dibawah ini.
Yang menyebabkan halaman tersebut berantakan adalah tidak ditemukannya file style.css karena sudah di pindah ke folder css didalam folder pendaftaran, untuk dapat mengembalikan tampilan seperti semula maka silhkan ubah pada bagian kode dibawah ini pada file index.php.
<link rel="stylesheet" type="text/css" href="<span style="color: #ff0000;">style.css</span>">Code language: HTML, XML (xml)Menjadi seperti ini.
<link rel="stylesheet" type="text/css" href="css/style.css">Code language: HTML, XML (xml)Jika sudah benar silahkan akses kembali url.
http://localhost/tutorial/php-mysql/pendaftaran/
Maka tampilan akan berubah kembali kebentuk yang lebih baik. Sekian tutorial ini, untuk tutorial berikutnya kita akan membuat formulir penambahan anggota untuk pendaftaran online.
Jaka