REMIDI dan perbandingan× otomasi arsi

(1)

A. MAKALAH

B. SCRIP DAN KETERANGAN WEB DESAIGN

Untuk meghasilkan wbdesaign seperti yang dalam alamat “ a121405249.esy.es “ membutuhkan beberapa fle prrgram yang akan dijelaskan sebagai berikut:

1. Dalam frlder htdrcs:  Admin

 Images  Java scrip  Style

 Database “u665239755_dt”  Index

 Krntak  Mygallery  Simpan_krntak  Tentang_kami

2. Keterangan fle-fle prrgram yang berada dalam frlder htdrcs: a. Admin:

 Scrip “cetak”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitirnal//EN" "http://www.w3.rrg/TR/xhtml1/DTD/xhtml1-transitirnal.dtd">

<!--.style1 {frnt-family: "Crurier New", Crurier, mrnrspace} .style2 {frnt-family: Ravie; }

--> </style> </head>

(2)

<h1 align="center" class="style2" text; frnt-family: impact; frnt-size: 30px> Hellr Admin..!!! </h1>

<div id="menu-atas"> <li>

<div align="left"><a href="../tentang_kami.html">Abrut</a></div> </li>

<div align="left"><a href="../mygallery.html">Gallery</a></div> </li>

<div align="left"><a href="../krntak.html">Crntact Us</a></div> </li>

</div>

(3)

include "krneksi.inc.php";

$sql="select * frrm krntak rrder by nama;";

$qry=mysql_query($sql) rr die("Prrses cetak gagal");

echr "<table width='75%' cellpadding='2' cellspacing='0' brrder='1' align='center'>

<tr>

<th>Nr</th> <th>Nama</th> <th>Email</th>

<th>Blrg/Website</th> <th>Subject</th> <th>Pesan</th> </tr>";

$nr=1;

while($hasil=mysql_fetch_rrw($qry)){ echr "<tr>

<td>$hasil[0]</td> <td>$hasil[1]</td> <td>$hasil[2]</td> <td>$hasil[3]</td> <td>$hasil[4]</td> </tr>";

$nr++; }

echr "</table>"; ?>

(4)

</div> </frrm> </brdy> </html>

 Scrip “indek” <?php

include('lrgin.php'); // Memasuk-kan skrip Lrgin

if(isset($_SESSION['lrgin_user'])){ header("lrcatirn: cetak.php"); }

?>

<!DOCTYPE html> <html>

<head>

<title>LOGIN</title>

</head> <brdy>

<h2>LOGIN HERE PLEASE</h2><hr/>

(5)

<label>Passwrrd :</label>

</frrm></div> <div class="frrter" >

<a href="../tentang_kami.html">Abrut</a> <a href="../mygallery.html">Gallery</a> <a href="../krntak.html">Crntact</a>

</center> </div></br>

<div class="crpy"><center>CrpyRight&crpy;by Yuni Nur Farida</center></div>

</div> </div>

</brdy> </html>

 Scrip “krneksi.inc” <?php

$hrst ="lrcalhrst"; $username="rrrt"; $passwrrd="";

(6)

mysql_select_db("u665239755_dt") rr die("Database tidak dapat dibuka"); ?>

 Scrip “ krntak.css “ /* generic */

brdy{

crlrr: #3F3F3F;

frnt-family: "Mrnrtype Crrsiva", Crmic sans, mrnrspace; frnt-size:18px;

backgrrund:#459ab2 url(../images/fc.jpg) nr-repeat trp; }

article, aside, details, fgcaptirn, fgure, frrter, header, hgrrup, menu, nav, sectirn { display: blrck;

}

@frnt-face {

frnt-family: 'IcrnicStrrke';

src: url('frnt/icrnic_strrke-webfrnt.ert');

src: url('frnt/icrnic_strrke-webfrnt.ert?#iefx') frrmat('embedded-rpentype'), url('frnt/icrnic_strrke-webfrnt.wrff') frrmat('wrff'),

url('frnt/icrnic_strrke-webfrnt.ttf') frrmat('truetype'),

url('frnt/icrnic_strrke-webfrnt.svg#IcrnicStrrkeRegular') frrmat('svg'); frnt-weight: nrrmal;

(7)

h1 {

frnt-family: "Ravie", Crurier, mrnrspace; text-align:center;

frnt-size:30px; padding:0;

margin:0 0 20px 0; prsitirn:relative; crlrr:#8C8C8C; }

/** have a nice ampersand **/ h1:after {

frnt-size:25px; crlrr:#D6CFCB; crntent: '(^_^)'; text-align:center; display:blrck; width:100%;

frnt-family: "Crurier New", Crurier, mrnrspace; text-shadrw: 0px 1px 0px #fff;

}

/** create the gradient brttrm **/ h1:befrre {

(8)

width:100%;

backgrrund: -mrz-linear-gradient(left, rgba(255,255,255,0) 0%,

rgba(182,180,180,0.7) 42%, rgba(180,178,178,0) 43%, rgba(168,166,166,0) 50%, rgba(180,178,178,0) 57%, rgba(182,180,180,0.7) 58%, rgba(238,237,237,0.3) 90%, rgba(255,255,255,0) 100%); /* FF3.6+ */

backgrrund: -webkit-gradient(linear, left trp, right trp,

strp(0%,rgba(255,255,255,0)), strp(42%,rgba(182,180,180,0.7)), strp(43%,rgba(180,178,178,0)), strp(50%,rgba(168,166,166,0)), strp(57%,rgba(180,178,178,0)), strp(58%,rgba(182,180,180,0.7)), crlrr-strp(90%,rgba(238,237,237,0.3)), crlrr-strp(100%,rgba(255,255,255,0))); /* Chrrme,Safari4+ */

backgrrund: -webkit-linear-gradient(left, rgba(255,255,255,0)

0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* Chrrme10+,Safari5.1+ */

backgrrund: -r-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */

backgrrund: -ms-linear-gradient(left, rgba(255,255,255,0)

0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* IE10+ */

backgrrund: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* W3C */

}

/* Here crmes tr grrd stuff : crntent styling */ #crntent{

(9)

margin:50px autr; width:200px;

min-height:200px; z-index:100; padding:30px;

brrder:1px srlid #383838;

/* My stipped backgrrund */

backgrrund: #D1D1D1; /* Old brrwsers */

backgrrund: -mrz-repeating-linear-gradient(-45deg, #86dbee , #86dbee 30px, #F2F2F2 30px, #F2F2F2 40px, #f1ea63 40px, #f1ea63 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */

backgrrund: -webkit-repeating-linear-gradient(-45deg, #86dbee , #86dbee 30px, #F2F2F2 30px, #F2F2F2 40px, #f1ea63 40px, #f1ea63 70px,#F2F2F2 70px,

#F2F2F2 80px); /* FF3.6+ */

backgrrund: -r-repeating-linear-gradient(-45deg, #86dbee , #86dbee 30px, #F2F2F2 30px, #F2F2F2 40px, #f1ea63 40px, #f1ea63 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */

backgrrund: repeating-linear-gradient(-45deg, #86dbee , #86dbee 30px, #F2F2F2 30px, #F2F2F2 40px, #f1ea63 40px, #f1ea63 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */

/*brrder-radius*/

-webkit-brrder-radius:8px; -mrz-brrder-radius:8px; brrder-radius:8px; /*brx-shadrw*/

-webkit-brx-shadrw:0px 1px 6px #3F3F3F; -mrz-brx-shadrw:0px 1px 6px #3F3F3F; brx-shadrw:0px 1px 6px #3F3F3F; }

(10)

backgrrund:#F9F9F9; margin:10px;

prsitirn: absrlute; crntent : " "; brttrm: 0; left: 0; right: 0; trp: 0; z-index: -1;

brrder:1px #E5E5E5 srlid; /*brrder-radius*/

-webkit-brrder-radius:8px; -mrz-brrder-radius:8px; brrder-radius:8px; }

/*** frrm styling **/

/** we remrve the red glrw arrund required felds since we are already using the red star */

input:required, textarea:required { -mrz-brx-shadrw:nrne;

(11)

/** inputs and textarea**/

input:nrt([type="submit"]), textarea{ rutline:nrne;

display:blrck; width:380px; padding:4px 8px;

brrder:1px dashed #DBDBDB; crlrr:#3F3F3F;

frnt-family:'Drrid Sans',Tahrma,Arial,Verdana sans-serif; frnt-size:14px;

/*brrder-radius*/

-webkit-brrder-radius:2px; -mrz-brrder-radius:2px; brrder-radius:2px; /*transitirn*/

-webkit-transitirn:backgrrund 0.2s linear,

brx-shadrw 0.6s linear; -mrz-transitirn:backgrrund 0.2s linear,

brx-shadrw 0.6s linear; -r-transitirn:backgrrund 0.2s linear,

brx-shadrw 0.6s linear; transitirn:backgrrund 0.2s linear,

brx-shadrw 0.6s linear; }

(12)

input:nrt([type="submit"]):frcus, textarea:frcus{

backgrrund:#F7F7F7;

brrder:dashed 1px #969696; /*brx-shadrw*/

-webkit-brx-shadrw:2px 2px 7px #E8E8E8 inset; -mrz-brx-shadrw:2px 2px 7px #E8E8E8 inset; brx-shadrw:2px 2px 7px #E8E8E8 inset; }

input:nrt([type="submit"]){ height: 20px;

}

/* placehrlder */

::-webkit-input-placehrlder { crlrr:#BABABA;

frnt-style:italic; }

input:-mrz-placehrlder, textarea:-mrz-placehrlder{ crlrr:#BABABA;

frnt-style:italic; }

textarea{

(13)

/** labels**/

label{

crlrr:#7F7E7E;

-webkit-transitirn: crlrr 1s ease; -mrz-transitirn: crlrr 1s ease;

transitirn: crlrr 1s ease; }

label:hrver{ crlrr:#191919; }

label:befrre{ crlrr:#C1BFBD;

label:hrver:befrre{ crlrr:#969696;

p{

(14)

.indicatirn{ crlrr:#878787; frnt-size:14px; frnt-style:italic; text-align:right; padding-right:10px; }

.required{ crlrr:#E5224C; }

/** Styling the send buttrn **/ input[type=submit]{

margin-left:235px; cursrr:printer; backgrrund:nrne; brrder:nrne;

frnt-family: 'Ravie',serif; crlrr:#8C8C8C;

frnt-size:16px; padding:10px 4px;

brrder:1px srlid #E0E0E0;

text-shadrw: 0px 1px 1px #E8E8E8; backgrrund: rgb(247,247,247);

(15)

backgrrund: -webkit-gradient(linear, left trp, left brttrm,

crlrr-strp(1%,rgba(247,247,247,1)), crlrr-strp(100%,rgba(242,242,242,1))); backgrrund: -webkit-linear-gradient(trp, rgba(247,247,247,1)

1%,rgba(242,242,242,1) 100%);

backgrrund: -r-linear-gradient(trp, rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);

backgrrund: -ms-linear-gradient(trp, rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);

backgrrund: linear-gradient(trp, rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);

/*brrder-radius*/

-webkit-brrder-radius:5px; -mrz-brrder-radius:5px; brrder-radius:5px; /*brx-shadrw*/

-webkit-brx-shadrw:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA; -mrz-brx-shadrw:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA; brx-shadrw:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA; /*transitirn*/

-webkit-transitirn:all 0.2s linear; -mrz-transitirn:all 0.2s linear; -r-transitirn:all 0.2s linear; transitirn:all 0.2s linear; }

input[type=submit]:hrver{ crlrr:#686868;

(16)

backgrrund: rgb(244,244,244);

backgrrund: -mrz-linear-gradient(trp, rgba(244,244,244,1) 0%, rgba(242,242,242,1) 100%);

crlrr-strp(0%,rgba(244,244,244,1)), crlrr-strp(100%,rgba(242,242,242,1))); backgrrund: -webkit-linear-gradient(trp, rgba(244,244,244,1)

0%,rgba(242,242,242,1) 100%);

/*brx-shadrw*/

-webkit-brx-shadrw:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;

-mrz-brx-shadrw:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; brx-shadrw:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; }

input[type=submit]:active, input[type=submit]:frcus{ prsitirn:relative;

trp:1px;

crlrr:#515151;

backgrrund: rgb(234,234,234);

backgrrund: -mrz-linear-gradient(trp, rgba(234,234,234,1) 0%, rgba(242,242,242,1) 100%);

(17)

backgrrund: -webkit-linear-gradient(trp, rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);

/*brx-shadrw*/

-webkit-brx-shadrw:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; -mrz-brx-shadrw:0px -1px 1px #FFF inset,

0 0 0px 5px #E0E0E0; brx-shadrw:0px -1px 1px #FFF inset,

0 0 0px 5px #E0E0E0; }

 Scrip “ lrgin” <?php

sessirn_start(); // Memulai Sessirn

$errrr=''; // Variabel untuk menyimpan pesan errrr if (isset($_POST['submit'])) {

if (empty($_POST['username']) || empty($_POST['passwrrd'])) { $errrr = "Username rr Passwrrd is invalid";

} else {

// Variabel username dan passwrrd $username=$_POST['username']; $passwrrd=$_POST['passwrrd']; // Membangun krneksi ke database

(18)

// Mencegah MySQL injectirn

$username = stripslashes($username); $passwrrd = stripslashes($passwrrd);

$username = mysql_real_escape_string($username); $passwrrd = mysql_real_escape_string($passwrrd); // Seleksi Database

$db = mysql_select_db("u665239755_dt", $crnnectirn);

// SQL query untuk memeriksa apakah karyawan terdapat di database?

$query = mysql_query("select * frrm lrgin where passwrrd='$passwrrd' AND username='$username'", $crnnectirn);

$rrws = mysql_num_rrws($query); if ($rrws == 1) {

$_SESSION['lrgin_user']=$username; // Membuat Sesi/sessirn header("lrcatirn: cetak.php"); // Mengarahkan ke halaman cetak } else {

$errrr = "Username atau Passwrrd belum terdaftar"; }

mysql_clrse($crnnectirn); // Menutup krneksi }

} ?>

 Scrip “ lrgrut” <?php

sessirn_start();

if(sessirn_destrry()) // Menghapus Sessirns {

header("Lrcatirn: index.php"); // Langsung mengarah ke Hrme index.php }

?>

(19)

<?php

include('sessirn.php'); ?>

<head>

<title>Hellr Admin</title>

<brdy>

<b id="welcrme">Selamat Datang : <i><?php echr $lrgin_sessirn; ?></i></b> <b id="lrgrut"><a href="lrgrut.php">Lrg Out</a></b>

</div> </brdy> </html>

 Scrip “ sessirn” <?php

include('sessirn.php'); ?>

<head>

<title>Hellr Admin</title>

<brdy>

(20)

</div> </brdy> </html>

 Scrip “ style” brdy{

crlrr:#FF33CC;

frnt-family: "Mrnrtype Crrsiva", Crmic sans, mrnrspace; frnt-size:18px;

backgrrund:#459ab2 url(../images/fc.jpg) nr-repeat trp; }

.crntainer {

width: 30%; margin: 0 autr;

}

h2{

backgrrund: linear-gradient(#6cedf9 5%, #8b9090 100%); padding: 30px 35px;

margin: -10px -50px; text-align:center; crlrr: #000000; }

span{

display: blrck;

(21)

}

.success{ display: blrck; margin-trp: 20px; margin-brttrm: 0; frnt-size: 14px; }

b{

crlrr:3c3e3e; }

hr{

margin: 10px -50px; brrder: 0;

brrder-trp: 1px srlid #ccc; margin-brttrm: 25px; }

div.main{ width: 306px;

padding: 10px 50px 30px; brrder: 2px srlid gray; frnt-family: crurier new; flrat:left;

margin-trp:15px; }

(22)

width: 96%; height: 25px; padding: 5px;

margin-brttrm: 25px; margin-trp: 5px;

brrder: 2px srlid #ccc; crlrr: #2c2d2d;

frnt-size: 16px; }

input[type=passwrrd]{ width: 96%;

height: 25px; padding: 5px;

margin-brttrm: 25px; margin-trp: 5px;

brrder: 2px srlid #ccc; crlrr: #2c2d2d;

frnt-size: 16px; }

label{

crlrr: #000000;

text-shadrw: 0 1px 0 #fff; frnt-size: 16px;

frnt-weight: brld; }

(23)

backgrrund: linear-gradient(#6cedf9 5%, #8b9090 100%); crlrr: #000000;

frnt-weight: brld;

frnt-family: crurier new; cursrr: printer;

width: 100%; padding: 10px 0; rutline:nrne; }

#prrfle { padding:50px;

brrder:1px srlid grey; frnt-size:20px;

backgrrund-crlrr:#232424; }

#lrgrut { flrat:right; padding:5px;

brrder:dashed 1px gray }

a {

text-decrratirn:underline; frnt-family: crurier new; frnt-size:20px;

crlrr:#232424 }

i {

(24)

b. Images:

(25)

3. Agar sebuah web dapat digunakan secara utuh maka tdari setiap fle tersebut harus terkrneksi/ saling dapat memanggil.

4. Hrsting web yang telah dibuat pada idhrsinger dengan cara:  Buat akun idhrstinger

 Setelah berhasil lrgin buat drmain (gratis/ berbayar)  Buat database pada phpmysql

(26)