Jumat, 08 Maret 2019

Mengenal Bahasa PHP [bagian 1]: PHP Info, Tanggal dan Waktu, Penggunaan Variabel

Kali ini, kita akan belajar mengenai bahasa PHP. Apa itu PHP? PHP adalah singkatan dari Hypertext Preprocessor merupakan salah satu bahasa pemrograman yang akan kita bahas lebih lanjut.

Sebelumnya, pernahkan kalian mendengar istilah client side dan server side? Sederhananya, client side yang artinya dalam bahasa Indonesia adalah di sisi pengguna merupakan apa yang ditampilkan di sisi pengguna sama dengan tampilan server. Sedangkan server side memiliki tampilan yang berbeda antara pengguna dengan server. Dan PHP termasuk server side.

Oke, langsung saja kita mulai. Pertama-tama, kita aktifkan XAMPP Control Panel.
Gambar 1. XAMPP Control Panel
Berbeda dengan bahasa HTML yang akan langsung terbuka jika kita 'klik' filenya. PHP ini spesial, maka kalian harus membukanya lewat 'localhost/[nama folder]'.

Pertama-tama, untuk pemanasan, kita coba dari awal. Sama halnya dengan HTML, PHP ini juga menggunakan aplikasi Visual Studio Code. Hanya saja, terdapat sedikit perbedaan saat menyimpan data. Berikut ini, akan ditampilkan listing programnya.

<?php
phpinfo ();
?>

Gambar 1.1 Menampilkan PHP info
Struktur PHP:
<?php
.
.
.
?>

Ketika disimpan, nama file ditambahkan '.php' meskipun format tetap HTML. Fungsinya, untuk mengeluarkan informasi server PHPnya yang ditampilkan.
Gambar 1.2 Menyimpan file PHP
Setelah disimpan, maka tulisan pada program akan berwarna. Kini saatnya kalian membuka filenya, ketik 'localhost/[nama folder]/' lalu buka file yang sudah dibuat. Maka, tampilan yang keluar akan seperti ini.
Gambar 1.3 Tampilan hasil program
Itu hanya sebagian dari pembukaan, selanjutnya akan kita coba yang lain. Langsung scroll ke bawah!

PHP ini juga dapat menampilkan tanggal dan waktu ketika kalian menjalankan program ini, berikut listing programnya.


<?php
echo date("d-m-Y");
?>

Gambar 2.1 Menampilkan tanggal
Seperti pada bahasa C++ yang menggunakan 'printf("")' untuk menampilkan kalimat, di sini fungsi 'echo' juga sama. Berikut ini keluarannya.
Gambar 2.2 Tampilan tanggal
Jika ingin menampilkan pukul berapa sekarang ini, tinggal menambahkan sedikit fungsi.

<?php
echo date("d-m-Y H:i:s");
?>

Gambar 2.3 Menampilkan Waktu
Berikut tampilan keluarannya.
Gambar 2.4 Tampilan keluaran waktu
Tampilan jam, menit, dan detik akan berubah seiring kalian kembali membuka programnya. Karena yang ditampilkan adalah waktu sepanjang kalian bermain-main dengan program ini.
Seperti yang saya katakan sebelumnya, itu hanya pemanasan. Kali ini, seperti biasa kita akan menemui 'Hello World!' LAGI.

<?php
echo "Hello World"; echo "Hello World"; echo "Hello World"; echo "Hello World<br>";
echo "<br>";
echo "Hello World\n"; echo "Hello World\n"; echo "Hello World\n"; echo "Hello World\n<br>";
echo "<br>";
echo "Hello World<br>"; echo "Hello World<br>"; echo "Hello World<br>"; echo "Hello World<br>";
?>

Gambar 3.1 Hello World!
Sebenarnya, pada program ini, kita hanya akan bermain-main dengan spasi. Seperti pada HTML, untuk menambahkan 'enter' maka kita perlu fungsi <br> dan fungsi /n untuk menambahkan spasi.
Gambar 3.2 Keluaran Hello World!

Sekarang, bagaimana jika bahasa PHP ini disisipkan dalam HTML? Tentu saja bisa. Pernahkah kalian dihukum untuk menuliskan surat permintaan maaf sebanyak 100 kali atau 2 lembar penuh? Jika pernah akan saya tunjukkan cara efektifnya.

<html>
<head><title>VARIABEL(1)</title></head>
<body>
    <h1>Pengulangan Variabel</h1>
    <?php
    for ($i=1; $i<=1000; $i++)
    echo "$i. Saya tidak akan mengulanginya lagi!<br>";
    ?>
</body>
</html>

Gambar 4.1 Penggunaan Variabel 
Berikut keluarannya.
Gambar 4.2 Keluaran Penggunaan Variabel
Apakah terlihat perbedaannya? Ya. Judul dan nama halaman muncul. Inilah fungsi dari menyisipkan PHP ke dalam HTML. Deklarasi PHP sendiri diletakkan di dalam fungsi <body>...</body> agar dapat ditampilkan di server.
Berikut ini menampilkan listing program penggunaan variabel bagian kedua.

<html>
<head><title>VARIABEL(2)</title></head>
<body>
    <h1>Penggunaan Variabel</h1>
    <?php
    $teks = "Hello World!";
    $sebuah_bilangan = 4;
    $bilanganYangLain = 8.567;
    $teks2 = $teks;
    $sebuah_bilangan1 = $sebuah_bilangan + $bilanganYangLain;
    $teks3 = $teks + $teks2;
    $bilangan_lain = $teks2 + $sebuah_bilangan;
    $bilangan_lain1 = $sebuah_bilangan + $teks2;
    echo "$teks2<br>";
    echo "$sebuah_bilangan1<br>";
    echo "$teks3<br>";
    echo "$bilangan_lain<br>";
    echo "$bilangan_lain1";
    ?>
</body>
</html>

Gambar 4.3 Penggunaan Variabel (2)
Sedikit penjelasan, jika pada bahasa C++, kalian harus memasukkan fungsi 'int' untuk memasukkan variabel, pada bahasa HTML digunakan '$' yang diletakkan di tiap penggunaan variabel.
Berikut ini hasil keluarannya.
Gambar 4.4 Tampilan keluaran penggunaan variabel (2)
Demikian apa yang dapat saya sampaikan, mohon maaf jika ada salah-salahnya. Terimakasih dan sekian:)

Minggu, 03 Maret 2019

Mengenal Visual Studio Code [bagian 3]: Membuat Local Host HTML

Apa itu Local Host HTML? Untuk kalian-kalian yang otaknya sudah seencer para ilmuwan, kalian akan mengerti apa itu meskipun dijelaskan dengan bahasa ilmiah sekalipun. Intinya, di sini kita akan membuat sebuah tempat kita untuk membangun sebuah website. 

Akan saya tunjukkan bagaimana caranya.
1. Download dan install aplikasi Xampplite. 
2. Akan muncul tampilan 'XAMPP Control Panel Application', ubah pengaturannya sebagai berikut.

Gambar 1. XAMPP Control Panel Application
3. Karena sebelumnya kalian sudah membuat file html, maka langkah selanjutnya adalah kalian harus memindahkan file html tersebut ke folder berikut. Terserah kalian ingin menamainya apa. 

Gambar 2. Folder file HTML
4. Buka browser lalu masukkan 'localhost/[nama folder]/' misalnya 'localhost/filepenting/', maka tampilan akan muncul seperti berikut.

Gambar 3. Local Host
5. Pilih file yang ingin kalian buka. 

Perhatikan! Folder untuk file html letaknya tidak boleh asal-asalan. Karena sebelumnya sudah saya coba, dan harus menyita banyak waktu, karena salah menempatkan file. Sebab, jika kalian menempatkan file pada folder yang berbeda, maka browser tidak akan dapat menemukan file html Anda.

Akan saya beri contoh. Perhatikan baik-baik. Baca tulisan letak foldernya dengan teliti. Kalau bisa, gambarnya di ZOOM maksimal biar kelihatan.

Gambar 4. Letak file diganti tapi masih di dalam htdocs
Maka, jika kalian mencari di browser, yang kalian dapatkan adalah tampilan sebagai berikut.

Gambar 5. Tampilan browser jika letak dokumen html diganti tapi masih di htdocs
Sesungguhnya dalam mencoba-coba, ada kalanya kita menemui hambatan, namun kalian harus tetap yakin jika pasti ada jalan keluarnya. Padahal rencananya, saya tidak akan memposting ini karena tidak menemukan solusinya.

Terimakasih sudah membaca postingan ini :). Tetap semangat dan maaf jika ada kata-kata yang kurang berkenan, sesungguhnya saya hanya ingin memudahkan kalian semua dalam memahami postingan ini.

Jumat, 01 Maret 2019

Mengenal Visual Studio Code [bagian 2]: Membuat Tag Tabel Biodata dan Memasukkan Gambar

Melanjutkan dari postingan kemarin, kali ini saya akan menunjukkan bagaimana cara membuat tabel. Coba dulu, meskipun memusingkan, kalau kalian bisa lebih dulu, kalian bisa jadi lebih keren!
Gambar 1. Colspan dan Rowspan
Sumber : Google.com
Ada sedikit kosa kata baru dan fungsi-fungsi baru yang akan kalian pelajari. Langsung saja, berikut ini listing programnya.

Gambar 2.1 Listing Program TAG Table (1)
Gambar 2.2 Listing Program TAG Table (2)
Gambar 2.3 Listing Program TAG Table (3)

<!DOCTYPE html>

<html>

<head>

<title>Penggunaan TAG Tabel</title>

</head>

<body>

<h1><font color=white>Belajar Tag Gambar dengan Visual Studio Code<font></h1>



<table align=center border="4" style=background-color:rgb(0,174,255)>



<tr style=background-color:black><td colspan="3"><center><b>Daftar Mahasiswa PENS</b></center></td></tr>

<tr>

<td>NRP</td>

<td>1103181034</td>

<td rowspan="18"><img src="ratna.jpeg" width=200 high=200/></td>

</tr>

<tr>

<td>Nama</td>

<td>Ratna Anisa Ramadani</td>

</tr>

<tr>

<td>Program</td>

<td>D3</td>

</tr>

<tr>

<td>Jurusan</td>

<td>Elektronika</td>

</tr>

<tr>

<td>Kelas</td>

<td>1</td>

</tr>

<tr>

<td>Paralel</td>

<td>B</td>

</tr>

<tr>

<td>Dosen_Wali</td>

<td>Madyono</td>

</tr>

<tr>

<td>TanggalLahir</td>

<td>01-01-2000</td>

</tr>

<tr>

<td>TempatLahir</td>

<td>Sidoarjo</td>

</tr>

<tr>

<td>Tanggal Masuk</td>

<td>14-05-2018</td>

</tr>

<tr>

<td>Jenis_Kelamin</td>

<td>Perempuan</td>

</tr>

<tr>

<td>Warga</td>

<td>WNI</td>

</tr>

<tr>

<td>Agama</td>

<td>Islam</td>

</tr>

<tr>

<td>Golongan_Darah</td>

<td>B</td>

</tr>

<tr>

<td>Alamat</td>

<td>DESA WATESARI DUSUN JATISARI RT 01 RW 01 KECAMATAN BALONGBENDO / 61263</td>

</tr>

<tr>

<td>Kota_Tempat_Tinggal</td>

<td>Kabupaten Sidoarjo</td>

</tr>

<tr>

<td>No Telp</td>

<td>08233859181</td>

</tr>

<tr>

<td>Jalur_Penerimaan</td>

<td>PMDK</td>

</tr>

</table>

</body>

</html>

Berikut hasil keluarannya.
Penjelasan:
Gambar 2.4 Hasil Listing Program
1. <table>...</table> membuat tabel.
2. <tr>...</tr> menunjukkan baris. Misal kalian ingin membuat tabel yang terdiri dari 2 baris, maka kalian harus menuliskan fungsi ini sebanyak 2 kali.
3. <td>...</td> menunjukkan kolom. Biasanya letak fungsi ini di tengah-tengah fungsi <tr>...</tr>.
4. align=center jika ingin tabel berada di tengah-tengah seperti tampilan di atas, biasanya ditambahkan fungsi ini. Letaknya di dalam fungsi <table...>. Biasanya jika fungsi ini tidak ditambahkan, maka tabel otomatis berada di sisi kiri.
5. border="4" memberikan ketebalan garis pada tabel. Kalian bisa mengubah besar angkanya, tidak harus 4.
6. style=background-color:rgb(0,174,255) fungsi ini juga letaknya sama seperti fungsi No. 4 dan 5, fungsinya untuk memberikan background warna pada tabel. Tidak ada spasi pada penulisan rgb.
7. <center>...</center> untuk membuat teks berada di tengah.

Berikut ini fungsi untuk memasukkan foto.
<img src="ratna.jpeg" width=200 high=200/> 
Penjelasan:
1. src="..." ini merupakan source untuk menentukan foto mana yang akan kalian masukkan. Jangan lupa untuk memberikan nama foto dan formatnya, contoh 'ratna.jpeg'.
2. width=200 high=200 untuk menentukan ukuran panjang dan lebar foto. Biasanya ketika kalian memasukkan foto tanpa disertai ukuran, foto akan terpampang sangat besar.

Sekarang, berbicara tentang tabel, apa perbedaan colspan dan rowspan?? colspan merupakan fungsi untuk menggabungkan beberapa kolom, sedangkan rowspan untuk menggabungkan beberapa baris. Bentuk fungsinya adalah.
colspan="..." atau rowspan="..."

Peringatan! Pada baris pertama terdapat fungsi:
<!DOCTYPE html>
Apabila kalian iseng-iseng menghapusnya. Maka jangan kaget jika keluaran hasilnya malah berbeda. Jika fungsi tersebut saya hilangkan, maka yang terjadi adalah seperti pada gambar berikut.

Gambar 2.5 Hasil Keluaran Tanpa DOCTYPE
Yang terjadi berikutnya adalah teks yang seharusnya berwarna putih berubah menjadi hitam.

Nah, hanya itu yang dapat saya sampaikan, selebihnya mohon maaf jika ada salah-salah kata dan perbuatan. Terimakasih :)

Upload File dengan PHP dan MySQL

Upload file adalah salah satu bagian terpenting dalam membuat aplikasi, khususnya yang berbasis web.Contohnya saat kita harus mengupload ent...