Belajar Web Programming PHP, HTML, MySQL dan Tutorial

Contoh Kode Menampilkan PDF Di Web

Contoh Kode Menampilkan PDF Di Web

Kebutuhan dokumen digital sudah bukan menjadi hal yang asing lagi di masa sekarang. File dengan format PDF menjadi sangat populer dalam mempublikaskan dokumen dalam bentuk digital. Untuk membuka file tersebut biasanya kita membutuhkan software lain seperti Adobe Reader, Foxit dan lain-lain untuk membukanya. Namun dengan HTML5 kita dapat membuka file PDF melalui browser yang mendukung HTML5 dengan sangat mudah. Bagaimana caranya akan dijelaskan pada artikel kali ini.

Prosedur menampilkan file PDF dengan HTML5 pada dasarnya mirip dengan cara menampilkan gambar, yaitu dengan mengetahui direktori dan nama file pdf yang akan ditampilkan sehingga pada saat melakukan embed kode program kita tinggal memasukan url dari file pdf tersebut.

Kode dasar untuk menampilkannya cukup sederahana seperti berikut ini:
<embed src="direktori/nama_file.pdf" type="application/pdf" width="100%" height="600px"></embed>

Tag yang digunakan adalah <embed> dengan beberapa atribut berikut ini:

  • src: sebagai atribut untuk mendefinisikan direktori dari file pdf yang akan dibuka
  • type: sebagai atribut untuk mendifinisikan jenis/tipe file 
  • width: sebagai atribut untuk menentukan lebar object dalam bentuk pixel atau persen (layar)
  • height: sebagai atribut untuk menentukan tinggi object dalam bentuk pixel atau persen (layar)

Bagaimana cukup mudah bukan? untuk contoh kode dalam menampilkan PDF di Web dapat dilihat berikut ini:
<h1>Menampilkan PDF dengan HTML5</h1>
<hr>
<a href="?file=01">Sampel 01</a> | <a href="?file=02">Sampel 02</a>
<hr>
<?php
$file=isset($_GET['file'])?$_GET['file']:"";
if(empty($file) or $file=="01") { $pdf = "data/sampel01.pdf"; }
if($file=="02") { $pdf = "data/sampel02.pdf"; }
?>
<b>Document</b>
<br>
<embed src="<?php echo $pdf;?>" type="application/pdf" width="800" height="600" ></embed>

Hasil Program


Membuat Teks Rata Kiri, Tengah, Kanan Dan Justify Dengan HTML Dan CSS

Membuat Teks Rata Kiri, Tengah, Kanan Dan Justify Dengan HTML Dan CSS

Membuat sebuah website tentunya tidak terlepas dari konten yang akan ditampilkan. Untuk menampilkan konten biasanya kita dapat menggunakan teks maupun gambar atau dapat digabungkan keduanya untuk menghasilkan konten yang menarik. Dalam aplikasi berbasis Web yang digunakan untuk mengisi konten biasanya terdapat teks editor seperti pada blogspot contohnya yang menerapkan konsep WYSIWYG (What You See Is What You Get) yaitu suatu editor yang mampu menampilkan apa yang kita ketikan dalam editor akan sama dengan tampilan pada saat dipublikasi.

Kemampuan editor tersebut biasanya memilki standarisasi yang ditentukan oleh editor tersebut sebelumnya. Biasanya sebuah website memiliki standar ganda dalam menampilkan konten yang kadang bercampur dengan template/themes atau bahkan melakukan coding css secara manual dimana dimungkinkan terjadi bntrok style antara editor dan css yang dimodifikasi.

Namun demikian ada perlunya kita juga mengetahui kode dasar bagaimana menyusun alignment suatu tulisan menggunakan kode HTML. Kenapa? karena pada dasarnya output dari sebuah aplikasi web adalah dalam bentuk kode HTML dan CSS yang diterjemahkan oleh browser sehingga menghasilkan tampilan sesuai dengan apa yang dirancang.

Pada dasarnya pengaturan alignment sama pada umumnya yaitu rata kiri, rata kanan, rata tengah dan rata kiri-kanan atau yang sering dikenal dengan justify. Untuk menerapkannya pun cukup beragam dimana kita bisa menggunakannya secara langsung di dalam kode html atau menggunakan css untuk standarisasi. Ok, mari kita coba kode berikut:

Poin yang perlu dipahami adalah:
Rata kiri = left
Rata kanan = right
Rata Tengah = center
Rata Kiri-Kanan = Justify

Contoh tag <p></p>
<p align="left">
<b>Contoh artikel dengan rata kiri</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
<p align="right">
<b>Contoh artikel dengan rata kanan</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
<p align="center">
<b>Contoh artikel dengan rata tengah</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
<p align="justify">
<b>Contoh artikel dengan rata kiri-kanan</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>

Hasil untuk kode ini dapat dilihat pada screenshot dibawah:

Bagaimana cukup mudah bukan? tag <p></p> biasanya digunakan oleh editor teks berbasis html dan css untuk menstandarisasi pergantian paragraf, namun untuk optimasi biasanya kita bisa juga mengganti tag <p></p> dengan tag <div></div> atau kolom pada tabel yaitu tag <td></td>

Kemudian bagaimana dengan CSS? tentunya sama juga namun dengan css kita bisa membuatnya menjadi lebih simpel lagi dan dengan penamaan yang kita tentukan sendiri. berikut contohnya:
<style type="text/css">
.ratakiri { text-align: left; }
.ratakanan { text-align: right; }
.ratatengah { text-align: center; }
.ratakirikanan { text-align: justify; }
</style>

<div class="ratakiri">
<b>Contoh artikel dengan rata kiri</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="ratakanan">
<b>Contoh artikel dengan rata kanan</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="ratatengah">
<b>Contoh artikel dengan rata tengah</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="ratakirikanan">
<b>Contoh artikel dengan rata kiri-kanan</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>

Nah kode diatas kita menggunakan tag <div></div> dimana hasilnya akan sama dengan screenshot diatas. Namun apa bedanya? tentu saja ada perbedaan dalam hal efisiensi yaitu dengan class pada CSS kita dapat mengatur sendiri secara khusus desain dari class tersebut dengan mudah. Misalnya untuk rata kiri kita beri warna biru, sedangkan rata tengah kita beri warna merah.

Dengan CSS kita cukup satu kali melakukan perubahan di kode css nya dan maka semua tag yang mangandung class tersebut akan berubah sesuai kondisi yang sudah kita tentukan :)

Menarik bukan, berikut kodenya selamat mencoba yha ^^
<style type="text/css">
.ratakiri { text-align: left; color: blue; }
.ratakanan { text-align: right; }
.ratatengah { text-align: center; color: red; }
.ratakirikanan { text-align: justify; }
</style>

<div class="ratakiri">
<b>Contoh artikel dengan rata kiri</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="ratakanan">
<b>Contoh artikel dengan rata kanan</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="ratatengah">
<b>Contoh artikel dengan rata tengah</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="ratakirikanan">
<b>Contoh artikel dengan rata kiri-kanan</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="ratakiri">
<b>Contoh artikel dengan rata kiri</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="ratakiri">
<b>Contoh artikel dengan rata kiri</b><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>

Hasilnya:

Coding Memasukan Video Dengan HTML5 dan PHP

Coding Memasukan Video Dengan HTML5 dan PHP

Bahasa pemrograman HTML berkembang dengan sangat pesat. Dengan HTML5 kita dapat memasukan video dan memutarnya dengan mudah. Dengan beberapa baris kode video dengan format populer seperti .mp4 dapat diputar dengan baik. HTML5 menjadi solusi untuk menampilkan web dengan audio video yang lebih ringan dan stabil.

Format video yang telah didukung juga cukup banyak. Namun format .mp4 masih cukup populer untuk digunakan. Kode untuk memutar video dapat menggunakan sintaks dibawah ini:

<video width="320" height="240" controls>
<source src="contoh-video.mp4" type="video/mp4">
Browser tidak mendukung
</video>

Namun ada kemungkinan beberapa browser mendukung format yang berbeda-beda. Dalam kode diatas terdapat beberapa atribut tambahan dari tag <video> yaitu:

controls berfungsi menampilkan navigasi control seperti tombol play, pause dan pengaturan lain.

autoplay berfungsi pemutar otomatis apabila file telah siap

loopberfungsi sebagai pemutar berulang-ulang apabila video telah selesai

muted berfungsi untuk melakukan mute pada audio

src berfungsi sebagai sumber URL video yang akan dimainkan. Apabila telah menggunakan tag <source> maka atribut src tidak diperlukan.

width & height berfungsi untuk mengatur lebar dan tinggi video yang akan ditampilkan

poster berfungsi sebagai sumber URL gambar thumbnail sebelum video di play atau pada saat sedang buffer.

Dengan pengaturan sederhana kita dapat membuat sebuah aplikasi pemutar video berbasis web yang cukup ringan dan mudah untuk dilakukan. Fungsi pemrograman PHP disini adalah untuk membuat tampilan aplikasi menjadi lebih dinamis. Misalnya aplikasi sederhana dalam menampilkan list beberapa video dimana user dapat memilih video mana yang ingin diputar dahulu.

Berikut adalah soucecode bagaimana membuat aplikasi pemutar video sederhana tersebut. contoh video diambil dari Youtube.

<?php
error_reporting(0);
?>
<b>Video Advertisement</b>
<hr>
<a href='?'>Home</a>
<hr>
<ul>
<li><a href='?id=01'>Iklan Mobil</a></li>
<li><a href='?id=02'>Iklan Mobil</a></li>
</ul>
<hr>
<?php
$id=trim($_GET['id']);
if(!empty($id))
{
$video = "iklan".$id.".mp4";
?>
<video width="480" height="320" controls>
<source src="<?php echo $video;?>" type="video/mp4">
Browser tidak mendukung
</video>
<?php
} else { echo "Video belum dipilih"; }
?>
?>
Selamat mencoba ya hasilnya dapat dilihat dibawah ini:
Hasil:

File video dan php

Tampilan aplikasi




Kegunaan If Else Pada PHP

Kegunaan If Else Pada PHP

Dalam pemrograman pasti ada suatu kondisi yang memerlukan hasil true atau false. Hal ini menjadi dasar dalam bekerjanya suatu program. Kadang kala kita melupakan setiap kemungkinan yang bisa terjadi apabila kita menerapkan penggunaan If Else. Pada dasarnya kondisi percabangan dapat dilakukan dengan menggunakan sintaks If Else yang berarti apabila kondisi/ekpresi bernilai true maka akan melakukan perintah/statement di dalam If apabila bernilai false maka akan melakukan perintah/statement di dalam else.

Penulisan If Else terdapat beberapa cara, namun yang umum digunakan adalah sebagai berikut:

If ( ekspresi ) { //perintah }
Else { //perintah }

Penggunaan If Else dapat kita terapkan dalam berbagai macam cara, misalnya untuk menentukan bilangan ganjil genap dimana jika hasil bernilai 0 maka angka yang dicek adalah bilangan genap, dan apabilai hasil bernilai 1 maka angka yang dicek adalah bilangan ganjil.

Contoh:
<?php
$angka = 8;
$hasill  = $angka%2;

If ( $hasil == 0 ) { echo “$angka = Bilangan Genap”; }
Else { echo “$angka = Bilangan Ganjil”; }
?>
Dalam kode program diatas hanya terdapat dua kondisi yaitu hasil = 0 atau tidak, tentunya apabila terdapat kondisi bertingkat maka akan terjadi bug atau kesalahan jika kita hanya menggunakan if else. Untuk mengatasi tersebut maka kita dapat menggunakan struktur percabangan bertingkat juga yaitu menggunakan If Else if Else.

Bagaimana menerapkan percabangan bertingkat? Banyak sekali kejadian di dunia nyata yang bisa coba kita terapakan dengan logika IF ini. Contohnya adalah menghitung grade nilai. Dalam perkuliahan bisanya nilai ditentukan dengan Grade A – E dimana masing-masing nilai mempunyai rangenya tersendiri. Sebagai contoh secara umum kita dapat menggunakan range dibawah ini.

Range Grade Nilai:
A = 80 – 100
B = 70 – 79
C = 60 – 69
D = 50 – 59
E = 0 – 49

Dengan syarat diatas maka kita dapat membuat percabangan dalam kode PHP sebagai berikut ini:
<?php
$nilai = 76;

If ($nilai >= 80 and $nilai <=100) { $grade = “A”; }
Else If ($nilai >= 70 and $nilai < 80) { $grade = “B”; }
Else If ($nilai >= 60 and $nilai < 70) { $grade = “C”; }
Else If ($nilai >= 50 and $nilai < 60) { $grade = “D”; }
Else { $grade = “E”; }

Echo “ Nilai $nilai memiliki grade $grade”;
//hasil
//Nilai 76 memiliki grade B
?> 
Kode diatas memiliki 5 tingkatan percabangan dimana apabila 4 kondisi pertama bernilai false maka perintah pada sintaks Else akan dikerjakan. Dalam kondisi atau ekspresi didalam if dan else if kita dapat memasukan logika “and” dan “or” untuk menghasilkan nilai true dan false seperti yang kita harapkan. Pernyataan bahwa $nilai < 80 adalah untuk mengatasi kemungkinan bug apabila nilai menggunakan desimal yaitu misalnya 79,8 dimana nilai tersebut kurang dari 80 sebagai syarat A namun lebih dari 79.

Cukup mudah bukan dalam memahaminya? Jadi hal ini juga bisa gunakan untuk membatasi hak akses pengguna misalnya dengan memberi kondisi terhadap pemanggilan halaman web seperti contoh berikut:
<?php
$halaman = isset($_GET[‘halaman’]?$_GET[‘halaman’]:””;
If ($halaman = “admin”) { include “admin.php”; }
Else if ($halaman = “staff”) { include “staff.php”;}
Else { include “beranda.php”; }
?>
Kode diatas terdiri dari tiga kondisi dimana jika halaman yang dipilih adalah admin maka menampilkan halaman admin, jika staff maka halaman staff sedangkan jika tidak ada halaman yang dipilih maka akan menampilkan beranda.

Masih banyak lagi kemungkinan-kemungkinan penggunaan fungsi If Else yang dapat kita terapkan untuk membantu pekerjaan yang dibutuhkan. Namun dasar dari penggunana If Else secara sederhana telah dijabarkan diatas yang dapat kita pelajari dan terapkan dengan mudah. Selamat mencoba ya :)
Back To Top