Mari Belajar Website: Mei 2022

PHP (PHP: Hypertext Preprocessor) adalah sebuah bahasa pemrograman server side scripting yang bersifat open source.

Sebagai sebuah scripting language, PHP menjalankan instruksi pemrograman saat proses runtime. Hasil dari instruksi tentu akan berbeda tergantung data yang diproses.

PHP merupakan bahasa pemrograman server-side, maka script dari PHP nantinya akan diproses di server. Jenis server yang sering digunakan bersama dengan PHP antara lain Apache, Nginx, dan LiteSpeed.

Selain itu, PHP juga merupakan bahasa pemrograman yang bersifat open source. Pengguna bebas memodifikasi dan mengembangkan sesuai dengan kebutuhan mereka.

Definisi lain dari PHP adalah bahasa pemrograman server-side yang dirancang untuk pengembangan web. PHP dikatakan server-side karena program yang diberikan akan dijalankan/diproses pada komputer yang bertindak sebagai server. Sebagai contoh, ketika Anda membuka situs facebook.com maka web browser akan melakukan request ke server.

Saat ini, PHP menjadi bahasa pemrograman server-side tingkat pertama dengan presentasi sebesar 83.4% yang banyak digunakan oleh banyak orang di seluruh dunia. Selain itu, PHP juga merupakan bahasa pemrograman yang gratis digunakan dan open source sehingga pemrograman dapat melakukan pengembangan di dalamnya.

Biasanya, PHP digunakan bersamaan dengan penggunaan bahasa pemrograman, seperti HTML dan JavaScript, dimana bahasa tersebut dijalankan di sisi web browser (client). PHP juga dapat digunakan untuk membangun sebuah CMS (Content Management System).

PHP tidak hanya digunakan untuk membuat halaman web yang sederhana tetapi menghasilkan website yang popular dan digunakan banyak orang seperti Joomla, Wikipedia, Drupal, WordPress dan sebagainya. Dewasa ini, penggunaan PHP diminati oleh banyak orang karena memberikan solusi yang murah (free) dan juga dapat berjalan di berbagai berbagai platform.

Struktur Dasar PHP

PHP mempunyai struktur yang sederhana. Syntax PHP dimulai dengan tanda <?php dan di akhiri dengan ?>

<? php
    // Kita dapat menulis syntax PHP disini
?>

1. Sintak dasar PHP

Dalam sintak dasar PHP ada beberapa peraturan sintaks yang harus dipenuhi ketika membuat file program PHP.

A. PHP opening dan closing tag

B. PHP mendukung komentar seperti pada bahasa ‘C’, ’C++’, dan Unix shell-style (Perl style).

2. Konstanta dalam PHP

Konstanta dalam PHP ialah suatu konstanta yang dapat didefinisikan dengan fungsi define () dan merupakan salah satu fitur function dari PHP.

3. Aritmatika dalam PHP

Aritmatika dalam PHP berfungsi untuk mempermudah pengoperasian operand dan operator pada PHP.

Beberapa fungsi dari PHP

1. Mempersingkat Tatanan HTML dan CSS

Untuk membangun sebuah halaman web yang dinamis, PHP dapat berfungsi untuk mempersingkat penggunaan tatanan HTML dan CSS. Sebagai contoh, Dalam suatu sistem karyawan memiliki jumlah baris 100. Jika menggunakan HTML dan CSS maka barisan tersebut menjadi sangat panjang. Sedangkan jika ditambah dengan menggunakan PHP, maka Anda bisa mengatur beberapa baris yang dibutuhkan atau ditampilkan.

2. Input Data

Dengan menggunakan bahasa pemrograman PHP, Anda dapat menginput data dan menyimpannya dalam sistem Database, seperti MySQL.

3. Manajemen Cookie dan Session

Dalam PHP, Cookie dan Session digunakan untuk menyimpan informasi pengguna. Fungsi session_start() untuk memulai session dan cookie dengan fungsi setcookie(). Sebagai contoh proses cookie, menyimpan username dan password pengguna di browser sehingga tidak harus mengisinya ulang ketika membuka situs yang sama. Session contohnya menyimpan informasi login yang hanya berlaku dalam satu sesi saja.

4. Kompress Teks

Dalam PHP, Anda bisa mengkompres teks yang panjang menjadi lebih pendek dengan fungsi gzcompress() dan mengembalikannya dengan fungsi gzuncompress().

Contoh Penggunaan PHP

Pastikan bahwa kamu telah memiliki app xampp, jika tidak ada maka install terlebih dahulu. Setelah selesai menginstall ,langsung saja buka aplikanya dan jalankan Apache beserta Mysql nya seperti gambar dibawah ini.

Setelah seperti gambar diatas maka minimize kan saja dan kita beralih pada app notepad. Langsung saja kita buat script seperti gambar dibawah ini.

<!DOCTYPE HTML>
<html>
<head>
	<h1> Haii My Best Friends</h1>
</head>
<body>
<?php
	echo "Ayo Semangat Katanya Mau Jadi Orang Hebat, Kok Males-malesan Sih."
?>
</body>
</html>

Dapat kita lihat pada syntax dasar PHP diatas terdapat kata "echo" , dimana pada fungsi echo sendiri ialah untuk menampilkan Output/hasil di layar monitor kita.Tanpa menggunakan perintah echo program sebesar atau se-kompleks apapun tidak akan dapat kita lihat hasilnya . Itu sebabnya perintah echo sangatlah penting, walaupun perintah ini merupakan kategori dasar didalam php namun perannya sangat amat penting.

Nah, setelah itu langsung saja kita save syntax di atas di "Local Disk C " kemudian kita pilih folder " xampp "

Setelah itu pilih folder " htdocs " Seperti gambar dibawah

Nah, di dalam folder " htdocs " kita buat folder baru untuk menyimpan file yang telah kita buat tadi. Disini saya buat nama folder saya yaitu " AyoBelajarPHP ", untuk nama folder bisa kalian sesuaikan dengan keinginan kalian.

Lalu. buka folder yang baru saja kita buat kemudian simpan file dengan ekstensi ".php". contoh: belajar.php dan jangan lupa untuk mengubah type nya menjadi All Files kemudian save.

Untuk melihat hasil dari file yang telah kita buat, langsung saja kita buka Google kemudian ketik di pencarian " localhost/dashboard " maka akan muncul tampilan seperti dibawah ini.

Setelah itu ubah " localhost/dasboard " menjadi " localhost/nama folder yang kamu buat/nama file/ ". Contohnya dapat dilihat pada gambar dibawah.

Dan Hasilnya dapat kita lihat pada gambar dibawah ini.

Semoga bermanfaat :)

Bagaimana sih cara membuat website sederhana tentang penjualan mobil?. Oke, pada materi kali ini saya akan memberikan contoh membuat website yang tentunya mudah untuk dipahami. Sebelum membuat website, kita harus membuat satu folder yang nantinya folder tersebut akan kita isi dengan beberapa file. Dibawah ini merupakan coding untuk halaman awal website.

<!DOCTYPE html>
<html>
<head>

    <title>Website Penjualan Mobil</title>

    <style type="text/css">
        body {
            background-image: url(bc.webp);
            background-size: cover;
            background-attachment: fixed;
        }
        h1 {
            color: white;
        }
        h3 {
            color: white;
        }
    </style>

</head>
<body>
<h1 align="center">WELCOME TO MITA SHOWROOM</h1>

<marquee behavior="alternate" bgcolor="#999999" scrollamount="6"width="100%">
    <h2>"SHOWROOM KAMI MENYEDIAKAN MOBIL-MOBIL BERKUALITAS"</h2>
</marquee>

<br><br><br>
<h3 align="center">DAFTAR MEREK MOBIL</h3>
<div align="center">
</div><br><br>

<table style="width: 100%">
<tr>
    <th><a href="honda.html"><img src="honda.png" width="200px" height="300px"></a></th>
    <th><a href="isuzu.html"><img src="isuzu.png" width="200px" height="300px"></a></th>
    <th><a href="toyota.html"><img src="toyota.png" width="200px" height="300px"></a></th>
    <th><a href="lexus.html"><img src="lexus.png" width="200px" height="300px"></a></th>
    <th><a href="nissan.html"><img src="nissan.png" width="200px" height="300px"></a></th>
</tr>
</table>

</body>
</html>

Dibawah ini adalah hasil dari coding diatas. tag <style> diatas berguna untuk mempercantik halaman website yang kita buat, seperti merubah warna, font, jenis huruf,background, ukuran teks, dll.

Jadi disini kita ingin membuat, bagaimana ketika kita klik masing-masing merek mobilnya, kita akan menuju halamana selanjutnya yang berisi berbagai macam produk mobil dari merek honda tersebut. Untuk melakukan pemanggilan link, kita menggunakan <a href="nama file"></a>. Dibawah Ini merupakan contoh penggunaan codingnya.

<!DOCTYPE html>
<html>
<head>
    <title>produk mobil honda</title>

    <style type="text/css">
        body {
            background-image: url(bc.webp);
            background-size: cover;
            background-attachment: fixed;
        }
         h1 {
            color: white;
        }
         td {
            color: cyan;
            text-align: center;
            font-weight: bolder;
        }
    </style>

</head>
<body>
    <marquee behavior="alternate" scrollamount="6"width="100%">
<h1>INI ADALAH PRODUK MOBIL HONDA UNGGULAN DARI MITA SHOWROOM</h1>
</marquee>
<br><br><br><br><br>

<table style="width: 100%">
<tr>
    <th><img src="crv.jpg" width="200px" height="300px"></th>
    <th><img src="acord.jpg" width="200px" height="300px"></th>
    <th><img src="odsey.jpg" width="200px" height="300px"></th>
    <th><img src="civic.jpg" width="200px" height="300px"></th>
    <th><img src="city.jpg" width="200px" height="300px"></th>  
</tr>

<tr >
    <td>Honda CR-V<br>Rp.577.000.000</td>
    <td>Honda Accord<br>Rp.749.000.000</td>
    <td>Honda Odyssey<br> Rp.899.000.000</td>
    <td>Honda Civic Type R<br>Rp.1.177 Milyar</td>
    <td>Honda City<br>Rp.365.400.000</td>
</tr>
</table>

<p><a href="uts.html">BACK TO HOME PAGE</a></p>
</body>
</html>

Gambar dibawah ini merupakan hasil dari coding diatas yang merupakan gambaran beberapa produk mobil beserta harganya dari merek Honda. Untuk mempercantik website, disini saya menggunakan tag <marquee> yang dapat membuat tulisan menjadi bergerak. Untuk mengatur kecepatan gerak teksnya kita dapat menggunakan Scrollamount.

Berikut ini merupakan coding untuk produk mobil merek isuzu. jangan lupa untuk menambahkan tag <style> agar halaman yang kita buat terlihat lebih cantik.

<!DOCTYPE html>
<html>
<head>

    <title>produk mobil isuzu</title>

    <style type="text/css">
        body {
            background-image: url(bc.webp);
            background-size: cover;
            background-attachment: fixed;
        }
         h1 {
            color: white;
        }
        td {
            color: cyan;
            text-align: center;
            font-weight: bolder;
        }
    </style>

</head>
<body>

    <marquee behavior="alternate" scrollamount="6"width="100%">
<h1>INI ADALAH PRODUK MOBIL ISUZU UNGGULAN DARI MITA SHOWROOM</h1>
</marquee>

<br><br><br><br><br>

<table style="width: 100%">
<tr>
    <th><img src="mux.jpg" width="200px" height="300px"></th>
    <th><img src="premir.jpg" width="200px" height="300px"></th>
    <th><img src="panter.jpg" width="200px" height="300px"></th>
    <th><img src="traga.jpg" width="200px" height="300px"></th>
    <th><img src="dmax.jpg" width="200px" height="300px"></th>    
</tr>

<tr >
    <td>Isuzu Mu-X 2022 4x4 <br>Rp.559.800.000</td>
    <td>Isuzu MU-X Premiere<br>Rp.499.500.000</td>
    <td>Isuzu Panther Grand Touring<br> Rp.342.300.000</td>
    <td>Isuzu Traga Box Aluminium<br>Rp.239.800.000</td>
    <td>Isuzu D-Max Rodeo 2.5L VGS AT<br>Rp.536.700.000</td>  
</tr>
</table>

<p><a href="uts.html">BACK TO HOME PAGE</a></p>
</body>
</html>

Dibawah Ini merupakan hasil dari coding diatas yang berisi beberapa produk mobil beserta harganya dari merek Isuzu. Fungsi tag <br> diatas yaitu untuk membuat baris baru atau dapat dikatakan sebagai pengganti tombol enter.

Berikut ini merupakan coding untuk produk mobil merek Toyota. Agar gambar yang kita tampilkan di website terlihat lebih rapi, disini kita bisa menggunakan <table>.

<!DOCTYPE html>
<html>
<head>

    <title>produk mobil toyota</title>

    <style type="text/css">
        body {
            background-image: url(bc.webp);
            background-size: cover;
            background-attachment: fixed;
        }
         h1 {
            color: white;
        }
        td {
            color: cyan;
            text-align: center;
            font-weight: bolder;
        }
    </style>

</head>
<body>

    <marquee behavior="alternate" scrollamount="6"width="100%">
<h1>INI ADALAH PRODUK MOBIL TOYOTA UNGGULAN DARI MITA SHOWROOM</h1>
</marquee>

<br><br><br><br><br>

<table style="width: 100%">
<tr>
    <th><img src="hybrid.webp" width="200px" height="300px"></th>
    <th><img src="86.webp" width="200px" height="300px"></th>
    <th><img src="vel.webp" width="200px" height="300px"></th>
    <th><img src="gr.webp" width="200px" height="300px"></th>
    <th><img src="land.webp" width="200px" height="300px"></th>  
</tr>

<tr >
    <td>Toyota Camry Hybrid<br>Rp.513.500.000</td>
    <td>Toyota 86 TRD A/T<br>Rp.830.000.000</td>
    <td>Toyota Vellfire<br>Rp.1.32 Milyar</td>
    <td>Toyota GR Supra<br>Rp.2.05 Milyar</td>
    <td>Toyota Land Cruiser<br>Rp.2.4 Milyar</td>
</tr>
</table>

<p><a href="uts.html">BACK TO HOME PAGE</a></p>
</body>
</html>

Ini adalah hasil dari coding diatas yang merupakan gambaran beberapa produk mobil beserta harganya dari merek Toyota. tag<tr> yang terdapat pada coding diatas berfungsi untuk membuat baris, dimana pada tag <tr> didalamnya terdapat tag <th> yang berfungsi untuk membuat kolom. Nah, seperti yang kita lihat pada gambar dibawah ini bahwa gambar mobilnya seperti di dalam kolom dan terlihat lebih rapi.

Berikut ini merupakan coding untuk produk mobil merek Lexus. Pada website ini juga saya menambahkan nama mobil dan juga harganya. Untuk membuat itu, kita dapat menggunakan tag <td>.

<!DOCTYPE html>
<html>
<head>

    <title>produk mobil lexus</title>

    <style type="text/css">
        body {
            background-image: url(bc.webp);
            background-size: cover;
            background-attachment: fixed;
        }
         h1 {
            color: white;
        }
        td {
            color: cyan;
            text-align: center;
            font-weight: bolder;
        }
    </style>

</head>
<body>

    <marquee behavior="alternate" scrollamount="6"width="100%">
<h1>INI ADALAH PRODUK MOBIL LEXUS UNGGULAN DARI MITA SHOWROOM</h1>
</marquee>

<br><br><br><br><br>

<table style="width: 100%">
<tr>
    <th><img src="es.jpg" width="200px" height="300px"></th>
    <th><img src="lm.jpg" width="200px" height="300px"></th>
    <th><img src="lx.jpg" width="200px" height="300px"></th>
    <th><img src="lc.jpg" width="200px" height="300px"></th>
    <th><img src="ls.jpg" width="200px" height="300px"></th>   
</tr>

<tr >
    <td>Lexus ES<br>Rp.1.22 Milyar</td>
    <td>Lexus LM 350<br>3.06 Milyar</td>
    <td>Lexus LX 570<br> Rp.3.47 Milyar</td>
    <td>Lexus LC 500<br>Rp.4.29 Milyar</td>
    <td>Lexus LS 500<br>Rp.4.74 Milyar</td>    
</tr>
</table>

<p><a href="uts.html">BACK TO HOME PAGE</a></p>
</body>
</html>

Ini adalah hasil dari coding diatas yang merupakan gambaran beberapa produk mobil beserta harganya dari merek Lexus. Kita dapat melakukan pemanggilan link seperti <img src="nama gambar dan format gambar"> untuk menampilkan gambar mobil seperti di bawah ini.

Berikut ini merupakan coding untuk produk mobil merek Nissan. Untuk mengatur ukuran gambar kita dapat menggunakan tag <width> dan <height>.

<!DOCTYPE html>
<html>
<head>

    <title>produk mobil nissan</title>

    <style type="text/css">
        body {
            background-image: url(bc.webp);
            background-size: cover;
            background-attachment: fixed;
        }
         h1 {
            color: white;
        }
        td {
            color: cyan;
            text-align: center;
            font-weight: bolder;
        }
    </style>

</head>
<body>

    <marquee behavior="alternate" scrollamount="6"width="100%">
<h1>INI ADALAH PRODUK MOBIL NISSAN UNGGULAN DARI MITA SHOWROOM</h1>
</marquee>

<br><br><br><br><br>

<table style="width: 100%">
<tr>
    <th><img src="serena.jpg" width="200px" height="300px"></th>
    <th><img src="trail.jpg" width="200px" height="300px"></th>
    <th><img src="vara.jpg" width="200px" height="300px"></th>
    <th><img src="leaf.jpg" width="200px" height="300px"></th>
    <th><img src="tera.jpg" width="200px" height="300px"></th>
</tr>

<tr >
    <td>Nissan Serena Highway Star<br>Rp.481.000.000</td>
    <td>Nissan X Trail<br> Rp.547.700.000</td>
     <td>Nissan Navara 2.5 VL AT<br>Rp.551.000.000</td>
    <td>Nissan Leaf<br>Rp.649.000.000</td>
    <td>Nissan Terra 2.5L 4x4 VL AT<br>Rp.680.800.000</td>    
</tr>
</table>

<p><a href="uts.html">BACK TO HOME PAGE</a></p>
</body>
</html>

Ini adalah hasil dari coding diatas yang merupakan gambaran beberapa produk mobil beserta harganya dari merek Nissan. Di website ini saya juga membuat tombol "BACK TO HOME PAGE" di setiap jenis produk dari berbagai merek mobil. Tombol tersebut berfungsi untuk membawa kita ke halaman utama.

Note:

Pastikan semua file ataupun gambar berada dalam satu folder. Nah untuk pemanggilan link, kita juga harus teliti dalam memasukkan nama filenya, begitu juga dalam memasukkan foto. Antara nama dan format harus sesuai, jika tidak sesuai, maka akan mengakibatkan tidak dapat terbukanya file atau gambar yang kita panggil melalui coding pemanggilan <a href="nama file"></a>.

Mari Belajar Website

Jumat, 27 Mei 2022

Pengertian PHP Beserta Kegunaannya