Terimakasih
Aplikasi Gaji Karyawan dengan PHP MySQL
Terimakasih
Design Simple Messaging System (SMS) 2
Dilangkah-langkah nanti kita akan mengoding di text editor, disini saya menggunakan notepad++
Langkah 4
Sekarang kita akan melakukan koding untuk header.php dan footer.php sebagai struktur dasar dalam pembuatan contoh ini.
Pastekan kode berikut untuk header.php
<!DOCTYPE html>Lalu save, kemudian buat file footer.php lalu pastekan kode berikut
<html lang="id">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- view port, melihat ukuran layar device -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Judul -->
<title>Simple Messanging System</title>
<!-- Bootstrap -->
<link href="view/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="view/fa/css/font-awesome.min.css" rel="stylesheet">
<!-- CSS anda -->
<link href="view/css/style.css" rel="stylesheet">
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->Lalu save..
<script src="view/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="view/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Kenapa harus memotong dalam beberapa file, karena untuk menghemat script yang ada untuk lebih mengefisiensi waktuLangkah 5
Sekarang kita mulai mendesain tampilan halaman utamanya.
Buat file index.php dan pastekan kode berikut
<?phpLalu save...
//Memasukan File header
include_once'index_header.php';
?>
<div class="container-fluid" style="margin-top: 10%">
<div class="row">
<div class="col-md-4 col-md-offset-3">
<!-- Deskripsi -->
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title"><i class="fa fa-3x fa-comments-o text-success"></i> Simple Messaging System [SMS]</h1>
</div>
<div class="panel-body">
<img src="view/images/icon.jpg" class="img-responsive center-block">
Membuat Simple Messaging system..
</div>
</div>
</div>
<div class="col-md-3">
<!-- Form Sign-in/Login/Masuk -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-2x fa-unlock-alt text-success"></i> Sign-In</h3>
</div>
<div class="panel-body">
<form action="" method="post">
<div class="form-group">
<label for="in-username">Username</label>
<input id="in-username" type="text" name="in-username" class="form-control" maxlength="15">
</div>
<div class="form-group">
<label for="in-password">Password</label>
<input id="in-password" type="password" name="in-password" class="form-control">
</div>
<button type="submit" name="sign-in" value="go" class="btn btn-success pull-right"><i class="fa fa-unlock"></i> OK</button>
</form>
</div>
</div>
<!-- Form Sign-up/Daftar -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-2x fa-paper-plane-o text-success"></i> Sign-Up</h3>
</div>
<div class="panel-body">
<form action="" method="post">
<div class="form-group">
<label for="up-username">Username</label>
<input id="up-username" type="text" name="up-username" class="form-control" maxlength="15">
</div>
<div class="form-group">
<label for="up-name">Nama Lengkap</label>
<input id="up-name" type="text" name="up-name" class="form-control" maxlength="50">
</div>
<div class="form-group">
<label for="up-email">Email</label>
<input id="up-email" type="email" name="up-email" class="form-control" maxlength="70">
</div>
<div class="form-group">
<label for="up-password1">Password</label>
<input id="up-password1" type="password" name="up-password1" class="form-control">
</div>
<div class="form-group">
<label for="up-password2">Ulangi Password</label>
<input id="up-password2" type="password" name="up-password2" class="form-control">
</div>
<button type="submit" name="sign-up" value="go" class="btn btn-success pull-right"><i class="fa fa-send"></i> Send Data</button>
</form>
</div>
</div>
</div>
</div>
</div>
<?php
//memasukan file footer
include_once'index_footer.php';
?>
Langkah 6
buka file style.css dan pastekan kode berikut
body{background: #88C425}
Sekarang coba teman akses di localhost, kira-kira tampilannya seperti ini dan terimakasih
Selesai sudah desain tampilan SMS yang dibuat, tunggu tutorial selanjutnya untuk membuat full programnya. Terimakasih
Tutorial CodeIgniter Dasar Part 1
Instalasi
Kita disini menggunakan XAMPP, pertama-tama ekstrak paket CodeIgniter yang sudah kamu download, jika belum kamu bisa mendownloadnya di situs resminya di http://ellislab.com/codeigniter/user-guide/installation/downloads.html saya menggunakan versi CodeIgniter V 2.1.4
Buat folder di htdocs, misal dengan nama ci
Konfigurasi
Kemudian, hal yang pertama jika kamu akan menggunakan CI adalah konfigurasi awal, yaitu base_url, base_url merupakan nama website kita, atau root folder di htdocs, yang tadi dicontohkan adalah ci. Caranya buka /ci/application/config/config.php , ubah $config['base_url'] = ' '; menjadi :
$config['base_url'] = 'http://localhost/ci/';Kemudian hilangkan index.php di $config['index_page'] menjadi :
$config['index_page'] = '';Langkah kedua adalah, konfiguras routes, yaitu controller default apa yang akan diload ..? Jadi disini adalah controller 'home', sehingga ketika kita mengetikan http://localhost/ci/ maka yang dipanggil adalah controller yang sudah dikonfigurasi ini.
Cara konfigurasinya adalah dengan cara mengedit file /ci/application/config/routes.php, dan dibagian $route['default_controller'] isi dengan 'home' seperti ini
$route['default_controller'] = "home";Kita akan membuat ketika http://localhost/ci/ maka yang akan dijalankan adalah controller home .
Design Simple Messaging System (SMS)
Ditahap ini kita membutuhkan Font Awesome, Bootstrap, dan JQuery untuk mempercantik tampilannya.
Sekarang siapkan alat dan bahan yang akan kita gunakan :
- Text Editor
- Web Browser
- XAMPP/ WAMPP
- JQuery (http://code.jquery.com/jquery-1.11.1.min.js)
- Bootstrap (https://github.com/twbs/bootstrap/releases/download/v3.2.0/bootstrap-3.2.0-dist.zip)
- Font Awesome (http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.1.0.zip)
Langkah 1
Saya rekomendasikan menggunakan XAMPP karena saya menggunakan itu. Buat folder di htdocs dengan nama gd_sms. Didalam gd_sms buat lagi folder view
Struktur Folder
gd_sms/
-->view
-->bootstrap
-->css
-->fa
-->images
-->js
Langkah 2
Ekstrak Bootstrap kedalam view/bootstrap
Ekstrak Bootstrap kedalam view/fa
Kemudian kamu buka link JQuery diatas maka akan muncul banyak sekali script, lalu copy semuanya/ Ctrl+A, pastekan di Text Editor simpan dengan nama jquery.min.js didalam folder view/js
Langkah 3
Buatlah beberapa file...
- index.php ( root folder )
- header.php ( root folder )
- footer.php ( root folder )
- style.css ( view/css )
Membuat Tombol Back to Top
ada 2 versi yang akan kita buat nanti, satu versi biasa dan yang lain sedikit sulit karena harus menyisipkan kode lain.
Kita mulai dari yang mudah terlebih dahulu
Cara paling mudah dalam membuat tombol back to top adalah dengan memberikan "#top" sebagai value dari atribut href di tag <a>
Jadi, hanya dengan <a href="#top">Back to top</a>, tombol back to top dapat dibuat dengan mudah
Cara yang sedikit lebih susah menggunakan jquery:
Pertama, ketik kode ini dulu (jangan lupa include jquery dulu ya):
function atas() {
$('html, body').animate({
scrollTop: 0
}, 1500);
}
Setelah itu, cukup dengan Back to top, tombol back to top ala jQuery ini bisa dibuat, keunggulan dari back to top ala jQuery adalah ada animasinya sehingga lebih mantap :D
Menghitung Selisih Dua Datetime dengan PHP
Ketikan dua fungsi berikut pada file .php
function xTimeAgo ($oldTime, $newTime, $timeType) {
$timeCalc = strtotime($newTime) - strtotime($oldTime);
if ($timeType == "x") {
if ($timeCalc = 60) {
$timeType = "m";
}
if ($timeCalc = (60*60)) {
$timeType = "h";
}
if ($timeCalc = (60*60*24)) {
$timeType = "d";
}
}
if ($timeType == "s") {
$timeCalc .= " seconds ago";
}
if ($timeType == "m") {
$timeCalc = round($timeCalc/60) . " menit yang lalu";
}
if ($timeType == "h") {
$timeCalc = round($timeCalc/60/60) . " jam yang lalu";
}
if ($timeType == "d") {
$timeCalc = round($timeCalc/60/60/24) . " hari yang lalu";
}
return $timeCalc;
}
function timeAgo($timestamp){
date_default_timezone_set('Asia/Jakarta');
$skrg=date("Y-m-d H:i:s");
$isi= str_replace("-","",xTimeAgo($skrg,$timestamp,"m"));
$isi2= str_replace("-","",xTimeAgo($skrg,$timestamp,"h"));
$isi3= str_replace("-","",xTimeAgo($skrg,$timestamp,"d"));
$go="";
if($isi > 60)
{
$go=$isi2;
}elseif($isi2 > 24)
{
$go=$isi3;
}elseif($isi < 61)
{
$go=$isi;
}
return $go;
}
Fungsi dari function berikut : 1. xTimeAgo
Berfungsi untuk menghitung diff /selisih 2 datetime dan menjadikannya ke format menit,jam atau hari
2. timeAgo
Berfungsi untuk menimbang hasil xTimeAgo, jika jam menit lebih dari 60 maka dihitung jam, jika jam lebih dari 24 maka dihitung hari
Keterangan : date_default_timezone_set('Asia/Jakarta') adalah men-set timezone waktu Jakarta atau +7
Karena berita yang anda entrykan tersebut bagusnya bukan timezone server hosting/mysql
Untuk melihat lebih detail format timezone silahkan cek disini
Lalu bagaimana menjalankannya ?
Cukup ketikan :
echo timeAgo('2013-09-26 14:20:00');
Keterangan : Format timezone Mysql adalah Y-m-d H:i:s
Yang Unik di Mesin Pencari Google
1. Tampilan Game Klasik ala Google
Ketik Atari Breakout pada kolom search google.com dan pilih pada kategori images maka kamu akan melihat tampilan game klasik Breakout. Kamu bisa memainkannya dengan tombol panah. Tampilan game ini dipersembahkan Google dalam rangka ulang tahun ke-37 game Breakout yang saat itu dirilis pertama kali di platform Atari.
2. Logo Retro
Ketikkan Google in 1998 pada kolom search, Google akan menampilkan logo versi retro yang digunakan situs tersebut pada tahun 1998. Sayangnya, jika kamu mengetikkan kembali suatu kata kunci untuk pencarian sesuatu maka akan kembali seperti semula.
3. Hancurkan Bulatan
Ketik Zerg rush . maka akan menampilkan sebuah game dimana kamu mesti menghancurkan bulatan yang berjatuhan dan menghancurkan huruf-huruf yang ada. Kamu meski melakukan klik pada tiap bulatan untuk menghentikan serangan bulatan tersebut. Nantinya diakhir permainan, maka akan berubah menjadi huruf GG.
4. Chuck Norris
Ketik find chuck norris lalu klik tombol I'm feeling Lucky. Maka hasil pencarian akan menampilkan mengeluarkan kalimat lucu. Google tidak akan menemukan Chuck Norris tetapi Chuck Norris akan menemukan kamu. Chuck Norris merupakan aktor bela diri terkenal era 80-an dan 90-an.
Cara Memunculkan File Tersembunyi
Jika kalian mengalamai masalah seperti ini, kemungkinan banyak file folder yang terhidden/ tersembunyi. Jadi jika kita ingin memindahkan atau menghapus file folder yang terhidden maka kalian harus memunculkan terlebih dahulu, sebagai berikut caranya :
- Langkah Pertama, masuk ke Explorer terlebih dahulu
- Lalu pada menu bar, pilih Organize kemudian pilih Folder and search options
- Pada jendela Folder Options, pilih pada tab view kemudian aktifkan pada Show hidden files, folders, and drivers
Pengenalan CodeIgniter PART 1
CodeIgniter adalah aplikasi open source yang berupa framework dengan model MVC (Model, View, Controller) untuk membangun website dinamis dengan menggunakan PHP. CodeIgniter memudahkan para developer untuk membuat aplikasi web dengan cepat dan efisien serta mudah dibandingkan membuat dari awal. CodeIgniter dirilis pertama pada 28 Februari 2006, versi stabil terakhir adalah versi 2.1.3
Framework
Framework secara sederhana dapat diartikan kumpulan dari fungsi-fungsi/ prosedur-prosedur dan class-class untuk tujuan tertentu yang sudah siap digunakan sehingga bisa lebih mempermudah dan mempercepat pekerjaan seorang programmer, tanpa harus membuat class dan fungsi dari awal.
Ada beberapa alasan mengapa menggunakan framework
- Mempercepat dan mempermudah pembangunan sebuah aplikasi web
- Relatif memudahkan dalam proses maintenance karena sudah ada pola tertentu dalam sebuah framework (dengan syarat programmer mengikuti pola standar yang ada)
- Umumnya framework menyediakan fasilitas-fasilitas yang umum dipakai sehingga kita tidak perlu membangun dari awal (misalnya validasi, ORM, pagination, multiple database, scaffolding, pengaturan session, error handling, dll)
- Lebih bebas dalam pengembangan dibandingkan CMS
Model View Controller merupakan suatu konsep yang cukup populer dalam pembangunan aplikasi web, berawal pada bahasa pemrograman Small Talk, MVC memisahkan pengembangan aplikasi berdasarkan komponen utama yang membangun sebuah aplikasi manipulasi data, user interface, dan bagian yang menjadi kontrol aplikasi. Terdapat 3 jenis komponen yang membangun suatu MVC pattern dalam suatu aplikasi yaitu:
- Model, biasanya berhubungan langsung dengan database untuk memanipulasi data (inster update, delete, search), menangani validasi dari controller, namun tidak dapat berhubungan langsung dengan bagian View
- View, merupakan bagian yang menanganani presentation logic. Pada aplikasi web bagian ini biasanya berupa file template HTML, yang diatur controller. View berfungsi untuk menerima dan mempresentasikan data kepada user. Bagian ini tidak memiliki akses langsung terhadap bagian model
- Controller, merupakan bagian yang mengatur hubungan antara bagian model dan bagian view, controller berfungsi untuk menerima request dan data dari user kemudian menentukan apa yang akan diproses oleh aplikasi.
Perbedaan POST dan GET
Perbedaan POST dan GET .-
Teknik mengirimkan data untuk aplikasi berbasis web ada dua cara yaitu denga GET dan POST, sayangnya banyak programmer pemula {seperti saya} tidak begitu paham dengan GET dan POST, padahal pemahaman tentag dua teknik pengiriman ini adalah hal wajib dari setiap programmer web. Agar tidak panjang lebar, saya akan menjelaskan perbedaan kedua teknik ini dengan contoh agar dapat mudah memahaminya.
Cara Deklarasi Form
perbedaan pertama terletak pada deklarasi form
<form method='GET' action='foo.php'>jika suatu tidak ditentukan methode pengiriman datanya secara ekplisit, maka secara default, form tersebut menggunakan GET.
...
</form>
<!-- teknik POST -->
<form method='POST' action='foo.php'>
...
</form
Cara mengirim Data
perbedaan kedua terletak pada cara mengirimkan data pada GET, data ditambahkan pada URL sedangkan POST tidak.
Efek samping dari cara mengirim data pada GET adalah GET tidak cocok untuk mengirim data rahasia seperti PIN, Password, dan sejenisnya. Efek samping lain, GET tidak cocok untuk mengirim data dalam jumlah besar. GET hanya cocok mengirim data dalam jumlah sedikit, sedangkan POST cocok untuk mengirim data banyak/ dalam jumlah besar seperti artikel, tutorial dan sejenisnya.
Namun kelebihan dari GET adalah hasil dari GET bisa di bookmark. Contoh paling nampak adalah Google. Google menggunakan method GET dalam mengirim data sehingga hasil pencariannya bisa di bookmark. Nah paham dong sekarang ?
Variabel di PHP dan cara menanganinya
PHP mempunyai variable system bernama $_GET untuk menampung data yang dikirim dengan method GET dan $_POST untuk mengirim data dengan method POST.
Contoh Form dengan Method GET
//form dengan methode GET dan cara php menanganinyaContoh Form dengan Method POST
<form method="GET" action="">
<label> username </label><input type='text' name='username'></br>
<label> Password </label><input type='password' name='password'></br>
<button type="submit">Submit </button>
</form>
<?
if($_GET){
$username=$_GET['username'];
$password=$_GET['password'];
echo "Selamat datang $username";
}
?>
<form method="POST" action="">
<label> username </label><input type='text' name='username'>
<label> Password </label><input type='password' name='password'>
<button type="submit">Submit </button>
</form>
<?
if($_POST){
$username=$_POST['username'];
$password=$_POST['password'];
echo "Selamat datang $username";
}
?>
Menampilkan Data dengan PHP dan MySQL
Hal yang paling umum ketika kita belajar PHP dan MySQL adalah menampilkan data dari sebuah tabel. Nah berikut ini akan saya berikan panduan dasar untuk programmer pemula teknik bagaimana cara menampilkan data dan variasinya. Hal yang akan kita bahas adalah
- Menampilkan Data
- Membuat Baris data Zebra
CREATE TABLE IF NOT EXISTS `siswa` (konkesi.php
`nim` varchar(5) NOT NULL,
`nama` varchar(40) NOT NULL,
`ipk` double NOT NULL,
`jurusan` varchar(40) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data untuk tabel `siswa`
--
INSERT INTO `mahasiswa` (`nim`, `nama`, `ipk`, `jurusan`) VALUES
('M0002', 'Firman', 2.1, 'Ekonomi'),
('M0003', 'Gunawan', 3.71, 'Sistem Informasi'),
('M0004', 'Gunatri', 2.2, 'Pendidikan'),
('M0005', 'Fitria', 3.1, 'Teknik Mesin'),
('M0016', 'Zuhair', 2.5, 'Teknik Industri'),
('M0100', 'andri', 3.82, 'Psikologi');
define('db_host','localhost');
define('db_user','root'); //user database
define('db_pass',''); //passwd database
define('db_name','maful');
mysql_connect(db_host,db_user,db_pass);
mysql_select_db(db_name);
Menampilkan data dari Tabelteknik ini adalah teknik paling dasar dalam menampilkan dari tabel mysql menggunakan PHP
<h2>Menampilkan data di Tabel</h2>Hasil dari kode diatas adalah
<table border="1" width="500px">
<th><td>Nim</a></td><td>Nama</td><td>IPK</td><td>Jurusan</td></th>
<!-- example 1 :menampilkan data di tabel-->
<?php
require_once('koneksi.php');
$query1="select * from mahasiswa ";
$result=mysql_query($query1) or die(mysql_error());
$no=1; //penomoran
while($rows=mysql_fetch_object($result)){
?>
<tr>
<td><?php echo $no
?></td>
<td><?php echo $rows -> nim;?></td>
<td><?php echo $rows -> nama;?></td>
<td align='right'><?php echo $rows -> ipk;?></td>
<td><?php echo $rows -> jurusan;?></td>
</tr>
<?php
$no++;
}?>
</table>
untuk menampilkan tabel zebra strip, codenya hampir sama dengan contoh pertama. Kunci utama zebra skrip adalah memberikan syle warna lain jika suatu baris adalah ganjil.
Berikut ini adalah potongan code dari zebra strip.
<h2>Hasil dari kode diatas adalah
Table Zebra strip
</h2>
<table width="500px">
<th><td>Nim</a></td><td>Nama</td><td>IPK</td><td>Jurusan</td></th>
<?php
require_once('koneksi.php');
$query2="select * from mahasiswa ";
$result=mysql_query($query2) or die(mysql_error());
$no=1; //penomoran
$warna='#fffff';
while($rows=mysql_fetch_object($result)){
if($no%2==1){
$warna='#ece9d8';
}else{
$warna='#fff';
}
?>
<tr style='background-color: <?=$warna;?>'>
<td><?php echo $no
?></td>
<td><?php echo $rows -> nim;?></td>
<td><?php echo $rows -> nama;?></td>
<td align='right'><?php echo $rows -> ipk;?></td>
<td><?php echo $rows -> jurusan;?></td>
</tr>
<?php
$no++;
}?>
</table>
Sekian, semoga bermanfaat
Hueman Template for Wordpress
Selamat Siang teman, kali ini admin akan membagikan Template Magazine for Wordpress. Kenapa harus Wordpress, ya sekali-kali karena admin juga pernah pake Wordpress. Template ini Seo Friendly dan tentunya Responsive.
Fitur-fitur
- Stunning Design
- Several Layout Options
- Responsive Layout
- Support Post Formats
- Bulit-in Related Post
Langganan:
Postingan (Atom)
