Rabu, 28 Maret 2018

Algoritma & Flowchart


  • Algortima

Hal yang perlu diperhatikan dalam hal LOGIN, Tentunya harus punya akun email dan password agar bisa login dengan akun yang benar
 1. Langkah yang harus diperhatikan dalam memulai login
 2. Memasukkan email dan password yang sudah kalian daftar dengan benar
 3. Pengecekan email dan password YA atau Salah, kalau benar pasti login
 4. Jika YA, maka akan melanjutkan proses baca sukses.php kemudian " tampil Selamat Datang "
 5. Jika Salah, maka proses ini akan kembali ke proses 2, session akan ditambah 1  setiap kali melakukan login.
 dan Apabila melebihi batas maksimal maka akan terblokir [Menampilkan ANDA DIBLOKIR].
 6. Selesai, selamat mencoba guys.



  • Flowchart

Diposting oleh di Tidak ada komentar:

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:

Tutorial Membuat Tampilan Login Pada HTML


Cara kita membuat Tampilan Login Pada HTML
Disini saya akan membaut tampilan login sederhana, jadi kalian bisa melihat sourcode dibawah ini :


  • 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 Kita</title>
        <link rel="icon" href="asset/images/favicon.ico">
        <link rel="stylesheet" href="asset/css/bootstrap.css">
        <link rel="stylesheet" href="asset/css/floating-labels.css">
        
        <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="72" height="72" src="asset/images/bootstrap-solid.svg">
                <h1>Login Kita</h1>
                <p>Ayookkk Login Untuk Masuk...!!!</p>
                <p>Salah Login 3 KALI Anda Di Blokir</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 '<h1>SELAMAT DATANG DI WEBSITE KAMI</h1>';
} else {
    $_SESSION["SALAH"]++;
    header("location:index.php");
}






  • Hasil Tampilan Login


Diposting oleh di Tidak ada komentar:

Kamis, 15 Maret 2018

Membuat Aksi Dengan JavaScript

Tutorial Membuat Aksi Dengan Java Script dengan berhasil Login dan Tidak Berhasil berikut tutorial sederhana yang bisa anda/ kalian ikuti dan cermati dengan baik :

  • Gambar Login :



  • Gambar Login BERHASIL :

  • Gambar Login Tidak BERHASIL :




















Diatas contoh gambar yang akan kita buat dalam membuat aksi java script dengan netbeans, disini saya akan memberikan sourcode index.php dan login.php disini anda bisa pelajari lebih lanjut dengan sendiri nya, terimakasih sudah berkunjung diblog ini menjelaskan sederhana tentang membuat aksi java script.


  • 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 Kita</title>
        <link rel="icon" href="asset/images/favicon.ico">
        <link rel="stylesheet" href="asset/css/bootstrap.css">
        <link rel="stylesheet" href="asset/css/floating-labels.css">
        
        <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="72" height="72" src="asset/images/bootstrap-solid.svg">
                <h1>Login Kita</h1>
                <p>Ayookkk Login Untuk Masuk...!!!</p>
                <p>Salah Login 3 KALI Anda Di Blokir</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 '<h1>SELAMAT DATANG DI WEBSITE KAMI</h1>';
} else {
    $_SESSION["SALAH"]++;
    header("location:index.php");
}





Diposting oleh di Tidak ada komentar:

Selasa, 06 Maret 2018

Tutorial Membuat Layout Pada HTM & CSS


Tutorial Membuat Layout Pada HTM & CSS

Dengan kesempatan ini saya akan membuat sebuah tutorial dalam membuat Layout Website sederhana menggunakan HTML & CSS
Jadi disini saya akan menjelaskan tentang Layout yang paling standart dan paling umum. Bisa teman-teman susun kerangka website sederhana sepeerti gambar dibawah ini :



















Coba teman-teman perhatikan pada contoh layout web pada gambar diatas. Gambar diatas adalah gambar tampilan sebuah website. Dimana terdapat sebuah header pada bagian atas , menu navigasi bagian tengah, dan footer bagian paling bawah.

Nah sekarang kita akan membuat sebuah layout website yang paling sederhana seperti pada gambar diatas . untuk bisa mudah memahami tentang cara membuat template website. Teman-teman harus memahami dulu dasar-dasar dari HTML dan CSS disini saya membuat sebuah file dengan nama index.html

<!DOCTYPE html>
<html>
<head>
            <title>SEMANGATBISA</title>
</head>
<style>
header, footer {
            color: white;
            background: black;
            clear: left;
            padding: 1em;
            text-align: center;
}
 article{
            margin-right: 50px;
            border-right: 3px;
            padding: 2em;
            overflow: hidden;
 }

</style>
<body>
            <header>
                        <h1><span style="color:red">SEMANGAT </span> BISA</h1>
            </header>

            <div style="background-color: 006600; color: green;padding: 1px">
            <p align="center"><a href=""> Halaman |</a><a href=""> Buku |</a><a href=""> Belajar |</a><a href=""> Kontak</p>
            </div>

            <footer>Copyright &copy;WellyOktavianus</footer>
</body>
</html>
Nah kalian bisa coba menggunakan sourcode yang ada diatas dan dijalankan.
Baiklah sekian dulu tutorial web tentang membuat tampilan  layout  website sederhana  dengan menggunakan html dan css.

Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)