1. Spesifikasi Minimal
-
Processor : 300 Mhz
-
RAM : 64 MB
-
Harddisk Space : 4 GB
2. Cara Menginstal
Pertama-tama kita download "BlueGriffon" versi 1.7.1 di
Lalu kita jadikan satu folder seperti gambar berikut ini
Setelah menjadi satu folder kita pindah ke tempat yang mudah dijangkau misal-nya "Desktop"
-
bluegriffon_1.7-1~getdeb1_i386.deb
-
bluegriffon-data_1.7-1~getdeb1_all.deb
Untuk
menginstal kita ketikkan command “sudo
dpkg –i *.deb” yang berarti kita menginstal seluruh isi folder BlueGriffon, klik “Enter”
Tunggu
loading-nya sampai selesai
Inilah tampilan pertama BlueGriffon saat pertama kali dibuka
3. Cara Membuat Aplikasi Form Login
Untuk
membuat “page” baru kita klik “new” di pojok kiri atas, lalu
tampilan-nya seperti ini
Pertama
kita membuat page “PHP” dengan nama “index.php”
Lalu
script-nya seperti ini
<!DOCTYPE HTML>
<!DOCTYPE HTML>
<html>
<head>
<title>Login
sederhana</title>
<link
rel="stylesheet" type="text/css"
href="css/reset.css">
<link
rel="stylesheet" type="text/css"
href="css/structure.css">
</head>
<body>
<form class="box
login" action="chklogin.php" method="post">
<fieldset class="boxBody">
<label>Username</label>
<input
type="text" name="username" tabindex="1"
placeholder="" required>
<label>Password</label>
<input
type="password" name="password" required
tabindex="2" required>
</fieldset>
<footer>
<input
type="submit" class="btnLogin" value="Login"
tabindex="4"><br>
</footer>
</form>
</body>
</html>
</html>
Tampilan
grafis-nya seperti ini
Setelah
membuat “index.php” kita buat css-nya dengan nama “reset.css” & “structure.css”
-
reset.css
html, body, div, span, object, iframe,
h1,
h2, h3, h4, h5, h6, p, blockquote, pre,
abbr,
address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small,
strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset,
form, label, legend,
table,
caption, tbody, tfoot, thead, tr, th, td,
article,
aside, canvas, details, figcaption, figure,
footer,
header, hgroup, menu, nav, section, summary,
time,
mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article,
aside, details, figcaption, figure,
footer,
header, hgroup, menu, nav, section {
display: block;
}
blockquote,
q { quotes: none; }
blockquote:before,
blockquote:after,
q:before,
q:after { content: ''; content: none; }
ins
{ background-color: #ff9; color: #000; text-decoration: none; }
mark
{ background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del
{ text-decoration: line-through; }
abbr[title],
dfn[title] { border-bottom: 1px dotted; cursor: help; }
table
{ border-collapse: collapse; border-spacing: 0; }
hr
{ display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin:
1em 0; padding: 0; }
input,
select { vertical-align: middle; }
body
{font:12px/18px Lucida Sans, sans-serif;}
select,
input, textarea, button { font:99% sans-serif; }
pre,
code, kbd, samp { font-family: monospace, sans-serif; }
a:hover,
a:active, *:focus, input:focus, button:focus { outline: none; }
ul,
ol { margin-left: 2em; }
ol
{ list-style-type: decimal; }
nav
ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small
{ font-size: 85%; }
strong,
th { font-weight: bold; }
td
{ vertical-align: top; }
sub,
sup { font-size: 75%; line-height: 0; position: relative; }
sup
{ top: -0.5em; }
sub { bottom: -0.25em; }
pre
{ white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding:
15px; }
textarea
{ overflow: auto; }
.ie6
legend, .ie7 legend { margin-left: -7px; }
input[type="radio"]
{ vertical-align: text-bottom; }
input[type="checkbox"]
{ vertical-align: bottom; }
.ie7
input[type="checkbox"] { vertical-align: baseline; }
.ie6
input { vertical-align: text-bottom; }
label,
input[type="button"], input[type="submit"],
input[type="image"], button { cursor: pointer; }
button,
input, select, textarea { margin: 0; }
input:valid,
textarea:valid { }
input:invalid,
textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red;
-webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
.no-boxshadow
input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
::-moz-selection{
background: #a1d8f0; color:#fff; text-shadow: none; }
::selection
{ background:#a1d8f0; color:#fff; text-shadow: none; }
a:link
{ -webkit-tap-highlight-color: #a1d8f0; }
button
{ width: auto; overflow: visible; }
.ie7
img { -ms-interpolation-mode: bicubic; }
body,
select, input, textarea {color: #444; }
a,
a:active, a:visited { color: #666; text-decoration:none; }
a:hover
{ color: #c00; }
.ir
{ display: block; text-indent: -999em; overflow: hidden; background-repeat:
no-repeat; text-align: left; direction: ltr; }
.hidden
{ display: none; visibility: hidden; }
.visuallyhidden
{ border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden;
padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus
{ clip: auto; height: auto; margin: 0; overflow: visible; position: static;
width: auto; }
.invisible
{ visibility: hidden; }
.clearfix:before,
.clearfix:after { content: "\0020"; display: block; height: 0;
overflow: hidden; }
.clearfix:after
{ clear: both; }
.clearfix
{ zoom: 1; }
@media
all and (orientation:portrait) {
}
@media
all and (orientation:landscape) {
}
@media
screen and (max-device-width: 480px) {
/* html { -webkit-text-size-adjust:none;
-ms-text-size-adjust:none; } */
}
@media
print {
* { background: transparent !important;
color: black !important; text-shadow: none !important; filter:none !important;
-ms-filter: none !important; }
a, a:visited { color: #444 !important;
text-decoration: underline; }
a[href]:after { content: " ("
attr(href) ")"; }
abbr[title]:after { content: " ("
attr(title) ")"; }
.ir a:after,
a[href^="javascript:"]:after, a[href^="#"]:after { content:
""; }
pre, blockquote { border: 1px solid #999;
page-break-inside: avoid; }
thead { display: table-header-group; }
tr, img { page-break-inside: avoid; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
Untuk css tidak ada tampilan grafis-nya
-
structure.css
Script-nya
seperti ini
body{
background:#eff3f6;
}
.box
{
background:#fefefe;
border: 1px solid #C3D4DB;
border-top:1px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-moz-box-shadow:rgba(0,0,0,0.15) 0 0 1px;
-webkit-box-shadow:rgba(0,0,0,0.15) 0 0
1px;
box-shadow:rgba(0,0,0,0.15) 0 0 1px;
color:#444;
font:normal 12px/14px Arial, Helvetica,
Sans-serif;
margin:0 auto 30px;
overflow:hidden;
}
.box.login
{
height:260px;
width:332px;
position:absolute;
left:50%;
top:50%;
margin:-130px 0 0 -166px;
}
.boxBody
{
background:#fefefe;
border-top:1px solid #dde0e8;
border-bottom:1px solid #dde0e8;
padding:10px 20px;
}
.box
footer
{
background:#eff4f6;
border-top:1px solid #fff;
padding:22px 26px;
overflow:hidden;
height:32px;
}
.box
label
{
display:block;
font:14px/22px Arial, Helvetica,
Sans-serif;
margin:10px 0 0 6px;
}
.box
footer label{
float:left;
margin:4px 0 0;
}
.box
footer input[type=checkbox]{
vertical-align:sub;
*vertical-align:middle;
margin-right:10px;
}
.box
input[type=text],
.box
input[type=password],
.txtField,
.cjComboBox
{
border:6px solid #F7F9FA;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-moz-box-shadow:2px 3px 3px rgba(0, 0, 0,
0.06) inset, 0 0 1px #95a2a7 inset;
-webkit-box-shadow:2px 3px 3px rgba(0, 0,
0, 0.06) inset, 0 0 1px #95a2a7 inset;
box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06)
inset, 0 0 1px #95a2a7 inset;
margin:3px 0 4px;
padding:8px 6px;
width:270px;
display:block;
}
.box
input[type=text]:focus,
.box
input[type=password]:focus,
.txtField:focus,
.cjComboBox:focus
{
border:6px solid #f0f7fc;
-moz-box-shadow:2px 3px 3px rgba(0, 0, 0,
0.04) inset, 0 0 1px #0d6db6 inset;
-webkit-box-shadow:2px 3px 3px rgba(0, 0,
0, 0.04) inset, 0 0 1px #0d6db6 inset;
box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04)
inset, 0 0 1px #0d6db6 inset;
color:#333;
}
.cjComboBox
{
width:294px;
}
.cjComboBox.small
{
padding:3px 2px 3px 6px;
width:100px;
border-width:3px !important;
}
.txtField.small
{
padding:3px 6px;
width:200px;
border-width:3px !important;
}
.rLink{padding:0
6px 0 0; font-size:11px; float:right;}
.box
a{color:#999;}
.box
a:hover, .box a:focus{text-decoration:underline;}
.box
a:active{color:#f84747;}
.btnLogin
{
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:15px;
background:#a1d8f0;
background:-moz-linear-gradient(top,
#badff3, #7acbed);
background:-webkit-gradient(linear, left
top, left bottom, from(#badff3), to(#7acbed));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3',
EndColorStr='#7acbed')";
border:1px solid #7db0cc !important;
cursor: pointer;
padding:11px 16px;
font:bold 11px/14px Verdana, Tahomma,
Geneva;
text-shadow:rgba(0,0,0,0.2) 0 1px 0px;
color:#fff;
-moz-box-shadow:inset rgba(255,255,255,0.6)
0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
-webkit-box-shadow:inset
rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
box-shadow:inset rgba(255,255,255,0.6) 0
1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
margin-left:12px;
float:right;
padding:7px 21px;
}
.btnLogin:hover,
.btnLogin:focus,
.btnLogin:active{
background:#a1d8f0;
background:-moz-linear-gradient(top,
#7acbed, #badff3);
background:-webkit-gradient(linear, left
top, left bottom, from(#7acbed), to(#badff3));
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed',
EndColorStr='#badff3')";
}
.btnLogin:active
{
text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;
}
footer#main{
position:fixed;
left:0;
bottom:10px;
text-align:center;
font:normal 11px/16px Arial,
Helvetica, sans-serif;
width:100%;
}Setelah membuat 3 file tadi kita bisa menyimpannya dengan cara File -> Save As -> Beri nama -> Save
Kita
kelompokkan 3 file tersebut menjadi
folder, lalu untuk css-nya kita pilah lagi ke dalam folder bernama “css” di dalam folder tersebut.
Kita
buat lagi file bernama “chklogin.php”
Script-nya
seperti ini
<?PHP
SESSION_START();
$username
= $_POST['username'];
$password
= $_POST['password'];
if
($username=="Bari"){
if
($password=="Sembarang"){
$_SESSION['latihan_login']
= "Bari";
header("location:home.php?pesan=berhasil");
}
else{
echo
"Passwordya salah ..
<a
href='index.php'>Back</a>";
}
}
else{
echo
"usernamenya salah ..
<a
href='index.php'>Back</a>";
}
?>
Kita
buat lagi file bernama “home.php”
Script-nya
seperti ini
<html>
<head>
<title>Home</title>
<link
href="css/home.css" rel="stylesheet"
type="text/css">
</head>
<body bgcolor=#E6E6FA>
<div
id="content">
<header>
<h1>THE
NEW NT-D</h1>
</header>
<section>
<?PHP
SESSION_START();
$nama
= $_SESSION['latihan_login'];
if(empty($nama)){
header("location:index.php");
exit();
}
echo
"<p align='center'><font face='Arial, Helvetica, sans-serif'
size='20' color='black'><b>Welcome
<b>$nama</b></font></b></p>";
?>
<h2><p><a
href="Untitled-1.html" style="text-decoration:none"><font
color="#000000">Teruskan</font></a></h2>
<h2><p><a
href="index.php" style="text-decoration:none"><font
color="#000000">Logout</font></a></h2>
</section>
</div>
</body>
</html>
Kita
buat css untuk “home.php” dengan
nama “home.css” dengan script
seperti berikut
#content
{
width:900px;
margin:auto;
}
header
{
background:#09F;
width:900px;
height:95px;
padding:10px;
font:normal 20px Arial,
Helvetica, sans-serif;
color:#FFF;
border:solid #000 5px;
}
section
{
width:550px;
background:#CCC;
margin-top:70px;
margin-bottom:10px;
padding:10px;
border-radius:20px;
}
p
{
text-align: center;
padding: 5px;
}
h2
{
font:bold 20px Arial, Helvetica,
sans-serif;
text-align:center;
}
Kita
buat lagi file bernama “logout.php” dengan
script seperti ini
<?PHP
SESSION_START();
$nama=$_SESSION['latihan_login'];
unset($_SESSION['latihan_login']);
SESSION_DESTROY();
header('location:index.php');
?>
Simpan
file-file diatas menjadi seperti ini
Untuk
“home.css” saya masukkan ke folder
css. Lalu saya mempunyai sebuah html yang akan saya satukan dengan aplikasi php
ini yang bernama “Untitled-1.html”,
lalu saya jadikan 1 folder dengan nama “belajar”,
berikut tampilan html-nya
Untuk
menjalankan sebuah file .php kita membutuhkan
Apache web server , untuk itu kita
harus menginstal aplikasi XAMPP for linux yang sudah saya taruh di Desktop
Untuk
mengistal-nya kita harus menjadi root (superuser) dengan mengetik command “su” lalu kita masukkan password user kita maka tampilan-nya
akan seperti ini
Lalu
ketikkan command “sudo tar xvfz
xampp-linux-1.8.1.tar.gz –C /opt"
, karena saya menggunakan XAMPP versi
1.8.1, setelah itu klik Enter
Tunggu
loading-nya sampai selesai
Setelah
selesai kita harus mengaktif-kan fitur Apache
web server & Mysql dengan
cara ketik command “/opt/lampp/lampp
start”
Jika
selesai tampilan-nya akan seperti ini
Lalu
kita ubah permisson seluruh folder & isi-nya menjadi 777 dengan ketik “chmod –R 777 htdocs/belajar”
Berikut
tampilan di dalam folder “htdocs”
Lalu
berikut isi di dalam folder “belajar”
Lalu
buka browser kesayangan anda di linux, misal-nya disini ada “chromium”, lalu ketikkan “localhost/belajar” di URL address-nya
untuk membuka file di-dalam folder “belajar”
Inilah
tampilan pertama program-nya
Lalu
isikkan username-nya dengan “Bari” lalu
password-nya “Sembarang”, ini saya
buat seperti itu jika ingin diubah bisa diubah script “home.php”
Ini
tampilan, saat sudah login. Jika di-klik “Teruskan”
maka kita akan dialihkan ke html “Untitled-1.html”,
lalu jika di-klik “Logout” maka kita
akan dialihkan ke “index.php” lagi
Ini
tampilan “Untitled-1.html”
Ini
tampilan paling bawah “Untitled-1.html” ada
link bernama “Kembali Ke Index” jika
kita klik ini maka kita akan dialihkan lagi ke “home.php”
Jika
kita klik “Logout” maka kita akan
dialihkan lagi ke “Index.php”
Taadaa program “form login sederhana” sudah
selesai
Untuk contoh project diatas bisa anda download Disini
Link Mirror Disini
Note : untuk dapat download di "BillionUpload" jangan pilih link "Download" tapi link "Download or Watch" setelah itu kosongkan tanda centang dibawah link-nya
No comments:
Post a Comment