Rabu, 25 Maret 2015

PHP MySQL Database - Tutorial Membuat Website Toko Buku Sederhana

Hari ini capung akan belajar pemrograman PHP dengan menggunakan database MYSQL. Sebelumnya saya sudah pernah menjelaskan dan belajar tentang kode-kode PHP, sekarang kita menggunakan database untuk menyimpan data-data yang ingin disimpan. Berikut sedikit penjelasan tentang PHP dan MYSQL.


Dengan PHP, Kamu dapat terhubung dan memanipulasi database.

MySQL adalah sistem database yang paling populer digunakan dengan PHP.

Apa itu MySQL?
  • MySQL adalah sistem database yang digunakan di web
  • MySQL adalah sistem database yang berjalan pada server
  • MySQL sangat ideal untuk aplikasi kecil dan besar
  • MySQL sangat cepat, handal, dan mudah digunakan
  • MySQL menggunakan SQL standar
  • MySQL mengkompilasi pada sejumlah platform
  • MySQL bebas untuk men-download dan digunakan
  • MySQL dikembangkan, didistribusikan, dan didukung oleh Oracle Corporation
  • MySQL dinamai putri pendiri ini Monty Widenius: My

Download MySQL Database


Jika Anda tidak memiliki sebuah server PHP dengan database MySQL, Anda dapat men-download secara gratis di sini: http://www.mysql.com

Fakta Tentang MySQL database


MySQL adalah sistem database standar de-facto untuk situs web dengan volume besar dari kedua data dan pengguna akhir seperti Facebook, Twitter, dan Wikipedia.

Satu hal besar mengenai MySQL adalah bahwa hal itu dapat diperkecil untuk mendukung aplikasi database tertanam.

Lihatlah http://www.mysql.com/customers/ untuk gambaran perusahaan menggunakan MySQL.


PHP dengan Dreamweaver 8

Untuk membuat website dengan PHP kita memerlukan Software Macromedia Dreamweaver, dalam pembuatan program ini saya menggunakan Dreamweaver 8, berikut link download berikut:
Download Number Key

PHP Connect to MySQL


Untuk menjalankan database MySQl kamu perlu menginstal XAMPP, Pelajari cara menginstal XAMPP klik disini. Kemudin klik Start di Apache dan MySQL.



Tutorial Membuat Website Toko Buku

Aplikasi sederhana ini terdiri dari 3 alur sederhana, yaitu daftar buku, form order dan proses order. Pada alur pertama menampilkan halaman berisikan sejumlah daftar buku yang diambil dari tabel buku yang tersimpan di database. Pada form order, menampilkan form yang berisikan informasi belanja buku dari pengunjung. Dan proses order merupakan alur terakhir yang di dalamnya memproses informasi dari form order yang dimasukkan oleh pengunjung.




Buat Tabel di Database MySQL

Nama database: bookstore

Tabel books: berisikan daftar buku

FieldTipeDeskripsiKeterangan
book_idintID BukuPrimary Key & AUTO_INCREMENT
book_namevarchar(10)Nama Buku-
book_pricedecimal(10,2)Harga Buku-

Tabel orders: berisikan order / pembelian yang dilakukan oleh pengunjung

FieldTipeDeskripsiKeterangan
order_idintID OrderPrimary Key & AUTO_INCREMENT
order_namevarchar(10)Nama Pembeli-
order_addresstextAlamat Pembeli-
book_idintID BukuForeign Key dari tabel books
order_amountdecimal(10,2)Jumlah Pembelian-

Pastikan phpMyAdmin telah terinstal, dan buka di peramban web dengan alamat http://localhost/phpmyadmin. Lalu pada halaman "Home" phpMyAdmin klik tab "Databases", dan masukkan "bookstore" (tanpa tanda kutip) pada bagian "Create new database".
Database dengan nama "bookstore" akan disimpan di MySQL. Pilih database "bookstore" yang telah dibuat sebelumnya, lalu pada bagian "Create table on database bookstore", masukkan nama tabel yang ingin dibuat, tabel pertama yang dibuat adalah "books" dan masukkan banyaknya kolom / field pada tabel tersebut.

Setelah mendefinisikan nama tabel beserta banyaknya field, langkah selanjutnya adalah mengatur struktur tabel. Di bagian ini, kita menentukan tipe data pada setiap field, menentukan "Storage engine", dan pengaturan lainnya. Untuk tipe field, silahkan lihat pada tabel struktur database di atas. Lakukan langkah yang sama pada pembuatan tabel "orders".

Isikan beberapa data contoh pada tabel "books". Caranya dengan memilih tabel "books", lalu klik tab "Insert". Masukkan beberapa data di dalamnya.

Mengelola File-file yang Dibutuhkan

File-file aplikasi terdiri dari file PHP, CSS dan gambar yang dibutuhkan untuk tampilan. Berikut struktur file aplikasi:
Folder imagesberisikan gambar-gambar yang dibutuhkan untuk tampilan
list.phpfile PHP yang berisikan script untuk menampilkan daftar buku
order.phpfile PHP yang berisikan script untuk menampilkan Form Order
order_process.phpfile PHP yang berisikan script yang memproses data-data dari Form Order
style.cssfile CSS yang digunakan untuk merapihkan tampilan

Buat file-file serta folder yang dibutuhkan di lokasi dokumen web server agar dapat dieksekusi oleh web server. Untuk file-file gambar, silahkan unduh di sini

Alur 1 - Membuat Daftar Buku

Semua skrip yang digunakan untuk menampilkan data buku disimpan pada file list.php. Dua langkah dalam menampilkan daftar buku, pertama mengambil data yang tersimpan di dalam database, selanjutnya menampilkan dalam bentuk HTML.
Berikut pengkodean untuk mengambil data daftar buku yang tersimpan dalam database:
mysql_connect('localhost', 'root', '');
mysql_select_db('bookstore');
$result = mysql_query("SELECT * FROM books");
Pada baris pertama, fungsi mysql_connect() melakukan koneksi ke MySQL dan dilanjutkan dengan baris berikutnya memilih database 'bookstore' dengan menggunakan fungsi mysql_select_db(). Ketika koneksi ke MySQL dan memilih database berhasil, dengan menggunakan perintah "SELECT" untuk mengambil data dari tabel "books" dan hasil dari query yang dilakukan fungsi mysql_query() dimasukkan ke dalam variabel $result.
Selanjutnya, data yang diambil dari kode di atas kemudian ditampilkan dalam bentuk HTML. Berikut kode untuk menampilkan data daftar buku:
echo "<h1>Books List</h1>";
echo "<ul>";
while($data = mysql_fetch_array($result)) {
    echo "<li>$data[book_name] : Rp. $data[book_price]</li>";
}
echo "</ul>";
Fungsi echo digunakan untuk menampilkan keluaran dalam bentuk HTML. Struktur kendali perulangan while digunakan untuk melakukan perulangan dari data-data yang berhasil diperoleh dari query sebelumnya. Fungsi mysql_fetch_array() digunakan untuk mengambil data dari variabel $result yang dikembalikan dalam bentuk array.
Secara utuh, skrip file list.php adalah sebagai berikut:
list.php
<html>
<head>
    <title>Book Store</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<?php
// koneksi ke database
mysql_connect('localhost', 'root', '');
// pilih database
mysql_select_db('bookstore');
// melakukan query 
$result = mysql_query("SELECT * FROM books");
 
// menampilkan ke browser
echo "<h1>Books List</h1>";
echo "<ul>";
// mengambil data
while($data = mysql_fetch_array($result)) {
    echo "<li>$data[book_name] : Rp. $data[book_price]</li>";
}
echo "</ul>";
?>
<a href="order.php">[order]</a>
</body>
<html>

Alur 2 - Membuat Form Order

Pada bagian ini sebenarnya hanya menampilkan bentuk form order yang terdiri dari sintak HTML. Hanya saja, option di dalam tag select membutuhkan data-data dari tabel books, dan memerlukan perintah PHP untuk melakukan pengambilan tersebut. Form order disimpan dengan nama file order.php
Berikut kode form order:
<form method="post" action="order_process.php">
    <p>
        Nama: <br /> 
        <input type="text" name="nama">
    </p>
    <p>
        Alamat: <br />
        <textarea name="alamat"></textarea>
    </p>
    <p>
        Buku: <br />
        <select name="buku">
            <?php 
            // mengambil data dari tabel books
            ?>
        </select>
    </p>
    <p>
        Jumlah: <br />
        <input type="text" name="jumlah" size="5">
    </p>    
    <p>
        <input type="submit" value="Beli" class="button">
    </p>    
</form>
Pada bagian pemilihan buku, sintak pengambilan datanya ditambahkan menjadi sebagai berikut:
<p>
    Buku: <br />
    <select name="buku">
    <?php
    mysql_connect('localhost', 'root', '');
    mysql_select_db('bookstore');
    $result = mysql_query("SELECT * FROM books");
    while($data = mysql_fetch_array($result)) {
        echo "<option value='$data[book_id]'>$data[book_name] : Rp. $data[book_price]</option>";
    }
    ?>
    </select>
</p>
Secara lengkap kode form order sebagai berikut:
order.php
<html>
<head>
    <title>Book Store</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Order</h1>
<form method="post" action="order_process.php">
    <p>
        Nama: <br /> 
        <input type="text" name="nama">
    </p>
    <p>
        Alamat: <br />
        <textarea name="alamat"></textarea>
    </p>
    <p>
        Buku: <br />
        <select name="buku">
        <?php
        // koneksi ke database
        mysql_connect('localhost', 'root', '');
        // pilih database
        mysql_select_db('bookstore');
        // melakukan query 
        $result = mysql_query("SELECT * FROM books");
        while($data = mysql_fetch_array($result)) {
            echo "<option value='$data[book_id]'>$data[book_name] : Rp. $data[book_price]</option>";
        }
        ?>
        </select>
    </p>
    <p>
        Jumlah: <br />
        <input type="text" name="jumlah" size="5">
    </p>    
    <p>
        <input type="submit" value="Beli" class="button">
    </p>    
</form>
</body>
<html>

Alur 3 - Membuat Proses Order

Seperti yang telah didefinisikan melalui attribut "action" yang ada di tag "form" untuk order di atas, file php yang digunakan adalah order_process.php. Begitu pula dengan metode pengiriman yang didefinisikan dari attribut "method" pada tag "form", metode post digunakan sebagai pengirimannya, dan PHP mengambil data dengan menggunakan variabel global $_POST untuk mengambil data tersebut.
Berikut kode pengambilan data dengan $_POST:
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$buku = $_POST['buku'];
$jumlah = $_POST['jumlah'];
Setiap order yang dilakukan oleh pengunjung disimpan ke dalam tabel "orders", berikut adalah sintak untuk memasukkan data ke dalam tabel orders:
mysql_connect('localhost', 'root', '');
mysql_select_db('bookstore');
mysql_query("INSERT INTO orders (order_name, order_address, book_id, order_amount) 
             VALUES ('$nama', '$alamat', '$buku', '$jumlah')");
Cara memasukkan data hampir sama dengan pengambilan data pada kode-kode sebelumnya, yaitu melakukan koneksi ke MySQL dan memilih database, hanya saja perintah SQL yang digunakan adalah "INSERT" pada fungsi mysql_query().
Langkah terakhir adalah menampilkan konfirmasi order dengan menggunakan fungsi echo. Tetapi, sebelum menampilkan konfirmasi order, perlu diperhatikan bahwa variabel $buku yang dikirim berisikan ID Buku, maka untuk memperoleh informasi nama buku dan harganya dibutuhkan pengambilan data dari tabel books sebelum diolah menjadi tampilan konfirmasi order. Berikut sintaknya:
// mengambil data dari tabel books
$result = mysql_query("SELECT * FROM books WHERE book_id = '$buku'");
$data = mysql_fetch_array($result);
$total = $jumlah * $data['book_price'];
// menampilkan konfirmasi order
echo "<h2>Terima kasih !!</h2>";
echo "<p>Anda telah berhasil melakukan pembelian, berikut data pembelian Anda:</p>";
echo "<p>Nama : $nama</p>";
echo "<p>Alamat : $alamat</p>";
echo "<p>Buku : $data[book_name]</p>";
echo "<p>Harga : $jumlah x $data[book_price] = $total</p>";
Kode lengkap memproses order sebagai berikut:
order_process.php
<html>
<head>
    <title>Book Store</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<?php
// mengambil data yang telah di submit
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$buku = $_POST['buku'];
$jumlah = $_POST['jumlah'];
 
// koneksi ke database
mysql_connect('localhost', 'root', '');
// pilih database
mysql_select_db('bookstore');
// memasukkan data ke dalam tabel orders
mysql_query("INSERT INTO orders (order_name, order_address, book_id, order_amount) 
             VALUES ('$nama', '$alamat', '$buku', '$jumlah')");
 
// mengambil data dari tabel books
$result = mysql_query("SELECT * FROM books WHERE book_id = '$buku'");
$data = mysql_fetch_array($result);
$total = $jumlah * $data['book_price'];
// menampilkan konfirmasi order
echo "<h2>Terima kasih !!</h2>";
echo "<p>Anda telah berhasil melakukan pembelian, berikut data pembelian Anda:</p>";
echo "<p>Nama : $nama</p>";
echo "<p>Alamat : $alamat</p>";
echo "<p>Buku : $data[book_name]</p>";
echo "<p>Harga : $jumlah x $data[book_price] = $total</p>";
?>
</body>
<html>

Merapihkan Halaman Web

Langkah terakhir adalah merapihkan tampilan web dengan CSS. File yang berisikan kode-kode CSS disimpan dengan nama file style.css. Berikut adalah isi dari kode CSS:
style.css
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
}
 
h1 {
    font-size: 11pt;
    padding-left: 20px;
    background: url(images/cart.png) no-repeat;
}
 
h2 {
    font-size: 11pt;
    padding-left: 0px;
}
 
ul li {
    padding-bottom: 3px;
    list-style-image: url(images/list.png);
}
 
input { 
    font-size: 9pt; 
    background-color: #F5F5F5; 
    border: 1px solid #666666; 
}
 
textarea { 
    font-size: 9pt; 
    background-color: #F5F5F5; 
    border: 1px solid #666666; 
}
 
input.button
{
    font-family : Helvetica, Arial, sans-serif;
    font-size   : 11px;
    font-weight : bold;
    color       : black;
    background-color    : #dddddd;
    border      : 1px solid black;
}

Setelah selesai semua kode telah dibuat maka kamu bisa menjalankan web toko buku sederhana buatan kamu sendiri.








Sumber: w3schools.com dan saung-foss.web.id

XAMPP Tutorial

Cara Menggunakan XAMPP untuk menjalankan Web Server Sendiri.

XAMPP singkatan dari Cross-Platform (X), Apache (A), MySQL (M), PHP (P) dan Perl (P).

Distribusi Apache ringan yang membuatnya sangat mudah bagi pengembang untuk membuat server web lokal untuk tujuan pengujian. Semua yang Anda butuhkan untuk membuat sebuah web server - server aplikasi (Apache), database (MySQL), dan bahasa scripting (PHP) - termasuk dalam file diekstrak sederhana. XAMPP juga cross-platform, yang berarti bekerja sama dengan baik di Linux, Mac dan Windows. Karena sebagian besar penyebaran web server yang sebenarnya menggunakan komponen yang sama seperti XAMPP, itu membuat transisi dari server tes lokal ke server online sangat mudah. Pengembangan web menggunakan XAMPP terutama pemula sangat mudah menjalankannya.

Apa yang Termasuk dalam XAMPP?

XAMPP memiliki empat komponen utama. Ini adalah:
  1. Apache: Apache adalah server aplikasi web yang sebenarnya yang memproses dan memberikan konten web ke komputer. Apache adalah web server yang paling populer online, powering hampir 54% dari semua situs web.

  2. MySQL: Setiap aplikasi web, bagaimanapun sederhana atau rumit, memerlukan database untuk menyimpan data yang dikumpulkan. MySQL yang open source adalah sistem manajemen database yang paling populer di dunia. Segala sesuatu dari situs hobi ke platform profesional seperti WordPress. 

  3. PHP: PHP adalah singkatan dari Hypertext Preprocessor. Ini adalah server-side scripting bahasa yang digunakan beberapa situs yang paling populer di dunia, termasuk WordPress dan Facebook. Ini adalah open source, relatif mudah untuk belajar, dan bekerja sempurna dengan MySQL menjadikannya pilihan populer bagi para pengembang web.

  4. Perl: Perl adalah tingkat tinggi, bahasa pemrograman dinamis yang digunakan secara luas dalam pemrograman jaringan, sistem admin, dll Meskipun kurang populer untuk tujuan pengembangan web, Perl memiliki banyak aplikasi niche.

Versi berbeda dari XAMPP mungkin memiliki komponen tambahan seperti phpMyAdmin, OpenSSL, dan lain-lain untuk membuat server web penuh.


Bagaimana Cara Menginstal XAMPP?

[Catatan: Untuk tujuan tutorial XAMPP ini, kami akan menganggap bahwa Anda menggunakan PC Windows, meskipun petunjuk ini bekerja sama dengan baik untuk komputer Mac. Pengguna Linux, bagaimanapun, harus mengacu pada panduan instalasi XAMPP Linux resmi.]

Download XAMPP untuk homepage Windows pada ApacheFriends.org. Di sini, Anda akan menemukan beberapa versi XAMPP.


Download XAMPP

Men-download XAMPP
XAMPP tersedia dalam tiga format file:
  1. EXE - File Self-eksekusi; termudah untuk menginstal.

  2. .7z - File 7zip. Disukai oleh puritan, meskipun memerlukan bekerja dengan file bat lebih rumit untuk menginstal.

  3. ZIP - Compressed file zip. Seperti .7z, menginstal melalui file ZIP jauh lebih sulit daripada menggunakan EXE
EXE adalah yang paling mudah untuk menginstal, kita akan menggunakan format file ini untuk tutorial ini.

Anda dapat men-download installer XAMPP dari Sourceforge sini (102MB).


Instalasi XAMPP

Ikuti langkah-langkah untuk menginstal XAMPP:

Langkah 1: Nonaktifkan anti-virus Anda karena dapat menyebabkan beberapa komponen XAMPP tidak mau terinstal.

Langkah 2: Mulai proses instalasi dengan mengklik dua kali pada installer XAMPP. Klik 'Next' setelah splash screen.


Langkah 3: Di sini, Anda dapat memilih komponen yang ingin Anda instal. Pilih pilihan default dan klik 'Next'.


Langkah 4:. Pilih folder yang ingin menginstal XAMPP di folder ini akan menampung semua file aplikasi web Anda, jadi pastikan untuk memilih drive yang memiliki banyak ruang.


Langkah 5: Layar berikutnya adalah promo untuk BitNami, sebuah toko aplikasi untuk perangkat lunak server. Hapus kotak centang 'Learn more about BitNami for XAMPP', kecuali jika Anda benar-benar menerima mail promo!


Langkah 6: Setup sekarang siap untuk menginstal XAMPP. Klik Next dan tunggu installer untuk membongkar dan memasang komponen yang dipilih. Ini mungkin memakan waktu beberapa menit. Anda mungkin diminta untuk menyetujui akses Firewall untuk komponen tertentu (seperti Apache) selama proses instalasi.

Langkah 7: Instalasi sekarang lengkap! Pilih Kotak centang 'Do you want to start the Control Panel now?' untuk membuka panel kontrol XAMPP.


Memahami XAMPP Control Panel

Berikut ini adalah gambaran singkat dari Control Panel. Untuk saat ini, Anda hanya perlu tahu bagaimana untuk memulai dan menghentikan server Apache.


Testing Instalasi XAMPP Anda

Ikuti langkah-langkah untuk menguji instalasi XAMPP Anda dengan menampilkan web server Apache dan membuat file PHP sederhana.

Langkah 1: Di panel kontrol XAMPP, klik 'Start' di bawah 'Actions' untuk modul Apache. Hal ini menginstruksikan XAMPP untuk memulai webserver Apache.

Langkah 2: Buka browser web Anda dan ketik: http://localhost atau 127.0.0.1

Langkah 3: Pilih bahasa Anda dari splash screen.


Langkah 4: Anda akan melihat layar berikut. Ini berarti Anda telah berhasil menginstal XAMPP di komputer Anda.


Langkah 5: Sekarang kita akan menguji apakah XAMPP telah terinstal PHP berhasil. Untuk melakukan hal ini, buka Notepad dan ketik berikut ke dalam dokumen baru:

<?php
   echo ‘Hello world';
?>

Simpan file ini sebagai 'test.php' di c:\ xampp \ htdocs \ (atau direktori dimana kamu menginstal XAMPP).

Langkah 6: ketikkan di browser web kamu 'http://localhost / test.php'. Kamu akan melihat tulisan "Hello World" :

Selamat! Anda sekarang telah berhasil menginstal XAMPP dan bahkan menulis program PHP pertama Anda. Anda sekarang dapat menggunakan webserver Apache lokal Anda untuk membuat dan menguji kompleks aplikasi PHP web, bermain dengan MySQL dan bahkan belajar bagaimana sebenarnya web server bekerja dengan Tomcat, FileZilla, OpenSSL, dan banyak lagi.  

Seperti biasa, saya akan senang mendengar pendapat dari Anda, dan opini tentang pengembangan web menggunakan XAMPP di komentar di bawah!




Sumber: blog.udemy.com