Abi Rahman Prasetyo

Jumat, 05 Mei 2017

Membuat Halaman Back-End Untuk Admin Dengan Mudah PHP dan MySQL- Part 1

Mei 05, 2017 No comments

Assalammu'alaikum Warahmatullahi Wabarakatuh..

Pada kesempatan kali ini saya akan coba membagikan ilmu sedikit yang saya punya untuk membuat halaman back-end atau sering disebut halaman admin dengan menggunakan PHP dan database mysql serta di kombinasikan dengan css dan bootstrap.. Oke biar lebih semangat berikut adalah tampilannya :

Bagaimana caranya? Mudah banget kok,, ikutin secara saksama dan dalam tempo secepat-cepatnya yaa hehe..

Pertama : Buat file dengan nama Index.php dan berikut adalah scriptnya :
<html>
<head>
<title>Ujian Back End</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<center>
<br>
<img src="Jakmania.jpg" alt="foto-profil" width="500" height="100">
<h1>Selamat Datang Admin</h1>
</center>
<div class="login">
<h2 class="judul">Login Admin</h2>
<br>

<form class="form-horizontal" action="proses_login.php">

<div class="form-group">
<label for="Username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="Username" placeholder="Username">
</div>
</div>

<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="h4_login">
Belum Punya Akun???
<a href="proses_regis.php">Registrasi</a>
</div>
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>

</div>
</form>
</body>
</html>

Oke lanjut ke buat file css nya nih untuk mempercantik tampilannya beri nama style.css dan simpan dalam folder yang sama dengan file index.php dan berikut scriptnya :
body{
background: #FEB600;
font-family: sans-serif;
}
.login{
width: 500px;
background: #FE7600;
margin: 80px auto;
padding: 5px 10px 10px 10px;
border-radius: 5px;
box-shadow: 0px 10px 20px 0px #D1D1D1;
}

.judul{
text-align: center;
color: #eee;
font-weight: normal;
}

.h4_login{
color: white;
}

.control-label{
color: white;
font-family: arial;
font-size: 12pt;
}

a{
color: white;
}

Oke bagaimana sudah?? Berhasil kan? Mudah kan?? Oia saya kan memiliki gambar tuh ya, apabila kalian ingin memasukan gambar, untuk mempermudah letakan file gambarnya dalam folder yang sama..

Selanjutnya saya akan membahas maksud dari script diatas yaa..
Perhatikan script index.php dan fokus pada bagian ini :
<head>
<title>Ujian Back End</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Nah script diatas berfungsi untuk menampilkan class-class bootstrap dan juga menampilkan css yang kita buat untuk mempercantik tampilan..

Lanjut fokus pada script ini :
<form class="form-horizontal" action="proses_login.php">
script diatas ini untuk membuat proses apabila kita ingin melakukan login yaa. Tapi kita belum membuatnya dan tutorial selanjutnya akan membuat proses login tersebut.

Dan juga ini
Belum Punya Akun???
<a href="regis.php">Registrasi</a>
Nah untuk script diatas akan berfungsi untuk pergi ke halaman registrasi apabila adminnya belum memiliki akun untuk login. Oke bagaimana???
Untuk script lainnya itu kalian bisa pelajari karena lainnya adalah script untuk membentuk tampilan login..
Oke terimakasih atas perhatian anda, tutorial setelah ini adalah untuk registrasi yaaaa...

Membuat Aplikasi Kalkulator dengan PHP dan CSS Sangat Mudah

Mei 05, 2017 No comments

Assalammu'alaikum Warahmatullahi Wabarakatuh..

Apa kabar teman-teman semua??? Semoga dalam keadaan sehat selalu ya.. aamiin :)
Pada kesempatan kali ini saya akan membuat program sederhana kalkulator yang tampilannya seperti berikut:

Caranya dengan membuat file dengan nama index.php dan berikut script nya :
<html>
<head>
<title>Membuat Kalkulator Sederhana Dengan PHP | Layanan Program</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<?php
if(isset($_POST['hitung'])){
$bil1 = $_POST['bil1'];
$bil2 = $_POST['bil2'];
$operasi = $_POST['operasi'];
switch ($operasi) {
case 'tambah':
$hasil = $bil1+$bil2;
break;
case 'kurang':
$hasil = $bil1-$bil2;
break;
case 'kali':
$hasil = $bil1*$bil2;
break;
case 'bagi':
$hasil = $bil1/$bil2;
break;
}
}
?>
<div class="kalkulator">
<h2 class="judul">KALKULATOR</h2>
<br>
<center><h3>Karya Abi Rahman Prasetyo</h3></center>
<form method="post" action="index.php">
<input type="text" name="bil1" class="bil" autocomplete="off" placeholder="Masukkan Bilangan Pertama">
<input type="text" name="bil2" class="bil" autocomplete="off" placeholder="Masukkan Bilangan Kedua">
<select class="opt" name="operasi">
<option value="tambah">+</option>
<option value="kurang">-</option>
<option value="kali">x</option>
<option value="bagi">/</option>
</select>
<input type="submit" name="hitung" value="Hitung" class="tombol">
</form>
<?php if(isset($_POST['hitung'])){ ?>
<input type="text" value="<?php echo $hasil; ?>" class="bil">
<?php }else{ ?>
<input type="text" value="0" class="bil">
<?php } ?>
</div>
</body>
</html>

Oke setelah itu kita buat script style.css dan berikut script nya :
body{
background: #F2F2F2;
font-family: sans-serif;
}

.kalkulator{
width: 335px;
background: orange;
margin: 100px auto;
padding: 10px 20px 50px 20px;
border-radius: 5px;
box-shadow: 0px 10px 20px 0px #D1D1D1;
}

.bil{
width: 300px;
margin: 5px;
border: none;
font-size: 16pt;
border-radius: 5px;
padding: 10px;
}

.opt{
font-size: 16pt;
border: none;
width: 215px;
margin: 5px;
border-radius: 5px;
padding: 10px;
}

.tombol{
background: #EC5159;
border-top: none;
border-right: none;
border-left: none;
border-radius: 5px;
padding: 10px 20px;
color: #eee;
font-size: 15pt;
border-bottom:4px solid #BF3D3D;
}

.brand{
color: #eee;
font-size: 11pt;
float: right;
text-decoration: none;
margin: 12px;
}

.judul{
text-align: center;
color: #eee;
font-weight: normal;
}

Oke bagaimana berhasil kan? Sangat mudah kan? Oke silahkan anda kembangkan yaa.
Terimakasih dan sukses selalu untuk kita semua..

Wassalammu'alaikum Warahmatullahi Wabarakatuh

Membuat Berbagai Macam Form Dengan Bootstrap

Mei 02, 2017 No comments

Assalammu'alaikum Warahmatullahi Wabaraktuh

Pada kesempatan kali ini saya akan berbagi ilmu mengenai cara membuat form dengan menggunakan bootstrap.. Oke langsung saja yaa

1. Form 'form-group'

<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<center><H1>BASIC FORM</H1></center>
</body>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</html>

Dan berikut adalah hasilnya :

2. Form 'form-inline'
<html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <br> <center> <form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> </div> <div class="form-group"> <label for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form> </center> </html>

Dan berikut adalah hasilnya :

3. Form 'form-horizontal'
<html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> </html>

Dan berikut adalah hasilnya :

Oke sekian informasi yang bisa saya sampaikan mengenai pembuatan form dengan menggunakan bootstrap.. Semoga bermanfaat dan sukses untuk kita semua. aamiin

Wassalammu'alaikum warahmatullahi wabarakatuh

Membuat Table Dengan Bootstrap Lengkap dan Mudah

Mei 02, 2017 No comments

Assalammu'alaikum warahmatullahi wabarakatuh

Pada kesempatan kali ini, saya akan berbagi ilmu mengenai sript membuat tabel dengan menggunakan bootstrap.. Berikut adalah cara-caranya :

1. Class 'table'
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Cara Membuat table dengan Bootstrap | Layanan Program</h1>
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Usia</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Abi Rahman Prasetyo</td>
<td>21 Tahun</td>
</tr>
<tr>
<td>2</td>
<td>Ika Merina</td>
<td>23 Tahun</td>
</tr>
<tr>
<td>3</td>
<td>Sintia Lamusu</td>
<td>19 Tahun</td>
</tr>
<tr>
<td>4</td>
<td>Bambang Pamungkas</td>
<td>35 Tahun</td>
</tr>
<tr>
<td>5</td>
<td>Raisa Andriana</td>
<td>25 Tahun</td>
</tr>
</tbody>
</table>
</body>

</html>

Dan berikut adalah hasilnya :

2.Class 'table table-striped'
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Cara Membuat table dengan Bootstrap | Layanan Program</h1>
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Usia</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Abi Rahman Prasetyo</td>
<td>21 Tahun</td>
</tr>
<tr>
<td>2</td>
<td>Ika Merina</td>
<td>23 Tahun</td>
</tr>
<tr>
<td>3</td>
<td>Sintia Lamusu</td>
<td>19 Tahun</td>
</tr>
<tr>
<td>4</td>
<td>Bambang Pamungkas</td>
<td>35 Tahun</td>
</tr>
<tr>
<td>5</td>
<td>Raisa Andriana</td>
<td>25 Tahun</td>
</tr>
</tbody>
</table>
</body>

</html>

Dan berikut hasilnya :

Bagaimana terlihat kan bedanya antara nomer 1 dan 2?

3. Class 'table table-bordered'
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <h1>Cara Membuat table dengan Bootstrap | Layanan Program</h1> <table class="table table-bordered">
<thead> <tr> <th>No</th> <th>Nama</th> <th>Usia</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Abi Rahman Prasetyo</td> <td>21 Tahun</td> </tr> <tr> <td>2</td> <td>Ika Merina</td> <td>23 Tahun</td> </tr> <tr> <td>3</td> <td>Sintia Lamusu</td> <td>19 Tahun</td> </tr> <tr> <td>4</td> <td>Bambang Pamungkas</td> <td>35 Tahun</td> </tr> <tr> <td>5</td> <td>Raisa Andriana</td> <td>25 Tahun</td> </tr> </tbody> </table> </body> </html>

Dan berikut hasilnya :

4. Class 'table table-bordered table-striped'
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Cara Membuat table dengan Bootstrap | Layanan Program</h1>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>Makanan</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bakso</td>
<td>12.000</td>
</tr>
<tr>
<td>2</td>
<td>Mie Goreng</td>
<td>7.000</td>
</tr>
<tr>
<td>3</td>
<td>Nasi Goreng</td>
<td>15.000</td>
</tr>
<tr>
<td>4</td>
<td>Sate Padang</td>
<td>17.000</td>
</tr>
<tr>
<td>5</td>
<td>Nasi Soto</td>
<td>20.000</td>
</tr>
</tbody>
</table>
</body>

</html>

Dan berikut hasilnya:

Oke sekian jenis jenis class dalam bootstrap untuk membuat tabel dan sebenarnya masih banyak lagi namun yang sering digunakan adalah ini. oke sekian dan sukses untuk kita semua.

Wassalammu'alaikum Warahmatullahi Wabarakatuh

Kumpulan Program Lengkap dan Mudah Mengenai Website, Database dan Bootstrap

Mei 02, 2017 No comments

Assalammu'alaikum Warahmatullahi Wabarakatuh

Pada halaman ini, saya akan membuat list materi yang berkatian dengan website dan teman-teman nya. Sebelumnya saya sudah membuat list juga,namun kurang efektif dan berantakan.Nah semoga dengan perbaikan list mengenai bahasa pemograman website bisa membantu dan saling berbagi ilmu yaa. Oke

1. Program PHP Dan MySQL

Program Login Multiuser dan Registrasi

Program CRUD Dengan Mudah

Part 1 - Back End Website Oren

Part 2 - Back End Website Oren

Part 3 - Back End Website Oren

Part 4 - Back End Website Oren

Part 5 - Back End Website Oren

Part 6 - Back End Website Oren

Part 7 - Back End Website Oren

2. Program Lengkap Bootstrap

Membuat tabel dengan bootstrap

Membuat Form dengan menggunakan Bootstrap dengan mudah

3. Program Aplikasi dengan PHP
Membuat aplikasi kalkulator sederhana dengan PHP dan CSS sangat mudah

Program CRUD Dengan PHP dan MySQL Sangat Mudah

Mei 02, 2017 No comments

Assalammu'alaikum warahmatullahi wabarakatuh..
Pada artikel kali ini saya akan mengulang membuat sebuah program CRUD yang sudah pernah saya posting sebelumnya. Namun kali ini akan lebih simple..Oke kita langsung kerjakan.

Pertama: kita buat terlebih dahulu database pada phpmyadmin seperti berikut :

selain seperti gambar diatas,kalian bisa atur fieldnya sesuai yang kalian inginkan..

Kedua : Buka text editor anda, lalu yang pertama sekali kita buat adalah file koneksi.php seperti berikut
<?php
// isi nama host, username mysql, dan password mysql anda
$host = mysql_connect("localhost","root","");

// isikan dengan nama database yang akan di hubungkan
$db = mysql_select_db("ujian_crud");
?>
Fungsi dari script diatas sebagai koneksi saja antara database dengan script php.

Ketiga :kita akan buat script untuk halaman index.php .. halaman ini akan tampil pertama apabila kita menjalankan program ini.. berikut script dan tampilannya :
<html>
<head>
<title>Membuat CRUD Dengan PHP Dan MySQL - Menampilkan data dari database</title>
</head>
<body>

<div class="page-header">
<center> <h1>Membuat CRUD Dengan PHP Dan MySQL</h1>
</div>
<br/>

<?php
if(isset($_GET['pesan'])){
$pesan = $_GET['pesan'];
if($pesan == "input"){
echo "Data berhasil di input.";
}else if($pesan == "update"){
echo "Data berhasil di update.";
}else if($pesan == "hapus"){
echo "Data berhasil di hapus.";
}
}
?>
<br/>

<center><a href="tambah.php" class="btn btn-primary btn-small">Tambah</a>
<table border="1" class="table" align="center">
<th colspan="7" align="center">Data User</th>
<tr>
<th><center>No</th></center>
<th><center>NPM</center></th>
<th><center>Nama</center></th>
<th><center><center>Kelas</center></th>
<th><center>Jurusan</center></th>
<th><center>Usia</center></th>
<th><center>Opsi</center></th>
</tr>
<?php
include "koneksi.php";
$query_mysql = mysql_query("SELECT * FROM tbl_ujian_crud")or die(mysql_error());
$nomor = 1;
while($data = mysql_fetch_array($query_mysql)){
?>
<tr>
<td><center><?php echo $nomor++; ?></center></td>
<td><center><?php echo $data['npm']; ?></center></td>
<td><center><?php echo $data['nama']; ?></center></td>
<td><center><?php echo $data['kelas']; ?></center></td>
<td><center><?php echo $data['jurusan']; ?></center></td>
<td><center><?php echo $data['usia']; ?></center></td>
<td><center>
<a class="edit" href="edit.php?npm=<?php echo $data['npm']; ?>">Edit</a> |
<a class="hapus" onclick="javascript: return confirm('Anda yakin hapus ?')" href="hapus.php?npm=<?php echo $data['npm']; ?>">Hapus</a>
</center></td>
</tr>
<?php } ?>
</table>
</body>
</html>

Dan ini tampilannya :

AAAAABMc/n-PvvCIyKLgczjD9kM30r5QjLnu-6_hkwCLcB/s1600/2.JPG" />

Oke bagaimana sudah berhasil oia saya lupa.. silahkan anda isi datanya secara manual terlebih dahulu secara otomatis yaa.. Next

Keempat : nah pada tahap keempat ini kita akan buat proses create yaa atau tambah data.. Bagaimana caranya? begini adalah scriptnya, beri nama tambah.php
<html>
<head>
<title>Membuat CRUD Dengan PHP Dan MySQL - Menampilkan data dari database</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="judul">
<h1 align="center">Membuat CRUD Dengan PHP Dan MySQL</h1>
</div><p>

<a href="index.php"><center>Lihat Semua Data</a><p>

<table width="30%" height="100" border="1" align="center">
<form action="proses_tambah.php" method="post">
<tr>
<th colspan="2">Tambah Data</th>
</tr>
<tr>
<td>NPM</td>
<td><input type="text" name="npm" size="45"></td>
</tr>
<tr>
<td>Nama</td>
<td><input type="text" name="nama" size="45"></td>
</tr>
<tr>
<td>Kelas</td>
<td><input type="text" name="kelas" size="45"></td>
</tr>
<tr>
<td>Jurusan</td>
<td><input type="text" name="jurusan" size="45"></td>
</tr>
<tr>
<td>Usia</td>
<td><input type="text" name="usia" size="45"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Simpan"></td>
</tr>
</table>
</form>
</body>

</html>

dan beginilah tampilannya apabila kalian klik button tambah :

Bagaimana berhasil??? apabila ada yang bingung masalah codingan bisa ditanyakan yaa.. Oke next..

Kelima : Setelah kita berhasil membuat tampilan sederhana untuk tambah data, nah pastinya kita akan membuat script proses tambahnya kan. Oke buat file dengan nama proses_tambah.php dan berikut script beserta hasilnya :
<?php
include 'koneksi.php';
$npm = $_POST['npm'];
$nama = $_POST['nama'];
$kelas = $_POST['kelas'];
$jurusan = $_POST['jurusan'];
$usia = $_POST['usia'];

mysql_query("INSERT INTO tbl_ujian_crud VALUES('$npm','$nama','$kelas','$jurusan','$usia')");

header("location:index.php?pesan=input");
?>

Oke kita coba yaa proses tambah datanya :

Oke bagaimana sampai sini berhasil?? kalau yang belum silahkan tanya yaa.Kalau sudah kita lanjut yaaa

Kelima : okee selanjutnya kita buat proses edit atau update yaa.. buat file dengan nama edit.php dan berikut script dan tampilannya :
<html>
<head>
<title>Membuat CRUD Dengan PHP Dan MySQL - Menampilkan data dari database</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="judul">
<h1 align="center">Membuat CRUD Dengan PHP Dan MySQL</h1>
</div>
<center><a href="index.php">Lihat Semua Data</a>

<?php
include "koneksi.php";
$id = $_GET['npm'];
$query_mysql = mysql_query("SELECT * FROM tbl_ujian_crud WHERE npm='$npm'")or die(mysql_error());
$nomor = 1;
while($data = mysql_fetch_array($query_mysql)){
?>
<form action="update.php" method="post">
<table border="1" align="center" width="200">
<tr>
<th colspan="2">Edit Data</th>
</tr> <tr>
<td>NPM</td>
<td>
<input type="text" name="npm" value="<?php echo $data['npm'] ?>">
</td>
</tr>
<tr>
<td>Nama</td>
<td>
<input type="text" name="nama" value="<?php echo $data['nama'] ?>">
</td>
</tr>
<tr>
<td>Kelas</td>
<td><input type="text" name="kelas" value="<?php echo $data['kelas'] ?>"></td>
</tr>
<tr>
<td>Jurusan</td>
<td><input type="text" name="jurusan" value="<?php echo $data['jurusan'] ?>"></td>
</tr>
<tr>
<td>Usia</td>
<td><input type="text" name="usia" value="<?php echo $data['usia'] ?>"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Simpan"></td>
</tr>
</table>
</form>
<?php } ?>
</body>
</html>

dan dibawah ini merupakan hasil tampilannya :

Oke silahkan anda ubah namanya sebagai contoh saya ubah namanya menjadi Komeng yaa dan hasilnya seperti berikut oia saya lupa.. untuk proses updae ini,kita harus buat script proses update yaa.. kita beri nama proses_update.php dan berikut scriptnya :
<?php
include 'koneksi.php';
$npm = $_POST['npm'];
$nama = $_POST['nama'];
$kelas = $_POST['kelas'];
$jurusan = $_POST['jurusan'];
$usia = $_POST['usia'];

mysql_query("UPDATE tbl_ujian_crud SET nama='$nama', kelas='$kelas', jurusan='$jurusan', usia='$usia' WHERE npm='$npm'");

header("location:index.php?pesan=update");
?>

Bagaimana berhasil kan??

yo kita lanjut yaaaaa.. semangat belajar yaa

Keenam : Nah ini bagian akhir yaitu hapus.. buat file dengan nama hapus.php dan berikut scriptnya:
<?php
include 'koneksi.php';
$id = $_GET['npm'];
mysql_query("DELETE FROM tbl_ujian_crud WHERE npm='$npm'")or die(mysql_error());

header("location:index.php?pesan=hapus");
?>

dan apabila berhasil akan seperti berikut :

Oke selesai.. bagaimana mudahkan?contoh diatas adalah yang paling dasar sekali.silahkan teman-teman kembangkan yaa.sukses selalu buat kita semua..

Wassalammu'alaikum warahmatullahi wabarakatuh

Program Login dan Registrasi Dengan PHP Sangat Mudah

April 30, 2017 No comments

Assalammu'alaikum warahmatullahi wabarakatuh
Selamat Pagi teman-teman..

Nah saat ini saya akan coba membuat program login dan registrasi sederhana dengan menggunakan PHP dan database MySQL.. Waktu itu saya pernah membuat hal yang sama, namun saat ini saya akan memperbaharui blog saya dan membuat program yang lebih mudah lagi.. Silahkan....

Pertama Silahkan anda Buat Database
Sebagai contoh saya membuat database dengan nama ujian_login dan tabel dengan nama tbl_ujian_login. Seperti berikut

Selanjutnya buat script koneksi dengan nama koneksi.php
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'ujian_login';
$konek = mysql_connect($dbhost, $dbuser, $dbpass) or die ('koneksi gagal');
mysql_select_db($dbname);

?>

Setelah itu kita buat file bernama login.php
<?php
session_start();
if( isset($_SESSION['username']) ) {
header('location:index.php');
}
require_once('koneksi.php');
?>
<html>
<head>
<title>Login Member</title>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<table align="center" border="1" cellpadding="10" cellspacing="5">
<form action="proseslogin.php" method="post">
<tr>
<th colspan="2">Member Login</th>
</tr>
<tr>
<td>User ID </td>
<td><input name="username" type="text"/></td>
</tr>
<tr>
<td>Password</td>
<td><input name="password" type="password"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Submit" value="Login" /></td>
</tr>
<tr>
<td colspan="2" align="center">Belum Jadi Anggota? <a href="register.php">Daftar</a></td>
</tr>
</form>
</table>
</body>

</html>
*Script diatas untuk halaman login seperti berikut :

Nah lanjut ke tahap membuat script proseslogin.php
<?php
session_start();
require_once ('koneksi.php');
$user = $_POST['username'];
$pass = $_POST['password'];
$cekuser = mysql_query("SELECT * FROM tbl_ujian_login WHERE username = '$user'");
$jumlah = mysql_num_rows($cekuser);
$hasil = mysql_fetch_array($cekuser);
if ( $jumlah == 0 ) {
echo 'User ID Belum Terdaftar!<br/>';
echo '<a href="login.php">« Back</a>';
} else {
if ( $pass <> $hasil['password'] ) {
echo 'Password Salah!<br/>';
echo '<a href="login.php">« Back</a>';
} else {
$_SESSION['username'] = $user;
header('location:index.php');
}
}

?>

Selanjutnya kita akan membuat script untuk halaman registrasi seperti berikut dengan nama register.php
<?php
session_start();
if(isset($_SESSION['username'])) {
header('location:index.php'); }
?>
<html>
<head>
<title>Pendaftaran Member</title>
</head>
<body>
<table border="1" cellpadding="8" cellspacing="0">
<form action="prosesregister.php" method="post">
<tr>
<th colspan="2" align="center">Pendaftaran Anggota</th>
</tr>
<tr>
<td>Nama Lengkap </td>
<td><input name="nama" type="text" size="40" /></td>
</tr>
<tr>
<td>NPM</td>
<td><input name="npm" type="text" size="40" /></td>
</tr>
<tr>
<td>Username </td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input name="Submit" type="submit" value="Daftar"/></td>
</tr>
<tr>
<td colspan="2" align="center"><font color="#0000FF">Sudah Jadi Anggota? <a href="login.php">Login</a></font></td>
</tr>
</form>
</table>
</body>

</html>

Dan berikut hasilnya :

Nah setelah itu kita buat proses registrasinya dengan nama prosesregister.php seperti berikut :
<?php
require_once ('koneksi.php');
$nama = $_POST['nama'];
$npm = $_POST['npm'];
$user = $_POST['username'];
$pass = $_POST['password'];
$cekuser = mysql_query("SELECT * FROM tbl_ujian_login WHERE username = '$user'");
if ( mysql_num_rows($cekuser) <> 0 ) {
echo 'User ID Sudah Terdaftar!<br/>';
echo '<a href="register.php">« Back</a>';
} else {
if ( !$nama || !$npm || !$user || !$pass ) {
echo 'Masih ada data yang kosong!<br/>';
echo '<a href="register.php">« Back</a>';
} else {
$simpan = mysql_query("INSERT INTO tbl_ujian_login VALUES('$nama','$npm','$user','$pass')");
if ($simpan) {
echo 'Pendaftaran Berhasil, Silahkan <a href="login.php">Login</a>';
} else {
echo 'Proses Gagal!';
}
}
}
?>

Oke selanjutnya kita buat script terakhir yaitu logout dengan nama logout.php seperti berikut :
<?php
session_start();
unset( $_SESSION['username'] );
?>
<h2>Anda telah berhasil logout..</h2>
Silahkan klik <a href="login.php"><b>disini</b></a> untuk login kembali

OKE finish.. silahkan anda registrasi lalu login dan finish apabila berhasil akan seperti berikut :

Bagaimana sampai sini sudah berhasil? kalau belum atau ada error silahkan tanyakan yaa.. Dan kalau sudah disini saya akan menjelaskan maksud dari script-script yang saya buat..

Pertama script koneksi.php
nah script ini berfungsi untuk menghubungkan database dengan script php.. Nah script koneksi seperti ini
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'ujian_login';
$konek = mysql_connect($dbhost, $dbuser, $dbpass) or die ('koneksi gagal');
mysql_select_db($dbname);
?>

Nah disitu jelaskan untuk host namenya localhost, usernya menggunakan root, untuk password dikosongkan saja. Itu merupakan aturan wajib dalam script koneksi,, Dan ditambah lagi dengan dbname yaitu nama database yang digunakan yakni dengan nama ujian_login.

Kedua script login.php
script ini kan digunakan untuk menampilkan halaman login.. Oke saya mau atur halaman ini akan muncul pertama pada saat website dibuka,, Kan seharusnya yang muncul pertama adalah file dengan nama index.php tapi saya mau yang muncul login.php maka harus ada script berikut :
<?php
session_start();
if( isset($_SESSION['username']) ) {
header('location:index.php');
}
require_once('koneksi.php');
?>
nah dari script diatas digunakan untuk mengatur halaman awal yang muncul pertama kali..

Oke lanjut ke potongan script berikut
<table align="center" border="1" cellpadding="10" cellspacing="5">
<form action="proseslogin.php" method="post">
<tr>
<th colspan="2">Member Login</th>
</tr>
<tr>
<td>User ID </td>
<td><input name="username" type="text"/></td>
</tr>
<tr>
<td>Password</td>
<td><input name="password" type="password"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Submit" value="Login" /></td>
</tr>
<tr>
<td colspan="2" align="center">Belum Jadi Anggota? <a href="register.php">Daftar</a></td>
</tr>
</form>
</table>
nahhhh potongan script diatas digunakan untuk mendesain tabel yang digunakan untuk form login dan form login tersebut memiliki aksi atau action untuk melakukan prosesnya yang diberi nama proseslogin.php.. Bagaimana mengerti? hehe kalian pasti sudah pintar dan pasti mengerti yaaaa

Jumat, 05 Mei 2017

Selasa, 02 Mei 2017

Minggu, 30 April 2017

Social Profiles

Full width home advertisement

Author Details

BTemplates.com

BTemplates.com

Post Page Advertisement [Top]

Recent Posts

Cari Blog Ini

Recent Posts

Recent in Sports

Comments

Recent

Bottom Ad [Post Page]

Culture

Column Left

Main Navigation Menu

Top Navigation Menu

Text Widget

Text Widget

About Me

Formulir Kontak

Unordered List

Theme Support

Facebook

STAY WITH US

Main Navigation Menu

Random Posts

Pages - Menu

Pages

Social Media Icons

Blog Archive

Blog Archive

Blogger templates

Blogger news

Blogroll

About