Kalenesia – Aplikasi (Android) Kalender Indonesia dan Imsakiyah

Assalamu’alaykum,

Halo pembaca!

Setelah berusaha keras belajar Android selama hampir sebulan di sela-sela waktu kosong. Akhirnya saya berhasil “mengkonversi” Kalender Indonesia Online (versi web) menjadi aplikasi berbasis perangkat bergerak (mobile) Android. Alhamdulillah. Setelah sebelumnya saya meluncurkan aplikasi Android (APK) pertama saya iPuzzle, sebuah aplikasi permainan yang, carut marut. :D Mohon dimaklumi karena merupakan APK perdana dari hasil belajar selama seminggu. :D

Kalender Mei 2020

Kalender Mei 2020

Pada kesempatan kali ini, saya luncurkan APK kedua saya yang saya beri nama “iKalenesia” kependekan dari “INOCHI Kalender Indonesia”. Aplikasi ini adalah aplikasi kalender Indonesia – Jawa – Hijriyah yang berlaku sepanjang jaman. Apa maksudnya? Maksudnya sekali Anda memasang aplikasi ini Anda dapat melihat-lihat kalender yang berlaku di Indonesia pada tahun manapun, baik tahun yang telah berlalu atau tahun yang akan datang tanpa harus menunggu pergantian tahun atau memperbarui aplikasi. Anda hanya tinggal memilih tahun yang sudah tersedia.

Tampilan utama pada tablet

Tampilan utama pada tablet

Apalagi yang ditawarkan iKalenesia? Pada iKalenesia juga terdapat jadwal shalat (imsakiyah) harian maupun bulanan, yang dilengkapi dengan penanda peringatan (alarm) sebelum masuk waktu shalat dan kumandang adzan saat masuk waktu shalat. Nah, menjelang bulan puasa (Rhamadhan) yang tinggal beberapa bulan ke depan ini, APK ini akan sangat bermanfaat bagi Anda, karena Anda tidak perlu lagi mencari-cari jadual imsakiyah atau mendengar radio saat menunggu waktu berbuka. :D

Informasi harian

Informasi harian

Bagaimana dengan akurasi waktu imsakiyahnya? InsyaAllah akurat, Anda dapat menentukan lokasi Anda dengan memilih daftar lokasi yang tersedia atau Anda dapat membuatnya sendiri.

Pemilihan lokasi untuk menentukan imsakiyah pada tablet

Pemilihan lokasi untuk menentukan imsakiyah pada tablet

Aplikasi ini dapat berjalan pada perangkat selular model konvensional maupun tablet.

Tampilan utama pada perangkat 480x800

Tampilan utama pada perangkat 480×800

Tampilan utama pada perangkat 240x432

Tampilan utama pada perangkat 240×432

Untuk informasi lebih jelasnya, silakan mengunjungi laman resmi dari aplikasi ini di: APLIKASI KALENDER INDONESIA ONLINE. Akhir kata, mohon kerjasama dari Anda untuk melaporkan jika terdapat bug/error/kerusakan pada aplikasi ini. Silakan sampaikan melalui e-mail ke: pujanggabageur@yahoo.com atau inochisoftware@gmail.com demi perbaikan aplikasi ini ke depannya. Terima kasih dan selamat menggunakan iKalenesia! :)

Memasang WordPress pada Komputer Lokal

WordPress adalah perangkat lunak sistem manajemen konten (Contents Management System [CMS]), yaitu suatu sistem yang mengelola konten situs web sehingga menciptakan suatu situs web yang dinamis. Dinamis di sini artinya bahwa konten dari situs web tersebut dapat berubah, bertambah maupun berkurang. Dengan WordPress pemilik situs dapat dengan mudah untuk menambahkan konten atau halaman situs yang dapat berupa artikel dan sebagainya.

WordPress mempunyai dua buah layanan, yaitu wordpress.com dan wordpress.org. wordpress.com merupakan penyedia layanan blog gratis yang dapat digunakan oleh siapapun. Sedangkan wordpress.ord merupakan penyedia layanan bagi para pengembang atau pengguna perangkat lunak CMS WordPress.

Pembahasan kali ini akan menjelaskan penggunaan CMS WordPress untuk pengembangan sebuah situs web. Tidak seperti wordpress.com di mana untuk membuat situs web Anda cukup mendaftar secara gratis dan langsung disediakan alamat untuk mengkases situs Anda, untuk penggunaan CMS WordPress, Anda harus memiliki sebuah domain dan hosting terdaftar, sehingga pengunjung dapat mengunjungi situs web Anda.

Namun seperti telah dijelaskan pada pembahasan yang lalu, Anda dapat sekedar untuk mempelajari CMS WordPress atau menyiapkan situs Anda sebelum meluncurkannya di internet, dengan cara membangun situs web pada lokal (komputer rumahan).

Setelah Anda menyiapkan peralatan untuk membangun situs web di lokal, selanjutnya Anda harus menyediakan database yang akan digunakan untuk menyimpan data dari CMS WordPress. Silakan pelajari cara menambahkan pengguna MySQL dan cara membuat database pada MySQL. Catat baik-baik nama pengguna (username), kata sandi (password), dan nama database yang sudah Anda ciptakan.

Sekarang pergilah menuju situs WordPress Indonesia untuk mengunduh perangkat lunak CMS WordPress.

Halaman unduhan WordPress Indonesia

Halaman unduhan WordPress Indonesia

Salin berkas yang sudah Anda unduh ke D:\xampp\htdocs, kemudian dengan aplikasi WinRar, ekstrak berkas tersebut. Sekarang sudah terdapat folder baru dengan nama “wordpress” di D:\xampp\htdocs.

Berikutnya pada peramban Anda bukalah alamat: http://localhost/wordpress dan Anda akan memulai proses instalasi (pemasangan) CMS WordPress.

Penciptaan Berkas Konfigurasi

Penciptaan Berkas Konfigurasi

Klik tombol “Create a Configuration File” untuk membuat berkas konfigurasi WordPress. Anda akan masuk ke halaman ke dua. Silakan simak tulisan yang disampaikan. Lanjutkan dengan mengklik tombol “Ayo”.

Persiapan sebelum Pemasangan

Persiapan sebelum Pemasangan

Isikan data yang dibutuhkan oleh WordPress.

  1. Nama Basis data. Isikan dengan nama database yang sudah Anda ciptakan sebelumnya.
  2. Nama Pengguna. Isikan dengan nama pengguna yang juga sudah Anda ciptakan sebelumnya.
  3. Kata Sandi. Isikan dengan kata sandi (password) dari nama pengguna yang juga sudah Anda ciptakan sebelumnya.
  4. Host Basis data. Biarkan saja terisi dengan nilai default (localhost), kecuali jika Anda memiliki hosting internet dan mengharuskan untuk menentukan dengan alamat berbeda.
  5. Prefik Tabel. Isikan dengan beberapa karakter untuk membuat unik nama-nama tabel Anda. Usahakan jangan menggunakan prefiks default (wp_) karena rentan untuk diretas (hack). Disarankan untuk menggunakan karakter campuran antara huruf dan angka.
Pendaftaran Database

Pendaftaran Database

Klik tombol “Kirim” jika Anda sudah merasa yakin dengan data yang Anda masukan. Jika Anda menemukan halaman seperti ilustrasi di bawah ini, artinya data yang Anda masukan sudah tepat.

Memulai Menjalankan Pemasangan

Memulai Menjalankan Pemasangan

Klik tombol “Jalankan Instalasi” untuk menjalankan proses pemasangan WordPress.

Selanjutnya Anda akan diminta menginformasikan mengenai situs web yang Anda buat.

  1. Judul Situs. Isikan dengan judul situs Anda
  2. Nama Pengguna. Isikan dengan nama Anda atau nama keren (nick name) Anda. Nama ini akan digunakan untuk masuk ke halaman administrator (dasbor) WordPress.
  3. Kata Sandi. Isikan dengan kata sandi (password) yang akan Anda gunakan ketika masuk ke halaman administrator (dasbor) WordPress. Simak instruksi yang ditampilkan di bawah kotak isian.
  4. E-Mail. Isikan dengan alamat e-mail Anda. Alamat e-mail ini nantinya dapat pula Anda gunakan untuk masuk ke halaman administrator (dasbor) WordPress dan untuk pemulihan kata sandi baru jika Anda mengalami lupa kata sandi.
Pengisian Informasi Situs Web

Pengisian Informasi Situs Web

Gulung ke bawah jika terdapat bagian halaman yang tak terlihat.

Pemasangan WordPress

Pemasangan WordPress

Catat atau ingat baik-baik Nama Pengguna dan Kata Sandi, lanjutkan dengan mengklik tombol “Instal WordPress”. Jika berhasil, Anda akan dihadapkan dengan halaman seperti ilustrasi berikut ini.

Pemasangan Berhasil

Pemasangan Berhasil

Klik tombol “Masuk Log”, dan Anda akan dibawa ke halaman login.

Halaman Masuk ke Dasbor WordPress

Halaman Masuk ke Dasbor WordPress

Isikan Nama Pengguna dan Kata Sandi yang sudah Anda tentukan sebelumnya, kemudian klik “Masuk Log”. Jika benar, maka Anda akan diajak ke halaman administrator (dasbor) WordPress.

Halaman Administrator (Dasbord) WordPress

Halaman Administrator (Dasbord) WordPress

Untuk melihat halaman situs Anda, sorot (misalnya: “Toko Onlineku”) kemudian klik “Kunjungi Situs”. Secara otomatis Anda sudah memiliki postingan, halaman, dan komentar default.

Menuju Halaman Situs Web

Menuju Halaman Situs Web

Untuk mengunjugi kembali halaman administrator (dasbor) WordPress Anda dapat mengaksesnya melalui alamat: http://localhost/wordpress/wp-admin.

Selamat, Anda sudah berhasil memasang CMS WordPress pada komputer lokal Anda.

Halaman Situs Web Baru Anda

Halaman Situs Web Baru Anda

Sekilas Cascading Stylesheet (Bagian 2)

Saat ini CSS sudah mencapai generasi ke-3. CSS generasi ke-3 (selanjutnya disebut CSS3) menjadikan tampilan web menjadi lebih baik dengan ditambahkannya fitur-fitur baru, seperti: transformasi 2D, transformasi 3D, efek transisi, efek animasi, dan sebagainya. Maaf kiranya kalau saya tidak dapat menjelaskan lebih eterperinci mengenai CSS3, karena sayapun masih dalam proses mempelajarinya. Silakan melakukan googling untuk mempelajari lebih jauh tentang CSS3 ini.

Nah berikut ini contoh kelebihan yang disediakan CSS3. Buat sebuah folder dengan nama “css3″ di “D:\xampp\htdocs\”, kemudian jalankan Notepad++, atur bahasa (language) ke CSS, ketikkan skrip berikut ini:

div{
   padding: 4px 6px;
   border: 1px solid rgb(210,210,210);
   margin-bottom: 4px;
}
input{
   padding: 4px 6px;
   border: 1px solid rgb(210,210,210);
   margin-bottom: 4px;
}

/* efek Rounded */
.rounded {
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}

/* efek Gradasi */
.gradient{
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    background: -o-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}

/* efek Shadow Box */
.boxshadow{
    box-shadow: 0 0 3px rgba(120, 165, 255, 1);
    -webkit-box-shadow: 0 0 3px rgba(120, 165, 255, 1); 
    -moz-box-shadow: 0 0 3px rgba(120, 165, 255, 1);
}

/* efek Shadow Text */
.textshadow{
    text-shadow: -1px 1px 4px rgba(100,100,100,0.5);
}

/* efek Shadow Transisi */
.transition{
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
}
.transition:focus{
    box-shadow: 0 0 3px rgba(255, 125, 155, 1);
    -webkit-box-shadow: 0 0 3px rgba(255, 125, 155, 1); 
    -moz-box-shadow: 0 0 3px rgba(255, 125, 155, 1);
    border:1px solid rgba(255, 125, 155, 0.8);
}

.gradient:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    background: -o-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}

.gradient:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    background: -o-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

Simpan dengan nama “style.css”. Buat dokumen baru, kemudian tulis skrip berikut ini:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
        <title>Test CSS3</title>
    </head>
    <body>
        <div class="rounded" style="width:200px;">
            Test Rounded
        </div>
        <div class="gradient" style="width:200px;">
            Test Gradient
        </div>
        <div class="rounded gradient" style="width:200px;">
            Test Rounded + Gradient
        </div>
        <div class="rounded gradient boxshadow" style="width:200px;">
            Test Rounded + Gradient + Box Shadow
        </div>
        <div class="rounded  boxshadow textshadow" style="width:200px;font-weight:bold">
            Test Rounded + Box Shadow + Text Shadow
        </div>
        <input class="rounded transition" type="text" style="width:200px;" value="Contoh Rounded + Transition" />
    </body>
</html>

Simpan dengan nama “index.htm”. Silakan diuji coba pada peramban Anda!

Hasil CSS3

Hasil CSS3

Sekilas Cascading Stylesheet (Bagian 1)

Cascading Stylesheet(CSS) adalah suatu teknik untuk mengubah tampilan halaman web agar menjadi lebih menarik. Ada 3 (tiga) cara untuk memanfaatkan teknik ini, yaitu:

  1. Memisahkan skrip CSS pada sebuah file berekstensi *.css kemudian memanggilnya pada dokumen HTML
    <link rel="stylesheet" href="namafile.css" type="text/css" />
  2. Menuliskan secara langsung pada dokumen HTML pada kalang <STYLE>
    <style type="text/css">
        [skrip css di sini]
    </style>
  3. Menuliskan secara langsung pada tag/elemen HTML tertentu pada dokumen HTML
    <div style="[skrip css di sini]">

Jika menuliskan CSS menggunakan cara nomor 1 dan 2, maka Anda dapat memformat tampilan dari berbagai elemen dengan id dan class apapun, sementara cara nomor 3 hanya akan memformat tampilan dari elemen yang sedang dipilih.

Untuk memformat dengan cara nomor 1 dan 2, suatu skrip CSS harus merujuk kepada elemen umum atau elemen khusus (yang memiliki atribut tertentu) yang akan diformat, seperti berikut ini:

   /* Memformat dengan mengacu pada elemen */
   div {
       border: 1px solid rgb(0, 0, 0);
       color: red;
   }
   /* 
   Memformat dengan mengacu pada elemen khusus 
   yang memiliki atribut id dengan nilai "header" 
   */
   #header {
       font-size: 14px;
   }
   /* 
   Memformat dengan mengacu pada elemen khusus 
   yang memiliki atribut class dengan nilai "title" 
   */
   .title {
       fonr-weight: bold;
   }

Sebagai contoh, buatlah sebuah folder dengan nama “test-css” di alamat D:\xampp\htdocs, kemudian ketikkan skrip berikut ini pada Notepad++.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Test CSS</title>
        <style type="text/css">
           /* Memformat dengan mengacu pada elemen */
           body{
               font-size: 12px;
           }
           div {
               border: 1px solid rgb(0, 0, 0);
               color: red;
           }
           /* 
           Memformat dengan mengacu pada elemen khusus 
           yang memiliki atribut id dengan nilai "header" 
           */
           #header {
               font-size: 18px;
               border: 1px solid rgb(0, 255, 0);
           }
           #content {
               font-size: 14px;
               color: black;
           }
           /* 
           Memformat dengan mengacu pada elemen khusus 
           yang memiliki atribut class dengan nilai "title" 
           */
           .title {
               font-weight: bold;
               border: 1px solid rgb(255, 0, 0);
           }
        </style>
    </head>
    <body>
        <div>
            Test Div umum, hasil:<br />
            div akan dibingkai (border) warna hitam <br />
            warna huruf merah <br />
            ukuran huruf 12px <br />
        </div>

        <div id="header">
            Test Div dengan id = header, hasil:<br />
            div akan dibingkai (border) warna hijau <br />
            warna huruf merah <br />
            ukuran huruf 18px <br />
        </div>

        <div class="title">
            Test Div dengan class = title, hasil:<br />
            div akan dibingkai (border) warna merah  <br />
            warna huruf merah <br />
            ukuran huruf 12px <br />
            format huruf tebal <br />
        </div>

        <div id="content" class="title">
            Test Div dengan id = content dan class = title, hasil:<br />
            div akan dibingkai (border) warna merah  <br />
            warna huruf hitam <br />
            ukuran huruf 14px <br />
            format huruf tebal <br />
        </div>
    </body>
</html>

Simpan dengan nama “index.htm”, uji coba pada peramban Anda dengan menuliskan: http://localhost/test-css/
Selain itu, CSS juga dapat memformat elemen yang lebih khusus lagi, seperti memformat elemen yang merupakan “anak” dari elemen tertentu, silakan modifikasi skrip sebelumnya menjadi seperti berikut ini:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Test CSS</title>
        <style type="text/css">
           /* Memformat dengan mengacu pada elemen */
           body{
               font-size: 12px;
           }
           div {
               border: 1px solid rgb(0, 0, 0);
               color: red;
           }
           /* 
           Memformat dengan mengacu pada elemen khusus 
           yang memiliki atribut id dengan nilai "header" 
           */
           #header {
               font-size: 18px;
               border: 1px solid rgb(0, 255, 0);
           }
           #content {
               font-size: 14px;
               color: black;
           }
           /* 
           Memformat dengan mengacu pada elemen khusus 
           yang memiliki atribut class dengan nilai "title" 
           */
           .title {
               font-weight: bold;
               border: 1px solid rgb(255, 0, 0);
           }
           #header > span{
                background: rgb(192,192,192);
                padding: 4px;
               color: black
           }
        </style>
    </head>
    <body>
        <div>
            Test Div umum, hasil:<br />
            div akan dibingkai (border) warna hitam <br />
            warna huruf merah <br />
            ukuran huruf 12px <br />
            <span>Test span pada div</span>
        </div>

        <div id="header">
            Test Div dengan id = header, hasil:<br />
            div akan dibingkai (border) warna hijau <br />
            warna huruf merah <br />
            ukuran huruf 18px <br />
            <span>Test span pada header</span>
        </div>

        <div class="title">
            Test Div dengan class = title, hasil:<br />
            div akan dibingkai (border) warna merah  <br />
            warna huruf merah <br />
            ukuran huruf 12px <br />
            format huruf tebal <br />
            <span>Test span pada title</span>
        </div>

        <div id="content" class="title">
            Test Div dengan id = content dan class = title, hasil:<br />
            div akan dibingkai (border) warna merah  <br />
            warna huruf hitam <br />
            ukuran huruf 14px <br />
            format huruf tebal <br />
        </div>
    </body>
</html>

Silakan uji coba. Perhatikanlah bahwa elemen <SPAN> yang merupakan “anak” dari elemen div dengan id = header tampil berbeda dengan elemen pada div lainnya, akibat dari skrip:

#header > span{
    background: rgb(192,192,192);
    padding: 4px;
    color: black
}

Skrip di atas, dapat juga Anda tulis seperti berikut:

#header span{
    background: rgb(192,192,192);
    padding: 4px;
    color: black
}

Menyimpan data dari PHP ke MySQL

Anda sudah bisa mengkoneksikan PHP dengan MySQL dan menampilkan data dari tabel pada MySQL, sekarang tinggal bagaimana cara menyimpan data ke dalam tabel pada MySQL. Untuk keperluan tersebut, Anda membutuhkan sesuatu yang dinamakan form. Dalam HTML elemen form dibuat dengan tag <FORM>. Pada form akan terdapat elemen-elemen lain sebagai media input, untuk keperluan tersebut Anda akan menggunakan tag <INPUT>. Untuk pengenalan awal tentang form, cobalah ketikkan skrip berikut ini:

<html>
    <head>
    </head>
    <body>
        <form name="namaform" method="post" action="">
            <!-- Membuat label -->
            <label for="input_name">Nama Anda</label>

            <!-- Membuat media input berupa textbox -->
            <input type="text" name="input_name" size="35"/>
            <br/>

            <!-- Membuat label -->
            <label for="input_sex">Jenis Kelamin</label>

            <!-- Membuat media input berupa radio button -->
            <input type="radio" name="input_sex" value="pria" checked="1"/>Pria
            <input type="radio" name="input_sex" value="wanita"/>Wanita
            <br/>

            <!-- Membuat label -->
            <label for="input_religion">Agama</label>

            <!-- Membuat media input berupa combobox -->
            <select name="input_religion"/>
                <!-- Daftar pilihan pada combobox -->
                <option value="pilih" selected >--Pilih Agama—</option>
                <option value="islam">Islam</option>
                <option value="kristen">Kristen</option>
                <option value="katholik">Katholik</option>
                <option value="hindu">Hindu</option>
                <option value="budha">Budha</option>
                <option value="kepercayaan">Keercayaan</option>
            </select>
            <br/>

            <!-- Membuat label -->
            <label for="input_hobby">Hobby</label>

            <!-- Membuat media input berupa radio button -->
            <input type="checkbox" name="hobby_read" value="Membaca" checked="1"/>Membaca
            <input type="checkbox" name="hobby_write" value="Menulis"/>Menulis
            <input type="checkbox" name="hobby_calculate" value="Menulis"/>Berhitung
            <br/>

            <!-- Membuat label -->
            <label for="input_about">Tentang</label>

            <!-- Membuat media input berupa radio button -->
            <textarea name="input_about" cols="30" rows="5">Ceritakan mengenai diri Anda</textarea>
            <br/>

            <!-- Membuat tombol submit -->
            <input type="submit" name="submit" value="Submit"/>

            <!-- Membuat tombol reset -->
            <input type="reset" name="reset" value="Reset"/>
        </form>
    </body>
</html>

Simpan dengan nama “latihan2.php” di alamat D:\xampp\htdocs\phpmysql.
Uji coba pada peramban Anda, dengan menuliskan http://localhost/phpmysql/latihan1.php pada address bar, akan ditampilkan halaman HTML seperti pada ilustrasi di bawah ini:

Tampilan form pada HTML

Tampilan form pada HTML


Dalam mengirimkan data masukan yang diterima, form mempunyai dua metode pengiriman, yaitu POST dan GET. Untuk melihat perbedaanya silakan Anda ganti script di atas, pada bagian:

<form name="namaform" method="post" action="">

menjadi:

<form name="namaform" method="get" action="">

Simpan ulang berkas “latihan2.” Uji coba pada peramban Anda, masukkan informasi yang diperlukan oleh form, kemudian klik tombol Submit. Coba lihat address bar pada peramban Anda, di sana akan tertulis:

http://localhost/phpmysql/latihan2.php?input_name=Agung+Novian&input_sex=pria&input_religion=islam&hobby_read=Membaca&hobby_write=Menulis&input_about=Ceritakan+mengenai+diri+Anda&submit=Submit

Tampilan address bar

Tampilan address bar


Coba ubah kembali “method” dari “get” menjadi “post”.Simpan ulang berkas. Uji coba pada peramban Anda, isikan informasi yang diperlukan, klik tombol Submit.Lihat address bar pada peramban Anda.

http://localhost/phpmysql/latihan2.php

Sekarang Anda akan mencoba memasukkan data ke database MySQL. Buat dokumen baru di Notepad++, kemudian Anda tuliskan skrip berikut ini:

<html>
    <head>
    </head>
    <body>
    <?php
    /*Mengkoneksikan database MySQL*/
    $mysql_user = 'agungnovian';
    $mysql_password = '123456';
    $mysql_database = 'databaseku';
    $mysql_host = 'localhost';

    $koneksi_sql = @ mysql_connect(
                $mysql_host,$mysql_user,$mysql_password) 
                or die('mySQL tidak terkoneksi');

    $koneksi_database = mysql_select_db($mysql_database) 
                or die('Database tidak terkoneksi');
    ?>
    <form name="namaform" method="post" action="latihan3.php">
        <label for="input_judul">Judul</label>
        <input type="text" name="input_judul" size="35"/>
        <br/>

        <label for="input_kategori">Kategori</label>
        <!-- Membuat media input berupa combobox -->
        <select name="input_kategori"/>
			<!-- Daftar pilihan pada combobox -->
			<option value="pilih" selected >--Pilih Kategori--</option>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
        </select>
        <br/>

        <label for="input_isi">Isi</label>
        <textarea name="input_isi" cols="30" rows="5"></textarea>
        <br/>

        <label for="input_tag">Tag</label>
        <input type="text" name="input_tag" size="35"/>
        <br/>

        <input type="submit" name="submit" value="Submit"/>
        <input type="reset" name="reset" value="Reset"/>
        <br/>
        <br/>
        <?php
        /* Jika variabel submit diset*/
        if (isset($_POST['submit'])):
            /*
            Mengeset variabel-variabel
            berdasarkan data yang masuk
            melalui metode POST
            */
            $judul = $_POST['input_judul'];
            $kategori = $_POST['input_kategori'];
            $isi = $_POST['input_isi'];
            $tag = $_POST['input_tag'];

            /*
            Periksa apakah $judul kosong?
            Jika kosong, maka keluar dari PHP
            (PHP tidak akan melanjutkan baris-baris
            yang dituliskan berikutnya)
            */
            if (empty($judul))
            exit ('Judul tidak boleh kosong');

            if (empty($kategori))
            exit ('Kategori tidak boleh kosong');

            if (empty($isi))
            exit ('Isi tidak boleh kosong');

            if (empty($tag))
            exit ('Tag tidak boleh kosong');

            /* 
            Query untuk menambahkan baris data baru pada tabel_artikel
            */
            $query = "INSERT INTO tabel_artikel (judul,kategori,isi,tag) 
            VALUE ('$judul','$kategori','$isi','$tag')";

            /*
            Mengirimkan query dan menyimpan hasilnya pada variabel $hasil
            */
            $hasil = mysql_query($query);

            /* 
            Bila proses penambahan data berhasil tuliskan: "Data berhasil disimpan"
            */
            if ($hasil):
                echo "Data berhasil disimpan";
            endif;
        endif;
        ?>
        </form>
    </body>
</html>

Simpan dengan nama “latihan3.php”. silakan uji coba melalui browser Anda. Isikan informasi yang diminta, klik tombol Submit.Ketikkan http://localhost/phpmysql/latihan1.php pada address bar. Lihat apakah data yang baru saja Anda masukkan benar-benar tersimpan?

Koneksi PHP dan MySQL

Sekarang Anda akan menuju ke tahap berikutnya yaitu menghubungkan PHP dengan MySQL agar dapat membangun halaman web yang lebih dinamis. Pada pembahasan sebelumnya, Anda sudah membuat sebuah database dan sebuah tabel dengan nama “tabel_artikel”. Nah, mari kita coba untuk menghubungkan database tersebut dengan PHP.

Buatlah sebuah folder baru di alamat D:\xampp\htdocs namai dengan “phpmysql”. Jalankan Notepad++, mulailah mengetikkan skrip berikut ini:

<?php
/*
Mengumpulkan informasi untuk 
konfigurasi dengan database
*/
$mysql_user = 'nama_pengguna';
$mysql_password = 'kata_sandi';
$mysql_database = 'nama_database';
$mysql_host = 'localhost';
?>

Pada pembahasan terdahulu, Anda sudah pernah mendaftarkan nama pengguna beserta password, dan nama database pada phpMyAdmin. Coba ingat-ingat lagi informasi yang Anda tuliskan, perhatikan skrip di atas, ubah informasi-informasi untuk: “nama_pengguna”, “kata_sandi”, “nama_database” sesuai dengan yang pernah Anda berikan.

Jika sudah, mari lanjutkan penulisan skrip nya.

<?php
/*
Mengumpulkan informasi untuk 
konfigurasidengan database
*/
$mysql_user = 'agungnovian';
$mysql_password = '123456';
$mysql_database = 'database';
$mysql_host = 'localhost';

/*
Mengkoneksikan dengan MySQL,
jika koneksi gagal maka koneksi akan dimatikan
dan ditampilkan pesan error "mySQL tidak terkoneksi"
*/
$koneksi_sql = @ mysql_connect($mysql_host,$mysql_user,
$mysql_password) or die('mySQL tidak terkoneksi');

/*
memilih sebuah database pada mySQL,
jika koneksi gagal maka koneksi akan dimatikan
dan ditampilkan pesan error "Database tidak terkoneksi"
*/
$koneksi_database = mysql_select_db($mysql_database) 
                    or die('Database tidak terkoneksi');

?>

Simpan dengan nama “latihan1.php”. Coba uji melalui peramban dengan menuliskan http://localhost/phpmysql/latihan1.php pada address bar, jika pada halaman tertulis “mySQL tidak terkoneksi” berarti masih ada kesalahan dalam memasukkan data konfigurasi, perikasa nilai dari variabel $mysql_host, $mysql_user,atau $mysql_password. Refresh halaman browser Anda. Bila kemudian ditampilkan pesan “Database tidak terkoneksi”, maka periksa nilai pada $mysql_database.

Jika pada halaman browser tidak ditampilkan teks apapun, berarti koneksi berhasil. Lengkapi skrip sehingga seperti ini:

<html>
    <head>
    </head>
    <body>
<?php
/*
Mengumpulkan informasi untuk 
konfigurasi dengan database
*/

$mysql_user = 'agungnovian';
$mysql_password = '123456';
$mysql_database = 'databaseku';
$mysql_host = 'localhost';

/*
Mengkoneksikan dengan MySQL,
jika koneksi gagal maka koneksi akan dimatikan
dan ditampilkan pesan error "mySQL tidak terkoneksi"
*/
$koneksi_sql = @ mysql_connect(
            $mysql_host,$mysql_user,$mysql_password) 
            or die('mySQL tidak terkoneksi');

/*
memilih sebuah database pada mySQL,
jika koneksi gagal maka koneksi akan dimatikan
dan ditampilkan pesan error "Database tidak terkoneksi"
*/                
$koneksi_database = mysql_select_db($mysql_database) 
            or die('Database tidak terkoneksi');

/*
Membuat perintah SQL (query) 
untuk memilih isi dari tabel_artikel
*/
$query = "SELECT * FROM tabel_artikel ORDER BY idartikel DESC";

/*
Maksud perintah di atas adalah:
memilih semua field dari tabel_artikel, 
diurutkan terbalik berdasarkan fields idartikel 
*/

/*Menjalankan query*/
$hasil = mysql_query($query);

/* Jika perintah terlaksana dan memberikan hasil*/
if ($hasil){

    /*Melakukan pengulangan sebanyak data yanh didapat
    dan memecahnya ke dalam larik (array) 
    dan menyimpannya ke dalam variabel $data
    */
    while($data = mysql_fetch_array($hasil)){

        /* Mengisi variabel $idartikel dengan nilai 
        dari larik $data pada bagian 'idartikel' */
        $idartikel = $data['idartikel'];

         /* dst... */
        $kategori = $data['kategori'];
        $judul = $data['judul'];
        $isi = $data['isi'];
        $tag = $data['tag'];

        /* menampilan hasil untuk halaman HTML pada elemen DIV */
        echo "<div>\n";
        echo "ID = ".$id." Judul = ".$judul;
        echo " Isi = ".$isi." Tag = ".$tag."\n";
        echo "</div>\n";
    }
}
?>
    </body>
</html>

Silakan uji coba pada peramban Anda.

Menampilkan data dari MySQL

Menampilkan data dari MySQL

Sekilas MySQL (Bagian 4)

Mengekspor Tabel

phpMyAdmin menyediakan fasilitas untuk mengekspor tabel. Mengekspor tabel setidaknya dapat digunakan untuk mem-backup tabel, sehingga ketika tabel Anda rusak, Anda mempunyai cadangan untuk mengembalikannya ke kondisi tabel semula.Lebih lanjut, kegunaan ekspor ini adalah untuk memindahkan tabel antar database dan antar host.

Klik tab “Export” untuk memulai, sepertinya tidak perlu melakukan perubahan nilai standard yang diperlukan, cukup gulung saja halaman ke sisi paling bawah, kemudian tandai “Save as file”, klik tombol Go.

Mengekspor database

Mengekspor database


Anda akan dibuatkan sebuah file dengan nama “tabel_artikel” berekstensi *.sql. coba buka file tersebut, apa isinya? Berupa perintah-perintah dalam struktur bahasa SQL ya? Seperti berikut:

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

CREATE TABLE IF NOT EXISTS `tabel_artikel` (
  `idartikel` int(11) NOT NULL AUTO_INCREMENT,
  `kategori` int(11) NOT NULL,
  `judul` varchar(100) NOT NULL,
  `isi` text NOT NULL,
  `tag` text NOT NULL,
  PRIMARY KEY (`idartikel`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

INSERT INTO `tabel_artikel` (`idartikel`, `kategori`, `judul`, `isi`, `tag`) VALUES
(1, 1, 'Artikel pertamaku', 'Ini adalah artikel pertamaku', 'artikel,pertama,webku');

Mengimpor Tabel

Ada ekspor berarti ada impor.Kalau ekspor berguna untuk mem-backup database atau tabel, maka ekspor tentu saja kebalikannya, yaitu untuk me-restore (mengembalikan) tabel.Lebih lanjut fungsi ekspor ini digunakan untuk menambahkan tabel atau baris data.

Klik tab “Import”, pada kotak “File to import”, klik tombol “Browse”, untuk pengujian, pilih file “tabel_artikel.sql” yang baru saja dibuat melalui proses ekspor. Klik tombol Go untuk memproses.

Kesalahan saat mengimpor database

Kesalahan saat mengimpor database


Oh, ternyata terjadi kesalahan, kenapa bisa begini? Karena pada database sudah ada tabel dengan nama “tabel_artikel”, cobalah untuk menghapus “tabel_artikel” kemudian lakukan proses impor sekali lagi.

Bagaimana cara menghapus tabel? Klik link “Database: databaseku”, di sisi atas halaman, setelah itu klik tombol bergambar X pada baris nama tabel yang akan dihapus. Ketika ditampilkan kotak konfirmasi, klik tombol OK.

Menghapus tabel

Menghapus tabel


Setelah melakukan proses impor kembali, jika berhasil maka akan ditampilkan halaman seperti ini:
Impor database berhasil

Impor database berhasil

Menjaankan Query

Satu lagi fitur yang disediakan phpMyAdmin adalah SQL query.Anda bisa langsung memasukan perintah (query) SQL kemudan memprosesnya. Untuk menggunakannya, silakan klik tab “SQL”, kemudian tuliskan perintah SQL pada kotak yang disediakan, terakhir klik tombol Go. Sebagai contoh, ketikkan perintah SQL berikut ini:

INSERT INTO tabel_artikel (kategori, judul, isi, tag) VALUES
(2, 'artikel kedua', 'Ini adalah artikel keduaku', 'artikel,kedua,webku');
Menjalankan query

Menjalankan query