Kamis, 01 Desember 2016

Senin, 28 November 2016

PHP (Hypertext Preprocessor)

        Pengertian PHP
PHP singkatan dari Hypertext Preprocessor yang merupakan server-side programing, yaitu bahasa pemrograman yang diproses di sisi server. Fungsi utama PHP dalam membangun website adalah untuk melakukan pengolahan data pada database. Database akan dimasukkan ke database, didedit, dihapus, dan ditampilkan pada website yang diatur oleh PHP. Abdulloh (2015:3)

“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.” (Andre, 15 Desember 2014. http://www.duniailkom.com/pengertian-dan-fungsi-php-dalam-pemograman-web/)

Silahkan download materinya di SINI

Kamis, 24 November 2016

Tugas Pemrograman Web 2 : Join Table




Silahkan download soalnya :


Senin, 21 November 2016

Web Hosting

WEB HOSTING


Pengertian Web Hosting

Web Hosting adalah sebuah layanan internet yang akan yang berfungsi untuk menyewakan tempat untuk menyimpan berbagai macam data atau dokumen yang dibutuhkan oleh sebuah web. Data-data yang dimaksudkan disini seperti gambar, email, aplikasi, database, dll”.[1]




[1] http://www.webhostingterbaik.org/2015/09/pengertian-dan-kegunaan-web-hosting.html

Silahkan download materinya disini 


Pertemuan 8 Web 2 : Join Table

Pengertian

Join tabel merupakan proses penggabungan (relationship) antara satu table atau lebih sehingga terbentuk satu set data baru.

Silahkan download materinya :


Senin, 14 November 2016

Soal Mailmerge

Berikut ini adalah soal latihan pembuatan KHS menggunakan mailmerge. Silahkan download materinya.


Pertemuan 7 Web 1

Pada pertemuan ini akan di bahas contoh-contoh latihan dengan menggunakan bootstrap.
silahkan download filenya.


Rabu, 09 November 2016

Membuat Artikel dengan Panel Bootstrap, PHP dan MySQL

Pada pertemuan kali ini akan dibahas cara pembuatan artikel dengan memanfaatkan Panel Bootstrap
Download materinya di bawah ini :


Senin, 07 November 2016

Layout dengan Panel Bootstrap

Pada pertemuan kali ini akan dibahas cara membuat layout web page dengan menggunakan Panel Bootstrap. Silahkan download materinya pada tombol download di bawah ini.


Rabu, 19 Oktober 2016

QUIS Pemrograman Visual Basic

Silahkan Download Soalnya :


Senin, 17 Oktober 2016

Senin, 10 Oktober 2016

Soal Membuat Daftar Isi

Berikut ini adalah contoh soal untuk membuat daftar isi

silahkan download soalnya

Latihan Soal Microsoft Word

Berikut ini adalah contoh latihan Ms. Word menggunakan Equation
Silahkan download materinya


Selasa, 04 Oktober 2016

Modul Pemrograman Web 1 Bootstrap


PENGERTIAN

Bootstrap merupakan sebuah framework CSS dari Twitter, yang menyediakan kumpulan komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk digunakan bersama-sama. Bootstrap merupakan salah satu framework  HTML, CSS dan javascript yang paling populer di kalangan web developer. Bootstrap telah menyediakan kumpulan komponen class interface dasar yang telah di rancang sedemikian rupa untuk menciptakan tampilan yang menarik, bersih dan ringan.  Selain komponen class interface, bootstrap juga memiliki fitur grid yang berfungsi untuk mengatur layout pada halaman website yang bisa digunakan dengan sangat mudah dan cepat. Bootstrap adalah sebuah framework CSS yang menyediakan kumpulan script atau library CSS yang dibuat untuk membangun sebuah halaman web. 

Download Materinya :


Senin, 03 Oktober 2016

Membuat Koneksi Ke Databse dengan Visual Basic

Silahkan download materinya :

Tugas Membuat Kolom

Berikut ini tugas membuat kolom dengan ketentuan :

  1. Menggunakan kertas A4
  2. Margin top : 2, bottom : 2, left : 2, right : 2
  3. Spasi : 1
Silahkan download materinya :

Rabu, 28 September 2016

MySQL Connector



PENGERTIAN :
Fungsi dari MySQL Connector adalah sebagai sarana komunikasi antara aplikasi Microsoft Visual Basic .Net (ataupun program jadinya yang kita buat dengan VB .NET) dengan database MySQL sehingga data yang kita input dari program Microsoft Visual Basic dapat tersimpan di database MySQL begitupun sebaliknya ketika kita ingin mengambil data dari database dan menampilkannya maka data tersebut bisa kita ambil melalui MySQL Connector.

Berikut ini adalah cara download MySQL Connector

1. Buka link berikut ini  http://dev.mysql.com/downloads/connector/net/
2. Klik tombol download


3. Klik tulisan "No Thanks, just start my download"


Membuat Aplikasi CRUD menggunakan Foto


Pada pertemuan ini akan dibahas tentang cara membuat aplikasi sederhana CRUD (Creat, Read, Update and Delete) studi kasus pendaftaran mahasiswa baru dengan menggunakan foto.

Silahkan download materi dan databasenya




Tutorial Visual Basic 2010


Pada pertemuan kali ini akan dibahas tentang Visual Basic 2010 materi bahasan adalah : Pengenalan Interfase VB 2010.

Silahkan DOWNLOAD MATERI DISINI

Tutorial Visual Basic 2010


Pada pertemuan kali ini akan dibahas tentang Visual Basic 2010 materi bahasan adalah : Pengenalan Interfase VB 2010.

Silahkan DOWNLOAD MATERI DISINI

Senin, 26 September 2016

Modul 3 HTML

PENGERTIAN HTML

Menurut Ardhana (2013:27) “HyperText Markup Language (HTML) adalah sebuah bahasa untuk menampilkan konten di web. HTML sendiri adalah bahasa pemrograman yang bebas yang artinya tidak dimiliki oleh siap pun, pengembangannya dilakukan oleh banyak orang di banyak negara dan bisa dikatakan sebagai sebuah bahasa yang dikembangkan bersama-sama secara global.”

Materi selengkapnya dapat di DOWNLOAD DISINI


Kamis, 22 September 2016

Rabu, 21 September 2016

Merubah Format Tanggal ke Bentuk Indonesia

PENDAHULUAN

Berikut ini akan di bahas cara merubah format tanggal menjadi format Indonesia. Biasanya ketika menginput data tanggal ke dalam halaman web format yang digunakan adalah format english yaitu Tahun-Bulan-Tanggal (yyyy-mm-dd). 

Pertama ketik script di bawah ini, kemudian simpan dengan nama fungsi_tanggal.php

<?php
function tgl_indonesia($tgl){
$tanggal = substr($tgl, 8, 2);
$nama_bulan = array("Januari","February", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "Nopember", "Desember");
$bulan = $nama_bulan[substr ($tgl, 5, 2)-1];
$tahun = substr($tgl,0,4);
return $tanggal.' '.$bulan.' '.$tahun;
}
?>

Langkah berikutnya adalah memasukan link tersebut ke halaman HTML

contoh :
<?php
include 'koneksi.php';
include 'fungsi_tgl.php';
$no=0;
$query=mysql_query("select * from tbl_mhs");
while($data=mysql_fetch_array($query)){
$tanggal = tgl_indonesia($data['tgl']);
    $no++;
echo"$tanggal";
?>

Keterangan :
Filed ['tgl'] disesuaikan dengan database yang Anda buat

Merubah Tanggal Ke Format Indonesia

PENDAHULUAN

Berikut ini akan di bahas cara merubah format tanggal menjadi format Indonesia. Biasanya ketika menginput data tanggal ke dalam halaman web format yang digunakan adalah format english yaitu Tahun-Bulan-Tanggal (yyyy-mm-dd). 

Pertama ketik script di bawah ini, kemudian simpan dengan nama fungsi_tanggal.php

<?php
function tgl_indonesia($tgl){
$tanggal = substr($tgl, 8, 2);
$nama_bulan = array("Januari","February", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "Nopember", "Desember");
$bulan = $nama_bulan[substr ($tgl, 5, 2)-1];
$tahun = substr($tgl,0,4);
return $tanggal.' '.$bulan.' '.$tahun;
}
?>

Langkah berikutnya adalah memasukan link tersebut ke halaman HTML

contoh :
<?php
include 'koneksi.php';
include 'fungsi_tgl.php';
$no=0;
$query=mysql_query("select * from tbl_mhs");
while($data=mysql_fetch_array($query)){
$tanggal = tgl_indonesia($data['tgl']);
    $no++;
echo"

CSS3

PENGERTIAN

“Cascading Style Sheet salah fasilitas yang diberikan untuk pemrograman HTML sehingga pengaturan atau desain tampilan web menjadi lebih baik.” Rahardja (2009:37)[1]



[1] Rahardja, dkk. 2009. Siapa Saja Bisa Membuat Website dengan CSS dan HTML. Yogyakarta. Penerbit ANDI.


Materi selengkapnya dapat di Download DISNI

Pengenalan Form dengan HTML

PENGERTIAN

Istilah form identik dengan formulir karena formulir digunakan untuk menuliskan data-data yang digunakan untuk mendapatkan informasi dari orang yang menuliskannya. Form merupakan salah satu elemen HTML yang digunakan untuk menerima input baik berupa huruf, angka maupun simbol kedalam halaman web dari pengunjung dengan tujuan agar pengujung web dapat berinteraksi. Form membuat halaman web menjadi dinamis dan interaktif karena dengan adanya form pengembang web mendapatkan informasi dari pengguna web. Tidak semua browser support dengan HTML5 seperti, mozilla firefox. Untuk itu penulis menyarankan menggunakan opera atau crome.

Materi selengkapnya dapat di Download DISINI

Pengenalan Database MySQL

PENGERTIAN DATABSE

Menurut Priyadi, (2014:2) [1]mengatakan bahwa basis data adalah sekumpulan fakta berupa representasi tabel yang saling berhubungan dan disimpan dalam media penyimpanan secara digital”.




[1] Priyadi, MT. 2014. Kolaborasi SQL dan ERD dalam Implementasi Database.Yogyakarta. Penerbit ANDI.

Materi Selengkapnya dapat di Download DISINI

Pengenalan Database MySQL

PENGERTIAN DATABSE

Menurut Priyadi, (2014:2) [1]mengatakan bahwa basis data adalah sekumpulan fakta berupa representasi tabel yang saling berhubungan dan disimpan dalam media penyimpanan secara digital”.




[1] Priyadi, MT. 2014. Kolaborasi SQL dan ERD dalam Implementasi Database.Yogyakarta. Penerbit ANDI.

Materi Selengkapnya dapat di Download DISINI

Pengenalan Database MySQL

PENGERTIAN DATABSE

Menurut Priyadi, (2014:2) [1]mengatakan bahwa basis data adalah sekumpulan fakta berupa representasi tabel yang saling berhubungan dan disimpan dalam media penyimpanan secara digital”.




[1] Priyadi, MT. 2014. Kolaborasi SQL dan ERD dalam Implementasi Database.Yogyakarta. Penerbit ANDI.

Materi Selengkapnya dapat di Download DISINI

Bootstrap


PENGERTIAN

Twitter Bootstrap saat ini sedang menjadi bahan pembicaraan di dunia web karena  digunakan untuk membuat desain web oleh para pengembang web.


Menurut Abdulloh (2015:139)[1]Bootstrap merupakan salah satu framework CSS yang sangat populer dikalangan pecinta pemrograman website. Dengan bootstrap, proses desain website tidak dibuat dari nol, sehingga proses desain website lebih cepat dan mudah”.



[1] Abdulloh, Rohi. 2015. Web Programming is Easy Panduan Membangun Web Responsive dengan PHP, jQuery, dan Bootstrap. Jakarta. PT Gramedia.


CARA MENDAPATKAN BOOTSTRAP

Bootstrap dapat diundur pada situs resminya, yaitu http://getbootstrap.com/getting-started/.  

KEUNTUNGAN MENGGUNAKAN BOOTSTRAP

Berikut ini akan di jelaskan beberapa kegunaan yang telah menjadi kelebihan pada bootstrap. Adapun beberapa kelebihan bootstrap adalah sebagai berikut.

  1. Penggunaan bootstrap sangat menghemat waktu.
  2. Tampilan bootstrap yang sudah cukup terlihat modern.
  3. Mobile Friendly yang maksudnya tampilan bootstrap sudah sangat responsive, yaitu tampilan bootstrap sudah mendukung segala jenis resolusi, baik itu pc, laptop, tablet dan smartphone.
  4. Sangat ringan karena bootstrap di buat dengan sangat terstruktur.
  5. Dan masih banyak lagi kelebihan dan kegunaan dari bootstrap yang akan anda temukan sendiri setelah mencoba membangun sebuah aplikasi berbasis web dengan menggunakan bantuan framework css bootstrap

CARA MENGGUNAKAN BOOTSTRAP SECARA OFFLINE
Berikut ini adalah metode yang digunakan untuk menyambungkan HTML ke Bootstrap, sebetulnya terdapat dua cara untuk menghubungkan HTML dengan Bootstrap, yaitu metode online dan metode offline, pada kesempatan ini penulis lebih memilih metode yang kedua yaitu metode offline. Berikut markup untuk menghubungkan dengan bootstrap secara offline.

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<!-- Javascript Bootstrap -->
<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<title>Latihan CRUD</title>
</head>
<body>
ISI HALAMAN WEB
</body>
</html>


Keterangan :
- Tulisan yang berwarna merah merupakan link dari bootstrap.
- Terdapat dua bagian, yaitu link untuk css dan link untuk javascript


Struktur HTML 5

Berikut ini adalah markup / struktur untuk penulisan menggunakan HTML5

<!DOCTYPE html>
<html lang="en_US">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title> Judul Web </title>
</head>

<body>
ISI WEB
</body>
</html>

Keterangan:
Tulisan yang diberi warna merah dapat diganti

Struktur HTML 5

Berikut ini adalah markup / struktur untuk penulisan menggunakan HTML5

<!DOCTYPE html>
<html lang="en_US">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title> Judul Web </title>
</head>

<body>
ISI WEB
</body>
</html>

Keterangan:
Tulisan yang diberi warna merah dapat diganti

Selasa, 13 September 2016

Modul Sketchup

Materi Praktek Skethcup, DOWNLOAD

Rabu, 31 Agustus 2016

Materi Pertemuan 8

MODUL MATA KULIAH PEMROGRAMAN WEB
PERTEMUAN 8


Materi Pembahasan :

MEMBUAT APLIKASI SEDERHANA
CRUD (Creat, Read, Update, dan Delete) Studi Kasus Pendaftaran Mahasiswa Baru

Silahkan Download Materinya dibawah ini :

Silahkan Download Tabel Mahasiswa (tbl_mhs.sql)




Selasa, 30 Agustus 2016

Materi Ujian

Berikut ini materi Ujian:
Buatlah sebuah gambar bergerak dengan bentuk-bentuk yang sudah disiapkan, gabungkan semaunya kedalam timeline. Ikuti petunjuk pada modul, kirim tugas via email.

DOWNLOAD SOAL

Selasa, 09 Agustus 2016

Aplikasi Sederhana : Crued Data Mahasiswa

Pada kesempatan kali ini kita akan belajar membuat aplikasi sederhana untuk memasukan data mahasiswa ke dalam database, meng-edit, menghapus dan menampilkannya dengan menggunakan php. Untuk desain kita akan menggunakan bantuan bootstrap dan CSS.

Baiklah pertama-tama buatlah databse dan tabelnya, seperti berikut :

1. Buatlah Database dengan nama : kampus
2. Buatlah tabel dengan nama : tbl_mhs

berikut contoh dari tabelnya yang sudah jadi :














Berikutnya folder di C://xampp/hatdocs/kampus

1. Ketik file di bawah ini kemudian simpan dengan nama input.php


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style/tabel2.css">
<link rel="stylesheet" type="text/css" href="style/aplikasi.css">
<link rel=”SHORTCUT ICON” href=”http://www.yourwebsite.com/favicon.ico” />
<!-- Image Responsive -->
<style>img {max-width:100%;} </style>
<title>Blog Kang Arya</title>
</head>

<body>
<div class="container">
<center><h1><b>APLIKASI SEDERHANA</b></h1></center>
<h3><b>Input Data Mahasiswa</b></h3>
<ul class="breadcrumb">
<li><a href="input.php">Input</a></li>
<li><a href="tampil.php">Tampil</a></li>
<li><a href="cari.php">Cari Data</a></li>
</ul>
<div id='kotak'>
<!-- Form Input -->
<form name='input' method='POST' action='simpan.php'>
<div class='form-group'>
<label for='npm'>NIM Mahasiswa </label>
<input type='number' name='npm' placeholder='NIM Anda' class='form-control'>
</div>
<div class="form-group">
<label for='nama'>Nama Mahasiswa </label>
<input type='text' name='nama' placeholder='Nama Anda' class='form-control'>
</div>
<div class="form-group">
<label for='tgl'>Nama Mahasiswa </label>
<input type='date' name='tgl' placeholder='Tanggal Lahir' class='form-control'>
</div>
<div class="form-group">
<label for='jrs'>Pilihan Jurusan</label>
<select name='jrs' class='form-control'>
<option value=''>-- Pilih Jurusan --</option>
<option value='TI'>Teknik Informatika</option>
<option value='MI'>Manajemen Informatika</option>
<option value='KA'>Komputer Akuntansi</option>
</select>
</div>
<div class="form-group">
<label for='almt'>Alamat </label>
<textarea name='almt' placeholder='Alamat' class='form-control' cols=5 rows=10></textarea>
</div>
<div class="form-group">
<input type='submit' name='save' value='Simpan' class='btn btn-primary btn-sm'>
<input type='reset' name='batal' value='Hapus' class='btn btn-info btn-sm'>
</div>
</div>
</form>

</div>
</div>
<!-- Javascript -->
<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<?php include 'footer.php';?>
</body>
</html>


2. Ketik script di bawah ini kemudian simpan dengan nama : simpan.php

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<?php
include 'koneksi.php';
$npm = $_POST[npm];
$nama = strip_tags($_POST[nama]);
$tgl = $_POST[tgl];
$jrs = $_POST[jrs];
$almt = $_POST[almt];

$cekdata = "SELECT npm FROM tbl_mhs WHERE npm = '$npm'";
$ada = mysql_query($cekdata) or die (mysql_error);
if(mysql_num_rows($ada)>0){
echo "<script language='javascript'> alert ('Sorry, NPM ini sudah ada');
window.location = 'input.php'</script>";
 
}elseif(empty($npm)){
echo "<script language='javascript'> alert ('Sorry, nim belum diisi');
window.location = 'input.php'</script>";

}elseif(empty($nama)){
echo "<script language='javascript'> alert ('Sorry, Nama belum diisi');
window.location = 'input.php'</script>";

}elseif(empty($tgl)){
echo "<script language='javascript'> alert ('Sorry, Tanggal belum diisi');
window.location = 'input.php'</script>";

}elseif(empty($jrs)){
echo "<script language='javascript'> alert ('Sorry, Jurusan belum diisi');
window.location = 'input.php'</script>";

}elseif(empty($almt)){
echo "<script language='javascript'> alert ('Sorry, Alamat belum diisi');
window.location = 'input.php'</script>";

$query = "insert into tbl_mhs(npm, nama, tgl, jrs, almt)
values ('".$npm."', '".$nama."','".$tgl."', '".$jrs."','".$almt."')";
}
echo "<script language='javascript'> alert
('input data sukses'); window.location='tampil.php'</script> ";
mysql_query($query);
?>

3. Ketik script di bawah ini kemudian simpan dengan nama : tampil.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style/aplikasi.css">
<link rel="stylesheet" type="text/css" href="style/tabel2.css">
<link rel=”SHORTCUT ICON” href=”http://www.yourwebsite.com/favicon.ico” />
<!-- Image Responsive -->
<style>img {max-width:100%;} </style>
<title>Blog Kang Arya</title>
<script>
function hapus(pesan){
var pesan;
pesan = 'Apakah Anda ingin menghapus data ini? Jika yakin tekan OK, jika tidak tekan Cancel';

if(confirm(pesan)){
return true;
}
else{
return false;
}
}
</script>
</head>

<body>
<div class='container'>
<center><h1><b>APLIKASI SEDERHANA</b></h1></center>
<h3><b>Tampil Data Mahasiswa</b></h3>
<ul class="breadcrumb">
<li><a href="input.php">Input</a></li>
<li><a href="tampil.php">Tampil</a></li>
<li><a href="cari.php">Cari Data</a></li>
</ul>
<div id='kotak'>

<!-- Pagging -->
<?php
include 'koneksi.php';
$per_hal=5;
$jumlah_record=mysql_query("SELECT COUNT(*) from tbl_mhs");
$jum=mysql_result($jumlah_record, 0);
$halaman= ceil($jum / $per_hal);
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
$mulai = ($page - 1) * $per_hal;
?>
<!-- END PAGGING -->

<table class='layout display responsive-table'>
<thead>
<tr>
<th>NPM</th>
<th>Nama Mahasiswa</th>
<th>Tanggal Lahir</th>
<th>Jurusan</th>
<th>Alamat</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
include 'koneksi.php';
$no=0;
$query=mysql_query("select * from tbl_mhs limit $mulai, $per_hal");
while($data=mysql_fetch_array($query)){
    $no++;
echo"
<tr>
<td class='organisationnumber'> $data[npm] </td>
<td class='organisationname'> $data[nama] </td>
<td class='organisationname'> $data[tgl] </td>
<td class='organisationname'> $data[jrs] </td>
<td class='organisationname'> $data[almt] </td>
<td class='organisationname'>
<a href='delete.php?npm=$data[npm]'
class='btn btn-primary btn-xs' onClick='return hapus()'
title='tombol untuk menghapus data'>
<span class='glyphicon glyphicon-remove'></span>
Delete</a>
<a href='edit.php?npm=$data[npm]'
class='btn btn-success btn-xs' title='edit data mahasiswa'>
<span class='glyphicon glyphicon-pensil'></span>
Edit</a>
</td>
</tr> </tbody>";
?>
<?php
}
echo "</table>";
?>
<!-- MENAMPILKAN NOMER HALAMAN -->
<center>Halaman :
<a href="?page=<?php echo $page -1 ?>"></a>
<?php
for($x=1;$x<=$halaman;$x++){
?>

<a href="?page=<?php echo $x ?>"><?php echo $x ?></a>
<?php
}
?>

<?php
echo "Jumlah data : ".$jum."<br>";
echo "Jumlah halaman : ".$halaman."<br/>";
?>
</center>
<!-- END NOMOR HALAMAN -->
</div>
</div>
<!-- Javascript -->
<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<?php include 'footer.php';?>
</body>
</html>

4. Ketik script di bawah ini kemudian simpan dengan nama : edit.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style/tabel2.css">
<link rel="stylesheet" type="text/css" href="style/aplikasi.css">
<link rel=”SHORTCUT ICON” href=”http://www.yourwebsite.com/favicon.ico” />
<!-- Image Responsive -->
<style>img {max-width:100%;} </style>
<title>Blog Kang Arya</title>
</head>

<body>
<div class="container">
<center><h1><b>APLIKASI SEDERHANA</b></h1></center>
<h3><b>Edit Data Mahasiswa</b></h3>
<ul class="breadcrumb">
<li><a href="input.php">Input</a></li>
<li><a href="tampil.php">Tampil</a></li>
<li><a href="cari.php">Cari Data</a></li>
</ul>
<div id='kotak'>
<?php
include 'koneksi.php';
$data = mysql_fetch_array(mysql_query("SELECT * FROM tbl_mhs WHERE npm = '$_GET[npm]'"));
?>
<?php
echo"
 <h2>Edit Data Mahasiswa</h2>
 <form name='input' method='POST' action='update.php'>
<div class='form-group'>
<input type='hidden' name='npm' class='form-control' value='$data[npm]'>
</div>

<div class='form-group'>
<label>Nama Mahasiswa : </label>
<input type='text' name='nama' class='form-control' value='$data[nama]'>
</div>

<div class='form-group'>
<label>Tanggal Lahir</label>
<input type='date' name='tgl' class='form-control' value='$data[tgl]'>
</div>

<div class='form-group'>
<label> Jurusan </label>
<select name='jrs' class='form-control'>
<option value='$data[jrs]'> $data[jrs]</option>
<option value='TI'>Teknik Informatika</option>
<option value='KA'>Komputer Akuntansi</option>
<option value='MI'>Manajemen Informatika</option>
</select>
</div>

<div class='form-group'>
<label> Alamat : </label>
<textarea name='almt' class='form-control' cols='5' rows='10'>$data[almt]</textarea>
</div>
<input type='submit' value='Update' class='btn btn-danger btn-md'>
<a href='tampil.php'><button class='btn btn-primary'>Batal</button></a>
</form>";
?>
</div>
</div>
<!-- Javascript -->
<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<?php include 'footer.php';?>
</body>
</html>


5. Ketik script di bawah ini kemudian simpan dengan nama : update.php

<?php
include 'koneksi.php';
$update = mysql_query("update tbl_mhs set
nama = '$_POST[nama]',
tgl = '$_POST[tgl]',
jrs = '$_POST[jrs]',
almt = '$_POST[almt]'
WHERE npm = '$_POST[npm]'")or die ("gagal update ");
echo "<script>alert ('data telah di update '); document.location='tampil.php' </script> ";
?>


6. Ketik script di bawah ini kemudian simpan dengan nama : delete.php

<?php
include 'koneksi.php';
mysql_query("DELETE from tbl_mhs WHERE npm='$_GET[npm]'");
include 'tampil.php';
?>


7. Ketik script di bawah ini kemudian simpan dengan nama : cari.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style/tabel2.css">
<link rel="stylesheet" type="text/css" href="style/aplikasi.css">
<link rel=”SHORTCUT ICON” href=”http://www.yourwebsite.com/favicon.ico” />
<!-- Image Responsive -->
<style>img {max-width:100%;} </style>
<title>Blog Kang Arya</title>
<script>
function hapus(pesan){
var pesan;
pesan = 'Apakah Anda ingin menghapus data ini? Jika yakin tekan OK, jika tidak tekan Cancel';
if(confirm(pesan)){
return true;
}
else{
return false;
}
}
</script>
</head>

<body>
<div class='container'>
<center><h1><b>APLIKASI SEDERHANA</b></h1></center>
<h3><b>Input Data Mahasiswa</b></h3>
<ul class="breadcrumb">
<li><a href="input.php">Input</a></li>
<li><a href="tampil.php">Tampil</a></li>
<li><a href="cari.php">Cari Data</a></li>
</ul>
<div id='kotak'>

<!-- Form Pencarian -->
<?php
echo'
<form method="POST" action="cari_mahasiswa.php" class="form-inline">
<input type="text" name="nama" 
placeholder="Ketik nama Anda" class="form-control" class="col-md-4" />
<input type="submit" name="cari" value="GO" 
class="btn btn-primary">
</form>';
?>

<!-- Isi Data -->
<!-- Pagging -->
<?php
include 'koneksi.php';
$per_hal=5;
$jumlah_record=mysql_query("SELECT COUNT(*) from tbl_mhs");
$jum=mysql_result($jumlah_record, 0);
$halaman= ceil($jum / $per_hal);
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
$mulai = ($page - 1) * $per_hal;
?>
<!-- END PAGGING -->
<table class='layout display responsive-table'>
<thead>
<tr>
<th>NPM</th>
<th>Nama Mahasiswa</th>
<th>Tanggal Lahir</th>
<th>Jurusan</th>
<th>Alamat</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
include 'koneksi.php';
$no=0;
$query=mysql_query("select * from tbl_mhs limit $mulai, $per_hal");
while($data=mysql_fetch_array($query)){
    $no++;
echo"  
<tr>
<td class='organisationnumber'> $data[npm] </td>
<td class='organisationname'> $data[nama] </td>
<td class='organisationname'> $data[tgl] </td>
<td class='organisationname'> $data[jrs] </td>
<td class='organisationname'> $data[almt] </td>
<td class='organisationname'>
<a href='delete.php?npm=$data[npm]' 
class='btn btn-primary btn-xs' onClick='return hapus()'
title='tombol untuk menghapus data'>
<span class='glyphicon glyphicon-remove'></span>
Delete</a> 
<a href='edit.php?npm=$data[npm]' 
class='btn btn-success btn-xs' title='edit data mahasiswa'>
<span class='glyphicon glyphicon-pensil'></span>
Edit</a>
</td>
</tr> </tbody>";
?>
<?php
}
echo "</table>";
?>
<!-- MENAMPILKAN NOMER HALAMAN -->
<center>Halaman :
<a href="?page=<?php echo $page -1 ?>"></a>
<?php  
for($x=1;$x<=$halaman;$x++){
?>
 
<a href="?page=<?php echo $x ?>"><?php echo $x ?></a>
<?php
}
?>
 
<?php
echo "Jumlah data : ".$jum."<br>";
echo "Jumlah halaman : ".$halaman."<br/>";
?>
</center>
<!-- END NOMOR HALAMAN -->
</div>
</div>
<!-- Javascript -->
<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<?php include 'footer.php';?>
</body>
</html>

8. Ketik script di bawah ini kemudian simpan dengan nama : cari_mahasiswa.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style/tabel2.css">
<link rel="stylesheet" type="text/css" href="style/aplikasi.css">
<link rel=”SHORTCUT ICON” href=”http://www.yourwebsite.com/favicon.ico” />
<!-- Image Responsive -->
<style>img {max-width:100%;} </style>
<title>Blog Kang Arya</title>
<script>
function hapus(pesan){
var pesan;
pesan = 'Apakah Anda ingin menghapus data ini? Jika yakin tekan OK, jika tidak tekan Cancel';
if(confirm(pesan)){
return true;
}
else{
return false;
}
}
</script>
</head>

<body>
<div class='container'>
<center><h1><b>APLIKASI SEDERHANA</b></h1></center>
<h3><b>Input Data Mahasiswa</b></h3>
<ul class="breadcrumb">
<li><a href="input.php">Input</a></li>
<li><a href="tampil.php">Tampil</a></li>
<li><a href="cari.php">Cari Data</a></li>
</ul>
<div id='kotak'>

<!-- Pagging -->
<?php
include 'koneksi.php';
$per_hal=5;
$jumlah_record=mysql_query("SELECT COUNT(*) from tbl_mhs");
$jum=mysql_result($jumlah_record, 0);
$halaman= ceil($jum / $per_hal);
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
$mulai = ($page - 1) * $per_hal;
?>
<!-- END PAGGING -->
<!-- Form Pencarian -->
<?php
echo'
<form method="POST" action="cari_mahasiswa.php" class="form-inline">
<input type="text" name="nama" 
placeholder="Ketik nama Anda" class="form-control" class="col-md-4" />
<input type="submit" name="cari" value="GO" 
class="btn btn-primary">
</form>';
?>
<table class='layout display responsive-table'>
<thead>
<tr>
<th>NPM</th>
<th>Nama Mahasiswa</th>
<th>Tanggal Lahir</th>
<th>Jurusan</th>
<th>Alamat</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
include 'koneksi.php';
$no=0;
$nama= $_POST[nama];
$query = "SELECT * from tbl_mhs where nama like '%$nama%' limit $mulai, $per_hal"; 
$result = mysql_query($query) or die ('Database eror');
while ($data = mysql_fetch_array($result)) {  
    $no++;
echo"  
<tr>
<td class='organisationnumber'> $data[npm] </td>
<td class='organisationname'> $data[nama] </td>
<td class='organisationname'> $data[tgl] </td>
<td class='organisationname'> $data[jrs] </td>
<td class='organisationname'> $data[almt] </td>
<td class='organisationname'>
<a href='delete.php?npm=$data[npm]' 
class='btn btn-primary btn-xs' onClick='return hapus()'
title='tombol untuk menghapus data'>
<span class='glyphicon glyphicon-remove'></span>
Delete</a> 
<a href='edit.php?npm=$data[npm]' 
class='btn btn-success btn-xs' title='edit data mahasiswa'>
<span class='glyphicon glyphicon-pensil'></span>
Edit</a>
</td>
</tr> </tbody>";
?>
<?php
}
echo "</table>";
?>
<!-- MENAMPILKAN NOMER HALAMAN -->
<center>Halaman :
<a href="?page=<?php echo $page -1 ?>"></a>
<?php  
for($x=1;$x<=$halaman;$x++){
?>
 
<a href="?page=<?php echo $x ?>"><?php echo $x ?></a>
<?php
}
?>
 
<?php
echo "Jumlah data : ".$jum."<br>";
echo "Jumlah halaman : ".$halaman."<br/>";
?>
</center>
<!-- END NOMOR HALAMAN -->
</div>
</div>
<!-- Javascript -->
<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<?php include 'footer.php';?>
</body>
</html>


9. Ketik script di bawah ini di dalam folder style, kemudian simpan dengan nama : aplikasi.css

@charset "utf-8";
/* CSS Document */

*{margin:0px auto;}
body{background-image:url("../images/cream_pixels.png"); background-image:repeat; font-family:calibri, verdana, sans-serif; line-height:1.5em;
A:link {text-decoration: none; color:#0000FF;};
    A:visited {text-decoration: none; color:#000;};
    A:active {text-decoration: none; color:#DC143C;};
}
#kotak{
width: 100%;
padding: 10px;
background-image: url(../images/light_grey.png);
border: 1px solid #COCOCO;
border-radius: 5px;
box-shadow: 4px 4px 4px;
}

#isi_login {
background-image: url(../images/agsquare.png);
width:100%;
height:0 auto;
border:1px solid #CCC;
padding:20px;
border-radius: 8px;
margin-bottom: 10px;
}


10. Ketik script di bawah ini masukan ke dalam folder style,  kemudian simpan dengan nama : tabel2.css

.page{
  max-width: 60em;
  margin: 0 auto;
}
table th,
table td{
  text-align: left;
}
table.layout{
  width: 100%;
  border-collapse: collapse;
}
table.display{
  margin: 1em 0;
}
table.display th,
table.display td{
  border: 1px solid #B3BFAA;
  padding: .5em 1em;
}

table.display th{ background: #D5E0CC; }
table.display td{ background: #fff; }

table.responsive-table{
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 30em){
    table.responsive-table{
      box-shadow: none;
    }
    table.responsive-table thead{
      display: none;
    }
  table.display th,
  table.display td{
    padding: .5em;
  }
 
  table.responsive-table td:nth-child(1):before{
    content: 'Number';
  }
  table.responsive-table td:nth-child(2):before{
    content: 'Name';
  }
  table.responsive-table td:nth-child(1),
  table.responsive-table td:nth-child(2){
    padding-left: 25%;
  }
  table.responsive-table td:nth-child(1):before,
  table.responsive-table td:nth-child(2):before{
    position: absolute;
    left: .5em;
    font-weight: bold;
  }

    table.responsive-table tr,
    table.responsive-table td{
        display: block;
    }
    table.responsive-table tr{
        position: relative;
        margin-bottom: 1em;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    }
    table.responsive-table td{
        border-top: none;
    }
    table.responsive-table td.organisationnumber{
        background: #D5E0CC;
        border-top: 1px solid #B3BFAA;
    }
    table.responsive-table td.actions{
        position: absolute;
        top: 0;
        right: 0;
        border: none;
        background: none;
    }
}


11. Ketik script berikut ini kemudian simpan dengan nama : koneksi.php

<?php
$hostName = "localhost";
$userName = "root";
$passWord = "";
$dataBase = "kampus";

mysql_connect($hostName,$userName,$passWord) or die('Koneksi Gagal');
mysql_select_db($dataBase) or die('Database tidak ditemukan');
ini_set("display_errors",0);
?>



12. Ketik script di bawah ini kemudian simpan dengan nama : footer.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
</head>

<body>
<div class='container'>
<center><h6>Copyright @ 2016 Design by Arya All Rights Reserved</h6></center>
</div>
</body>
</html>