Membuat File CSS

1.
Membuat File CSS
Buat folder bernama style dan di dalam nya isi dengan bagian tag style pada index.php
Kode file style.css
1 html {
2 font-family: "Lucida Sans”;
3 }
4 * {
5 box-sizing: border-box;
6 }
7 .sidebar-kiri {
8 width: 20%;
9 float: left;
10 padding-right: 15px;
11 padding-top: 15px;
12 padding-bottom: 15px;
13 }
14 .konten {
15 width: 80%;
16 float: right;
17 padding: 15px;
18 }
19 .header {
20 background-color: #33b5e5;
21 color: #ffffff;
22 padding: 15px;
23 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,20);
24 }
25 .menu ul {
26 margin: 0;
27 padding: 0;
28 }
29 .menu li {
30 padding: 8px;
31 margin-bottom: 7px;
32 background-color :#33b5e5;
33 color: #ffffff;
35 }
36 .menu li:hover {
37 background-color: #0099cc;
38 }
39 .footer
40 {
41 clear: both;
42 background-color: #33b5e5;
43 color: #ffffff;
44 padding: 15px;
45 text-align:center;
47 }
2. Membuat File menu.php
Pertama tama buatlah folder bernama includes seperti di bawah ini :
Buatlah file bernama menu.php di dalam folder includes dengan kode sebagai berikut:
1 <div class="menu">
2 <ul>
3 <li><a style='color:white' href='index.php'>Home</a></li>
4 <li><a style='color:white' href='barang.php'>Data Barang</a></li>
5 <li>Menu 2</li>
6 <li>Menu 3</li>
7 <li>Menu 4</li>
8 <li>Menu 5</li>
9 <li>Menu 6</li>
10 </ul>
11 </div>
file menu.php di atas gunanya adalah untuk dipanggil pada file index.php melalui
perintah include
3. Membuat File footer.php
selanjutnya kita akan membuat file footer.php untuk menyimpan bagian footer nya.
Kodenya adalah sebagai berikut :

1 <div class="footer">
2 Copyright @ Khairul Umam
3 </div>
4. Terakhir kita akan mengupdate file index.php seperti kode berikut :
Terakhir :
Kita akan mengganti tag <style></style> yang sudah kita ganti menjadi file style.css
menjadi kode berikut :
<link rel=”stylesheet” type=”text/css” href=”style/style.css”>
Kemudian kita akan mengganti bagian dibawah ini :

<div class=”menu”>
<ul>
<li><a style=’color:white’ href=’index.php’>Home</a></li>
<li><a style=’color:white’ href=’barang.php’>Data Barang</a></li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
</div>
Menjadi :
<?php
include “includes/menu.php”;
?>
Begitu juga bagian footer dari :
<div class=”footer”>
Copyright @ Khairul Umam
</div>
Menjadi :
<?php
include “includes/footer.php”;
?>
Maka index.php akan berubah menjadi seperti berikut :

1 <html>
2 <head>
3 <title>Belajar Sistem PHP</title>
4 
5 <link rel="stylesheet" type="text/css" href="style/style.css">
6 </head>
7 <body>
8 <div class="header">
9 <h1><center>Belajar Sistem PHP</center></h1>
10 </div>
11
12 <div class="sidebar-kiri">
13 <?php
14 include "includes/menu.php"; //ini untuk memanggil file menu
15 ?>
16 </div>
17
18 <div class="konten">
19 <h1>Selamat Datang</h1>
20 <p>Ini adalah contoh konten yang di dalam nya pada umumnya digunakan untuk menampilka
21 </div>
22 <?php
23 include "includes/footer.php"; //ini untuk memanggil file footer
24 ?>
25 </body>
26 </html>
Demikianlah belajar membuat sistem informasi part 6 pada hari ini. Nah, untuk belajar
berikutnya kita akan menggunakan file index.php sebagai file basis untuk menampilkan
semua konten yang ada pada sistem informasi. yang nantinya database database yang di
tampilkan akan di include hanya dengan menggunakan file index.php. Hal ini agar tidak
terjadi pengulangan terus menerus dengan kode yang sama. Saya seringkali menjumpai
kode php yang diulang ulang. Meskipun hasil output nya bagus, namun ini sangat tidak
efektif bagi pengembang sebuah sistem informasi. Coba lihat gambar source code berikut :
Bayangkan misalnya file index.php dan profile.php memiliki footer. Sangat boros jika kita
mengubah ke dua file tersebut hanya untuk mengupdate footer yang ada.
Sekilas tentang konsep modul

Saya tidak akan menjelaskan pengertian modul secara rumit namun silahkan anda baca
sekilas penjelasan ringan di bawah ini :
Sebelumnya kita telah mengelola folder belajarphp yang kita sederhanakan pada part 6
menjadi sebagai berikut :
Nah, Kita akan membuat data barang yang sebelumnya dapat di akses dengan alamat :
http://localhost/belajarphp/barang.php
menjadi
http://localhost/belajarphp/index.php?modul=barang&aksi=tampil
terdapat dua variable yang saya tambahkan di link yaitu modul dan aksi. nanti nya modul
dan aksi ini merupakan variabel penampung untuk modul modul lainnya. Hingga nantinya :
Jika kita ingin mengakses data user maka link sebagai berikut :
http://localhost/belajarphp/index.php?modul=user&aksi=tampil
Jika kita ingin mengakses data pengeluaran barang maka link sebagai berikut :
http://localhost/belajarphp/index.php?modul=keluar&aksi=tampil
Jika kita ingin mengakses data barang masuk maka link sebagai berkut :
http://localhost/belajarphp/index.php?modul=masuk&aksi=tampil
Jadi kita dapat menamai modul dengan

modul=user untuk data user
modul=keluar untuk data pengeluaran barang
modul=masuk untuk data pemasukan barang
Nah. Lebih kurang sampai di sini sudah paham ?? Mari kita lanjutkan materinya dan fokus
pada target pembelajaran part 7.
Langkah 1
Sekarang yang perlu kita lakukan adalah mengubah file index.php kita menjadi berikut :
1 <html>
2 <head>
3 <title>Belajar Sistem PHP</title>
4 
5 <link rel="stylesheet" type="text/css" href="style/style.css">
6 </head>
7 <body>
8 <div class="header">
9 <h1><center>Belajar Sistem PHP</center></h1>
10 </div>
11
12 <div class="sidebar-kiri">
13 <?php
14 include "includes/menu.php"; //ini untuk memanggil file menu
15 ?>
16 </div>
17
18 <div class="konten">
19 <?php
20 include "koneksi/koneksi.php"; //untuk koneksi mysql
21 switch($_GET['modul']){
22 default:
23 echo '<h1>Selamat Datang</h1>
24 <p>Ini adalah contoh konten yang di dalam nya pada umumnya digunakan untuk menamp
25 break;
26 case "barang": //barang adalah nama modul nya
27 include "modul/barang.php";
28 break;
29 case "masuk":
30 include "modul/keluar.php";
31 break;
32 case "keluar":
33 include "modul/masuk.php";
34 break;
35 }
36 ?>
37 </div>
38 <?php
39 include "includes/footer.php"; //ini untuk memanggil file footer
40 ?>
41 </body>
42 </html>
Di atas saya membuat switch dengan menangkap variable modul dari link dengan perintah
$_GET[‘modul’]
Langkah 2
Buat folder baru bernama modul untuk meletakkan file bernama barang.php namun file
barang.php yang saya maksud disini akan berbeda dengan part 5 dan tentunya akan lebih
simple seperti berikut.
Buat file bernama barang.php dan letakkan di dalam folder modul yang baru kita buat :
isi barang.php yang baru

1 <?php
2 switch($_GET['aksi']){
3 case "tampil": //untuk mengakses aksi=tampil
4 echo "<h3>Data Barang</h3>";
5 $query=mysqli_query($conn,"SELECT * FROM tbl_barang order by kode_barang");
6 echo "<table border='1' width='600px'>
7 <tr>
8 <th>No</th>
9 <th>Kode Barang</th>
10 <th>Nama Barang</th>
11 <th>Stok</th>
12 <th>Harga</th>
13
14 </tr>";
15 $nomor=1;
16 while($tampil=mysqli_fetch_array($query))
17 {
18 echo "<td>$nomor</td>";
19 echo "<td>$tampil[kode_barang]</td>";
20 echo "<td>$tampil[nama_barang]</td>";
21 echo "<td>$tampil[stok]</td>";
22 echo "<td>$tampil[harga_barang]</td>";
23 echo "</tr>";
24 $nomor++;
25 }
26 echo "</table>";
27 break;
28 }
29 ?>
Nah. file barang.php ini lebih simple dari yang sebelumnya bukan ?? karena kita sudah
menggunakan konsep include dari index.php. Cukup dengan memanggil letak file
barang.php. Lalu. Bagaimana mengakses nya ??
untuk mengakses data barang ini kita cukup mengakses

Langkah 3
Langkah selanjutnya kita tinggal mengubah link data barang pada menu menjadi :
lihat kode perubahan menu.php berikut :

1 <div class="menu">
2 <ul>
3 <li><a style='color:white' href='http://localhost/belajarphp/index.php'>Home</a></li>
4 <li><a style='color:white' href='http://localhost/belajarphp/index.php?modul=barang&a
5 <li>Menu 2</li>
6 <li>Menu 3</li>
7 <li>Menu 4</li>
8 <li>Menu 5</li>
9 <li>Menu 6</li>
10 </ul>
11 </div>
Maka data barang dapat tampil seperti berikut :
Selanjutnya kita akan membuat tambah data barang, aksi tambah data barang, edit data
barang, aksi edit data barang, dan aksi hapus data barang. Cukup dengan memodifikasi file
modul/barang.php dengan menambahkan case case lain misal :
case “tambahbarang”: //untuk interface tambah barang
//isi kode
break;
dan case lainnya. lihat kode barang.php di bawah yang sudah saya tambahkan case lain :
1 <?php
2 switch($_GET['aksi']){
3 case "tampil": //untuk mengakses aksi=tampil
4 echo "<h3>Data Barang</h3>";
5 $query=mysqli_query($conn,"SELECT * FROM tbl_barang order by kode_barang");
6 echo "<table border='1' width='600px'>
7 <tr>
8 <th>No</th>
9 <th>Kode Barang</th>
10 <th>Nama Barang</th>
11 <th>Stok</th>
12 <th>Harga</th>
13
14 </tr>";
15 $nomor=1;
16 while($tampil=mysqli_fetch_array($query))
17 {
18 echo "<td>$nomor</td>";
19 echo "<td>$tampil[kode_barang]</td>";
20 echo "<td>$tampil[nama_barang]</td>";
21 echo "<td>$tampil[stok]</td>";
22 echo "<td>$tampil[harga_barang]</td>";
23 echo "</tr>";
24 $nomor++;
25 }
26 echo "</table>";
27 break;
28 case "tambah": //untuk interface tambah barang
29 //isi kode
30 break;
31 case "aksitambah": //untuk aksi tambah barang
32 //isi kode
33 break;
34 case "edit": //untuk interface edit barang
35 //isi kode
36 break;
37 case "aksiedit": //untuk aksi mengedit barang
38 //isi kode
39 break;
40 case "aksihapus": //untuk aksi menghapus data barang
41 //isi kode
42 break;
43 }
44 ?>

Membuat File CSS

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Membuat File CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

1.

Membuat File CSS

Kode file style.css

2. Membuat File menu.php

Pertama tama buatlah folder bernama includes seperti di bawah ini :

3. Membuat File footer.php

Kodenya adalah sebagai berikut :

Kemudian kita akan mengganti bagian dibawah ini :

Begitu juga bagian footer dari :

Maka index.php akan berubah menjadi seperti berikut :

Sekilas tentang konsep modul

Jadi kita dapat menamai modul dengan

isi barang.php yang baru

untuk mengakses data barang ini kita cukup mengakses

lihat kode perubahan menu.php berikut :

Anda mungkin juga menyukai