PROSEDUR
KERJA
A.
Membuat
Halaman Login
Gambar
3.3 Halaman Login
Penulis
yang pertama kali dilakukan adalah membuat file CSS untuk menyamakan style dalam
Web. File yang dibuat adalah style.css dan adminstyle.css dan ditaruh di
folder “css”, berikut adalah isi dari
file tersebut
.background {
font: 16px Helvetica;
background: #f7f7f7;
}
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
tfoot {
display: table-header-group;
}
.menu{
height: 541px;
}
.fonttabel{
font-size: 11px;
text-align: center;
}
.color{
background: #890000;
}
.header {
background: #890000;
padding: 0px;
margin-bottom: 10px;
margin-top: 0;
}
.footer {
background: #890000;
padding: 3px;
margin-top: 10px;
}
.kotak {
width: 275px;
padding: 0 30px 30px 30px;
margin: 60px auto;
text-align: center;
}
.ff {
font-size: 32px;
font-weight: 100;
margin-bottom: 25px;
}
.logo {
display: block;
position: relative;
margin: 0 auto;
top: -30px;
height: 80px;
width: 80px;
background: url('telkom.jpg') center center no-repeat,#ffffff;
border-radius: 50%;
}
.inputlogin {
width: 100%;
background: #cacaca;
border: none;
height: 30px;
margin-bottom: 15px;
border-radius: 2px;
text-align: center;
font-size: 14px;
color: #585858;
}
.btnlogin {
width: 100%;
height: 30px;
border: none;
background: #0088cc;
color: #ecf0f1;
font-weight: bold;
font-size: 15px;
margin-bottom: 15px;
border-radius: 2px;
transition: all ease-in-out .2s;
}
.btnlogin:focus {
outline: none;
}
.btnlogin:hover {
background: #003380;
}
.white{
color:white;
}
.center{
text-align: center;
}
.navbar-red {
background-color: #890000;
border-color: #080808;
}
.navbar-red .navbar-brand {
color: #ffffff;
}
.navbar-red .navbar-brand:hover,
.navbar-red .navbar-brand:focus {
color: #777;
background-color: transparent;
}
.navbar-red .navbar-text {
color: #ffffff;
}
.navbar-red .navbar-nav > li
> a {
color: #d1cfcf;
}
.navbar-red .navbar-nav > li
> a:hover,
.navbar-red .navbar-nav > li
> a:focus {
color: #ffffff;
background-color: transparent;
}
.navbar-red .navbar-nav >
.active > a,
.navbar-red .navbar-nav >
.active > a:hover,
.navbar-red .navbar-nav >
.active > a:focus {
color: #890000;
background-color: #ffffff;
}
.navbar-red .navbar-nav >
.disabled > a,
.navbar-red .navbar-nav >
.disabled > a:hover,
.navbar-red .navbar-nav >
.disabled > a:focus {
color: #ccc;
background-color: transparent;
}
.navbar-red .navbar-toggle {
border-color: #ffffff;
}
.navbar-red .navbar-toggle:hover,
.navbar-red .navbar-toggle:focus {
background-color: #890000;
}
.navbar-red .navbar-toggle
.icon-bar {
background-color: #ffffff;
}
.navbar-red .navbar-collapse,
.navbar-red .navbar-form {
border-color: #ffffff;
}
.navbar-red .navbar-nav > .open
> a,
.navbar-red .navbar-nav > .open
> a:hover,
.navbar-red .navbar-nav > .open
> a:focus {
color: #555;
background-color: #e7e7e7;
}
@media (max-width: 767px) {
.navbar-red .navbar-nav .open .dropdown-menu > li > a {
color: #890000;
}
.navbar-red .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-red .navbar-nav .open .dropdown-menu > li > a:focus {
color: #890000;
background-color: #890000;
}
.navbar-red .navbar-nav .open .dropdown-menu > .active > a,
.navbar-red .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-red .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #890000;
background-color: #890000;
}
.navbar-red .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-red .navbar-nav .open .dropdown-menu > .disabled >
a:hover,
.navbar-red .navbar-nav .open .dropdown-menu > .disabled > a:focus
{
color: #890000;
background-color: #890000;
}
}
.navbar-red .navbar-link {
color: #890000;
}
.navbar-red .navbar-link:hover {
color: #890000;
}
.navbar-red .btn-link {
color: #890000;
}
.navbar-red .btn-link:hover,
.navbar-red .btn-link:focus {
color: #890000;
}
.navbar-red
.btn-link[disabled]:hover,
fieldset[disabled] .navbar-red
.btn-link:hover,
.navbar-red
.btn-link[disabled]:focus,
fieldset[disabled] .navbar-red
.btn-link:focus {
color: #ccc;
}
.input-search {
display: block;
width: 100%;
height: 25px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0,
0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow
ease-in-out .15s;
-o-transition: border-color ease-in-out
.15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out
.15s, box-shadow ease-in-out .15s;
}
.input-search:focus {
border-color:
#66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,
175, 233, .6);
box-shadow: inset 0 1px 1px
rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
.input-search::-moz-placeholder {
color: #777;
opacity: 1;
}
.input-search:-ms-input-placeholder
{
color: #777;
}
.input-search::-webkit-input-placeholder
{
color: #777;
}
.input-search[disabled],
.input-search[readonly],
fieldset[disabled] .input-search {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}
textarea.input-search {
height: auto;
}
Scipt di
atas adalah untuk file style.css dan untuk yang adminstyle.css adalah sebagai
berikut.
body {
background-image:
url(../images/bd-bg.gif);
font-family : Tahoma;
text-align : center;
}
#header {
position : relative;
background-image :
url(../images/header.jpg);
background-repeat : no-repeat;
margin-right : auto;
margin-left : auto;
width : 780px;
border : 2px solid #ec3236;
padding-top : 70px;
text-align : left;
}
#content {
margin-left : 10px;
padding : 120px 10px 0 0;
}
#contentA {
margin-left : 190px;
padding : 100px 10px 0 0;
}
#content p {
font-size : 80%;
line-height : 1.8em;
padding-left : 2em;
}
table {
font-family : Tahoma;
font-size : 8pt;
border-width : 1px;
border-style : solid;
border-color : #999999;
border-collapse : collapse;
margin : 10px 0px;
}
th {
color : #FFFFFF;
font-size : 7pt;
text-transform : uppercase;
text-align : center;
padding : 0.5em;
border-width : 1px;
border-style : solid;
border-color : #969BA5;
border-collapse : collapse;
background-color : #555c62;
}
td {
padding : 0.5em;
color : #333333;
vertical-align : top;
border-width : 1px;
border-style : solid;
border-color : #969BA5;
border-collapse : collapse;
}
input,textarea,select{
font-family : Tahoma;
font-size : 8pt;
}
#footer {
padding : 8px 0 8px 255px;
font-size : 80%;
color : #FFFFFF;
background-color : #ec3236;
}
Setelah itu Penulis
membuat file index.php tetapi di dalam
nya script HTML. Isi dari index.php
adalah sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<link rel="stylesheet"
type="text/css" href="css/adminstyle.css">
<link
rel="stylesheet" type="text/css"
href="css/style.css">
<link rel="shortcut icon"
href="css/telkom.ico">
<title>Login Form</title>
</head>
<body>
<div
id="header">
<div
id="content">
<p class='ff'>LOGIN
FORM</p>
<input class='inputlogin'
placeholder='Username' type='text' name="username">
<input class='inputlogin'
placeholder='Password' type='password'
name="password"><br><br>
<button class='btnlogin'
type="submit">LOGIN</button>
</form>
<p> </p>
</div>
<div id="footer">
Copyright © 2014 by SMK Telkom
Sandhy Putra Banjarbaru
</div>
</div>
</body>
</html>
B.
Membuat
Halaman Home Admin
Gambar
3.4 Halaman Home Admin
Penulis diberi file bootstrap.css untuk mengatur menu di kanan dan di taruh di folder
“css”. Setelah itu Penulis membuat file
Home.php yang berisikan HTML dan ditaruh di folder
“Admin”, dan berikut adalah script di
Home.php
<!DOCTYPE
html>
<html>
<head>
<link
rel="stylesheet" type="text/css"
href="css/adminstyle.css">
<link rel="shortcut icon"
href="css/telkom.ico">
<link
rel="stylesheet" type="text/css"
href="css/style.css" >
<link rel="stylesheet"
type="text/css" href="css/bootstrap.css">
<title>Telkom Indonesia |
Admin</title>
</head>
<body>
<div
id="header">
<div
id="content">
<nav class="navbar navbar-red
visible-xs visible-sm" role="navigation">
<div class="collapse
navbar-collapse" id="navcol">
<ul class="nav
navbar-nav">
<li
class="active"><a
href="home.php">Home</a></li>
<li><a>Plan
Activity</a></li>
<li><a>Update
Activity</a></li> <li><a>Total
Activity</a></li> <li><a>Canvasser</a></li>
<li><a>Logout</a></li>
</ul>
</div>
</div>
</nav>
<div
class="container-fluid">
<ul class="nav
nav-pills nav-stacked">
<li
class="active"><a>Home</a></li>
<li><a>Plan
Activity</a></li>
<li><a>Update
Activity</a></li>
<li><a>Total
Activity</a></li>
<li><a>Canvasser</a</li>
<li><a>Logout</a></li>
<li><a>Canvasser</a</li>
<li><a>Logout</a></li>
</ul>
</div>
<div class="col-xs-12
col-md-10">
<div class="col-xs-12
col-md-12">
<ol
class="breadcrumb">
<li><a
class="glyphicon glyphicon-home"
href="home.php"></a></li>
<li
class="active">Home</li>
</ol>
</div>
<div
class="col-xs-10">
<h1>Selamatdatang</h1>
<h1>Anda login sebagai </h1>
<h1>Selamatdatang</h1>
<h1>Anda login sebagai </h1>
<br
/>
<br
/>
<br
/>
<br />
<br />
<br
/>
</div>
</div>
</div>
</div>
<div id="footer">
Copyright © 2014 by SMK
Telkom Sandhy Putra Banjarbaru
</div>
</div>
</body>
</html>
0 komentar:
Posting Komentar