Dwi Febriandaru Site: web

Showing posts with label web. Show all posts

Membuat Sistem Login dengan Session di PHP & MySQLi

Dwi FebriandaruMay 22, 2016tutorial, web16 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">» Dwi Febriandaru Site «</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">» Login «</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="» Login «">
<p class="footertext">© 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

Membuat Design Halaman Login dengan CSS

Dwi FebriandaruMay 19, 2016tutorial, webNo comments

Assalamu'alaikum Wr.Wb

Tak dipungkiri keindahan dan tata letak kerangka website adalah salah satu daya tarik bagi visitor untuk mengunjungi website kita. Oleh sebab itulah pada tutorial kali ini kita akan belajar membuat halaman login.

Halaman yang akan kita buat kurang lebih seperti gambar pembuka diatas.
Oke langsung saja kita akan memulai tutorial kali ini.

Pertama - tama kita akan membuat kerangkanya terlebih dahulu

Silahkan Sobat Copy kode HTML berikut.

<html>
<head>
<title>Contoh Form Login</title>
</head>
<body>
<div class="container">

<div class="badan">
<div class="kepala">
<p class="kepalatext">» Login «</p>
</div>
<form class="bingkai" action="login.php" method="POST">
<div>

<input class="email" type="email" name="email" id="email" placeholder="Masukkan Email"/>
<input class="passwd" type="password" name="password" id="password" placeholder="Masukkan Pasword"/>

</div>
<div class="bawah">
<input class="daftar" type="submit" name="submit" value="» Login «">
<p class="footertext">© 2016 <a href="http://dwifebriandaru.blogspot.com">Dwi Febriandaru Site</a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

Setelah dicopy kemudian simpan dengan nama index.html
buka index.html tersebut dengan browser sobat, maka hasilnya kurang lebih seperti ini.
m

Sangat jelek dan berantakan bukan ?, Oleh sebab itulah kita akan menambahkan sedikit css pada kode diatas. Silahkan sobat copy Kode CSS berikut ini.

.container{
margin-top: 130px;
margin-left: 500px;
}

.bingkai{
border: 5px solid #3498db;
width: 440px;
height: 300px;

}
body{
background-color: #bdc3c7;
}

.kepala{
width: 450px;
height: 50px;
background-color: #3498db;
border-radius: 3px 3px 0 0;
}

.kepalatext{
color: #ffffff;
text-align: center;
font-size: 18pt;
font-family: Century;
padding-top: 12px;
}

.kepalatext:hover{
color: #e74c3c;
}

.badan{
width: 450px;
height: 360px;
background-color: #ffffff;
border-radius: 3px;
box-shadow: 6px 6px 0 0 #ffffff;
}

.email{
font-family: Century;
font-size: 13pt;
width: 415px;
height: 35px;
border: 1px solid #2980b9;
margin-left: 15px;
margin-top: 65px;
padding-left: 5px;
display: compact;
box-shadow: #95a5a6;
border-radius: 5px;
}

.passwd{
font-family: Century;
font-size: 13pt;
width: 415px;
height: 35px;
border: 1px solid #2980b9;
margin-left: 15px;
margin-top: 10px;
padding-left: 5px;
display: compact;
box-shadow: #95a5a6;
border-radius: 5px;
}

.daftar{
background-color: #ffffff;
color: #3498db;
margin-top: 1px;
margin-left: 15px;
width: 415px;
height: 40px;
border: 2px solid #3498db;
border-radius: 5px;
font-family: Century;
font-size: 13pt;
}

.daftar:hover{
background-color: #e74c3c;
color: #ffffff;
}

.bawah{
margin-top: 80px;
width: 440px;
height: 80px;
background-color: #3498db;
border-radius: 0 0 3px 3px;
}

.footertext{
margin-top: 5px;
text-align: center;
font-family: Century;
font-size: 12pt;
color: #ffffff;
}
.footertext>a{
color: #fefefe;
}
.footertext>a:hover{
color: #0e0e0e;
}

Setelah kode CSS tersebut sobat copy, lalu simpan dengan nama main.css. dan tambahkan baris <link href="main.css" rel="stylesheet" type="text/css"/> pada dokumen index.html kemudian simpan dan coba test dengan browser sobat. Bila tidak ada kesalahan, maka hasilnya adalah seperti ini.

Sepertinya cukup sekian dulu tutorial kali ini, bila ada yang merasa sulit bisa ditanyakan di komentar.
jangan lupa next post kita akan membahas tentang Membuat Login Dengan Session di PHP & MySQLi.

Mohon maaf apabila ada salah kata. Atas perhatiannya saya ucapkan terima kasih.

Wassalamu'alaikum Wr.Wb

Cara Membuat Footer Tetap Berada di Bawah dengan CSS

Dwi FebriandaruMay 13, 2016tutorial, web20 comments

Assalamu'alaikum Wr.Wb

Komponen footer merupakan komponen yang wajib ada dalam sebuah web maupun blog. Pada Footer inilah biasanya developer web menempatkan Copy Right atas karya mereka. Namun terkadang keberadaan footer justru menjadi blunder kecil bagi para developer. Kadang penempatan footer justru mengikuti Konten yang ada. Padahal ini membuat tampilan website menjadi kurang "Proporsional" seperti contoh berikut ini.

Gambar 1

Tampilan yang seperti itu menyisakan bagia bawah yang tidak terpakai. Jadi pada kesempatan kali ini kita akan membahas tentang Cara Membuat Footer Tetap Berada di Bawah dengan CSS. Pada dasarnya cara ini hanya menggunakan class yang diset poritionnya menjadi absolute dan relative. Untuk lebih jelasnya bisa di lihat di script HTML berikut ini :

<html>
<head>
<title>Belajar-PHP</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="container">
<div class="header"><h2>Belajar-PHP</h2></div>
<div class="content">

</div>
<div class="footer">
Copyright by Dwi Febriandaru
</div>
</div>
</body>
</html>

Dan Script CSS berikut ini :

*{margin: 0px auto;}
html,body{
height: 100%;
}

#container{
position: relative;
}

.header{
background: #0cf;
padding: 10px;
}

.content{
padding: 10px;
}

.footer{
width: 100%;
height: 50px;
padding-left: 10px;
line-height: 50px;
background: #333;
color: #fff;
}

Dua Script diatas bila dieksekusi akan menghasilkan tampilan seperti pada gambar 1.
Nah, Untuk membuat footer tetap berada di bawah meski konten tidak penuh kita perlu menambah atribut min-height pada "container" dan membuat class "footer" menjadi fixed (ditambah atribut position:absolute dengan bottom 0px). Jadi script utuhnya akan menjadi seperti dibawah ini.

*{margin: 0px auto;}
html,body{
height: 100%;
}

#container{
min-height: 100%;
position: relative;
}

.header{
background: #0cf;
padding: 10px;
}

.content{
padding: 10px;
}

.footer{
width: 100%;
height: 50px;
padding-left: 10px;
line-height: 50px;
background: #333;
color: #fff;
position: absolute;
bottom: 0px;
}

Dan Tampilannya akan menjadi seperti berikut ini

Tampak lebih rapi,bukan ?.

Klik untuk melihat Demo

Nah sepertinya cukup sekian dulu pembahasan kita kali ini tentang Cara Membuat Footer Tetap Berada di Bawah dengan CSS.

Jangan lupa klik tombol share bila artikel ini bermanfaat bagi kalian. Dari saya cukup sekian, mohon maaf apabila ada salah kata dan terima kasih atas perhatiannya.

Happy Coding !!!

Wassalamu'alaikum Wr.Wb

Cara Menampilkan Karakter dalam PHP

Dwi FebriandaruMay 11, 2016tutorial, web6 comments

Assalamu'alaikum Wr.Wb

Setelah kemarin kita belajar mengenai Pengertian dan Pengenalan PHP untuk pemula, hari ini kita akan belajar mengenai Cara Menampilkan Karakter dalam PHP.

Menampilkan Karakter dengan ECHO dan PRINT

Dalam PHP kita bisa menggunakan dua perintah, yakni "echo" dan juga "print". Antara dua perintah tersebut sebenarnya sama saja. Untuk lebih jelasnya

<?php
//ini adalah cara menampilkan karakter pada php dengan "echo"
echo "Menampilakn Karakter dengan <b>'echo'</b><br/><br/>";

//ini adalah cara menampilkan karakter pada php dengan "print"
print "Menampilakn Karakter dengan <b>'print'</b><br/>";
?>

Script diatas apabila dieksekusi akan menghasilkan tampilan sebagai berikut :

Jadi bisa kita simpulkan kalau sebenarnya kedua perintah tersebuat hampir sama, baik secara penulisan perintah dan juga strukturnya.

Menampilkan Karakter yang diambil dari ARRAY

Dalam Studi kasus yang seperti ini kita membutuhkan string yang bernama "array" yang didalamnya memuat kata - kata atau angka yang ingin ditampilkan. Dalam hal yang seperti ini kita membutuhkan perintah tambahan yaitu "foreach". untuk lebih jelasnya bisa dilihat script dibawah ini:

<?php
//memasukkan semua array
$array = array("dwifebriandaru.blogspot.com", "Dwi Febriandaru Site", "Dwi Febriandaru");

//menampilkan array (kita membutuhkan perintah tambahan ,yakni "foreach")
foreach($array as &$value){
echo "$value";
}
?>

Script diatas apabila di eksekusi maka hasilnya adalah sebagai berikut :

Sepertinya cukup sekian pembahasan kita kali ini, Apabila Sobat belum / kurang faham dengan penjelasan saya bisa di tanyakan dikomentar. Dan apabila sobat belum tau apa itu PHP , bisa baca postingan saya sebelumya di Pengertian dan Pengenalan PHP untuk pemula.

akhir kata saya ucapkan mohon maaf apabila ada kesalahan penulisan kata, dan Terimakasih atas atensinya.

Happy Coding..!!!

Wassalamu'alaikum Wr.Wb

Pengertian dan Pengenalan PHP untuk pemula

Dwi FebriandaruMay 10, 2016tutorial, webNo comments

Assalamu'alaikum Wr.Wb

PHP adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web. Selain itu, PHP juga bisa digunakan sebagai bahasa pemrograman umum (wikipedia). PHP dikembangkan oleh Rasmus Lerdorf pada tahun 1995. Untuk saat ini PHP dikelola oleh The PHP Group. situs resminya adalah http://www.php.net .

Mengapa disebut sebagai script server-side adalah karena bahasa pemrograman jenis ini hanya bekerja pada server. jadi dengan kata lain untuk menampilkan hasil dari kode - kode dalam program PHP ini kita memerlukan sebuah server untuk meletakkan file PHP yang kemudian diakses melalui web browser client. Hal ini sangat berbeda jauh dengan bahasa pemrograman lainnya seperti HTML maupun Javascript.

Pada awal mulanya PHP merupakan singkatan dari Personal Home Page. Sesuai dengan namanya, Bahasa pemrograman ini dulunya hanya digunakan untuk membuat Website pribadi. Namun saat ini PHP sudah menjelma menjadi sebuah bahasa pemrograman yang powerfull dan banyak digunakan pada website seperti wordpress, joomla dan lainnya. PHP juga sudah menjadi standar pemrograman web di seluruh dunia.

Namun untuk saat ini PHP adalah singkatan dari PHP: Hypertext Processor, sebuah kepanjangan rekrusif ,yaitu sebuah permainan kata dimana kepanjangan terdiri dari singkatan itu sendiri (PHP:Hypertext Processor)

Sama halnya dengan HTML, pada PHP kita juga mengenal istilah beginning tag dan ending tag yaitu tag yang berada diantara kode - kode PHP yang kita susun. Dalam PHP diawali dengan tag <?php dan di akhiri dengan tag ?> atau dengan kata lain berada diantara tag <?php...?>. Dan setiap string dalam php harus selalu di awali dengan symbol dollar ($).

Sepertinya cukup sekian dulu pembahasan kita kali ini. Pembahasan tentang perintah - perintah (tag) dasar dalam PHP akan kita bahas pada postingan selanjutnya.
Mohon maaf apabila ada salah kata dan terimakasih atas perhatiannya.

Wassalamu'alaikum Wr.Wb

Dwi Febriandaru Site

Corel Draw Graphic Suite X5 dan Cara Crack

Membuat Sticky Footer dengan CSS

Membuat Sistem Login Session di PHP-MySQLi

Membuat Sistem Login dengan Session di PHP & MySQLi

Membuat Design Halaman Login dengan CSS

Cara Membuat Footer Tetap Berada di Bawah dengan CSS

Cara Menampilkan Karakter dalam PHP

Pengertian dan Pengenalan PHP untuk pemula

Popular Posts

Blog Archive

About Me

Blog Traffic