Karena postingan sebelumnya menggunakan mysqli, maka dari itu saya akan membagikan postingan tentang extensi/koneksi pada php ke mysql
Showing posts with label PHP. Show all posts
Showing posts with label PHP. Show all posts
Sunday, July 24, 2016
Script Register, Login, Logout dan View dengan PHP, MySQL and Bootstrap
Berbeda dengan postingan sebelumnya, kali ini di tambah dengan register form dan juga menggunakan Bootstrap.
*catatan : dan juga telah menggunakan mysqli
Mari belajar bersama-sama ya.
Cara Membuat Form Login Dengan PHP dan MySQL
Kali ini saya akan berbagi Tutorial Membuat Form Login denga PHP dan MySQL.
saya menggunakan web buatan saya sendiri ya itu Penyewaan Studio Musik sebagai contoh nya.
Silahkan Simak Tutorial dari saya sob.
Saya memberi contoh dengan "Membuat Form Login denga PHP dan MySQL dengan Session."
atau bisa download script nya sini
Langkah-langkah / Cara Membuat Form Login Menggunakan PHP dan MySQL
Konsep dalam cara membuat form login dengan php dan mysql adalah membuat halaman form login dengan HTML terlebih dahulu dan selanjutnya akan dilengkapi dengan skrip php untuk memeriksa data pengguna di database MySQL. Jika pengguna terdapat dalam database MySQL, maka PHP akan membuat session untuk pengguna tersebut dan sekaligus akan mengarahkan pada halaman web yang telah diproteksi.
Ikuti Langkah-langkah dibawah ini untuk cara membuat form login sederhana dengan PHP dan database MySQL yang dilengkapi session sesuai konsep diatas.
Langkah 1: Membuat Tabel MySQL User/Pengguna
Untuk membuat database dan tabel, anda bisa menggunakan phpmyadmin/sqlyog/heidisql.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
--
-- Database: `studio`
--
CREATE DATABASE IF NOT EXISTS `studio` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `studio`;
-- --------------------------------------------------------
-- -- Table structure for table `t_masuk` -- CREATE TABLE `t_masuk` ( `user_id` varchar(10) NOT NULL, `pass_id` varchar(25) NOT NULL, `nama` varchar(50) NOT NULL, `kategori` varchar(50) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `t_masuk` -- INSERT INTO `t_masuk` (`user_id`, `pass_id`, `nama`, `kategori`) VALUES ('aasda', 'asdasd', 'sdasd', 'asdad'), ('admin', '123456', 'Studio Musik', 'Admin'), ('asdas', 'asdasd', 'asdad', 'adas'); |
Langkah 2: Membuat Form Login HTML
Kemudian membuat script masuk.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<title>Login Studio</title>
<style type="text/css">
body{
font-family: arial;
font-size: 14px;
background: url('gambar/masuk.jpg');
background-size: 100%;
background-attachment: fixed;
}
#utama{
width: 300px;
margin: 250px auto;
margin-top: 4%;
}
#judul{
padding: 15px;
text-align: center;
color: #fff;
font-size: 20px;
background-color: #2980b9;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom: 3px solid #336666;
}
#inputan{
background-color: #ccc;
padding: 20px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input{
padding: 10px;
border: 0;
}
.lg{
width: 240px;
}
.kc{
background-color: #2980b9;
border-radius: 10px;
color: #fff;
width: 260px;
}
.kc:hover{
background-color: #336666;
cursor: pointer;
}
#header{
background: white;
width: 100%;
height: 20px;
position: fixed;
top: 0px;
left: 0px;
}
#page_title, h2{
text-align: center;
font-family: times new romance;
color: #ffffff;
font-size: 60px;
margin: auto;
margin-top: 2%;
}
.status {
text-align: center;
color: red;
}
</style>
<script>
function inform(){
alert("Anda yakin ingin Login?")
}
</script>
</head>
<body>
<div id="page_title"><h2>Selamat Datang Admin</h2></div>
<div id="utama">
<div id="judul">
Login Pengelola<br/>
Studio Musik
</div>
<div id="inputan">
<form action="" method="post">
<div>
<input type="text" id="username" name="username" placeholder="Username" class="lg" />
</div>
<div style="margin-top:10px">
<input type="password" id="password" name="password" placeholder="Password"class="lg" />
</div>
<div style="margin-top:10px">
<input type="submit" name="submit" id="submit" value="Login" class="kc" onclick="inform()"/>
</div>
<br/>
<div class="status">
<?php include("login.php");
if(isset($_SESSION['t_masuk'])){
header("location: index.php");
}
?>
</div>
</form>
</div>
</div>
</body>
</html>
|
Langkah 3: Membuat Skrip Login
Ketik-kan skrip berikut dan simpan dalam file dengan nama
login.php.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<?php
session_start(); // Memulai Session
$error=''; // Variabel untuk menyimpan pesan error
if (isset($_POST['submit'])) {
if (empty($_POST['username']) || empty($_POST['password'])) {
$error = "Username or Password is invalid";
}
else
{
// Variabel username dan password
$username=$_POST['username'];
$password=$_POST['password'];
// Membangun koneksi ke database
$connection = mysql_connect("localhost", "root", "");
// Mencegah MySQL injection
$username = stripslashes($username);
$password = stripslashes($password);
$username = mysql_real_escape_string($username);
$password = mysql_real_escape_string($password);
// Seleksi Database
$db = mysql_select_db("studio", $connection);
// SQL query untuk memeriksa apakah karyawan terdapat di database?
$query = mysql_query("select * from t_masuk where pass_id='$password' AND user_id='$username'", $connection);
$rows = mysql_num_rows($query);
if ($rows == 1 ) {
$_SESSION['t_masuk']=$username; // Membuat Sesi/session
header("location: index.php"); // Mengarahkan ke halaman profil
} else {
$error = "Username atau Password belum terdaftar";
echo 'Username atau Password Salah';
}
mysql_close($connection); // Menutup koneksi
}
}
?>
|
Langkah 4: Membuat Halaman Profil
Kemudian membuat script index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<?php
include('session.php');
?>
<html>
<head>
<title>Studio Musik</title>
<link href="homepage.css" rel="stylesheet" type="text/css">
<script>
function inform(){
alert("Anda yakin ingin Logout?")
}
</script>
</head>
<body>
<div id="header">
<nav>
<ul>
<a href="logout.php"><li onclick="inform()"><p class="navtext">Logout</p></li></a>
</ul>
</nav>
</div>
<div class="konten">
<div id="page_title"><h2>Selamat Datang, <b><i><?php echo $login_session; ?></i></b></h2>
<embed src="musik/canon.mp3" autostart="true" loop="true" hidden="true">
</div>
<hr class="garis">
<div id="menu_body">
<div id="home_menu">
<a href="booking.php"><div id="menu_body1"><p class="text1"><b>Booking</p></div></a>
</div>
<div id="about_us">
<a href="status.php"><div id="menu_body2"><p class="text2"><b>Status</p></div></a>
</div>
<div id="tutorial">
<a href="bayar.php"><div id="menu_body3"><p class="text3"><b>Pembayaran</p></div></a>
</div>
<div id="download">
<a href="fpdf/laporan.php" target="_blank"><div id="menu_body4"><p class="text4"><b>Laporan</p></div></a>
</div>
</div>
</div>
<div class="footer"><p class="footertext">© 2016 Studio Musik Desain By Ahmad Dwi Alfian</p></div>
</body>
</html>
|
Kemudian membuat script css nya homepage.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
*{
padding: 0;
margin: 0;
}
html, body{
height: auto;
}
body{
background: url('gambar/masuk.jpg');
background-size: 100%;
background-attachment: fixed;
}
#header{
background: #2980b9;
width: 100%;
height: 40px;
position: fixed;
top: 0px;
}
nav ul{
background: #2980b9;
width: 400px;
height: 40px;
float: right;
}
nav ul a li{
margin-right: -4px;
background: #2980b9;
width: 100px;
height: 40px;
display: inline-block;
}
nav ul a li:hover{
background: blue;
}
nav ul li .navtext:hover{
color: white;
}
nav ul li .navtext{
text-align: center;
font-family: aBeeZee;
font-size: 12pt;
color: #ffffff;
margin: 10px 0 0 0;
}
#page_title, h2{
text-align: center;
font-family: aBeeZee;
color: #ffffff;
margin: 100px 0 0 0;
}
#page_title2{
text-align: center;
font-family: aBeeZee;
color: #ffffff;
margin:auto;
}
#logout:hover{
color: #49ACEF;
}
#logout {
text-align: right;
}
#page_title, h2, a{
text-decoration: none;
}
.garis{
margin: auto;
width: 850px;
margin-top: 10px;
background-color: #2980b9;
}
#menu_body{
background: transparent;
width: 1200px;
height: 160px;
float: left;
margin: 80px 0 0 230px;
}
#home_menu{
background: #60B9E5;
width: 200px;
height: 200px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body1{
background: #ffffff;
width: 180px;
height: 180px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#home_menu:hover{
background: #2980b9;
}
#about_us{
background: #60B9E5;
width: 200px;
height: 200px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body2{
background: #ffffff;
width: 180px;
height: 180px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#about_us:hover{
background: #2980b9;
}
#tutorial{
background: #60B9E5;
width: 200px;
height: 200px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body3{
background: #ffffff;
width: 180px;
height: 180px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#tutorial:hover{
background: #2980b9;
}
#download{
background: #60B9E5;
width: 200px;
height: 200px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body4{
background: #ffffff;
width: 180px;
height: 180px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#download:hover{
background: #2980b9;
}
.text1{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 80px;
left: 55px;
}
.text2{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 80px;
left: 60px;
}
.text3{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 80px;
left: 35px;
}
.text4{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 80px;
left: 55px;
}
.footer{
background: #2980b9;
width: 100%;
height: 50px;
position: fixed;
top: 610px;
}
.footertext{
text-align: center;
font-family: aBeeZee;
position: relative;
top: 18px;
color: #ffffff;
font-size: 15px;
margin-bottom: 0px;
}
table {
background-color: white;
margin: 20px auto 20px auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
*{
padding: 0;
margin: 0;
}
html, body{
height: auto;
}
body{
background: url('gambar/masuk.jpg');
background-size: 100%;
background-attachment: fixed;
}
#header{
background: #2980b9;
width: 100%;
height: 40px;
position: fixed;
top: 0px;
}
nav ul{
background: #2980b9;
width: 400px;
height: 40px;
float: right;
}
nav ul a li{
margin-right: -4px;
background: #2980b9;
width: 100px;
height: 40px;
display: inline-block;
}
nav ul a li:hover{
background: blue;
}
nav ul li .navtext:hover{
color: white;
}
nav ul li .navtext{
text-align: center;
font-family: aBeeZee;
font-size: 12pt;
color: #ffffff;
margin: 10px 0 0 0;
}
#page_title, h2{
text-align: center;
font-family: aBeeZee;
color: #ffffff;
margin: 100px 0 0 0;
}
#page_title2{
text-align: center;
font-family: aBeeZee;
color: #ffffff;
margin:auto;
}
#logout:hover{
color: #49ACEF;
}
#logout {
text-align: right;
}
#page_title, h2, a{
text-decoration: none;
}
.garis{
margin: auto;
width: 850px;
margin-top: 10px;
background-color: #2980b9;
}
#menu_body{
background: transparent;
width: 1200px;
height: 160px;
float: left;
margin: 80px 0 0 230px;
}
#home_menu{
background: #60B9E5;
width: 200px;
height: 200px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body1{
background: #ffffff;
width: 180px;
height: 180px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#home_menu:hover{
background: #2980b9;
}
#about_us{
background: #60B9E5;
width: 200px;
height: 200px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body2{
background: #ffffff;
width: 180px;
height: 180px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#about_us:hover{
background: #2980b9;
}
#tutorial{
background: #60B9E5;
width: 200px;
height: 200px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body3{
background: #ffffff;
width: 180px;
height: 180px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#tutorial:hover{
background: #2980b9;
}
#download{
background: #60B9E5;
width: 200px;
height: 200px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body4{
background: #ffffff;
width: 180px;
height: 180px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#download:hover{
background: #2980b9;
}
.text1{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 80px;
left: 55px;
}
.text2{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 80px;
left: 60px;
}
.text3{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 80px;
left: 35px;
}
.text4{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 80px;
left: 55px;
}
.footer{
background: #2980b9;
width: 100%;
height: 50px;
position: fixed;
top: 610px;
}
.footertext{
text-align: center;
font-family: aBeeZee;
position: relative;
top: 18px;
color: #ffffff;
font-size: 15px;
margin-bottom: 0px;
}
table {
background-color: white;
margin: 20px auto 20px auto;
}
|
Contoh PHP Nama Mahasiswa
Contoh penggunaan PHP misalkan kita ingin membuat list dari nomor 1 sampai nomor 10. Dengan menggunakan HTML murni, kita bisa membuatnya secara manual seperti kode berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Contoh list dengan HTML</title>
</head>
<body>
<h2>Daftar Absensi Mahasiswa</h2>
<ol>
<li>Nama Mahasiswa ke-1</li>
<li>Nama Mahasiswa ke-2</li>
<li>Nama Mahasiswa ke-3</li>
<li>Nama Mahasiswa ke-4</li>
<li>Nama Mahasiswa ke-5</li>
<li>Nama Mahasiswa ke-6</li>
<li>Nama Mahasiswa ke-7</li>
<li>Nama Mahasiswa ke-8</li>
<li>Nama Mahasiswa ke-9</li>
<li>Nama Mahasiswa ke-10</li>
</ol>
</body>
</html>
Halaman HTML tersebut dapat dibuat dengan mudah dengan cara men-copy-paste tag <li>sebanyak 10 kali dan mengubah sedikit angka-angka no urut di belakangnya. Namun jika yang kita inginkan adalah menambahkan list tersebut menjadi 100 atau 1000 list, cara copy-pastetersebut menjadi tidak efektif.
Apa itu "PHP"? dan apa fungsinya?
Hai sobat Blogger. Ini postingan saya yang pertama tentang PHP.
Stay turn ya sob.
Hai sobat Blogger. Ini postingan saya yang pertama tentang PHP.
Stay turn ya sob.
Pengertian PHP
PHP adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web. Selain itu, PHP juga bisa digunakan sebagai bahasa pemrograman umum (wikipedia). PHP di kembangkan pada tahun 1995 oleh Rasmus Lerdorf, dan sekarang dikelola oleh The PHP Group. Situs resmi PHP beralamat di http://www.php.net.
PHP disebut bahasa pemrograman server side karena PHP diproses pada komputer server. Hal ini berbeda dibandingkan dengan bahasa pemrograman client-side seperti JavaScript yang diproses pada web browser (client).
Pada awalnya PHP merupakan singkatan dari Personal Home Page. Sesuai dengan namanya, PHP digunakan untuk membuat website pribadi. Dalam beberapa tahun perkembangannya, PHP menjelma menjadi bahasa pemrograman web yang powerful.
Saat ini PHP adalah singkatan dari PHP: Hypertext Preprocessor, sebuah kepanjangan rekursif, yakni permainan kata dimana kepanjangannya terdiri dari singkatan itu sendiri: PHP: Hypertext Preprocessor.
PHP dapat digunakan dengan gratis (free) dan bersifat Open Source. PHP dirilis dalam lisensi PHP License, sedikit berbeda dengan lisensi GNU General Public License (GPL) yang biasa digunakan untuk proyek Open Source.
Fungsi PHP Dalam Pemrograman Web
Untuk membuat halaman web, sebenarnya PHP bukanlah bahasa pemrograman yang wajib digunakan. Kita bisa saja membuat website hanya menggunakan HTML saja. Web yang dihasilkan dengan HTML (dan CSS) ini dikenal dengan website statis, dimana konten dan halaman web bersifat tetap.
Sebagai perbandingan, website dinamis yang bisa dibuat menggunakan PHP adalah situs web yang bisa menyesuaikan tampilan konten tergantung situasi. Website dinamis juga bisa menyimpan data ke dalam database, membuat halaman yang berubah-ubah sesuai input dariuser, memproses form, dll.
Untuk pembuatan web, kode PHP biasanya di sisipkan kedalam dokumen HTML. Karena fitur inilah PHP disebut juga sebagai Scripting Language atau bahasa pemrograman script..
diambil dari berbagai sumber : wikipedia, php, duniailkom.
Subscribe to:
Posts (Atom)
Popular Posts
-
Banyak sekali pengguna vga intel graphic yang mengalami crash pada saat bermain PES 2012 yaitu saat akan memilih avatar atau saat pilih matc... -
Berbeda dengan postingan sebelumnya, kali ini di tambah dengan register form dan juga menggunakan Bootstrap. *catatan : dan juga tela...
-
Kali ini saya akan berbagi Tutorial Membuat Form Login denga PHP dan MySQL. saya menggunakan web buatan saya sendiri ya itu Penyewaan Stu... -
Image copyright Image caption Permainan Pokemon Go sudah diunduh jutaan kali di berbagai negara . Hai Sob kali ini saya akan membahas ...