Rabu, 28 Maret 2018

Percobaan PHP Fundamental

Percobaan PHP Fundamental

  • Sourcode Index.php
<?php
session_start();
ini_set('display_errors',0);
if($_SESSION["SALAH"]>=3){
    echo '<h1>Anda dalam kondisi diBlokir</h1>';
    exit();
}
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Login Belajar</title>
        <link rel="icon" href="asset/images/paper.ico">
        <link rel="stylesheet" href="asset/css/bootstrap.css">
        <link rel="stylesheet" href="asset/css/floating-labels.css">
        
    </head>
        
        <script>
        function Hello(){
        var email=document.getElementById("email").value;
        var password=document.getElementById("password").value;
        
            if (email=="admin@gmail.com" && password=="admin123"){
            alert("Hello...Anda BERHASIL Masuk Login");
            }
            else{
            alert("ANDA TIDAK BERHASIL LOGIN SALAH EMAIL/PASSWORD");
            }
        };
        </script>
    </head>
    <body>
        <form id="frm01" action="login.php" method="POST" class="form-signin">
            <div class="text-center mb-4">
                <img class="mb-4" width="90" height="90" src="asset/images/paper.ico">
                <h1>Login Belajar</h1>
                <p>Ayookkk Login Belajar...!!!</p>
            </div>
            <div class="form-label-group">
                <input class="form-control"
                       type="email"
                       name="email"
                       id="email" 
                       placeholder="Email Address" 
                       required="email" 
                       autofocus="yes" 
                       autocomplete="no"
                       maxlength="30">
                       
                <label for="email">Email Anda</label>
            </div>
            <div class="form-label-group">
                <input class="form-control"
                       type="password"
                       name="password"
                       id="password" 
                       placeholder="password" 
                       required="yes" 
                     
                       autocomplete="no"
                       maxlength="8">
                <label for="password">Password</label>
            </div>
            <div class="checkbox mb-4">
                <label>
                    <input type="checkbox"> Remember Me
                </label>
            </div>
            <button onclick="Hello()]" class="btn-lg btn-success btn-block" type="submit">Sign in</button>
            <button class="btn-lg btn-primary btn-block" type="button">Forget Password</button>
        </form>
        
    </body>
</html>
  • Login.php
<?php
session_start();
$user = $_POST["email"];
$pass = $_POST["password"];
//==============================
$dbuser = "admin@gmail.com";
$dbpass = "admin123";
//==============================
if($user == $dbuser && $pass == $dbpass){
    echo "<script>alert('Anda Bisa Belajar');window.location = ('admin')</script>";
} else {
    $_SESSION["SALAH"]++;
    header("location:index.php");
}

Tampilan :





  • Sourcode Tampilan pada website index.html
<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Jangan Malas Guys</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/business-casual.min.css" rel="stylesheet">

  </head>

  <body>

    <h1 class="site-heading text-center text-white d-none d-lg-block">
      <span class="site-heading-upper text-primary mb-3">Mari Belajar Dengan Baik</span>
      <span class="site-heading-lower">JANGAN MALAS</span>
    </h1>

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark py-lg-4" id="mainNav">
      <div class="container">
        <a class="navbar-brand text-uppercase text-expanded font-weight-bold d-lg-none" href="#">Start Bootstrap</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav mx-auto">
            <li class="nav-item active px-lg-4">
              <a class="nav-link text-uppercase text-expanded" href="index.html">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item px-lg-4">
              <a class="nav-link text-uppercase text-expanded" href="about.html">Contact</a>
            </li>
            <li class="nav-item px-lg-4">
              <a class="nav-link text-uppercase text-expanded" href="products.html">Products</a>
            </li>
            <li class="nav-item px-lg-4">
              <a class="nav-link text-uppercase text-expanded" href="store.html">Store</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <section class="page-section clearfix">
      <div class="container">
        <div class="intro">
          <img class="intro-img img-fluid mb-3 mb-lg-0 rounded" src="img/tip.jpg" alt="">
          <div class="intro-text left-0 text-center bg-faded p-5 rounded">
            <h2 class="section-heading mb-4">
              <span class="section-heading-upper">Tugas Mahasiswa</span>
              <span class="section-heading-lower">Pemrograman WEB</span>
            </h2>
            <p class="mb-3">
            </p>
            <div class="intro-button mx-auto">
              <a class="btn btn-primary btn-xl" href="#">Mari Menyimak</a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="page-section cta">
      <div class="container">
        <div class="row">
          <div class="col-xl-9 mx-auto">
            <div class="cta-inner text-center rounded">
              <h2 class="section-heading mb-4">
                <span class="section-heading-upper">Welly Oktavianus/5150411100</span>
              
              </h2>
              <p class="mb-0">PEMROGRAMAN WEBSITE | S-1 INFORMATIKA | FAKULTAS TEKNOLOGI INFORMASI DAN ELEKTRO | UNIVERSITAS TEKNOLOGI YOGYAKARTA | 2015 </p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <footer class="footer text-faded text-center py-5">
      <div class="container">
        <p class="m-0 small">Copyright &copy; Website 2018</p>
      </div>
    </footer>

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  </body>

</html>

  • CSSnya
body {
  font-family: 'Lora';
  background: linear-gradient(rgba(47, 23, 15, 0.65), rgba(47, 23, 15, 0.65)), url("../img/rkm.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Raleway';
}

p {
  line-height: 1.75;
}

.text-faded {
  color: rgba(255, 255, 255, 0.3);
}

.site-heading {
  margin-top: 5rem;
  margin-bottom: 5rem;
  text-transform: uppercase;
  line-height: 1;
  font-family: 'Raleway';
}

.site-heading .site-heading-upper {
  display: block;
  font-size: 2rem;
  font-weight: 800;
}

.site-heading .site-heading-lower {
  font-size: 5rem;
  font-weight: 100;
  line-height: 4rem;
}

.page-section {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.section-heading {
  text-transform: uppercase;
}

.section-heading .section-heading-upper {
  display: block;
  font-size: 1rem;
  font-weight: 800;
}

.section-heading .section-heading-lower {
  display: block;
  font-size: 3rem;
  font-weight: 100;
}

.bg-faded {
  background-color: rgba(255, 255, 255, 0.85);
}

#mainNav {
  background-color: rgba(47, 23, 15, 0.9);
  font-family: 'Raleway';
}

#mainNav .navbar-brand {
  color: #e6a756;
}

#mainNav .navbar-nav .nav-item .nav-link {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 800;
}

#mainNav .navbar-nav .nav-item.active .nav-link {
  color: #e6a756;
}

@media (min-width: 992px) {
  #mainNav .navbar-nav .nav-item .nav-link {
    font-size: 0.9rem;
  }
  #mainNav .navbar-nav .nav-item .nav-link:hover {
    color: rgba(255, 255, 255, 0.4);
  }
  #mainNav .navbar-nav .nav-item.active .nav-link:hover {
    color: #e6a756;
  }
}

.btn-xl {
  font-weight: 700;
  font-size: 0.8rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.intro {
  position: relative;
}

@media (min-width: 992px) {
  .intro .intro-img {
    width: 75%;
    float: right;
  }
  .intro .intro-text {
    left: 0;
    width: 60%;
    margin-top: 3rem;
    position: absolute;
  }
  .intro .intro-text .intro-button {
    width: 100%;
    left: 0;
    position: absolute;
    bottom: -2rem;
  }
}

@media (min-width: 1200px) {
  .intro .intro-text {
    width: 45%;
  }
}

.cta {
  padding-top: 5rem;
  padding-bottom: 5rem;
  background-color: rgba(230, 167, 86, 0.9);
}

.cta .cta-inner {
  position: relative;
  padding: 3rem;
  margin: 0.5rem;
  background-color: rgba(255, 255, 255, 0.85);
}

.cta .cta-inner:before {
  border-radius: 0.5rem;
  content: '';
  position: absolute;
  top: -0.5rem;
  bottom: -0.5rem;
  left: -0.5rem;
  right: -0.5rem;
  border: 0.25rem solid rgba(255, 255, 255, 0.85);
}

@media (min-width: 992px) {
  .about-heading .about-heading-img {
    position: relative;
    z-index: 0;
  }
  .about-heading .about-heading-content {
    margin-top: -5rem;
    position: relative;
    z-index: 1;
  }
}

@media (min-width: 992px) {
  .product-item .product-item-title {
    position: relative;
    z-index: 1;
    margin-bottom: -3rem;
  }
  .product-item .product-item-img {
    position: relative;
    z-index: 0;
    max-width: 60vw;
  }
  .product-item .product-item-description {
    position: relative;
    z-index: 1;
    margin-top: -3rem;
    max-width: 50vw;
  }
}

.list-hours {
  font-size: 0.9rem;
}

.list-hours .list-hours-item {
  border-bottom: 1px solid rgba(230, 167, 86, 0.5);
  padding-bottom: .25rem;
  margin-bottom: 1rem;
  font-style: italic;
}

.list-hours .list-hours-item.today {
  font-weight: bold;
  color: #e6a756;
}

@media (min-width: 992px) {
  .list-hours {
    width: 50%;
    font-size: 1.1rem;
  }
}

.address strong {
  font-size: 1.2rem;
}

.footer {
  background-color: rgba(47, 23, 15, 0.9);
}

.text-primary {
  color: #e6a756 !important;
}

.bg-primary {
  background-color: #e6a756 !important;
}

.btn {
  box-shadow: 0px 3px 3px 0px rgba(33, 37, 41, 0.1);
}

.btn-primary {
  background-color: #e6a756;
  border-color: #e6a756;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #df902a;
  border-color: #df902a;
}

.font-weight-light {
  font-weight: 100 !important;
}

  • Tampilan dari HTML Website



Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)