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)
Silahkan download materinya di SINI
Kamis, 24 November 2016
Senin, 21 November 2016
Web Hosting
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]
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
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 :
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
Senin, 17 Oktober 2016
Senin, 10 Oktober 2016
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
Tugas Membuat Kolom
Berikut ini tugas membuat kolom dengan ketentuan :
- Menggunakan kertas A4
- Margin top : 2, bottom : 2, left : 2, right : 2
- Spasi : 1
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.
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
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
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
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"
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
Materi selengkapnya dapat di Download DISNI
“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
Materi Selengkapnya dapat di Download DISINI
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
Materi Selengkapnya dapat di Download DISINI
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
Materi Selengkapnya dapat di Download DISINI
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.
- Penggunaan bootstrap sangat menghemat waktu.
- Tampilan bootstrap yang sudah cukup terlihat
modern.
- Mobile Friendly yang maksudnya tampilan bootstrap
sudah sangat responsive, yaitu tampilan bootstrap sudah mendukung segala
jenis resolusi, baik itu pc, laptop, tablet dan smartphone.
- Sangat ringan karena bootstrap di buat
dengan sangat terstruktur.
- 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
- 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
<!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
<!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
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
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 :
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>
<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>
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>
Langganan:
Postingan (Atom)