Modul web design - studi kasus website portal berita

1 Freak-kutuonline – Web Design

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).


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.


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.


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

FOOTER

CONTENTSIDE MENU

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.


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.


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.

Field Name Data Type Length/Size 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.

Field Name Data Type Length/Size Index Extra Id_kategori Int 5 Primary key Auto_Increment Nm_kategori Varchar 30 Aktif_kategori Enum ‘Y’,’N’

Default As defined: Y

Tabel 1.5. Tabel komentar_berita.

Field Name Data Type Length/Size Index Extra Id_komentar Int 5 Primary key Auto_Increment 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.

Field Name Data Type Length/Size Index 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.

Field Name Data Type Length/Size Index Extra Id_profil Int 5 Primary key Auto_Increment Isi_profil Text Img_profil Varchar 100 Modified_date Date


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.


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.


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.


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");


$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); } /*-----------------------------------------------------------------------------------------------------------*/


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.


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-width: thin; border-bottom-style: solid; border-bottom-color: #333; } #header { font-family: Arial, Helvetica, sans-serif; font-size: x-large; font-weight: lighter; color: #FFF; background-color: #03F; padding-left: 5px; } #footer { font-family: Arial, Helvetica, sans-serif; font-size: small; font-weight: lighter; 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-family: Arial, Helvetica, sans-serif; font-size: small; font-weight: lighter; color: #999; text-align: center; } #td_konten { border-bottom-width: thin; border-bottom-style: dashed; border-bottom-color: #CCC; }#date { font-family: Arial, Helvetica, sans-serif; font-size: small; font-weight: lighter; color: #999; } #kat_berita { font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: lighter; color: #FFF; background-color: #06F; } .kat_table { border: thin dashed #CCC; } #kat_text { font-family: Arial, Helvetica, sans-serif; font-size: medium; text-decoration: none; font-weight: lighter; } .table_komen {


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.


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.


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.


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.


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.


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.


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;


//-- 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 kategori berita tidak tersedia."); 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;


//-- update kategori berita --// case 'updateKategori' : if(!file_exists ("../admins/katberita_update.php"))die("File update kategori berita tidak tersedia."); include ("../admins/katberita_update.php"); break; //-- hapus kategori berita --// case 'hapusKategori' : if(!file_exists ("../admins/katberita_hapus.php"))die("File hapus kategori berita tidak tersedia."); 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;


/*---------------------------------------------------------------------------------------------------*/ //-- 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 komentar tidak tersedia."); include ("../admins/komentar_update.php"); break; //-- hapus komentar --// case 'hapusKomentar' : if(!file_exists ("../admins/komentar_hapus.php"))die("File hapus komentar tidak tersedia."); 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.


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" "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> <table width="500" border="0"> <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 include "../config/inc.koneksi.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

<!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> <?php include "../config/inc.koneksi.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"> <table width="500" border="0"> <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 width="150">Aktif</td> <td><input name="aktif" type="radio" value="Y" /> Ya <input name="aktif" type="radio" value="N" checked="checked"/> Tidak</td> </tr> <?php } ?> <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> <?php } ?> </body> </html>


Simpan file katberita_edit.php di C:\xampp\htdocs\berita\admins\katberita_edit.php Katberita_update.php

<?php include "../config/inc.koneksi.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]'"); echo "<meta http-equiv='refresh' content='0;url=?page=tampilKategori'>"; ?>

Simpan file katberita_update.php di C:\xampp\htdocs\berita\admins\katberita_update.php Katberita_hapus.php

<?php include "../config/inc.koneksi.php"; mysql_query("DELETE FROM kategori_berita WHERE id_kategori = '$_GET[id]' "); echo "<meta http-equiv='refresh' content='0;url=?page=tampilKategori'>"; ?>

Simpan file katberita_hapus.php di C:\xampp\htdocs\berita\admins\katberita_hapus.php


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

<!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=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>


<td><input name="headnews" type="text" size="50" required="required"/> </td> </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 include "../config/inc.koneksi.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> <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> <tr> <td colspan="2"> </td> </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/inc.koneksi.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.

<!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> <table width="700" border="0"> <tr> <td colspan="6"><input name="tambahBerita" type="button" value="Tambah Berita" onclick="window.location='?page=inputBerita'"/> </td> </tr> <tr> <td colspan="6"> </td> </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>


</tr> <?php include "../config/inc.koneksi.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="50" id="td_bottom"><?php echo $no; ?></td> <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> <td width="100" id="td_bottom"><div align="center"> <input name="edit" type="button" value="Edit" onclick="window.location='?page=editBerita&id=<?php echo $r['id_berita']; ?>'"/> <input name="hapus" type="button" value="Hapus" onclick="window.location='?page=hapusBerita&id=<?php echo $r['id_berita']; ?>'"/> </div></td> </tr> <tr> <td colspan="6"> </td> </tr> <?php $no++; } ?> <tr> <td colspan="6">Jumlah record : <?php echo $jml; ?></td> </tr> </table> </body> </html>

Simpan file berita_tampil.php di C:\xampp\htdocs\berita\admins\berita_tampil.php


Berita_edit.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> <?php include "../config/inc.koneksi.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 include "../config/inc.koneksi.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> <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> <tr> <td colspan="2"> </td> </tr> </table> </form> <?php } ?> </body> </html>

Simpan file berita_edit.php di C:\xampp\htdocs\berita\admins\berita_edit.php


Berita_update.php

<?php include "../config/inc.koneksi.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']; if (empty($lokasi_file)){ //apabila tidak ada gambar yang di upload 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]'"); } echo "<meta http-equiv='refresh' content='0;url=?page=tampilBerita'>"; ?>

Simpan file berita_update.php di C:\xampp\htdocs\berita\admins\berita_update.php Berita_hapus.php

<?php include "../config/inc.koneksi.php"; include "../config/fungsi_thumb.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]'"); } echo "<meta http-equiv='refresh' content='0;url=?page=tampilBerita'>"; ?>

Simpan file berita_hapus.php di C:\xampp\htdocs\berita\admins\berita_hapus.php


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

<!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> <table width="700" border="0"> <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


include "../config/inc.koneksi.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="40" id="td_bottom"><?php echo $no; ?></td> <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> <td width="100" id="td_bottom"><div align="center"> <input name="edit" type="button" value="Edit" onclick="window.location='?page=editKomentar&id=<?php echo $r['id_komentar'];?>'"/> <input name="hapus" type="button" value="Hapus" onclick="window.location='?page=hapusKomentar&id=<?php echo $r['id_komentar']; ?>'"/> </div></td> </tr> <?php $no++; } ?> <tr> <td colspan="6">Jumlah record : <?php echo $jml; ?></td> </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

<!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> <?php include "../config/inc.koneksi.php"; $edit = mysql_query("SELECT * FROM berita, komentar_berita WHERE berita.id_berita = komentar_berita.id_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']; ?>" /> <table width="680" border="0"> <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 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 width="150">Aktif</td> <td><input name="aktif" type="radio" value="Y" /> Ya <input name="aktif" type="radio" value="N" checked="checked"/> Tidak</td> </tr>


<?php } ?> <tr> <td width="200"> </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> <?php } ?> </body> </html>

Simpan file komentar_edit.php di C:\xampp\htdocs\berita\admins\komentar_edit.php Komentar_update.php

<?php include "../config/inc.koneksi.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 include "../config/inc.koneksi.php"; mysql_query("DELETE FROM komentar_berita WHERE id_komentar = '$_GET[id]' ");


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

<!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> <table width="680" border="0"> <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 include "../config/inc.koneksi.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="50" id="td_bottom"><?php echo $no; ?></td> <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> <td width="100" id="td_bottom"><div align="center"> <input name="hapus" type="button" value="Hapus" onclick="window.location='?page=hapusHubungi&id=<?php echo $r['id_hubungi']; ?>'"/> </div></td> </tr> <?php $no++; } ?> <tr> <td colspan="5">Jumlah record : <?php echo $jml; ?></td> </tr> </table> </body> </html>

Simpan file hubungi_tampil.php di C:\xampp\htdocs\berita\admins\hubungi_tampil.php Hubungi_hapus.php

<?php include "../config/inc.koneksi.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


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

<!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> <style type="text/css"> .judul_txt { font-size: x-large; font-weight: lighter; 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>


<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> <td colspan="2"> </td> </tr> <tr> <td colspan="2"><div align="right"><input name="submit" type="submit" 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


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"; ?> <!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" /> <link href="../assets/css/style1.css" rel="stylesheet" type="text/css"/> <title>Untitled Document</title> <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> <script type="text/javascript"> 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.


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 include "../config/inc.koneksi.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']; ?>" /> <table width="600" border="0"> <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>


<td colspan="2"><div align="right"><input name="submit" type="submit" 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 include "../config/inc.koneksi.php"; include "../config/fungsi_thumb.php"; include "../config/library.php"; $lokasi_file=$_FILES['fupload']['tmp_name']; $tipe_file=$_FILES['fupload']['type']; $nama_file=$_FILES['fupload']['name']; if (empty($lokasi_file)){ //apabila tidak ada gambar yang di upload 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


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

<!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> <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>


<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> <script type="text/javascript"> 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


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;


/*--------------------------------------------------------------------------------------------------*/ //-- 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


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 WHERE berita.id_kategori = kategori_berita.id_kategori 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 --// ?> <table width="680" border="0"> <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 include "config/inc.koneksi.php"; $detail = mysql_query("SELECT * FROM berita, kategori_berita WHERE berita.id_kategori = kategori_berita.id_kategori AND id_berita = '".mysql_real_escape_string($_GET['id'])."' "); $d = mysql_fetch_array($detail); $judul = $d['headnews']; $detail_berita = nl2br($d['isi_berita']); ?> <script type="text/javascript"> 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> <table width="680" border="0"> <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>  <table width="680" border="0"> <tr> <td><h4>Komentar</h4></td> </tr> <?php $komen = mysql_query("SELECT * FROM komentar_berita, berita, kategori_berita WHERE berita.id_berita = komentar_berita.id_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" required="required"/> </td> </tr> <tr> <td>URL</td> <td><input name="url" type="text" size="50" maxlength="30" required="required"/> </td> </tr> <tr> <td width="180">Email</td> <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> <td colspan="2"> </td> </tr> <tr> <td colspan="2"><input name="submit" type="submit" value="Kirim" /> <input name="reset" type="reset" value="Batal" /></td> </tr> <tr> <td colspan="2"> </td> </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.


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 include "config/inc.koneksi.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 include "config/inc.koneksi.php"; $berita = mysql_query("SELECT * FROM berita, kategori_berita WHERE berita.id_kategori = kategori_berita.id_kategori AND berita.id_kategori = '".mysql_real_escape_string($_GET['id'])."' "); $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 --//


?> <table width="680" border="0"> <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


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

<!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> <script type="text/javascript"> 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"> <table width="600" border="0"> <tr> <td colspan="2"><h3>Hubungi Kami</h3></td> </tr> <tr> <td width="200">Nama Lengkap</td>


<td><input name="nama" type="text" size="50" maxlength="30" required="required" placeholder="Isi nama lengkap Anda."/> </td> </tr> <tr> <td width="200">Email</td> <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> <td colspan="2"> </td> </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/inc.koneksi.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/inc.koneksi.php"; include "config/library.php"; $sql = mysql_query("SELECT * FROM berita WHERE id_berita = '".mysql_real_escape_string($_GET['id'])."' "); $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 include "config/inc.koneksi.php"; $sql = mysql_query("SELECT * FROM profil"); $r = mysql_fetch_array($sql); ?> <body>


<table width="680" border="0"> <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.


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.


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.


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.


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.


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.


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.


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.

Modul web design - studi kasus website portal berita

Technology

Transcript of Modul web design - studi kasus website portal berita