Modulwebdesign Studikasuswebberita 170322014108

Freak-kutuonline - Web Design
1
BAB 1
Pendahuluan
1.1. Konsep Dasar Web
a. World Wide Web (WWW)
World Wide Web (WWW) atau yang lebih dikenal dengan nama web, merupakan
salah satu layanan yang didapat oleh pemakai komputer yang terhubung dengan
internet.
Web pada awalnya adalah ruang informasi dalam internet, dengan menggunakan
teknologi hypertext, pemakai dituntun untuk menemukan informasi dengan mengikuti
link yang disediakan dalam dokumen web yang ditampilkan dalam peramban web (web
browser).
Web memberikan kemudahan bagi pengguna komputer untuk berinteraksi dengan
pelaku internet lainnya serta mencari informasi yang dibutuhkan didalam internet.
Kini web telah banyak digunakan oleh perusahaan-perusahaan sebagai salah satu
strategi dalam bidang pengembangan teknologi informasi dengan tujuan
memenangkan persaingan bisnis di era serba teknologi informasi saat ini.
Beberapa alasan penggunaan website oleh perusahaan sebagai berikut:
1) Kemudahan mendistribusikan informasi.
2) Kemudahan mengakses informasi.
3) Bebas platform, informasi dapat disajikan oleh peramban web pada sistem
operasi apa saja karena adanya standar dokumen.
b. Bagaimana WWW Bekerja?
1) Informasi disimpan dalam dokumen yang disebut dengan halaman-halaman
web (web pages).
2) Web page adalah file-file yang disimpan dalam komputer yang disebut dengan
server-server web (web servers).
3) Komputer membaca web page yang disebut sebagai web client.
4) Web client menampilkan page dengan menggunakan software yang disebut
dengan peramban web (web browser).

2
Gambar 1.1. Cara kerja web.
c. Peramban Web (Web Browser)
Peramban web (web browser) adalah software yang digunakan untuk menampilkan
informasi dari server web. Menurut data yang dilansir dari www.w3schools.com
Chrome masih menjadi web browser paling popular saat ini. Berikut
statistik
penggunaan web browser didunia tahun 2015 versi w3schools.
Sumber: www.w3schools.com.
Gambar 1.2. Grafik penggunaan web browser tahun 2015.

3
Tabel 1.1. Statistik penggunaan web browser tahun 2015.
Sumber: www.w3schools.com.
3. Server Web
Server web adalah komputer yang digunakan untuk menyimpan dokumen-dokumen
web , komputer ini akan melayani permintaan dokumen web dari klien.
Web browser akan berkomunikasi melalui jaringan (termasuk jaringan internet) dengan
server web menggunakan HTTP. Browser akan mengirimkan request kepada server
untuk meminta dokumen tertentu atau layanan lain yang disediakan oleh server.
Server akan memberikan dokumen atau layanannya jika tersedia dengan mengunakan
protokol HTTP.
1.2. Jenis Website
Terdapat dua jenis website yang kita kenal, yaitu:
1. Website dinamis, konten website dapat berubah sewaktu-waktu sesuai dengan
kebutuhan website. Hal ini memberikan kemudahan dalam penyajian informasi
yang up-to-date.
Dalam website dinamis, terdapat istilah back-end dan front-end. Back-end
merupakan halaman administrator yang digunakan untuk mengelola konten
website. Sedangkan front-end merupakan halaman utama pengunjung yang
digunakan untuk mengakses informasi.

4
2. Website statis, konten website tidak dapat diubah karena tertanam didalam
script
website. Sehingga informasi yang terdapat didalam website pun bersifat statis,
tidak up-to-date.
1.3. Mendesain Website
Sebelum membuat sebuah website, perlu mendesain antar muka website yang akan
dibangun. Berikut contoh antar muka website halaman utama pengunjung yang terdiri
dari dua kolom.
HEADER
SIDE MENU
CONTENT
FOOTER
Gambar 1.3. Rancangan antar muka website.
Dalam mendesain antar muka website tools yang dapat digunakan antara lain Adobe
Photoshop, dapat pula langsung menggunakan Adobe Dreamweaver dengan
menerapkan tag Table atau Frame.

5
1.4. Mendesain Database dan Tabel
Sebuah website dinamis yang baik memiliki database dan struktur tabel yang saling
terintegrasi antara satu tabel dengan tabel lainnya yang mendeskripsikan
core
bussinnes (pokok utama) website tersebut. Dibawah ini merupakan contoh rancangan
tabel website berita.
Gambar 1.4. Rancangan relasi tabel.
Freak-kutuonline - Web Design 6

Berikut implementasi rancangan tabel
diatas kedalam database MySQL dengan nama
db_berita.
Tabel 1.2. Tabel admin.
Field Name Data Type Length/Size
Index Extra
User_admin Varchar 30
Primary key -
Nama_lengkap Varchar 30
Email Varchar 30
Pass_admin Varchar 30
Tabel 1.3. Tabel berita.
Index Extra
Id_berita Int 5
Primary key Auto_Increment
Id_kategori Int 5
Foreign key
Headnews Varchar 100
Isi_berita Text
Pic_berita Varchar 100
Created_date Date
Created_time Time
Modified_date Date
Modified_timie Time
Tabel 1.4. Tabel kategori_berita.
Index Extra
Id_kategori Int 5
Nm_kategori Varchar 30
Aktif_kategori Enum ‘Y’,’N’
Default
As defined: Y
Tabel 1.5. Tabel komentar_berita.
Index Extra
Id_komentar Int 5
Id_berita Int 5
Foreign key
Nama_komentar Varchar 30
url Varchar 30
Email_komentar Varchar 30
Isi_komentar Varchar 30

Field Name Data Type Length/Size Index
Extra
Tgl_komentar Date
Jam_komentar Time
Aktif_komentar Enum ‘Y’,’N’
Default
As defined: N
Tabel 1.6. Tabel hubungi.
Extra
Id_hubungi Int 5 Primary key
Auto_Increment
Nama_lengkap Varchar 30
Email Varchar 30
Pesan Text
Created_date Date
Tabel 1.7. Tabel profil.
Extra
Id_profil Int 5 Primary key
Auto_Increment
Isi_profil Text
Img_profil Varchar 100
Modified_date Date

8
BAB 2
Studi Kasus Web Berita #1 (Halaman Admin)
Studi kasus kali ini akan membuat website berita layaknya website berita detik.com,
kompas.com, dan yang lainnya dimana ada headnews, isi berita selengkapnya,
gambar berita, dan komentar berita dari pengunjung website namun dalam versi yang
lebih sederhana.
Terlebih dahulu membuat halaman administrator yang digunakan sebagai panel untuk
mengelola konten website. berikut langkah-langkah mendesain halaman administrator.
1. Jalankan aplikasi Dreamweaver CS 6, pada panel Create New pilih PHP. Bisa
melalui menu bar, File >> New kemudian pada Page Type pilih PHP. Klik Create.
Gambar 2.1. New Document.
2. Terdapat tiga mode pada layar kerja Dreamweaver, Code, Split, dan Design.
Pilih
Design.

Gambar 2.2. Layar kerja Dreamweaver CS.
3. Mulai membuat rancangan halaman administrator dengan menggunakan tag
Table. Pada menu bar, klik menu Insert >> Table hingga tampil jendela table
properties, set kebutuhan tabel seperti dibawah ini:
Gambar 2.3. Table properties.

10
4. Berikut hasil tabel yang dibuat.
Gambar 2.4. Hasil rancangan tabel awal.
5. Blok baris pertama, kemudian pada bagian Properties pilih Merges selected
cells using spans. Atau letakkan kursor mouse didalam area baris yang di blok
kemudian klik kanan, pilih Table >> Merge Cells.
Gambar 2.5. Menggabungkan kolom.
6. Ulangi langkah nomor 5 untuk baris ke-2 dan 4 satu per satu.
7. Berikutnya, letakkan kursor didalam baris ke-3 kolom pertama, pada Properties
masukkan nilai W (Width) sebesar 200.

11
Gambar 2.6. Atur lebar kolom.
8. Letakkan kursor didalam baris pertama, masukkan nilai H (Height) sebesar 50
pada Properties.
Gambar 2.7. Atur tinggi baris.

9. Ulangi nomor 8 untuk baris ke-empat dengan nilai H (Height) sebesar 40.
Sehingga hasil akhirnya seperti yang terlihat pada gambar dibawah ini.
Gambar 2.8. Hasil rancangan tabel akhir.

13
BAB 3
Studi Kasus Web Berita #2 (Library & Assets)
Setelah mendesain rancangan halaman administrator, berikutnya adalah menyiapkan
file-file yang dibutuhkan yang nantinya akan diletakkan didalam rancangan tersebut
(pada bagian side menu dan content).
Buat satu buah folder dengan nama berita didalam C:\xampp\htdocs\ sebagai media
penyimpanan projek website.
Buatkan lagi satu buah folder dengan nama config didalam C:\xampp\htdocs\berita\
sebagai lokasi penyimpanan file-file konfigurasi website.
Ketikkan masing-masing file dibawah ini kemudian simpan masing-masing file tersebut
ke dalam folder config.
inc.koneksi.php
<?php
$host="localhost";
$user="root";
$pass="";
$db="db_berita";
$conn=mysql_connect($host,$user,$pass)or die(mysql_error());
mysql_select_db($db,$conn) or die("Database tidak dapat diakses.");
?>
Simpan file koneksi di C:\xampp\htdocs\berita\config\inc.koneksi.php.
library.php
<?php
date_default_timezone_set('Asia/Jakarta'); // PHP 6 mengharuskan penyebutan
timezone.
$seminggu = array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu");
$hari = date("w");
$hari_ini = $seminggu[$hari];
$tgl_sekarang = date("Ymd");
$tgl_skrg = date("d");
$bln_sekarang = date("m");

14
$thn_sekarang = date("Y");
$jam_sekarang = date("H:i:s");
$nama_bln=array(1=> "Januari", "Februari", "Maret", "April", "Mei",
"Juni", "Juli", "Agustus", "September",
"Oktober", "November", "Desember");
?>
Simpan file library di C:\xampp\htdocs\berita\config\library.php.
Fungsi_thumb.php
<?php
function UploadImage($fupload_name){
//direktori gambar
$vdir_upload = "../foto_berita/";
$vfile_upload = $vdir_upload . $fupload_name;
//Simpan gambar dalam ukuran sebenarnya
move_uploaded_file($_FILES["fupload"]["tmp_name"], $vfile_upload);
//identitas file asli
$im_src = imagecreatefromjpeg($vfile_upload);
$src_width = imageSX($im_src);
$src_height = imageSY($im_src);
//Simpan dalam versi small 110 pixel
//Set ukuran gambar hasil perubahan
$dst_width = 150;
$dst_height = ($dst_width/$src_width)*$src_height;
//proses perubahan ukuran
$im = imagecreatetruecolor($dst_width,$dst_height);
imagecopyresampled($im, $im_src, 0, 0, 0, 0, $dst_width, $dst_height, $src_width,
$src_height);
//Simpan gambar
imagejpeg($im,$vdir_upload . "small_" . $fupload_name);
//Hapus gambar di memori komputer
imagedestroy($im_src);
imagedestroy($im);
}
/
*----------------------------------------------------------------------------------
-------------------------*/

15
function UploadProfil($fupload_name){
//direktori gambar
$vdir_upload = "../foto_profil/";
$vfile_upload = $vdir_upload . $fupload_name;
//Simpan gambar dalam ukuran sebenarnya
move_uploaded_file($_FILES["fupload"]["tmp_name"], $vfile_upload);
//identitas file asli
$im_src = imagecreatefromjpeg($vfile_upload);
$src_width = imageSX($im_src);
$src_height = imageSY($im_src);
//Simpan dalam versi small 110 pixel
//Set ukuran gambar hasil perubahan
$dst_width = 150;
$dst_height = ($dst_width/$src_width)*$src_height;
//proses perubahan ukuran
$im = imagecreatetruecolor($dst_width,$dst_height);
imagecopyresampled($im, $im_src, 0, 0, 0, 0, $dst_width, $dst_height, $src_width,
$src_height);
//Simpan gambar
imagejpeg($im,$vdir_upload . "small_" . $fupload_name);
//Hapus gambar di memori komputer
imagedestroy($im_src);
imagedestroy($im);
}
?>
Simpan file fungsi_thumb di C:\xampp\htdocs\berita\config\fungsi_thumb.php.
Note:
-
File inc.koneksi digunakan untuk koneksi kedalam database sehingga user dapat
mengakses tabel yang dibutuhkan.
-
File library digunakan untuk mengatur kebutuhan tanggal, jam, dan hari ke dalam
format Indonesia.
-
File fungsi_thumb digunakan untuk mengatur file gambar/foto. Setiap file
gambar/foto yang di unggah kedalam webite akan memiliki dua ukuran yang
berbeda, dalam format asli dan dalam format ukuran yang telah di perkecil,
disesuaikan dengan kebutuhan website.

16
Berikutnya menyiapkan file-file aset, aset yang dimaksudkan disini adalah file-file
yang
digunakan sebagai pendukung dalam mempercantik halaman website. Biasanya file
aset terdiri dari file CSS (Cascading Style Sheet).
Buat satu buah folder dengan nama assets didalam C:\xampp\htdocs\berita\,
buatkan lagi satu buah folder css didalam C:\xampp\htdocs\berita\assets\,
kemudian ketik masing-masing file css dibawah ini lalu simpan masing-masing file
tersebut kedalam folder css.
Style1.css
.judul {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: x-large;
color: #FFF;
background-color: #F00;
font-weight: lighter;
}
#table {
border: thin solid #999;
}
#td_bottom {
border-bottom-width: thin;
border-bottom-style: dashed;
border-bottom-color: #666;
}
#th_bottom {
border-bottom-style: solid;
border-bottom-color: #333;
}
#header {
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
color: #FFF;
background-color: #03F;
padding-left: 5px;
}
#footer {
font-size: small;
color: #333;

text-align: center;
}
Simpan file style1.css di C:\xampp\htdocs\berita\assets\css\style1.css
Style2.css
@charset "utf-8";
.table {
border: thin solid #999;
}
#footer {
font-size: small;
color: #999;
text-align: center;
}
#td_konten {
border-bottom-style: dashed;
border-bottom-color: #CCC;
}#date {
font-size: small;
color: #999;
}
#kat_berita {
font-size: medium;
color: #FFF;
background-color: #06F;
}
.kat_table {
border: thin dashed #CCC;
}
#kat_text {
font-size: medium;
text-decoration: none;
}
.table_komen {

18
background-color: #E9E9E9;
border: thin dashed #999;
}
Simpan file style2.css di C:\xampp\htdocs\berita\assets\css\style2.css
Kedua file CSS diatas dapat dibuat dengan cara mengetikkan secara langsung, atau
dengan menggunakan fasilitas yang sudah ada pada Deamweaver tanpa perlu
mengetik, hanya memasukkan nilai-nilainya saja. Berikut caranya:
1. Buka lembar kerja baru, File >> New, pilih CSS lalu Create.
Gambar 3.1. Layar kerja CSS.
2. Didalam area kerja CSS, klik kanan lalu pilih CSS Styles >> New… . ikut
langkah-
langkah seperti yang terlihat pada gambar dibawah.

19
Gambar 3.2. Jendela New CSS Rule.
3. Pada jendela CSS Rule definition for.. atur seperti yang terlihat pada gambar
dibawah ini.
Gambar 3.3. Jendela pengaturan CSS.

20
4. Klik OK, maka hasilnya pun seperti yang terlihat dibawah ini.
Gambar 3.4. Hasil pengaturan CSS.
Note:
Terdapat tiga tipe selector yang biasa digunakan didalam CSS, yaitu Class, ID, dan
Tag.
-
Class, dapat digunakan oleh semua elemen HTML. Pengetikan perintahnya
diawali dengan tanda titik (.), contoh: .judul.
-
ID, digunakan hanya pada elemen HTML tertentu saja. Pengetikan perintahnya
diawali dengan tanda pagar (#), contoh: #td_bottom.
-
Tag, merepresentasikan elemen-elemen HTML. Pengetikannya tidak diawali
dengan tanda apapun, karena mengacu pada elemen-elemen HTML yang ada.
Contoh: body, table, tr, td, th, dan lain-lain.

21
BAB 4
Studi Kasus Web Berita #3 (Kategori Berita)
Buatkan masing-masing satu buah folder dengan nama foto_berita dan foto_profil di
dalam C:\xampp\htdocs\berita\, masing-masing folder tersebut digunakan sebagai
media penyimpanan foto/gambar, dimana foto/gambar berita akan disimpan kedalam
folder foto_berita, dan foto/gambar profil akan disimpan kedalam folder
foto_profil.
Buatkan juga folder dengan nama admins di C:\xampp\htdocs\berita\ yang akan
digunakan untuk menyimpan file-file PHP yang dibutuhkan halaman administrator.
Pada pertemuan sebelumnya sudah membuat tampilan halaman administrator.
Selanjutnya mari percantik halaman administrator dengan memberikan menu bar di
panel sebelah kiri dan warna pada bagian header nya. Perhatikan gambar dibawah ini.
Gambar 4.1. Tampilan halaman administrator.
Untuk membuat menu bar seperti diatas, gunakan Spry. Ikuti langkah-langkah
dibawah ini untuk membuat menu bar dengan Spry.
1. Pastikan halaman administrator sudah disimpan terlebih dahulu. Letakkan kursor
didalam kolom ke-2 baris pertama.
2. Klik menu Insert >> Spry >> Spry Menu Bar. (lihat gambar 4.2).
3. Pilih layout menu yang diinginkan, pilih Vertical. (lihat gambar 4.3).
4. Hasilnya dapat dilihat pada gambar 4.4.

Gambar 4.2. Menambahkan Spry Menu Bar.

23
Gambar 4.3. Spry Menu Bar.
Gambar 4.4. Hasil Spry Menu Bar.
5. Ubah nama Item 1, Item 2, Item 3, dan Item 4. Arahkan mouse keatas menu bar
hingga muncul Spry Menu Bar MenuBar1 lalu klik.
Gambar 4.5. Spry Menu Bar MenuBar1.

24
6. Perhatikan panel properties dibagian bawah layar kerja, sudah menunjukkan
properties dari Spry Menu Bar.
Gambar 4.6. Properties Menu Bar.
Note:
-
Kolom nomor 1 merupakan menu utama.
-
Kolom nomor 2 merupakan sub menu.
-
Kolom nomor 3 merupakan sub menu dari kolom nomor 2 (sub sub menu).
-
Untuk mengganti Item 1, Item 2, dan seterusnya, pilih Item yang akan diganti, pada
Text masukkan nama menu.
-
Kolom isian Link digunakan untuk memberikan hyperlink suatu menu.
7. Silahkan ubah Item 1 dan seterusnya hingga hasilnya terlihat seperti pada
gambar
4.1 diatas.
8. Untuk memberikan warna pada bagian header, letakkan kursor mouse didalam
bagian header, pada properties pilih warna yang diinginkan.
Gambar 4.7. Memberikan warna pada bagian header.

25
Setelah mempercantik halaman administrator, siapkan file-file PHP lainnya. Dimulai
dari file akses yang akan memanggil semua file-file PHP di dalam halaman
administrator.
Buka_file.php
<?php
$pg = isset($_GET['page']) ? $_GET['page'] : '' ; /*-- PHP 5 --*/
switch ($pg) {
//-- welcome page --/
case 'home' :
if(!file_exists
("../admins/welcome.php"))die("File welcome tidak
tersedia.");
include ("../admins/welcome.php");
break;
/
*----------------------------------------------------------------------------------
---------------
--*/
//-- input berita --//
case 'inputBerita' :
if(!file_exists ("../admins/berita_input.php"))die("File input berita tidak
tersedia.");
include ("../admins/berita_input.php");
break;
//-- simpan berita --//
case 'simpanBerita' :
if(!file_exists
("../admins/berita_simpan.php"))die("File simpan berita
tidak tersedia.");
include ("../admins/berita_simpan.php");
break;
//-- tampil berita --//
case 'tampilBerita' :
if(!file_exists
("../admins/berita_tampil.php"))die("File tampil berita
tidak tersedia.");
include ("../admins/berita_tampil.php");
break;
//-- edit berita --//
case 'editBerita' :
if(!file_exists
("../admins/berita_edit.php"))die("File edit berita tidak
tersedia.");
include ("../admins/berita_edit.php");
break;

26
//-- update berita --//
case 'updateBerita' :
if(!file_exists
("../admins/berita_update.php"))die("File update berita
tidak tersedia.");
include ("../admins/berita_update.php");
break;
//-- hapus berita --//
case 'hapusBerita' :
if(!file_exists
("../admins/berita_hapus.php"))die("File hapus berita
tidak tersedia.");
include ("../admins/berita_hapus.php");
break;
/
*----------------------------------------------------------------------------------
---------------
--*/
//-- input kategori berita --//
case 'inputKategori' :
if(!file_exists
("../admins/katberita_input.php"))die("File input kategori
berita tidak tersedia.");
include ("../admins/katberita_input.php");
break;
//-- simpan kategori berita --//
case 'simpanKategori' :
if(!file_exists
("../admins/katberita_simpan.php"))die("File simpan
kategori berita tidak tersedia.");
include ("../admins/katberita_simpan.php");
break;
//-- tampil kategori berita --//
case 'tampilKategori' :
if(!file_exists
("../admins/katberita_tampil.php"))die("File tampil
include ("../admins/katberita_tampil.php");
break;
//-- edit kategori berita --//
case 'editKategori' :
if(!file_exists
("../admins/katberita_edit.php"))die("File edit kategori
berita tidak tersedia.");
include ("../admins/katberita_edit.php");
break;

27
//-- update kategori berita --//
case 'updateKategori' :
if(!file_exists
("../admins/katberita_update.php"))die("File update
include ("../admins/katberita_update.php");
break;
//-- hapus kategori berita --//
case 'hapusKategori' :
if(!file_exists
("../admins/katberita_hapus.php"))die("File hapus
include ("../admins/katberita_hapus.php");
break;
/
*----------------------------------------------------------------------------------
---------------
--*/
//-- profil --//
case 'profil' :
if(!file_exists ("../admins/profil.php"))die("File profil tidak tersedia.");
include ("../admins/profil.php");
break;
//-- update profil --//
case 'updateProfil' :
if(!file_exists
("../admins/update_profil.php"))die("File update profil
tidak tersedia.");
include ("../admins/update_profil.php");
break;
/
*----------------------------------------------------------------------------------
---------------
--*/
//-- tampil hubungi --//
case 'tampilHubungi' :
if(!file_exists ("../admins/hubungi_tampil.php"))die("File tampil hubungi
tidak tersedia.");
include ("../admins/hubungi_tampil.php");
break;
//-- hapus hubungi --//
case 'hapusHubungi' :
if(!file_exists
("../admins/hubungi_hapus.php"))die("File hapus
hubungi tidak tersedia.");
include ("../admins/hubungi_hapus.php");
break;

28
/
*----------------------------------------------------------------------------------
---------------
--*/
//-- tampil komentar --//
case 'tampilKomentar' :
if(!file_exists
("../admins/komentar_tampil.php"))die("File tampil
komentar tidak tersedia.");
include ("../admins/komentar_tampil.php");
break;
//-- edit komentar --//
case 'editKomentar' :
if(!file_exists
("../admins/komentar_edit.php"))die("File edit komentar
tidak tersedia.");
include ("../admins/komentar_edit.php");
break;
//-- update komentar --//
case 'updateKomentar' :
if(!file_exists
("../admins/komentar_update.php"))die("File update
include ("../admins/komentar_update.php");
break;
//-- hapus komentar --//
case 'hapusKomentar' :
if(!file_exists
("../admins/komentar_hapus.php"))die("File hapus
include ("../admins/komentar_hapus.php");
break;
}
?>
Simpan file buka_file.php di C:\xampp\htdocs\berita\admins\buka_file.php
Tahap selanjutnya adalah membuat manajemen kategori yang digunakan untuk
mengelola data kategori berita. Dibawah ini merupakan tampilan form input kategori
berita.

29
Gambar 4.8. Input kategori berita.
Katberita_input.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form action="?page=simpanKategori" method="post">
<table width="500" border="0">
<tr>
<td colspan="2" class="judul">Kategori Berita</td>
</tr>
<tr>
<td width="150">Nama Kategori</td>
<td><input
name="kat_berita" type="text" size="30"
maxlength="30"
required="required"/> </td>
</tr>
<tr>
<td width="150"> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"><div align="right"><input name="submit" type="submit"
value="Simpan"
/> <input name="reset" type="reset" value="Batal"
onclick="self.history.back()"/></div></td>
</tr>
</table>
</form>
</body>
</html>

Simpan file katberita_input.php di
C:\xampp\htdocs\berita\admins\katberita_input.php
Katberita_simpan.php
<?php
include "../config/inc.koneksi.php";
$kategori = isset($_POST['kat_berita']) ? $_POST['kat_berita'] : '' ;
mysql_query("INSERT INTO kategori_berita (nm_kategori)
VALUES ('$kategori')");
echo "<meta http-equiv='refresh' content='0;url=?page=tampilKategori'>";
?>
Simpan katberita_simpan.php di
C:\xampp\htdocs\berita\admins\katberita_simpan.php
Berikutnya membuat file tampil kategori berita yang didalamnya terdapat tombol
tambah kategori berita, tombol edit dan tombol hapus.
Gambar 4.9. Tampil kategori berita.

Katberita_tampil.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
</head>
<body>
<tr>
<td colspan="5"><input name="tambahKatBerita" type="button" value="Tambah
Kategori Berita" onclick="window.location='?page=inputKategori';"/> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5" class="judul">Tampil Kategori Berita</td>
</tr>
<tr>
<th width="50" id="th_bottom">No.</div></th>
<th width="250" id="th_bottom">Nama Kategori</div></th>
<th width="100" id="th_bottom">Aktif</th>
<th width="100" id="th_bottom">Aksi</div></th>
</tr>
<?php
$tampil = mysql_query("SELECT * FROM kategori_berita ORDER BY
id_kategori DESC");
$no=1;
$jml=mysql_num_rows($tampil);
while ($r=mysql_fetch_array($tampil)){
?>
<tr>
<td width="50" id="td_bottom"><?php echo $no; ?></td>
<td width="250" id="td_bottom"><?php echo $r['nm_kategori']; ?></td>
<td width="100" id="td_bottom"><?php echo $r['aktif_kategori']; ?></td>
<td width="100" id="td_bottom"><div align="center">

<input name="edit" type="button" value="Edit"
onclick="window.location='?page=editKategori&id=<?php echo $r['id_kategori'];
?>'"/>
<input name="hapus" type="button" value="Hapus"
onclick="window.location='?page=hapusKategori&id=<?php echo $r['id_kategori'];
?>'"/> </div></td>
</tr>
<?php $no++; } ?>
<tr>
<td colspan="4">Jumlah record : <?php echo $jml; ?></td>
</tr>
</table>
</body>
</html>
Simpan file katberita_tampil.php di
C:\xampp\htdocs\berita\admins\katberita_tampil.php
Katberita_edit.php
<head>
</head>
<body>
<?php
$edit = mysql_query("SELECT * FROM kategori_berita
WHERE id_kategori = '".mysql_real_escape_string($_GET['id'])."'
");
while($r=mysql_fetch_array($edit))
{
?>
<form id="form1" name="form1" method="post" action="?page=updateKategori">
<input type="hidden" name="id" value="<?php echo $r['id_kategori']; ?>" />
<tr>
<td colspan="2" class="judul">Edit Kategori Berita</td>
</tr>
<tr>

<td width="150">Nama Kategori</td>
<td><input name="txtkat_berita" type="text" size="40" maxlength="30"
required="required" value="<?php echo $r['nm_kategori']; ?>" /> </td>
</tr>
<?php
if ($r['aktif_kategori']=='Y'){
?>
<tr>
<td width="150">Aktif</td>
<td><input name="aktif" type="radio" value="Y" checked="checked"/>
Ya
<input name="aktif" type="radio" value="N" />
Tidak</td>
</tr>
<?php } else { ?>
<tr>
<td><input name="aktif" type="radio" value="Y" />
Ya
<input name="aktif" type="radio" value="N" checked="checked"/>
Tidak</td>
</tr>
<?php } ?>
<tr>
<td> </td>
</tr>
<tr>
value="Simpan" /> <input name="reset" type="reset" value="Batal"
</tr>
</table>
</form>
<?php } ?>
</body>
</html>

Simpan file katberita_edit.php di
C:\xampp\htdocs\berita\admins\katberita_edit.php
Katberita_update.php
<?php
$nmKategori = $_POST['txtkat_berita'];
$aktif = $_POST['aktif'];
mysql_query("UPDATE kategori_berita SET nm_kategori = '$nmKategori',
aktif_kategori = '$aktif'
WHERE id_kategori = '$_POST[id]'");
?>
Simpan file katberita_update.php di
C:\xampp\htdocs\berita\admins\katberita_update.php
Katberita_hapus.php
<?php
mysql_query("DELETE FROM kategori_berita WHERE id_kategori =
'$_GET[id]' ");
?>
Simpan file katberita_hapus.php di
C:\xampp\htdocs\berita\admins\katberita_hapus.php

35
BAB 5
Studi Kasus Web Berita #4 (Berita)
Setelah membuat file-file kategori berita, berikutnya membuat file-file berita yang
digunakan untuk mengelola konten berita.
Gambar 5.1. Tampilan input berita.
Berita_input.php
<head>
</head>
<body>
<form action="?page=simpanBerita" method="post" enctype="multipart/form-data">
<table width="500" border="0" align="left">
<tr>
<td colspan="2" class="judul">Input Berita</td>
</tr>
<tr>
<td width="150">Headnews</td>

36
<td><input name="headnews" type="text" size="50"
</tr>
<tr>
<td width="150" valign="top">Isi Berita</td>
<td><textarea name="isi_berita" cols="40" rows="5"
required="required"></textarea> </td>
</tr>
<tr>
<td>Kategori Berita</td>
<td><select name="kategori" size="1">
<?php
$kat=mysql_query("SELECT * FROM kategori_berita ORDER
BY id_kategori DESC");
while($k=mysql_fetch_array($kat))
{
echo "<option
value=$k[id_kategori]>$k[nm_kategori]</option>";
}
?>
</select> </td>
</tr>
<tr>
<td width="150">Foto Berita</td>
<td><input name="fupload" type="file" size="40" required="required"/> </td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</form>
</body>
</html>
Simpan file berita_input.php di C:\xampp\htdocs\berita\admins\berita_input.php

Berita_simpan.php
<?php
include "../config/library.php";
include "../config/fungsi_thumb.php";
$lokasi_file=$_FILES['fupload']['tmp_name'];
$tipe_file=$_FILES['fupload']['type'];
$nama_file=$_FILES['fupload']['name'];
//apabila ada gambar yang di upload
if (!empty($lokasi_file)){
UploadImage($nama_file);
mysql_query("INSERT INTO berita (id_kategori,
headnews,
isi_berita,
pic_berita,
created_date,
created_time)
VALUES ('$_POST[kategori]',
'$_POST[headnews]',
'$_POST[isi_berita]',
'$nama_file',
'$tgl_sekarang',
'$jam_sekarang')");
}
else{
//apabila tidak ada gambar yang di upload
mysql_query("INSERT INTO berita (id_kategori,
headnews,
isi_berita,
created_date,
created_time)
VALUES ('$_POST[kategori]',
'$_POST[headnews]',
'$_POST[isi_berita]',
'$tgl_sekarang',
'$jam_sekarang')");
}
echo "<meta http-equiv='refresh' content='0;url=?page=tampilBerita'>";
?>
Simpan file berita_simpan.php di
C:\xampp\htdocs\berita\admins\berita_simpan.php

Berita_tampil.php
Gambar 5.2. Tampil berita.
<head>
</head>
<body>
<tr>
<td colspan="6"><input name="tambahBerita" type="button" value="Tambah
Berita" onclick="window.location='?page=inputBerita'"/> </td>
</tr>
<tr>
</tr>
<tr>
<td colspan="6" class="judul">Tampil Berita</td>
</tr>
<tr>
<th width="50" id="th_bottom">No.</td>
<th width="150" id="th_bottom">Kategori Berita</td>
<th width="150" id="th_bottom">Headnews</td>
<th width="120" id="th_bottom">Created Date</td>
<th width="120" id="th_bottom">Modified Date</td>
<th width="100" id="th_bottom">Aksi</td>

39
</tr>
<?php
$tampil = mysql_query("SELECT * FROM berita, kategori_berita
WHERE berita.id_kategori = kategori_berita.id_kategori
ORDER BY berita.id_berita DESC");
$no=1;
$jml = mysql_num_rows($tampil);
while($r=mysql_fetch_array($tampil))
{
?>
<tr>
<td width="150" id="td_bottom"><?php echo $r['nm_kategori']; ?></td>
<td width="150" id="td_bottom"><?php echo $r['headnews']; ?></td>
<td width="120" id="td_bottom"><?php echo $r['created_date']; ?></td>
<td width="120" id="td_bottom"><?php echo $r['modified_date']; ?></td>
onclick="window.location='?page=editBerita&id=<?php echo $r['id_berita']; ?>'"/>
onclick="window.location='?page=hapusBerita&id=<?php echo $r['id_berita'];
?>'"/> </div></td>
</tr>
<tr>
</tr>
<?php $no++; } ?>
<tr>
</tr>
</table>
</body>
</html>
Simpan file berita_tampil.php di
C:\xampp\htdocs\berita\admins\berita_tampil.php

Berita_edit.php
<head>
</head>
<body>
<?php
$edit = mysql_query("SELECT * FROM berita
WHERE id_berita = '".mysql_real_escape_string($_GET['id'])."'");
while($b = mysql_fetch_array($edit))
{
?>
<form action="?page=updateBerita" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="<?php echo $b['id_berita']; ?>" />
<table width="500" border="0" align="left">
<tr>
<td colspan="2" class="judul">Edit Berita</td>
</tr>
<tr>
<td width="150">Headnews</td>
<td><input name="headnews" type="text" size="50" required="required"
value="<?php echo $b['headnews']; ?>" /> </td>
</tr>
<tr>
<td width="150" valign="top">Isi Berita</td>
<td><textarea name="isi_berita" cols="40" rows="5" required="required"><?php
echo $b['isi_berita']; ?></textarea> </td>
</tr>
<tr>
<td>Kategori Berita</td>
<td><select name="kategori" size="1">
<?php
$kat=mysql_query("SELECT * FROM kategori_berita ORDER
BY id_kategori DESC");
if ($b['id_kategori']==0) {

echo "<option value=0 selected='selected'>- Pilih Kategori
Berita -</option>";
}
while($k=mysql_fetch_array($kat))
if ($b['id_kategori']==$k['id_kategori'])
{
echo "<option value=$k[id_kategori]
selected='selected'>$k[nm_kategori]</option>";
}
else
{
echo "<option
value=$k[id_kategori]>$k[nm_kategori]</option>";
}
?>
</select> </td>
</tr>
<tr>
<td valign="top">Foto Berita</td>
<td><img src="../foto_berita/small_<?php echo $b['pic_berita']; ?>" /></td>
</tr>
<tr>
<td width="150">Ubah Foto Berita</td>
<td><input name="fupload" type="file" size="40"/> </td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</form>
<?php } ?>
</body>
</html>
Simpan file berita_edit.php di C:\xampp\htdocs\berita\admins\berita_edit.php

Berita_update.php
<?php
if (empty($lokasi_file)){
mysql_query("UPDATE berita SET id_kategori = '$_POST[kategori]',
headnews = '$_POST[headnews]',
isi_berita = '$_POST[isi_berita]',
modified_date = '$tgl_sekarang',
modified_time = '$jam_sekarang'
WHERE id_berita = '$_POST[id]'");
}
else{
UploadImage($nama_file);
mysql_query("UPDATE berita SET id_kategori = '$_POST[kategori]',
headnews = '$_POST[headnews]',
isi_berita = '$_POST[isi_berita]',
pic_berita = '$nama_file',
modified_date = '$tgl_sekarang',
modified_time = '$jam_sekarang'
WHERE id_berita = '$_POST[id]'");
}
?>
Simpan file berita_update.php di
C:\xampp\htdocs\berita\admins\berita_update.php
Berita_hapus.php
<?php

$data = mysql_fetch_array(mysql_query("SELECT pic_berita FROM berita
WHERE id_berita = '$_GET[id]'"));
if ($data['pic_berita']!=''){
mysql_query("DELETE FROM berita WHERE id_berita = '$_GET[id]'");
unlink("../foto_berita/$data[pic_berita]");
unlink("../foto_berita/small_$data[pic_berita]");
}
else {
mysql_query("DELETE FROM berita WHERE id_berita = '$_GET[id]'");
}
?>
Simpan file berita_hapus.php di C:\xampp\htdocs\berita\admins\berita_hapus.php

44
BAB 6
Studi Kasus Web Berita #5 (Komentar & Hubungi)
Halaman komentar akan menampilkan setiap komentar yang dikirimkan oleh
pengunjung website yang berkomentar pada sebuah topik berita. Komentar yang
masuk perlu di moderasi terlebih dahulu oleh admin untuk menyaring komentar yang
tidak layak. Berikut tampilan halaman tampil komentar didalam panel administrator.
Gambar 6.1. Tampil komentar berita.
Komentar_tampil.php
<head>
</head>
<body>
<tr>
<td colspan="6" class="judul">Komentar Berita</td>
</tr>
<tr>
<th width="40" id="th_bottom">No.</td>
<th width="180" id="th_bottom">Berita</td>
<th width="150" id="th_bottom">Nama Komentar</td>
<th width="150" id="th_bottom">URL</td>
<th width="100" id="th_bottom">Tgl Komentar</td>
<th width="100" id="th_bottom">Aksi</td>
</tr>
<?php

$tampil = mysql_query("SELECT * FROM berita, komentar_berita
WHERE berita.id_berita = komentar_berita.id_berita
ORDER BY id_komentar DESC");
$no = 1;
$jml = mysql_num_rows($tampil);
while($r=mysql_fetch_array($tampil))
{
?>
<tr>
<td width="180" id="td_bottom"><?php echo $r['headnews']; ?></td>
<td width="150" id="td_bottom"><?php echo $r['nama_komentar']; ?></td>
<td width="150" id="td_bottom"><?php echo $r['url']; ?></td>
<td width="100" id="td_bottom"><?php echo $r['created_date']; ?></td>
onclick="window.location='?page=editKomentar&id=<?php echo
$r['id_komentar'];?>'"/>
onclick="window.location='?page=hapusKomentar&id=<?php echo $r['id_komentar'];
?>'"/> </div></td>
</tr>
<?php $no++; } ?>
<tr>
</tr>
</table>
</body>
</html>
Simpan file komentar_tampil.php di
C:\xampp\htdocs\berita\admins\komentar_tampil.php

Gambar 6.2. Edit komentar berita.
Komentar_edit.php
<head>
</head>
<body>
<?php
$edit = mysql_query("SELECT * FROM berita, komentar_berita
AND id_komentar =
'".mysql_real_escape_string($_GET['id'])."' ");
while($r=mysql_fetch_array($edit))
{
?>
<form action="?page=updateKomentar" method="post">
<input type="hidden" name="id" value="<?php echo $r['id_komentar']; ?>" />
<tr>
<td colspan="2" class="judul">Edit Komentar Berita</td>
</tr>

<tr>
<td width="200">Headnews Berita</td>
<td><input name="headnews" type="text" size="50" maxlength="100"
readonly="readonly" value="<?php echo $r['headnews']; ?>"/> </td>
</tr>
<tr>
<td width="200">Nama Komentar</td>
<td><input name="nama" type="text" size="50" maxlength="30"
readonly="readonly" value="<?php echo $r['nama_komentar']; ?>"/></td>
</tr>
<tr>
<td width="200">URL</td>
<td><input name="url" type="text" size="50" maxlength="30" readonly="readonly"
value="<?php echo $r['url']; ?>"/></td>
</tr>
<tr>
<td width="200">Email</td>
<td><input name="email" type="text" size="50" maxlength="30"
readonly="readonly" value="<?php echo $r['email_komentar']; ?>"/></td>
</tr>
<tr>
<td width="200" valign="top">Isi Komentar</td>
<td><textarea name="komentar" cols="50" rows="5" readonly="readonly"><?php
echo $r['isi_komentar']; ?></textarea></td>
</tr>
<?php
if ($r['aktif_komentar']=='Y'){
?>
<tr>
<td><input name="aktif" type="radio" value="Y" checked="checked"/>
Ya
<input name="aktif" type="radio" value="N" />
Tidak</td>
</tr>
<?php } else { ?>
<tr>
<td><input name="aktif" type="radio" value="Y" />
Ya
<input name="aktif" type="radio" value="N" checked="checked"/>
Tidak</td>
</tr>

48
<?php } ?>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2"><div align="right">
<input name="submit" type="submit" value="Simpan" />
<input name="reset" type="reset" value="Batal" onclick="self.history.back();"/>
</div></td>
</tr>
</table>
</form>
<?php } ?>
</body>
</html>
Simpan file komentar_edit.php di
C:\xampp\htdocs\berita\admins\komentar_edit.php
Komentar_update.php
<?php
mysql_query("UPDATE komentar_berita SET aktif_komentar = '$_POST[aktif]'
WHERE id_komentar = '$_POST[id]'");
echo "<meta http-equiv='refresh' content='0;url=?page=tampilKomentar'>";
?>
Simpan file komentar_update.php di
C:\xampp\htdocs\berita\admins\komentar_update.php
Komentar_hapus.php
<?php
mysql_query("DELETE FROM komentar_berita WHERE id_komentar =
'$_GET[id]' ");

49
echo "<meta http-equiv='refresh' content='0;url=?page=tampilKomentar'>";
?>
Simpan file komentar_hapus.php di
C:\xampp\htdocs\berita\admins\komentar_hapus.php
Berikutnya membuat file tampil hubungi, dimana ini akan menampilkan pesan-pesan
dari pengunjung yang diinputkan melalui halaman website.
Gambar 6.3. Tampil hubungi.
Hubungi_tampil.php
<head>
</head>
<body>
<tr>
<td colspan="5" class="judul">Hubungi</td>
</tr>
<tr>
<th width="50" id="th_bottom"><div align="center">No.</div></td>
<th width="150" id="th_bottom"><div align="center">Nama Lengkap</div></td>
<th width="150" id="th_bottom"><div align="center">Email</div></td>
<th width="200" id="th_bottom"><div align="center">Pesan</div></td>
<th width="100" id="th_bottom"><div align="center">Aksi</div></td>
</tr>
<?php

$sql = mysql_query("SELECT * FROM hubungi ORDER BY id_hubungi
DESC");
$no = 1;
$jml = mysql_num_rows($sql);
while($r=mysql_fetch_array($sql))
{
?>
<tr>
<td width="150" id="td_bottom"><?php echo $r['nama_lengkap']; ?></td>
<td width="150" id="td_bottom"><?php echo $r['email']; ?></td>
<td width="200" id="td_bottom"><?php echo $r['pesan']; ?></td>
onclick="window.location='?page=hapusHubungi&id=<?php echo $r['id_hubungi'];
?>'"/> </div></td>
</tr>
<?php $no++; } ?>
<tr>
</tr>
</table>
</body>
</html>
Simpan file hubungi_tampil.php di
C:\xampp\htdocs\berita\admins\hubungi_tampil.php
Hubungi_hapus.php
<?php
mysql_query("DELETE FROM hubungi WHERE id_hubungi = '$_GET[id]'");
echo "<meta http-equiv='refresh' content='0;url=?page=tampilHubungi'>";
?>
Simpan file hubungi_hapus.php di
C:\xampp\htdocs\berita\admins\hubungi_hapus.php

51
BAB 7
Studi Kasus Web Berita #6 (Login dan Logout)
Salah satu cara pencegahan suatu sistem adalah dengan melakukan login terlebih
dahulu sebelum dapat mengaksesnya. Pembatasan pengguna sistem dimaksudkan
agar sistem dapat diakses oleh orang-orang yang tepat dan berkepentingan secara
langsung dengan sistem.
Gambar 7.1. Login admin.
Login.php
<head>
<style type="text/css">
.judul_txt {
font-size: x-large;
color: #FFF;
}
</style>
</head>
<body>
<form action="cek_login.php" method="post">
<table width="400" border="0" align="center">
<tr>
<td colspan="2" bgcolor="#FF0000" class="judul_txt">LOGIN ADMIN</td>
</tr>
<tr>

52
<td> </td>
<td> </td>
</tr>
<tr>
<td width="140">Username</td>
<td><input name="user" type="text" size="40" maxlength="30"
required="required"/></td>
</tr>
<tr>
<td width="140">Password</td>
<td><input name="pswd" type="password" size="40" maxlength="30"
required="required"/></td>
</tr>
<tr>
</tr>
<tr>
value="Login" /> <input name="reset" type="reset" value="Batal" /></div></td>
</tr>
</table>
</form>
</body>
</html>
Simpan file login.php di C:\xampp\htdocs\berita\admins\login.php
Cek_login.php
<?php
include ('../config/inc.koneksi.php');
$uname=$_POST['user'];
$pass=MD5($_POST['pswd']);
$sql=mysql_query("select
* from admin where user_admin='$uname' and
pass_admin='$pass'");
$r=mysql_fetch_array($sql);
if ($r['user_admin']==$uname and $r['pass_admin']==$pass)
{
session_start();
$_SESSION['username']=$r['user_admin'];
$_SESSION['passwd']=$r['pass_admin'];

echo "<script>alert('Anda berhasil login, silahkan masuk.');
window.location = 'home.php?page=home'</script>";
}
else
{
echo "<script>alert('LOGIN GAGAL! Username atau Password Anda tidak sesuai.');
window.location = '../admins/index.php'</script>";
}
?>
Simpan file cek_login.php di C:\xampp\htdocs\berita\admins\cek_login.php
Logout.php
<?php
session_start();
if($_SESSION['username']==0){
session_unset();
session_destroy();
echo "<script>alert('Anda menuju halaman login'); window.location =
'../admins/index.php'</script>";
}
else{
echo "<script>alert('Silahkan login kembali');
window.location = '../admins/index.php'</script>";
}
?>
Simpan file logout.php di C:\xampp\htdocs\berita\admins\logout.php

54
BAB 8
Studi Kasus Web Berita #7 (Home dan Profil)
Home berfungsi sebagai halaman depan website. pada halaman home terdapat
welcome page sebagai informasi awal kepada pengguna (dalam hal ini administrator).
Gambar 8.1. Halaman home administrator.
Home.php
<?php
session_start();
include_once "../config/inc.koneksi.php";
?>
<head>
<link href="../assets/css/style1.css" rel="stylesheet" type="text/css"/>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
</script>
</head>

<body>
<table width="900" align="center" id="table">
<tr>
<td height="50" colspan="2" id="header">Halaman Administrator</td>
</tr>
<tr>
<td width="200" valign="top"><ul id="MenuBar1" class="MenuBarVertical">
<li><a href="home.php?page=home">Beranda</a></li>
<li><a href="?page=profil">Profil</a></li>
<li><a href="home.php?page=tampilKategori">Kategori Berita</a></li>
<li><a href="home.php?page=tampilBerita">Berita</a></li>
<li><a href="?page=tampilKomentar">Komentar Berita</a></li>
<li><a href="?page=tampilHubungi">Hubungi</a></li>
<li><a href="logout.php">Logout</a></li>
</ul></td>
<td valign="top">
<?php include "../admins/buka_file.php"; ?>
</td>
</tr>
<tr>
<td height="40" colspan="2" id="footer">Copyright © 2015. All right
reserved.</td>
</tr>
</table>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Simpan file home.php di C:\xampp\htdocs\berita\admins\home.php
Index.php
<?php
header ('location:login.php');
?>
Simpan file index.php di C:\xampp\htdocs\berita\admins\index.php
File index.php digunakan untuk me-redirect file home.php agar saat mengakses
didalam URL tidak menyebutkan nama file *.php.

56
Welcome.php
<?php
echo"
<p>
<h2>Selamat datang dihalaman administrator.</h2><br />
<li>Silahkan gunakan pilihan menu yang terdapat dipanel sebelah kiri Anda untuk
mengelola konten website.</li>
<li>Gunakan halaman ini sesuai dengan kebutuhan Anda.</li>
</p>
";
?>
Simpan file welcome.php di C:\xampp\htdocs\berita\admins\welcome.php
Profil.php
<?php
$profil =
mysql_query("SELECT * FROM profil WHERE id_profil =
'".mysql_real_escape_string(1)."'");
$r = mysql_fetch_array($profil);
?>
<form action="?page=updateProfil" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="<?php echo $r['id_profil']; ?>" />
<tr>
<td colspan="2" class="judul">Update Profil</td>
</tr>
<tr>
<td width="200" valign="top">Isi Profil</td>
<td><textarea name="isi_profil" cols="50" rows="10" required="required"><?php
echo $r['isi_profil']; ?></textarea> </td>
</tr>
<tr>
<td width="200">Ganti Gambar Profil</td>
<td><input name="fupload" type="file" size="40" /> </td>
</tr>
<tr>
<td width="200" valign="top">Gambar Profil</td>
<td><img src="../foto_profil/small_<?php echo $r['img_profil']; ?>" ></td>
</tr>
<tr>

57

value="Update"
onclick="window.location='?page=updateProfil'"/> <input
name="reset"
type="reset"
value="Batal"
onclick="window.location='?page=home'"/></div></td>
</tr>
</table>
</form>
Simpan file profil.php di C:\xampp\htdocs\berita\admins\profil.php
Update_profil.php
<?php
if (empty($lokasi_file)){
mysql_query("UPDATE profil SET isi_profil = '$_POST[isi_profil]',
modified_date = '$tgl_sekarang'
WHERE id_profil = '$_POST[id]'");
}
else{
UploadProfil($nama_file);
mysql_query("UPDATE profil SET isi_profil = '$_POST[isi_profil]',
img_profil = '$nama_file',
modified_date = '$tgl_sekarang'
WHERE id_profil = '$_POST[id]'");
}
echo "<meta http-equiv='refresh' content='0;url=?page=home'>";
?>
Simpan file update_profil.php di C:\xampp\htdocs\berita\admins\update_profil.php

58
BAB 9
Studi Kasus Web Berita #8 (Halaman Pengunjung)
Halaman pengunjung merupakan halaman yang ditujukan bagi pengunjung website
untuk memperoleh informasi yang dibutuhkan.
Gambar 9.1. Halaman index pengunjung.
Home.php
1.0 Transitional//EN"
<head>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css"
/>
<link href="assets/css/style2.css" rel="stylesheet" type="text/css" />
</head>

59
<body>
<table width="900" border="0" align="center" class="table">
<tr>
<td height="100" colspan="2" bgcolor="#0033FF" class="judul_header">COME
News</td>
</tr>
<tr>
<td colspan="2"><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="?page=berita">Beranda</a>
</li>
<li><a href="?page=profil">Profil</a></li>
<li><a href="#">Kegiatan</a>
</li>
<li><a href="?page=hubungi">Hubungi Kami</a></li>
</ul></td>
</tr>
<tr>
<td width="200" valign="top"><?php include "kategori.php"; ?></td>
<td><?php include "akses.php"; ?></td>
</tr>
<tr>
<td height="40" colspan="2" id="footer"><div align="center">Copyright © 2015.
All right reserved.</div></td>
</tr>
</table>
var
MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Simpan file home.php di C:\xampp\htdocs\berita\home.php
Index.php
<?php
header('location:home.php?page=berita');
?>
Simpan file index.php di C:\xampp\htdocs\berita\index.php

60
Akses.php
<?php
$pg = isset($_GET['page']) ? $_GET['page'] : '' ; /*-- PHP 5 --*/
switch ($pg) {
//-- konten berita --/
case 'berita' :
if(!file_exists ("konten.php"))die("File konten berita tidak tersedia.");
include ("konten.php");
break;
//-- detail berita --/
case 'detailBerita' :
if(!file_exists
("detail_berita.php"))die("File detail berita tidak
tersedia.");
include ("detail_berita.php");
break;
/
*----------------------------------------------------------------------------------
---------------
-*/
//-- kategori --/
case 'kategori' :
if(!file_exists
("detail_berita.php"))die("File detail berita tidak
tersedia.");
include ("detail_berita.php");
break;
//-- berita per kategori --/
case 'katPilihan' :
if(!file_exists
("kategori_pilihan.php"))die("File kategori pilihan tidak
tersedia.");
include ("kategori_pilihan.php");
break;
/
*----------------------------------------------------------------------------------
---------------
-*/
//-- profil --/
case 'profil' :
if(!file_exists ("view_profil.php"))die("File profil tidak tersedia.");
include ("view_profil.php");
break;

61
/
*----------------------------------------------------------------------------------
---------------
-*/
//-- hubungi --/
case 'hubungi' :
if(!file_exists ("hubungi.php"))die("File hubungi tidak tersedia.");
include ("hubungi.php");
break;
//-- aksi hubungi --/
case 'aksiHubungi' :
if(!file_exists
("aksi_hubungi.php"))die("File aksi hubungi tidak
tersedia.");
include ("aksi_hubungi.php");
break;
/
*----------------------------------------------------------------------------------
---------------
-*/
//-- aksi komentar --/
case 'aksiKomentar' :
if(!file_exists
("aksi_komentar.php"))die("File aksi komentar tidak
tersedia.");
include ("aksi_komentar.php");
break;
}
?>
Simpan file home.php di C:\xampp\htdocs\berita\akses.php

62
BAB 10
Studi Kasus Web Berita #9 (Isi & Kategori Berita)
Setelah halaman pengunjung sudah siap untuk digunakan, langkah selanjutnya adalah
memasukkan konten berita kedalam halaman website. Konten berita terdiri dari
gambar berita, isi berita, tanggal berita, kategori berita serta link
untuk berita
selengkapnya.
Konten.php
<?php
include "config/inc.koneksi.php";
$sql = mysql_query("SELECT * FROM berita, kategori_berita
ORDER BY id_berita DESC LIMIT 5");
while($r=mysql_fetch_array($sql)){
$deskripsi = nl2br($r['isi_berita']); //-- membuat paragraf --//
$isi = substr($deskripsi,0,150); //-- tampilkan sebanyak 100 kata --//
$pot_isi = substr($deskripsi,0,strrpos($isi, " ")); //-- potong per spasi
kalimat --//
?>
<tr>
<td colspan="2"><h3><a href="?page=detailBerita&id=<?php echo
$r['id_berita']; ?> "><?php echo $r['headnews']; ?></a></h3></td>
</tr>
<tr>
<td colspan="2" id="date"><?php echo $r['nm_kategori']; ?> | <?php echo
$r['created_date']; ?></td>
</tr>
<tr>
<td width="200"><?php echo "<img src='foto_berita/small_$r[pic_berita]'>";
?></td>
<td
valign="top"><?php echo $pot_isi; ?>...<a
href="?page=detailBerita&id=<?php echo $r['id_berita']; ?> ">Selengkapnya</a></td>
</tr>
<tr><td> </td></tr>
<tr><td colspan="2" id="td_konten"></td></tr>
</table>
<?php

}
?>
Simpan file konten.php di C:\xampp\htdocs\berita\konten.php
Detail_berita.php
Gambar 10.1. Halaman detail berita.

<?php
$detail = mysql_query("SELECT * FROM berita, kategori_berita
AND id_berita =
$d = mysql_fetch_array($detail);
$judul = $d['headnews'];
$detail_berita = nl2br($d['isi_berita']);
?>
function MM_validateForm() { //v4.0
if (document.getElementById){
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2];
val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail
address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between
'+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
} }
</script>
<tr>
<td colspan="2" style="text-decoration:none"><h3><?php echo $judul;
?></h3></td>
</tr>
<tr>
<td colspan="2" id="date"><?php echo $d['nm_kategori']; ?> | <?php echo
$d['created_date']; ?></td>
</tr>
<tr>
<td width="200" valign="top">

<?php
if($d['pic_berita']!=''){
echo "<img src='foto_berita/$d[pic_berita]'>";
}
?>
</td>
<td valign="top"><?php echo $detail_berita; ?></td>
</tr>
<tr><td colspan="2" id="td_konten"> </td></tr>
</table>


<tr>
<td><h4>Komentar</h4></td>
</tr>
<?php
$komen = mysql_query("SELECT * FROM komentar_berita, berita,
kategori_berita
AND berita.id_kategori = kategori_berita.id_kategori
AND aktif_komentar = 'Y'
AND berita.id_berita =
'".mysql_real_escape_string($_GET['id'])."'
ORDER BY id_komentar DESC LIMIT 10");
while($k=mysql_fetch_array($komen))
{
?>
<tr>
<td id="date"><?php echo $k['nama_komentar'];?> | <?php echo $k['url'];?> |
<?php echo $k['created_date'];?></td>
</tr>
<tr>
<td><?php echo $k['isi_komentar'];?></td>
</tr>
<tr>
<td id="td_konten"> </td>
</tr>
<?php } ?>

</table>


<form action="?page=aksiKomentar" method="post">
<input type="hidden" name="id" value="<?php echo $d['id_berita']; ?>" />
<table width="500" border="0" class="table_komen">
<tr>
<td colspan="2"><h4>Kolom Komentar</h4></td>
</tr>
<tr>
<td width="180">Nama</td>
<td><input name="nama" type="text" size="50" maxlength="30"
</tr>
<tr>
<td>URL</td>
<td><input name="url" type="text" size="50" maxlength="30"
</tr>
<tr>
<td><input name="email" type="text" required="required" id="email"
onblur="MM_validateForm('email','','RisEmail');return document.MM_returnValue"
size="50" maxlength="30"/></td>
</tr>
<tr>
<td width="180" valign="top">Komentar</td>
<td><textarea name="komentar" cols="50" rows="4"
required="required"></textarea></td>
</tr>
<tr>
</tr>
<tr>
<td colspan="2"><input name="submit" type="submit" value="Kirim" />
<input name="reset" type="reset" value="Batal" /></td>
</tr>
<tr>
</tr>
</table>
</form>

Simpan file detail_berita.php di C:\xampp\htdocs\berita\detail_berita.php
Untuk script yang di blok diatas dapat menggunakan Behaviors. Berikut langkah-
langkah nya.
1. Aktifkan panel Behaviors dari menu Windows.
Gambar 10.2. Aktifkan panel Behaviors.

68
2. Pilih atau letakkan kursor didalam objek text yang akan diberikan fungsi
validasi,
dalam kasus ini kolom email akan divalidasi untuk inputan berupa data email yang
mengandung tanda titik (.) dan @, pilih Validate Form.
Gambar 10.3. Menambahkan behaviors validate form.
3. Atur seperti pengaturan dibawah ini, lalu klik OK.
Gambar 10.4. Validate form.

Kategori.php
<?php
$sql = mysql_query("SELECT * FROM kategori_berita WHERE aktif_kategori =
'Y' ORDER BY id_kategori DESC");
?>
<table width="180" border="0" class="kat_table">
<tr>
<td id="kat_berita">Kategori Berita</td>
</tr>
<tr>
<td id="kat_text">
<?php
while($r=mysql_fetch_array($sql))
{
echo "<a
href='?page=katPilihan&id=$r[id_kategori]'><li>$r[nm_kategori]</li></a>";
}
?>
</td>
</tr>
</table>
Simpan file kategori.php di C:\xampp\htdocs\berita\kategori.php
Kategori_pilihan.php
<?php
$berita = mysql_query("SELECT * FROM berita, kategori_berita
AND berita.id_kategori =
$jml = mysql_num_rows($berita);
while($k = mysql_fetch_array($berita)){
$deskripsi = nl2br($k['isi_berita']); //-- membuat paragraf --//
$isi = substr($deskripsi,0,100); //-- tampilkan sebanyak 100 kata --//
$pot_isi = substr($deskripsi,0,strrpos($isi, " ")); //-- potong per spasi
kalimat --//

70
?>
<tr>
<td colspan="2"><h3><a href="?page=detailBerita&id=<?php echo
$k['id_berita']; ?> "><?php echo $k['headnews']; ?></a></h3></td>
</tr>
<tr>
<td colspan="2" id="date"><?php echo $k['nm_kategori']; ?> | <?php echo
$k['created_date']; ?></td>
</tr>
<tr>
<td width="200"><?php echo "<img
src='foto_berita/small_$k[pic_berita]'>"; ?></td>
<td valign="top"><?php echo $pot_isi; ?>...<a
href="?page=detailBerita&id=<?php echo $k['id_berita']; ?>
">Selengkapnya</a></td>
</tr>
<tr><td> </td></tr>
<tr><td colspan="2" id="td_konten"></td></tr>
</table>
<?php } ?>
Simpan file kategori_pilihan.php di C:\xampp\htdocs\berita\kategori_pilihan.php

71
BAB 11
Studi Kasus Web Berita #10 (Hubungi Hal. User)
Pengunjung yang mengunjungi website dapat meninggalkan pesan melalui halaman
website. Hal ini dimaksudkan untuk mendapatkan feed back dari pengunjung website.
Hubungi.php
1.0
Transitional//EN"
<head>
function MM_validateForm() { //v4.0
if (document.getElementById){
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for
(i=0;
i<(args.length-2); i+=3) { test=args[i+2];
val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if
(num<min || max<num) errors+='- '+nm+' must contain a number between
'+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
} }
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="?page=aksiHubungi">
<tr>
<td colspan="2"><h3>Hubungi Kami</h3></td>
</tr>
<tr>
<td width="200">Nama Lengkap</td>

72
<td><input
name="nama" type="text"
size="50" maxlength="30"
required="required" placeholder="Isi nama lengkap Anda."/> </td>
</tr>
<tr>
<td><input
name="email" type="text"
required="required" id="email"
onblur="MM_validateForm('email','','RisEmail');return
document.MM_returnValue"
size="50" maxlength="30" placeholder="Isi alamat email Anda."/></td>
</tr>
<tr>
<td width="200" valign="top">Pesan</td>
<td><textarea
name="pesan" cols="50" rows="4" required="required"
placeholder="Isi pesan Anda."></textarea></td>
</tr>
<tr>
</tr>
<tr>
<td colspan="2" id="td_konten"><div align="right"><input name="submit"
type="submit" value="Kirim" /> <input name="reset" type="reset" value="Batal"
onclick="window.location='?page=home'"/></div></td>
</tr>
</table>
</form>
</body>
</html>
Simpan file hubungi.php di C:\xampp\htdocs\berita\hubungi.php
Aksi_hubungi.php
<?php
include "config/library.php";
mysql_query("INSERT INTO hubungi (nama_lengkap,
email,
pesan,
created_date)
VALUES ('$_POST[nama]',
'$_POST[email]',
'$_POST[pesan]',
'$tgl_sekarang')");
echo "<meta http-equiv='refresh' content='0;url=?page=berita'>";
?>

Simpan file aksi_hubungi.php di C:\xampp\htdocs\berita\aksi_hubungi.php
Aksi_komentar.php
<?php
include "config/library.php";
$sql = mysql_query("SELECT * FROM berita WHERE id_berita =
$r = mysql_fetch_array($sql);
mysql_query("INSERT INTO komentar_berita (id_berita,
nama_komentar,
url,
email_komentar,
isi_komentar,
tgl_komentar,
jam_komentar)
VALUES ('$_POST[id]',
'$_POST[nama]',
'$_POST[url]',
'$_POST[email]',
'$_POST[komentar]',
'$tgl_sekarang',
'$jam_sekarang')");
echo "<meta http-equiv='refresh' content='0;url=?page=berita'>";
?>
Simpan file aksi_komentar.php di C:\xampp\htdocs\berita\aksi_komentar.php
View_profil.php
<?php
$sql = mysql_query("SELECT * FROM profil");
$r = mysql_fetch_array($sql);
?>
<body>

74
<tr>
<td colspan="2"><h3>Profil Portal Berita</h3></td>
</tr>
<tr>
<td width="200"><img src="foto_profil/small_<?php echo $r['img_profil']; ?>"
/></td>
<td valign="top"><?php echo $r['isi_profil']; ?></td>
</tr>
<tr>
<td colspan="2" id="td_konten"></td>
</tr>
</table>
</body>
Simpan file view_profil.php di C:\xampp\htdocs\berita\view_profil.php
Setelah website telah selesai dibangun, lakukan pengujian website pada lokal server
dengan mengetikkan alamat berikut pada address bar browser.
Untuk mengakses halaman utama pengunjung, ketik localhost/berita, lalu tekan
tombol Enter.
Untuk mengakses halaman utama administrator, ketik localhost/berita/admins.
Tekan Enter lalu masukkan username dan password yang ada didalam tabel admins.

75
BAB 12
Domain dan Hosting Website
Domain merupakan nama unik yang diberikan untuk mengidentifikasi nama server
komputer seperti web server atau email server di jaringan komputer ataupun
internet.
Fungsi domain adalah untuk mempermudah pengguna di internet pada saat
melakukan akses ke server, selain itu juga digunakan untuk mengingat nama server
yang dikunjungi tanpa harus mengenal deretan angka yang rumit yang dikenal sebagai
IP address.
Untuk lebih jelasnya, perhatikan gambar dibawah ini mengenai pengertian domain.
Gambar 12.1. Gambaran pengertian domain.
Hosting adalah layanan internet yang menyediakan jasa penyewaan server yang
didalamnya sudah diinstalkan services-services umum seperti HTTP, email, FTP,
addon domain, dan layanan sejenis yang masih ada kaitannya dengan website.
Kegunaan hosting sendiri banyak, salah satunya merupakan tempat penyimpanan
website agar website selalu online 24 jam. Oleh karena itu, biasanya web hosting
dilengkapi dengan software pendukung seperti Apache, PHP, CGI, Perl, dan yang
lainnya.

76
12.1. Daftar Domain dan Hosting
Apabila website telah di uji coba pada tingkatan lokal server dan tidak ditemukan
bug/error, maka website telah siap untuk di publish secara online.
Ada beberapa situs website yang dapat digunakan untuk mendaftarkan doman hosting
secara gratis, salah satunya adalah www.5gbfree.com. Setelah
melakukan
pendaftaran maka klien akan dikirimkan informasi berupa user dan password yang
dapat digunakan untuk mengakses cPanel.
12.2. Konfigurasi Database
Hal yang pertama kali dilakukan didalam halaman cPanel adalah konfigurasi database.
Berikut ini langkah-langkah konfigurasi database didalam cPanel.
1. Pastikan sudah login kedalam cPanel.
2. Pilih MySQL Database. (lihat gambar 12.2).
3. Buat database baru pada bagian Create a New Database, lalu klik tombol Create
Database. (lihat gambar 12.3.).
Pada tahapan ini, ketikkan nama database didalam kolom New Database. Nama
database diawali dengan prefix username cPanel.
4. Tambahkan pengguna baru untuk database yang telah dibuat. (lihat gambar 12.4).
-
Masukkan nama user pada kolom username. Username diawali dengan prefix
username cPanel.
-
Masukkan password yang diinginkan. Bisa juga dengan meng-klik tombol
Password Generator untuk mendapatkan password.
-
Klik Create a User.
5. Kemudian pilih pengguna untuk database, lalu klik Add. (lihat gambar 12.5).
Tahapan ini mendeskripsikan siapa user yang berhak mengakses database.

-
Pilih user.
-
Pilih database.
-
Klik tombol Add.

Gambar 12.2. Halaman cPanel.

Gambar 12.3. Create a new database.
Gambar 12.4. Add a new user.
Gambar 12.5. Add a user to database.

79
Saat melakukan konfigurasi database, set User Privileges seperti dibawah ini,
kemudian klik Make Change.
Gambar 12.6. User Privileges.
12.3. Import Database
Setelah konfigurasi MySQL selesai, tahapan berikutnya didalam cPanel adalah meng-
import database dari dalam localhost yang sebelumnya telah di export kedalam
ekstensi *.sql.
1. Pastikan sudah login kedalam cPanel.
2. Pilih phpMyAdmin.

Gambar 12.7. Pilih phpMyAdmin.

81
3. Apabila halaman phpMyAdmin sudah tampil, pilih Import lalu klik tombol Choose
File.
Gambar 12.8. Import database.
4. Lihat pada panel sebelah kiri, semua tabel sudah berhasil di import.
Gambar 12.9. Tabel berhasil di import.

82
12.4. Unggah File Website
Berikutnya unggah file-file projek web kedalam cPanel menggunakan FTP (File
Transfer Protocol), tidak hanya file-file PHP saja, termasuk gambar pendukung dan
file
lainnya perlu diunggah agar tampilan website pada saat online sesuai dengan
tampilan
website pada saat masih diruang lingkup localhost. Perhatikan langkah-langkah
unggah file PHP dengan FTP dibawah ini:
1. Pastikan sudah menginstal aplikasi FTP seperti FileZilla, CuteFTP, atau
FlashFXP.
2. Pilih Quick Connect.
Gambar 12.10. Quick Connect.
2. Masukkan beberapa informasi dibawah ini. Lalu klik Connect.
-
Address or URL, input dengan nama domain yang didapat dari domain
services.
-
User Name, input dengan username yang dikirimkan melalui email saat
pendaftaran domain hosting.
-
Password, input dengan password yang dikirimkan melalui email saat
pendaftaran domain hosting.

83
Gambar 12.11. Set Quick Connect.
3. Tunggu hingga terkoneksi dengan domain services. Pada kolom sebelah kanan
FTP akan tampil beberapa file dan folder diantaranya folder public_html. Double
click pada folder public_html, di folder inilah semua file-file PHP diunggah.
4. Pada kolom sebelah kiri FTP yang merupakan file dan folder yang berasal dari
PC
atau laptop. pilih lokasi penyimpanan file website. Unggah satu per satu file dan
folder, pilih dan klik kanan salah satu file atau folder yang terdapat di kolom
sebelah
kiri FTP, kemudian pilih Transfer. (lihat gambar 12.12).
5. Ulangi langkah nomor 4 hingga semua file dan folder berhasil diunggah.
6. Kembali ke kolom sebelah kanan FTP, hapus file index.html yang terdapat
didalam folder public_html. File tersebut merupakan file yang telah disediakan
oleh domain services untuk digunakan sebagai tampilan awal website. klik kanan
pada file index.html, lalu pilih Delete. (lihat gambar 12.13).

Gambar 12.12. Transfer file dan folder.
Gambar 12.13. Hapus file index.html.

85
12.5. Konfigurasi File Koneksi
Tahapan terakhir adalah menyesuaikan file inc.koneksi.php agar website dapat
tampil pada browser.
1. Login kedalam cPanel, pilih File Manager.
2. Pada panel sebelah kiri, klik public_html yang merupakan lokasi file dan
folder
website, pilih config. Perhatikan panel sebelah kanan, akan tampil isi file dari
folder config. Klik kanan pada file inc.koneksi.php kemudian pilih Edit.
Gambar 12.14. Edit file inc.koneksi.php.
3. Perhatikan gambar dibawah ini, ubah isi dari $user, $pass, dan $db sebagai
berikut.
Gambar 12.15. File inc.koneksi.php sebelum diubah.

Gambar 12.16. File inc.koneksi.php setelah diubah.
4. Ketik alamat www.devz74.5gbfree.com pada address bar browser, dan lihat
hasilnya. Website sudah dapat ditampilkan.

Modulwebdesign Studikasuswebberita 170322014108

Diunggah oleh

Informasi Dokumen

Judul Asli

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

Modulwebdesign Studikasuswebberita 170322014108

Diunggah oleh

Hak Cipta:

Format Tersedia

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design 6

Freak-kutuonline - Web Design 7

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design 9

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design 12

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design 17

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design 22

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design 30

Freak-kutuonline - Web Design 31

Freak-kutuonline - Web Design 32

Freak-kutuonline - Web Design 33

Freak-kutuonline - Web Design 34

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design 37

Freak-kutuonline - Web Design 38

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design 40

Freak-kutuonline - Web Design 41

Freak-kutuonline - Web Design 42

Freak-kutuonline - Web Design 43

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design 45

Freak-kutuonline - Web Design 46

Freak-kutuonline - Web Design 47

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design 50

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design 53

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design 55

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

<td colspan="2"><div align="right"><input name="submit" type="submit"

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design

Freak-kutuonline - Web Design