Dwi Febriandaru Site

Catatan Harian Dwi Febriandaru

Corel Draw Graphic Suite X5 dan Cara Crack

Setelah sebelumnya saya membagikan Corel Draw X6 kali ini saya akan share versi X5 dari Corel Draw Graphic Suite. Sebenarnya tidak ada perbedaan berarti dari versi X6, -dwifebriandaru.blogspot.com

Membuat Sticky Footer dengan CSS

Komponen footer merupakan komponen yang wajib ada dalam sebuah web maupun blog. Pada Footer inilah biasanya developer web menempatkan... -dwifebriandaru.blogspot.com

Membuat Sistem Login Session di PHP-MySQLi

Berjumpa lagi dengan saya, Dwi Febriandaru. Seperti janji saya pada tutorial terdahulu, Kali ini kita akan membahas tentang cara membuat Membuat Sistem Login dengan Session... -dwifebriandaru.blogspot.com

Cara Membuat Gambar responsive di Blogger

, 5 comments
Assalamu'alaikum Wr.Wb

Gambar responsive merupakan gambar pada blog yang otomatis menyesuaikan ukurannya dengan ukuran device yang digunakan untuk membuka blog tersebut. Dengan begitu maka blog akan terlihat rapi, karena tidak ada gambar yang over-size. Gambar yang responsive juga merupakan salah satu persyaratan sebuah blog disebut memiliki blog yang memiliki template responsive.

Saking pentingnya gambar responsive ini ada beberapa template buatan master - master blogger yang sengaja sudah dibuat responsive. Kalau sobat menggunakan template yang sudah menggunakan gambar responsive maka kemungkinan tidak memerlukan artikel ini. Tapi untuk yang belum, silahkan dibaca artikel ini sampai habis.

Sebenarnya ada beberapa cara untuk membuat gambar dalam blog menjadi responsive. Salah satunya adalah yang akan kita bahas kali ini, yakni menggunakan script CSS yang di sisipkan pada template blogger.

Oke langsung saja, caranya adalah seperti berikut.

  • Masuk dashbor blogger Disini.
  • Klik Edit Template => Edit HTML.
  • Cari kode ]]></b:skin> atau </head>
  • letakkan kode CSS dibawah ini tepat di atas kode ]]></b:skin> atau </head>
.separator a{margin-left:0px !important;margin-right:0px !important;} .post img{max-width:100%;height:auto;}

  • Klik Simpan Template

Sepertinya sekian dulu untuk postingan tutorial kali ini.

Mohon maaf apabila ada salah kata.
Wassalamu'alaikum Wr.Wb
Share:
Read More

Membuat Sistem Login dengan Session di PHP & MySQLi

, 16 comments
Assalamu'alaikum Wr.Wb

Berjumpa lagi dengan saya, Dwi Febriandaru. Seperti janji saya pada tutorial terdahulu, Kali ini kita akan membahas tentang cara membuat Membuat Sistem Login dengan Session di PHP & MySQLi. Untuk form loginnya saya akan menggunakan desain form dari posting kemarin, bagi yang belum membacanya saya sarankan untuk membacanya terlebih dahulu demi kelancaran tutorial kali ini.

Membuat Design Halaman Login dengan CSS

oke, langsung saja kita menuju tutorialnya.
untuk skema file dan directorynya bisa dilihat digambar


pertama - tama buatlah database dengan nama login dan buat table dengan nama user atau bisa download DISINI
setelah database selesai dibuat, saatnya membuat kode untuk koneksi ke database tersebut.

Copy kode dibawah dan simpan dengan nama koneksi.php
<?php
$dbhost = 'localhost'; 
$dbuser = 'root'; //ini hanya berlaku di Xampp
$dbpass = ''; //ini hanya berlaku di Xampp
$dbname = 'login';

 $connect = mysqli_connect($dbhost,$dbuser,$dbpass,$dbname) or die('koneksi gagal');
?>

Setelah kode diatas sobat simpan, selanjutnya kita akan membuat halaman awalnya.

Copy kode dibawah dan simpan dengan nama index.php.
<html>
    <head>
        <title>Contoh Form Login</title>
        <link href="css/main.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div class="container">

            <div class="badan">
                <div class="kepala">
                    <p class="kepalatext">&#187; Dwi Febriandaru Site &#171;</p>
                </div>
                  <div class="bingkai">
                   <div style="padding-top:10px; padding-left:10px; padding-right:10px; color:#030033;">
                         <?php
                          session_start();
                          if(empty($_SESSION['username'])){
                              echo "<center>TAMPILAN SEBELUM LOGIN</center><br/>Maaf sepertinya anda belum Login,silahkan tekan link login dibawah <br/>
                                      <a href='login.php'><center>Login</center></a>";
                          }else{
                              echo "<center>TAMPILAN SETELAH LOGIN<br/>Selamat Anda Berhasil Login<br/><a href='logout.php'>Logout</a></center>";
                          }
                          ?>
                   </div>
                  </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Halaman diatas adalah halaman awal yaitu halaman yang pertama kali akan ditampilkan saat user menggunjungi web sobat.

Langkah selanjutnya saatnya membuat form loginnya.

Copy kode dibawah dan simpan dengan nama login.php.
<html>
    <head>
        <title>Contoh Form Login</title>
        <link href="css/main.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div class="container">

            <div class="badan">
                <div class="kepala">
                    <p class="kepalatext">&#187; Login &#171;</p>
                </div>
                <form class="bingkai" action="proseslogin.php" method="POST">
                    <div>
                        
                        <input class="email" type="text" name="username" placeholder="Masukkan Username"/>
                        <input class="passwd" type="password" name="password" placeholder="Masukkan Pasword"/>
                     
                    </div>
                    <div class="bawah">
                        <input class="daftar" type="submit" name="submit" value="&#187; Login &#171;">
                        <p class="footertext">&#169; 2016 <a href="http://dwifebriandaru.blogspot.com">Dwi Febriandaru Site</a></p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>
Tampilan dari kode diatas kurang lebih adalah seperti gambar dibawah ini.


Selanjutnya, sampailah kita pada step yang sangat penting. karena disinilah sebenarnya inti dari tutorial ini, yaitu membuat kode untuk proses loginnya.

Oke, Copy kode dibawah dan simpan dengan nama proseslogin.php.
<?php
include "koneksi.php";

 $username = $_POST['username'];
$pass     = $_POST['password'];

 $login = mysqli_query($connect, "SELECT * FROM user WHERE username = '$username' AND password='$pass'");
$row=mysqli_fetch_array($login);
if ($row['username'] == $username AND $row['password'] == $pass)
{
  session_start();
  $_SESSION['username'] = $row['username'];
  $_SESSION['password'] = $row['password'];
  header('location:index.php');
}
else
{
  echo "<center><br><br><br><br><br><br><b>LOGIN GAGAL! </b><br>
        Username atau Password Anda tidak benar.<br>";
    echo "<br>";
  echo "<input class='btn btn-blue' type=button value='ULANGI LAGI' onclick=location.href='login.php'></a></center>";

 }
?>

Sampai sejauh ini Sistem Login dengan Session kita sudah 80% selesai. Kita tinggal membuat 1 file lagi, Yakni file untuk menghapus session.

Oke, Copy kode dibawah dan simpan dengan nama logout.php.
<?php
session_start();
session_destroy();
header('location:index.php');
?>

Dan selesai sudah tahapan dalam membuat Login dengan Session. Saatnya untuk uji coba dengan browser sobat masing - masing.

Untuk lebih jelasnya sobat bisa pelajari pada demo berikut ini : DEMO
   Username : admin
   password  : admin
Atau bila sobat malas untuk membuat file satu - persatu bisa download source codenya : DOWNLOAD

Mungkin sekian saja tutorial kali ini, bila ada pertanyaan, kritik maupun saran bisa di post di komentar.

Happy Coding !!!

 Wassalamu'alaikum Wr.Wb
Share:
Read More

Blog Traffic