Institutional Repository | Satya Wacana Christian University: Perancangan Website Berita “Indonesia Hari Ini"

(1)

LAMPIRAN

1. Kode Program

a.

Kode Program Admin

<!doctype html> <head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Login Admin</title>

<link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/styles.css"> </head>

<body>

<div id="container">

<div id="uper">Masuk Admin</div> <?php

session_start();

if (!empty($_SESSION['member_admin'])) { header('location:berandaAdmin.php'); }

?> <?php

if (!empty($_GET['error'])) { if ($_GET['error'] == 1) {

echo 'Username dan Password belum diisi!'; } else if ($_GET['error'] == 2) {

echo 'Username belum diisi!'; } else if ($_GET['error'] == 3) { echo 'Password belum diisi!</h3>'; } else if ($_GET['error'] == 4) {

(2)

} } ?>

<form action="adminOtentikasi.php" method="post"> <label for="name">Nama Member :</label>

<input type="name" name="member_admin"> <label for="username">Kata Sandi :</label> <input type="password" name="pass_admin"> <div id="lower">

<div class="beck"><a href="berandaIndex.php">Kembali ke Beranda</a></div>

<input type="submit" value="Login"> </div>

</form> </div> </body> </html> <?php

include('koneksi.php'); session_start();

$member_admin=$_POST['member_admin']; $pass_admin=$_POST['pass_admin'];

$member_admin= mysql_real_escape_string($member_admin); $pass_admin = mysql_real_escape_string($pass_admin); if (empty($member_admin) && empty($pass_admin)) { header('location:admin.php?error=1');

break;

} else if (empty($member_admin)) { header('location:admin.php?error=2'); break;

} else if (empty($pass_admin)) { header('location:admin.php?error=3'); break;

}

(3)

member_admin='$member_admin' and pass_admin='$pass_admin'"); if (mysql_num_rows($q) == 1) {

$_SESSION['member_admin'] = $member_admin; header('location:berandaAdmin.php'); } else {

header('location:admin.php?error=4'); }

?>

b.

Kode Program User

<!doctype html>

<html>

<head>

<title>Login User</title>

</head>

<body>

<div id="uper">Masuk User</div>

<?php

session_start();

if (!empty($_SESSION['member_user'])) {

header('location:berandaUser.php');

}

?>

<?php

if (!empty($_GET['error'])) {

if ($_GET['error'] == 1) {

echo 'Username dan Password belum diisi!';

} else if ($_GET['error'] == 2) {

(4)

echo 'Password belum diisi!</h3>';

echo 'Username dan Password tidak terdaftar!';

}

?>

<label for="name">Nama Member :</label>

<label for="username">Kata Sandi :</label>

<div class="beck"><a href="berandaIndex.php">Kembali ke Beranda</a></div>

</div>

</form>

</div>

</body>

</html>

<?php

include('koneksi.php');

session_start();

$member_user=$_POST['member_user'];

$pass_user=$_POST['pass_user'];

$member_user= mysql_real_escape_string($member_user);

$pass_user = mysql_real_escape_string($pass_user);

if (empty($member_user) && empty($pass_user)) {

header('location:user.php?error=1');

break;

} else if (empty($member_user)) {

break;

(5)

break;

}

$q = mysql_query("select * from user where

member_user='$member_user' and pass_user='$pass_user'");

if (mysql_num_rows($q) == 1) {

login

$_SESSION['member_user'] = $member_user;

header('location:berandaUser.php');

} else {

}

?>

c.

Kode Proram User

Non

Member

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<ul>

</ul>

(6)

var m_names = new Array("Januari", "Febuari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember");

var d_names = new Array("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Juma't", "Sabtu");

var currentTime = new Date()

var day = currentTime.getDay()

var month = currentTime.getMonth() + 1

var date = currentTime.getDate()

var year = currentTime.getFullYear()

document.write( d_names[day] + ", " + date + " " + m_names[month] + " " + year + ", ")

window.setTimeout("jam()",1000);

function jam() {

var tanggal = new Date();

setTimeout("jam()",1000);

document.getElementById("ngeposta").innerHTML =

tanggal.getHours()+":"+tanggal.getMinutes()+":"+tanggal.getSeconds ();

}

//-->

</script>

<span id="ngeposta"></span> | <a href="user.php">Masuk</a> | <a href="userRegistrasi.php">Registrasi</a> |

</p>

<h1><a href="index.php">INDONESIA</a></h1>

</div>

<ol>

<li id="current" class="f" ><a href="berandaIndex.php" title="Beranda">Beranda</a></li>

<li><a href="nasionalIndex.php" title="Nasional">Nasional</a></li>

<li><a href="internasionalIndex.php"

(7)

<li><a href="ekonomiIndex.php" title="Ekonomi">Ekonomi</a></li>

<li><a href="olahragaIndex.php" title="Olahraga">Olahraga</a></li>

<li><a href="hiburanIndex.php" title="Hiburan & Gayahidup">Hiburan & Gaya Hidup</a></li>

<li><a href="teknologiIndex.php" title="Teknologi">Teknologi</a></li>

<li><a href="otomotifIndex.php" title="Otomotif">Otomotif</a></li>

</ol>

</div>

<h2><a href="nasionalAdmin.php" title="Nasional">Nasional</a></h2>

<?php

include("koneksi.php");

$kueri=mysql_query("select * from isi_berita WHERE kategori_berita = 'Nasional' ORDER BY id_berita DESC LIMIT 1 ");

while($baris=mysql_fetch_array($kueri))

{

$brief=substr($baris['isi_berita'], 0, 110)."...";

$jdlber=substr($baris['judul_berita'], 0, 36)."...";

?>

<h3><?php echo" <a href=beritaView.php?id=$baris[id_berita] title='$baris[judul_berita]'>$jdlber</a>"?></h3>

<div class="gbr"><div class="thumb"><?php echo "<a

href='images/dataFoto/$baris[gambar_berita]' target='_blank'><IMG SRC='images/dataFoto/$baris[gambar_berita]' align='left'

WIDTH='400' HEIGHT='92'/></a>"

?>

</div>

<div class="date"><?php echo"$baris[tanggal_berita]<br /> <B>Oleh : </B>$baris[nama_penulis]" ?></div>

<?php echo"$brief<br>" ;

echo "<div class='continue'><a

(8)

<?php

}

?>

<?php

{

?>

<div class="list1"><?php echo "<a href=beritaView.php?id=$baris[id_berita]

title='$baris[judul_berita]'>$jdlber</a>" ?></div>

<?php

}

?>

</div>

<h2>Berita Terkini</h2>

<ul>

<li title="<?php

{

echo "$baris[judul_berita]";

}

?>">

<?php

(9)

{

echo "<a href=beritaView.php?id=$baris[id_berita]>$jdlber</a>";

}

?></li></ul>

</div>

</div>

</body>

</html>

d.

CSS

(Cascading Style Sheets)

* {

margin: 0; padding: 0;

}

body {

text-align: center;

font: 12px Verdana;

color: #565656;

background-color: #e9e9e9;

}

a {

color: #dc1000;

text-decoration: none;

}

a:hover {

color: #000000;

}

img {

border: 0;

(10)

.break {

font-size: 0;

width: 0; height: 0;

clear: both;

}

.alignleft {

float: left;

margin: 4px 10px 5px 0;

}

.alignright {

float: right;

margin: 4px 0 5px 10px;

}

.aligncenter {

text-align: center;

}

.hidden {

display: none;

}

/** BEGIN wrapper **/

#wrapper {

width: 970px;

background: url(images/gambarTampilan/background.gif) repeat-y 0 0;

margin: auto auto;

text-align: left;

padding: 0 7px;

}

/** END wrapper **/

/** BEGIN header **/

#header {

background: #ffffff url(images/gambarTampilan/header.gif) repeat-x 0 0;

(11)

#header ul {

background-color:#252525;

float: left;

list-style-type: none;

padding: 8px 0;

margin-left: -5px;

}

#header ul li {

float: left;

text-transform: uppercase;

font-size: 0.9em;

padding: 0 10px;

border-left: 1px solid #252525;

}

#header ul li.f {

border: 0;

}

#header .links {

float:right;

width: 910px;

font-size: 0.9em;

color: #FFFFFF;

padding: 10px 30px 10px;

background-color: #C9002C;

text-align:right;

}

#header .links a {

margin-left: 14px;

color: #FFFFFF;

}

#header .logo {

float: left;

height: 60px;

(12)

#header .logo h1 {

font-family: "Lucida Sans";

font-size: 40px;

}

#header .logo h1 a {

color: #252525;

text-decoration: none ;

}

#header .logo p {

color: #DE2011;

font-weight: bold;

padding-left: 40px;

font-size: 20px;

}

#header .ad468x60 {

float: right;

padding: 16px 10px;

}

#header ol {

height: 35px;

background-color: #C9002C;

}

#header ol li {

float: left

}

#header ol li a {

color: #ffffff;

display: block;

}

#header ol li a:hover {

(13)

color: #ffffff;

}

#header ol li#current a {

color: #ffffff;

background-color: #000000;

}

#header timer{

color: #FFFFFF;

}

/** END header **/

/** BEGIN content **/

#content {

width: 666px;

float: left;

}

#content .post {

width: 299px;

height: 257px;

float: left;

padding: 10px 10px 0px 10px;

border: 7px #EEEEEE solid;

}

#content .post h2 {

font-family: Georgia;

font-size: 1.5em;

margin-bottom: 5px;

background-color: #EEEEEE;

text-align:center;

}

#content .post h2 a {

color: #252525;

}

#content .post .list1 {

(14)

font-size: 8pt;

margin-top: 10px;

color: #808080;

height: 15px;

float: left;

}

#content .post .date {

width: 160px;

font-size: 8pt;

color: #808080;

margin-top: 5px;

margin-bottom: 5px;

float:right;

}

#content .post .continue {

background-color: #DC1000;

display: block;

float: right;

font-weight: bold;

margin-top: 5px;

}

#content .post .continue a {

color: #ffffff;

}

#content .post .praf {

width: 290px;

height: 168px;

margin-top: 1px;

line-height: 1.4em;

text-align:justify;

font-size: 8pt;

(15)

}

#content .post .praf h3 {

font-size: 8pt;

text-align:center;

}

#content .post .praf h3 a {

color: #252525;

}

#content .post .gbr{

width: 120px;

height:110px;

float:left;

padding: 5px;

}

#content .post .thumb {

width: 110px;

height: 92px;

overflow: hidden;

border: 1px solid #E8E8E8;

margin-bottom: 10px;

float:left;

}

#content .post .thumb img {

width: 110px;

}

#content .postList{

width: 627px;

height: 650px;

(16)

}

#content .postList h2 {

text-align:center;

}

#content .postList h2 a {

color: #252525;

}

#content .postList h3 {

margin-bottom: 5px;

}

color: #000000;

}

#content .postList table {

font-size: 11pt;

}

#content .postList .date {

width: 315px;

font-size: 0.9em;

color: #808080;

margin-bottom: 5px;

float:right;

}

#content .postList .continue {

(17)

display: block;

float: right;

}

#content .postList .continue a{

color: #ffffff;

font-weight: bold;

}

#content .postList .col1{

height: 165px;

float:none;

border: 5px #EEEEEE solid ;

margin-bottom: 5px;

}

#content .postList .view1{

}

#content .postList .text{

width: 315px;

height: 81px;

text-align:justify;

line-height: 1.4em;

float:right;

}

#content .postList .thumb {

height: 120px;

width: 247px;

overflow: hidden;

padding: 5px;

(18)

float: left;

}

#content .postList .thumb div {

height: 120px;

overflow: hidden;

}

#content .postList .thumb img {

width: 247px;

}

#content .postView{

width: 605px;

height: 1400px;

float: left;

}

#content .postView h2 {

text-align:center;

}

#content .postView h2 a {

color: #252525;

}

#content .postView h3 {

margin-bottom: 5px;

}

color: #000000;

}

#content .postView table {

font-size: 12pt;

(19)

#content .postView .date {

width: 550px;

font-size: 0.9em;

color: #808080;

margin-top: 10px;

float: left;

}

#content .postView .continue {

display: block;

float: right;

}

#content .postView .continue a{

color:#ffffff

}

#content .postView .col1{

height: 700px;

float: none;

}

#content .postView .col2{

height: 210px;

width: 260px;

float: left;

margin-top: 2px;

}

#content .postView .text{

width: 585px;

height: 680px;

(20)

line-height: 1.3em;

float: left;

}

#content .postView .kom{

width: 585px;

height: 670px;

text-align: justify;

float:left;

line-height: 1.3em;

float: left;

}

#content .postView .thumb {

height: 200px;

width: 250px;

overflow: hidden;

padding: 5px;

float: left;

}

#content .postView .thumb div {

height: 200px;

overflow: hidden;

}

#content .postView .thumb img {

width: 247px;

}

#content .postslider{

width: 629px;

height: 360px;

float: left;

(21)

}

#content .postslider h2 {

margin-bottom: 5px;

text-align:center;

}

#content .postslider h2 a {

color: #252525;

}

#content .postslider .date {

font-size: 0.9em;

color: #808080;

margin-bottom: 5px;

}

#content .postslider p {

line-height: 1.4em;

text-align:justify;

}

#content .postslider .col1{

width: 280px;

height: 280px;

float: left;

}

#content .postslider .col1 h3 {

margin-bottom: 5px;

}

#content .post .col1 h3 a {

(22)

}

#content .postslider .continue {

display: block;

float: right;

}

#content .postslider .continue a{

color: #ffffff;

font-weight: bold;

}

#content .postslider .text{

height: 35px;

width: 260px;

text-align:justify;

line-height: 1.4em;

float: left;

}

#content .postslider .thumb {

height: 120px;

width: 247px;

overflow: hidden;

padding: 10px;

}

#content .postslider .thumb div {

height: 120px;

overflow: hidden;

}

#content .postslider .thumb img {

(23)

}

/** END content **/

/** BEGIN sidebar **/

#sidebar {

width: 300px;

float: right;

padding-bottom: 20px;

}

#sidebar .wrapper {

padding: 0 10px;

}

#sidebar h2 {

color: #252525;

font-size: 0.9em;

margin: 15px 0 10px;

}

#sidebar ul {

}

#sidebar ul li {

border-bottom: 1px dotted #DADADA;

line-height: 1.4em;

padding: 4px 0;

font-size: 0.9em;

}

#sidebar ul li a {

color: #808080;