Home php PHP from login & from register

Wednesday, November 7, 2018

PHP from login & from register

pada kali ini saya akan membuat halaman from login& halaman from register tersambung pada database.


sebelum masuk langkah pertama kalian harus mengisi nama database nya dengan nama  : projectku01
& tabel nya kasih nama : login.
1.nah langkah pertama kalian buka php myadmin pada database tampilan nya seperti gambar dibawah ini :

2.langkah kedua kalian masuk ke bagian ngoding yaitu yang pertama kita buat dulu file konektor agar terhubung ke database buat nama file : konektor.php.
dibawah ini codingan file   konektor.php. :
<?php
$host = "localhost"; // Nama Server
$user = "root"; // User Database
$pass = ""; // Password Database
$db = "projectku01"; // Nama Database
$con =  new mysqli($host, $user, $pass, $db); ?>
3.langkah ketiga kalian masuk bagian buat file tampilan login ny dan bisa di berinama file nya : login.php .
 dibawah ini adalah codingan nya :
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Login Form</title>
      <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="css/bootstrap.css.css">
   <link rel="stylesheet" href="css/font-awesome.css">
</head>

<body>
  <html lang="en-US">
<head>
  <meta charset="utf-8">
    <title>Login Admin</title>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700">

</head>
 <h1 id="title-login">LOGIN SEBAGAI SISWA SMK N 1 LAHAT</h1>
    <div id="login">
      <form name='form-login' method="post" action="config-login.php">
        <span>@</span>
          <input type="text" name="username" required="masukan username anda" placeholder="Username Anda">

        <span><i class="fa fa-lock"></i></span>
          <input type="password" required="tolong masukan password anda" name="password" placeholder="Password Anda">

        <input type="submit" value="Login" > <a type="daftar" href="register.php">belum daftar</a>

</form>
</div>

</body>
</html>
nah di sini agar tampilan nya menarik kita buat folder namanya : css nah di dalam folder itu ada file css yang nama file nya = style.css  css ini berfungsi agar tampilan di web itu lebih menarik di bandingakn tidak menggunakan css jadi cara manggil css nya iyalah codingan di bawah ini :
<link rel="stylesheet" href="css/style.css">
dan ini codingan css nya :
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

body {
  background: #2c3338;
  color: #606468;
  font: 87.5%/1.5em 'Open Sans', sans-serif;
  margin: 0;
}

input {
  border: none;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  padding: 0;
  -webkit-appearance: none;
}

p {
  line-height: 1.5em;
}

after { clear: both; }

#login {
  margin: 50px auto;
  width: 330px;
}


#login form {
  margin: auto;
  padding: 22px 22px 22px 22px;

  width: 100%;
  height: 250px;
  border-radius: 5px;
  background: #282e33;
  border-top: 3px solid #434a52;
  border-bottom: 3px solid #434a52;
}

#login form span {
  background-color: #363b41;
  border-radius: 3px 0px 0px 3px;
  border-right: 3px solid #434a52;
  color: #606468;
  display: block;
  float: left;
  line-height: 50px;
  text-align: center;
  width: 50px;
  height: 50px;
}

#login form input[type="text"] {
  background-color: #3b4148;
  border-radius: 0px 3px 3px 0px;
  color: #a9a9a9;
  margin-bottom: 1em;
  padding: 0 16px;
  width: 235px;
  height: 50px;
}

#login form input[type="email"] {
  background-color: #3b4148;
  border-radius: 0px 3px 3px 0px;
  color: #a9a9a9;
  margin-bottom: 1em;
  padding: 0 16px;
  width: 235px;
  height: 50px;
}

#login form input[type="password"] {
  background-color: #3b4148;
  border-radius: 0px 3px 3px 0px;
  color: #a9a9a9;
  margin-bottom: 1em;
  padding: 0 16px;
  width: 235px;
  height: 50px;
}



#login form input[type="submit"] {
  background: #b5cd60;
  border: 0;
  width: 60%;
  height: 40px;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

#login form input[type="submit"]:hover {
  background: #16aa56;
}
a{

}
a {
  background: #b5cd60;
  border: 0;
  width: 100%;
  height: 40px;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  transition: background 0.3s ease-in-out;

}
a:hover{
  background: #16aa56;
}
a {
text-decoration: none;
}
a{
  width: 101px;
 height: 40px;
 border: 1px solid;
 float:  right;
 list-style: none;
 text-align: center;

 line-height: 40px;
 color:white;
 background-color:#b5cd60;
}




#title-login {
 text-align: center;
 padding-top: 20px;
 font-family: Baskerville Old Face;
}


jadi tampilan ny seperti di bawah ini :

4.nah sesudah membuat tampilan login ny kalian masuk di confing-login agar bisa terhubung sama tampilan login ny  nama file ny cukup buat nama nya config-login.php. config-login.php ini bertujuan agar memanggil inculde dari file konektor.php agar nanti nya nama yang telah ada di database di ketik ulang yaitu username&password nya jika salah nanti ada perintah codingan nya.
nah di bawah ini adalah codingan dari file config-login.php. :
<?php
session_start();
include('konektor.php');
$username    = $_POST['username'];
$password = $_POST['password'];
//Check Connection
if (mysqli_connect_errno()){
echo "<h1>Gagal konek ke database gan</h1>"; mysqli_connect_error();
}else{
$dtlogin = mysqli_query($con,"SELECT * FROM login WHERE username='$username' AND password='$password'");
if (mysqli_num_rows($dtlogin) == 1 ){
  $_SESSION['username'] = $_POST['username'];
 echo '<script language="javascript" type="text/javascript"> alert("Login Berhasil!!");</script>';
 echo "<meta http-equiv='refresh' content='0; url=index.php'>";
}else{
echo "<script>alert('Maaf, Username/Password anda salah!!');history.go(-1);</script>"; } }
?>
nah dari codingan di atas adalah codingan index nya.
ini adalah tampilan index.phpny :

 6  langkah yang ke-enam ini kita membuat file yang nama nya logout.php yang bertujuan untuk kembali lagi ke halaman login .
di bawah ini adalah codingan logout.php :
<?php
session_start();
if(session_destroy())
{
 echo '<script language="javascript" type="text/javascript">
     alert("Logout Berhasil!!");</script>';
  echo "<meta http-equiv='refresh' content='0; url=login.php'>";
}
?>

7.nah selanjut nya kita membuat halaman from register dengan  file namanya: register.php 

codingan nya di bawah ini:


<html>
<head>
 <title>index  regristrasi</title>
 <link rel="stylesheet" href="css/style.css">
 <!-- <link rel="stylesheet" href="css/bootstrap.css.css">
 <link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700"> -->
</head>
<body>
 <h1 id="title-login">PENDAFTARAN SEBAGAI SISWA SMK N 1 LAHAT</h1>
 <div id="login">
  <form class="" action="#" method="post">
    <table>
      <tr>
        <td>username</td>
          <td><input type="text" name="username"  required=""></td>
      </tr>
      <tr>
 <tr>
  <td>email</td>
  <td><input type="email" name="email" required=""> </td>
 </tr>
 <tr>
        <td>password</td>
          <td><input type="password" name="password"  required></td>
      </tr>
      <tr>
        <td> <a href="login.php" >halaman login</a></td>
          <td><input type="submit" name="submit"  value="daftar"</td>
      </tr>
    </table>
  </form>
</div>
</body>
</html>
<?php
include 'konektor.php';
if (@$_POST['submit']) {


$username = @$_POST['username'];
$email    = @$_POST['email'];
$passworda= @$_POST['password'];
$password = md5($passworda);

mysqli_query($con,"INSERT INTO login(username,email,password) VALUES ('$username','$email','$password')");
//yang warna hijau itu adalah codingan yang menguhungan kedatabase agar data yang di inputkan masuk ke database
?>
<script type="text/javascript">
alert(" data tersimpan" );
window.location.href="#";
</script>
<?php
}
 ?>

tampilan nya :

css ny :
 @charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

body {
  background: #2c3338;
  color: #606468;
  font: 87.5%/1.5em 'Open Sans', sans-serif;
  margin: 0;
}

input {
  border: none;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  padding: 0;
  -webkit-appearance: none;
}

p {
  line-height: 1.5em;
}

after { clear: both; }

#login {
  margin: 50px auto;
  width: 330px;
}


#login form {
  margin: auto;
  padding: 22px 22px 22px 22px;

  width: 100%;
  height: 250px;
  border-radius: 5px;
  background: #282e33;
  border-top: 3px solid #434a52;
  border-bottom: 3px solid #434a52;
}

#login form span {
  background-color: #363b41;
  border-radius: 3px 0px 0px 3px;
  border-right: 3px solid #434a52;
  color: #606468;
  display: block;
  float: left;
  line-height: 50px;
  text-align: center;
  width: 50px;
  height: 50px;
}

#login form input[type="text"] {
  background-color: #3b4148;
  border-radius: 0px 3px 3px 0px;
  color: #a9a9a9;
  margin-bottom: 1em;
  padding: 0 16px;
  width: 235px;
  height: 50px;
}

#login form input[type="email"] {
  background-color: #3b4148;
  border-radius: 0px 3px 3px 0px;
  color: #a9a9a9;
  margin-bottom: 1em;
  padding: 0 16px;
  width: 235px;
  height: 50px;
}

#login form input[type="password"] {
  background-color: #3b4148;
  border-radius: 0px 3px 3px 0px;
  color: #a9a9a9;
  margin-bottom: 1em;
  padding: 0 16px;
  width: 235px;
  height: 50px;
}



#login form input[type="submit"] {
  background: #b5cd60;
  border: 0;
  width: 60%;
  height: 40px;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

#login form input[type="submit"]:hover {
  background: #16aa56;
}
a{

}
a {
  background: #b5cd60;
  border: 0;
  width: 100%;
  height: 40px;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  transition: background 0.3s ease-in-out;

}
a:hover{
  background: #16aa56;
}
a {
text-decoration: none;
}
a{
  width: 101px;
 height: 40px;
 border: 1px solid;
 float:  right;
 list-style: none;
 text-align: center;

 line-height: 40px;
 color:white;
 background-color:#b5cd60;
}




#title-login {
 text-align: center;
 padding-top: 20px;
 font-family: Baskerville Old Face;
}

  ini link yang  Kalian bisa mendownload source code nya di bawah ini

linknya di sini.-->  Klik disini <--
nah temen-temen sampai di sini dulu tentang cara membuat from login & from register apa bila ada kebinggungan  comentar aja dikolom komentar sekian terima kasih....










PHP from login & from register PHP from login & from register iqbalalqodri 5.0 stars based on 35 reviews
Share this with short URL Get Short URLloading short url

Related Posts

Next Post
Previous Post

3 comments

avatar
Balas
Anonymous delete November 7, 2018 at 8:16 AM

Blog ini sangat membantu sekali untuk saya belajar codingan😊😊

avatar
Balas
iqbalalqodri delete November 7, 2018 at 8:40 AM

owh yah terima kasih bagi tessha angrainy semoga anda lebih giat lagi belajar ny ya semangt terus.....

avatar
Balas
Anonymous delete November 27, 2018 at 6:03 AM
This comment has been removed by the author.


EmoticonEmoticon

Subscribe to: Post Comments (Atom)