Belajar Membuat Sistem Informasi PHP – Part 3

Sebelum Anda Melanjutkan Belajar membuat sistem informasi php part 3 ini, Pastikan Anda telah membaca dan mempelajari artikel belajar sebelumnya yaitu belajar membuat sistem informasi php Part 2. Karena jika anda langsung lompat bagian ke 3. Maka akan lebih sulit memahami penjelasan yang ada. Baik. Kali ini kita lanjut ke bagian ke 3 dengan target belajar sebagai berikut :

Target Belajar Part 3

Dapat Membuat Kerangka Sistem Informasi (Halaman Admin)
Memahami Area Kerangka Web

Konten :
1. Membuat Halaman Admin Sistem Informasi
2. Penjelasan Area Halaman Website
3. Penjelasan Kode


Tutorial di bawah akan menghasilkan halaman admin seperti di atas

1. Membuat Halaman Admin Sistem Informasi

Berikut adalah Kode Untuk membuat halaman sederhana dengan php. Pada sesi latihan ini, sebenarnya proses pembelajaran masih di tahap awal, namun kita harus membiasakan diri dengan kode HTML dan CSS karena pada akhirnya kita harus memadukan antara PHP, HTML, CSS, dan database mysql untuk membuat sistem informasi berbasis web secara sempurna. Jadi untuk sesi latihan selanjutnya kita akan menggabungkan kerangka website dengan file kode latihan yang ada.

Simpan file di atas di dalam folder belajarphp dengan nama index.php Lalu Akses Di localhost :

<html>
<head>
<title>Belajar Sistem PHP</title>
<style>
html {
    font-family: "Lucida Sans”;
}
* {
    box-sizing: border-box; 
}

.sidebar-kiri {
width: 20%;
float: left;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
}

.konten {
width: 80%;
float: right;
padding: 15px;
}

.header {
    background-color: #33b5e5;
    color: #ffffff;
    padding: 15px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,20);
}
.menu ul {
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,20);
}
.menu li:hover {
    background-color: #0099cc;
}
.footer
{
   clear: both;
	background-color: #33b5e5;
    color: #ffffff;
    padding: 15px;
	text-align:center; 
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,20);
	}
</style>
</head>
<body>

<div class="header">
<h1><center>Belajar Sistem PHP</center></h1>
</div>

<div class="sidebar-kiri">
<div class="menu">
<ul>
<a href='http://localhost/belajarphp/index.php'><li>Home</li></a>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
</div>
</div>

<div class="konten">
<h1>Selamat Datang</h1>
<p>Ini adalah contoh konten yang di dalam nya pada umumnya digunakan untuk menampilkan data dari database, konten gambar, tabel, dan lainnya</p>
</div>

<div class="footer">
Copyright @ Khairul Umam
</div>
</body>
</html>

Kode Tersebut di atas akan menghasilkan halaman seperti berikut :


halaman di atas terbagi dalam beberapa area yang akan kita bahas selanjutnya berikut ini.

2. Penjelasan Area Halaman Website

Judul Di Atas “Belajar Sistem PHP” adalah area “HEADER”
Area sebelah kiri yakni Menu 1 s/d Menu 6 adalah “SIDEBAR”
Area Sebelah kanan yang bertuliskan selamat datang adalah area “KONTEN”
Dan di bagian “Copyright” paling bawah adalah area “FOOTER”

Adapun desain berwarna di atur dengan CSS. Nama elemen CSS sudah di sesuaikan dengan nama area. Lihat kode di atas.

.header untuk desain CSS area bagian header
.sidebar-kiri untuk desain CSS area bagian menu kiri
.footer untuk desain CSS area bagian footer
.konten untuk area konten
.menu untuk desain CSS menu Yang berada di dalam area sidebar-kiri

untuk memahami kode di atas, berikut adalah penjelasan singkat mengenai bagaimana suatu kode CSS dan HTML dapat bekerja hingga menghasilkan sebuah tampilan desain yang menarik.

3. Penjelasan Kode

Jika anda lihat di bagian kode di atas di area pembuka

. seluruh kode yang berada di area

adalah kode CSS. di area tersebut terdapat kode seperti berikut :

.header
.konten
.footer
dll yang berawalan titik

itu adalah selector class. Nah kita singkat dengan class saja agar mudah memahaminya. class header di tulis dengan .header dan di lanjutkan dengan tanda kurung { dan ditutup dengan tanda } di antara tanda kurung tersebut terdapat kode css yang berfungsi untuk memberikan warna, jenis tulisan, dan lain-lain. Nah. Kali ini saya tidak membahas secara detail bagaimana menulis kode css. karena kita akan belajar sesuai target per bagian. Anda bisa mengembangkan sendiri keterampilan kode CSS anda di luar modul belajar ini. dan kembali ke target. Kita akan membuat sebuah sistem informasi yang akhir nya anda akan memiliki kemampuan membuat suatu sistem informasi.

Mari kita lanjutkan.

Class css yang telah ditulis akan dipanggil oleh tag html bernama “

” dengan cara berikut, Contoh potongan kode di atas yang memanggil class css header :

<div class="header">
<h1><center>Belajar Sistem PHP</center></h1>
</div>

Kode di atas akan memanggil class css .header yang telah di tuliskan. Semuanya tentu memperhatikan kaidah penulisan php dan html yang telah di bahas pada belajar sistem php bagian sebelumnya di sini. (Baca : belajar membuat sistem informasi php Part 2).

Catatan Penting : File HTML dapat di save dengan ekstensi .php. Kode di atas merupakan kode HTML yang di dalamnya belum terdapat kode php. namun kedepan kita akan mengerjakan kode dengan php. Jadi, tidak mengapa jika kita menyimpan file index tersebut dengan ekstensi .php

Demikianlah belajar sistem php part 3 kali ini. Terimakasih dan semoga bermanfaat bagi kita semua.

Selanjutnya adalah belajar membuat sistem informasi bagian 4. Silahkan klik di bawah ini :

Belajar membuat sistem informasi Part 4

By SistemIT.com

Info Hubungi :

Related posts