Monday, November 30, 2015

Membuat CRUD dengan PHP Mysqli

CRUD(Create, Read, Update, Delete) Yaitu suatu proses bagian dalam pemrograman yang inti nya digunakan untuk membangun suatu aplikasi atau program, pada kesempatan kali ini saya akan menjelaskan bagaimana langkah demi langkah membuat kasus CRUD sederhana dengan PHP Mysqli Prosedural. Sebenernya Mysqli ini sama dengan hal Mysql, namun karena Mysql sudah berstatus deprecated pada versi PHP 5.3 keatas jadi sudah banyak yang beralih ke mysqli. Bila anda bertanya apa sebenernya apa perbedaan dari mysql dan mysqli, saya sudah menulisnya dan bisa dilihat Disini. Oke tanpa berlama-lama lagi langsung menuju TKP!..

Pertama-tama buat terlebih dahulu script koneksi  ke database dengan nama file nya connect.php  ,berikut script nya.
<?php
$host = "localhost";
$user = "root";
$pass = "";
$db   = "latihan";
$koneksi = mysqli_connect($host, $user, $pass, $db);
if(mysqli_connect_errno()){
echo "Gagal Terhubung ".mysqli_connect_error();
}
 ?>

Selanjutnya buat script untuk menampilkan data dari database nama file nya index.php isi nya sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>CRUD</title>
<link rel="stylesheet" href="header.css">
</head>
<body>
<a href="index.php" class="menu">BERANDA</a> ||
<a href="add.php" class="menu">TAMBAH DATA</a>
<br>
<br>
<form action="" method="POST">
<table border="1" cellspacing="0" cellpadding="4">
<tr style="text-align:center;background-color:#1abc9c">
<td>NIK</td>
<td>Nama</td>
<td>No Telp</td>
<td>Alamat</td>
<td>Status</td>
<td>Aksi</td>
</tr>
<?php
          include "connect.php";
$query = mysqli_query($koneksi, "SELECT * FROM karyawan") or die (mysqli_error());
if(mysqli_num_rows($query) == 0){
echo "<b>Tidak ada data yang tersedia</b>";
}else{
while($r = mysqli_fetch_array($query)): ?>

<tr style="text-align:center">
<td><?php echo $r['nik'] ?></td>
<td><?php echo $r['nama'] ?></td>
<td><?php echo $r['no_telp'] ?></td>
<td><?php echo $r['alamat'] ?></td>
<td><?php echo $r['status'] ?></td>
<td>
<a href="edit.php?id=<?php echo $r['id'] ?>">Edit</a> ||
<a href="delete.php?id=<?php echo $r['id'] ?>" onClick='return confirm("Apakah Ada yakin menghapus?")'>Hapus</a>
</td>
</tr>
<?php
endwhile;
}
?>
</table>
</form>
</body>
</html>
Tampilan dari file index.php, tidak ada data karena didatabase tidak ada data nya.


Sedikit penjelasan mengenai script index.php diatas, pertama-tama buat dulu sebuah query untuk memilih semua data dari tabel karyawan. Lalu cek apakah datanya ada, kalau tidak maka print sebuah statment bahwa tidak ada data yang tersedia. Lalu jika datanya tidak kosong atau ada maka keluarkan datanya.


Selanjutnya untuk menambah data baru buat sebuah file lagi dengan nama add.php
<!DOCTYPE html>
<html>
<head>
<title>TAMBAH DATA</title>
<link rel="stylesheet" href="header.css">
</head>
<body> <a href="index.php" class="menu">BERANDA</a> ||
<a href="add.php" class="menu">TAMBAH DATA</a>
<h2>FORM TAMBAH DATA</h2>
<form action="" method="POST">
<table>
<tr>
<td>NIK </td>
<td><input type="text" name="nik"  placeholder="Masukkan NIK" /></td>
</tr>
<tr>
<td>Nama </td>
<td><input type="text" name="nama"  placeholder="Masukkan Nama" /></td>
</tr>
<tr>
<td>No Telp</td>
<td> <input type="text" name="no_telp" placeholder="Masukkan No Telp"></td>
</tr> <tr>
<td>Alamat</td>
<td><input type="text" name="alamat" placeholder="Masukkan Alamat"></td>
</tr>
 <tr>
<td>Status</td>
<td>
<select name="status">
 <option value="Aktif">Aktif</option>
  <option value="Tidak Aktif">Tidak Aktif</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="tambah" value="Tambah">
<button type="reset" value="Reset">Reset</button>
</td>
</tr>
</table>
</form>

Berikut tampilan dari script diatas untuk membuat form.

Lalu sisipkan script php berikut, untuk memproses data yang akan ditambahkan.
<?php if(isset($_POST['tambah'])){
$nik     = $_POST['nik'];
$nama    = $_POST['nama'];
$no_telp = $_POST['no_telp'];
$alamat  = $_POST['alamat'];
$status  = $_POST['status'];
$querytambah = mysqli_query($koneksi, "INSERT INTO karyawan VALUES(NULL, '$nik', '$nama', '$no_telp', '$alamat', '$status')") or die(mysqli_error());
if($querytambah) {
header('location: index.php');
} else{
echo "Upss Something wrong..";
}
}
?>
</body>
</html>

Berikut tampilan ketika form ditambakan.


Sedikit penjelasan lagi mengenai script add.php diatas, pertama-tama buat terlebih dahulu form HTML untuk menampung inputan. lalu buat variabel dari tiap field di database, selanjutnya buat query untuk memasukkan data ke dalam database dengan insert into bila querynya berhasil maka akan meredirect ke halaman index.php atau beranda.

Sekian dulu pembahasan mengenai CRUD ini, untuk pembahasan selanjutnya mengenai artikel CRUD dengan Mysqli ini saya lanjutkan di bagian kedua. Silahkan dicoba dan semoga bermanfaat.

Saturday, November 28, 2015

Cara Menginstall Wordpress di Localhost



Halooo sobat, pada kesempatan kali ini saya akan mengulas langkah demi langkah menginstall wordpress di localhost atau offline. Sebelum masuk ke pokok pembahasan saya coba jelaskan sedikit mengenai perbedaan dari versi wordpress yang online (dot com)  dengan offline (dot org).
Perbedaan yang saya amati hanya terdapat pada masalah "Kreatifitas", maksudnya apa...? Ya karena pengguna yang memakai wordpress offline biasanya ingin sesuatu yang "Lebih". Lebih disini maksudnya menyusun layout atau tata letak, background, warna, font, dan sebagainya sampai masalah plugin yang dimana dalam versi wordpress online hal itu dibatasi. Dan wordpress offline tidak hanya digunakan untuk ngeblog saja, tapi penggunaan nya sekarang lebih ke arah company profile sampai ecommerce. Sedangkan Wordpress online tampilan nya sedikit kaku karena wordpress online membatasi hal penambahan plugin-plugin serta template. Namun bukan berarti tidak ada, wordpress online dapat menambahkan plugin serta menggubah template yang diinginkan dalam versi premium. Okee itu sekilas mengenai fitur dari wp online dan offline, Mari ke topik utama yaitu menginstall wordpress offline di localhost. Silahkan anda download terlebih dahulu wordpress.org terbaru Disini .

Pertama, ubah / rename file wordpress yang di download untuk mengubah nama file wordpress ini optinal, boleh di ganti boleh tidak, jadi sesuaikan dengan keinganan sobat.


Rename folder wordpressnya menjadi "websaya". Lalu pindahkan folder "websaya" ke folder htdocs untuk yang memakai xampp atau apabila sobat menggunakan linux silahkan disesuaikan.


 

Selanjutnya ketikkan di browser localhost/websaya , Lalu akan muncul gambar seperti berikut. Klik Create Configuration File.

Lalu akan muncul halaman ini, klik Let's go.

Dihalaman ini, isikan kolom-kolom yang dibutuhkan untuk menampung data dari web wordpress yang akan dibuat. Untuk Database Name silahkan isi sesuai dengan database yang sudah teman buat, dan untuk User Name Password serta Database Host isikan sesuai dengan data xampp / webserver yang dibuat ketika diinstall. Untuk Table Prefix biarkan saja, lalu klik submit.

Klik Run the install.





Selanjutnya akan muncul halaman seperti berikut, isikan data-data yang dibutuhkan, untuk data yang diisi dapat diubat di wp-admin, jadi isikan username dan password yang mudah dingat dulu agar tidak lupa. Lalu klik Install Wordpress.


Pemberitahuan bahwa konfigurasi telah berhasil.

Tampilan login dari wordpress, silahkan disini username dan passwordnya. dan teman-teman akan di bawah kehalaman dashboard wordpress.


Nah sampai disini sobat telah berhasil menginstall wordpres di localhost, Demikian langkah-langkah mengenai cara mengisntall wordpress di localhost. Selamat mencoba dan semoga bermanfaat.






Friday, November 27, 2015

Membuat Script Anak Ayam dengan PHP

Haloo, sudah lama tak posting hehee.. Pada kesempatan ini, saya ingin share tentang membuat program lagu anak ayam dengan PHP. Terdengar lucu memang tapi jangan disepelakan, saya sendiri dibuat pusing pertama kali ketika mendapat soal ini. dan juga banyak teman-teman mahasiswa yang berkampus IT menghadapi soal ini ketika ujian tertulis maupun praktik yang membutuhkan konsentrasi tinggi untuk mengerjakan nya dengan tidak menyayikan lagu anak ayam tersebut, hahaaha...Oke tanpa berlama-lama lagi mari kita buat script nya.   

Pertama-tama buat form html nya terlebih dahulu. 

<form action="" method="POST">
<label>Masukkan Anak Ayam</label>
<input type="text" name="ayam">
<input type="submit" name="submit" value="Enter">
</form>
Selanjutnya masukkan script PHP berikut. 
<?phpif(isset($_POST['submit'])){$ayam = $_POST['ayam'];echo "<br>";echo"<br> Jumlah Anak Ayam ".$ayam;echo "<br>";do{echo "Anak ayam turun $ayam ";$ayam--;echo "Mati satu tinggalah ".$ayam."<br>";}while($ayam >= 2);echo "Anak ayam turun 1 mati satu mati semua";} ?>
Sedikit penjelasan mengenai script diatas, pertama-tama tampung dahulu inputan ayam nya di dalam variabel ayam, lalu lalukan operasi perulangan dengan Do While dimana dalam tag Do di print variabel ayam inputan terlebih dahulu, lalu dilakukan operasi decrement pada var ayam dan print kembali nilai variabel ayam tersebut. Pada While($ayam >= 2) maksudnya  yang mana variabel ayam lebih dari atau sama dengan 2 maka print statment anak ayam turun 1 mati satu mati semua. 

Demikian membuat program lagu anak ayam dengan PHP, apabila ada hal yang ingin ditanyakan silahkan tinggalkan pesan dikolom komentar dan apabila ada kesalahan dalam penulisan mohon perbaikannya. Untuk script nya bisa di download Disini. Sekian dan semoga bermanfaat.

Tuesday, November 10, 2015

Optimasi Postingan Blog agar Terindeks Google



Sebagai blogger pemula, saya berpikir bagaimana caranya agar postingan blog dapat terindeks atau nangkring di mesin pencarian seperti google atau  bing. Karena postingan yang nangkring di google itu merupakan suatu kebanggaan tersendiri bagi para blogger maupun pengembang web agar dapat mudah menemukan halaman yang dimaksud di mesin pencari.
Pada postingan kali ini saya mencoba berbagi cara dan share pengalaman mengenai bagaimana mengoptimasi postingan agar dapat terindeks di google. Okee tanpa berlama-lama lagi langsung ke TKP.

Langkah pertama, pada halaman dashboard menu ikhtisar, klik atau cari search console pada Panduan Blogger. Untuk lebih jelasnya silahkan liat gambar dibawah ini.


Langkah kedua, selanjutnya anda akan dibawa ke beranda search console, silahkan klik tombol TAMBAHKAN PROPERTI, untuk lebih jelasnya lihat dibawah ini.

Langkah ketiga, isikan namablog anda.


Lankah keempat, anda akan dibawa ke halaman metode yang akan digunakan dalam mengindeks postingan, disini terdapat dua metode. Bisa dilihat metode yang ada yaitu metode yang disarankan dan metode alternatif, pilih metode alternatif.




Perhatian, jangan terburu-buru klik verifikasi. Pilih tag html pada radio button yang disediakan. Lalu akan muncul tag meta, silahkan anda copy tag tersebut lalu taruh di template HTML blog anda. 
Caranya :
ke menu setelan,
lalu edit template
pada kolom edit template, masukan tag yang sebelum nya sudah dicopy letakan sesudah tag <head> lalu save.
Setelah verifikasi metode yang sudah pilih, pada beranda search console silahkan klik namablogspot anda yang sudah dibuat, lalu klik "Ambil sebagai Google". Kurang lebih gambaran nya seperti berikut.

Selanjutnya masukkan postingan yang mau diindeks lalu klik ambil, untuk lebih jelasnya lihat gambar dibawah ini.


Lalu akan muncul postingan nya beserta status postingan, untuk menyelesaikan nya klik kirim ke indeks agar dapat di verifikasi oleh google bot. 
Demikian cara sederhana untuk mengoptimasi postingan agar terindeks di mesin pencarian, untuk dapat terindeks saya pribadi belum tahu seberapa lama karena postingan akan terlebih dahulu di telusuri oleh google bot namun apabila anda beruntung dalam beberapa menit postingan akan terindeks. Apabila anda mempunyai tanggapan atau pertanyaan seputar hal ini silahkan tinggalkan pesan di kolom komentar. Sekian dan semoga bermanfaat.

Menghubungkan PC dengan Router di Cisco


Halooo, Kali ini saya akan share tentang cara menghubungkan pc dengan router pada cisco packet tracer agar antara pc satu dan lain dapat terhubung dengan menggunakan router, Untuk versi cisco yang saya gunakan ialah 6.0.1, Okee langsung saja tanpa basa basi..

Langkah pertama, Susun PC dan Router terlebih dahulu yang akan di hubungkan, kurang lebih akan terlihat seperti pada gambar berikut.

Langkah kedua, Pasang kabel cross over yang masing-masing menghubungkan PC ke Router dan Router ke Router. Untuk PC ke Router atur atau setting Fastethernet atau FA nya yaitu FA0/0. Kurang lebih seperti gambar dibawah ini.

Langkah ketiga, Isi tiap-tiap PC yang sobat susun dengan IP Address, Untuk IP Address anda bebas mengisi nya. Namun untuk contoh kasus ini saya akan mengisi IP Address sebagai berikut:
PC 1 IP Address: 192.168.1.2
PC 2 IP Address: 192.168.2.2 
PC 3 IP Address: 192.168.3.2


Selanjutnya kita atur atau setting Fastethernet dari tiap Router ke PC serta dari Router ke Router, kita mulai dari Router ke PC. 
Klik Router 1 pada gambar 1.0 , Pilih menu Config Lalu klik Fastethernet 0/0 dan pada kolom Interface isi IP Address sebagai berikut :
192.168.1.1
 Note : 192.168.1.1 merupakan interface dari PC 1
(1.0)

Selanjutnya ulangi cara diatas untuk mengisi IP Adress Fastethernet 0/0 dari Router 2 dan 3 ke PC 2 dan PC 3. Untuk IP Address Fastethernet 0/0 nya sebagai berikut :
IP Address Router 2 : 192.168.2.1
IP Address Router 3 : 192.168.3.1
Langkah Keempat, Ini merupakan step penting yaitu mengisi Static Routes dari tiap Router agar tiap PC dapet terkoneksi satu sama lain. Pertama agan klik Router 1, Klik menu tab config lalu ke pilih kolom static dan isi seperti di gambar berikut.


Ulangi hal yang sama dengan klik Router ke-2 lalu isikan seperti gambar dibawah ini.



Coba sobat ping di menu command prompt apabila Reply sampai disini antara PC 1 dan PC 2 sudah terkoneksi, Berikut tampilan ketika ping dari pc 1 ke 2 dan sebalik nya.


 PC1 ping PC2
PC2 ping PC1

Selanjutnya kita hubungkan PC 2 dan PC 3, Oke langsung klik Router 2 lalu isikan Static Routes seperti di gambar berikut.


Lalu klik Router 3 dan isikan seperti di gambar berikut.



Selanjutnya pindah ke command prompt, Lalu ping dari PC 2 ke PC 3 dan sebaliknya.

PC 3 ping PC 2

Sekarang tinggal mengkoneksikan antar PC 1 dan PC 3 agar semua terhubung, Langsung saja klik Router 1 dan isikan pada kolom Static Routes nya sebagai berikut.
 (2.0)

(3.0)
Sedikit penjelasan, Kali ini sobat perlu mengisi nya dua kali, Karena untuk dapat mengkoneksikan antar PC 1 dengan PC 3 harus membuka jalan atau Next Hop nya terlebih dahulu antar Router, Jadi pada gambar 2.0 Router membuka jalan dengan menghubungkan Router 1 ke Router 2 terlebih dahulu. Lalu Router 2 menghubungkannya ke Router 3 pada gambar 3.0.

Selanjutnya sobat hubungkan PC 3 ke PC 1, Klik Router 3 nya. lalu ke menu Static Routes, Isikan seperti di gambar berikut.
 (4.0)

(5.0)
 
Sama seperti langkah sebelum nya, Router 3 harus membuka jalan terlebih dahulu ke Router 2 sebelum ke Router 1. Pada gambar 4.0 diatas, Static Routes menghubungkan antar Router 3 dengan Router 2 terlebih dahulu, Oh iya untuk Network nya tetap diisi sesuai dengan Interface PC 1 agar otomatis dan mudah dalam mengisi kita akhiri Interface nya dengan angka 0. 
Contoh
  • 1.0 
  • 2.0
  • 3.0
Setelah selesai mengisi static routing, Cek dengan command prompt lalu ping seperti di gambar berikut.
 PC 1 Ping PC 3

 PC 3 Ping PC 1

Oke, Sampai disini antar PC sudah terkoneksi apabila masih ada kesalahan silahkan di cek kembali pc dan ip route yang dihubungkan tadi. Demikian cara menghubungkan PC dan 3 Router dengan static routing. Apabila ada hal yang tidak dimengerti silahkan tinggalkan komentar di kolom yang sudah disediakan. Sekian dan semoga bermanfaat.

Monday, November 9, 2015

Cara Memasukkan Video ke Browser dengan HTML5


HTML5 merupakan versi modern dari HTML yang disusun oleh World Wide Consortium (W3C) yang fungsi nya sebagai standar dari kerangka HTML di browser. Namun masih banyak dari browser yang belum support HTML5 dikarena versi browser yang lama. Untuk kelancaran tutorial ini saya menyarankan agar sobat untuk menggunakan browser versi terbaru. Berikut gambaran mengenai browser yang support HTML5.


Bisa dilihat dari gambaran diatas, Untuk warna hijau merupakan browser yang sudah support HTML5. Sedangkan, untuk warna merah merupakan browser tidak support HTML5. Untuk lebih jelas nya sobat bisa ke www.caniuse.com atau ke www.html5test.com untuk melihat lebih lengkap versi browser sobat apakah support atau tidak. Oke sekarang kita praktikan bagaimana cara mengembed atau memasukkan video kedalam browser.

Langkah pertama sobat buat terlebih dahulu file dan folder nya, pada contoh ini saya membuat file bernama video.html di folder test di var/www/html.  Apabila sobat menggunakan xampp bisa taruh di folder htdocs.

Langkah kedua ketikan script berikut :
<!DOCTYPE html>
<html>
<head> 

            <title>Memasukkan Video ke Browser</title>   
</head>
<body>


    <video src="oasis.mp4" controls>
                Browser Anda tidak support, Segera upgrade Versi Browser Anda
    </video> 


</body>
</html>
Save lalu sobat pindah ke browser, localhost/namafile.html Berikut tampilan dari hasil script diatas.

Sedikit penjelasan mengenai script diatas. Untuk dapat memasukkan video ke browser harus menggunakan tag <video> diikuti dengan src atau tempat sobat menyimpan file yang dimana format nya ialah .mp4. serta controls digunakan untuk mengatur video di browser agar dapat di Play, Pause, Mute, dan mengatur Volume suara video. Dan akhiri dengan tag penutup </video>.

Note : Selain format .mp4, Tipe HTML video yang disediakan lainnya yaitu .ogg dan .webm

Sekian cara memasukkan video ke browser dengan HTML5, Apabila sobat mempunyai pertanyaan silahkan berkomentar di kolom komentar yang sudah disediakan. Selamat mencoba dan semoga bermanfaat.