Tutorial : Membuat Website PHP Pertama Anda [Pendahuluan]

Posted by & filed under , , .

Bahasa program PHP digunakan untuk membangun website dinamis, yaitu website-website yang membutuhkan perubahan secara rutin, sedangkan website yang dibangun dengan hanya menggunakan HTML (dan CSS) adalah website statis yang tidak dapat diupdate isinya, kecuali dengan melakukan perubahan secara manual ke dalam kode-kode HTMLnya. Namun untuk tutorial PHP pertama ini, kita belum menggunakan PHP untuk membuat website dinamis, karena kita belum menggunakan database. Anda hanya akan diperkenalkan dengan cara kerja PHP serta mengenal beberapa fungsi dan penggunaan variabel PHP (PHP variable).

Sebelum memulai membuat website PHP, pastikan anda sudah menginstal server Apache di komputer anda sebagai local server seperti yang dijelaskan disini dan server sudah dalam keadaan aktif. Untuk memastikan bahwa server lokal anda sudah berjalan, coba buka di browser anda http://localhost/, maka akan terbuka halaman yang berisi Configuration Server lokal anda.

Selanjutnya mari kita mulai mencoba menggunakan kode-kode PHP untuk membuat halaman website.

Langkah Pertama

Buat dulu folder baru di localhost anda untuk menyimpan file PHP yang akan anda bangun. Misalkan nama foldernya adalah “belajar-php“. Kalau anda menggunakan WAMPServer, maka localhost anda berada di bawah folder wamp->www-> sedangkan jika anda menggunakan XAMPP artinya localhost anda berada di folder XAMPP->www->, berarti sekarang anda sudah mempunya folder wamp->www->belajar-php atau XAMPP->www->belajar-php.

Buka teks editor anda (Notepad, notepad++, DreamWeaver, PSPad atau editor apa aja yang anda sukai), buat dokumen baru dan simpan di localhost anda dengan nama index.php di folder “belajar-php” yang anda buat tadi. Sekarang ada coba buka di browser http://localhost/belajar-php/ maka akan muncul halaman kosong.

Langkah Kedua

Tuliskan kode berikut di dalam file index.php anda :

<html>
<head>
<title>Belajar PHP</title>
</head>
<body>
<h1>Ini judul Utama</h1>
<p>Ini paragraf pertama</p>
</body>
</html>

Simpan dokumen anda dan coba buka kembali/refresh http://localhost/belajar-php/ di browser, sekarang halaman website anda berisi heading : “Ini Judul Utama” dan paragraf : “Ini paragraf pertama”.  Tapi halaman yang anda buat masih menggunakan HTML murni. Sekarang masi kita sisipkan kode PHP, seperti berikut :

<html>
<head>
<title>Belajar PHP</title>
</head>
<body>
<h1><?php echo "Ini Judul Utama"; ?></h1>
<p><?php echo "Ini paragraf pertama"; ?></p>
</body>
</html>

Simpan dokumen, kemudian refresh browser anda yang sedang membuka http://localhost/belajar-php/ tadi. Ternyata tampilan yang dihasilkan sama kan?

Nah setiap kode PHP harus dimulai dengan tag <?php dan ditutup dengan tag ?> . Bisa juga menggunakan short tag <? ?>, tapi anda harus melakukan sedikit perubahan pada file php.ini yang sebaikan hindarkan dulu sebagai pemula.   Perintah echo pada PHP adalah perintah untuk menampilkan konten ke halaman browser.  Dan setiap statement atau pernyataan pada PHP selalu diakhiri dengan tanda semicolon (;) atau titik koma.

Selanjutnya coba ubah kode anda menjadi seperti berikut :

<html>
<head>
<title>Belajar PHP</title>
</head>
<body>
<?php echo "<h1>Ini Judul Utama</h1>"; ?>
<?php echo "<p>Ini paragraf pertama</p>"; ?>
</body>
</html>

Simpan dan refresh kembali browser anda. Tampilannya masih sama bukan? Dari sini anda akan paham bahwa output yang diberikan oleh PHP akan dibaca oleh browser dan menerjemahkannya sebagai bahasa HTML, jadi ketika PHP memerintahkan output  <h1></h1> maka kode ini akan diterjemahkan sebagai Heading pada kode HTML. Inilah yang dimaksud bahwa PHP bekerja disisi server bukan di sisi browser.

Langkah Ketiga

Berikutnya kita akan coba menggunakan variabel PHP. Ubah dokumen anda menjadi seperti berikut :

<?php 
$nama = "Fandhie Deeng"; 
$usia = 10;
$adik = "Rocky"; 
$usiaAdik = 5; 
?>
<html>
<head>
<title>Belajar PHP</title>
</head>
<body>
<h1><?php echo "Ini Judul Utama"; ?></h1>
<p><?php echo "Ini paragraf pertama"; ?></p>
<p>Nama Saya : <?php echo $nama;?></p>
<p>Usia Saya : <?php echo $usia;?> tahun</p>
<p>Nama Adik Saya : <?php echo $adik;?></p>
<p>Usia Adik Saya : <?php echo $usiaAdik;?> tahun</p>
<p>Usia kami berdua dijumlahkan menjadi : <?php echo $usia + $usiaAdik;?></p>
<p>kalau nama kami digabung menjadi <?php echo "$nama $adik";?></p>
</body>
</html>

Simpan, refresh browser anda dan lihat hasilnya.  Pada script diatas kita telah menetapkan atau membuat variabel menggunakan PHP, yaitu variabel $nama, $usia, $adik dan $usiaAdik.  Variabel pada PHP adalah case-sensitive, jadi variabel $usiaAdik akan berbeda dengan $usiaadik.

Kenapa nilai variabel $nama menggunakan tanda menjadi “Fandhie Deeng”, sedangkan variabel $usia tidak menggunakan tanda ? Karena nilai variabel $nama berbentuk string (teks) sedangkan variabel $usia adalah integer (angka).  Coba anda rubah nilai variabel $nama dari “Fandhie Deeng”  menjadi Fandhie Deeng saja tanpa koma pembuka dan penutup diatas, refresh browser anda makan akan terjadi error.

Perhatikan kode berikut :

<p>Nama Saya : <?php echo $nama;?></p>
<p>Usia Saya : <?php echo $usia;?> tahun</p>
<p>Nama Adik Saya : <?php echo $adik;?></p>
<p>Usia Adik Saya : <?php echo $usiaAdik;?> tahun</p>

Pada dasarnya variabel-variabel yang telah ditetapkan oleh PHP dapat dimunculkan di halaman website dengan perintah echo. Untuk penggunaannya dalam website dinamis, variabel-varibel ini nantinya dapat kita ambil dari database (akan dibahas pada tutorial-turorial berikutnya).

Selanjutnya perhatikan kode-kode berikut :

<p>Usia kami berdua dijumlahkan menjadi : <?php echo $usia + $usiaAdik;?></p>
<p>kalau nama kami digabung menjadi <?php echo "$nama $adik";?></p>

Kenapa pada baris pertama kita tidak menggunakan tanda koma penutup dan pembuka pada <?php echo $usia + $usiaAdik;?>< sedangkan baris kedua <?php echo “$nama $adik“;?>< menggunakan tanda koma pembuka dan penutup untuk mengapit $nama $adik ? Iya, karena varibel $usia dan $usiaAdik adalah integer, tanpa diapit koma pembuka dan penutup maka nilai variabel $usia dan $usiaAdik akan dijumlahkan. Coba anda tambahkan koma pembuka dan penutup pada kode tersebut menjadi :

<p>Usia kami berdua dijumlahkan menjadi : <?php echo "$usia + $usiaAdik";?></p>

Refresh browser anda, maka output yang dihasilkan akan berbeda, PHP akan memperlakukan kedua variable tersebut sebagai string (teks), bukan sebagai integer lagi.
Sekarang coba anda rubah baris kedua dengan menghilangkan koma pengapit menjadi :

<p>kalau nama kami digabung menjadi <?php echo $nama $adik;?></p>

Refresh browser, maka akan terjadi error, karena untuk menggabungkan 2 atau lebih variable string memang harus menggunakan koma pengapit. Jelas bukan?

Langkah Keempat

Pada contoh diatas harusnya anda mulai memahami bagaimana menulis kode PHP serta menggunakan variabel PHP secara mendasar. Pada contoh berikut kita akan coba menggali bagaimana variabel PHP sangat powerful dalam memudahkan pekerjaan anda.
Misalkan kita akan menuliskan sebuah dokumen yang panjang dimana kita akan sering menulis sebuah teks yang dihyperlink ke halaman sebuah website secara berulang-ulang. Contoh : Dunia Online (tag html nya sebagai berikut : <a href=”http://www.dunia-online.net” target=”_blank”>Dunia Online</a>)
Coba tulis kode berikut di dokumen PHP anda dan refresh browser anda :

<?php $link = "<a href=\"http://www.dunia-online.net\" target=\"_blank\">Dunia Online</a>"; ?>
<html>
<head>
<title>Belajar PHP</title>
</head>
<body>
<h1>Judul Utama</h1>
<p>Lorem ipsum dolor sit amet <?php echo $link;?>, consectetur adipiscing elit. Ut vitae metus sed lacus pretium tristique. Suspendisse ornare, nulla sit amet vehicula bibendum, ligula erat blandit dui, sed viverra nunc nisi ac lectus. Phasellus ac urna arcu, non rutrum sem. Aliquam erat volutpat. Suspendisse pretium, mi eget interdum vehicula, quam dolor eleifend massa, sit amet eleifend dui lectus non diam. Fusce varius viverra felis, in tempus nulla fermentum et. Aliquam orci lacus, vulputate rhoncus porta ac, laoreet ut eros. Sed enim tellus, volutpat vitae facilisis in, dictum id lectus. Vivamus ultricies libero tellus, ac interdum nunc. Duis euismod neque quis libero ornare ac congue dolor molestie. Praesent at tortor mauris, ac blandit erat. Sed at leo ligula. Quisque sagittis dolor a dui lacinia dapibus. Duis volutpat, mauris non viverra molestie, arcu tortor ultricies orci, quis ultricies nibh velit et lectus. Nunc ullamcorper, elit at malesuada luctus, est lorem adipiscing tortor, a auctor nisl massa eu quam <?php echo $link;?>.</p>
<p><?php echo $link;?> vestibulum turpis quam, elementum ut tincidunt nec, porta vitae ligula. Praesent pharetra tempus suscipit. Sed at mi eget neque scelerisque ullamcorper mattis at dui. Praesent ultrices placerat congue. Morbi luctus lectus non ante suscipit egestas. Pellentesque condimentum consectetur nisi id tincidunt. Suspendisse arcu quam, vehicula sit amet elementum ut, condimentum ac lorem. Vestibulum at orci quam, <?php echo $link;?> non blandit sapien.</p>
</body>
</html>

Hanya dengan sekali mendefinisikan nilai variabel $link, anda dapat menggunakannya berulang-ulang dalam dokumen. Oya kalau anda perhatikan bahwa kode HTML nilai variabel $link yang harus ditampilkan adalah <a href=”http://www.dunia-online.net” target=”_blank”>Dunia Online</a> , namun pada nilai variabel PHPnya berubah menjadi <a href=\”http://www.dunia-online.net\” target=\”_blank\”>Dunia Online</a>, ada penambahan tanda backslash (\) setiap sebelum tanda koma pengapit (“), backslash ini berfungsi untuk menyampaikan kepada PHP bahwa tanda (“) dibelakangnya adalah salah satu karakter string yang harus diterjemahkan, bukan tanda (“) yang biasa digunakan oleh PHP untuk mengapit nilai string.

Sampai disini saya harap anda semakin mengerti mengenai cara kerja dasar PHP. Berikutnya kita coba tulis kode berikut di dokumen index.php anda, simpan dan refresh browser anda.

<?php 
$TglHariIni = date("d.m.y"); 
$tanggal = date("d"); $bulan = date("m"); 
$tahun = date("y"); 
$hari = date('l', strtotime($TglHariIni)); 
$browser = $_SERVER['HTTP_USER_AGENT']; ?>
<html>
<head>
<title>Belajar PHP</title>
</head>
<body>
<h1>Judul Utama</h1>
<p>Hari ini tanggal <?php echo $TglHariIni;?> adalah hari ke <?php echo $tanggal;?> pada bulan ke <?php echo $bulan;?> dan tahun ke <?php echo $tahun;?> hari <?php echo $hari;?>.
</p>
<p>Anda menggunakan browser <?php echo $browser; ?></p>
</body>
</html>

Nah dengan kode diatas kita membuat variabel menggunakan fungsi yang sudah tersedia pada program PHP yaitu fungsi tanggal date() dan $_SERVER[‘HTTP_USER_AGENT’] untuk mendeteksi browser yang digunakan oleh pengunjung website.

Semakin jelas bagaimana PHP bekerja? Silahkan lanjutkan tutorial berikutnya yang akan mengajarkan anda membuat fungsi dengan PHP.

9 Responses to “Tutorial : Membuat Website PHP Pertama Anda [Pendahuluan]”

  1. EghyR01

    artikel yang sangat bermanfaat ..

  2. akbar

    bermanfaat bnget tutorialx
    jelas dan padat
    ditunggu tutorial berikutx,,,,, scepatx kang fandhie

  3. sukardi

    thanks

  4. M Syarif H

    sy jadi paham sob. trimakasih tutorialnya…

  5. Edwin Nugroho

    setelah ngikutin langkah langkahnya saya jadi paham sekarang
    terimakasih fandihie

  6. Harsya

    Terima kasih gan,setelah saya mengikuti langkah demi langkah saya tambah g mudeng…

  7. Arifin Budi P

    Tutorialnya sangat membantu pemula seperti saya terima kasih

  8. SHUKOR

    saya dari malaysia , terlebih dahulu saya ingin minta izin guna kan ilmu yang di ajar, saya ucap syabas, saya baru terjumpa blok tuan, saya mula faham sikit2,

  9. Cellya Audira

    maaf kak saya mau nnya, kenapa ya saya nggak mengalami error di langkah yang ke tiga gagal ya . mohon bantuannya.

Leave a Reply

Your email address will not be published. Required fields are marked *