sobat bloger sambil menyelam minum air, sambil belajar kita harus juga sharing Insyallah ilmu samakin berkah dan bertambah langsung aja dech kali ini ane mau sahring masalah login tanpa menggunakan database, biasa kalo tanpa bantuan google juga ane nggak bisa tapi yang terpenting itu bantuan dari Allah kalo bukan karena-NYA nggak bisa apa-apa masbro ya udah langsung aja nich
1. pertama bikin file namannya apa aja tapi inget formatnya harus .html di bawah ini codingannya ane hanya standar jika mau memodifikasi bawa aja ke bengkel terserah mau di modifikasi kayak gimana :D.
a. coding untuk pembeuatan form login :
<html
<head>
<title>Belajar HTML5 dan CSS3</title>
</head>
<style>
body{
font-family: sans-serif;
background: #999999;
color: #999999;
}
#contact div, h1, form, fieldset, input, textarea {
margin: 0; padding: 0; border: 0; outline: none;
}
#contact {
width: 400px; margin: auto; padding: 30px 30px; margin-top:60px;
background: #111111;
border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
-moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;
}
#contact a{
text-decoration:none;
color:#666666;
}
h1 {
font-size: 26px; color: #999999; text-transform: uppercase;
text-align: center; margin: 0 0 30px 0; text-shadow: 0px 3px 2px #000000;
}
form {
margin-bottom:25px;
}
label {
float: left; margin: 10px 20px 0 0; width: 75px;
text-align: right; font-size: 14px; color: #999999;
font-weight:bold;
text-transform: uppercase; text-shadow: 0px 2px 0px #111111;
}
input {
width: 250px; height: 35px; padding: 5px 20px 0px 20px; margin: 0 0 20px 0;
background: #666666;
background: -moz-linear-gradient(top, #999999 0%, #b2b2b2 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(20%,#b2b2b2)); /* webkit */
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
-moz-box-shadow: 0px 2px 0px #111111;-webkit-box-shadow: 0px 2px 0px #111111;
font-size: 14px; color: #444444; text-transform: uppercase; text-shadow: 0px -1px 0px #222222;
}
input::-webkit-input-placeholder {
color: #333333; text-shadow: 0px -1px 0px #222222;
}
input:-moz-placeholder {
color: #333333; text-shadow: 0px -1px 0px #222222;
}
input:focus{
background: #999999;
border: 1px solid #CCCCCC;
background: -moz-linear-gradient(top, #999999 0%, #dddddd 20%); /* firefox */ /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#dddddd)); /* webkit */
}
input[type=submit], input[type=reset] {
width: 100px; height: 30px; float: right; padding: 5px 5px; margin: 0 15px 0 0;
-moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;
background: -moz-linear-gradient(top, #999999 0%, #b2b2b2 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#b2b2b2)); /* webkit */
cursor: pointer;
}
input[type=submit]:hover, input[type=reset]:hover{
border: 3px solid #CCCCCC;
background: -moz-linear-gradient(top, #999999 0%, #dddddd 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#dddddd)); /* webkit */
}
</style>
<body>
<div id="contact">
<h1>Login Form</h1>
<form action="coba.html " method="post">
<fieldset>
<label for="name">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" />
<label for="password">Email:</label>
<input type="password" id="password" name="password" placeholder="your password" />
<input type="submit" value="Login" /> <input type="reset" value="Cancel" />
</fieldset>
</form>
</div>
<script src='http://tateluproject.googlecode.com/files/bintang.js' type='text/javascript'></script>
</body>
</html>
gan codingannya woow banget kan, sebenrnya di atas itu ada HTML sendiri dan CSS sendiri jadi terserah ente aja mau yang HTM atau CSS tapi kalo salah satu pasti beda viewnya selanjutnnya untuk file berikutnya langkahnya cuman beda codingnya aja langsung aja dech
b. terserah filenya dinamain apa yang penting berformat .html, sebenernya file yang akan di hubngkan nggak berformat HTML bisa juga seperti .php maupun .css tapi yang saya mau sharing dasar nya aja biar tau dan paham untuk codingan selanjutnya, berikut ini codingannya di bwah codingan ini sengaja saya namain coba.php jadi terserah ente aja mau namain apa :D
<html>
<title> Belajar HTML </title>
<head></head>
<body>
<?php
if(($_POST['user']==’susi’) AND ($_POST['pass']==’susi')) {
echo ‘Halo selamat datang. Semoga hari Anda menyenangkan, ‘
.$_POST['user'];
}
else {
echo “<br><br><br><body text=’red’><strong><center>Id dan Password salah, silahkan coba lagi.
<br><br><a href=’case1.html’><h4>Kembali Ke Login</h4></a></center></strong></body>”;
}
?>
</body>
</html>
kayaknya cukup sekian ya sobat blogger sharingnya soal nya ane juga belajar newbie, anak kecil belajar berjalan aja dari merangkak ya kita juga harus dari dasar agar mampu memahami maksud dari pelajaran kita,....semoga bermanfaat :D
www.w3schools.com
1. pertama bikin file namannya apa aja tapi inget formatnya harus .html di bawah ini codingannya ane hanya standar jika mau memodifikasi bawa aja ke bengkel terserah mau di modifikasi kayak gimana :D.
a. coding untuk pembeuatan form login :
<html
<head>
<title>Belajar HTML5 dan CSS3</title>
</head>
<style>
body{
font-family: sans-serif;
background: #999999;
color: #999999;
}
#contact div, h1, form, fieldset, input, textarea {
margin: 0; padding: 0; border: 0; outline: none;
}
#contact {
width: 400px; margin: auto; padding: 30px 30px; margin-top:60px;
background: #111111;
border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
-moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;
}
#contact a{
text-decoration:none;
color:#666666;
}
h1 {
font-size: 26px; color: #999999; text-transform: uppercase;
text-align: center; margin: 0 0 30px 0; text-shadow: 0px 3px 2px #000000;
}
form {
margin-bottom:25px;
}
label {
float: left; margin: 10px 20px 0 0; width: 75px;
text-align: right; font-size: 14px; color: #999999;
font-weight:bold;
text-transform: uppercase; text-shadow: 0px 2px 0px #111111;
}
input {
width: 250px; height: 35px; padding: 5px 20px 0px 20px; margin: 0 0 20px 0;
background: #666666;
background: -moz-linear-gradient(top, #999999 0%, #b2b2b2 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(20%,#b2b2b2)); /* webkit */
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
-moz-box-shadow: 0px 2px 0px #111111;-webkit-box-shadow: 0px 2px 0px #111111;
font-size: 14px; color: #444444; text-transform: uppercase; text-shadow: 0px -1px 0px #222222;
}
input::-webkit-input-placeholder {
color: #333333; text-shadow: 0px -1px 0px #222222;
}
input:-moz-placeholder {
color: #333333; text-shadow: 0px -1px 0px #222222;
}
input:focus{
background: #999999;
border: 1px solid #CCCCCC;
background: -moz-linear-gradient(top, #999999 0%, #dddddd 20%); /* firefox */ /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#dddddd)); /* webkit */
}
input[type=submit], input[type=reset] {
width: 100px; height: 30px; float: right; padding: 5px 5px; margin: 0 15px 0 0;
-moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;
background: -moz-linear-gradient(top, #999999 0%, #b2b2b2 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#b2b2b2)); /* webkit */
cursor: pointer;
}
input[type=submit]:hover, input[type=reset]:hover{
border: 3px solid #CCCCCC;
background: -moz-linear-gradient(top, #999999 0%, #dddddd 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#dddddd)); /* webkit */
}
</style>
<body>
<div id="contact">
<h1>Login Form</h1>
<form action="coba.html " method="post">
<fieldset>
<label for="name">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" />
<label for="password">Email:</label>
<input type="password" id="password" name="password" placeholder="your password" />
<input type="submit" value="Login" /> <input type="reset" value="Cancel" />
</fieldset>
</form>
</div>
<script src='http://tateluproject.googlecode.com/files/bintang.js' type='text/javascript'></script>
</body>
</html>
gan codingannya woow banget kan, sebenrnya di atas itu ada HTML sendiri dan CSS sendiri jadi terserah ente aja mau yang HTM atau CSS tapi kalo salah satu pasti beda viewnya selanjutnnya untuk file berikutnya langkahnya cuman beda codingnya aja langsung aja dech
b. terserah filenya dinamain apa yang penting berformat .html, sebenernya file yang akan di hubngkan nggak berformat HTML bisa juga seperti .php maupun .css tapi yang saya mau sharing dasar nya aja biar tau dan paham untuk codingan selanjutnya, berikut ini codingannya di bwah codingan ini sengaja saya namain coba.php jadi terserah ente aja mau namain apa :D
<html>
<title> Belajar HTML </title>
<head></head>
<body>
<?php
if(($_POST['user']==’susi’) AND ($_POST['pass']==’susi')) {
echo ‘Halo selamat datang. Semoga hari Anda menyenangkan, ‘
.$_POST['user'];
}
else {
echo “<br><br><br><body text=’red’><strong><center>Id dan Password salah, silahkan coba lagi.
<br><br><a href=’case1.html’><h4>Kembali Ke Login</h4></a></center></strong></body>”;
}
?>
</body>
</html>
kayaknya cukup sekian ya sobat blogger sharingnya soal nya ane juga belajar newbie, anak kecil belajar berjalan aja dari merangkak ya kita juga harus dari dasar agar mampu memahami maksud dari pelajaran kita,....semoga bermanfaat :D
www.w3schools.com
Tidak ada komentar:
Posting Komentar
tolong dunk kasih Kritik dan Saran