Berita Online

Tutorial Berita Online | Web Programming Support by : AMES System
Ganesis Alexander Page 1

STUDY KASUS : BERITA ONLINE

Untuk pembuatan berita online berbasis web, yang perlu kita perhatikan adalah
pengolahan data dari berita itu sendiri. Oleh karena itu, sebaiknya kita rancang terlebih
dahulu untuk racangan databasenya :

APLIKASI BERITA ONLINE

Nama Database : dbberitaonline

Nama Table :

1. tbberita

no int(12) auto_increment primary key
judul varchar(50)
isi text
tanggal varchar(25)
waktu varchar(25)

2. tbadmin

username varchar(35)
password varchar(35)

3. tbbukutamu

nama varchar(50)
email varchar(50)
website varchar(50)
komentar text
tanggal varchar(25)
waktu varchar(25)

Nama File :

Halaman User

1. menu.php
2. style.css
3. koneksi.php
4. home.php
5. index.php
6. berita.php
7. bukutamu.php
8. login.php

Halaman Admin

1. index.php
2. bukutamu.php
3. berita.php
4. editberita.php
5. logout.php

Nama Folder : beritaonline

1. Design Interface

Untuk pembuatan design, silahkan anda gunakan software designer seperti Photoshop
maupun Corer. Untuk Ukuran Width = 900px, dan Height = 150px. Simpan dengan nama
header.jpg

2. Codding Interface

- Halaman User

A. Pembuatan Menu dengan fasilitas CSS

Langkah pertama silahkan anda buat file baru, simpan dengan nama menu.php
Masukkan kode link untuk pemanggilan file style.css. Masukkan kode berikut :

style.css

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="menu">
<ul>
<li><a href="?page=home">Home</a></li>
<li><a href="?page=berita">Berita</a></li>
<li><a href="?page=bukutamu">Buku Tamu</a></li>
<li><a href="login.php">Login</a></li>
</ul>
</div>

</body>
</html>


Setelah file menu.php selesai, silahkan anda buat file baru dengan memilih type css. Simpan
dengan nama style.css. Silahkan anda ketik kode css untuk menu yang akan kita buat
stylenya.

/* CSS Document */
#menu {
background-color:#00CCFF;
width: 200px;
}
#menu ul {
list-style-type:none;
margin: 2px;
padding: 2px;
}
#menu li {
margin: 2px;
padding: 2px;
}
#menu a {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#FFFFFF;
text-decoration:none;
background-color:#0000FF;
display:block;
padding:2px;
}
#menu a:hover {
color:#FFFFOO;
background-color:#FF0000;
}

B. Pembuatan Index

Untuk pembuatan index silahkan anda buat file baru, dan simpan dengan nama index.php

Langkah-langkah pembuatan index.php

Dari menu instert > Table

Setting table anda sebagai berikut :



Kemudian klik OK.

Atur lah bagian Align> pilih Center.

Masukkan gambar header yang telah anda buat dengan cara letakkan kursor anda pada
bagian header, kemudian dari menu Insert > Images, kemudian cari gambar yang telah
anda buat, lalu Ok.

Silahkan anda design seperti gambar berikut :


1. Menambahkan file menu kedalam index.

Kemudian tambahkan table menu yang terletak di kolom pertama baris kedua. Letakkan
kursor anda di baris kedua kolom pertama, pilih Horz = Center, Vert = Top. Aturlah table anda
dengan settingan seperti berikut :

Kemudian klik OK.

Maka hasilnya designnya, seperti gambar berikut :

Letakkan kursor anda pada table yang barusan anda buat, kemudian buka code anda, lalu
ketikkan kode berikut untuk memanggil file menu yang telah kita buat. Masukkan kode
berikut ini :

<?php include "menu.php"; ?>


Maka akan muncul symbol php pada table anda.

Silahkan anda jalankan file index.php anda pada web browser anda.

2. Menambahkan file content kedalam index.

Silahkan anda klik pada baris kedua kolom kedua, buka code anda, dan ketikkan perintah
berikut :

<?php
include "koneksi.php";

$page=trim(strip_tags($_GET['page']));
if ($page==berita)
{include "berita.php";}
else if ($page==bukutamu)
{include "bukutamu.php";}
else
{include "home.php";}
?>


C. Pembuatan File Koneksi

Fiel koneksi ini digunakan untuk menghubungkan ke dalam database, silahkan tambahkan
file baru, dan simpan dengan koneksi.php.

Untuk kode nya silahkan anda ketik perintah berikut ini :

<?php
$server="localhost";
$user="root";
$pass="";
$db="dbberitaonline";
$konek=mysql_connect($server,$user,$pass);
mysql_select_db($db,$konek);
?>

D. Pembuatan file home

Untuk file home digunakan untuk menampilkan informasi yang pertama kali muncul. Silahkan
tambahkan file baru, kemudian disimpan dengan nama home.php

Masukkan kode home kalian didalam sintak <body>

home.php

<head>
<title>BERITA OLAHRAGA</title>
</head>

<body>
<p>SELAMAT DATANG</p>
<p>Selamat datang di website berita online, semua informasi tentang olahraga akan kami
hadirkan di situs ini..</p
>
</body>
</html>

Silahkan anda jalankan diweb browser anda, dana hasilnya :


E. Pembuatan file berita

File berita digunakan untuk menampilkan berita yang diiput oleh admin, berhubung kita
belum membuat file administrator, maka untuk data berita, silahkan anda input dari
database (localhost/phpmyadmin).

Setelah selesai, tambahkan file baru dan simpan dengan berita.php, masukkan sebuah
table dengan ketentuan sbb :

Silahkan anda buka code, kemudian anda masukkan perintah berikut ini yang berwarna
merah :


berita.php

<body>
<br />
<?php
$tampil=mysql_query("SELECT * FROM tbberita ORDER BY no DESC");
while($cetak=mysql_fetch_array($tampil))
{
?>
<table width="650" border="0" align="center" cellpadding="3" cellspacing="1">
<tr>
<td><b><font color="#0000FF"><?=$cetak[judul]?></font></b></td>
</tr>
<tr>
<td><hr /></td>
</tr>
<tr>
<td><?=$cetak[isi]?></td>
</tr>
<tr>
<td><font size="1"><i> <?=$cetak[tanggal]?> |<?=$cetak[waktu]?> </i></font></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<? } ?>
</body>

Lihat hasilnya.


F. Pembuatan file bukutamu

Buku tamu digunakan para pengunjung untuk meninggalkan pesan atau komentar tentang
website tersebut. Untuk pembuatannya silahkan anda buat file baru, simpan dengan nama
bukutamu.php

bukutamu.php

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<center>
<?php
$nama=trim(strip_tags($_POST['nama']));
$email=trim(strip_tags($_POST['email']));
$website=trim(strip_tags($_POST['website']));
$komentar=trim(strip_tags($_POST['komentar']));
$tanggal=trim(strip_tags(date("d-m-y")));
$waktu=date("h:i:s");
$proses=$_GET['proses'];
if($proses=='tambah')
{
$simpan=mysql_query("insert into tbbukutamu values
('','$nama','$email','$website','$komentar','$tanggal','$waktu')");
echo "<script language='JavaScript'> alert ('terima kasih $nama, anda telah mengisi
komentar') </script>";
}
?>

<form id="form1" name="form1" method="post"
action="?page=bukutamu&&proses=tambah">
<table width="400" border="0" cellspacing="1" cellpadding="3">

<tr>

<td height="35" colspan="2"><div align="center"><strong>BUKU
TAMU</strong></div></td>
</tr>
<tr>
<td width="91" bgcolor="#0099FF"><em>Nama</em></td>
<td width="294" bgcolor="#999999"><input name="nama" type="text" id="nama" /></td>
</tr>
<tr>
<td bgcolor="#0099FF"><em>Email</em></td>
<td bgcolor="#999999"><input name="email" type="text" id="email" /></td>
</tr>
<tr>
<td bgcolor="#0099FF"><em>Website</em></td>
<td bgcolor="#999999"><input name="website" type="text" id="website" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#0099FF"><em>Komentar</em></td>
<td bgcolor="#999999"><textarea name="komentar" cols="35" rows="3"
id="komentar"></textarea></td>
</tr>
<tr>
<td bgcolor="#0099FF"> </td>
<td bgcolor="#999999"><input type="submit" name="Submit" value="Submit" />
<input type="reset" name="Submit2" value="Reset" /></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
</form><br />
<?php
$tampilbuku=mysql_query("select * from tbbukutamu order by no desc");
while($cetakbuku=mysql_fetch_array($tampilbuku)){
?>
<table width="400" border="0" cellspacing="1" cellpadding="3" bgcolor="#FF66FF">
<tr>
<td width="494" bgcolor="#999999"><B><a
href="mailto:<?=$cetakbuku[email]?>"><?=$cetakbuku[nama]?></a></B> |
<?=$cetakbuku[tanggal]?> | <?=$cetakbuku[waktu]?> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><?=$cetakbuku[komentar]?></td>

</tr>
</table>
<?
}
?>
</center>
</body>
</html>


Lihat hasilnya :

G. Pembuatan file login

Halaman login digunakan administrator untuk masuk ke halaman administrator untuk
memproses data berita dan buku tamu.
Silahkan anda buat file baru dan simpan dengan nama login.php, untuk itu silahkan anda
ketik perintah berikut ini :

login.php

<?php
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>
<?php
$username=trim(strip_tags($_POST['username']));
$password=trim(strip_tags($_POST['password']));
if($proses=='login'){
$bacatabel=mysql_query("SELECT * FROM tbadmin WHERE username='$username' AND
password='$password'");
$cek=mysql_num_rows($bacatabel);
if($cek=='0'){
echo "<br><center>Maaf Anda Gagal Login, Silahkan Anda Coba
Kembali</center><br>";
} else if($cek!='0'){
$_SESSION['username']=$username;
$_SESSION['password']=$password;
echo "<br><center>Login Berhasil, <br>
<a href='admin/index.php'>Silahkan Klik
disini Untuk masuk ke halaman Admin</a></center><br>";
}
}
?>
<form name="form1" method="post" action="?proses=login">
<tr bgcolor="#0099CC">
<td colspan="2"> </td>
</tr>
<td width="96">Username</td>
<td width="238"><input name="username" type="text" id="username"></td>
</tr>
<td>Password</td>
<td><input name="password" type="password" id="password"></td>
</tr>
<td> </td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</form>
</body>
</html>

Lihat hasilnya :


Silahkan anda masukkan username : admin, password = admin, jika benar maka akan keluar
pesan

Silahkan klik link nya untuk masuk ke halaman administrator.

- Halaman Admin

A. Halaman Index

Untuk halaman index digunakan untuk menampilkan halaman administrator. Buatlah file
baru dan simpan dengan nama index.php. Sebelum anda simpan, silahkan anda buat
folder baru di dalam folder beritaonline dengan nama admin.

index.php

<?php
session_start();
include "../koneksi.php";
$username=$_SESSION['username'];
$password=$_SESSION['password'];
if($cek=='0'){
echo "Maaf anda tidak berhak Masuk ke halaman ini, Anda harus Login Terlebih Dahulu";
} else {
?><style type="text/css">

</style>

<tr>
<td height="29" colspan="3" align="center" bgcolor="#0066FF"><span
class="style1">HALAMAN
ADMINISTRATOR</span></td>
</tr>
<tr>
<td width="208" height="221" align="center" valign="top" bgcolor="#0066FF"><table
width="200" border="0" cellpadding="0" cellspacing="2" bgcolor="#FFFFFF">
<tr>
<td height="36" align="center" valign="middle" bgcolor="#FF0000"><strong>Menu
Admin</strong> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="menu"><a href="logout.php">- Logout </a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="menu"><a href="?page=bukutamu">- Buku Tamu </a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="menu"><a href="?page=berita">- Berita</a></td>
</tr>
</table></td>
<td width="679" align="center" valign="top" bgcolor="#FFFFFF">
<?php
$page=trim(strip_tags($_GET['page']));
if($page=='bukutamu')
{
include "bukutamu.php";
}
else if($page=='berita')
{
include "berita.php";
}
else if($page=='editberita')
{
include "editberita.php";
}

?>
</td>
<td width="6" align="center" valign="top" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#0066FF"> </td>
</tr>
</table>
<?php
}
?>

Lihat hasilnya :



B. File logout

File logout digunakan untuk keluar dari halaman administrator, buatlah file baru dan simpan
dengan logout.php (didalam folder admin), silahkan ketik kode berikut ini pada view code :

logout.php

<?php
session_start();
unset($_SESSION['username']);
unset($_SESSION['password']);
echo "Anda Berhasil Logout / Keluar dari halaman Admin, <br>
<a href='../index.php'>Klik disini
untuk ke halaman utama</a>";
?>

C. File Buku Tamu

Halaman buku tamu adalah hasil inputan dari buku tamu pada halaman user. Disini admin
dapat menghapus data buku tamu. Buatlah file baru dan disimpan dengan nama
bukutamu.php (didalam folder admin), silahkan anda ketik kode berikut ini :

bukutamu.php

<?php
session_start();

if($cek=='0'){
} else {
?>

<style type="text/css">

</style>
<div align="center">BUKU TAMU </div>

<?php
$no=trim(strip_tags($_GET['no']));
if($proses=='hapus'){
$hapus=mysql_query("DELETE FROM tbbukutamu WHERE
no='$no'");
echo "<br><center><b>Proses Hapus data Berhasil</b></center><br>";
}
?>
<tr>
<td width="32" height="29" align="center" valign="middle" bgcolor="#CCCCCC">No</td>
<td width="103" align="center" valign="middle" bgcolor="#CCCCCC">Nama</td>
<td width="104" align="center" valign="middle" bgcolor="#CCCCCC"><span
class="style3">Email</span></td>
<td width="127" align="center" valign="middle" bgcolor="#CCCCCC">Website</td>
<td width="162" align="center" valign="middle" bgcolor="#CCCCCC"><span
class="style3">Komentar</span></td>
<td width="79" align="center" valign="middle" bgcolor="#CCCCCC">Proses</td>
</tr>
<?php
$tampil=mysql_query("SELECT * FROM tbbukutamu ORDER BY no DESC");
while($cetak=mysql_fetch_array($tampil)){
?>
<tr>
<td align="left" valign="middle" class="style4"><?=$cetak[no]?></td>
<td align="left" valign="middle" class="style4"><?=$cetak[nama]?></td>
<td align="left" valign="middle" class="style4"><?=$cetak[email]?></td>
<td align="left" valign="middle" class="style4"><?=$cetak[website]?></td>
<td align="left" valign="middle" class="style4"><?=$cetak[komentar]?></td>
<td align="center" valign="middle"><a
href="?page=bukutamu&&proses=hapus&&no=<?=$cetak[no]?>">Hapus</a> </td>
</tr>
<?php

}
?>
</table>
<?php
}
?>

Lihat hasilnya :

D. Halaman Berita

Halaman berita digunakan untuk menginput berita, menghapus dan mengedit berita.
Buatlah file baru dan simpan dengan nama berita.php (Didalam folder admin). Silahkan
anda ketik kode berikut ini :

berita.php

<?php
session_start();

if($cek=='0'){
} else {
?>

<?php
$judul=trim(strip_tags($_POST['judul']));
$isi=trim(strip_tags($_POST['isi']));
$tanggal=trim(strip_tags(date("d-m-y")));
$waktu=date("h:i:s");
$tombol=$_POST['Submit'];
if($tombol=='Submit'){
$simpan=mysql_query("insert into tbberita values
('','$judul','$isi','$tanggal','$waktu')");
echo "<script language='JavaScript'> alert ('terima kasih $nama, anda telah mengisi berita')
</script>";
}
?>

<head>
<style type="text/css">

</style>
</head>

<body>

<form id="form1" name="form1" method="post" action="">
<br />
<tr>
<td height="37" colspan="2" bgcolor="#FF9900"><div align="center"><strong>INPUT BERITA
</strong></div></td>
</tr>
<tr>
<td width="115">Judul</td>
<td width="379"><input name="judul" type="text" id="judul" size="50" maxlength="50"
/></td>
</tr>
<tr>

<td valign="top">Isi</td>
<td><textarea name="isi" cols="50" rows="5" id="isi"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="Submit" />
<input type="reset" name="Submit2" value="Reset" /></td>
</tr>
</table>
</form>
<br />

<?php
if($proses=='hapus'){
$hapus=mysql_query("DELETE FROM tbberita WHERE no='$no'");
echo "<br><center><b>Proses Hapus data Berhasil</b></center><br>";
}
?>

<tr>
<td height="41" colspan="7" bgcolor="#FF9900"><div align="center"><strong>DATA BERITA
</tr>
<tr>
<td width="56" bgcolor="#CCCCCC"><div align="center" class="style1">NO</div></td>
<td width="129" bgcolor="#CCCCCC"><div align="center" class="style1">JUDUL</div></td>
<td width="278" bgcolor="#CCCCCC"><div align="center" class="style1">ISI</div></td>
<td width="89" bgcolor="#CCCCCC"><div align="center"
class="style1">TANGGAL</div></td>
<td width="86" bgcolor="#CCCCCC"><div align="center"><span
class="style1">WAKTU</span></div></td>
<td width="86" colspan="2" bgcolor="#CCCCCC"><div align="center"
class="style1">PROSES</div></td>
</tr>
<?php
$tampil=mysql_query("SELECT * FROM tbberita ORDER BY no DESC");
while($cetak=mysql_fetch_array($tampil)){
?>
<tr>
<td><?=$cetak[no]?></td>
<td><?=$cetak[judul]?></td>
<td><?=$cetak[isi]?></td>
<td><?=$cetak[tanggal]?></td>
<td><?=$cetak[waktu]?></td>
<td><a href="?page=berita&&proses=hapus&&no=<?=$cetak[no]?>">Hapus</a></td>
<td><a href="?page=editberita&&no=<?=$cetak[no]?>">Edit</a></td>
</tr>
<?php
}
?>

</table>


<?php
}
?>
</body>
</html>

Lihat hasilnya :

E. Halaman edit berita

Halaman edit berita digunakan untuk merubah data berita yang bisa dilakukan oleh admin.
Buatlah file baru dan simpan dengan nama editberita.php. (Didalam folder admin). Silahkan
anda desain dan ketik kode nya.

editberita.php

<?php
session_start();

if($cek=='0'){
} else {
?>
<head>
</head>

<body>
<br>
<?php
$judul=trim(strip_tags($_POST['judul']));
$isi=trim(strip_tags($_POST['isi']));
if($proses=='ubah')
{
$simpan=mysql_query("UPDATE tbberita SET judul='$judul', isi='$isi' WHERE no='$no'");
echo "<br><center><b>Proses Ubah data Berhasil , <a
href='?page=berita'>Kembali</a></b></center><br>";
}
$tampil=mysql_query("SELECT * FROM tbberita WHERE no='$no'");
$cetak=mysql_fetch_array($tampil);
?>

<form id="form1" name="form1" method="post"
action="?page=editberita&&no=<?=$no?>&&proses=ubah">
<tr>
<td height="33" colspan="2" bgcolor="#FF9900"><div align="center"><strong>EDIT BERITA
</tr>
<tr>
<td width="186">Judul</td>
<td width="482"><input name="judul" type="text" id="judul" value="<?=$cetak[judul]?>"
size="50" maxlength="50" /></td>
</tr>
<tr>
<td valign="top">Isi</td>
<td><textarea name="isi" cols="50" rows="5" id="isi"><?=$cetak[isi]?>
</textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="Submit" /></td>
</tr>

</table>
</form>
<?php
}
?>
</body>
</html>

Lihat hasilnya :


SCREENSHOT BERITA ONLINE

1. Halaman Index / Home

2. Halaman Berita


3. Halaman Buku Tamu

4. Halaman Login


5. Halaman Index Admin

6. Halaman Buku Tamu Admin


7. Halaman Input Berita Admin

8. Halaman Edit Berita Admin

Berita Online

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Berita Online

Diunggah oleh

Hak Cipta:

Format Tersedia

Tutorial Berita Online | Web Programming Support by : AMES System

Ganesis Alexander Page 1

Anda mungkin juga menyukai